/* ==========================================================================
   CELLCO v2 — BOLD design system (matches client reference language)
   Big two-tone headlines · mono eyebrows · saturated panels · pill tags · bento
   Loaded AFTER cellco.css to override.
   ========================================================================== */
:root{
  --ink:#0A1020; --ink-2:#111a2e; --grey:#8A97AC; --line:#E4E9F1;
  --bg:#F2F5F9; --white:#fff;
  --navy:#0B1526;         /* dark panels */
  --cyan:#6FE3FF;         /* bright cyan card */
  --blue:#A9C7FF;         /* electric blue card */
  --violet:#C4B8FF;       /* violet card */
  --mint:#B8F5D8;         /* mint card */
  --lime:#D6F56A;         /* lime card */
  --hot:#1FA0E8;          /* accent */
}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:500;display:block;margin-bottom:22px}
.h-xl{font-size:clamp(42px,6.4vw,92px)}
.h-lg{font-size:clamp(34px,4.6vw,64px)}
.h-md{font-size:clamp(26px,3vw,42px)}
.dim{color:#9AA6B8}                    /* second line of two-tone headline */
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:#5D6B80;max-width:640px}
.sec{padding:clamp(70px,9vw,140px) 0}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.sec-top .lead{max-width:420px}

/* ---------- Buttons ---------- */
.b{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;border-radius:12px;padding:14px 22px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease-out-expo),background .2s,color .2s,box-shadow .2s;font-family:'Inter'}
.b .a{transition:transform .22s var(--ease-out-expo)}
.b:hover .a{transform:translate(3px,-3px)}
.b-dark{background:var(--ink);color:#fff}
.b-dark:hover{box-shadow:0 14px 32px -12px rgba(10,16,32,.6);transform:translateY(-2px)}
.b-lime{background:var(--cyan);color:var(--ink)}
.b-lime:hover{box-shadow:0 14px 34px -12px rgba(111,227,255,.8);transform:translateY(-2px)}
.b-out{background:transparent;border-color:#CBD5E3;color:var(--ink)}
.b-out:hover{border-color:var(--ink);background:#fff}

/* ---------- Pill tags ---------- */
.tags2{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.t2{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(10,16,32,.22);border-radius:99px;padding:7px 13px;color:var(--ink);white-space:nowrap}
.on-dark .t2{border-color:rgba(255,255,255,.3);color:#fff}

/* ---------- Colour cards (SIM24-style) ---------- */
.ccard{border-radius:26px;padding:30px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:440px;
  transition:transform .35s var(--ease-out-expo),box-shadow .35s}
.ccard:hover{transform:translateY(-8px);box-shadow:0 40px 70px -34px rgba(10,16,32,.45)}
.ccard .art{border-radius:20px;flex:1;display:grid;place-items:center;position:relative;overflow:hidden;margin-bottom:26px;min-height:248px}
.ccard .lbl{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:12px}
.ccard h3{font-size:clamp(26px,2.3vw,34px);margin-bottom:12px}
.ccard p{font-size:15px;line-height:1.55;opacity:.78}
.ccard .arrow-tr{position:absolute;top:26px;right:26px;font-size:17px;opacity:.45;transition:.3s}
.ccard:hover .arrow-tr{opacity:1;transform:translate(3px,-3px)}
.c-cyan{background:var(--cyan)}.c-blue{background:var(--blue)}.c-violet{background:var(--violet)}
.c-mint{background:var(--mint)}.c-lime{background:var(--lime)}
.c-dark{background:var(--navy);color:#fff}
.c-dark p,.c-dark .lbl{opacity:.72}
.c-dark h3{color:#fff}
.ccard .art.dk{background:var(--navy)}
.ccard.c-dark .art.dk{background:#15223a}

/* big radial halo behind art icons */
.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.32);animation:haloP 4s ease-in-out infinite}
.halo.s2{width:56%;background:rgba(255,255,255,.4);animation-delay:.6s}
@keyframes haloP{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.05);opacity:1}}
.bigicon{position:relative;z-index:2;font-size:74px;line-height:1}

/* ---------- Bento (One platform. Many ways to grow.) ---------- */
.bento2{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-auto-rows:minmax(210px,auto);gap:16px}
.bento2 .hero-cell{grid-row:span 2;min-height:440px}
.bcell{border-radius:24px;padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .35s var(--ease-out-expo),box-shadow .35s}
.bcell:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(10,16,32,.4)}
.bcell .lbl{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.bcell h3{font-size:clamp(19px,1.65vw,26px);margin:0 0 8px}
.bcell .hero-cell h3{font-size:clamp(26px,2.4vw,38px)}
.bcell p{font-size:13.5px;line-height:1.5;opacity:.75}
.bcell .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:18px}

/* ---------- Split (You keep / We handle) ---------- */
.split{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;position:relative}
.split .pane{border-radius:30px;padding:48px 44px 44px}
.split .plus{align-self:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:24px;z-index:3;margin:0 -28px;box-shadow:0 14px 30px -12px rgba(10,16,32,.34)}
.split h3{font-size:clamp(28px,2.8vw,42px);margin-bottom:10px}
.split .sub{font-size:15px;opacity:.72;margin-bottom:34px;line-height:1.5}
.rowitem{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.55);border-radius:16px;padding:18px 20px;margin-bottom:12px;transition:transform .25s var(--ease-out-expo),background .25s}
.rowitem:last-child{margin-bottom:0}
.rowitem:hover{transform:translateX(5px);background:rgba(255,255,255,.8)}
.pane.dark2 .rowitem{background:rgba(255,255,255,.07)}
.pane.dark2 .rowitem:hover{background:rgba(255,255,255,.13)}
.rowitem .n2{width:34px;height:34px;border-radius:11px;background:rgba(10,16,32,.85);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.pane.dark2 .rowitem .n2{background:var(--cyan);color:var(--ink)}
.rowitem b{font-size:16px;display:block;margin-bottom:2px}
.rowitem span{font-size:13px;opacity:.68;line-height:1.45}
@media(max-width:760px){.split .pane{padding:34px 26px}}
.pane.dark2{background:var(--navy);color:#fff}
.pane.dark2 h3{color:#fff}
.result{background:#fff;border-radius:20px;margin-top:16px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;border:1px solid var(--line)}
.result b{font-size:15px}
.result .rr{font-size:12.5px;opacity:.7;display:flex;gap:9px;align-items:center}
.result .rr i{width:20px;height:20px;border-radius:6px;background:var(--cyan);display:grid;place-items:center;font-style:normal;font-size:11px}

/* ---------- Step cards (Launch with clarity) ---------- */
.steps2{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;position:relative}
.step2{border-radius:22px;padding:26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.step2 .tp{display:flex;justify-content:space-between;align-items:flex-start}
.step2 .ico2{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:15px}
.step2 .cap{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.step2 b{font-size:18px;font-family:'Space Grotesk';display:block;margin-bottom:5px}
.step2 p{font-size:12.5px;opacity:.72;line-height:1.45}
.step2 .tag3{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(10,16,32,.25);border-radius:99px;padding:5px 10px;display:inline-block;margin-top:14px}
.stepArrow{align-self:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;z-index:3;margin:0 -15px;flex-shrink:0}

/* ---------- Dark band ---------- */
.dark2{background:var(--navy);color:#fff}
.dark2 h2,.dark2 h3{color:#fff}
.dark2 .dim{color:#66809E}
.dark2 .lead{color:#93A3BA}
.dark2 .kicker{color:#66809E}

/* ---------- Channel stack mockup ---------- */
.chstack{display:flex;flex-direction:column;gap:9px;width:100%;max-width:290px;padding:8px}
.chrow{display:flex;align-items:center;gap:12px;background:#1B2740;border-radius:13px;padding:12px 16px;color:#C8D6EA;font-size:15px;font-weight:600;
  transition:.4s;transform:scale(.94);opacity:.75}
.chrow .ci{width:26px;height:26px;border-radius:7px;background:#2B3A57;display:grid;place-items:center;font-size:13px}
.chrow.act{background:var(--cyan);color:var(--ink);transform:scale(1.06);box-shadow:0 14px 30px -12px rgba(111,227,255,.6);opacity:1}
.chrow.act .ci{background:rgba(10,16,32,.15)}
.chdot{position:absolute;left:8px;width:8px;height:8px;border-radius:50%;background:var(--hot)}

/* ---------- OTP screen mockup ---------- */
.otpscr{background:#fff;border-radius:18px;padding:20px;width:100%;max-width:250px;box-shadow:0 22px 50px -20px rgba(10,16,32,.5)}
.otpscr h5{font-family:'Space Grotesk';font-size:16px;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.otpscr .fine{font-size:9.5px;color:#8A97AC;line-height:1.45;margin-bottom:14px}
.otpscr .el{font-size:9.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.otpbox{display:flex;gap:6px}
.otpbox i{flex:1;aspect-ratio:3/4;border:1.5px solid #D8E0EC;border-radius:7px;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:16px;font-style:normal;color:var(--ink);animation:otpFill 5s steps(1) infinite}
.otpbox i:nth-child(1){animation-delay:.2s}.otpbox i:nth-child(2){animation-delay:.55s}.otpbox i:nth-child(3){animation-delay:.9s}
.otpbox i:nth-child(4){animation-delay:1.25s}.otpbox i:nth-child(5){animation-delay:1.6s}.otpbox i:nth-child(6){animation-delay:1.95s}

/* ---------- Conversation mockup ---------- */
.conv{width:100%;max-width:280px;display:flex;flex-direction:column;gap:9px}
.cmsg{font-size:12px;line-height:1.4;padding:11px 13px;border-radius:14px;max-width:86%;opacity:0;animation:bubCycle 7s ease-in-out infinite}
.cmsg.them{background:#F0F3F8;color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px}
.cmsg.bot{background:#2A3A57;color:#DCE7F7;align-self:flex-start;border-bottom-left-radius:4px}
.cmsg:nth-child(2){animation-delay:1.1s}.cmsg:nth-child(3){animation-delay:2.3s}.cmsg:nth-child(4){animation-delay:3.4s}
.botav{width:34px;height:34px;border-radius:10px;background:var(--hot);display:grid;place-items:center;font-size:16px;margin-bottom:4px}

/* ---------- Flow / journey mockup ---------- */
.flowmk{width:100%;max-width:290px;position:relative;padding:6px}
.fnode{background:#16233C;border:1px solid #25334C;border-radius:11px;padding:10px 13px;margin-bottom:10px;color:#C8D6EA;font-size:11.5px;display:flex;align-items:center;gap:9px;
  opacity:.55;animation:ivrLit 5s ease-in-out infinite}
.fnode:nth-child(1){animation-delay:.2s}.fnode:nth-child(2){animation-delay:1.1s}.fnode:nth-child(3){animation-delay:2s}.fnode:nth-child(4){animation-delay:2.9s}
.fnode .fi{width:22px;height:22px;border-radius:6px;background:var(--cyan);color:var(--ink);display:grid;place-items:center;font-size:11px;flex-shrink:0}
.fnode .fx{margin-left:auto;font-family:'JetBrains Mono';font-size:9px;opacity:.5}

/* ---------- Capability rows (checkmark list) ---------- */
.checks{margin-top:26px}
.chk{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin-bottom:10px;font-size:15px;font-weight:500;
  transition:transform .25s var(--ease-out-expo),border-color .25s}
.chk:hover{transform:translateX(5px);border-color:var(--hot)}
.chk .cm{width:24px;height:24px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;font-size:12px;color:var(--ink);flex-shrink:0}

/* ---------- Stat / capability chips on dark ---------- */
.capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
.cap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:24px;transition:.3s}
.cap:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.cap b{font-family:'Space Grotesk';font-size:19px;color:#fff;display:block;margin-bottom:6px}
.cap span{font-size:13px;color:#93A3BA;line-height:1.5}

/* ---------- Brand logo (real CELLCO artwork) ---------- */
.brand{display:flex;align-items:center;gap:0;text-decoration:none}
.brand .logo-img{height:56px;width:auto;display:block;transition:transform .3s var(--ease-out-expo)}
.brand:hover .logo-img{transform:scale(1.04)}
/* white version for dark grounds */
.inv,.logo-img.inv{filter:brightness(0) invert(1)}
.foot-brand .logo-img{height:86px;margin-bottom:6px}
/* Loader: light ground so the real brand logo reads in full colour,
   and it fades straight into the light site (no dark flash). */
#loader{background:#FFFFFF}
.load-logo{width:250px;height:auto;display:block;filter:none;animation:logoIn 1.2s var(--ease-out-expo)}
#loader .load-bar{background:rgba(10,16,32,.10)}
#loader .load-bar i{background:linear-gradient(90deg,#12274A,#2E7BD6 55%,#1FA0E8)}
#loader .load-word{color:#8A97AC}
@keyframes logoIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
@media(max-width:860px){.brand .logo-img{height:46px}.foot-brand .logo-img{height:70px}.load-logo{width:160px}}

/* ---------- Header override (bolder) ---------- */
header.scrolled{background:rgba(242,245,249,.88);border-bottom:1px solid var(--line)}
.nav{max-width:1280px;padding:0 28px;height:78px}
.brand{font-size:23px}
.nav-item>a{font-size:14.5px;font-weight:500;color:var(--ink);opacity:.9}
.nav-cta .btn{border-radius:11px;padding:11px 18px;font-size:14px}
.nav-cta .btn-fill{background:var(--ink);color:#fff}
.nav-cta .btn-fill:hover{box-shadow:0 12px 28px -12px rgba(10,16,32,.6)}
.nav-cta .btn-ghost{border-color:#CBD5E3}

/* ---------- Footer override ---------- */
footer{background:var(--navy)}

/* word-by-word headline reveal */
.wd{display:inline-block;will-change:transform,opacity}

/* ---------- Credentials / certifications band ---------- */
.creds{background:linear-gradient(160deg,#0B1526 0%,#12203a 55%,#0B1526 100%);position:relative;overflow:hidden}
.creds::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 82% 8%,rgba(111,227,255,.14),transparent 70%);pointer-events:none}
.creds .wrap{position:relative;z-index:2}
.credgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.credcard{background:#fff;border-radius:24px;padding:30px 30px 26px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:22px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  transition:transform .4s var(--ease-out-expo),box-shadow .4s}
.credcard:hover{transform:translateY(-8px);box-shadow:0 46px 84px -34px rgba(0,0,0,.7)}
.credlogo{min-height:120px;display:grid;place-items:center;padding:8px 4px;
  border-bottom:1px solid #E7ECF3}
.credlogo img{max-width:100%;width:100%;max-height:104px;height:auto;object-fit:contain;
  transition:transform .45s var(--ease-out-expo)}
.credcard:hover .credlogo img{transform:scale(1.05)}
.credbody .clbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8A97AC;display:block;margin-bottom:9px}
.credbody h3{font-size:24px;margin-bottom:7px;color:var(--ink)}
.credbody p{font-size:14.5px;line-height:1.5;color:#5D6B80}
/* sweep of light across the card */
.credshine{position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(111,227,255,.28),transparent);
  transform:skewX(-16deg);opacity:0}
.credcard:hover .credshine{animation:credSweep 1.1s var(--ease-out-expo) forwards}
@keyframes credSweep{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}

.credstrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.credstrip span{display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:#C3D2E6;border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:9px 16px;background:rgba(255,255,255,.04);transition:.25s}
.credstrip span:hover{border-color:var(--cyan);color:#fff;background:rgba(111,227,255,.1)}
.credstrip i{font-style:normal;width:17px;height:17px;border-radius:50%;background:var(--cyan);
  color:#0B1526;font-size:10px;display:grid;place-items:center;font-weight:700;flex-shrink:0}
@media(max-width:900px){.credgrid{grid-template-columns:1fr}.credlogo{min-height:96px}}

/* `.b` sets display:inline-flex which beats the UA's [hidden]{display:none};
   without this, hidden buttons stay visible. */
[hidden]{display:none!important}

/* ==========================================================================
   INDUSTRIES — interactive auto-cycling switcher
   ========================================================================== */
.indsw{display:grid;grid-template-columns:.82fr 1.18fr;gap:20px;align-items:stretch}
.indsw-list{display:flex;flex-direction:column;gap:8px}
.indsw-b{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;width:100%;
  font-family:'Inter';position:relative;overflow:hidden;
  transition:background .35s var(--ease-out-expo),color .35s,border-color .35s,transform .3s}
.indsw-b:hover{transform:translateX(4px);border-color:#C6D2E2}
.indsw-b .ie{font-size:21px;line-height:1;flex-shrink:0}
.indsw-b b{font-size:15.5px;font-weight:600}
.indsw-b .go2{margin-left:auto;font-size:14px;opacity:0;transition:.3s}
.indsw-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.indsw-b.on .go2{opacity:1}
.indsw-b .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan)}
.indsw-b.on .prog{animation:indProg 6s linear forwards}
@keyframes indProg{to{width:100%}}
.indsw-panel{position:relative;border-radius:26px;padding:36px;overflow:hidden;min-height:460px;
  background:linear-gradient(158deg,#12203a,#0B1526);border:1px solid rgba(255,255,255,.09);color:#fff;
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.indsw-panel .halo{background:rgba(111,227,255,.13)}
.indsw-body{position:relative;z-index:2}
.indsw-body .clbl{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:12px}
.indsw-body h3{font-size:clamp(24px,2.3vw,34px);color:#fff;margin-bottom:14px}
.indsw-body p{font-size:14.5px;line-height:1.6;color:#A9B8CE;margin-bottom:20px}
.indsw-caps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.indsw-caps span{font-size:12px;color:#D2DEEE;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);border-radius:99px;padding:7px 13px}
.indsw-links{display:flex;flex-wrap:wrap;gap:10px}
.indsw-links a{font-size:12.5px;font-weight:600;color:var(--cyan);border-bottom:1px solid rgba(111,227,255,.35);padding-bottom:2px;transition:.25s}
.indsw-links a:hover{color:#fff;border-color:#fff}
.indsw-art{position:relative;z-index:2;--acc:#6FE3FF;display:grid;place-items:center}
.indsw-fade{animation:swFade .55s var(--ease-out-expo)}
@keyframes swFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:1080px){.indsw{grid-template-columns:1fr}.indsw-panel{grid-template-columns:1fr;min-height:auto}
  .indsw-art{display:none}}

/* ==========================================================================
   DEVELOPERS — console + growth path
   ========================================================================== */
.devgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.devpath{position:relative;padding-left:4px}
.devline{position:absolute;left:25px;top:26px;bottom:26px;width:2px;background:var(--line);overflow:hidden}
.devline i{position:absolute;inset:0;display:block;background:linear-gradient(var(--hot),var(--cyan));
  transform:scaleY(0);transform-origin:top}
.devstep{display:flex;gap:20px;align-items:flex-start;padding:14px 0;position:relative}
.devstep .dot{width:52px;height:52px;border-radius:17px;flex-shrink:0;display:grid;place-items:center;
  font-size:21px;background:#fff;border:1px solid var(--line);position:relative;z-index:2;
  box-shadow:0 12px 26px -16px rgba(10,16,32,.4);transition:.35s var(--ease-out-expo)}
.devstep:hover .dot{transform:scale(1.08);border-color:var(--hot)}
.devstep .cap2{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#93A0B4;display:block;margin-bottom:5px}
.devstep b{font-size:18px;font-family:'Space Grotesk';display:block;margin-bottom:4px}
.devstep p{font-size:13.5px;color:#5D6B80;line-height:1.5}
.devstep .t2{margin-top:9px;display:inline-block}
@media(max-width:900px){.devgrid{grid-template-columns:1fr;gap:28px}}

/* ==========================================================================
   CONTACT — advanced multi-step request flow
   ========================================================================== */
.cgrid{display:grid;grid-template-columns:1.5fr .85fr;gap:26px;align-items:start}
.cpanel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px;
  box-shadow:0 40px 80px -44px rgba(10,16,32,.34);position:relative;overflow:hidden}
.cprog{height:4px;border-radius:99px;background:#EDF1F7;overflow:hidden;margin-bottom:22px}
.cbar{display:block;height:100%;width:33.33%;border-radius:99px;
  background:linear-gradient(90deg,#12274A,#2E7BD6 55%,#1FA0E8);transition:width .55s var(--ease-out-expo)}
.csteps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.cstep{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#9AA6B8;border:1px solid var(--line);border-radius:99px;padding:8px 14px;transition:.3s}
.cstep.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.cstep.done{color:var(--hot);border-color:var(--hot);background:rgba(31,160,232,.08)}
.cpane{display:none;border:0;padding:0;margin:0;animation:cpIn .5s var(--ease-out-expo)}
.cpane.on{display:block}
@keyframes cpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cpane h3{font-size:clamp(22px,2.1vw,30px);margin-bottom:8px}
.chelp{font-size:14.5px;color:#5D6B80;margin-bottom:24px;line-height:1.5}
.cpick{display:flex;flex-wrap:wrap;gap:10px}
.cpick-i input{position:absolute;opacity:0;pointer-events:none}
.cpick-i span{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;padding:12px 18px;font-size:14px;font-weight:500;
  background:#fff;transition:.25s var(--ease-out-expo)}
.cpick-i span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid #C6D0DE;transition:.25s}
.cpick-i span:hover{border-color:#B6C4D6;transform:translateY(-2px)}
.cpick-i input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.cpick-i input:checked+span::before{background:var(--cyan);border-color:var(--cyan);
  box-shadow:inset 0 0 0 3px var(--ink)}
.cpick-i input:focus-visible+span{outline:2px solid var(--hot);outline-offset:2px}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfield{position:relative;margin-bottom:16px}
.cfield input,.cfield textarea,.cfield select{width:100%;font-family:'Inter';font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 16px 10px;transition:.25s;outline:none}
.cfield select{padding:17px 16px;color:#5D6B80}
.cfield textarea{padding-top:26px;resize:vertical;min-height:120px}
.cfield label{position:absolute;left:16px;top:16px;font-size:15px;color:#93A0B4;pointer-events:none;
  transition:.22s var(--ease-out-expo)}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus{border-color:var(--hot);
  box-shadow:0 0 0 4px rgba(31,160,232,.14)}
.cfield input:focus+label,.cfield input:not(:placeholder-shown)+label,
.cfield textarea:focus+label,.cfield textarea:not(:placeholder-shown)+label{
  top:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);font-family:'JetBrains Mono'}
.cfield input.bad,.cfield textarea.bad{border-color:#E0687A;box-shadow:0 0 0 4px rgba(224,104,122,.12)}
.cconsent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#5D6B80;margin-top:6px;cursor:pointer}
.cconsent input{width:20px;height:20px;accent-color:var(--hot);flex-shrink:0;margin-top:1px}
.cerr{color:#D4495F;font-size:13.5px;margin-top:14px;font-weight:500}
.cnav{display:flex;gap:12px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.cnote{font-size:12.5px;color:#93A0B4;margin-top:20px;line-height:1.5}
.cnote code{background:#EEF2F8;border-radius:5px;padding:2px 6px;font-family:'JetBrains Mono';font-size:11.5px}
/* success */
.csuccess{text-align:left}
.cok{width:76px;height:76px;margin-bottom:22px}
.cok svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cok-c{stroke:var(--hot);stroke-width:2.5;stroke-dasharray:145;stroke-dashoffset:145;animation:okC .7s var(--ease-out-expo) forwards}
.cok-p{stroke:var(--hot);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40;animation:okP .45s var(--ease-out-expo) .55s forwards}
@keyframes okC{to{stroke-dashoffset:0}}
@keyframes okP{to{stroke-dashoffset:0}}
/* side rail */
.cside{display:flex;flex-direction:column;gap:14px}
.cside-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;transition:.3s var(--ease-out-expo)}
.cside-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(10,16,32,.3)}
.cside-card .clbl{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#93A0B4;display:block;margin-bottom:10px}
.cside-card h4{font-size:18px;margin-bottom:9px;line-height:1.25}
.cside-card p{font-size:13.5px;line-height:1.55;color:#5D6B80}
.cside .credstrip span{color:#5D6B80;border-color:var(--line);background:#fff}
.cside .credstrip i{background:var(--hot);color:#fff}
@media(max-width:980px){.cgrid{grid-template-columns:1fr}.cpanel{padding:28px}.crow{grid-template-columns:1fr}}

/* ==========================================================================
   MODULAR SOLUTIONS BENTO (Stripe "Flexible solutions" layout)
   ========================================================================== */
/* Stripe-style inline intro: bold statement + grey continuation on one line */
.mb-intro{font-family:'Space Grotesk';font-size:clamp(19px,1.7vw,25px);line-height:1.42;
  letter-spacing:-.018em;max-width:760px;margin-bottom:40px}
.mb-intro b{color:var(--ink);font-weight:700}
.mb-intro span{color:#8996AB;font-weight:500}

.mbento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.mb{--acc:#2E7BD6;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px 26px 0;position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:340px;transition:transform .4s var(--ease-out-expo),box-shadow .4s,border-color .4s}
.mb:hover{transform:translateY(-6px);box-shadow:0 40px 70px -34px rgba(10,16,32,.34);border-color:#d6dfeb}
.mb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mb-top h3{font-size:clamp(18px,1.5vw,23px);line-height:1.2;max-width:86%}
.mb-x{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);color:#93A0B4;
  display:grid;place-items:center;font-size:13px;flex-shrink:0;transition:.28s}
.mb:hover .mb-x{background:var(--ink);border-color:var(--ink);color:#fff;transform:rotate(45deg)}
.mb p{font-size:14px;line-height:1.5;color:#5D6B80;margin-top:10px;max-width:92%}
/* mockup area bleeds to card edges with a gradient wash, like Stripe */
.mb-art{margin:24px -26px 0;flex:1;min-height:150px;position:relative;overflow:hidden;
  display:grid;place-items:center;padding:24px 26px 0;
  background:linear-gradient(165deg,color-mix(in srgb,var(--acc) 15%,#fff),#fff 72%)}
.mb-art::after{content:"";position:absolute;right:-60px;top:-60px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%)}
.mb-art > *{position:relative;z-index:2}
/* spans */
.sp7{grid-column:span 7}.sp5{grid-column:span 5}.sp4{grid-column:span 4}.sp3{grid-column:span 3}
/* mockup sizing inside bento cells */
.mb-art .uicard{max-width:270px;transform:translateY(6px)}
.mb-art .inbox{max-width:300px}
.mb-art .flowmk{max-width:280px}
.mb-art .ivr{max-width:250px}
.mb-art .svgmk{width:100%;height:170px}
.mb-art .chart{width:100%}
.mb-next{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding-bottom:26px}
.mb-next .t2{border-color:rgba(10,16,32,.2);background:#fff;
  animation:devJoin 4.4s ease-in-out infinite}
.mb-next .t2:nth-child(2){animation-delay:.9s}.mb-next .t2:nth-child(3){animation-delay:1.8s}
.mb-next .t2:nth-child(4){animation-delay:2.7s}.mb-next .t2:nth-child(5){animation-delay:3.6s}
@media(max-width:1080px){
  .mbento{grid-template-columns:repeat(6,1fr)}
  .sp7,.sp5{grid-column:span 6}.sp4,.sp3{grid-column:span 3}
}
@media(max-width:680px){
  .mbento{grid-template-columns:1fr}
  .sp7,.sp5,.sp4,.sp3{grid-column:span 1}
  .mb{min-height:300px}
}

/* ==========================================================================
   BUILT FOR GLOBAL SCALE — tilted card rail (Twilio-style layout)
   ========================================================================== */
.scale-sec{overflow:hidden}
.scale-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.scale-head{max-width:720px}
.scale-head .lead{margin-top:22px;color:#93A3BA}
.b-ghost-light{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:99px;padding:14px 26px;flex-shrink:0}
.b-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}

.scalerail{margin-top:58px;overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.scaletrack{display:flex;gap:22px;width:max-content;animation:scaleMarquee 46s linear infinite}
.scalerail:hover .scaletrack{animation-play-state:paused}
@keyframes scaleMarquee{to{transform:translateX(-50%)}}

.scard{flex:0 0 312px;height:348px;border-radius:22px;position:relative;overflow:hidden;
  transform:skewX(-7deg);border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(155deg,var(--g1),var(--g2));
  transition:transform .45s var(--ease-out-expo),box-shadow .45s}
.scard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 72% 0%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 72%)}
.scard:hover{transform:skewX(-7deg) translateY(-12px);box-shadow:0 44px 74px -32px rgba(0,0,0,.75)}
.sc-ghost{position:absolute;right:-16px;top:34px;font-size:150px;line-height:1;opacity:.07;z-index:1;
  transform:skewX(7deg);pointer-events:none}
.sc-in{transform:skewX(7deg);position:relative;z-index:3;height:100%;padding:30px 32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px}
/* label sits in normal flow as one clean pill — was absolutely positioned and looked clipped */
.sc-head{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:8px 16px 8px 9px;backdrop-filter:blur(6px)}
.sc-ic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:13px;color:#fff;flex-shrink:0}
.sc-name{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:500}
.sc-foot{display:flex;flex-direction:column;gap:8px}
.sc-stat{font-family:'Space Grotesk';font-weight:700;font-size:66px;line-height:1;letter-spacing:-.045em;color:var(--acc)}
.sc-stat em{font-style:normal;font-size:40px}
.sc-cap{font-size:14.5px;color:rgba(255,255,255,.84);font-weight:500;line-height:1.4}
@media(max-width:760px){
  .scard{flex:0 0 250px;height:300px}
  .sc-stat{font-size:52px}
  .scale-top{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   OMNICHANNEL — radial channel hub
   ========================================================================== */
.hubwrap{display:grid;place-items:center;min-height:460px}
.hub2{position:relative;width:400px;height:400px;max-width:92vw;display:grid;place-items:center}
.hub2 .hubring{position:absolute;top:50%;left:50%;width:270px;height:270px;margin:-135px 0 0 -135px;
  border-radius:50%;border:1px dashed rgba(10,16,32,.16)}
.hub2 .hubring.hr2{width:390px;height:390px;margin:-195px 0 0 -195px;border-style:solid;border-color:rgba(10,16,32,.07)}
/* rotating conic "scan" behind everything */
.hub2 .hubsweep{position:absolute;top:50%;left:50%;width:390px;height:390px;margin:-195px 0 0 -195px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,160,232,.16) 26deg,transparent 60deg);
  animation:hubSpin 7s linear infinite}
@keyframes hubSpin{to{transform:rotate(360deg)}}
/* signal pulse leaving the centre */
.hub2 .hubpulse{position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:2px solid var(--hot);opacity:0;animation:hubPulse 2.2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes hubPulse{0%{transform:scale(.55);opacity:.75}100%{transform:scale(2.6);opacity:0}}
.hub2 .hubcenter{position:relative;z-index:5;width:112px;height:112px;border-radius:34px;
  background:linear-gradient(140deg,#12203a,#0B1526);color:#fff;display:grid;place-items:center;
  box-shadow:0 22px 46px -18px rgba(10,16,32,.6)}
.hub2 .hubcenter span{font-family:'Space Grotesk';font-weight:700;font-size:15px;letter-spacing:.04em}
.hub2 .ch{position:absolute;top:50%;left:50%;width:92px;height:92px;margin:-46px 0 0 -46px;z-index:4;
  border-radius:26px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 14px 30px -16px rgba(10,16,32,.42);
  transform:rotate(var(--a)) translate(152px) rotate(calc(-1 * var(--a)));
  animation:chLive 7.2s ease-in-out infinite}
.hub2 .ch i{font-style:normal;font-size:20px;line-height:1}
.hub2 .ch b{font-size:11px;font-weight:700;letter-spacing:.02em}
/* each channel lights in turn — the "live" omnichannel read */
@keyframes chLive{
  0%,100%{box-shadow:0 14px 30px -16px rgba(10,16,32,.42);border-color:var(--line);background:#fff}
  6%{box-shadow:0 18px 40px -14px rgba(31,160,232,.7);border-color:var(--hot);background:#F2FAFF}
  16%{box-shadow:0 14px 30px -16px rgba(10,16,32,.42);border-color:var(--line);background:#fff}
}
.hub2 .c1{animation-delay:0s}.hub2 .c2{animation-delay:1.2s}.hub2 .c3{animation-delay:2.4s}
.hub2 .c4{animation-delay:3.6s}.hub2 .c5{animation-delay:4.8s}.hub2 .c6{animation-delay:6s}
@media(max-width:520px){
  .hub2{width:310px;height:310px}
  .hub2 .ch{width:74px;height:74px;margin:-37px 0 0 -37px;transform:rotate(var(--a)) translate(116px) rotate(calc(-1 * var(--a)))}
  .hub2 .hubring{width:210px;height:210px;margin:-105px 0 0 -105px}
  .hub2 .hubring.hr2,.hub2 .hubsweep{width:300px;height:300px;margin:-150px 0 0 -150px}
}

/* ==========================================================================
   eSIM — NFC activation
   ========================================================================== */
.esim-sec{overflow:hidden}
.nfcpanel{position:relative;border-radius:30px;padding:40px 32px 30px;min-height:480px;
  background:linear-gradient(160deg,#12203a,#0B1526);border:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden}
.nfcglow{position:absolute;width:420px;height:420px;border-radius:50%;left:-120px;top:50%;margin-top:-210px;
  background:radial-gradient(circle,rgba(111,227,255,.20),transparent 68%);animation:haloP 5s ease-in-out infinite}
.nfcstage{position:relative;width:290px;height:230px;display:grid;place-items:center;z-index:2}
/* contactless waves */
.nfcwaves{position:absolute;right:-4px;top:50%;transform:translateY(-50%);height:210px;width:auto;overflow:visible}
.nfcwaves .nw{fill:none;stroke:var(--cyan);stroke-width:7;stroke-linecap:round;opacity:0;
  animation:nfcPulse 2.4s cubic-bezier(.22,1,.36,1) infinite}
.nfcwaves .n2{animation-delay:.22s}
.nfcwaves .n3{animation-delay:.44s}
.nfcwaves .n4{animation-delay:.66s}
@keyframes nfcPulse{0%{opacity:0}22%{opacity:.95}100%{opacity:0}}
/* the eSIM card itself */
.nfccard{position:relative;width:168px;height:126px;border-radius:20px;overflow:hidden;z-index:3;
  background:linear-gradient(150deg,#22314f,#0d1729);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.7);animation:nfcTap 2.4s ease-in-out infinite}
@keyframes nfcTap{0%,100%{transform:translateX(0) scale(1)}22%{transform:translateX(-7px) scale(1.035)}}
.nfccard .pads{position:absolute;top:22px;left:22px;width:62px;height:70px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:6px}
.nfccard .pads i{border-radius:4px;background:var(--cyan);opacity:.35;animation:padLit 2.4s ease-in-out infinite}
.nfccard .pads i:nth-child(2){animation-delay:.12s}.nfccard .pads i:nth-child(3){animation-delay:.24s}
.nfccard .pads i:nth-child(4){animation-delay:.36s}.nfccard .pads i:nth-child(5){animation-delay:.48s}
.nfccard .pads i:nth-child(6){animation-delay:.6s}
.nfccard .sweep{position:absolute;top:-30%;left:-45%;width:45%;height:170%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);animation:esimSweep 2.4s ease-in-out infinite}
.nfctag{position:absolute;right:16px;bottom:14px;font-family:'JetBrains Mono';font-size:11px;
  letter-spacing:.18em;color:rgba(255,255,255,.65)}
.nfcok{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) translateY(8px);z-index:5;
  font-size:12px;font-weight:700;color:#0B1526;background:var(--cyan);padding:8px 16px;border-radius:99px;
  white-space:nowrap;box-shadow:0 12px 26px -10px rgba(111,227,255,.7);opacity:0;
  animation:nfcOk 2.4s ease-in-out infinite}
@keyframes nfcOk{0%,45%{opacity:0;transform:translateX(-50%) translateY(8px)}
  60%,88%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0}}
.nfcchips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;position:relative;z-index:2}
.nfcchips span{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#C3D2E6;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:8px 14px;
  background:rgba(255,255,255,.05);animation:devJoin 4.2s ease-in-out infinite}
.nfcchips span:nth-child(2){animation-delay:1.4s}.nfcchips span:nth-child(3){animation-delay:2.8s}
.esim-sec .chk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:#E6EDF7}
.esim-sec .chk:hover{border-color:var(--cyan);background:rgba(111,227,255,.1)}
.esim-sec .chk .cm{background:var(--cyan);color:#0B1526}
.esim-sec .uselbl2{color:#7E8FA8}
@media(max-width:980px){.nfcpanel{min-height:400px}.nfcstage{width:240px}}

/* ---------- Product page v2 ---------- */
.hero2{padding:150px 0 90px;position:relative;overflow:hidden}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.heroBtns{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.heroPanel{--acc:#6FE3FF;background:var(--navy);border-radius:28px;padding:34px;display:grid;place-items:center;min-height:440px;position:relative;overflow:hidden}
.heroPanel .halo{background:rgba(111,227,255,.09)}
.heroPanel .stage{position:relative;z-index:2;display:grid;place-items:center;width:100%}

/* saturated panel holding a live mockup */
.bigpanel{--acc:#0B1526;border-radius:28px;padding:36px;min-height:430px;display:grid;place-items:center;position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out-expo),box-shadow .4s}
.bigpanel:hover{transform:translateY(-6px);box-shadow:0 44px 80px -38px rgba(10,16,32,.45)}
.bigpanel .stage{position:relative;z-index:2;display:grid;place-items:center;width:100%;animation:mkFloat 7s ease-in-out infinite}
.bigpanel .halo{background:rgba(255,255,255,.34)}
.bigpanel .plabel{position:absolute;bottom:18px;left:22px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;z-index:3}
.bigpanel.c-dark .plabel{color:#fff}
.bigpanel .uicard,.bigpanel .otpscr{box-shadow:0 26px 54px -22px rgba(10,16,32,.45)}
/* scale mockups up so they fill the panel like the reference */
.bigpanel .phone,.heroPanel .phone{transform:scale(1.06)}
.bigpanel .esim,.heroPanel .esim{transform:scale(2.1)}
.bigpanel .bloom,.heroPanel .bloom{transform:scale(1.65)}
.bigpanel .aithink,.heroPanel .aithink{transform:scale(1.45)}
.bigpanel .otpscr,.bigpanel .uicard,.heroPanel .uicard{transform:scale(1.2)}
.bigpanel .conv,.heroPanel .conv{transform:scale(1.1)}
.bigpanel .gridmk,.bigpanel .inbox,.bigpanel .ivr,.bigpanel .funnel,.bigpanel .kb,
.bigpanel .flowmk,.bigpanel .chstack,.bigpanel .offload,.bigpanel .apicards,.bigpanel .trx{transform:scale(1.18)}
.bigpanel .tmap,.bigpanel .venue{transform:scale(1.25)}
.bigpanel .hub,.bigpanel .handoff{transform:scale(1.22)}
.bigpanel .wf{height:120px}.bigpanel .wf i{width:7px}
.bigpanel .svgmk,.heroPanel .svgmk{transform:scale(1.15)}
/* light mockup surfaces need contrast on saturated panels */
.bigpanel .fnode{background:rgba(10,16,32,.88);border-color:rgba(255,255,255,.14)}
.bigpanel .chrow{background:rgba(10,16,32,.86)}
.bigpanel .bub{background:rgba(10,16,32,.86)}
.bigpanel .phone{box-shadow:0 30px 64px -20px rgba(10,16,32,.55)}

.svc2{padding:clamp(56px,7vw,110px) 0}
.svc2:nth-child(even){background:rgba(255,255,255,.55)}
.uselbl2{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin:30px 0 14px}
.note2{font-size:13.5px;color:#6B7A90;margin-top:16px;line-height:1.55}

/* sticky sub-nav v2 */
.subnav2{position:sticky;top:78px;z-index:80;background:rgba(242,245,249,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subnav2 .inner{display:flex;gap:7px;max-width:1280px;margin:0 auto;padding:14px 28px;overflow-x:auto;scrollbar-width:none}
.subnav2 .inner::-webkit-scrollbar{display:none}
.subnav2 a{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:#6B7A90;padding:9px 15px;border-radius:99px;white-space:nowrap;border:1px solid transparent;transition:.22s}
.subnav2 a:hover{color:var(--ink);border-color:#CBD5E3}
.subnav2 a.active{background:var(--ink);color:#fff}

.indrow2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.indrow2 .indc{border-radius:20px;padding:24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s var(--ease-out-expo)}
.indrow2 .indc:hover{transform:translateY(-6px)}
.indrow2 .ie{font-size:26px}
.indrow2 h4{font-size:19px;margin:12px 0 0}

@media(max-width:980px){
  .grid2{grid-template-columns:1fr;gap:40px}
  .heroPanel{min-height:340px;order:-1}
  .svc2 .grid2 .reveal:last-child{order:-1}
  .indrow2{grid-template-columns:1fr 1fr}
  .subnav2{top:70px}
}
@media(max-width:640px){.indrow2{grid-template-columns:1fr}.bigpanel{min-height:340px;padding:24px}}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .bento2{grid-template-columns:1fr 1fr}
  .bento2 .hero-cell{grid-row:span 1;min-height:340px}
  .steps2{grid-template-columns:1fr 1fr;gap:14px}
  .stepArrow{display:none}
  .capgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .bento2,.capgrid{grid-template-columns:1fr}
  .steps2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:14px}
  .split .plus{margin:-23px auto;transform:rotate(90deg)}
  .ccard{min-height:auto}
  .sec-top{flex-direction:column;align-items:flex-start}
}