/* Unified responsive layout for every public page. */
:root{--content-width:1180px;--page-gutter:clamp(20px,4vw,48px);--fg2:#b1bbce;--fg3:#8895ac}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body,body.scroll-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;height:auto;overflow-x:hidden;overflow-y:auto;background:radial-gradient(ellipse at 50% 0,#12213b 0,#090e19 38%,#070b13 75%)}
#particles-canvas{opacity:.23}
nav{position:sticky;top:0;z-index:1000;flex:0 0 auto;width:100%;min-height:64px;height:auto;padding:10px clamp(16px,2.5vw,32px);gap:16px;box-shadow:0 8px 32px rgba(0,0,0,.14)}
.nav-left,.nav-right{flex:0 0 auto}.nav-tabs{min-width:0}.nav-tab,.nav-link,.discord-btn{font-size:.875rem}
main.page-view,body.scroll-page main.page-view{display:flex;flex:1 0 auto;flex-direction:column;width:100%;min-height:0;height:auto;padding:0}
.page,body.scroll-page .page{display:none}
.page.active,body.scroll-page .page.active{display:flex;flex:1 0 auto;flex-direction:column;width:100%;min-height:0;overflow:visible}
.page-head,body.scroll-page #page-products .page-head{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-width));margin:0 auto;padding:clamp(48px,7vw,84px) 0 0;text-align:center}
.page-head h1,body.scroll-page #page-products .page-head h1{font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.08;letter-spacing:-.045em}
.page-head p,#page-products .page-head p{max-width:680px;margin:12px auto 0;font-size:1rem;line-height:1.6;letter-spacing:0;text-transform:none}

/* Home */
#page-home .hero{display:flex;flex:1 0 auto;align-items:center;width:100%;min-height:0;padding:clamp(48px,7vw,88px) var(--page-gutter)}
#page-home .hero-inner,#page-home .info-grid{width:100%;max-width:var(--content-width);margin-inline:auto}
#page-home .hero-inner{grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:clamp(40px,6vw,76px)}
#page-home .hero-title{max-width:720px;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.04}
#page-home .hero-lead{max-width:590px;font-size:1rem;line-height:1.7}
#page-home .hero-note{font-size:.8125rem}
#page-home .info-section{width:100%;padding:0 var(--page-gutter) clamp(40px,5vw,64px)}
#page-home .info-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#page-home .info-card{min-width:0;padding:22px}
#page-home .info-title{font-size:.9375rem}
#page-home .info-desc{font-size:.875rem;line-height:1.6}

/* Products */
#page-products .products,body.scroll-page #page-products .products{width:100%;padding:clamp(28px,4vw,48px) var(--page-gutter) clamp(48px,7vw,84px)}
#page-products .stack{width:100%;max-width:var(--content-width);margin-inline:auto;gap:28px}
#page-products .pcard,#page-products .combo-features{border:1px solid #23324b;border-radius:24px;background:linear-gradient(130deg,#111b2b,#0c121e);box-shadow:0 20px 70px rgba(0,0,0,.22)}
#page-products .pcard{grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);align-items:stretch}
#page-products .pcard-main,#page-products .pcard-aside{padding:clamp(26px,3vw,38px)}
#page-products .card-title{font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.04em}
#page-products .card-version{max-width:62ch;margin-bottom:20px;font-size:.9375rem;line-height:1.65}
#page-products .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#page-products .feat-item{min-width:0;padding:14px;gap:7px;border:1px solid #233149;border-radius:12px;background:rgba(255,255,255,.025)}
#page-products .feat-name{font-size:.875rem}
#page-products .feat-desc{padding-left:15px;font-size:.8125rem;line-height:1.45}
#page-products .pcard-aside{justify-content:center;gap:10px;border-top:0;border-left:1px solid var(--border);background:radial-gradient(ellipse at 100% 0,#203c65,transparent 80%),#101c30}
#page-products .aside-label{font-size:.75rem}
#page-products .aside-price b{font-size:clamp(2.8rem,4vw,3.7rem)}
#page-products .aside-note,#page-products .aside-perks li{font-size:.875rem;line-height:1.55}
#page-products .aside-fine{font-size:.75rem;line-height:1.5}
#page-products .pcard-aside .card-btn{display:flex;min-height:52px;margin-top:12px;align-items:center;justify-content:center;gap:12px}
#page-products .combo-features{grid-template-columns:minmax(300px,.85fr) minmax(0,1.25fr);gap:clamp(28px,4vw,48px);padding:clamp(26px,3vw,38px)}
#page-products .cf-text h2{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em}
#page-products .cf-text>p{font-size:.9375rem;line-height:1.65}
#page-products .cf-list b{font-size:.9375rem}
#page-products .cf-list span{font-size:.8125rem;line-height:1.45}
#page-products .slider-container{width:100%;max-width:none;min-width:0;height:auto;aspect-ratio:1440/690;background:#101725;box-shadow:0 16px 40px rgba(0,0,0,.28)}
#page-products .slider-wrapper,#page-products .slider-track{width:100%;height:100%}
#page-products .slider-slide{flex:0 0 100%;min-width:0}
#page-products .slider-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#page-products .slider-overlay{display:none}

/* Hardware */
#page-hardware .hw{width:100%;padding:clamp(48px,7vw,84px) var(--page-gutter)}
#page-hardware .hw-wrap{width:100%;max-width:var(--content-width);margin-inline:auto}
#page-hardware .hw-hero,#page-hardware .hw-boxes,#page-hardware .hw-cards{width:100%}
#page-hardware .hw-hero h1{font-size:clamp(2.4rem,4.7vw,4.2rem);line-height:1.04}
#page-hardware .hw-hero p{font-size:1rem;line-height:1.7}
#page-hardware .hw-req-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#page-hardware .hw-req{align-items:center;min-height:92px}
#page-hardware .hw-req{flex-direction:column;justify-content:center;padding:14px 10px;gap:7px;text-align:center}
#page-hardware .hw-req svg{width:20px;height:20px}
#page-hardware .hw-req div{align-items:center;justify-content:center;min-width:0;width:100%}
#page-hardware .hw-req span{display:flex;align-items:center;justify-content:center;min-height:2.4em;line-height:1.2}
#page-hardware .hw-req b{display:block;min-height:1.25em;overflow-wrap:anywhere;font-size:.72rem}

/* FAQ */
#page-faq{justify-content:center}
#page-faq .page-head{padding-top:clamp(48px,7vw,76px)}
#page-faq .faq-section{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-width));margin:0 auto;padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,84px)}
#page-faq .faq-title{display:none}
#page-faq .faq-grid{width:100%;max-width:100%;grid-template-columns:1fr;gap:12px}
#page-faq .faq-question{padding:18px 20px;font-size:.9375rem}
#page-faq .faq-answer p{padding:0 20px 18px;font-size:.875rem;line-height:1.65}
#page-faq .faq-cta{margin-top:24px}

/* Compact vertical rhythm on the first and fourth pages. */
#page-home.active{justify-content:center;gap:24px}
#page-home .hero{flex:0 0 auto;min-height:auto;padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(28px,4vw,52px)}
#page-home .info-section{padding-bottom:clamp(28px,4vw,48px)}
#page-faq.active{justify-content:center}
#page-faq .page-head{padding-top:clamp(32px,4vw,52px)}
#page-faq .faq-section{padding-top:clamp(20px,2.5vw,32px);padding-bottom:clamp(28px,4vw,48px)}

footer,body.scroll-page footer{flex:0 0 auto;width:100%;margin-top:0;padding:20px var(--page-gutter);background:rgba(255,255,255,.015);border-top:1px solid rgba(255,255,255,.06)}
.footer-content{width:100%;max-width:var(--content-width);margin-inline:auto}
.hero-inner,.pcard-main,.pcard-aside,.combo-features>*,.hw-row>*,.summary-head>div{min-width:0}

/* Full-HD desktop scale: keep the interface readable without making it feel zoomed in. */
@media(min-width:1200px){
 :root{--content-width:1080px;--page-gutter:32px}
 nav{min-height:58px;padding:8px 24px;gap:12px}
 .nav-brand{font-size:.95rem}.nav-tab,.nav-link,.discord-btn{font-size:.8rem}
 .page-head,body.scroll-page #page-products .page-head{padding-top:40px}
 .page-head h1,body.scroll-page #page-products .page-head h1{font-size:clamp(1.8rem,3.4vw,3rem)}
 #page-home .hero{padding-top:38px;padding-bottom:38px}
 #page-home .hero-title{font-size:clamp(2.2rem,4vw,3.8rem)}
 #page-home .hero-lead{font-size:.9rem}
 #page-home .info-section{padding-bottom:36px}
 #page-products .products{padding-top:28px;padding-bottom:48px}
 #page-products .pcard-main,#page-products .pcard-aside,#page-products .combo-features{padding:28px}
 #page-hardware .hw{padding-top:40px;padding-bottom:48px}
 #page-hardware .hw-hero h1{font-size:clamp(2.2rem,4vw,3.5rem)}
 #page-faq .page-head{padding-top:40px}
}
@media(max-width:900px){#page-hardware .hw-req-row{grid-template-columns:repeat(2,minmax(0,1fr))}#page-hardware .hw-req-row .hw-req:first-child{grid-column:1/-1}#page-hardware .hw-req{min-height:82px}}
@media(max-width:620px){#page-hardware .hw-req{min-height:76px}#page-hardware .hw-req span{min-height:0}}

@media(max-width:1100px){
 nav{flex-wrap:wrap;justify-content:space-between}
 .nav-tabs{order:3;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.nav-tabs::-webkit-scrollbar{display:none}.nav-tab{flex:0 0 auto;padding:10px 13px}
 #page-home .hero-inner{grid-template-columns:minmax(0,1fr);max-width:760px}
 #page-home .hero-copy{text-align:center}#page-home .hero-lead{margin-inline:auto}#page-home .hero-cta{justify-content:center}
 #page-home .hero-visual{width:100%;max-width:700px;margin-inline:auto}
 #page-home .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
}
@media(max-width:900px){
 :root{--page-gutter:20px}
 #page-products .pcard,#page-products .combo-features{grid-template-columns:minmax(0,1fr)}
 #page-products .pcard-aside{border-top:1px solid var(--border);border-left:0}
 #page-products .slider-container{order:-1}
 #page-hardware .hw-hero{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
 :root{--page-gutter:16px}
 nav{gap:8px;padding:10px 12px}.nav-left{gap:7px}.nav-brand{font-size:.9rem;letter-spacing:0}.nav-right{gap:6px;min-width:0}
 nav .discord-btn,nav .nav-discord,nav .rz-pill{padding:9px;font-size:.7rem}.nav-tab{font-size:.75rem}
 .page-head,body.scroll-page #page-products .page-head{padding-top:40px}.page-head p,#page-products .page-head p{font-size:.9375rem}
 #page-home .hero{padding-top:28px;padding-bottom:28px}#page-home .hero-title{font-size:clamp(2.15rem,11vw,3.2rem)}
 #page-home .hero-cta{flex-direction:column;align-items:stretch}#page-home .hero-cta a{width:100%;justify-content:center}
 #page-home .flow{flex-wrap:wrap;justify-content:center}#page-home .flow-arrow{display:none}#page-home .flow-step{flex:0 0 calc(50% - 8px)}
 #page-home .info-grid{grid-template-columns:minmax(0,1fr)}
 #page-products .features-grid{grid-template-columns:minmax(0,1fr)}
 #page-products .pcard-main,#page-products .pcard-aside,#page-products .combo-features{padding:22px 18px}
 #page-products .slider-container{aspect-ratio:16/9}
 #page-hardware .hw-box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #page-hardware .hw-cards-head{align-items:flex-start;flex-direction:column}
 #page-faq .faq-question{padding:16px}#page-faq .faq-answer p{padding:0 16px 16px}
 #page-faq .faq-cta{align-items:stretch;flex-direction:column}#page-faq .faq-cta .btn-main{width:100%;justify-content:center}
 .footer-content{flex-direction:column;text-align:center;gap:12px}.footer-links{justify-content:center;flex-wrap:wrap}
}
/* Polished hardware requirements */
#page-hardware .hw-reqs{padding:18px;border:1px solid rgba(148,163,184,.12);border-radius:22px;background:linear-gradient(145deg,rgba(18,29,48,.72),rgba(8,14,25,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 50px rgba(0,0,0,.16)}
#page-hardware .hw-reqs-title{margin-bottom:14px;color:#dce5f3;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#page-hardware .hw-reqs-title::after{background:linear-gradient(90deg,rgba(96,165,250,.3),transparent)}
#page-hardware .hw-req-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
#page-hardware .hw-req{position:relative;isolation:isolate;min-height:150px;padding:18px 13px;border-color:rgba(148,163,184,.16);border-radius:18px;background:linear-gradient(155deg,rgba(25,38,60,.82),rgba(14,21,35,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 30px rgba(0,0,0,.16);overflow:hidden}
#page-hardware .hw-req::before{content:"";position:absolute;z-index:-1;inset:auto -24px -42px auto;width:90px;height:90px;border-radius:50%;background:rgba(59,130,246,.1);filter:blur(18px)}
#page-hardware .hw-req:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 38px rgba(0,0,0,.26)}
#page-hardware .hw-req svg{box-sizing:content-box;width:22px;height:22px;padding:9px;border:1px solid rgba(96,165,250,.2);border-radius:12px;background:rgba(59,130,246,.09);stroke:#8ec5ff}
#page-hardware .hw-req div{gap:7px}
#page-hardware .hw-req span{min-height:0;color:#8492a8;font-size:.57rem;font-weight:700;letter-spacing:.14em}
#page-hardware .hw-req b{min-height:0;color:#f8fafc;font-size:.82rem;line-height:1.32;letter-spacing:-.015em}
#page-hardware .hw-req.is-rec{border-color:rgba(52,211,153,.55);background:linear-gradient(155deg,rgba(10,54,51,.68),rgba(8,27,29,.9));box-shadow:inset 0 1px 0 rgba(110,231,183,.08),0 18px 40px rgba(16,185,129,.1)}
#page-hardware .hw-req.is-rec::before{background:rgba(16,185,129,.2)}
#page-hardware .hw-req.is-rec svg{border-color:rgba(110,231,183,.28);background:rgba(16,185,129,.11);stroke:#6ee7b7}
#page-hardware .hw-req.is-rec b{color:#ecfff8}
@media(max-width:900px){#page-hardware .hw-req-row{grid-template-columns:repeat(2,minmax(0,1fr))}#page-hardware .hw-req-row .hw-req:first-child{grid-column:1/-1}#page-hardware .hw-req{min-height:132px}}
@media(max-width:520px){#page-hardware .hw-reqs{padding:14px}#page-hardware .hw-req-row{grid-template-columns:1fr}#page-hardware .hw-req-row .hw-req:first-child{grid-column:auto}#page-hardware .hw-req{min-height:118px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page.is-entering,.page.is-leaving,.page-head h1,.page-head p{animation:none}}
