/* FSK Soft — shared styles.
   Layout: Apple-style product site built only from type and icons. Frosted sticky nav with a Services flyout,
   a bottom-sheet menu on phones, centred heroes, alternating white / #f5f5f7 bands, icon panels and diagrams. */
:root{
  --bg:#ffffff; --bg-alt:#f5f5f7; --card:#ffffff;
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --line:#d2d2d7; --line-soft:#e8e8ed;
  --blue:#0071e3; --blue-hover:#0077ed; --link:#0066cc;
  --c-mobile:#007aff; --t-mobile:#0066cc;
  --c-web:#af52de;    --t-web:#8944ab;
  --c-server:#34c759; --t-server:#248a3d;
  --c-ai:#ff9500;     --t-ai:#b64400;
  --c-model:#ff2d55;  --t-model:#d70040;
  --c-data:#30b0c7;   --t-data:#0a7d8c;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --maxw:1120px; --gutter:clamp(16px,4.5vw,40px); --nav-h:56px;
  --r-xl:28px; --r-lg:22px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.07);
  --shadow-lg:0 2px 6px rgba(0,0,0,.04),0 30px 70px -24px rgba(0,0,0,.2);
  --spring:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.site{overflow-x:clip;min-height:100vh}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grey{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Service colour scopes ── */
.s-mobile{--c:var(--c-mobile);--t:var(--t-mobile)}
.s-web{--c:var(--c-web);--t:var(--t-web)}
.s-server{--c:var(--c-server);--t:var(--t-server)}
.s-ai{--c:var(--c-ai);--t:var(--t-ai)}
.s-model{--c:var(--c-model);--t:var(--t-model)}
.s-data{--c:var(--c-data);--t:var(--t-data)}

/* ── Icon tiles ── */
.ti{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--blue)) 80%,#fff),var(--c,var(--blue)));box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06)}
.ti svg{width:55%;height:55%}
.ti.sm{width:30px;height:30px;border-radius:8px}
.ti.lg{width:56px;height:56px;border-radius:15px}
.ti.xl{width:72px;height:72px;border-radius:19px}
.ti.soft{background:color-mix(in srgb,var(--c,var(--blue)) 13%,#fff);color:var(--t,var(--link));box-shadow:none}
.ti.white{background:#fff;color:var(--t,var(--link));box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px -8px rgba(0,0,0,.18)}
.ti.ink{background:var(--ink);color:#fff}

/* ── Buttons & links ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border:0;border-radius:980px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:17px;font-weight:400;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s,transform .2s}
.btn:hover{background:var(--blue-hover)}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px}
.btn-sm{min-height:30px;padding:6px 14px;font-size:13px}
.btn-ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-block{width:100%}
.more{display:inline-flex;align-items:center;gap:5px;color:var(--link);font-size:17px}
.more:hover{text-decoration:underline}
.more svg{width:8px;height:13px;flex:none}
.more svg.ext{width:14px;height:14px}

/* ── Nav ── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:100}
.nav-bar{position:relative;z-index:2;background:rgba(251,251,253,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);transition:background-color .3s}
.nav.fly-open .nav-bar{background:rgba(251,251,253,.98)}
.nav-in{display:flex;align-items:center;gap:8px;height:var(--nav-h);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.brand{margin-right:auto;color:var(--ink);display:inline-flex;align-items:center;padding:8px 0}
.brand .logo{width:96px;height:19px;fill:currentColor}
.nav-links{display:flex;align-items:center;gap:2px;margin-right:12px}
.nav-links>a,.nav-links>button{position:relative;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border:0;border-radius:999px;background:transparent;
  font-size:14px;color:rgba(0,0,0,.78);cursor:pointer;transition:color .2s,background-color .2s}
.nav-links>a:hover,.nav-links>button:hover,.nav-links>button[aria-expanded="true"]{color:var(--ink);background:rgba(0,0,0,.05)}
.nav-links>a[aria-current="page"],.nav-links>button.current{color:var(--ink);font-weight:600}
.nav-links>a[aria-current="page"]::after,.nav-links>button.current::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--blue)}
.nav-links .caret{width:9px;height:9px;transition:transform .35s var(--spring)}
.nav-links button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.menu-btn{display:none;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;cursor:pointer}
.menu-btn .dots{display:grid;grid-template-columns:repeat(2,4px);gap:3px}
.menu-btn .dots i{width:4px;height:4px;border-radius:1.5px;background:currentColor}

.flyout{position:absolute;left:0;right:0;top:100%;z-index:1;background:rgba(251,251,253,.98);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 40px 60px -40px rgba(0,0,0,.3)}
.fly-in{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;padding-block:24px 32px}
.fly-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2)}
.fly-head a{color:var(--link)}
.fly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.fly-item{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;transition:background-color .2s}
.fly-item:hover,.fly-item:focus-visible{background:var(--bg-alt)}
.fly-item .fi-txt{display:block;min-width:0}
.fly-item b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fly-item .fi-txt>span{display:block;margin-top:2px;font-size:13px;line-height:1.38;color:var(--ink-2)}
.fly-card{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:22px;background:var(--bg-alt);transition:transform .35s var(--spring)}
.fly-card:hover{transform:translateY(-2px)}
.fly-card small{font-size:12px;color:var(--ink-2)}
.fly-card b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.fly-card .row{display:flex;gap:8px}
.fly-card .more{font-size:14px}
.fly-dim{position:fixed;inset:0;z-index:90;background:rgba(232,232,237,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Bottom-sheet menu (phones) */
.sheet{position:fixed;inset:0;z-index:200}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 20px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;background:#fbfbfd;box-shadow:0 -20px 60px rgba(0,0,0,.18)}
.sheet-grab{width:40px;height:5px;margin:0 auto 10px;border-radius:3px;background:#d2d2d7}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 10px}
.sheet-head .logo{width:84px;height:17px;fill:var(--ink)}
.sheet-x{width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:#e8e8ed;cursor:pointer;color:var(--ink-2)}
.sheet-x svg{width:13px;height:13px}
.sheet-links{display:grid;gap:2px}
.sheet-links a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:10px 12px;border-radius:18px;transition:background-color .2s}
.sheet-links a:hover,.sheet-links a:active{background:#ececf0}
.sheet-links a .ti{grid-row:1/3}
.sheet-links a b{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.sheet-links a small{grid-column:2;font-size:13px;color:var(--ink-2)}
.sheet-links a>svg{grid-row:1/3;grid-column:3;width:8px;height:13px;color:var(--ink-3)}
.sheet-links a[aria-current="page"]{background:#fff;box-shadow:var(--shadow)}
.sheet-sec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.sheet-sec .k{display:block;margin:0 0 10px 4px;font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.sheet-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sheet-svc a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);font-size:14px;font-weight:500;line-height:1.2}
.sheet-foot{display:grid;gap:10px;margin-top:16px}
.sheet-foot p{text-align:center;font-size:13px;color:var(--ink-2)}
@media (max-width:900px){.nav-links,.nav-in>.btn-sm{display:none}.menu-btn{display:inline-flex}}

/* ── Type ── */
.kicker{display:inline-block;font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-.015em;color:var(--ink-2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--t,var(--blue))}
.h-hero{font-size:clamp(44px,7.4vw,92px);line-height:1.03;letter-spacing:-.045em}
.h-sec{font-size:clamp(34px,5vw,60px);line-height:1.06;letter-spacing:-.036em}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.34;letter-spacing:-.016em;color:var(--ink-2)}
.w{display:inline-block}

/* ── Sections ── */
.sec{padding-block:clamp(84px,11vw,150px);scroll-margin-top:var(--nav-h)}
.alt{background:var(--bg-alt)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 48px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{max-width:18ch}
.sec-head p{max-width:34ch;color:var(--ink-2);font-size:clamp(17px,1.6vw,19px)}

/* ── Home hero + orbit ── */
.hero{padding-top:clamp(56px,8vw,104px);text-align:center;overflow:hidden}
.hero .lead{max-width:34ch;margin:22px auto 0}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 30px;margin-top:34px}
.orbit{--tile:clamp(52px,9.5vw,92px);--mini:clamp(34px,5.6vw,54px);position:relative;width:min(720px,calc(100vw - 2 * var(--gutter)));aspect-ratio:1;margin:clamp(48px,7vw,84px) auto clamp(48px,7vw,96px)}
.orbit::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,113,227,.08),transparent)}
.ring{position:absolute;border-radius:50%}
.ring.out{inset:7%;border:1px solid var(--line-soft)}
.ring.mid{inset:19%;border:1px dashed #dcdce1}
.ring.in{inset:27%;border:1px solid var(--line-soft)}
.sat{position:absolute;width:0;height:0}
.sat-rot{position:absolute;left:0;top:0;width:0;height:0}
.sat-in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.sat-in>b{font-size:clamp(11px,1.4vw,14px);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.sat-in .ti{width:var(--tile);height:var(--tile);border-radius:calc(var(--tile) * .26)}
.ring.in .sat-in .ti{width:var(--mini);height:var(--mini);border-radius:calc(var(--mini) * .28)}
.ring.out .sat-in{transform:translate(-50%,calc(-50% + 12px))}
.core{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:28%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05),0 30px 60px -20px rgba(0,0,0,.25)}
.core svg{width:62%;height:auto;fill:var(--ink)}
.core::after{content:"";position:absolute;inset:-14%;border-radius:32%;border:1px solid rgba(0,113,227,.25);animation:pulse 3.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* ── Services grid (home) ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:32px 30px 28px;border-radius:var(--r-xl);background:#fff;overflow:hidden;
  transition:transform .5s var(--spring),box-shadow .5s var(--spring)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc-card h3{font-size:24px;letter-spacing:-.024em;line-height:1.15;margin-top:8px}
.svc-card p{color:var(--ink-2)}
.svc-card .more{margin-top:auto;padding-top:8px;font-size:15px}
.svc-card .feat{display:flex;gap:8px;margin-top:4px}
.svc-card::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 18%,transparent),transparent);opacity:.0;transition:opacity .5s}
.svc-card:hover::after{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--bg-alt);font-size:13px;color:var(--ink-2);white-space:nowrap}
.alt .chip,.case .chip,.wcard .chip{background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}

/* ── Scrub statement ── */
.scrub{font-size:clamp(30px,4.6vw,56px);line-height:1.14;font-weight:600;letter-spacing:-.035em;max-width:22em}
.js-anim .scrub .w{color:#d2d2d7}

/* ── Icon panel (project showcase) ── */
.ipanel{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.6vw,30px);border-radius:var(--r-xl);background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.ipanel::before{content:"";position:absolute;right:-20%;top:-35%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 16%,transparent),transparent);pointer-events:none}
.ip-head{position:relative;display:flex;align-items:center;gap:16px}
.ip-head b{display:block;font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.ip-head small{display:block;font-size:13px;color:var(--ink-2)}
.ip-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ip-grid li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--bg-alt);font-size:14px;font-weight:500;line-height:1.25;min-width:0}
.ip-foot{position:relative;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.ip-foot i{width:7px;height:7px;border-radius:50%;background:var(--c-server);box-shadow:0 0 0 3px rgba(52,199,89,.16)}

/* ── Horizontal work showcase (home) ── */
.hs{position:relative;padding-block:clamp(84px,11vw,150px);background:var(--bg-alt);overflow:hidden}
.hs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(30px,4vw,48px)}
.hs-prog{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hs-prog .bar{width:120px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.hs-prog .bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.2)}
.hs-track{display:flex;gap:24px;padding:6px max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter))) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
.hs-track::-webkit-scrollbar{display:none}
.hs.pinned{height:100vh;height:100svh;padding-block:calc(var(--nav-h) + 2vh) 0;display:flex;flex-direction:column;justify-content:center}
.hs.pinned .hs-track{overflow:visible;scroll-snap-type:none}
.wcard{flex:0 0 min(1000px,86vw);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(26px,3.6vw,48px);border-radius:32px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.wcard .meta{display:flex;flex-direction:column;gap:12px;min-width:0}
.wcard h3{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.038em;line-height:1.05}
.wcard p{color:var(--ink-2)}
.wcard .ipanel{box-shadow:none;background:var(--bg-alt)}
.wcard .ipanel .ip-grid li{background:#fff}
.tagline{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:600;color:var(--t)}
.tagline span+span::before{content:"·";margin-right:6px;color:var(--ink-3)}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stats>div{padding:26px 20px 0 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.stats b{font-size:clamp(38px,4.8vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.04;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats>div>span{font-size:14px;color:var(--ink-2);max-width:22ch}

/* ── Process ── */
.proc{--p:1;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:28px}
.proc::before,.proc::after{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;border-radius:1px;background:var(--line)}
.proc::after{background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p))}
.pn{z-index:1}
.proc li{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.pn{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);transition:background-color .45s,color .45s,box-shadow .45s}
.pn svg{width:22px;height:22px}
.proc li.on .pn{background:var(--ink);color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.proc .step-n{font-size:13px;font-weight:600;color:var(--ink-3)}
.proc h3{font-size:21px;letter-spacing:-.02em}
.proc p{font-size:16px;color:var(--ink-2)}
.proc .get{font-size:14px;color:var(--ink)}
.proc .get span{color:var(--ink-2)}

/* ── Marquee ── */
.marq{display:grid;gap:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-row{display:flex;gap:12px;width:max-content;animation:marq 50s linear infinite}
.marq-row.rev{animation-direction:reverse;animation-duration:58s}
.marq:hover .marq-row{animation-play-state:paused}
.marq-row>span{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);font-size:16px;font-weight:500;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── CTA ── */
.cta{text-align:center}
.cta .ti{margin:0 auto 26px}
.cta h2{font-size:clamp(40px,6.4vw,80px);line-height:1.03;letter-spacing:-.045em}
.cta .lead{max-width:36ch;margin:20px auto 0}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:34px}
.mail{display:inline-flex;align-items:center;gap:6px;font-size:17px}
.mail span{user-select:all}
.copy{border:0;background:transparent;padding:4px 6px;cursor:pointer;color:var(--link);font-size:inherit}
.copy:hover{text-decoration:underline}

/* ── Inner page hero ── */
.phero{padding-block:clamp(64px,9vw,120px) clamp(36px,5vw,60px)}
.phero .h-hero{font-size:clamp(48px,8vw,96px)}
.phero .lead{max-width:32ch;margin-top:20px}
.phero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.phero-icons{display:flex;gap:10px;flex-wrap:wrap}
.crumbs{display:flex;gap:8px;align-items:center;margin-bottom:18px;font-size:13px;color:var(--ink-2)}
.crumbs a:hover{color:var(--link)}
.crumbs svg{width:6px;height:10px}

/* ── Services page ── */
.subnav{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:8px;flex:none;padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;color:var(--ink-2);transition:background-color .25s,color .25s}
.subnav a:hover{color:var(--ink)}
.subnav a.on{background:var(--ink);color:#fff}
.svc{scroll-margin-top:calc(var(--nav-h) + 58px)}
.svc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,6vw,88px);align-items:center}
.svc-split.flip .svc-text{order:2}
.svc-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.svc-text .h-sec{font-size:clamp(34px,4.4vw,52px)}
.svc-text>p{color:var(--ink-2);font-size:19px;line-height:1.42}
.deliver{display:grid;gap:10px;margin-top:6px}
.deliver li{display:flex;gap:12px;align-items:flex-start}
.deliver li svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--t)}
.svc-ex{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px 12px 12px;border-radius:16px;background:var(--bg-alt);transition:background-color .2s}
.alt .svc-ex{background:#fff}
.svc-ex:hover{background:#ececf0}
.svc-ex small{display:block;font-size:12px;color:var(--ink-2)}
.svc-ex b{font-size:15px}
.svc-ex>svg{margin-left:auto;width:8px;height:13px;color:var(--ink-3)}

/* Hub diagram */
.hub{position:relative;aspect-ratio:1;max-width:560px;margin-inline:auto;width:100%;border-radius:36px;background:#fff;overflow:hidden}
.alt .hub,.alt .flowcard{background:#fff}
.hub::before{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 14%,transparent),transparent)}
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines line{stroke:color-mix(in srgb,var(--c) 45%,#d2d2d7);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 5;animation:dash 1.4s linear infinite}
.hub-lines circle{fill:none;stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
@keyframes dash{to{stroke-dashoffset:-18}}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hub-core .ti{width:clamp(70px,12vw,104px);height:clamp(70px,12vw,104px);border-radius:28%}
.hub-core::after{content:"";position:absolute;inset:-18%;border-radius:34%;border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);animation:pulse 2.8s ease-out infinite}
.hub-node{position:absolute;width:0;height:0}
.hub-node>div{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hub-node .ti{width:clamp(44px,7vw,58px);height:clamp(44px,7vw,58px);border-radius:28%}
.hub-node b{font-size:clamp(12px,1.3vw,14px);font-weight:600;white-space:nowrap}

/* Flow diagram */
.flowcard{padding:clamp(22px,3vw,34px);border-radius:36px;background:#fff}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:4px;text-align:center;min-width:0}
.flow li .ti{width:56px;height:56px;border-radius:16px;position:relative;z-index:1}
.flow li b{font-size:14px;font-weight:600;line-height:1.2}
.flow li small{font-size:12px;line-height:1.3;color:var(--ink-2)}
.flow li .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.flow .link{position:absolute;top:27px;left:calc(50% + 32px);width:calc(100% - 64px);height:2px;border-radius:1px;transform-origin:0 50%;
  background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 11px);background-size:22px 2px;animation:slide 1s linear infinite}
@keyframes slide{to{background-position:22px 0}}
.flow-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.flow-foot .chip svg{width:15px;height:15px;color:var(--t)}
.flow-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.flow-out div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--bg-alt);font-size:14px;font-weight:500;line-height:1.25}
.alt .flow-out div{background:var(--bg-alt)}

.engage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.engage article{display:flex;flex-direction:column;gap:12px;padding:32px 30px;border-radius:var(--r-xl);background:#fff}
.engage h3{font-size:24px;letter-spacing:-.024em;margin-top:6px}
.engage p{color:var(--ink-2)}
.engage ul{display:grid;gap:8px;margin-top:4px;font-size:15px}
.engage li{display:flex;gap:10px}
.engage li svg{width:18px;height:18px;flex:none;color:var(--t-server);margin-top:2px}

.seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--bg-alt)}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tabs{margin-top:22px;display:grid;justify-items:center;gap:16px}
.tabs .flow-out{margin-top:0;width:100%}
button.more{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:17px}
.alt .principles article{background:#fff}
.alt .toolbox>div{background:#fff}
.toolbox>div{background:var(--bg-alt)}

/* ── Work page ── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.filters button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;background:var(--bg-alt);font-size:15px;color:var(--ink-2);cursor:pointer;transition:background-color .25s,color .25s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.filters button em{font-style:normal;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
.cases{display:grid;gap:clamp(20px,3vw,28px)}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(26px,4vw,56px);border-radius:36px;background:var(--bg-alt);scroll-margin-top:calc(var(--nav-h) + 20px)}
.case.flip .case-body{order:2}
.case-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.case h2{font-size:clamp(32px,3.8vw,48px);letter-spacing:-.04em;line-height:1.04}
.case .lede{font-size:19px;line-height:1.42}
.case p{color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.facts b{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.facts span{font-size:13px;color:var(--ink-2)}
.case .more{align-self:flex-start}
.case .ipanel{box-shadow:none}

/* ── About ── */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.principles article{display:flex;flex-direction:column;gap:12px;padding:36px 34px;border-radius:var(--r-xl);background:var(--bg-alt)}
.principles h3{font-size:28px;letter-spacing:-.03em;margin-top:8px}
.principles p{color:var(--ink-2)}
.toolbox{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.toolbox>div{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-xl);background:#fff;min-width:0}
.toolbox b{font-size:17px}
.toolbox ul{display:grid;gap:6px;font-size:15px;color:var(--ink-2)}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:start}
.form{display:grid;gap:22px;padding:clamp(24px,3.4vw,40px);border-radius:var(--r-xl);background:var(--bg-alt)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:8px;min-width:0}
.field>label,.field>.lbl{font-size:14px;font-weight:600}
.field small{font-size:12px;color:var(--ink-2);font-weight:400}
.form input[type=text],.form input[type=email],.form textarea,.form select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.form textarea{min-height:140px;resize:vertical}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt>span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.opt.plain>span{padding-left:14px}
.opt>input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.opt>input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.err{font-size:13px;color:#d70015}
.done{padding:clamp(24px,3.4vw,40px);border-radius:var(--r-xl);background:var(--bg-alt);display:grid;gap:14px}
.done h3{font-size:28px;letter-spacing:-.03em}
.done p{color:var(--ink-2)}
.done pre{margin:0;padding:16px;border-radius:14px;background:#fff;white-space:pre-wrap;font-family:var(--font);font-size:14px;line-height:1.5;max-height:260px;overflow:auto}
.done .acts{display:flex;flex-wrap:wrap;gap:10px}
.side{display:grid;gap:16px}
.side-card{display:grid;gap:16px;padding:clamp(24px,3vw,32px);border-radius:var(--r-xl);background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}
.side-card h3{font-size:21px;letter-spacing:-.02em}
.steps-list{display:grid;gap:14px}
.steps-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:15px;color:var(--ink-2)}
.steps-list b{display:block;color:var(--ink);font-size:16px}

/* ── FAQ ── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px 64px;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(18px,1.9vw,21px);font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:20px;height:20px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.6px;margin-top:-.8px;border-radius:1px;background:var(--ink-2);transition:transform .35s var(--spring)}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}
.faq p{padding:0 40px 24px 0;color:var(--ink-2);max-width:62ch}

/* ── Footer ── */
.foot{background:var(--bg-alt);padding-block:30px 40px;font-size:12px;line-height:1.45;color:var(--ink-2);border-top:1px solid var(--line-soft)}
.foot-dir{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:24px;padding-bottom:26px}
.foot-dir .logo{width:88px;height:18px;fill:var(--ink)}
.foot-dir p{margin-top:12px;max-width:28ch}
.foot-dir h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ink)}
.foot-dir a{display:block;padding:3px 0;color:var(--ink-2);overflow-wrap:anywhere}
.foot-dir a:hover{color:var(--ink);text-decoration:underline}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:16px;border-top:1px solid var(--line)}

/* ── Responsive ── */
@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbox{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-dir{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-dir>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .wcard{grid-template-columns:1fr}
  .svc-split,.case,.contact-grid,.faq-grid{grid-template-columns:1fr}
  .svc-split.flip .svc-text,.case.flip .case-body{order:0}
  .engage{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .proc::before,.proc::after{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div:nth-child(n+3){padding-top:24px}
  .principles{grid-template-columns:1fr}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card{padding:28px 24px 24px}
  .proc{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbox{grid-template-columns:1fr 1fr}
  .foot-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq p{padding-right:0}
  .marq-row>span{font-size:14px}
  .flow{grid-template-columns:1fr;gap:16px}
  .flow li{flex-direction:row;align-items:center;text-align:left;gap:14px}
  .flow li .txt{display:flex;flex-direction:column}
  .flow .link{top:56px;left:27px;width:2px;height:16px;background:repeating-linear-gradient(180deg,var(--c) 0 5px,transparent 5px 9px);background-size:2px 18px;animation:slidev 1s linear infinite;transform-origin:50% 0}
  .flow-out{grid-template-columns:1fr}
  .orbit .ring.out .sat-in>b{display:none}
  .ring.out .sat-in{transform:translate(-50%,-50%)}
}
@keyframes slidev{to{background-position:0 18px}}
@media (prefers-reduced-motion:reduce){
  .marq-row,.hub-lines line,.flow .link,.core::after,.hub-core::after{animation:none}
  .svc-card,.fly-card{transition:none}
}