@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/SpaceGrotesk-variable.woff2') format('woff2-variations'), url('fonts/SpaceGrotesk-variable.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* ===== Design tokens ===== */
:root{
  --font-display:'Space Grotesk', 'Segoe UI', Inter, -apple-system, sans-serif;
  --bg: #060B18;
  --bg-2: #0A1226;
  --surface: #0F1A34;
  --surface-2: #131F42;
  --border: rgba(255,255,255,0.08);
  --text: #E8ECF7;
  --text-muted: #8E97B8;
  --primary: #2F6BFF;
  --primary-2: #1B4FDB;
  --accent: #00E0C6;
  --success: #22C55E;
  --grad: linear-gradient(135deg,#00E0C6 0%,#2F6BFF 100%);
  --shadow-glow: 0 0 0 1px rgba(0,224,198,0.15), 0 20px 60px -20px rgba(47,107,255,0.45);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container-narrow{max-width:760px;}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* icon sprite + base icon */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.icon{
  width:1em;height:1em;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;flex-shrink:0;
}

/* background fx */
.bg-fx{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(600px circle at 15% 0%, rgba(47,107,255,0.20), transparent 60%),
    radial-gradient(500px circle at 90% 20%, rgba(0,224,198,0.14), transparent 60%),
    var(--bg);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:0.95rem;
  border:1px solid transparent;cursor:pointer;transition:all .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--grad);color:#04101F;box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);}
.btn-outline{border-color:var(--border);color:var(--text);background:rgba(255,255,255,0.02);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost{color:var(--text-muted);}
.btn-ghost:hover{color:var(--text);}
.btn-lg{padding:15px 28px;font-size:1rem;}
.btn-block{width:100%;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(6,11,24,0.75);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:0.5px;font-size:1rem;flex-shrink:0;}
.logo-word b{color:var(--accent);font-weight:800;}
.main-nav{display:flex;gap:28px;flex:1;justify-content:center;}
.main-nav a{color:var(--text-muted);font-size:0.94rem;font-weight:500;transition:color .2s;}
.main-nav a:hover{color:var(--text);}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;}

/* ===== Hero ===== */
.hero{padding:88px 0 60px;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,224,198,0.08);border:1px solid rgba(0,224,198,0.25);
  color:var(--accent);font-size:0.82rem;font-weight:600;
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.eyebrow-alt{background:rgba(47,107,255,0.1);border-color:rgba(47,107,255,0.3);color:#8FB0FF;}
.eyebrow-alt .dot{background:#8FB0FF;box-shadow:0 0 8px #8FB0FF;}

h1{font-family:var(--font-display);font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.12;font-weight:700;letter-spacing:-0.5px;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{margin-top:20px;font-size:1.08rem;color:var(--text-muted);max-width:520px;}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-trust{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;}
.hero-trust div{display:flex;flex-direction:column;gap:2px;}
.hero-trust strong{font-size:1.3rem;color:var(--text);}
.hero-trust span{font-size:0.82rem;color:var(--text-muted);}

/* hero visual */
.hero-visual{position:relative;}
.panel-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,0.6);
}
.panel-head{display:flex;align-items:center;gap:7px;margin-bottom:18px;}
.panel-dot{width:9px;height:9px;border-radius:50%;}
.panel-dot.red{background:#FF5F57;}.panel-dot.yellow{background:#FEBC2E;}.panel-dot.green{background:#28C840;}
.panel-title{margin-left:8px;font-size:0.82rem;color:var(--text-muted);}
.panel-live{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-size:0.72rem;font-weight:600;color:var(--success);
  background:rgba(34,197,94,0.1);padding:4px 9px;border-radius:999px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:live-pulse 1.8s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.5);}50%{opacity:0.6;box-shadow:0 0 0 4px rgba(34,197,94,0);}}
.panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.stat-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;}
.stat-label{display:block;font-size:0.74rem;color:var(--text-muted);margin-bottom:6px;}
.stat-value{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:700;}
.stat-up{display:inline-flex;align-items:center;gap:4px;font-size:0.78rem;color:var(--success);margin-top:4px;}
.stat-up .icon{width:12px;height:12px;}
.panel-chart{margin-bottom:18px;}
.panel-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.panel-chart-head>span:first-child{font-size:0.78rem;color:var(--text);font-weight:600;}
.panel-chart-period{font-size:0.7rem;color:var(--text-muted);background:var(--bg-2);border:1px solid var(--border);padding:3px 9px;border-radius:999px;}
.panel-chart svg{width:100%;height:70px;overflow:visible;}
.chart-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4;}
.chart-dot-pulse{fill:#00E0C6;opacity:0.5;animation:chart-pulse 1.8s ease-out infinite;}
@keyframes chart-pulse{0%{r:3;opacity:0.55;}100%{r:10;opacity:0;}}
.panel-tx{display:flex;flex-direction:column;gap:10px;}
.panel-tx-head{font-size:0.78rem;color:var(--text);font-weight:600;margin-bottom:2px;}
.tx-row{
  display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;
  opacity:0;animation:tx-in 0.5s ease forwards;
}
@keyframes tx-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.tx-icon{width:26px;height:26px;border-radius:50%;background:rgba(34,197,94,0.15);color:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tx-icon .icon{width:14px;height:14px;stroke-width:2.4;}
.tx-info{flex:1;display:flex;flex-direction:column;}
.tx-info strong{font-size:0.86rem;}
.tx-info small{color:var(--text-muted);font-size:0.75rem;}
.tx-amount{font-size:0.86rem;font-weight:700;color:var(--success);}

.badge-float{
  position:absolute;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:9px 16px;font-size:0.8rem;font-weight:600;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.5);
  animation:float 5s ease-in-out infinite;
  display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap;
}
.badge-float .badge-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);}
.badge-float .badge-icon .icon{width:14px;height:14px;stroke-width:2.2;}
.badge-1{top:-44px;left:50%;animation-delay:0s;}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-10px);}}

