/* ============================================================
   Gustin — landing page styles
   Dark, athletic, mobile-first. No frameworks.
   Accents are taken literally from what the app draws on the watch:
   blue = now, yellow = the hour ahead.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Neutral base */
  --bg:            #0a0c0e;
  --bg-2:          #101317;
  --surface:       #161a1f;
  --surface-2:     #1c2127;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text:          #f4f6f8;
  --text-muted:    #aeb6bf;
  --text-faint:    #79828c;

  /* Accents — from t.html draw() */
  --blue:        #168FFF;  /* wind pointer in Current — semantic: NOW */
  --blue-deep:   #0B6FD6;  /* borders and gradient tails; too dark for text */
  --blue-bright: #4FA8FF;  /* links and hover — 7.81:1 on --bg */
  --blue-ink:    #041423;  /* label on a blue surface */
  --blue-tint:   rgba(22, 143, 255, 0.12);

  --yellow:      #FFD33A;  /* forecast clock, pointer, ring, squares — semantic: AHEAD */
  --yellow-deep: #E8B400;
  --yellow-ink:  #1A1405;  /* label on a yellow surface — 12.77:1 */
  --yellow-tint: rgba(255, 211, 58, 0.12);

  --grey-idle:   #6A6A6A;  /* unfilled progress squares */
  --screen:      #000000;
  --screen-val:  #FFFFFF;
  --screen-lbl:  #999999;

  /* Shadows and glows */
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-yellow: 0 0 0 1px rgba(255, 211, 58, 0.28),
                   0 18px 50px -18px rgba(255, 211, 58, 0.38);
  --shadow-yellow-hover: 0 0 0 1px rgba(255, 211, 58, 0.45),
                         0 22px 50px -16px rgba(255, 211, 58, 0.58);
  --glow-blue-line:   drop-shadow(0 0 10px rgba(22, 143, 255, 0.55));
  --glow-yellow-line: drop-shadow(0 0 10px rgba(255, 211, 58, 0.45));

  /* Type */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;    --space-32: 8rem;

  --radius: 14px;  --radius-lg: 22px;  --radius-pill: 999px;
  --maxw: 1180px;
  --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Dividers */
  --flow-divider-h: 56px;
  --flow-shift: 0px;
}

@media (min-width: 768px) {
  :root { --flow-divider-h: 78px; }
}

/* ---------- Watch faces ---------- */
@font-face {
  font-family: "SuuntoDisplay";
  src: url("../assets/fonts/SuuntoUINextDisplay-SemiBold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "SuuntoText";
  src: url("../assets/fonts/SuuntoUINext-Bold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "SuuntoIcon";
  src: url("../assets/fonts/SuuntoIconNext-1.otf") format("opentype");
  font-display: swap;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; transition: color var(--transition); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0;
  text-transform: uppercase;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--text);
}

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--yellow);
  color: var(--yellow-ink);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Blue on yellow is only 2.5:1 — dark ring with a light halo instead. */
.btn--primary:focus-visible,
.view-pills button[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--yellow-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(244, 246, 248, 0.85);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-24);
  position: relative;
  scroll-margin-top: 76px;
}
.section:not(.note) {
  padding-bottom: calc(var(--space-24) + var(--space-8));
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-32); }
  .section:not(.note) {
    padding-bottom: calc(var(--space-32) + var(--space-8));
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}

/* Yellow carries every call to action: it is what the watch shows in seven of
   its eight states, and yellow-on-dark clears AAA where blue with white ink
   would fail AA. */
.btn--primary {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  color: var(--yellow-ink);
  box-shadow: var(--shadow-yellow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow-hover);
}
.btn--primary:active { transform: translateY(0); }

.btn--sm { padding: 0.7rem 1.15rem; font-size: 0.95rem; min-height: 44px; }
.btn--lg { padding: 1rem 2rem;      font-size: 1.2rem;  min-height: 52px; }
@media (max-width: 359px) {
  .btn--lg { padding-inline: var(--space-5); font-size: 1.05rem; }
}

