:root{
  --bg:#0b1220;
  --bg2:#0e1a33;
  --card:#0f1c36;
  --text:#e8eefc;
  --muted:#b6c3e6;
  --primary:#6ee7ff;
  --primary2:#8b5cf6;
  --border:rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 900px at 20% 0%, rgba(139,92,246,.25), transparent 60%),
              radial-gradient(900px 700px at 80% 10%, rgba(110,231,255,.18), transparent 55%),
              linear-gradient(180deg, var(--bg), #050914 70%);
  color:var(--text);
}
a{color:inherit; text-decoration:none;}
.container{max-width:1120px; margin:0 auto; padding:0 20px;}
.muted{color:var(--muted);}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(5,9,20,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;}
.brand-mark{width:14px; height:14px; border-radius:5px; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 0 0 6px rgba(110,231,255,.12);}
.nav-list{list-style:none; display:flex; gap:18px; padding:0; margin:0;}
.nav-list a{color:var(--muted); font-weight:500;}
.nav-list a:hover{color:var(--text);}
.header-cta{display:flex; gap:10px; align-items:center;}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; font-weight:600; border:1px solid var(--border);}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#061022; border-color:transparent;}
.btn--secondary{background:rgba(255,255,255,.06); color:var(--text);}
.btn:hover{transform:translateY(-1px); transition:transform .15s ease;}

.hero{padding:64px 0 32px;}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:30px; align-items:center;}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-weight:600; font-size:13px;}
.hero h1{font-size:44px; line-height:1.1; margin:14px 0;}
.lead{font-size:17px; color:var(--muted); line-height:1.6; max-width:58ch;}
.hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}

.hero-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px;}
.metric{padding:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); border-radius:14px;}
.metric-value{display:block; font-weight:800; font-size:18px;}
.metric-label{display:block; color:var(--muted); font-size:13px; margin-top:4px;}

.hero-card{border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-radius:18px; box-shadow:var(--shadow); padding:18px;}
.mock{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10);}
.mock-top{display:flex; gap:6px; padding:10px; background:rgba(0,0,0,.20);}
.mock-top span{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18);}
.mock-body{padding:14px; background:rgba(10,18,35,.7);}
.mock-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mock-kpi{height:56px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:10px; display:grid; gap:4px;}
.kpi-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.kpi-value{font-size:18px; font-weight:800;}
.kpi-sub{font-size:11px; color:var(--muted);}
.mock-chart{height:140px; border-radius:12px; margin-top:10px; background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.12)); border:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; padding:12px;}
.chart-bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; width:100%; height:100%; align-items:end;}
.chart-bars span{display:block; width:100%; min-height:8px; align-self:end; border-radius:6px; background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25));}
.mock-table{margin-top:10px; display:grid; gap:8px;}
.mock-line{height:12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
.mock-item{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted);}
.mock-item strong{color:var(--text);}
.amount.negative{color:#fca5a5;}

.section{padding:58px 0;}
.section--alt{background:rgba(255,255,255,.03); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{max-width:70ch;}
.section-head h2{font-size:30px; margin:0 0 10px;}

.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;}
.card{padding:18px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.04);}
.card h3{margin:0 0 8px; font-size:16px;}
.card p{margin:0; color:var(--muted); line-height:1.6;}

.feature-hero{padding-top:56px;}
.feature-visual{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10);}
.feature-visual__top{height:34px; background:rgba(255,255,255,.05);}
.feature-visual__body{padding:16px; background:rgba(10,18,35,.7); display:grid; gap:12px;}
.feature-visual__row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.feature-visual__kpi{height:50px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:10px; display:grid; gap:4px;}
.feature-visual__chart{height:150px; border-radius:12px; background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.12)); border:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; padding:12px;}
.feature-visual__lines{display:grid; gap:8px;}
.feature-visual__lines div{height:12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px;}
.feature-card{padding:18px; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,.04); display:grid; gap:10px;}
.feature-card h3{margin:0; font-size:18px;}
.feature-card p{margin:0; color:var(--muted); line-height:1.6;}

.icon-badge{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; background:rgba(110,231,255,.12); border:1px solid rgba(110,231,255,.25); color:var(--text);}
.icon-badge svg{width:22px; height:22px;}

.steps{margin:0; padding-left:18px; color:var(--muted); display:grid; gap:8px;}
.list-check{margin:0; padding-left:0; list-style:none; display:grid; gap:8px; color:var(--muted);}
.list-check li{position:relative; padding-left:26px;}
.list-check li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--primary); font-weight:700;}

.faq-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.faq-item{padding:16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.03);} 
.faq-item h4{margin:0 0 8px; font-size:16px;}
.faq-item p{margin:0; color:var(--muted); line-height:1.6;}

.seo-block{max-width:80ch; margin:0 auto; text-align:center;}
.seo-block p{color:var(--muted); line-height:1.7;}

.shot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.shot-card{margin:0; padding:16px; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,.03); display:grid; gap:10px;}
.shot-label{display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--muted); font-size:12px; font-weight:700;}
.shot-svg{width:100%; height:auto; border-radius:14px; display:block;}
.shot-card figcaption{color:var(--muted); font-size:13px; line-height:1.6;}

.cta-box{display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:18px; padding:22px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(110,231,255,.10), rgba(139,92,246,.10));}
.cta-box h2{margin:0 0 8px;}

.site-footer{padding:44px 0 20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px;}
.footer-title{margin:0 0 10px; font-weight:700;}
.footer-list{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.footer-list a{color:var(--muted);} 
.footer-list a:hover{color:var(--text);} 
.footer-bottom{margin-top:28px; padding-top:18px; border-top:1px solid var(--border);}

.content-grid{display:grid; gap:12px;}
.content-card{border:1px solid var(--border); border-radius:16px; padding:18px; background:rgba(255,255,255,.04);}
.content-title{margin:0 0 8px;}
.content-title a:hover{text-decoration:underline;}
.pagination{margin-top:18px;}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .faq-grid{grid-template-columns:1fr 1fr;}
  .shot-grid{grid-template-columns:1fr 1fr;}
  .content-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 520px){
  .hero h1{font-size:34px;}
  .hero-metrics{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .shot-grid{grid-template-columns:1fr;}
  .nav{display:none;}
}