:root {
      --midnight: #152131;
      --petrol: #2C353F;
      --ivory: #E5E5E6;
      --gold: #B3894F;
      --gold-light: #D8B76A;
      --gold-soft: rgba(179, 137, 79, 0.28);
      --botanical: #44504A;
      --taupe: #656256;
      --ink-soft: rgba(229, 229, 230, 0.78);
      --ink-muted: rgba(229, 229, 230, 0.62);
      --line: var(--gold-soft);
      --line-soft: rgba(229, 229, 230, 0.12);
      --shadow: rgba(4, 9, 16, 0.46);
      --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --sans: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
      --max: 1120px;
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        linear-gradient(180deg, rgba(21, 33, 49, 0.98) 0%, rgba(21, 33, 49, 1) 34%, rgba(44, 53, 63, 1) 100%);
      color: var(--ivory);
      font-family: var(--sans);
      line-height: 1.7;
      overflow-x: hidden;
      text-rendering: geometricPrecision;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(229, 229, 230, 0.015) 0,
          rgba(229, 229, 230, 0.015) 1px,
          transparent 1px,
          transparent 12px
        ),
        linear-gradient(115deg, rgba(68, 80, 74, 0.18), transparent 38%),
        linear-gradient(245deg, rgba(101, 98, 86, 0.16), transparent 42%);
      opacity: 0.72;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.42);
    }

    a {
      color: inherit;
    }

    button,
    input,
    summary {
      font: inherit;
    }

    /* Ornament: global gold-dot signal field used behind the full page. */
    .gold-dots {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.26;
      mix-blend-mode: screen;
      background:
        radial-gradient(circle at 13% 22%, rgba(216, 183, 106, 0.62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 18%, rgba(179, 137, 79, 0.52) 0 1px, transparent 1.8px),
        radial-gradient(circle at 47% 72%, rgba(216, 183, 106, 0.42) 0 1px, transparent 1.6px),
        radial-gradient(circle at 86% 84%, rgba(179, 137, 79, 0.34) 0 1px, transparent 1.7px);
      background-size: 150px 150px, 230px 230px, 190px 190px, 280px 280px;
    }

    /* Ornament: section separators used between content bands. */
    .gold-divider {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 1px;
      opacity: 0.58;
      background: linear-gradient(90deg, transparent, rgba(216, 183, 106, 0.14), rgba(216, 183, 106, 0.36), rgba(216, 183, 106, 0.14), transparent);
    }

    .gold-divider::before,
    .gold-divider::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
    }

    .gold-divider::before {
      width: 6px;
      height: 6px;
      background: var(--gold-light);
      box-shadow: 0 0 14px rgba(216, 183, 106, 0.42);
    }

    .gold-divider::after {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(179, 137, 79, 0.12);
      background: radial-gradient(circle, rgba(216, 183, 106, 0.08), transparent 66%);
    }

    .gold-divider--micro {
      width: min(100%, 280px);
      margin-block: 0.1rem;
      opacity: 0.56;
    }

    .gold-divider--micro::before {
      width: 4px;
      height: 4px;
    }

    .gold-divider--micro::after {
      width: 28px;
      height: 28px;
    }

    /* Ornament: section heading marks placed near titles. */
    .section-ornament {
      position: relative;
    }

    .section__header.section-ornament::before,
    .deepening.section-ornament::before {
      content: "";
      width: 52px;
      height: 1px;
      margin-bottom: 0.2rem;
      display: block;
      background: linear-gradient(90deg, var(--gold-light), transparent);
      box-shadow: 0 0 16px rgba(216, 183, 106, 0.22);
    }

    .section__header--center.section-ornament::before,
    .deepening.section-ornament::before {
      margin-inline: auto;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    }

    .section-ornament--hero {
      width: 58px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: -0.12rem;
    }

    /* Ornament: solar and symbolic icon set used in hero and code cards. */
    .symbol-icon {
      position: relative;
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      color: var(--gold-light);
      filter: drop-shadow(0 0 10px rgba(216, 183, 106, 0.28));
      opacity: 0.94;
    }

    .symbol-icon::before,
    .symbol-icon::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .gold-sun::before {
      width: 14px;
      height: 14px;
      border: 1px solid currentColor;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216, 183, 106, 0.2), transparent 64%);
      box-shadow: 0 0 18px rgba(216, 183, 106, 0.34);
    }

    .gold-sun::after {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: repeating-conic-gradient(from 0deg, currentColor 0deg 4deg, transparent 4deg 28deg);
      -webkit-mask: radial-gradient(circle, transparent 0 12px, #000 12.5px 14px, transparent 14.5px);
      mask: radial-gradient(circle, transparent 0 12px, #000 12.5px 14px, transparent 14.5px);
      opacity: 0.82;
    }

    .gold-moon::before {
      width: 21px;
      height: 21px;
      border: 1px solid currentColor;
      border-radius: 50%;
      box-shadow: 0 0 14px rgba(216, 183, 106, 0.24);
    }

    .gold-moon::after {
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: rgba(30, 42, 54, 0.96);
      transform: translateX(7px);
    }

    .gold-star::before {
      width: 20px;
      height: 20px;
      border: 1px solid currentColor;
      transform: rotate(45deg);
      box-shadow: 0 0 16px rgba(216, 183, 106, 0.22);
    }

    .gold-star::after {
      width: 30px;
      height: 30px;
      background:
        linear-gradient(currentColor, currentColor) center / 1px 30px no-repeat,
        linear-gradient(90deg, currentColor, currentColor) center / 30px 1px no-repeat;
      opacity: 0.46;
    }

    .gold-rays::before {
      width: 15px;
      height: 15px;
      border: 1px solid currentColor;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216, 183, 106, 0.22), transparent 68%);
    }

    .gold-rays::after {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: repeating-conic-gradient(from 9deg, currentColor 0deg 3deg, transparent 3deg 25deg);
      -webkit-mask: radial-gradient(circle, transparent 0 13px, #000 13.4px 15px, transparent 15.5px);
      mask: radial-gradient(circle, transparent 0 13px, #000 13.4px 15px, transparent 15.5px);
      opacity: 0.68;
    }

    .symbol-icon--path::before {
      width: 30px;
      height: 1px;
      background: linear-gradient(90deg, transparent, currentColor, transparent);
    }

    .symbol-icon--path::after {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 18px rgba(216, 183, 106, 0.62);
      transform: translateX(7px);
    }

    /* Cosmic layer: subtle constellations and sky-depth behind the hero title. */
    .constellation-field {
      position: absolute;
      inset: 68px 1rem 1rem;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.72;
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 86%);
      mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 86%);
    }

    .constellation-field svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cosmic-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.34;
      background:
        radial-gradient(circle at 48% 32%, rgba(216, 183, 106, 0.14), transparent 24%),
        radial-gradient(circle at 48% 42%, rgba(229, 229, 230, 0.08), transparent 30%),
        linear-gradient(90deg, transparent 0 49.8%, rgba(216, 183, 106, 0.06) 49.9% 50.1%, transparent 50.2%),
        linear-gradient(0deg, transparent 0 49.8%, rgba(229, 229, 230, 0.045) 49.9% 50.1%, transparent 50.2%);
      background-size: auto, auto, 160px 160px, 160px 160px;
    }

    .hero-glow {
      position: absolute;
      left: 50%;
      top: 33%;
      z-index: 0;
      width: min(760px, 94vw);
      height: 260px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0.72;
      background:
        radial-gradient(ellipse at center, rgba(216, 183, 106, 0.14), rgba(216, 183, 106, 0.055) 34%, transparent 72%),
        radial-gradient(ellipse at center, rgba(229, 229, 230, 0.08), transparent 62%);
      filter: blur(8px);
    }

    .star-point {
      fill: rgba(229, 229, 230, 0.58);
      filter: drop-shadow(0 0 5px rgba(216, 183, 106, 0.38));
    }

    .star-point--gold {
      fill: rgba(216, 183, 106, 0.76);
    }

    .star-point--dim {
      fill: rgba(229, 229, 230, 0.34);
    }

    .celestial-line {
      fill: none;
      stroke: rgba(216, 183, 106, 0.24);
      stroke-width: 0.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .celestial-line--ivory {
      stroke: rgba(229, 229, 230, 0.18);
    }
    /* Botanical gold layer: delicate floral accents for hero, date gate, sections, and footer. */
    .floral-sprig {
      position: absolute;
      z-index: 1;
      color: rgba(216, 190, 122, 0.48);
      pointer-events: none;
      filter: drop-shadow(0 0 10px rgba(201, 163, 90, 0.16));
    }

    .floral-sprig svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .floral-stem,
    .floral-leaf,
    .floral-petal,
    .floral-curl {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .floral-stem {
      stroke-width: 1.05;
    }

    .floral-leaf,
    .floral-petal,
    .floral-curl {
      stroke-width: 0.82;
      opacity: 0.82;
    }

    .floral-dot {
      fill: currentColor;
      opacity: 0.78;
      filter: drop-shadow(0 0 7px rgba(216, 190, 122, 0.4));
    }

    .floral-sprig--hero-top {
      top: 5.1rem;
      left: 50%;
      width: min(440px, 70vw);
      height: 84px;
      transform: translateX(-50%);
      opacity: 0.4;
    }

    .floral-sprig--hero-left {
      left: clamp(0.2rem, 7vw, 6rem);
      bottom: 16%;
      width: 108px;
      height: 190px;
      opacity: 0.42;
    }

    .floral-sprig--hero-right {
      right: clamp(0.2rem, 7vw, 6rem);
      top: 18%;
      width: 116px;
      height: 210px;
      opacity: 0.4;
      transform: scaleX(-1);
    }

    .floral-sprig--footer-left,
    .floral-sprig--footer-right {
      bottom: 1.5rem;
      width: min(210px, 34vw);
      height: 230px;
      opacity: 0.36;
      z-index: 0;
    }

    .floral-sprig--footer-left {
      left: clamp(-1.5rem, 3vw, 2rem);
    }

    .floral-sprig--footer-right {
      right: clamp(-1.5rem, 3vw, 2rem);
      transform: scaleX(-1);
    }

    .section::after {
      content: "";
      position: absolute;
      inset: auto 8% 1.2rem;
      height: 42px;
      z-index: 0;
      pointer-events: none;
      opacity: 0.22;
      background:
        radial-gradient(circle at 50% 50%, rgba(216, 190, 122, 0.5) 0 2px, transparent 2.8px),
        linear-gradient(90deg, transparent, rgba(201, 163, 90, 0.32), transparent),
        radial-gradient(ellipse at 42% 50%, transparent 0 58%, rgba(201, 163, 90, 0.22) 59% 60%, transparent 61%),
        radial-gradient(ellipse at 58% 50%, transparent 0 58%, rgba(201, 163, 90, 0.22) 59% 60%, transparent 61%);
      background-repeat: no-repeat;
      background-size: 10px 10px, 100% 1px, 120px 28px, 120px 28px;
      background-position: center, center, calc(50% - 66px) center, calc(50% + 66px) center;
    }

    .birth-gate {
      position: relative;
      overflow: hidden;
    }

    .birth-gate::before,
    .birth-gate::after {
      content: "";
      position: absolute;
      pointer-events: none;
      opacity: 0.38;
    }

    .birth-gate::before {
      left: 0.8rem;
      top: 0.65rem;
      width: 74px;
      height: 42px;
      border-top: 1px solid rgba(216, 190, 122, 0.34);
      border-left: 1px solid rgba(216, 190, 122, 0.18);
      border-radius: 999px 0 0 0;
      box-shadow: -10px -8px 18px rgba(201, 163, 90, 0.05);
    }

    .birth-gate::after {
      right: 1rem;
      bottom: 0.75rem;
      width: 92px;
      height: 28px;
      background:
        radial-gradient(circle at 10% 50%, rgba(216, 190, 122, 0.7) 0 2px, transparent 2.8px),
        radial-gradient(circle at 40% 22%, rgba(201, 163, 90, 0.5) 0 1px, transparent 1.8px),
        linear-gradient(90deg, transparent, rgba(216, 190, 122, 0.28), transparent);
      background-repeat: no-repeat;
      background-size: 8px 8px, 6px 6px, 100% 1px;
      background-position: left center, 32px 4px, center;
    }

    .footer__inner::before,
    .footer__inner::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: min(420px, 76vw);
      height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(216, 190, 122, 0.42), transparent);
      box-shadow: 0 0 18px rgba(201, 163, 90, 0.12);
    }

    .footer__inner::before {
      top: -1.1rem;
    }

    .footer__inner::after {
      bottom: -1.1rem;
    }

    .skip-link {
      position: absolute;
      left: 1rem;
      top: 1rem;
      z-index: 30;
      transform: translateY(-160%);
      border: 1px solid var(--gold);
      background: var(--midnight);
      color: var(--ivory);
      padding: 0.65rem 0.85rem;
      text-decoration: none;
      transition: transform 180ms ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      border-bottom: 1px solid rgba(179, 137, 79, 0.18);
      background: rgba(21, 33, 49, 0.72);
      backdrop-filter: blur(18px);
      transition: background 220ms ease, border-color 220ms ease;
    }

    .site-header.is-scrolled {
      background: rgba(21, 33, 49, 0.92);
      border-color: rgba(179, 137, 79, 0.24);
    }

    .nav {
      width: calc(100% - 2rem);
      max-width: var(--max);
      margin: 0 auto;
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: grid;
      gap: 0.1rem;
      text-decoration: none;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .brand__name {
      font-family: var(--serif);
      font-size: 1.02rem;
      color: var(--ivory);
      text-shadow: 0 0 18px rgba(216, 183, 106, 0.1);
    }

    .brand__line {
      color: var(--gold);
      font-size: 0.58rem;
      letter-spacing: 0.24em;
    }

    .nav__links {
      display: none;
      align-items: center;
      gap: 1.1rem;
      color: rgba(229, 229, 230, 0.72);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .nav__links a {
      text-decoration: none;
      transition: color 180ms ease;
    }

    .nav__links a:hover,
    .nav__links a:focus-visible {
      color: var(--gold);
    }

    .hero {
      position: relative;
      min-height: 88svh;
      padding: 5.4rem 1rem 2.2rem;
      display: grid;
      place-items: center;
      isolation: isolate;
      overflow: hidden;
      border-bottom: 1px solid rgba(179, 137, 79, 0.18);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 22% 26%, rgba(216, 183, 106, 0.2) 0 1px, transparent 1.8px),
        radial-gradient(circle at 74% 34%, rgba(179, 137, 79, 0.18) 0 1px, transparent 1.8px),
        radial-gradient(circle at 54% 76%, rgba(216, 183, 106, 0.14) 0 1px, transparent 1.8px),
        linear-gradient(180deg, rgba(21, 33, 49, 0.2) 0%, rgba(21, 33, 49, 0.96) 92%),
        linear-gradient(90deg, rgba(68, 80, 74, 0.2) 0%, transparent 30%, transparent 70%, rgba(68, 80, 74, 0.18) 100%),
        repeating-linear-gradient(0deg, rgba(229, 229, 230, 0.025) 0, rgba(229, 229, 230, 0.025) 1px, transparent 1px, transparent 22px);
      background-size: 150px 150px, 230px 230px, 180px 180px, auto, auto, auto;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0.9rem;
      z-index: -1;
      border: 1px solid rgba(216, 183, 106, 0.24);
      border-radius: 999px 999px 18px 18px / 52px 52px 18px 18px;
      pointer-events: none;
      opacity: 0.58;
      box-shadow: inset 0 0 42px rgba(216, 183, 106, 0.035);
    }

    .hero__inner {
      position: relative;
      z-index: 2;
      width: calc(100vw - 2.5rem);
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
      display: grid;
      justify-items: center;
      gap: 0.82rem;
    }

    .hero__inner > :not(.hero-glow) {
      position: relative;
      z-index: 2;
    }

    .kicker,
    .section-kicker,
    .micro-label {
      margin: 0;
      color: var(--gold);
      max-width: 20rem;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      line-height: 1.55;
      text-transform: uppercase;
      text-wrap: balance;
      overflow-wrap: anywhere;
    }

    .hero h1 {
      position: relative;
      margin: 0;
      max-width: 10ch;
      color: var(--ivory);
      font-family: var(--serif);
      font-size: 2.75rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 0.82;
      text-transform: uppercase;
      text-wrap: balance;
      text-shadow:
        0 0 20px rgba(216, 183, 106, 0.12),
        0 0 46px rgba(179, 137, 79, 0.08);
    }

    .hero__subtitle {
      max-width: 760px;
      margin: 0;
      color: rgba(229, 229, 230, 0.9);
      font-family: var(--serif);
      width: 100%;
      max-width: 20.5rem;
      font-size: 1.04rem;
      letter-spacing: 0.03em;
      line-height: 1.18;
      text-transform: uppercase;
      text-wrap: balance;
    }

    .hero__lead {
      max-width: 20.5rem;
      margin: 0.2rem 0 0;
      color: var(--ink-soft);
      font-size: 0.94rem;
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    .birth-gate {
      width: 100%;
      max-width: 620px;
      margin-top: 0.2rem;
      padding: 0.72rem;
      display: grid;
      gap: 0.65rem;
      border: 1px solid rgba(216, 183, 106, 0.3);
      background:
        linear-gradient(90deg, rgba(179, 137, 79, 0.06), transparent 24%, transparent 76%, rgba(179, 137, 79, 0.06)),
        rgba(21, 33, 49, 0.56);
      box-shadow: 0 20px 70px rgba(4, 9, 16, 0.18), inset 0 0 30px rgba(216, 183, 106, 0.03);
      backdrop-filter: blur(10px);
      color: inherit;
      cursor: pointer;
      text-decoration: none;
    }

    .birth-gate:hover,
    .birth-gate:focus-visible {
      border-color: rgba(216, 183, 106, 0.52);
      background:
        linear-gradient(90deg, rgba(179, 137, 79, 0.09), transparent 24%, transparent 76%, rgba(179, 137, 79, 0.09)),
        rgba(21, 33, 49, 0.66);
      outline: none;
    }

    .birth-gate__row {
      display: grid;
      gap: 0.65rem;
    }

    .birth-gate label,
    .birth-gate__label {
      align-self: center;
      color: rgba(229, 229, 230, 0.78);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .birth-gate__field {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(216, 183, 106, 0.24);
      border-radius: 0;
      background: rgba(229, 229, 230, 0.08);
      color: var(--ivory);
      padding: 0.72rem 0.85rem;
      outline: none;
      text-decoration: none;
      transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .birth-gate:hover .birth-gate__field,
    .birth-gate:focus-visible .birth-gate__field {
      border-color: rgba(179, 137, 79, 0.72);
      background: rgba(229, 229, 230, 0.12);
      transform: translateY(-1px);
    }

    .birth-gate__field-text {
      display: block;
      width: 100%;
      color: rgba(229, 229, 230, 0.82);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
    }

    .birth-gate__hint {
      margin: 0;
      color: var(--ink-muted);
      font-size: 0.82rem;
    }

    .cta-row {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: stretch;
      gap: 0.75rem;
      width: 100%;
      max-width: 300px;
      margin-top: 0.2rem;
    }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      border: 1px solid rgba(216, 183, 106, 0.72);
      padding: 0.78rem 0.85rem;
      color: var(--ivory);
      background: linear-gradient(135deg, rgba(179, 137, 79, 0.28), rgba(216, 183, 106, 0.08));
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.68rem;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 0 0 1px rgba(179, 137, 79, 0.08), inset 0 0 18px rgba(216, 183, 106, 0.035);
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      background: rgba(179, 137, 79, 0.88);
      color: #101820;
      border-color: rgba(229, 229, 230, 0.28);
      box-shadow: 0 10px 32px rgba(179, 137, 79, 0.16);
    }

    .button--ghost {
      background: rgba(229, 229, 230, 0.04);
      border-color: rgba(229, 229, 230, 0.22);
      color: rgba(229, 229, 230, 0.88);
    }

    .button--ghost:hover,
    .button--ghost:focus-visible {
      background: rgba(229, 229, 230, 0.12);
      color: var(--ivory);
      border-color: rgba(179, 137, 79, 0.66);
    }

    .oracle-card {
      position: relative;
      width: 100%;
      max-width: 300px;
      min-height: 220px;
      margin-top: 0.7rem;
      display: grid;
      place-items: center;
      padding: 2rem 0.9rem;
      border: 1px solid rgba(216, 183, 106, 0.5);
      background:
        radial-gradient(circle at 50% 8%, rgba(216, 183, 106, 0.12), transparent 22%),
        linear-gradient(155deg, rgba(44, 53, 63, 0.9), rgba(21, 33, 49, 0.92)),
        linear-gradient(90deg, rgba(179, 137, 79, 0.1), transparent 32%, transparent 68%, rgba(179, 137, 79, 0.1));
      box-shadow: 0 32px 90px var(--shadow), 0 0 46px rgba(216, 183, 106, 0.07);
      overflow: hidden;
    }

    .oracle-card::before,
    .oracle-card::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .oracle-card::before {
      inset: 0.72rem;
      border: 1px solid rgba(216, 183, 106, 0.18);
    }

    .oracle-card::after {
      width: 72%;
      height: 72%;
      border: 1px solid rgba(216, 183, 106, 0.24);
      border-radius: 50% 50% 8px 8px;
      transform: translateY(-0.2rem);
    }

    .oracle-card__content {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 1.1rem;
      text-align: center;
    }

    .oracle-card__mark {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(216, 183, 106, 0.62);
      border-radius: 50%;
      color: var(--gold-light);
      box-shadow: 0 0 24px rgba(216, 183, 106, 0.12);
    }

    .oracle-card__title {
      margin: 0;
      font-family: var(--serif);
      font-size: 1.42rem;
      font-weight: 500;
      line-height: 0.95;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .oracle-card__codes {
      max-width: 270px;
      margin: 0;
      color: rgba(229, 229, 230, 0.74);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      line-height: 1.8;
      text-transform: uppercase;
    }

    .botanical {
      position: absolute;
      z-index: -1;
      color: rgba(216, 183, 106, 0.44);
      pointer-events: none;
      filter: drop-shadow(0 0 10px rgba(216, 183, 106, 0.11));
    }

    .botanical svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .botanical path,
    .botanical circle {
      vector-effect: non-scaling-stroke;
    }

    .botanical path {
      stroke-width: 1.18;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .botanical--left {
      left: -34px;
      top: 92px;
      width: 142px;
      height: 440px;
      opacity: 0.82;
    }

    .botanical--right {
      right: -40px;
      bottom: 24px;
      width: 155px;
      height: 460px;
      opacity: 0.78;
      transform: scaleX(-1);
    }

    .section {
      position: relative;
      padding: clamp(4rem, 10vw, 7.5rem) 1rem;
      overflow: hidden;
      border-top: 1px solid rgba(216, 183, 106, 0.06);
    }

    .section--petrol {
      background:
        radial-gradient(circle at 16% 28%, rgba(216, 183, 106, 0.035), transparent 18%),
        linear-gradient(180deg, rgba(44, 53, 63, 0.94), rgba(34, 45, 56, 0.98));
    }

    .section--midnight {
      background:
        radial-gradient(circle at 82% 18%, rgba(216, 183, 106, 0.032), transparent 16%),
        linear-gradient(180deg, rgba(21, 33, 49, 0.98), rgba(21, 33, 49, 0.92));
    }

    .section--quiet {
      padding-block: clamp(3.2rem, 8vw, 5.5rem);
      background:
        radial-gradient(circle at center, rgba(216, 183, 106, 0.035), transparent 32%),
        rgba(21, 33, 49, 0.96);
    }

    .section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 32%, rgba(216, 183, 106, 0.11) 0 1px, transparent 1.7px),
        radial-gradient(circle at 78% 68%, rgba(179, 137, 79, 0.08) 0 1px, transparent 1.7px),
        linear-gradient(90deg, rgba(179, 137, 79, 0.04), transparent 22%, transparent 78%, rgba(179, 137, 79, 0.04)),
        repeating-linear-gradient(90deg, rgba(229, 229, 230, 0.018) 0, rgba(229, 229, 230, 0.018) 1px, transparent 1px, transparent 34px);
      background-size: 180px 180px, 260px 260px, auto, auto;
    }

    .section__inner {
      position: relative;
      z-index: 1;
      width: calc(100vw - 2rem);
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      gap: 2rem;
    }

    .section__header {
      display: grid;
      gap: 0.8rem;
      max-width: 790px;
    }

    .section__header--center {
      margin-inline: auto;
      text-align: center;
      justify-items: center;
    }

    h2,
    h3,
    p {
      margin-top: 0;
    }

    h2 {
      margin-bottom: 0;
      font-family: var(--serif);
      color: var(--ivory);
      font-size: 2.2rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 0.95;
      text-transform: uppercase;
      text-wrap: balance;
      text-shadow: 0 0 24px rgba(216, 183, 106, 0.055);
    }

    h3 {
      margin-bottom: 0.55rem;
      color: var(--ivory);
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
    }

    .copy {
      max-width: 760px;
      margin-bottom: 0;
      color: var(--ink-soft);
      font-size: 1rem;
      text-wrap: pretty;
    }

    .copy--large {
      font-size: 1.05rem;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.85rem;
    }

    .code-card,
    .step-card,
    .faq-item {
      position: relative;
      border: 1px solid rgba(216, 183, 106, 0.16);
      background: rgba(229, 229, 230, 0.045);
      transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
    }

    .code-card {
      min-height: 184px;
      padding: 1.35rem;
      display: grid;
      grid-template-rows: auto auto 1fr;
      align-content: space-between;
      gap: 0.8rem;
      overflow: hidden;
    }

    .code-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 20% 16%, rgba(216, 183, 106, 0.16), transparent 18%),
        linear-gradient(145deg, rgba(179, 137, 79, 0.07), transparent 48%);
      opacity: 0.68;
    }

    .code-card::after {
      content: "";
      position: absolute;
      left: 1.35rem;
      right: 1.35rem;
      bottom: 1rem;
      height: 1px;
      z-index: 1;
      background: linear-gradient(90deg, var(--gold-light), rgba(179, 137, 79, 0.18), transparent);
      transform-origin: left;
      transform: scaleX(0.42);
      transition: transform 220ms ease;
    }

    .code-card:hover {
      transform: translateY(-4px);
      border-color: rgba(216, 183, 106, 0.45);
      background: rgba(229, 229, 230, 0.065);
    }

    .code-card:hover::after {
      transform: scaleX(1);
    }

    .code-card__number {
      position: relative;
      z-index: 1;
      color: rgba(216, 183, 106, 0.82);
      font-family: var(--serif);
      font-size: 2.2rem;
      line-height: 1;
    }

    .code-card .symbol-icon {
      position: relative;
      z-index: 1;
      width: 34px;
      height: 34px;
      margin-bottom: 0.2rem;
    }

    .code-card > div {
      position: relative;
      z-index: 1;
      align-self: end;
    }

    .code-card p,
    .step-card p {
      margin-bottom: 0;
      color: var(--ink-soft);
      font-size: 0.96rem;
    }

    .steps {
      display: grid;
      gap: 0.9rem;
      counter-reset: steps;
    }

    .step-card {
      counter-increment: steps;
      padding: 1.35rem;
      display: grid;
      gap: 0.8rem;
      overflow: hidden;
    }

    .step-card::before {
      content: "0" counter(steps);
      color: rgba(216, 183, 106, 0.82);
      font-family: var(--serif);
      font-size: 2.35rem;
      line-height: 1;
    }

    .section-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-top: 0.5rem;
    }

    .split {
      display: grid;
      gap: 2rem;
      align-items: center;
    }

    .field-panel {
      position: relative;
      min-height: 300px;
      display: grid;
      place-items: center;
      padding: 2rem 1.2rem;
      border: 1px solid rgba(179, 137, 79, 0.3);
      background:
        radial-gradient(circle at 50% 50%, rgba(216, 183, 106, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(21, 33, 49, 0.62), rgba(44, 53, 63, 0.72)),
        repeating-linear-gradient(135deg, rgba(229, 229, 230, 0.026) 0, rgba(229, 229, 230, 0.026) 1px, transparent 1px, transparent 18px);
      box-shadow: 0 28px 90px rgba(4, 9, 16, 0.22);
      overflow: hidden;
    }

    .field-panel::before {
      content: "";
      position: absolute;
      width: 62%;
      aspect-ratio: 1;
      border: 1px solid rgba(216, 183, 106, 0.26);
      border-radius: 50%;
    }

    .field-panel::after {
      content: "";
      position: absolute;
      inset: 1rem;
      border: 1px solid rgba(216, 183, 106, 0.12);
    }

    .field-panel__text {
      position: relative;
      z-index: 1;
      max-width: 320px;
      text-align: center;
      color: rgba(229, 229, 230, 0.76);
      font-family: var(--serif);
      font-size: 1.8rem;
      line-height: 0.96;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .audience-list {
      display: grid;
      gap: 0.85rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .audience-list li {
      position: relative;
      padding: 0.95rem 0 0.95rem 1.5rem;
      color: var(--ink-soft);
      border-bottom: 1px solid rgba(216, 183, 106, 0.14);
    }

    .audience-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1.55rem;
      width: 0.48rem;
      height: 0.48rem;
      border: 1px solid var(--gold-light);
      box-shadow: 0 0 14px rgba(216, 183, 106, 0.18);
      transform: rotate(45deg);
    }

    .deepening {
      text-align: center;
      justify-items: center;
    }

    .deepening .copy {
      margin-inline: auto;
    }

    .faq-list {
      display: grid;
      gap: 0.75rem;
    }

    .faq-item {
      padding: 0;
    }

    .faq-item summary {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem;
      color: var(--ivory);
      cursor: pointer;
      font-family: var(--serif);
      font-size: 1.2rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      flex: 0 0 auto;
      color: var(--gold-light);
      font-family: var(--sans);
      font-size: 1.2rem;
      line-height: 1;
      text-shadow: 0 0 12px rgba(216, 183, 106, 0.26);
      transition: transform 180ms ease;
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-item p {
      margin: 0;
      padding: 0 1rem 1.15rem;
      color: var(--ink-soft);
    }

    .ethical {
      width: calc(100vw - 2rem);
      max-width: 860px;
      margin: 0 auto;
      border-block: 1px solid rgba(216, 183, 106, 0.16);
      padding: 1.3rem 0;
      color: rgba(229, 229, 230, 0.68);
      text-align: center;
      font-size: 0.94rem;
    }

    .site-footer {
      position: relative;
      padding: 3.5rem 1rem;
      background: #111a27;
      color: rgba(229, 229, 230, 0.76);
      overflow: hidden;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 12%, rgba(216, 183, 106, 0.1), transparent 24%),
        linear-gradient(90deg, rgba(179, 137, 79, 0.06), transparent 40%, rgba(68, 80, 74, 0.12)),
        repeating-linear-gradient(90deg, rgba(229, 229, 230, 0.018) 0, rgba(229, 229, 230, 0.018) 1px, transparent 1px, transparent 28px);
      pointer-events: none;
    }

    .footer__inner {
      position: relative;
      width: calc(100vw - 2rem);
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      gap: 1.3rem;
      text-align: center;
    }

    .footer__name {
      margin: 0;
      color: #D4AF66;
      font-family: var(--serif);
      font-size: 2.1rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
    }

    .footer__role,
    .footer__portal {
      margin: 0;
      color: rgba(229, 229, 230, 0.68);
    }

    .footer__portal {
      color: var(--gold-light);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 600ms ease, transform 600ms ease;
    }

    .hero__inner.reveal {
      opacity: 1;
      transform: none;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 559px) {
      .gold-dots {
        opacity: 0.13;
        background-size: 220px 220px, 300px 300px, 260px 260px, 340px 340px;
      }

      .gold-divider {
        opacity: 0.48;
      }

      .section::before {
        opacity: 0.58;
      }

      .section__header.section-ornament::before,
      .deepening.section-ornament::before {
        opacity: 0.66;
      }

      .section-ornament--hero {
        transform: scale(0.86);
      }

      .botanical--left,
      .botanical--right {
        opacity: 0.48;
      }

      .floral-sprig--hero-top {
        top: 4.7rem;
        width: 76vw;
        height: 64px;
        opacity: 0.24;
      }

      .floral-sprig--hero-left,
      .floral-sprig--hero-right {
        width: 76px;
        height: 142px;
        opacity: 0.2;
      }

      .floral-sprig--hero-left {
        left: -1.1rem;
        bottom: 18%;
      }

      .floral-sprig--hero-right {
        right: -1.1rem;
        top: 22%;
      }

      .floral-sprig--footer-left,
      .floral-sprig--footer-right {
        width: 120px;
        height: 150px;
        opacity: 0.2;
      }

      .section::after {
        inset-inline: 18%;
        opacity: 0.13;
      }

      .birth-gate::before,
      .birth-gate::after {
        opacity: 0.22;
      }

      .code-card .symbol-icon {
        width: 30px;
        height: 30px;
      }

      .constellation-field {
        inset: 68px 0.4rem 1rem;
        opacity: 0.46;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0 44%, transparent 76%);
        mask-image: radial-gradient(ellipse at center, #000 0 44%, transparent 76%);
      }

      .cosmic-grid {
        opacity: 0.18;
        background-size: auto, auto, 120px 120px, 120px 120px;
      }

      .hero-glow {
        width: 96vw;
        height: 190px;
        top: 31%;
        opacity: 0.48;
      }

      .celestial-line {
        stroke-opacity: 0.68;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }

    @media (min-width: 560px) {
      .birth-gate__row {
        grid-template-columns: 1fr minmax(220px, 0.9fr);
        align-items: center;
      }

      .cta-row {
        max-width: 680px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }

      .button {
        padding-inline: 1.35rem;
        font-size: 0.72rem;
        letter-spacing: 0.15em;
      }

      .oracle-card {
        max-width: 430px;
        padding: 2.2rem 1.4rem;
      }

      .oracle-card__title {
        letter-spacing: 0.08em;
      }

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

    @media (min-width: 760px) {
      .kicker,
      .section-kicker,
      .micro-label {
        max-width: 34rem;
        font-size: 0.78rem;
        letter-spacing: 0.2em;
      }

      .nav__links {
        display: flex;
      }

      .hero {
        padding-top: 5.9rem;
      }

      .hero__inner {
        gap: 0.9rem;
      }

      .hero h1 {
        max-width: none;
        font-size: 5.2rem;
        line-height: 0.86;
      }

      .hero__subtitle {
        max-width: 760px;
        font-size: 1.65rem;
        letter-spacing: 0.08em;
      }

      .hero__lead {
        max-width: 680px;
        font-size: 1.1rem;
      }

      .oracle-card {
        min-height: 252px;
      }

      .oracle-card__title {
        font-size: 2.2rem;
      }

      h2 {
        font-size: 3.55rem;
      }

      h3 {
        font-size: 1.7rem;
      }

      .copy {
        font-size: 1.12rem;
      }

      .copy--large {
        font-size: 1.25rem;
      }

      .field-panel__text {
        font-size: 2.65rem;
      }

      .footer__name {
        font-size: 3.6rem;
      }

      .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .split {
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.7fr);
      }

      .split--reverse {
        grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.05fr);
      }

      .split--reverse .field-panel {
        order: -1;
      }
    }

    @media (min-width: 980px) {
      .hero h1 {
        font-size: 5.95rem;
      }

      .hero__inner {
        max-width: 1080px;
      }

      h2 {
        font-size: 4.45rem;
      }

      .field-panel__text {
        font-size: 3.1rem;
      }

      .footer__name {
        font-size: 4.15rem;
      }

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

      .code-card {
        min-height: 260px;
      }

      .botanical--left {
        left: 2.5vw;
        width: 190px;
        height: 560px;
      }

      .botanical--right {
        right: 2vw;
        width: 205px;
        height: 590px;
      }
    }
    /* Solar campaign layer: light botanical/oracular refinement without changing content structure. */
    :root {
      --solar-paper: #fbf4df;
      --solar-cream: #f5e7c6;
      --solar-ivory: #fffaf0;
      --solar-sky: #f4d681;
      --solar-gold: #c9a35a;
      --solar-gold-light: #d8be7a;
      --solar-gold-deep: #9f7435;
      --solar-forest: #173a2e;
      --solar-olive: #61734b;
      --solar-emerald: #245846;
      --solar-terracotta: #a8573f;
      --solar-ink: #263326;
      --solar-muted: rgba(38, 51, 38, 0.72);
      --solar-line: rgba(176, 126, 53, 0.24);
    }

    body {
      background:
        radial-gradient(circle at 50% -12%, rgba(255, 244, 194, 0.92), transparent 28rem),
        radial-gradient(circle at 12% 12%, rgba(216, 190, 122, 0.22), transparent 24rem),
        linear-gradient(180deg, #fff8e9 0%, #f4e5c3 34%, #eef0d9 58%, #dfe6c9 100%);
      color: var(--solar-ink);
    }

    body::before {
      background:
        radial-gradient(circle at 16% 18%, rgba(201, 163, 90, 0.18) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.9px),
        linear-gradient(115deg, rgba(97, 115, 75, 0.12), transparent 40%),
        repeating-linear-gradient(90deg, rgba(159, 116, 53, 0.035) 0, rgba(159, 116, 53, 0.035) 1px, transparent 1px, transparent 18px);
      background-size: 210px 210px, 280px 280px, auto, auto;
      opacity: 0.88;
    }

    body::after {
      box-shadow: inset 0 0 140px rgba(120, 88, 36, 0.12), inset 0 -140px 180px rgba(23, 58, 46, 0.08);
    }

    .gold-dots {
      opacity: 0.2;
      mix-blend-mode: multiply;
      background:
        radial-gradient(circle at 13% 22%, rgba(201, 163, 90, 0.54) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.8px),
        radial-gradient(circle at 47% 72%, rgba(168, 87, 63, 0.2) 0 1px, transparent 1.6px),
        radial-gradient(circle at 86% 84%, rgba(97, 115, 75, 0.22) 0 1px, transparent 1.7px);
      background-size: 150px 150px, 230px 230px, 190px 190px, 280px 280px;
    }

    .site-header {
      background: rgba(255, 248, 232, 0.72);
      border-color: rgba(176, 126, 53, 0.22);
      box-shadow: 0 12px 42px rgba(96, 76, 38, 0.08);
    }

    .site-header.is-scrolled {
      background: rgba(255, 250, 240, 0.9);
      border-color: rgba(176, 126, 53, 0.3);
    }

    .brand__name,
    .nav__links {
      color: var(--solar-forest);
    }

    .brand__line,
    .nav__links a:hover,
    .nav__links a:focus-visible,
    .kicker,
    .section-kicker,
    .micro-label {
      color: var(--solar-gold-deep);
    }

    .hero {
      min-height: 92svh;
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.86), transparent 11rem),
        radial-gradient(circle at 50% 16%, rgba(244, 214, 129, 0.76), transparent 24rem),
        linear-gradient(180deg, #f9d987 0%, #fff4d4 31%, #e7eccf 63%, #d3dfbd 100%);
      color: var(--solar-ink);
      border-bottom-color: rgba(176, 126, 53, 0.25);
    }

    .hero::before {
      background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.8px),
        radial-gradient(circle at 22% 28%, rgba(201, 163, 90, 0.2) 0 1px, transparent 1.9px),
        radial-gradient(circle at 78% 34%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.9px),
        linear-gradient(180deg, rgba(255, 248, 224, 0.1) 0%, rgba(255, 248, 224, 0.36) 58%, rgba(23, 58, 46, 0.16) 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.13) 1px, transparent 1px, transparent 24px);
      background-size: 190px 190px, 160px 160px, 240px 240px, auto, auto;
    }

    .hero::after {
      border-color: rgba(255, 255, 255, 0.62);
      box-shadow: inset 0 0 72px rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(201, 163, 90, 0.14);
      opacity: 0.86;
    }

    .solar-landscape {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.92;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
    }

    .solar-landscape svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .solar-disc {
      fill: rgba(255, 255, 255, 0.52);
      stroke: rgba(255, 255, 255, 0.72);
      stroke-width: 1;
      filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.44));
    }

    .solar-orbit,
    .solar-axis,
    .solar-lightline {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .solar-orbit {
      stroke: rgba(255, 255, 255, 0.56);
      stroke-width: 0.7;
    }

    .solar-axis {
      stroke: rgba(255, 255, 255, 0.42);
      stroke-width: 0.55;
    }

    .solar-lightline {
      stroke: rgba(201, 163, 90, 0.22);
      stroke-width: 0.8;
    }

    .solar-mountain-back {
      fill: rgba(97, 115, 75, 0.3);
    }

    .solar-mountain-mid {
      fill: rgba(36, 88, 70, 0.34);
    }

    .solar-mountain-front {
      fill: rgba(23, 58, 46, 0.46);
    }

    .solar-valley {
      fill: rgba(230, 220, 167, 0.55);
    }

    .solar-path {
      fill: rgba(246, 229, 178, 0.72);
      stroke: rgba(201, 163, 90, 0.3);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .solar-botanical {
      fill: none;
      stroke: rgba(36, 88, 70, 0.38);
      stroke-width: 1.1;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .solar-flower-dot {
      fill: rgba(168, 87, 63, 0.58);
      filter: drop-shadow(0 0 8px rgba(201, 163, 90, 0.18));
    }

    .constellation-field {
      opacity: 0.5;
      mix-blend-mode: soft-light;
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0 50%, transparent 82%);
      mask-image: radial-gradient(ellipse at center, #000 0 50%, transparent 82%);
    }

    .cosmic-grid {
      opacity: 0.26;
      background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.4), transparent 24%),
        radial-gradient(circle at 50% 44%, rgba(201, 163, 90, 0.2), transparent 30%),
        linear-gradient(90deg, transparent 0 49.8%, rgba(255, 255, 255, 0.22) 49.9% 50.1%, transparent 50.2%),
        linear-gradient(0deg, transparent 0 49.8%, rgba(255, 255, 255, 0.16) 49.9% 50.1%, transparent 50.2%);
      background-size: auto, auto, 160px 160px, 160px 160px;
    }

    .celestial-line,
    .celestial-line--ivory {
      stroke: rgba(255, 255, 255, 0.58);
    }

    .star-point,
    .star-point--dim {
      fill: rgba(255, 255, 255, 0.72);
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.44));
    }

    .star-point--gold {
      fill: rgba(201, 163, 90, 0.66);
    }

    .hero-glow {
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.62), rgba(255, 244, 194, 0.24) 34%, transparent 72%),
        radial-gradient(ellipse at center, rgba(201, 163, 90, 0.22), transparent 62%);
      opacity: 0.74;
      filter: blur(10px);
    }

    .hero .botanical {
      color: rgba(23, 58, 46, 0.42);
      filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
    }

    .floral-sprig {
      color: rgba(159, 116, 53, 0.48);
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.16));
    }

    .floral-stem,
    .floral-curl {
      stroke: rgba(159, 116, 53, 0.58);
    }

    .floral-leaf {
      stroke: rgba(36, 88, 70, 0.44);
      fill: rgba(97, 115, 75, 0.08);
    }

    .floral-petal {
      stroke: rgba(201, 163, 90, 0.5);
      fill: rgba(255, 250, 240, 0.24);
    }

    .floral-dot {
      fill: rgba(168, 87, 63, 0.55);
    }

    .hero h1 {
      color: var(--solar-forest);
      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.34), 0 0 34px rgba(255, 255, 255, 0.44), 0 16px 54px rgba(159, 116, 53, 0.14);
    }

    .hero__subtitle {
      color: rgba(23, 58, 46, 0.86);
    }

    .hero__lead {
      color: var(--solar-muted);
    }

    .gold-divider {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), rgba(201, 163, 90, 0.58), rgba(255, 255, 255, 0.58), transparent);
    }

    .gold-divider::before {
      background: var(--solar-gold);
      box-shadow: 0 0 16px rgba(201, 163, 90, 0.42), 0 0 28px rgba(255, 255, 255, 0.34);
    }

    .symbol-icon {
      color: var(--solar-gold-deep);
    }

    .birth-gate {
      border-color: rgba(201, 163, 90, 0.46);
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 48%),
        linear-gradient(135deg, rgba(255, 250, 240, 0.86), rgba(245, 231, 198, 0.72));
      box-shadow: 0 24px 74px rgba(90, 70, 30, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.54), inset 0 0 32px rgba(201, 163, 90, 0.08);
      color: var(--solar-ink);
    }

    .birth-gate:hover,
    .birth-gate:focus-visible {
      border-color: rgba(159, 116, 53, 0.62);
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.88), transparent 50%),
        linear-gradient(135deg, rgba(255, 250, 240, 0.94), rgba(248, 232, 188, 0.82));
      box-shadow: 0 30px 82px rgba(90, 70, 30, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 38px rgba(201, 163, 90, 0.12);
    }

    .birth-gate::before {
      background:
        radial-gradient(circle, rgba(168, 87, 63, 0.52) 0 2px, transparent 2.4px),
        linear-gradient(90deg, rgba(201, 163, 90, 0.22), rgba(255, 255, 255, 0.44), transparent),
        radial-gradient(ellipse at left, rgba(36, 88, 70, 0.28), transparent 62%);
      background-size: 10px 10px, 100% 1px, 100% 100%;
    }

    .birth-gate::after {
      background:
        radial-gradient(circle, rgba(201, 163, 90, 0.48) 0 2px, transparent 2.4px),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.54), rgba(201, 163, 90, 0.2)),
        radial-gradient(ellipse at right, rgba(36, 88, 70, 0.22), transparent 62%);
      background-size: 10px 10px, 100% 1px, 100% 100%;
    }

    .birth-gate__label {
      color: rgba(23, 58, 46, 0.68);
    }

    .birth-gate__field {
      border-color: rgba(201, 163, 90, 0.36);
      background: rgba(255, 255, 255, 0.48);
      color: var(--solar-forest);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
    }

    .birth-gate:hover .birth-gate__field,
    .birth-gate:focus-visible .birth-gate__field {
      border-color: rgba(159, 116, 53, 0.62);
      background: rgba(255, 255, 255, 0.68);
    }

    .birth-gate__field-text {
      color: var(--solar-forest);
    }

    .birth-gate__hint {
      color: rgba(38, 51, 38, 0.66);
    }

    .button {
      border-color: rgba(159, 116, 53, 0.46);
      color: #1d2f25;
      background: linear-gradient(135deg, #e0bf6d, #c9a35a 58%, #b3894f);
      box-shadow: 0 14px 34px rgba(159, 116, 53, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }

    .button:hover,
    .button:focus-visible {
      background: linear-gradient(135deg, #f0d489, #d8be7a 54%, #c9a35a);
      color: #10251c;
      border-color: rgba(255, 255, 255, 0.72);
      box-shadow: 0 18px 42px rgba(159, 116, 53, 0.22), 0 0 0 4px rgba(255, 255, 255, 0.18);
    }

    .button--ghost {
      color: var(--solar-forest);
      background: rgba(255, 250, 240, 0.58);
      border-color: rgba(23, 58, 46, 0.22);
    }

    .button--ghost:hover,
    .button--ghost:focus-visible {
      color: var(--solar-forest);
      background: rgba(255, 250, 240, 0.82);
      border-color: rgba(201, 163, 90, 0.62);
    }

    .oracle-card,
    .field-panel {
      border-color: rgba(201, 163, 90, 0.46);
      background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(155deg, rgba(255, 250, 240, 0.82), rgba(239, 229, 194, 0.68));
      box-shadow: 0 34px 90px rgba(73, 74, 38, 0.16), 0 0 48px rgba(255, 255, 255, 0.26);
      color: var(--solar-forest);
    }

    .oracle-card::before,
    .field-panel::after {
      border-color: rgba(255, 255, 255, 0.76);
    }

    .oracle-card::after,
    .field-panel::before {
      border-color: rgba(201, 163, 90, 0.32);
    }

    .oracle-card__mark {
      border-color: rgba(201, 163, 90, 0.52);
      color: var(--solar-gold-deep);
      background: rgba(255, 255, 255, 0.44);
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.38), 0 0 20px rgba(201, 163, 90, 0.12);
    }

    .oracle-card__codes,
    .field-panel__text {
      color: rgba(23, 58, 46, 0.7);
    }

    .section {
      border-top-color: rgba(176, 126, 53, 0.14);
      color: var(--solar-ink);
    }

    .section--petrol,
    .section--midnight,
    .section--quiet {
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.62), transparent 20rem),
        radial-gradient(circle at 86% 14%, rgba(201, 163, 90, 0.14), transparent 18rem),
        linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(237, 239, 213, 0.92));
    }

    .section--midnight {
      background:
        radial-gradient(circle at 82% 18%, rgba(201, 163, 90, 0.14), transparent 18rem),
        linear-gradient(180deg, rgba(235, 238, 211, 0.94), rgba(255, 250, 240, 0.96));
    }

    .section::before {
      background:
        radial-gradient(circle at 18% 32%, rgba(201, 163, 90, 0.18) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 68%, rgba(168, 87, 63, 0.12) 0 1px, transparent 1.8px),
        linear-gradient(90deg, rgba(97, 115, 75, 0.08), transparent 24%, transparent 76%, rgba(201, 163, 90, 0.09)),
        repeating-linear-gradient(90deg, rgba(23, 58, 46, 0.024) 0, rgba(23, 58, 46, 0.024) 1px, transparent 1px, transparent 34px);
      background-size: 180px 180px, 260px 260px, auto, auto;
      opacity: 0.7;
    }

    .section::after {
      opacity: 0.2;
      background:
        radial-gradient(circle at center, rgba(201, 163, 90, 0.52) 0 2px, transparent 2.8px),
        linear-gradient(90deg, transparent, rgba(201, 163, 90, 0.34), transparent),
        radial-gradient(ellipse at left, rgba(36, 88, 70, 0.12), transparent 60%),
        radial-gradient(ellipse at right, rgba(36, 88, 70, 0.12), transparent 60%);
      background-size: 10px 10px, 100% 1px, 120px 28px, 120px 28px;
      background-position: center, center, calc(50% - 66px) center, calc(50% + 66px) center;
    }

    h2,
    h3 {
      color: var(--solar-forest);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42), 0 18px 48px rgba(159, 116, 53, 0.08);
    }

    .copy,
    .code-card p,
    .step-card p,
    .faq-item p,
    .audience-list li,
    .ethical {
      color: var(--solar-muted);
    }

    .code-card,
    .step-card,
    .faq-item {
      border-color: rgba(201, 163, 90, 0.28);
      background: rgba(255, 250, 240, 0.62);
      box-shadow: 0 18px 52px rgba(73, 74, 38, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.52);
    }

    .code-card:hover,
    .step-card:hover,
    .faq-item[open] {
      border-color: rgba(201, 163, 90, 0.5);
      background: rgba(255, 250, 240, 0.82);
      box-shadow: 0 22px 58px rgba(73, 74, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .code-card::before {
      background:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.5), transparent 18%),
        linear-gradient(145deg, rgba(201, 163, 90, 0.12), transparent 50%),
        radial-gradient(circle at 88% 12%, rgba(168, 87, 63, 0.09), transparent 14%);
    }

    .code-card::after {
      background: linear-gradient(90deg, var(--solar-gold), rgba(36, 88, 70, 0.24), transparent);
    }

    .code-card__number,
    .step-card::before,
    .faq-item summary::after,
    .audience-list li::before {
      color: var(--solar-gold-deep);
      border-color: var(--solar-gold);
    }

    .faq-item summary {
      color: var(--solar-forest);
    }

    .ethical {
      border-block-color: rgba(201, 163, 90, 0.24);
      background: rgba(255, 250, 240, 0.32);
    }

    .site-footer {
      background:
        radial-gradient(circle at 50% 8%, rgba(216, 190, 122, 0.18), transparent 24rem),
        linear-gradient(180deg, #214837, #10281f 72%, #0d201a);
      color: rgba(255, 250, 240, 0.8);
    }

    .site-footer::before {
      background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(201, 163, 90, 0.16), transparent 40%, rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 28px);
    }

    .footer__name {
      color: #d8be7a;
      text-shadow: 0 0 28px rgba(216, 190, 122, 0.16);
    }

    .footer__role,
    .footer__portal {
      color: rgba(255, 250, 240, 0.72);
    }

    .footer__portal {
      color: rgba(216, 190, 122, 0.88);
    }

    @media (max-width: 559px) {
      .hero {
        min-height: 90svh;
      }

      .solar-landscape {
        opacity: 0.58;
      }

      .solar-orbit,
      .solar-axis {
        opacity: 0.52;
      }

      .solar-botanical {
        opacity: 0.45;
      }

      .constellation-field {
        opacity: 0.32;
      }

      .hero .botanical {
        opacity: 0.28;
      }

      .floral-sprig--hero-left,
      .floral-sprig--hero-right {
        opacity: 0.16;
      }

      .birth-gate {
        background: rgba(255, 250, 240, 0.78);
      }

      .section::before {
        opacity: 0.42;
      }
    }
    /* Reference artwork alignment: stronger golden sun, lush valley, white sacred frame. */
    .hero {
      background:
        radial-gradient(circle at 50% 21%, rgba(255, 255, 255, 0.98) 0 2.5rem, rgba(255, 219, 84, 0.8) 2.6rem 9rem, transparent 20rem),
        radial-gradient(circle at 50% 32%, rgba(255, 180, 0, 0.72), rgba(211, 135, 9, 0.36) 26rem, transparent 45rem),
        radial-gradient(ellipse at 50% 58%, rgba(252, 192, 42, 0.5), transparent 38rem),
        linear-gradient(90deg, rgba(6, 30, 20, 0.88), rgba(28, 70, 40, 0.42) 22%, transparent 44%, transparent 56%, rgba(28, 70, 40, 0.42) 78%, rgba(6, 30, 20, 0.88)),
        linear-gradient(180deg, #7b4c08 0%, #d99516 26%, #f2c64e 46%, #356738 76%, #10251c 100%);
      color: var(--solar-ivory);
    }

    .hero::before {
      z-index: -2;
      background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.8px),
        radial-gradient(circle at 17% 22%, rgba(255, 214, 89, 0.74) 0 1.1px, transparent 2px),
        radial-gradient(circle at 82% 18%, rgba(255, 244, 194, 0.62) 0 1px, transparent 1.9px),
        radial-gradient(circle at 28% 56%, rgba(168, 87, 63, 0.28) 0 1px, transparent 2px),
        linear-gradient(180deg, rgba(63, 34, 0, 0.1), rgba(7, 26, 19, 0.38) 100%);
      background-size: 110px 110px, 150px 150px, 210px 210px, 190px 190px, auto;
      opacity: 0.95;
    }

    .hero::after {
      inset: 0.85rem;
      border-color: rgba(255, 250, 240, 0.66);
      border-radius: 0;
      opacity: 0.88;
      box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.18), inset 0 0 72px rgba(255, 255, 255, 0.12), 0 0 28px rgba(255, 255, 255, 0.08);
    }

    .solar-landscape {
      opacity: 1;
      mix-blend-mode: normal;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 94%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 94%, transparent 100%);
    }

    .solar-landscape::before,
    .solar-landscape::after {
      content: "";
      position: absolute;
      bottom: -6%;
      width: 38%;
      height: 68%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 20% 86%, rgba(201, 163, 90, 0.32), transparent 18%),
        radial-gradient(ellipse at 38% 76%, rgba(168, 87, 63, 0.28), transparent 13%),
        radial-gradient(ellipse at 56% 74%, rgba(216, 190, 122, 0.22), transparent 16%),
        linear-gradient(138deg, transparent 0 23%, rgba(10, 48, 31, 0.86) 24% 100%);
      filter: drop-shadow(0 0 28px rgba(7, 26, 19, 0.32));
      opacity: 0.72;
      clip-path: polygon(0 100%, 0 20%, 20% 8%, 38% 28%, 53% 12%, 70% 42%, 88% 28%, 100% 100%);
    }

    .solar-landscape::before { left: -2%; }
    .solar-landscape::after { right: -2%; transform: scaleX(-1); }

    .solar-disc {
      fill: rgba(255, 213, 70, 0.62);
      stroke: rgba(255, 255, 255, 0.9);
      stroke-width: 1.15;
      filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.74)) drop-shadow(0 0 72px rgba(255, 184, 0, 0.8));
    }

    .solar-orbit {
      stroke: rgba(255, 250, 240, 0.78);
      stroke-width: 0.9;
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.28));
    }

    .solar-axis { stroke: rgba(255, 250, 240, 0.68); stroke-width: 0.62; }
    .solar-lightline { stroke: rgba(255, 250, 240, 0.42); stroke-width: 0.75; }
    .solar-mountain-back { fill: rgba(47, 91, 46, 0.5); }
    .solar-mountain-mid { fill: rgba(19, 69, 44, 0.64); }
    .solar-mountain-front { fill: rgba(7, 45, 31, 0.78); }
    .solar-valley { fill: rgba(198, 158, 61, 0.45); }

    .solar-path {
      fill: rgba(255, 212, 67, 0.86);
      stroke: rgba(255, 250, 240, 0.78);
      stroke-width: 1.15;
      filter: drop-shadow(0 0 14px rgba(255, 203, 55, 0.74)) drop-shadow(0 0 36px rgba(255, 184, 0, 0.38));
    }

    .solar-botanical {
      stroke: rgba(167, 212, 92, 0.46);
      stroke-width: 1.2;
      filter: drop-shadow(0 0 9px rgba(8, 35, 24, 0.34));
    }

    .solar-flower-dot {
      fill: rgba(211, 74, 47, 0.72);
      filter: drop-shadow(0 0 8px rgba(255, 196, 67, 0.45));
    }

    .reference-frame {
      position: absolute;
      inset: 0.75rem;
      z-index: 1;
      pointer-events: none;
      opacity: 0.82;
      filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.16));
    }

    .reference-frame svg { width: 100%; height: 100%; display: block; overflow: visible; }

    .reference-frame__line,
    .reference-frame__arc,
    .reference-frame__circle {
      fill: none;
      stroke: rgba(255, 250, 240, 0.82);
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .reference-frame__line { stroke-width: 0.8; }
    .reference-frame__arc { stroke-width: 0.9; }
    .reference-frame__circle { stroke-width: 0.8; }

    .reference-frame__dot {
      fill: rgba(255, 250, 240, 0.88);
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.36));
    }

    .reference-frame__gold {
      fill: rgba(255, 194, 49, 0.78);
      stroke: rgba(255, 250, 240, 0.58);
      stroke-width: 0.5;
      vector-effect: non-scaling-stroke;
    }

    .constellation-field { opacity: 0.62; mix-blend-mode: screen; }
    .celestial-line, .celestial-line--ivory { stroke: rgba(255, 250, 240, 0.55); }

    .star-point,
    .star-point--dim {
      fill: rgba(255, 250, 240, 0.76);
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
    }

    .star-point--gold {
      fill: rgba(255, 195, 47, 0.84);
      filter: drop-shadow(0 0 10px rgba(255, 195, 47, 0.62));
    }

    .hero .botanical {
      color: rgba(190, 222, 94, 0.34);
      filter: drop-shadow(0 0 12px rgba(12, 44, 28, 0.46));
    }

    .floral-sprig--hero-left,
    .floral-sprig--hero-right {
      color: rgba(195, 226, 105, 0.5);
      opacity: 0.56;
    }

    .floral-sprig--hero-top { color: rgba(255, 250, 240, 0.68); opacity: 0.58; }

    .hero .section-ornament,
    .hero .gold-sun {
      color: rgba(255, 250, 240, 0.92);
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.42));
    }

    .hero .kicker {
      color: rgba(255, 250, 240, 0.9);
      text-shadow: 0 2px 18px rgba(76, 39, 0, 0.34);
    }

    .hero h1 {
      color: rgba(255, 250, 240, 0.98);
      text-shadow: 0 0 14px rgba(255, 255, 255, 0.28), 0 0 46px rgba(255, 194, 49, 0.48), 0 10px 42px rgba(55, 24, 0, 0.28);
    }

    .hero__subtitle,
    .hero__lead {
      color: rgba(255, 250, 240, 0.88);
      text-shadow: 0 2px 18px rgba(39, 28, 0, 0.28);
    }

    .hero .gold-divider {
      opacity: 0.8;
      background: linear-gradient(90deg, transparent, rgba(255, 250, 240, 0.76), rgba(255, 194, 49, 0.72), rgba(255, 250, 240, 0.76), transparent);
    }

    .birth-gate {
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 250, 240, 0.52), transparent 56%),
        linear-gradient(135deg, rgba(12, 39, 29, 0.74), rgba(38, 75, 42, 0.58));
      color: rgba(255, 250, 240, 0.96);
      border-color: rgba(255, 250, 240, 0.42);
      box-shadow: 0 26px 78px rgba(10, 28, 20, 0.26), inset 0 0 0 1px rgba(255, 250, 240, 0.16), inset 0 0 34px rgba(255, 194, 49, 0.1);
    }

    .birth-gate:hover,
    .birth-gate:focus-visible {
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 250, 240, 0.62), transparent 58%),
        linear-gradient(135deg, rgba(15, 49, 35, 0.78), rgba(59, 96, 45, 0.64));
      border-color: rgba(255, 250, 240, 0.64);
    }

    .birth-gate__label,
    .birth-gate__hint,
    .birth-gate__field-text { color: rgba(255, 250, 240, 0.9); }

    .birth-gate__field {
      background: rgba(255, 250, 240, 0.12);
      border-color: rgba(255, 250, 240, 0.3);
      color: rgba(255, 250, 240, 0.94);
    }

    .birth-gate:hover .birth-gate__field,
    .birth-gate:focus-visible .birth-gate__field {
      background: rgba(255, 250, 240, 0.18);
      border-color: rgba(255, 250, 240, 0.5);
    }

    .oracle-card {
      background:
        radial-gradient(circle at 50% 8%, rgba(255, 225, 94, 0.34), transparent 30%),
        linear-gradient(155deg, rgba(16, 48, 35, 0.84), rgba(105, 77, 18, 0.58));
      color: rgba(255, 250, 240, 0.94);
      border-color: rgba(255, 250, 240, 0.44);
      box-shadow: 0 34px 90px rgba(10, 28, 20, 0.3), 0 0 52px rgba(255, 194, 49, 0.2);
    }

    .oracle-card__codes { color: rgba(255, 250, 240, 0.74); }

    .oracle-card__mark {
      color: rgba(255, 250, 240, 0.9);
      border-color: rgba(255, 250, 240, 0.54);
      background: rgba(255, 250, 240, 0.12);
    }

    @media (max-width: 559px) {
      .reference-frame { inset: 0.55rem; opacity: 0.5; }
      .solar-landscape::before,
      .solar-landscape::after { width: 46%; height: 54%; opacity: 0.46; }
      .hero h1 { text-shadow: 0 0 14px rgba(255, 255, 255, 0.22), 0 0 34px rgba(255, 194, 49, 0.4), 0 8px 30px rgba(55, 24, 0, 0.28); }
      .birth-gate,
      .oracle-card { backdrop-filter: blur(8px); }
    }
    /* Dark lunar artwork template: red-gold river, crescent portal, tropical night frame. */
    :root {
      --lunar-black: #060302;
      --lunar-ember: #210605;
      --lunar-red: #6e120b;
      --lunar-red-soft: rgba(158, 33, 14, 0.34);
      --lunar-gold: #f2a423;
      --lunar-gold-soft: rgba(242, 164, 35, 0.34);
      --lunar-gold-bright: #ffd36b;
      --lunar-green: #0d2618;
      --lunar-green-lit: #8a8b35;
      --lunar-ivory: #ffe7aa;
      --lunar-text: #f5d38a;
    }

    body {
      background:
        radial-gradient(circle at 50% 0%, rgba(152, 39, 6, 0.38), transparent 28rem),
        radial-gradient(circle at 50% 34%, rgba(242, 164, 35, 0.16), transparent 30rem),
        linear-gradient(180deg, #070201 0%, #170403 32%, #250706 58%, #0b120b 100%);
      color: var(--lunar-ivory);
    }

    body::before {
      background:
        radial-gradient(circle at 15% 20%, rgba(255, 185, 44, 0.26) 0 1px, transparent 1.9px),
        radial-gradient(circle at 82% 18%, rgba(255, 80, 28, 0.2) 0 1px, transparent 2px),
        radial-gradient(circle at 50% 72%, rgba(255, 197, 74, 0.16) 0 1px, transparent 2px),
        linear-gradient(115deg, rgba(125, 21, 10, 0.16), transparent 42%),
        repeating-linear-gradient(90deg, rgba(242, 164, 35, 0.024) 0, rgba(242, 164, 35, 0.024) 1px, transparent 1px, transparent 18px);
      background-size: 160px 160px, 230px 230px, 300px 300px, auto, auto;
      opacity: 0.9;
    }

    body::after {
      box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.72), inset 0 -160px 220px rgba(1, 8, 4, 0.74);
    }

    .gold-dots {
      opacity: 0.28;
      mix-blend-mode: screen;
      background:
        radial-gradient(circle at 13% 22%, rgba(255, 190, 58, 0.72) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 18%, rgba(255, 93, 31, 0.46) 0 1px, transparent 1.8px),
        radial-gradient(circle at 47% 72%, rgba(255, 211, 107, 0.32) 0 1px, transparent 1.7px),
        radial-gradient(circle at 86% 84%, rgba(242, 164, 35, 0.28) 0 1px, transparent 1.7px);
      background-size: 150px 150px, 230px 230px, 190px 190px, 280px 280px;
    }

    .site-header,
    .site-header.is-scrolled {
      background: rgba(6, 3, 2, 0.76);
      border-color: rgba(242, 164, 35, 0.3);
      box-shadow: 0 16px 46px rgba(0, 0, 0, 0.34);
    }

    .brand__name,
    .nav__links {
      color: rgba(255, 231, 170, 0.9);
    }

    .brand__line,
    .nav__links a:hover,
    .nav__links a:focus-visible,
    .kicker,
    .section-kicker,
    .micro-label {
      color: var(--lunar-gold-bright);
    }

    .hero {
      min-height: 96svh;
      background:
        radial-gradient(circle at 50% 10%, rgba(255, 196, 56, 0.52) 0 1.8rem, transparent 6.8rem),
        radial-gradient(circle at 50% 28%, rgba(255, 150, 15, 0.34), transparent 23rem),
        radial-gradient(ellipse at 50% 66%, rgba(255, 68, 18, 0.38), transparent 32rem),
        linear-gradient(90deg, rgba(1, 7, 4, 0.98), rgba(8, 25, 14, 0.74) 18%, transparent 43%, transparent 57%, rgba(8, 25, 14, 0.74) 82%, rgba(1, 7, 4, 0.98)),
        linear-gradient(180deg, #050101 0%, #220503 28%, #73140a 48%, #1e0905 70%, #050705 100%);
      color: var(--lunar-ivory);
      border-bottom-color: rgba(242, 164, 35, 0.32);
    }

    .hero::before {
      background:
        radial-gradient(circle at 50% 5%, rgba(255, 197, 74, 0.9) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 20% 20%, rgba(255, 68, 24, 0.35) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 22%, rgba(255, 68, 24, 0.3) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 48%, rgba(255, 202, 72, 0.22) 0 1px, transparent 1.9px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.58) 100%);
      background-size: 110px 110px, 160px 160px, 210px 210px, 260px 260px, auto;
      opacity: 0.96;
    }

    .hero::after {
      inset: 1rem;
      border: 1px solid rgba(242, 164, 35, 0.74);
      border-radius: 8px;
      opacity: 0.94;
      box-shadow: inset 0 0 0 1px rgba(255, 231, 170, 0.12), inset 0 0 64px rgba(242, 164, 35, 0.08), 0 0 26px rgba(242, 164, 35, 0.12);
    }

    .lunar-template {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.94;
      mix-blend-mode: normal;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 95%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 95%, transparent 100%);
    }

    .lunar-template svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .lunar-cloud {
      fill: rgba(112, 13, 8, 0.38);
      filter: blur(0.25px) drop-shadow(0 0 18px rgba(255, 63, 22, 0.18));
    }

    .lunar-valley {
      fill: rgba(12, 38, 22, 0.82);
    }

    .lunar-valley-mid {
      fill: rgba(83, 31, 9, 0.64);
    }

    .lunar-water {
      fill: rgba(9, 10, 7, 0.64);
      stroke: rgba(242, 164, 35, 0.34);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .lunar-river {
      fill: none;
      stroke: rgba(255, 187, 35, 0.92);
      stroke-width: 13;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 10px rgba(255, 210, 78, 0.92)) drop-shadow(0 0 34px rgba(255, 92, 14, 0.75));
      vector-effect: non-scaling-stroke;
    }

    .lunar-river-core {
      fill: none;
      stroke: rgba(255, 250, 208, 0.9);
      stroke-width: 3.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 12px rgba(255, 255, 221, 0.72));
      vector-effect: non-scaling-stroke;
    }

    .lunar-orbit,
    .lunar-axis,
    .lunar-sacred {
      fill: none;
      stroke: rgba(242, 164, 35, 0.48);
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .lunar-orbit {
      stroke-width: 0.7;
    }

    .lunar-axis {
      stroke: rgba(255, 211, 107, 0.58);
      stroke-width: 0.74;
    }

    .lunar-sacred {
      stroke: rgba(255, 150, 15, 0.28);
      stroke-width: 0.5;
    }

    .lunar-crescent {
      fill: rgba(255, 158, 16, 0.5);
      stroke: rgba(255, 211, 107, 0.95);
      stroke-width: 1.1;
      filter: drop-shadow(0 0 18px rgba(255, 174, 23, 0.82)) drop-shadow(0 0 58px rgba(255, 80, 12, 0.55));
      vector-effect: non-scaling-stroke;
    }

    .lunar-node {
      fill: rgba(255, 190, 58, 0.96);
      stroke: rgba(255, 231, 170, 0.7);
      stroke-width: 0.65;
      filter: drop-shadow(0 0 10px rgba(255, 190, 58, 0.78));
      vector-effect: non-scaling-stroke;
    }

    .lunar-flower {
      fill: rgba(198, 28, 14, 0.78);
      filter: drop-shadow(0 0 8px rgba(255, 63, 22, 0.42));
    }

    .reference-frame {
      opacity: 0.72;
      filter: drop-shadow(0 0 8px rgba(242, 164, 35, 0.24));
    }

    .reference-frame__line,
    .reference-frame__arc,
    .reference-frame__circle {
      stroke: rgba(242, 164, 35, 0.78);
    }

    .reference-frame__dot,
    .reference-frame__gold {
      fill: rgba(255, 190, 58, 0.9);
      filter: drop-shadow(0 0 8px rgba(255, 190, 58, 0.7));
    }

    .solar-landscape {
      opacity: 0.68;
      mix-blend-mode: multiply;
    }

    .solar-landscape::before,
    .solar-landscape::after {
      background:
        radial-gradient(ellipse at 25% 82%, rgba(255, 60, 20, 0.28), transparent 17%),
        radial-gradient(ellipse at 54% 75%, rgba(242, 164, 35, 0.2), transparent 15%),
        linear-gradient(138deg, transparent 0 21%, rgba(2, 18, 10, 0.92) 22% 100%);
      opacity: 0.86;
    }

    .solar-disc,
    .solar-orbit,
    .solar-axis {
      opacity: 0.16;
    }

    .solar-path {
      opacity: 0.72;
      stroke: rgba(255, 220, 104, 0.7);
      filter: drop-shadow(0 0 22px rgba(255, 120, 14, 0.55));
    }

    .constellation-field {
      opacity: 0.62;
      mix-blend-mode: screen;
    }

    .cosmic-grid {
      opacity: 0.18;
    }

    .celestial-line,
    .celestial-line--ivory {
      stroke: rgba(242, 164, 35, 0.42);
    }

    .star-point,
    .star-point--dim,
    .star-point--gold {
      fill: rgba(255, 190, 58, 0.82);
      filter: drop-shadow(0 0 10px rgba(255, 148, 18, 0.72));
    }

    .hero .botanical {
      color: rgba(137, 139, 53, 0.52);
      opacity: 0.78;
      filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.8));
    }

    .floral-sprig--hero-left,
    .floral-sprig--hero-right {
      color: rgba(138, 139, 53, 0.62);
      opacity: 0.7;
    }

    .floral-sprig--hero-top {
      color: rgba(242, 164, 35, 0.72);
      opacity: 0.7;
    }

    .hero .kicker,
    .hero__subtitle,
    .hero__lead {
      color: rgba(255, 231, 170, 0.88);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.68), 0 0 22px rgba(255, 120, 14, 0.26);
    }

    .hero h1 {
      color: rgba(255, 211, 107, 0.96);
      text-shadow: 0 0 10px rgba(255, 231, 170, 0.18), 0 0 38px rgba(255, 136, 14, 0.42), 0 10px 38px rgba(0, 0, 0, 0.72);
    }

    .hero .gold-divider {
      background: linear-gradient(90deg, transparent, rgba(242, 164, 35, 0.2), rgba(255, 211, 107, 0.78), rgba(242, 164, 35, 0.2), transparent);
      opacity: 0.86;
    }

    .birth-gate,
    .oracle-card {
      background:
        radial-gradient(circle at 50% 0%, rgba(242, 164, 35, 0.22), transparent 54%),
        linear-gradient(135deg, rgba(7, 10, 6, 0.84), rgba(88, 18, 8, 0.5));
      border-color: rgba(242, 164, 35, 0.52);
      color: rgba(255, 231, 170, 0.94);
      box-shadow: 0 26px 78px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 211, 107, 0.08), inset 0 0 34px rgba(255, 120, 14, 0.1);
    }

    .birth-gate:hover,
    .birth-gate:focus-visible {
      background:
        radial-gradient(circle at 50% 0%, rgba(242, 164, 35, 0.28), transparent 58%),
        linear-gradient(135deg, rgba(10, 16, 8, 0.9), rgba(112, 25, 10, 0.56));
      border-color: rgba(255, 211, 107, 0.76);
    }

    .birth-gate__label,
    .birth-gate__hint,
    .birth-gate__field-text,
    .oracle-card__codes {
      color: rgba(255, 231, 170, 0.84);
    }

    .birth-gate__field {
      background: rgba(255, 190, 58, 0.08);
      border-color: rgba(242, 164, 35, 0.36);
      color: rgba(255, 231, 170, 0.94);
    }

    .oracle-card__mark {
      color: rgba(255, 211, 107, 0.94);
      border-color: rgba(242, 164, 35, 0.6);
      background: rgba(255, 190, 58, 0.08);
    }

    .section--petrol,
    .section--midnight,
    .section--quiet {
      background:
        radial-gradient(circle at 18% 12%, rgba(125, 21, 10, 0.22), transparent 19rem),
        radial-gradient(circle at 86% 18%, rgba(242, 164, 35, 0.08), transparent 18rem),
        linear-gradient(180deg, #130503 0%, #210806 48%, #080e08 100%);
      color: var(--lunar-ivory);
    }

    h2,
    h3 {
      color: var(--lunar-text);
      text-shadow: 0 0 24px rgba(255, 120, 14, 0.18), 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .copy,
    .code-card p,
    .step-card p,
    .faq-item p,
    .audience-list li,
    .ethical {
      color: rgba(255, 231, 170, 0.72);
    }

    .code-card,
    .step-card,
    .faq-item,
    .field-panel {
      background: rgba(8, 6, 4, 0.58);
      border-color: rgba(242, 164, 35, 0.28);
      box-shadow: 0 18px 58px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 211, 107, 0.035);
    }

    .code-card:hover,
    .step-card:hover,
    .faq-item[open] {
      background: rgba(32, 8, 5, 0.66);
      border-color: rgba(242, 164, 35, 0.48);
    }

    .code-card::before {
      background:
        radial-gradient(circle at 20% 16%, rgba(242, 164, 35, 0.14), transparent 18%),
        linear-gradient(145deg, rgba(125, 21, 10, 0.18), transparent 52%);
    }

    .faq-item summary,
    .field-panel__text {
      color: var(--lunar-text);
    }

    .button {
      color: #160806;
      border-color: rgba(255, 211, 107, 0.7);
      background: linear-gradient(135deg, #ffd36b, #f2a423 56%, #b65b12);
      box-shadow: 0 16px 38px rgba(255, 92, 14, 0.22), inset 0 1px 0 rgba(255, 242, 196, 0.4);
    }

    .button:hover,
    .button:focus-visible {
      background: linear-gradient(135deg, #ffe7aa, #ffbd3c 56%, #dc7114);
      color: #120604;
      box-shadow: 0 20px 48px rgba(255, 92, 14, 0.3), 0 0 0 4px rgba(242, 164, 35, 0.14);
    }

    .button--ghost {
      color: rgba(255, 231, 170, 0.92);
      background: rgba(8, 6, 4, 0.46);
      border-color: rgba(255, 211, 107, 0.34);
    }

    .button--ghost:hover,
    .button--ghost:focus-visible {
      color: var(--lunar-ivory);
      background: rgba(125, 21, 10, 0.4);
      border-color: rgba(255, 211, 107, 0.66);
    }

    .site-footer {
      background:
        radial-gradient(circle at 50% 0%, rgba(242, 164, 35, 0.14), transparent 22rem),
        linear-gradient(180deg, #160504, #050302 76%);
      color: rgba(255, 231, 170, 0.76);
    }

    .footer__name,
    .footer__portal {
      color: rgba(255, 211, 107, 0.92);
    }

    @media (max-width: 559px) {
      .lunar-template {
        opacity: 0.68;
      }

      .lunar-river {
        stroke-width: 8;
      }

      .reference-frame {
        opacity: 0.44;
      }

      .solar-landscape::before,
      .solar-landscape::after {
        opacity: 0.45;
      }

      .hero h1 {
        color: rgba(255, 219, 126, 0.98);
      }
    }