.btn-text {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  text-decoration: none;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  padding-block: var(--space-2);
  margin-block: calc(-1 * var(--space-2));
}
.btn-text:hover { color: var(--blue-bright); }

/* ---------- Eyebrows / labels ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.eyebrow--blue   { color: var(--blue); }
.eyebrow--yellow { color: var(--yellow); }

/* ---------- Section titles ---------- */
.section__title {
  font-size: clamp(2rem, 6vw, 3.1rem);
  margin-bottom: var(--space-6);
}
.section__title--center {
  text-align: center;
  margin-inline: auto;
  max-width: 18ch;
  margin-bottom: var(--space-16);
}
.section__lead {
  color: #cdd4db;
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}
.section__lead strong { color: var(--text); font-weight: 600; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 12, 14, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 66px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.nav__mark { display: block; width: 28px; height: 28px; flex: none; }
.nav__mark svg { width: 100%; height: 100%; display: block; }

@media (max-width: 419px) {
  .nav__brand { font-size: 0; gap: 0; }
  .nav__mark { width: 32px; height: 32px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-20);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 12, 14, 0.50) 0%,
                            rgba(10, 12, 14, 0.34) 34%,
                            rgba(10, 12, 14, 0.92) 100%),
    linear-gradient(90deg,  rgba(10, 12, 14, 0.90) 0%,
                            rgba(10, 12, 14, 0.72) 42%,
                            rgba(10, 12, 14, 0.22) 74%,
                            rgba(10, 12, 14, 0)    100%);
}
.hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
.hero__copy { max-width: 36rem; }
.hero__title {
  font-size: clamp(2.8rem, 13vw, 6.6rem);
  font-weight: 800;
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero__accent { color: var(--yellow); }
.hero__subhead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  max-width: 46ch;
  margin: 0 0 var(--space-8);
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
.hero__note {
  margin-top: var(--space-6);
  margin-bottom: 0;
  max-width: 48ch;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}
.hero__device { display: flex; justify-content: center; }
.hero-watch { margin: 0; width: min(78vw, 340px); }

@media (min-width: 880px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
  .hero__copy { max-width: 38rem; }
  .hero__title {
    font-size: clamp(3.7rem, 6.6vw, 5.6rem);
  }
  .hero-watch { width: min(40vw, 420px); }
}

/* ---------- Streamline dividers ----------
   A wind streamline instead of Constantin's trend line: the blue half rises,
   the yellow half falls, and the two share endpoints so consecutive dividers
   read as one continuous flow across the page. The following section is
   clipped along the same shape, so the section edge is the line. */
.streamline {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--flow-divider-h);
  margin-block: calc(0px - var(--flow-divider-h));
  line-height: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
.streamline svg {
  display: block;
  width: 120%;
  margin-left: -10%;
  height: var(--flow-divider-h);
  overflow: visible;
  transform: translateX(var(--flow-shift));
  will-change: transform;
}
.streamline__path,
.streamline__ghost {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.streamline__path  { stroke-width: 4; }
.streamline__ghost { stroke-width: 2; opacity: 0.35; }

.streamline--blue .streamline__path,
.streamline--blue .streamline__ghost { stroke: var(--blue); }
.streamline--yellow .streamline__path,
.streamline--yellow .streamline__ghost { stroke: var(--yellow); }
.streamline--blue   .streamline__path { filter: var(--glow-blue-line); }
.streamline--yellow .streamline__path { filter: var(--glow-yellow-line); }

.streamline + .section,
.streamline + .cta-band,
.streamline + .footer {
  position: relative;
  z-index: 1;
  --flow-clip: polygon(
    0    var(--flow-y0),
    20%  var(--flow-y1),
    40%  var(--flow-y2),
    60%  var(--flow-y3),
    80%  var(--flow-y4),
    100% var(--flow-y5),
    100% 100%,
    0    100%
  );
  clip-path: var(--flow-clip);
}
.streamline + .section,
.streamline + .footer { padding-top: calc(var(--space-24) + var(--flow-divider-h)); }
.streamline + .cta-band { padding-top: calc(var(--space-12) + var(--flow-divider-h)); }

.streamline--blue + .section,
.streamline--blue + .cta-band,
.streamline--blue + .footer {
  --flow-y0: 31px; --flow-y1: 27px; --flow-y2: 23px;
  --flow-y3: 20px; --flow-y4: 18px; --flow-y5: 17px;
}
.streamline--yellow + .section,
.streamline--yellow + .cta-band,
.streamline--yellow + .footer {
  --flow-y0: 17px; --flow-y1: 19px; --flow-y2: 22px;
  --flow-y3: 26px; --flow-y4: 31px; --flow-y5: 34px;
}

@media (min-width: 768px) {
  .streamline + .section,
  .streamline + .footer { padding-top: calc(var(--space-32) + var(--flow-divider-h)); }

  .streamline--blue + .section,
  .streamline--blue + .cta-band,
  .streamline--blue + .footer {
    --flow-y0: 44px; --flow-y1: 38px; --flow-y2: 32px;
    --flow-y3: 28px; --flow-y4: 26px; --flow-y5: 24px;
  }
  .streamline--yellow + .section,
  .streamline--yellow + .cta-band,
  .streamline--yellow + .footer {
    --flow-y0: 24px; --flow-y1: 27px; --flow-y2: 30px;
    --flow-y3: 37px; --flow-y4: 43px; --flow-y5: 47px;
  }
}

/* ---------- Why ---------- */
.why {
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(22, 143, 255, 0.10), transparent 60%),
    var(--bg);
}
.why__body { max-width: 62ch; }
.why__punch {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--text);
  margin: var(--space-8) 0 0;
}
.why__byline {
  margin: var(--space-6) 0 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* ---------- The display ---------- */
.one-screen {
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(255, 211, 58, 0.09), transparent 60%),
    var(--bg-2);
}
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--reverse .split__body  { order: 2; }
  .split--reverse .split__media { order: 1; }
}

