:root {
  color-scheme: dark;
  --ink: #070807;
  --panel: rgba(15, 15, 13, .92);
  --gold: #d6ae5e;
  --gold-pale: #f0d79a;
  --gold-faint: rgba(214, 174, 94, .16);
  --line: rgba(223, 186, 102, .2);
  --text: #eee9df;
  --muted: #8e8a82;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 2%, rgba(117, 75, 24, .34), transparent 32rem),
    radial-gradient(circle at 83% 56%, rgba(102, 67, 23, .12), transparent 31rem),
    linear-gradient(145deg, #0c0d0c, #050605 60%, #0d0d0b);
}

.landing-noise, .landing-grid, .landing-aurora, .landing-motes { position: fixed; pointer-events: none; }
.landing-noise {
  z-index: 8;
  inset: 0;
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.landing-grid {
  inset: 0;
  opacity: .16;
  transform: perspective(600px) rotateX(64deg) translateY(39%);
  transform-origin: center bottom;
  background-image: linear-gradient(var(--gold-faint) 1px, transparent 1px), linear-gradient(90deg, var(--gold-faint) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(transparent 20%, #000 75%);
}
.landing-aurora { width: 38rem; height: 38rem; border-radius: 50%; opacity: .18; filter: blur(120px); animation: aurora-drift 16s ease-in-out infinite alternate; }
.landing-aurora-a { top: -22rem; left: -8rem; background: #bf7d28; }
.landing-aurora-b { right: -18rem; bottom: -20rem; background: #8e662b; animation-delay: -7s; }
.landing-motes { z-index: 1; inset: 0; overflow: hidden; }
.landing-motes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: var(--gold-pale);
  box-shadow: 0 0 8px var(--gold);
  animation: mote-rise var(--duration) linear var(--delay) infinite;
}

.landing-header, .landing-footer, .landing-main { position: relative; z-index: 3; width: min(1320px, calc(100% - 64px)); margin-inline: auto; }
.landing-header { min-height: 128px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.landing-brand { display: flex; align-items: center; gap: 24px; }
.landing-brand img { width: auto; height: 56px; }
.landing-brand span { position: relative; padding-left: 24px; color: #d9d7d0; font: 500 clamp(23px, 3vw, 36px)/1 Georgia, "Times New Roman", serif; letter-spacing: .1em; text-shadow: 0 2px 1px #000, 0 0 22px rgba(214,174,94,.16); }
.landing-brand span::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, var(--gold), transparent); }
.landing-main { min-height: calc(100vh - 214px); display: grid; align-items: center; padding: 40px 0 72px; }
.access-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 480px); align-items: center; gap: clamp(64px, 9vw, 150px); }
.access-story { padding-bottom: 18px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; }
.eyebrow span { width: 38px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.access-story h1 { max-width: 760px; margin: 0; color: #e3ded5; font: 500 clamp(45px, 5.7vw, 82px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.025em; text-shadow: 0 3px 3px #000, 0 0 32px rgba(213,166,74,.06); }
.access-story h1 em { color: var(--gold-pale); font-weight: 400; }
.access-intro { max-width: 630px; margin: 30px 0 0; color: #918e87; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.75; }
.access-features { max-width: 610px; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-features div { display: grid; gap: 7px; padding: 18px 18px 18px 0; }
.access-features div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.access-features strong { color: var(--gold-pale); font: 500 18px Georgia, serif; letter-spacing: .08em; }
.access-features span { color: #77746e; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }

.gate-wrap { position: relative; isolation: isolate; }
.gate-wrap::before { content: ""; position: absolute; z-index: -2; inset: -65px; border-radius: 50%; opacity: .26; background: radial-gradient(circle, rgba(190,126,38,.24), transparent 66%); filter: blur(15px); }
.gate-orbit { position: absolute; z-index: -1; inset: -36px; border: 1px solid rgba(214,174,94,.08); border-radius: 50%; animation: orbit 34s linear infinite; }
.gate-orbit::before, .gate-orbit::after { content: ""; position: absolute; inset: 10%; border: 1px dashed rgba(214,174,94,.1); border-radius: 50%; }
.gate-orbit::after { inset: 23%; }
.gate-orbit span { position: absolute; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); background: #15120b; box-shadow: 0 0 12px rgba(214,174,94,.4); }
.gate-orbit span:nth-child(1) { top: 6%; left: 24%; }
.gate-orbit span:nth-child(2) { top: 65%; right: 1%; }
.gate-orbit span:nth-child(3) { bottom: 2%; left: 29%; }
.gate-card { position: relative; overflow: hidden; padding: 38px 38px 30px; border: 1px solid rgba(214,174,94,.28); background: linear-gradient(145deg, rgba(25,23,18,.96), rgba(8,9,8,.98) 48%, rgba(17,15,11,.96)); box-shadow: 0 35px 90px #000b, inset 0 1px rgba(255,255,255,.035), inset 0 0 70px #0008; }
.gate-card::before { content: ""; position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(118deg, transparent 0 25px, rgba(214,174,94,.08) 26px, transparent 27px 52px); }
.gate-card::after { content: ""; position: absolute; left: -60%; top: 0; width: 48%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-pale), transparent); animation: border-scan 4.5s ease-in-out infinite; }
.gate-card > * { position: relative; z-index: 1; }
.gate-corner { position: absolute; z-index: 2; width: 23px; height: 23px; border-color: var(--gold); opacity: .62; }
.gate-corner-a { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }
.gate-corner-b { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.gate-kicker { margin: 0 0 8px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.gate-card h2 { margin: 0; color: #e9e3d9; font: 500 34px/1.15 Georgia, "Times New Roman", serif; }
.gate-copy { margin: 13px 0 27px; color: #89857e; font-size: 12px; line-height: 1.65; }
.password-label { display: block; margin-bottom: 7px; color: #aaa49a; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.password-field { height: 52px; display: flex; align-items: center; border: 1px solid rgba(214,174,94,.26); background: #080908; transition: border-color .18s, box-shadow .18s; }
.password-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,174,94,.07), inset 0 0 20px rgba(214,174,94,.025); }
.password-field > svg { width: 18px; margin-left: 15px; fill: none; stroke: #81745b; stroke-width: 1.4; }
.password-field input { min-width: 0; width: 100%; height: 100%; padding: 0 12px; border: 0; outline: 0; color: #eee8dc; background: transparent; font: 16px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.password-field button { width: 48px; height: 100%; display: grid; place-items: center; flex: none; border: 0; color: #6f6b64; background: transparent; cursor: pointer; }
.password-field button:hover { color: var(--gold-pale); }
.password-field button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.gate-submit { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 13px; border: 1px solid #dfb968; color: #171209; background: linear-gradient(105deg, #c99c49, #e2bd70 48%, #ba8736); cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; box-shadow: 0 7px 22px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.35); transition: transform .17s, filter .17s, box-shadow .17s; }
.gate-submit:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 28px rgba(0,0,0,.48), 0 0 20px rgba(214,174,94,.1); }
.gate-submit:disabled { cursor: wait; filter: saturate(.5); }
.gate-submit svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .17s; }
.gate-submit:hover svg { transform: translateX(3px); }
.gate-message { min-height: 20px; margin: 10px 0 0; color: #9d968a; font-size: 10px; text-align: center; }
.has-error .password-field { border-color: #9a4c3d; box-shadow: 0 0 0 3px rgba(154,76,61,.08); animation: shake .32s ease; }
.has-error .gate-message { color: #d58a78; }
.is-loading .gate-submit svg { animation: arrow-wait .7s ease-in-out infinite alternate; }
.is-unlocked { border-color: rgba(105,210,155,.55); box-shadow: 0 35px 90px #000b, 0 0 45px rgba(105,210,155,.08); }
.is-unlocked .gate-message { color: #8ed4af; }
.landing-footer { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(214,174,94,.1); color: #5e5b56; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

@keyframes aurora-drift { to { transform: translate3d(90px, 50px, 0) scale(1.14); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes border-scan { 0%, 15% { left: -60%; opacity: 0; } 35%, 65% { opacity: 1; } 85%, 100% { left: 112%; opacity: 0; } }
@keyframes mote-rise { 0% { opacity: 0; transform: translateY(45px); } 18% { opacity: .62; } 78% { opacity: .2; } 100% { opacity: 0; transform: translate(22px, -170px); } }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes arrow-wait { to { transform: translateX(5px); } }

@media (max-width: 980px) {
  .landing-header, .landing-footer, .landing-main { width: min(100% - 36px, 720px); }
  .landing-header { min-height: 105px; }
  .access-stage { grid-template-columns: 1fr; gap: 70px; }
  .access-story { text-align: center; }
  .eyebrow { justify-content: center; }
  .access-story h1, .access-intro, .access-features { margin-inline: auto; }
  .gate-wrap { width: min(100%, 480px); margin-inline: auto; }
  .landing-main { padding-top: 60px; }
}

@media (max-width: 560px) {
  .landing-header, .landing-footer, .landing-main { width: min(100% - 24px, 720px); }
  .landing-brand { gap: 12px; }
  .landing-brand img { height: 40px; }
  .landing-brand span { padding-left: 13px; font-size: 19px; letter-spacing: .07em; }
  .landing-main { padding-top: 38px; }
  .access-story h1 { font-size: clamp(38px, 12.4vw, 58px); }
  .access-intro { margin-top: 22px; font-size: 12px; }
  .access-features div { padding: 14px 8px; }
  .access-features div + div { padding-left: 10px; }
  .access-features strong { font-size: 15px; }
  .access-features span { font-size: 7px; }
  .gate-card { padding: 30px 22px 24px; }
  .gate-orbit { inset: -20px; }
  .landing-footer { align-items: flex-start; flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .landing-motes { display: none; }
}