/* ============================================================================
   Iron Ear — iron-ear.com
   Dark-only static site. Everything vendored: zero external requests.
   Metal Mania = display headings only. Outfit = everything else.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* grounds */
  --bg:         #0b111c;
  --bg-2:       #0e1622;
  --panel:      #111a28;
  --panel-hi:   #16202f;

  /* strokes */
  --stroke:     #1c2a3f;
  --stroke-hi:  #24364f;
  --stroke-blue:#1a3a66;

  /* ink
     --ink-3 is lightened from the app palette's #5d748b, which only clears
     3.5:1 on these grounds. This site uses the tertiary ink exclusively on
     small text (fine print, captions, labels), so it has to clear WCAG AA's
     4.5:1 — #7f97b0 gives 5.6-6.4:1 and still reads a clear step below --ink-2. */
  --ink:        #e4edf7;
  --ink-2:      #9db4cc;
  --ink-3:      #7f97b0;

  /* accents */
  --accent:     #4da3ff;
  --accent-hi:  #bfddff;
  --accent-dim: #2563b0;
  --success:    #55ff99;
  --success-dp: #00cc44;

  /* type */
  --display: 'Metal Mania', 'Papyrus', fantasy;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 40px);
  --shell: 1120px;
  --radius: 14px;
  --radius-lg: 20px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw + 14px, 18px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient blue bloom behind the page — pure CSS, no image request. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw auto;
  height: 90vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 50% 12%, rgba(77, 163, 255, 0.16), transparent 70%),
    radial-gradient(40% 30% at 82% 4%,  rgba(37, 99, 176, 0.13), transparent 72%);
}

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

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.5em; }
li::marker { color: var(--accent); }

a { color: var(--accent); text-decoration-color: rgba(77, 163, 255, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke-hi) 18%, var(--stroke-hi) 82%, transparent);
  margin: clamp(40px, 7vw, 72px) 0;
}

::selection { background: rgba(77, 163, 255, 0.3); color: #fff; }

/* ------------------------------------------------------------- typography -- */
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; }

/* Metal Mania is display-only and never below ~24px. It has no bold weight,
   so size and letter-spacing carry the hierarchy. */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 0 18px rgba(77, 163, 255, 0.28), 0 0 44px rgba(37, 99, 176, 0.2);
}

h1.display { font-size: clamp(38px, 7.4vw, 66px); }
h2.display { font-size: clamp(30px, 5.4vw, 48px); }

h3 {
  font-family: var(--sans);
  font-size: clamp(19px, 1.4vw + 15px, 23px);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
}

h4 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9em;
}

