:root{
  --bg:#070b11;--bg2:#0b121b;--panel:#0e1823;--line:rgba(120,190,230,.16);
  --text:#e7eef5;--muted:#93a4b5;--amber:#f2b54b;--amber-d:#c98a22;--rust:#e8561f;
  --cyan:#3fd2ff;--cyan-d:#1b8fb8;
  --display:'Barlow Condensed',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
html{background:var(--bg)}
body{margin:0;background:transparent;color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{display:none}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;margin:0;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(40px,6vw,76px);margin-bottom:22px}
h3{font-size:28px;font-weight:700}
p{margin:0 0 16px}
.lead{font-size:clamp(18px,1.6vw,20px);color:#c8d4df;max-width:58ch}
.mono,.eyebrow,.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{color:var(--amber);margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s,filter .2s,background .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-steam{background:var(--amber);color:#1a1205}
.btn-ghost{background:rgba(63,210,255,.08);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(63,210,255,.45)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13px}
.ico{width:22px;height:22px;fill:currentColor;flex:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:24px;height:68px;padding:0 max(16px,calc((100% - 1180px)/2));background:linear-gradient(#070b11ee,#070b1100);transition:background .3s}
.nav.solid{background:rgba(7,11,17,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-logo img{width:132px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font:600 15px var(--display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#b9c7d4}
.nav-links a:hover{color:var(--amber)}
.nav-end{display:flex;align-items:center;gap:12px}
.lang{background:none;border:1px solid var(--line);color:var(--muted);font:600 12px var(--mono);letter-spacing:.12em;height:36px;width:44px;cursor:pointer}
.lang:hover{color:var(--text);border-color:var(--cyan-d)}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:120px 0 40px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,17,0) 40%,rgba(7,11,17,.78) 70%,rgba(7,11,17,.62) 100%),linear-gradient(90deg,rgba(7,11,17,.55),rgba(7,11,17,0) 55%)}
.hero-content{position:relative}
.kicker{display:flex;align-items:center;gap:10px;color:var(--cyan);margin-bottom:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero-title{font-size:clamp(40px,4.9vw,72px);max-width:18ch;margin-bottom:20px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero-title em{font-style:normal;color:var(--amber)}
.hero-sub{max-width:54ch;font-size:clamp(17px,1.5vw,19px);color:#d3dde6;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-hud{position:relative;display:flex;gap:16px;margin-top:40px;padding-top:14px;border-top:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.16em;color:var(--muted)}
.blink{color:var(--cyan);margin-left:auto;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}
.section{position:relative;padding:clamp(80px,11vw,150px) 0}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.frame{position:relative;margin:0;border:1px solid var(--line);background:var(--panel);padding:6px}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--amber);pointer-events:none}
.frame::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.frame::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:72px}
.pillar{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);padding:26px 22px}
.pillar img{width:60px;height:60px;object-fit:contain;margin-bottom:16px;filter:drop-shadow(0 0 14px rgba(63,210,255,.25))}
.pillar h3{margin-bottom:10px;color:var(--amber)}
.pillar p{color:var(--muted);font-size:15.5px;margin:0}
.section-ship{background:radial-gradient(60% 50% at 25% 40%,rgba(242,181,75,.10),transparent 70%),var(--bg2);border-block:1px solid var(--line)}
.ship-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.ship-art{position:relative;display:grid;place-items:center}
.ship-art img{position:relative;width:min(400px,80%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:float 7s ease-in-out infinite}
.ship-glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(63,210,255,.22),transparent 65%)}
@keyframes float{50%{transform:translateY(-14px) rotate(1deg)}}
.tag{font:600 22px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-top:-8px}
.loadout{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.loadout li{background:var(--bg2);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.loadout b{font:700 18px var(--display);letter-spacing:.06em;text-transform:uppercase}
.loadout span{font-size:14px;color:var(--muted)}
.hangar-head{margin-top:90px;margin-bottom:24px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.hangar-head h3{font-size:34px;color:var(--amber)}
.hangar-head p{margin:0;color:#c8d4df;font-size:18px}
.banners{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.banner{position:relative;margin:0;overflow:hidden;border:1px solid var(--line)}
.banner img{width:100%;aspect-ratio:2.4/1;object-fit:cover;transition:transform .6s}
.banner:hover img{transform:scale(1.06)}
.banner figcaption{position:absolute;left:0;bottom:0;padding:6px 12px;background:rgba(7,11,17,.85);font:700 15px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.section-mara{background:radial-gradient(50% 60% at 75% 50%,rgba(63,210,255,.13),transparent 70%)}
.mara-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.mara-art img{width:min(460px,100%);margin-inline:auto;filter:drop-shadow(0 0 40px rgba(63,210,255,.35))}
.holo{margin:30px 0 0;padding:22px 24px;border:1px solid rgba(63,210,255,.5);background:linear-gradient(135deg,rgba(63,210,255,.10),rgba(63,210,255,.02));box-shadow:0 0 30px rgba(63,210,255,.12),inset 0 0 30px rgba(63,210,255,.06);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.holo-label{display:block;font:600 12px var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:8px}
.holo p{margin:0;font-size:19px;color:#e6f6ff}
.head{max-width:760px;margin-bottom:48px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(232,86,31,.08),var(--bg2) 60%);padding:24px}
.card-art{height:220px;display:grid;place-items:center;margin-bottom:18px;background:radial-gradient(circle,rgba(232,86,31,.18),transparent 65%)}
.card-art img{max-height:190px;width:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));transition:transform .4s}
.card:hover .card-art img{transform:scale(1.06) rotate(-3deg)}
.card .mono{color:var(--rust);margin-bottom:4px}
.card h3{margin-bottom:10px}
.card p:last-child{color:var(--muted);font-size:15.5px;margin:0}
.sectors{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,520px);gap:16px;overflow-x:auto;padding:0 max(16px,calc((100% - 1180px)/2)) 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--amber-d) transparent}
.sector{position:relative;margin:0;scroll-snap-align:start;border:1px solid var(--line);overflow:hidden}
.sector img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .6s}
.sector:hover img{transform:scale(1.05)}
.sector figcaption{position:absolute;inset:auto 0 0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(7,11,17,.92));display:flex;flex-direction:column}
.sector b{font:700 24px var(--display);text-transform:uppercase;letter-spacing:.04em}
.sector span{font-size:14px;color:var(--muted)}
.section-cta{overflow:hidden;text-align:center;border-top:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;background:url(/img/sector-rubi.webp) center/cover;opacity:.28;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.cta{position:relative;display:flex;flex-direction:column;align-items:center}
.cta-logo{width:min(380px,80%);margin-bottom:30px}
.cta .lead{margin-inline:auto}
.signup{display:flex;gap:10px;width:min(520px,100%);margin-top:14px}
.signup input{flex:1;min-width:0;height:52px;padding:0 16px;background:rgba(7,11,17,.85);border:1px solid rgba(63,210,255,.4);color:var(--text);font:400 16px var(--body)}
.signup input::placeholder{color:#627385}
.form-msg{min-height:26px;margin-top:14px;color:var(--cyan);font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.js-steam-only{margin-top:10px}
.footer{border-top:1px solid var(--line);padding:36px 0}
.foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.foot p{margin:0}.foot .mono{margin-left:auto;font-size:11px}
.foot b{color:var(--text);letter-spacing:.08em}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ship-art img,.blink{animation:none}html{scroll-behavior:auto}}

@media (min-width:961px){
  .hero{min-height:0;display:block;padding:0 0 40px}
  .hero-video{position:relative;inset:auto;height:auto;aspect-ratio:1920/824;object-fit:cover}
  .hero-shade{bottom:auto;height:calc(100vw * 824 / 1920);background:linear-gradient(180deg,rgba(7,11,17,.35) 0,rgba(7,11,17,0) 14%,rgba(7,11,17,0) 55%,rgba(7,11,17,.8) 88%,rgba(7,11,17,.62) 100%)}
  .hero-content{margin-top:-9vw}
  .nav-logo{transition:opacity .3s}
  .nav:not(.solid) .nav-logo{opacity:0;pointer-events:none}
}
@media (max-width:960px){
  .nav-links{display:none}.nav-end{margin-left:auto}
  .split,.ship-grid,.mara-grid{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .banners{grid-template-columns:1fr 1fr}
  .mara-art{order:-1}.mara-art img{width:min(320px,80%)}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav{gap:10px}.nav-logo img{width:108px}
  .nav .btn-sm{padding:0 12px;font-size:11px;letter-spacing:.08em}
  .hero-video{object-position:58% center}
  .hero-ctas .btn{width:100%;justify-content:center}
  .hero-hud span:nth-child(2){display:none}
  .pillars{grid-template-columns:1fr}
  .loadout{grid-template-columns:1fr}
  .banners{grid-template-columns:1fr}
  .signup{flex-direction:column}.signup .btn{justify-content:center}
  .foot .mono{margin-left:0}
}

body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,11,17,.58),rgba(7,11,17,.78)),url(/img/bg-skin.webp) center/cover no-repeat;pointer-events:none}
.section-ship{background:radial-gradient(60% 50% at 25% 40%,rgba(242,181,75,.10),transparent 70%),rgba(9,14,21,.55)}
.pillar{background:linear-gradient(180deg,rgba(14,24,35,.78),rgba(11,18,27,.62))}
.card{background:linear-gradient(180deg,rgba(232,86,31,.10),rgba(11,18,27,.66) 60%)}
.loadout li{background:rgba(11,18,27,.82)}
.frame{background:rgba(14,24,35,.7)}
.credit{margin-top:22px;font:600 15px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.footer{background:rgba(7,11,17,.7)}