/* ---------- Dark Palette ---------- */
:root{
  --bg:#0b0f16;         /* page background (dark) */
  --panel:#111828;      /* cards / panel bg */
  --text:#e6eefb;       /* primary text */
  --muted:#a7b3c8;      /* secondary text */
  --line:#243047;       /* borders/dividers */

  --brand1:#37c36b;     /* green accent */
  --brand2:#3ea0ff;     /* blue accent */

  --cta:#1f9d64;        /* primary button bg */
  --cta-text:#ffffff;   /* primary button text */

  --success:#2ec27e;
  --warning:#f0b429;
  --danger:#ef4444;

  --radius:16px;
  --radius-pill:9999px;
  --container:1100px;

  /* extras */
  --cta-hover:#25b373;
  --cta-active:#188a57;
  --focus-ring:rgba(62,160,255,.5);
  --chip-bg:rgba(62,160,255,.15);
  --chip-brd:rgba(62,160,255,.35);
  --card-bg:rgba(255,255,255,.04);
  --card-brd:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(2,8,23,.55);
  --grad-brand:linear-gradient(135deg,var(--brand2),var(--brand1));
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:10px}
img{max-width:100%;height:auto;display:block}

/* ---------- Header ---------- */
.site-header,.site-footer{max-width:var(--container);margin:auto;padding:12px 16px;
  display:flex;align-items:center;gap:16px}
.site-header{justify-content:space-between}
.logo{height:34px}
.nav{display:flex;gap:18px}
.nav a{color:var(--text);opacity:.85}
.phone{
  display:inline-flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.06);color:var(--text);
  padding:8px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--line);font-weight:800;
}
.phone .i{color:var(--brand1)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate}
.hero picture img{width:100%;height:320px;object-fit:cover;object-position:center;filter:contrast(1.05) saturate(1.05)}
@media (min-width:880px){ .hero picture img{height:420px} }
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 35%,rgba(0,0,0,.55));
  pointer-events:none;
}
.hero-text{position:relative;z-index:1;max-width:var(--container);margin:auto;padding:0 16px;margin-top:-90px}
.hero-text h1{
  margin:0 0 6px;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.6rem,2.2vw + 1rem,2.4rem);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.hero-text p{margin:0;color:var(--muted)}
.hero-text::before{
  content:"";position:absolute;inset:-14px -14px auto -14px;height:calc(100% + 28px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:saturate(160%) blur(8px);
  border:1px solid var(--card-brd);border-radius:18px;box-shadow:var(--shadow);z-index:-1;
}

/* ---------- Buttons / Chips ---------- */
.btn{appearance:none;border:0;border-radius:14px;padding:11px 16px;font-weight:900;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-primary{
  color:var(--cta-text);
  background:var(--cta);
  box-shadow:0 8px 22px rgba(31,157,100,.35);
}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:active{background:var(--cta-active)}
.btn-secondary{
  background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)
}
.btn-icon{padding:10px;width:44px;height:44px;display:inline-grid;place-items:center}
.i{width:20px;height:20px;flex:0 0 auto;fill:currentColor}

.zip-actions{margin-top:12px;display:flex;gap:10px;align-items:center}
.chip{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:var(--radius-pill);
  background:var(--chip-bg);border:1px solid var(--chip-brd);color:var(--text);font-weight:800
}

/* ---------- Sections & Cards ---------- */
.bullets,.cta,.info{max-width:var(--container);margin:22px auto;padding:0 16px}
ul,ol{margin:0;padding:0;list-style:none}

#bullets ul,#benefits{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
#bullets li,#benefits li{
  display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;
  background:var(--card-bg);border:1px solid var(--card-brd);box-shadow:0 1px 0 rgba(255,255,255,.04)
}
#bullets li .i{color:var(--brand2)}
#benefits li .i{color:var(--brand1)}

.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{
  display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;
  background:var(--panel);border:1px dashed var(--line)
}
.steps .i{color:var(--brand2)}

.cta > a.btn{margin-right:10px}
.cta.eligible .mini{margin-left:6px;color:var(--muted)}
.waitlist h2{margin:0 0 10px}