.lead {
  font-size: clamp(19px, 1.1vw + 16px, 24px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.text-center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; line-height: 1.6; }
.fine  { font-size: 0.82rem; line-height: 1.6; color: var(--ink-3); }

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

/* ------------------------------------------------------------------ shell -- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.shell-narrow { max-width: 760px; }

main { position: relative; z-index: 1; }

.section { padding: clamp(56px, 9vw, 104px) 0; }
.section-tight { padding: clamp(40px, 6vw, 68px) 0; }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 60;
  padding: 12px 18px;
  background: var(--accent);
  color: #041022;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; color: #041022; }

/* --------------------------------------------------------------- wordmark -- */
.wordmark { display: block; width: auto; color: #fff; }

@keyframes ie-glow {
  0%, 100% { filter: drop-shadow(0 0 6px #4da3ff)  drop-shadow(0 0 16px #2563b0); }
  50%      { filter: drop-shadow(0 0 10px #6cb4ff) drop-shadow(0 0 26px #4da3ff); }
}

.wordmark-glow { animation: ie-glow 2.5s ease-in-out infinite; }

/* Compact lockup — skull/headstock + "IRON EAR", music-staff flourishes removed.
   Used wherever the mark sits below ~40px, where the full wordmark turns to mush. */
.lockup { display: block; width: auto; height: 26px; color: #fff; }
.lockup-sm { height: 26px; }
.lockup-md { height: 30px; }

/* ----------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 17, 28, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
}

.header-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 14px);
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(8px, 1.4vw, 13px);
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; background: rgba(77, 163, 255, 0.09); }
.site-nav a[aria-current="page"] { color: var(--accent-hi); }

/* ------------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  /* contains the aurora: it can never spill and cause horizontal scroll */
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) 0 clamp(44px, 7vw, 76px);
  text-align: center;
}

.hero > .shell { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- aurora --
   A dependency-free take on the ReactBits Aurora background. Theirs is React +
   OGL/WebGL, which this site can't ship (zero external requests, no build step),
   so the effect is rebuilt from soft CSS gradients: three curtains that drift
   and breathe over a static wash, plus a ray layer for the vertical striation a
   real aurora has. Only transform and opacity animate — no background-position
   churn, no filter: blur(), so it composites on the GPU and stays cheap.

   Palette is brand blues only: #16345c bases, #4da3ff cores, rare #bfddff ice
   crests. Deliberately no warmth — the faint orange embers in the artwork are
   the only warm thing on the page and they stay that way.

   The whole stack is masked to fade out through the middle of the hero, so it
   sits behind the artwork but has all but vanished by the time the hero lead
   and sub-copy start. Text contrast is never the aurora's business.          */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Smooth S-curve, no slope jumps — a stepped mask leaves a visible Mach band
     across the hero. Effectively gone by the time the lead copy starts. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, rgba(0, 0, 0, 0.97) 18%, rgba(0, 0, 0, 0.86) 32%, rgba(0, 0, 0, 0.64) 44%,
    rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.18) 66%, rgba(0, 0, 0, 0.06) 77%, transparent 90%);
          mask-image: linear-gradient(to bottom,
    #000 0%, rgba(0, 0, 0, 0.97) 18%, rgba(0, 0, 0, 0.86) 32%, rgba(0, 0, 0, 0.64) 44%,
    rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.18) 66%, rgba(0, 0, 0, 0.06) 77%, transparent 90%);
}

/* Static wash. This is also most of the effect under prefers-reduced-motion.
   Kept well inside the edges so the hero corners stay properly dark. */
.hero-aurora::before {
  content: "";
  position: absolute;
  inset: -18% 0 auto;
  height: 112%;
  background:
    radial-gradient(46% 38% at 50% 22%, rgba(37, 99, 176, 0.14), transparent 72%),
    radial-gradient(32% 30% at 22% 32%, rgba(22, 52, 92, 0.26), transparent 76%),
    radial-gradient(32% 30% at 80% 28%, rgba(22, 52, 92, 0.26), transparent 78%);
}

/* Slanted, narrow ribbons — rotation plus an anisotropic radial is what makes
   them read as curtains of light rather than a flat blue panel. */
.aur {
  position: absolute;
  inset: -30% -24% auto;
  height: 112%;
  transform-origin: 50% 28%;
}

.aur-1 {
  background: radial-gradient(24% 52% at 33% 36%, rgba(77, 163, 255, 0.19), rgba(37, 99, 176, 0.08) 46%, transparent 74%);
  transform: rotate(-17deg) translate3d(-2%, 0, 0) scale(1.02);
  opacity: 0.6;
  animation: ie-aur-1 34s ease-in-out infinite;
}

.aur-2 {
  background: radial-gradient(22% 48% at 69% 32%, rgba(37, 99, 176, 0.23), rgba(22, 52, 92, 0.09) 48%, transparent 76%);
  transform: rotate(15deg) translate3d(2%, 0, 0) scale(1);
  opacity: 0.55;
  animation: ie-aur-2 27s ease-in-out infinite -9s;
}

/* The ice crest — rarest and faintest of the three. */
.aur-3 {
  background: radial-gradient(15% 33% at 51% 24%, rgba(191, 221, 255, 0.1), rgba(77, 163, 255, 0.06) 44%, transparent 70%);
  transform: rotate(-5deg) translate3d(0, 0, 0) scale(1);
  opacity: 0.45;
  animation: ie-aur-3 43s ease-in-out infinite -17s;
}

.aur-rays {
  position: absolute;
  inset: -30% -30% auto;
  height: 96%;
  background: repeating-linear-gradient(
    100deg,
    rgba(77, 163, 255, 0)      0%,
    rgba(77, 163, 255, 0.07)   1.9%,
    rgba(77, 163, 255, 0)      4.4%,
    rgba(37, 99, 176, 0)       5.1%,
    rgba(37, 99, 176, 0.05)    6.3%,
    rgba(37, 99, 176, 0)       8.2%,
    rgba(191, 221, 255, 0)     9%,
    rgba(191, 221, 255, 0.035) 10.2%,
    rgba(191, 221, 255, 0)     12.6%
  );
  -webkit-mask-image: radial-gradient(56% 64% at 50% 16%, #000, rgba(0, 0, 0, 0.45) 48%, transparent 78%);
          mask-image: radial-gradient(56% 64% at 50% 16%, #000, rgba(0, 0, 0, 0.45) 48%, transparent 78%);
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 0.9;
  animation: ie-aur-rays 38s ease-in-out infinite -12s;
}

@keyframes ie-aur-1 {
  0%, 100% { transform: rotate(-17deg) translate3d(-2%, 0, 0)  scale(1.02); opacity: 0.6; }
  50%      { transform: rotate(-11deg) translate3d(4%, -3%, 0) scale(1.16); opacity: 0.86; }
}
@keyframes ie-aur-2 {
  0%, 100% { transform: rotate(15deg) translate3d(2%, 0, 0)    scale(1);    opacity: 0.55; }
  50%      { transform: rotate(9deg)  translate3d(-4%, -2%, 0) scale(1.14); opacity: 0.8; }
}
@keyframes ie-aur-3 {
  0%, 100% { transform: rotate(-5deg) translate3d(0, 0, 0)     scale(1);    opacity: 0.45; }
  50%      { transform: rotate(4deg)  translate3d(6%, -4%, 0)  scale(1.28); opacity: 0.78; }
}
@keyframes ie-aur-rays {
  0%, 100% { transform: translate3d(-4%, 0, 0) rotate(-0.6deg); opacity: 0.75; }
  50%      { transform: translate3d(4%, 0, 0)  rotate(0.6deg);  opacity: 1; }
}

/* --------------------------------------------------------------- hero art -- */
/* The mark is a rendered 3D wordmark with its own baked glow, knocked out of a
   light studio backdrop and shipped as WebP with alpha. The width and height
   attributes are set in the markup, so the slot is reserved before the file
   loads — no layout shift. */
.hero-art {
  width: min(560px, 88vw);
  height: auto;
  margin: 0 auto;
}

.hero-mark { margin-bottom: clamp(4px, 1.2vw, 14px); }

.hero-lead {
  max-width: 22ch;
  margin: 0 auto 0.85em;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.hero-lead em {
  font-style: normal;
  color: var(--accent-hi);
}

.hero-sub {
  max-width: 46ch;
  margin: 0 auto clamp(30px, 4.5vw, 42px);
  font-size: clamp(16px, 0.8vw + 14px, 19px);
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* -------------------------------------------------------------- app badge -- */
/* Custom badge — deliberately NOT Apple's trademarked artwork.
   Same box works as <a> once the store link exists. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 10px 26px 10px 22px;
  border: 1px solid var(--stroke-blue);
  border-radius: 13px;
  background: linear-gradient(180deg, var(--panel-hi), #0d1522);
  color: #fff;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.06), 0 14px 34px -18px rgba(77, 163, 255, 0.55);
}

.badge svg { flex: none; color: var(--accent); }

.badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.badge-kicker {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.badge-title {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.badge-soon { cursor: default; }

a.badge:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1a2637, #101a29);
  color: #fff;
}

.hero-note {
  max-width: 42ch;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- spec strip -- */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--stroke);
  overflow: hidden;
}

.spec-strip > div {
  background: var(--bg-2);
  padding: 20px 18px;
  text-align: center;
}

.spec-strip dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.spec-strip dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
}

/* --------------------------------------------------------------- features -- */
.section-head {
  max-width: 620px;
  margin-bottom: clamp(34px, 5vw, 54px);
}
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 22px);
}

.card {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(22, 32, 47, 0.72), rgba(14, 22, 34, 0.72));
}

