/* LeadPattern – Pure CSS design (no JS) */
/* ---------- Theme ---------- */
:root{
  --bg: #0b0f1a;
  --bg-elev: #0f1422;
  --card: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
  --text: #e8edf7;
  --muted: #a7b1c2;
  --brand-1: #5a8cff;   /* primary */
  --brand-2: #87f6cf;   /* accent */
  --warn: #ffd166;
  --success: #74e39a;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f9fc;
    --bg-elev: #ffffff;
    --card: rgba(20,20,30,0.04);
    --stroke: rgba(20,20,30,0.12);
    --text: #10131a;
    --muted: darkgrey;
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 20% -10%, rgba(90,140,255,.25), transparent 60%) ,
                     radial-gradient(1200px 600px at 90% 10%, rgba(135,246,207,.18), transparent 60%) ,
                     var(--bg);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.section{padding:72px 0}
.grid{display:grid; gap:24px}
.center{text-align:center}

/* ---------- Nav (CSS-only burger) ---------- */
.header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(12,16,28,.75), rgba(12,16,28,.4));
  border-bottom: 1px solid var(--stroke);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand svg{width:28px; height:28px}
.nav a{color:var(--muted)}
.nav a.active{color:var(--text)}
.nav .links{display:flex; gap:22px; align-items:center}
.cta{padding:10px 16px; border-radius:12px; background:linear-gradient(135deg,var(--brand-1),#7fa3ff); color:#fff; font-weight:600}
.ghost{padding:10px 16px; border-radius:12px; border:1px solid var(--stroke)}
/* burger */
#nav-toggle{display:none}
.burger{display:none; cursor:pointer; padding:10px; border-radius:10px; border:1px solid var(--stroke)}
@media (max-width: 880px){
  .burger{display:block}
  .nav .links{position:absolute; inset:70px 0 auto 0; display:grid; gap:10px; background:var(--bg-elev);
    border-bottom:1px solid var(--stroke); padding:16px 20px; transform:scaleY(0); transform-origin:top; transition:.2s}
  #nav-toggle:checked ~ .links{transform:scaleY(1)}
}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 48px; position:relative; overflow:hidden;
}
.hero h1{
  font-size: clamp(36px, 6vw, 54px);
  line-height:1.05; margin:0 0 12px;
}
.hero p{color:var(--muted); font-size: clamp(16px, 2vw, 18px)}
.hero .actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.badge{
  display:inline-flex; align-items:center; gap:8px; color:#0e1a12; background:linear-gradient(135deg, var(--brand-2), #b6ffe6);
  border-radius:999px; padding:6px 12px; font-weight:700; letter-spacing:.2px; width:max-content
}

/* ---------- Cards / UI ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow);
}
.card:hover{transform: translateY(-2px); transition:.2s}
.kbd{border:1px solid var(--stroke); border-bottom-width:2px; padding:2px 8px; border-radius:10px; font-weight:600; font-size:12px}

/* ---------- Phone mockup (CSS only) ---------- */
.phone{
  width: 320px; max-width:100%; aspect-ratio: 9/19; border-radius: 32px; padding:14px;
  background: linear-gradient(145deg,#101728,#0b0f1a); border:1px solid var(--stroke); position:relative; box-shadow: 0 20px 60px rgba(0,0,0,.5)
}
.phone:before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:36%; height:6px; border-radius:6px; background:#1c2436}
.chat{
  height:100%; border-radius:22px; padding:14px; background:linear-gradient(180deg,#0f1627,#0a0e19); border:1px solid #1e2a44; display:grid; gap:8px
}
.bubble{
  max-width:78%; padding:10px 12px; border-radius:16px; font-size:14px; line-height:1.35; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)
}
.bubble.left {background: rgba(255,255,255,.06); color:#e8edf7; border-top-left-radius:6px}
.bubble.right{background: linear-gradient(135deg,#5a8cff,#7fa3ff); color:white; justify-self:end; border-top-right-radius:6px}
.bubble .tiny{display:block; opacity:.7; font-size:11px; margin-top:6px}

/* ---------- Feature grid ---------- */
.features{grid-template-columns: repeat(12, 1fr)}
.feature{grid-column: span 4; min-height: 180px}
@media (max-width: 960px){ .feature{grid-column: span 6} }
@media (max-width: 640px){ .feature{grid-column: span 12} }

/* ---------- Pricing ---------- */
.pricing{grid-template-columns: repeat(12,1fr)}
.plan{grid-column: span 4; display:grid; gap:14px}
.plan .price{font-size:36px; font-weight:800}
.plan ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.plan li{display:flex; align-items:center; gap:10px; color:var(--muted)}
.tick{width:18px; height:18px; border-radius:50%; outline:2px solid rgba(135,246,207,.5); background: radial-gradient(circle at 30% 30%, var(--brand-2), #8cf0d2)}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--stroke); padding:24px 0; color:var(--muted); background:linear-gradient(180deg, transparent, rgba(0,0,0,.25))
}
.footer a{color:var(--text); opacity:.85}
.footer .row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between}

/* ---------- Utility ---------- */
.pill{padding:6px 12px; border:1px dashed var(--stroke); border-radius:999px; color:var(--muted)}
.hr{height:1px; background:var(--stroke); margin:26px 0}