:root{
  --bg:#0e0e10;
  --bg-soft:#131316;
  --card:#16171a;
  --stroke:#24252a;
  --text:#f5f5f7;
  --muted:#b6b7bb;
  --red:#e53935;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, #1a1b1f 0%, var(--bg) 60%) fixed;
}

.container{width:min(1120px, 92%); margin:0 auto}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:0.3px}
.brand.small{opacity:.9; font-size:.95rem}
.brand-mark{width:18px;height:18px;border-radius:6px;background:linear-gradient(180deg,var(--red), #b21f1b)}
.brand-name{opacity:.92}
.nav{display:flex; gap:18px}
.nav-link{color:var(--muted); text-decoration:none; font-size:.95rem}
.nav-link:hover{color:var(--text)}
.nav .cta{padding:8px 14px;border:1px solid var(--stroke); border-radius:12px}
.nav .cta:hover{border-color:var(--red); color:var(--white)}

.hero{position:relative; min-height:72vh; display:flex; align-items:center}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(60%) brightness(.35)}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(800px 400px at 10% -10%, rgba(229,57,53,.35), transparent 60%)}
.hero-content{position:relative; z-index:2; padding:6vh 0 10vh}
.hero h1{font-size: clamp(32px, 6vw, 56px); line-height:1.05; margin:0 0 14px}
.hero .sub{max-width:780px; color:var(--muted); font-size:1.1rem}
.hero-actions{display:flex; gap:14px; margin-top:18px}
.btn{appearance:none; border:none; cursor:pointer; text-decoration:none; padding:12px 18px; border-radius:14px; font-weight:600; transition:.2s ease-out}
.btn-primary{background:linear-gradient(180deg,var(--red), #b21f1b); color:var(--white); box-shadow:0 10px 30px rgba(229,57,53,.15)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 36px rgba(229,57,53,.25)}
.btn-ghost{background:transparent; border:1px solid var(--stroke); color:var(--text)}
.btn-ghost:hover{border-color:var(--red); color:var(--white)}
.btn-outline{background:transparent; border:1px solid var(--stroke); color:var(--text)}
.btn-outline:hover{border-color:var(--red)}

.hero-meta{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.chip{border:1px solid var(--stroke); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:.9rem}

.proof{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; padding:64px 0}
.proof-card{background:linear-gradient(180deg, #17181b, #111215); border:1px solid var(--stroke); border-radius:18px; padding:22px}
.score{display:flex; align-items:center; gap:10px; font-weight:700; font-size:28px}
.score-before{color:#d0d1d6}
.score-after{color:var(--white)}
.score-arrow{color:var(--muted)}
.muted{color:var(--muted); margin:4px 0 12px}
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.ticks li{display:flex; align-items:center; gap:10px; color:#dbdcdf}
.mock-card{background:linear-gradient(180deg, #191a1e, #0f1013); border:1px solid var(--stroke); border-radius:18px; display:grid; place-items:center; overflow:hidden}
.mock{width:100%; height:100%; object-fit:cover; opacity:.92; transform:scale(1.02)}

.how{padding:20px 0 8px}
.how h2{font-size:32px; margin-bottom:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tile{background:linear-gradient(180deg, #17181b, #101114); border:1px solid var(--stroke); border-radius:16px; padding:18px}
.tile-icon img{width:26px; height:26px; opacity:.9}
.tile h3{margin:10px 0 6px}

.plans{padding:36px 0 12px}
.plans h2{font-size:32px; margin-bottom:16px}
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.plan{background:linear-gradient(180deg, #17181b, #101114); border:1px solid var(--stroke); border-radius:16px; padding:20px; position:relative}
.plan .badge{position:absolute; top:12px; right:12px; font-size:.8rem; border:1px solid var(--stroke); padding:4px 8px; border-radius:999px; color:var(--muted)}
.plan-sub{color:var(--muted)}
.plan-list{list-style:none; padding:0; margin:12px 0 16px; display:grid; gap:8px}
.featured{border-color:rgba(229,57,53,.75); box-shadow:0 10px 40px rgba(229,57,53,.12)}

.cta{padding:56px 0 26px}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(180deg, #191a1e, #0f1013); border:1px solid var(--stroke); border-radius:18px; padding:22px}
.footer{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 6px 0; color:var(--muted)}

@media (max-width: 960px){
  .proof{grid-template-columns:1fr; }
  .grid-3{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column; align-items:flex-start}
}