/* ==========================================================================
   DARK SEA — BETA WEBSITE  ·  WEB-M001 FOUNDATION + WEB-M002 HERO
   --------------------------------------------------------------------------
   Single stylesheet for the beta shell. All design decisions live in the
   :root token block below so later missions (WEB-M003..WEB-M006) restyle the
   site by changing tokens, not by rewriting layout.

   Palette source: matches the in-game HUD chrome palette
   (assets/Scripts/UI/HUD/HUDuGUISeafightChrome.cs — navy panels, bronze and
   gold accents) so the website and the game read as one product.

   Hero background art: assets/images/hero-seascape.png — real Dark Sea launcher
   seascape reused as a TEMPORARY hero image. Owner replacement required; see
   website/README.md for the asset provenance note.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Backgrounds */
  --bg-900: #05090D;
  --bg-800: #08121B;
  --bg-700: #0C1822;

  /* Accents — restrained: gold/bronze highlight, never the dominant colour */
  --bronze: #8B6428;
  --gold: #D3A83E;
  --highlight: #F2CA58;

  /* Text */
  --text-primary: #F1E8D5;
  --text-secondary: #979B9D;

  /* Derived surfaces (kept here so they stay in sync with the palette) */
  --surface: rgba(12, 24, 34, 0.72);
  --surface-raised: rgba(8, 18, 27, 0.86);
  --hairline: rgba(139, 100, 40, 0.34);
  --hairline-strong: rgba(211, 168, 62, 0.46);
  --focus: var(--highlight);

  /* Typography */
  --font-heading: "Cinzel", "Cinzel Decorative", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — no fixed pixel widths, scales 360px → 1920px */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.10rem, 1.04rem + 0.30vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.30vw, 2.70rem);
  --step-4:  clamp(2.30rem, 1.60rem + 3.20vw, 4.60rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Layout */
  --content-max: 1180px;
  --content-pad: clamp(1rem, 0.55rem + 2.1vw, 3rem);
  --header-h: 68px;
  --radius: 4px;
  --radius-lg: 6px;

  /* Effects */
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(211, 168, 62, 0.32), 0 6px 26px rgba(211, 168, 62, 0.10);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background-color: var(--bg-900);
  /* Layered atmosphere: subtle radial light + deep vertical gradient */
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(211, 168, 62, 0.075), transparent 62%),
    radial-gradient(900px 520px at 12% 6%, rgba(139, 100, 40, 0.055), transparent 60%),
    linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 46%, var(--bg-700) 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  /* Guard against any accidental horizontal overflow */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent media from ever forcing horizontal scroll */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

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

/* ------------------------------------------------------- 3. LAYOUT PRIMS */
.shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.section {
  position: relative;
  padding-block: clamp(3.25rem, 2rem + 5vw, 6.5rem);
}

/* Alternating band keeps long-scroll rhythm without heavy ornament */
.section--alt {
  background: linear-gradient(180deg, rgba(8, 18, 27, 0.55), rgba(5, 9, 13, 0.15));
  border-block: 1px solid var(--hairline);
}

.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 1rem + 2.4vw, 3rem); }

.section-title { font-size: var(--step-3); color: var(--text-primary); }

.section-lede {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
}

/* --------------------------------------------------------- 4. EYEBROW/UI */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: 0 0 0 3px rgba(242, 202, 88, 0.16);
  flex: 0 0 auto;
}

.mono { font-family: var(--font-mono); font-size: 0.95em; color: var(--highlight); }

.note {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}

.note--inline { margin-top: var(--space-5); }

/* -------------------------------------------------------------- 5. BUTTONS */
.btn {
  --btn-fg: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.72em 1.45em;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
}

.btn--primary {
  background: linear-gradient(180deg, rgba(211, 168, 62, 0.95), rgba(139, 100, 40, 0.95));
  border-color: var(--highlight);
  color: #100C04;
  box-shadow: var(--glow-gold);
}

/* Secondary tier — same weight of intent as a download, quieter than primary.
   Used by the Android beta CTA so Windows reads as the lead action. */
.btn--secondary {
  background: rgba(8, 18, 27, 0.72);
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--highlight);
  background: rgba(211, 168, 62, 0.14);
  transform: translateY(-1px);
}

/* Community tier — Discord sits under the download pair in the hero. */
.btn--ghost { background: rgba(8, 18, 27, 0.6); }

.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--highlight); background: rgba(211, 168, 62, 0.12); }

.btn--primary:hover,
.btn--primary:focus-visible { transform: translateY(-1px); }

/* Non-interactive state for download cards that are not live yet */
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Clear, consistent focus ring for every interactive element */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- 6. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 9, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); }

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  object-fit: cover;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-primary);
}