.legend {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 52ch;
  font-size: 0.98rem;
  color: var(--text-muted);
}
.legend li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.legend strong { color: var(--text); font-weight: 600; }
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-top: 0.42em;
}
.swatch--blue  { background: var(--blue); }
.swatch--white { background: #ffffff; }
.swatch--ring {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.swatch--squares {
  border-radius: 0;
  background:
    linear-gradient(90deg,
      var(--yellow) 0 4px, transparent 4px 6px,
      var(--yellow) 6px 10px, transparent 10px 12px,
      var(--grey-idle) 12px 16px);
  height: 6px;
  margin-top: 0.62em;
}

/* ---------- The watch mock ---------- */
.watch-figure { margin: 0; }
.watch__frame {
  position: relative;
  width: min(80vw, 380px);
  margin-inline: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.52));
}
@media (min-width: 920px) {
  .watch__frame { width: min(34vw, 400px); }
}
.watch {
  position: relative;
  width: 100%;
  aspect-ratio: 552 / 686;
}
.watch__shell {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.watch__screen {
  position: absolute;
  z-index: 1;
  top: 15.52%;
  left: 6.25%;
  width: 84.42%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--screen);
  color: var(--screen-val);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  container-type: inline-size;
  box-shadow: inset 0 0 0 max(1px, 0.35cqi) rgba(255, 255, 255, 0.08);
  font-family: "SuuntoText", var(--font-display);
  font-variant-numeric: tabular-nums;
}
.watch__render { width: 100%; height: 100%; object-fit: cover; }

.watch__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.watch__wedge {
  fill: var(--blue);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), fill 220ms ease;
}
[data-slot]:not([data-slot="0"]) .watch__wedge { fill: var(--yellow); }

