/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --bg:#04060c;
  --bg-soft:#070b14;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --blue:#1E6BFF;
  --blue-light:#4A8DFF;
  --cyan:#00C6FF;
  --text:#EAF0FA;
  --muted:#8895AB;
  --muted-2:#5C6880;
  --grad:linear-gradient(135deg,#1E6BFF 0%,#00C6FF 100%);
  --grad-soft:linear-gradient(135deg,rgba(30,107,255,.18),rgba(0,198,255,.06));
  --radius:20px;
  --shadow:0 30px 70px -35px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1240px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select{font-family:inherit}
h1,h2,h3,h4,.font-display{font-family:'Sora',sans-serif;line-height:1.15;letter-spacing:-.02em}
::selection{background:rgba(30,107,255,.4);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#05080f}
::-webkit-scrollbar-thumb{background:linear-gradient(#1E6BFF,#0b3a94);border-radius:20px;border:2px solid #05080f}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{position:relative;padding:110px 0}
.section--tight{padding:80px 0}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:20px;
}
.eyebrow::before{
  content:'';width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-light));
}
.eyebrow.center::before{background:linear-gradient(90deg,transparent,var(--blue-light))}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--blue-light),transparent)}

.section-title{
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:700;
  margin-bottom:18px;
}
.section-title .accent{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-sub{
  color:var(--muted);
  font-size:1.02rem;
  max-width:620px;
  font-weight:300;
}
.center{text-align:center}
.center .section-sub{margin-left:auto;margin-right:auto}

/* ============================================================
   BACKGROUND FX
   ============================================================ */
.bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-fx .glow{
  position:absolute;border-radius:50%;filter:blur(120px);opacity:.45;
}
.bg-fx .glow.g1{width:640px;height:640px;background:#0d3fa8;top:-260px;right:-180px;opacity:.35}
.bg-fx .glow.g2{width:520px;height:520px;background:#063a5e;top:38%;left:-260px;opacity:.28}
.bg-fx .glow.g3{width:600px;height:600px;background:#0a2a6b;bottom:-280px;right:10%;opacity:.24}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;
  font-size:.93rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:all .4s var(--ease);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn-primary{
  background:var(--grad);color:#fff;
  box-shadow:0 12px 34px -14px rgba(30,107,255,.95), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#4A8DFF,#00E0FF);
  opacity:0;transition:opacity .4s var(--ease);
}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 48px -16px rgba(30,107,255,1)}
.btn-primary:hover::after{opacity:1}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--text);
  border-color:var(--line-strong);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.btn-lg{padding:18px 38px;font-size:1rem}
.btn-block{width:100%}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:relative;z-index:50}

.topbar{
  background:rgba(4,7,14,.9);
  border-bottom:1px solid var(--line);
  font-size:.79rem;color:var(--muted);
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  height:44px;gap:20px;
}
.topbar-left{display:flex;align-items:center;gap:26px}
.topbar-item{display:flex;align-items:center;gap:8px;transition:color .3s}
.topbar-item svg{width:14px;height:14px;color:var(--blue-light);flex-shrink:0}
a.topbar-item:hover{color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-right .dot{
  width:6px;height:6px;border-radius:50%;background:#25d07a;
  box-shadow:0 0 0 4px rgba(37,208,122,.14);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,16,.6);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s;
}
.nav.scrolled{
  background:rgba(5,8,16,.88);
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px -30px rgba(0,0,0,1);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;gap:30px;
}

.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-mark{
  width:42px;height:42px;border-radius:12px;
  background:var(--grad);
  display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(30,107,255,.9), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;
}
.logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 55%);
}
.logo-mark svg{width:22px;height:22px;color:#fff;position:relative;z-index:1}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-family:'Sora';font-size:1.16rem;font-weight:700;letter-spacing:-.03em}
.logo-text small{font-size:.6rem;letter-spacing:.28em;color:var(--muted-2);text-transform:uppercase;margin-top:4px}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-size:.88rem;font-weight:500;color:var(--muted);
  padding:9px 15px;border-radius:100px;
  transition:color .3s,background .3s;
  position:relative;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-actions .btn{padding:12px 24px;font-size:.86rem}

.burger{
  display:none;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  cursor:pointer;place-items:center;
}
.burger span{display:block;width:18px;height:1.6px;background:var(--text);border-radius:2px;transition:.35s var(--ease)}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.carousel{
  position:relative;
  min-height:clamp(560px,74vh,700px);
  display:flex;
}

.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity 1s var(--ease),visibility 1s;
  z-index:1;
}
.slide.is-active{opacity:1;visibility:visible;z-index:2}