/* ---------- Forms ---------- */
label{font-weight:800;display:block;color:var(--text)}
input{
  width:100%;margin-top:6px;padding:11px;border-radius:12px;border:1px solid var(--line);
  background:#0c1322;color:var(--text)
}
input::placeholder{color:#8ea1be}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mini{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ---------- FAQ ---------- */
details{border-radius:12px;border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
summary{padding:12px 14px;cursor:pointer;font-weight:900;color:var(--text)}
details[open] summary{border-bottom:1px solid var(--line)}
details p{margin:0;padding:12px 14px;color:var(--muted)}

/* ---------- Sticky bar ---------- */
.sticky{
  position:fixed;inset:auto 0 0 0;display:flex;gap:10px;padding:10px 16px;
  background:rgba(10,14,22,.96);border-top:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(8px);box-shadow:0 -6px 16px rgba(0,0,0,.35)
}
.sticky .btn{flex:1}
.btn-icon#stickyGeo{flex:0 0 auto}
@media (min-width:820px){.sticky{display:none}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.55)}
.modal[hidden]{display:none}
.modal-card{
  width:min(520px,calc(100% - 32px));background:var(--panel);border-radius:18px;padding:16px 16px 18px;
  box-shadow:var(--shadow);position:relative;border:1px solid var(--line)
}
.modal-close{position:absolute;margin:8px;right:8px;top:8px;background:transparent;border:0;
  color:var(--text);font-size:28px;line-height:1;cursor:pointer}

/* ZIP form spacing & actions */
#zipForm{display:flex;flex-direction:column;gap:12px}
#zipForm .actions{display:flex;gap:10px;flex-wrap:wrap}
#zipForm input{min-height:44px}

/* ---------- Footer ---------- */
.site-footer{font-size:.95rem;color:var(--muted);justify-content:space-between}
.mini-nav{display:flex;gap:12px}

/* ---------- Utilities ---------- */
.noscript{padding:1rem;text-align:center}
.i-16{width:16px;height:16px}.i-24{width:24px;height:24px}.i-32{width:32px;height:32px}

/* ===== Desktop tightening ===== */
@media (min-width:1024px){
  :root{ --container:980px; }
  .hero picture img{ height:380px; }
  .hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%,rgba(0,0,0,.42)); }
  .hero-text{ margin-top:-72px; padding:14px 16px; }
  .hero-text::before{
    inset:-10px -10px auto -10px; height:auto; min-height:calc(100% + 20px);
    box-shadow:0 6px 18px rgba(2,8,23,.45); border-radius:16px;
  }
  .bullets,.cta,.info{ margin:18px auto; }
  #bullets ul,#benefits{ grid-template-columns:repeat(3,1fr); }
  #bullets li,#benefits li{ padding:10px 12px; border-radius:12px; box-shadow:0 1px 0 rgba(255,255,255,.035); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .steps li{ padding:10px 12px; border-radius:12px; }
}

/* Loading state for geo buttons */
.btn.loading{position:relative;pointer-events:none;opacity:.85}
.btn.loading::after{
  content:"";position:absolute;inset:auto 10px 10px auto;width:16px;height:16px;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- HERO POP STRIP --- */
.hero-pop{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:var(--radius-pill);
  color:var(--text);font-weight:900;
  border:1px solid var(--card-brd);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:0 6px 18px rgba(2,8,23,.35);
  transform:translateZ(0)
}
.pill .i{color:var(--brand2)}
.pill.b1 .i{color:var(--brand1)}
.pill.b2 .i{color:var(--brand2)}
.pill:hover{filter:saturate(1.05)}
@media (prefers-reduced-motion:no-preference){
  .pill{animation:floaty 6s ease-in-out infinite}
  .pill:nth-child(2){animation-delay:.4s}
  .pill:nth-child(3){animation-delay:.8s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
}

/* --- DESKTOP COMPARE CARD --- */
.hero-compare{
  display:none;margin-top:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--card-brd);border-radius:14px;
  box-shadow:0 8px 24px rgba(2,8,23,.45);
  padding:12px;gap:12px
}
.hero-note{margin-top:8px}
.hc-col{flex:1;min-width:0;background:rgba(255,255,255,.02);border-radius:10px;padding:10px}
.hc-col h3{margin:0 0 6px;font-size:1rem;letter-spacing:.2px}
.hc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hc-col li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.hc-col.own{border:1px dashed var(--line)}
.hc-col.lease{border:1px solid var(--card-brd);background:rgba(55,195,107,.06)}
@media (min-width:1024px){ .hero-compare{display:flex} }