/* -------------------------
   Base + Theme
-------------------------- */
:root{
  --bg: #0b1220;
  --bg-alt: #0e172a;
  --card: #111a30;
  --text: #e6ecff;
  --muted: #a7b1cc;
  --brand: #6aa6ff;        /* primary */
  --brand-2: #8be28b;      /* accent */
  --accent: #ffd36a;       /* highlight */
  --border: #213156;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --container: 1200px;
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #0a1020 100%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; display:block }
a{ color: var(--brand); text-decoration: none }
a:hover{ text-decoration: underline }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px; background: #fff; color:#000; border-radius: 6px;
}

.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 20px }
.center{ text-align:center }

/* -------------------------
   Buttons
-------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 700; text-decoration:none; border-radius: 999px;
  padding: 12px 20px; border: 2px solid transparent; box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }

.btn-block{ display:flex; width:100% }
.btn-lg{ padding: 14px 24px; font-size: 1.05rem }
.btn-xxl{ padding: 18px 32px; font-size: 1.15rem }

.btn-primary{
  background: linear-gradient(135deg, var(--brand) 0%, #3f86ff 100%);
  color: #03102b; border-color: #7fb2ff;
}
.btn-primary:hover{ box-shadow: 0 12px 36px rgba(63,134,255,.35) }

.btn-outline{
  background: transparent; color: var(--text);
  border-color: #425b94;
}
.btn-outline:hover{ background: rgba(255,255,255,.06) }

/* -------------------------
   Header / Nav
-------------------------- */
.site-header{
  position: sticky; top:0; z-index: 50; backdrop-filter: blur(14px);
  background: rgba(7,12,26,.65); border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-wrap{ display:flex; align-items:center; justify-content:space-between; height:68px }

.logo{ font-size:1.25rem; font-weight:900; letter-spacing:.3px }
.logo span{ color: var(--brand-2) }

.nav .menu{
  list-style:none; display:flex; gap: 22px; margin:0; padding:0;
}
.menu li a{ color: var(--text); font-weight:600 }
.menu-cta a{ text-decoration: none }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid #2a3a61; background:transparent; border-radius: 10px;
}
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#cfe1ff; margin:5px auto }
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .menu{
    position: fixed; inset: 68px 0 auto 0; background: rgba(7,12,26,.98);
    flex-direction: column; gap: 0; padding: 16px; transform: translateY(-110%);
    transition: transform .22s ease; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .menu.open{ transform: translateY(0) }
  .menu li{ border-top: 1px solid rgba(255,255,255,.06) }
  .menu li a{ display:block; padding: 14px 10px }
  .menu-cta{ padding: 10px }
  body.nav-open{ overflow:hidden }
}

/* -------------------------
   Hero
-------------------------- */
.hero{
  padding: 64px 0 32px;
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(106,166,255,.25), transparent 60%),
    radial-gradient(1000px 500px at 90% -20%, rgba(139,226,139,.18), transparent 60%);
}
.hero-grid{
  display:grid; gap: 32px; align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
.lead{ font-size:1.125rem; color: var(--muted); max-width: 45ch }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px }
.hero-trust{ margin:18px 0 0; padding:0; list-style: none; display:flex; flex-wrap: wrap; gap: 14px; color:#c7d4ff }
.hero-trust li{ background: rgba(255,255,255,.06); padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.08) }

