:root{
--navy:#06121f; --navy2:#0b2236; --blue:#2b87da; --blue2:#1f6fbf; --sky:#5cc8ff;
--purple:#8b2cf5; --yellow:#edf000; --teal:#1fb5a0; --card:#ffffff; --ink:#1d2329; --muted:#5d6873;
--glow:rgba(255,166,0,.55); --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.65 "Segoe UI",Roboto,Arial,sans-serif;
background:linear-gradient(180deg,#000 0,#06121f 380px,#0b2a40 900px,#0d4f5c 70%,#1fb5a0 100%) fixed;background-color:#06121f}
img{max-width:100%;height:auto}
a{color:var(--blue2)}
a:hover{color:var(--blue)}
.wrap{width:min(1240px,100% - 32px);margin:0 auto}
.screen-reader-text{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px} .site-header{background:linear-gradient(180deg,#2b87da 0%,#110303 100%);padding:18px 0 26px}
.brand{display:flex;justify-content:center}
.brand img{width:260px;height:auto}
.releases{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:8px auto 18px;max-width:1100px}
.release{text-align:center;text-decoration:none;display:block}
.release img{height:150px;width:auto;object-fit:contain;transition:transform .25s}
.release:hover img{transform:scale(1.07)}
.release span{display:block;color:var(--purple);font-weight:700;font-size:14px;letter-spacing:1.5px;line-height:1.3;
text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.6)}
.release:hover span{color:#b77dff}
.nav{background:#42494f;border-radius:30px;box-shadow:0 0 18px var(--glow),0 0 2px #ffa600 inset;padding:8px 14px;max-width:1100px;margin:0 auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.nav a{display:block;padding:6px 14px;border-radius:20px;background:#5cc8ff;color:#06121f;font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.3px}
.nav a:hover,.nav .current-menu-item>a{background:#fff}
.nav-toggle{display:none} .main{padding:36px 0 50px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.content{background:var(--card);border-radius:var(--r);padding:34px 38px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.content h1{font-size:2.1rem;line-height:1.2;margin:0 0 .6em;color:#0d1b26;text-align:center}
.content h2{font-size:1.45rem;line-height:1.3;margin:1.8em 0 .6em;color:#0d1b26;padding-left:12px;border-left:5px solid var(--blue)}
.content h3{font-size:1.15rem;margin:1.4em 0 .4em;color:#0d1b26}
.content p{margin:0 0 1em}
.content ul,.content ol{padding-left:1.3em;margin:0 0 1.2em}
.content li{margin:.25em 0}
.content .lead{font-size:1.08rem;color:#2c3640}
.content figure{margin:0 0 1.2em}
.hero-img{float:right;width:min(300px,40%);margin:0 0 14px 22px;border-radius:10px}
.clear{clear:both} .dl{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:26px 0;clear:both}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#3a8fe0,#1f6fbf);color:#fff!important;
text-decoration:none;font-weight:700;padding:13px 22px;border-radius:10px;box-shadow:0 4px 0 #134f8a,0 8px 18px rgba(31,111,191,.35);
letter-spacing:.3px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn small{display:block;font-weight:400;opacity:.9;font-size:12px}
.btn.alt{background:linear-gradient(180deg,#4f5a63,#2f363c);box-shadow:0 4px 0 #1b2024,0 8px 18px rgba(0,0,0,.3)}
.btn svg{width:22px;height:22px;flex:none} .specs{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:15px}
.specs th,.specs td{border:1px solid #dfe6ec;padding:9px 12px;text-align:left;vertical-align:top}
.specs th{background:#f2f7fb;width:34%}
.features{columns:2;column-gap:28px}
.features li{break-inside:avoid}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding:4px 0 4px 44px;margin:6px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:3px;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
font-weight:700;display:grid;place-items:center;font-size:14px}
.note{background:#fff8d6;border-left:4px solid #e8b400;padding:12px 16px;border-radius:6px;margin:0 0 1.2em;font-size:15px} .cards>br,.dl>br,.videos>br,.cards>p:empty{display:none} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:0 0 1.4em}
.card{border:1px solid #e1e8ee;border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);display:block;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(43,135,218,.18)}
.card b{display:block;color:#0d1b26;margin-bottom:4px}
.card span{font-size:14px;color:var(--muted)} .yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;cursor:pointer;margin:0 0 1em}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt::after{content:"";position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:12px;background:#f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.videos h3{font-size:1rem;margin:.2em 0 .5em} .faq details{border:1px solid #e1e8ee;border-radius:10px;padding:0 16px;margin:0 0 10px}
.faq summary{cursor:pointer;font-weight:700;padding:13px 0;color:#0d1b26}
.faq details[open] summary{border-bottom:1px solid #eef2f5;margin-bottom:10px} .sidebar{position:sticky;top:16px;display:grid;gap:18px}
.box{background:#0d1418;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.box h2{margin:0;background:#000;color:#fff;font-size:16px;letter-spacing:.5px;padding:14px 16px;text-transform:uppercase}
.box ul{list-style:none;margin:0;padding:6px 0}
.box a{display:block;padding:10px 16px;color:#cfd8df;text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid #1a2329}
.box a:hover,.box .on{color:#fff;background:#16222a}
.box p{color:#cfd8df;margin:0;padding:12px 16px;font-size:14px}
.discord{display:flex;align-items:center;gap:10px;background:#5865f2;color:#fff!important;margin:12px 16px 16px;padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:700} .site-footer{background:#1f1f1f;color:#9aa5ae;padding:28px 0 0;margin-top:20px}
.taglinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:26px}
.taglinks a{background:#0c71c3;color:#fff;text-decoration:none;padding:7px 12px;border-radius:4px;font-size:14px}
.taglinks a:hover{background:#2b87da}
.copy{border-top:1px solid #2b2b2b;text-align:center;padding:14px;font-size:13px}
.copy a{color:#cfd8df} @media (max-width:980px){
.layout{grid-template-columns:1fr}
.sidebar{position:static}
.releases{grid-template-columns:repeat(5,1fr)}
.release img{height:96px}
.release span{font-size:11px;letter-spacing:.5px}
}
@media (max-width:640px){
.brand img{width:190px}
.releases{display:flex;overflow-x:auto;gap:12px;padding:0 4px 6px;scroll-snap-type:x mandatory}
.release{flex:0 0 38%;scroll-snap-align:start}
.nav{border-radius:16px}
.nav-toggle{display:block;width:100%;background:none;border:0;color:#fff;font-weight:700;font-size:16px;padding:6px;cursor:pointer}
.nav ul{display:none;flex-direction:column;padding:6px 0}
.nav.open ul{display:flex}
.content{padding:22px 18px}
.content h1{font-size:1.6rem}
.content h2{font-size:1.25rem}
.hero-img{float:none;width:100%;margin:0 0 14px}
.features{columns:1}
.btn{width:100%;justify-content:center}
}