.brand__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- navigation --- */
.primary-nav { display: flex; align-items: center; gap: var(--space-5); }

.primary-nav__list { display: flex; align-items: center; gap: clamp(0.6rem, 0.2rem + 1.1vw, 1.6rem); }

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0.15rem;
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible { color: var(--text-primary); }

.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after { transform: scaleX(1); }

/* Active section, set by js/main.js */
.primary-nav__link[aria-current="true"] { color: var(--highlight); }

.primary-nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* --- mobile menu button (hidden on desktop) --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(8, 18, 27, 0.7);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-primary);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Open state: turn the bars into a close cross */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------------- 7. HERO */
/* WEB-M002 — beta hero: near-fullscreen opening using real Dark Sea art.
   The asset (assets/images/hero-seascape.png) is a crop of the project's own
   launcher artwork, taken from inside the launcher's ornate border so the
   decorative frame, the skull banners and the painted "DARK SEA" wordmark are
   all excluded. What remains is the clean seascape: moonlit water, the ship,
   the lighthouse cliffs and distant sails.
   Provenance and the "owner replacement required" note: see website/README.md
   and the WEB-M002 report. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(34rem, 84vh, 60rem);
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  background-color: var(--bg-900);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/images/hero-seascape.png");
  /* The crop is already the right shape (2:1); a slight downward bias keeps the
     horizon comfortably above the CTA row on tall viewports. */
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Readability wash: darker top for the header, darker left for left-aligned copy.
   Deliberately not an opaque box — the art stays visible throughout. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 9, 13, 0.88) 0%, rgba(5, 9, 13, 0.34) 26%,
                    rgba(5, 9, 13, 0.62) 68%, var(--bg-900) 100%),
    linear-gradient(90deg, rgba(5, 9, 13, 0.80) 0%, rgba(5, 9, 13, 0.30) 52%,
                    rgba(5, 9, 13, 0.08) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__content { max-width: 46rem; }

.hero__title {
  font-size: var(--step-4);
  letter-spacing: 0.06em;
  /* Keeps the brand legible over the moonlit sky behind it */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.75);
}

.hero__brand { display: block; }

/* Tasteful beta indicator: clearly visible, but quieter than the brand. */
.hero__beta-marker {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.36em 0.9em 0.3em;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(8, 18, 27, 0.72);
  color: var(--gold);
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* balances the trailing letter-spacing */
  line-height: 1;
}

/* Major headline: the early-access hook. */
.hero__headline {
  margin-top: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

.hero__lede {
  margin-top: var(--space-4);
  max-width: 54ch;
  color: var(--text-primary);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}

/* CTA group: primary + secondary downloads on one row, community link below. */
.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__note {
  margin-top: var(--space-5);
  /* Lightened for readability over the hero art (secondary grey can lose
     contrast against the moonlit water). */
  color: var(--text-primary);
  opacity: 0.78;
  font-size: var(--step--1);
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* Entry animation — pure CSS, disabled under prefers-reduced-motion (see §13). */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    opacity: 0;
    animation: hero-rise 0.9s var(--ease) forwards;
  }

  .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.26s; }
  .hero__content > *:nth-child(4) { animation-delay: 0.36s; }
  .hero__content > *:nth-child(5) { animation-delay: 0.46s; }
  .hero__content > *:nth-child(6) { animation-delay: 0.56s; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------------------------------------------------------- 8. PLACEHOLDERS */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(45deg, rgba(139, 100, 40, 0.05) 0 10px, transparent 10px 20px),
    var(--surface);
  color: var(--text-secondary);
  text-align: center;
}

.placeholder__label {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.82;
}

.placeholder__hint {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0.85;
}

.placeholder--hero {
  margin-top: var(--space-7);
  min-height: clamp(190px, 26vw, 340px);
}

/* ---------------------------------------------------------------- 9. CARDS */
.card-grid,
.community-grid,
.download-grid {
  display: grid;
  gap: clamp(0.9rem, 0.4rem + 1.3vw, 1.6rem);
}

.card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.community-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.download-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card,
.download-card,
.community-card {
  position: relative;
  padding: clamp(1.1rem, 0.7rem + 1.1vw, 1.7rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.card:hover,
.download-card:hover,
.community-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }

/* Thin bronze top edge — the restrained version of a "premium" accent */
.card::before,
.download-card::before,
.community-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  opacity: 0.75;
}

