/* [1] Starts a CSS selector rule block. */
:root {
  /* [2] Sets one CSS property value. */
  --bg: #000000;
  /* [3] Sets one CSS property value. */
  --glass: rgba(214, 239, 255, 0.09);
  /* [4] Sets one CSS property value. */
  --glass-soft: rgba(214, 239, 255, 0.05);
  /* [5] Sets one CSS property value. */
  --line: rgba(180, 222, 255, 0.28);
  /* [6] Sets one CSS property value. */
  --text: #eaf5ff;
  /* [7] Sets one CSS property value. */
  --muted: rgba(234, 245, 255, 0.75);
  /* [8] Sets one CSS property value. */
  --cyan: #51d8ff;
  /* [9] Sets one CSS property value. */
  --rose: #ff6ab7;
  /* [9a] Keeps the hero stack spacing consistent above and below the hero. */
  --section-gap: clamp(0.6rem, 1.8vw, 0.72rem);
  /* [9b] Matches the header's top inset to the same spacing used below the hero. */
  --header-top-offset: var(--section-gap);
  /* [9c] Reserves room for the fixed header so hero content starts below it. */
  --fixed-header-clearance: clamp(4.9rem, 9vw, 5.8rem);
/* [10] Ends a CSS block scope. */
}

/* [11] Keeps an existing CSS comment line. */
*,
/* [12] Keeps an existing CSS comment line. */
*::before,
/* [13] Starts a CSS selector rule block. */
*::after {
  /* [14] Sets one CSS property value. */
  box-sizing: border-box;
/* [15] Ends a CSS block scope. */
}

/* [16] Keeps this CSS statement in place. */
html,
/* [17] Starts a CSS selector rule block. */
body {
  /* [18] Sets one CSS property value. */
  margin: 0;
  /* [19] Sets one CSS property value. */
  min-height: 100%;
/* [20] Ends a CSS block scope. */
}

/* [21] Starts a CSS selector rule block. */
body {
  /* [22] Sets one CSS property value. */
  font-family: "Outfit", sans-serif;
  /* [23] Sets one CSS property value. */
  color: var(--text);
  /* [24] Sets one CSS property value. */
  background: var(--bg);
  /* [25] Sets one CSS property value. */
  line-height: 1.5;
  /* [26] Sets one CSS property value. */
  overflow-x: hidden;
/* [27] Ends a CSS block scope. */
}

/* [28] Starts a CSS selector rule block. */
.scene {
  /* [29] Sets one CSS property value. */
  position: fixed;
  /* [30] Sets one CSS property value. */
  inset: 0;
  /* [31] Sets one CSS property value. */
  z-index: -2;
  /* [32] Keeps this CSS statement in place. */
  background:
    /* [33] Keeps this CSS statement in place. */
    radial-gradient(circle at 20% 25%, rgba(46, 214, 255, 0.22), transparent 36%),
    /* [34] Keeps this CSS statement in place. */
    radial-gradient(circle at 83% 10%, rgba(255, 106, 183, 0.2), transparent 34%),
    /* [35] Keeps this CSS statement in place. */
    radial-gradient(circle at 52% 70%, rgba(129, 80, 255, 0.18), transparent 30%),
    /* [36] Keeps this CSS statement in place. */
    linear-gradient(150deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.72)),
    /* [36a] Keeps this CSS statement in place. */
    url("./assets/Background/ffr-scene-bg.jpg") center / cover no-repeat,
    /* [36b] Keeps this CSS statement in place. */
    linear-gradient(145deg, #000 10%, #05070d 62%, #020202 100%);
/* [37] Ends a CSS block scope. */
}

/* [38] Keeps this CSS statement in place. */
.scene::before,
/* [39] Starts a CSS selector rule block. */
.scene::after {
  /* [40] Sets one CSS property value. */
  content: "";
  /* [41] Sets one CSS property value. */
  position: absolute;
  /* [42] Sets one CSS property value. */
  inset: 0;
/* [43] Ends a CSS block scope. */
}

