@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-latin-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-arabic-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0C1D39;--navy2:#1A3366;--azure:#0A6EBD;--sky:#8FB0F2;--cyan:#3EC6E4;
  --bg:#F5F7FB;--bg2:#FFFFFF;--card:#FFFFFF;--ink:#0C1D39;--ink2:#46536B;--mute:#7C879C;--line:#E2E7F0;--soft:#E8EDF6;
  --brand:#0C1D39;--accent:#0A6EBD;--accent-ink:#fff;--good:#15803D;--good-s:rgba(21,128,61,.1);--warn:#B45309;--warn-s:rgba(180,83,9,.1);--bad:#C2410C;--bad-s:rgba(194,65,12,.1);
  --band1:#0C1D39;--band2:#06101F;--band-ink:#fff;
  --sh:0 1px 2px rgba(12,29,57,.06),0 8px 24px -8px rgba(12,29,57,.12);
  --sh-lg:0 2px 6px rgba(12,29,57,.06),0 30px 60px -20px rgba(12,29,57,.28);
  --r:16px;--r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* app screen tokens */
  --s-bg:#F5F7FB;--s-card:#fff;--s-ink:#0C1D39;--s-mute:#7C879C;--s-line:#E6EAF2;--s-side:#0C1D39;--s-bar:#DCE6F6;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#080D18;--bg2:#0B1222;--card:#0F1729;--ink:#E9EEF8;--ink2:#A8B5CC;--mute:#76839C;--line:#1B2640;--soft:#16213A;
  --brand:#8FB0F2;--accent:#3E9BE8;--accent-ink:#fff;--good:#4ADE80;--good-s:rgba(74,222,128,.12);--warn:#F5A524;--warn-s:rgba(245,165,36,.12);--bad:#FB7A50;--bad-s:rgba(251,122,80,.12);
  --band1:#0B1630;--band2:#050912;
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.5);
  --sh-lg:0 2px 6px rgba(0,0,0,.4),0 30px 60px -20px rgba(0,0,0,.7);
  --s-bg:#0A1120;--s-card:#111B30;--s-ink:#E9EEF8;--s-mute:#7E8BA4;--s-line:#1D2944;--s-side:#060B16;--s-bar:#1E2D4D;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font-family:"Plex Arabic","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),fill .45s,stroke .45s!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,svg{display:block}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--card);padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