.card__title,
.download-card__title,
.community-card__title {
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.card__body,
.download-card__meta,
.community-card__meta {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.card__todo {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  opacity: 0.8;
}

/* ------------------------------------------------- 9b. FEATURE CARDS (M003) */
/* Three pillars only, each with a locally authored inline-SVG icon. */
.card-grid--features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.feature-card { padding-top: clamp(1.3rem, 0.9rem + 1.2vw, 1.9rem); }

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.07);
  color: var(--gold);
}

.feature-card__icon svg { width: 26px; height: 26px; }

.download-card__meta,
.community-card__meta { font-size: var(--step--1); }

.download-card .btn { margin-top: var(--space-5); }

/* ------------------------------------------- 9e. DOWNLOAD CARDS (WEB-M004) */
/* Two-state cards (READY / NOT READY). Today both are NOT READY: the Windows
   client and the Android APK do not exist in the repository, so the CTA is an
   inert <span> rather than a link that could resolve to a broken target. */
.dl-card { display: flex; flex-direction: column; }

.dl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dl-card__platform { font-size: var(--step-2); }

.dl-card__state {
  display: inline-block;
  padding: 0.28em 0.7em;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.dl-card__state--pending { color: var(--gold); background: rgba(211, 168, 62, 0.10); }

.dl-card__product {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
}

.dl-card__meta {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-3);
}

.dl-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.dl-card__row dt {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dl-card__row dd {
  margin: 0;
  font-size: var(--step-0);
  color: var(--text-primary);
  text-align: right;
  /* Long values (a real SHA256) must wrap, never force horizontal scroll */
  overflow-wrap: anywhere;
  min-width: 0;
}

.dl-card__unavailable { color: var(--text-secondary); font-style: italic; }

/* Inert CTA: visually a button, semantically not a control */
.dl-card__cta {
  margin-top: var(--space-5);
  width: 100%;
  justify-content: center;
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  text-align: center;
  white-space: normal;
}

.dl-card__block { margin-top: var(--space-5); }

.dl-card__block-title {
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dl-card__list {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.55;
}

.dl-card__list li { position: relative; padding-left: 1.1em; }

.dl-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
}

.dl-card__note { font-style: italic; opacity: 0.85; }

/* Awaiting-artifact panel */
.dl-integrity {
  margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  padding: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 27, 0.5);
}

.dl-integrity__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.dl-integrity__list {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.55;
}

.dl-integrity__list li { position: relative; padding-left: 1.1em; }

.dl-integrity__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
}

.dl-integrity__note {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Beta disclaimer: visible, not a legal notice */
.note--disclaimer {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--bronze);
  color: var(--text-primary);
  font-size: var(--step-0);
  line-height: 1.6;
  opacity: 0.92;
}

.link-placeholder {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
  opacity: 0.9;
}

.link-placeholder.is-static { text-decoration: none; cursor: default; opacity: 0.7; }

/* ------------------------------------------- 9g. COMMUNITY (WEB-M005) */
/* Discord is the primary CTA; Facebook/Instagram are secondary; YouTube is
   visible but inactive. Icons are inline SVG, so no icon font or CDN. */
.discord-feature {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  /* Slightly stronger than the secondary cards so Discord reads as primary */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(211, 168, 62, 0.13), transparent 60%),
    linear-gradient(180deg, var(--bg-700), var(--bg-800));
  box-shadow: var(--shadow-panel);
}

.discord-feature__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.10);
  color: var(--gold);
}

.discord-feature__icon svg { width: 55%; height: 55%; }

.discord-feature__body { min-width: 0; }

.discord-feature__title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.discord-feature__meta {
  margin-top: var(--space-3);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.discord-feature__cta { margin-top: var(--space-5); gap: var(--space-3); }

.discord-feature__cta .social-icon svg { width: 18px; height: 18px; }

/* Community cards: icon + title + copy + link */
.community-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.07);
  color: var(--gold);
}

.community-card__icon svg { width: 22px; height: 22px; }

.community-card__link {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--gold);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.community-card__link:hover,
.community-card__link:focus-visible { color: var(--highlight); }

/* YouTube: visible, intentional, but deliberately not a control */
.community-card__link.is-inactive {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: default;
  opacity: 0.75;
}

.community-card__link.is-inactive::after {
  content: " — Coming Soon";
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Beta feedback path */
.feedback-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 27, 0.5);
}

.feedback-panel__body { min-width: 0; flex: 1 1 22rem; }

.feedback-panel__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.feedback-panel__meta {
  margin-top: var(--space-3);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.feedback-panel__cta { flex: 0 0 auto; }

/* Inline social icon wrapper (buttons + footer) */
.social-icon { display: inline-flex; align-items: center; justify-content: center; }
.social-icon svg { width: 16px; height: 16px; display: block; }

/* Footer social links */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--step--1);
  transition: color 0.2s var(--ease);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { color: var(--highlight); }

