:root{
  --bk:#060606; --bk2:#0e0e0e; --bk3:#161616;
  --wh:#f3f1ee; --gr:#8c8986; --line:rgba(243,241,238,.1);
  --red:#ff2a2a; --red2:#c40d0d;
  --f-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-disp:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  --f-anton:"Anton",Impact,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
  --cut:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bk)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bk);color:var(--wh);font-family:var(--f-ar);font-weight:400;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#000}
.anton{font-family:var(--f-anton);font-weight:400;letter-spacing:.01em;direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;direction:ltr;unicode-bidi:isolate}
em{font-style:normal;color:var(--red)}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--bk);display:grid;place-content:center;justify-items:center;gap:14px}
.loader__label{color:var(--gr)}
.loader__kg{font-size:clamp(90px,16vw,200px);line-height:.9}
.loader__kg small{font-size:.25em;color:var(--red);margin-left:10px}
.loader__bar{width:min(360px,70vw);height:3px;background:var(--line)}
.loader__bar span{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 14px var(--red)}

/* fixed layers */
.bgword{position:fixed;inset:0;z-index:0;display:grid;place-items:center;overflow:hidden;font-size:clamp(160px,34vw,560px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,42,42,.22);pointer-events:none;user-select:none;opacity:0}
.bar3d{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(500px circle at var(--x,50%) var(--y,50%),rgba(255,30,30,.09),transparent 60%)}
.scan{position:fixed;inset:0;z-index:90;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
main,footer,.nav,.ticker-wrap{position:relative;z-index:2}
.ticker-wrap{overflow:hidden;padding:30px 0}
.cursor{position:fixed;top:0;left:0;z-index:95;pointer-events:none}
.cursor span{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border:1.5px solid var(--red);transition:all .35s var(--ease);transform:rotate(45deg)}
.cursor.is-hover span{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(255,42,42,.12);transform:rotate(0)}
@media (hover:none){.cursor{display:none}}

/* nav */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);transition:background .4s,padding .4s}
.nav.is-scrolled{background:rgba(6,6,6,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-block:12px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:30px;height:30px;color:var(--red)}
.brand__en{font-size:28px;letter-spacing:.06em;line-height:1}
.nav__links{display:flex;gap:30px;font-size:14px;font-weight:500}
.nav__links a{color:var(--gr);transition:color .25s;position:relative}
.nav__links a::before{content:"";position:absolute;inset-inline-start:-12px;top:50%;width:6px;height:6px;background:var(--red);transform:translateY(-50%) scale(0);transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--wh)}
.nav__links a:hover::before{transform:translateY(-50%) scale(1)}

