/* =========================================================================
   Bug Store — public landing page. Premium, cohesive with the admin console.
   No external fonts / assets (strict CSP). Dark-first with a light theme.
   ========================================================================= */

:root{
  --bg:#0c0d11;
  --bg-2:#101116;
  --surface:#13141a;
  --surface-2:#191b22;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --text:#e8eaf0;
  --text-dim:#b4bac7;
  --muted:#8a90a0;
  --faint:#5c6270;
  --brand:#6c79e0;
  --brand-2:#5a67d4;
  --brand-3:#5a67d4;
  --accent:#98a3f2;
  --cyan:#98a3f2;
  --brand-grad:var(--brand-2);
  --brand-glow:rgba(90,103,212,.25);
  --ok:#46b876;--warn:#cfa53e;--crit:#e0596b;--danger:#e0596b;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Code",Consolas,monospace;
  --maxw:1120px;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#fafafa;--bg-2:#f4f4f6;--surface:#ffffff;--surface-2:#f2f3f5;
    --line:rgba(17,19,26,.09);--line-2:rgba(17,19,26,.16);
    --text:#191b22;--text-dim:#3e4350;
    --muted:#6e7480;--faint:#9aa0ab;
    --brand:#5b68d6;--brand-2:#4d5ac9;--accent:#4d5ac9;--cyan:#4d5ac9;
    --ok:#188a4c;--warn:#966c11;--crit:#d23b52;--danger:#d23b52;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--bg);
}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{line-height:1.15;margin:0;letter-spacing:-.02em}
p{margin:0}
code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);padding:.14em .45em;border-radius:6px;border:1px solid var(--line)}
.muted{color:var(--muted)}
::selection{background:rgba(124,140,255,.32)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(124,140,255,.4);border-radius:10px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:transparent;
  color:var(--text);padding:9px 16px;border-radius:8px;font-weight:550;font-size:14px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.btn:hover{background:var(--surface-2);color:var(--text)}
.btn.primary{background:var(--brand-2);border-color:transparent;color:#fff}
.btn.primary:hover{background:var(--brand)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.lg{padding:11px 20px;font-size:14.5px}

/* Nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:26px;
  padding:12px clamp(18px,5vw,54px);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:15px;color:var(--text)}
.nav-brand .logo{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--brand-2);color:#fff;font-size:12px}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{color:var(--muted);font-size:13.5px;font-weight:500;padding:6px 11px;border-radius:7px;transition:.12s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav .btn{margin-left:auto}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:clamp(44px,7vw,88px) clamp(18px,5vw,54px);max-width:var(--maxw);margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:550;color:var(--accent);
  background:transparent;border:1px solid var(--line-2);
  padding:5px 12px;border-radius:999px;margin-bottom:22px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:700;letter-spacing:-.035em;color:var(--text)}
.lede{font-size:clamp(15px,1.5vw,17px);color:var(--muted);margin:20px 0 28px;max-width:48ch}
.lede strong{color:var(--text-dim);font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;align-items:center;gap:12px;margin-top:26px;color:var(--faint);font-size:13px}
.hero-meta .dot{opacity:.45}

/* Terminal card */
.hero-terminal{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -32px rgba(0,0,0,.5)}
.term-bar{display:flex;gap:8px;padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.term-bar span{width:12px;height:12px;border-radius:50%;background:var(--line)}
.term-bar span:nth-child(1){background:#ff5f57}.term-bar span:nth-child(2){background:#febc2e}.term-bar span:nth-child(3){background:#28c840}
.term-body{margin:0;padding:22px;font-family:var(--mono);font-size:13.5px;line-height:1.8;overflow-x:auto;color:var(--text-dim)}
.c-com{color:var(--faint)}.c-verb{color:var(--brand);font-weight:700}.c-ok{color:var(--ok)}
.c-warn{color:var(--warn)}.c-crit{color:var(--crit)}

/* Bands */
.band{padding:clamp(48px,6.5vw,84px) clamp(18px,5vw,54px);max-width:var(--maxw);margin:0 auto}
.band.alt{background:var(--bg-2);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.alt>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.band h2{font-size:clamp(22px,2.8vw,30px);font-weight:650;text-align:center;letter-spacing:-.025em}
.section-sub{text-align:center;color:var(--muted);margin:12px auto 0;max-width:62ch;font-size:15px}

/* Steps */
.steps{display:flex;align-items:stretch;gap:14px;margin-top:44px;flex-wrap:wrap;justify-content:center}
.step{flex:1;min-width:236px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;transition:border-color .12s}
.step:hover{border-color:var(--line-2)}
.step-num{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:650;font-size:14px;
  background:var(--brand-2);color:#fff;margin-bottom:14px}
.step h3{font-size:16px;margin-bottom:8px;font-weight:600}
.step p{color:var(--muted);font-size:13.5px}
.step-arrow{align-self:center;color:var(--faint);font-size:20px;font-weight:600}
.tag{font-size:12px;font-weight:600;padding:1px 7px;border-radius:5px}
.tag.pending{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.tag.approved,.tag.resolved{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.tag.rejected{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.feature{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;transition:border-color .12s}
.feature:hover{border-color:var(--line-2)}
.f-ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:16px;margin-bottom:13px;
  background:var(--surface-2);border:1px solid var(--line)}
.feature h3{font-size:15px;margin-bottom:7px;font-weight:600}
.feature p{color:var(--muted);font-size:13.5px}

/* API */
.api-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.api-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.api-card h4{padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;
  background:var(--surface-2);display:flex;align-items:center;gap:8px}
.api-card h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.api-card pre{margin:0;padding:18px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--text-dim)}

/* Security */
.sec-grid{grid-template-columns:repeat(3,1fr)}
.sec-item{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:6px;transition:border-color .12s}
.sec-item:hover{border-color:var(--line-2)}
.sec-item strong{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.sec-item strong::before{content:"";width:7px;height:7px;border-radius:2.5px;background:var(--brand);flex:none}
.sec-item span{color:var(--muted);font-size:13px}

/* CTA */
.cta-band{text-align:center;padding:clamp(56px,7vw,92px) 20px;margin:0 auto;
  border-top:1px solid var(--line)}
.cta-band h2{font-size:clamp(22px,3vw,32px);font-weight:650;letter-spacing:-.025em}
.cta-band p{color:var(--muted);margin:12px auto 24px;max-width:52ch;font-size:15px}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:38px clamp(18px,5vw,54px);
  display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;font-size:14px;color:var(--muted)}
.site-foot>div:first-child{font-weight:750;color:var(--text);display:flex;align-items:center;gap:8px}
.site-foot .logo{color:var(--brand)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px}
  .grid,.sec-grid{grid-template-columns:1fr 1fr}
  .api-cols{grid-template-columns:1fr}
  .nav-links{display:none}
  .step-arrow{transform:rotate(90deg)}
}
@media(max-width:560px){.grid,.sec-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}