:root{
  --bg:#0b0b0f;
  --bg-soft:#101018;
  --card:#121222;
  --primary:#d4145a;
  --secondary:#3a1c71;
  --txt:#f2f3f8;
  --muted:#a8abbd;
  --glow: 0 0 40px rgba(212,20,90,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Nav */
.nav{
  position:fixed; inset:0 0 auto 0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index:50;
}
.nav .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.5px}
.nav .nav-links a{color:#ddd;text-decoration:none;margin:0 10px}
.nav .nav-links a:hover{color:#fff}
.nav .btn{margin-left:8px}

/* Buttons */
.btn{background:var(--primary); color:#fff; border:none; padding:12px 22px; border-radius:28px;
  font-weight:700; text-decoration:none; display:inline-block; box-shadow:var(--glow); transition:.25s transform, .25s opacity}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent; outline:1px solid rgba(255,255,255,.25)}
.btn.lg{padding:14px 26px; font-size:1.05rem}
.btn.xl{padding:16px 30px; font-size:1.15rem}
.btn.sm{padding:8px 14px; font-size:.9rem}

/* Hero */
.hero{position:relative; height:100vh; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.1)}
.hero-overlay{position:absolute; inset:0; background: radial-gradient(85% 60% at 50% 30%, rgba(0,0,0,.05), rgba(0,0,0,.25)), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.3));}
.hero-content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 16px}
.hero .glow{font-size:clamp(40px,8vw,96px); margin:0 0 10px; background:linear-gradient(45deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 8px 40px rgba(212,20,90,.25)}
.subtitle{max-width:920px; color:#e6e6ee}
.hero-actions{display:flex; gap:14px; margin-top:20px}
.badges{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.badge{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:6px 12px; border-radius:999px; font-size:.8rem}

/* Sections */
.section{padding:80px 16px; max-width:1140px; margin:0 auto}
.section.alt{background:linear-gradient(180deg, rgba(58,28,113,.07), transparent)}
.section-title{text-align:center; font-size:clamp(22px,4vw,36px); margin-bottom:28px; color:#fff}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); padding:20px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.card h3{margin:8px 0 8px; color:var(--primary)}

.steps{list-style:none; padding:0; margin:10px auto 20px; max-width:900px; display:grid; gap:16px}
.steps li{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid rgba(255,255,255,.08); padding:16px; border-radius:14px}
.steps .n{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(45deg,var(--primary),var(--secondary)); font-weight:700}

/* FAQ */
.faq details{background:var(--card); border:1px solid rgba(255,255,255,.08); padding:16px; border-radius:12px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:.5rem 0 0}

/* Footer */
.footer{padding:26px 16px; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); background:#0d0d14}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.75); z-index:100; opacity:0; pointer-events:none; transition:.3s}
.modal[open], .modal.show{opacity:1; pointer-events:auto}
.modal-content{background:var(--bg-soft); border:1px solid rgba(255,255,255,.15); border-radius:16px; max-width:520px; width:92%; padding:24px; text-align:center; box-shadow:0 20px 80px rgba(0,0,0,.5)}
.modal-actions{display:flex; justify-content:center; gap:10px; margin-top:12px}
.smallprint{display:block; margin-top:10px; color:var(--muted); font-size:.85rem}

/* Cookie bar */
.cookiebar{position:fixed; left:12px; right:12px; bottom:12px; padding:12px 14px; display:flex; justify-content:space-between; gap:10px; background:rgba(17,17,34,.9); border:1px solid rgba(255,255,255,.15); border-radius:12px; backdrop-filter:blur(6px); z-index:90}
.cookiebar .btn{box-shadow:none}
@media (max-width:640px){ .cookiebar{flex-direction:column; align-items:flex-start} }

.hero-logo {
  max-width: 500px;
  width: 80%;
  height: auto;
  margin: 0 auto 20px;
  display: block;
  filter: drop-shadow(0 0 20px rgba(212,20,90,0.4));
}