:root{
  --paper:#F3F5FB; --surface:#FFFFFF; --ink:#141B34; --muted:#56607E; --line:#DCE1EE;
  --cobalt:#3346F0; --cobalt-soft:#E6E9FF; --on-cobalt:#FFFFFF;
  --sun:#FFB81C; --sun-soft:#FFF3D6; --tile:#E9ECF6;
  --hero:#10162E; --hero-2:#1A2247; --hero-fg:#F3F5FB; --hero-muted:#A7B0D2; --hero-line:#2A3463;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arabic:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;
  --pad:clamp(16px,4.5vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0D1122; --surface:#161B31; --ink:#EDF0FA; --muted:#9AA3C2; --line:#283050;
  --cobalt:#7483FF; --cobalt-soft:#1E2550; --on-cobalt:#0D1122;
  --sun:#FFC94D; --sun-soft:#3A2F14; --tile:#1F2542;
  --hero:#080B19; --hero-2:#141A38; --hero-line:#252E58; color-scheme:dark;}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.6 var(--body)}
body[dir="rtl"]{font-family:var(--arabic)}
body[dir="rtl"] .d,body[dir="rtl"] .num,body[dir="rtl"] h3{font-family:var(--arabic);font-weight:700;letter-spacing:0}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:inherit}
button,input,textarea{font:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.d{font-family:var(--display);letter-spacing:-.015em}
.eyebrow{font:700 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:9;background:var(--sun);color:#1b1400;padding:8px 12px;border-radius:8px}
.wrap{max-width:1200px;margin-inline:auto}

/* header / hero */
.hero-wrap{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,var(--hero-2) 0%,var(--hero) 60%);color:var(--hero-fg)}
.hero-wrap::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(167,176,210,.16) 1px,transparent 1.5px);background-size:26px 26px;mask-image:linear-gradient(to bottom,#000 40%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);pointer-events:none}
.hero-wrap > *{position:relative}
.s-nav{display:flex;align-items:center;gap:14px 22px;padding:16px var(--pad);flex-wrap:wrap}
.logo{font:800 20px/1 var(--display);letter-spacing:.02em;text-decoration:none}
.logo b{color:var(--sun)}
.s-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-weight:600;font-size:14px;color:var(--hero-muted)}
.s-nav ul a{text-decoration:none;padding-block:4px}
.s-nav ul a:hover{color:var(--hero-fg)}
.s-nav ul a[aria-current="page"]{color:var(--hero-fg);box-shadow:inset 0 -2px 0 var(--sun)}
.s-nav .right{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;border:1px solid var(--hero-line);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;color:var(--hero-muted)}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;display:grid!important;gap:0!important;min-width:150px;background:var(--hero-2);border:1px solid var(--hero-line);border-radius:12px;padding:6px!important;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.lang ul a{display:block;padding:7px 10px!important;border-radius:8px;color:var(--hero-fg)}
.lang ul a:hover,.lang ul a[aria-current="true"]{background:var(--hero-line)}
.navcta{background:var(--sun);color:#1b1400;border-radius:10px;padding:8px 13px;font-weight:800;font-size:13px;text-decoration:none}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,5vw,64px) var(--pad) clamp(28px,5vw,56px)}
.tagline{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hero-line);border-radius:999px;padding:6px 12px 6px 8px;font-size:12.5px;font-weight:700;color:var(--hero-muted)}
.tagline i{width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 4px rgba(61,220,151,.18)}
.hero h1{font-size:clamp(32px,5vw,60px);line-height:1.04;margin:18px 0 18px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p.sub{font-size:clamp(16px,1.6vw,18px);color:var(--hero-muted);max-width:52ch;margin:0 0 26px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:12px;font-weight:800;font-size:14px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.sun{background:var(--sun);color:#1b1400}
.btn.line{border-color:var(--hero-line);color:var(--hero-fg)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.soft{background:transparent;border-color:var(--hero-line);color:var(--hero-fg)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border-top:1px solid var(--hero-line)}
.facts div{padding:14px 12px 0 0}
.num{font:800 clamp(22px,2.6vw,30px)/1 var(--display);color:var(--hero-fg);font-variant-numeric:tabular-nums}
.facts span{display:block;font-size:12.5px;color:var(--hero-muted);margin-top:6px}
.stack{overflow:hidden;padding:16px 0;border-top:1px solid var(--hero-line);font:700 13px/1 var(--display);color:var(--hero-muted);letter-spacing:.02em}
.stack span::before{content:"◆";color:var(--sun);margin-inline-end:10px;font-size:9px;vertical-align:2px}
.track{display:flex;gap:26px;width:max-content;padding-inline:var(--pad)}
.track span{white-space:nowrap}
.page-head{padding:clamp(28px,5vw,56px) var(--pad) clamp(32px,5vw,56px)}
.page-head h1{font-size:clamp(28px,4.4vw,52px);line-height:1.08;margin-top:12px}
.page-head p{color:var(--hero-muted);max-width:60ch;margin:14px 0 0;font-size:17px}

/* sections */
.sec{padding:clamp(40px,6vw,80px) var(--pad);border-top:1px solid var(--line)}
.sec h2{font-size:clamp(24px,3.4vw,38px);line-height:1.1;margin:10px 0 14px;font-weight:800}
.sec .intro{color:var(--muted);max-width:58ch;font-size:16.5px;margin:0}
.prin{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.prin div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:8px;align-content:start}
.prin .ico{width:40px;height:40px;border-radius:12px;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center;font-size:18px;font-weight:800}
.prin h3{font-size:17px;font-family:var(--display);font-weight:700}
.prin p{margin:0;color:var(--muted);font-size:14.5px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 0;padding:0;list-style:none;counter-reset:pr}
.process li{counter-increment:pr;border-top:3px solid var(--ink);padding-top:14px}
.process li:last-child{border-top-color:var(--sun)}
.process li::before{content:counter(pr,decimal-leading-zero);font:800 13px/1 var(--display);color:var(--muted)}
.process h3{font-size:18px;margin:10px 0 6px;font-family:var(--display);font-weight:700}
.process p{margin:0;color:var(--muted);font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.card{border-radius:20px;padding:22px;display:grid;gap:10px;align-content:start;background:var(--paper);border:1px solid var(--line)}
.card .tag{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 14px/1 var(--display)}
.card:nth-child(1) .tag{background:var(--sun);color:#1b1400}
.card:nth-child(2) .tag{background:var(--cobalt);color:var(--on-cobalt)}
.card:nth-child(3) .tag{background:var(--ink);color:var(--paper)}
.card h3{font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.game-sec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--hero);color:var(--hero-fg);border-top:0}
.game-sec h2{color:var(--hero-fg)}
.game-sec .intro{color:var(--hero-muted)}
.score{display:flex;gap:28px;margin-top:22px}
.score span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.score b{font:800 40px/1.1 var(--display);font-variant-numeric:tabular-nums}
.score div:first-child b{color:var(--sun)}
.hint{color:var(--hero-muted);margin:10px 0 0;min-height:1.6em}
.hint.bad{color:#FF8A8A}
.board{display:grid;grid-auto-rows:1fr;gap:6px;background:var(--hero-2);border:1px solid var(--hero-line);border-radius:22px;padding:12px;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.board button{border:0;border-radius:9px;background:#232B55;cursor:pointer;padding:0;min-width:0;min-height:0;transition:background .15s}
.board button:hover{background:#2D3668}
.board button.lit{background:var(--sun);box-shadow:0 0 18px 2px rgba(255,184,28,.55)}
.board button.miss{background:#FF6B6B}
.levels{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.levels::before{content:"";position:absolute;top:17px;inset-inline:18px;border-top:3px dashed var(--line)}
.levels li{position:relative;display:grid;gap:8px;align-content:start}
.levels .lv{justify-self:start;background:var(--ink);color:var(--paper);border-radius:999px;padding:8px 12px;font:800 12px/1 var(--display)}
.levels .next .lv{background:var(--sun);color:#1b1400}
.levels b{font-size:16px}
.levels small{color:var(--muted);font-size:13.5px}
.journey{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,44px);align-items:center;background:var(--cobalt-soft)}
.avatar{width:clamp(96px,15vw,150px);aspect-ratio:1;border-radius:28px;background:var(--cobalt);color:var(--on-cobalt);display:grid;place-items:center;font:800 clamp(28px,5vw,44px)/1 var(--display);max-width:100%}
.journey .role{color:var(--muted);font-weight:700;margin:2px 0 10px}
.journey p{max-width:62ch;margin:0 0 8px}
.soc-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.soc-row a{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:800;text-decoration:none}
.hero-wrap .soc-row a{background:var(--hero-2);color:var(--hero-fg);box-shadow:inset 0 0 0 1px var(--hero-line)}
.soc-row svg{width:16px;height:16px;fill:currentColor;flex:none}
.early{background:var(--hero);color:var(--hero-fg);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,4vw,44px);align-items:center;border-top:0}
.early h2{color:var(--hero-fg)}
.early p{color:var(--hero-muted);margin:0}
.form{display:grid;gap:10px}
.inrow{display:flex;gap:8px;flex-wrap:wrap}
.early input{flex:1 1 200px;min-width:0;background:var(--hero-2);border:1px solid var(--hero-line);color:var(--hero-fg);border-radius:12px;padding:13px 14px}
.early input::placeholder{color:var(--hero-muted)}
.form small{font-size:12.5px;color:var(--muted)}
.early .form small{color:var(--hero-muted)}
.form small a{color:inherit}
.form .ok{color:#1f8a5b;font-weight:700}
.early .form .ok{color:#6BF0B3}
.form .err{color:#D64545;font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qa{display:grid;gap:10px;margin-top:18px;max-width:780px}
.qa details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.qa summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:800 18px/1 var(--display);color:var(--cobalt);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{margin:10px 0 0;color:var(--muted)}
.support{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.support h3{font-size:18px;font-family:var(--display)}
.support p{margin:4px 0 0;color:var(--muted);max-width:60ch}
.s-foot{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;padding:22px var(--pad);font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.s-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.s-foot a{text-decoration:none}.s-foot a:hover{color:var(--ink)}

/* about */
.ab-hero{grid-template-columns:1fr 1fr}
.ring{width:96px;aspect-ratio:1;border-radius:50%;padding:4px;background:conic-gradient(from var(--a,0deg),var(--sun),var(--cobalt),#3DDC97,var(--sun));margin-bottom:18px;max-width:100%}
.ring span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--hero);font:800 28px/1 var(--display);color:var(--hero-fg);border:3px solid var(--hero)}
.ab-hero h1{font-size:clamp(36px,6vw,72px)}
.ab-role{font:700 15px/1.4 var(--body);color:var(--sun);margin:-6px 0 16px}
.glance{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:20px;background:var(--paper)}
.glance div{padding:18px 20px;border-inline-end:1px solid var(--line);display:grid;gap:6px}
.glance div:last-child{border-inline-end:0}
.glance span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.glance b{font-size:15.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;color:#1f8a5b}
.live i{width:9px;height:9px;border-radius:50%;background:#3DDC97}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tools span{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 13px;font:600 13.5px/1 "JetBrains Mono",ui-monospace,monospace}
.tl{list-style:none;margin:24px 0 0;padding:0;display:grid;max-width:720px}
.tl li{display:grid;grid-template-columns:64px 22px 1fr;gap:12px;align-items:start;padding-bottom:22px;position:relative}
.tl li::after{content:"";position:absolute;inset-inline-start:calc(64px + 12px + 10px);top:22px;bottom:0;border-inline-start:2px solid var(--line)}
.tl li:last-child::after{display:none}
.tl .yr{font:800 14px/1.5 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.tl .dot{width:22px;height:22px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--surface)}
.tl b{font-size:16px;line-height:1.5}
.ab-cta{background:var(--hero);color:var(--hero-fg);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;border-top:0}
.ab-cta h2{color:var(--hero-fg)}
.ab-cta p{color:var(--hero-muted);margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,56px);align-items:start}
.cform{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,28px)}
.cform label{display:grid;gap:6px;font-weight:700;font-size:14px}
.cform input,.cform textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:12px 14px}
.cform textarea{min-height:150px;resize:vertical}
.cform .btn{justify-self:start}

/* article */
.article{max-width:760px;margin-inline:auto;padding:clamp(32px,5vw,64px) var(--pad)}
.article .cover{border-radius:20px;margin-bottom:28px;aspect-ratio:812/344;object-fit:cover;width:100%}
.article h2{font:800 clamp(20px,2.4vw,26px)/1.25 var(--display);margin:32px 0 10px}
.article h3{font-size:18px;margin:24px 0 8px}
.article p,.article li{color:var(--ink);font-size:17px;line-height:1.75}
.article p{margin:0 0 14px}
.article ul{padding-inline-start:22px;margin:0 0 16px}
.meta{color:var(--hero-muted);font-size:14px;margin-top:12px;font-variant-numeric:tabular-nums}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{display:grid;align-content:start;text-decoration:none;border-radius:20px;border:1px solid var(--line);background:var(--paper);overflow:hidden;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,27,52,.10)}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post div{padding:16px 18px 20px;display:grid;gap:8px}
.post h2{font:800 17px/1.3 var(--display);margin:0}
.post p{margin:0;color:var(--muted);font-size:14.5px}
.post small{color:var(--muted);font-variant-numeric:tabular-nums}
.notfound{text-align:center;padding:90px var(--pad)}

/* motion */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  .hero .in{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 110ms)}
  .hero-wrap::before{animation:drift 18s linear infinite}
  .track.run{animation:marq 28s linear infinite}
  body[dir="rtl"] .track.run{animation-name:marq-r}
  .stack:hover .track{animation-play-state:paused}
  .levels .next .lv{animation:pulse 1.8s ease-in-out infinite}
  .live i{animation:ping 1.6s ease-out infinite}
  .ring{animation:spin 6s linear infinite}
  .board button.lit{animation:glow .9s ease-in-out infinite alternate}
  .prin .ico{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .prin div:hover .ico{transform:rotate(-8deg) scale(1.12)}
  .prin div,.card,.tools span{transition:transform .25s ease,box-shadow .25s ease}
  .prin div:hover,.card:hover,.tools span:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,27,52,.10)}
  @supports (animation-timeline:view()){
    .rv > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drift{to{background-position:26px 26px}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marq-r{to{transform:translateX(50%)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,184,28,.55)}50%{box-shadow:0 0 0 10px rgba(255,184,28,0)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}100%{box-shadow:0 0 0 10px rgba(61,220,151,0)}}
@keyframes spin{to{--a:360deg}}
@keyframes glow{from{transform:scale(.92)}to{transform:scale(1)}}

@media (max-width:900px){.hero,.game-sec,.early,.journey,.two,.contact-grid{grid-template-columns:1fr}.prin,.process,.levels,.glance{grid-template-columns:repeat(2,1fr)}.cards,.posts{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,1fr);row-gap:10px}.levels::before{display:none}.glance div:nth-child(2){border-inline-end:0}.glance div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.s-nav ul{order:3;width:100%;gap:14px}.prin,.process,.levels,.glance{grid-template-columns:1fr}.glance div{border-inline-end:0;border-bottom:1px solid var(--line)}.tl li{grid-template-columns:48px 22px 1fr}.tl li::after{inset-inline-start:calc(48px + 12px + 10px)}.navcta{display:none}}