:root{
  --bg:#0b1120; --bg2:#0f172a; --card:#131c31; --card2:#18233d;
  --line:#22304d; --text:#e8edf7; --muted:#9aa8c4; --brand:#38bdf8; --brand2:#6366f1;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --shadow:0 10px 40px rgba(0,0,0,.45);
  --r:16px;
}
html[data-theme="light"]{
  --bg:#f4f7fc; --bg2:#eaf0f9; --card:#ffffff; --card2:#f2f6fd;
  --line:#dbe3f1; --text:#101828; --muted:#5a6a86; --shadow:0 10px 30px rgba(20,40,80,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.wrap{width:min(1120px,92vw);margin:0 auto}
.price{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:800}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:16px;min-height:74px;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
/* Logo enlarged & always visible against the dark background (customer feedback). */
.logo,.brand svg,.brand img{height:44px;width:auto;max-width:210px}
.brand svg{display:block}
footer .logo{height:40px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-links a{padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem;min-height:40px;display:inline-flex;align-items:center}
.nav-links a:hover{color:var(--text);background:var(--card)}
.btn{cursor:pointer;border:0;border-radius:12px;font-weight:700;font-size:1rem;padding:13px 22px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .08s ease,filter .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#04121f}
.btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn-sm{padding:9px 14px;min-height:40px;font-size:.9rem}
.icon-btn{cursor:pointer;background:var(--card);border:1px solid var(--line);color:var(--text);width:44px;height:44px;border-radius:11px;font-size:1.1rem;display:grid;place-items:center}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/stock-1.webp');background-size:cover;background-position:center;opacity:.28}
.hero-grad{position:absolute;inset:0;background:linear-gradient(120deg,var(--bg) 20%,transparent 70%),radial-gradient(60% 90% at 80% 10%,rgba(99,102,241,.25),transparent)}
.hero-in{position:relative;padding:88px 0 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);padding:7px 14px;border-radius:999px}
h1.hero-h{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;font-weight:900;margin:22px 0 18px;max-width:16ch}
.hero-sub{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--muted);max-width:56ch;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;color:var(--muted);font-size:.9rem}
.trust-row b{color:var(--text)}

/* Sections */
section{padding:72px 0}
.sec-head{max-width:640px;margin:0 0 40px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;font-weight:800;margin:0 0 12px}
.sec-head p{color:var(--muted);font-size:1.08rem;margin:0}
.kicker{color:var(--brand);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}

.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.step-card .n{width:38px;height:38px;border-radius:11px;background:linear-gradient(120deg,var(--brand),var(--brand2));color:#04121f;font-weight:900;display:grid;place-items:center;margin-bottom:14px}
.step-card h3{margin:0 0 8px;font-size:1.2rem}
.step-card p{margin:0;color:var(--muted)}

/* Product cards */
.plan{display:flex;flex-direction:column;min-height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative}
.plan .tech{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.plan h3{margin:8px 0 4px;font-size:1.3rem}
.plan .prov{color:var(--muted);font-size:.9rem}
.plan .speed{display:flex;gap:16px;margin:16px 0;color:var(--text)}
.plan .speed b{display:block;font-size:1.35rem}
.plan .speed span{color:var(--muted);font-size:.8rem}
.plan .blurb{color:var(--muted);font-size:.92rem;flex:1;margin:0 0 18px}
.plan .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.plan .price-row .price{font-size:1.9rem;color:var(--text)}
.plan .price-row small{color:var(--muted);font-size:.85rem}

/* Feasibility screen */
.feas{padding:44px 0 80px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
label{display:block;font-weight:600;margin:0 0 7px;font-size:.92rem}
.hint{color:var(--muted);font-size:.82rem;margin:6px 0 0}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:13px 14px;font-size:1rem;font-family:inherit;min-height:48px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field{margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pac-container{z-index:9999!important}

/* Map-pin fallback (no typed GPS fields) */
.map-pin{width:100%;height:260px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--bg2);margin-bottom:6px}
.pin-grid{width:100%;height:100%;cursor:crosshair;position:relative;background:
  repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line) 60%,transparent) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--line) 60%,transparent) 23px 24px),
  radial-gradient(60% 80% at 50% 40%,color-mix(in srgb,var(--brand) 14%,transparent),transparent)}
.pin-grid.placed::after{content:"📍";position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-100%);font-size:1.6rem}

.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:700}
.badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.badge.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.result-banner{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;margin:20px 0}
.result-banner.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.result-banner.bad{background:color-mix(in srgb,var(--bad) 10%,transparent);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.result-banner .em{font-size:1.6rem}
.soon-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.soon-row:last-child{border-bottom:0}

.chooser .plan{cursor:pointer;transition:border-color .15s,transform .1s}
.chooser .plan:hover{border-color:var(--brand)}
.chooser .plan.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}

.quote-box{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:8px}
.quote-line{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line)}
.quote-line:last-child{border-bottom:0}
.quote-line.total{font-size:1.15rem;font-weight:800;border-bottom:0;border-top:2px solid var(--line);margin-top:6px;padding-top:14px}

.confirm-hero{text-align:center;padding:40px 0}
.confirm-hero .big{font-size:3.4rem}
.ref{font-family:ui-monospace,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--brand)}

.steps-ind{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.steps-ind .s{flex:1;min-width:120px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:.85rem;color:var(--muted);font-weight:600}
.steps-ind .s.active{border-color:var(--brand);color:var(--text)}
.steps-ind .s.done{color:var(--ok)}

/* Footer */
footer{border-top:1px solid var(--line);padding:48px 0 40px;background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 14px}
.foot-grid a{display:block;color:var(--muted);text-decoration:none;padding:5px 0}
.foot-grid a:hover{color:var(--text)}
.foot-trust{display:flex;flex-wrap:wrap;gap:18px;margin:24px 0;color:var(--muted);font-size:.85rem}
.credits{color:var(--muted);font-size:.75rem;border-top:1px solid var(--line);padding-top:18px;margin-top:24px}
.skip-admin{position:fixed;left:-999px;top:0}
.skip-admin:focus{left:12px;top:12px;z-index:100;background:var(--brand);color:#04121f;padding:8px 14px;border-radius:8px}

.msg{padding:12px 14px;border-radius:10px;margin:12px 0;font-size:.92rem}
.msg.err{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:860px){
  .g3,.g4{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .g3,.g4,.two,.foot-grid{grid-template-columns:1fr}
  .nav-links a.hide-sm{display:none}
  .hero-in{padding:56px 0 52px}
  section{padding:52px 0}
  .logo,.brand svg,.brand img{height:38px}
}