.watch__ring {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  opacity: 0;
  transition: opacity 200ms ease;
}
[data-slot]:not([data-slot="0"]) .watch__ring { opacity: 1; }

.watch__square { fill: var(--grey-idle); transition: fill 180ms ease; }
.watch__square.is-on { fill: var(--yellow); }

/* Text layer — tops and columns taken verbatim from t.html */
.watch__clock,
.watch__city,
.watch__icon,
.watch__t,
.watch__v {
  position: absolute;
  z-index: 2;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.watch__t { color: var(--screen-lbl); font-size: 6.5cqi; }
.watch__v { color: var(--screen-val); font-size: 11.8cqi; transform: translateY(-0.12em); }

.watch__clock {
  top: 15.5%;
  left: 0;
  width: 100%;
  font-size: 13.1cqi;
  color: var(--screen-val);
  transform: translateY(-0.12em);
  transition: color 220ms ease;
}
[data-slot]:not([data-slot="0"]) .watch__clock { color: var(--yellow); }

.watch__t--dir  { top: 32%; left: 10%; width: 25%; }
.watch__v--wind { top: 43%; left: 10%; width: 25%; }
.watch__t--gust { top: 56%; left: 10%; width: 25%; }
.watch__t--unit { top: 62%; left: 10%; width: 25%; }

.watch__t--feels { top: 32%; left: 40%; width: 20%; }
.watch__v--temp  {
  top: 41%; left: 35%; width: 30%;
  font-family: "SuuntoDisplay", var(--font-display);
  font-size: 13.1cqi;
  transform: translateY(-0.10em);
}
.watch__icon {
  top: 57%; left: 44%; width: 12%;
  color: var(--screen-val);
}
.watch__icon svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.watch__t--hum  { top: 32%; left: 65%; width: 25%; }
.watch__v--pop  { top: 43%; left: 65%; width: 25%; }
.watch__t--rain { top: 56%; left: 65%; width: 25%; }
.watch__t--mm   { top: 62%; left: 65%; width: 25%; }

.watch__city {
  top: 82%; left: 15%; width: 70%;
  font-size: 7.7cqi;
  color: var(--screen-lbl);
}

@container (max-width: 299px) {
  .watch__t--gust,
  .watch__t--rain { display: none; }
}

/* The clickable upper button, sitting over the shell's own UP button */
.watch__button {
  position: absolute;
  top: 30%;
  right: 3%;
  width: clamp(3rem, 10vw, 4rem);
  height: clamp(3rem, 10vw, 4rem);
  padding: 0;
  transform: translate(22%, -50%) rotate(18deg);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--yellow);
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.watch__button::before,
.watch__button::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.65;
  box-shadow: 0 0 18px rgba(255, 211, 58, 0.38);
  animation: watch-pulse 1800ms ease-out infinite;
}
.watch__button::after { animation-delay: 900ms; }
.watch__button--current {
  top: 69%;
  color: var(--blue);
}
.watch__button:hover,
.watch__button:focus-visible { color: var(--text); }
.watch__button.is-used::before,
.watch__button.is-used::after { animation: none; opacity: 0.35; }

