/* BitShot — bitshot.org — custom layer on top of Pico CSS (amber).
   Self-hosted, no external fonts or requests. System font stacks only.
   This file only adds what Pico doesn't give: brand palette, the signature
   scan window, the screenshot carousel, and a few layout refinements. */

:root {
  /* Accents are shared across themes (adjusted slightly per theme below) */
  --bs-cyan:      #1a94a8;
  --bs-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* ---------- LIGHT theme surfaces ---------- */
[data-theme="light"] {
  --bs-bg:        #f7f3ea;
  --bs-panel:     #fffdf7;
  --bs-panel-2:   #f1ead9;
  --bs-border:    #e4dcc6;
  --bs-border-2:  #cbbd93;

  --bs-ink:       #241f14;
  --bs-dim:       #5a5138;
  --bs-faint:     #8a7f5c;

  --bs-amber:     #d98f16;
  --bs-amber-2:   #b8760f;
  --bs-cyan:      #147d8f;
  --bs-cyan-wash: rgba(26,148,168,.10);
  --bs-amber-wash:rgba(217,143,22,.12);

  --bs-err-bg:#f8e9e2; --bs-err-bd:#d9a68f; --bs-err-tx:#953722;

  /* subtle dot-grid behind the page */
  --bs-dot: rgba(120,105,70,.06);
}

/* ---------- DARK theme surfaces (hand-tuned, not inverted) ---------- */
[data-theme="dark"] {
  --bs-bg:        #14130f;   /* warm near-black, not blue-black */
  --bs-panel:     #1c1a15;
  --bs-panel-2:   #232019;
  --bs-border:    #33302a;
  --bs-border-2:  #4a453b;

  --bs-ink:       #f2ebdc;
  --bs-dim:       #b8af9c;
  --bs-faint:     #8a8171;

  --bs-amber:     #f0b035;   /* brighter on dark so it glows like the logo */
  --bs-amber-2:   #e4a21f;
  --bs-cyan:      #35c3d6;
  --bs-cyan-wash: rgba(53,195,214,.12);
  --bs-amber-wash:rgba(240,176,53,.14);

  --bs-err-bg:#2e1c16; --bs-err-bd:#7a4532; --bs-err-tx:#f0a588;

  --bs-dot: rgba(240,235,220,.035);
}

/* Map Pico's tokens onto the brand palette — applies in both themes */
[data-theme] {
  --pico-background-color: var(--bs-bg);
  --pico-color: var(--bs-ink);
  --pico-h1-color: var(--bs-ink);
  --pico-h2-color: var(--bs-ink);
  --pico-h3-color: var(--bs-ink);
  --pico-h4-color: var(--bs-ink);
  --pico-h5-color: var(--bs-ink);
  --pico-h6-color: var(--bs-ink);
  --pico-muted-color: var(--bs-dim);
  --pico-primary: var(--bs-amber-2);
  --pico-primary-hover: var(--bs-amber);
  --pico-primary-background: var(--bs-amber-2);
  --pico-primary-hover-background: var(--bs-amber);
  --pico-primary-focus: var(--bs-amber-wash);
  --pico-primary-underline: transparent;
  --pico-card-background-color: var(--bs-panel);
  --pico-card-border-color: var(--bs-border);
  --pico-card-sectioning-background-color: var(--bs-panel-2);
  --pico-border-color: var(--bs-border);
  --pico-muted-border-color: var(--bs-border);
  --pico-code-background-color: var(--bs-panel-2);
  --pico-code-color: var(--bs-ink);
  --pico-blockquote-border-color: var(--bs-amber);
  --pico-accordion-border-color: var(--bs-border);
  --pico-font-family: var(--pico-font-family-sans-serif);
}

/* Background texture — a faint warm dot-grid, hero region only, behind everything */
body {
  background-color: var(--bs-bg);
  background-image: radial-gradient(var(--bs-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  background-attachment: fixed;
}

/* ---------- Base rhythm ---------- */
body { line-height: 1.6; }
main.container { padding-top: 1rem; }
section { padding: 3rem 0; border-top: 1px solid var(--bs-border); }
section:first-of-type { border-top: 0; }
h1,h2,h3 { letter-spacing: -.01em; }
.eyebrow {
  display:inline-block; font-family:var(--bs-mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bs-amber-2); background:var(--bs-amber-wash);
  border:1px solid rgba(217,143,22,.35); padding:.28rem .6rem; border-radius:999px;
  margin-bottom:.9rem;
}
.section-head { max-width: 42rem; margin: 0 0 2rem; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { margin: 0 0 .5rem; }
.section-head p { color: var(--bs-dim); margin: 0; }
.muted { color: var(--bs-dim); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,243,234,.9);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--bs-border);
}
.site-header nav { padding: .6rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; }
.brand img { height: 44px; width:auto; display:block; }
.nav-links { display:flex; gap:1.3rem; align-items:center; margin:0; padding:0; list-style:none; }
.nav-links a { color: var(--bs-dim); text-decoration:none; font-size:.92rem; }
.nav-links a:hover { color: var(--bs-ink); }
.nav-cta { display:flex; gap:.6rem; align-items:center; }
.nav-cta .btn-sm { padding:.45rem .85rem; font-size:.85rem; margin:0; }
@media (max-width: 900px){ .nav-links { display:none; } }

/* ---------- Buttons (lean on Pico, add outline + sizing) ---------- */
a.btn, button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:var(--pico-border-radius); text-decoration:none;
  padding:.8rem 1.4rem; line-height:1.1; cursor:pointer;
  background:var(--bs-amber-2); color:#fff; border:2px solid var(--bs-amber-2);
}
a.btn:hover { background:var(--bs-amber); border-color:var(--bs-amber); color:#fff; }
a.btn-outline {
  background:transparent; color:var(--bs-ink); border:2px solid var(--bs-border-2);
}
a.btn-outline:hover { border-color:var(--bs-amber-2); background:transparent; color:var(--bs-ink); }
a.btn-block { width:100%; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin:1.6rem 0 1rem; }
.fine { color:var(--bs-faint); font-size:.85rem; margin:0; }
.fine a { color:var(--bs-cyan); }

/* ---------- Hero ---------- */
.hero { padding: 3.5rem 0 3rem; border-top:0; }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
.hero h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.08; margin:0 0 1rem; }
.hero h1 .hi { color:var(--bs-amber-2); }
.hero .lede { color:var(--bs-dim); font-size:1.15rem; max-width:34rem; margin:0; }
@media (max-width: 900px){ .hero-grid { grid-template-columns:1fr; } }

/* ---------- Scan window (signature element) ---------- */
.scan-window {
  background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px;
  overflow:hidden; box-shadow:0 16px 40px -22px rgba(36,31,20,.25);
}
.scan-titlebar {
  display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem;
  border-bottom:1px solid var(--bs-border); background:var(--bs-panel-2);
}
.scan-titlebar > span:not(.path){ width:9px; height:9px; border-radius:50%; background:#c9b98c; flex:none; }
.scan-titlebar .path {
  margin-left:.6rem; font-family:var(--bs-mono); font-size:.72rem; color:var(--bs-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.scan-body { padding:.9rem; position:relative; }
.scan-row {
  display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:6px;
  font-family:var(--bs-mono); font-size:.78rem; color:var(--bs-dim);
}
.scan-row .thumb { width:26px; height:20px; border-radius:3px; background:var(--bs-panel-2); border:1px solid var(--bs-border-2); flex:none; }
.scan-row .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scan-row .tag { font-size:.68rem; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--bs-border-2); color:var(--bs-faint); flex:none; }
.scan-row.hit { background:var(--bs-err-bg); }
.scan-row.hit .tag { background:var(--bs-err-bg); border-color:var(--bs-err-bd); color:var(--bs-err-tx); }
.scan-row.hit .name { color:var(--bs-err-tx); }
.scanline {
  position:absolute; left:.9rem; right:.9rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--bs-cyan), var(--bs-amber), transparent);
  animation: scanmove 3.4s ease-in-out infinite; opacity:.9;
}
@keyframes scanmove {
  0%{ top:8%; opacity:0; } 8%{ opacity:.85; } 50%{ top:88%; } 92%{ opacity:.85; } 100%{ top:8%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .scanline{ display:none; } }

/* ---------- Problem beats ---------- */
.problem-grid { max-width:42rem; display:grid; gap:1rem; }
.problem-grid p { color:var(--bs-dim); margin:0; }
.problem-grid strong { color:var(--bs-ink); font-weight:600; }
.beat { position:relative; padding-left:2.7rem; }
.beat::before {
  content:attr(data-step); position:absolute; left:0; top:.15rem;
  font-family:var(--bs-mono); font-size:.72rem; font-weight:700; color:var(--bs-amber-2);
  background:var(--bs-amber-wash); border:1px solid rgba(217,143,22,.35);
  border-radius:999px; padding:.1rem .45rem; letter-spacing:.04em;
}
.aside {
  margin-top:.4rem; padding:1rem 1.2rem; background:var(--bs-panel);
  border:1px solid var(--bs-border); border-left:3px solid var(--bs-cyan);
  border-radius:6px; font-style:italic; color:var(--bs-dim);
}
.aside strong { font-style:normal; color:var(--bs-ink); }

/* ---------- Steps ---------- */
.steps { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.step {
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; padding:1.1rem 1.3rem;
}
.step .n {
  font-family:var(--bs-mono); font-weight:700; color:var(--bs-cyan);
  background:var(--bs-cyan-wash); border:1px solid rgba(26,148,168,.35);
  width:2.1rem; height:2.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.step h3 { margin:.1rem 0 .3rem; font-size:1.02rem; }
.step p { margin:0; color:var(--bs-dim); font-size:.94rem; }

/* ---------- Features ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.feature { background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; padding:1.25rem; }
.feature .icon {
  width:2.2rem; height:2.2rem; border-radius:7px; background:var(--bs-amber-wash);
  border:1px solid rgba(217,143,22,.35); display:flex; align-items:center; justify-content:center;
  color:var(--bs-amber-2); margin-bottom:.8rem; font-family:var(--bs-mono); font-weight:700;
}
.feature h3 { margin:0 0 .4rem; font-size:1rem; }
.feature p { margin:0; color:var(--bs-dim); font-size:.9rem; }
.feature code { font-size:.85em; }
@media (max-width: 900px){ .feature-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .feature-grid { grid-template-columns:1fr; } }

/* ---------- Requirements table ---------- */
.req-table { border:1px solid var(--bs-border); border-radius:10px; overflow:hidden; }
.req-row {
  display:grid; grid-template-columns:9rem 1fr 1fr; gap:1.25rem; padding:.85rem 1.1rem;
  border-top:1px solid var(--bs-border); font-size:.92rem; color:var(--bs-dim); align-items:baseline;
}
.req-row:first-child { border-top:0; }
.req-head { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-faint); }
.req-head span:not(:first-child){ color:var(--bs-cyan); }
.req-label { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-faint); }
.req-notes { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.55rem; max-width:46rem; font-size:.88rem; color:var(--bs-faint); }
.req-notes strong { color:var(--bs-dim); font-weight:600; }
@media (max-width:760px){
  .req-row { grid-template-columns:1fr; gap:.35rem; }
  .req-head { display:none; }
  .req-row span:nth-child(2)::before{ content:"Linux — "; color:var(--bs-cyan); }
  .req-row span:nth-child(3)::before{ content:"Windows — "; color:var(--bs-cyan); }
}

/* ---------- Carousel ---------- */
.carousel { position:relative; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; overflow:hidden; }
.carousel-track { display:flex; transition:transform .35s ease; }
.carousel-slide { flex:0 0 100%; aspect-ratio:16/10; display:block; overflow:hidden; background:var(--bs-panel-2); }
.carousel-slide img { width:100%; height:100%; object-fit:contain; display:block; }
.carousel-controls { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-top:1px solid var(--bs-border); background:var(--bs-panel-2); }
.carousel-controls .dots { display:flex; gap:.4rem; }
.carousel-controls .dots button { width:8px; height:8px; border-radius:50%; border:0; background:var(--bs-border-2); padding:0; cursor:pointer; margin:0; }
.carousel-controls .dots button[aria-current="true"]{ background:var(--bs-amber-2); }
.carousel-controls .arrows { display:flex; gap:.5rem; }
.carousel-controls .arrows button { background:var(--bs-panel); border:1px solid var(--bs-border-2); color:var(--bs-ink); width:2.1rem; height:2.1rem; border-radius:6px; cursor:pointer; font-size:1rem; margin:0; padding:0; }
.carousel-controls .arrows button:hover { border-color:var(--bs-amber-2); }

/* ---------- Pricing ---------- */
.price-card { max-width:26rem; margin:0 auto; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; padding:2rem; text-align:center; }
.price-amount { font-family:var(--bs-mono); font-size:2.4rem; font-weight:700; margin:0; color:var(--bs-ink); }
.price-amount small { font-size:1rem; color:var(--bs-dim); font-weight:500; }
.price-terms { color:var(--bs-dim); margin:.6rem 0 1.6rem; font-size:.92rem; }
.price-list { list-style:none; margin:0 0 1.75rem; padding:0; text-align:left; display:grid; gap:.55rem; }
.price-list li { display:flex; gap:.6rem; color:var(--bs-dim); font-size:.92rem; }
.price-list li::before { content:"✓"; color:var(--bs-cyan); font-weight:700; flex:none; }

/* ---------- FAQ (Pico styles <details> already; add + marker) ---------- */
.faq { display:grid; gap:.7rem; max-width:44rem; }
.faq details { background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:6px; padding:.2rem 1rem; }
.faq summary { cursor:pointer; padding:.9rem 0; font-weight:600; }
.faq p { margin:0 0 1rem; color:var(--bs-dim); font-size:.93rem; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--bs-border); padding:2.5rem 0; margin-top:1rem; }
.footer-grid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-brand { max-width:20rem; }
.footer-brand img { height:40px; margin-bottom:.7rem; }
.footer-brand p { color:var(--bs-faint); font-size:.85rem; }
.footer-cols { display:flex; gap:3rem; flex-wrap:wrap; }
.footer-col h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bs-faint); margin:0 0 .8rem; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-col a { color:var(--bs-dim); text-decoration:none; font-size:.9rem; }
.footer-col a:hover { color:var(--bs-ink); }
.footer-bottom { border-top:1px solid var(--bs-border); margin-top:2rem; padding-top:1.25rem; color:var(--bs-faint); font-size:.82rem; }