/* buttons — cut corners */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:16px 28px;background:var(--red);color:#000;font-weight:700;font-size:15px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--wh);transform:translateX(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before{transform:translateX(0)}
.btn span,.btn b{pointer-events:none}
.btn .arrow{font-family:var(--f-anton);font-weight:400;transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(-6px)}
.btn--ghost{background:transparent;color:var(--wh);box-shadow:inset 0 0 0 1.5px rgba(243,241,238,.4)}
.btn--ghost:hover{color:#000}
.btn--small{padding:10px 18px;font-size:13px;--cut:9px}

.tag{color:var(--red);display:inline-block;margin-bottom:16px}

/* hero */
.hero{min-height:100svh;padding:110px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;cursor:grab}
.hero:active{cursor:grabbing}
.hero__top{display:flex;justify-content:space-between}
.hero__top .tag{color:var(--gr)}
.hero__content{display:grid;grid-template-columns:1fr;gap:20px;align-self:flex-start;max-width:640px}
.hero__title{font-family:var(--f-disp);font-weight:900;font-size:clamp(50px,7.6vw,120px);line-height:1.25;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero__title .line{display:block;overflow:hidden;padding:.06em 0 .04em}
.hero__title .word{display:inline-block;transform:translateY(110%)}
.hero__title i{font-style:normal;color:var(--red);text-shadow:0 0 40px rgba(255,42,42,.45)}
.hero__side{max-width:420px}
.hero__side p{color:var(--gr);font-size:16px;margin-bottom:24px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(20px,4vw,60px);padding-top:26px;border-top:1px solid var(--line);margin-top:30px}
.stats b{display:block;font-size:clamp(34px,4vw,56px);line-height:1}
.stats span{color:var(--gr);font-size:13px}
.hero__hint{position:absolute;bottom:12px;inset-inline-end:var(--pad);color:var(--gr);opacity:.7}
.reveal{opacity:0;transform:translateY(24px)}

/* ticker */
.ticker{background:var(--red);color:#000;padding:14px 0;overflow:hidden;transform:rotate(-1.5deg) scale(1.03)}
.ticker__track{display:flex;gap:36px;width:max-content;align-items:center;white-space:nowrap;direction:ltr;font-family:var(--f-anton);font-size:clamp(28px,3.4vw,44px);line-height:1}
.ticker__track span:nth-child(4n+3){font-family:var(--f-disp);font-weight:900;font-size:.9em}
.ticker__track i{font-style:normal;font-size:.4em}

/* load section */
.load{height:240vh;position:relative}
.load__pin{position:sticky;top:0;height:100vh;padding:100px var(--pad) 50px;display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden}
.load__kg{order:2;text-align:left}
.load__kg p{color:var(--red);margin-bottom:4px}
.load__kg div{font-size:clamp(90px,14vw,220px);line-height:.85;text-shadow:0 0 50px rgba(255,42,42,.3)}
.load__kg small{font-size:.22em;color:var(--red);margin-left:8px}
.load__words{position:relative;width:min(460px,90vw);height:220px;align-self:flex-start;margin-top:4vh}
.lw{position:absolute;inset-inline:0;top:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:1.3;opacity:0}
.lw span{display:block;font-size:.32em;color:var(--red);margin-bottom:8px}
.lw small{display:block;font-family:var(--f-ar);font-size:16px;color:var(--gr);margin-top:12px;font-weight:400}

/* sections */
.section{padding:clamp(100px,12vw,160px) var(--pad);background:var(--bk)}
.head{margin-bottom:54px;max-width:760px}
.h2{font-family:var(--f-disp);font-weight:900;font-size:clamp(40px,5.4vw,84px);line-height:1.3}
.lead{color:var(--gr);margin-top:18px;max-width:520px}

/* programs */
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.prog{position:relative;background:var(--bk);padding:28px 26px 30px;min-height:440px;display:flex;flex-direction:column;overflow:hidden;transition:background .5s}
.prog::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,42,42,0),rgba(255,42,42,.14));transform:translateY(100%);transition:transform .6s var(--ease)}
.prog:hover::before{transform:translateY(0)}
.prog>*{position:relative}
.prog__n{font-size:18px;color:var(--red)}
.prog__art{height:190px;margin:10px 0 24px;display:grid;place-items:center}
.prog__art svg{width:100%;height:100%;overflow:visible}
.prog h3{font-family:var(--f-disp);font-weight:900;font-size:32px;line-height:1.35}
.prog__en{color:var(--gr);font-size:15px;letter-spacing:.12em;margin:4px 0 12px;text-align:right}
.prog p:last-child{color:var(--gr);font-size:14px;margin-top:auto}

