:root{
  --bg: #0b0d12;
  --panel: #11141b;
  --muted: #a9b1c3;
  --text: #e8ecf8;
  --brand: #7c5cff;
  --brand-2: #3ee6a5;
  --border: #232836;
  --card: #121620;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img{max-width:100%;display:block}

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

.muted{color:var(--muted)}
.btn{
  display:inline-block; padding:.9rem 1.1rem; border-radius:14px;
  background:linear-gradient(135deg,var(--brand),#9a85ff);
  color:white; font-weight:700; text-decoration:none; border:none; cursor:pointer;
  box-shadow: var(--shadow); transition: transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{
  background: transparent;
  border:1px solid var(--border); color:var(--text)
}
.btn--sm{padding:.6rem .9rem}
.btn--full{display:block; text-align:center; width:100%}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(11,13,18,.7); backdrop-filter: blur(8px); border-bottom:1px solid var(--border)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.logo{font-weight:900; font-size:1.35rem; letter-spacing:.2px}
.logo span{color:var(--brand)}
.nav__links{display:flex; gap:1rem; align-items:center}
.nav__links a{color:var(--text); text-decoration:none; padding:.5rem .6rem; border-radius:10px}
.nav__links a:hover{background:rgba(255,255,255,.05)}
.hamburger{display:none; width:44px; height:44px; border:1px solid var(--border); background:transparent; border-radius:10px; cursor:pointer}
.hamburger span{display:block; height:2px; background:#fff; margin:7px 10px}

/* HERO */
.hero{padding: clamp(3rem, 7vw, 6rem) 0}
.grid{display:grid; gap:1.5rem}
.grid--2{grid-template-columns: 1.1fr .9fr}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.hero__copy h1{font-size: clamp(2rem, 4.2vw, 3.2rem); line-height:1.15; margin:0 0 .6rem}
.hero__cta{display:flex; gap:.8rem; margin:1rem 0 1.2rem}
.trust-badges{display:flex; flex-wrap:wrap; gap:.6rem}
.trust-badges span{font-size:.9rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px}
.hero__visual{position:relative}
.hero__visual img{border-radius:18px; border:1px solid var(--border)}
.play-badge{
  position:absolute; inset:auto 14px 14px auto; border:none; border-radius:999px;
  width:56px; height:56px; font-size:1.1rem; cursor:pointer; color:#000;
  background:linear-gradient(135deg,var(--brand-2),#b8ffd8); box-shadow: var(--shadow);
}

/* SECTIONS */
.section{padding: clamp(3rem, 7vw, 5rem) 0}
.section.alt{background: var(--panel); border-block:1px solid var(--border)}
.section__title{font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 .6rem}
.section__subtitle{margin:0 0 1.4rem}

/* CARDS */
.cards{margin-top:1.2rem}
.card{
  background: var(--card); border:1px solid var(--border); border-radius:16px;
  padding:1.1rem 1rem; box-shadow: var(--shadow); min-height: 152px;
}
.card h3{margin:.2rem 0 .4rem}
.card--highlight{position:relative; outline:2px solid var(--brand)}
.card--highlight .badge{
  position:absolute; top:-12px; right:14px; background:var(--brand);
  color:#fff; font-size:.8rem; padding:.25rem .5rem; border-radius:999px
}

/* STEPS */
.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.step{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem}
.step__num{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand),#9a85ff); font-weight:800
}

/* PRICING */
.toggle{display:flex; gap:.6rem; align-items:center; justify-content:center; margin:.8rem 0 1.2rem}
.switch{position:relative; width:48px; height:26px; display:inline-block}
.switch input{display:none}
.slider{
  position:absolute; cursor:pointer; inset:0; background:#333; border-radius:999px;
}
.slider:before{
  content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s
}
.switch input:checked + .slider:before{transform: translateX(22px)}
.price{font-size:1.8rem; font-weight:800; margin:.4rem 0}
.save{color:var(--brand-2); font-weight:700}
.list{padding-left:1.1rem; margin: .6rem 0 1rem}
.list li{margin:.3rem 0}

/* SLIDER */
.slider{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); background: var(--card)}
.slides{display:flex; transition: transform .4s ease}
.slide{min-width:100%; padding:1.2rem}
.quote{font-size:1.1rem; margin-bottom:.6rem}
.person{display:flex; gap:.7rem; align-items:center}
.person img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.slider__controls{display:flex; gap:.4rem; justify-content:center; padding:.6rem 0 .9rem}
.dot{width:10px; height:10px; border-radius:50%; border:1px solid var(--border); background:transparent; cursor:pointer}
.dot.active{background:var(--brand)}

/* ACCORDION */
.acc{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.6rem .9rem; margin:.5rem 0}
.acc summary{cursor:pointer; font-weight:600}
.acc[open]{outline:1px solid var(--brand)}

/* FORM */
.form{margin-top:1rem}
.form input,.form textarea{
  width:100%; background:#0f1320; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:.8rem; outline:none;
}
.form input:focus,.form textarea:focus{border-color:var(--brand)}
.form .grid--2{grid-template-columns:1fr 1fr}

/* FOOTER */
.footer{padding:1.4rem 0; border-top:1px solid var(--border); background:#0a0d15}
.footer__inner{display:flex; align-items:center; justify-content:space-between}

/* ANIMATIONS (on scroll) */
.reveal{opacity:0; transform: translateY(12px); transition: .4s ease}
.reveal.visible{opacity:1; transform:none}
.reveal-up{opacity:0; transform: translateY(16px); transition: .6s ease}
.reveal-up.visible{opacity:1; transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}

/* MODAL */
.modal{position:fixed; inset:0; display:none; place-items:center}
.modal.show{display:grid}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.modal__content{
  position:relative; z-index:2; width:min(920px, 92%); background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--border)
}
.modal__content video{width:100%; height:auto; display:block}
.modal__close{
  position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:8px; border:none; cursor:pointer;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav__links{display:none; position:absolute; right:4%; top:64px; background:#0d111a; border:1px solid var(--border); border-radius:12px; padding:.6rem; flex-direction:column; width:240px}
  .nav__links.show{display:flex}
  .hamburger{display:block}
}