.card h3 { margin-bottom: 0.45em; }
.card p { color: var(--ink-2); font-size: 0.97rem; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border: 1px solid var(--stroke-blue);
  border-radius: 12px;
  background: rgba(77, 163, 255, 0.08);
  color: var(--accent);
}

.card-soon {
  border-style: dashed;
  border-color: var(--stroke-hi);
  background: transparent;
}
.card-soon .card-icon {
  border-color: var(--stroke-hi);
  background: rgba(157, 180, 204, 0.06);
  color: var(--ink-2);
}
.card-soon h3 { color: var(--ink-2); }

.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--stroke-hi);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  vertical-align: middle;
  white-space: nowrap;
}

.card-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- privacy -- */
.privacy-band {
  position: relative;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(77, 163, 255, 0.1), transparent 68%),
    var(--bg-2);
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.privacy-points { list-style: none; margin: 0; padding: 0; }
.privacy-points li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 30px;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.privacy-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

/* App-Store-style privacy nutrition panel */
.nutrition {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--stroke-blue);
  border-radius: var(--radius-lg);
  background: rgba(11, 17, 28, 0.66);
}
.nutrition .eyebrow { margin-bottom: 0.7em; }
.nutrition strong {
  display: block;
  font-family: var(--sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------ inner pages -- */
.page-head {
  padding: clamp(44px, 7vw, 78px) 0 clamp(12px, 2vw, 22px);
}
.page-head .lead { color: var(--ink-2); max-width: 60ch; }

.prose h2 {
  font-family: var(--sans);
  font-size: clamp(21px, 1.5vw + 16px, 26px);
  font-weight: 600;
  color: #fff;
  margin-top: 2.1em;
  margin-bottom: 0.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--stroke);
}
/* The first heading follows a section boundary already — no second rule. */
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

.callout {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--stroke-blue);
  border-radius: var(--radius-lg);
  background: rgba(77, 163, 255, 0.06);
}
.callout p { color: var(--ink); }
.callout .eyebrow { margin-bottom: 0.6em; }

