:root{
  --black:#080608;
  --black-soft:#110c10;
  --panel:#1a0c14;
  --magenta:#b20f61;
  --magenta-dark:#6f0a3d;
  --gold:#e0bc67;
  --gold-soft:#f4daa0;
  --cream:#fff7e8;
  --muted:#c8b9c1;
  --line:rgba(224,188,103,.28);
  --shell:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--black);color:var(--cream);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.68}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.08}
h1{max-width:16ch;margin-bottom:28px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.65rem,6.2vw,5.8rem);font-weight:500;letter-spacing:-.045em}
h2{margin-bottom:22px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.6rem);font-weight:500;letter-spacing:-.025em}
h3{font-size:1.08rem}
p{max-width:69ch;margin-bottom:1em}
.shell{width:min(100%,var(--shell));margin-inline:auto;padding-inline:28px}
.eyebrow{margin-bottom:18px;color:var(--gold);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.section{padding:clamp(76px,10vw,132px) 0}
.section-heading{max-width:490px}
.section-heading--wide{max-width:760px}

.site-header{position:relative;z-index:10;border-bottom:1px solid var(--line);background:rgba(8,6,8,.96)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:96px}
.brand{display:flex;align-items:center;gap:14px;color:var(--gold-soft);font-family:Georgia,"Times New Roman",serif;font-size:1.15rem;text-decoration:none}
.brand img{width:58px;height:58px;flex:none;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .2s ease}
.nav a:hover,.nav a:focus-visible{color:var(--gold-soft)}

.hero{position:relative;isolation:isolate;padding:clamp(78px,11vw,148px) 0;background:radial-gradient(circle at 86% 18%,rgba(178,15,97,.24),transparent 35%),linear-gradient(145deg,#080608 0%,#130910 56%,#080608 100%)}
.hero::before{position:absolute;z-index:-1;inset:0;content:"";background-image:linear-gradient(rgba(224,188,103,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(224,188,103,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);gap:clamp(48px,9vw,118px);align-items:end}
.hero-copy>p:not(.eyebrow){color:#ded2d8}
.hero-lead{font-size:clamp(1.06rem,2vw,1.28rem)}
.hero-copy a,.activation-footer a{color:var(--gold-soft);font-weight:700}
.hero-note{padding:30px;border:1px solid var(--line);border-radius:2px;background:linear-gradient(145deg,rgba(178,15,97,.28),rgba(22,9,16,.8));box-shadow:0 28px 80px rgba(0,0,0,.34)}
.hero-note__number{display:block;margin-bottom:36px;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:3.8rem;line-height:1}
.hero-note h2{font-family:Arial,Helvetica,sans-serif;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.hero-note ul{margin:0;padding:0;list-style:none}
.hero-note li{padding:13px 0;border-top:1px solid var(--line);color:#dfd3d9}

.sources{background:linear-gradient(180deg,var(--panel),#120a10)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(52px,10vw,130px);align-items:start}
.section-heading p:last-child{color:var(--muted)}
.source-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.source-list li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:17px 0;border-top:1px solid var(--line)}
.source-list span{color:var(--gold);font-size:.74rem;font-weight:700;letter-spacing:.08em}

.activation{background:var(--black)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:44px 0 40px;padding:1px;background:var(--line);list-style:none}
.steps li{min-height:190px;padding:24px;background:var(--black-soft)}
.steps span{display:block;margin-bottom:42px;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:2.2rem;line-height:1}
.steps p{margin:0;color:#e8dfe3;font-size:.96rem;line-height:1.45}
.activation-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;padding-top:8px}
.activation-footer p{margin:0;color:var(--muted)}

.errors{background:linear-gradient(135deg,#5d082f 0%,#9e0d55 62%,#6d0738 100%)}
.errors .eyebrow{color:var(--gold-soft)}
.errors .section-heading p{color:#f1dce7}
.error-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:44px}
.error-grid article{grid-column:span 2;min-height:220px;padding:24px;border:1px solid rgba(255,247,232,.24);background:rgba(18,4,11,.26);backdrop-filter:blur(6px)}
.error-grid article:nth-child(4){grid-column:2/span 2}
.error-grid article:nth-child(5){grid-column:4/span 2}
.error-grid span{display:block;margin-bottom:48px;color:var(--gold-soft);font-size:.75rem;font-weight:700;letter-spacing:.1em}
.error-grid h3{margin-bottom:10px}
.error-grid p{margin:0;color:#f3dee9;font-size:.94rem;line-height:1.5}

.audience{background:#10090e}
.audience-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(52px,10vw,140px);align-items:start}
.audience-title h2{max-width:14ch}
.audience-copy{padding-top:40px;border-top:1px solid var(--line)}
.audience-copy p{color:var(--muted);font-size:1.05rem}
.audience-copy strong{color:var(--cream)}

.games{border-top:1px solid var(--line);background:radial-gradient(circle at 10% 30%,rgba(178,15,97,.18),transparent 38%),var(--black)}
.games-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px}
.games-head h2{margin-bottom:0}
.carousel-controls{display:flex;gap:10px}
.carousel-button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--gold-soft);cursor:pointer;transition:background .2s ease,color .2s ease}
.carousel-button:hover,.carousel-button:focus-visible{background:var(--gold);color:var(--black)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,19vw,220px);gap:18px;overflow-x:auto;padding:3px 3px 22px;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-color:var(--gold) #24101b;scrollbar-width:thin}
.carousel:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.carousel figure{aspect-ratio:1/1;margin:0;overflow:hidden;border:1px solid var(--line);background:#160b12;scroll-snap-align:start}
.carousel img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease}
.carousel figure:hover img{transform:scale(1.035)}

.site-footer{padding:48px 0;border-top:1px solid var(--line);background:#050405}
.footer-row{display:flex;align-items:end;justify-content:space-between;gap:30px}
.footer-brand{margin-bottom:5px;color:var(--gold-soft);font-family:Georgia,"Times New Roman",serif;font-size:1.2rem}
.site-footer p{color:#9e8c95}
.footer-domain{margin:0;font-size:.84rem;letter-spacing:.06em}

@media (max-width:900px){
  .hero-grid,.split,.audience-grid{grid-template-columns:1fr}
  .hero-note{max-width:520px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .error-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .error-grid article,.error-grid article:nth-child(4),.error-grid article:nth-child(5){grid-column:auto}
  .error-grid article:last-child{grid-column:1/-1}
  .audience-copy{padding-top:0}
}

@media (max-width:680px){
  body{font-size:16px}
  .shell{padding-inline:20px}
  .header-row{min-height:82px}
  .brand img{width:50px;height:50px}
  .brand span{font-size:1rem}
  .nav{display:none}
  .hero{padding-block:70px 82px}
  h1{font-size:clamp(2.5rem,13vw,4.4rem)}
  .section{padding-block:74px}
  .steps{grid-template-columns:1fr}
  .steps li{min-height:0}
  .steps span{margin-bottom:22px}
  .activation-footer{grid-template-columns:1fr}
  .error-grid{grid-template-columns:1fr}
  .error-grid article,.error-grid article:last-child{grid-column:auto;min-height:0}
  .error-grid span{margin-bottom:26px}
  .games-head{align-items:center}
  .carousel{grid-auto-columns:min(72vw,230px);gap:14px}
  .footer-row{align-items:flex-start;flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}
