:root {
        --landing-width: 1120px;
      }

      .skip-link {
        position: absolute;
        top: -9999px;
        left: -9999px;
        z-index: 9999;
        padding: 10px 18px;
        border-radius: var(--r-sm);
        background: var(--gold-light);
        color: #06051a;
        font-weight: 700;
        font-size: 14px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
        text-decoration: none;
      }

      .skip-link:focus-visible {
        position: fixed;
        top: 16px;
        left: 16px;
      }

      .landing-shell {
        position: relative;
        z-index: 1;
        min-height: 100dvh;
      }

      .landing-nav {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(212,175,55,0.12);
        background: rgba(6,5,26,0.82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .landing-nav-inner {
        width: min(calc(100% - 32px), var(--landing-width));
        min-height: 68px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .brand {
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-decoration: none;
        text-transform: uppercase;
      }

      .brand-mark { margin-right: 7px; }

      .nav-cta,
      .hero-cta,
      .final-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border: 1px solid rgba(212,175,55,0.42);
        border-radius: var(--r-md);
        padding: 12px 20px;
        background: linear-gradient(135deg, #b8860b, var(--gold-light));
        box-shadow: 0 8px 28px rgba(212,175,55,0.2);
        color: #06051a;
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .nav-cta:hover,
      .hero-cta:hover,
      .final-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 34px rgba(212,175,55,0.3);
      }

      .nav-cta {
        min-height: 44px;
        padding: 9px 16px;
        background: rgba(212,175,55,0.08);
        box-shadow: none;
        color: var(--gold-light);
      }

      .landing-main { overflow: hidden; }

      .hero {
        width: min(calc(100% - 32px), var(--landing-width));
        min-height: calc(100dvh - 68px);
        margin: 0 auto;
        padding: clamp(70px, 9vw, 118px) 0 70px;
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
        align-items: center;
        gap: clamp(38px, 7vw, 90px);
      }

      .eyebrow,
      .section-eyebrow {
        color: var(--gold);
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .hero-title {
        max-width: 760px;
        margin-top: 18px;
        font-family: var(--font-h);
        font-size: clamp(38px, 5.4vw, 72px);
        font-weight: 700;
        line-height: 1.08;
        text-wrap: balance;
        text-transform: uppercase;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 52%, #b8860b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .hero-copy {
        max-width: 680px;
        margin-top: 24px;
        color: var(--text-muted);
        font-size: clamp(15px, 1.7vw, 18px);
        font-weight: 300;
        line-height: 1.8;
      }

      .hero-copy strong { color: var(--text); font-weight: 500; }

      .hero-actions {
        margin-top: 34px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
      }

      .hero-secondary {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        padding: 10px 12px;
        color: var(--text-muted);
        font-family: var(--font-h);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
      }

      .hero-secondary:hover { color: var(--text); }

      .hero-visual {
        position: relative;
        aspect-ratio: 1;
        width: min(100%, 470px);
        margin: 0 auto;
        display: grid;
        place-items: center;
      }

      .cosmic-disc {
        position: absolute;
        inset: 5%;
        border: 1px solid rgba(212,175,55,0.15);
        border-radius: 50%;
        background:
          radial-gradient(circle at center, rgba(212,175,55,0.1), transparent 18%),
          repeating-radial-gradient(circle at center, transparent 0 11%, rgba(139,133,170,0.14) 11.2% 11.5%, transparent 11.8% 19%);
        box-shadow: inset 0 0 80px rgba(124,58,237,0.09), 0 0 90px rgba(124,58,237,0.08);
        animation: discPulse 7s ease-in-out infinite;
      }

      .cosmic-disc::before,
      .cosmic-disc::after {
        content: "";
        position: absolute;
        inset: 8%;
        border: 1px dashed rgba(212,175,55,0.2);
        border-radius: 50%;
        animation: orbitSpin 38s linear infinite;
      }

      .cosmic-disc::after {
        inset: 25%;
        border-color: rgba(6,182,212,0.2);
        animation-direction: reverse;
        animation-duration: 24s;
      }

      .cosmic-core {
        position: relative;
        z-index: 2;
        width: 108px;
        height: 108px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(212,175,55,0.42);
        border-radius: 50%;
        background: radial-gradient(circle at 38% 35%, #fff4b0, var(--gold) 34%, #6f4807 72%);
        box-shadow: 0 0 34px rgba(212,175,55,0.35), 0 0 90px rgba(212,175,55,0.12);
        color: #211200;
        font-family: var(--font-h);
        font-size: 26px;
      }

      .orbit-symbol {
        position: absolute;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(212,175,55,0.22);
        border-radius: 50%;
        background: rgba(8,7,28,0.92);
        box-shadow: 0 8px 24px rgba(0,0,0,0.45);
        color: var(--gold-light);
        font-size: 21px;
      }

      .orbit-symbol.one { top: 9%; left: 45%; }
      .orbit-symbol.two { top: 29%; right: 3%; color: var(--c-vedic); }
      .orbit-symbol.three { right: 15%; bottom: 10%; color: var(--c-maya); }
      .orbit-symbol.four { bottom: 4%; left: 29%; color: var(--c-celtic); }
      .orbit-symbol.five { top: 43%; left: 0; color: var(--c-numerology); }

      .visual-caption {
        position: absolute;
        right: 10%;
        bottom: 20%;
        z-index: 4;
        max-width: 170px;
        padding: 10px 12px;
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: var(--r-sm);
        background: rgba(6,5,26,0.84);
        color: var(--text-muted);
        font-size: 10px;
        line-height: 1.5;
        backdrop-filter: blur(10px);
      }

      .visual-caption strong {
        display: block;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .systems-section {
        position: relative;
        padding: clamp(74px, 9vw, 118px) 16px;
        border-top: 1px solid rgba(212,175,55,0.1);
        background:
          linear-gradient(180deg, rgba(14,12,40,0.42), rgba(6,5,26,0.2)),
          radial-gradient(circle at 50% 0%, rgba(124,58,237,0.1), transparent 45%);
      }

      .section-inner {
        width: min(100%, var(--landing-width));
        margin: 0 auto;
      }

      .section-heading {
        max-width: 760px;
        margin: 12px auto 14px;
        color: var(--text);
        font-family: var(--font-h);
        font-size: clamp(28px, 4vw, 46px);
        line-height: 1.2;
        text-align: center;
        text-wrap: balance;
      }

      .section-eyebrow { text-align: center; }

      .section-intro {
        max-width: 700px;
        margin: 0 auto;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.8;
        text-align: center;
      }

      .systems-grid {
        margin-top: 42px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        list-style: none;
      }

      .system-card {
        --system-color: var(--gold);
        position: relative;
        min-height: 230px;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 22px;
        border: 1px solid rgba(212,175,55,0.14);
        border-radius: var(--r-lg);
        overflow: hidden;
        background:
          linear-gradient(145deg, color-mix(in srgb, var(--system-color) 8%, transparent), transparent 48%),
          rgba(14,12,40,0.8);
        box-shadow: 0 14px 44px rgba(0,0,0,0.24);
        color: inherit;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        text-decoration: none;
        transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
      }

      .system-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--system-color), transparent);
        opacity: 0.72;
      }

      .system-card:hover,
      .system-card:focus-visible {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--system-color) 44%, transparent);
        box-shadow: 0 20px 52px rgba(0,0,0,0.36);
      }

      .system-card.tropical { --system-color: var(--c-tropical); }
      .system-card.vedic { --system-color: var(--c-vedic); }
      .system-card.egyptian { --system-color: var(--c-egyptian); }
      .system-card.american { --system-color: var(--c-american); }
      .system-card.celtic { --system-color: var(--c-celtic); }
      .system-card.chinese { --system-color: var(--c-chinese); }
      .system-card.maya { --system-color: var(--c-maya); }
      .system-card.azteca { --system-color: var(--c-azteca); }
      .system-card.numerology { --system-color: var(--c-numerology); }

      .system-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .system-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1px solid color-mix(in srgb, var(--system-color) 34%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--system-color) 9%, transparent);
        color: var(--system-color);
        font-size: 23px;
      }

      .system-state {
        color: var(--text-muted);
        font-family: var(--font-h);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .system-name {
        margin-top: 18px;
        color: var(--text);
        font-family: var(--font-h);
        font-size: 16px;
        line-height: 1.35;
      }

      .system-origin {
        margin-top: 4px;
        color: var(--system-color);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .system-description {
        margin-top: 12px;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.65;
      }

      .system-link-label {
        margin-top: auto;
        padding-top: 16px;
        color: var(--text);
        font-family: var(--font-h);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .library-note {
        scroll-margin-top: 90px;
        max-width: 700px;
        margin: 28px auto 0;
        padding: 14px 18px;
        border: 1px solid rgba(212,175,55,0.16);
        border-radius: var(--r-md);
        background: rgba(212,175,55,0.04);
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
      }

      .library-note strong { color: var(--gold-light); }

      .threshold-section {
        padding: clamp(78px, 10vw, 128px) 16px;
      }

      .threshold-card {
        width: min(100%, 860px);
        margin: 0 auto;
        padding: clamp(28px, 6vw, 58px);
        border: 1px solid rgba(248,113,113,0.22);
        border-radius: var(--r-xl);
        background:
          repeating-linear-gradient(135deg, transparent 0 12px, rgba(248,113,113,0.018) 12px 24px),
          rgba(14,12,40,0.78);
        box-shadow: 0 24px 80px rgba(0,0,0,0.38), 0 0 50px rgba(124,58,237,0.08);
        text-align: center;
      }

      .threshold-symbol {
        display: block;
        margin-bottom: 14px;
        font-size: 38px;
      }

      .threshold-card h2 {
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: clamp(25px, 4vw, 40px);
        line-height: 1.25;
        text-transform: uppercase;
      }

      .threshold-card p {
        max-width: 650px;
        margin: 20px auto 0;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.8;
      }

      .threshold-card strong { color: var(--text); }
      .final-cta { margin-top: 30px; min-height: 54px; padding-inline: 28px; }

      .landing-footer {
        padding: 28px 16px;
        border-top: 1px solid rgba(212,175,55,0.1);
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
      }

      .landing-footer strong { color: var(--gold-light); font-family: var(--font-h); }

      @keyframes orbitSpin { to { transform: rotate(360deg); } }
      @keyframes discPulse { 50% { transform: scale(1.025); opacity: 0.88; } }

      @media (max-width: 860px) {
        .hero {
          min-height: auto;
          grid-template-columns: 1fr;
          text-align: center;
        }
        .hero-copy { margin-inline: auto; }
        .hero-actions { justify-content: center; }
        .hero-visual { width: min(88vw, 430px); }
        .systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }

      @media (max-width: 560px) {
        .landing-nav-inner { min-height: 60px; }
        .brand { max-width: 150px; font-size: 10px; line-height: 1.35; }
        .nav-cta { padding-inline: 12px; font-size: 11px; }
        .hero { padding-top: 58px; }
        .hero-title { font-size: clamp(34px, 11vw, 48px); }
        .hero-copy { font-size: 14px; }
        .hero-actions { align-items: stretch; flex-direction: column; }
        .hero-cta, .hero-secondary { width: 100%; }
        .hero-visual { width: min(96vw, 390px); }
        .cosmic-core { width: 82px; height: 82px; font-size: 21px; }
        .orbit-symbol { width: 40px; height: 40px; font-size: 18px; }
        .visual-caption { right: 5%; bottom: 13%; }
        .systems-grid { grid-template-columns: 1fr; }
        .system-card { min-height: 205px; }
        .threshold-card { border-radius: var(--r-lg); }
        .final-cta { width: 100%; }
      }

      @media (prefers-reduced-motion: reduce) {
        .cosmic-disc,
        .cosmic-disc::before,
        .cosmic-disc::after { animation: none; }
        .system-card,
        .nav-cta,
        .hero-cta,
        .final-cta { transition: none; }
      }

      @media (forced-colors: active) {
        .system-card,
        .library-note,
        .threshold-card {
          border: 1px solid CanvasText;
          background: Canvas;
          color: CanvasText;
          forced-color-adjust: auto;
        }

        .system-card::before,
        .cosmic-disc,
        .cosmic-disc::before,
        .cosmic-disc::after {
          display: none;
        }
      }