:root{--ink:#050b0e;--panel:rgba(5,13,16,.94);--soft:rgba(11,20,23,.86);--line:rgba(190,205,202,.32);--line-soft:rgba(190,205,202,.16);--ivory:#eeeae1;--muted:#a7b2b3;--cyan:#9cdde6;--green:#6fd18a;font-family:Georgia,'Times New Roman',serif;color:var(--ivory);background:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--ink);color:var(--ivory)}a{color:inherit;text-decoration:none}.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:#071014}.scene-image{position:absolute;inset:-3%;background:url('assets/vangard-portal-hero-v2.png') center/cover no-repeat;transform:translate3d(calc(var(--mx,0) * -18px),calc(var(--my,0) * -12px),0) scale(1.055);transition:transform .25s ease-out}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,11,.47),rgba(3,9,11,.05) 50%,rgba(3,9,11,.42)),linear-gradient(180deg,rgba(3,9,11,.14),transparent 43%,rgba(3,9,11,.94))}.scene-mist{position:absolute;left:20%;top:36%;width:65vw;height:24vh;border-radius:50%;filter:blur(60px);background:#d6f0f2;opacity:.1;transform:translate3d(calc(var(--mx,0) * 24px),calc(var(--my,0) * 17px),0)}
.top-header{position:fixed;z-index:8;top:0;left:0;right:0;height:82px;padding:0 42px;display:grid;grid-template-columns:270px 1fr 270px;align-items:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(3,10,13,.97),rgba(3,10,13,.78));box-shadow:0 12px 40px #0005;backdrop-filter:blur(13px)}.brand{display:flex;align-items:center;gap:13px;width:max-content}.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px #7bd6e533)}.brand strong{display:block;font-size:20px;font-weight:400;letter-spacing:.17em}.brand small{display:block;margin-top:4px;color:#aeb9b8;font-size:7px;letter-spacing:.22em}.top-header nav{height:100%;display:flex;align-items:center;justify-content:center;gap:36px}.top-header nav a{position:relative;height:100%;display:flex;align-items:center;color:#bdc7c5;font-size:10px;letter-spacing:.13em;text-transform:uppercase;transition:.18s}.top-header nav a:after{position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--cyan);content:"";transition:.2s}.top-header nav a:hover,.top-header nav a.active{color:#fff}.top-header nav a:hover:after,.top-header nav a.active:after{left:0;right:0}.header-download{justify-self:end;min-height:40px;padding:0 17px;display:flex;align-items:center;gap:14px;border:1px solid var(--line);color:#dce4e1;font-size:9px;letter-spacing:.12em;text-transform:uppercase;transition:.18s}.header-download span{color:var(--cyan);font-size:15px}.header-download:hover{border-color:var(--cyan);background:#83dce813}
.page{position:relative;z-index:1}.hero{position:relative;min-height:100vh;padding:0 34px;overflow:hidden}.hero blockquote{position:absolute;right:40px;top:118px;margin:0;text-align:right;color:#edf0ee;font-size:12px;line-height:1.85;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 8px #000}.hero blockquote small{display:block;margin-top:12px;color:#aebbbb;font-size:8px}.hero-copy{position:absolute;left:64px;bottom:98px;width:min(510px,calc(100% - 440px));text-shadow:0 3px 16px #000;transform:translate3d(calc(var(--mx,0) * 7px),calc(var(--my,0) * 4px),0);transition:transform .25s ease-out}.eyebrow{margin:0;color:var(--cyan);font-size:9px;font-weight:700;letter-spacing:.24em}.hero h1{margin:13px 0 15px;font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1.06;letter-spacing:.07em;text-transform:uppercase}.hero-rule{width:265px;height:1px;background:linear-gradient(90deg,#e8e2d7,transparent)}.hero-lede{margin:16px 0 30px;text-transform:uppercase;letter-spacing:.17em;font-size:12px}.play-button{width:100%;min-height:82px;padding:0 23px;display:flex;align-items:center;gap:20px;border:2px solid var(--cyan);outline:1px solid #bde6eabb;outline-offset:3px;background:linear-gradient(120deg,#263438f5,#040b0ef7);box-shadow:inset 0 0 0 4px #02080bd9,0 0 30px #5ccdde30;text-transform:uppercase;transition:.2s}.play-button:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 4px #02080bd9,0 0 42px #5ccdde59}.play-icon{font-size:31px}.play-button>span:nth-child(2){flex:1}.play-button strong{display:block;font-size:23px;font-weight:400;letter-spacing:.08em}.play-button small{display:block;margin-top:6px;color:#c4ccca;font-size:9px;letter-spacing:.17em}.play-button>b{color:var(--cyan);font-size:30px;font-weight:400}.quiet-link{display:inline-block;margin-top:17px;color:#d2d8d6;font-size:10px;letter-spacing:.11em;text-transform:uppercase}.quiet-link span{margin-left:10px;color:var(--cyan)}
.chronicle-panel{position:absolute;right:38px;top:235px;width:348px;padding:21px;border:1px solid #bbc8c594;background:linear-gradient(130deg,#0c1417f6,#02080af2);box-shadow:0 25px 68px #0007}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-heading h2{margin:0;font-size:18px;font-weight:400;letter-spacing:.1em;text-transform:uppercase}.panel-heading a{font-size:8px;color:#c2cac8;letter-spacing:.11em;text-transform:uppercase}.chronicle{display:grid;grid-template-columns:108px 1fr;gap:13px;padding-top:13px;margin-top:13px;border-top:1px solid var(--line)}.thumb{min-height:72px;border:1px solid var(--line);background-image:linear-gradient(#050c150f,#050c1547),url('assets/vangard-portal-hero-v2.png');background-size:560%}.origin .thumb{background-position:52% 22%}.roads .thumb{background-position:77% 59%}.people .thumb{background-position:34% 73%}.chronicle span,.story-grid article>span{color:var(--cyan);font-size:8px;letter-spacing:.15em}.chronicle h3{margin:5px 0 4px;font-size:14px;font-weight:400}.chronicle p{margin:0;color:#9faaaa;font-size:9px;line-height:1.45}.server-bar{position:absolute;left:0;right:0;bottom:0;height:62px;padding:0 28px;display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);background:#03090cf3}.online-dot{width:9px;height:9px;border-radius:50%;background:#7d9ec9;box-shadow:0 0 0 4px #7d9ec91c}.online-dot.online{background:var(--green);box-shadow:0 0 12px #6fd18abb}.online-dot.offline{background:#de776c}.server-bar strong{font-size:11px;font-weight:400;letter-spacing:.07em;text-transform:uppercase}.server-bar small{color:#879496;font-size:9px}.server-bar a{margin-left:auto;color:#bac5c3;font-size:9px;letter-spacing:.11em;text-transform:uppercase}
.section{position:relative;padding:120px 7vw;background:linear-gradient(115deg,rgba(4,11,14,.98),rgba(8,17,21,.94));border-top:1px solid var(--line-soft)}.section-heading{max-width:620px}.section-heading h2,.download h2,.community h2{margin:12px 0 18px;font-size:clamp(38px,5vw,66px);font-weight:400;line-height:1.02;letter-spacing:.02em}.section-heading>p:last-child,.download>div>p:last-child,.community>div>p:last-child{max-width:560px;color:var(--muted);font-size:15px;line-height:1.7}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:55px}.story-grid article{min-height:285px;padding:34px 28px;border:1px solid var(--line);background:linear-gradient(145deg,#101b1edd,#050b0edb);box-shadow:0 20px 50px #0003}.story-grid h3{margin:12px 0 14px;font-size:25px;font-weight:400}.story-grid p{color:#a7b2b2;font-size:13px;line-height:1.65}.guide{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.steps{border-top:1px solid var(--line)}.steps article{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:27px 0;border-bottom:1px solid var(--line-soft)}.steps article>span{color:var(--cyan);font-size:10px;letter-spacing:.14em}.steps h3{margin:0 0 7px;font-size:22px;font-weight:400}.steps p{margin:0;color:#9eaaaa;font-size:13px;line-height:1.55}code{color:#d4f5f7;font-family:Consolas,monospace}.download{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center;background:linear-gradient(115deg,#071216f7,#0d1c20f2)}.download-card{min-height:115px;padding:21px 24px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:17px;border:2px solid var(--cyan);outline:1px solid #bde6eaa1;outline-offset:3px;background:linear-gradient(120deg,#263438eb,#040b0ef5);transition:.2s}.download-card:hover{transform:translateY(-3px);box-shadow:0 0 34px #5ccdde4a}.download-card>span{font-size:31px}.download-card strong,.download-card small{display:block}.download-card strong{font-size:22px;font-weight:400}.download-card small{margin-top:6px;color:#a8b3b3;font-size:10px;letter-spacing:.08em}.download-card>b{align-self:start;color:#899696;font-size:9px;letter-spacing:.13em}.community{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:32px}.community-mark{color:var(--cyan);font-size:70px;opacity:.72}.community h2{font-size:clamp(34px,4.2vw,55px)}.outline-button{min-height:49px;padding:0 21px;display:inline-flex;align-items:center;border:1px solid var(--line);text-transform:uppercase;font-size:10px;letter-spacing:.11em;white-space:nowrap}.outline-button:hover{border-color:var(--cyan);background:#7bd7e516}footer{padding:25px 7vw 34px;display:flex;justify-content:space-between;background:#03090c;color:#697777;font-size:9px;letter-spacing:.14em}
@media(max-width:1050px){.top-header{grid-template-columns:220px 1fr 190px;padding:0 25px}.top-header nav{gap:20px}.chronicle-panel{width:305px}.hero-copy{width:calc(100% - 350px);left:38px}.hero h1{font-size:43px}.play-button strong{font-size:18px}}
@media(max-width:820px){.scene-image{background-position:58% center}.top-header{height:70px;padding:0 20px;display:flex;justify-content:space-between}.brand{gap:9px}.brand img{width:43px;height:43px}.brand strong{font-size:15px}.brand small{font-size:6px}.top-header nav{display:none}.header-download{min-height:38px;padding:0 14px;font-size:8px}.header-download span{display:none}.hero{min-height:850px;padding-top:70px}.hero blockquote{top:98px;right:20px;font-size:9px}.hero-copy{left:24px;right:24px;bottom:96px;width:auto}.hero h1{font-size:48px}.chronicle-panel{display:none}.section{padding:82px 25px}.story-grid{grid-template-columns:1fr}.guide,.download{grid-template-columns:1fr;gap:45px}.community{grid-template-columns:1fr;gap:22px}.community-mark{font-size:48px}footer{padding-left:25px;padding-right:25px}}
@media(max-width:480px){.hero{min-height:790px}.hero h1{font-size:39px}.play-button{min-height:72px;padding:0 17px}.play-button strong{font-size:17px}.play-icon{font-size:25px}.server-bar{padding:0 18px}.server-bar small{display:none}.section-heading h2,.download h2,.community h2{font-size:36px}.download-card{grid-template-columns:30px 1fr}.download-card>b{display:none}footer{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-image,.scene-mist,.hero-copy,.play-button,.download-card{transition:none;transform:none}}