/* program art animations */
.pa{stroke:var(--wh);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pa-red{stroke:var(--red)}
.pa-fill{fill:var(--wh);stroke:none}
.pa-fillr{fill:var(--red);stroke:none}
.curl-arm{transform-origin:100px 120px;animation:curl 1.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes curl{0%,100%{transform:rotate(0)}50%{transform:rotate(-115deg)}}
.press-bar{animation:press 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes press{0%,100%{transform:translateY(40px)}50%{transform:translateY(-10px)}}
.press-bar .bend{animation:bend 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes bend{0%,100%{d:path("M30 60 Q100 66 170 60")}50%{d:path("M30 60 Q100 54 170 60")}}
.glove{animation:punch 1.1s cubic-bezier(.7,0,.2,1) infinite}
@keyframes punch{0%,100%{transform:translateX(0)}35%{transform:translateX(-60px)}50%{transform:translateX(-56px)}}
.impact{opacity:0;animation:impact 1.1s infinite}
@keyframes impact{30%{opacity:0;transform:scale(.6)}38%{opacity:1;transform:scale(1)}60%{opacity:0;transform:scale(1.2)}}
.impact{transform-origin:40px 100px}
.bag{transform-origin:40px 20px;animation:bag 1.1s infinite}
@keyframes bag{0%,32%{transform:rotate(0)}45%{transform:rotate(-8deg)}70%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.rope{stroke-dasharray:none;animation:wave 1s linear infinite}
.rope2{animation-delay:-.5s}
@keyframes wave{to{transform:translateX(-40px)}}
.prog:hover .curl-arm,.prog:hover .press-bar,.prog:hover .press-bar .bend,.prog:hover .glove,.prog:hover .impact,.prog:hover .bag,.prog:hover .rope{animation-duration:.7s}

/* live */
.live{background:linear-gradient(180deg,var(--bk),#0b0505)}
.live__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:end}
.live__now{display:flex;align-items:center;gap:28px;margin-top:36px}
.ring{position:relative;width:150px;height:150px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:var(--line);stroke-width:8}
.ring__fg{fill:none;stroke:var(--red);stroke-width:8;stroke-dasharray:327;stroke-dashoffset:327;filter:drop-shadow(0 0 8px rgba(255,42,42,.6))}
.ring__txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring__txt b{font-size:40px;line-height:1}
.ring__txt small{color:var(--gr);font-size:12px}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:500;margin-bottom:10px}
.dot{width:9px;height:9px;background:#2bd46a;box-shadow:0 0 0 0 rgba(43,212,106,.6);animation:pulse 1.6s infinite}
.status.is-closed .dot{background:var(--gr);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(43,212,106,0)}100%{box-shadow:0 0 0 0 rgba(43,212,106,0)}}
.live__people{color:var(--gr)}
.live__people b{font-size:30px;color:var(--wh);margin-inline-end:6px}
.live__best{color:var(--gr);margin-top:6px}
.live__best b{color:var(--wh)}
.chart{display:grid;grid-template-columns:repeat(18,1fr);align-items:end;gap:6px;height:280px;direction:ltr;padding-bottom:28px;position:relative}
.chart .col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.chart .b{width:100%;background:linear-gradient(180deg,rgba(243,241,238,.28),rgba(243,241,238,.08));transform-origin:bottom;transform:scaleY(0);transition:transform 1s var(--ease)}
.chart.is-in .b{transform:scaleY(1)}
.chart .col.now .b{background:linear-gradient(180deg,var(--red),var(--red2));box-shadow:0 0 20px rgba(255,42,42,.5)}
.chart .col.best .b{background:linear-gradient(180deg,#2bd46a,#167a3a)}
.chart .h{position:absolute;bottom:-26px;font-family:var(--f-mono);font-size:10px;color:var(--gr)}
.chart .col.now .h{color:var(--red)}
.chart .col.now::after{content:"NOW";position:absolute;top:-22px;font-family:var(--f-mono);font-size:10px;color:var(--red)}

/* schedule */
.days{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:28px}
.day{padding:12px 22px;background:var(--bk3);color:var(--gr);font-weight:500;transition:all .3s;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
.day:hover{color:var(--wh)}
.day.on{background:var(--red);color:#000}
.classes{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);overflow:hidden}
.cls{display:grid;grid-template-columns:120px 1fr auto auto;gap:24px;align-items:center;padding:22px 26px;background:var(--bk);transition:background .3s}
.cls:hover{background:var(--bk3)}
.cls__time{font-size:30px;line-height:1}
.cls__name{font-family:var(--f-disp);font-weight:800;font-size:24px;line-height:1.5}
.cls__name small{display:block;font-family:var(--f-ar);font-size:13px;color:var(--gr)}
.cls__lvl{display:flex;gap:4px}
.cls__lvl i{width:8px;height:22px;background:var(--line);transform:skewX(-14deg)}
.cls__lvl i.on{background:var(--red)}
.cls__spots{font-family:var(--f-mono);font-size:11px;color:var(--gr);min-width:90px;text-align:left}
.cls__spots.low{color:var(--red)}

/* membership */
.member__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.member__card{position:sticky;top:110px;display:grid;place-items:center;padding:30px 0;perspective:1400px}
.card3d{width:min(460px,86vw);aspect-ratio:1.586;cursor:pointer;--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.card3d__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.card3d.flip .card3d__inner{transform:rotateY(180deg)}
.mcard{position:absolute;inset:0;border-radius:18px;padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08) inset;transition:background .8s}
.mcard--front{background:linear-gradient(135deg,#2a2a2a,#0d0d0d 55%,#1c1c1c)}
.mcard--front[data-tier="STEEL"]{background:linear-gradient(135deg,#9da3aa,#5b6066 45%,#c8ccd1 70%,#6d7278)}
.mcard--front[data-tier="TITAN"]{background:linear-gradient(135deg,#d11a1a,#5a0606 60%,#a51010)}
.mcard--front[data-tier="LEGEND"]{background:linear-gradient(135deg,#0a0a0a,#000 50%,#141414);box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1.5px var(--red) inset,0 0 40px rgba(255,42,42,.35)}
.mcard--front[data-tier="STEEL"] .mcard__name,.mcard--front[data-tier="STEEL"] .mcard__logo{color:#111}
.mcard--front[data-tier="STEEL"] .mcard__bottom{color:#222}
.mcard__shine{position:absolute;inset:0;background:radial-gradient(400px circle at var(--sx,30%) var(--sy,20%),rgba(255,255,255,.22),transparent 45%);pointer-events:none;mix-blend-mode:overlay}
.mcard__top{display:flex;justify-content:space-between;align-items:center;direction:ltr}
.mcard__logo{font-size:30px;letter-spacing:.06em}
.mcard__tier{padding:5px 10px;border:1px solid currentColor;font-size:10px;color:var(--red)}
.mcard--front[data-tier="TITAN"] .mcard__tier{color:#fff}
.mcard__chip{width:46px;height:34px;border-radius:6px;background:linear-gradient(135deg,#e4c77a,#9c7b2c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.mcard__name{font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.4;min-height:1.1em}
.mcard__bottom{display:flex;justify-content:space-between;color:rgba(243,241,238,.7);font-size:10px}
.mcard__stripe{position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px;background:var(--red)}
.mcard--back{transform:rotateY(180deg);background:linear-gradient(135deg,#151515,#050505);align-items:center;justify-content:center;gap:16px;text-align:center}
.mcard__barcode{display:flex;gap:2px;height:60px;align-items:stretch}
.mcard__barcode i{background:var(--wh)}
.mcard--back .mono{color:var(--gr);line-height:1.8;font-size:10px}
.mcard__small{font-size:12px;color:var(--gr)}
.member__panel{display:grid;gap:26px}
.fld{display:grid;gap:10px}
.fld>span{font-size:13px;color:var(--red);font-weight:600;letter-spacing:.02em}
.fld input{font:inherit;color:var(--wh);background:var(--bk2);border:1px solid var(--line);padding:14px 16px;outline:none;transition:border-color .3s}
.fld input:focus{border-color:var(--red)}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.seg button{padding:14px 10px;background:var(--bk);text-align:center;transition:background .3s,color .3s;position:relative}
.seg button b{display:block;font-weight:600}
.seg button small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--gr)}
.seg button:hover{background:var(--bk3)}
.seg button.on{background:var(--wh);color:#000}
.seg button.on small{color:#555}
.seg button .off{position:absolute;top:-1px;inset-inline-end:-1px;background:var(--red);color:#000;font-family:var(--f-mono);font-size:9px;padding:2px 6px}
.addons{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.addon{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bk);text-align:start;transition:background .3s}
.addon:hover{background:var(--bk3)}
.addon .box{width:20px;height:20px;border:1.5px solid var(--gr);flex:none;display:grid;place-items:center;transition:all .3s}
.addon.on .box{background:var(--red);border-color:var(--red)}
.addon.on .box::after{content:"";width:8px;height:4px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg) translate(1px,-1px)}
.addon .t{flex:1}
.addon .t b{display:block;font-weight:600}
.addon .t small{color:var(--gr);font-size:13px}
.addon .p{font-family:var(--f-mono);font-size:12px;color:var(--gr)}
.total{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.total small{color:var(--gr);font-size:13px}
.total strong{display:block;font-size:clamp(44px,5vw,64px);line-height:1}
.total strong em{font-size:.3em;color:var(--red)}
.save{color:#2bd46a;margin-top:6px;min-height:1em}

/* footer */
.footer{padding:80px var(--pad) 36px;background:var(--bk);overflow:hidden}
.footer__big{font-size:clamp(90px,19vw,320px);line-height:.85;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--red);text-shadow:0 0 30px rgba(255,42,42,.25);animation:flicker 4s infinite;margin-bottom:50px}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.footer__links{display:flex;gap:28px;font-size:18px;letter-spacing:.08em}
.footer__links a{color:var(--gr);transition:color .25s}
.footer__links a:hover{color:var(--red)}
.footer__credit{color:var(--gr)}
.footer__credit a{color:var(--red)}
.footer__note{margin-top:14px;font-size:12px;color:rgba(140,137,134,.6)}

/* responsive */
@media (max-width:1100px){.prog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .nav__links{display:none}
  .hero{justify-content:flex-end;gap:20px;padding-top:40vh}
  .seg{grid-template-columns:repeat(2,1fr)}
  .hero__top{position:absolute;top:84px;inset-inline:var(--pad)}
  .hero__hint{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .load__pin{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:20px}
  .load__kg{order:0;text-align:right}
  .load__words{height:170px;margin-top:0;align-self:stretch}
  .live__grid,.member__wrap{grid-template-columns:minmax(0,1fr)}
  .chart{height:200px;gap:3px}
  .chart .h{font-size:8px}
  .cls{grid-template-columns:80px minmax(0,1fr);gap:10px 16px;padding:18px}
  .cls>*{min-width:0}
  .day{padding:10px 14px;font-size:14px}
  .cls__lvl,.cls__spots{grid-column:2}
  .member__card{position:relative;top:0}
}
@media (max-width:560px){.prog-grid{grid-template-columns:1fr}.prog{min-height:auto}}