/* ===== sections ===== */
.section{padding:96px 0;}
.section-alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,0.02),transparent);}
.section-title{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:500;text-align:center;letter-spacing:-0.2px;}
.section-title.left{text-align:left;}
.section-sub{text-align:center;color:var(--text-muted);margin-top:12px;font-size:1.03rem;max-width:560px;margin-left:auto;margin-right:auto;}
.section-sub.left{text-align:left;margin-left:0;}

/* grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}

/* segment / result cards */
.seg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:transform .2s, border-color .2s;}
.seg-card:hover{transform:translateY(-4px);border-color:rgba(0,224,198,0.35);}
.seg-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(47,107,255,0.12);border-radius:14px;margin-bottom:16px;color:var(--primary-2);}
.seg-icon .icon{width:24px;height:24px;color:#8FB0FF;}
.seg-card h3{font-size:1.15rem;margin-bottom:10px;}
.seg-card p{color:var(--text-muted);font-size:0.92rem;margin-bottom:16px;}
.seg-list li{font-size:0.86rem;color:var(--text);padding:6px 0;border-top:1px dashed var(--border);}
.seg-list li:first-child{border-top:none;}
.seg-list li::before{content:"→ ";color:var(--accent);}

/* problem cards */
.problem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:transform .2s,border-color .2s;}
.problem-card:hover{transform:translateY(-4px);border-color:rgba(255,138,138,0.3);}
.problem-tag,.sol-tag{display:inline-flex;align-items:center;gap:6px;font-size:0.72rem;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:999px;}
.problem-tag{color:#FF8A8A;background:rgba(255,90,90,0.1);}
.problem-tag .icon{width:12px;height:12px;stroke-width:2.4;}
.problem-card h3{margin-top:14px;font-size:1.1rem;}
.problem-card>p{color:var(--text-muted);font-size:0.9rem;margin-top:8px;}
.problem-solution{
  margin-top:18px;padding:16px;border-radius:var(--radius-sm);
  background:rgba(0,224,198,0.05);border:1px solid rgba(0,224,198,0.15);
}
.sol-tag{color:var(--accent);background:rgba(0,224,198,0.12);}
.sol-tag .icon{width:12px;height:12px;stroke-width:2.4;}
.problem-solution p{color:var(--text);font-size:0.9rem;margin-top:10px;}

/* steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:72px;}
.steps::before{
  content:"";position:absolute;top:22px;left:calc(12.5% + 6px);right:calc(12.5% + 6px);height:2px;
  background:linear-gradient(90deg,var(--accent),var(--primary));opacity:0.35;
}
.step{
  position:relative;padding:26px 20px 26px;margin-top:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);transition:transform .2s,border-color .2s;
}
.step:hover{transform:translateY(-4px);border-color:rgba(0,224,198,0.35);}
.step:hover .step-num{transform:translateX(-50%) scale(1.08);}
.step-num{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--grad);color:#04101F;font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  box-shadow:0 0 0 6px var(--bg),0 8px 20px -4px rgba(0,224,198,0.55);
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);z-index:1;transition:transform .2s;
}
.step h3{margin-top:14px;}
.step h3{font-size:1.05rem;margin-bottom:8px;}
.step p{color:var(--text-muted);font-size:0.88rem;}

/* features */
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,border-color .2s;}
.feat-card:hover{transform:translateY(-4px);border-color:rgba(47,107,255,0.4);}
.feat-icon{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:rgba(0,224,198,0.1);color:var(--accent);margin-bottom:14px;
}
.feat-icon .icon{width:22px;height:22px;}
.feat-card h3{font-size:1rem;margin-bottom:8px;}
.feat-card p{color:var(--text-muted);font-size:0.86rem;}

