/* Infrared City homepage prototype — tokens, base, nav, hero.
   Section styles live in sections.css. Flow: website-rebuild/DESIGN.md §6.
   Two colour systems (DESIGN.md §10): BRAND = #2B7C85 (forge-kit canonical,
   logo + primary CTA only). DATA = the real @infrared/analysis-colors ramps
   (values, legends, halftone). Never mix their jobs. */

:root {
  --brand: #088A91;        /* live viewer's rendered interactive teal */
  --brand-deeper: #2B7C85; /* the muted canonical teal — logo, quiet accents */
  --brand-lift: #4AA8B4;   /* same hue, lifted for dark grounds */
  --brand-deep: #1E5C63;

  --data: #22D3EE;
  --data-warm: #F97316;
  --ramp-utci: linear-gradient(90deg,#1E1B4B,#1D4ED8,#3B82F6,#22D3EE,#86EFAC,#BEF264,#FACC15,#F97316,#DC2626,#7F1D1D);
  --ramp-heat: linear-gradient(90deg,#041991,#0730E0,#0758FF,#01E8FF,#61F69C,#A6F956,#FEF401,#FF7900,#EF2700,#8A1100);
  --ramp-wind: linear-gradient(90deg,#0637FC,#399BF3,#64EE9A,#AEF27C,#EB643B,#E6000B);

  /* Type system = live.infrared.city's branded stack (the platform ships none).
     Space Grotesk: headings, numerals, short labels. Geist: body. Geist Mono: data. */
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Space Grotesk", "Geist", -apple-system, sans-serif;
  --body: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1240px;
  --radius: 14px;  /* generous rounding — the mock's language, deliberately NOT this season's boxy default */
}

/* ---------- DARK (default) ---------- */
:root, :root[data-theme="dark"] {
  --ink-0: #0B141C; --ink-1: #101B24; --ink-2: #16242F;
  --line: #24333F; --line-soft: #1A2833;
  --text: #F8FAFC; --muted: #8296A8;
  --glow-a: rgba(34,211,238,.20); --glow-b: rgba(43,124,133,.26);
  --card-grad: linear-gradient(160deg,#101A28 0%,#0A0F1A 62%);
  --scrim: rgba(11,20,28,.68);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 44px rgba(0,0,0,.38);
  --img-fade: linear-gradient(to top, var(--ink-1), transparent 60%);
}
/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --data: #0E7A87;   /* data colour must clear 3:1 on white */
  --ink-0: #F2F5F7; --ink-1: #FFFFFF; --ink-2: #FFFFFF;
  --line: rgba(18,38,60,.20); --line-soft: rgba(18,38,60,.10);
  --text: #0A1620; --muted: #51677A;
  --glow-a: rgba(34,211,238,.20); --glow-b: rgba(43,124,133,.16);
  --card-grad: linear-gradient(160deg,#FFFFFF 0%,#F2F8F9 100%);
  --scrim: rgba(255,255,255,.74);
  --shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(16,38,66,.08);
  --img-fade: linear-gradient(to top, rgba(255,255,255,.92), transparent 60%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink-0); color: var(--text);
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ONE technical-label spec. Do not add a variant. */
.lbl, .eyebrow, .tab, .door .k, .city-pill, .speeds .l, .exp-label, .exp-note,
.hero-card .sub, .hero-furniture .cap, #pauseBtn, .exp-time, .door .go,
.price-line, .tier .n, .stat .l, .divider-label, .entry-tab, .shot-cap, .tier .badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow { color: var(--brand); letter-spacing: .24em; }

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin: 0 0 16px; }
h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -.01em; }
p { max-width: 34em; }
.muted { color: var(--muted); }
.eyebrow { color: var(--muted); margin: 0 0 12px; }
.eyebrow b { color: var(--data); font-weight: 600; }
.lede { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; max-width: 32em; margin: 0 0 32px; color: var(--muted); }
.lede strong { color: var(--text); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  background: transparent; /* buttons must not inherit the UA grey pill */
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .14s ease, background .2s ease, border-color .2s ease;
}
.btn:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 3px; }
.btn-pri { background: var(--brand); color: #fff;
  box-shadow: 0 6px 22px rgba(12,154,161,.20), 0 2px 8px rgba(16,38,66,.12); }
.btn-pri:hover { transform: translateY(-1px); background: var(--brand-lift); }
.btn-sec { border: none; padding-left: 8px; padding-right: 8px; color: var(--brand-lift); }
.btn-sec::after { content: " →"; }
.btn-sec:hover { color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- nav ---------- */
nav.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center;
  gap: 22px; padding: 15px 32px; backdrop-filter: blur(16px);
  background: var(--scrim); border-bottom: 1px solid var(--line-soft);
}
nav.top .logo { height: 21px; }
nav.top .links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; }
nav.top .links a { color: var(--muted); text-decoration: none; }
nav.top .links a:hover { color: var(--text); }
nav.top .btn { padding: 10px 18px; font-size: 11px; }
nav.top a.btn-pri { color: #fff; }
#themeBtn {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
}
#themeBtn:hover { color: var(--brand-lift); border-color: var(--brand-lift); }
@media (max-width: 900px) { nav.top .links { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; padding: 0; border: none; overflow: hidden; }
#stage, #stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ink-0));
}
/* Hero card mirrors the research page: wide, gradient glass that blurs the scene
   rather than darkening it, inset top highlight instead of a border. */
.hero-card {
  position: absolute; left: 5vw; top: 50%; transform: translateY(-50%); z-index: 10;
  width: min(46vw, 680px); padding: 38px 42px 34px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(4,20,26,0.42), rgba(4,20,26,0.14));
  border: none; box-shadow: inset 0 1px 0 rgba(180,232,226,0.10);
  backdrop-filter: blur(22px) saturate(0.85);
  -webkit-backdrop-filter: blur(22px) saturate(0.85);
}
.hero-card img { height: 26px; margin-bottom: 22px; }
.hero-card h1 { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.06; font-weight: 600;
  letter-spacing: -.025em; margin: 0 0 16px; color: #F4FAF9; }
/* The one line that says what the product actually does — it earns more than
   the 10.5px label spec the rest of the furniture uses. */
.hero-card .sub { color: var(--muted); margin: 0 0 26px;
  font-size: 14px; letter-spacing: .16em; }
.hero-card .sub b { color: var(--data); font-weight: 600; }
/* Cycling analysis word. The span is width-locked to the widest term by JS, so
   the line never reflows mid-cycle; only the word moves. */
.cycle-word { display: inline-block; text-align: left; position: relative;
  transition: opacity .28s ease, transform .28s ease; }
.cycle-word[data-out="true"] { opacity: 0; transform: translateY(-.35em); }
@media (prefers-reduced-motion: reduce) { .cycle-word { transition: none; } }
.hero-furniture {
  position: absolute; left: 6vw; bottom: 40px; z-index: 10;
  padding: 12px 16px; border-radius: 10px;
  background: var(--scrim); backdrop-filter: blur(10px);
}
.hero-furniture .cap { color: var(--text); }
.legend { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.legend .ramp { width: 170px; height: 7px; border-radius: 1px; background: var(--ramp-utci); }
#pauseBtn {
  position: absolute; right: 28px; bottom: 40px; z-index: 12; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px;
}
#pauseBtn:hover { color: var(--brand-lift); border-color: var(--brand-lift); }

/* ---------- intro / loading gate ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 24px; background: #071319; overflow-y: auto;
  transition: opacity .5s ease;
}
.intro[data-go="true"] { opacity: 0; pointer-events: none; }
.intro-card {
  width: min(720px, 100%); padding: 44px 46px 40px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(16,32,42,.96), rgba(7,20,26,.96));
  box-shadow: inset 0 1px 0 rgba(180,232,226,.10), 0 30px 90px rgba(0,0,0,.5);
  color: #E8F1F0;
}
.intro-card img { height: 24px; margin-bottom: 24px; }
.intro-card h2 { color: #F4FAF9; font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; }
.intro-lede { color: #9FB6BC; font-size: 16.5px; margin: 0 0 22px; max-width: none; }
.intro-list { list-style: none; margin: 0 0 30px; padding: 0;
  border-top: 1px solid rgba(180,232,226,.12); }
.intro-list li { padding: 13px 0; border-bottom: 1px solid rgba(180,232,226,.12);
  font-size: 14.5px; line-height: 1.55; color: #9FB6BC; }
.intro-list b { color: #E8F1F0; font-weight: 600; }
.intro-list i { color: #E8F1F0; font-style: normal; }
.intro-list code { font-family: var(--mono); font-size: 12.5px; color: var(--data); }
#introGo[disabled] { opacity: .55; cursor: progress; }

.proto-flag {
  position: fixed; left: 12px; bottom: 12px; z-index: 60; font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--brand); padding: 5px 11px; border-radius: 6px; opacity: .85;
}