.hero-art{ display:flex; justify-content:center }
.card{
  background: linear-gradient(180deg, var(--card) 0%, #0f1933 100%);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow);
}
.price-peek{ width: 100%; max-width: 360px }
.price-row{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom: 1px dashed #2a3a61; color:#cfe1ff }
.price-row:last-child{ border-bottom: none }
.price-row.best{ background: rgba(255,211,106,.08); border-radius: 12px; margin-top: 8px; padding: 12px }
.price-row .highlight{ color: var(--accent) }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
  .hero{ padding: 48px 0 }
}

/* -------------------------
   Sections
-------------------------- */
.section{ padding: 70px 0 }
.section-alt{ background: linear-gradient(180deg, var(--bg-alt) 0%, #0d1630 100%) }
.section-head{ text-align:center; max-width: 800px; margin: 0 auto 28px }
.section-head p{ color: var(--muted) }

/* Features */
.features-grid{
  display:grid; gap: 18px; grid-template-columns: repeat(4, 1fr);
}
.feature{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow) }
.feature .icon{ font-size: 24px; margin-bottom: 6px }
@media (max-width: 980px){
  .features-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 620px){
  .features-grid{ grid-template-columns: 1fr }
}

/* Compare */
.compare{
  display:grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 24px;
}
.compare-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 18px }
.compare-card.best{ outline: 2px solid var(--accent) }
.compare-price{ font-size: 1.35rem }
@media (max-width: 700px){
  .compare{ grid-template-columns: 1fr }
}

/* Plans */
.plans-grid{
  display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
}
.plan{
  position: relative;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; display:flex; flex-direction:column; gap: 14px; box-shadow: var(--shadow)
}
.plan .badge{
  position:absolute; top: 12px; right: 12px; background: var(--accent); color:#1b1200;
  padding: 6px 10px; border-radius: 999px; font-size:.85rem; font-weight:800;
}
.plan-points{ list-style: none; margin:0; padding:0; color:#cfe1ff }
.plan-points li{ padding-left: 22px; position: relative; margin: 6px 0 }
.plan-points li:before{ content:"✓"; position:absolute; left:0; top:0; color: var(--brand-2) }
.plan-pricing{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; display:grid; gap:6px }
.plan-pricing .best{ background: rgba(255,211,106,.08); border-radius: 10px; padding: 8px 10px }
.plan .highlight{ color: var(--accent) }
.featured{ transform: translateY(-4px); outline: 2px solid #3f86ff33 }
@media (max-width: 980px){
  .plans-grid{ grid-template-columns: 1fr; }
}

/* Steps */
.steps{
  counter-reset: step; list-style: none; padding:0; margin: 0 auto 16px; max-width: 780px;
}
.steps li{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px 16px 16px 56px; margin: 0 0 12px; position: relative; box-shadow: var(--shadow)
}
.step-num{
  position:absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: var(--brand); color:#03102b; font-weight:900
}

/* About / Trust */
.about-grid{
  display:grid; gap: 18px; grid-template-columns: 1.2fr .8fr;
}
.about-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 20px }
.checklist{ list-style:none; padding:0; margin: 0 0 14px }
.checklist li{ padding-left: 24px; position: relative; margin: 8px 0 }
.checklist li:before{ content:"✔"; position:absolute; left:0; top:0; color: var(--brand-2) }
.stat{ color:#cfe1ff }
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr }
}

/* Blogs */
.blog-grid{
  display:grid; gap:18px; grid-template-columns: repeat(3, 1fr);
}
.post{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 18px }
.post h3{ margin-top:4px }
.post .post-link{ display:inline-block; margin-top:6px; font-weight:700 }
@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr }
}

/* FAQ */
.faq details{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:after{
  content:"+"; float:right; font-weight:900; color:#cfe1ff
}
.faq details[open] summary:after{ content:"–" }
.faq-a{ color:#cfe1ff; margin-top: 10px }

/* Final CTA */
.final-cta{
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(63,134,255,.18), transparent 60%),
    radial-gradient(800px 400px at 80% 80%, rgba(255,211,106,.14), transparent 60%);
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.final-cta-wrap{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap }
.final-copy h2{ margin:0 0 6px }
@media (max-width: 720px){
  .final-cta-wrap{ flex-direction: column; align-items: flex-start }
}

/* Footer */
.site-footer{
  background: #070d1b; border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px
}
.footer-grid{
  display:grid; gap: 18px; grid-template-columns: 1.2fr .8fr .8fr; padding: 28px 0;
}
.footer-grid h4{ margin: 6px 0 10px }
.footer-grid ul{ list-style:none; margin:0; padding:0 }
.footer-grid li{ margin: 6px 0 }
.footer-brand .small{ color: var(--muted) }
.footer-legal .small{ color: var(--muted) }
.tiny{ padding: 10px 0 22px }
.tiny-note{ color: #9fb1dd; text-align:center; margin: 0 }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr }
}

/* Utilities */
.muted{ color: var(--muted) }
.footnote{ color: var(--muted); text-align:center; margin-top: 12px }