/* [44] Starts a CSS selector rule block. */
.scene::before {
  /* [45] Keeps this CSS statement in place. */
  background:
    /* [46] Keeps this CSS statement in place. */
    repeating-linear-gradient(
      /* [47] Keeps this CSS statement in place. */
      115deg,
      /* [48] Keeps this CSS statement in place. */
      transparent 0 26px,
      /* [49] Keeps this CSS statement in place. */
      rgba(255, 255, 255, 0.03) 27px 28px
    /* [50] Keeps this CSS statement in place. */
    );
  /* [51] Sets one CSS property value. */
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
  /* [52] Sets one CSS property value. */
  opacity: 0.6;
/* [53] Ends a CSS block scope. */
}

/* [54] Starts a CSS selector rule block. */
.scene::after {
  /* [55] Keeps this CSS statement in place. */
  background:
    /* [56] Keeps this CSS statement in place. */
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.07), transparent 36%),
    /* [57] Keeps this CSS statement in place. */
    radial-gradient(circle at 76% 64%, rgba(255, 255, 255, 0.05), transparent 28%);
  /* [58] Sets one CSS property value. */
  mix-blend-mode: screen;
  /* [59] Sets one CSS property value. */
  animation: shimmer 8s ease-in-out infinite alternate;
/* [60] Ends a CSS block scope. */
}

@media (prefers-reduced-motion: reduce), (max-width: 430px) {
  .scene::after {
    animation: none;
  }
}

/* [61] Starts a CSS selector rule block. */
.shell {
  /* [62] Sets one CSS property value. */
  width: min(1160px, 95vw);
  /* [63] Sets one CSS property value. */
  margin-inline: auto;
/* [64] Ends a CSS block scope. */
}

/* [65] Starts a CSS selector rule block. */
.glass {
  /* [66] Sets one CSS property value. */
  border: 1px solid var(--line);
  /* [67] Keeps this CSS statement in place. */
  background: linear-gradient(
    /* [68] Keeps this CSS statement in place. */
    145deg,
    /* [69] Keeps this CSS statement in place. */
    rgba(255, 255, 255, 0.16),
    /* [70] Keeps this CSS statement in place. */
    rgba(255, 255, 255, 0.07)
  /* [71] Keeps this CSS statement in place. */
  );
  /* [72] Sets one CSS property value. */
  backdrop-filter: blur(0px) saturate(135%);
  /* [73] Sets one CSS property value. */
  -webkit-backdrop-filter: blur(0px) saturate(135%);
  /* [74] Keeps this CSS statement in place. */
  box-shadow:
    /* [75] Keeps this CSS statement in place. */
    0 18px 42px rgba(0, 0, 0, 0.55),
    /* [76] Keeps this CSS statement in place. */
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
/* [77] Ends a CSS block scope. */
}

