:root{
  --ink:#0F1020;
  --ink-2:#161838;
  --ink-3:#22255a;
  --gold:#FFC833;
  --cream:#FFF8EC;
  --violet:#5A1FB8;
  --pink:#FF5FA8;
  --muted:#a9a6c7;
  --display:"Unbounded","Noto Kufi Arabic",system-ui,sans-serif;
  --body:"Bricolage Grotesque","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,backdrop-filter .3s}
.top.scrolled{background:rgba(15,16,32,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em}
.logo img{width:38px;height:38px}
.menu{display:flex;gap:6px;align-items:center}
.menu a{text-decoration:none;font-weight:600;font-size:16px;padding:9px 14px;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
.menu a:hover,.menu a[aria-current]{color:var(--cream);background:rgba(255,255,255,.06)}
.menu .join{background:var(--gold);color:#1d1600}
.menu .join:hover{background:#ffd65c;color:#1d1600}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:120px 0 80px;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:980px;max-height:980px;background:radial-gradient(closest-side,rgba(90,31,184,.55),transparent 70%);z-index:-2;filter:blur(10px)}
.hero::after{content:"";position:absolute;inset:auto auto -30% -15%;width:55vw;height:55vw;background:radial-gradient(closest-side,rgba(255,200,51,.13),transparent 70%);z-index:-2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.6vw,96px);line-height:.98;letter-spacing:-.035em;margin:0 0 26px;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s;color:var(--gold)}
@keyframes rise{to{transform:none}}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:30em;margin:0 0 34px;opacity:0;animation:fade .8s .55s forwards}
.cta{display:flex;flex-wrap:wrap;gap:12px;opacity:0;animation:fade .8s .7s forwards}
@keyframes fade{to{opacity:1}}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;padding:16px 26px;border-radius:999px;border:2px solid transparent;transition:transform .2s,background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:#1d1600;box-shadow:0 10px 40px -10px rgba(255,200,51,.6)}
.btn-gold:hover{background:#ffd65c}
.btn-ghost{border-color:rgba(255,248,236,.22);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.btn svg{width:20px;height:20px}

/* honeycomb */
.hive{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:center;perspective:1200px}
.cell{position:absolute;width:var(--w);height:calc(var(--w) * 1.1547);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1);opacity:0;animation:pop .6s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.cell.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;text-align:center;transition:opacity 0s .35s}
.cell .face.back,.cell.flip .face.front{opacity:0}
.cell.flip .face.back{opacity:1}
.face.front{background:linear-gradient(160deg,var(--ink-3),var(--ink-2))}
.face.front::after{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(160deg,#1c1f48,#121433)}
.face.front i{position:relative;z-index:1;width:30%;height:30%;background:url(favicon.svg) center/contain no-repeat;opacity:.18}
.face.back{transform:rotateY(180deg);background:var(--cream);color:var(--ink);font-family:var(--display);font-weight:700;font-size:calc(var(--w) * .15);padding:0 10%;line-height:1.1}
.cell.odd .face.back{background:var(--gold);box-shadow:none}
.cell.odd.reveal{z-index:2}
.cell.odd.reveal .face.back{animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{from{filter:drop-shadow(0 0 0 rgba(255,200,51,0))}to{filter:brightness(1.08)}}
.cell.dim .face.back{opacity:.35}
.halo{position:absolute;width:calc(var(--w) * 1.5);height:calc(var(--w) * 1.5);border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,51,.55),transparent);pointer-events:none;opacity:0;transition:opacity .5s;translate:-50% -50%;z-index:1}
.halo.on{opacity:1}
.hive-caption{position:absolute;left:50%;bottom:-8px;translate:-50% 0;font-size:15px;color:var(--muted);white-space:nowrap;transition:opacity .4s}

/* sections */
section{padding:clamp(80px,11vw,150px) 0}
.kicker{color:var(--gold);font-weight:700;font-size:16px;margin:0 0 12px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.sub{color:var(--muted);max-width:34em;margin:0}

/* game feature */
.feature{position:relative;border-radius:36px;overflow:hidden;background:linear-gradient(135deg,#2a0e61 0%,#3f1597 45%,#5a1fb8 100%);padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;isolation:isolate}
.feature::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64l28 16v32M28 64L0 80v32' fill='none' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E");z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.feature .wordmark{font-family:var(--display);font-weight:800;font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.05em;margin:0 0 18px}
.feature p{color:#e3dcff;max-width:28em}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-weight:700;font-size:15px;margin-bottom:22px}
.badge b{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,200,51,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,200,51,0)}100%{box-shadow:0 0 0 0 rgba(255,200,51,0)}}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{background:rgba(15,16,32,.42);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px}
.mode h3{font-family:var(--display);font-size:19px;margin:0 0 4px}
.mode p{margin:0;font-size:16px;color:#d6ccff}

.games-head{margin-bottom:40px}
.next-game{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--ink-2);border:1px dashed rgba(255,248,236,.2);border-radius:28px;padding:28px 32px}
.next-game .badge{margin-bottom:10px}
.next-game h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);margin:0 0 6px}
.next-game p{margin:0;color:var(--muted);max-width:36em}
.mystery{width:96px;height:110px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--pink),var(--violet));display:grid;place-items:center;animation:wobble 3.5s ease-in-out infinite}
.mystery span{font-family:var(--display);font-weight:800;font-size:44px;color:var(--cream)}
@keyframes wobble{0%,100%{rotate:0deg}50%{rotate:8deg}}

/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid rgba(255,248,236,.12);padding:18px 0}
.faq details:last-child{border-bottom:1px solid rgba(255,248,236,.12)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,22px);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{color:var(--muted);margin:10px 0 0}
.riddle-hero .badge{margin-bottom:22px}
[lang=ar]{font-family:"Noto Kufi Arabic",var(--body)}

/* demo */
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.table{background:var(--ink-2);border:1px solid rgba(255,255,255,.07);border-radius:32px;padding:clamp(22px,3vw,36px)}
.table .q{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 6px}
.table .hint{color:var(--muted);font-size:16px;margin:0 0 22px}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.player{appearance:none;font:inherit;color:inherit;text-align:left;background:var(--ink-3);border:2px solid transparent;border-radius:18px;padding:14px 16px;cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.player:hover{border-color:rgba(255,248,236,.35);transform:translateY(-2px)}
.player .who{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.player .who i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;color:var(--ink);font-weight:800}
.player .clue{font-family:var(--display);font-size:18px;margin-top:10px}
.player[disabled]{cursor:default;transform:none}
.player.right{border-color:var(--gold);background:#3a2f12}
.player.wrong{border-color:var(--pink)}
.verdict{min-height:56px;margin:18px 0 0;font-weight:600}
.verdict b{color:var(--gold)}
.next{margin-top:6px}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{counter-increment:s;border-top:2px solid rgba(255,248,236,.15);padding-top:18px}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-weight:800;font-size:44px;color:var(--gold);line-height:1;margin-bottom:12px}
.steps h3{font-family:var(--display);font-size:20px;margin:0 0 6px}
.steps p{margin:0;color:var(--muted);font-size:16px}

/* community */
.community{text-align:center}
.community .sub{margin-inline:auto}
.discord{display:inline-flex;margin:34px 0 28px}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.socials a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:12px 18px;border-radius:999px;background:var(--ink-2);border:1px solid rgba(255,255,255,.08);font-weight:600;font-size:16px;transition:border-color .2s,background .2s}
.socials a:hover{border-color:var(--gold);background:#1d1f45}
.socials svg{width:18px;height:18px}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.07);padding:22px 0;white-space:nowrap}
.marquee div{display:inline-flex;gap:48px;animation:slide 40s linear infinite;font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);color:rgba(255,248,236,.22)}
.marquee span.on{color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}

/* reveal on scroll (one orchestrated entrance per block) */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal-up.in{opacity:1;transform:none}

footer{padding:50px 0 60px;border-top:1px solid rgba(255,255,255,.07);color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{text-decoration:none}
footer a:hover{color:var(--cream)}

@media (max-width:920px){
  .hero-grid,.feature,.demo{grid-template-columns:1fr}
  .hive{max-width:440px;order:-1;margin-top:-10px}
  .hero{padding-top:100px}
  .steps{grid-template-columns:1fr 1fr}
  .next-game{grid-template-columns:auto 1fr}
  .next-game .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:560px){
  body{font-size:17px}
  .menu a:not(.join){display:none}
  .modes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hive-caption{white-space:normal;text-align:center;width:90%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero h1 .line span{transform:none}
  .lede,.cta{opacity:1}
  .reveal-up{opacity:1;transform:none}
}