:root{
  --panel-bg:rgba(0,0,0,0.55);
  --panel-border:rgba(255,255,255,.11);
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --graph-1:rgba(255,255,255,.60);
  --graph-2:rgba(255,255,255,.50);
  --graph-3:rgba(255,255,255,.40);
  --shadow:0 24px 70px rgba(0,0,0,.30);
  --safe-x:clamp(30px,2.2vw,46px);
  --safe-y:clamp(24px,2.4vh,34px);
  --panel-scale:1;
  --hero-scale:1;
  --brand-scale:1.5;
  --lang-scale:.5;
  --nav-scale:1;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow:hidden}
button{font:inherit}
.experience{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000;isolation:isolate}
.video-stack,.scene-video,.video-vignette{position:absolute;inset:0;width:100%;height:100%}
.scene-video{object-fit:cover;opacity:0;transition:none!important;background:#000;filter:none!important}
.scene-video.active{opacity:1}
.video-vignette{display:none!important}

/* Top fixed anchors. They are never moved by responsive logic; only scaled around their anchors. */
.topbar{position:absolute;z-index:7;top:var(--safe-y);left:var(--safe-x);right:var(--safe-x);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.brandline,.lang-switch,.route-nav,.scroll-cue,.intro-box{backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%)}
.brandline{display:flex;align-items:center;gap:16px;padding:14px 20px 14px 16px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;box-shadow:var(--shadow);transform:scale(var(--brand-scale));transform-origin:left top}
.brand-logo{display:block;width:clamp(108px,8.8vw,150px);height:auto;object-fit:contain}
.brand-copy{min-width:0}
.brand-kicker,.eyebrow,.intro-kicker{color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.brand-kicker{margin-bottom:8px;opacity:.68}
.brand-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,2.4vw,40px);font-weight:700;line-height:.96;color:#fff;white-space:nowrap}
.topbar-right{display:flex;gap:12px;align-items:center}
.lang-switch{display:inline-flex;gap:8px;padding:8px;border-radius:999px;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow);transform:scale(var(--lang-scale));transform-origin:right top}
.lang-btn{min-width:46px;padding:10px 12px;border-radius:999px;color:#fff;border:0;cursor:pointer;background:transparent;font-weight:750;letter-spacing:.08em}
.lang-btn.active{background:rgba(255,255,255,.14)}

/* Central landing title: fixed center anchor, scales proportionally when its 20px collider touches another box. */
.intro-hero{position:absolute;z-index:6;inset:0;display:grid;place-content:center;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.intro-hero.hidden{opacity:0;transform:translateY(-12px)}
.intro-box{max-width:min(900px,calc(100vw - 2*var(--safe-x)));padding:clamp(20px,3vw,34px) clamp(24px,4vw,52px);text-align:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:28px;box-shadow:var(--shadow);transform:scale(var(--hero-scale));transform-origin:center center}
.intro-kicker{margin-bottom:14px;opacity:.68}
.intro-box h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,8vw,98px);line-height:.92;color:#fff}
.intro-box p{margin:18px auto 0;max-width:60ch;color:#fff;line-height:1.58;opacity:.86}

/* Whole infographic card = black 85%. Inner data cells are deliberately transparent. */
.info-panel{position:absolute;z-index:6;width:min(460px,calc(100vw - 2*var(--safe-x)));padding:18px 18px 16px;border-radius:24px;background:rgba(0,0,0,0.55)!important;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%);opacity:0;transform:translateY(10px) scale(var(--panel-scale));pointer-events:none;overflow:hidden}
.info-panel.visible{opacity:1;transform:translateY(0) scale(var(--panel-scale))}
.panel-skin{display:none!important}
.info-panel::before{content:none!important}
.info-panel::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 28%,rgba(255,255,255,.018) 62%,transparent 82%);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);z-index:0;pointer-events:none}.info-panel>*{position:relative}.info-panel>:not(.panel-skin){z-index:1}
.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px;border:0!important;box-shadow:none!important}
.panel-head>div:first-child{min-width:0}
.eyebrow{margin-bottom:8px;opacity:.68}
#title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,3vw,40px);line-height:.96;color:#fff;overflow-wrap:anywhere}
.panel-counter{flex:0 0 auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);white-space:nowrap;color:#fff}
.description{margin:0 0 16px;color:#fff;line-height:1.56;font-size:14px;max-width:54ch;opacity:.86}
.info-content{display:grid;gap:14px;min-width:0}
.panel-foot{margin-top:14px;color:#fff;font-size:12px;line-height:1.45;opacity:.68}

/* Fixed positions chosen around the vehicle. Responsive logic NEVER repositions these. */
.layout-0{left:var(--safe-x);bottom:124px;width:min(520px,calc(100vw - 2*var(--safe-x)));transform-origin:left bottom}
.layout-1{right:var(--safe-x);top:176px;width:420px;transform-origin:right top}
.layout-2{right:var(--safe-x);top:182px;width:410px;transform-origin:right top}
.layout-3{right:var(--safe-x);bottom:124px;width:420px;transform-origin:right bottom}
.layout-4{left:var(--safe-x);top:176px;width:440px;transform-origin:left top}
.layout-5{left:var(--safe-x);bottom:124px;width:455px;transform-origin:left bottom}
.layout-6{right:var(--safe-x);top:176px;width:420px;transform-origin:right top}
.layout-7{left:var(--safe-x);top:178px;width:420px;transform-origin:left top}
.layout-8{right:var(--safe-x);top:176px;width:430px;transform-origin:right top}

.nav-cluster{position:absolute;z-index:8;left:50%;bottom:22px;transform:translateX(-50%) scale(var(--nav-scale));transform-origin:center bottom;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 2*var(--safe-x))}
.route-nav{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:20px;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow)}
.nav-btn{min-width:108px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;cursor:pointer;letter-spacing:.18em;font-size:11px;text-transform:uppercase}
.nav-btn.primary{background:rgba(255,255,255,.09)}
.nav-btn:hover{background:rgba(255,255,255,.11)}
.nav-btn:disabled{opacity:.42;cursor:default}
.arrow{font-size:18px;line-height:1}
.dot-nav{display:flex;gap:8px;flex-wrap:wrap;max-width:420px;justify-content:center}
.dot-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;font-size:11px;cursor:pointer}
.dot-btn.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24);font-weight:800}
.scroll-cue{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow);pointer-events:none}
.mouse-icon{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.88);border-radius:12px;position:relative;display:block}
.mouse-icon i{position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:wheelPulse 1.35s ease-in-out infinite}
.cue-arrow{font-size:15px;color:#fff;opacity:.9;animation:arrowFloat 1.35s ease-in-out infinite}
.cue-arrow.down{animation-delay:.12s}
@keyframes wheelPulse{0%,100%{transform:translate(-50%,0);opacity:.25}45%{transform:translate(-50%,10px);opacity:1}70%{opacity:.35}}
@keyframes arrowFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(3px);opacity:1}}


