/* ============================================================================
   Claudometer landing page
   Dark Liquid Glass. Warm charcoal base + coral aurora. The product's own
   material (frosted glass) and mascot, on the web.
   ========================================================================== */

:root {
  /* Color: warm charcoal, NOT pure black, with the app's coral severity ramp. */
  --ink:        #14110f;   /* base */
  --ink-1:      #1b1714;   /* raised */
  --ink-2:      #241e1a;   /* raised-er */
  --coral:      #cc785c;   /* brand body color */
  --coral-bright:#d97757;
  --peach:      #ed9e7f;   /* glow highlight */
  --amber:      #e8a33e;   /* severity warn */
  --red:        #d94a3f;   /* severity danger */
  --paper:      #f2ede8;   /* primary text on dark */
  --paper-dim:  #b7ada3;   /* secondary text */
  --paper-faint:#8b8078;   /* tertiary text */

  /* Glass */
  --glass-bg:     rgba(255, 255, 255, 0.055);
  --glass-bg-2:   rgba(255, 255, 255, 0.085);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-stroke-strong: rgba(255, 255, 255, 0.20);
  --glass-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);

  /* Type */
  --display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --body: -apple-system, "Geist", system-ui, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The ambient coral aurora that warms the whole dark canvas. */
.aurora {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 90vh;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
  background:
    radial-gradient(40% 55% at 72% 18%, rgba(217, 119, 87, 0.42), transparent 70%),
    radial-gradient(36% 48% at 22% 30%, rgba(237, 158, 127, 0.26), transparent 72%),
    radial-gradient(30% 40% at 50% 0%, rgba(204, 120, 92, 0.30), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }

/* ---- Glass primitive ---------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Type scale --------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-bright);
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--paper-dim); }
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--body); font-weight: 600; font-size: 0.98rem;
  padding: 0.82em 1.3em; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}
.btn:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }
.btn-primary {
  color: #2a140d;
  background: linear-gradient(180deg, var(--peach), var(--coral-bright));
  box-shadow: 0 10px 30px -10px rgba(217, 119, 87, 0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(217, 119, 87, 0.85), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-ghost {
  color: var(--paper);
  background: var(--glass-bg);
  border-color: var(--glass-stroke);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--glass-stroke-strong); background: var(--glass-bg-2); }
.btn svg { width: 1.05em; height: 1.05em; }

/* ---- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding-block: 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(20, 17, 15, 0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--glass-stroke);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.brand .spark { width: 22px; height: 22px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--paper-dim); font-size: 0.94rem; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--paper); }
.nav-cta { padding: 0.6em 1.1em; font-size: 0.9rem; }
@media (max-width: 760px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding-top: clamp(40px, 8vw, 90px); padding-bottom: clamp(60px, 9vw, 120px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { max-width: 33ch; }
.hero h1 { margin: 18px 0 20px; }
.hero h1 .accent { color: var(--coral-bright); }
.hero .lead { margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.req { font-size: 0.86rem; color: var(--paper-faint); display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.req .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--paper-faint); display: inline-block; }

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-stage { order: -1; }
}

/* ---- The hero glass panel (a faithful replica of the app) --------------- */
.hero-stage { position: relative; display: flex; justify-content: center; }

.menubar-chip {
  position: absolute; top: -26px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px; border-radius: 12px;
  font-family: var(--mono); font-size: 0.84rem; font-weight: 600;
  background: rgba(28, 23, 20, 0.7);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.7);
}
.menubar-chip .spark { width: 16px; height: 16px; }
.menubar-chip .pct { color: var(--coral-bright); }

.panel {
  width: min(360px, 100%);
  padding: 22px;
  border-radius: var(--radius-lg);
  position: relative;
}
.panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mascot-frame { width: 56px; height: 56px; border: 0; flex: none; }
.panel-head .title { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.panel-head .sub { font-size: 0.82rem; color: var(--paper-dim); }

.meter { margin-bottom: 18px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.meter-top .label { font-size: 0.95rem; font-weight: 500; }
.meter-top .val { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-top .val.coral { color: var(--coral-bright); }
.track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.fill { height: 100%; border-radius: 999px; width: 0; transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.fill.coral { background: linear-gradient(90deg, var(--coral), var(--peach)); }
.fill.dim { background: rgba(255,255,255,0.4); }
.reset { font-size: 0.74rem; color: var(--paper-faint); margin-top: 7px; }
.window-active { display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: 0.84rem; color: var(--coral-bright); font-weight: 500; padding-top: 4px; }
.window-active .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--coral-bright); box-shadow: 0 0 0 0 rgba(217,119,87,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217,119,87,0.5);} 70%{ box-shadow: 0 0 0 9px rgba(217,119,87,0);} 100%{ box-shadow:0 0 0 0 rgba(217,119,87,0);} }

/* ---- Section scaffolding ----------------------------------------------- */
section { position: relative; z-index: 1; }
.band { padding-block: clamp(56px, 9vw, 110px); }
.band-head { max-width: 50ch; margin-bottom: clamp(34px, 5vw, 56px); }
.band-head h2 { margin: 14px 0 14px; }
.band-head p { color: var(--paper-dim); font-size: 1.05rem; }

/* Reveal animation hook. Progressive enhancement: content is visible by
   default and only starts hidden when JS is active (html.js), so a GSAP/JS
   failure can never strand a section blank. JS adds .in to reveal it. */
.reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; }
/* Inline <head> safety net: if main.js itself never loads (ad-blocker, flaky
   network), this class (added after 3.5s) un-hides everything the .js hider
   armed, so the page below the hero can never stay permanently invisible. */
