:root {
  --brand:#295aff; --brand-deep:#1a3fd0; --brand-soft:#6f93ff; --brand-tint:rgba(41,90,255,.1);
  --bg:#ffffff; --paper:#f4f6fb; --tile:#ffffff; --ink:#0b0d14; --muted:#5b6172; --line:#e0e4ee; --link:#1f4be0;
  --nav-bg:rgba(255,255,255,.78); --nav-line:rgba(11,13,20,.1); --shadow:0 12px 40px rgba(11,13,20,.1);
  --display:"Outfit",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d0f15; --paper:#141721; --tile:#1d212d; --ink:#f4f6fb; --muted:#9aa1b4; --line:#2a2f3d; --link:#7aa0ff;
    --nav-bg:rgba(10,11,16,.78); --nav-line:rgba(255,255,255,.12); --shadow:0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#0d0f15; --paper:#141721; --tile:#1d212d; --ink:#f4f6fb; --muted:#9aa1b4; --line:#2a2f3d; --link:#7aa0ff;
  --nav-bg:rgba(10,11,16,.78); --nav-line:rgba(255,255,255,.12); --shadow:0 12px 40px rgba(0,0,0,.5);
}
html { scroll-padding-top:calc(env(safe-area-inset-top,0px) + 56px); scroll-behavior:smooth; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }
main { overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

.s-light { background:var(--bg); }
.s-paper { background:var(--paper); }
.s-dark { --ink:#f4f6fb; --muted:#9aa1b4; --line:#262a38; --tile:#10131c; --link:#7aa0ff; background:#000; color:var(--ink); }
.section { padding:120px 0; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.wide { max-width:1280px; margin:0 auto; padding:0 12px; }
.center { text-align:center; }

.h-xxl { font-family:var(--display); font-size:clamp(50px,9.4vw,108px); line-height:1; font-weight:600; letter-spacing:-.045em; margin:0; }
.h-xl { font-family:var(--display); font-size:clamp(36px,5.6vw,64px); line-height:1.05; font-weight:600; letter-spacing:-.04em; margin:0; }
.h-l { font-family:var(--display); font-size:clamp(28px,3.6vw,42px); line-height:1.08; font-weight:600; letter-spacing:-.035em; margin:0; }
.sub { font-size:clamp(19px,2.2vw,25px); line-height:1.3; letter-spacing:-.02em; color:var(--muted); margin:16px 0 0; }
.btn { display:inline-block; background:var(--brand); color:#fff; padding:13px 26px; border-radius:980px; font-size:17px; font-weight:500; line-height:1.2; border:0; transition:background .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { background:var(--brand-deep); transform:scale(1.03); box-shadow:0 10px 30px rgba(41,90,255,.35); }
.btn:active { transform:scale(.98); }
.btn-w { background:#fff; color:var(--brand); }
.btn-w:hover { background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.more { color:var(--link); font-size:19px; letter-spacing:-.02em; }
.more::after { content:" ›"; display:inline-block; transition:transform .25s var(--ease); }
.more:hover::after { transform:translateX(4px); }
.row-cta { display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:28px; }

/* ---- Reveal on scroll ---- */
html.js .rv { opacity:0; transform:translateY(32px); filter:blur(8px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay:var(--d,0s); }
html.js .rv.in { opacity:1; transform:none; filter:none; }

/* ---- Nav ---- */
.nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:60; height:56px; background:var(--nav-bg); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid transparent; transition:border-color .3s, background .4s; }
.nav.scrolled { border-bottom-color:var(--nav-line); }
.nav.on-dark { --nav-bg:rgba(8,9,13,.72); --ink:#f4f6fb; --nav-line:rgba(255,255,255,.12); }
.nav-in { max-width:1080px; height:100%; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo img { height:28px; width:auto; }
.nav-links { display:flex; gap:32px; list-style:none; margin:0; padding:0; font-size:13px; }
.nav-links a { color:var(--ink); opacity:.75; transition:opacity .2s; }
.nav-links a:hover { opacity:1; }
.nav-cta { background:var(--brand); color:#fff; padding:7px 16px; border-radius:980px; font-size:13px; font-weight:500; transition:background .2s, transform .25s var(--ease); }
.nav-cta:hover { background:var(--brand-deep); transform:scale(1.04); }
.progress { position:fixed; top:calc(env(safe-area-inset-top,0px) + 56px); left:0; right:0; height:2px; z-index:59; background:var(--brand); transform-origin:0 50%; transform:scaleX(0); }
@media (max-width:860px) { .nav-links { display:none; } }

/* ---- Hero ---- */
.hero { position:relative; padding:88px 0 0; overflow:hidden; }
.hero::before { content:""; position:absolute; left:50%; top:-160px; width:1000px; height:640px; margin-left:-500px; background:radial-gradient(closest-side, rgba(41,90,255,.16), transparent); opacity:0; animation:glow 2.4s 1.1s var(--ease) forwards; pointer-events:none; }
@keyframes glow { to { opacity:1; } }
.hero-copy { position:relative; }
/* Heading words: the box is padded to hold the full letterforms (g, p, y, accents, the ! accent) and the padding is cancelled with negative margins, so layout is unchanged.
   The word rests in its natural state (no leftover filter) and only the entrance is animated, so descenders are never clipped or repainted late. */
.w { display:inline-block; padding:.16em 0 .32em; margin:-.16em 0 -.32em; animation:wordin 1.1s var(--ease) backwards; animation-delay:calc(.14s * var(--i) + .15s); }
@keyframes wordin { from { opacity:0; transform:translateY(.5em); filter:blur(10px); } }
.bang { display:inline-block; color:var(--brand); animation:ignite 2.4s 1s ease-out both; }
@keyframes ignite {
  0% { text-shadow:0 0 0 rgba(41,90,255,0); transform:scale(1); }
  25% { text-shadow:0 0 50px rgba(41,90,255,.95), 0 0 120px rgba(41,90,255,.6); transform:scale(1.12); }
  100% { text-shadow:0 0 34px rgba(41,90,255,.32); transform:scale(1); }
}
.hero-sub { max-width:660px; margin-left:auto; margin-right:auto; animation:fadeup 1s .75s var(--ease) both; }
.hero .row-cta { animation:fadeup 1s .95s var(--ease) both; }
@keyframes fadeup { from { opacity:0; transform:translateY(20px); } }

.stage { position:relative; height:565px; margin-top:64px; overflow:hidden; display:flex; justify-content:center; }
.par { will-change:transform; }
.chip-f { position:absolute; z-index:3; left:50%; opacity:0; transform:scale(.85) translateY(16px); transition:opacity .8s var(--ease), transform .9s cubic-bezier(.2,1.25,.3,1); transition-delay:var(--d,0s); }
.stage.live .chip-f { opacity:1; transform:none; }
.chip-f .fl { animation:bob 6s ease-in-out infinite; animation-delay:var(--b,0s); }
@keyframes bob { 50% { transform:translateY(-10px); } }
.cbox { display:flex; align-items:center; gap:12px; padding:13px 18px 13px 14px; border-radius:20px; background:var(--bg); box-shadow:var(--shadow); border:1px solid var(--line); white-space:nowrap; }
.cbox .ci { width:38px; height:38px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; }
.cbox .ci svg { width:20px; height:20px; }
.cbox b { display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.cbox small { font-size:13px; color:var(--muted); }
.c1 { top:110px; margin-left:-455px; --d:.0s; --b:0s; }
.c2 { top:230px; margin-left:185px; --d:.25s; --b:-2s; }
.c3 { top:390px; margin-left:-430px; --d:.5s; --b:-4s; }
@media (max-width:1040px) { .chip-f { display:none; } }

/* ---- Phone ---- */
.phone { position:relative; width:290px; height:590px; border-radius:52px; background:#0b0c11; padding:10px; box-shadow:0 0 0 1px #2c303c inset, 0 50px 110px rgba(41,90,255,.3), 0 24px 60px rgba(11,13,20,.28); flex:none; }
.p-island { position:absolute; top:19px; left:50%; width:86px; height:25px; margin-left:-43px; border-radius:16px; background:#000; z-index:6; }
.p-screen { position:relative; width:100%; height:100%; border-radius:42px; overflow:hidden; background:#f4f6fb; color:#0b0d14; font-family:var(--text); }
.lay { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.phone[data-s="0"] .sketch, .phone[data-s="1"] .wire, .phone[data-s="2"] .ui, .phone[data-s="3"] .ui { opacity:1; }
.sketch { background:#fff radial-gradient(rgba(41,90,255,.2) 1px, transparent 1.3px) 0 0/16px 16px; }
.sketch svg { position:absolute; inset:0; width:100%; height:100%; }
.sketch svg > * { stroke-dasharray:1; stroke-dashoffset:0; }
.phone[data-s="0"] .sketch svg > * { animation:draw 1.1s var(--d,0s) cubic-bezier(.6,0,.2,1) backwards; }
@keyframes draw { from { stroke-dashoffset:1; } }

.wire { padding:58px 14px 0; display:flex; flex-direction:column; gap:14px; background:#f4f6fb; }
.wb { display:block; position:relative; overflow:hidden; background:rgba(110,125,170,.18); border-radius:12px; }
.wb::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%); transform:translateX(-100%); animation:shimmer 1.6s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }
.w-row { display:flex; gap:10px; align-items:center; }
.w-row3 { display:flex; justify-content:space-around; }
.w-tab { position:absolute; left:14px; right:14px; bottom:18px; height:46px; display:flex; justify-content:space-around; align-items:center; }

.ui { padding:0 14px; background:#f4f6fb; display:flex; flex-direction:column; gap:14px; }
.sb { display:flex; justify-content:space-between; align-items:center; padding:18px 12px 0; height:50px; font-size:13px; font-weight:600; }
.sbi { display:flex; gap:3px; } .sbi i { width:14px; height:8px; border-radius:2px; background:#0b0d14; opacity:.85; }
.u-head { display:flex; align-items:center; gap:10px; }
.av { width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:600; font-size:14px; }
.u-head small { display:block; font-size:11px; color:#6b7285; line-height:1.1; }
.u-head b { font-family:var(--display); font-size:17px; letter-spacing:-.02em; }
.bell { margin-left:auto; width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 1px 3px rgba(11,13,20,.08); }
.bell svg { width:17px; height:17px; }
.u-card { padding:16px; border-radius:22px; background:linear-gradient(150deg,#4a75ff,#1a3fd0); color:#fff; box-shadow:0 14px 30px rgba(41,90,255,.35); }
.u-card small { font-size:12px; opacity:.8; }
.u-big { display:flex; align-items:baseline; gap:8px; margin:2px 0 6px; }
.u-big b { font-family:var(--display); font-size:34px; letter-spacing:-.04em; font-weight:600; }
.u-big em { font-style:normal; font-size:12px; font-weight:600; background:rgba(255,255,255,.22); padding:2px 8px; border-radius:20px; }
.spark { width:100%; height:48px; display:block; }
.spark path { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.phone[data-s="2"] .spark path { animation:draw 1.5s .5s ease-out backwards; }
.u-acts { display:flex; justify-content:space-between; padding:0 8px; }
.u-acts div { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; font-weight:500; }
.u-acts span { width:48px; height:48px; border-radius:16px; background:#fff; display:grid; place-items:center; box-shadow:0 1px 3px rgba(11,13,20,.08); color:var(--brand); }
.u-acts svg { width:22px; height:22px; }
.u-list { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 1px 3px rgba(11,13,20,.06); }
.u-row { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.u-row + .u-row { border-top:1px solid #edeff5; }
.u-row .ri { width:32px; height:32px; border-radius:10px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; flex:none; }
.u-row .ri svg { width:16px; height:16px; }
.u-row b { display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.u-row small { font-size:11px; color:#6b7285; }
.u-row > svg { margin-left:auto; width:14px; height:14px; color:#9aa1b4; flex:none; }
.u-tab { position:absolute; left:0; right:0; bottom:0; height:70px; background:rgba(255,255,255,.92); border-top:1px solid #e6e9f1; display:flex; justify-content:space-around; padding-top:14px; }
.u-tab svg { width:23px; height:23px; color:#a7adbd; } .u-tab svg:first-child { color:var(--brand); }
.phone[data-s="2"] .rise { animation:rise .9s var(--ease) var(--d,0s) backwards; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } }
.toast { position:absolute; z-index:5; top:52px; left:12px; right:12px; display:flex; gap:10px; align-items:center; padding:11px 13px; border-radius:18px; background:#0b0d14; color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.3); opacity:0; transform:translateY(-140%) scale(.95); transition:opacity .5s, transform .8s cubic-bezier(.2,1.2,.3,1); }
.phone[data-s="3"] .toast { opacity:1; transform:none; }
.toast .tk { width:30px; height:30px; border-radius:50%; background:var(--brand); display:grid; place-items:center; flex:none; }
.toast .tk svg { width:16px; height:16px; }
.toast b { display:block; font-size:13px; line-height:1.2; } .toast small { font-size:11px; opacity:.65; }

/* ---- Story (pinned) ---- */
.story-track { height:440vh; position:relative; }
.story-stick { position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; padding-top:56px; overflow:hidden; }
.story-grid { width:100%; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.rail-wrap { display:flex; gap:36px; align-items:stretch; }
.rail { --p:0; position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between; gap:26px; font-family:var(--display); font-size:15px; font-weight:500; color:#6b7285; padding-left:26px; }
.rail::before, .rail::after { content:""; position:absolute; left:4px; top:8px; bottom:8px; width:2px; border-radius:2px; background:#262a38; }
.rail::after { background:var(--brand); transform-origin:top; transform:scaleY(var(--p)); box-shadow:0 0 14px var(--brand); }
.rail li { position:relative; transition:color .4s; }
.rail li::before { content:""; position:absolute; left:-27px; top:7px; width:10px; height:10px; border-radius:50%; background:#000; border:2px solid #3a4054; transition:border-color .4s, background .4s, box-shadow .4s; z-index:1; }
.rail li.done, .rail li.on { color:var(--ink); }
.rail li.done::before { border-color:var(--brand); background:var(--brand); }
.rail li.on::before { border-color:var(--brand); background:var(--brand); box-shadow:0 0 0 6px rgba(41,90,255,.25); }
.steps-stack { display:grid; flex:1; }
.st { grid-area:1/1; opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); pointer-events:none; align-self:center; }
.st.on { opacity:1; transform:none; filter:none; pointer-events:auto; }
.st h3 { font-family:var(--display); font-size:clamp(32px,4.4vw,52px); line-height:1.05; letter-spacing:-.04em; font-weight:600; margin:0; }
.st p { margin:16px 0 0; font-size:20px; line-height:1.35; color:var(--muted); letter-spacing:-.015em; max-width:430px; }
.st ul { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; font-size:16px; }
.st li { display:flex; gap:10px; align-items:center; }
.st li svg { width:18px; height:18px; color:var(--brand-soft); flex:none; }
.story-phone { position:relative; display:flex; justify-content:center; }
.tilt { transition:transform .15s linear; will-change:transform; }
.rings { position:absolute; left:50%; top:50%; width:0; height:0; }
.rings i { position:absolute; left:-260px; top:-260px; width:520px; height:520px; border-radius:50%; border:1.5px solid var(--brand); opacity:0; transform:scale(.4); }
.story-phone.launch .rings i { animation:ring 3s ease-out infinite; }
.story-phone.launch .rings i:nth-child(2) { animation-delay:1s; } .story-phone.launch .rings i:nth-child(3) { animation-delay:2s; }
@keyframes ring { 0% { opacity:.8; transform:scale(.45); } 100% { opacity:0; transform:scale(1.5); } }
@media (max-width:860px) {
  .story-grid { grid-template-columns:1fr; gap:0; align-content:center; }
  .story-phone { order:-1; height:330px; } .sc { transform:scale(.56); transform-origin:top center; height:590px; }
  .rings i { display:none; }
  .rail-wrap { gap:22px; } .st p { font-size:17px; margin-top:10px; } .st ul { display:none; }
  .story-stick { padding-top:64px; }
}

/* ---- Services tiles ---- */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tile { position:relative; overflow:hidden; background:var(--tile); border-radius:32px; text-align:center; min-height:640px; padding:60px 28px 0; display:flex; flex-direction:column; align-items:center; }
.tile.dark { --ink:#f4f6fb; --muted:#a4abbd; --link:#7aa0ff; background:#05060b; color:var(--ink); }
.tile .h-l { max-width:440px; }
.tile p.tp { margin:14px 0 0; font-size:19px; line-height:1.32; letter-spacing:-.02em; color:var(--muted); max-width:420px; }
.tile .tile-cta { margin-top:20px; display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.tile-vis { position:absolute; left:0; right:0; bottom:0; height:320px; }
.spot::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(41,90,255,.26), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.spot:hover::before { opacity:1; }
.spot > * { position:relative; z-index:1; }
.spot > .tile-vis { position:absolute; }
@media (max-width:860px) { .tiles { grid-template-columns:1fr; } .tile { min-height:600px; } }

.devs { position:absolute; left:50%; bottom:0; width:460px; height:320px; transform:translateX(-50%) scale(var(--sc,1)); transform-origin:bottom center; }
@media (max-width:520px) { .devs { --sc:.78; } }
.dev { position:absolute; transition:transform 1.3s var(--ease), opacity 1s var(--ease); transition-delay:var(--d,0s); opacity:0; }
.tile.in .dev { opacity:1; transform:none; }
.dev-b { left:0; bottom:-36px; width:350px; height:250px; border-radius:16px; background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow); transform:translate(60px,30px) scale(.9); overflow:hidden; }
.dev-b .bar { height:30px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px; }
.dev-b .bar i { width:8px; height:8px; border-radius:50%; background:var(--line); } .dev-b .bar u { margin-left:12px; height:12px; width:130px; border-radius:6px; background:var(--paper); }
.dev-b .body { display:grid; grid-template-columns:70px 1fr; height:calc(100% - 30px); }
.dev-b .side { border-right:1px solid var(--line); padding:14px 10px; display:grid; gap:8px; align-content:start; }
.dev-b .side i { height:10px; border-radius:5px; background:var(--line); } .dev-b .side i:first-child { background:var(--brand); }
.dev-b .main { padding:16px; display:grid; gap:12px; align-content:start; }
.dev-b .main .hd { height:14px; width:45%; border-radius:7px; background:var(--ink); opacity:.85; }
.dev-b .kp { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .dev-b .kp i { height:44px; border-radius:10px; background:var(--paper); } .dev-b .kp i:first-child { background:var(--brand-tint); }
.dev-b .bars { display:flex; align-items:flex-end; gap:8px; height:72px; } .dev-b .bars i { flex:1; border-radius:6px 6px 0 0; background:var(--brand); opacity:.85; transform-origin:bottom; }
.tile.in .dev-b .bars i { animation:grow 1.2s var(--ease) backwards; animation-delay:calc(.9s + var(--k)*.08s); }
@keyframes grow { from { transform:scaleY(.1); } }
.dev-p { right:6px; bottom:-70px; width:140px; height:290px; border-radius:30px; background:#0b0c11; padding:6px; box-shadow:var(--shadow); transform:translate(-100px,50px) scale(.9); transition-delay:.15s; }
.dev-p .scr { width:100%; height:100%; border-radius:25px; background:#f4f6fb; padding:26px 10px 0; display:grid; gap:9px; align-content:start; }
.dev-p .scr i { display:block; border-radius:10px; background:#fff; height:44px; box-shadow:0 1px 2px rgba(11,13,20,.08); } .dev-p .scr i:first-child { background:linear-gradient(150deg,#4a75ff,#1a3fd0); height:72px; } .dev-p .scr i:last-child { background:var(--brand); height:30px; border-radius:15px; }

.chatbox { position:absolute; left:50%; bottom:34px; width:min(430px,88%); transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; text-align:left; min-height:236px; justify-content:flex-end; }
.msg { max-width:82%; padding:12px 17px; border-radius:22px; font-size:16px; line-height:1.35; letter-spacing:-.01em; opacity:0; transform:translateY(12px) scale(.97); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.msg.show { opacity:1; transform:none; }
.msg.me { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:6px; }
.msg.ai { align-self:flex-start; background:#171a24; color:#eef1f8; border-bottom-left-radius:6px; min-height:44px; }
.typing { align-self:flex-start; display:none; gap:5px; padding:15px 18px; border-radius:22px; border-bottom-left-radius:6px; background:#171a24; }
.typing.show { display:flex; }
.typing i { width:7px; height:7px; border-radius:50%; background:#8d95ab; animation:dot 1.1s infinite; } .typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 30% { transform:translateY(-5px); background:#fff; } }
.act { align-self:flex-start; margin-left:4px; padding:9px 16px; border-radius:980px; font-size:14px; font-weight:500; border:1px solid var(--brand-soft); color:var(--brand-soft); opacity:0; transform:scale(.9); transition:all .5s var(--ease); }
.act.show { opacity:1; transform:none; }
.act.sent { background:var(--brand); border-color:var(--brand); color:#fff; }

.feats { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:64px; }
.feat .fi { width:52px; height:52px; border-radius:16px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; margin-bottom:16px; transition:transform .5s var(--ease), background .3s, color .3s; }
.feat:hover .fi { transform:translateY(-4px) rotate(-6deg); background:var(--brand); color:#fff; }
.feat .fi svg { width:26px; height:26px; }
.feat h4 { margin:0 0 6px; font-family:var(--display); font-size:21px; letter-spacing:-.025em; font-weight:600; }
.feat p { margin:0; color:var(--muted); font-size:16px; line-height:1.4; }
@media (max-width:860px) { .feats { grid-template-columns:1fr 1fr; gap:36px 24px; } }
@media (max-width:520px) { .feats { grid-template-columns:1fr; } }

/* ---- AI flow ---- */
.tabs { display:inline-flex; gap:4px; padding:5px; border-radius:980px; background:#11141d; margin-top:40px; }
.tabs button { border:0; background:transparent; padding:10px 22px; border-radius:980px; font-size:15px; font-weight:500; color:#9aa1b4; transition:background .3s, color .3s; }
.tabs button[aria-selected="true"] { background:var(--brand); color:#fff; }
.flow { position:relative; display:flex; align-items:stretch; margin-top:56px; padding:28px; border-radius:32px; background:#0a0c13; border:1px solid var(--line); overflow:hidden; text-align:left; }
.node { flex:1; position:relative; padding:22px 18px; border-radius:22px; background:#11141d; border:1px solid #1e2230; transition:border-color .5s, box-shadow .5s, background .5s, transform .6s var(--ease); }
.node .ni { width:42px; height:42px; border-radius:13px; background:#1a1e2b; color:#8d95ab; display:grid; place-items:center; margin-bottom:14px; transition:background .5s, color .5s; }
.node .ni svg { width:22px; height:22px; }
.node b { display:block; font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.node small { display:block; margin-top:5px; font-size:14px; color:var(--muted); line-height:1.35; }
.node .ns { position:absolute; top:16px; right:16px; font-size:12px; color:#6b7285; transition:color .4s; }
.node.active { border-color:var(--brand); background:#0f1424; box-shadow:0 0 0 1px var(--brand), 0 0 50px rgba(41,90,255,.35); transform:translateY(-6px); }
.node.active .ni { background:var(--brand); color:#fff; } .node.active .ns { color:var(--brand-soft); }
.node.done .ni { background:var(--brand-tint); color:var(--brand-soft); } .node.done .ns { color:var(--brand-soft); }
.conn { flex:0 0 44px; align-self:center; height:2px; background:#232838; position:relative; overflow:hidden; }
.conn i { position:absolute; inset:0; background:var(--brand); box-shadow:0 0 12px var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.conn.on i { transform:scaleX(1); }
.flow-out { max-width:620px; margin:36px auto 0; font-size:clamp(20px,2.4vw,26px); line-height:1.3; letter-spacing:-.02em; color:var(--ink); min-height:68px; }
@media (max-width:860px) {
  .flow { flex-direction:column; padding:16px; } .conn { flex:0 0 26px; width:2px; height:26px; } .conn i { transform:scaleY(0); transform-origin:top; } .conn.on i { transform:scaleY(1); }
  .node.active { transform:translateX(4px); }
}

/* ---- Work cards ---- */
.car-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.car-btns { display:flex; gap:10px; }
.car-btns button { width:42px; height:42px; border-radius:50%; border:0; background:var(--paper); display:grid; place-items:center; transition:background .2s, transform .2s var(--ease); }
.car-btns button:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
.car-btns svg { width:15px; height:15px; }
.car { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:40px max(24px, calc((100vw - 1080px)/2 + 24px)) 12px; scroll-padding-left:max(24px, calc((100vw - 1080px)/2 + 24px)); scrollbar-width:none; }
.car::-webkit-scrollbar { display:none; }
.wcard { flex:0 0 min(310px,80vw); height:420px; scroll-snap-align:start; background:var(--paper); border-radius:30px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; }
.wcard h4 { margin:0; font-family:var(--display); font-size:26px; line-height:1.1; letter-spacing:-.035em; font-weight:600; }
.wcard p { margin:8px 0 0; font-size:15px; color:var(--muted); line-height:1.4; }
.ill { height:190px; display:grid; place-items:center; position:relative; }
.grid4 { display:grid; grid-template-columns:repeat(2,68px); gap:12px; }
.grid4 i { height:68px; border-radius:18px; background:var(--line); animation:pick 3.6s infinite; } .grid4 i:nth-child(2) { animation-delay:.9s; } .grid4 i:nth-child(3) { animation-delay:1.8s; } .grid4 i:nth-child(4) { animation-delay:2.7s; }
@keyframes pick { 0%,25%,100% { background:var(--line); transform:none; } 8%,20% { background:var(--brand); transform:scale(1.07); } }
.cart { position:absolute; right:calc(50% - 110px); top:14px; min-width:30px; height:30px; padding:0 9px; border-radius:15px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; display:grid; place-items:center; animation:cartb 3.6s infinite; }
@keyframes cartb { 0%,8%,30%,100% { transform:none; } 14% { transform:scale(1.25); } }
.bcard { width:200px; height:124px; border-radius:20px; background:linear-gradient(140deg,#4a75ff,#1a3fd0); padding:16px; color:#fff; position:relative; overflow:hidden; box-shadow:0 18px 36px rgba(41,90,255,.35); animation:tiltc 5s ease-in-out infinite; }
.bcard::after { content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); animation:shine 3.2s infinite; }
.bcard .chp { width:30px; height:22px; border-radius:6px; background:rgba(255,255,255,.4); } .bcard .ln { position:absolute; left:16px; bottom:18px; height:8px; width:110px; border-radius:4px; background:rgba(255,255,255,.55); } .bcard .ln + .ln { bottom:34px; width:60px; background:rgba(255,255,255,.3); }
@keyframes shine { 0% { left:-80px; } 60%,100% { left:240px; } }
@keyframes tiltc { 50% { transform:rotate(-4deg) translateY(-6px); } }
.ring-svg { width:130px; height:130px; }
.ring-svg .tr { stroke:var(--line); } .ring-svg .pg { stroke:var(--brand); stroke-dasharray:1; animation:ringp 4.5s ease-in-out infinite; }
@keyframes ringp { 0% { stroke-dashoffset:1; } 60%,90% { stroke-dashoffset:.22; } 100% { stroke-dashoffset:1; } }
.route { width:230px; height:130px; }
.route .rt { stroke:var(--line); stroke-dasharray:6 7; }
.pbars { width:200px; display:grid; gap:16px; }
.pbars i { display:block; height:12px; border-radius:6px; background:var(--line); position:relative; overflow:hidden; }
.pbars i::after { content:""; position:absolute; inset:0; background:var(--brand); border-radius:6px; transform-origin:left; animation:fillb 4.5s var(--ease) infinite; width:var(--w); }
.pbars i:nth-child(2)::after { animation-delay:.4s; } .pbars i:nth-child(3)::after { animation-delay:.8s; }
@keyframes fillb { 0% { transform:scaleX(0); } 45%,90% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.dbars { display:flex; align-items:flex-end; gap:12px; height:120px; }
.dbars i { width:24px; border-radius:8px 8px 0 0; background:var(--brand); transform-origin:bottom; animation:barsy 3.6s var(--ease) infinite; height:var(--h); opacity:.9; } .dbars i:nth-child(odd) { background:var(--brand-soft); }
.dbars i:nth-child(2) { animation-delay:.15s; } .dbars i:nth-child(3) { animation-delay:.3s; } .dbars i:nth-child(4) { animation-delay:.45s; } .dbars i:nth-child(5) { animation-delay:.6s; }
@keyframes barsy { 0% { transform:scaleY(.15); } 40%,85% { transform:scaleY(1); } 100% { transform:scaleY(.15); } }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:110px; text-align:center; }
.stat b { display:block; font-family:var(--display); font-size:clamp(44px,6vw,72px); letter-spacing:-.05em; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; }
.stat span { display:block; margin-top:10px; color:var(--muted); font-size:16px; }
@media (max-width:760px) { .stats { grid-template-columns:1fr 1fr; gap:40px 16px; margin-top:80px; } }

.marq { margin-top:100px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marq-track { display:flex; align-items:center; gap:44px; width:max-content; animation:marq 46s linear infinite; }
.marq-track span { font-family:var(--display); font-size:clamp(30px,4vw,48px); font-weight:500; letter-spacing:-.035em; color:var(--muted); opacity:.55; white-space:nowrap; }
.mk { width:26px; height:26px; flex:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%202%20132%20132%27%3E%3Crect%20y%3D%272%27%20width%3D%27132%27%20height%3D%27132%27%20rx%3D%2716.42%27%20fill%3D%27%23295aff%27/%3E%3Cpath%20d%3D%27M103.70%20109.88%20100.57%20109.87%2098.09%20109.56%2095.62%20108.89%2093.14%20107.87%2091.99%20107.27%2090.17%20106.07%2088.19%20104.42%2086.49%20102.57%2084.89%20100.37%2084.57%20100.42%2081.26%20102.14%2077.63%20103.59%2074.17%20104.57%2070.54%20105.27%2066.58%20105.61%2062.95%20105.58%2059.32%20105.24%2055.36%20104.42%2051.73%20103.30%2049.91%20102.58%2046.78%20101.08%2044.80%2099.94%2042.82%2098.64%2040.67%2097.03%2038.69%2095.32%2036.36%2093.00%2034.03%2090.19%2031.72%2086.73%2030.11%2083.76%2028.58%2080.13%2027.56%2076.83%2026.77%2073.03%2026.39%2069.24%2026.40%2064.95%2026.78%2061.32%2027.58%2057.52%2028.74%2053.89%2029.77%2051.42%2031.38%2048.28%2033.53%2044.98%2036.03%2041.85%2038.86%2038.99%2041.83%2036.51%2044.47%2034.72%2047.77%2032.87%2051.07%2031.43%2055.19%2030.09%2058.16%2029.43%2061.79%2028.94%2066.25%2028.81%2070.21%2029.11%2073.67%2029.75%2077.30%2030.74%2081.43%2032.39%2084.56%2034.02%2088.36%2036.52%2091.41%2039.04%2094.01%2041.68%2096.31%2044.49%2097.45%2046.14%2098.97%2048.61%20100.15%2050.92%20101.28%2053.56%20102.09%2055.87%20102.91%2059.01%20103.42%2061.81%20103.75%2065.11%20103.83%2067.42%20103.83%20109.17%20103.83%20109.66ZM66.90%2083.92%2068.89%2083.63%2070.04%2083.33%2071.86%2082.67%2073.18%2082.00%2074.99%2080.85%2076.35%2079.80%2077.30%2078.89%2078.51%2077.49%2080.14%2075.01%2080.96%2073.20%2081.49%2071.55%2082.00%2068.58%2082.05%2067.26%2081.94%2065.61%2081.80%2064.45%2081.29%2062.31%2080.13%2059.50%2079.36%2058.18%2078.16%2056.53%2075.98%2054.36%2073.34%2052.55%2072.02%2051.89%2070.21%2051.19%2068.39%2050.74%2066.91%2050.52%2065.09%2050.44%2063.28%2050.52%2061.79%2050.74%2059.98%2051.19%2058.16%2051.88%2056.84%2052.53%2054.20%2054.34%2053.07%2055.38%2051.87%2056.70%2050.19%2059.17%2048.89%2062.14%2048.40%2064.12%2048.20%2065.44%2048.22%2068.91%2048.70%2071.55%2049.24%2073.20%2049.88%2074.68%2051.52%2077.32%2052.55%2078.55%2053.87%2079.84%2055.54%2081.12%2057.01%2082.00%2059.65%2083.16%2062.45%2083.83%2064.93%2084.03Z%27%20fill%3D%27%23fff%27%20fill-rule%3D%27evenodd%27/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes marq { to { transform:translateX(-50%); } }

/* ---- Industry-neutral CTA ---- */
.cta { position:relative; overflow:hidden; background:var(--brand); color:#fff; padding:140px 0; text-align:center; }
.cta .sub { color:rgba(255,255,255,.82); max-width:560px; margin-left:auto; margin-right:auto; }
.cta .bang { color:#fff; animation:none; text-shadow:0 0 40px rgba(255,255,255,.7); }
.cta-mark { position:relative; width:92px; height:92px; margin:0 auto 34px; }
.cta-mark img { position:relative; z-index:1; width:100%; height:100%; border-radius:26px; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:bob 5s ease-in-out infinite; }
.cta-mark::before, .cta-mark::after { content:""; position:absolute; inset:0; border-radius:26px; border:2px solid rgba(255,255,255,.7); animation:halo 3.2s ease-out infinite; }
.cta-mark::after { animation-delay:1.6s; }
@keyframes halo { from { transform:scale(1); opacity:.8; } to { transform:scale(3.4); opacity:0; } }
.cta .more { color:#fff; }
.cta-bg { position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.16), transparent 70%); }

/* ---- Footer ---- */
.foot { background:var(--paper); color:var(--muted); font-size:12px; line-height:1.4; padding:44px 0 calc(28px + env(safe-area-inset-bottom,0px)); }
.foot-top { display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:28px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.foot-top img { width:190px; height:auto; }
.foot h5 { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--ink); }
.foot a { display:block; padding:3px 0; color:var(--muted); transition:color .2s; }
.foot a:hover { color:var(--brand); }
.foot-note { padding:18px 0 4px; max-width:820px; }
.foot-bot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:10px; }
.foot-bot a { display:inline; margin-left:16px; }
@media (max-width:800px) { .foot-top { grid-template-columns:1fr 1fr; } .foot-top > div:first-child { grid-column:1/-1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  html.js .rv { opacity:1; transform:none; filter:none; transition:none; }
  .w, .bang, .hero-sub, .hero .row-cta { animation:none; opacity:1; transform:none; filter:none; }
  .hero::before { animation:none; opacity:1; }
  .marq-track, .chip-f .fl, .rings i, .cta-mark img, .cta-mark::before, .cta-mark::after, .grid4 i, .cart, .bcard, .bcard::after, .dbars i, .pbars i::after, .ring-svg .pg { animation:none; }
  .dbars i { transform:none; } .pbars i::after { transform:none; } .ring-svg .pg { stroke-dashoffset:.22; }
  .chip-f, .dev { transition:none; }
}

/* =====================================================
   MULTI-PAGE ADDITIONS
   ===================================================== */

/* ---- Theme transition (added briefly on toggle) ---- */
html.tt *, html.tt *::before, html.tt *::after { transition:background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease !important; }

/* ---- Nav v2 ---- */
.nav-r { display:flex; align-items:center; gap:10px; }
.theme { width:34px; height:34px; border-radius:50%; border:0; background:transparent; display:grid; place-items:center; color:var(--ink); position:relative; transition:background .25s; }
.theme:hover { background:rgba(128,128,128,.2); }
.theme svg { position:absolute; width:19px; height:19px; transition:transform .7s var(--ease), opacity .4s; }
.theme .i-sun { opacity:0; transform:rotate(-90deg) scale(.4); }
.theme .i-moon { opacity:1; transform:none; }
html[data-theme="dark"] .theme .i-sun { opacity:1; transform:none; }
html[data-theme="dark"] .theme .i-moon { opacity:0; transform:rotate(90deg) scale(.4); }
.burger { display:none; width:34px; height:34px; border:0; background:transparent; position:relative; }
.burger i { position:absolute; left:8px; right:8px; height:2px; border-radius:2px; background:var(--ink); transition:transform .45s var(--ease), top .45s var(--ease); }
.burger i:nth-child(1) { top:12px; } .burger i:nth-child(2) { top:20px; }
body.menu-open .burger i:nth-child(1) { top:16px; transform:rotate(45deg); }
body.menu-open .burger i:nth-child(2) { top:16px; transform:rotate(-45deg); }
.nav-links a[aria-current="page"] { opacity:1; font-weight:600; }
@media (max-width:860px) { .burger { display:block; } .nav-cta { display:none; } }
.mmenu { position:fixed; inset:0; z-index:55; background:var(--bg); padding:calc(env(safe-area-inset-top,0px) + 84px) 28px 40px; opacity:0; pointer-events:none; transition:opacity .4s; overflow-y:auto; }
body.menu-open .mmenu { opacity:1; pointer-events:auto; }
body.menu-open { overflow:hidden; }
.mmenu a { display:block; font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:-.035em; padding:7px 0; opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i) * .035s + .08s); }
body.menu-open .mmenu a { opacity:1; transform:none; }
.mmenu a[aria-current="page"] { color:var(--brand); }

/* ---- Page transitions ---- */
#app { transition:opacity .22s ease; }
#app.leaving { opacity:0; }
#app.entering { animation:pageIn .8s var(--ease); }
@keyframes pageIn { from { opacity:0; transform:translateY(14px); } }

/* ---- Sub-page hero ---- */
.phero { position:relative; overflow:hidden; padding:84px 0 88px; text-align:center; }
.phero::before { content:""; position:absolute; left:50%; top:-240px; width:1000px; height:620px; margin-left:-500px; background:radial-gradient(closest-side, rgba(41,90,255,.15), transparent); pointer-events:none; }
.phero.s-dark::before { background:radial-gradient(closest-side, rgba(41,90,255,.42), transparent); }
.phero .wrap { position:relative; }
.h-2 { font-size:clamp(42px,7.4vw,84px); }
.crumb { font-size:15px; color:var(--muted); margin:0 0 18px; }
.crumb a { color:var(--link); }
.crumb a:hover { text-decoration:underline; }
.hero-sub2 { max-width:660px; margin:20px auto 0; animation:fadeup 1s .6s var(--ease) both; }
.phero .row-cta { animation:fadeup 1s .8s var(--ease) both; }
.head-c { text-align:center; }
.head-c .sub { max-width:640px; margin-left:auto; margin-right:auto; }
.tabs { background:var(--paper); }
.tabs button { color:var(--muted); }
.s-dark { --paper:#0e1119; }

/* ---- Generic bits ---- */
.ico-b { width:52px; height:52px; border-radius:16px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; margin-bottom:18px; transition:transform .5s var(--ease), background .3s, color .3s; flex:none; }
.ico-b svg { width:26px; height:26px; }
.hv:hover .ico-b { background:var(--brand); color:#fff; transform:translateY(-3px) rotate(-6deg); }
.s-dark .ico-b { color:var(--brand-soft); }
.tick { list-style:none; padding:0; margin:0; display:grid; gap:12px; font-size:16px; }
.tick li { display:flex; gap:10px; align-items:flex-start; }
.tick li svg { width:18px; height:18px; color:var(--brand); flex:none; margin-top:3px; }
.s-dark .tick li svg { color:var(--brand-soft); }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pills span { padding:7px 15px; border-radius:980px; background:var(--paper); font-size:14px; font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px; }
.chip { background:var(--paper); border:1px solid transparent; padding:10px 20px; border-radius:980px; font-size:16px; transition:background .25s, color .25s, transform .3s var(--ease); }
.chip:hover { background:rgba(128,128,128,.22); }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.chip:active { transform:scale(.96); }
.s-dark .chip[aria-pressed="true"] { background:#f4f6fb; color:#000; }
.tp { display:none; }
.tp.on { display:block; animation:tabin .7s var(--ease); }
@keyframes tabin { from { opacity:0; transform:translateY(16px); } }

/* ---- Capability / use-case cards ---- */
.caps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px; text-align:left; }
.caps.c2 { grid-template-columns:1fr 1fr; }
.caps.c4 { grid-template-columns:repeat(4,1fr); }
.cap { position:relative; background:var(--paper); border-radius:28px; padding:34px 30px 30px; min-height:250px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.cap:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.cap h3 { margin:0 0 8px; font-family:var(--display); font-size:24px; line-height:1.15; letter-spacing:-.03em; font-weight:600; }
.cap p { margin:0; color:var(--muted); font-size:16px; line-height:1.42; }
.cap .ex { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.cap .ex b { color:var(--ink); font-weight:600; }
@media (max-width:900px) { .caps, .caps.c4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .caps, .caps.c2, .caps.c4 { grid-template-columns:1fr; } .cap { min-height:0; } }

/* ---- Engagement cards ---- */
.engs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px; text-align:left; }
.ecard { background:#0b0d14; border:1px solid var(--line); border-radius:28px; padding:34px 30px; transition:border-color .4s, transform .5s var(--ease); }
.ecard:hover { border-color:var(--brand); transform:translateY(-6px); }
.ecard h3 { font-family:var(--display); font-size:28px; letter-spacing:-.035em; margin:0 0 6px; font-weight:600; }
.ecard .best { color:var(--muted); font-size:16px; margin:0 0 24px; line-height:1.4; }
@media (max-width:900px) { .engs { grid-template-columns:1fr; } }

/* ---- Fan stage (app development hero) ---- */
.stage .phone { z-index:2; }
.mini { position:absolute; z-index:1; top:104px; left:50%; width:236px; height:490px; margin-left:-118px; border-radius:44px; background:#0b0c11; padding:9px; box-shadow:0 0 0 1px #2c303c inset, 0 40px 80px rgba(11,13,20,.3); opacity:0; transition:transform 1.5s var(--ease), opacity 1s; }
.stage.live .mini.l { transform:translateX(-300px) rotate(-8deg); opacity:1; }
.stage.live .mini.r { transform:translateX(300px) rotate(8deg); opacity:1; }
.ms { width:100%; height:100%; border-radius:36px; overflow:hidden; background:#f4f6fb; color:#0b0d14; position:relative; padding:52px 12px 0; font-family:var(--text); }
.ms .mt { display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid #e6e9f1; }
.ms .mt i { width:26px; height:26px; border-radius:50%; background:var(--brand); }
.ms .mt b { font-size:13px; display:block; line-height:1.1; } .ms .mt small { font-size:10px; color:#6b7285; }
.mbb { max-width:80%; padding:9px 12px; border-radius:16px; font-size:12px; line-height:1.3; margin-top:10px; }
.mbb.me { background:var(--brand); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.mbb.ai { background:#fff; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(11,13,20,.08); }
.ms .inp { position:absolute; left:12px; right:12px; bottom:20px; height:36px; border-radius:18px; background:#fff; box-shadow:0 1px 3px rgba(11,13,20,.1); }
.ms.map { padding:0; background:#e9eefb; }
.ms.map svg { position:absolute; inset:0; width:100%; height:100%; }
.ms .sheet { position:absolute; left:10px; right:10px; bottom:14px; background:#fff; border-radius:20px; padding:14px; box-shadow:0 10px 30px rgba(11,13,20,.18); }
.ms .sheet b { font-size:14px; display:block; } .ms .sheet small { font-size:11px; color:#6b7285; }
.ms .sheet .pb { height:6px; border-radius:3px; background:#e6e9f1; margin-top:10px; overflow:hidden; } .ms .sheet .pb i { display:block; height:100%; width:68%; background:var(--brand); border-radius:3px; animation:fillb 4.5s var(--ease) infinite; transform-origin:left; }
@media (max-width:1000px) { .mini { display:none; } }

/* ---- Platform panels + helper ---- */
.pl { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin-top:48px; text-align:left; }
.pl h3 { font-family:var(--display); font-size:clamp(28px,3.6vw,44px); letter-spacing:-.04em; line-height:1.08; margin:0; font-weight:600; }
.pl p { margin:14px 0 22px; color:var(--muted); font-size:19px; line-height:1.4; }
.pbox { background:var(--paper); border-radius:32px; padding:40px; display:grid; gap:26px; min-height:300px; align-content:center; }
.big-ic { width:84px; height:84px; border-radius:26px; background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:0 18px 40px rgba(41,90,255,.35); }
.big-ic svg { width:40px; height:40px; }
.pbox h4 { margin:0; font-family:var(--display); font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; }
@media (max-width:860px) { .pl { grid-template-columns:1fr; gap:32px; } }
.helper { background:var(--paper); border-radius:32px; padding:44px; margin-top:56px; display:grid; grid-template-columns:1.1fr 1fr; gap:44px; text-align:left; }
.helper .q-t { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; margin:0 0 12px; }
.helper .opts { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.opt { background:var(--bg); border:1.5px solid var(--line); border-radius:980px; padding:10px 18px; font-size:15px; transition:all .25s var(--ease); }
.opt:hover { border-color:var(--brand); }
.opt[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.result { background:var(--brand); color:#fff; border-radius:26px; padding:34px; min-height:250px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 24px 60px rgba(41,90,255,.35); }
.result small { opacity:.75; font-size:14px; }
.result h4 { margin:6px 0 10px; font-family:var(--display); font-size:32px; letter-spacing:-.04em; line-height:1.05; font-weight:600; }
.result p { margin:0 0 18px; font-size:16px; line-height:1.45; opacity:.92; }
.result a { color:#fff; font-weight:500; } .result a::after { content:" ›"; }
.result.pop { animation:tabin .6s var(--ease); }
@media (max-width:860px) { .helper { grid-template-columns:1fr; padding:28px; } }

/* ---- Icon grid, timeline ---- */
.igrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px; text-align:left; }
.it { display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:22px; background:var(--tile); border:1px solid var(--line); font-family:var(--display); font-weight:500; font-size:18px; letter-spacing:-.02em; transition:transform .5s var(--ease), border-color .3s; }
.it:hover { transform:translateY(-4px); border-color:var(--brand); }
.it .ico-b { margin:0; width:44px; height:44px; border-radius:14px; } .it .ico-b svg { width:22px; height:22px; }
@media (max-width:900px) { .igrid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .igrid { grid-template-columns:1fr; } }
.tl { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px; text-align:left; }
.tl-i { position:relative; padding-top:30px; }
.tl-i::before, .tl-i::after { content:""; position:absolute; top:5px; left:0; right:-24px; height:2px; background:var(--line); }
.tl-i:last-child::before, .tl-i:last-child::after { right:0; }
.tl-i::after { background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease); transition-delay:calc(var(--d,0s) + .35s); }
.tl-i.in::after { transform:scaleX(1); }
.tl-i .dot { position:absolute; top:0; left:0; z-index:1; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 5px rgba(41,90,255,.2); }
.tl-i small { color:var(--brand); font-weight:600; font-size:14px; }
.s-dark .tl-i small { color:var(--brand-soft); }
.tl-i h4 { margin:4px 0 6px; font-family:var(--display); font-size:24px; letter-spacing:-.03em; font-weight:600; }
.tl-i p { margin:0; color:var(--muted); font-size:16px; line-height:1.42; }
@media (max-width:760px) { .tl { grid-template-columns:1fr 1fr; gap:36px 20px; } .tl-i::before, .tl-i::after { right:-20px; } .tl-i:nth-child(2n)::before, .tl-i:nth-child(2n)::after { right:0; } }

/* ---- FAQ ---- */
.faq { max-width:780px; margin:56px auto 0; text-align:left; border-top:1px solid var(--line); }
.fq { border-bottom:1px solid var(--line); }
.fq > button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; background:none; border:0; text-align:left; font-family:var(--display); font-size:clamp(19px,2.3vw,24px); font-weight:500; letter-spacing:-.025em; }
.fq .pm { width:30px; height:30px; flex:none; position:relative; border-radius:50%; background:var(--paper); transition:transform .5s var(--ease), background .3s; }
.fq .pm::before, .fq .pm::after { content:""; position:absolute; left:9px; right:9px; top:14px; height:2px; border-radius:2px; background:var(--ink); transition:transform .4s var(--ease), background .3s; }
.fq .pm::after { transform:rotate(90deg); }
.fq.open .pm { background:var(--brand); transform:rotate(180deg); }
.fq.open .pm::before, .fq.open .pm::after { background:#fff; }
.fq.open .pm::after { transform:rotate(0); }
.fa { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.fq.open .fa { grid-template-rows:1fr; }
.fa > div { overflow:hidden; }
.fa p { margin:0 0 24px; color:var(--muted); font-size:18px; line-height:1.5; max-width:660px; }

/* ---- AI page ---- */
.aiwrap { position:relative; margin:56px auto 0; width:min(560px,100%); }
.aiorb { position:absolute; left:50%; top:50%; width:620px; height:620px; margin:-310px 0 0 -310px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(111,147,255,.55), rgba(41,90,255,.25) 45%, transparent 70%); filter:blur(30px); animation:float 9s ease-in-out infinite; pointer-events:none; }
@keyframes float { 50% { transform:translateY(-16px) scale(1.04); } }
.aicard { position:relative; background:#080a11; border:1px solid #232838; border-radius:32px; padding:22px 26px 30px; text-align:left; box-shadow:0 40px 100px rgba(41,90,255,.25); overflow:hidden; }
.aicard .ah { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid #1e2230; font-size:14px; color:#9aa1b4; }
.aicard .ah i { width:34px; height:34px; border-radius:11px; background:var(--brand); display:grid; place-items:center; color:#fff; } .aicard .ah i svg { width:18px; height:18px; }
.aicard .ah b { display:block; color:#f4f6fb; font-size:15px; line-height:1.15; }
.aicard .ah em { margin-left:auto; font-style:normal; font-size:12px; color:#7aa0ff; display:flex; align-items:center; gap:6px; }
.aicard .ah em::before { content:""; width:7px; height:7px; border-radius:50%; background:#7aa0ff; animation:pulse 2s infinite; }
.chatbox.static { position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:22px; }
.ctrl { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; text-align:left; }
.ctrl-l, .ctrl-r { background:#0b0d14; border:1px solid var(--line); border-radius:28px; }
.ctrl-l { padding:8px 28px; }
.crow { display:flex; align-items:center; gap:18px; padding:22px 0; }
.crow + .crow { border-top:1px solid var(--line); }
.crow b { display:block; font-family:var(--display); font-size:19px; letter-spacing:-.02em; font-weight:600; }
.crow small { color:var(--muted); font-size:14px; line-height:1.35; }
.sw { margin-left:auto; flex:none; width:54px; height:32px; border-radius:16px; border:0; background:#2a2f3d; position:relative; transition:background .3s; }
.sw::after { content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; transition:transform .45s cubic-bezier(.2,1.25,.3,1); }
.sw[aria-checked="true"] { background:var(--brand); }
.sw[aria-checked="true"]::after { transform:translateX(22px); }
.ctrl-r { padding:30px; }
.ctrl-r .st-chip { display:inline-block; padding:5px 12px; border-radius:980px; font-size:13px; font-weight:600; background:var(--brand-tint); color:var(--brand-soft); margin-bottom:18px; transition:background .3s, color .3s; }
.ctrl-r .st-chip.warn { background:rgba(255,170,60,.16); color:#ffb454; }
.lline { display:flex; gap:12px; align-items:flex-start; padding:11px 0; font-size:16px; color:#d6dae6; animation:tabin .5s var(--ease) backwards; animation-delay:calc(var(--k) * .06s); }
.lline svg { width:18px; height:18px; flex:none; margin-top:3px; color:var(--brand-soft); }
.lline.off svg { color:#ffb454; }
@media (max-width:860px) { .ctrl { grid-template-columns:1fr; } }

/* ---- Industries ---- */
.ind { display:grid; grid-template-columns:.9fr 1.3fr; gap:56px; margin-top:56px; text-align:left; align-items:start; }
.ind-list { display:grid; gap:2px; }
.ind-list button { background:none; border:0; text-align:left; font-family:var(--display); font-size:clamp(26px,3.2vw,40px); letter-spacing:-.04em; font-weight:600; padding:10px 0 10px 22px; color:var(--muted); opacity:.6; position:relative; transition:color .3s, opacity .3s, padding .45s var(--ease); }
.ind-list button::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; margin-top:-4px; border-radius:50%; background:var(--brand); transform:scale(0); transition:transform .45s var(--ease); }
.ind-list button[aria-selected="true"] { color:var(--ink); opacity:1; padding-left:34px; }
.ind-list button[aria-selected="true"]::before { transform:scale(1); }
.ind-panel { background:var(--tile); border-radius:32px; padding:42px; min-height:440px; }
.ind-panel.swap { animation:tabin .6s var(--ease); }
.ind-panel h3 { margin:0; font-family:var(--display); font-size:clamp(28px,3.4vw,40px); letter-spacing:-.04em; line-height:1.08; font-weight:600; }
.ind-panel > p { margin:12px 0 26px; color:var(--muted); font-size:19px; line-height:1.4; }
.ind-panel .ul { display:grid; gap:18px; margin-bottom:28px; }
.ind-panel .u { display:flex; gap:16px; align-items:flex-start; }
.ind-panel .u .ico-b { margin:0; width:44px; height:44px; border-radius:14px; } .ind-panel .u .ico-b svg { width:22px; height:22px; }
.ind-panel .u b { display:block; font-family:var(--display); font-size:19px; letter-spacing:-.02em; font-weight:600; }
.ind-panel .u small { color:var(--muted); font-size:15px; line-height:1.4; }
.ind-panel .fw { color:var(--muted); font-size:14px; margin:0 0 10px; }
.badges { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:56px; }
.badge { padding:18px 28px; border-radius:22px; background:var(--tile); border:1px solid var(--line); font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; transition:transform .5s var(--ease), border-color .3s, box-shadow .4s; }
.badge:hover { transform:translateY(-5px); border-color:var(--brand); box-shadow:0 0 40px rgba(41,90,255,.3); }
@media (max-width:860px) { .ind { grid-template-columns:1fr; gap:28px; } .ind-list { display:flex; flex-wrap:wrap; gap:6px 18px; } .ind-list button { font-size:22px; padding:6px 0 6px 0; } .ind-list button::before { display:none; } .ind-list button[aria-selected="true"] { padding-left:0; color:var(--brand); } .ind-panel { padding:28px; min-height:0; } }

/* ---- Work ---- */
.pgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; text-align:left; }
.pcard { background:var(--tile); border-radius:32px; overflow:hidden; cursor:pointer; transition:opacity .35s, transform .5s var(--ease), box-shadow .5s; border:0; padding:0; display:block; width:100%; text-align:left; color:var(--ink); }
.pcard:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.pcard.out { opacity:0; transform:scale(.94); }
.dkv { --ink:#f4f6fb; --muted:#9aa1b4; --line:#262a38; --tile:#10131c; --paper:#0e1119; color:var(--ink); }
.pcard.dkv { background:#05060b; }
.pv { height:300px; display:grid; place-items:center; position:relative; background:radial-gradient(70% 90% at 50% 20%, var(--brand-tint), transparent); }
.pv .ill { height:auto; }
.pcard:hover .pv .ill { transform:scale(1.06); } .pv .ill { transition:transform .7s var(--ease); }
.pb { padding:8px 32px 32px; }
.pb .tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pb .tags span { font-size:12px; font-weight:600; padding:4px 11px; border-radius:980px; background:var(--brand-tint); color:var(--brand); }
.dkv .pb .tags span { color:var(--brand-soft); }
.pb .tags span.smp { background:transparent; border:1px dashed var(--line); color:var(--muted); font-weight:500; }
.pb h3 { margin:0 0 6px; font-family:var(--display); font-size:30px; letter-spacing:-.035em; line-height:1.1; font-weight:600; }
.pb p { margin:0 0 16px; color:var(--muted); font-size:17px; line-height:1.4; }
.pb .more { font-size:17px; }
@media (max-width:860px) { .pgrid { grid-template-columns:1fr; } }
.quotes { position:relative; margin-top:56px; height:290px; }
.q { position:absolute; inset:0; opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); pointer-events:none; }
.q.on { opacity:1; transform:none; pointer-events:auto; }
.q blockquote { margin:0 auto; max-width:820px; font-family:var(--display); font-size:clamp(24px,3.6vw,42px); line-height:1.14; letter-spacing:-.035em; font-weight:600; }
.q cite { display:block; margin-top:22px; font-style:normal; color:var(--muted); font-size:16px; }
.qdots { display:flex; gap:10px; justify-content:center; margin-top:8px; }
.qdots button { width:46px; height:4px; border-radius:2px; border:0; background:var(--line); overflow:hidden; position:relative; padding:0; }
.qdots button::after { content:""; position:absolute; inset:0; background:var(--brand); transform:scaleX(0); transform-origin:left; }
.qdots button.on::after { animation:qp 6s linear forwards; }
@keyframes qp { to { transform:scaleX(1); } }
@media (max-width:640px) { .quotes { height:380px; } }

/* ---- Modal ---- */
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; transition:opacity .35s, visibility 0s .35s; }
.modal.open { visibility:visible; opacity:1; transition:opacity .35s; }
.m-back { position:absolute; inset:0; background:rgba(5,7,12,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.m-card { position:relative; width:min(720px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--bg); color:var(--ink); border-radius:32px; padding:52px 44px 44px; transform:translateY(34px) scale(.96); transition:transform .6s var(--ease); box-shadow:0 40px 120px rgba(0,0,0,.45); }
.modal.open .m-card { transform:none; }
.m-x { position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:0; background:var(--paper); font-size:22px; line-height:1; color:var(--ink); }
.m-x:hover { background:var(--brand); color:#fff; }
.m-card h2 { font-family:var(--display); font-size:clamp(28px,4vw,40px); letter-spacing:-.04em; line-height:1.08; margin:10px 0 0; font-weight:600; }
.m-card .meta { display:flex; gap:8px; flex-wrap:wrap; }
.m-card .meta span { font-size:12px; font-weight:600; padding:4px 11px; border-radius:980px; background:var(--brand-tint); color:var(--brand); }
.m-card .meta span.smp { background:transparent; border:1px dashed var(--line); color:var(--muted); font-weight:500; }
.m-card h4 { font-family:var(--display); font-size:18px; letter-spacing:-.02em; margin:28px 0 6px; color:var(--brand); }
.m-card p { color:var(--muted); font-size:18px; line-height:1.55; margin:14px 0 0; }
.m-card h4 + p { margin-top:0; color:var(--ink); }
@media (max-width:560px) { .m-card { padding:52px 24px 30px; } }

/* ---- Team / values / scrub ---- */
.team { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; text-align:left; }
.tm { background:var(--paper); border-radius:28px; padding:28px; display:flex; gap:18px; align-items:center; transition:transform .5s var(--ease); }
.tm:hover { transform:translateY(-5px); }
.av2 { width:64px; height:64px; border-radius:50%; flex:none; background:linear-gradient(145deg,#4a75ff,#1a3fd0); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:22px; box-shadow:0 10px 24px rgba(41,90,255,.3); transition:transform .6s var(--ease); }
.tm:hover .av2 { transform:rotate(-8deg) scale(1.08); }
.tm b { display:block; font-family:var(--display); font-size:20px; letter-spacing:-.02em; font-weight:600; line-height:1.15; }
.tm small { color:var(--muted); font-size:14px; }
@media (max-width:860px) { .team { grid-template-columns:1fr 1fr; } } @media (max-width:520px) { .team { grid-template-columns:1fr; } }
.vals { margin-top:56px; border-top:1px solid var(--line); text-align:left; }
.val { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:30px 0; border-bottom:1px solid var(--line); transition:padding .55s var(--ease); }
.val h3 { margin:0; font-family:var(--display); font-size:clamp(28px,4.2vw,50px); letter-spacing:-.045em; line-height:1.05; font-weight:600; transition:color .4s; }
.val p { margin:0; max-width:340px; color:var(--muted); font-size:17px; line-height:1.4; }
.val:hover { padding-left:22px; } .val:hover h3 { color:var(--brand-soft); }
@media (max-width:760px) { .val { flex-direction:column; align-items:flex-start; gap:10px; } }
.scrub { font-family:var(--display); font-size:clamp(30px,5.2vw,62px); line-height:1.1; font-weight:600; letter-spacing:-.045em; text-align:left; max-width:960px; margin:0 auto; }
.scrub .sw2 { color:var(--muted); opacity:.3; transition:opacity .35s, color .35s; }
.scrub .sw2.lit { opacity:1; color:var(--ink); }
.scrub .sw2.lit .bw { color:var(--brand); }
.av2 svg { width:28px; height:28px; }
.careers { display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--tile); border-radius:32px; padding:48px 52px; }
.careers h3 { margin:0 0 6px; font-family:var(--display); font-size:clamp(26px,3.4vw,38px); letter-spacing:-.04em; font-weight:600; line-height:1.1; }
.careers p { margin:0; color:var(--muted); font-size:18px; }
@media (max-width:760px) { .careers { flex-direction:column; align-items:flex-start; padding:32px 28px; } }

/* ---- Insights ---- */
.agrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; text-align:left; }
.acard { background:var(--tile); border-radius:28px; overflow:hidden; cursor:pointer; transition:opacity .35s, transform .5s var(--ease), box-shadow .5s; border:0; padding:0; text-align:left; color:var(--ink); display:block; width:100%; }
.acard:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.acard.out { opacity:0; transform:scale(.94); }
.th { position:relative; height:180px; overflow:hidden; background:linear-gradient(135deg, var(--g1,#295aff), var(--g2,#1a3fd0)); }
.th::before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-50px; top:-70px; background:rgba(255,255,255,.14); transition:transform 1s var(--ease); }
.th::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; left:24px; bottom:-40px; background:rgba(255,255,255,.12); transition:transform 1s var(--ease); }
.acard:hover .th::before, .fart:hover .th::before { transform:translate(-20px,20px) scale(1.15); } .acard:hover .th::after, .fart:hover .th::after { transform:translate(20px,-10px) scale(1.25); }
.th svg { position:absolute; left:24px; top:24px; width:34px; height:34px; color:#fff; z-index:1; }
.ab { padding:22px 26px 28px; }
.ab .cat { font-size:13px; font-weight:600; color:var(--brand); } .ab .cat span { color:var(--muted); font-weight:400; }
.ab h3 { margin:6px 0 8px; font-family:var(--display); font-size:23px; letter-spacing:-.03em; line-height:1.15; font-weight:600; }
.ab p { margin:0; color:var(--muted); font-size:15px; line-height:1.42; }
.fart { grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr; background:#05060b; color:#f4f6fb; border-radius:32px; overflow:hidden; cursor:pointer; border:0; padding:0; text-align:left; transition:transform .5s var(--ease), box-shadow .5s; }
.fart:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.fart .th { height:auto; min-height:340px; order:2; } .fart .th::before { width:360px; height:360px; right:-80px; top:-100px; } .fart .th::after { width:200px; height:200px; }
.fart .ab { padding:48px 44px; align-self:center; } .fart .ab h3 { font-size:clamp(28px,3.6vw,42px); letter-spacing:-.04em; line-height:1.08; } .fart .ab p { color:#a4abbd; font-size:18px; }
.fart .cat { color:#7aa0ff; } .fart .more { display:inline-block; margin-top:20px; color:#7aa0ff; font-size:18px; }
@media (max-width:900px) { .agrid { grid-template-columns:1fr 1fr; } .fart { grid-template-columns:1fr; } .fart .th { order:0; min-height:200px; } }
@media (max-width:560px) { .agrid { grid-template-columns:1fr; } }

/* ---- Contact form ---- */
.cform { display:grid; grid-template-columns:1.35fr .8fr; gap:16px; text-align:left; align-items:start; }
.fcard, .icard { background:var(--tile); border-radius:32px; padding:44px; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.fld { margin-bottom:24px; }
.fld > label, .fld > .lb { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.fld input, .fld textarea { width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:16px; transition:border-color .25s, box-shadow .25s; }
.fld textarea { min-height:130px; resize:vertical; }
.fld input:focus, .fld textarea:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); }
.fld .em { display:none; color:#e5484d; font-size:13px; margin-top:6px; }
.fld.err input, .fld.err textarea { border-color:#e5484d; }
.fld.err .em { display:block; }
.fld.err { animation:shake .4s; }
@keyframes shake { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
.chips.l { justify-content:flex-start; margin-top:0; }
.icard h3 { font-family:var(--display); font-size:24px; letter-spacing:-.03em; margin:0 0 18px; font-weight:600; }
.nx { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:18px; counter-reset:n; }
.nx li { display:flex; gap:14px; counter-increment:n; }
.nx li::before { content:counter(n); flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-tint); color:var(--brand); font-weight:600; font-size:14px; display:grid; place-items:center; }
.nx b { display:block; font-weight:600; } .nx small { color:var(--muted); font-size:15px; line-height:1.4; }
.cl { display:grid; gap:10px; padding-top:22px; border-top:1px solid var(--line); font-size:16px; }
.cl a { color:var(--link); } .cl a:hover { text-decoration:underline; } .cl span { color:var(--muted); }
.form-sent h3 { font-family:var(--display); font-size:34px; letter-spacing:-.04em; margin:0 0 10px; font-weight:600; }
.form-sent p { color:var(--muted); font-size:18px; max-width:420px; margin:0 auto; }
@media (max-width:900px) { .cform { grid-template-columns:1fr; } .fcard, .icard { padding:30px 24px; } .f2 { grid-template-columns:1fr; } }
.btn[disabled] { opacity:.6; cursor:progress; }

/* ---- Footer v2 ---- */
.foot-top { grid-template-columns:1.3fr repeat(4,1fr); }

/* Surfaces that sit on a paper background need the tile colour to stay visible */
.s-paper .pbox, .s-paper .helper { background:var(--tile); }
.s-paper .chip, .s-paper .tabs { background:var(--tile); }
.s-paper .chip[aria-pressed="true"] { background:var(--ink); }
.s-paper .fq .pm { background:var(--tile); }
.s-paper .pills span { background:var(--paper); }
.s-paper .helper .opt { background:var(--paper); }
.s-paper .helper .opt[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }

/* =====================================================
   ANIMATED LOGO
   ===================================================== */
:root { --logo-word:#295aff; }
html[data-theme="dark"] { --logo-word:#6f93ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --logo-word:#6f93ff; } }
.nav.on-dark { --logo-word:#7d9dff; }

.lg { display:block; overflow:visible; height:44px; width:auto; }
.lg-sq { fill:var(--sq, var(--brand)); }
.lg-a { fill:var(--ac, #fff); }
.lg-l { fill:var(--logo-word); }
.lg-shine { fill:rgba(255,255,255,.42); }
.lg-ico, .lg-a, .lg-shine, .lgl, .lg-l { transform-box:fill-box; transform-origin:center; }
.lg-l { transform-origin:center bottom; }

.lg-ico { animation:icoIn 1.15s cubic-bezier(.2,1.35,.3,1) both; animation-delay:var(--ld,0s); }
@keyframes icoIn { 0% { opacity:0; transform:scale(.3) rotate(-24deg); } 55% { opacity:1; } 100% { opacity:1; transform:none; } }
.lg-a { animation:aIn 1s var(--ease) both; animation-delay:calc(var(--ld,0s) + .35s); }
@keyframes aIn { 0% { opacity:0; transform:scale(.4) rotate(28deg); } 100% { opacity:1; transform:none; } }
.lgl { animation:ltIn .9s var(--ease) both; animation-delay:calc(var(--ld,0s) + .6s + var(--i) * .07s); }
@keyframes ltIn { from { opacity:0; transform:translateY(42%) scale(.85); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
.lg-shine { transform:skewX(-20deg); animation:shineX 7s ease-in-out infinite; animation-delay:calc(var(--ld,0s) + 2.4s); }
@keyframes shineX { 0%, 72% { transform:translateX(0) skewX(-20deg); } 100% { transform:translateX(240px) skewX(-20deg); } }
.lg-l { animation:wave 10s ease-in-out infinite; animation-delay:calc(var(--ld,0s) + 5s + var(--i) * .07s); }
@keyframes wave { 0%, 6%, 100% { transform:none; } 3% { transform:translateY(-7%); } }
.brand:hover .lg-ico { animation:hop .8s var(--ease); }
@keyframes hop { 30% { transform:translateY(-9%) rotate(-10deg) scale(1.1); } 65% { transform:rotate(6deg) scale(1.04); } }
.brand:hover .lg-l { animation:wave2 .8s var(--ease) both; animation-delay:calc(var(--i) * .04s); }
@keyframes wave2 { 40% { transform:translateY(-14%); } }

/* logos that animate when scrolled into view */
.lg.io { --ld:0s; }
.lg.io:not(.play), .lg.io:not(.play) * { animation-play-state:paused !important; }

.nav-logo { display:block; position:relative; width:166px; height:44px; }
.nav-logo .lg-full, .nav-logo .lg-mini { position:absolute; left:0; top:0; display:block; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.nav-logo .lg-full .lg { height:44px; }
.nav-logo .lg-mini .lg { height:44px; width:44px; }
.nav-logo .lg-mini { opacity:0; transform:scale(.55) translateX(2px); transform-origin:left center; }
.nav.compact .nav-logo .lg-full { opacity:0; transform:scale(1.2); }
.nav.compact .nav-logo .lg-mini { opacity:1; transform:none; }

/* Icon-only version (call to action) */
.lg-only { width:100%; height:100%; }
.cta-mark { width:112px; height:112px; margin-bottom:38px; }
.cta-mark .lg { --sq:#fff; --ac:var(--brand); border-radius:30px; box-shadow:0 22px 60px rgba(0,0,0,.3); animation:bob 5s ease-in-out infinite; position:relative; z-index:1; }
.cta-mark::before, .cta-mark::after { border-radius:30px; }
.cta .lg-shine { fill:rgba(41,90,255,.22); }

/* Footer brand */
.foot-name { margin:0; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.foot-tag { margin:8px 0 0; font-size:15px; color:var(--brand); letter-spacing:-.01em; }
[data-theme="dark"] .foot-tag { color:#6f93ff; }
.foot-top img { display:none; }

/* =====================================================
   SPLASH
   ===================================================== */
.sp { position:fixed; inset:0; z-index:300; background:var(--brand); display:grid; place-items:center; align-content:center; color:#fff; transition:transform 1s cubic-bezier(.76,0,.24,1); }
html:not(.splash) .sp, .sp.done { display:none; }
.sp.out { transform:translateY(-100%); }
.sp .lg { --sq:#fff; --ac:var(--brand); --logo-word:#fff; --ld:.15s; width:min(80vw,480px); height:auto; }
.sp .lg-shine { fill:rgba(41,90,255,.25); animation-delay:1.9s; }
.sp .lg-l { animation:none; }
.sp-tag { margin:30px 0 0; font-size:clamp(17px,2.8vw,23px); letter-spacing:-.01em; animation:fadeup .9s 1.6s var(--ease) both; }
.sp-tag .bang { color:#fff; animation:none; text-shadow:0 0 26px rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .sp { display:none !important; } }

/* =====================================================
   LARGER NAV
   ===================================================== */
html { scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px); }
.nav { height:68px; }
.progress { top:calc(env(safe-area-inset-top,0px) + 68px); }
.story-stick { padding-top:68px; }
html.splash #nav { --ld:2.6s; }
.nav-links { gap:28px; }
.nav-links a { font-size:16px; font-weight:500; }
.nav-cta { padding:9px 20px; font-size:15px; }
@media (max-width:1000px) {
  .nav-links { display:none; } .burger { display:block; } .nav-cta { display:none; }
}
@media (max-width:520px) { .nav-logo { width:144px; height:38px; } .nav-logo .lg-full .lg, .nav-logo .lg-mini .lg { height:38px; } .nav-logo .lg-mini .lg { width:38px; } }
.mmenu { padding-top:calc(env(safe-area-inset-top,0px) + 100px); }

/* delayed hero entrance while the splash is showing */
.hero .w, .phero .w { animation-delay:calc(.14s * var(--i) + .15s + var(--ld,0s)); }
.hero-sub, .hero-sub2 { animation-delay:calc(.75s + var(--ld,0s)); }
.hero .row-cta, .phero .row-cta { animation-delay:calc(.95s + var(--ld,0s)); }
.hero::before { animation-delay:calc(1.1s + var(--ld,0s)); }
.bang { animation-delay:calc(1s + var(--ld,0s)); }
.cta .bang { animation:none; }

/* =====================================================
   WEBSITE DEVELOPMENT
   ===================================================== */
.tabs { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { white-space:nowrap; }

/* browser mock */
.wstage .c1 { margin-left:-590px; top:110px; }
.wstage .c2 { margin-left:385px; top:220px; }
.wstage .c3 { margin-left:-560px; top:380px; }
@media (max-width:1300px) { .wstage .chip-f { display:none; } }
.browser { position:relative; width:min(720px,94vw); border-radius:22px 22px 0 0; background:var(--bg); border:1px solid var(--line); box-shadow:0 40px 100px rgba(41,90,255,.22), 0 20px 50px rgba(11,13,20,.14); overflow:hidden; text-align:left; color:#0b0d14; }
.bw-bar { height:46px; display:flex; align-items:center; gap:7px; padding:0 16px; background:#eef1f8; border-bottom:1px solid #e0e4ee; }
.bw-bar i { width:11px; height:11px; border-radius:50%; background:#c9cfdd; }
.bw-url { margin-left:14px; flex:1; max-width:340px; height:28px; border-radius:14px; background:#fff; display:flex; align-items:center; gap:7px; padding:0 12px; font-size:12.5px; color:#5b6172; }
.bw-url svg { width:13px; height:13px; color:#30a46c; }
.bw-view { position:relative; height:480px; overflow:hidden; background:#fff; }
.browser[data-s="0"] .bw-wire, .browser[data-s="1"] .bw-site { opacity:1; }
.browser[data-s="1"] .rise { animation:rise .9s var(--ease) var(--d,0s) backwards; }
.bw-wire { padding:18px 26px; display:flex; flex-direction:column; gap:18px; }
.bw-wire .row { display:flex; gap:14px; align-items:center; }
.sx-nav { display:flex; align-items:center; gap:22px; padding:16px 26px; font-size:13px; border-bottom:1px solid #eef0f6; }
.sx-nav b { font-family:var(--display); font-size:17px; letter-spacing:-.02em; margin-right:auto; display:flex; align-items:center; gap:8px; }
.sx-dot { width:18px; height:18px; border-radius:50%; background:var(--brand); display:block; }
.sx-cart { position:relative; font-style:normal; color:#0b0d14; } .sx-cart svg { width:20px; height:20px; display:block; }
.sx-cart u { position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; border-radius:8px; background:var(--brand); color:#fff; font-size:10px; font-weight:600; text-decoration:none; display:grid; place-items:center; animation:cartb 6s infinite; }
.sx-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:24px; padding:26px; align-items:center; }
.sx-hero h3 { margin:0 0 8px; font-family:var(--display); font-size:34px; line-height:1.05; letter-spacing:-.04em; font-weight:600; }
.sx-hero p { margin:0 0 16px; font-size:14px; color:#5b6172; }
.sx-btn { display:inline-block; padding:9px 18px; border-radius:980px; background:var(--brand); color:#fff; font-size:13px; font-weight:500; }
.sx-img { position:relative; height:170px; border-radius:22px; background:linear-gradient(135deg,#dbe6ff,#a9c1ff); overflow:hidden; }
.sx-img i { position:absolute; border-radius:50%; background:rgba(255,255,255,.55); } .sx-img i:nth-child(1) { width:110px; height:110px; right:-20px; top:-24px; } .sx-img i:nth-child(2) { width:70px; height:70px; left:24px; bottom:-20px; background:rgba(41,90,255,.25); } .sx-img i:nth-child(3) { width:34px; height:34px; left:44%; top:44%; background:#fff; }
.sx-h { padding:4px 26px 12px; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.025em; }
.sx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 26px 26px; }
.sx-card { position:relative; }
.sx-ph { height:96px; border-radius:16px; margin-bottom:9px; background:linear-gradient(135deg,var(--a,#e7eeff),var(--b,#c6d6ff)); position:relative; overflow:hidden; }
.sx-ph::after { content:""; position:absolute; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.6); left:50%; top:50%; margin:-23px 0 0 -23px; }
.sx-card:nth-child(2) .sx-ph { --a:#d6e2ff; --b:#8fb0ff; } .sx-card:nth-child(3) .sx-ph { --a:#eaf0ff; --b:#b5c8ff; }
.sx-card b { display:block; font-size:13.5px; line-height:1.2; } .sx-card small { font-size:12px; color:#5b6172; }
.sx-add { position:relative; display:block; margin-top:8px; height:28px; border-radius:14px; border:1.5px solid var(--brand); color:var(--brand); font-size:12px; font-weight:600; overflow:hidden; }
.sx-add span { position:absolute; inset:0; display:grid; place-items:center; }
.sx-add span + span { opacity:0; }
.sx-card:nth-child(2) .sx-add { animation:addbg 6s infinite; }
.sx-card:nth-child(2) .sx-add span:first-child { animation:addA 6s infinite; } .sx-card:nth-child(2) .sx-add span + span { animation:addB 6s infinite; }
@keyframes addbg { 0%, 55% { background:transparent; } 60%, 92% { background:var(--brand); } 100% { background:transparent; } }
@keyframes addA { 0%, 55% { opacity:1; } 60%, 92% { opacity:0; } 100% { opacity:1; } }
@keyframes addB { 0%, 55% { opacity:0; color:#fff; } 60%, 92% { opacity:1; color:#fff; } 100% { opacity:0; } }

/* wide brand-blue tile */
.tile.full { grid-column:1 / -1; min-height:600px; }
.tile.blue { --ink:#fff; --muted:rgba(255,255,255,.85); --link:#fff; background:linear-gradient(140deg,#3d6bff 0%,#295aff 45%,#1a3fd0 100%); color:#fff; }
.tile.blue .more { color:#fff; }
.tile.blue .tp { max-width:560px; }
.tile.blue h3 { max-width:640px; }
.tile.blue::after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-140px; top:-200px; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events:none; }
.tile.blue .pills { justify-content:center; margin-top:22px; max-width:560px; }
.tile.blue .pills span { background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); }
.browser.sm { position:absolute; left:50%; bottom:-46px; width:660px; transform:translateX(-50%); }
.browser.sm .bw-view { height:290px; }
@media (max-width:720px) { .browser.sm { transform:translateX(-50%) scale(.72); transform-origin:bottom center; } .tile.full { min-height:620px; } }

/* care / health card */
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:8px; text-align:left; }
.split p.lead { margin:16px 0 24px; color:var(--muted); font-size:20px; line-height:1.4; }
.health { background:#0b0d14; border:1px solid var(--line); border-radius:32px; padding:10px 28px 12px; }
.hh { display:flex; align-items:center; justify-content:space-between; padding:20px 0 16px; border-bottom:1px solid var(--line); }
.hh b { font-family:var(--display); font-size:19px; letter-spacing:-.02em; }
.hh em { font-style:normal; font-size:13px; color:var(--brand-soft); display:flex; align-items:center; gap:7px; }
.hh em::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand-soft); animation:pulse 2s infinite; }
.hrow { display:flex; align-items:center; gap:16px; padding:16px 0; }
.hrow + .hrow { border-top:1px solid var(--line); }
.hi { width:34px; height:34px; border-radius:50%; background:var(--brand-tint); color:var(--brand-soft); display:grid; place-items:center; flex:none; animation:hchk 10s infinite; animation-delay:calc(var(--k) * .9s); }
.hi svg { width:17px; height:17px; }
@keyframes hchk { 0%, 3% { transform:scale(.5); opacity:.25; background:var(--brand-tint); } 8% { transform:scale(1.18); opacity:1; background:var(--brand); color:#fff; } 12%, 88% { transform:scale(1); opacity:1; background:var(--brand); color:#fff; } 100% { transform:scale(.5); opacity:.25; background:var(--brand-tint); color:var(--brand-soft); } }
.hrow b { display:block; font-size:16px; font-weight:600; line-height:1.2; } .hrow small { color:var(--muted); font-size:14px; }
.hs { margin-left:auto; font-style:normal; font-size:13px; color:var(--muted); }
@media (max-width:860px) { .split { grid-template-columns:1fr; gap:36px; } }

/* package cards */
.cap.pk { display:flex; flex-direction:column; min-height:0; }
.cap.pk.hot { border:2px solid var(--brand); background:var(--tile); box-shadow:0 20px 60px rgba(41,90,255,.18); }
.cap.pk p { margin-bottom:20px; }
.cap.pk .tick { margin-bottom:26px; flex:1; }
.cap.pk .more { font-size:17px; }
.s-light .cap.pk.hot { background:var(--bg); }

/* helper on paper */


/* carousel / project illustrations for websites and stores */
.msite { width:212px; border-radius:16px; background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; animation:tiltc 6s ease-in-out infinite; }
.msite .mb { height:24px; background:var(--paper); display:flex; gap:5px; align-items:center; padding:0 10px; }
.msite .mb i { width:6px; height:6px; border-radius:50%; background:var(--line); }
.msite .mh { height:64px; margin:10px; border-radius:10px; background:linear-gradient(135deg,#4a75ff,#1a3fd0); position:relative; overflow:hidden; }
.msite .mh::after { content:""; position:absolute; top:0; bottom:0; width:40px; left:-60px; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); animation:shine 3.2s infinite; }
.msite .ml { height:8px; margin:0 10px 8px; border-radius:4px; background:var(--line); }
.mshop { display:flex; gap:10px; }
.mshop i { display:block; width:64px; height:88px; border-radius:16px; background:var(--line); position:relative; animation:pick 3.6s infinite; }
.mshop i::after { content:""; position:absolute; left:10px; right:10px; bottom:10px; height:8px; border-radius:4px; background:rgba(255,255,255,.55); }
.mshop i:nth-child(2) { animation-delay:1.2s; } .mshop i:nth-child(3) { animation-delay:2.4s; }
.pv .cart { right:calc(50% - 118px); }

/* make sure the vector logo keeps its proportions and is never shrunk by flex layouts */
.lg { aspect-ratio:514 / 136; }
.lg.lg-only { aspect-ratio:1; }
.nav-logo { flex:none; }

.s-paper .fq.open .pm { background:var(--brand); }

@media (max-width:560px) { .browser.sm { transform:translateX(-50%) scale(.5); transform-origin:bottom center; bottom:-30px; } .tile.full { min-height:560px; } }

/* =====================================================
   ACTION LINKS: real chevron with breathing room
   ===================================================== */
.more { display:inline-flex; align-items:center; gap:.6em; }
.more::after { content:""; display:block; width:.5em; height:.5em; margin:0 0 0 .1em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .35s var(--ease); flex:none; }
.more:hover::after { transform:translateX(5px) rotate(45deg); }
.more:hover { text-decoration:none; }
.fart .more { display:inline-flex; }
.result a { display:inline-flex; align-items:center; gap:.6em; }
.result a::after { content:""; display:block; width:.5em; height:.5em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }

/* =====================================================
   NAV: Services trigger + MEGA MENU
   ===================================================== */
.caret { display:inline-block; width:7px; height:7px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-3px); margin-left:9px; transition:transform .35s var(--ease); opacity:.7; }
.has-mega.open .caret { transform:rotate(225deg) translateY(-1px); }
.has-mega.open > a { opacity:1; }
.mega-back { position:fixed; inset:0; z-index:57; background:rgba(5,7,12,.36); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .35s; }
.mega-back.open { opacity:1; pointer-events:auto; }
.mega { position:fixed; top:calc(env(safe-area-inset-top,0px) + 68px); left:0; right:0; z-index:58; display:flex; justify-content:center; padding:10px 16px 0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px) scale(.985); transform-origin:top center; transition:opacity .3s, transform .5s var(--ease), visibility 0s .5s; }
.mega.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .3s, transform .5s var(--ease); }
.mega-card { width:min(1080px,100%); background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:32px; box-shadow:0 40px 120px rgba(5,7,12,.4); overflow:hidden; }
.mega-in { display:grid; grid-template-columns:1.12fr 1fr; }
.mega-list { padding:24px 16px 18px 20px; display:grid; gap:2px; align-content:start; }
.mega-list h6 { margin:0 0 8px 14px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.mi { display:flex; align-items:center; gap:16px; padding:13px 16px; border-radius:22px; transition:background .25s; }
.mega.open .mi { animation:miIn .55s var(--ease) both; animation-delay:calc(var(--i) * .05s + .05s); }
@keyframes miIn { from { opacity:0; transform:translateY(12px); } }
.mi .ico-b { margin:0; width:50px; height:50px; border-radius:16px; }
.mi b { display:block; font-family:var(--display); font-size:18px; letter-spacing:-.02em; font-weight:600; line-height:1.2; }
.mi small { display:block; color:var(--muted); font-size:14px; line-height:1.35; margin-top:3px; }
.mi::after { content:""; margin-left:auto; flex:none; width:8px; height:8px; border-top:2px solid var(--brand); border-right:2px solid var(--brand); transform:rotate(45deg) translateX(-8px); opacity:0; transition:transform .35s var(--ease), opacity .3s; }
.mi:hover, .mi.cur { background:var(--paper); }
.mi:hover .ico-b, .mi.cur .ico-b { background:var(--brand); color:#fff; transform:rotate(-6deg); }
.mi:hover::after, .mi.cur::after { opacity:1; transform:rotate(45deg) translateX(0); }
.mega-prev { position:relative; margin:16px 16px 16px 4px; border-radius:26px; padding:34px 34px 30px; color:#fff; background:linear-gradient(150deg,#3d6bff 0%,#295aff 48%,#1a3fd0 100%); overflow:hidden; display:flex; flex-direction:column; height:380px; }
.mega-prev::before { content:""; position:absolute; width:380px; height:380px; border-radius:50%; right:-120px; top:-140px; background:radial-gradient(circle,rgba(255,255,255,.3),transparent 65%); pointer-events:none; }
.mp-ghost { position:absolute; right:-18px; bottom:-26px; width:200px; height:200px; color:rgba(255,255,255,.12); pointer-events:none; }
.mp-ghost svg { width:100%; height:100%; stroke-width:1.2; }
.mp-body { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; animation:tabin .4s var(--ease); }
.mp-kick { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.8; flex:none; }
.mp-body h4 { margin:10px 0 10px; font-family:var(--display); font-size:32px; line-height:1.12; letter-spacing:-.04em; font-weight:600; max-width:360px; height:2.24em; overflow:hidden; flex:none; }
.mp-body p { margin:0 0 20px; font-size:16px; line-height:1.4; opacity:.92; max-width:380px; height:2.8em; overflow:hidden; flex:none; }
.mp-body .pills { margin-bottom:auto; height:38px; overflow:hidden; align-content:flex-start; }
.mp-body .pills span { background:rgba(255,255,255,.18); color:#fff; }
.mp-cta { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.mp-cta .more { color:#fff; font-size:17px; }
.mega-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 28px; border-top:1px solid var(--line); background:var(--paper); font-size:15px; }
.mega-foot span { color:var(--muted); }
.mega-foot .more { font-size:15px; color:var(--link); }
.mega-foot .btn { padding:9px 20px; font-size:15px; }
@media (max-width:1000px) { .mega, .mega-back { display:none; } }

/* mobile menu: nested services */
.mmenu a.sub { font-size:22px; font-weight:500; padding:4px 0 4px 18px; color:var(--muted); letter-spacing:-.02em; }
.mmenu a.sub[aria-current="page"] { color:var(--brand); }

/* =====================================================
   SERVICE TILES (heading, copy, key topics, actions, visual)
   ===================================================== */
.tile { min-height:0; padding:60px 32px 0; }
.tile .h-l { max-width:520px; }
.tile p.tpara { display:block; margin:14px 0 0; font-size:19px; line-height:1.34; letter-spacing:-.02em; color:var(--muted); max-width:470px; }
.tile .pills { justify-content:center; margin-top:22px; max-width:540px; }
.tile .pills span { font-size:14px; padding:8px 16px; }
.tile-cta { margin-top:28px; margin-bottom:36px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; align-items:center; }
.tile-cta .btn { padding:12px 26px; font-size:16px; }
.tile-cta .more { font-size:17px; }
.tile > .tile-vis { position:relative; left:auto; right:auto; bottom:auto; width:100%; height:300px; margin-top:auto; flex:none; }
.tile.dark .pills span, .tile.navy .pills span, .tile.blue .pills span { background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); }
.tile.navy { --ink:#f4f6fb; --muted:#b3bdd9; --link:#8fb0ff; background:linear-gradient(165deg,#15296b 0%,#0b163f 55%,#070d26 100%); color:#fff; }
.tile.navy::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 65%); mask-image:linear-gradient(180deg,#000,transparent 65%); pointer-events:none; }
.tile.navy > *, .tile.blue > * { position:relative; z-index:1; }
.tile.blue .btn-w:hover { transform:scale(1.03); }
.tile.full > .tile-vis { height:320px; }
@media (max-width:860px) { .tile { padding:48px 22px 0; } .tile > .tile-vis { height:280px; } }

/* chat inside the AI tile */
.tile .chatbox { bottom:26px; min-height:220px; }

/* website / dashboard browser inside tiles */
.browser.sm { width:min(580px,92%); bottom:-52px; }
.browser.sm .bw-view { height:290px; }
@media (max-width:560px) { .browser.sm { width:640px; transform:translateX(-50%) scale(.52); transform-origin:bottom center; bottom:-34px; } }

/* mobile app fan */
.pfan { position:absolute; left:50%; bottom:0; width:0; height:0; }
.pf { position:absolute; bottom:-118px; left:-118px; width:236px; height:490px; border-radius:44px; background:#0b0c11; padding:9px; box-shadow:0 0 0 1px #2c303c inset, 0 30px 60px rgba(11,13,20,.28); transform-origin:50% 100%; transition:transform 1.1s var(--ease); }
.pf.l { transform:translateX(-178px) rotate(-9deg) scale(.6); }
.pf.r { transform:translateX(178px) rotate(9deg) scale(.6); }
.pf.c { transform:scale(.74); z-index:2; bottom:-126px; }
.tile:hover .pf.l { transform:translateX(-196px) rotate(-12deg) scale(.6); }
.tile:hover .pf.r { transform:translateX(196px) rotate(12deg) scale(.6); }
.tile:hover .pf.c { transform:translateY(-8px) scale(.74); }
@media (max-width:560px) { .pf.l { transform:translateX(-140px) rotate(-9deg) scale(.52); } .pf.r { transform:translateX(140px) rotate(9deg) scale(.52); } .tile:hover .pf.l, .tile:hover .pf.r { transform:none; } }
.mcard { margin-top:14px; border-radius:20px; padding:14px; color:#fff; background:linear-gradient(150deg,#4a75ff,#1a3fd0); }
.mcard small { font-size:10px; opacity:.8; } .mcard b { display:block; font-family:var(--display); font-size:28px; letter-spacing:-.04em; line-height:1.1; }
.mcard svg { width:100%; height:34px; display:block; margin-top:4px; } .mcard svg path { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.macts { display:flex; justify-content:space-between; margin:14px 6px 0; }
.macts i { width:42px; height:42px; border-radius:14px; background:#fff; box-shadow:0 1px 3px rgba(11,13,20,.1); display:block; }
.mrow { display:flex; align-items:center; gap:10px; background:#fff; border-radius:16px; padding:11px 12px; margin-top:12px; box-shadow:0 1px 3px rgba(11,13,20,.06); }
.mrow i { width:28px; height:28px; border-radius:9px; background:var(--brand-tint); flex:none; }
.mrow span { height:8px; border-radius:4px; background:#e6e9f1; flex:1; }

/* web application dashboard */
.dx { display:grid; grid-template-columns:130px 1fr; height:100%; font-size:12px; color:#0b0d14; text-align:left; }
.dx-side { background:#f4f6fb; padding:16px 12px; display:grid; gap:6px; align-content:start; border-right:1px solid #e6e9f1; }
.dx-side b { font-family:var(--display); font-size:15px; display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.dx-side span { padding:8px 10px; border-radius:9px; color:#5b6172; font-weight:500; }
.dx-side span.on { background:#fff; color:var(--brand); box-shadow:0 1px 3px rgba(11,13,20,.08); }
.dx-main { padding:16px 18px; display:grid; gap:12px; align-content:start; }
.dx-top { display:flex; justify-content:space-between; align-items:center; }
.dx-top h4 { margin:0; font-family:var(--display); font-size:19px; letter-spacing:-.02em; }
.dx-top em { font-style:normal; color:#5b6172; background:#f4f6fb; padding:4px 10px; border-radius:12px; }
.dx-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dx-kpis > div { background:#f4f6fb; border-radius:12px; padding:10px 12px; }
.dx-kpis small { color:#5b6172; display:block; } .dx-kpis b { font-family:var(--display); font-size:20px; letter-spacing:-.03em; } .dx-kpis u { text-decoration:none; color:var(--brand); font-weight:600; margin-left:6px; font-size:11px; }
.dx-chart { width:100%; height:92px; display:block; }
.browser:not(.sm) .dx-chart { height:150px; }
.dx-line { fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; animation:dxline 6s ease-in-out infinite; }
.dx-area { fill:rgba(41,90,255,.09); stroke:none; }
@keyframes dxline { 0% { stroke-dashoffset:1; } 35%, 88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:1; } }
.dx-rows { display:grid; gap:9px; }
.dx-rows div { display:flex; align-items:center; gap:10px; }
.dx-rows i { width:22px; height:22px; border-radius:50%; background:#dbe6ff; flex:none; }
.dx-rows span { flex:1; height:8px; border-radius:4px; background:#e6e9f1; }
.dx-rows em { font-style:normal; font-size:11px; color:var(--brand); font-weight:600; }
.browser.sm .dx-rows div:nth-child(n+3) { display:none; }

/* marketing dashboard card */
.mkc { position:relative; background:var(--bg); border:1px solid var(--line); border-radius:26px 26px 0 0; box-shadow:0 30px 80px rgba(41,90,255,.2), 0 16px 40px rgba(11,13,20,.12); padding:22px 26px; text-align:left; color:var(--ink); width:min(680px,92%); }
.mkc-h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.mkc-h b { font-family:var(--display); font-size:18px; letter-spacing:-.02em; }
.seg { display:flex; gap:3px; padding:3px; border-radius:980px; background:var(--paper); }
.seg i { font-style:normal; font-size:12px; padding:5px 12px; border-radius:980px; color:var(--muted); }
.seg i.on { background:var(--brand); color:#fff; }
.mkc-chart { width:100%; height:auto; display:block; }
.mkc-chart .g { stroke:var(--line); stroke-width:1; }
.ml-a, .ml-b { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; animation:mline 6s ease-in-out infinite; }
.ml-a { stroke:var(--brand); stroke-width:4; } .ml-b { stroke:var(--brand-soft); stroke-width:3; opacity:.7; animation-delay:.25s; }
@keyframes mline { 0% { stroke-dashoffset:1; } 32%, 90% { stroke-dashoffset:0; } 100% { stroke-dashoffset:1; } }
.mkc-m { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; }
.mkc.big .mkc-m { grid-template-columns:repeat(4,1fr); }
.mkc-m > div { background:var(--paper); border-radius:16px; padding:12px 14px; }
.mkc-m small { display:block; color:var(--muted); font-size:12px; } .mkc-m b { font-family:var(--display); font-size:22px; letter-spacing:-.03em; } .mkc-m u { text-decoration:none; color:var(--brand); font-weight:600; font-size:12px; margin-left:6px; }
.mkc-ch { display:grid; gap:12px; margin-top:16px; }
.mkc-ch div { display:flex; align-items:center; gap:14px; font-size:13px; font-weight:500; }
.mkc-ch span { width:96px; flex:none; }
.mkc-ch i { flex:1; height:10px; border-radius:5px; background:var(--paper); position:relative; overflow:hidden; }
.mkc-ch i::after { content:""; position:absolute; inset:0; width:var(--w); background:linear-gradient(90deg,var(--brand),var(--brand-soft)); border-radius:5px; transform-origin:left; animation:fillb 6s var(--ease) infinite; }
.mktile .mkc { position:absolute; left:50%; bottom:-20px; transform:translateX(-50%); width:min(640px,90%); }
.mk-chip { position:absolute; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:18px; background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow); font-size:14px; animation:bob 6s ease-in-out infinite; }
.mk-chip .ci { width:34px; height:34px; border-radius:11px; background:var(--brand); color:#fff; display:grid; place-items:center; } .mk-chip .ci svg { width:18px; height:18px; }
.mk-chip b { display:block; font-weight:600; line-height:1.15; } .mk-chip small { color:var(--muted); font-size:12.5px; }
.mk-chip.l { left:calc(50% - 500px); bottom:170px; } .mk-chip.r { left:calc(50% + 260px); bottom:90px; animation-delay:-3s; }
@media (max-width:1180px) { .mk-chip { display:none; } }
.mstage .c1 { margin-left:-560px; top:120px; } .mstage .c2 { margin-left:360px; top:230px; } .mstage .c3 { margin-left:-520px; top:390px; }
.mstage .mkc.big { padding:26px 30px; width:min(760px,94vw); min-height:520px; }
@media (max-width:1300px) { .mstage .chip-f { display:none; } }

/* carousel / project illustration: marketing chart */
.mchart { width:230px; height:130px; }
.mchart path { fill:none; stroke-linecap:round; stroke-dasharray:1; animation:mline 5s ease-in-out infinite; }
.mchart .b { stroke:var(--line); animation-delay:.3s; }

@media (max-width:560px) {
  .mkc { padding:18px 16px; }
  .mkc-h b { font-size:16px; }
  .mkc-m { gap:8px; } .mkc-m > div { padding:10px; min-width:0; } .mkc-m b { font-size:17px; } .mkc-m u { display:none; }
  .mktile .mkc { width:92%; }
}

/* =====================================================
   CRISPER RENDERING: keep scaled mockups and icons sharp
   at fractional zoom / device-pixel ratios by giving them
   their own compositing layer instead of blurring in place.
   ===================================================== */
svg { shape-rendering:geometricPrecision; }
.phone, .mini, .pf, .browser, .mkc, .tilt, .dev-b, .dev-p, .sp .lg {
  backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform;
}

/* =====================================================
   LIQUID GLASS sticky header
   ===================================================== */
.nav {
  backdrop-filter:saturate(220%) blur(28px);
  -webkit-backdrop-filter:saturate(220%) blur(28px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.18);
  transition:box-shadow .5s var(--ease), background .4s, border-color .3s;
}
.nav::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 65%);
}
.nav-in { position:relative; z-index:1; }
.nav.scrolled {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.22),
             0 20px 40px -16px rgba(15,23,42,.22), 0 2px 12px rgba(15,23,42,.06);
}
html[data-theme="dark"] .nav, .nav.on-dark {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .nav::before, .nav.on-dark::before {
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 65%);
}
html[data-theme="dark"] .nav.scrolled, .nav.on-dark.scrolled {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.4),
             0 22px 55px -14px rgba(0,0,0,.65), 0 2px 16px rgba(0,0,0,.4);
}

/* =====================================================
   INDUSTRIES: scroll-driven showcase
   ===================================================== */
.ind-track { position:relative; height:calc(var(--n, 9) * 78vh); }
.ind-track .story-stick { padding-top:84px; padding-bottom:24px; transition:background 1s ease; }
.ind2-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:56px; align-items:center; width:100%; }

.ind2-list { display:grid; gap:5px; align-content:center; max-height:calc(100vh - 160px); overflow:hidden; }
.ind2-list button { display:flex; align-items:center; gap:14px; background:none; border:0; text-align:left; padding:11px 16px; border-radius:16px; font-family:var(--display); font-size:16px; font-weight:500; color:#8a90a3; opacity:.65; transition:background .4s var(--ease), color .4s, opacity .4s; }
.ind2-list button .dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; flex:none; transition:all .4s var(--ease); }
.ind2-list button:hover { opacity:.9; }
.ind2-list button[aria-current="true"] { color:#f4f6fb; opacity:1; background:rgba(255,255,255,.06); }
.ind2-list button[aria-current="true"] .dot { background:var(--acc, var(--brand)); opacity:1; width:9px; height:9px; box-shadow:0 0 0 5px rgba(var(--acc-rgb, 41,90,255),.28), 0 0 16px rgba(var(--acc-rgb, 41,90,255),.7); }

.ind2-panelwrap { position:relative; }
.ind2-orb { position:absolute; top:-90px; right:-70px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(var(--acc-rgb, 41,90,255),.55) 0%, rgba(var(--acc-rgb, 41,90,255),0) 70%); filter:blur(6px); pointer-events:none; transition:background 1s ease; animation:float 9s ease-in-out infinite; }
.ind2-panel { position:relative; background:#0b0d14; border:1px solid #1e2230; border-radius:32px; padding:44px 48px; overflow:hidden; min-height:0; }
.ind2-num { font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--acc, var(--brand)); transition:color .8s ease; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.ind2-icon { width:60px; height:60px; border-radius:19px; background:var(--acc, var(--brand)); color:#fff; display:grid; place-items:center; margin-bottom:22px; box-shadow:0 14px 34px rgba(var(--acc-rgb, 41,90,255),.4); transition:background .8s ease, box-shadow .8s ease; }
.ind2-icon svg { width:29px; height:29px; }
.ind2-panel h3 { margin:0; font-family:var(--display); font-size:clamp(26px,3vw,36px); letter-spacing:-.035em; line-height:1.1; font-weight:600; color:#f4f6fb; }
.ind2-panel > p { margin:12px 0 26px; color:#a4abbd; font-size:18px; line-height:1.42; max-width:520px; }
.ind2-panel .ul { display:grid; gap:16px; margin-bottom:26px; }
.ind2-panel .u { display:flex; gap:15px; align-items:flex-start; }
.ind2-panel .u .ico-b { margin:0; width:40px; height:40px; border-radius:13px; background:rgba(var(--acc-rgb, 41,90,255),.16); color:var(--acc, var(--brand)); transition:background .8s, color .8s; } .ind2-panel .u .ico-b svg { width:19px; height:19px; }
.ind2-panel .u b { display:block; font-family:var(--display); font-size:17px; letter-spacing:-.02em; font-weight:600; color:#f4f6fb; }
.ind2-panel .u small { color:#8a90a3; font-size:14px; line-height:1.4; }
.ind2-panel .fw { color:#8a90a3; font-size:13px; margin:0 0 10px; }
.ind2-panel .pills span { background:rgba(255,255,255,.07); color:#c3c8d6; }

@media (max-width:900px) {
  .ind-track { height:calc(var(--n, 9) * 88vh); }
  .ind-track .story-stick { padding-top:80px; align-items:flex-start; }
  .ind2-grid { grid-template-columns:1fr; gap:20px; }
  .ind2-list { display:flex; flex-wrap:wrap; gap:6px; max-height:none; }
  .ind2-list button { padding:7px 13px; font-size:14px; }
  .ind2-panel { padding:30px 26px; }
  .ind2-orb { width:220px; height:220px; top:-60px; right:-60px; }
}

/* =====================================================
   TECH LOGO GRID: big icon, small name (replaces plain text marquee)
   ===================================================== */
.marq { padding:4px 0; }
.marq-track.marq-track .tch span { font-size:13px; font-weight:500; letter-spacing:-.01em; opacity:1; white-space:nowrap; }
.tch { display:inline-flex; flex-direction:column; align-items:center; gap:10px; width:104px; flex:none; }
.tch-ic { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:#fff; box-shadow:0 4px 14px rgba(11,13,20,.14); overflow:hidden; }
.tch-ic svg { width:62%; height:62%; display:block; }
.tch-ic.self svg { width:100%; height:100%; }
.tch span { font-size:13px; color:var(--muted); font-weight:500; text-align:center; letter-spacing:-.01em; white-space:nowrap; }
@media (max-width:560px) { .tch { width:88px; } .tch-ic { width:54px; height:54px; border-radius:16px; } }

/* =====================================================
   ABOUT: extra sections
   ===================================================== */
.journey { margin-top:8px; }
.diff-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.diff { background:var(--paper); border-radius:26px; padding:30px 26px; text-align:left; transition:transform .5s var(--ease); }
.diff:hover { transform:translateY(-5px); }
.diff b { display:block; font-family:var(--display); font-size:19px; letter-spacing:-.02em; margin-bottom:8px; }
.diff p { margin:0; color:var(--muted); font-size:15px; line-height:1.42; }
@media (max-width:860px) { .diff-cards { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .diff-cards { grid-template-columns:1fr; } }

.remote-wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; text-align:left; }
.remote-wrap .pills { justify-content:flex-start; margin-top:22px; }
.orbit-vis { position:relative; height:280px; display:flex; align-items:center; justify-content:center; }
.orbit-vis .core { width:64px; height:64px; border-radius:50%; background:var(--brand); box-shadow:0 0 60px rgba(41,90,255,.55); display:grid; place-items:center; color:#fff; z-index:1; }
.orbit-vis .core svg { width:30px; height:30px; }
.orbit-ring { position:absolute; border-radius:50%; border:1px solid var(--line); }
.orbit-ring.r1 { width:150px; height:150px; animation:spin 18s linear infinite; }
.orbit-ring.r2 { width:220px; height:220px; animation:spin 28s linear infinite reverse; }
.orbit-ring.r3 { width:280px; height:280px; animation:spin 40s linear infinite; }
.orbit-dot { position:absolute; top:-6px; left:50%; margin-left:-6px; width:12px; height:12px; border-radius:50%; background:var(--brand-soft); box-shadow:0 0 12px var(--brand-soft); }
@keyframes spin { to { transform:rotate(360deg); } }
.mission-q { margin:28px 0 0; font-family:var(--display); font-size:20px; line-height:1.4; letter-spacing:-.02em; font-weight:500; border-left:3px solid var(--brand); padding-left:20px; color:var(--ink); }
.mission-q cite { display:block; margin-top:10px; font-style:normal; font-size:14px; color:var(--muted); font-weight:400; }
@media (max-width:860px) { .remote-wrap { grid-template-columns:1fr; gap:32px; } .orbit-vis { order:-1; height:220px; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .ind2-orb { animation:none; } }

/* =====================================================
   ROUND 5: hero showcase, testimonials, footer, mobile process, a11y
   ===================================================== */
.skip-link { position:absolute; left:12px; top:-60px; z-index:400; background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; transition:top .2s; }
.skip-link:focus { top:12px; }

/* ---- Hero service showcase ---- */
.hs { margin-top:48px; }
.hs-tabs { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:0 16px; animation:fadeup 1s calc(1.1s + var(--ld,0s)) var(--ease) both; }
.hs-tabs button { position:relative; display:inline-flex; align-items:center; gap:9px; padding:10px 18px 12px; border-radius:980px; border:1px solid var(--line); background:var(--bg); color:var(--muted); font-size:15px; font-weight:500; overflow:hidden; transition:color .3s, border-color .3s, background .3s; }
.hs-tabs button:hover { color:var(--ink); }
.hs-tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--brand); background:var(--brand-tint); }
.hs-ic { display:grid; place-items:center; } .hs-ic svg { width:18px; height:18px; }
.hs-tabs button[aria-selected="true"] .hs-ic { color:var(--brand); }
.hs-bar { position:absolute; left:18px; right:18px; bottom:5px; height:2px; border-radius:2px; overflow:hidden; }
.hs-bar::after { content:""; position:absolute; inset:0; background:var(--brand); transform:scaleX(0); transform-origin:left; }
.hs-tabs button.run .hs-bar::after { animation:hsbar 5.2s linear forwards; }
@keyframes hsbar { to { transform:scaleX(1); } }
.hs-stage { position:relative; height:560px; margin-top:40px; overflow:hidden; }
.hs-slide { position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start; opacity:0; transform:translateY(46px) scale(.97); transition:opacity .7s var(--ease), transform 1s var(--ease); pointer-events:none; }
.hs-slide.on { opacity:1; transform:none; pointer-events:auto; }
.hs-br, .hs-mk { transform:scale(var(--bs,1)); transform-origin:top center; }
.hs-br .browser { width:860px; } .hs-br .browser .bw-view { height:520px; }
.hs-mk .mkc.big { width:820px; min-height:520px; }
.hs-ai { width:min(600px,92vw); margin-top:28px; }
.hs-ai .aicard { box-shadow:0 40px 100px rgba(41,90,255,.25); }
.hs-chat { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.mbx { max-width:82%; padding:11px 16px; border-radius:20px; font-size:15px; line-height:1.4; text-align:left; }
.mbx.me { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:6px; }
.mbx.ai { align-self:flex-start; background:#171a24; color:#eef1f8; border-bottom-left-radius:6px; }
.mbx.mbx-act { align-self:flex-start; border:1px solid var(--brand-soft); color:var(--brand-soft); border-radius:980px; font-size:14px; padding:8px 16px; }
.mbx.dots { display:flex; gap:5px; padding:15px 18px; } .mbx.dots i { width:7px; height:7px; border-radius:50%; background:#8d95ab; animation:dot 1.1s infinite; }
.mbx.dots i:nth-child(2) { animation-delay:.15s; } .mbx.dots i:nth-child(3) { animation-delay:.3s; }
.hs-slide.on .mbx { animation:rise .6s var(--ease) backwards; animation-delay:calc(var(--k) * .55s + .2s); }
.hs-slide.on .mbx.dots { animation:rise .6s var(--ease) backwards, none; animation-delay:calc(var(--k) * .55s + .2s); }
@media (max-width:900px) { .hs-br, .hs-mk { --bs:.78; } .hs-stage { height:500px; } }
@media (max-width:640px) {
  .hs { margin-top:36px; }
  .hs-tabs { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:2px 16px 6px; }
  .hs-tabs::-webkit-scrollbar { display:none; }
  .hs-tabs button { flex:none; font-size:14px; padding:9px 14px 11px; }
  .hs-stage { height:430px; margin-top:26px; }
  .hs-br, .hs-mk { --bs:.44; }
  .hs-phone { transform:scale(.72); transform-origin:top center; }
  .mbx { font-size:14px; }
}

/* ---- Eyebrow label ---- */
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin:0 0 16px; color:var(--brand); font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.eyebrow svg { width:74px; height:12px; fill:currentColor; flex:none; }
.s-dark .eyebrow, [data-theme="dark"] .eyebrow { color:var(--brand-soft); }

/* ---- Testimonials ---- */
:root { --tst-bg:#eef1fd; }
[data-theme="dark"] { --tst-bg:#131a30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tst-bg:#131a30; } }
.tst { max-width:1180px; margin:56px auto 0; }
.tst-card { position:relative; background:var(--tst-bg); border-radius:40px; padding:72px clamp(24px,11vw,150px) 64px; text-align:center; }
.tst-q { position:absolute; width:50px; color:var(--brand-soft); opacity:.85; }
.tst-q svg { width:100%; height:auto; display:block; fill:currentColor; }
.tst-q.l { left:clamp(18px,5vw,72px); top:42%; }
.tst-q.r { right:clamp(18px,5vw,72px); bottom:28%; }
.tst-track { display:grid; }
.tst-slide { grid-area:1/1; margin:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .7s var(--ease); pointer-events:none; }
.tst-slide.on { opacity:1; transform:none; pointer-events:auto; }
.tst-av { width:96px; height:96px; border-radius:50%; margin:0 auto 28px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#4a75ff,#1a3fd0); color:#fff; font-family:var(--display); font-weight:600; font-size:30px; box-shadow:0 12px 30px rgba(41,90,255,.25); }
.tst-av img { width:100%; height:100%; object-fit:cover; }
.tst-slide blockquote { margin:0 auto; max-width:880px; font-size:clamp(18px,1.9vw,22px); line-height:1.7; color:var(--ink); }
.tst-slide figcaption { margin-top:30px; }
.tst-slide figcaption b { display:block; font-family:var(--display); font-size:clamp(22px,2.4vw,28px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.tst-slide figcaption span { display:block; margin-top:4px; color:var(--muted); font-size:15px; font-weight:500; }
.tst-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px; }
.tst-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bg); display:grid; place-items:center; transition:background .25s, color .25s, border-color .25s; }
.tst-btn svg { width:16px; height:16px; } .tst-btn:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
.tst-dots { display:flex; gap:8px; } .tst-dots button { width:9px; height:9px; border-radius:5px; border:0; padding:0; background:var(--line); transition:width .35s var(--ease), background .3s; }
.tst-dots button.on { width:28px; background:var(--brand); }
@media (max-width:640px) { .tst-card { padding:56px 22px 46px; border-radius:30px; } .tst-q { width:32px; } .tst-q.l { top:22px; left:20px; } .tst-q.r { bottom:20px; right:20px; } .tst-av { width:80px; height:80px; font-size:26px; } }

/* ---- Footer ---- */
.foot { font-size:15px; line-height:1.55; padding:84px 0 calc(32px + env(safe-area-inset-bottom,0px)); }
.foot-top { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:48px 40px; padding-bottom:48px; border-bottom:1px solid var(--line); }
.foot-name { margin:0; font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:-.035em; color:var(--ink); }
.foot-tag { margin:6px 0 0; font-size:17px; }
.foot-desc { margin:18px 0 0; max-width:360px; color:var(--muted); font-size:16px; }
.foot-mail { display:inline-block; margin-top:20px; font-family:var(--display); font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.02em; border-bottom:2px solid var(--brand); padding-bottom:2px; }
.foot-mail:hover { color:var(--brand); }
.foot-social { display:flex; gap:10px; margin-top:24px; }
.foot-social a { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line); color:var(--ink); transition:background .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.foot-social a:hover { background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-3px); }
.foot-social svg { width:19px; height:19px; }
.fcol h5 { margin:6px 0 16px; font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.fcol ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fcol a, .foot .fcol a { display:inline; padding:0; color:var(--muted); font-size:15px; }
.fcol a:hover { color:var(--brand); }
.foot-bot { display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; padding-top:24px; font-size:14px; color:var(--muted); }
.foot-legal { display:flex; gap:22px; } .foot-legal a, .foot .foot-legal a { display:inline; margin:0; color:var(--muted); }
.foot-legal a:hover { color:var(--brand); }
@media (max-width:980px) { .foot-top { grid-template-columns:repeat(3,1fr); } .foot-brand { grid-column:1 / -1; } }
@media (max-width:620px) {
  .foot { padding-top:60px; }
  .foot-top { grid-template-columns:1fr 1fr; gap:36px 22px; }
  .foot-name { font-size:30px; }
  .fcol a, .foot .fcol a { font-size:16px; line-height:1.4; }
  .fcol ul { gap:12px; }
  .foot-bot { flex-direction:column; align-items:flex-start; }
}

/* ---- Process on phones: clear space between the phone and the copy ---- */
@media (max-width:860px) {
  .story-stick { padding-top:80px; align-items:flex-start; }
  .story-grid { align-content:start; }
  .story-phone { height:290px; margin-bottom:36px; }
  .sc { transform:scale(.48); }
  .rail-wrap { gap:18px; }
  .rail { gap:20px; font-size:14px; }
  .st h3 { font-size:28px; }
  .st p { font-size:16px; line-height:1.45; }
}
@media (max-width:860px) and (max-height:720px) { .story-phone { height:236px; margin-bottom:26px; } .sc { transform:scale(.39); } .st p { font-size:15px; } }

/* ---- Contact form extras ---- */
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-err { color:#e5484d; font-size:14px; margin:0 0 14px; min-height:0; }
.f-err:empty { display:none; }

/* ---- Platform helper: suggestion link as a highlighted button (text + arrow on one line) ---- */
.helper .result a { display:inline-flex; align-self:flex-start; align-items:center; gap:10px; margin-top:6px; padding:13px 22px 13px 24px; border-radius:980px; background:#fff; color:var(--brand); font-size:16px; font-weight:600; line-height:1.2; white-space:nowrap; box-shadow:0 10px 26px rgba(11,13,20,.2); transition:transform .3s var(--ease), box-shadow .3s; }
.helper .result a::after { content:""; display:block; flex:none; width:.5em; height:.5em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease); }
.helper .result a:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(11,13,20,.28); }
.helper .result a:hover::after { transform:translateX(4px) rotate(45deg); }
.helper .result a:focus-visible { outline:3px solid #fff; outline-offset:3px; }

/* ---- FAQ: minimal hover (question nudges right, turns brand colour, + icon tints) ---- */
.faq .fq > button { transition:color .3s ease; }
.faq .fq > button > span { display:inline-block; transition:transform .45s var(--ease); }
.faq .fq > button:hover, .faq .fq > button:focus-visible { color:var(--link); }
.faq .fq > button:hover > span, .faq .fq > button:focus-visible > span { transform:translateX(6px); }
.faq .fq > button .pm { transition:transform .5s var(--ease), background .3s ease; }
.faq .fq:not(.open) > button:hover .pm, .faq .fq:not(.open) > button:focus-visible .pm { background:var(--brand-tint); transform:scale(1.08); }
.faq .fq:not(.open) > button:hover .pm::before, .faq .fq:not(.open) > button:hover .pm::after,
.faq .fq:not(.open) > button:focus-visible .pm::before, .faq .fq:not(.open) > button:focus-visible .pm::after { background:var(--link); }
.faq .fq > button:focus-visible { outline:none; }
@media (prefers-reduced-motion: reduce) { .faq .fq > button > span, .faq .fq > button .pm { transition:none; } .faq .fq > button:hover > span, .faq .fq:not(.open) > button:hover .pm { transform:none; } }

/* ---- Testimonials v2: dark section, no label, softer quote marks ---- */
.tst-sec.s-dark .tst-card { background:linear-gradient(180deg, #11172b 0%, #0c1122 100%); border:1px solid #1e2640; box-shadow:0 40px 100px rgba(41,90,255,.12); }
.tst-sec.s-dark .tst-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(60% 50% at 50% 0%, rgba(41,90,255,.16), transparent 70%); pointer-events:none; }
.tst-sec .tst-q { width:34px; opacity:.35; color:var(--brand-soft); }
.tst-sec .tst-slide, .tst-sec .tst-nav { position:relative; }
.tst-sec.s-dark .tst-av { box-shadow:0 12px 30px rgba(41,90,255,.35); }
.tst-sec.s-dark .tst-btn { background:#161b2e; border-color:#2a3150; color:#f4f6fb; }
.tst-sec.s-dark .tst-btn:hover { background:var(--brand); border-color:var(--brand); }
@media (max-width:640px) { .tst-sec .tst-q { width:24px; } }

/* ---- Header logo: icon + "Appsdiary" wordmark + centred tagline (Option A) ---- */
.nav-logo.lockup { width:auto; height:auto; display:inline-flex; align-items:center; gap:6px; color:var(--ink); flex:none; }
.nav-logo.lockup .lg { width:44px; height:44px; flex:none; transition:width .45s var(--ease), height .45s var(--ease); }
.lk-col { display:flex; flex-direction:column; align-items:center; animation:lkIn .9s var(--ease) both; animation-delay:calc(var(--ld,0s) + .5s); }
@keyframes lkIn { from { opacity:0; transform:translateX(-8px); filter:blur(4px); } }
.lk-wm { font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.02em; line-height:1; color:var(--ink); white-space:nowrap; transition:font-size .45s var(--ease); }
.lk-tg { display:block; margin-top:4px; font-family:var(--display); font-weight:500; font-size:10px; line-height:1.1; letter-spacing:.01em; color:var(--muted); white-space:nowrap; max-height:14px; overflow:hidden; transition:opacity .35s ease, max-height .45s var(--ease), margin .45s var(--ease); }
.lk-tg b { color:var(--brand); font-weight:600; }
[data-theme="dark"] .lk-tg b, .nav.on-dark .lk-tg b { color:#6f93ff; }
.nav.on-dark .lk-tg { color:#a4abbd; }
.nav.compact .nav-logo.lockup .lg { width:36px; height:36px; }
.nav.compact .lk-wm { font-size:22px; }
.nav.compact .lk-tg { opacity:0; max-height:0; margin-top:0; }
@media (max-width:520px) { .nav-logo.lockup .lg { width:38px; height:38px; } .lk-wm { font-size:22px; } .lk-tg { display:none; } }
@media (prefers-reduced-motion: reduce) { .lk-col { animation:none; } }
/* keep the menu fixed in place while the logo resizes on scroll */
@media (min-width:1001px) { .nav-in { display:grid; grid-template-columns:1fr auto 1fr; } .nav-in > .nav-logo { justify-self:start; } .nav-in > .nav-r { justify-self:end; } }

/* ---- Footer logo: Option B (icon + wordmark, tagline at half the wordmark size, left-aligned) ---- */
.foot-lockup, .foot a.foot-lockup { display:inline-flex; align-items:center; gap:12px; padding:0; color:var(--ink); text-decoration:none; }
.fl-ico { width:56px; height:56px; flex:none; display:block; transition:transform .5s var(--ease); }
.foot-lockup:hover .fl-ico { transform:rotate(-6deg) scale(1.04); }
.fl-col { display:flex; flex-direction:column; align-items:flex-start; }
.fl-wm { font-family:var(--display); font-weight:600; font-size:32px; letter-spacing:-.02em; line-height:1; color:var(--ink); white-space:nowrap; }
.fl-tg { margin-top:6px; font-family:var(--display); font-weight:500; font-size:16px; line-height:1.1; letter-spacing:.005em; color:var(--muted); white-space:nowrap; }
.fl-tg b { color:var(--brand); font-weight:600; }
[data-theme="dark"] .fl-tg b { color:#6f93ff; }
.foot-custom { height:56px; width:auto; display:block; }
@media (max-width:620px) { .fl-ico { width:48px; height:48px; } .fl-wm { font-size:28px; } .fl-tg { font-size:14px; } }

/* ---- Comparison tables on service pages ---- */
.cmp-wrap { margin:48px auto 0; max-width:1000px; overflow-x:auto; border-radius:24px; border:1px solid var(--line); background:var(--tile); text-align:left; }
.s-paper .cmp-wrap { background:var(--bg); }
table.cmp { width:100%; min-width:620px; border-collapse:collapse; }
.cmp th, .cmp td { padding:18px 22px; border-bottom:1px solid var(--line); font-size:16px; line-height:1.45; vertical-align:top; }
.cmp thead th { font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); background:var(--paper); }
.s-paper .cmp thead th { background:var(--tile); }
.cmp tbody th { width:26%; font-weight:600; color:var(--ink); }
.cmp td { color:var(--muted); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.cmp tbody tr { transition:background .25s ease; } .cmp tbody tr:hover { background:var(--brand-tint); }
.cmp .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:640px) { .cmp th, .cmp td { padding:14px 16px; font-size:15px; } .cmp-wrap { border-radius:18px; } }

/* ---- Splash: footer (Option B) logo, white on brand blue ---- */
.sp-lockup { display:flex; align-items:center; gap:.375em; font-size:clamp(34px, 9vw, 64px); }
.sp-ico { width:1.75em; height:1.75em; flex:none; display:block; filter:drop-shadow(0 18px 40px rgba(0,0,0,.25)); animation:icoIn 1.1s cubic-bezier(.2,1.35,.3,1) .15s both; }
.sp-col { display:flex; flex-direction:column; align-items:flex-start; }
.sp-wm { font-family:var(--display); font-weight:600; font-size:1em; line-height:1; letter-spacing:-.02em; color:#fff; white-space:nowrap; animation:spUp .9s var(--ease) .55s both; }
.sp-tg { margin-top:.19em; font-family:var(--display); font-weight:500; font-size:.5em; line-height:1.1; letter-spacing:.005em; color:rgba(255,255,255,.88); white-space:nowrap; animation:spUp .9s var(--ease) 1.05s both; }
.sp-tg b { color:#fff; font-weight:600; text-shadow:0 0 22px rgba(255,255,255,.85); }
@keyframes spUp { from { opacity:0; transform:translateY(16px); filter:blur(6px); } }
.sp .sp-logo { width:min(70vw,420px); height:auto; filter:brightness(0) invert(1); }

/* ================= Round 9 ================= */
/* ---- Resources dropdown ---- */
.has-drop { position:relative; }
.drop-t { background:none; border:0; padding:0; font:inherit; font-size:16px; font-weight:500; color:var(--ink); opacity:.75; cursor:pointer; display:inline-flex; align-items:center; transition:opacity .2s; }
.has-drop:hover .drop-t, .has-drop:focus-within .drop-t, .drop-t[aria-current="page"] { opacity:1; }
.drop-t[aria-current="page"] { font-weight:600; }
.has-drop:hover .caret, .has-drop:focus-within .caret { transform:rotate(225deg) translateY(-1px); }
.drop { position:absolute; top:calc(100% + 16px); left:50%; min-width:300px; padding:8px; border-radius:20px; background:var(--bg); border:1px solid var(--line); box-shadow:0 24px 60px rgba(5,7,12,.22); opacity:0; visibility:hidden; transform:translate(-50%, 8px); transition:opacity .25s, transform .35s var(--ease), visibility 0s .35s; z-index:70; }
.drop::before { content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .25s, transform .35s var(--ease); }
.nav-links .drop a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; opacity:1; font-size:15px; font-weight:500; color:var(--ink); transition:background .2s; }
.nav-links .drop a:hover, .nav-links .drop a:focus-visible, .nav-links .drop a[aria-current="page"] { background:var(--paper); }
.drop .ico-b { margin:0; width:40px; height:40px; border-radius:12px; } .drop .ico-b svg { width:20px; height:20px; }
.drop b { display:block; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em; }
.drop small { display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:1px; }

/* ---- Industry list: hover and selection tinted with each industry's colour ---- */
.ind2-list button { transition:background .3s ease, color .3s ease, opacity .3s ease, box-shadow .3s ease; }
.ind2-list button .dot { background:var(--c, currentColor); opacity:.55; }
.ind2-list button:hover { background:rgba(var(--c-rgb, 255,255,255), .12); color:#f4f6fb; opacity:1; }
.ind2-list button[aria-current="true"] { background:rgba(var(--c-rgb, 41,90,255), .2); color:#fff; opacity:1; box-shadow:inset 3px 0 0 var(--c, var(--brand)); }
.ind2-list button[aria-current="true"] .dot { background:var(--c, var(--brand)); opacity:1; box-shadow:0 0 0 5px rgba(var(--c-rgb, 41,90,255), .3), 0 0 16px rgba(var(--c-rgb, 41,90,255), .7); }
@media (max-width:900px) { .ind2-list button[aria-current="true"] { box-shadow:inset 0 0 0 1px rgba(var(--c-rgb, 41,90,255), .6); } }

/* ---- Homepage industries grid ---- */
.indg { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:52px; text-align:left; }
.indc { display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:22px; background:var(--paper); color:var(--ink); border:1px solid transparent; transition:background .3s ease, border-color .3s ease, transform .45s var(--ease); }
.indc:hover, .indc:focus-visible { background:rgba(var(--c-rgb), .1); border-color:rgba(var(--c-rgb), .35); transform:translateY(-3px); }
.indc-ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; flex:none; background:rgba(var(--c-rgb), .14); color:var(--c); transition:background .3s, color .3s; }
.indc:hover .indc-ic { background:var(--c); color:#fff; }
.indc-ic svg { width:24px; height:24px; }
.indc-t { font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.02em; line-height:1.25; }
.indc-go { margin-left:auto; width:8px; height:8px; flex:none; border-top:2px solid var(--c); border-right:2px solid var(--c); transform:rotate(45deg); opacity:.5; transition:transform .35s var(--ease), opacity .3s; }
.indc:hover .indc-go { opacity:1; transform:translateX(4px) rotate(45deg); }
@media (max-width:900px) { .indg { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .indg { grid-template-columns:1fr; } }
.s-paper .agrid .acard, .s-paper .agrid .fart { }

/* ---- Calmer heading scale across the site ---- */
.h-xxl { font-size:clamp(42px, 6.6vw, 80px); }
.h-2 { font-size:clamp(36px, 5.2vw, 60px); }
.h-xl { font-size:clamp(30px, 4vw, 46px); }
.h-l { font-size:clamp(25px, 2.8vw, 34px); }
.sub { font-size:clamp(17px, 1.7vw, 20px); }
.st h3 { font-size:clamp(28px, 3.4vw, 40px); }
.tile .h-l { font-size:clamp(26px, 2.9vw, 36px); }
.careers h3, .ind2-panel h3 { font-size:clamp(24px, 2.6vw, 32px); }
.fart .ab h3 { font-size:clamp(24px, 2.8vw, 34px); }
.split .h-xl, .remote-wrap .h-l { font-size:clamp(28px, 3.6vw, 42px); }

/* ---- Footer: services on one line (desktop), one section per row (mobile) ---- */
@media (min-width:981px) {
  .foot-top { grid-template-columns:1.25fr 1.55fr .9fr .9fr; }
  .fcol[data-loc="footer-services"] a { white-space:nowrap; }
}
@media (max-width:620px) {
  .foot-top { grid-template-columns:1fr; gap:34px; }
  .fcol a, .foot .fcol a { white-space:nowrap; }
}

/* ---- Pop-up quote / support forms ---- */
.mform .m-kick { margin:0; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.mform h2 { margin:8px 0 8px; font-family:var(--display); font-weight:600; font-size:clamp(26px, 3.2vw, 34px); letter-spacing:-.03em; }
.mform .m-sub { margin:0 0 24px; color:var(--muted); font-size:16px; line-height:1.5; }
.mform .fld { margin-bottom:18px; }
.mform select, .fld select { width:100%; padding:13px 40px 13px 14px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a90a3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color:var(--ink); font:inherit; font-size:15px; appearance:none; -webkit-appearance:none; transition:border-color .25s, box-shadow .25s; }
.mform select:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); }
.mform textarea { min-height:110px; }
.mform .opt-l { color:var(--muted); font-weight:400; }
.mform .chips.l { gap:8px; } .mform .chip { font-size:14px; padding:8px 14px; }
.mform .btn { width:100%; margin-top:4px; }
@media (max-width:560px) { .mform .f2 { grid-template-columns:1fr; } }
.has-drop.closing .drop { opacity:0 !important; visibility:hidden !important; transform:translate(-50%, 8px) !important; }

/* ================= Contact page v2 ================= */
.cform2 { grid-template-columns:1.45fr .85fr; gap:20px; }
.fcard2 { position:relative; padding:44px 44px 40px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(11,13,20,.06); overflow:hidden; }
.fcard2::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--brand), var(--brand-soft)); }
.fstep { display:flex; align-items:center; gap:12px; margin:4px 0 20px; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.fstep i { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand); font-style:normal; font-size:14px; font-weight:600; }
.fdiv { height:1px; background:var(--line); margin:10px 0 28px; }
.fcard2 .opt-l { color:var(--muted); font-weight:400; }
.fcard2 .lb { margin-bottom:12px; }
.fcard2 select { width:100%; padding:14px 40px 14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a90a3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; color:var(--ink); font:inherit; font-size:16px; appearance:none; -webkit-appearance:none; transition:border-color .25s, box-shadow .25s; }
.fcard2 select:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); }
.fcard2 textarea { min-height:140px; }
.fcard2 textarea::placeholder { color:#9aa1b4; }
/* interest cards */
.optg { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.fcard2 .chip.opt-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:108px; padding:16px 16px 14px; border-radius:18px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); text-align:left; font-size:15px; font-weight:500; line-height:1.3; transition:border-color .25s, background .25s, box-shadow .3s, transform .35s var(--ease); }
.fcard2 .chip.opt-card:hover { border-color:rgba(41,90,255,.45); transform:translateY(-2px); background:var(--bg); }
.fcard2 .chip.opt-card[aria-pressed="true"] { border-color:var(--brand); background:var(--brand-tint); color:var(--ink); box-shadow:0 10px 24px rgba(41,90,255,.14); }
.oc-ic { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--paper); color:var(--brand); transition:background .25s, color .25s; }
.oc-ic svg { width:20px; height:20px; }
.fcard2 .chip.opt-card[aria-pressed="true"] .oc-ic { background:var(--brand); color:#fff; }
.oc-ck { position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); transition:background .25s, border-color .25s, transform .3s var(--ease); }
.fcard2 .chip.opt-card[aria-pressed="true"] .oc-ck { border-color:var(--brand); transform:scale(1.05); background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
/* budget: segmented selector */
.seg { display:flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:16px; background:var(--paper); border:1px solid var(--line); }
.fcard2 .chip.seg-b { flex:1 1 0; min-width:max-content; padding:11px 14px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; transition:background .25s, color .25s, box-shadow .25s; }
.fcard2 .chip.seg-b:hover { color:var(--ink); background:rgba(128,128,128,.1); }
.fcard2 .chip.seg-b[aria-pressed="true"] { background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(41,90,255,.3); }
.btn-send { width:100%; display:flex; justify-content:center; align-items:center; gap:10px; padding:16px 22px; font-size:17px; }
.btn-send::after { content:""; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease); }
.btn-send:hover::after { transform:translateX(4px) rotate(45deg); }
.f-note { margin:14px 0 0; text-align:center; font-size:13px; color:var(--muted); }
/* sidebar */
.icard2 { position:sticky; top:96px; padding:32px 30px; border:1px solid var(--line); }
.ic-badge { display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:6px 12px; border-radius:980px; background:rgba(48,164,108,.12); color:#1f8a57; font-size:13px; font-weight:600; }
[data-theme="dark"] .ic-badge { color:#5fd49a; }
.ic-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }
.icard2 h3 { margin:0 0 20px; }
.nx2 { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:0; }
.nx2 li { position:relative; display:flex; gap:14px; padding-bottom:20px; }
.nx2 li:not(:last-child)::after { content:""; position:absolute; left:19px; top:42px; bottom:4px; width:2px; background:var(--line); }
.nx-ic { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand); }
.nx-ic svg { width:20px; height:20px; }
.nx2 b { display:block; font-weight:600; margin-top:2px; } .nx2 small { display:block; color:var(--muted); font-size:14px; line-height:1.45; margin-top:2px; }
.ic-mail { padding:16px 18px; border-radius:16px; background:var(--paper); margin-bottom:20px; }
.ic-mail small { display:block; color:var(--muted); font-size:13px; margin-bottom:2px; }
.ic-mail a { font-family:var(--display); font-weight:600; font-size:18px; color:var(--link); letter-spacing:-.01em; word-break:break-all; }
.ic-trust { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ic-trust li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.ic-trust svg { width:17px; height:17px; color:var(--brand); flex:none; }
@media (max-width:980px) { .cform2 { grid-template-columns:1fr; } .icard2 { position:static; } }
@media (max-width:640px) { .fcard2 { padding:32px 22px 28px; } .optg { grid-template-columns:1fr 1fr; } .fcard2 .chip.opt-card { min-height:96px; } .seg { display:grid; grid-template-columns:1fr 1fr; } .fcard2 .chip.seg-b:last-child { grid-column:1 / -1; } }

/* ================= Light mode: no dark sections ================= */
/* Dark sections become a soft, lightly blue-tinted light section. Device mock-ups (phones, AI chat window) stay dark on purpose. */
:where(html[data-theme="light"]) .s-dark, :where(html[data-theme="light"]) .tile.dark, :where(html[data-theme="light"]) .tile.navy, :where(html[data-theme="light"]) .dkv {
  --ink:#0b0d14; --muted:#5b6172; --line:#dde3f0; --tile:#ffffff; --paper:#f4f6fb; --link:#1f4be0; color:var(--ink);
}
:where(html[data-theme="light"]) .s-dark { background:#eef2fd; }
:where(html[data-theme="light"]) .phero.s-dark::before { background:radial-gradient(closest-side, rgba(41,90,255,.16), transparent); }
:where(html[data-theme="light"]) .s-dark .h-xl, :where(html[data-theme="light"]) .s-dark .h-l, :where(html[data-theme="light"]) .dark .h-xl, :where(html[data-theme="light"]) .dark .h-l { color:var(--ink); }
:where(html[data-theme="light"]) .s-dark .ico-b, :where(html[data-theme="light"]) .s-dark .tick li svg, :where(html[data-theme="light"]) .s-dark .tl-i small, :where(html[data-theme="light"]) .s-dark .st li svg { color:var(--brand); }
:where(html[data-theme="light"]) .s-dark .chip[aria-pressed="true"] { background:var(--ink); color:#fff; }
/* process story rail */
:where(html[data-theme="light"]) .rail::before { background:#d3dbee; }
:where(html[data-theme="light"]) .rail li { color:#8a90a3; }
:where(html[data-theme="light"]) .rail li::before { background:#eef2fd; border-color:#c2cbe2; }
/* AI workflow demo */
:where(html[data-theme="light"]) .s-dark .flow { background:#fff; border-color:#dde3f0; box-shadow:0 24px 60px rgba(41,90,255,.08); }
:where(html[data-theme="light"]) .s-dark .node { background:#f6f8fd; border-color:#e3e8f4; }
:where(html[data-theme="light"]) .s-dark .node .ni { background:#e7ecf8; color:#6b7285; }
:where(html[data-theme="light"]) .s-dark .node .ns { color:#8a90a3; }
:where(html[data-theme="light"]) .s-dark .node.active { background:#fff; box-shadow:0 0 0 1px var(--brand), 0 18px 40px rgba(41,90,255,.18); }
:where(html[data-theme="light"]) .s-dark .node.active .ns, :where(html[data-theme="light"]) .s-dark .node.done .ns { color:var(--brand); }
:where(html[data-theme="light"]) .s-dark .node.done .ni { background:var(--brand-tint); color:var(--brand); }
:where(html[data-theme="light"]) .s-dark .conn { background:#d3dbee; }
:where(html[data-theme="light"]) .s-dark .tabs { background:#fff; }
/* testimonials */
:where(html[data-theme="light"]) .tst-sec.s-dark .tst-card { background:#fff; border-color:#dde3f0; box-shadow:0 30px 80px rgba(41,90,255,.1); }
:where(html[data-theme="light"]) .tst-sec.s-dark .tst-card::before { background:radial-gradient(60% 50% at 50% 0%, rgba(41,90,255,.07), transparent 70%); }
:where(html[data-theme="light"]) .tst-sec.s-dark .tst-btn { background:#fff; border-color:#dde3f0; color:var(--ink); }
/* industries showcase */
:where(html[data-theme="light"]) .ind2-list button { color:#5b6172; }
:where(html[data-theme="light"]) .ind2-list button:hover { color:var(--ink); }
:where(html[data-theme="light"]) .ind2-list button[aria-current="true"] { color:var(--ink); }
:where(html[data-theme="light"]) .ind2-panel { background:#fff; border-color:#dde3f0; box-shadow:0 24px 60px rgba(11,13,20,.07); }
:where(html[data-theme="light"]) .ind2-panel h3, :where(html[data-theme="light"]) .ind2-panel .u b { color:var(--ink); }
:where(html[data-theme="light"]) .ind2-panel > p { color:#5b6172; }
:where(html[data-theme="light"]) .ind2-panel .u small, :where(html[data-theme="light"]) .ind2-panel .fw { color:#6b7285; }
:where(html[data-theme="light"]) .ind2-panel .pills span { background:#f1f4fb; color:#3a3f4d; }
/* after-launch panels, engagement cards, safeguards demo, team cards */
:where(html[data-theme="light"]) .s-dark .health, :where(html[data-theme="light"]) .s-dark .ecard, :where(html[data-theme="light"]) .s-dark .ctrl-l, :where(html[data-theme="light"]) .s-dark .ctrl-r { background:#fff; box-shadow:0 20px 50px rgba(11,13,20,.06); }
:where(html[data-theme="light"]) .s-dark .lline { color:#3a3f4d; }
:where(html[data-theme="light"]) .s-dark .sw { background:#cfd6e6; }
:where(html[data-theme="light"]) .s-dark .sw[aria-checked="true"] { background:var(--brand); }
:where(html[data-theme="light"]) .s-dark .tm { background:#fff; }
:where(html[data-theme="light"]) .s-dark .val:hover h3 { color:var(--brand); }
:where(html[data-theme="light"]) .s-dark .ctrl-r .st-chip { color:var(--brand); }
/* dark service tiles, project and article cards */
:where(html[data-theme="light"]) .tile.dark { background:#fff; }
:where(html[data-theme="light"]) .tile.navy { background:linear-gradient(165deg, #eef3ff 0%, #f7f9ff 100%); }
:where(html[data-theme="light"]) .tile.navy::before { background-image:radial-gradient(rgba(41,90,255,.12) 1px, transparent 1.3px); }
:where(html[data-theme="light"]) .tile.dark .pills span, :where(html[data-theme="light"]) .tile.navy .pills span { background:rgba(41,90,255,.1); color:#1f3fb8; backdrop-filter:none; }
:where(html[data-theme="light"]) .tile.navy .btn-w, :where(html[data-theme="light"]) .tile.dark .btn-w { background:var(--brand); color:#fff; }
:where(html[data-theme="light"]) .tile.dark .msg.ai { background:#eef1f8; color:#0b0d14; }
:where(html[data-theme="light"]) .tile.dark .typing { background:#eef1f8; } :where(html[data-theme="light"]) .tile.dark .typing i { background:#8a90a3; }
:where(html[data-theme="light"]) .pcard.dkv, :where(html[data-theme="light"]) .prj-visual.dkv { background:#fff; }
:where(html[data-theme="light"]) .fart { background:#fff; color:var(--ink); box-shadow:0 20px 50px rgba(11,13,20,.06); }
:where(html[data-theme="light"]) .fart .ab p { color:#5b6172; }
:where(html[data-theme="light"]) .fart .cat, :where(html[data-theme="light"]) .fart .more { color:var(--brand); }

/* ================= Mobile & tablet menu: mirrors the desktop navigation ================= */
body.menu-open { overflow:hidden; }
.mmenu { display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 88px) 24px calc(env(safe-area-inset-bottom,0px) + 28px); overflow-y:auto; }
.mm-list, .mm-foot { width:100%; max-width:560px; margin:0 auto; }
.mmenu .mm-l, .mm-t { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 2px; border:0; border-bottom:1px solid var(--line); background:none; font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-align:left; cursor:pointer; }
.mmenu .mm-l, .mm-grp { opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i, 0) * 45ms + 60ms); }
body.menu-open .mmenu .mm-l, body.menu-open .mm-grp, body.menu-open .mm-foot { opacity:1; transform:none; }
.mmenu .mm-l[aria-current="page"], .mm-t[aria-current="page"] { color:var(--brand); }
.mm-car { width:9px; height:9px; margin-right:4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .35s var(--ease); opacity:.6; }
.mm-t[aria-expanded="true"] .mm-car { transform:rotate(225deg) translateY(-2px); }
.mm-sub { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.mm-sub > div { overflow:hidden; }
.mm-t[aria-expanded="true"] + .mm-sub { grid-template-rows:1fr; }
.mm-sub a, .mmenu .mm-sub a { display:block; padding:11px 2px 11px 16px; font-family:var(--text); font-size:16px; font-weight:500; letter-spacing:0; color:var(--muted); opacity:1; transform:none; border-left:2px solid var(--line); margin-left:2px; }
.mm-sub > div { padding:0; } .mm-t[aria-expanded="true"] + .mm-sub > div { padding:8px 0 12px; }
.mm-sub a[aria-current="page"] { color:var(--brand); border-left-color:var(--brand); }
.mm-foot { margin-top:auto; padding-top:28px; display:grid; gap:14px; opacity:0; transition:opacity .45s var(--ease) .3s; }
.mm-cta { width:100%; text-align:center; padding:15px 20px; font-size:16px; }
.mm-mail { text-align:center; color:var(--muted); font-size:15px; }
@media (min-width:1001px) { .mmenu { display:none; } }

/* Resources dropdown opened by tap (tablets) */
.has-drop.open .drop { opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .25s, transform .35s var(--ease); }
.has-drop.open .caret { transform:rotate(225deg) translateY(-1px); }

/* "Want to build with us?" card visible in light mode */
:where(html[data-theme="light"]) .careers { background:linear-gradient(135deg, #eef3ff 0%, #f7f9ff 60%, #eef3ff 100%); border:1px solid #dde3f0; position:relative; overflow:hidden; }
:where(html[data-theme="light"]) .careers::after { content:""; position:absolute; right:-80px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(closest-side, rgba(41,90,255,.14), transparent); pointer-events:none; }
.careers > * { position:relative; z-index:1; }
/* cards on grey (paper) sections are lifted to white so they never blend in */
.s-paper .cap:not(.pk), .s-paper .tm, .s-paper .diff, .s-paper .indc, .s-paper .ecard, .s-paper .it, .s-paper .val-card { background:var(--tile); }
:where(html[data-theme="light"]) .s-paper .cap:not(.pk), :where(html[data-theme="light"]) .s-paper .tm, :where(html[data-theme="light"]) .s-paper .diff { box-shadow:0 1px 0 rgba(11,13,20,.03), 0 10px 30px rgba(11,13,20,.04); }
.mmenu .mm-cta, .mmenu .mm-mail { font-family:var(--text); letter-spacing:0; opacity:1; transform:none; transition:none; }
.mmenu .mm-cta { display:block; font-size:16px; font-weight:500; padding:15px 20px; color:#fff; }
.mmenu .mm-mail { display:block; font-size:15px; font-weight:400; padding:4px 0; color:var(--muted); }

/* status-panel check icons: stronger blue on light backgrounds (the animation still takes over) */
:where(html[data-theme="light"]) .s-dark .hi { color:var(--brand); }

/* ================= Industries showcase on phones: everything fits on screen ================= */
@media (max-width:767px) {
  .ind-track .story-stick { padding-top:calc(env(safe-area-inset-top,0px) + 76px); padding-bottom:12px; align-items:flex-start; }
  .ind2-grid { gap:14px; }
  .ind2-list { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin:0 -24px; padding:2px 24px 4px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .ind2-list::-webkit-scrollbar { display:none; }
  .ind2-list button { flex:none; white-space:nowrap; padding:8px 13px; font-size:14px; }
  .ind2-orb { width:180px; height:180px; top:-40px; right:-50px; }
  .ind2-panel { padding:20px 18px 18px; border-radius:24px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; }
  .ind2-panel > * { grid-column:1 / -1; }
  .ind2-panel .ind2-icon { grid-column:1; grid-row:1; width:40px; height:40px; border-radius:13px; margin:0; }
  .ind2-panel .ind2-icon svg { width:20px; height:20px; }
  .ind2-panel .ind2-num { grid-column:2; grid-row:1; margin:0; justify-self:end; font-size:13px; }
  .ind2-panel h3 { margin-top:14px; font-size:22px; }
  .ind2-panel > p { margin:8px 0 14px; font-size:15px; line-height:1.4; }
  .ind2-panel .ul { gap:10px; margin-bottom:14px; }
  .ind2-panel .u { gap:11px; }
  .ind2-panel .u .ico-b { width:32px; height:32px; border-radius:10px; }
  .ind2-panel .u .ico-b svg { width:16px; height:16px; }
  .ind2-panel .u b { font-size:15px; }
  .ind2-panel .u small { font-size:13px; line-height:1.35; }
  .ind2-panel .fw { margin:0 0 6px; font-size:12px; }
  .ind2-panel .pills { gap:6px; } .ind2-panel .pills span { padding:5px 10px; font-size:12px; }
}
@media (max-width:767px) and (max-height:760px) { .ind2-panel .u small { display:none; } .ind2-panel > p { font-size:14px; } .ind2-panel .ul { gap:8px; } }
@media (max-width:767px) and (max-height:600px) { .ind2-panel > p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .ind2-panel .fw { display:none; } }

/* ================= Form confirmation: solid blue check mark ================= */
.form-sent { text-align:center; padding:44px 10px 36px; }
.fs-mark { position:relative; width:92px; height:92px; margin:0 auto 28px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg, #4a75ff 0%, #295aff 55%, #1a3fd0 100%); box-shadow:0 18px 44px rgba(41,90,255,.38), inset 0 1px 0 rgba(255,255,255,.25); animation:fsPop .65s cubic-bezier(.2,1.4,.3,1) both; }
.fs-mark svg { position:relative; width:50px; height:50px; overflow:visible; }
.fs-mark path { fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:0; animation:fsDraw .5s .38s cubic-bezier(.65,0,.35,1) both; }
.fs-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(41,90,255,.5); opacity:0; animation:fsRing 1.5s .45s ease-out both; }
@keyframes fsPop { from { transform:scale(.4); opacity:0; } }
@keyframes fsDraw { 0% { stroke-dashoffset:36; opacity:0; } 1% { opacity:1; } 100% { stroke-dashoffset:0; opacity:1; } }
@keyframes fsRing { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(1.75); opacity:0; } }
.form-sent h3 { margin:0 0 10px; font-family:var(--display); font-size:clamp(28px, 3vw, 34px); font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.form-sent p { max-width:440px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.55; }
.fs-actions { display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }
.fcard2, .mform { scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 96px); }
.fld { scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 110px); scroll-margin-bottom:40px; }
@media (prefers-reduced-motion: reduce) { .fs-mark, .fs-mark path, .fs-ring { animation:none; } }

/* ---- Client strip under the hero ---- */
.clients { padding:6px 0 60px; text-align:center; }
.cl-t { margin:0 0 20px; font-size:14px; color:var(--muted); letter-spacing:.01em; }
.cl-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 44px; }
.cl-n { font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--ink); opacity:.55; white-space:nowrap; transition:opacity .3s; }
.cl-n:hover { opacity:.9; }
.cl-logo { height:34px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.65; transition:filter .3s, opacity .3s; }
.cl-logo:hover { filter:none; opacity:1; }
[data-theme="dark"] .cl-logo { filter:grayscale(1) brightness(0) invert(1); opacity:.6; }
@media (max-width:640px) { .clients { padding-bottom:40px; } .cl-row { gap:10px 26px; } .cl-n { font-size:16px; } }
/* seven budget options fit on every screen */
.seg .chip.seg-b { min-width:0; }
@media (max-width:640px) { .fcard2 .chip.seg-b:last-child { grid-column:auto; } .seg { grid-template-columns:1fr 1fr; } .fcard2 .chip.seg-b:nth-last-child(1):nth-child(odd) { grid-column:1 / -1; } }

/* ---- Budget selector: seven options in a tidy grid (never squeezed onto one line) ---- */
.fcard2 .seg { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
.fcard2 .seg .chip.seg-b { min-width:0; width:100%; padding:11px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcard2 .seg .chip.seg-b:last-child:nth-child(4n + 3) { grid-column:span 2; }
@media (max-width:640px) {
  .fcard2 .seg { grid-template-columns:1fr 1fr; }
  .fcard2 .seg .chip.seg-b:last-child:nth-child(4n + 3) { grid-column:auto; }
  .fcard2 .seg .chip.seg-b:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* keep the Resources arrow inside its button */
.drop-t { padding-right:4px; }

/* ---- Testimonial card: same width as the full-width service tiles; quote at the caption size ---- */
.tst { --tw:min(1256px, calc(100vw - 24px)); width:var(--tw); max-width:none; margin:56px 0 0 calc(50% - var(--tw) / 2); }
.tst-slide blockquote { max-width:720px; font-size:15px; line-height:1.75; }

/* ================= Process story on phones: horizontal stepper, pointers visible, no empty space ================= */
@media (max-width:860px) {
  .story-stick { padding-top:calc(env(safe-area-inset-top,0px) + 82px); padding-bottom:18px; align-items:flex-start; }
  .story-grid { display:flex; flex-direction:column; gap:0; }
  .story-phone { order:-1; height:340px; margin-bottom:26px; }
  .sc { transform:scale(.575); }
  .rail-wrap { flex-direction:column; gap:22px; }
  .rail { flex-direction:row; justify-content:space-between; gap:0; padding-top:22px; font-size:13.5px; }
  .rail::before, .rail::after { left:12.5%; right:12.5%; top:5px; bottom:auto; width:auto; height:2px; }
  .rail::after { transform-origin:left; transform:scaleX(var(--p)); }
  .rail li { flex:1 1 0; text-align:center; }
  .rail li::before { left:50%; top:-22px; transform:translateX(-50%); }
  .st { align-self:start; }
  .st h3 { font-size:28px; }
  .st p { font-size:16px; line-height:1.45; margin-top:10px; max-width:none; }
  .st ul { display:grid; margin-top:16px; gap:8px; font-size:15px; }
}
@media (max-width:860px) and (max-height:820px) { .story-phone { height:290px; margin-bottom:22px; } .sc { transform:scale(.49); } }
@media (max-width:860px) and (max-height:700px) { .story-phone { height:228px; margin-bottom:18px; } .sc { transform:scale(.386); } .st ul { display:none; } .st h3 { font-size:25px; } .rail-wrap { gap:16px; } }
@media (max-width:860px) {
  .story-stick { align-items:center; }
  .story-phone { height:400px; margin-bottom:28px; } .sc { transform:scale(.678); }
}
@media (max-width:860px) and (max-height:820px) { .story-phone { height:300px; margin-bottom:22px; } .sc { transform:scale(.508); } }
@media (max-width:860px) and (max-height:700px) { .story-phone { height:240px; margin-bottom:18px; } .sc { transform:scale(.407); } .st ul { display:grid; gap:6px; margin-top:12px; font-size:14px; } .st h3 { font-size:25px; } .st p { font-size:15px; } }
@media (max-width:860px) and (max-height:600px) { .story-phone { height:205px; margin-bottom:14px; } .sc { transform:scale(.347); } .st ul { display:none; } }
@media (min-width:600px) and (max-width:860px) and (min-height:900px) { .story-phone { height:470px; margin-bottom:34px; } .sc { transform:scale(.797); } .st h3 { font-size:38px; } .st p { font-size:18px; } .st ul { font-size:16px; gap:10px; } .rail { font-size:15px; } .rail-wrap { max-width:560px; margin:0 auto; width:100%; } }
/* horizontal rail (phones/tablets): no leftover desktop padding, so the line runs exactly from the first dot to the last */
@media (max-width:860px) { .rail { padding-left:0; padding-right:0; } }

/* ================= Client logos: scrolling cards ================= */
.clients { padding:4px 0 64px; }
.clients .cl-t { text-align:center; }
.cl-marq { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cl-track { display:flex; gap:16px; width:max-content; padding:6px 0; animation:clmarq 42s linear infinite; }
.cl-marq:hover .cl-track { animation-play-state:paused; }
@keyframes clmarq { to { transform:translateX(calc(-50% - 8px)); } }
.cl-card { flex:none; height:88px; min-width:150px; padding:14px 26px; border-radius:20px; background:#fff; border:1px solid #e3e8f2; display:grid; place-items:center; box-shadow:0 6px 18px rgba(11,13,20,.05); transition:transform .4s var(--ease), box-shadow .4s; }
.cl-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,13,20,.1); }
.cl-card img { display:block; max-height:56px; max-width:170px; width:auto; height:auto; object-fit:contain; }
.cl-card.cl-dark { background:#0b0d14; border-color:#1e2230; }
[data-theme="dark"] .cl-card { border-color:#2a3042; box-shadow:none; }
@media (max-width:640px) { .cl-card { height:72px; min-width:120px; padding:12px 18px; border-radius:16px; } .cl-card img { max-height:44px; max-width:130px; } .cl-track { animation-duration:34s; } }
@media (prefers-reduced-motion: reduce) { .cl-track { animation:none; flex-wrap:wrap; justify-content:center; width:auto; } .cl-track > [aria-hidden] { display:none; } }
/* case study labels: client · industry above the solution name */
.cs-client { display:block; margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--brand); }
[data-theme="dark"] .cs-client { color:#7d9dff; }
.dkv .cs-client { color:#7d9dff; }
:where(html[data-theme="light"]) .dkv .cs-client { color:var(--brand); }
.cs-for { margin:-4px 0 14px; font-size:15px; font-weight:500; color:var(--muted); }
.car-sub { margin:10px 0 0; }
.car-head { align-items:flex-end; gap:20px; }
.car-ttl { min-width:0; flex:1 1 auto; }
.car-ttl .h-xl { margin:0; }
.car-ttl .car-sub { margin:10px 0 0; max-width:none; }
@media (max-width:640px) { .car-ttl .car-sub { font-size:16px; } }

/* ---- Headings: descender-safe boxes everywhere text is animated or masked ---- */
.bang { padding:.16em 0 .32em; margin:-.16em 0 -.32em; }
.st h3, .st p { padding-bottom:.18em; }
.hero h1 .w, .phero h1 .w, .cta h2 .w { backface-visibility:hidden; }

/* ================= About proof row (real facts, quietly) ================= */
.proof { display:grid; grid-template-columns:repeat(3, 1fr); max-width:880px; margin:60px auto 0; border-top:1px solid var(--line); text-align:center; }
.proof > div { padding:30px 14px 0; }
.proof b { display:block; font-family:var(--display); font-weight:600; font-size:clamp(30px, 4vw, 46px); letter-spacing:-.035em; line-height:1.05; color:var(--ink); }
.proof span { display:block; margin-top:8px; color:var(--muted); font-size:15px; }
.proof-cert { margin:30px auto 0; text-align:center; font-size:15px; color:var(--muted); letter-spacing:.005em; }
@media (max-width:640px) {
  .proof { grid-template-columns:1fr; margin-top:44px; text-align:left; }
  .proof > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 2px; border-bottom:1px solid var(--line); }
  .proof b { font-size:30px; } .proof span { margin:0; font-size:14px; text-align:right; }
  .proof-cert { margin-top:22px; font-size:14px; }
}

/* ================= Timeline on phones: one connected rail, steps 1 to 4 ================= */
@media (max-width:760px) {
  .tl { grid-template-columns:1fr; gap:0; margin-top:44px; }
  .tl-i { padding:0 0 38px 46px; }
  .tl-i:last-child { padding-bottom:0; }
  .tl-i small { display:block; line-height:20px; }
  .tl-i .dot { top:3px; left:0; width:14px; height:14px; box-sizing:border-box; background:transparent; border:2px solid rgba(128,136,160,.5); box-shadow:none; transition:background .4s ease, border-color .4s ease, box-shadow .5s ease; }
  .tl-i.on .dot { background:var(--brand); border-color:var(--brand); box-shadow:0 0 0 5px rgba(41,90,255,.22), 0 0 16px rgba(41,90,255,.5); }
  /* the connector runs from just under this dot to just above the next one */
  .tl-i::before, .tl-i::after { top:17px; left:6px; right:auto; bottom:auto; width:2px; height:calc(100% - 14px); }
  .tl-i:nth-child(2n)::before, .tl-i:nth-child(2n)::after { right:auto; }
  .tl-i::after { background:var(--brand); transform:scaleY(var(--seg, 0)); transform-origin:top; transition:transform .28s linear; box-shadow:0 0 10px rgba(41,90,255,.45); }
  .tl-i.in::after { transform:scaleY(var(--seg, 0)); }
  .tl-i:last-child::before, .tl-i:last-child::after { display:none; }
  .tl-i h4 { margin:2px 0 6px; font-size:22px; }
  .tl-i p { font-size:15.5px; line-height:1.5; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce) { .tl-i::after, .tl-i .dot { transition:none; } }
.proof b { white-space:nowrap; }
@media (max-width:640px) { .proof b { font-size:28px; } .proof span { max-width:52%; } }

/* ---- Logo strip: equal breathing room above the caption and below the cards (single source of truth) ---- */
.clients { --cl-gap:56px; padding:var(--cl-gap) 0 calc(var(--cl-gap) - 6px); }   /* the 6px is the track's own padding, so top and bottom measure the same */
@media (max-width:640px) { .clients { --cl-gap:40px; } }


/* ===== WordPress additions ===== */
.crumb .sep { margin:0 8px; opacity:.55; }
.crumb span[aria-current] { color:var(--ink); opacity:.8; }
.crumb p { margin:0; }
.crumb a:hover { text-decoration:underline; }
.prose { max-width:760px; margin:0 auto; font-size:18px; line-height:1.7; }
.prose h2 { font-family:var(--display); font-size:clamp(26px,3vw,36px); letter-spacing:-.03em; line-height:1.15; margin:48px 0 14px; }
.prose h3 { font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:36px 0 10px; }
.prose p, .prose ul, .prose ol { margin:0 0 20px; }
.prose a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.prose img { border-radius:20px; height:auto; }
.prose blockquote { margin:28px 0; padding-left:20px; border-left:3px solid var(--brand); font-family:var(--display); font-size:22px; }
.ad-thumb { max-width:960px; margin:0 auto 36px; } .ad-thumb img { border-radius:28px; width:100%; height:auto; }
.ad-pager { margin-top:40px; text-align:center; } .ad-pager .page-numbers { display:inline-block; padding:8px 14px; border-radius:10px; }
.ad-pager .page-numbers.current { background:var(--brand); color:#fff; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.nav-logo.has-custom { width:auto; } .nav-logo.has-custom img { height:44px; width:auto; display:block; }
.sp .sp-logo { width:min(70vw,420px); height:auto; filter:brightness(0) invert(1); }
a.pcard, a.acard, a.fart { color:inherit; text-decoration:none; }
.pv-img { padding:0; background:none; overflow:hidden; } .pv-img img { width:100%; height:100%; object-fit:cover; display:block; }
.th-img { background:none; } .th-img::before, .th-img::after { display:none; } .th-img img { width:100%; height:100%; object-fit:cover; display:block; }
.fart .th-img { min-height:340px; }
.post-hero .wrap { max-width:900px; } .post-title { margin:0; }
.post-cat { margin:0 0 14px; } .post-cat a { display:inline-block; padding:6px 14px; border-radius:980px; background:var(--brand-tint); color:var(--brand); font-weight:600; font-size:14px; }
.post-meta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:22px 0 0; color:var(--muted); font-size:15px; }
.post-thumb { max-width:1000px; margin:0 auto 48px; border-radius:28px; overflow:hidden; } .post-thumb .th { height:clamp(200px,34vw,380px); border-radius:28px; }
.post-thumb .th svg { width:48px; height:48px; left:32px; top:32px; }
.post-tags { max-width:760px; margin:32px auto 0; }
.prj-visual { max-width:1000px; margin:0 auto 56px; border-radius:32px; overflow:hidden; background:var(--paper); } .prj-visual .pv { height:clamp(240px,34vw,420px); }
.prj-visual.dkv { background:#05060b; }
.prj-caps .cap p { white-space:normal; }
.btn-ghost { background:transparent; color:var(--link); border:1px solid var(--line); } .btn-ghost:hover { background:var(--paper); box-shadow:none; }
.ad-preview-note { max-width:860px; margin:0 auto 28px; padding:14px 18px; border-radius:14px; background:#fff7e6; border:1px solid #f5d38a; color:#6b4e00; font-size:14px; line-height:1.5; text-align:left; } .ad-preview-note a { color:#8a5a00; font-weight:600; text-decoration:underline; } [data-theme="dark"] .ad-preview-note { background:#2a220f; border-color:#5c4814; color:#f2d48a; } [data-theme="dark"] .ad-preview-note a { color:#ffd97a; }
.prj-logo { margin:0 auto 18px; } .prj-logo img { max-height:52px; width:auto; }
.prj-client { margin:14px 0 0; color:var(--muted); font-size:15px; font-weight:500; }
.wcard .wc-img { overflow:hidden; border-radius:inherit; } .wcard .wc-img img { width:100%; height:100%; object-fit:cover; display:block; }
body.admin-bar .nav { top:calc(env(safe-area-inset-top,0px) + 32px); }
body.admin-bar .progress { top:calc(env(safe-area-inset-top,0px) + 100px); }
body.admin-bar .mega { top:calc(env(safe-area-inset-top,0px) + 100px); }
@media (max-width:782px) { body.admin-bar .nav { top:calc(env(safe-area-inset-top,0px) + 46px); } body.admin-bar .progress, body.admin-bar .mega { top:calc(env(safe-area-inset-top,0px) + 114px); } }