:root {
  /* Same palette as the app itself (CLAUDE.md Design Language) - one dark
     theme only, no light mode toggle, since the app has none either. */
  --bg: #0A0A0A;
  --surface: #161616;
  --border: #2A2A2A;
  --text: #EDEAE4;
  --muted: #9A9A94;
  --faint: #5A5A56;
  --green: #7A9B6A;
  --amber: #B8903F;
  --teal: #5E8A8E;
  --maxw: 980px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: #0A0A0A; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Buttons - square-ish, hairline border, no shadow, per Design Language
   ("Mostly square... Borders over shadows... no giant pill buttons"). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--green); color: #0A0A0A;
  padding: 11px 22px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px;
  letter-spacing: 0.2px;
  border: 1px solid var(--green);
  transition: opacity .15s ease;
}
.btn:hover { opacity: .88; }
.btn:active { opacity: .75; }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-nav { padding: 8px 16px; font-size: 13px; }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--green); opacity: 1; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--maxw); margin: 0 auto;
  width: 100%;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled::before { border-bottom-color: var(--border); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.2px; }
.brand-img { width: 26px; height: 26px; border-radius: var(--radius-sm); }

/* Hero - sized to land fully in view on first load on both mobile and
   desktop (a hairline of the next section peeking in at the very bottom is
   fine, matching bbabiker.com's own hero; the content itself shouldn't be
   cut off). */
.hero {
  max-width: 720px; margin: 0 auto; padding: 40px 24px 20px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(32px, 6.5vw, 56px); line-height: 1.06; letter-spacing: -0.8px; font-weight: 800;
}
.hero h1 .accent { color: var(--green); }
.sub {
  margin: 14px auto 0; max-width: 480px;
  color: var(--muted); font-size: 16px;
}
.cta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tiny { margin-top: 14px; color: var(--faint); font-size: 12.5px; font-family: var(--mono); letter-spacing: 0.2px; }

@media (max-height: 800px) {
  .hero { padding-top: 28px; padding-bottom: 12px; }
  .hero h1 { font-size: clamp(28px, 6vw, 46px); }
}

/* The seismograph trace - the app's core recurring visual motif, rendered
   exactly per CLAUDE.md's Visual Theme rendering notes: single stroke,
   accent green, subtle phosphor glow, no fill, no axis/gridlines/units.
   Flat line with human-tremor wiggle and one spike, draws in on load. */
.trace-wrap {
  margin: 32px auto 0; max-width: 640px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px 20px 16px;
}
@media (max-height: 800px) {
  .trace-wrap { margin-top: 20px; padding: 16px 18px 12px; }
}
.trace-wrap svg { width: 100%; height: auto; display: block; }
.trace-path {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(122, 155, 106, 0.55));
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 2.2s cubic-bezier(.2,.7,.3,1) 0.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .trace-path { stroke-dashoffset: 0; animation: none; }
}
.trace-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-family: var(--mono);
}
.trace-caption .score { color: var(--text); font-size: 20px; font-weight: 700; }
.trace-caption .label { color: var(--faint); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }

/* Screenshots. Reserves no space until real screenshots land in /screens
   (the section collapses to nothing while .phones is empty). */
.shots { max-width: var(--maxw); margin: 24px auto 0; padding: 0 24px; overflow: hidden; }
.phones {
  display: flex; gap: 16px; justify-content: center; align-items: flex-start;
  overflow-x: auto; padding: 24px 4px; scrollbar-width: none;
}
.phones::-webkit-scrollbar { display: none; }
.shot {
  width: 220px; flex: 0 0 auto; border-radius: 20px;
  border: 1px solid var(--border);
}

/* Features - individually bordered cards per Design Language ("if a card
   is used, it's flat, square-ish, thin-bordered, no shadow"), not a shared
   divider grid - the latter reads as distracting bars running through the
   content at wide viewports. */
.features {
  max-width: var(--maxw); margin: 56px auto 72px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.feat {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  border: 1px solid var(--border); color: var(--green); margin-bottom: 16px;
}
.ico svg { width: 19px; height: 19px; }
.feat h3 { font-size: 16px; letter-spacing: -0.2px; font-weight: 700; }
.feat p { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Why */
.why { max-width: 640px; margin: 0 auto 72px; padding: 0 24px; text-align: center; }
.why h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.4px; margin-bottom: 16px; }
.why p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.why p:last-child { margin-bottom: 0; }

/* Trust strip */
.trust {
  max-width: var(--maxw); margin: 0 auto 72px; padding: 20px 24px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.trust-item {
  color: var(--muted); font-size: 13.5px; font-weight: 600;
}

/* FAQ */
.faq { max-width: 680px; margin: 80px auto; padding: 0 24px; }
.faq h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.4px; margin-bottom: 18px; }
.faq details { border-top: 1px solid var(--border); padding: 16px 2px; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 700; font-size: 19px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }

/* Closing */
.closing { text-align: center; padding: 76px 24px; }
.closing h2 { font-weight: 800; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.4px; margin-bottom: 24px; }

/* Footer */
.footer {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 56px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; font-size: 13.5px; }
.footer-links a:hover { color: var(--green); }
.copy { color: var(--faint); font-size: 12.5px; width: 100%; text-align: center; order: 3; font-family: var(--mono); }

/* Legal pages (privacy) */
.legal { max-width: 700px; margin: 0 auto; padding: 52px 24px 40px; }
.legal h1 { font-weight: 800; font-size: clamp(28px, 5vw, 38px); letter-spacing: -0.4px; }
.legal .updated { color: var(--faint); font-size: 13px; margin: 8px 0 28px; font-family: var(--mono); }
.legal h2 { font-size: 18px; letter-spacing: -0.2px; margin: 30px 0 8px; font-weight: 700; }
.legal p { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.legal ul { color: var(--muted); font-size: 15px; margin: 8px 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--green); }
.legal strong { color: var(--text); }

/* Responsive */
@media (max-width: 820px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .shot { width: 180px; }
  .nav { padding: 14px 18px; }
  .footer { justify-content: center; text-align: center; }
}