/* ============================================================
   NYTIUM — studio site design system
   Onyx + metallic champagne, Source Serif 4 (display + reading),
   JetBrains Mono (chrome, labels, numbers). Hairlines, not boxes.
   Serif for the words that matter, mono for structure, gold only
   where the eye should land. No em dashes in copy, ever.
   ============================================================ */
:root{
  --onyx:#0a0b0d; --graphite:#15171c; --graphite-2:#1f222a;
  --bone:#f3eee2; --ash:#9a958a; --ash-dim:#6b675e;
  --champagne:#d2aa66; --champagne-bright:#f0d49a; --champagne-dim:#937a42;
  --gold-grad:linear-gradient(170deg,#f2d79e 0%,#d2a866 48%,#a87c34 100%);
  --hairline:#2d3038; --hairline-soft:#212429;
  --felt:#1c5a3a; --felt-lit:#2f8157;
  --win:#85cf6f; --lose:#e06a4b;
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--onyx); color:var(--bone);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
::selection{background:var(--champagne);color:#000}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ── type ── */
.kicker{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--champagne)}
.kicker.dim{color:var(--ash-dim)}
h1{font-weight:600;font-size:clamp(44px,7vw,84px);line-height:1.02;letter-spacing:-.01em}
h2{font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.1}
h3{font-weight:600;font-size:22px}
.lead{font-size:clamp(18px,2vw,22px);color:var(--ash);line-height:1.6;max-width:54ch}
.small{font-size:14px;color:var(--ash)}
.label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash-dim)}

/* ── chrome ── */
header.nav{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .mark{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:18px;
  letter-spacing:.4em;text-transform:uppercase;color:var(--bone)}
.brand .mark .n{color:var(--champagne)}
.nav-links{display:flex;gap:30px}
.nav-links a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);transition:color .3s}
.nav-links a:hover{color:var(--champagne)}

/* ── buttons ── */
.btn-gold{display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:#231a09;background:var(--gold-grad);
  padding:15px 30px;border-radius:9px;border:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 12px rgba(0,0,0,.45);
  transition:filter .25s}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);border:1px solid var(--ash-dim);
  padding:14px 26px;border-radius:9px;transition:border-color .25s,color .25s}
.btn-ghost:hover{border-color:var(--champagne);color:var(--champagne)}

/* ── hairline dividers + section rhythm ── */
.rule{height:1px;background:var(--hairline);border:0}
.rule-gold{width:64px;height:1px;background:var(--champagne);border:0}
section{padding:96px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:40px}
.sec-head .num{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;color:var(--champagne)}

/* ── cards / surfaces ── */
.surface{background:var(--graphite);border:1px solid var(--hairline);border-radius:16px}
.meta-list{list-style:none}
.meta-list li{display:flex;justify-content:space-between;gap:18px;padding:18px 2px;
  border-bottom:1px solid var(--hairline-soft);font-family:"JetBrains Mono",monospace;
  font-size:12px;letter-spacing:.08em}
.meta-list li:first-child{border-top:1px solid var(--hairline)}
.meta-list .k{color:var(--ash-dim);text-transform:uppercase;letter-spacing:.16em;font-size:10px}
.meta-list .v{color:var(--bone);text-align:right}

/* ── footer ── */
footer{border-top:1px solid var(--hairline);padding:44px 0 60px;margin-top:40px}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
.foot-links{display:flex;gap:26px}
.foot-links a{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);transition:color .3s}
.foot-links a:hover{color:var(--champagne)}
.foot-note{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--ash-dim)}

/* ── prose pages (privacy, support) ── */
.prose{max-width:680px;margin:0 auto;padding:64px 28px 100px}
.prose h1{font-size:clamp(34px,5vw,48px);margin:14px 0 6px}
.prose h2{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--champagne);margin:40px 0 12px}
.prose p{margin-bottom:16px;color:#e7e1d3}
.prose a{color:var(--champagne)}
.prose .dim{color:var(--ash);font-size:14px}

@media(max-width:640px){
  section{padding:64px 0}
  .nav-links{gap:18px}
}


/* ── motion ── */
@media (prefers-reduced-motion: no-preference) {
  body.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
  body.js .reveal.in{opacity:1;transform:none}
  .reveal-d1{transition-delay:.12s}
  .reveal-d2{transition-delay:.24s}

  .float-frame{animation:floaty 7s ease-in-out infinite;will-change:transform}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-12px) rotate(-1deg)}}

  .brand .n{background:linear-gradient(110deg,#d2aa66 35%,#f6e3b0 50%,#d2aa66 65%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;animation:shimmer 5.2s ease-in-out infinite}
  @keyframes shimmer{0%,72%{background-position:120% 0}88%{background-position:-20% 0}100%{background-position:-20% 0}}

  .slot-pulse{animation:slotpulse 3.4s ease-in-out infinite}
  @keyframes slotpulse{0%,100%{border-color:var(--hairline);color:var(--ash-dim)}50%{border-color:var(--champagne-dim);color:var(--ash)}}

  .rule-gold{position:relative;overflow:hidden}
  .rule-gold::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,#f6e3b0,transparent);
    transform:translateX(-110%);animation:sweep 4.6s ease-in-out infinite}
  @keyframes sweep{0%,60%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
}