:root{
  --bg:#0B0B0C;
  --bg-2:#111214;
  --text:#F5F7FA;
  --muted:#A8B0B9;
  --border:#1C1F23;
  --accent:#18C964;
  --accent-12: rgba(24, 201, 100, 0.12);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
}

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; border:0}

.container{max-width:1120px; margin-inline:auto; padding:0 20px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.875rem 1.25rem;
  border:1px solid var(--accent);
  background:linear-gradient(180deg, var(--accent), #12a454);
  color:#072012;
  font-weight:700;
  border-radius:calc(var(--radius) + 2px);
  box-shadow: 0 10px 20px rgba(24,201,100,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(24,201,100,.35); filter: saturate(1.05)}
.btn:focus{ outline:2px solid var(--accent); outline-offset:3px}
.btn.secondary{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow:none
}
.btn.secondary:hover{ border-color: var(--accent); color: var(--accent)}

.badge{
  display:inline-block;
  padding:.375rem .625rem;
  border:1px solid var(--border);
  border-radius:999px;
  color: var(--muted);
  font-size:.875rem;
}

#skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
#skip:focus{ position:static; width:auto; height:auto; padding:.5rem 1rem; background:var(--accent); color:#001b0c }

/* NAV */
.nav{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, #0B0B0C 0%, rgba(11,11,12,.85) 100%);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0}
.brand{ display:flex; align-items:center; gap:.75rem }
.brand img{ width:36px; height:auto }
.brand .name{ font-weight:800; letter-spacing:.5px }

.menu{ display:flex; gap:1rem; align-items:center }
.menu a{ padding:.5rem .75rem; border-radius:8px; color:var(--muted) }
.menu a:focus, .menu a:hover{ color:var(--text); background: #0f1113; outline:none }
.menu .buy-now{ margin-left:.75rem }

.burger{ display:none; border:1px solid var(--border); background:var(--bg-2); color:var(--text); border-radius:10px; padding:.5rem .75rem}
.burger[aria-expanded="true"]{ border-color: var(--accent)}

@media (max-width: 880px){
  .menu{ display:none }
  .menu.open{ display:flex; flex-direction:column; align-items:flex-start; padding:1rem; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; position:absolute; right:20px; top:64px; width:min(92vw,420px)}
  .burger{ display:inline-flex }
}

/* HERO */
.hero{
  position:relative;
  padding: clamp(64px, 8vw, 96px) 0;
  background:
    radial-gradient(800px 300px at 85% 20%, var(--accent-12), transparent 70%),
    linear-gradient(180deg, transparent, rgba(16,16,17,.35));
  border-bottom:1px solid var(--border);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center }
.hero h1{ font-size: clamp(32px, 5vw, 48px); line-height:1.15; margin:0 0 .5rem }
.hero p.lead{ color:#cfd6de; font-size: clamp(16px, 2.5vw, 18px); margin: 0 0 1.25rem }
.hero .trust{ display:flex; gap:.6rem; flex-wrap:wrap; color: var(--muted); font-size:.95rem }
.hero .actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin: 1rem 0 1.25rem }

.hero .art{
  min-height: 260px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(650px 120px at 70% 5%, rgba(24,201,100,.18), transparent 60%),
    radial-gradient(500px 200px at 30% 110%, rgba(24,201,100,.12), transparent 60%),
    linear-gradient(180deg, #0d0f10, #0b0b0c);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}

.hero .art img{ width:200px; height:auto; filter: drop-shadow(0 8px 24px rgba(24,201,100,.2)); }

@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr }
}

/* SECTIONS */
.section{ padding: clamp(56px, 7vw, 84px) 0; border-bottom:1px solid var(--border) }
.section h2{ font-size: clamp(24px, 3.6vw, 32px); margin:0 0 .75rem }
.section .sub{ color:var(--muted); margin-top:0 }

.chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.chips .chip{ border:1px solid var(--border); padding:.5rem .75rem; border-radius:999px; color:#c7d0d7; font-size:.95rem; background:#0f1113 }

.cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px }
.card{
  border:1px solid var(--border);
  background: #0f1113;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.card h3{ margin-top:0; margin-bottom:.25rem }
.card p{ color:#cfd6de }
.card ul{ margin:.75rem 0 0 1rem; color:#d9e1e8 }
.card li{ margin:.375rem 0 }

.note{ color: var(--muted); font-size:.9rem; margin-top: .75rem }

@media (max-width: 860px){
  .cards{ grid-template-columns: 1fr }
}

/* BENEFITS */
.benefits{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.benefit{ border:1px solid var(--border); border-radius: var(--radius); background:#0f1113; padding:1rem }
.benefit h4{ margin:0 0 .25rem }
.benefit p{ margin:.25rem 0 0; color:#cfd6de }

@media (max-width: 960px){
  .benefits{ grid-template-columns: 1fr }
}

/* SOCIAL */
.quotes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.quote{ padding:1rem; border:1px solid var(--border); border-radius: var(--radius); background:#0f1113; color:#dfe6ed; font-style: italic }
@media (max-width: 960px){
  .quotes{ grid-template-columns: 1fr }
}

/* PRICING */
.pricing-wrap{ display:grid; grid-template-columns: 1fr; gap:20px; justify-items:center }
.price-card{
  width:min(680px, 100%);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(600px 120px at 80% 0%, rgba(24,201,100,.12), transparent 60%),
    #0f1113;
  padding: clamp(20px, 3.5vw, 32px);
  box-shadow: var(--shadow);
}
.price-card h3{ margin:0 0 .25rem }
.price{ font-size: clamp(22px, 4vw, 32px); font-weight:800; color:#e9f2f0; margin:.25rem 0 1rem }
.checks{ list-style:none; padding:0; margin:1rem 0; color:#d9e1e8 }
.checks li{ margin:.5rem 0; position:relative; padding-left:1.5rem }
.checks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800 }

.trust{ color:#c7d0d7 }
.disclaimer{ color: var(--muted); font-size:.9rem; margin-top:1rem }

/* FOOTER */
footer{ padding:28px 0; color:#c7d0d7 }
footer .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
footer nav a{ color:#9aa4af; margin-right:1rem }
footer nav a:hover{ color:#dfe6ed }

/* Utility */
.hidden-visually{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
}