/* [78] Starts a CSS selector rule block. */
header {
  /* [78a] Softens the root-menu hover scale so controls stay inside the shell. */
  --menu-zoom-scale: 1.01;
  /* [79] Fixed headers no longer need flow spacing above them. */
  margin-top: 0;
  /* [80] Sets one CSS property value. */
  border-radius: 1rem;
  /* [81] Sets one CSS property value. */
  padding: clamp(0.5rem, 1.4vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
  /* [82] Sets one CSS property value. */
  display: flex;
  /* [83] Sets one CSS property value. */
  align-items: center;
  /* [84] Sets one CSS property value. */
  justify-content: space-between;
  /* [85] Sets one CSS property value. */
  gap: clamp(0.14rem, 1vw, 1rem);
  /* [85a] Allows children to shrink for "squeeze" layouts before mobile. */
  min-width: 0;
  /* [86] Pins the header to the viewport so it stays still during scroll. */
  position: fixed !important;
  /* [87] Keeps the header slightly inset from the top edge. */
  top: var(--header-top-offset);
  inset-block-start: var(--header-top-offset);
  /* [87a] Re-centers the fixed shell in the viewport. */
  left: 50%;
  /* [87b] Keeps the fixed header aligned to the shell center. */
  transform: translateX(-50%);
  /* [88] Keeps the fixed header above page content. */
  z-index: 30;
/* [89] Ends a CSS block scope. */
}

/* Allow nav block to shrink inside the header instead of forcing overflow. */
header nav {
  min-width: 0;
  flex: 1 1 auto;
}

/* [90] Starts a CSS selector rule block. */
.brand {
  /* [91] Sets one CSS property value. */
  display: inline-flex;
  /* [92] Sets one CSS property value. */
  align-items: center;
  /* [93] Sets one CSS property value. */
  gap: clamp(0.4rem, 1vw, 0.65rem);
  /* [94] Sets one CSS property value. */
  text-decoration: none;
  /* [95] Sets one CSS property value. */
  color: var(--text);
  /* [95a] Keeps the brand readable until the mobile breakpoint. */
  min-width: 0;
  flex-shrink: 0;
/* [96] Ends a CSS block scope. */
}

/* [97] Starts a CSS selector rule block. */
.brand-dot {
  /* [98] Sets one CSS property value. */
  width: clamp(0.68rem, 1.2vw, 0.8rem);
  /* [99] Sets one CSS property value. */
  height: clamp(0.68rem, 1.2vw, 0.8rem);
  /* [100] Sets one CSS property value. */
  border-radius: 50%;
  /* [101] Sets one CSS property value. */
  background: linear-gradient(140deg, var(--cyan), var(--rose));
  /* [102] Keeps this CSS statement in place. */
  box-shadow:
    /* [103] Keeps this CSS statement in place. */
    0 0 22px rgba(81, 216, 255, 0.75),
    /* [104] Keeps this CSS statement in place. */
    0 0 14px rgba(255, 106, 183, 0.5);
/* [105] Ends a CSS block scope. */
}

/* [106] Starts a CSS selector rule block. */
.brand-text {
  /* [107] Sets one CSS property value. */
  font-family: "Syne", sans-serif;
  /* [108] Sets one CSS property value. */
  font-size: clamp(0.68rem, 1.15vw, 1.15rem);
  /* [109] Sets one CSS property value. */
  letter-spacing: 0.02em;
  /* [109a] Keeps the full brand label visible above the phone breakpoint. */
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
/* [110] Ends a CSS block scope. */
}

/* [111] Starts a CSS selector rule block. */
.nav-list {
  /* [112] Sets one CSS property value. */
  list-style: none;
  /* [113] Sets one CSS property value. */
  margin: 0;
  /* [114] Sets one CSS property value. */
  padding: 0;
  /* [115] Sets one CSS property value. */
  display: flex;
  /* [116] Sets one CSS property value. */
  gap: clamp(0.08rem, 0.7vw, 0.45rem);
  /* [117] Keeps nav in one row until mobile breakpoint. */
  flex-wrap: nowrap;
  /* [118] Sets one CSS property value. */
  justify-content: flex-end;
  /* [118a] Allows flex items to shrink inside the header. */
  min-width: 0;
/* [119] Ends a CSS block scope. */
}

/* [119a] Lets each nav item shrink for squeeze layouts without wrapping. */
.nav-list li {
  min-width: 0;
}

/* [120] Starts a CSS selector rule block. */
.nav-list a {
  /* [121] Sets one CSS property value. */
  text-decoration: none;
  /* [122] Sets one CSS property value. */
  color: var(--text);
  /* [123] Sets one CSS property value. */
  display: inline-flex;
  /* [124] Sets one CSS property value. */
  align-items: center;
  /* [125] Sets one CSS property value. */
  min-height: clamp(1.54rem, 2.4vw, 2.15rem);
  /* [126] Sets one CSS property value. */
  padding: 0 clamp(0.14rem, 0.95vw, 0.62rem);
  /* [127] Sets one CSS property value. */
  border-radius: 0.56rem;
  /* [128] Sets one CSS property value. */
  border: 1px solid rgba(206, 236, 255, 0.22);
  /* [129] Sets one CSS property value. */
  background: rgba(8, 13, 24, 0.34);
  /* [130a] Sets positioning context for shine pseudo-element. */
  position: relative;
  /* [130b] Clips shine sweep to button bounds. */
  overflow: hidden;
  /* [130c] Isolates compositing for glow and shine effects. */
  isolation: isolate;
  /* [130d] Establishes transform baseline for zoom interaction. */
  transform: translateZ(0) scale(1);
  /* [130] Sets targeted transition values for menu interactions. */
  transition:
    color var(--menu-zoom-duration, 180ms) ease,
    border-color var(--menu-zoom-duration, 180ms) ease,
    box-shadow var(--menu-zoom-duration, 180ms) ease,
    background-color var(--menu-zoom-duration, 180ms) ease,
    transform var(--menu-zoom-duration, 180ms) ease;
  /* [131] Sets one CSS property value. */
  font-size: clamp(0.5rem, 0.82vw, 0.82rem);
  /* [132] Sets one CSS property value. */
  letter-spacing: clamp(0, 0.12vw, 0.008em);
  /* [132a] Prevents wrapping while still allowing shrink via min-width: 0 on li. */
  white-space: nowrap;
  /* Allows the label to actually shrink inside a flex row. */
  min-width: 0;
  flex-shrink: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
/* [133] Ends a CSS block scope. */
}

/* [133a] Starts shine pseudo-element rule for root nav links. */
.nav-list a::before {
  /* [133b] Creates the shine pseudo-element. */
  content: "";
  /* [133c] Positions shine layer inside each nav button. */
  position: absolute;
  /* [133d] Expands sweep area for clean entry/exit. */
  inset: -18% -35%;
  /* [133e] Draws a narrow diagonal shine stripe. */
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 64%);
  /* [133f] Starts shine off-screen on the left side. */
  transform: translateX(-145%);
  /* [133g] Hides shine at rest. */
  opacity: 0;
  /* [133h] Keeps pseudo-element non-interactive. */
  pointer-events: none;
/* [133i] Ends this CSS block. */
}

