/* VGS33 reference-essence design system: original implementation, informed by a modern technology landing-page rhythm. */
:root {
  --void: #06150f;
  --void-soft: #0a2118;
  --panel: rgba(10, 31, 23, .74);
  --panel-strong: rgba(7, 25, 18, .94);
  --panel-raised: rgba(16, 51, 37, .86);
  --line: rgba(158, 255, 209, .14);
  --line-bright: rgba(104, 255, 182, .4);
  --ink: #f1fff7;
  --muted: #a7c8b6;
  --muted-strong: #d7f4e3;
  --violet: #23dd91;
  --violet-bright: #76ffc0;
  --violet-deep: #11895b;
  --violet-faint: rgba(35, 221, 145, .12);
  --violet-glow: rgba(35, 221, 145, .34);
  --content-max: 1180px;
  --page-gutter: clamp(1rem, 3vw, 2.2rem);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

html { background: #06150f; }
body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 54% -22%, rgba(31, 159, 108, .23), transparent 38%),
    linear-gradient(180deg, #081a13 0%, #06130e 56%, #071b13 100%);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before, body::after { display: none; }
body.page-home { background: linear-gradient(180deg, #081a13 0%, #06130e 56%, #071b13 100%); animation: none; }
body.page-home::before { display: none; }

.ref-ambient, .ref-grid, .ref-noise { position: fixed; inset: 0; pointer-events: none; }
.ref-ambient { z-index: 0; overflow: hidden; }
.ref-ambient::before, .ref-ambient::after { position: absolute; border-radius: 50%; content: ""; filter: blur(96px); will-change: transform; }
.ref-ambient::before { top: -12rem; left: -14rem; width: min(58vw, 780px); height: min(58vw, 780px); background: rgba(15, 213, 135, .22); animation: ref-aurora-left 17s ease-in-out infinite alternate; }
.ref-ambient::after { top: 8rem; right: -17rem; width: min(52vw, 710px); height: min(52vw, 710px); background: rgba(41, 160, 114, .18); animation: ref-aurora-right 21s ease-in-out infinite alternate; }
.ref-grid { z-index: 0; opacity: .38; background-image: linear-gradient(rgba(128, 255, 195, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 255, 195, .045) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, black, transparent 80%); transform: perspective(900px) rotateX(64deg) scale(1.55) translateY(-7%); transform-origin: top; animation: ref-grid-flow 20s linear infinite; }
.ref-noise { z-index: 80; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cosmic-canvas, .vgs-motion-field, .scan-noise { display: none !important; }
.site-shell, .site-footer { position: relative; z-index: 1; }

.container { width: min(var(--content-max), 100%); padding-inline: var(--page-gutter); }
.section { padding: clamp(5rem, 9vw, 8.5rem) 0; }
.section::before { display: none; }
.section--compact { padding: clamp(3.4rem, 6vw, 5.2rem) 0; }
a { transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; }
img { max-width: 100%; }

/* Shared shell */
.site-header { position: sticky; z-index: 70; top: 0; border-bottom: 1px solid transparent; background: rgba(6, 21, 15, .38); backdrop-filter: blur(14px) saturate(130%); box-shadow: none; }
.site-header.is-scrolled { border-color: var(--line); background: rgba(6, 21, 15, .84); box-shadow: 0 14px 42px rgba(0,0,0,.16); }
.header-inner { min-height: 76px; gap: 1.25rem; }
.brand { gap: .65rem; }
.brand img { width: 154px; filter: drop-shadow(0 5px 16px rgba(0,255,157,.08)); }
.primary-nav { gap: .22rem; }
.primary-nav a { padding: .6rem .55rem; color: #b5d5c3; font-family: var(--body); font-size: .78rem; font-weight: 720; }
.primary-nav a::after { right: .55rem; bottom: .28rem; left: .55rem; background: linear-gradient(90deg, transparent, var(--violet-bright), transparent); box-shadow: none; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: #f4fff8; }
.header-actions { gap: .55rem; }
.btn { min-height: 43px; padding: .68rem 1rem; border-radius: 13px; font-family: var(--body); font-size: .79rem; font-weight: 780; }
.btn--primary, .btn--register { color: #032617; background: linear-gradient(108deg, #43e99e, #95ffc7); box-shadow: 0 14px 38px rgba(35,221,145,.18), inset 0 1px rgba(255,255,255,.55); }
.btn--primary:hover, .btn--register:hover { box-shadow: 0 19px 44px rgba(35,221,145,.3), inset 0 1px rgba(255,255,255,.55); }
.btn--login, .btn--ghost { border-color: var(--line-bright); background: rgba(255,255,255,.028); }
.btn--login:hover, .btn--ghost:hover { background: rgba(115,255,190,.09); }
.nav-toggle { border-color: var(--line); background: rgba(255,255,255,.035); }
.scroll-meter { z-index: 100; height: 2px; background: transparent; }.scroll-meter span { background: linear-gradient(90deg, #22dc91, #9affc8); box-shadow: 0 0 14px rgba(118,255,192,.75); }

/* Homepage */
.vgs-ref-home { overflow: hidden; }
.vgs-ref-hero { padding: clamp(5.1rem, 8vw, 7.6rem) 0 3.2rem; }
.vgs-ref-hero__layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); gap: clamp(2.6rem, 7vw, 6.6rem); align-items: center; min-height: 630px; }
.ref-eyebrow, .ref-kicker { display: inline-flex; align-items: center; gap: .55rem; color: #c8e6d7; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ref-eyebrow { padding: .48rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); }
.ref-pulse { width: 7px; height: 7px; border-radius: 50%; background: #77ffc0; box-shadow: 0 0 0 0 rgba(119,255,192,.42); animation: ref-pulse 2.1s infinite; }
.vgs-ref-hero h1 { max-width: 10ch; margin: 1.35rem 0 1.25rem; color: #f4fff9; font-family: var(--display); font-size: clamp(3.6rem, 6.5vw, 6.85rem); font-weight: 700; letter-spacing: -.075em; line-height: .91; }
.vgs-ref-hero h1 span { display: block; color: transparent; background: linear-gradient(95deg, #edfff5 6%, #69f5b0 55%, #a2ffd0 94%); -webkit-background-clip: text; background-clip: text; }
.vgs-ref-hero__lede { max-width: 56ch; margin: 0; color: #b1cfbd; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.78; }
.vgs-ref-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ref-outline-link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 43px; padding: .68rem 1rem; border: 1px solid var(--line-bright); border-radius: 13px; color: #defeee; font-size: .79rem; font-weight: 760; background: rgba(255,255,255,.025); }
.ref-outline-link:hover { border-color: #8dffc8; background: rgba(115,255,190,.09); transform: translateY(-2px); }
.ref-principles { display: flex; flex-wrap: wrap; gap: .85rem 1.4rem; padding: 0; margin: 2.05rem 0 0; list-style: none; color: #a4c5b3; font-size: .73rem; }
.ref-principles li { display: inline-flex; align-items: center; gap: .42rem; }.ref-principles b { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border: 1px solid rgba(119,255,192,.28); border-radius: 6px; color: #71ffc0; font-size: .62rem; }

.ref-console-wrap { position: relative; perspective: 1300px; }
.ref-console-wrap::before, .ref-console-wrap::after { position: absolute; z-index: -1; border: 1px solid rgba(121,255,196,.16); border-radius: 50%; content: ""; pointer-events: none; }.ref-console-wrap::before { top: -9rem; left: -7rem; width: 40rem; height: 40rem; animation: ref-orbit 28s linear infinite; }.ref-console-wrap::after { top: -4rem; left: -1rem; width: 31rem; height: 31rem; border-style: dashed; animation: ref-orbit 20s linear infinite reverse; }
.ref-console { overflow: hidden; border: 1px solid rgba(164,255,215,.23); border-radius: 24px; background: linear-gradient(145deg, rgba(19,60,43,.95), rgba(6,20,14,.97)); box-shadow: 0 42px 110px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.07); transform: rotateY(-4deg) rotateX(1.5deg); transform-origin: center; transition: transform 220ms ease; }.ref-console-wrap:hover .ref-console { transform: rotateY(-1deg) rotateX(.5deg) translateY(-3px); }
.ref-console::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(112deg, rgba(255,255,255,.08), transparent 22%, transparent 69%, rgba(110,255,190,.04)); }
.ref-console__bar { display: flex; align-items: center; gap: .85rem; min-height: 48px; padding: 0 1rem; border-bottom: 1px solid var(--line); color: #c6dfd2; font-size: .64rem; font-weight: 720; letter-spacing: .04em; }.ref-console__dots { display: flex; gap: .34rem; }.ref-console__dots i { width: .42rem; height: .42rem; border-radius: 50%; background: #ff8585; }.ref-console__dots i:nth-child(2) { background: #ffe080; }.ref-console__dots i:nth-child(3) { background: #76ffc0; }.ref-console__state { display: inline-flex; align-items: center; gap: .36rem; padding: .26rem .46rem; margin-left: auto; border: 1px solid rgba(119,255,192,.2); border-radius: 999px; color: #a2ffd0; background: rgba(119,255,192,.06); font-size: .55rem; text-transform: uppercase; }.ref-console__state::before { width: .3rem; height: .3rem; border-radius: 50%; content: ""; background: #77ffc0; box-shadow: 0 0 8px #77ffc0; }
.ref-console__body { display: grid; grid-template-columns: 52px 1fr; min-height: 458px; }.ref-console__rail { display: flex; flex-direction: column; align-items: center; gap: 1.05rem; padding-top: 1.25rem; border-right: 1px solid var(--line); background: rgba(3,14,9,.26); }.ref-console__rail span { width: 17px; height: 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }.ref-console__rail span:first-child { border-color: rgba(119,255,192,.42); background: rgba(119,255,192,.12); box-shadow: 0 0 16px rgba(119,255,192,.1); }.ref-console__content { padding: 1.35rem; }.ref-console__heading { display: flex; justify-content: space-between; gap: .6rem; align-items: start; }.ref-console__heading span { display: block; color: #9ab9a7; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }.ref-console__heading strong { display: block; margin-top: .18rem; color: #f3fff8; font-family: var(--display); font-size: 1.2rem; letter-spacing: -.035em; }.ref-console__tag { padding: .3rem .45rem; border: 1px solid rgba(119,255,192,.16); border-radius: 8px; color: #b5d6c3; font-size: .56rem; }
.ref-console__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1rem; }.ref-console__card { padding: .68rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }.ref-console__card span { display: block; color: #92b9a4; font-size: .55rem; }.ref-console__card b { display: block; margin: .35rem 0 .12rem; color: #f0fff7; font-size: .75rem; }.ref-console__card small { color: #72faba; font-size: .55rem; }
.ref-console__main-card { position: relative; min-height: 190px; padding: 1rem; margin-top: .65rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(35,138,90,.11), rgba(255,255,255,.015)); }.ref-console__main-card > span { display: block; color: #9ab9a7; font-size: .58rem; }.ref-console__main-card strong { display: block; margin-top: .25rem; color: #f2fff8; font-size: 1.08rem; }.ref-console__main-card p { max-width: 34ch; margin: .35rem 0 0; color: #a9c7b5; font-size: .66rem; line-height: 1.55; }.ref-console__lines { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; height: 78px; background: linear-gradient(rgba(138,255,202,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(138,255,202,.07) 1px, transparent 1px); background-size: 24px 24px; }.ref-console__lines svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.ref-console__lines path { fill: none; stroke: url(#vgsChartStroke); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(118,255,192,.55)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: ref-draw-line 2.1s .35s ease forwards; }
.ref-console__notes { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .65rem; }.ref-console__note { display: flex; gap: .5rem; align-items: start; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }.ref-console__note i { display: grid; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 6px; color: #052617; background: #76ffc0; font-style: normal; font-size: .55rem; font-weight: 900; }.ref-console__note b, .ref-console__note small { display: block; }.ref-console__note b { color: #e9fff2; font-size: .62rem; }.ref-console__note small { margin-top: .12rem; color: #9ab9a7; font-size: .55rem; line-height: 1.4; }
.ref-floating { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border: 1px solid rgba(162,255,213,.22); border-radius: 12px; background: rgba(8,31,21,.83); box-shadow: 0 16px 44px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(12px); animation: ref-float 5s ease-in-out infinite; }.ref-floating--left { bottom: 2.6rem; left: -1.9rem; }.ref-floating--right { top: 3.6rem; right: -1.5rem; animation-delay: -2.4s; }.ref-floating i { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: 8px; color: #032416; background: #79ffc1; font-style: normal; font-size: .65rem; }.ref-floating span, .ref-floating b { display: block; }.ref-floating span { color: #a3c5b2; font-size: .56rem; }.ref-floating b { margin-top: .1rem; color: #f0fff6; font-size: .67rem; }

.vgs-ref-strip { padding: 1.5rem 0 0; }.vgs-ref-strip__inner { display: flex; justify-content: space-between; gap: 1.4rem; padding: 1.35rem 0; border-top: 1px solid var(--line); color: #91b3a1; font-size: .67rem; font-weight: 720; letter-spacing: .09em; text-align: center; text-transform: uppercase; }.vgs-ref-strip__inner b { color: #c9eed9; font-weight: 760; }
.vgs-ref-section-head { display: flex; align-items: end; justify-content: space-between; gap: clamp(2rem, 7vw, 6.5rem); margin-bottom: 2.7rem; }.vgs-ref-section-head h2, .vgs-ref-split__copy h2, .vgs-ref-safety__copy h2 { max-width: 13ch; margin: .65rem 0 0; color: #effff5; font-family: var(--display); font-size: clamp(2.3rem, 4.8vw, 4.35rem); font-weight: 700; letter-spacing: -.065em; line-height: .96; }.vgs-ref-section-head h2 em, .vgs-ref-split__copy h2 em, .vgs-ref-safety__copy h2 em { color: #7dffc4; font-style: normal; }.vgs-ref-section-head > p { max-width: 42ch; margin: 0; color: #a8c8b6; font-size: .93rem; line-height: 1.7; }
.vgs-ref-routes { background: linear-gradient(180deg, transparent, rgba(19,78,53,.18), transparent); }.vgs-ref-route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.vgs-ref-route { position: relative; display: flex; min-height: 286px; flex-direction: column; padding: 1.55rem; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01)), rgba(7,26,18,.66); box-shadow: inset 0 1px rgba(255,255,255,.035); }.vgs-ref-route::after { position: absolute; right: -3.7rem; bottom: -5rem; width: 12rem; height: 12rem; border: 1px solid rgba(119,255,192,.14); border-radius: 50%; content: ""; }.vgs-ref-route:hover { border-color: rgba(119,255,192,.38); box-shadow: 0 23px 54px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.055); transform: translateY(-6px); }.vgs-ref-route__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(119,255,192,.22); border-radius: 13px; color: #82ffc7; background: linear-gradient(145deg, rgba(90,255,180,.16), rgba(90,255,180,.035)); font-family: var(--display); font-size: .78rem; font-weight: 700; }.vgs-ref-route h3 { max-width: 11ch; margin: auto 0 .7rem; color: #effff5; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 700; letter-spacing: -.055em; line-height: .98; }.vgs-ref-route p { max-width: 31ch; margin: 0; color: #a7c7b5; font-size: .82rem; line-height: 1.65; }.vgs-ref-route span:last-child { margin-top: 1rem; color: #7bffc3; font-size: .74rem; font-weight: 760; }
.vgs-ref-split { display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; gap: clamp(2.5rem, 8vw, 7.5rem); }.vgs-ref-model { position: relative; min-height: 500px; }.vgs-ref-model__window { position: absolute; top: 1rem; left: 0; width: 83%; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 22px; background: rgba(6,23,16,.92); box-shadow: var(--shadow); }.vgs-ref-model__bar { display: flex; align-items: center; gap: .7rem; height: 48px; padding: 0 1rem; border-bottom: 1px solid var(--line); color: #9fbfad; font-size: .63rem; }.vgs-ref-model__rows { padding: 1rem 0; }.vgs-ref-model__row { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: .62rem 1.1rem; color: #c8e1d4; font-size: .76rem; }.vgs-ref-model__row b { color: #7bffc2; font-family: ui-monospace, monospace; font-size: .65rem; }.vgs-ref-model__row--active { border-left: 2px solid #7bffc2; background: rgba(119,255,192,.07); }.vgs-ref-model__result { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-top: 1px solid var(--line); color: #d8f5e4; font-size: .72rem; background: rgba(119,255,192,.035); }.vgs-ref-model__result i { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 7px; color: #062617; background: #7bffc2; font-style: normal; }.vgs-ref-model__diagram { position: absolute; right: 0; bottom: 1rem; width: 310px; height: 215px; border: 1px solid var(--line-bright); border-radius: 20px; background: radial-gradient(circle at center, rgba(35,221,145,.14), transparent 37%), rgba(7,27,19,.9); box-shadow: var(--shadow); }.vgs-ref-model__diagram::before { position: absolute; top: 50%; left: 50%; width: 3.5rem; height: 3.5rem; border-radius: 15px; content: ""; background: linear-gradient(145deg, #38e89b, #97ffc8); box-shadow: 0 0 32px rgba(56,232,155,.3); transform: translate(-50%,-50%) rotate(12deg); }.vgs-ref-model__diagram span { position: absolute; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(156,255,210,.2); border-radius: 10px; color: #b5d5c2; background: #0d3021; font-size: .52rem; font-weight: 800; }.vgs-ref-model__diagram span:nth-child(1) { top: 1.55rem; left: 1.75rem; }.vgs-ref-model__diagram span:nth-child(2) { top: 1.55rem; right: 1.75rem; }.vgs-ref-model__diagram span:nth-child(3) { bottom: 1.35rem; left: 1.35rem; }.vgs-ref-model__diagram span:nth-child(4) { right: 1.35rem; bottom: 1.35rem; }.vgs-ref-model__diagram svg { position: absolute; inset: .7rem; width: calc(100% - 1.4rem); height: calc(100% - 1.4rem); }.vgs-ref-model__diagram path { fill: none; stroke: rgba(119,255,192,.25); stroke-width: 1.4; stroke-dasharray: 4 6; }
.vgs-ref-split__copy > p:not(.ref-kicker) { max-width: 53ch; color: #a8c8b6; font-size: .95rem; line-height: 1.76; }.vgs-ref-checks { display: grid; gap: 1rem; padding: 0; margin: 1.8rem 0 0; list-style: none; }.vgs-ref-checks li { display: flex; gap: .8rem; }.vgs-ref-checks i { display: grid; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid rgba(119,255,192,.24); border-radius: 7px; color: #7dffc4; background: rgba(119,255,192,.07); font-style: normal; font-size: .7rem; }.vgs-ref-checks b, .vgs-ref-checks small { display: block; }.vgs-ref-checks b { color: #effff5; font-size: .87rem; }.vgs-ref-checks small { margin-top: .2rem; color: #9fbfac; font-size: .78rem; line-height: 1.55; }
.vgs-ref-steps { background: radial-gradient(circle at 50% 42%, rgba(34,185,118,.1), transparent 45%); }.vgs-ref-steps__head { max-width: 680px; margin: 0 auto 2.7rem; text-align: center; }.vgs-ref-steps__head h2 { max-width: 15ch; margin: .7rem auto 0; color: #effff5; font-family: var(--display); font-size: clamp(2.3rem, 4.5vw, 4.2rem); font-weight: 700; letter-spacing: -.065em; line-height: .98; }.vgs-ref-steps__head p { max-width: 56ch; margin: 1rem auto 0; color: #a7c7b5; font-size: .92rem; }.vgs-ref-steps__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.vgs-ref-step { position: relative; min-height: 295px; padding: 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(7,26,18,.68); }.vgs-ref-step__number { color: #78ffc2; font-size: .64rem; font-weight: 800; letter-spacing: .13em; }.vgs-ref-step__visual { position: relative; height: 105px; margin: 1.1rem 0 1.35rem; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: linear-gradient(rgba(120,255,195,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(120,255,195,.04) 1px, transparent 1px), rgba(255,255,255,.015); background-size: 23px 23px; }.vgs-ref-step__visual::before { position: absolute; top: 50%; left: 50%; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(119,255,192,.36); border-radius: 12px; content: ""; background: linear-gradient(145deg, rgba(119,255,192,.23), rgba(119,255,192,.05)); transform: translate(-50%,-50%) rotate(9deg); }.vgs-ref-step:nth-child(2) .vgs-ref-step__visual::before { border-radius: 50%; box-shadow: 0 0 0 1rem rgba(119,255,192,.04), 0 0 0 2rem rgba(119,255,192,.025); }.vgs-ref-step:nth-child(3) .vgs-ref-step__visual::before { width: 1.35rem; height: 4.6rem; border-radius: 6px 6px 3px 3px; box-shadow: 2.2rem 1.15rem 0 -0.08rem rgba(119,255,192,.25), -2.2rem 2rem 0 .05rem rgba(119,255,192,.13); }.vgs-ref-step h3 { margin: 0 0 .45rem; color: #effff5; font-family: var(--display); font-size: 1.48rem; font-weight: 700; letter-spacing: -.04em; }.vgs-ref-step p { margin: 0; color: #a7c7b5; font-size: .81rem; line-height: 1.65; }
.vgs-ref-source-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 4.4rem); overflow: hidden; border: 1px solid rgba(144,255,204,.22); border-radius: 28px; background: radial-gradient(circle at 90% 10%, rgba(31,185,117,.17), transparent 39%), linear-gradient(145deg, rgba(15,55,38,.91), rgba(6,23,15,.9)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); }.vgs-ref-source-panel h2 { max-width: 12ch; margin: .6rem 0 0; color: #effff5; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 700; letter-spacing: -.06em; line-height: .98; }.vgs-ref-source-panel p { max-width: 52ch; color: #adccb9; font-size: .9rem; line-height: 1.72; }.vgs-ref-source-links { display: grid; gap: .6rem; }.vgs-ref-source-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .92rem 1rem; border: 1px solid var(--line); border-radius: 12px; color: #dfffee; background: rgba(255,255,255,.025); font-size: .75rem; font-weight: 730; }.vgs-ref-source-links a:hover { border-color: #82ffc6; background: rgba(119,255,192,.09); transform: translateX(4px); }.vgs-ref-source-links span { color: #78ffc2; }
.vgs-ref-safety { padding-top: clamp(3rem, 6vw, 5.5rem); }.vgs-ref-safety__panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; border: 1px solid rgba(149,255,207,.23); border-radius: 28px; background: linear-gradient(120deg, rgba(37,169,107,.19), rgba(6,25,16,.94) 50%); box-shadow: var(--shadow); }.vgs-ref-safety__copy p { max-width: 56ch; color: #b0cfbd; font-size: .91rem; line-height: 1.72; }.vgs-ref-safety__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: flex-end; }

/* Articles, hubs and supporting pages */
.page-hero { padding: clamp(5.1rem, 9vw, 8.2rem) 0 clamp(3.2rem, 6vw, 5.2rem); background: transparent; }.page-hero::before, .page-hero::after { display: none; }.breadcrumbs { color: #9ebfad; font-size: .73rem; }.breadcrumbs a { color: #79ffc1; }.eyebrow { color: #7dffc4; font-size: .67rem; font-weight: 800; letter-spacing: .14em; }.page-title { max-width: 13ch; color: #effff6; font-family: var(--display); font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 700; letter-spacing: -.07em; line-height: .93; }.page-title .signal { color: #7dffc4; }.lede { max-width: 62ch; color: #adcdbc; font-size: 1rem; line-height: 1.75; }.article-meta, .review-line { color: #91b6a2; font-size: .72rem; }.article-meta span, .review-line span { border-color: var(--line); }
.article-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, .32fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }.reading { color: #bfd8c8; font-size: 1rem; line-height: 1.8; }.reading > * { max-width: 72ch; }.reading h2, .mission-copy h2, .feature-block h2 { max-width: 16ch; color: #effff6; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3.15rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.03; }.reading h3 { color: #edfff5; font-family: var(--display); font-size: 1.38rem; letter-spacing: -.03em; }.reading a { color: #7effc5; text-decoration: underline; text-decoration-color: rgba(126,255,197,.4); text-underline-offset: .17em; }.reading strong { color: #ecfff4; }.side-rail { position: sticky; top: 6.3rem; }.side-card { border: 1px solid var(--line); border-radius: 17px; background: rgba(9,34,24,.7); box-shadow: inset 0 1px rgba(255,255,255,.035); }.side-card h2 { color: #eafff2; font-family: var(--display); font-size: 1.18rem; font-weight: 700; }.side-card a { color: #7effc5; }.article-disclaimer, .callout { border-color: rgba(126,255,197,.23); border-radius: 14px; color: #d1ebdc; background: rgba(53,173,111,.1); }
.article-card, .topic-card, .blog-card, .feature-block, .data-cell { border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), rgba(8,29,20,.66); box-shadow: inset 0 1px rgba(255,255,255,.03); }.article-card:hover, .topic-card:hover, .blog-card:hover { border-color: rgba(126,255,197,.36); transform: translateY(-4px); }.article-card h2, .topic-card h2, .blog-card h2 { color: #effff6; font-family: var(--display); font-weight: 700; }.article-card p, .topic-card p, .blog-card p { color: #a9c8b6; }.article-card a, .topic-card a, .blog-card a, .card-link { color: #7effc5; }.knowledge-grid, .topic-grid, .blog-grid { gap: 1rem; }.quote-orbit { border: 1px solid var(--line); border-radius: 22px; background: rgba(8,31,21,.7); }.quote-orbit blockquote { color: #effff6; font-family: var(--display); font-weight: 700; }.faq-list details { border-color: var(--line); border-radius: 13px; background: rgba(8,30,21,.58); }.faq-list summary { color: #edfff5; }.faq-list p { color: #b1d0bd; }.table-wrap, .compare-table { border-color: var(--line); }.compare-table th { color: #edfff5; background: rgba(119,255,192,.08); }.compare-table td { color: #b7d2c2; border-color: var(--line); }.vgs33-topic-brief { border-color: rgba(119,255,192,.28); border-left-color: #78ffc2; border-radius: 18px; background: linear-gradient(135deg, rgba(18,131,77,.18), rgba(7,30,20,.78) 60%); }.vgs33-topic-brief h2 { color: #effff6; font-weight: 700; }
.image-slot-section { padding-top: clamp(2rem, 5vw, 4.2rem); }.image-slot, .image-slot--ready .image-slot__media { border-color: var(--line); border-radius: 20px; background: rgba(8,30,21,.7); }.image-slot--ready .image-slot__image { border-radius: 18px; }.image-slot__content strong { color: #effff5; font-weight: 700; }.image-slot--route .image-slot__content { background: rgba(7,24,17,.96); }
.site-footer { margin-top: 5rem; border-color: var(--line); background: rgba(5,22,14,.78); backdrop-filter: blur(16px); }.footer-main { gap: 1.7rem; }.footer-title { color: #d9f4e4; }.footer-brand p, .footer-list a, .footer-bottom { color: #91b4a0; }.footer-mail, .footer-list a:hover, .footer-legal a:hover { color: #7effc5; }.footer-safety { border-color: var(--line); }.footer-safety p { color: #94b4a2; }.age-chip b { border-color: #7effc5; color: #7effc5; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1); }.reveal.is-visible, .reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes ref-aurora-left { to { transform: translate3d(84px, 42px, 0) scale(1.14); } }
@keyframes ref-aurora-right { to { transform: translate3d(-80px, 58px, 0) scale(1.12); } }
@keyframes ref-grid-flow { to { background-position: 76px 94px, 76px 94px; } }
@keyframes ref-pulse { 70% { box-shadow: 0 0 0 8px rgba(119,255,192,0); } 100% { box-shadow: 0 0 0 0 rgba(119,255,192,0); } }
@keyframes ref-orbit { to { transform: rotate(360deg); } }
@keyframes ref-draw-line { to { stroke-dashoffset: 0; } }
@keyframes ref-float { 50% { transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .vgs-ref-hero__layout, .vgs-ref-split { grid-template-columns: 1fr; }.vgs-ref-hero__copy { max-width: 720px; text-align: center; margin-inline: auto; }.vgs-ref-hero__lede { margin-inline: auto; }.vgs-ref-actions, .ref-principles { justify-content: center; }.ref-console-wrap { width: min(760px, 100%); margin-inline: auto; }.vgs-ref-section-head { gap: 2rem; }.vgs-ref-source-panel { grid-template-columns: 1fr; }.vgs-ref-safety__panel { grid-template-columns: 1fr; }.vgs-ref-safety__actions { justify-content: flex-start; }.vgs-ref-model { max-width: 720px; width: 100%; margin-inline: auto; }.article-layout { grid-template-columns: 1fr; }.side-rail { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.side-card { margin: 0; }
}
@media (max-width: 820px) {
  .site-header { background: rgba(6,21,15,.82); }.header-inner { min-height: 68px; }.brand img { width: 134px; }.nav-toggle { display: block; margin-left: auto; }.primary-nav { position: fixed; z-index: 80; inset: 68px 1rem auto; display: grid; gap: 0; padding: .6rem; border: 1px solid var(--line-bright); border-radius: 17px; background: rgba(6,22,15,.96); box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; }.primary-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }.primary-nav a { padding: .82rem .7rem; border-bottom: 1px solid var(--line); }.primary-nav a:last-child { border-bottom: 0; }.header-actions { display: none; }.vgs-ref-hero { padding-top: 3.4rem; }.vgs-ref-hero__layout { min-height: 0; }.vgs-ref-route-grid, .vgs-ref-steps__grid { grid-template-columns: 1fr; }.vgs-ref-section-head { display: block; }.vgs-ref-section-head > p { margin-top: 1.1rem; }.vgs-ref-model { min-height: 570px; }.vgs-ref-source-panel { border-radius: 22px; }.side-rail { grid-template-columns: 1fr; }.footer-main { grid-template-columns: repeat(2, 1fr); }.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .vgs-ref-hero h1 { font-size: clamp(3.05rem, 14vw, 4.6rem); }.ref-console { transform: none; }.ref-console-wrap::before, .ref-console-wrap::after, .ref-floating { display: none; }.ref-console__body { grid-template-columns: 38px 1fr; min-height: 420px; }.ref-console__content { padding: 1rem; }.ref-console__cards { grid-template-columns: 1fr; }.ref-console__cards .ref-console__card:nth-child(3) { display: none; }.ref-console__notes { grid-template-columns: 1fr; }.vgs-ref-strip__inner { display: grid; grid-template-columns: 1fr; gap: .65rem; }.vgs-ref-model__window { width: 100%; }.vgs-ref-model__diagram { right: 0; width: 91%; }.vgs-ref-source-panel, .vgs-ref-safety__panel { padding: 1.6rem 1.2rem; }.vgs-ref-safety__actions .btn, .vgs-ref-safety__actions .ref-outline-link { width: 100%; }.page-title { font-size: clamp(2.7rem, 12vw, 4.15rem); }.footer-main { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }.footer-bottom, .footer-safety { align-items: flex-start; flex-direction: column; }.footer-safety p { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }.reveal { opacity: 1; transform: none; }
}

/* Full-width delivery: panels use the viewport instead of a centred desktop column. */
:root { --content-max: 100%; --page-gutter: clamp(.875rem, 1.15vw, 1.35rem); }
.vgs-ref-hero__layout { gap: clamp(1.65rem, 3.2vw, 4.2rem); }
.vgs-ref-section-head { gap: clamp(1.5rem, 3.5vw, 4rem); }
.vgs-ref-split { gap: clamp(2rem, 4.5vw, 5.5rem); }
.article-layout { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .38fr); gap: clamp(1.5rem, 3.3vw, 3.6rem); }
@media (max-width: 1100px) { .article-layout { grid-template-columns: 1fr; } }