/* SMART SHOP SCOUT — radar/intelligence aesthetic. Mobile-first. */
:root{
  --bg:#0a0f14; --bg2:#0e151d; --card:#111a24; --line:#1e2b3a;
  --ink:#e8f1f8; --dim:#8fa3b8; --faint:#5a6d82;
  --sig:#39ff9c; --sig-dim:#1d7a4e; --amber:#ffb020; --cyan:#41c8ff; --red:#ff5d5d;
  --radius:14px; --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;font-size:16px;
  background-image:radial-gradient(circle at 50% -80px, rgba(57,255,156,.07), transparent 55%);}
a{color:var(--sig);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(10,15,20,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;padding:12px 16px;max-width:1080px;margin:0 auto}
.brand{font-weight:800;letter-spacing:.5px;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .pulse{width:11px;height:11px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 0 rgba(57,255,156,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,255,156,.55)}70%{box-shadow:0 0 0 12px rgba(57,255,156,0)}100%{box-shadow:0 0 0 0 rgba(57,255,156,0)}}
.brand small{color:var(--sig);font-family:var(--mono);font-size:.62rem;letter-spacing:2px}
.nav-links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{color:var(--dim);font-size:.86rem;padding:8px 10px;border-radius:8px}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:var(--card);text-decoration:none}
.cta-btn{background:var(--sig);color:#06120b!important;font-weight:700}

/* hero */
.hero{padding:56px 0 40px;text-align:center}
.kicker{font-family:var(--mono);color:var(--sig);font-size:.75rem;letter-spacing:3px;margin-bottom:14px}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.12;letter-spacing:-.5px;margin-bottom:14px}
.hero h1 .strike{color:var(--faint);text-decoration:line-through}
.hero p.sub{color:var(--dim);max-width:620px;margin:0 auto 26px;font-size:1.06rem}
.btn{display:inline-block;background:var(--sig);color:#06120b;font-weight:800;padding:14px 28px;border-radius:12px;font-size:1.02rem;border:0;cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--sig);border:1px solid var(--sig-dim)}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:18px;font-size:.82rem;color:var(--faint);font-family:var(--mono)}

/* sections & cards */
section.block{padding:34px 0}
h2.sec{font-size:1.5rem;margin-bottom:6px}
p.sec-sub{color:var(--dim);margin-bottom:20px;max-width:680px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px}
.card:hover{border-color:var(--sig-dim)}
.card h3{font-size:1.05rem}
.card .meta{font-size:.8rem;color:var(--faint);font-family:var(--mono)}
.card p{color:var(--dim);font-size:.93rem;flex:1}
.tag{display:inline-block;font-size:.7rem;font-family:var(--mono);padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--dim);margin-right:6px;margin-bottom:4px}
.tag.hot{color:var(--amber);border-color:#5a4517}
.tag.ok{color:var(--sig);border-color:var(--sig-dim)}
.tag.warn{color:var(--amber);border-color:#5a4517}
.tag.bad{color:var(--red);border-color:#5a2323}
.price{font-size:1.25rem;font-weight:800;color:var(--ink)}
.price small{font-size:.72rem;color:var(--faint);font-weight:400}

/* quiz */
.quiz{max-width:640px;margin:0 auto}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:14px}
.qcard h3{margin-bottom:16px;font-size:1.15rem}
.opt{display:block;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);color:var(--ink);padding:14px 16px;border-radius:10px;margin-bottom:10px;font-size:1rem;cursor:pointer}
.opt:hover{border-color:var(--sig)}
.opt small{display:block;color:var(--faint);font-size:.8rem}
.progress{height:6px;background:var(--line);border-radius:4px;margin-bottom:22px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--sig);width:0;transition:width .3s}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--card);border-radius:var(--radius);overflow:hidden}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:1px;color:var(--faint);text-transform:uppercase}
tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}

/* forms */
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:13px 14px;font-size:1rem;margin-bottom:12px;font-family:var(--font)}
label{font-size:.85rem;color:var(--dim);display:block;margin-bottom:6px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:560px;margin:0 auto}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0 46px;color:var(--faint);font-size:.85rem}
footer .cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:22px}
footer h4{color:var(--dim);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;font-family:var(--mono)}
footer a{color:var(--faint);display:block;padding:3px 0}
.disclosure{background:var(--bg2);border:1px dashed var(--line);border-radius:10px;padding:14px 16px;font-size:.82rem;color:var(--dim);margin:18px 0}

/* misc */
.mono{font-family:var(--mono)}
.dim{color:var(--dim)} .faint{color:var(--faint)} .sig{color:var(--sig)}
.center{text-align:center}
.mt{margin-top:18px}.mb{margin-bottom:18px}
.sticky-cta{position:sticky;bottom:0;background:rgba(10,15,20,.95);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center;justify-content:center;z-index:40}
.sticky-cta .btn{padding:12px 22px}
.calc{background:var(--card);border:1px solid var(--sig-dim);border-radius:var(--radius);padding:22px;margin:22px 0}
.calc h3{color:var(--sig);margin-bottom:12px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.calc .row{grid-template-columns:1fr}.nav-links{display:none}}
.radar-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.radar-dot.up{background:var(--sig)} .radar-dot.flat{background:var(--amber)} .radar-dot.down{background:var(--red)}
details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
.badge-demo{background:#3a2b12;color:var(--amber);font-family:var(--mono);font-size:.72rem;padding:4px 10px;border-radius:6px;letter-spacing:1px}

/* ---- SCOUT XP gamification ---- */
#xp-pill{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--sig-dim);color:var(--ink);border-radius:30px;padding:7px 14px;cursor:pointer;font-size:.82rem;margin-left:8px}
#xp-pill:hover{border-color:var(--sig)}
#xp-pill small{display:block;color:var(--faint);font-size:.68rem;font-family:var(--mono)}
#xp-pill strong{font-size:.8rem}
.xp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--sig);color:var(--ink);padding:12px 20px;border-radius:12px;font-size:.9rem;z-index:200;opacity:0;transition:all .3s;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:90vw}
.xp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.xp-toast strong{color:var(--sig)}
#xp-overlay{position:fixed;inset:0;background:rgba(4,8,12,.8);z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.xp-card{background:var(--bg2);border:1px solid var(--sig-dim);border-radius:16px;padding:24px;max-width:480px;width:100%;margin-top:6vh}
.xp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.xp-head h3{margin:4px 0}
#xp-close{background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:.9rem}
.xp-bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sig-dim),var(--sig));border-radius:6px;transition:width .5s}
.xp-card h4{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;color:var(--faint);margin:16px 0 8px}
.xp-m{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.xp-m.done{opacity:.75;border-color:var(--sig-dim)}
.xp-m strong{display:block;font-size:.9rem}
.xp-m small{color:var(--faint);font-size:.78rem}