/* [134] Keeps this CSS statement in place. */
.nav-list a:hover,
/* [135] Starts a CSS selector rule block. */
.nav-list a:focus-visible {
  /* [136] Sets one CSS property value. */
  border-color: rgba(206, 236, 255, 0.52);
  /* [137] Sets one CSS property value. */
  background: rgba(119, 222, 255, 0.17);
  /* [138] Applies subtle zoom/raise interaction. */
  transform: translateY(-1px) scale(var(--menu-zoom-scale, 1.035));
  /* [138a] Adds crisp glow around hovered/focused nav links. */
  box-shadow: 0 0 12px var(--menu-glow, rgba(242, 246, 251, 0.24));
/* [139] Ends a CSS block scope. */
}

/* [139a] Starts shine trigger rule for root nav links. */
.nav-list a:hover::before,
.nav-list a:focus-visible::before,
.nav-list a:active::before {
  /* [139b] Makes shine visible during interaction. */
  opacity: 1;
  /* [139c] Sweeps shine from left to right. */
  animation: menu-shine-sweep var(--menu-shine-duration, 380ms) var(--menu-shine-ease, cubic-bezier(0.22, 0.78, 0.2, 1)) forwards;
/* [139d] Ends this CSS block. */
}

/* [140] Starts a CSS selector rule block. */
.nav-list [aria-current="page"] {
  /* [141] Sets one CSS property value. */
  border-color: rgba(255, 106, 183, 0.55);
  /* [142] Sets one CSS property value. */
  box-shadow: 0 0 18px rgba(255, 106, 183, 0.23);
  /* [142a] Sets one CSS property value. */
  border-radius: 999px;
/* [143] Ends a CSS block scope. */
}

/* [143a] Starts keyframes for root nav shine sweep. */
@keyframes menu-shine-sweep {
  /* [143b] Starts with shine outside the left edge. */
  from {
    /* [143c] Keeps shine off-screen at animation start. */
    transform: translateX(-145%);
    /* [143d] Starts with light visibility. */
    opacity: 0.14;
  /* [143e] Ends keyframe block. */
  }
  /* [143f] Ends with shine outside the right edge. */
  to {
    /* [143g] Moves shine beyond right edge to complete sweep. */
    transform: translateX(145%);
    /* [143h] Fades shine out after sweep. */
    opacity: 0;
  /* [143i] Ends keyframe block. */
  }
/* [143j] Ends keyframes block. */
}

/* [144] Starts a CSS selector rule block. */
main {
  /* [145] Sets one CSS property value. */
  padding: 3.3rem 0 2.5rem;
/* [146] Ends a CSS block scope. */
}

/* [146aa] Removes top padding on shell-based main containers. */
main.shell {
  /* [146ab] Pushes the main content below the fixed header. */
  padding-top: calc(var(--fixed-header-clearance) + (var(--section-gap) * 2));
  /* [146ac] Removes old flow margin now that clearance is handled by padding. */
  margin-top: 0;
/* [146ad] Ends a CSS block scope. */
}