em{font-style:normal;font-size:.78em;padding:1px 8px;border-radius:99px;background:rgba(10,110,189,.12);color:var(--accent);font-weight:500;white-space:nowrap}
.band em{background:rgba(143,176,242,.16);color:var(--sky)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 8px 24px -8px rgba(10,110,189,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-p:hover{background:#0B7DD6;box-shadow:0 12px 30px -8px rgba(10,110,189,.85)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-soft{background:var(--soft);color:var(--ink)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{height:54px;padding:0 28px;font-size:17px}
.btn-sm{height:38px;padding:0 16px;font-size:14.5px}
.arr{display:inline-block;transition:transform .2s}
[dir=rtl] .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translate(-2px,-2px)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translate(-2px,-2px)}

/* nav */
.nav{position:fixed;top:12px;inset-inline:0;z-index:50;padding:0 16px;pointer-events:none}
.nav-in{pointer-events:auto;max-width:1120px;margin:0 auto;height:60px;display:flex;align-items:center;gap:16px;padding:0 10px 0 10px;padding-inline-start:18px;border-radius:999px;background:rgba(12,29,57,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.1);color:#fff;transition:background .3s,box-shadow .3s,border-color .3s}
.nav.solid .nav-in{background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--ink);border-color:var(--line);box-shadow:var(--sh)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;flex-shrink:0}
.brand-ic{width:30px;height:30px;color:currentColor}
.nav .brand-ic{color:#fff}
.nav.solid .brand-ic{color:var(--brand)}
.links{display:flex;gap:4px;margin-inline-start:auto}
.links a{padding:8px 14px;border-radius:99px;font-size:15px;opacity:.82;transition:opacity .2s,background .2s}
.links a:hover{opacity:1;background:rgba(127,150,190,.14)}
.nav-act{display:flex;align-items:center;gap:8px;margin-inline-start:12px}
.lang{height:38px;min-width:42px;padding:0 10px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:transparent;font-size:14px;font-weight:700}
.nav.solid .lang{border-color:var(--line)}
/* sun / moon switch */
.theme{border:0;background:transparent;padding:0;height:38px;display:flex;align-items:center}
.tt-track{position:relative;width:64px;height:34px;border-radius:99px;background:linear-gradient(180deg,#9CC9F5,#62A6E8);box-shadow:inset 0 1px 3px rgba(0,0,0,.25);overflow:hidden;transition:background .5s var(--ease)}
.tt-track::before,.tt-track::after{content:"";position:absolute;border-radius:50%;background:#fff;transition:opacity .5s,transform .6s var(--ease)}
.tt-track::before{width:3px;height:3px;top:9px;inset-inline-start:14px;opacity:0;box-shadow:8px 10px 0 -.5px #fff,16px 2px 0 0 #fff}
.tt-track::after{width:22px;height:8px;border-radius:8px;bottom:6px;inset-inline-start:8px;opacity:.85;background:rgba(255,255,255,.85)}
.tt-knob{position:absolute;top:3px;inset-inline-end:3px;width:28px;height:28px;border-radius:50%;background:#FFD45C;box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 -2px 3px rgba(0,0,0,.08);transition:inset-inline-end .55s var(--ease),background .5s,transform .55s var(--ease);display:grid;place-items:center}
.tt-knob svg{position:absolute;width:18px;height:18px;transition:opacity .4s,transform .55s var(--ease)}
.tt-knob .sun{fill:#F59E0B;stroke:#F59E0B;stroke-width:1.8}
.tt-knob .moon{fill:#E5ECFA;opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme=dark] .tt-track{background:linear-gradient(180deg,#14213D,#0A1226)}
[data-theme=dark] .tt-track::before{opacity:1}
[data-theme=dark] .tt-track::after{opacity:0;transform:translateY(10px)}
[data-theme=dark] .tt-knob{inset-inline-end:33px;background:#C9D6F2;transform:rotate(-360deg)}
[data-theme=dark] .tt-knob .sun{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme=dark] .tt-knob .moon{opacity:1;transform:none;fill:#8A9BC2}
.theme:hover .tt-knob{transform:scale(1.06)}
[data-theme=dark] .theme:hover .tt-knob{transform:rotate(-360deg) scale(1.06)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* bands (dark sections) */
.band{background:radial-gradient(120% 80% at 50% 0%,var(--band1) 0%,var(--band2) 70%);color:var(--band-ink);position:relative;overflow:hidden;isolation:isolate}
.glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none}
.g1{width:680px;height:680px;top:-260px;inset-inline-start:-120px;background:rgba(10,110,189,.45)}
.g2{width:560px;height:560px;top:30%;inset-inline-end:-200px;background:rgba(62,198,228,.18)}
.g3{width:720px;height:420px;top:-120px;left:50%;transform:translateX(-50%);background:rgba(10,110,189,.4)}
.grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 80%)}

/* hero */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:14.5px;color:#C9D6EE}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
h1{margin:0;font-weight:700;font-size:clamp(40px,6.6vw,86px);line-height:1.14;letter-spacing:-.01em}
h1 span{display:block}
h1 .l2,.final .l2{background:linear-gradient(90deg,#8FB0F2,#3EC6E4 50%,#8FB0F2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;padding-bottom:.08em}
@keyframes shine{to{background-position:-200% 0}}
[lang=en] h1{letter-spacing:-.03em}
/* the value sentence leads; the amount sits inside it, accented, not giant */
.hook{margin:28px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px}
.hook-s{margin:0;font-size:clamp(22px,2.15vw,29px);font-weight:600;line-height:1.5;color:#fff;text-wrap:balance}
[lang=en] .hook-s{letter-spacing:-.01em;line-height:1.38}
.hook-amt{white-space:nowrap;font-weight:700;color:#8FB0F2;padding:0 .18em;margin:0 .04em;border-radius:.3em;background:linear-gradient(transparent 58%,rgba(10,110,189,.38) 58%,rgba(10,110,189,.38) 92%,transparent 92%)}
.hook-amt .num{font-size:1.08em;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hook-ex{margin:0;display:inline-flex;align-items:center;gap:9px;color:#B4C3DE;font-size:15px}
.hook-ex em{font-style:normal;font-size:12.5px;font-weight:600;color:#8FB0F2;padding:2px 10px;border-radius:99px;background:rgba(143,176,242,.14);border:1px solid rgba(143,176,242,.28)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.trust{list-style:none;display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin:26px 0 0;padding:0;color:#9FB0CE;font-size:14.5px}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(74,222,128,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%234ADE80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.scroll-hint{position:absolute;bottom:26px;transition:opacity .4s;left:50%;transform:translateX(-50%);width:26px;height:40px;border:2px solid rgba(255,255,255,.3);border-radius:14px;display:none}
.scroll-hint span{position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:sh 1.8s infinite}
@keyframes sh{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* hero: hook + the live dashboard beside it (v2's screen, no laptop) */
.hero{position:relative;padding:118px 0 72px;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:clip;background:radial-gradient(120% 90% at 50% 0%,var(--band1) 0%,var(--band2) 75%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:56px;width:100%}
.hero-copy{text-align:start}
.hero-copy .hook{align-items:flex-start}
.hero-copy .hero-cta,.hero-copy .trust{justify-content:flex-start}
h1{font-size:clamp(40px,4.4vw,68px)}
.hero-dev{position:relative;padding:18px 0}
.hero-dev::before{content:"";position:absolute;inset:-10% -8%;background:radial-gradient(closest-side,rgba(143,176,242,.22),rgba(10,110,189,.10) 55%,transparent 75%);pointer-events:none}
.dash{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#0F1729;border:1px solid rgba(143,176,242,.18);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 6px rgba(143,176,242,.05);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dash-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#0b1222;border-bottom:1px solid rgba(143,176,242,.12)}
.dash-bar i{width:9px;height:9px;border-radius:50%;background:#2a3858}
.dash-bar span{margin-inline-start:auto;margin-inline-end:auto;font-size:11px;color:#6E7FA0}
.dash-screen{background:var(--s-bg)}
.hchip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(15,28,56,.72);border:1px solid rgba(143,176,242,.22);color:#DCE6F6;font-size:14px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.hchip b{color:#fff;font-weight:700}
.hchip em{font-style:normal;font-size:11.5px;color:#8FB0F2;padding:1px 7px;border-radius:99px;background:rgba(143,176,242,.12)}
.hchip-a{bottom:-2%;inset-inline-start:6%}
.hchip-a b{color:#4ADE80}
.hchip-a .pulse{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite}
.hchip-b{top:0;inset-inline-end:-3%}
.hchip-a.bump b{animation:bump .6s var(--ease)}
@keyframes bump{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}
.hchip{z-index:3}
@media (max-width:1020px){
  .hero{padding:108px 0 56px;min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{text-align:center}
  .hero-copy .hook{align-items:center}
  .hero-copy .hero-cta,.hero-copy .trust{justify-content:center}
  .hero-dev{max-width:640px;margin:0 auto;width:100%}
  h1{font-size:clamp(38px,9vw,64px)}
}

/* the sensor: front-facing, centred, big; the printed mark opens like an aperture and the value comes out */
.sx{position:relative;height:calc(100svh + 260vh)}
.sx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.sx-bg{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 58%,#FFFFFF 0%,#E9F0FA 45%,#D6E2F3 100%)}
[data-theme=dark] .sx-bg{background:radial-gradient(70% 60% at 50% 58%,#1A2D52 0%,#0D1A33 48%,#060C19 100%)}
.sx-head{position:absolute;z-index:2;left:0;right:0;top:calc(84px + 2.5svh);text-align:center;padding:0 20px}
.sx-head .kicker{margin:0 0 6px}
.sx-head h2{margin:0;font-size:clamp(26px,3.3vw,46px);line-height:1.18;color:var(--ink)}
.sx-head h2 .dim{color:var(--mute)}
.sx-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:clamp(120px,17svh,190px)}
.sx-stage{z-index:1}
.sx-dev{position:relative;width:min(78vw,calc((100svh - 250px) * 2.255),1500px);aspect-ratio:2379/1055;transform-origin:var(--ox) var(--oy);--ox:40.353%;--oy:47.109%;will-change:transform}
.sensor-img{position:relative;display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.sx-shadow{position:absolute;left:5%;right:5%;bottom:-7%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(12,29,57,.30),rgba(12,29,57,.10) 55%,transparent 100%)}
[data-theme=dark] .sx-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,transparent 100%)}
[data-theme=dark] .sx-dev::before{content:"";position:absolute;inset:-14% -8%;background:radial-gradient(closest-side,rgba(143,176,242,.22),transparent 75%);pointer-events:none}
.sx-portal{position:absolute;left:var(--ox);top:var(--oy);width:4.4%;aspect-ratio:1;margin:-2.2% 0 0 -2.2%;border-radius:50%;opacity:0;transform:scale(0);
  background:radial-gradient(closest-side,#1f4f92 0%,#143566 22%,#0E2245 45%,#0A1A36 66%,#0C1D39 84%,#2B7FD0 95%,rgba(62,198,228,.55) 98%,rgba(62,198,228,0) 100%)}
.sx-irisw{position:absolute;z-index:4;left:0;top:0;width:10px;height:10px;transform-origin:50% 50%;pointer-events:none;will-change:transform}
.sx-iris{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sx-iris .bl{transform-box:view-box;transform-origin:17.3px 16.9px}
.sx-out{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:92px 24px 32px;pointer-events:none;color:#fff}
.sx-out>*{opacity:0}
.sx-out.shown{pointer-events:auto}
.sx-tag{margin:0;font-size:clamp(38px,5.6vw,84px);line-height:1.1;letter-spacing:-.01em;color:#fff}
.sx-tag .l2{background:linear-gradient(90deg,#8FB0F2,#3EC6E4);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-sub{margin:12px 0 0;color:#B9C7E2;font-size:clamp(16px,1.5vw,20px)}
.sx-out .sx-vals{opacity:1;list-style:none;margin:clamp(22px,4.5svh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:min(1120px,100%)}
.sx-v{opacity:0;display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:8px;padding:clamp(20px,3.2svh,32px) 30px;min-height:clamp(120px,19svh,190px);justify-content:center;border-radius:20px;background:linear-gradient(160deg,rgba(143,176,242,.16),rgba(143,176,242,.05));border:1px solid rgba(143,176,242,.24);box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.sx-v .k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--c,#8FB0F2)}
.sx-v .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#8FB0F2);box-shadow:0 0 10px var(--c,#8FB0F2)}
.sx-v .s{display:block;font-size:clamp(20px,1.85vw,27px);line-height:1.42;font-weight:600;color:#fff;text-wrap:balance}
.sx-v .s b{font-weight:700;color:var(--c,#8FB0F2);white-space:nowrap}
.sx-v p{margin:0;color:#B9C8E2;font-size:clamp(14px,1.15vw,16.5px);line-height:1.5}
.sx-v em{font-style:normal;font-size:11.5px;color:#8FB0F2;padding:1px 8px;border-radius:99px;background:rgba(143,176,242,.14);margin-inline-start:6px;vertical-align:2px}
.sx-v[data-c=warn]{--c:#F5A524}.sx-v[data-c=good]{--c:#4ADE80}.sx-v[data-c=acc]{--c:#5FB4F5}.sx-v[data-c=cyan]{--c:#3EC6E4}
.sx-hint{border-color:rgba(12,29,57,.28);z-index:3}
.sx-hint span{background:#0C1D39}
[data-theme=dark] .sx-hint{border-color:rgba(255,255,255,.3)}[data-theme=dark] .sx-hint span{background:#fff}
@media (max-width:640px){
  .sx{height:calc(100svh + 225vh)}
  .sx-head{top:calc(84px + 3svh)}
  .sx-head h2{font-size:27px}
  .sx-stage{padding-top:60px}
  .sx-dev{width:calc(100vw - 14px)}
  .sx-note{display:block}
  .sx-out{padding:78px 14px 20px}
  .sx-tag{font-size:42px}
  .sx-sub{font-size:15px;max-width:320px;margin-top:8px}
  .sx-out .sx-vals{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
  .sx-v{padding:14px 13px;border-radius:16px;gap:4px;min-height:0;justify-content:flex-start}
  .sx-v .s{font-size:15.5px;line-height:1.4}
  .sx-v p{font-size:12.5px;line-height:1.4}
  .sx-v em{display:inline-block;margin:4px 0 0;font-size:10.5px}
  .sx-v .k{font-size:12px}
}
@media (max-width:640px) and (max-height:700px){.sx-v p{font-size:12px}.sx-tag{font-size:34px}.sx-out .sx-vals{margin-top:14px}}
.sx-note{display:none;position:absolute;z-index:2;left:0;right:0;bottom:calc(64px + 4svh);text-align:center;padding:0 24px;color:var(--ink2);font-size:15.5px;line-height:1.6}
.static .sx-note{position:relative;bottom:auto;margin-top:34px}
/* static: reduced motion, or a screen too short for the stage */
.static .sx{height:auto;padding:110px 0 80px;background:var(--bg)}
.static .sx-pin{position:relative;height:auto;overflow:visible;contain:none}
.static .sx-head{position:relative;top:auto}
.static .sx-stage{position:relative;inset:auto;padding:36px 0 0}
.static .sx-portal,.static .sx-hint{display:none}
.static .sx-out{position:relative;inset:auto;margin:64px auto 0;width:min(1060px,calc(100% - 36px));border-radius:28px;padding:48px 24px;background:radial-gradient(90% 90% at 50% 0%,#173a6e,#0C1D39 70%)}
.static .sx-out>*,.static .sx-v{opacity:1}


/* scaled screens */
.fit{position:relative;width:100%}
.fit-in{position:absolute;top:0;left:0;transform-origin:0 0}

/* ===== app screen styles (used inside the hero dashboard and the story device) ===== */
.app{width:100%;height:100%;display:flex;background:var(--s-bg);color:var(--s-ink);font-size:14px;line-height:1.45;text-align:start}
.app .side{width:64px;background:var(--s-side);display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0;flex-shrink:0}
.app .side svg{width:28px;height:28px;color:#fff}
.app .side i{display:block;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07)}
.app .side i.on{background:var(--azure);box-shadow:0 4px 12px -2px rgba(10,110,189,.8)}
.app .main{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.app .top{display:flex;align-items:center;justify-content:space-between}
.app .top b{font-size:17px}
.app .top small{color:var(--s-mute);font-size:12.5px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#15803D;background:rgba(21,128,61,.1);padding:3px 10px;border-radius:99px}
[data-theme=dark] .live{color:#4ADE80;background:rgba(74,222,128,.1)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
.c{background:var(--s-card);border:1px solid var(--s-line);border-radius:14px;padding:14px}
.hc{background:linear-gradient(135deg,#0C1D39,#163061);color:#fff;border:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px}
[data-theme=dark] .hc{background:linear-gradient(135deg,#13254A,#0E1B38);box-shadow:0 0 0 1px #22345A inset}
.hc .k{font-size:13px;color:#A9BCE0}
.hc .v{font-size:38px;font-weight:700;line-height:1.1}
.hc .v small{font-size:15px;font-weight:500;color:#C9D6EE}
.hc .s{font-size:13px;color:#C9D6EE;margin-top:4px}
.hc .act{background:#fff;color:#0C1D39;border-radius:99px;padding:8px 16px;font-weight:700;font-size:13px;white-space:nowrap}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kp .c{padding:12px}
.kp .k{font-size:12px;color:var(--s-mute)}
.kp .v{font-size:22px;font-weight:700;line-height:1.3}
.kp .d{font-size:11.5px;font-weight:700;color:#15803D}
[data-theme=dark] .kp .d{color:#4ADE80}
.row2{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;flex:1;min-height:0}
.ct{font-size:13px;font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.ct small{font-weight:500;color:var(--s-mute)}
.chart{width:100%;height:150px}
.chart .gl{stroke:var(--s-line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--azure);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .chart .ln{stroke:#5AA9F0}
.chart .ar{fill:url(#ga)}
.chart .ln2{fill:none;stroke:var(--s-mute);stroke-width:1.6;stroke-dasharray:4 4;opacity:.6}
.ins{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--s-line);font-size:12.5px}
.ins:last-child{border:0}
.ins .ib{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:13px;font-weight:700}
.ib.w{background:rgba(180,83,9,.12);color:#B45309}.ib.g{background:rgba(21,128,61,.12);color:#15803D}.ib.b{background:rgba(10,110,189,.12);color:#0A6EBD}.ib.r{background:rgba(194,65,12,.12);color:#C2410C}
[data-theme=dark] .ib.w{color:#F5A524}[data-theme=dark] .ib.g{color:#4ADE80}[data-theme=dark] .ib.b{color:#6CB4F5}[data-theme=dark] .ib.r{color:#FB7A50}
.ins b{display:block;font-size:13px}
.ins span{color:var(--s-mute)}
.pos{color:#15803D;font-weight:700}.neg{color:#C2410C;font-weight:700}
[data-theme=dark] .pos{color:#4ADE80}[data-theme=dark] .neg{color:#FB7A50}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:99px;background:rgba(10,110,189,.1);color:#0A6EBD;font-weight:500}
[data-theme=dark] .tag{color:#8FB0F2;background:rgba(143,176,242,.12)}

/* story panes */
.pane{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .55s var(--ease),transform .65s var(--ease);pointer-events:none}
.pane.on{opacity:1;transform:none;pointer-events:auto}
.pane .app .main{padding:16px 18px;gap:10px}
.big{font-size:34px;font-weight:700;line-height:1.1}
.big small{font-size:14px;font-weight:500;color:var(--s-mute)}
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:8px}
.bars .bar{flex:1;display:flex;flex-direction:column-reverse;border-radius:5px 5px 2px 2px;overflow:hidden;position:relative;height:0;transition:height .9s var(--ease)}
.pane.on .bars .bar{height:var(--h)}
.bars .bar i{display:block;background:var(--azure)}
.bars .bar u{display:block;flex:1;background:var(--s-bar)}
.bars .bar.hot u{background:repeating-linear-gradient(-45deg,rgba(194,65,12,.35) 0 4px,rgba(194,65,12,.18) 4px 8px)}
.bars .bar.hot i{background:#C2410C}
.bx{display:flex;justify-content:space-between;font-size:10.5px;color:var(--s-mute);margin-top:4px;direction:ltr}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--s-mute)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.tip{position:absolute;background:var(--s-ink);color:var(--s-card);font-size:12px;padding:7px 10px;border-radius:10px;box-shadow:0 8px 20px -6px rgba(0,0,0,.35);white-space:nowrap;opacity:0;transform:translateY(6px);transition:all .5s .7s var(--ease)}
.pane.on .tip{opacity:1;transform:none}
.heat{display:grid;grid-template-columns:44px repeat(9,1fr);gap:4px;font-size:10.5px;color:var(--s-mute)}
.heat span{display:flex;align-items:center}
.heat i{height:22px;border-radius:5px;background:var(--azure);opacity:var(--o);transform:scale(.6);transition:transform .5s var(--ease),opacity .5s}
.pane.on .heat i{transform:none}
.heat i.lo{background:#C2410C}.heat i.hi{background:#B45309}
.heat i.ring{outline:2px solid #B45309;outline-offset:1px}
.heat i.ring2{outline:2px solid #15803D;outline-offset:1px;background:#15803D}
.dec{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;font-weight:700;font-size:14px}
.dec.yes{background:rgba(21,128,61,.12);color:#15803D}.dec.no{background:rgba(194,65,12,.1);color:#C2410C}
[data-theme=dark] .dec.yes{color:#4ADE80}[data-theme=dark] .dec.no{color:#FB7A50}
.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mets div{background:var(--s-bg);border-radius:10px;padding:8px 10px}
.mets b{display:block;font-size:19px}
.mets span{font-size:11px;color:var(--s-mute)}
.stream{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 0}
.stream .sb{flex:1;height:8px;border-radius:99px;background:var(--s-line);overflow:hidden}
.stream .sb i{display:block;height:100%;border-radius:99px;width:0;transition:width 1s .2s var(--ease)}
.pane.on .stream .sb i{width:var(--w)}
.stream .sl{width:150px;flex-shrink:0}
.wa{background:#ECE5DD;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
[data-theme=dark] .wa{background:#0B141A}
.wa-h{background:#075E54;color:#fff;display:flex;align-items:center;gap:8px;padding:8px 12px;font-weight:700;font-size:13px}
[data-theme=dark] .wa-h{background:#1F2C34}
.wa-h .av{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.wa-h .av svg{width:18px;height:18px;color:#0C1D39}
.wa-b{padding:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.msg{max-width:80%;padding:6px 10px;border-radius:10px;background:#fff;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.08);opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
[data-theme=dark] .msg{background:#202C33;color:#E9EDEF}
.msg.me{align-self:flex-end;background:#DCF8C6}
[data-theme=dark] .msg.me{background:#005C4B}
.pane.on .msg{opacity:1;transform:none}
.pane.on .msg:nth-child(2){transition-delay:.5s}.pane.on .msg:nth-child(3){transition-delay:1.1s}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:99px;background:var(--s-card);border:1px solid var(--s-line);font-weight:500}
.chip.ok::before{content:"✓";color:#15803D;font-weight:700}
[data-theme=dark] .chip.ok::before{color:#4ADE80}
.door{position:relative;height:150px;border-radius:12px;background:var(--s-bg);overflow:hidden;border:1px dashed var(--s-line)}
.door .ln{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--azure);box-shadow:0 0 12px var(--azure)}
.door .p{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--s-mute);opacity:.7;top:var(--y);animation:walk 4.5s linear infinite;animation-delay:var(--d)}
@keyframes walk{from{left:-5%}to{left:105%}}
.door .cnt{position:absolute;top:10px;inset-inline-end:10px;font-weight:700;font-size:13px;background:var(--s-card);padding:4px 10px;border-radius:99px;border:1px solid var(--s-line)}
.badges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.badges div{background:var(--s-card);border:1px solid var(--s-line);border-radius:12px;padding:10px;font-size:12px;text-align:center}
.badges b{display:block;font-size:14px;margin-bottom:2px}
.zone{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:4px 0}
.zone .zn{width:118px;flex-shrink:0}
.zone .sb{flex:1;height:14px;border-radius:6px;background:var(--s-line);overflow:hidden}
.zone .sb i{display:block;height:100%;background:var(--azure);width:0;transition:width 1s var(--ease)}
.pane.on .zone .sb i{width:var(--w)}
.zone.low .sb i{background:#C2410C}
.zone .zv{width:36px;text-align:end;font-weight:700;direction:ltr}

/* section heads */
section{position:relative}
.sec-head{max-width:760px;margin:0 auto 48px}
.sec-head.center{text-align:center}
.kicker{margin:0 0 10px;color:var(--accent);font-weight:700;font-size:15px;letter-spacing:.02em}
h2{margin:0;font-size:clamp(32px,4.6vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
h2 .dim{color:var(--mute)}
.band h2 .dim{color:rgba(255,255,255,.45)}
.lead{margin:16px auto 0;color:var(--ink2);font-size:18px;max-width:620px}

/* segmented audience toggle */
.seg{position:relative;display:inline-flex;margin-top:28px;padding:5px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.seg button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;border:0;background:transparent;height:44px;padding:0 20px;border-radius:99px;font-weight:700;font-size:15.5px;color:var(--ink2);transition:color .3s}
.seg button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg button[aria-selected=true]{color:#fff}
.seg-pill{position:absolute;z-index:0;top:5px;bottom:5px;border-radius:99px;background:var(--navy);transition:all .45s var(--ease)}
[data-theme=dark] .seg-pill{background:var(--accent)}

/* story */
.story{padding:120px 0 80px}
.story-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.steps{padding:6vh 0 18vh}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease)}
.step.on{opacity:1}
.step .n{font-size:14px;font-weight:700;color:var(--accent);direction:ltr;display:flex;align-items:center;gap:10px}
[dir=rtl] .step .n{flex-direction:row-reverse;justify-content:flex-end}
.step .n::after{content:"";height:1px;width:40px;background:currentColor;opacity:.4}
.step .lab{font-size:15px;color:var(--mute);font-weight:500;margin-top:4px}
.step h3{margin:10px 0 0;font-size:clamp(28px,3.2vw,42px);line-height:1.22;font-weight:700}
.step h3 .dim{color:var(--mute);display:block}
.step p{margin:14px 0 0;color:var(--ink2);font-size:18px;max-width:440px}
.step .stat{margin-top:20px;display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:12px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);align-self:flex-start;max-width:100%}
.step .stat .st{color:var(--ink);font-size:clamp(17px,1.45vw,19.5px);font-weight:600;line-height:1.45}
.step .stat .acc{color:var(--accent);font-weight:700;white-space:nowrap}
.step .stat .tag{font-style:normal;font-size:11.5px}
.stage{position:sticky;top:max(96px,calc(50vh - 250px))}
.device{border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden}
.dev-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.dev-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dev-bar i:nth-child(1){background:#FF5F57}.dev-bar i:nth-child(2){background:#FEBC2E}.dev-bar i:nth-child(3){background:#28C840}
.dev-url{margin:0 auto;font-size:12px;color:var(--mute);background:var(--bg);padding:2px 14px;border-radius:99px}
.dev-screen{background:var(--s-bg)}
.rail{display:flex;gap:6px;justify-content:center;margin-top:18px}
.rail button{width:28px;height:6px;border-radius:99px;border:0;background:var(--line);padding:0;transition:all .35s var(--ease)}
.rail button.on{width:44px;background:var(--accent)}

/* calculator */
.calc-sec{padding:110px 0;background:var(--bg2);border-block:1px solid var(--line)}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1040px;margin:0 auto}
.cin{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:22px}
.fld label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:15.5px;margin-bottom:10px}
.fld label output{font-size:20px;color:var(--accent);direction:ltr}
.fld label output small{font-size:13px;color:var(--mute);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to var(--dir,left),var(--accent) var(--p,50%),var(--soft) var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--soft)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(12,29,57,.25);transition:transform .15s}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.fld .hint{font-size:13px;color:var(--mute);margin-top:2px}
.cout{border-radius:22px;padding:30px;color:#fff;background:radial-gradient(120% 100% at 100% 0%,#163A72 0%,#0C1D39 55%,#081428 100%);box-shadow:var(--sh-lg);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
[data-theme=dark] .cout{box-shadow:0 0 0 1px #22345A inset,var(--sh-lg)}
.cout .k{color:#A9BCE0;font-size:15px}
.cout .total{font-size:clamp(46px,6vw,64px);font-weight:700;line-height:1;letter-spacing:-.02em}
.cout .total small{font-size:18px;font-weight:500;color:#C9D6EE;letter-spacing:0}
.cout .split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cout .split div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.cout .split b{display:block;font-size:24px}
.cout .split span{font-size:13.5px;color:#A9BCE0}
.cout .roi{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(74,222,128,.1);color:#B8F5CF;font-size:15px}
.cout .roi b{font-size:22px;color:#4ADE80}
.cout .note{font-size:12.5px;color:#8597B8;margin:0}
.cout .btn{align-self:flex-start}

/* how */
.how{padding:120px 0 100px}
.how-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.how-list li{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.how-list li:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.how-n{position:absolute;top:18px;font-size:44px;font-weight:700;color:var(--soft);line-height:1}
.how-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--navy);color:#fff;margin-bottom:22px}
[data-theme=dark] .how-ic{background:var(--accent)}
.how-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.how-list h3{margin:0;font-size:22px}
.how-list p{margin:8px 0 0;color:var(--ink2);font-size:16px}
/* hub */
.hub{position:relative;height:380px;max-width:720px;margin:72px auto 0}
.hub-c{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:30px;background:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(10,110,189,.08),0 0 0 22px rgba(10,110,189,.05),0 20px 50px -10px rgba(10,110,189,.6);z-index:2}
[data-theme=dark] .hub-c{background:#13254A}
.hub-c svg{width:56px;height:56px;color:#fff}
.hub svg.lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.hub svg.lines path{fill:none;stroke:var(--line);stroke-width:1.5}
.hub svg.lines path.f{stroke:var(--accent);stroke-dasharray:4 10;animation:flow 1.6s linear infinite;opacity:.7}
@keyframes flow{to{stroke-dashoffset:-28}}
.node{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);font-weight:700;font-size:14.5px;white-space:nowrap;z-index:1;transition:transform .6s var(--ease),opacity .6s}
.hub.in .node{transform:translate(-50%,-50%);opacity:1}
.node i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;font-weight:700}
.node.soon{border-style:dashed;color:var(--ink2)}
.node.soon::after{content:attr(data-soon);font-size:11px;font-weight:500;color:var(--mute);margin-inline-start:2px}
.hub-cap{text-align:center;color:var(--mute);font-size:15px;margin:8px 0 0}

/* pricing */
.pricing{padding:110px 0;background:var(--bg2);border-block:1px solid var(--line)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;box-shadow:var(--sh);position:relative;transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.plan.pop{background:radial-gradient(120% 90% at 100% 0%,#163A72 0%,#0C1D39 60%);color:#fff;border-color:transparent;box-shadow:0 30px 60px -20px rgba(12,29,57,.6)}
[data-theme=dark] .plan.pop{box-shadow:0 0 0 1px #2A4A80 inset,0 30px 60px -20px rgba(10,110,189,.4)}
.plan .badge{position:absolute;top:-13px;inset-inline-start:26px;background:linear-gradient(90deg,#0A6EBD,#3EC6E4);color:#fff;font-size:13px;font-weight:700;padding:4px 14px;border-radius:99px}
.plan h3{margin:0;font-size:22px}
.plan .tl{margin:4px 0 0;color:var(--ink2);font-size:15px}
.plan.pop .tl{color:#B9C8E4}
.plan .pr{margin:22px 0 4px;display:flex;align-items:baseline;gap:8px}
.plan .pr b{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.02em}
.plan .pr span{color:var(--ink2);font-size:15px}
.plan.pop .pr span{color:#B9C8E4}
.plan .pr b.txt{font-size:34px}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px;font-size:15.5px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--good-s) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2315803D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.plan.pop li::before{background-color:rgba(74,222,128,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%234ADE80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan li.star{font-weight:700}
.plan .btn{width:100%}
.plan:not(.pop) .btn-p{background:var(--navy);box-shadow:none}
[data-theme=dark] .plan:not(.pop) .btn-p{background:#1B2C4F}
.plan:not(.pop) .btn-p:hover{background:var(--navy2)}

/* faq */
.faq{padding:110px 0}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq .sec-head{margin:0;position:sticky;top:110px}
.qa{display:flex;flex-direction:column;gap:10px}
.q{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.q.open{box-shadow:var(--sh);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border:0;background:transparent;font-weight:700;font-size:17px;text-align:start}
.q button i{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--soft);position:relative;transition:transform .35s var(--ease),background .3s}
.q button i::before,.q button i::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--ink);border-radius:2px}
.q button i::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.q.open button i{background:var(--accent)}
.q.open button i::before,.q.open button i::after{background:#fff}
.q.open button i::after{transform:rotate(0)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{margin:0;padding:0 22px 20px;color:var(--ink2);font-size:16px}

/* final */
.final{padding:130px 0;text-align:center}
.final-ic{width:92px;height:92px;margin:0 auto 30px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(160deg,#173064,#0C1D39);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 0 80px rgba(10,110,189,.6)}
.final-ic svg{width:50px;height:50px;color:#fff}
.final h2{font-size:clamp(44px,7vw,88px)}
.final h2 span{display:inline}
.final p{color:#B9C8E4;font-size:19px;margin:16px auto 0;max-width:520px}

/* footer */
.foot{padding:48px 0 120px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:14px 40px;align-items:center}
.foot .brand-ic{color:var(--brand)}
.foot-t{margin:0;color:var(--ink2);font-size:15px}
.foot-l{display:flex;gap:20px;font-size:15px;color:var(--ink2)}
.foot-l a:hover{color:var(--accent)}
.foot-c{grid-column:1/-1;margin:8px 0 0;color:var(--mute);font-size:13.5px}

/* sticky mobile CTA */
.mcta{position:fixed;bottom:0;inset-inline:0;z-index:40;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.mcta.show{transform:none}
.mcta .btn-p{flex:1}
.mcta .btn-soft{flex:0 0 auto}

/* modal */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(6,12,24,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
.sheet{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;background:var(--card);border-radius:26px;padding:30px;box-shadow:0 40px 100px -20px rgba(0,0,0,.5);animation:up .4s var(--ease)}
.sheet .x{position:absolute;top:16px;inset-inline-end:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);font-size:22px;line-height:1}
.dots{display:flex;gap:6px;margin-bottom:20px}
.dots i{width:26px;height:5px;border-radius:99px;background:var(--line);transition:all .3s}
.dots i.on{background:var(--accent);width:38px}
.sheet h3{margin:0;font-size:24px}
.sheet .sub{margin:4px 0 20px;color:var(--ink2);font-size:15.5px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);text-align:start;transition:border-color .2s,background .2s}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative}
.opt.on .rd{border-color:var(--accent)}
.opt.on .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.opt b{display:block;font-size:16.5px}
.opt span{font-size:13.5px;color:var(--ink2)}
.opt .op{margin-inline-start:auto;text-align:end;font-weight:700;white-space:nowrap}
.opt .op small{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.form input,.form select{width:100%;height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:0 14px;font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.form .bad input,.form .bad select{border-color:var(--bad)}
.form .err{display:none;color:var(--bad);font-size:12.5px;margin-top:4px}
.form .bad .err{display:block}
.phone{display:flex;direction:ltr}
.phone span{display:flex;align-items:center;padding:0 12px;border:1.5px solid var(--line);border-inline-end:0;border-radius:12px 0 0 12px;background:var(--soft);font-weight:700;font-size:15px}
.phone input{border-radius:0 12px 12px 0}
.sum{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--soft);display:flex;justify-content:space-between;align-items:center;font-size:15px}
.sum b{font-size:20px}
.acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.acts .btn{flex:1}
.ok-ic{width:64px;height:64px;border-radius:50%;background:var(--good-s);display:grid;place-items:center;margin-bottom:16px}
.ok-ic svg{width:34px;height:34px;stroke:var(--good);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .6s .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wa-btn{background:#25D366!important;color:#0b2e17!important;box-shadow:0 8px 20px -8px rgba(37,211,102,.7)!important}
.recap{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);margin-top:6px}
.recap dt{color:var(--mute)}
.recap dd{margin:0;font-weight:500}
.small{font-size:13px;color:var(--mute);margin:14px 0 0}

/* responsive */
@media (max-width:1020px){
  .links{display:none}
  .nav-act{margin-inline-start:auto}
  .story-grid{grid-template-columns:1fr;gap:0}
  .stage{position:sticky;top:76px;z-index:5;order:-1;padding:10px 0 12px;background:var(--bg);margin:0 -24px;padding-inline:24px}
  .stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
  .rail{margin-top:10px}
  .steps{padding:4vh 0 10vh}
  .step{min-height:62vh;justify-content:flex-start;padding-top:6vh}
  .calc{grid-template-columns:1fr}
  .how-list{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:480px}
  .plan.pop{order:-1}
  .faq-in{grid-template-columns:1fr;gap:28px}
  .faq .sec-head{position:static}
  .foot-in{grid-template-columns:1fr;text-align:start}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .nav{top:8px;padding:0 10px}
  .nav-in{height:54px;gap:8px;padding-inline-start:14px}
  .brand{font-size:18px}.brand-ic{width:26px;height:26px}
  .nav-cta{display:none}
  .eyebrow{font-size:12.5px;padding:6px 12px}
  .hook-s{font-size:21px;max-width:340px}
  .hook-ex{font-size:14px}
  .hero-cta{flex-wrap:nowrap;gap:10px}
  .hero-cta .btn{flex:1 1 0;padding:0 12px}
  .hero-cta .btn-lg{height:52px}
  .trust{gap:8px 16px;font-size:13px}
  .story{padding:84px 0 40px}
  .stage{margin:0 -18px;padding-inline:18px;top:70px}
  .device{border-radius:14px}
  .dev-bar{height:26px}
  .dev-bar i{width:8px;height:8px}
  .dev-url{font-size:10px}
  .step{min-height:56vh}
  .step h3{font-size:27px}
  .step p{font-size:16px}
  .seg button{height:40px;padding:0 14px;font-size:14px}
  .sec-head{margin-bottom:34px}
  .calc-sec,.pricing,.faq{padding:80px 0}
  .how{padding:84px 0 70px}
  .cin,.cout{padding:22px;border-radius:20px}
  .hub{height:420px;margin-top:48px}
  .node{font-size:12.5px;padding:7px 10px}
  .node i{width:20px;height:20px;font-size:10px}
  .hub-c{width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:24px}
  .hub-c svg{width:42px;height:42px}
  .final{padding:96px 0}
  .mcta{display:flex}
  .form{grid-template-columns:1fr}
  .sheet{padding:24px 20px;border-radius:24px 24px 0 0;max-height:92vh;align-self:flex-end}
  .modal{padding:0}
  .foot{padding-bottom:110px}
}
@media (min-width:641px){.scroll-hint{display:block}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

[dir=rtl] .how-n{left:22px}[dir=ltr] .how-n{right:22px}
h2,.step h3,h1{text-wrap:balance}
.scrolled .scroll-hint{opacity:0}

/* theme switch: stands out on the navy bar and on the white bar */
.tt-track{box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 0 0 2px rgba(255,212,92,.55),0 0 18px rgba(255,212,92,.28)}
[data-theme=dark] .tt-track{background:linear-gradient(180deg,#34488A,#1B2756);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 0 0 2px rgba(143,176,242,.75),0 0 18px rgba(143,176,242,.35)}
[data-theme=dark] .tt-knob{box-shadow:0 0 10px rgba(229,236,250,.55),0 2px 6px rgba(0,0,0,.35)}
.theme:hover .tt-track{filter:brightness(1.08)}
.theme:focus-visible{outline:none}
.theme:focus-visible .tt-track{outline:2px solid #3EC6E4;outline-offset:3px}

.sx-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(18px,3.5svh,36px)}
.sx-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.hero .wrap.hero-grid{max-width:1320px}
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.16fr)}
.hero h1{font-size:clamp(40px,4.2vw,64px)}
.hero h1 span{white-space:nowrap}
@media (max-width:1020px){.hero-grid{grid-template-columns:1fr}.hero h1 span{white-space:normal}}
@media (max-width:640px){.sx-cta{display:none}}

@media (max-width:640px){.sx-note{display:block}}
.static .sx-note{display:block}
[lang=en] .hero h1 span{white-space:normal}
[lang=en] .hero h1{font-size:clamp(40px,3.9vw,60px)}

.sx-chips{display:none;position:absolute;z-index:2;left:0;right:0;bottom:calc(14px + 2svh);justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px}
.sx-chips span{display:inline-flex;align-items:baseline;gap:5px;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);font-size:12.5px;color:var(--ink2)}
.sx-chips b{font-size:15px;color:var(--ink)}
.sx-chips i{font-style:normal}
.sx-chips em{font-style:normal;font-size:11px;color:var(--accent);padding:1px 7px;border-radius:99px;background:var(--soft)}
@media (max-width:640px){.sx-chips{display:flex}.sx-note{bottom:calc(84px + 5svh)}}
.static .sx-chips{display:none}