.skip-link { position:absolute; left:-999px; top:auto; background:var(--bs-amber-2); color:#fff; padding:.75rem 1rem; border-radius:6px; font-weight:700; z-index:100; }
.skip-link:focus { left:1rem; top:1rem; }

/* ===================================================================
   Additions: theme toggle, section numbers, mono detailing,
   contact card, FAQ layout, dark-mode header.
   =================================================================== */

/* Header backdrop adapts to theme */
[data-theme="light"] .site-header { background: rgba(247,243,234,.9); }
[data-theme="dark"]  .site-header { background: rgba(20,19,15,.88); }

/* Theme toggle button */
.theme-toggle {
  background: transparent; border: 1px solid var(--bs-border-2); color: var(--bs-dim);
  width: 2.3rem; height: 2.3rem; border-radius: 6px; cursor: pointer; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--bs-amber-2); color: var(--bs-ink); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Section numbering — mono counter on each major section head */
#main { counter-reset: section; }
.section-head .eyebrow::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero) " / ";
  color: var(--bs-faint);
  font-weight: 400;
}

/* Monospace detailing for machine-ish values */
.price-amount, .req-row span:not(.req-label):not(:first-child),
.scan-titlebar .path, .req-label, .req-head span { font-family: var(--bs-mono); }
.fine { font-family: var(--bs-mono); font-size: .8rem; letter-spacing: -.01em; }
.nav-links a { font-family: var(--bs-mono); font-size: .85rem; letter-spacing: -.01em; }