/* [146a] Starts a CSS selector rule block. */
.site-footer {
  /* [146b] Sets one CSS property value. */
  margin-top: 0.2rem;
  /* [146c] Sets one CSS property value. */
  margin-bottom: 1.15rem;
  /* [146d] Sets one CSS property value. */
  border-radius: 1rem;
  /* [146e] Sets one CSS property value. */
  padding: clamp(0.7rem, 1.6vw, 0.75rem) clamp(0.85rem, 2vw, 1rem);
/* [146f] Ends a CSS block scope. */
}

/* [146g] Starts a CSS selector rule block. */
.footer-inner {
  /* [146h] Sets one CSS property value. */
  display: grid;
  /* [146i] Sets one CSS property value. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* [146j] Sets one CSS property value. */
  gap: 0.9rem;
/* [146k] Ends a CSS block scope. */
}

.footer-inner--single {
  grid-template-columns: 1fr;
}

/* [146l] Starts a CSS selector rule block. */
.footer-col h3 {
  /* [146m] Sets one CSS property value. */
  margin: 0 0 0.34rem;
  /* [146n] Sets one CSS property value. */
  font-family: "Syne", sans-serif;
  /* [146o] Sets one CSS property value. */
  font-size: 0.78rem;
  /* [146p] Sets one CSS property value. */
  letter-spacing: 0.04em;
  /* [146q] Sets one CSS property value. */
  color: var(--text);
/* [146r] Ends a CSS block scope. */
}

/* [146s] Starts a CSS selector rule block. */
.footer-links {
  /* [146t] Sets one CSS property value. */
  list-style: none;
  /* [146u] Sets one CSS property value. */
  margin: 0;
  /* [146v] Sets one CSS property value. */
  padding: 0;
  /* [146w] Sets one CSS property value. */
  display: grid;
  /* [146x] Sets one CSS property value. */
  gap: 0.2rem;
/* [146y] Ends a CSS block scope. */
}

/* [146z] Keeps this CSS statement in place. */
.footer-links a,
/* [146aa] Starts a CSS selector rule block. */
.footer-links span {
  /* [146ab] Sets one CSS property value. */
  color: var(--muted);
  /* [146ac] Sets one CSS property value. */
  font-size: 0.83rem;
  /* [146ad] Sets one CSS property value. */
  line-height: 1.35;
/* [146ae] Ends a CSS block scope. */
}

/* [146af] Starts a CSS selector rule block. */
.footer-links a {
  /* [146ag] Sets one CSS property value. */
  text-decoration: none;
/* [146ah] Ends a CSS block scope. */
}

/* [146ai] Keeps this CSS statement in place. */
.footer-links a:hover,
/* [146aj] Starts a CSS selector rule block. */
.footer-links a:focus-visible {
  /* [146ak] Sets one CSS property value. */
  color: var(--text);
/* [146al] Ends a CSS block scope. */
}

/* [146am] Starts a CSS selector rule block. */
.footer-links strong {
  /* [146an] Sets one CSS property value. */
  color: var(--text);
  /* [146ao] Sets one CSS property value. */
  font-weight: 700;
/* [146ap] Ends a CSS block scope. */
}

/* [147] Starts a CSS selector rule block. */
.hero {
  /* [148] Sets one CSS property value. */
  border-radius: clamp(1.15rem, 2.4vw, 1.6rem);
  /* [149] Sets one CSS property value. */
  padding: clamp(0.8rem, 2.4vw, 1.4rem);
  /* [150] Sets one CSS property value. */
  display: grid;
  /* [151] Sets one CSS property value. */
  grid-template-columns: 1fr;
  /* [152] Sets one CSS property value. */
  gap: 0;
/* [153] Ends a CSS block scope. */
}

/* [154] Starts a CSS selector rule block. */
.hero-copy {
  /* [155] Sets one CSS property value. */
  align-self: center;
  /* [156] Sets one CSS property value. */
  padding: clamp(0.2rem, 1vw, 0.8rem);
/* [157] Ends a CSS block scope. */
}

/* [158] Starts a CSS selector rule block. */
.eyebrow {
  /* [159] Sets one CSS property value. */
  text-transform: uppercase;
  /* [160] Sets one CSS property value. */
  letter-spacing: 0.16em;
  /* [161] Sets one CSS property value. */
  font-size: 0.78rem;
  /* [162] Sets one CSS property value. */
  color: var(--muted);
  /* [163] Sets one CSS property value. */
  margin: 0 0 0.7rem;
/* [164] Ends a CSS block scope. */
}

