:root { --ink:#101720; --forest:#111d29; --cream:#e9e2d6; --paper:#f6f2ea; --gold:#c7a869; --coral:#7d2935; --blue:#2f4f70; --muted:#6e716f; --navy:#09111b; --slate:#17232f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header { height:92px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.18); position:absolute; z-index:10; width:100%; color:#fff; }
.brand { display:flex; align-items:center; gap:11px; font:800 19px/1 "Manrope",sans-serif; letter-spacing:-.7px; }
.brand>span>span { color:var(--gold); }
.brand-mark { width:35px; height:35px; fill:none; stroke:currentColor; stroke-width:2.1; }
.brand-mark path+path { stroke-width:1.6; }
nav { display:flex; gap:36px; font-size:14px; font-weight:600; }
nav a { position:relative; }
nav a:after { content:""; position:absolute; height:1px; background:var(--gold); left:0; right:100%; bottom:-6px; transition:.25s; }
nav a:hover:after { right:0; }
.header-cta { border:1px solid rgba(255,255,255,.45); border-radius:99px; padding:11px 18px; font-size:14px; font-weight:700; }
.header-cta span { margin-left:7px; color:var(--gold); }
.hero { min-height:880px; padding:155px clamp(24px,6vw,94px) 80px; display:grid; grid-template-columns:minmax(0,620px) 1fr; align-items:center; gap:40px; overflow:hidden; position:relative; isolation:isolate; color:#fff; background:var(--navy); }
.hero:before { content:""; position:absolute; inset:0; z-index:-2; background:url("assets/hero-okey-night.png") center/cover no-repeat; }
.hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,10,17,.99) 0%,rgba(7,13,22,.91) 34%,rgba(7,13,22,.36) 63%,rgba(7,13,22,.15)),linear-gradient(0deg,rgba(5,10,17,.72),transparent 46%); }
.hero-copy { max-width:670px; position:relative; z-index:2; }
.eyebrow,.section-label { text-transform:uppercase; letter-spacing:2.2px; font-weight:700; font-size:11px; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:28px; height:1px; background:var(--gold); display:inline-block; }
h1,h2,h3 { font-family:"Manrope",sans-serif; margin:0; letter-spacing:-.05em; line-height:.98; }
h1 { font-size:clamp(54px,6.5vw,96px); max-width:820px; }
h1 em,h2 em { font-family:Georgia,serif; font-weight:400; color:var(--gold); }
.hero-intro { color:#cad5d2; font-size:18px; line-height:1.65; max-width:560px; margin:30px 0 34px; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.button { display:inline-flex; gap:28px; align-items:center; justify-content:center; font-weight:700; padding:16px 22px; border-radius:4px; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(19,47,42,.14); }
.button-primary { color:var(--navy); background:#d4ba7c; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.button span { font-size:20px; }
.text-link { font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:5px; }
.text-link span { color:var(--gold); margin-left:8px; }
.hero-note { display:flex; align-items:center; gap:14px; margin-top:58px; font-size:12px; color:#9fb1ac; line-height:1.45; }
.hero-note strong { color:#fff; }
.avatars { display:flex; }
.avatars span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#263545; color:#e8d5ac; border:2px solid var(--navy); margin-left:-7px; font:700 10px "Manrope"; }
.avatars span:first-child { margin-left:0; }
.hero-game-lockup { position:absolute; right:clamp(28px,6vw,90px); bottom:48px; display:flex; align-items:center; gap:16px; filter:drop-shadow(0 15px 25px rgba(0,0,0,.65)); }
.hero-game-lockup span { font:700 10px Manrope; letter-spacing:.2em; text-transform:uppercase; color:#dfcda7; writing-mode:vertical-rl; transform:rotate(180deg); }
.hero-game-lockup img { width:190px; height:auto; }
.game-art { position:relative; height:570px; min-width:470px; }
.sun-disc { position:absolute; width:455px; height:455px; border-radius:50%; background:var(--gold); left:50%; top:46%; transform:translate(-50%,-50%); }
.orbit { position:absolute; border:1px solid rgba(19,47,42,.17); border-radius:50%; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-15deg); }
.orbit-one { width:560px; height:370px; }.orbit-two { width:510px; height:510px; }
.table-shadow { position:absolute; width:380px; height:140px; background:rgba(19,47,42,.22); filter:blur(30px); border-radius:50%; left:51%; bottom:45px; transform:translateX(-50%); }
.game-table { width:440px; height:440px; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-8deg); border-radius:50%; background:var(--forest); border:17px solid #f3ddb0; box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 22px 40px rgba(19,47,42,.28); }
.table-line { position:absolute; inset:25px; border:1px dashed rgba(255,255,255,.15); border-radius:50%; }
.center-emblem { position:absolute; inset:145px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; color:#fff; font:400 47px Georgia; opacity:.75; }
.tile { width:67px; height:94px; background:#fffaf0; border-radius:7px; box-shadow:0 8px 12px rgba(0,0,0,.18); position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:Manrope; }
.tile small { font-size:10px; }.tile strong { font-size:27px; line-height:1.1; }.tile-a { left:68px; top:76px; transform:rotate(-16deg); }.tile-b { left:138px; top:53px; transform:rotate(-4deg); }.tile-c { right:95px; bottom:69px; transform:rotate(21deg); }.tile-d { right:44px; bottom:104px; transform:rotate(32deg); }
.red { color:#d44436 }.blue { color:var(--blue) }.black { color:#26322f }.yellow { color:#d2961f }
.spark { color:#fff0b9; position:absolute; font-size:20px; }.spark-a { left:95px; bottom:103px; }.spark-b { right:75px; top:115px; font-size:13px; }
.floating-card { position:absolute; top:70px; right:-4px; background:var(--paper); border-radius:4px; padding:13px 18px; box-shadow:0 12px 25px rgba(19,47,42,.17); transform:rotate(5deg); display:flex; flex-direction:column; }
.floating-card span { font-size:8px; letter-spacing:2px; }.floating-card strong { font:800 22px Manrope; color:var(--coral); }
.manifesto { background:linear-gradient(120deg,#e6ded0,#f2ede4 70%); padding:120px clamp(24px,8vw,120px); display:grid; grid-template-columns:1fr 3fr; gap:40px; border-block:1px solid #d1c4af; }
.section-label { color:var(--coral); align-self:start; margin-top:10px; }
.manifesto h2 { font-size:clamp(39px,5vw,70px); }
.manifesto>div>p { color:var(--muted); max-width:690px; margin:34px 0 0 auto; font-size:18px; line-height:1.75; }
.champions { background:radial-gradient(circle at 85% 8%,#1c2b3b 0,transparent 31%),linear-gradient(145deg,#0a121c,#111d29 68%,#0b151f); color:#fff; padding:125px clamp(24px,6vw,92px); border-top:1px solid #293748; }
.champions-head { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:50px; margin-bottom:74px; }
.eyebrow.light { color:#d9e5e0; }.eyebrow.light span { background:var(--gold); }
.champions h2 { font-size:clamp(60px,7.5vw,110px); }.champions h2 em { color:#d0b273; }
.champions-head>p { color:#c9d6d2; font-size:18px; line-height:1.65; max-width:490px; padding-bottom:8px; }
.feature-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; }
.feature { min-height:500px; background:linear-gradient(150deg,#182532,#101a25); color:#f3ede2; padding:27px; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid rgba(199,168,105,.22); box-shadow:0 24px 55px rgba(0,0,0,.16); }
.feature-number { font:700 11px Manrope; color:#8f8066; letter-spacing:.14em; }
.feature-copy>p:first-child { color:#c9aa6d; text-transform:uppercase; letter-spacing:1.7px; font-weight:700; font-size:10px; }
.feature h3 { font-size:30px; line-height:1.1; margin:10px 0 15px; }
.feature-copy>p:last-child { color:#9eabb4; font-size:14px; margin:0; }
.feature:nth-child(2) { background:linear-gradient(150deg,#1b2936,#121c26); }
.feature-gold { background:linear-gradient(145deg,#35242a,#1c1720); border-color:rgba(194,141,112,.28); }.feature-gold .feature-copy>p:first-child,.feature-gold .feature-number { color:#c9a073; opacity:1; }.feature-gold .feature-copy>p:last-child { color:#b6a7a4; }
.feature-artwork { display:block; width:min(78%,280px); height:230px; object-fit:contain; margin:10px auto 5px; filter:drop-shadow(0 22px 28px rgba(0,0,0,.42)); }
.feature-gold .feature-artwork { filter:drop-shadow(0 22px 28px rgba(0,0,0,.38)); }
.mini-table { width:230px; height:180px; border-radius:50%; background:var(--forest); border:9px solid #e2c989; position:absolute; top:44px; right:-20px; transform:rotate(-12deg); box-shadow:0 15px 25px rgba(0,0,0,.12); }
.mini-table div { display:flex; position:absolute; left:40px; bottom:42px; }
.mini-table span { background:#fffaf0; margin:2px; border-radius:3px; padding:13px 8px; font:700 13px Manrope; color:var(--coral); }
.feature-icon { align-self:center; margin:auto; }.people-icon { width:150px; height:100px; position:relative; }.people-icon i { position:absolute; width:59px; height:59px; border:8px solid var(--forest); border-radius:50%; }.people-icon i:after { content:""; position:absolute; width:70px; height:35px; border:8px solid var(--forest); border-bottom:0; border-radius:50px 50px 0 0; top:52px; left:-14px; }.people-icon i:nth-child(2){left:47px;top:-20px;background:#f6f1e7;z-index:2}.people-icon i:nth-child(3){right:0}
.trophy-icon { font:100px Georgia; color:var(--ink); line-height:1; }
.cta { padding:120px 24px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(135deg,#f1ece2,#e3dacb); border-block:1px solid #cfc2ad; }
.cta .section-label { justify-content:center; }.cta h2 { font-size:clamp(54px,7vw,92px); margin:18px 0; }.cta>p:not(.section-label) { max-width:590px; margin:0 auto 32px; color:var(--muted); font-size:17px; }.button-dark { background:var(--navy); color:#fff; box-shadow:inset 0 0 0 1px #2d3945; }
.cta-decoration span { position:absolute; font:400 150px Georgia; color:transparent; -webkit-text-stroke:1px #e5dfd3; transform:rotate(14deg); }.cta-decoration span:first-child { left:8%; top:30px; }.cta-decoration span:last-child { right:9%; bottom:10px; transform:rotate(-15deg); }
footer { background:#070d14; color:#fff; padding:90px clamp(24px,6vw,92px) 28px; }
.footer-top { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; padding-bottom:80px; }.brand-light>span>span { color:var(--gold); }.footer-brand>p { color:#8e9aa2; font-size:31px; font-family:Georgia; line-height:1.2; margin-top:45px; }
.newsletter-wrap h2 { font-size:clamp(38px,4vw,58px); margin:18px 0 35px; }.newsletter-form { display:flex; border-bottom:1px solid #58716a; }.newsletter-form input { flex:1; min-width:0; border:0; color:#fff; outline:0; background:transparent; padding:16px 2px; font:16px "DM Sans"; }.newsletter-form input::placeholder { color:#91a39e; }.newsletter-form button { width:52px; border:0; background:transparent; color:var(--gold); cursor:pointer; font-size:25px; transition:transform .2s; }.newsletter-form button:hover { transform:translateX(4px); }.form-message { font-size:13px; color:var(--gold); min-height:20px; }
.footer-bottom { border-top:1px solid #25303a; padding-top:25px; display:flex; justify-content:space-between; color:#78858e; font-size:12px; }.footer-bottom p { margin:0; }.footer-bottom div { display:flex; gap:28px; }.footer-bottom a:hover { color:#fff; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:900px) { nav{display:none}.hero{grid-template-columns:1fr;padding-top:140px;background-position:62% center}.hero:after{background:linear-gradient(90deg,rgba(6,16,25,.97),rgba(6,16,25,.68)),linear-gradient(0deg,rgba(6,16,25,.6),transparent)}.hero-game-lockup{right:28px}.manifesto{grid-template-columns:1fr}.champions-head{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.feature{min-height:440px}.feature-artwork{height:230px}.footer-top{grid-template-columns:1fr}.cta-decoration{display:none} }
@media (max-width:560px) { .site-header{height:75px}.header-cta{font-size:0;padding:9px 13px}.header-cta span{font-size:17px;margin:0}.hero{min-height:930px;padding-top:118px;padding-bottom:145px;background-position:66% center;align-items:start}.hero:after{background:linear-gradient(180deg,rgba(6,16,25,.94) 0%,rgba(6,16,25,.81) 54%,rgba(6,16,25,.25) 100%)}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-game-lockup{right:23px;bottom:24px}.hero-game-lockup img{width:130px}.hero-game-lockup span{display:none}.manifesto,.champions,.cta{padding-top:85px;padding-bottom:85px}.feature-artwork{height:205px}.footer-top{gap:45px}.footer-bottom{gap:15px;flex-direction:column}.footer-bottom div{flex-direction:column;gap:8px} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}}