body { background: var(--black); color: var(--parchment); font-family: 'Cormorant Garamond', serif; font-weight: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; text-align: center; overflow: hidden; cursor: default; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
    body::before { opacity: 0.04; }
    .back { position: fixed; top: calc(1.5rem + env(safe-area-inset-top)); left: 5vw; font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color 0.3s ease; opacity: 1; }
    .back:hover, .back:active { color: var(--gold); }
    .content { position: relative; z-index: 2; padding: 5rem 6vw 4rem; width: 100%; max-width: 44rem; opacity: 0; animation: fadeInUp 1.2s ease forwards 0.4s; }
    .eyebrow { font-size: 0.6rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--gold); opacity: 0.7; margin-bottom: 2.5rem; }
    .ring-wrap { position: relative; width: min(180px,45vw); height: min(180px,45vw); margin: 0 auto 3rem; }
    .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(212,168,67,0.38); will-change: transform; animation: ring-spin 28s linear infinite; }
    .ring:nth-child(2) { inset: 18px; border-color: rgba(212,168,67,0.28); animation-direction: reverse; animation-duration: 20s; }
    @keyframes ring-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .ring-dot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .ring-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); will-change: transform, box-shadow; animation: dot-pulse 4s ease-in-out infinite; }
    @keyframes dot-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,168,67,0);transform:scale(1)} 50%{box-shadow:0 0 18px 5px rgba(212,168,67,0.25);transform:scale(1.4)} }
    .headline { font-size: clamp(1.5rem,4vw,3rem); font-weight: 300; color: var(--cream); line-height: 1.4; margin-bottom: 1.5rem; }
    .headline em { font-style: italic; color: var(--gold-light); }
    .sub { font-size: clamp(1rem,1.8vw,1.15rem); font-style: italic; color: var(--mist); line-height: 1.85; max-width: 34rem; margin: 0 auto 3rem; }
    .enter-btn { display: inline-block; padding: 1.1rem 3rem; border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 0.72rem; letter-spacing: 0.45em; text-transform: uppercase; position: relative; overflow: hidden; transition: color 0.5s ease; }
    .enter-btn::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform 0.5s ease; }
    .enter-btn span { position: relative; z-index: 1; }
    .enter-btn:hover, .enter-btn:active { color: var(--black); }
    .enter-btn:hover::before, .enter-btn:active::before { transform: translateX(0); }
    .footnote { position: fixed; bottom: calc(2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(168,159,140,0.3); white-space: nowrap; opacity: 0; animation: fadeIn 1s ease forwards 1.5s; }
    @media (max-width: 480px) { .eyebrow { font-size: 0.55rem; letter-spacing: 0.4em; margin-bottom: 1.5rem; } .ring-wrap { margin-bottom: 2rem; } .content { padding: 4rem 5vw 3rem; } .enter-btn { padding: 1rem 2rem; font-size: 0.68rem; letter-spacing: 0.3em; } }
    @media (max-height: 500px) { .ring-wrap { display: none; } .content { padding: 2rem 5vw; } }

    /* ─── NAV BAR ─── */
    .gateway-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.2rem 5vw;
      padding-top: calc(1.2rem + env(safe-area-inset-top));
      background: linear-gradient(to bottom, rgba(12,11,9,0.9), transparent);
      opacity: 1;
    }
    .gateway-nav .nav-logo {
      font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase;
      color: var(--mist); text-decoration: none; transition: color 0.3s ease;
    }
    .gateway-nav .nav-logo:hover { color: var(--gold); }
    .gateway-nav .hamburger { position: relative; top: auto; right: auto; z-index: auto; }