/* ==========================================================================
   SERVICE LANDING PAGES — shared component library
   One design system, reused with layout variant modifiers so each of the
   14 service pages can tell its own visual story without diverging from
   the TechSmiths look. Base classes are prefixed `svc-`.
   ========================================================================== */

.svc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #6C4BFF; font: 700 12px/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; }
.svc-eyebrow svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- INTRO */
.svc-intro { padding: clamp(70px,8vw,110px) 0; background: #fff; }
.svc-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.svc-intro--media-left .svc-intro-grid { direction: rtl; }
.svc-intro--media-left .svc-intro-grid > * { direction: ltr; }
.svc-intro-copy h2 { margin: 0 0 20px; color: #111118; font: 800 clamp(32px,3.8vw,50px)/1.08 var(--font-head); letter-spacing: -.03em; }
.svc-intro-copy p { margin: 0 0 16px; color: #55556a; font: 400 16px/1.75 var(--font-body); max-width: 520px; }
.svc-intro-media { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(17,17,24,.14); }
.svc-intro-media img { width: 100%; height: 440px; object-fit: cover; display: block; }
@media (max-width: 900px) { .svc-intro-grid, .svc-intro--media-left .svc-intro-grid { grid-template-columns: 1fr; direction: ltr; gap: 30px; } .svc-intro-media img { height: 280px; } }

/* ------------------------------------------------------------- WHAT WE OFFER */
.svc-offer { padding: clamp(70px,8vw,110px) 0; background: #F8F7FC; }
.svc-head { max-width: 640px; margin: 0 0 44px; }
.svc-head.svc-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.svc-head h2 { margin: 0; color: #111118; font: 800 clamp(30px,3.6vw,46px)/1.1 var(--font-head); letter-spacing: -.03em; }
.svc-head p { margin: 14px 0 0; color: #666672; font: 400 15px/1.7 var(--font-body); }

.svc-offer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.svc-offer-item { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #ECE9F5; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.svc-offer-item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(108,75,255,.12); border-color: #DCD3F9; }
.svc-offer-item .svc-num { display: block; margin-bottom: 12px; color: #C7B9FF; font: 800 12px/1 var(--font-head); letter-spacing: .06em; }
.svc-offer-item h3 { margin: 0; color: #111118; font: 700 16.5px/1.3 var(--font-head); letter-spacing: -.01em; }
@media (max-width: 900px) { .svc-offer-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svc-offer-grid { grid-template-columns: 1fr; } }

/* Tag-cloud offer variant */
.svc-offer-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-offer-tag { padding: 13px 22px; border-radius: 100px; background: #fff; border: 1px solid #ECE9F5; color: #111118; font: 600 14px/1 var(--font-head); transition: .3s ease; }
.svc-offer-tag:hover { background: #6C4BFF; border-color: #6C4BFF; color: #fff; transform: translateY(-3px); }

/* Bento offer variant (reuses the bento vocabulary at a new selector) */
.svc-offer-bento { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 170px; gap: 16px; }
.svc-offer-bento .svc-tile { position: relative; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #ECE9F5; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s ease, box-shadow .35s ease; }
.svc-offer-bento .svc-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(108,75,255,.14); }
.svc-offer-bento .svc-tile-lg { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg,#6C4BFF,#8B5CF6); border: none; color: #fff; }
.svc-offer-bento .svc-tile h3 { margin: 0 0 6px; font: 700 18px/1.25 var(--font-head); letter-spacing: -.01em; }
.svc-offer-bento .svc-tile-lg h3 { font-size: 24px; }
.svc-offer-bento .svc-tile p { margin: 0; font: 400 13px/1.5 var(--font-body); color: #666672; }
.svc-offer-bento .svc-tile-lg p { color: rgba(255,255,255,.88); }
@media (max-width: 900px) { .svc-offer-bento { grid-template-columns: repeat(2,1fr); } .svc-offer-bento .svc-tile-lg { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .svc-offer-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .svc-offer-bento .svc-tile-lg { grid-column: span 1; } }

/* ------------------------------------------------------------- PROBLEMS WE SOLVE */
.svc-problems { padding: clamp(60px,7vw,100px) 0; background: #111118; color: #fff; }
.svc-problems .svc-head h2 { color: #fff; }
.svc-problems .svc-head p { color: rgba(255,255,255,.6); }
.svc-problems-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; }
.svc-problem-row { display: flex; align-items: center; gap: 16px; padding: 22px 26px; background: #111118; }
.svc-problem-row svg { flex-shrink: 0; width: 20px; height: 20px; color: #A785FF; }
.svc-problem-row span { color: rgba(255,255,255,.85); font: 500 14.5px/1.5 var(--font-body); }
@media (max-width: 700px) { .svc-problems-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- FEATURE / CAPABILITY (custom per service) */
.svc-feature { padding: clamp(70px,8vw,110px) 0; background: #fff; overflow: hidden; }
.svc-feature-head { max-width: 700px; margin: 0 auto 50px; text-align: center; }
.svc-feature-head h2 { margin: 0; color: #111118; font: 800 clamp(30px,3.6vw,46px)/1.1 var(--font-head); letter-spacing: -.03em; }
.svc-feature-head p { margin: 14px 0 0; color: #666672; font: 400 15px/1.7 var(--font-body); }

/* -- workflow-nodes (AI Automation) -- */
.svc-workflow { position: relative; max-width: 980px; margin: 0 auto; }
.svc-workflow-line { position: absolute; left: 34px; top: 34px; bottom: 34px; width: 2px; background: #ECE9F5; z-index: 0; }
.svc-workflow-line-fill { display: block; width: 100%; height: 0%; background: linear-gradient(180deg,#6C4BFF,#A785FF); }
.svc-workflow-nodes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 34px; }
.svc-node { display: grid; grid-template-columns: 68px 1fr; gap: 22px; align-items: flex-start; opacity: 0; }
.svc-node-dot { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 2px solid #ECE9F5; color: #6C4BFF; transition: border-color .4s ease, background .4s ease, color .4s ease; }
.svc-node.is-active .svc-node-dot { border-color: #6C4BFF; background: #6C4BFF; color: #fff; }
.svc-node-dot svg { width: 26px; height: 26px; }
.svc-node-copy { padding-top: 10px; }
.svc-node-copy h3 { margin: 0 0 8px; color: #111118; font: 700 19px/1.25 var(--font-head); }
.svc-node-copy p { margin: 0; color: #666672; font: 400 14px/1.6 var(--font-body); max-width: 480px; }
@media (max-width: 640px) { .svc-workflow-line { left: 26px; } .svc-node { grid-template-columns: 52px 1fr; gap: 16px; } .svc-node-dot { width: 52px; height: 52px; } .svc-node-dot svg { width: 20px; height: 20px; } }

/* -- device mockups (Website / Mobile App / E-commerce) -- */
.svc-mockup-wrap { display: flex; justify-content: center; }
.svc-browser { width: 100%; max-width: 880px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #E7E5EE; box-shadow: 0 40px 90px rgba(17,17,24,.16); }
.svc-browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #F2ECFF; }
.svc-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #DCD3F9; }
.svc-browser-screen { display: block; width: 100%; height: clamp(260px,38vw,460px); object-fit: cover; }

.svc-phone-row { display: flex; justify-content: center; gap: clamp(20px,4vw,44px); }
.svc-phone { position: relative; width: clamp(150px,18vw,220px); border-radius: 34px; overflow: hidden; background: #111118; border: 6px solid #111118; box-shadow: 0 34px 70px rgba(17,17,24,.22); }
.svc-phone img { display: block; width: 100%; height: clamp(300px,36vw,440px); object-fit: cover; }
.svc-phone-mid { transform: translateY(-22px); }
@media (max-width: 700px) { .svc-phone-row { gap: 14px; } .svc-phone-mid { transform: translateY(-10px); } }

/* -- horizontal flow (E-commerce journey / Email journey) -- */
.svc-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px,1fr); gap: 18px; max-width: 1100px; margin: 0 auto; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.svc-flow-step { position: relative; padding: 26px 22px; border-radius: 18px; background: #F8F7FC; border: 1px solid #ECE9F5; }
.svc-flow-step .svc-num { display: block; margin-bottom: 14px; color: #6C4BFF; font: 800 13px/1 var(--font-head); }
.svc-flow-step h3 { margin: 0 0 6px; color: #111118; font: 700 15.5px/1.3 var(--font-head); }
.svc-flow-step p { margin: 0; color: #666672; font: 400 12.5px/1.5 var(--font-body); }
.svc-flow-step:not(:last-child)::after { content: ""; position: absolute; right: -18px; top: 50%; width: 14px; height: 14px; border-top: 2px solid #C7B9FF; border-right: 2px solid #C7B9FF; transform: translateY(-50%) rotate(45deg); }
@media (max-width: 700px) { .svc-flow { grid-auto-flow: row; grid-auto-columns: unset; overflow-x: visible; } .svc-flow-step:not(:last-child)::after { display: none; } }

/* -- search / SEO console -- */
.svc-console { max-width: 900px; margin: 0 auto; border-radius: 20px; background: #111118; padding: clamp(24px,4vw,40px); box-shadow: 0 34px 80px rgba(17,17,24,.2); }
.svc-console-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; margin-bottom: 22px; border-radius: 12px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); font: 400 13px/1 var(--font-body); }
.svc-console-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
.svc-console-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.svc-console-tile { padding: 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.svc-console-tile strong { display: block; margin-bottom: 6px; color: #fff; font: 800 26px/1 var(--font-head); }
.svc-console-tile span { color: rgba(255,255,255,.55); font: 600 12px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }

/* -- social feed tiles -- */
.svc-feed { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; max-width: 980px; margin: 0 auto; }
.svc-feed-tile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
.svc-feed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-feed-tile span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 100px; background: rgba(17,17,24,.65); color: #fff; font: 700 12px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) { .svc-feed { grid-template-columns: repeat(2,1fr); } }

/* -- bento design wall -- */
.svc-wall { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 150px; gap: 14px; max-width: 1080px; margin: 0 auto; }
.svc-wall img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; }
.svc-wall-a { grid-column: span 2; grid-row: span 2; }
.svc-wall-b { grid-column: span 2; }
@media (max-width: 900px) { .svc-wall { grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; } .svc-wall-a { grid-column: span 2; grid-row: span 2; } .svc-wall-b { grid-column: span 1; } }

/* -- storyboard / film strip (Video / DVC-TVC) -- */
.svc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px,1fr); gap: 12px; max-width: 1100px; margin: 0 auto; overflow-x: auto; padding: 6px 6px 16px; }
.svc-strip-frame { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; background: #111118; }
.svc-strip-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.svc-strip-frame span { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 6px; background: rgba(17,17,24,.6); color: #fff; font: 700 12px/1 var(--font-head); }

/* -- split panel general fallback -- */
.svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; }
.svc-split-media { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(17,17,24,.14); }
.svc-split-media img { width: 100%; height: 420px; object-fit: cover; display: block; }
.svc-split-copy h3 { margin: 0 0 14px; color: #111118; font: 700 26px/1.2 var(--font-head); letter-spacing: -.02em; }
.svc-split-copy p { margin: 0 0 12px; color: #55556a; font: 400 15px/1.7 var(--font-body); }
@media (max-width: 900px) { .svc-split { grid-template-columns: 1fr; gap: 26px; } .svc-split-media img { height: 260px; } }

/* -- DVC/TVC split cards -- */
.svc-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.svc-dual-card { padding: clamp(28px,4vw,40px); border-radius: 22px; border: 1px solid #ECE9F5; background: #F8F7FC; }
.svc-dual-card.is-dark { background: #111118; color: #fff; border-color: #111118; }
.svc-dual-card h3 { margin: 0 0 10px; font: 800 24px/1.15 var(--font-head); letter-spacing: -.02em; }
.svc-dual-card > p { margin: 0 0 18px; font: 400 14px/1.6 var(--font-body); opacity: .8; }
.svc-dual-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-dual-tags span { padding: 6px 13px; border-radius: 100px; background: #fff; border: 1px solid #ECE9F5; color: #111118; font: 600 12px/1 var(--font-head); }
.is-dark .svc-dual-tags span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 700px) { .svc-dual { grid-template-columns: 1fr; } }

.svc-balance { max-width: 760px; margin: 0 auto; text-align: center; }
.svc-balance-scale { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.svc-balance-scale span { padding: 10px 18px; border-radius: 100px; background: #F2ECFF; color: #6C4BFF; font: 700 13px/1 var(--font-head); }

/* ------------------------------------------------------------- PROCESS */
.svc-process { padding: clamp(70px,8vw,110px) 0; background: #F8F7FC; }
.svc-process-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--steps,6),1fr); gap: 18px; max-width: 1180px; margin: 0 auto; }
.svc-process-line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: #E4E1EF; z-index: 0; }
.svc-process-line-fill { display: block; height: 100%; width: 0%; background: #6C4BFF; }
.svc-process-step { position: relative; z-index: 1; text-align: center; }
.svc-process-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; background: #fff; border: 2px solid #6C4BFF; color: #6C4BFF; font: 800 14px/1 var(--font-head); }
.svc-process-step h3 { margin: 0 0 6px; color: #111118; font: 700 15.5px/1.2 var(--font-head); }
.svc-process-step p { margin: 0; color: #666672; font: 400 12.5px/1.5 var(--font-body); }
@media (max-width: 900px) { .svc-process-timeline { grid-template-columns: repeat(3,1fr); row-gap: 34px; } .svc-process-line { display: none; } }
@media (max-width: 560px) { .svc-process-timeline { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- DELIVERABLES */
.svc-deliverables { padding: clamp(60px,7vw,90px) 0; background: #fff; }
.svc-deliv-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 1000px; margin: 0 auto; }
.svc-deliv-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #F8F7FC; border: 1px solid #ECE9F5; }
.svc-deliv-item svg { flex-shrink: 0; width: 18px; height: 18px; color: #6C4BFF; }
.svc-deliv-item span { color: #111118; font: 600 13.5px/1.3 var(--font-head); }
@media (max-width: 700px) { .svc-deliv-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .svc-deliv-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- TOOLS */
.svc-tools { padding: clamp(50px,6vw,80px) 0; background: #F8F7FC; }
.svc-tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }
.svc-tool-chip { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 100px; background: #fff; border: 1px solid #E7E5EE; color: #111118; font: 700 13px/1 var(--font-head); }

/* ------------------------------------------------------------- WHY TECHSMITHS variants */
.svc-why { padding: clamp(70px,8vw,110px) 0; background: #fff; }
.svc-why--strip .svc-why-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.svc-why--strip .svc-why-item { padding: 26px 24px; border-radius: 16px; background: #F8F7FC; border-left: 3px solid #6C4BFF; }
.svc-why--strip .svc-why-item h3 { margin: 0 0 8px; color: #111118; font: 700 16px/1.3 var(--font-head); }
.svc-why--strip .svc-why-item p { margin: 0; color: #666672; font: 400 13.5px/1.55 var(--font-body); }
@media (max-width: 900px) { .svc-why--strip .svc-why-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svc-why--strip .svc-why-list { grid-template-columns: 1fr; } }

.svc-why--dark { background: #111118; color: #fff; }
.svc-why--dark .svc-head h2 { color: #fff; }
.svc-why--dark .svc-why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.svc-why--dark .svc-why-item { padding: 26px 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.svc-why--dark .svc-why-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); padding-right: 26px; }
.svc-why--dark .svc-why-item:nth-child(even) { padding-left: 26px; }
.svc-why--dark .svc-why-item h3 { margin: 0 0 6px; color: #fff; font: 700 17px/1.3 var(--font-head); }
.svc-why--dark .svc-why-item p { margin: 0; color: rgba(255,255,255,.6); font: 400 13.5px/1.55 var(--font-body); }
@media (max-width: 700px) { .svc-why--dark .svc-why-list { grid-template-columns: 1fr; } .svc-why--dark .svc-why-item:nth-child(odd) { border-right: none; padding-right: 8px; } .svc-why--dark .svc-why-item:nth-child(even) { padding-left: 8px; } }

.svc-why--numbered .svc-why-list { display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; }
.svc-why--numbered .svc-why-item { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid #ECE9F5; align-items: baseline; }
.svc-why--numbered .svc-why-num { color: #C7B9FF; font: 800 18px/1 var(--font-head); }
.svc-why--numbered .svc-why-item h3 { margin: 0 0 6px; color: #111118; font: 700 18px/1.2 var(--font-head); }
.svc-why--numbered .svc-why-item p { margin: 0; color: #666672; font: 400 14px/1.6 var(--font-body); }
@media (max-width: 600px) { .svc-why--numbered .svc-why-item { grid-template-columns: 1fr; gap: 4px; } }

/* ------------------------------------------------------------- INDUSTRIES */
.svc-industries { padding: clamp(50px,6vw,80px) 0; background: #F2ECFF; }
.svc-industries-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 920px; margin: 0 auto; }
.svc-industry-chip { padding: 11px 20px; border-radius: 100px; background: #fff; color: #6C4BFF; font: 700 13px/1 var(--font-head); border: 1px solid #E3D9FF; }

/* ------------------------------------------------------------- MID-PAGE CTA */
.svc-cta { padding: clamp(60px,7vw,90px) 0; }
.svc-cta-inner { max-width: 900px; margin: 0 auto; padding: clamp(36px,5vw,56px); border-radius: 28px; background: linear-gradient(135deg,#11143f 0%,#171b59 58%,#241047 100%); color: #fff; text-align: center; }
.svc-cta-inner h2 { margin: 0 0 14px; font: 800 clamp(26px,3vw,36px)/1.15 var(--font-head); letter-spacing: -.02em; }
.svc-cta-inner p { margin: 0 auto 28px; max-width: 560px; color: rgba(255,255,255,.72); font: 400 15px/1.7 var(--font-body); }
.svc-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 100px; background: #6C4BFF; color: #fff; font: 700 14px/1 var(--font-head); text-decoration: none; transition: background .25s ease, transform .25s ease; }
.svc-cta-btn:hover { background: #5a3ce0; transform: translateY(-2px); }
.svc-cta-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- FAQ */
.svc-faq { padding: clamp(70px,8vw,110px) 0; background: #F8F7FC; }
.svc-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.svc-faq-row { border: 1px solid #E4E1EF; border-radius: 16px; background: #fff; overflow: hidden; }
.svc-faq-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left; }
.svc-faq-trigger h3 { margin: 0; color: #111118; font: 700 15.5px/1.35 var(--font-head); }
.svc-faq-caret { flex-shrink: 0; width: 18px; height: 18px; color: #6C4BFF; transition: transform .3s ease; }
.svc-faq-trigger[aria-expanded="true"] .svc-faq-caret { transform: rotate(180deg); }
.svc-faq-panel { padding: 0 24px 22px; }
.svc-faq-panel p { margin: 0; color: #55556a; font: 400 14.5px/1.65 var(--font-body); }

/* ------------------------------------------------------------- RELATED SERVICES */
.svc-related { padding: clamp(60px,7vw,90px) 0; background: #fff; }
.svc-related-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.svc-related-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: 16px; background: #F8F7FC; border: 1px solid #ECE9F5; text-decoration: none; transition: .3s ease; }
.svc-related-card:hover { background: #F2ECFF; border-color: #DCD3F9; transform: translateY(-3px); }
.svc-related-card span { color: #111118; font: 700 15px/1.3 var(--font-head); }
.svc-related-card svg { flex-shrink: 0; width: 16px; height: 16px; color: #6C4BFF; }

/* ------------------------------------------------------------- STATS COUNT-UP strip */
.svc-stats { display: flex; flex-wrap: wrap; gap: clamp(24px,5vw,60px); margin-top: 34px; }
.svc-stat strong { display: block; font: 800 clamp(30px,3.4vw,44px)/1 var(--font-head); color: #111118; }
.svc-stat span { display: block; margin-top: 6px; color: #666672; font: 600 12px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }

/* ==========================================================================
   TSWD — Website Development page body: hero / offer / why / process / CTA /
   FAQ heading. Layout and section flow follow the supplied design; color,
   type, pill buttons, radii and spacing use the TechSmiths tokens above.
   Sits between the shared inner hero and the shared FAQ / testimonials /
   project CTA / footer, which are untouched.
   ========================================================================== */
.tswd-section { --tswd-grad: linear-gradient(90deg,#E600FF,#6C4BFF,#365CFF); --tswd-grad-icon: linear-gradient(135deg,#6C4BFF,#365CFF); position: relative; padding: clamp(70px,8vw,110px) 0; background: #fff; }
.tswd-grid { display: grid; gap: clamp(36px,4vw,60px); }
.tswd-two { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; }

/* ---- shared text + buttons ---- */
.tswd-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 9px 16px; border-radius: 100px; background: #F2ECFF; color: #6C4BFF; font: 700 12px/1 var(--font-head); letter-spacing: .04em; }
.tswd-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tswd-grad); box-shadow: 0 0 0 5px rgba(108,75,255,.14); }
.tswd-title { margin: 0 0 20px; color: #111118; font: 800 clamp(34px,4.4vw,58px)/1.1 var(--font-head); letter-spacing: -.03em; }
.tswd-nb { white-space: nowrap; }
.tswd-title--md { font-size: clamp(30px,3.6vw,46px); line-height: 1.14; }
.tswd-title > span { background: var(--tswd-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tswd-text { margin: 0; max-width: 580px; color: #55556a; font: 400 16px/1.75 var(--font-body); }
.tswd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tswd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 100px; font: 700 14px/1 var(--font-head); text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.tswd-btn svg { flex-shrink: 0; width: 16px; height: 16px; transition: transform .25s ease; }
.tswd-btn:hover { transform: translateY(-2px); }
.tswd-btn:hover svg { transform: translateX(3px); }
.tswd-btn-primary { background: var(--tswd-grad); color: #fff; }
.tswd-btn-primary:hover { box-shadow: 0 16px 34px rgba(108,75,255,.32); }
.tswd-btn-outline { background: #fff; color: #111118; border: 1px solid #E4E2EA; }
.tswd-btn-outline:hover { border-color: #6C4BFF; color: #6C4BFF; }
.tswd-btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(10px); }
.tswd-btn-glass:hover { background: rgba(255,255,255,.18); }
.tswd-head { max-width: 780px; margin: 0 auto clamp(34px,4vw,48px); text-align: center; }
.tswd-head h2 { margin: 0 0 14px; color: #111118; font: 800 clamp(28px,3.4vw,44px)/1.15 var(--font-head); letter-spacing: -.03em; }
.tswd-head p { margin: 0 auto; max-width: 700px; color: #666672; font: 400 16px/1.75 var(--font-body); }

/* ---- hero ---- */
.tswd-hero { padding-top: clamp(56px,6vw,84px); padding-bottom: clamp(70px,7vw,100px); background: radial-gradient(circle at 4% 8%,rgba(230,0,255,.06),transparent 30%), radial-gradient(circle at 96% 10%,rgba(54,92,255,.07),transparent 30%), #fff; }
.tswd-mini-points { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.tswd-mini-points li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px 10px 11px; border-radius: 100px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 10px 24px rgba(17,17,24,.04); color: #111118; font: 600 13px/1 var(--font-head); }
.tswd-mini-points li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #6C4BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.tswd-hero-visual { position: relative; }
.tswd-image-wrap { min-width: 0; }
.tswd-image-wrap img { width: 100%; height: clamp(320px,34vw,540px); object-fit: cover; border-radius: 26px; border: 1px solid #ECE9F5; box-shadow: 0 40px 90px rgba(17,17,24,.16); }
.tswd-floating { position: absolute; z-index: 3; max-width: 290px; padding: 15px 17px; border-radius: 16px; background: rgba(255,255,255,.95); border: 1px solid #ECE9F5; backdrop-filter: blur(14px); box-shadow: 0 20px 44px rgba(17,17,24,.14); animation: tswdFloat 5s ease-in-out infinite; }
.tswd-floating small { display: block; margin-bottom: 6px; color: #6C4BFF; font: 800 12px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.tswd-floating strong { display: block; color: #111118; font: 700 14.5px/1.45 var(--font-head); }
.tswd-floating.one { top: 30px; right: -18px; }
.tswd-floating.two { left: -26px; bottom: 86px; animation-delay: 1.3s; }
.tswd-floating.three { right: 30px; bottom: -22px; animation-delay: 2.1s; }
@keyframes tswdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.tswd-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: clamp(40px,4vw,56px); }
.tswd-stat { padding: 26px 22px; border-radius: 20px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 18px 44px rgba(17,17,24,.07); transition: transform .3s ease, box-shadow .3s ease; }
.tswd-stat:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(108,75,255,.14); }
.tswd-stat strong { display: block; margin-bottom: 8px; color: #6C4BFF; font: 800 32px/1 var(--font-head); }
.tswd-stat:nth-child(1) strong { color: #E600A8; }
.tswd-stat:nth-child(3) strong { color: #365CFF; }
.tswd-stat p { margin: 0; color: #666672; font: 400 13.5px/1.6 var(--font-body); }

/* ---- what we offer ---- */
.tswd-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.tswd-card { position: relative; overflow: hidden; padding: 30px 26px; border-radius: 22px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 16px 44px rgba(17,17,24,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.tswd-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tswd-grad); opacity: 0; transition: opacity .3s ease; }
.tswd-card:hover { transform: translateY(-8px); border-color: #DCD3F9; box-shadow: 0 26px 56px rgba(108,75,255,.14); }
.tswd-card:hover::before { opacity: 1; }
.tswd-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 18px; background: linear-gradient(135deg,rgba(108,75,255,.13),rgba(54,92,255,.13)); color: #6C4BFF; }
.tswd-icon svg { width: 28px; height: 28px; stroke: currentColor; }
.tswd-card h3 { margin: 0 0 10px; color: #111118; font: 700 19px/1.3 var(--font-head); letter-spacing: -.01em; }
.tswd-card p { margin: 0; color: #666672; font: 400 14.5px/1.7 var(--font-body); }

/* ---- why ---- */
.tswd-soft { background: radial-gradient(circle at 0% 20%,rgba(230,0,255,.05),transparent 28%), radial-gradient(circle at 100% 20%,rgba(54,92,255,.06),transparent 28%), #F7F5FF; }
.tswd-side-image { padding: 12px; border-radius: 30px; overflow: hidden; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 30px 70px rgba(17,17,24,.1); }
.tswd-side-image img { width: 100%; height: clamp(320px,38vw,540px); object-fit: cover; border-radius: 20px; }
.tswd-list { display: grid; gap: 14px; margin-top: 26px; }
.tswd-list-item { display: flex; align-items: flex-start; gap: 15px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 10px 26px rgba(17,17,24,.05); transition: transform .3s ease, box-shadow .3s ease; }
.tswd-list-item:hover { transform: translateX(8px); box-shadow: 0 16px 36px rgba(108,75,255,.12); }
.tswd-list-icon { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 13px; background: var(--tswd-grad-icon); color: #fff; }
.tswd-list-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.tswd-list-item h3 { margin: 0 0 5px; color: #111118; font: 700 16.5px/1.3 var(--font-head); }
.tswd-list-item p { margin: 0; color: #666672; font: 400 14px/1.65 var(--font-body); }

/* ---- process ---- */
.tswd-process { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.tswd-step { position: relative; overflow: hidden; padding: 30px 26px; border-radius: 22px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 16px 44px rgba(17,17,24,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.tswd-step::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; background: rgba(108,75,255,.07); }
.tswd-step:hover { transform: translateY(-8px); border-color: #DCD3F9; box-shadow: 0 26px 56px rgba(108,75,255,.14); }
.tswd-step-no { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 20px; background: var(--tswd-grad-icon); color: #fff; box-shadow: 0 16px 32px rgba(108,75,255,.26); }
.tswd-step-no svg { width: 28px; height: 28px; stroke: currentColor; }
.tswd-step h3 { position: relative; z-index: 1; margin: 0 0 10px; color: #111118; font: 700 19px/1.3 var(--font-head); letter-spacing: -.01em; }
.tswd-step p { position: relative; z-index: 1; margin: 0; color: #666672; font: 400 14.5px/1.7 var(--font-body); }

/* ---- CTA ---- */
.tswd-cta-section { padding-top: 0; }
.tswd-cta-box { position: relative; overflow: hidden; padding: clamp(32px,5vw,58px); border-radius: 30px; color: #fff; background: linear-gradient(135deg,#11143f 0%,#171b59 58%,#241047 100%); box-shadow: 0 30px 78px rgba(17,20,63,.22); }
.tswd-cta-box::before { content: ""; position: absolute; left: -85px; bottom: -95px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.06); }
.tswd-cta-box::after { content: ""; position: absolute; right: -130px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle,rgba(230,0,255,.2),rgba(54,92,255,.1),transparent 70%); }
.tswd-cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 48px; align-items: center; }
.tswd-cta-box .tswd-badge { background: rgba(255,255,255,.12); color: #fff; }
.tswd-cta-copy h2 { margin: 0 0 16px; color: #fff; font: 800 clamp(30px,3.6vw,50px)/1.12 var(--font-head); letter-spacing: -.03em; }
.tswd-cta-copy p { margin: 0; max-width: 540px; color: rgba(255,255,255,.78); font: 400 16px/1.75 var(--font-body); }
.tswd-animated-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; overflow: hidden; border-radius: 28px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.tswd-animated-visual::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle,rgba(230,0,255,.34),rgba(54,92,255,.08),transparent 70%); animation: tswdPulseGlow 4s ease-in-out infinite; }
.tswd-visual-orbit { position: relative; display: flex; align-items: center; justify-content: center; width: 280px; height: 280px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.28); animation: tswdRotateSlow 18s linear infinite; }
.tswd-orbit-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 22px rgba(255,255,255,.7); transform: translate(-50%,-50%); }
.tswd-orbit-dot.dot-1 { left: 50%; top: 0; }
.tswd-orbit-dot.dot-2 { left: 6.7%; top: 75%; background: #E600FF; box-shadow: 0 0 22px rgba(230,0,255,.75); }
.tswd-orbit-dot.dot-3 { left: 93.3%; top: 75%; background: #365CFF; box-shadow: 0 0 22px rgba(54,92,255,.8); }
.tswd-center-glow { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 196px; min-height: 196px; padding: 16px; border-radius: 28px; text-align: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(16px); animation: tswdCounterRotate 18s linear infinite; }
.tswd-code-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 10px; border-radius: 16px; background: linear-gradient(135deg,#E600FF,#365CFF); color: #fff; box-shadow: 0 16px 34px rgba(54,92,255,.3); }
.tswd-code-icon svg { width: 26px; height: 26px; stroke: currentColor; }
.tswd-center-glow h3 { margin: 0 0 6px; color: #fff; font: 700 18px/1.2 var(--font-head); }
.tswd-center-glow p { margin: 0; color: rgba(255,255,255,.78); font: 400 12px/1.45 var(--font-body); }
.tswd-mini-service-card { position: absolute; width: 170px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(16px); box-shadow: 0 18px 45px rgba(0,0,0,.14); animation: tswdFloatCard 5s ease-in-out infinite; }
.tswd-mini-service-card strong { display: block; margin-bottom: 4px; color: #fff; font: 700 14px/1.25 var(--font-head); }
.tswd-mini-service-card span { display: block; color: rgba(255,255,255,.75); font: 400 12px/1.45 var(--font-body); }
.tswd-mini-service-card.card-a { top: 18px; left: 18px; }
.tswd-mini-service-card.card-b { top: 18px; right: 18px; animation-delay: 1.2s; }
.tswd-mini-service-card.card-c { bottom: 18px; left: calc(50% - 85px); animation-delay: 2s; }
@keyframes tswdRotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tswdCounterRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes tswdPulseGlow { 0%,100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes tswdFloatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- hero visual: SEO dashboard mock (SEO page) ---- */
.tswd-seo-mock { display: flex; align-items: center; min-height: clamp(320px,34vw,540px); padding: clamp(14px,2vw,26px); border-radius: 26px; border: 1px solid #ECE9F5; background: radial-gradient(circle at 12% 10%,rgba(230,0,255,.1),transparent 34%), radial-gradient(circle at 92% 8%,rgba(54,92,255,.12),transparent 34%), linear-gradient(135deg,#FBF9FF,#F4F6FF); box-shadow: 0 40px 90px rgba(17,17,24,.16); }
.tswd-seo-window { width: 100%; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 24px 54px rgba(17,17,24,.12); }
.tswd-seo-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #F0EDF8; }
.tswd-seo-bar > i { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #FF6B6B; }
.tswd-seo-bar > i:nth-child(2) { background: #FFC24B; }
.tswd-seo-bar > i:nth-child(3) { background: #3DD68C; }
.tswd-seo-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin-left: 10px; padding: 7px 12px; border-radius: 100px; background: #F5F3FC; color: #666672; font: 500 12px/1 var(--font-body); }
.tswd-seo-search svg { flex-shrink: 0; width: 14px; height: 14px; color: #6C4BFF; }
.tswd-seo-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tswd-seo-body { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.5fr); gap: 14px; padding: 18px; }
.tswd-seo-panel { padding: 16px; border-radius: 14px; background: #F8F7FC; border: 1px solid #ECE9F5; }
.tswd-seo-panel b { display: block; color: #111118; font: 700 12px/1.3 var(--font-head); }
.tswd-seo-intro { grid-row: span 2; }
.tswd-seo-intro strong { display: block; margin-bottom: 2px; color: #111118; font: 800 28px/1.1 var(--font-head); letter-spacing: -.02em; }
.tswd-seo-intro b { margin-bottom: 8px; color: #6C4BFF; font-size:12px; }
.tswd-seo-intro p { margin: 0 0 12px; color: #666672; font: 400 12px/1.5 var(--font-body); }
.tswd-seo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tswd-seo-tags span { padding: 5px 9px; border-radius: 100px; background: #fff; border: 1px solid #E3D9FF; color: #6C4BFF; font: 700 9.5px/1 var(--font-head); }
.tswd-seo-tags span:nth-child(3) { border-color: #F6C9EE; color: #E600A8; }
.tswd-seo-tags span:nth-child(4) { border-color: #BFE8CF; color: #16A34A; }
.tswd-seo-chart { position: relative; }
.tswd-seo-chart em { position: absolute; top: 12px; right: 14px; padding: 4px 8px; border-radius: 100px; background: #E9FBF1; color: #16A34A; font: 800 12px/1 var(--font-head); font-style: normal; }
.tswd-seo-chart svg { display: block; width: 100%; height: 104px; margin-top: 14px; }
.tswd-seo-lower { grid-column: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.tswd-seo-meter { display: block; height: 7px; margin-top: 10px; overflow: hidden; border-radius: 100px; background: #ECE9F5; }
.tswd-seo-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#E600FF,#6C4BFF); }
.tswd-seo-meter--blue i { background: linear-gradient(90deg,#6C4BFF,#365CFF); }
.tswd-seo-panel small { display: block; margin-top: 9px; color: #666672; font: 500 9.5px/1 var(--font-body); }
.tswd-seo-panel ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.tswd-seo-panel li { position: relative; padding-left: 17px; color: #444455; font: 500 12px/1.3 var(--font-body); }
.tswd-seo-panel li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/7px no-repeat; }
.tswd-hero-visual--seo .tswd-seo-mock { align-items: flex-start; min-height: clamp(400px,42vw,620px); }
@media (min-width: 1180px) {
  .tswd-hero-visual--seo .tswd-floating.one { top: -22px; }
  .tswd-hero-visual--seo .tswd-floating.two { bottom: 56px; }
}
@media (max-width: 1179px) { .tswd-hero-visual--seo .tswd-seo-mock { min-height: 0; } }
@media (max-width: 560px) {
  .tswd-seo-body { grid-template-columns: minmax(0,1fr); }
  .tswd-seo-intro { grid-row: auto; }
  .tswd-seo-lower { grid-column: auto; }
}

/* ---- FAQ (shared svc-faq accordion, page-specific head + note) ---- */
.tswd-faq .svc-faq-list { max-width: 940px; }
.tswd-faq-note { max-width: 820px; margin: 28px auto 0; text-align: center; color: #666672; font: 400 13.5px/1.7 var(--font-body); }

/* ---- responsive ---- */
@media (max-width: 1179px) {
  .tswd-hero-visual { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
  .tswd-floating { position: static; max-width: none; animation: none; }
}
@media (max-width: 1024px) {
  .tswd-two, .tswd-cta-grid { grid-template-columns: minmax(0,1fr); }
  .tswd-cards, .tswd-process, .tswd-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tswd-text { max-width: 720px; }
  .tswd-image-wrap img { height: clamp(300px,52vw,440px); }
  .tswd-side-image img { height: clamp(300px,50vw,420px); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tswd-hero-visual { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tswd-image-wrap { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .tswd-actions { flex-direction: column; }
  .tswd-btn { width: 100%; }
  .tswd-cards, .tswd-process, .tswd-stats { grid-template-columns: minmax(0,1fr); }
  .tswd-card, .tswd-step, .tswd-stat { padding: 24px 20px; border-radius: 20px; }
  .tswd-image-wrap img { height: 300px; border-radius: 22px; }
  .tswd-side-image { padding: 10px; border-radius: 22px; }
  .tswd-side-image img { height: 280px; border-radius: 16px; }
  .tswd-cta-box { padding: 30px 20px; border-radius: 26px; }
  .tswd-animated-visual { min-height: 340px; }
  .tswd-visual-orbit { width: 262px; height: 262px; }
  .tswd-center-glow { width: 178px; min-height: 178px; padding: 14px; }
  .tswd-center-glow h3 { font-size: 16px; }
  .tswd-center-glow p { font-size:12px; }
  .tswd-mini-service-card { display: none; }
  .tswd-list-item:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tswd-floating, .tswd-mini-service-card, .tswd-visual-orbit, .tswd-center-glow, .tswd-animated-visual::before { animation: none !important; }
}

/* ---- variants used by the AI Automation page (longer content lists) ---- */
.tswd-text + .tswd-text { margin-top: 14px; }
.tswd-cta-copy .tswd-cta-more { margin-top: 12px; }
.tswd-stat-label { display: block; margin-bottom: 6px; color: #111118; font: 700 14.5px/1.3 var(--font-head); }
.tswd-process--six { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tswd-step-num { position: absolute; top: 22px; right: 24px; z-index: 1; color: #DCD3F9; font: 800 32px/1 var(--font-head); letter-spacing: -.02em; }
.tswd-side-image--tall img { height: clamp(420px,46vw,660px); }
.tswd-animated-visual--five { flex-direction: column; justify-content: flex-start; gap: 22px; min-height: 0; padding: 30px 20px 20px; }
.tswd-mini-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; }
.tswd-mini-grid .tswd-mini-service-card { position: static; width: auto; }
.tswd-mini-grid .tswd-mini-service-card:nth-child(2) { animation-delay: .8s; }
.tswd-mini-grid .tswd-mini-service-card:nth-child(3) { animation-delay: 1.6s; }
.tswd-mini-grid .tswd-mini-service-card:nth-child(4) { animation-delay: 2.4s; }
.tswd-mini-grid .tswd-mini-service-card:nth-child(5) { grid-column: 1 / -1; animation-delay: 3.2s; }
@media (min-width: 1025px) {
  .tswd-side-image--tall { position: sticky; top: 110px; align-self: start; }
}
@media (max-width: 1024px) {
  .tswd-process--six { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .tswd-process--six { grid-template-columns: minmax(0,1fr); }
  .tswd-side-image--tall img { height: 300px; }
  .tswd-animated-visual--five { justify-content: center; min-height: 340px; padding: 0; }
  .tswd-mini-grid { display: none; }
}

/* ==========================================================================
   SVP — Service-page portfolio ("Selected Work").
   One design system, presented per service through the layout modifiers below:
   browser (websites) · stage (app showcases) · social · campaign · cinema (video)
   cinema-wide (DVC / TVC) · logo · brand · bento (design). Backgrounds: --soft / --dark.
   Cards are rendered by assets/js/service-portfolio.js from the real portfolio data;
   every media box keeps the project's own aspect ratio, so nothing is cropped.
   ========================================================================== */
.svp { --svp-grad: linear-gradient(90deg,#E600FF,#6C4BFF,#365CFF); position: relative; padding: clamp(70px,8vw,110px) 0; background: #fff; overflow: hidden; }
.svp--soft { background: radial-gradient(circle at 0% 15%,rgba(230,0,255,.05),transparent 28%), radial-gradient(circle at 100% 20%,rgba(54,92,255,.06),transparent 28%), #F7F5FF; }
.svp--dark { background: linear-gradient(135deg,#11143f 0%,#171b59 58%,#241047 100%); color: #fff; }
.svp--dark::before { content: ""; position: absolute; right: -140px; top: -150px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle,rgba(230,0,255,.2),rgba(54,92,255,.1),transparent 70%); pointer-events: none; }
.svp .container { position: relative; z-index: 1; }
.svp + .tswd-cta-section { padding-top: clamp(70px,8vw,110px); }

.svp-head { max-width: 780px; margin: 0 auto clamp(34px,4vw,50px); text-align: center; }
.svp-head h2 { margin: 0 0 14px; color: #111118; font: 800 clamp(28px,3.4vw,44px)/1.15 var(--font-head); letter-spacing: -.03em; }
.svp-head p { margin: 0 auto; max-width: 660px; color: #666672; font: 400 16px/1.75 var(--font-body); }
.svp--dark .svp-head h2 { color: #fff; }
.svp--dark .svp-head p { color: rgba(255,255,255,.74); }
.svp--dark .svc-eyebrow { color: #caa7ff; }

/* ---- card ---- */
.svp-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.svp-frame { position: relative; display: block; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 16px 44px rgba(17,17,24,.08); transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; }
.svp-card:hover .svp-frame, .svp-card:focus-visible .svp-frame { transform: translateY(-6px); border-color: #DCD3F9; box-shadow: 0 26px 56px rgba(108,75,255,.18); }
.svp-card:focus-visible { outline: 2px solid #6C4BFF; outline-offset: 5px; border-radius: 22px; }
.svp-chrome { display: none; }
.svp-media { position: relative; display: block; aspect-ratio: var(--r,1.5); overflow: hidden; background: #EFEBF9; }
.svp-media img, .svp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .45s ease; }
.svp-media video { opacity: 0; }
.svp-media video.svp-lit { opacity: 1; }
.svp-card:hover .svp-media img, .svp-card:hover .svp-media video { transform: scale(1.05); }
.svp-play { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(17,20,63,.72); color: #fff; backdrop-filter: blur(6px); }
.svp-play svg { width: 12px; height: 12px; margin-left: 2px; }
.svp-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 4px; }
.svp-text { min-width: 0; }
.svp-cat { display: block; margin-bottom: 5px; color: #6C4BFF; font: 700 12px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.svp-title { display: block; color: #111118; font: 700 15.5px/1.35 var(--font-head); letter-spacing: -.01em; overflow-wrap: anywhere; }
.svp-go { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F2ECFF; color: #6C4BFF; transition: transform .3s ease, background .3s ease, color .3s ease; }
.svp-go svg { width: 15px; height: 15px; }
.svp-card:hover .svp-go, .svp-card:focus-visible .svp-go { background: var(--svp-grad); color: #fff; transform: translate(2px,-2px); }
.svp--dark .svp-frame { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: 0 22px 54px rgba(0,0,0,.28); }
.svp--dark .svp-card:hover .svp-frame, .svp--dark .svp-card:focus-visible .svp-frame { border-color: rgba(202,167,255,.55); box-shadow: 0 28px 60px rgba(108,75,255,.35); }
.svp--dark .svp-media { background: rgba(255,255,255,.06); }
.svp--dark .svp-cat { color: #caa7ff; }
.svp--dark .svp-title { color: #fff; }
.svp--dark .svp-go { background: rgba(255,255,255,.12); color: #fff; }

/* ---- footer link ---- */
.svp-foot { margin-top: clamp(36px,4vw,54px); text-align: center; }
.svp-more { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 100px; background: var(--svp-grad); color: #fff; font: 700 14px/1 var(--font-head); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.svp-more:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(108,75,255,.32); }
.svp-more svg { width: 16px; height: 16px; transition: transform .25s ease; }
.svp-more:hover svg { transform: translateX(4px); }

/* ---- layouts ---- */
.svp-grid { display: grid; gap: 26px 22px; align-items: start; }

/* websites: browser-window previews */
.svp--browser .svp-chrome { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F2ECFF; border-bottom: 1px solid #ECE9F5; }
.svp--browser .svp-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #DCD3F9; }
.svp--browser .svp-chrome b { flex: 1; height: 8px; margin-left: 8px; border-radius: 100px; background: #E3DBFA; }

/* app showcases: dark device-style bezels, 2 x 2 */
.svp--stage .svp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 26px; }
.svp--stage .svp-frame { padding: 10px; border-radius: 26px; background: #0B0E2E; border-color: rgba(255,255,255,.16); }
.svp--stage .svp-media { border-radius: 17px; }

/* social: reels flank a 2 x 2 block of posts */
.svp--social .svp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; }
.svp--social .svp-card[data-slot="L"] { grid-column: 1; grid-row: 1 / 3; }
.svp--social .svp-card[data-slot="R"] { grid-column: 4; grid-row: 1 / 3; }
.svp--social .svp-frame { border-radius: 24px; }
.svp--social .svp-card--tall .svp-frame { border-radius: 30px; padding: 7px; background: #111118; border-color: #111118; }
.svp--social .svp-card--tall .svp-media { border-radius: 24px; }

/* websites, campaigns + brand systems: balanced masonry columns */
.svp--browser .svp-grid, .svp--campaign .svp-grid, .svp--brand .svp-grid { display: block; column-count: 3; column-gap: 24px; }
.svp--browser .svp-card, .svp--campaign .svp-card, .svp--brand .svp-card { display: block; margin-bottom: 30px; break-inside: avoid; }
.svp--browser .svp-meta, .svp--campaign .svp-meta, .svp--brand .svp-meta { margin-top: 14px; }
.svp--brand .svp-frame { border-radius: 16px; }

/* video: a tall reel beside a 2 x 2 wall of widescreen frames */
.svp--cinema .svp-grid { grid-template-columns: .65fr 1fr 1fr; align-items: stretch; }
.svp--cinema .svp-card[data-slot="T"] { grid-column: 1; grid-row: 1 / 3; }
.svp--cinema .svp-frame { border-radius: 16px; }

/* DVC / TVC: one featured widescreen spot + a cinematic grid */
.svp--cinema-wide .svp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.svp--cinema-wide .svp-card:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
.svp--cinema-wide .svp-card:first-child .svp-title { font-size: 19px; }
.svp--cinema-wide .svp-frame { border-radius: 16px; }
.svp--cinema-wide .svp-play { width: 44px; height: 44px; background: rgba(230,0,255,.72); }
.svp--cinema-wide .svp-card:first-child .svp-play { width: 58px; height: 58px; right: 18px; bottom: 18px; }

/* logos: clean square tiles */
.svp--logo .svp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.svp--logo .svp-frame { border-radius: 22px; }
.svp--logo .svp-media { aspect-ratio: 1 / 1; background: #fff; }
.svp--logo .svp-card--wide .svp-media img { object-fit: contain; padding: 10px; }

/* design: asymmetric bento wall (wide = 6 of 12 columns) */
.svp--bento .svp-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; }
.svp--bento .svp-card { grid-column: span 3; }
.svp--bento .svp-card--wide { grid-column: span 6; }
.svp--bento .svp-frame { border-radius: 22px; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .svp--social .svp-grid, .svp--cinema .svp-grid { display: block; column-count: 2; column-gap: 22px; }
  .svp--social .svp-card, .svp--cinema .svp-card { display: block; margin-bottom: 28px; break-inside: avoid; }
  .svp--social .svp-meta, .svp--cinema .svp-meta { margin-top: 14px; }
  .svp--browser .svp-grid, .svp--campaign .svp-grid, .svp--brand .svp-grid { column-count: 2; }
  .svp--cinema-wide .svp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .svp--cinema-wide .svp-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .svp--bento .svp-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  /* everything except logos becomes a swipeable row, with the next card peeking in */
  .svp-grid, .svp--social .svp-grid, .svp--cinema .svp-grid, .svp--campaign .svp-grid, .svp--brand .svp-grid, .svp--bento .svp-grid, .svp--cinema-wide .svp-grid, .svp--browser .svp-grid, .svp--stage .svp-grid { display: flex; flex-wrap: nowrap; column-count: auto; gap: 14px; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
  .svp-grid::-webkit-scrollbar { display: none; }
  .svp .svp-card, .svp--social .svp-card, .svp--cinema .svp-card, .svp--campaign .svp-card, .svp--brand .svp-card, .svp--bento .svp-card, .svp--bento .svp-card--wide, .svp--cinema-wide .svp-card:first-child { display: flex; flex: 0 0 82%; max-width: 82%; margin: 0; grid-column: auto; grid-row: auto; scroll-snap-align: start; }
  .svp--social .svp-card--tall, .svp--brand .svp-card, .svp--campaign .svp-card--tall { flex-basis: 64%; max-width: 64%; }
  .svp--logo .svp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .svp--logo .svp-card { flex: none; max-width: none; }
  .svp--logo .svp-meta { flex-direction: column; gap: 8px; }
  .svp--logo .svp-go { display: none; }
  .svp-frame { border-radius: 18px; }
  .svp--stage .svp-frame { border-radius: 22px; padding: 8px; }
  .svp-more { width: 100%; justify-content: center; }
  .svp-card:hover .svp-frame { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svp-frame, .svp-media img, .svp-media video, .svp-go, .svp-more, .svp-more svg { transition: none !important; }
  .svp-card:hover .svp-frame, .svp-card:hover .svp-media img { transform: none; }
}

/* ==========================================================================
   MKT — E-Commerce Marketplaces page components.
   The page follows the shared TSWD structure (hero, offer, why, process, CTA, FAQ);
   the pieces below add what is specific to marketplaces: platform showcase, channel hub,
   listing flow and platform tabs, plus a few small helpers for the shared components.
   ========================================================================== */
.mkt-sec { position: relative; padding: clamp(70px,8vw,110px) 0; background: #fff; overflow: hidden; }
.mkt-sec--soft, .mkt-soft { background: radial-gradient(circle at 0% 15%,rgba(230,0,255,.05),transparent 28%), radial-gradient(circle at 100% 20%,rgba(54,92,255,.06),transparent 28%), #F7F5FF; }
.mkt-sec--dark { background: linear-gradient(135deg,#11143f 0%,#171b59 58%,#241047 100%); color: #fff; }
.mkt-sec--dark::before { content: ""; position: absolute; right: -150px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle,rgba(230,0,255,.22),rgba(54,92,255,.1),transparent 70%); pointer-events: none; }
.mkt-sec--dark::after { content: ""; position: absolute; left: -140px; bottom: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle,rgba(54,92,255,.2),transparent 70%); pointer-events: none; }
.mkt-sec .container { position: relative; z-index: 1; }
.tswd-head .svc-eyebrow { display: block; margin-bottom: 14px; }
.mkt-sec--dark .svc-eyebrow { color: #caa7ff; }
.mkt-sec--dark .tswd-head h2 { color: #fff; }
.mkt-sec--dark .tswd-head p { color: rgba(255,255,255,.74); }
.svc-why + .tswd-cta-section { padding-top: clamp(70px,8vw,110px); }

.mkt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 100px; background: linear-gradient(90deg,#E600FF,#6C4BFF,#365CFF); color: #fff; font: 700 14px/1 var(--font-head); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.mkt-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(108,75,255,.32); }
.mkt-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.mkt-btn:hover svg { transform: translateX(4px); }

/* ---- offer cards: the specific services each card covers ---- */
.tswd-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tswd-card-tags li { padding: 7px 12px; border-radius: 100px; background: #F2ECFF; border: 1px solid #E3D9FF; color: #6C4BFF; font: 600 12px/1.25 var(--font-head); }

/* ---- platform showcase (dark) ---- */
.mkt-marquee { position: relative; margin: 0 auto clamp(34px,4vw,48px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.mkt-marquee-track { display: flex; gap: 12px; width: max-content; animation: mktMarquee 44s linear infinite; }
.mkt-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 700 13.5px/1 var(--font-head); white-space: nowrap; }
.mkt-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg,#E600FF,#365CFF); }
@keyframes mktMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
.mkt-plat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.mkt-plat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 24px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 54px rgba(0,0,0,.24); backdrop-filter: blur(10px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.mkt-plat:hover { transform: translateY(-8px); border-color: rgba(202,167,255,.55); box-shadow: 0 30px 64px rgba(108,75,255,.34); }
.mkt-plat-icon { display: block; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 17px; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.mkt-plat-icon img { width: 100%; height: 100%; border-radius: 17px; }
.mkt-plat h3 { margin: 0 0 10px; color: #fff; font: 800 21px/1.2 var(--font-head); letter-spacing: -.02em; }
.mkt-plat p { margin: 0 0 18px; color: rgba(255,255,255,.74); font: 400 14px/1.65 var(--font-body); }
.mkt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.mkt-tags li { padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); color: #E9DFFF; font: 600 12px/1.2 var(--font-head); }
.mkt-also { margin-top: clamp(34px,4vw,50px); }
.mkt-also-title { margin: 0 0 18px; color: rgba(255,255,255,.62); font: 700 12px/1.3 var(--font-head); letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.mkt-also-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.mkt-also-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.mkt-also-card img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; }
.mkt-also-card strong { display: block; margin-bottom: 3px; color: #fff; font: 700 14.5px/1.3 var(--font-head); }
.mkt-also-card span { display: block; color: rgba(255,255,255,.66); font: 400 12.5px/1.5 var(--font-body); }
.mkt-legal { max-width: 820px; margin: 30px auto 0; color: rgba(255,255,255,.52); font: 400 12px/1.7 var(--font-body); text-align: center; }

/* ---- why: channel hub inside the framed side card ---- */
.tswd-side-image--hub { display: grid; place-items: center; padding: clamp(18px,3vw,34px); background: radial-gradient(circle at 15% 10%,rgba(230,0,255,.08),transparent 45%), radial-gradient(circle at 90% 90%,rgba(54,92,255,.1),transparent 45%), #fff; }
.mkt-hub { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; }
.mkt-hub::before, .mkt-hub::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(108,75,255,.22); }
.mkt-hub::before { inset: 14%; }
.mkt-hub::after { inset: 0; border-color: rgba(108,75,255,.12); }
.mkt-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mkt-hub-lines line { stroke: url(#mktHubGrad); stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; animation: mktDash 2.4s linear infinite; }
@keyframes mktDash { to { stroke-dashoffset: -24; } }
.mkt-hub-center { position: absolute; left: 50%; top: 50%; z-index: 2; width: 32%; transform: translate(-50%,-50%); }
.mkt-hub-core { display: grid; place-content: center; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(135deg,#E600FF,#6C4BFF 55%,#365CFF); color: #fff; text-align: center; box-shadow: 0 24px 54px rgba(108,75,255,.4); }
.mkt-hub-core strong { display: block; font: 800 clamp(13px,1.6vw,17px)/1.15 var(--font-head); }
.mkt-hub-core span { display: block; margin-top: 4px; font: 500 clamp(10px,1.1vw,12px)/1.3 var(--font-body); opacity: .85; }
.mkt-hub-pos { position: absolute; z-index: 2; transform: translate(-50%,-50%); }
.mkt-hub-node { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 100px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 14px 32px rgba(17,17,24,.1); color: #111118; font: 700 clamp(11.5px,1.2vw,13.5px)/1 var(--font-head); white-space: nowrap; animation: mktNode 6s ease-in-out infinite; }
.mkt-hub-node img { width: 28px; height: 28px; border-radius: 9px; }
.mkt-hub-pos--a { left: 24%; top: 15%; }
.mkt-hub-pos--b { left: 76%; top: 15%; }
.mkt-hub-pos--c { left: 24%; top: 85%; }
.mkt-hub-pos--d { left: 76%; top: 85%; }
.mkt-hub-pos--b .mkt-hub-node { animation-delay: -1.5s; }
.mkt-hub-pos--c .mkt-hub-node { animation-delay: -3s; }
.mkt-hub-pos--d .mkt-hub-node { animation-delay: -4.5s; }
@keyframes mktNode { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }

/* ---- listing flow ---- */
.mkt-flow { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mkt-flow-step { position: relative; padding: 26px 20px 24px; border-radius: 22px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 14px 38px rgba(17,17,24,.05); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.mkt-flow-step:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; z-index: 2; width: 12px; height: 12px; border-top: 2px solid #C7B9FF; border-right: 2px solid #C7B9FF; transform: translateY(-50%) rotate(45deg); }
.mkt-flow-no { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: #fff; border: 2px solid #DCD3F9; color: #6C4BFF; font: 800 14px/1 var(--font-head); transition: background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease; }
.mkt-flow-step h3 { margin: 0 0 8px; color: #111118; font: 800 17px/1.2 var(--font-head); letter-spacing: .02em; }
.mkt-flow-step p { margin: 0; color: #666672; font: 400 13.5px/1.6 var(--font-body); }
.mkt-flow-step.is-on { border-color: #DCD3F9; box-shadow: 0 22px 46px rgba(108,75,255,.14); }
.mkt-flow-step.is-on .mkt-flow-no { background: linear-gradient(135deg,#6C4BFF,#365CFF); border-color: transparent; color: #fff; box-shadow: 0 12px 26px rgba(108,75,255,.32); }

/* ---- platform tabs ---- */
.mkt-tablist { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
.mkt-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-radius: 18px; background: #fff; border: 1px solid #ECE9F5; color: #111118; font: 700 15px/1.2 var(--font-head); text-align: left; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
.mkt-tab img { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; }
.mkt-tab:hover { transform: translateY(-3px); border-color: #DCD3F9; }
.mkt-tab[aria-selected="true"] { background: linear-gradient(135deg,#6C4BFF,#365CFF); border-color: transparent; color: #fff; box-shadow: 0 16px 34px rgba(108,75,255,.3); }
.mkt-tab:focus-visible { outline: 2px solid #6C4BFF; outline-offset: 3px; }
.mkt-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(28px,4vw,56px); align-items: center; padding: clamp(24px,3.4vw,44px); border-radius: 30px; background: #fff; border: 1px solid #ECE9F5; box-shadow: 0 24px 64px rgba(17,17,24,.08); animation: mktPanelIn .5s ease both; }
.mkt-panel[hidden] { display: none; }
@keyframes mktPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mkt-panel h3 { margin: 0 0 12px; color: #111118; font: 800 clamp(24px,2.6vw,32px)/1.15 var(--font-head); letter-spacing: -.03em; }
.mkt-panel-lead { margin: 0 0 20px; color: #55556a; font: 400 15.5px/1.7 var(--font-body); }
.mkt-panel ul { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; }
.mkt-panel li { position: relative; padding-left: 30px; color: #111118; font: 600 14.5px/1.4 var(--font-head); }
.mkt-panel li::before { content: ""; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: #6C4BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.mkt-panel-visual { position: relative; padding: 14px; border-radius: 26px; background: radial-gradient(circle at 20% 10%,rgba(230,0,255,.1),transparent 50%), radial-gradient(circle at 90% 90%,rgba(54,92,255,.14),transparent 50%), #F7F5FF; }
.mkt-panel-visual img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 54px rgba(17,17,24,.14); animation: mktFloat 7s ease-in-out infinite; }
@keyframes mktFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- related services ---- */
.mkt-rel-text { display: block; min-width: 0; }
.svc-related-card .mkt-rel-text small { display: block; margin-top: 5px; color: #666672; font: 400 12.5px/1.5 var(--font-body); }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .mkt-plat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .mkt-panel { grid-template-columns: minmax(0,1fr); }
  .mkt-tablist { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tswd-side-image--hub { min-height: 0; }
}
@media (max-width: 860px) {
  .mkt-flow { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .mkt-flow-step { display: grid; grid-template-columns: 46px minmax(0,1fr); column-gap: 16px; padding: 20px 18px; }
  .mkt-flow-no { grid-row: 1 / 3; margin: 0; }
  .mkt-flow-step h3 { margin: 2px 0 6px; align-self: end; }
  .mkt-flow-step p { grid-column: 2; }
  .mkt-flow-step:not(:last-child)::after { right: auto; left: 32px; top: auto; bottom: -13px; transform: rotate(135deg); }
}
@media (max-width: 767px) {
  .mkt-also-grid { grid-template-columns: minmax(0,1fr); }
  .mkt-btn { width: 100%; }
}
@media (max-width: 640px) {
  .mkt-plat-grid { grid-template-columns: minmax(0,1fr); }
  .mkt-tab { padding: 10px 12px; font-size: 13.5px; }
  .mkt-tab img { flex-basis: 32px; width: 32px; height: 32px; }
  .mkt-panel { padding: 20px 16px; border-radius: 24px; }
  .mkt-hub-node { padding: 6px 11px 6px 6px; gap: 6px; }
  .mkt-hub-node img { width: 22px; height: 22px; border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-marquee-track, .mkt-hub-node, .mkt-panel-visual img, .mkt-hub-lines line, .mkt-panel { animation: none !important; }
  .mkt-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* inline internal links inside service-page copy */
.tswd-card p a, .tswd-list-item p a, .tswd-step p a, .svc-faq-panel p a, .tswd-faq-note a { color: #6C4BFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tswd-card p a:hover, .tswd-list-item p a:hover, .tswd-step p a:hover, .svc-faq-panel p a:hover, .tswd-faq-note a:hover { color: #4B30D6; }