@keyframes watch-pulse {
  0%   { transform: scale(0.72); opacity: 0.72; }
  75%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Hour pills — where the blue/yellow semantic is taught */
.view-pills {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.view-pills button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.view-pills button:hover { color: var(--text); border-color: var(--border-strong); }
.view-pills button[aria-pressed="true"] {
  color: var(--yellow-ink);
  background: var(--yellow);
  border-color: var(--yellow);
}
.view-pills li:first-child button[aria-pressed="true"] {
  color: var(--blue-ink);
  background: var(--blue);
  border-color: var(--blue);
}

.watch-figure__hint {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- Wind pointer ---------- */
.wind {
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(22, 143, 255, 0.09), transparent 65%),
    var(--bg);
}
.wind__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.wind__body .section__lead { margin-inline: auto; }
.wind__figure { margin: var(--space-12) 0 0; }
.wind-diagram { width: 100%; height: auto; }
.wind-diagram__flow path {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
}
.wind-diagram__flowlabel,
.wind-diagram__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  fill: var(--text-muted);
  font-size: 13px;
}
.wind-diagram__face { fill: var(--screen); stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.wind-diagram__wedge { fill: var(--blue); }
.wind-diagram__heading {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wind__figure figcaption {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 54ch;
  margin-inline: auto;
}

/* ---------- Mid-page CTA band ---------- */
.cta-band {
  text-align: center;
  padding-block: var(--space-12) var(--space-16);
  background:
    radial-gradient(85% 100% at 50% 100%, rgba(255, 211, 58, 0.14) 0%, transparent 68%),
    var(--bg-2);
}
.cta-band__note {
  margin: var(--space-4) auto 0;
  max-width: 54ch;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------- Reference ---------- */
.reference {
  background:
    radial-gradient(1000px 420px at 75% 0%,  rgba(255, 211, 58, 0.07), transparent 60%),
    radial-gradient(900px 420px at 20% 100%, rgba(22, 143, 255, 0.08), transparent 60%),
    var(--bg);
}
.reference__head {
  max-width: 62ch;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.reference__head .section__lead { margin-inline: auto; }

.reassure {
  list-style: none;
  max-width: 760px;
  margin: 0 auto var(--space-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.reassure li { display: inline-flex; align-items: center; gap: var(--space-2); }
.reassure__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 211, 58, 0.55);
  flex: none;
}

.accordion {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.accordion__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 78px;
}
.accordion__item[open] {
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--yellow);
}
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  transition: color var(--transition);
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { color: var(--yellow); }
.accordion__chevron {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
}
.accordion__item[open] > .accordion__head .accordion__chevron {
  transform: rotate(180deg);
  color: var(--yellow);
}
.accordion__panel {
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) var(--surface-2);
  padding: 0 var(--space-6) var(--space-6);
  color: var(--text-muted);
}
.accordion__panel::-webkit-scrollbar { width: 8px; }
.accordion__panel::-webkit-scrollbar-track { background: var(--surface-2); }
.accordion__panel::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border: 2px solid var(--surface-2);
  border-radius: var(--radius-pill);
}
.accordion__panel::-webkit-scrollbar-thumb:hover { background: var(--yellow-deep); }
.accordion__panel p { margin: 0 0 var(--space-4); }
.accordion__panel strong { color: var(--text); font-weight: 600; }
.accordion__panel a {
  color: var(--blue-bright);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color var(--transition), background-size var(--transition);
}
.accordion__panel a:hover { background-size: 100% 1px; }

.spec-lead { margin-bottom: var(--space-2) !important; }
.spec-list {
  margin: 0 0 var(--space-4);
  padding-left: 1.2em;
}
.spec-list li { margin-bottom: var(--space-2); }

.faq__q {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin: var(--space-6) 0 var(--space-2) !important;
}
.faq__q:first-child { margin-top: 0 !important; }
.faq__a { line-height: 1.7; }

.changelog__version {
  font-size: 1.1rem;
  color: var(--yellow);
  margin: var(--space-6) 0 var(--space-3);
}
.changelog__version:first-child { margin-top: 0; }
.changelog ul { margin: 0; padding-left: 1.2em; }
.changelog li { margin-bottom: var(--space-2); }

/* ---------- Features ---------- */
.features {
  background:
    radial-gradient(1100px 420px at 50% 100%, rgba(22, 143, 255, 0.06), transparent 62%),
    var(--bg-2);
}
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .card:nth-child(2n) { margin-top: var(--space-4); }
}
@media (min-width: 1040px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .card:nth-child(2n) { margin-top: 0; }
  .card:nth-child(2) { margin-top: var(--space-4); }
  .card:nth-child(3) { margin-top: var(--space-8); }
  .card:nth-child(4) { margin-top: var(--space-4); }
}
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  transition: border-color var(--transition);
}
.card:hover { border-color: rgba(255, 211, 58, 0.50); }
.card--now:hover { border-color: rgba(22, 143, 255, 0.55); }
/* .reveal declares its own transition at 0-1-0; once visible this 0-2-0 rule
   wins back the border-color transition used on hover. */