/* FAQ layout — two columns: accordion left, sticky contact card right */
.faq-wrap { display: grid; grid-template-columns: 1fr 19rem; gap: 2.5rem; align-items: start; }
.faq { max-width: none; }
.contact-card {
  position: sticky; top: 5.5rem;
  background: var(--bs-panel); border: 1px solid var(--bs-border);
  border-radius: 10px; padding: 1.5rem;
}
.contact-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.contact-card p { margin: 0 0 1.2rem; color: var(--bs-dim); font-size: .9rem; }
.contact-card .ch { display: grid; gap: .9rem; }
.contact-card .ch a {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--bs-ink); font-family: var(--bs-mono); font-size: .82rem; word-break: break-all;
}
.contact-card .ch a:hover { color: var(--bs-amber-2); }
.contact-card .ch .k { color: var(--bs-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--bs-mono); display: block; margin-bottom: .15rem; }
@media (max-width: 900px){
  .faq-wrap { grid-template-columns: 1fr; }
  .contact-card { position: static; }
}

/* Dark-mode scan window hit rows need the dark error palette */
[data-theme="dark"] .scan-row.hit { background: var(--bs-err-bg); }

/* ---------- Theme-aware inline logo ---------- */
.brand .logo-svg { height: 40px; width: auto; display: block; }
.footer-brand .logo-svg { height: 36px; }
[data-theme="light"] .brand { color: #241f14; }  /* dark ink letters on light */
[data-theme="dark"]  .brand { color: #f2ebdc; }  /* cream letters on dark */


/* ---------- Theme-swapped logo ---------- */
.brand .logo { height: 56px; width: auto; display: block; }
.footer-brand .logo { height: 40px; }
[data-theme="light"] .logo-dark  { display: none; }
[data-theme="dark"]  .logo-light { display: none; }