@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oxanium:wght@500;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0c0614;--fg:#f8f0ff;--accent:#f700ff;--accent2:#00ffd5;--accent3:#ffe600;--card:#171022;--muted:color-mix(in srgb,#f8f0ff 58%,transparent);--line:color-mix(in srgb,#f700ff 42%,transparent);--danger:#ff3355;--radius:0px}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Share Tech Mono',monospace;overflow-x:hidden;line-height:1.7;text-shadow:0 0 5px color-mix(in srgb,var(--accent) 14%,transparent)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.32) 2px,rgba(0,0,0,.32) 4px);mix-blend-mode:multiply}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent3) 8%,transparent) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at 50% 20%,#000 20%,transparent 80%)}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.page{position:relative;isolation:isolate}
.glow{position:fixed;width:48vw;height:48vw;filter:blur(110px);opacity:.22;border-radius:50%;z-index:-2;animation:float 10s ease-in-out infinite}
.g1{background:var(--accent);top:-20vw;left:-10vw}
.g2{background:var(--accent2);right:-14vw;top:18vh;animation-delay:-3s}
.g3{background:var(--accent3);left:35vw;bottom:-24vw;animation-delay:-5s}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,4vw,54px);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-transform:uppercase;font-family:'Oxanium',monospace;font-weight:900;letter-spacing:.13em;color:var(--accent)}
.logo img{width:54px;height:54px;filter:drop-shadow(0 0 10px var(--accent))}
.navlinks{display:flex;gap:20px;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.navlinks span{cursor:default}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:13px 22px;border:2px solid var(--accent);background:transparent;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-weight:900;cursor:pointer;clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));transition:all .18s steps(4);text-shadow:none}
.btn:hover{background:var(--accent);color:var(--bg);box-shadow:0 0 7px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 65%,transparent);transform:translateY(-2px)}
.btn.secondary{border-color:var(--accent2);color:var(--accent2)}
.btn.secondary:hover{background:var(--accent2);color:var(--bg);box-shadow:0 0 7px var(--accent2),0 0 24px color-mix(in srgb,var(--accent2) 65%,transparent)}
.btn.solid{background:var(--accent);color:var(--bg);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn.solid:hover{filter:brightness(1.18);transform:translateY(-3px) skewX(-3deg)}
.hero{min-height:92vh;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:72px clamp(18px,5vw,72px) 54px;position:relative}
.hero:before{content:"";position:absolute;inset:8%;z-index:-1;background:radial-gradient(circle at 20% 25%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 34%),radial-gradient(circle at 80% 50%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 38%)}
.kicker{color:var(--accent3);font-size:.78rem;text-transform:uppercase;letter-spacing:.25em;margin-bottom:22px}
h1,h2,h3{font-family:'Oxanium',monospace;text-transform:uppercase;letter-spacing:.04em;line-height:1.14}
h1{font-size:clamp(2.45rem,6.5vw,6.6rem);line-height:1.02;margin-bottom:20px;color:var(--fg);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 32%,transparent));animation:rgbShift 4s infinite}
h1 span{color:var(--accent);display:block}
.lead{font-size:clamp(1rem,1.6vw,1.28rem);color:var(--muted);max-width:760px;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;max-width:760px}
.meta{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,transparent);padding:16px;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.meta b{display:block;color:var(--accent);font-size:1.45rem;font-family:'Oxanium'}
.meta small{color:var(--muted);text-transform:uppercase;letter-spacing:.13em}
.hero-media{min-height:auto;position:relative;border:1px solid var(--line);background:var(--card);padding:16px;clip-path:polygon(0 24px,24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.hero-media img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(1.25) contrast(1.1)}
.hud{position:absolute;left:28px;right:28px;bottom:28px;background:rgba(0,0,0,.72);border:1px solid var(--accent3);padding:14px;color:var(--accent3);font-size:.78rem;text-transform:uppercase;letter-spacing:.13em}
section{padding:82px clamp(18px,5vw,72px);position:relative}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:18px}
.section-head h2{font-size:clamp(2rem,4.5vw,4.6rem);max-width:900px}
.section-head p{color:var(--muted);max-width:520px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);padding:26px;clip-path:polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:all .22s steps(4);overflow:hidden}
.card:before{content:"";position:absolute;inset:0;border-top:2px solid var(--accent);opacity:.55;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 38%,transparent)}
.card h3{font-size:1.25rem;color:var(--accent);margin-bottom:12px}
.card p{color:var(--muted)}
.card .num{font-family:'Oxanium';font-size:3rem;color:color-mix(in srgb,var(--accent2) 46%,transparent);line-height:1;margin-bottom:14px}
.card:hover .btn{color:var(--bg)}
.card:hover .btn.solid{background:var(--bg);border-color:var(--bg);color:var(--accent)}
.wide{grid-column:span 2}
.panel{border:1px solid var(--line);background:rgba(0,0,0,.38);padding:26px;clip-path:polygon(0 18px,18px 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px))}
.article{display:grid;grid-template-columns:280px 1fr;gap:34px}
.article-nav{position:sticky;top:92px;align-self:start;border:1px solid var(--line);background:var(--card);padding:22px;clip-path:polygon(0 16px,16px 0,100% 0,100% 100%,0 100%)}
.article-nav b{display:block;color:var(--accent);font-family:'Oxanium';text-transform:uppercase;margin-bottom:12px}
.article-nav span{display:block;color:var(--muted);font-size:.86rem;margin:8px 0}
.article-content{max-width:980px}
.article-content h2{font-size:clamp(1.8rem,3vw,3.1rem);margin:38px 0 18px;color:var(--fg);line-height:1.18}
.article-content h3{font-size:clamp(1.15rem,2vw,1.7rem);margin:26px 0 12px;color:var(--accent3);line-height:1.22}
.article-content p{color:var(--muted);margin:0 0 18px;font-size:1.02rem}
.media-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:26px}
.media-grid img{height:330px;width:100%;object-fit:cover;border:1px solid var(--line);filter:saturate(1.25) contrast(1.12)}
.rewards{width:100%;border-collapse:collapse;margin:26px 0;border:1px solid var(--line)}
.rewards th,.rewards td{padding:14px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);text-align:left}
.rewards th{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);text-transform:uppercase}
.rewards td{color:var(--muted)}
.slider{overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--card) 72%,transparent)}
.track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.slide{min-width:310px;padding:22px 28px;border-right:1px solid var(--line);color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-weight:900}
.faq{max-width:980px;margin:0 auto}
.faq-item{border:1px solid var(--line);background:var(--card);margin-bottom:12px;clip-path:polygon(0 13px,13px 0,100% 0,100% 100%,0 100%)}
.faq-item button{width:100%;background:none;border:0;color:var(--fg);padding:20px;text-align:left;display:flex;justify-content:space-between;gap:16px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.faq-item button:hover{color:var(--accent)}
.faq-item p{display:none;padding:0 20px 20px;color:var(--muted)}
.faq-item.open p{display:block}
.cta{text-align:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta h2{font-size:clamp(2rem,5vw,5.8rem);margin-bottom:18px}
.cta p{color:var(--muted);max-width:820px;margin:0 auto 26px}
footer{padding:42px clamp(18px,5vw,72px);border-top:1px solid var(--line);color:var(--muted);display:grid;grid-template-columns:1fr auto;gap:20px}
footer b{color:var(--accent);font-family:'Oxanium'}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
@keyframes rgbShift{0%,100%{text-shadow:-2px 0 var(--accent2),2px 0 var(--accent3)}50%{text-shadow:2px 0 var(--accent2),-2px 0 var(--accent3)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){.hero,.article,.media-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.navlinks{display:none}.hero-meta{grid-template-columns:1fr}.section-head{display:block}footer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* Language switcher - separate from navigation links */
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 74%,transparent);color:var(--fg);font-weight:900;letter-spacing:.04em;text-transform:none;white-space:nowrap;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.language-switch:hover{transform:translateY(-2px);background:var(--accent);color:var(--bg);border-color:var(--accent)}
body[dir="rtl"]{direction:rtl;text-align:right}
body[dir="rtl"] .nav, body[dir="rtl"] footer{direction:rtl}
body[dir="rtl"] .navlinks{direction:rtl}
body[dir="rtl"] .hero-actions,body[dir="rtl"] .hero-meta{direction:rtl}
body[dir="rtl"] .article{direction:rtl}
body[dir="rtl"] .article-nav{right:auto}
body[dir="rtl"] .rewards th,body[dir="rtl"] .rewards td{text-align:right}
body[dir="rtl"] .faq-item button{text-align:right}
@media(max-width:900px){.nav{gap:12px;flex-wrap:wrap}.language-switch{order:3}.nav>.btn{order:4}}