.site-footer__social-link.is-inactive { cursor: default; opacity: 0.7; }
.site-footer__social-link.is-inactive:hover { color: var(--text-secondary); }

/* --------------------------------------------------------- 10. BETA PANEL */
.beta-panel {
  padding: clamp(1.4rem, 0.9rem + 2vw, 2.8rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(211, 168, 62, 0.06), transparent 42%),
    var(--surface-raised);
  box-shadow: var(--shadow-panel);
}

.beta-panel__body {
  margin-top: var(--space-4);
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: var(--step-1);
  font-weight: 300;
}

.beta-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.beta-fact dt {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.beta-fact dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

/* --------------------------------------------------------------- 11. FOOTER */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(5, 9, 13, 0.4), rgba(5, 9, 13, 0.92));
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
}

.site-footer__copy { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--step--1); }

.site-footer__stage {
  margin-top: var(--space-2);
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: var(--step--1);
  opacity: 0.85;
}

.site-footer__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }

.site-footer__list a {
  color: var(--text-secondary);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible { color: var(--highlight); }

.site-footer__social-label {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__social-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.site-footer__social-list .link-placeholder { margin-top: 0; }

/* --------------------------------------------------------- 12. SKIP LINK */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--gold);
  color: #100C04;
  font-weight: 600;
}

.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 13. MOTION */
@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;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   14. RESPONSIVE
   Target widths: 360 (mobile) · 768 (tablet) · 1366 · 1920 (desktop).
   The layout is intrinsically fluid; these queries only adjust navigation
   behaviour, density and spacing.
   ========================================================================== */

/* --- Mobile navigation: <= 900px collapses to the toggle menu --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5) var(--content-pad) var(--space-6);
    background: rgba(5, 9, 13, 0.97);
    border-bottom: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-panel);
  }

  /* The [hidden] attribute is the source of truth; JS toggles it */
  .primary-nav[data-open="true"] { display: flex; }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .primary-nav__list li + li { border-top: 1px solid var(--hairline); }

  .primary-nav__link { display: block; padding: 0.85rem 0; font-size: var(--step-0); }

  .primary-nav__link::after { display: none; }

  .primary-nav__cta { align-self: flex-start; margin-top: var(--space-2); }

  .site-header__inner { position: relative; }
}

/* --- Small mobile (360px / 390px classes) ---
   Query is in `em` so it also triggers when the user zooms text. */
@media (max-width: 30em) {
  :root { --header-h: 60px; }

  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 0.95rem; letter-spacing: 0.12em; }
  .brand__tag { font-size: 0.56rem; letter-spacing: 0.28em; }

  /* Hero: keep the opening section from becoming excessively tall on phones,
     and let the CTAs stack full-width without crowding. */
  .hero {
    min-height: clamp(28rem, 78vh, 42rem);
    padding-block: var(--space-7) var(--space-6);
  }

  .hero__title { font-size: clamp(2.1rem, 12vw, 3rem); }

  /* Portrait crops the pre-cropped 2:1 art heavily on X; bias slightly left so
     the moonlit water stays behind the left-aligned copy. */
  .hero__bg { background-position: 38% 45%; }

  .hero__headline { font-size: var(--step-1); letter-spacing: 0.07em; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__cta-row { align-items: stretch; }
  .hero__cta-row > .hero__cta { width: 100%; }

  .beta-facts { grid-template-columns: 1fr; }
  .card-grid, .download-grid, .community-grid { grid-template-columns: 1fr; }

  /* Download cards: stack label/value rows so nothing crowds at 360px */
  .dl-card__row { flex-direction: column; align-items: flex-start; gap: 0; }
  .dl-card__row dd { text-align: left; }
  .dl-card__head { align-items: flex-start; }
  .dl-card__cta { letter-spacing: 0.1em; }

  /* Community (WEB-M005): stack the Discord feature and feedback panel */
  .discord-feature { flex-direction: column; align-items: flex-start; }
  .discord-feature__cta { width: 100%; justify-content: center; letter-spacing: 0.1em; }
  .feedback-panel { flex-direction: column; align-items: stretch; }
  .feedback-panel__cta { width: 100%; text-align: center; justify-content: center; }
  .feedback-panel__body { flex: 1 1 auto; }
}

/* --- Tablet tuning (768px class) --- */
@media (min-width: 30.0625em) and (max-width: 64em) {
  .hero__content { max-width: 40rem; }
}

/* --- Large desktop (1920px class): widen the shell a little --- */
@media (min-width: 100em) {
  :root { --content-max: 1280px; }
}