/* Growthive minimal design system
   Palette: deep blue, green, yellow
   Deep Blue: #0a2540  Green: #16a34a  Yellow: #facc15
*/
:root{
  --bg:#0b1830;
  --blue:#0a2540;
  --green:#16a34a;
  --yellow:#facc15;
  --text:#0b1830;
  --ink:#0b1220;
  --muted:#55627a;
  --card:#ffffff;
  --wash:#f6f9fc;
  --ring: rgba(22, 163, 74, 0.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:#111827;
  background:#ffffff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{width:min(1120px, 92vw); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; box-shadow:0 2px 12px rgba(0,0,0,.2)}

.site-header{
  position:sticky; top:0; z-index:50; background:#ffffffd9; backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eef2f7;
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0;}
.brand{display:inline-flex; gap:.6rem; align-items:center; text-decoration:none; color:#0a2540; font-weight:700; letter-spacing:.2px}
.brand-text{text-transform:lowercase; font-size:1.05rem}
.brand-mark{display:block}

.nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0; align-items:center}
.nav a{color:#0a2540; text-decoration:none; font-weight:600}
.nav a:hover{opacity:.8}
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius:.75rem; font-weight:700; text-decoration:none;
  color:#fff; background:linear-gradient(135deg, var(--green), #0bb464);
  box-shadow:0 8px 24px rgba(22,163,74,.28);
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; color:#0a2540; border:2px solid #0a2540}
.btn--small{padding:.6rem .8rem; font-size:.95rem}
.btn--inverted{background:#fff; color:#0a2540; border:2px solid #fff}

.nav-toggle{display:none; background:none; border:0;}
.burger, .burger:before, .burger:after{display:block; width:26px; height:3px; background:#0a2540; border-radius:3px; position:relative}
.burger:before, .burger:after{content:""; position:absolute; left:0}
.burger:before{top:-7px} .burger:after{top:7px}

.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 400px at 85% -10%, #e6fff1, transparent 60%),
              radial-gradient(800px 400px at -10% 20%, #eef3ff, transparent 55%),
              linear-gradient(180deg, #ffffff, #f9fbff);
}
.hero .container{display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; padding: 4.5rem 0}
.hero-copy h1{font-size: clamp(2rem, 2.2rem + 1.5vw, 3.2rem); line-height:1.15; color: var(--blue); margin:0 0 .6rem}
.hero-copy p{font-size:1.1rem; color:#334155; margin:.4rem 0 1.2rem}
.actions{display:flex; gap: .8rem; flex-wrap:wrap}
.trust-note{font-size:.95rem; color:#475569}

.hero-card{
  align-self:start; background:#0a2540; color:#fff; border-radius:1rem; padding:1.25rem 1.25rem;
  box-shadow: 0 16px 40px rgba(10, 37, 64, .35);
  border:1px solid rgba(255,255,255,.12);
}
.hero-card ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.hero-card li{display:flex; justify-content:space-between; background:rgba(255,255,255,.06); padding:.6rem .75rem; border-radius:.6rem; font-weight:600}
.hero-card strong{color: var(--yellow)}

.section{padding: 3.5rem 0}
.section-head h2{margin:.2rem 0; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); color:var(--blue)}
.section-head p{margin:.2rem 0 1.2rem; color:#475569}

.grid{display:grid; gap:1.2rem}
.cards-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){ .hero .container{grid-template-columns:1fr} .cards-3{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){ .nav ul{display:none} .nav.open ul{display:flex; flex-direction:column; gap:0} .nav-toggle{display:inline-grid} .cards-3{grid-template-columns:1fr} .hero .container{padding:3rem 0}}

.card{
  background: var(--card);
  border:1px solid #eef2f7;
  border-radius:1rem; padding:1.1rem 1.1rem;
  box-shadow:0 6px 20px rgba(2,8,23,.06);
}
.card h3{margin:.2rem 0 .4rem; color:var(--blue)}
.tick{margin:.4rem 0 0; padding-left:1.2rem}
.tick li{margin:.3rem 0}
.tick li::marker{content:"✔  "}

.process{background: var(--wash); border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7}
.steps{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:1rem 0 0}
@media (max-width: 820px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .steps{grid-template-columns:1fr} }
.steps li{background:#fff; border:1px solid #eef2f7; border-radius:.9rem; padding: .9rem .95rem; display:flex; gap:.7rem; align-items:flex-start}
.steps span{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:999px; background:var(--yellow); color:#111827; font-weight:800; margin-top:2px
}

.cta-slab{background: linear-gradient(135deg, var(--blue), #112b4f); color:#fff}
.slab-inner{display:flex; flex-direction:column; align-items:flex-start; padding: 2.2rem 0}
.slab-inner p{margin:.4rem 0 1rem; color:#e6eefb}

.pricing .price{position:relative}
.pricing .featured{outline:3px solid var(--green); box-shadow:0 12px 40px rgba(22,163,74,.18)}
.price-tag{font-size:2rem; font-weight:800; color:var(--blue); margin:.2rem 0 .6rem}
.disclaimer{color:#64748b; font-size:.9rem}

.faq details{background:#fff; border:1px solid #eef2f7; border-radius:.8rem; padding:.7rem .9rem; margin:.6rem 0}
.faq summary{cursor:pointer; font-weight:700; color:var(--blue)}
.faq p{margin:.6rem 0 0; color:#334155}

.site-footer{border-top:1px solid #eef2f7; background:#ffffff}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; padding: 2rem 0}
@media (max-width: 760px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .footer-grid{grid-template-columns:1fr} }
.list-plain{list-style:none; padding:0; margin:.2rem 0}
.list-plain a{color:#0a2540; text-decoration:none}
.list-plain a:hover{text-decoration:underline}
.footer-bottom{padding: .8rem 0 2rem}
.fineprint{font-size:.9rem; color:#64748b}

:focus-visible{outline:3px solid var(--ring); outline-offset:2px}