:root {
  --navy:#031333; --navy-2:#071d46; --cream:#fff1ca; --white:#fffaf0;
  --coral:#ff5a2d; --cyan:#05c8ef; --muted:#9fb3d5;
  --line:rgba(113,155,220,.2); --panel:rgba(8,31,72,.72);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--white); background:var(--navy); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-2; opacity:.22; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
body::after { content:""; position:fixed; width:700px; height:700px; right:-260px; top:100px; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(5,200,239,.13),transparent 65%); }
a { color:inherit; }
.shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.nav { height:84px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.logo { display:flex; gap:11px; align-items:center; color:var(--cream); font-weight:900; text-decoration:none; letter-spacing:-.035em; }
.logo img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(5,200,239,.14)); }
.logo span { display:none; }
nav { display:flex; align-items:center; gap:30px; }
nav a { color:#bfd0ec; font-size:12px; font-weight:800; text-decoration:none; letter-spacing:.02em; }
nav a:hover { color:white; }
.nav-cta { padding:12px 16px; color:var(--navy)!important; background:var(--cream); border-radius:10px; box-shadow:4px 4px 0 var(--coral); }
.hero { min-height:750px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:72px; padding-block:78px 96px; }
.kicker { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.kicker span { width:8px; height:8px; border-radius:50%; background:var(--coral); box-shadow:16px 0 0 var(--cyan); margin-right:16px; }
h1,h2 { margin:0; font-weight:900; letter-spacing:-.07em; line-height:.88; }
h1 { max-width:700px; font-size:clamp(64px,7.5vw,104px); }
h1 em { color:var(--cyan); font-style:normal; text-shadow:4px 4px 0 rgba(255,90,45,.85); }
.hero-lede { max-width:600px; color:#b3c4df; font-size:18px; line-height:1.65; margin:31px 0; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:38px; padding:15px 19px; border:1px solid transparent; border-radius:10px; font-size:12px; font-weight:900; text-decoration:none; transition:.18s ease; }
.button:hover { transform:translate(-2px,-2px); }
.primary { color:var(--navy); background:var(--cream); box-shadow:5px 5px 0 var(--coral); }
.secondary { color:var(--cream); border-color:var(--line); background:rgba(5,200,239,.06); }
.proof { display:flex; gap:23px; margin-top:34px; color:#7f97be; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.proof i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--coral); }
.brand-stage { position:relative; min-height:590px; display:grid; place-items:center; }
.hero-logo { position:absolute; width:min(88%,510px); top:-25px; right:-20px; z-index:1; filter:drop-shadow(0 38px 55px rgba(0,0,0,.4)); animation:float 5s ease-in-out infinite; }
.orbit { position:absolute; border:1px solid rgba(5,200,239,.28); border-radius:50%; }
.orbit::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:var(--coral); box-shadow:0 0 22px var(--coral); }
.orbit-one { width:480px; height:480px; top:-5px; right:-24px; transform:rotate(18deg); }.orbit-one::after { left:30px; top:110px; }
.orbit-two { width:350px; height:350px; top:62px; right:40px; transform:rotate(-25deg); }.orbit-two::after { right:-6px; bottom:120px; background:var(--cyan); }
@keyframes float { 50% { transform:translateY(-10px) rotate(1deg); } }
.terminal { position:absolute; z-index:2; width:86%; left:-15px; bottom:-6px; overflow:hidden; border:1px solid rgba(5,200,239,.25); border-radius:15px; background:rgba(2,15,43,.94); color:#dce7fb; box-shadow:0 28px 80px rgba(0,0,0,.45); transform:rotate(-1.3deg); backdrop-filter:blur(16px); }
.terminal-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); }
.terminal-bar span { width:8px; height:8px; border-radius:50%; background:var(--coral); }.terminal-bar span:nth-child(2) { background:var(--cream); }.terminal-bar span:nth-child(3) { background:var(--cyan); }
.terminal-bar b { margin-left:auto; color:#708bb5; font:700 9px ui-monospace,monospace; }
pre { margin:0; padding:22px 26px; font:12px/1.72 ui-monospace,SFMono-Regular,Menlo,monospace; overflow:auto; }.key{color:var(--cyan)}.value{color:var(--cream)}.number{color:var(--coral)}.dim{color:#607ba7}
.response { display:flex; gap:22px; padding:13px 16px; background:rgba(5,200,239,.06); color:#6f89b1; font:9px ui-monospace,monospace; }.response span:first-child{color:var(--cyan)}
.marquee { overflow:hidden; padding:18px 0; color:var(--navy); background:var(--cyan); border-block:3px solid var(--navy); white-space:nowrap; font-size:10px; font-weight:950; letter-spacing:.15em; transform:rotate(-.5deg) scale(1.01); }
.marquee div { width:max-content; min-width:100%; text-align:center; }.marquee b { color:var(--coral); padding:0 23px; }
.section { padding-block:130px; }
.protocol { display:grid; grid-template-columns:.76fr 1.24fr; gap:92px; }
h2 { font-size:clamp(52px,6vw,78px); }
.section-intro>p:last-child,.demo-copy>p { color:#9eb0ce; font-size:15px; line-height:1.75; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feature-grid article { position:relative; min-height:230px; padding:27px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,rgba(11,42,91,.72),rgba(4,21,53,.72)); }
.feature-grid article::after { content:""; position:absolute; width:90px; height:90px; right:-46px; bottom:-46px; border:2px solid var(--cyan); border-radius:50%; opacity:.18; }
.feature-grid span { color:var(--coral); font:900 10px ui-monospace,monospace; }.feature-grid h3 { margin:42px 0 10px; color:var(--cream); font-size:21px; }.feature-grid p { color:#91a6c8; font-size:12px; line-height:1.65; }
.demo-section { position:relative; padding:115px 0; color:var(--navy); background:var(--cream); overflow:hidden; scroll-margin-top:30px; }
.demo-section::after { content:""; position:absolute; width:420px; height:420px; right:-210px; top:-210px; border:45px solid var(--coral); border-radius:50%; opacity:.15; }
.demo-heading { position:relative; z-index:1; display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:end; margin-bottom:60px; }.demo-heading h2{color:var(--navy)}.demo-heading .kicker{color:#087e9a}.demo-heading>p{max-width:520px;margin:0;color:#53617a;font-size:16px;line-height:1.75}
.game-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.game-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:2px solid var(--navy);border-radius:18px;background:#fff8df;box-shadow:8px 8px 0 var(--navy);transition:.18s ease}.game-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--navy)}
.game-art{height:220px;display:grid;place-items:center;background:var(--navy);overflow:hidden}.game-body{display:flex;flex:1;flex-direction:column;padding:25px}.game-number{margin:0 0 24px;color:#6e7890;font:900 9px ui-monospace,monospace;letter-spacing:.09em}.game-body h3{margin:0;color:var(--navy);font-size:29px;letter-spacing:-.045em}.game-body>p:not(.game-number){min-height:75px;margin:12px 0 22px;color:#586279;font-size:12px;line-height:1.65}.game-body a{display:flex;justify-content:space-between;margin-top:auto;padding-top:17px;border-top:1px solid #d9d1b5;color:var(--navy);font-size:12px;font-weight:950;text-decoration:none}.game-body a:hover{color:#087e9a}
.tic-art{grid-template:repeat(3,54px)/repeat(3,54px);gap:5px;transform:rotate(-3deg)}.tic-art>*{display:grid;width:54px;height:54px;place-items:center;margin:0;border-radius:7px;background:#fff8df;font:900 37px/1 system-ui;font-style:normal}.tic-art b{color:var(--cyan)}.tic-art em{color:var(--coral)}
.card-art{position:relative}.card-art>span{position:absolute;display:flex;width:112px;height:155px;flex-direction:column;padding:14px;border-radius:10px;background:#fff8df;color:var(--navy);font:900 31px/1 Georgia,serif;box-shadow:0 13px 28px rgba(0,0,0,.3);transform:translateX(-35px) rotate(-10deg)}.card-art>span+span{color:var(--coral);transform:translateX(42px) rotate(9deg)}.card-art small{margin:auto;font-size:44px}
.ludo-art{position:relative;grid-template:repeat(2,56px)/repeat(2,56px);gap:30px}.ludo-art span{width:46px;height:46px;border:6px solid #fff8df;border-radius:50%;background:var(--coral);box-shadow:0 8px 0 rgba(0,0,0,.25)}.ludo-art span:nth-child(even){background:var(--cyan)}.ludo-art i{position:absolute;display:grid;width:62px;height:62px;place-items:center;border-radius:13px;background:var(--cream);color:var(--navy);font:900 28px system-ui;box-shadow:5px 5px 0 var(--coral);transform:rotate(8deg)}
.checkers-art{grid-template:repeat(2,55px)/repeat(2,55px);gap:18px;background:repeating-conic-gradient(#16466a 0 25%,var(--cream) 0 50%) 50%/70px 70px}.checkers-art span{width:48px;height:48px;border:5px solid var(--navy);border-radius:50%;background:var(--coral);box-shadow:0 7px 0 rgba(0,0,0,.25)}.checkers-art span:nth-child(even){background:var(--cyan)}.clash-art{display:flex;gap:10px}.clash-art span{display:grid;width:72px;height:105px;place-items:center;border:4px solid var(--cream);border-radius:10px;background:var(--coral);color:var(--navy);font-size:25px;font-weight:950;transform:rotate(-8deg)}.clash-art span:nth-child(2){background:#ffd24d;transform:translateY(-6px)}.clash-art span:nth-child(3){color:var(--cream);background:conic-gradient(var(--coral),#ffd24d,#58d690,var(--cyan),var(--coral));transform:rotate(8deg)}
.demo-note{position:relative;z-index:1;margin:38px 0 0;color:#687287;font-size:11px;text-align:center}.demo-note b{color:var(--navy)}
.text-link { color:var(--cyan); font-size:12px; font-weight:850; text-underline-offset:4px; }
.cta { display:grid; grid-template-columns:180px 1fr auto; align-items:end; gap:45px; }.cta h2 { max-width:700px; }.cta>div { display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.footer { display:flex; justify-content:space-between; align-items:center; min-height:125px; border-top:1px solid var(--line); color:#7289ae; font-size:11px; }.footer div{display:flex;gap:20px}
.api-page { padding:85px 0 125px; }.api-hero { max-width:840px; margin-bottom:75px; }.api-hero h1 { color:var(--cream); font-size:clamp(58px,7vw,86px); }.api-hero p { color:#9fb2d2; font-size:17px; line-height:1.7; }
.endpoints { border-top:1px solid var(--line); }.endpoint { display:grid; grid-template-columns:90px 1fr 1fr; gap:20px; padding:23px 18px; border-bottom:1px solid var(--line); align-items:start; transition:.15s; }.endpoint:hover{background:rgba(5,200,239,.05)}
.method { width:max-content; padding:6px 8px; border-radius:6px; color:var(--navy); background:var(--cyan); font:900 9px ui-monospace,monospace; }.endpoint code{color:var(--cream);font-size:12px}.endpoint p{margin:0;color:#8fa4c6;font-size:12px}
.api-callout { display:flex; justify-content:space-between; gap:40px; margin-top:60px; padding:30px; border:1px solid rgba(255,90,45,.38); border-radius:16px; background:linear-gradient(120deg,rgba(255,90,45,.18),rgba(5,200,239,.1)); }.api-callout p{margin:5px 0 0;color:#9fb3d3}.api-callout .button{color:var(--navy);background:var(--cream);box-shadow:4px 4px 0 var(--coral)}
@media(max-width:900px){nav>a:not(.nav-cta){display:none}.hero,.protocol,.demo-heading{grid-template-columns:1fr}.hero{gap:35px}.brand-stage{min-height:620px}.protocol,.demo-heading{gap:40px}.game-grid{grid-template-columns:1fr 1fr}.cta{grid-template-columns:1fr}.endpoint{grid-template-columns:70px 1fr}.endpoint p{grid-column:2}.api-callout{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.shell{width:calc(100% - 26px)}.nav{height:70px}.logo img{width:38px;height:38px}.hero{padding-block:55px 75px;min-height:auto}.hero-actions{flex-direction:column}.button{width:100%}.proof{flex-wrap:wrap}.brand-stage{min-height:470px}.hero-logo{width:105%;right:-10%;top:0}.orbit-one{width:390px;height:390px;right:-85px}.orbit-two{width:270px;height:270px}.terminal{width:100%;left:0;bottom:0}.terminal pre{font-size:10px;padding:17px}.section{padding-block:88px}.feature-grid,.game-grid{grid-template-columns:1fr}.game-ludo{grid-column:auto}.demo-section{padding:80px 0}.game-art{height:195px}.footer{align-items:flex-start;flex-direction:column;padding:28px 0;gap:20px}.api-callout{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-logo{animation:none}.button{transition:none}}