/* security */
.security-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
.security-list{margin-top:32px;display:flex;flex-direction:column;gap:20px;}
.security-item{display:flex;gap:16px;align-items:flex-start;}
.sec-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(0,224,198,0.1);border-radius:12px;color:var(--accent);}
.sec-icon .icon{width:20px;height:20px;}
.security-item strong{font-size:1rem;}
.security-item p{color:var(--text-muted);font-size:0.88rem;margin-top:4px;}
.security-visual{display:flex;justify-content:center;}
.shield-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:50px 40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  box-shadow:var(--shadow-glow);
}
.shield-card strong{font-size:1.1rem;}
.shield-card span{color:var(--text-muted);font-size:0.88rem;}

/* pricing */
.pricing{align-items:stretch;}
.price-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 26px;display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--accent);box-shadow:var(--shadow-glow);transform:scale(1.03);}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#04101F;font-size:0.72rem;font-weight:700;padding:5px 14px;border-radius:999px;}
.price-card h3{font-size:1.2rem;}
.price-desc{color:var(--text-muted);font-size:0.86rem;margin-top:6px;min-height:36px;}
.price-value{margin-top:18px;font-size:1rem;color:var(--text-muted);}
.price-value span{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--text);margin-right:6px;}
.price-value.alt{margin-top:4px;margin-bottom:6px;}
.price-list{margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;flex:1;}
.price-list li{display:flex;align-items:center;gap:9px;font-size:0.9rem;color:var(--text-muted);}
.price-list .icon{width:16px;height:16px;color:var(--accent);stroke-width:2.4;}

/* faq */
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 22px;}
.faq-item summary{cursor:pointer;font-weight:600;font-size:0.98rem;list-style:none;position:relative;padding-right:26px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.2rem;color:var(--accent);transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--text-muted);font-size:0.9rem;margin-top:14px;}

/* cta final */
.cta-final{padding:100px 0;background:linear-gradient(135deg,rgba(47,107,255,0.12),rgba(0,224,198,0.08));border-top:1px solid var(--border);}
.cta-final-inner{text-align:center;max-width:640px;margin:0 auto;}
.cta-final-inner h2{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;}
.cta-final-inner>p{color:var(--text-muted);margin-top:14px;}
.cta-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;justify-content:center;}
.cta-form input{
  flex:1;min-width:160px;padding:13px 16px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:0.9rem;
}
.cta-form input:focus{outline:none;border-color:var(--accent);}
.cta-form button{flex-shrink:0;}
.form-msg{display:block;margin-top:14px;color:var(--accent);font-size:0.88rem;min-height:1.2em;}

/* footer */
.site-footer{
  position:relative;border-top:1px solid var(--border);padding:72px 0 0;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:600px;height:240px;pointer-events:none;
  background:radial-gradient(circle,rgba(0,224,198,0.10),transparent 70%);
}
.footer-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;}
.footer-brand p{color:var(--text-muted);font-size:0.88rem;margin-top:14px;max-width:300px;}
.footer-badges{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.footer-badges span{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-size:0.78rem;color:var(--text-muted);
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  padding:6px 12px;border-radius:999px;
}
.footer-badges .icon{width:14px;height:14px;color:var(--accent);}
.footer-col h4{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.8px;color:var(--text);font-weight:700;margin-bottom:18px;}
.footer-col a{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:0.9rem;padding:7px 0;transition:color .2s,transform .2s;}
.footer-col a:hover{color:var(--accent);transform:translateX(3px);}
.footer-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;}
.footer-bottom span{color:var(--text-muted);font-size:0.82rem;}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{color:var(--text-muted);font-size:0.82rem;transition:color .2s;}
.footer-legal a:hover{color:var(--accent);}
.footer-legal a:hover{color:var(--accent);}

/* reveal animation */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].in{opacity:1;transform:translateY(0);}

/* ===== responsive ===== */
@media (max-width:1024px){
  .hero-grid,.security-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .main-nav,.header-actions{display:none;}
  .nav-toggle{display:flex;}
  .grid-3{grid-template-columns:1fr;}
  .price-card.featured{transform:none;}
  .hero{padding-top:50px;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-trust{gap:22px;}
  .cta-form{flex-direction:column;}
}

/* mobile nav open state */
.mobile-only-actions{display:none;}
.main-nav.open{
  display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;
  background:var(--bg-2);border-bottom:1px solid var(--border);padding:16px 24px;gap:4px;
  max-height:calc(100vh - 76px);overflow-y:auto;
}
.main-nav.open a{padding:12px 0;border-bottom:1px solid var(--border);}
.main-nav.open .mobile-only-actions{
  display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:4px;
}
.main-nav.open .mobile-only-actions a{border-bottom:none;padding:0;}
.main-nav.open .mobile-only-actions .btn{width:100%;padding:13px 22px;}