.js.reveal-fallback .reveal { opacity: 1; transform: none; }

/* ---- Menu-bar showcase band -------------------------------------------- */
.showcase { text-align: center; }
.fake-menubar {
  display: inline-flex; align-items: center; gap: 22px;
  margin: 0 auto; padding: 9px 18px; border-radius: 14px;
  background: rgba(10, 8, 7, 0.75);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: var(--mono); font-size: 0.86rem; color: var(--paper-dim);
}
.fake-menubar .me { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.fake-menubar .me .spark { width: 16px; height: 16px; }
.fake-menubar .me .pct { color: var(--coral-bright); font-weight: 600; }
.fake-menubar .sysicon { opacity: 0.5; }
.fake-menubar svg.sysicon { width: 15px; height: 15px; flex: none; }
.showcase .caption { margin-top: 22px; color: var(--paper-dim); max-width: 44ch; margin-inline: auto; }

/* ---- Features grid ------------------------------------------------------ */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .features-grid { grid-template-columns: 1fr; } }
.feature { padding: 26px; border-radius: var(--radius-md); }
.feature .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(217,119,87,0.14); border: 1px solid rgba(217,119,87,0.28); color: var(--peach); }
.feature .ic svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--paper-dim); font-size: 0.96rem; }
/* mini meter motif inside the first feature */
.mini-meters { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mini-row { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; color: var(--paper-faint); }
.mini-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.mini-fill { height: 100%; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(0.16,1,0.3,1); }

/* ---- Steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 26px; border-radius: var(--radius-md); position: relative; }
.step .num { font-family: var(--mono); font-size: 0.8rem; color: var(--coral-bright); letter-spacing: 0.1em; margin-bottom: 14px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--paper-dim); font-size: 0.96rem; }
.cmd {
  margin-top: 14px; display: block; font-family: var(--mono); font-size: 0.8rem;
  background: rgba(0,0,0,0.4); border: 1px solid var(--glass-stroke);
  border-radius: 10px; padding: 10px 12px; color: var(--peach);
  overflow-x: auto; white-space: nowrap;
}
.cmd .prompt { color: var(--paper-faint); user-select: none; }

/* ---- Privacy ------------------------------------------------------------ */
.privacy .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,5vw,64px); align-items: center; }
@media (max-width: 820px) { .privacy .wrap { grid-template-columns: 1fr; } }
.privacy-facts { display: flex; flex-direction: column; gap: 14px; }
.fact { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-sm); }
.fact .check { flex: none; width: 24px; height: 24px; color: var(--peach); }
.fact strong { display: block; font-weight: 600; margin-bottom: 2px; }
.fact span { color: var(--paper-dim); font-size: 0.92rem; }

/* ---- Changelog ---------------------------------------------------------- */
.changelog-list { display: flex; flex-direction: column; gap: 14px; }
.release { padding: 22px 24px; border-radius: var(--radius-md); }
.release-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.release .tag { font-family: var(--mono); font-weight: 600; color: var(--coral-bright); font-size: 1.05rem; }
.release .date { font-size: 0.82rem; color: var(--paper-faint); }
.release .body { color: var(--paper-dim); font-size: 0.95rem; }
.release .body ul { padding-left: 1.1em; margin-top: 6px; }
.release .body li { margin-bottom: 4px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq { border-radius: var(--radius-sm); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 22px; font-weight: 600; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 18px; height: 18px; color: var(--coral-bright); transition: transform 0.25s ease; }
.faq[open] summary .plus { transform: rotate(45deg); }
.faq .ans { padding: 0 22px 22px; color: var(--paper-dim); font-size: 0.96rem; }
.faq .ans code { font-family: var(--mono); font-size: 0.86em; background: rgba(0,0,0,0.4); padding: 2px 6px; border-radius: 6px; color: var(--peach); }

/* ---- Final CTA ---------------------------------------------------------- */
.final { text-align: center; padding-block: clamp(70px, 11vw, 140px); }
.final .mascot-frame { width: 90px; height: 90px; margin: 0 auto 8px; }
.final h2 { margin-bottom: 16px; }
.final p { color: var(--paper-dim); max-width: 40ch; margin: 0 auto 30px; }

/* ---- Footer ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--glass-stroke); padding-block: 40px; }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer .brand { font-size: 1rem; }
.footer-links { display: flex; gap: 22px; font-size: 0.9rem; color: var(--paper-dim); }
.footer-links a:hover { color: var(--paper); }
.footer .note { width: 100%; font-size: 0.8rem; color: var(--paper-faint); }