.slide-bg{position:absolute;inset:0;overflow:hidden}
.slide-bg::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 80% at 25% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 25% 50%,#000,transparent 75%);
}
.slide-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,6,12,.94) 0%,rgba(4,6,12,.72) 42%,rgba(4,6,12,.35) 70%,rgba(4,6,12,.55) 100%);
}

/* Slide themes */
.slide-1 .slide-bg{background:radial-gradient(1200px 700px at 78% 22%,#0f4bb8 0%,#071b45 42%,#04060c 78%)}
.slide-2 .slide-bg{background:radial-gradient(1200px 700px at 78% 22%,#0a3f7a 0%,#052a4d 42%,#04060c 78%)}
.slide-3 .slide-bg{background:radial-gradient(1200px 700px at 78% 22%,#123a86 0%,#0a2050 42%,#04060c 78%)}

.orb{
  position:absolute;border-radius:50%;
  filter:blur(90px);pointer-events:none;
}
.slide-1 .orb{width:520px;height:520px;background:rgba(30,107,255,.5);top:-140px;right:2%}
.slide-2 .orb{width:480px;height:480px;background:rgba(0,198,255,.35);top:-100px;right:8%}
.slide-3 .orb{width:560px;height:560px;background:rgba(58,120,255,.42);top:-160px;right:0}

/* Decorative rings */
.rings{
  position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(680px,60vw);aspect-ratio:1;
  pointer-events:none;opacity:.55;
  animation:spin 46s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.rings circle{fill:none;stroke:rgba(120,170,255,.16);stroke-width:1}

.slide-inner{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:50px;width:100%;
  padding:80px 0 96px;
}

.slide-content{max-width:620px}
.slide-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 12px;border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#BBD2FF;margin-bottom:26px;
}
.slide-tag i{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,198,255,.16);
}
.slide-title{
  font-size:clamp(2.1rem,4.5vw,3.65rem);
  font-weight:700;letter-spacing:-.035em;
  margin-bottom:22px;
}
.slide-title em{
  font-style:normal;
  background:linear-gradient(120deg,#66A6FF 0%,#00E0FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.slide-desc{
  font-size:1.06rem;color:#A9B7CC;font-weight:300;
  max-width:520px;margin-bottom:34px;
}
.slide-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}
.slide-meta{
  display:flex;flex-wrap:nowrap;gap:14px 34px;
  padding-top:26px;margin-bottom:20px;border-top:1px solid rgba(255,255,255,.09);
}
.slide-meta div{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--muted)}
.slide-meta svg{width:16px;height:16px;color:var(--blue-light);flex-shrink:0}

/* Slide entrance animation */
.slide .slide-tag,.slide .slide-title,.slide .slide-desc,.slide .slide-actions,.slide .slide-meta{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.slide.is-active .slide-tag{opacity:1;transform:none;transition-delay:.15s}
.slide.is-active .slide-title{opacity:1;transform:none;transition-delay:.25s}
.slide.is-active .slide-desc{opacity:1;transform:none;transition-delay:.35s}
.slide.is-active .slide-actions{opacity:1;transform:none;transition-delay:.45s}
.slide.is-active .slide-meta{opacity:1;transform:none;transition-delay:.55s}

/* Hero side card */
.hero-card{
  justify-self:end;width:100%;max-width:390px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;padding:32px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.16);
  opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity 1s var(--ease) .5s,transform 1s var(--ease) .5s;
}
.slide.is-active .hero-card{opacity:1;transform:none}
.hero-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.hero-card-head span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-card-head b{
  font-family:'Sora';font-size:.82rem;color:#7EE0A8;
  background:rgba(37,208,122,.12);border:1px solid rgba(37,208,122,.3);
  padding:4px 11px;border-radius:100px;font-weight:600;
}
.hero-card-value{
  font-family:'Sora';font-size:2.6rem;font-weight:700;letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,#8FC0FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:6px;
}
.hero-card-label{font-size:.86rem;color:var(--muted);margin-bottom:26px}
.hero-bar{height:6px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:26px}
.hero-bar i{display:block;height:100%;width:72%;border-radius:100px;background:var(--grad);box-shadow:0 0 18px rgba(30,107,255,.9)}
.hero-rows{display:grid;gap:14px;margin-bottom:28px}
.hero-row{display:flex;align-items:center;justify-content:space-between;font-size:.86rem}
.hero-row span{color:var(--muted)}
.hero-row b{font-weight:600;color:#DCE7F8}
.hero-card .btn{width:100%}

/* Carousel controls */
.car-nav{
  position:absolute;z-index:6;bottom:34px;right:40px;
  display:flex;align-items:center;gap:12px;
}
.car-btn{
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  color:var(--text);cursor:pointer;
  display:grid;place-items:center;
  transition:all .35s var(--ease);
}
.car-btn svg{width:18px;height:18px}
.car-btn:hover{background:var(--grad);border-color:transparent;transform:scale(1.07);box-shadow:0 12px 30px -12px rgba(30,107,255,1)}

.car-dots{
  position:absolute;z-index:6;bottom:52px;left:24px;
  display:flex;align-items:center;gap:12px;
}
.car-dot{
  width:34px;height:3px;border-radius:100px;
  background:rgba(255,255,255,.2);
  border:none;cursor:pointer;padding:0;
  transition:all .45s var(--ease);
  position:relative;overflow:hidden;
}
.car-dot:hover{background:rgba(255,255,255,.4)}
.car-dot.is-active{width:64px;background:rgba(255,255,255,.16)}
.car-dot.is-active::after{
  content:'';position:absolute;inset:0;border-radius:100px;
  background:var(--grad);
  transform-origin:left;transform:scaleX(var(--p,0));
}
.car-dot.is-active.run::after{animation:dotFill 7s linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.car-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:rgba(255,255,255,.06);z-index:6;overflow:hidden;
}
.car-progress i{
  display:block;height:100%;width:0;
  background:var(--grad);
  box-shadow:0 0 14px rgba(30,107,255,.9);
}
.car-progress i.run{animation:dotFill 7s linear forwards}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
  padding:34px 0;
}
.trust-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:34px;flex-wrap:wrap;
}
.trust-label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;font-weight:600;
}
.trust-logos{
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
  flex:1;justify-content:flex-end;
}
.trust-logos span{
  font-family:'Sora';font-size:1rem;font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.3);
  transition:color .35s,transform .35s;
  cursor:default;
}
.trust-logos span:hover{color:rgba(255,255,255,.75);transform:translateY(-2px)}

/* ============================================================
   CARDS / SERVICES
   ============================================================ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.card{
  position:relative;
  background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 30px;
  overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s,background .5s;
}
.card::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,150,255,.7),transparent);
  opacity:0;transition:opacity .5s;
}
.card::after{
  content:'';position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,107,255,.22),transparent 70%);
  top:-110px;right:-80px;opacity:0;transition:opacity .6s;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(70,130,255,.4);
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  box-shadow:0 40px 70px -40px rgba(20,80,220,.75);
}
.card:hover::before,.card:hover::after{opacity:1}

.card-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(150deg,rgba(30,107,255,.24),rgba(0,198,255,.08));
  border:1px solid rgba(90,150,255,.28);
  display:grid;place-items:center;
  margin-bottom:24px;position:relative;z-index:1;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.card-icon svg{width:25px;height:25px;color:#7FB4FF}
.card:hover .card-icon{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 32px -16px rgba(30,107,255,1)}

.card h3{font-size:1.13rem;font-weight:600;margin-bottom:12px;position:relative;z-index:1}
.card p{font-size:.91rem;color:var(--muted);font-weight:300;position:relative;z-index:1}
.card .card-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;font-size:.85rem;font-weight:600;color:var(--blue-light);
  position:relative;z-index:1;transition:gap .35s var(--ease);
}
.card .card-link:hover{gap:14px}
.card .card-link svg{width:14px;height:14px}

.card-badge{
  position:absolute;top:22px;right:22px;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#7EE0A8;background:rgba(37,208,122,.1);
  border:1px solid rgba(37,208,122,.28);
  padding:4px 10px;border-radius:100px;z-index:2;
}

/* ============================================================
   SIMULATOR
   ============================================================ */
.sim-wrap{
  display:grid;grid-template-columns:1.12fr .88fr;gap:0;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  box-shadow:var(--shadow);
}
.sim-form{padding:48px 46px}
.sim-side{
  padding:48px 44px;
  background:
    radial-gradient(700px 400px at 100% 0%,rgba(30,107,255,.28),transparent 65%),
    linear-gradient(160deg,rgba(10,20,44,.9),rgba(6,10,20,.95));
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
}

.sim-title{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.sim-sub{font-size:.9rem;color:var(--muted);margin-bottom:32px;font-weight:300}

.field{margin-bottom:28px}
.field-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;
}
.field-head label{font-size:.82rem;font-weight:600;color:#B7C5DA;letter-spacing:.02em}
.field-head output{
  font-family:'Sora';font-size:1.24rem;font-weight:700;
  color:#fff;letter-spacing:-.02em;
}

/* Tabs */
.tabs{display:flex;gap:8px;background:rgba(0,0,0,.32);padding:6px;border-radius:100px;border:1px solid var(--line)}
.tab{
  flex:1;padding:11px 14px;border-radius:100px;border:none;cursor:pointer;
  background:transparent;color:var(--muted);
  font-size:.83rem;font-weight:600;
  transition:all .4s var(--ease);white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.is-active{background:var(--grad);color:#fff;box-shadow:0 10px 26px -12px rgba(30,107,255,1)}

/* Range */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:100px;
  background:linear-gradient(90deg,#1E6BFF var(--p,40%),rgba(255,255,255,.1) var(--p,40%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  border:4px solid #1E6BFF;
  box-shadow:0 6px 20px -4px rgba(30,107,255,1);
  transition:transform .25s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:4px solid #1E6BFF;
  box-shadow:0 6px 20px -4px rgba(30,107,255,1);cursor:pointer;
}
.range-scale{
  display:flex;justify-content:space-between;
  margin-top:10px;font-size:.72rem;color:var(--muted-2);
}

/* Result box */
.result-box{
  background:linear-gradient(150deg,rgba(30,107,255,.16),rgba(0,198,255,.05));
  border:1px solid rgba(90,150,255,.28);
  border-radius:20px;padding:30px;margin-bottom:26px;
  position:relative;overflow:hidden;
}
.result-box::before{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,198,255,.3),transparent 70%);
  top:-110px;right:-70px;filter:blur(20px);
}
.result-label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#9DB6E0;font-weight:600;position:relative}
.result-value{
  font-family:'Sora';font-size:3rem;font-weight:700;letter-spacing:-.045em;
  line-height:1.1;margin:10px 0 4px;position:relative;
  background:linear-gradient(120deg,#fff,#7FB4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.result-note{font-size:.83rem;color:var(--muted);position:relative}
.result-rows{display:grid;gap:13px;position:relative}
.result-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.87rem;padding-bottom:13px;
  border-bottom:1px dashed rgba(255,255,255,.09);
}
.result-row:last-child{border-bottom:none;padding-bottom:0}
.result-row span{color:var(--muted)}
.result-row b{font-weight:600;color:#E4EDFB}

.sim-side .btn{margin-bottom:14px}
.sim-disclaimer{
  font-size:.74rem;color:var(--muted-2);line-height:1.6;text-align:center;
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:24px;
  overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.stat{
  padding:40px 30px;text-align:center;position:relative;
  transition:background .45s;
}
.stat+.stat{border-left:1px solid var(--line)}
.stat:hover{background:rgba(30,107,255,.07)}
.stat-value{
  font-family:'Sora';font-size:2.5rem;font-weight:700;letter-spacing:-.045em;
  background:linear-gradient(120deg,#fff,#79AFFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:10px;
}
.stat-label{font-size:.82rem;color:var(--muted);letter-spacing:.02em}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{
  padding:0 26px;position:relative;
  text-align:left;
}
.step-num{
  font-family:'Sora';font-size:.78rem;font-weight:700;
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(30,107,255,.22),rgba(0,198,255,.06));
  border:1px solid rgba(90,150,255,.3);
  color:#8FBCFF;margin-bottom:24px;
  position:relative;z-index:2;
  transition:all .5s var(--ease);
}
.step:hover .step-num{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 16px 34px -14px rgba(30,107,255,1);
  transform:translateY(-4px);
}
.step h4{font-size:1.02rem;font-weight:600;margin-bottom:10px}
.step p{font-size:.88rem;color:var(--muted);font-weight:300}
.step::after{
  content:'';position:absolute;top:26px;left:64px;right:-8px;height:1px;
  background:linear-gradient(90deg,rgba(90,150,255,.4),rgba(90,150,255,.05));
  z-index:1;
}
.step:last-child::after{display:none}

/* ============================================================
   BENEFITS / FEATURE SPLIT
   ============================================================ */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
}
.feature-list{display:grid;gap:22px;margin-top:34px}
.feature{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px;border-radius:16px;
  border:1px solid transparent;
  transition:all .45s var(--ease);
}
.feature:hover{
  background:rgba(255,255,255,.035);
  border-color:var(--line);
  transform:translateX(6px);
}
.feature-icon{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(150deg,rgba(30,107,255,.24),rgba(0,198,255,.07));
  border:1px solid rgba(90,150,255,.26);
  display:grid;place-items:center;
}
.feature-icon svg{width:20px;height:20px;color:#7FB4FF}
.feature h4{font-size:1rem;font-weight:600;margin-bottom:6px}
.feature p{font-size:.87rem;color:var(--muted);font-weight:300}

/* Visual panel */
.visual{
  position:relative;border-radius:28px;overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(600px 400px at 30% 20%,rgba(30,107,255,.32),transparent 60%),
    linear-gradient(160deg,rgba(10,18,38,.95),rgba(5,8,16,.98));
  padding:46px;
  min-height:480px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--shadow);
}
.visual::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 80%);
}
.visual-top{position:relative;z-index:1}
.visual-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:#A9C3EE;font-weight:600;
}
.visual-pill i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,198,255,.15)}
.visual h3{
  font-size:1.75rem;font-weight:700;margin:22px 0 12px;letter-spacing:-.03em;
  position:relative;z-index:1;
}
.visual > p{font-size:.92rem;color:var(--muted);font-weight:300;position:relative;z-index:1;max-width:400px}

