/* NEXO V — cinematic homepage */
:root{--bg:#07090c;--gold:#edc779;--gold-soft:#ffdf9f;--muted:#a8adb5}
body{background:var(--bg)}
::selection{background:#edc779;color:#07090c}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
#main-nav{background:rgba(7,9,12,.65);border-color:rgba(255,255,255,.08)}
.hero{isolation:isolate;min-height:960px;min-height:max(900px,100svh);padding:180px max(6vw,24px) 240px;justify-content:flex-start;overflow:visible;background:none}
.hero::before{z-index:-2;inset:0 0 -200px;background:linear-gradient(90deg,rgba(7,9,12,.92),rgba(7,9,12,.52) 42%,rgba(7,9,12,.05) 76%),linear-gradient(180deg,rgba(7,9,12,.16) 35%,rgba(7,9,12,.5) 65%,#07090c 100%),url('nexo-hero-cinematic.webp') center top/cover no-repeat;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 -201px;height:500px;background:linear-gradient(180deg,transparent,#07090c 85%);pointer-events:none;z-index:-1}
.hero-content{width:min(1400px,100%);max-width:1400px;margin:auto;text-align:left}
.hero-kicker{font-size:11px;letter-spacing:.24em;border:0;border-radius:0;background:none;padding:0;box-shadow:none;margin-bottom:30px}
.hero-kicker::before{width:28px}
.hero-title{font-size:clamp(68px,8.4vw,138px);letter-spacing:-.025em;line-height:1.01}
.hero-title .line1{text-shadow:0 4px 35px #0005}
.hero-title .line2{color:var(--gold);text-shadow:none}
.hero-rule{margin:28px 0;width:64px;background:var(--gold);height:2px}
.hero-slogan{font-family:var(--body);font-size:21px;letter-spacing:.025em;text-transform:none;color:#f6efe2;text-shadow:none}
.hero-text{margin:0 0 32px;max-width:510px;font-size:17px;color:#c0c2c6;line-height:1.8}
.hero-actions{justify-content:flex-start;gap:14px;flex-wrap:wrap}
.hero-meta{justify-content:flex-start;margin-top:52px;gap:38px}
.hero-meta-item{text-align:left;border-left:1px solid #edc77955;padding-left:18px}
.hero-meta-value{font-size:30px}.hero-meta-label{font-size:10px;letter-spacing:.16em}
.hero-orb{display:none}.scroll-cue{bottom:115px;opacity:.65}
.section{padding:100px max(6vw,24px);background:transparent;scroll-margin-top:90px}
.section::before{display:none}
.section-inner{max-width:1400px}
.section-welcome{margin-top:-100px;z-index:2;border:0;background:transparent;padding-top:32px}
.section-alt,.section-factions,.section-antiptw{background:transparent;border:0}
.section + .section .section-inner{border-top:1px solid rgba(255,255,255,.07);padding-top:72px}
.text-image-grid,.factions-grid,.antiptw-grid{gap:clamp(32px,6vw,96px);align-items:center}
.section h2{letter-spacing:-.025em;line-height:1.12}
.section-eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.desc{line-height:1.9;color:var(--muted)}
.section-head{max-width:740px;margin:0 auto 48px}.section-head::after{width:42px}
.text-image-visual,.section-welcome .text-image-visual,.factions-image{border-radius:20px;transform:none;border:1px solid #ffffff14;box-shadow:0 25px 65px #0004;overflow:hidden}
.text-image-visual:hover,.section-welcome .text-image-visual:hover,.factions-image:hover{transform:translateY(-5px);box-shadow:0 32px 80px #0006}
.section-welcome .text-image-visual::after{border-radius:12px;border-color:#edc77930}
.text-image-visual img,.factions-image img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.text-image-visual:hover img,.factions-image:hover img{transform:scale(1.035)}
.cards-grid{gap:18px}.card{border-radius:18px;background:linear-gradient(145deg,#15191f,#0c0f14);border:1px solid #ffffff12;padding:32px;box-shadow:none;transition:transform .35s,border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-7px);border-color:#edc77960;box-shadow:0 20px 45px #0004}
.card::before{background:radial-gradient(ellipse at top left,#edc77912,transparent 70%)}
.card-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid #edc77930;border-radius:14px;background:#edc7790c;color:var(--gold);font-size:21px;margin-bottom:26px}
.card h3{font-size:23px;letter-spacing:.01em}.card p{line-height:1.8}
.welcome-stat,.faction-stat{border-radius:12px}.antiptw-item{border-radius:12px}
.btn-primary,.btn-secondary,.nav-actions .btn,.nav-cta,.popup-btn{position:relative;isolation:isolate;overflow:hidden;min-height:48px;border-radius:10px;padding:15px 24px;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.025em;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-primary,.nav-actions .btn{background:linear-gradient(120deg,#e2b660,#ffdfa0);color:#17130b;border:1px solid #ffe5b4;box-shadow:0 5px 20px #edc77916}
.btn-secondary,.nav-cta{background:rgba(255,255,255,.035);border:1px solid #ffffff26;color:#f5f2ea;backdrop-filter:blur(12px)}
.btn-primary::after,.nav-actions .btn::after{content:"";position:absolute;inset:-60% auto -60% -65%;width:35%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#fff6,transparent);transition:left .65s;pointer-events:none}
.btn-primary:hover::after,.nav-actions .btn:hover::after{left:135%}
.btn-primary:hover,.nav-actions .btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #edc77930}
.btn-secondary:hover,.nav-cta:hover{transform:translateY(-3px);border-color:#edc77980;background:#edc7790c;color:var(--gold)}
.btn-primary:active,.btn-secondary:active{transform:translateY(0)}
.btn-primary i,.btn-secondary i{transition:transform .25s}.btn-primary:hover i,.btn-secondary:hover i{transform:translateX(3px)}
[data-reveal]{opacity:1;transform:none}.motion-ready [data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
.cta{margin:50px max(4vw,20px) 80px;border:1px solid #edc77925;border-radius:24px;overflow:hidden;background:#101319}
@media(min-width:1100px){.cards-grid{grid-template-columns:repeat(12,1fr)}.card{grid-column:span 4}.cards-grid:has(>.card:nth-child(4):last-child) .card{grid-column:span 3}}
@media(max-width:1100px){.hero{padding-top:150px}.hero::before{background-position:62% top}.hero-title{font-size:clamp(66px,10vw,110px)}}
@media(max-width:700px){.hero{min-height:900px;padding:150px 24px 200px}.hero::before{background-position:64% top;background-image:linear-gradient(90deg,#07090ce8,#07090c75),linear-gradient(180deg,transparent 20%,#07090c 100%),url('nexo-hero-cinematic.webp')}.hero-title{font-size:clamp(57px,12vw,84px)}.hero-slogan{font-size:18px}.hero-text{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column;max-width:340px}.hero-meta{gap:20px}.hero-meta-item{padding-left:12px}.hero-meta-value{font-size:26px}.section{padding:64px 24px}.section-welcome{padding-top:20px}.section + .section .section-inner{padding-top:50px}.section-welcome .text-image-grid{gap:32px}.cards-grid{grid-template-columns:1fr}.card{padding:26px}.cta{margin:24px 16px 50px;border-radius:18px}.hero-kicker{font-size:10px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready [data-reveal]{opacity:1;transform:none}}

/* Show the entire artwork at its native aspect ratio, without cover cropping. */
.hero{background:#07090c}
.hero-artwork{position:absolute;top:var(--nexo-header-height,88px);left:0;display:block;width:100%;height:auto;max-width:none;z-index:-2;pointer-events:none}
.hero::before{inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,9,12,.65),rgba(7,9,12,.22) 44%,transparent 74%);pointer-events:none}
.hero::after{inset:auto 0 -1px;height:180px;background:linear-gradient(180deg,transparent,#07090c);z-index:0}
.hero-content{z-index:1}
@media(max-width:900px){
 .hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:var(--nexo-header-height,76px) 0 140px}
 .hero-artwork{position:relative;top:auto;left:auto;z-index:0;width:100%;height:auto;flex-shrink:0}
 .hero::before{display:none}
 .hero-content{margin:0;padding:30px 24px 0;width:100%;max-width:none}
 .hero-title{font-size:clamp(57px,10vw,86px)}
 .hero-meta{margin-top:34px}
 .scroll-cue{display:none}
 .section-welcome{margin-top:-50px}
}

/* One shared canvas; fade the artwork at its own edge on every screen. */
:root{--page-bg:#07090c;--page-bg-rgb:7,9,12;--bg:var(--page-bg)}
html,body{background:var(--page-bg)}
body::before,body::after{display:none}
.hero{background:var(--page-bg)}
.hero-artwork{
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.94) 70%,rgba(0,0,0,.65) 81%,rgba(0,0,0,.22) 92%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.94) 70%,rgba(0,0,0,.65) 81%,rgba(0,0,0,.22) 92%,transparent 100%);
}
.hero::after{background:linear-gradient(to bottom,rgba(var(--page-bg-rgb),0),var(--page-bg));border:0}
.section,.section-alt,.section-welcome,.section-factions,.section-antiptw{background:transparent}
footer{background:var(--page-bg)}
@media(max-width:900px){.hero-content{background:var(--page-bg)}}