.card.is-visible {
  transition: opacity 700ms ease,
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color var(--transition);
}
.card__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: var(--space-6);
}
.card--now  .card__icon { background: var(--blue-tint);   color: var(--blue); }
.card--next .card__icon { background: var(--yellow-tint); color: var(--yellow); }
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: 1.35rem; margin-bottom: var(--space-3); }
.card__text { color: var(--text-muted); font-size: 1rem; margin: 0; }

/* ---------- Maker note ---------- */
.note {
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(22, 143, 255, 0.05), transparent 70%),
    var(--bg);
  padding-block: var(--space-20);
}
@media (min-width: 768px) {
  .note { padding-block: var(--space-24); }
}
.note__inner {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.note__avatar {
  position: relative;
  isolation: isolate;
  width: 108px;
  height: 108px;
  margin: var(--space-4) auto var(--space-6);
}
.note__avatar-circle {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  border: 2px solid rgba(79, 168, 255, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(22, 143, 255, 0.28), transparent 56%),
    var(--surface-2);
  box-shadow:
    0 0 0 4px rgba(22, 143, 255, 0.08),
    0 14px 34px -18px rgba(22, 143, 255, 0.75);
  transform: scale(0.82);
}
.note__avatar-image {
  position: absolute;
  z-index: 1;
  top: -20%;
  left: 50%;
  width: 146%;
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 7px) scale(0.97);
  pointer-events: none;
  user-select: none;
}
.note__avatar-image--popout {
  z-index: 2;
  clip-path: inset(0 -15% 55% -15%);
}
.note__inner.is-visible .note__avatar-circle {
  animation: note-avatar-circle-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
}
.note__inner.is-visible .note__avatar-image {
  animation: note-avatar-face-in 720ms cubic-bezier(0.16, 1, 0.3, 1) 440ms both;
}
@keyframes note-avatar-circle-in {
  0% { opacity: 0; transform: scale(0.82); }
  70% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes note-avatar-face-in {
  from { opacity: 0; transform: translate(-50%, 7px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.note__inner p { color: #e7ebef; font-size: 1.08rem; line-height: 1.7; }
.note__sign {
  margin-top: var(--space-6);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ---------- Setup ---------- */
.howto {
  background:
    radial-gradient(1000px 460px at 50% 0%, rgba(255, 211, 58, 0.07), transparent 62%),
    var(--bg-2);
}
.howto__head { margin-bottom: var(--space-12); max-width: 44ch; }
.howto__compat { color: var(--text-muted); margin: 0; }
.install { max-width: 640px; margin: 0 0 var(--space-8); }
.install__kicker,
.steps__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--yellow);
  margin: 0 0 var(--space-4);
}
.steps__kicker { margin-top: var(--space-8); }
.install__steps {
  margin: 0;
  padding-left: 1.4em;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: start;
  gap: var(--space-6);
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .step:nth-child(2) { margin-top: var(--space-4); }
  .step:nth-child(3) { margin-top: var(--space-8); }
}
.step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: rgba(22, 26, 31, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition);
}
.step:hover { border-color: rgba(255, 211, 58, 0.45); }
.step__num {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--yellow-ink);
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
}
.step__title { font-size: 1.2rem; margin-bottom: var(--space-2); }
.step__text { color: var(--text-muted); font-size: 0.98rem; margin: 0; }
.howto__help {
  margin-top: var(--space-12);
  font-size: 1.05rem;
  color: var(--text-muted);
}
.howto__help a,
.why__byline a {
  color: var(--blue-bright);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color var(--transition), background-size var(--transition);
}
.howto__help a:hover,
.why__byline a:hover { background-size: 100% 1px; }

/* ---------- Footer ---------- */
.footer {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(255, 211, 58, 0.10), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--space-24);
  text-align: center;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.footer__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  max-width: 22ch;
  margin-bottom: var(--space-2);
}
.footer__lead {
  font-size: 1.08rem;
  max-width: 46ch;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.footer__cta-note,
.footer__links,
.footer__contact,
.footer__copy,
.footer__seealso,
.footer__legal { margin: 0; }
.footer__cta-note { font-size: 0.92rem; color: var(--text-muted); }
.footer__links { margin-top: var(--space-4); }
.footer__links a { color: var(--yellow); font-weight: 600; text-decoration: none; }
.footer__links a:hover { color: var(--yellow-deep); }
.footer__sep { margin-inline: var(--space-3); color: var(--text-faint); }
.footer__contact { color: var(--text-muted); }
.footer__contact a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__copy { font-size: 0.9rem; color: var(--text-faint); }
.footer__copy a,
.footer__seealso a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__seealso {
  width: min(100%, 46rem);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.footer__seealso-title {
  margin: 0 0 var(--space-3);
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__seealso-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.footer__seealso-list li {
  border-left: 2px solid var(--border-strong);
}
.footer__seealso-list li:first-child { border-left-color: var(--blue); }
.footer__seealso-list li:last-child { border-left-color: var(--yellow); }
.footer__seealso-list a {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition);
}
.footer__seealso-name {
  width: fit-content;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer__seealso-arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.footer__seealso-desc {
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.45;
}
@media (hover: hover) {
  .footer__seealso-list li:first-child a:hover {
    background-color: rgba(22, 143, 255, 0.07);
  }
  .footer__seealso-list li:last-child a:hover {
    background-color: rgba(255, 211, 58, 0.07);
  }
  .footer__seealso-list li:first-child a:hover .footer__seealso-name {
    color: var(--blue-bright);
  }
  .footer__seealso-list li:last-child a:hover .footer__seealso-name {
    color: var(--yellow);
  }
  .footer__seealso-list a:hover .footer__seealso-arrow {
    transform: translate(0.15rem, -0.1rem);
  }
}
.footer__seealso-list li:first-child a:focus-visible {
  background-color: rgba(22, 143, 255, 0.07);
}
.footer__seealso-list li:last-child a:focus-visible {
  background-color: rgba(255, 211, 58, 0.07);
}
.footer__seealso-list li:first-child a:focus-visible .footer__seealso-name {
  color: var(--blue-bright);
}
.footer__seealso-list li:last-child a:focus-visible .footer__seealso-name {
  color: var(--yellow);
}
.footer__seealso-list a:focus-visible .footer__seealso-arrow {
  transform: translate(0.15rem, -0.1rem);
}
.footer__seealso-list a:active .footer__seealso-arrow {
  transform: translate(0.05rem, 0.05rem) scale(0.92);
  transition-duration: 80ms;
}
@media (min-width: 640px) {
  .footer__seealso-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer__legal {
  max-width: 52ch;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease,
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

.reveal-fade { opacity: 0; transition: opacity 700ms ease; }
.reveal-fade.is-visible { opacity: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal-fade { opacity: 1; transform: none; }

  .watch__button::before,
  .watch__button::after { animation: none; opacity: 0.55; transform: none; }
  .watch__button::after { display: none; }

  .streamline svg { transform: none; }

  .note__avatar-circle {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .note__avatar-image {
    opacity: 1;
    transform: translateX(-50%);
    animation: none !important;
  }

  .footer__seealso-list a:hover .footer__seealso-arrow,
  .footer__seealso-list a:focus-visible .footer__seealso-arrow,
  .footer__seealso-list a:active .footer__seealso-arrow { transform: none; }
}