/* contact block */
.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--stroke-blue);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(22, 32, 47, 0.7), rgba(14, 22, 34, 0.7));
}
.contact-card .card-icon { margin-bottom: 0; }
.contact-card > div { min-width: 0; flex: 1 1 240px; }

.mail-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.005em;
  word-break: break-word;
}

/* Standalone (non-prose) links still need a 44px tap target. Links sitting
   inside a sentence are exempt under WCAG 2.5.8 and stay inline. */
.link-tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ------------------------------------------------------------------- FAQ -- */
h2.display-sm { font-size: clamp(26px, 4.4vw, 38px); }

.contact-label { margin-bottom: 2px; }
.contact-hint  { margin-top: 6px; }

.faq { border-top: 1px solid var(--stroke); }

.faq details {
  border-bottom: 1px solid var(--stroke);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 500;
  color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-hi); }

.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-right: 6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.faq .answer {
  padding: 0 4px 22px;
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 0.97rem;
}

/* ----------------------------------------------------------------- footer -- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--stroke);
  background: #080d16;
  padding: clamp(40px, 6vw, 60px) 0 clamp(30px, 4vw, 42px);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  align-items: flex-start;
  justify-content: space-between;
}

.footer-brand { flex: 1 1 260px; }
.footer-brand p { margin-top: 16px; max-width: 34ch; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
}

.footer-links h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  word-break: break-word;
}
.footer-links a:hover { color: var(--accent-hi); text-decoration: underline; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--stroke);
}

/* -------------------------------------------------------------------- 404 -- */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px var(--gutter);
  position: relative;
  z-index: 1;
}
.notfound .wordmark { width: min(480px, 100%); height: auto; margin-bottom: clamp(26px, 5vw, 40px); }
.notfound h1 { max-width: 16ch; }
.notfound p { max-width: 40ch; color: var(--ink-2); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin-top: 26px;
  padding: 0 24px;
  border: 1px solid var(--stroke-blue);
  border-radius: 11px;
  background: rgba(77, 163, 255, 0.07);
  color: var(--accent-hi);
  font-weight: 500;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(77, 163, 255, 0.14); color: #fff; }

/* ------------------------------------------------------------ small print -- */
@media (max-width: 420px) {
  .badge { width: 100%; justify-content: center; }
  .site-header .shell { min-height: 58px; }
}

/* --------------------------------------------------------------- a11y/moti -- */
@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;
  }
  .wordmark-glow {
    animation: none;
    filter: drop-shadow(0 0 8px #4da3ff) drop-shadow(0 0 20px #2563b0);
  }
  .faq summary::after { transition: none; }

  /* The aurora holds its pose instead of drifting. The static wash plus the
     three settled curtains still read as a designed sky, not a blank hero. */
  .aur, .aur-rays { animation: none; }
  .aur-1 { transform: rotate(-14deg) translate3d(1%, -2%, 0)  scale(1.1);  opacity: 0.74; }
  .aur-2 { transform: rotate(12deg)  translate3d(-1%, -1%, 0) scale(1.08); opacity: 0.68; }
  .aur-3 { transform: rotate(-1deg)  translate3d(3%, -2%, 0)  scale(1.15); opacity: 0.6; }
  .aur-rays { transform: rotate(-0.3deg); opacity: 0.8; }
}

@media (forced-colors: active) {
  .card, .badge, .contact-card, .nutrition { border-color: CanvasText; }
}

.notfound-links { margin-top: 26px; }