/* Auto-hiding scene navigation. It remains fully functional via wheel/keyboard while hidden. */
.nav-cluster{transition:opacity .28s ease,transform .32s ease}
.nav-cluster.nav-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(28px) scale(var(--nav-scale))}
.nav-reveal{position:absolute;z-index:9;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);width:46px;height:34px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel-bg);color:#fff;box-shadow:var(--shadow);backdrop-filter:blur(28px) saturate(125%);-webkit-backdrop-filter:blur(28px) saturate(125%);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;font-size:18px;line-height:1}
.nav-reveal.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-reveal:hover{background:rgba(0,0,0,.68)}

/* Inner infographic components: transparent. The single black shape is the whole .info-panel. */
.cards-grid,.tiles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini-card,.stat-tile,.orbit-item,.headline-item,.experience-item,.legend-pill{background:transparent!important;border:1px solid rgba(255,255,255,.14)}
.mini-card{padding:14px;border-radius:18px;min-height:78px}
.mini-card .label{display:block;font-size:10px;letter-spacing:.14em;color:#fff;text-transform:uppercase;opacity:.64}
.mini-card .value{display:block;margin-top:8px;font-size:28px;font-weight:800;line-height:1;color:#fff}

.progress-list{display:grid;gap:10px}
.progress-row{display:grid;grid-template-columns:minmax(120px,1.12fr) minmax(86px,1fr) auto;gap:10px;align-items:center}
.progress-row .name{font-size:12px;color:#fff;line-height:1.3;overflow-wrap:anywhere}
.progress-track,.micro-track{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.progress-fill,.micro-fill{height:100%;width:0;border-radius:999px;background:var(--graph-1);transition:width 1.6s cubic-bezier(.18,.74,.28,.98)}
.progress-value{font-size:12px;letter-spacing:.06em;color:#fff}

.legend-row{display:flex;gap:8px;flex-wrap:wrap}
.legend-pill{padding:7px 10px;border-radius:999px;font-size:11px;color:#fff}
.donut-block{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:center}
.donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--graph-1) 0 var(--a),var(--graph-2) var(--a) calc(var(--a) + var(--b)),var(--graph-3) calc(var(--a) + var(--b)) 100%);position:relative;margin:0 auto}
.donut::after{content:'';position:absolute;inset:18px;border-radius:50%;background:rgba(0,0,0,.92)}
.donut-label{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-size:25px;font-weight:800;color:#fff}
.legend-list{display:grid;gap:10px}
.legend-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px;color:#fff}
.swatch{width:12px;height:12px;border-radius:50%}
.swatch.a{background:var(--graph-1)}.swatch.b{background:var(--graph-2)}.swatch.c{background:var(--graph-3)}
.stat-tile{padding:16px;border-radius:18px;min-height:100px}
.stat-tile .big{display:block;font-size:30px;font-weight:800;line-height:1;color:#fff}
.stat-tile .small{display:block;margin-top:8px;color:#fff;font-size:13px;line-height:1.35;opacity:.68}

/* Page 6: labels and values sit above the bar; no label can collide with its graph. */
.split-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:14px;align-items:stretch}
.split-sep{background:linear-gradient(180deg,transparent,var(--graph-2),transparent)}
.split-side{min-width:0}
.split-side h4{margin:0 0 12px;color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.micro-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:end;margin-bottom:12px;font-size:12px;color:#fff}
.micro-row span,.micro-row strong{line-height:1.25}
.micro-row span{overflow-wrap:anywhere;min-width:0}
.micro-row strong{text-align:right}
.micro-track{grid-column:1/-1;height:8px}

/* Page 7: text gets auto-scaled in JS if it would exceed the circle. */
.orbit-wrap{display:grid;grid-template-columns:158px minmax(0,1fr);gap:18px;align-items:center}
.orbit-core{width:150px;height:150px;border-radius:50%;margin:0 auto;position:relative;display:grid;place-items:center}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid var(--graph-2);background:transparent;display:grid;place-items:center;transform:scale(.72);opacity:0;transition:transform 1.6s cubic-bezier(.18,.74,.28,.98),opacity 1.6s ease;padding:10px}
.orbit-core.ready .orbit-ring{transform:scale(1);opacity:1}
.orbit-ring.r1{width:142px!important;height:142px!important}
.orbit-ring.r2{width:102px;height:102px;transition-delay:.10s}
.orbit-ring.r3{width:58px;height:58px;border-color:var(--graph-1);transition-delay:.20s}
.orbit-ring.r1 span{font-size:20px;font-weight:800;color:#fff;line-height:1.04;width:74%;max-width:74%;text-align:center;white-space:normal;overflow-wrap:anywhere}
.orbit-ring.r2 span,.orbit-ring.r3 span{display:none}
.orbit-legend{display:grid;gap:8px;min-width:0}
.orbit-item{padding:10px 12px;border-radius:16px}
.orbit-item strong{display:block;font-size:20px;color:#fff;overflow-wrap:anywhere}
.orbit-item span{color:#fff;font-size:13px;opacity:.68}

.headline-wrap{text-align:center}
.headline-wrap .mega-number{font-size:clamp(70px,8vw,116px);line-height:.88;font-weight:900;color:#fff}
.headline-wrap .mega-caption{margin-top:6px;color:#fff;opacity:.68}
.headline-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.headline-item{padding:14px;border-radius:16px}
.headline-item strong{display:block;font-size:24px;color:#fff}
.headline-item span{color:#fff;font-size:12px;opacity:.68}
.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.experience-item{padding:13px 14px;border-radius:16px;opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .65s ease}
.experience-item.show{opacity:1;transform:translateY(0)}
.experience-num{display:block;color:#fff;font-size:10px;letter-spacing:.16em;margin-bottom:5px;opacity:.65}
.experience-item strong{display:block;font-size:14px;margin-bottom:5px;color:#fff}
.experience-item p{margin:0;color:#fff;font-size:12px;line-height:1.4;opacity:.68}

/* Do not move any anchored panel at smaller resolutions. Only simplify internal grids if the viewport becomes extremely narrow. */
@media(max-width:640px){
  .cards-grid,.tiles-grid,.headline-grid,.experience-grid{grid-template-columns:1fr}
  .progress-row{grid-template-columns:88px minmax(0,1fr) auto}
  .donut-block,.orbit-wrap,.split-grid{grid-template-columns:1fr}
  .split-sep{display:none}
  .route-nav{gap:8px}
  .nav-btn{min-width:82px;padding:0 10px}
  .brandline{gap:12px}
  .brand-logo{width:92px}
  .panel-head{flex-direction:column}
  .panel-counter{align-self:flex-start}
}


/* GPU compositing hints for the few UI surfaces that actually animate. */
.info-panel,.intro-box,.brandline,.lang-switch,.nav-cluster,.nav-reveal{will-change:transform,opacity}
.progress-fill,.micro-fill,.orbit-ring,.experience-item{will-change:transform,opacity}

html.layout-fitting .brandline,
html.layout-fitting .lang-switch,
html.layout-fitting .intro-box,
html.layout-fitting .info-panel,
html.layout-fitting .nav-cluster{transition:none!important}

/* v10: explicit glass treatment on every primary black UI surface */
.brandline,.lang-switch,.route-nav,.scroll-cue,.intro-box{background:rgba(0,0,0,0.55)!important;backdrop-filter:blur(20px) saturate(115%)!important;-webkit-backdrop-filter:blur(20px) saturate(115%)!important;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08)!important;}
.nav-reveal{background:rgba(0,0,0,0.55)!important;backdrop-filter:blur(20px) saturate(115%)!important;-webkit-backdrop-filter:blur(20px) saturate(115%)!important;}

@media(max-width:880px){.info-panel{max-height:calc(100dvh - 270px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;min-width:0}.nav-cluster{padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}