:root{
  --bg:#0B1221;
  --bg-soft:#0F1830;
  --card:#101A34;
  --text:#E5ECFF;
  --muted:#99A7C2;
  --brand:#6EE7F2;
  --brand-2:#7C5CFF;
  --accent:#142147;
  --success:#38d89e;
  --warning:#f5b301;
  --error:#f66;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.15), transparent), var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9; text-decoration:underline}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:rgba(11,18,33,.8); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand-text{color:#fff}
.nav{display:flex; align-items:center; gap:18px}
.nav a{padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1221; border:none; padding:10px 16px; border-radius:12px; font-weight:700; box-shadow: var(--shadow); cursor:pointer}
.btn:hover{transform: translateY(-1px)}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff}
.btn-link{background:transparent; color:var(--brand); border:none; padding:0}

.page{padding: 24px}
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  min-height: 60vh; padding:40px 0;
}
.hero-copy h1{font-size: clamp(36px, 5vw, 56px); margin:0 0 10px}
.lead{color:var(--muted); font-size:18px}
.cta{display:flex; gap:12px; margin:18px 0 8px}
.trust-list{display:flex; gap:18px; flex-wrap:wrap; margin:12px 0 0; padding:0; list-style:none; color:#D4DDF3}

.hero-art{position:relative; height:320px}
.orb{position:absolute; border-radius:50%; filter: blur(18px); opacity:.8; animation: float 12s ease-in-out infinite}
.orb-1{width:160px; height:160px; right:30px; top:10px; background: radial-gradient(circle at 30% 30%, #6EE7F2, transparent 60%)}
.orb-2{width:120px; height:120px; right:110px; bottom:10px; background: radial-gradient(circle at 40% 40%, #7C5CFF, transparent 60%); animation-delay:-3s}
.orb-3{width:100px; height:100px; right:210px; top:80px; background: radial-gradient(circle at 60% 40%, #38d89e, transparent 60%); animation-delay:-6s}
@keyframes float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}

.section{padding:40px 0}
.section.accent{background: linear-gradient(180deg,var(--accent), transparent); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:28px; box-shadow: var(--shadow)}
.narrow{max-width:900px; margin:0 auto}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start}

.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.arrow-link::after{content:"→"; margin-left:8px}
.checklist{list-style:none; padding:0; margin:10px 0 0}
.checklist li{padding-left:26px; position:relative; margin:8px 0}
.checklist li::before{content:"✔"; position:absolute; left:0; top:0; color:var(--success)}

.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price-card{background:linear-gradient(180deg, rgba(124,92,255,.12), rgba(110,231,242,.06)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.price{font-size:28px; font-weight:800}
.fineprint{color:var(--muted); font-size:12px}

.logo-badge{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.06); margin:6px; border:1px solid rgba(255,255,255,.08)}

.details{list-style:none; padding:0; margin:0}
.details li{margin:6px 0}

.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.site-footer{margin-top:40px; padding:28px 24px; border-top:1px solid rgba(255,255,255,.08); background:rgba(11,18,33,.8); backdrop-filter: blur(8px)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.06); padding-top:12px; margin-top:12px; color:var(--muted)}

.cookie-banner{position:fixed; z-index:100; left:0; right:0; bottom:0; background:#0b1221; border-top:1px solid rgba(255,255,255,.12); display:none}
.cookie-content{max-width:1100px; margin:0 auto; padding:16px; display:flex; gap:16px; align-items:center; justify-content:space-between}
.cookie-actions{display:flex; gap:10px; flex-shrink:0}

.reveal{opacity:0; transform: translateY(8px); transition: .6s ease}
.reveal.in{opacity:1; transform: translateY(0)}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .nav{display:none}
  .page{padding:16px}
  .cookie-content{flex-direction:column; align-items:flex-start}
}