/* [165] Starts a CSS selector rule block. */
h1 {
  /* [166] Sets one CSS property value. */
  margin: 0;
  /* [167] Sets one CSS property value. */
  font-family: "Syne", sans-serif;
  /* [168] Sets one CSS property value. */
  font-size: clamp(1.85rem, 4.1vw, 3.5rem);
  /* [169] Sets one CSS property value. */
  line-height: 1.03;
  /* [170] Sets one CSS property value. */
  text-wrap: balance;
  /* [171] Sets one CSS property value. */
  max-width: 18ch;
/* [172] Ends a CSS block scope. */
}

/* [173] Starts a CSS selector rule block. */
.hero-copy p {
  /* [174] Sets one CSS property value. */
  margin: 0.95rem 0 0;
  /* [175] Sets one CSS property value. */
  max-width: 52ch;
  /* [176] Sets one CSS property value. */
  color: var(--muted);
/* [177] Ends a CSS block scope. */
}

/* [178] Starts a CSS selector rule block. */
.hero-media {
  /* [179] Sets one CSS property value. */
  min-height: min(72vw, 680px);
/* [180] Ends a CSS block scope. */
}

/* [181] Starts a CSS selector rule block. */
.hero-visual {
  /* [182] Sets one CSS property value. */
  height: 100%;
  /* [183] Sets one CSS property value. */
  width: 100%;
  /* [184] Sets one CSS property value. */
  border-radius: clamp(0.9rem, 2vw, 1.2rem);
  /* [185] Sets one CSS property value. */
  overflow: hidden;
  /* [186] Sets one CSS property value. */
  border: 0;
  /* [187] Keeps this CSS statement in place. */
  box-shadow:
    /* [189] Keeps this CSS statement in place. */
    0 20px 45px rgba(0, 0, 0, 0.65);
  /* [190] Sets one CSS property value. */
  position: relative;
  /* [191] Sets one CSS property value. */
  isolation: isolate;
  /* [192] Keeps this CSS statement in place. */
  background:
    /* [193] Keeps this CSS statement in place. */
    linear-gradient(
      /* [194] Keeps this CSS statement in place. */
      135deg,
      /* [195] Keeps this CSS statement in place. */
      rgba(81, 216, 255, 0.28),
      /* [196] Keeps this CSS statement in place. */
      rgba(255, 106, 183, 0.2),
      /* [197] Keeps this CSS statement in place. */
      rgba(106, 255, 209, 0.22)
    /* [198] Keeps this CSS statement in place. */
    ),
    /* [199] Keeps this CSS statement in place. */
    url("./assets/Hero/ffr-hero.jpg") center / cover no-repeat,
    /* [200] Keeps this CSS statement in place. */
    linear-gradient(140deg, #02050f, #0a1024);
/* [201] Ends a CSS block scope. */
}

/* [202] Starts a CSS selector rule block. */
.hero-visual::before {
  /* [203] Sets one CSS property value. */
  content: "";
  /* [204] Sets one CSS property value. */
  position: absolute;
  /* [205] Sets one CSS property value. */
  inset: 0;
  /* [206] Keeps this CSS statement in place. */
  background:
    /* [207] Keeps this CSS statement in place. */
    linear-gradient(
      /* [208] Keeps this CSS statement in place. */
      165deg,
      /* [209] Keeps this CSS statement in place. */
      rgba(0, 0, 0, 0.02) 38%,
      /* [210] Keeps this CSS statement in place. */
      rgba(0, 0, 0, 0.36) 100%
    /* [211] Keeps this CSS statement in place. */
    );
/* [212] Ends a CSS block scope. */
}

/* [212a] Starts a CSS selector rule block. */
.site-cards {
  /* [212b] Places the site cards directly under the hero with matching spacing rhythm. */
  margin-top: var(--section-gap);
  /* [212c] Uses a responsive grid that stays multi-column above mobile. */
  display: grid;
  /* [212d] Holds the six-card row until the phone breakpoint. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* [212e] Keeps consistent card spacing with squeeze scaling. */
  gap: clamp(0.45rem, 1.4vw, 0.72rem);
  /* [212f] Keeps cards within viewport width with no inner horizontal scroll bar. */
  overflow-x: visible;
  /* [212g] Removes extra bottom space previously reserved for horizontal scrollbar. */
  padding-bottom: 0;
/* [212h] Ends a CSS block scope. */
}

/* [212i] Starts a CSS selector rule block. */
.site-card {
  /* [212j] Matches glass card surface styling from the current site language. */
  border: 1px solid var(--line);
  /* [212k] Uses rounded card corners. */
  border-radius: 1rem;
  /* [212l] Keeps card interior spacing consistent. */
  padding: clamp(0.58rem, 1.1vw, 0.76rem) clamp(0.4rem, 1vw, 0.82rem);
  /* [212m] Sets minimum card height for balanced composition. */
  min-height: clamp(100px, 10vw, 112px);
  /* [212n] Removes link underlines. */
  text-decoration: none;
  /* [212o] Inherits readable text color. */
  color: var(--text);
  /* [212p] Centers all card content horizontally. */
  display: flex;
  /* [212q] Stacks text and icon vertically. */
  flex-direction: column;
  /* [212r] Centers text and icon horizontally. */
  align-items: center;
  /* [212s] Centers content vertically. */
  justify-content: center;
  /* [212t] Adds spacing between title and icon. */
  gap: clamp(0.38rem, 0.8vw, 0.52rem);
  /* [212u] Centers text inside cards. */
  text-align: center;
/* [212v] Ends a CSS block scope. */
}

/* [212w] Starts a CSS selector rule block. */
.site-card h2 {
  /* [212x] Removes default heading margin in cards. */
  margin: 0;
  /* [212y] Uses the same heading font style family as existing cards. */
  font-family: "Syne", sans-serif;
  /* [212z] Uses compact responsive heading size for card labels. */
  font-size: clamp(0.66rem, 0.95vw, 0.96rem);
  /* [212za] Keeps letter spacing subtle and readable. */
  letter-spacing: 0.02em;
/* [212zb] Ends a CSS block scope. */
}

/* [212zc] Starts a CSS selector rule block. */
.site-card-icon {
  /* [212zd] Centers icon holder alignment. */
  display: inline-flex;
  /* [212ze] Centers icon holder alignment. */
  align-items: center;
  /* [212zf] Centers icon holder alignment. */
  justify-content: center;
  /* [212zg] Defines placeholder icon frame size. */
  width: clamp(1.72rem, 2vw, 1.95rem);
  /* [212zh] Defines placeholder icon frame size. */
  height: clamp(1.72rem, 2vw, 1.95rem);
  /* [212zi] Applies white outlined placeholder ring. */
  border: 1px solid rgba(255, 255, 255, 0.78);
  /* [212zj] Rounds the placeholder icon frame. */
  border-radius: 50%;
  /* [212zk] Uses white icon color so inline SVG strokes inherit correctly. */
  color: #ffffff;
/* [212zl] Ends a CSS block scope. */
}

/* [212zm] Starts a CSS selector rule block. */
.site-card-icon svg {
  /* [212zn] Sizes inline icon graphics inside the white outline frame. */
  width: clamp(0.96rem, 1.1vw, 1.1rem);
  /* [212zo] Sizes inline icon graphics inside the white outline frame. */
  height: clamp(0.96rem, 1.1vw, 1.1rem);
  /* [212zp] Applies stroke-driven icon style for placeholder logos. */
  fill: none;
  /* [212zq] Applies stroke-driven icon style for placeholder logos. */
  stroke: currentColor;
  /* [212zr] Keeps icon line weight clean and readable. */
  stroke-width: 1.6;
  /* [212zs] Smooths line endings. */
  stroke-linecap: round;
  /* [212zt] Smooths path joins. */
  stroke-linejoin: round;
/* [212zu] Ends a CSS block scope. */
}

/* [212zv] Starts a CSS selector rule block. */
.site-card:hover,
.site-card:focus-visible {
  /* [212zw] Applies the same gentle interaction lift used across cards. */
  transform: translateY(-2px);
  /* [212zx] Brightens border on hover/focus. */
  border-color: rgba(255, 255, 255, 0.46);
  /* [212zy] Adds soft hover glow consistent with current style system. */
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 20px rgba(214, 221, 228, 0.2);
/* [212zz] Ends a CSS block scope. */
}

/* [213] Starts a CSS selector rule block. */
.construction-badge {
  /* [214] Sets one CSS property value. */
  position: absolute;
  /* [215] Sets one CSS property value. */
  left: 50%;
  /* [216] Sets one CSS property value. */
  top: 14%;
  /* [217] Sets one CSS property value. */
  transform: translateX(-50%) rotate(-5deg);
  /* [218] Sets one CSS property value. */
  display: inline-flex;
  /* [219] Sets one CSS property value. */
  align-items: center;
  /* [220] Sets one CSS property value. */
  justify-content: center;
  /* [221] Sets one CSS property value. */
  padding: 0.7rem 1.3rem;
  /* [222] Sets one CSS property value. */
  border-radius: 0.75rem;
  /* [223] Sets one CSS property value. */
  font-family: "Syne", sans-serif;
  /* [224] Sets one CSS property value. */
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  /* [225] Sets one CSS property value. */
  letter-spacing: 0.1em;
  /* [226] Sets one CSS property value. */
  text-transform: uppercase;
  /* [227] Sets one CSS property value. */
  color: #ffe6b9;
  /* [228] Sets one CSS property value. */
  border: 1px solid rgba(255, 230, 185, 0.5);
  /* [229] Sets one CSS property value. */
  background: rgba(255, 167, 84, 0.19);
  /* [230] Sets one CSS property value. */
  backdrop-filter: blur(0px);
  /* [231] Sets one CSS property value. */
  -webkit-backdrop-filter: blur(0px);
  /* [232] Sets one CSS property value. */
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
  /* [233] Sets one CSS property value. */
  z-index: 1;
/* [234] Ends a CSS block scope. */
}

/* [235] Starts a CSS selector rule block. */
@keyframes shimmer {
  /* [236] Starts a CSS selector rule block. */
  from {
    /* [237] Sets one CSS property value. */
    opacity: 0.35;
    /* [238] Sets one CSS property value. */
    transform: scale(1);
  /* [239] Ends a CSS block scope. */
  }
  /* [240] Starts a CSS selector rule block. */
  to {
    /* [241] Sets one CSS property value. */
    opacity: 0.55;
    /* [242] Sets one CSS property value. */
    transform: scale(1.05);
  /* [243] Ends a CSS block scope. */
  }
/* [244] Ends a CSS block scope. */
}

/* Allow wrapping only at the mobile breakpoint. */
@media (max-width: 430px) {
  .shell {
    width: min(1160px, 96vw);
  }

  :root {
    --fixed-header-clearance: clamp(7.4rem, 31vw, 9.8rem);
  }

  main.shell {
    padding-top: calc(var(--fixed-header-clearance) + (var(--section-gap) * 2) + 0.35rem);
  }

  header {
    position: fixed !important;
    top: var(--header-top-offset);
    inset-block-start: var(--header-top-offset);
    left: 2vw;
    right: 2vw;
    width: auto;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  header nav {
    flex-basis: 100%;
  }

  .brand {
    justify-content: center;
  }

  .brand-text {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.72rem, 3.2vw, 0.84rem);
  }

  .nav-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-list a {
    padding: 0 clamp(0.32rem, 2.4vw, 0.52rem);
    min-height: clamp(1.62rem, 7.5vw, 1.92rem);
    font-size: clamp(0.58rem, 2.5vw, 0.72rem);
  }

  .site-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-card {
    min-height: 108px;
    padding: 0.7rem 0.55rem;
  }
}

/* Parent-only blur contract for FarFromReality root site */
header.glass,
.hero.glass,
.site-footer {
  backdrop-filter: blur(0px) saturate(135%);
  -webkit-backdrop-filter: blur(0px) saturate(135%);
}

/* Respect reduced-motion preference by disabling shine/zoom animation only for menu links. */
@media (prefers-reduced-motion: reduce) {
  .nav-list a {
    transform: none !important;
    transition: color 100ms ease, border-color 100ms ease, background-color 100ms ease !important;
  }

  .nav-list a::before {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

/* Child visual reset: keep structure/format, remove nested visual chrome */
header.glass .brand-dot,
.hero .hero-badge,
.site-footer .footer-links a,
.site-footer .footer-links span,
.site-footer .footer-links strong {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}