.mini-card{
  position:relative;z-index:1;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:24px;
  backdrop-filter:blur(18px);
  margin-top:34px;
}
.mini-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mini-card-top span{font-size:.78rem;color:var(--muted)}
.mini-card-top b{font-family:'Sora';font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.mini-bars{display:flex;align-items:flex-end;gap:8px;height:76px}
.mini-bars i{
  flex:1;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#3E86FF,rgba(30,107,255,.18));
  animation:barGrow 1.4s var(--ease) both;
}
.mini-bars i:nth-child(1){height:38%;animation-delay:.05s}
.mini-bars i:nth-child(2){height:56%;animation-delay:.12s}
.mini-bars i:nth-child(3){height:44%;animation-delay:.19s}
.mini-bars i:nth-child(4){height:78%;animation-delay:.26s}
.mini-bars i:nth-child(5){height:62%;animation-delay:.33s}
.mini-bars i:nth-child(6){height:100%;animation-delay:.4s;background:linear-gradient(180deg,#00E0FF,rgba(0,198,255,.2))}
@keyframes barGrow{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote{
  position:relative;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:22px;
  padding:38px 34px;
  transition:all .5s var(--ease);
  display:flex;flex-direction:column;
}
.quote:hover{
  transform:translateY(-8px);
  border-color:rgba(70,130,255,.4);
  box-shadow:0 40px 70px -40px rgba(20,80,220,.7);
}
.stars{display:flex;gap:4px;margin-bottom:20px}
.stars svg{width:16px;height:16px;color:#FFC53D}
.quote p{
  font-size:.96rem;color:#B9C7DB;font-weight:300;
  line-height:1.75;flex:1;margin-bottom:28px;
}
.quote-person{display:flex;align-items:center;gap:14px}
.avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--grad);
  display:grid;place-items:center;
  font-family:'Sora';font-weight:700;font-size:.92rem;color:#fff;
  box-shadow:0 10px 24px -12px rgba(30,107,255,1);
}
.quote-person b{display:block;font-size:.92rem;font-weight:600}
.quote-person small{font-size:.78rem;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:860px;margin:0 auto;display:grid;gap:14px}
details{
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .4s,background .4s;
}
details[open]{border-color:rgba(70,130,255,.42);background:linear-gradient(170deg,rgba(30,107,255,.1),rgba(255,255,255,.015))}
summary{
  list-style:none;cursor:pointer;
  padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:.98rem;font-weight:600;color:#DCE6F5;
  transition:color .3s;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:#fff}
summary .chev{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  display:grid;place-items:center;transition:all .4s var(--ease);
}
summary .chev svg{width:14px;height:14px;transition:transform .4s var(--ease)}
details[open] summary .chev{background:var(--grad);border-color:transparent}
details[open] summary .chev svg{transform:rotate(180deg);color:#fff}
.faq-body{
  padding:0 26px 26px;
  font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.8;
  max-width:94%;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{
  position:relative;overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(90,150,255,.28);
  background:
    radial-gradient(900px 500px at 15% 0%,rgba(30,107,255,.42),transparent 62%),
    radial-gradient(700px 500px at 92% 100%,rgba(0,198,255,.22),transparent 60%),
    linear-gradient(160deg,#081026,#04060c);
  padding:76px 60px;
  text-align:center;
  box-shadow:0 50px 100px -50px rgba(20,80,220,.9);
}
.cta::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 78%);
}
.cta > *{position:relative;z-index:1}
.cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700;margin-bottom:18px;letter-spacing:-.035em}
.cta p{color:#A9B7CC;font-weight:300;max-width:620px;margin:0 auto 36px;font-size:1.02rem}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);
  padding:76px 0 0;
  margin-top:110px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px;
  padding-bottom:56px;
}
.footer-brand p{
  font-size:.88rem;color:var(--muted);font-weight:300;
  margin:20px 0 24px;max-width:330px;
}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  display:grid;place-items:center;
  transition:all .4s var(--ease);
}
.footer-social a svg{width:17px;height:17px;color:var(--muted)}
.footer-social a:hover{background:var(--grad);border-color:transparent;transform:translateY(-3px)}
.footer-social a:hover svg{color:#fff}

.footer h5{
  font-family:'Sora';font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#CBD8EC;
  margin-bottom:22px;
}
.footer-links{display:grid;gap:13px}
.footer-links a{
  font-size:.88rem;color:var(--muted);font-weight:300;
  transition:color .3s,transform .3s var(--ease);
  display:inline-block;
}
.footer-links a:hover{color:var(--blue-light);transform:translateX(4px)}

.footer-contact{display:grid;gap:16px}
.footer-contact div{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);font-weight:300}
.footer-contact svg{width:16px;height:16px;color:var(--blue-light);flex-shrink:0;margin-top:3px}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap;
}
.footer-bottom p{font-size:.79rem;color:var(--muted-2);max-width:760px;line-height:1.7}
.footer-bottom-links{display:flex;gap:22px;font-size:.79rem;color:var(--muted-2)}
.footer-bottom-links a:hover{color:var(--blue-light)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translateY(34px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .step::after{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:44px}
  .sim-wrap{grid-template-columns:1fr}
  .sim-side{border-left:none;border-top:1px solid var(--line)}
  .split{grid-template-columns:1fr;gap:50px}
  .slide-inner{grid-template-columns:1fr;gap:34px}
  .hero-card{display:none}
  .car-dots{left:50%;transform:translateX(-50%)}
  .car-nav{right:50%;transform:translateX(50%);bottom:30px}
  .carousel{min-height:620px}
}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-actions .btn-ghost{display:none}
  .burger{display:grid}
  .topbar-left .topbar-item:nth-child(2){display:none}
  .section{padding:80px 0}
}

@media (max-width:640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-left:none;border-top:1px solid var(--line)}
  .sim-form,.sim-side{padding:34px 24px}
  .cta{padding:56px 26px;border-radius:24px}
  .carousel{min-height:680px}
  .slide-inner{padding:64px 0 120px}
  .slide-meta{gap:12px 22px}
  .topbar .container{justify-content:center}
  .topbar-right{display:none}
  .footer-grid{grid-template-columns:1fr;gap:38px}
  .footer{padding-top:56px}
  .result-value{font-size:2.3rem}
  .visual{padding:32px;min-height:auto}
  .car-dots{bottom:96px}
  .car-nav{bottom:26px}
  .trust-logos{gap:26px;justify-content:center}
  .trust-inner{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}