/* =====================================================================
   GM FLEET ALLSTARS — microsite styles
   ===================================================================== */
:root {
  --bg: #04070f;
  --bg2: #081025;
  --panel: rgba(255, 255, 255, .035);
  --line: rgba(255, 255, 255, .09);
  --ink: #eef3fb;
  --muted: #94a2bf;
  --dim: #5f6d8c;
  --gm: #0170ce;
  --red: #ff2a44;
  --blue: #2d6bff;
  --gold: #e9c46a;
  --accent: #2f7bff;
  --chrome: linear-gradient(135deg, #fbfcfe 0%, #a9b3c3 17%, #eef1f6 31%, #7b8597 49%, #e7eaf0 64%, #98a2b3 81%, #f6f8fb 100%);
  --chrome-text: linear-gradient(180deg, #ffffff 0%, #dfe5ee 38%, #8d97a8 52%, #f3f6fa 64%, #c3cad6 100%);
  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
::selection { background: rgba(127, 178, 255, .35); }
.ic { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
body.no-scroll { overflow: hidden; }

/* grain overlay */
.grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 700 14px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; transition: transform .35s var(--ease), background .3s, box-shadow .35s, border-color .3s; white-space: nowrap; }
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn.primary { background: #fff; color: #07102a; box-shadow: 0 10px 30px -14px rgba(127, 178, 255, .9); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(127, 178, 255, 1); }
.btn.ghost { border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.btn:focus-visible, .icon-btn:focus-visible, .pill:focus-visible, .fan:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 3px; }
.icon-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); transition: background .25s, transform .3s var(--ease); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ic { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 800 13px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.chip .ic { width: 15px; height: 15px; color: var(--gold); }
.kicker { margin: 0 0 14px; font: 800 13px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ''; width: 26px; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); border-radius: 2px; }
.chrome-text { background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: .005em; line-height: .95; text-transform: uppercase; }
h2 { font-size: clamp(38px, 6vw, 72px); }
h2 span { color: var(--muted); }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 60; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.topbar.scrolled { background: rgba(4, 7, 15, .74); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 26px; width: auto; }
.brand-div { width: 1px; height: 22px; background: rgba(255, 255, 255, .25); }
.brand-sub { font: 800 16px/1 var(--f-display); letter-spacing: .2em; }
.brand-sub em { font-style: normal; color: var(--muted); margin-left: 4px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.pill { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font: 600 13px/1 var(--f-body); transition: background .25s, border-color .25s; }
.pill:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
.pill b { font: 800 16px/1 var(--f-display); }
.pill-dots { display: flex; gap: 3px; }
.pill-dots i { width: 6px; height: 9px; border-radius: 1.5px; background: rgba(255, 255, 255, .16); transition: background .4s, box-shadow .4s; }
.pill-dots i.on { background: linear-gradient(160deg, #fff, #7fb2ff); box-shadow: 0 0 8px rgba(127, 178, 255, .8); }
.pill .ic { width: 18px; height: 18px; }
.top-deck { height: 40px; min-height: 40px; padding: 0 16px; font-size: 13px; }
@media (max-width: 720px) {
  .topbar { height: 60px; }
  .brand img { height: 22px; }
  .brand-sub, .brand-div { display: none; }
  .pill-dots { display: none; }
  .top-deck span { display: none; }
  .top-deck { width: 40px; padding: 0; }
}

/* ---------- views & transitions ---------- */
#app { position: relative; min-height: 100vh; }
.view { animation: viewIn .7s var(--ease) both; }
.view.leaving { animation: viewOut .35s ease both; }
@keyframes viewIn { from { opacity: 0; } }
@keyframes viewOut { to { opacity: 0; transform: scale(.985); } }
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

.flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(60% 50% at 30% 50%, rgba(255, 42, 68, .35), transparent 70%), radial-gradient(60% 50% at 70% 50%, rgba(45, 107, 255, .4), transparent 70%); animation: flash 1.1s ease forwards; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.fly-card { position: fixed; z-index: 90; pointer-events: none; transform-origin: 50% 50%; }
.fly-card .tcard { width: 100%; }
.fly-card .tc-face { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(127, 178, 255, .5); }

/* =====================================================================
   TRADING CARD
   ===================================================================== */
.tcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hov: 0; container-type: inline-size; aspect-ratio: 5 / 7; position: relative; perspective: 1400px; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.tcard img { pointer-events: none; -webkit-user-drag: none; }
.tc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease); }
.tcard.tilting .tc-tilt { transition: transform .12s linear; }
.tc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.5, .05, .2, 1); }
.tcard.flipped .tc-flip { transform: rotateY(180deg); }
.tc-face { position: absolute; inset: 0; border-radius: 4.4cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, .75), 0 0 0 .3cqw rgba(0, 0, 0, .4); background: #0a1433; }
.tc-back { transform: rotateY(180deg); }
.tc-frame { position: absolute; inset: 0; padding: 2.7cqw; background: var(--chrome); background-size: 200% 200%; background-position: var(--px, 50%) var(--py, 50%); }
.tc-foil { position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: calc(.28 + var(--hov) * .55); transition: opacity .5s; pointer-events: none;
  background: repeating-linear-gradient(115deg, #ff3d6e 0%, #ffcf3d 6%, #3dffb1 12%, #3dc2ff 18%, #a63dff 24%, #ff3d6e 30%); background-size: 300% 300%; background-position: var(--px, 50%) var(--py, 50%); filter: saturate(1.1) brightness(.75); }
.tc-panel { position: relative; height: 100%; border-radius: 2.6cqw; overflow: hidden; background: linear-gradient(180deg, #102050 0%, #0a1536 46%, #071029 100%); display: flex; flex-direction: column; box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .22), 0 0 0 .3cqw rgba(0, 0, 0, .35); }
.tc-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: var(--hov); transition: opacity .5s; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .18) 28%, rgba(0, 0, 0, .35) 90%); }

.tc-head { position: relative; flex: none; height: 19cqw; display: flex; align-items: center; padding: 0 3cqw 0 19.5cqw; background: linear-gradient(180deg, #1d3378 0%, #12245a 55%, #0d1b46 100%); border-bottom: .55cqw solid #c9d1dd; overflow: hidden; }
.tc-head::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 .6cqw, transparent .6cqw 1.8cqw); }
.tc-head::after { content: ''; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: calc(.12 + var(--hov) * .35); background: repeating-linear-gradient(115deg, #ff3d6e 0%, #ffcf3d 6%, #3dffb1 12%, #3dc2ff 18%, #a63dff 24%, #ff3d6e 30%); background-size: 300% 300%; background-position: var(--px, 50%) var(--py, 50%); transition: opacity .5s; }
.tc-badge { position: absolute; left: 1.6cqw; top: 1.2cqw; width: 16.5cqw; z-index: 2; filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .55)); }
.tc-badge svg { width: 100%; height: auto; display: block; }
.tc-titles { position: relative; z-index: 1; flex: 1; min-width: 0; text-align: center; }
.tc-place { font: 900 var(--fs, 8cqw)/.92 var(--f-display); letter-spacing: .015em; text-transform: uppercase; color: #fff; text-shadow: 0 .45cqw 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.tc-agency { margin-top: 1.4cqw; display: inline-flex; gap: 1.6cqw; align-items: center; padding: .7cqw 2.6cqw; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 20%, rgba(255, 255, 255, .14) 80%, transparent); font: 800 2.7cqw/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: #e3eaf6; white-space: nowrap; }
.tc-agency i { color: var(--accent); font-style: normal; }
.tc-year { position: absolute; right: 2.4cqw; top: 1.8cqw; z-index: 1; font: 800 2.4cqw/1 var(--f-display); letter-spacing: .12em; color: #9fb3d9; }

.tc-photo { position: relative; flex: none; height: 46cqw; overflow: hidden; border-bottom: .55cqw solid #c9d1dd; background: #050914; }
.tc-ribbon { position: absolute; left: 2.4cqw; bottom: 2.2cqw; padding: 1.1cqw 2.4cqw; border-radius: 99px; background: rgba(5, 10, 25, .74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: .25cqw solid rgba(255, 255, 255, .28); font: 800 2.45cqw/1 var(--f-display); letter-spacing: .13em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.tc-ribbon b { color: var(--gold); }
.tc-num { position: absolute; right: 2.6cqw; top: 2cqw; font: 900 4.8cqw/1 var(--f-display); color: #fff; text-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .7); }
.tc-num small { font-size: .55em; opacity: .7; }

.tc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.22fr 1fr; gap: 2.6cqw; padding: 2.4cqw 3cqw 2.2cqw; }
.tc-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.tc-stats li { display: grid; grid-template-columns: 5.8cqw 11.5cqw 1fr; align-items: center; gap: 1.5cqw; padding-bottom: .9cqw; border-bottom: .2cqw solid rgba(255, 255, 255, .08); }
.tc-stats li:last-child { border: 0; padding-bottom: 0; }
.tc-ic { width: 5.8cqw; height: 5.8cqw; border-radius: 1.3cqw; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)); border: .2cqw solid rgba(255, 255, 255, .2); color: #d4e3ff; }
.tc-ic .ic { width: 3.7cqw; height: 3.7cqw; }
.tc-stats b { font: 800 4.9cqw/1 var(--f-display); color: #fff; letter-spacing: .01em; white-space: nowrap; }
.tc-stats span { font: 700 1.95cqw/1.12 var(--f-body); color: #aebbd6; text-transform: uppercase; letter-spacing: .03em; }
.tc-side { display: flex; flex-direction: column; gap: 2cqw; min-height: 0; }
.tc-quote { flex: 1; min-height: 0; position: relative; padding: 2.1cqw 2.2cqw; border-radius: 1.8cqw; background: rgba(255, 255, 255, .05); border: .2cqw solid rgba(255, 255, 255, .13); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.tc-quote p { margin: 0; font: 500 2.06cqw/1.36 var(--f-body); color: #d8e1f2; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.tc-quote cite { display: block; margin-top: 1cqw; font: 700 1.9cqw/1.2 var(--f-body); font-style: normal; color: #fff; }
.tc-qr { display: flex; align-items: center; gap: 1.8cqw; }
.tc-qr svg { width: 12.5cqw; height: 12.5cqw; flex: none; border-radius: 1cqw; display: block; }
.tc-qr span { font: 800 2.1cqw/1.15 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #9fb3d9; }
.tc-foot { flex: none; height: 10cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 3.4cqw; background: linear-gradient(180deg, #0c1636, #060c20); border-top: .3cqw solid rgba(255, 255, 255, .12); }
.tc-foot img { height: 5cqw; width: auto; }
.tc-foot img.os { height: 5.6cqw; }
.tc-series { font: 800 2.3cqw/1 var(--f-display); letter-spacing: .34em; color: #7f8fb3; }

/* back */
.tc-panel.tb { align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #1d42a0 0%, #0c1840 52%, #050a1c 100%); }
.tb-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, .06) 0deg 6deg, transparent 6deg 15deg); animation: rays 40s linear infinite; }
.tb-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1.2cqw, transparent 1.2cqw 2.8cqw); }
@keyframes rays { to { transform: rotate(360deg); } }
.tb-center { position: relative; text-align: center; }
.tb-center img { width: 44cqw; margin: 0 auto 7cqw; }
.tb-star { width: 12cqw; height: 12cqw; margin: 0 auto 3cqw; color: var(--gold); filter: drop-shadow(0 0 3cqw rgba(233, 196, 106, .6)); }
.tb-star .ic { width: 100%; height: 100%; }
.tb-title { font: 900 italic 15.5cqw/.84 var(--f-display); letter-spacing: .01em; background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .4)); }
.tb-sub { margin-top: 4cqw; font: 800 2.7cqw/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #a9bbdf; }
.tb-foot { position: absolute; bottom: 5.5cqw; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 7cqw; }
.tb-foot img { height: 6.4cqw; width: auto; }
.tb-foot span { font: 800 3.2cqw/1 var(--f-display); letter-spacing: .2em; color: #cfd9ee; }

/* =====================================================================
   PHOTOGRAPHY
   ===================================================================== */
.ph { display: block; width: 100%; height: 100%; object-fit: cover; background: #0a1226; }
.tc-photo .ph { position: absolute; inset: 0; }
.tc-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 10, 25, .35) 0%, transparent 28%, transparent 58%, rgba(5, 10, 25, .7) 100%); }
.tc-ribbon, .tc-num { z-index: 1; }
.kb { animation: kb 26s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.2%, -.8%); } }

/* =====================================================================
   HOME
   ===================================================================== */
.home-hero { position: relative; min-height: 100svh; padding: 92px 0 28px; display: flex; flex-direction: column; align-items: center; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 70% at 50% 60%, #0d1c45 0%, #060c1f 55%, var(--bg) 100%); }
.hero-bg .hero-photo { position: absolute; inset: 0; opacity: .24; filter: saturate(.8) blur(1px); transform: scale(1.06); -webkit-mask-image: radial-gradient(90% 75% at 50% 62%, #000 30%, transparent 85%); mask-image: radial-gradient(90% 75% at 50% 62%, #000 30%, transparent 85%); }
.hero-bg .sweep { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: 0; top: 30%; }
.hero-bg .sweep.r { left: -25vmax; background: radial-gradient(circle, rgba(255, 42, 68, .55), transparent 65%); animation: sweepR 2.6s infinite; }
.hero-bg .sweep.b { right: -25vmax; background: radial-gradient(circle, rgba(45, 107, 255, .6), transparent 65%); animation: sweepB 2.6s infinite; }
@keyframes sweepR { 0%, 100% { opacity: .15; } 10% { opacity: .55; } 20% { opacity: .2; } 30% { opacity: .5; } 45% { opacity: .15; } }
@keyframes sweepB { 0%, 45% { opacity: .15; } 55% { opacity: .6; } 65% { opacity: .2; } 75% { opacity: .55; } 90% { opacity: .15; } }
.hero-bg .floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; background-image: linear-gradient(rgba(127, 178, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 178, 255, .13) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(500px) rotateX(68deg); transform-origin: 50% 0; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 60%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 60%, transparent); animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 70px; } }
.hero-bg .stars { position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 34% 8%, #cfe0ff, transparent), radial-gradient(1.4px 1.4px at 66% 22%, #fff, transparent), radial-gradient(1px 1px at 82% 12%, #fff, transparent), radial-gradient(1px 1px at 52% 30%, #9fc1ff, transparent), radial-gradient(1.2px 1.2px at 90% 34%, #fff, transparent), radial-gradient(1px 1px at 6% 40%, #fff, transparent); opacity: .5; }
.hero-copy { text-align: center; padding: 0 var(--gutter); position: relative; z-index: 2; }
.eyebrow { margin: 0 0 10px; font: 800 13px/1.2 var(--f-display); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.eyebrow b { color: #fff; }
.mega { font: 900 italic clamp(58px, 10.5vw, 150px)/.84 var(--f-display); letter-spacing: -.005em; text-transform: uppercase; margin: 0; }
.mega .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em; }
.mega .w > span { display: inline-block; animation: rise 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { transform: translateY(105%) skewY(6deg); } }
.mega .chrome-text { position: relative; background-size: 100% 100%; }
.mega .shine { position: relative; display: inline-block; }
.mega .shine::after { content: attr(data-t); position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s ease-in-out 1.6s infinite; }
@keyframes shine { 0% { background-position: 150% 0; } 30%, 100% { background-position: -50% 0; } }
.lede { max-width: 600px; margin: 14px auto 0; color: #b9c4dc; font-size: clamp(15px, 1.4vw, 17px); animation: fadeUp 1s var(--ease) .5s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }

/* fan */
.fan-zone { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: clamp(16px, 3vh, 34px); }
.fan { --cw: clamp(190px, 16vw, 260px); position: relative; width: 100%; height: calc(var(--cw) * 1.85 + 40px); touch-action: pan-y; cursor: grab; outline: none; }
.fan.dragging { cursor: grabbing; }
.fan-card { position: absolute; left: 50%; top: 34px; width: var(--cw); margin-left: calc(var(--cw) / -2); will-change: transform; }
.fan-card .tcard { width: 100%; }
.fan-card .dimmer { position: absolute; inset: 0; border-radius: 4.4cqw; background: #030610; opacity: var(--dim, 0); pointer-events: none; transition: opacity .2s; z-index: 5; }
.fan-card.is-active .tc-face { box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .9), 0 0 50px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.fan-card .collected-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 6; }
.fan-shadow { position: absolute; left: 50%; bottom: 10px; width: min(900px, 90vw); height: 60px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); pointer-events: none; }
.fan-ui { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(12px, 3vw, 40px); width: min(100% - var(--gutter) * 2, 860px); margin-top: 6px; }
.fan-info { text-align: center; min-height: 128px; }
.fi-inner { animation: fiIn .55s var(--ease) both; }
@keyframes fiIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.fi-meta { display: flex; justify-content: center; gap: 14px; font: 800 12px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.fi-meta b { color: #fff; }
.fi-name { margin: 8px 0 10px; font: 800 clamp(28px, 3.6vw, 44px)/.95 var(--f-display); text-transform: uppercase; }
.fi-name em { font-style: normal; color: var(--muted); font-weight: 600; }
.fi-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.fan-hint { margin-top: 12px; display: flex; justify-content: center; gap: 18px; font: 600 12px/1 var(--f-body); color: var(--dim); letter-spacing: .04em; }
.fan-hint span { display: inline-flex; align-items: center; gap: 6px; }
.fan-hint .ic { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .home-hero { padding-top: 78px; }
  .fan { --cw: min(58vw, 250px); height: calc(var(--cw) * 1.62 + 40px); }
  .fan-ui { grid-template-columns: 1fr; }
  .fan-ui .icon-btn { display: none; }
  .fi-name { font-size: 30px; }
}

.collected-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: 99px; font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #06112a; background: linear-gradient(110deg, #fff, #cfe0ff 40%, #ffe6a8 70%, #fff); box-shadow: 0 6px 16px -6px rgba(127, 178, 255, .9); white-space: nowrap; }
.collected-tag .ic { width: 12px; height: 12px; stroke-width: 3; }

/* sections */
.sec { position: relative; padding: clamp(80px, 12vw, 150px) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p.sub { max-width: 440px; margin: 0; color: var(--muted); }

/* collection grid */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); gap: clamp(14px, 2.4vw, 30px); }
.coll-item { position: relative; display: block; text-decoration: none; transition: transform .5s var(--ease); }
.coll-item:hover { transform: translateY(-8px); z-index: 2; }
.coll-item .tcard { width: 100%; }
.coll-cap .collected-tag { padding: 4px 8px 4px 6px; font-size: 10px; flex: none; }
.coll-item.is-collected .tc-face { box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, .75), 0 0 0 .5cqw rgba(207, 224, 255, .55), 0 0 6cqw -1cqw rgba(127, 178, 255, .6); }
.coll-item:not(.is-collected) .tc-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 6, 16, 0) 40%, rgba(3, 6, 16, .25)); pointer-events: none; }
.coll-cap { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 13px/1.2 var(--f-body); }
.coll-cap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-cap span { color: var(--muted); font-weight: 500; }
.progress { display: flex; align-items: center; gap: 14px; font: 700 14px/1 var(--f-body); }
.progress-bar { width: 180px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--red), #b16bff, var(--blue)); border-radius: 6px; transition: width 1s var(--ease); }

/* totals */
.totals { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(13, 28, 69, .35), transparent); }
.totals-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.total { padding: 34px 20px; border-left: 1px solid var(--line); }
.total:first-child { border-left: 0; }
.total b { display: block; font: 800 clamp(40px, 5vw, 68px)/1 var(--f-display); }
.total span { display: block; margin-top: 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .totals-grid { grid-template-columns: repeat(2, 1fr); } .total { border-left: 0; border-top: 1px solid var(--line); } .total:last-child { grid-column: span 2; } }

/* pillars (home) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar { position: relative; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid var(--line); overflow: hidden; }
.pillar-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pillar-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 14, 32, .9)); }
.pillar-img .ph { transition: transform 1.2s var(--ease); }
.pillar:hover .pillar-img .ph { transform: scale(1.06); }
.pillar-body { position: relative; padding: 0 30px 30px; margin-top: -27px; }
.pillar .pi { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(127, 178, 255, .3), rgba(127, 178, 255, .05)); border: 1px solid rgba(127, 178, 255, .35); color: #cfe0ff; margin-bottom: 22px; }
.pillar .pi .ic { width: 26px; height: 26px; }
.pillar h3 { font-size: 30px; margin-bottom: 10px; }
.pillar p { margin: 0; color: var(--muted); }
.pillar-body > img { height: 22px; width: auto; margin-top: 22px; opacity: .9; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* heritage */
.her-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: min(100% - var(--gutter) * 2, 1400px); margin: 0 auto; }
.her { position: relative; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; }
.her:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .2); }
.her-img { aspect-ratio: 4 / 3.4; overflow: hidden; position: relative; }
.her-img .ph { transition: transform 1.2s var(--ease), filter .6s; }
.her:nth-child(-n+2) .her-img .ph { filter: grayscale(1) contrast(1.05) sepia(.15); }
.her:hover .her-img .ph { transform: scale(1.05); }
.her-body { padding: 18px 20px 22px; }
.her-body b { display: block; font: 800 44px/1 var(--f-display); background: linear-gradient(90deg, #fff, #9fb3d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.her-body h3 { font-size: 21px; margin: 6px 0 6px; }
.her-body p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1000px) { .her-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; padding: 4px var(--gutter) 20px; scrollbar-width: none; } .her-track::-webkit-scrollbar { display: none; } .her { flex: none; width: min(70vw, 280px); scroll-snap-align: start; } }

/* CTA band */
.cta-band .cta-bg { position: absolute; inset: 0; z-index: -1; opacity: .35; object-position: 50% 60%; }
.cta-band { isolation: isolate; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 16, 41, .95) 0%, rgba(7, 16, 41, .75) 55%, rgba(7, 16, 41, .45) 100%); }
.cta-band { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(40px, 6vw, 80px); background: radial-gradient(80% 120% at 85% 20%, rgba(1, 112, 206, .55), transparent 60%), radial-gradient(60% 100% at 10% 100%, rgba(255, 42, 68, .25), transparent 60%), linear-gradient(140deg, #0d1d4a, #071029); border: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { font-size: clamp(40px, 5.6vw, 76px); }
.cta-band p { color: #c3cde3; max-width: 520px; margin: 18px 0 28px; }
.cta-logos { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; }
.cta-logos img { height: clamp(44px, 6vw, 72px); width: auto; }
.cta-logos img.os { height: clamp(48px, 6.4vw, 80px); }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-logos { flex-direction: row; align-items: center; justify-content: flex-start; } .cta-logos img { height: 40px; } .cta-logos img.os { height: 44px; } }

/* footer */
.foot { padding: 50px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-logos { display: flex; align-items: center; gap: 22px; }
.foot-logos img { height: 24px; width: auto; opacity: .85; }
.foot-logos img.os { height: 28px; }
.foot p { margin: 18px 0 0; max-width: 760px; }

/* =====================================================================
   DEPARTMENT PAGE
   ===================================================================== */
.d-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 110px 0 70px; }
.d-hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #050914; }
.d-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 7, 15, .88) 0%, rgba(4, 7, 15, .55) 34%, rgba(4, 7, 15, .05) 58%, rgba(4, 7, 15, .25) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(4, 7, 15, .55) 26%, transparent 52%), linear-gradient(180deg, rgba(4, 7, 15, .65), transparent 20%); }
.d-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-areas: "head card" "body card"; column-gap: clamp(30px, 5vw, 80px); row-gap: 0; align-items: center; min-height: calc(100svh - 180px); }
.d-head { grid-area: head; align-self: end; }
.d-body { grid-area: body; align-self: start; }
.d-card-wrap { grid-area: card; }
.d-head > *, .d-body > * { animation: fadeUp .9s var(--ease) both; animation-delay: calc(.35s + var(--i, 0) * .09s); }
.d-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font: 800 13px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: #c3cde3; margin-bottom: 18px; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.d-meta b { color: #fff; }
.d-title { font: 900 clamp(54px, 7.6vw, 116px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .55)); }
.d-title .agency { display: block; margin-top: 10px; font: 700 clamp(22px, 2.4vw, 34px)/1 var(--f-display); letter-spacing: .14em; color: #dfe6f2; }
.d-lede { margin: 22px 0 0; max-width: 540px; font-size: clamp(16px, 1.3vw, 18px); color: #d3dbea; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.d-quick { display: flex; gap: clamp(18px, 3vw, 40px); margin-top: 26px; flex-wrap: wrap; }
.d-quick div b { display: block; font: 800 clamp(34px, 3.4vw, 46px)/1 var(--f-display); }
.d-quick div span { font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #b4c0d8; }
.d-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.d-card-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.d-card-wrap .tcard { width: min(370px, 100%); cursor: pointer; }
.d-card-wrap.awaiting .tcard { opacity: 0; }
.d-card-wrap .floaty { animation: floaty 6s ease-in-out infinite; width: 100%; display: flex; justify-content: center; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.card-hint { margin-top: 18px; display: flex; gap: 16px; font: 600 12px/1 var(--f-body); color: #c3cde3; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.card-hint span { display: inline-flex; gap: 6px; align-items: center; }
.card-hint .ic { width: 14px; height: 14px; }
.card-halo { position: absolute; inset: 10% 0 auto; height: 70%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); filter: blur(30px); opacity: .7; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 800 11px/1 var(--f-display); letter-spacing: .3em; color: var(--muted); text-decoration: none; }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(#fff, transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 900px) {
  .d-hero { padding: 0 0 56px; display: block; min-height: 0; }
  .d-hero-bg { bottom: auto; height: min(78vw, 520px); }
  .d-hero-bg .ph { object-position: var(--mpos, 50% 55%); }
  .d-hero::before { bottom: auto; height: min(78vw, 520px); background: linear-gradient(180deg, rgba(4, 7, 15, .6) 0%, transparent 22%, transparent 45%, rgba(4, 7, 15, .75) 78%, var(--bg) 100%); }
  .d-hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "card" "body"; min-height: 0; }
  .d-head { padding-top: calc(min(78vw, 520px) - 150px); text-align: center; align-self: auto; }
  .d-title { font-size: clamp(46px, 13vw, 84px); }
  .d-meta { justify-content: center; margin-bottom: 12px; }
  .d-card-wrap { margin-top: 30px; }
  .d-card-wrap .tcard { width: min(340px, 84vw); }
  .d-body { text-align: center; margin-top: 10px; }
  .d-quick, .d-actions { justify-content: center; }
  .d-quick { gap: 22px; flex-wrap: nowrap; }
  .d-quick div b { font-size: 34px; }
  .d-quick div span { font-size: 10px; letter-spacing: .08em; }
  .d-lede { margin-inline: auto; }
  .scroll-cue { display: none; }
}

/* stats */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { position: relative; padding: 28px 26px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); border: 1px solid var(--line); overflow: hidden; }
.stat::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; color: #cfe0ff; }
.stat-top .ic { width: 26px; height: 26px; }
.stat-rank { font: 800 12px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; }
.stat-rank.top { color: #06112a; background: linear-gradient(110deg, #fff, #ffe6a8); border-color: transparent; }
.stat b { display: block; font: 800 clamp(52px, 6vw, 84px)/.9 var(--f-display); letter-spacing: -.005em; }
.stat .lbl { display: block; margin-top: 10px; font: 700 12px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meter { margin-top: 22px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #fff); transition: width 1.6s var(--ease) .2s; }
.in .meter i { width: calc(var(--p) * 100%); }
.stat.ring { display: flex; flex-direction: column; }
.ring-svg { position: absolute; right: 22px; bottom: 22px; width: 92px; height: 92px; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 7; }
.ring-svg .bgc { stroke: rgba(255, 255, 255, .08); }
.ring-svg .fgc { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat { padding: 22px 18px 18px; } .stat-top { margin-bottom: 18px; } .ring-svg { width: 64px; height: 64px; right: 14px; bottom: 14px; } }
@media (max-width: 420px) { .stat b { font-size: 46px; } .stat-rank { font-size: 10px; padding: 5px 7px; letter-spacing: .1em; } }

/* about */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.about-grid .big { font: 500 clamp(20px, 2vw, 26px)/1.45 var(--f-body); color: #dde5f3; margin: 26px 0 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border-top: 1px solid var(--line); }
.facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 700 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 6px 0 0; font: 700 18px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.hl-list { display: flex; flex-direction: column; gap: 14px; }
.hl { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.hl:hover { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateX(4px); }
.hl .pi { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, transparent), rgba(255, 255, 255, .03)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.hl .pi .ic { width: 24px; height: 24px; }
.hl h3 { font-size: 24px; margin: 4px 0 6px; }
.hl p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(50px, 7vw, 90px); padding-top: 34px; }
.timeline::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, .1); }
.timeline::after { content: ''; position: absolute; top: 7px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--red), var(--accent)); transition: width 2s var(--ease); }
.timeline.in::after { width: 100%; }
.tl { position: relative; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(.3s + var(--i) * .35s); }
.timeline.in .tl { opacity: 1; transform: none; }
.tl::before { content: ''; position: absolute; top: -34px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 14px var(--accent); }
.tl b { display: block; font: 800 38px/1 var(--f-display); }
.tl span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 26px; padding: 0 0 0 34px; }
  .timeline::before, .timeline::after { top: 0; bottom: 0; left: 7px; width: 2px; height: auto; }
  .timeline::after { height: 0; bottom: auto; transition: height 2s var(--ease); }
  .timeline.in::after { width: 2px; height: 100%; }
  .tl::before { top: 6px; left: -34px; }
}

/* gallery */
.gallery { position: relative; }
.g-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gutter), (100vw - var(--maxw)) / 2) 24px; scrollbar-width: none; cursor: grab; }
.g-track::-webkit-scrollbar { display: none; }
.g-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.g-item { position: relative; flex: none; width: min(78vw, 880px); aspect-ratio: 16 / 9.4; border-radius: 26px; overflow: hidden; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .1); background: #050914; transform: scale(.94); opacity: .55; transition: transform .7s var(--ease), opacity .7s; cursor: zoom-in; }
.g-item .ph { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.g-item.on:hover .ph { transform: scale(1.04); }
.g-track.dragging .g-item { cursor: grabbing; }
.g-item.on { transform: none; opacity: 1; }
.g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 26px 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; background: linear-gradient(transparent, rgba(3, 6, 14, .85)); }
.g-item figcaption b { display: block; font: 800 clamp(20px, 2.4vw, 30px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.g-item figcaption span { font: 700 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.g-item figcaption em { font: 800 14px/1 var(--f-display); font-style: normal; letter-spacing: .2em; color: var(--muted); }
.g-nav { display: flex; gap: 10px; }
@media (max-width: 720px) { .g-item { width: 86vw; border-radius: 18px; } .g-item figcaption { padding: 40px 16px 14px; } }

/* fleet */
.fleet-grid { display: grid; grid-template-columns: 1.45fr .9fr; gap: clamp(20px, 4vw, 50px); align-items: start; }
.fl-row { display: grid; grid-template-columns: clamp(110px, 14vw, 180px) 1fr auto; gap: clamp(14px, 2.4vw, 28px); align-items: center; padding: 18px 22px 18px 16px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); margin-bottom: 12px; transition: background .3s, border-color .3s; }
.fl-row:hover { background: rgba(255, 255, 255, .055); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fl-jelly { aspect-ratio: 5 / 3; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #e9edf3 60%, #c9d1dc 100%); display: grid; place-items: center; }
.fl-jelly img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); transition: transform .8s var(--ease); }
.fl-row:hover .fl-jelly img { transform: scale(1.2); }
.fl-info b { display: block; font: 800 clamp(18px, 1.8vw, 24px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.fl-info span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.fl-info .tag { display: inline-flex; margin-left: 8px; padding: 3px 7px; border-radius: 6px; font: 800 10px/1 var(--f-display); letter-spacing: .14em; color: #062417; background: #5cf2b0; vertical-align: 3px; }
.fl-info .meter { margin-top: 12px; }
.fl-count { text-align: right; }
.fl-count b { display: block; font: 800 clamp(34px, 3.4vw, 46px)/1 var(--f-display); }
.fl-count small { font: 700 10px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fleet-aside { position: sticky; top: 100px; padding: 30px; border-radius: 26px; background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%), linear-gradient(160deg, #0e1c46, #070f26); border: 1px solid rgba(255, 255, 255, .12); }
.aside-img { margin: -30px -30px 26px; aspect-ratio: 16 / 9; overflow: hidden; }
.aside-img .ph { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.fleet-aside { overflow: hidden; }
.fleet-aside h3 { font-size: 34px; margin: 0 0 10px; }
.fleet-aside p { color: #c3cde3; margin: 0 0 24px; font-size: 15px; }
.ev-ring { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 24px; }
.ev-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); flex: none; }
.ev-ring circle { fill: none; stroke-width: 9; }
.ev-ring .bgc { stroke: rgba(255, 255, 255, .1); }
.ev-ring .fgc { stroke: #5cf2b0; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.ev-ring b { display: block; font: 800 44px/1 var(--f-display); }
.ev-ring span { font: 700 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fleet-aside > img { height: 28px; width: auto; }
@media (max-width: 900px) { .fleet-grid { grid-template-columns: 1fr; } .fleet-aside { position: relative; top: 0; } }
@media (max-width: 520px) { .fl-row { grid-template-columns: 104px 1fr; } .fl-count { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 6px; } .fl-count b { font-size: 30px; } }

/* connected */
.connected { background: radial-gradient(60% 50% at 20% 30%, rgba(1, 112, 206, .22), transparent 70%), linear-gradient(180deg, transparent, rgba(8, 16, 37, .9) 20%, rgba(8, 16, 37, .9) 80%, transparent); }
.conn-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.conn-copy img.onstar { height: 54px; width: auto; margin-bottom: 30px; }
.conn-copy p { color: #c3cde3; margin: 22px 0 0; max-width: 480px; }
.conn-kpis { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.conn-kpis b { display: block; font: 800 54px/1 var(--f-display); }
.conn-kpis span { font: 700 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.conn-map { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #050c20; border: 1px solid rgba(127, 178, 255, .22); box-shadow: 0 40px 100px -40px rgba(1, 112, 206, .7), inset 0 0 80px rgba(1, 112, 206, .15); }
.conn-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-hud { position: absolute; left: 18px; top: 16px; right: 18px; display: flex; justify-content: space-between; font: 800 12px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: #9fc1ff; pointer-events: none; }
.map-hud .live { display: inline-flex; align-items: center; gap: 8px; }
.map-hud .live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b55; box-shadow: 0 0 10px #ff3b55; animation: blink 1.4s steps(1) infinite; }
.map-legend { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; font: 600 12px/1 var(--f-body); color: #c3cde3; pointer-events: none; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.map-alert { position: absolute; right: 18px; bottom: 16px; padding: 10px 14px; border-radius: 12px; background: rgba(5, 12, 32, .85); border: 1px solid rgba(255, 196, 77, .5); font: 600 12px/1.3 var(--f-body); color: #ffd98a; pointer-events: none; transition: opacity .5s, transform .5s var(--ease); max-width: 60%; }
.map-alert b { display: block; font: 800 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.map-alert.hide { opacity: 0; transform: translateY(8px); }
.conn-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 6vw, 70px); }
.conn-photos figure { position: relative; margin: 0; aspect-ratio: 2 / 1; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.conn-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 22px 18px; background: linear-gradient(transparent, rgba(3, 6, 14, .88)); }
.conn-photos figcaption b { display: block; font: 800 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.conn-photos figcaption span { font-size: 13px; color: #c3cde3; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.cap { padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); transition: transform .45s var(--ease), background .3s; }
.cap:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .06); }
.cap .ic { width: 28px; height: 28px; color: #7fb2ff; margin-bottom: 16px; }
.cap h3 { font-size: 22px; margin-bottom: 6px; }
.cap p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .conn-photos { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .conn-grid { grid-template-columns: 1fr; } .cap-grid { grid-template-columns: 1fr 1fr; } .map-alert { display: none; } }
@media (max-width: 520px) { .cap-grid { grid-template-columns: 1fr; } }

/* quote */
.quote-sec { text-align: center; }
.q-mark { font: 900 italic 220px/.6 var(--f-display); height: 110px; background: linear-gradient(90deg, var(--red), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-text { max-width: 1000px; margin: 0 auto; font: 600 clamp(24px, 3.4vw, 46px)/1.25 var(--f-body); letter-spacing: -.015em; }
.q-text .wd { opacity: .14; transition: opacity .6s ease; transition-delay: calc(var(--i) * 28ms); }
.q-text.in .wd { opacity: 1; }
.q-by { display: inline-flex; align-items: center; gap: 16px; margin-top: 40px; text-align: left; }
.q-avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--chrome); color: #0e1a3c; font: 900 22px/1 var(--f-display); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.q-by b { display: block; font: 800 22px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.q-by span { color: var(--muted); font-size: 14px; }

/* keep collecting */
.more-track { display: flex; gap: 20px; overflow-x: auto; padding: 18px max(var(--gutter), (100vw - var(--maxw)) / 2) 30px; scroll-snap-type: x proximity; scrollbar-width: none; }
.more-track::-webkit-scrollbar { display: none; }
.more-track .coll-item { flex: none; width: clamp(170px, 18vw, 220px); scroll-snap-align: start; }

/* deck drawer */
.deck { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.deck.open { visibility: visible; }
.deck-scrim { position: absolute; inset: 0; background: rgba(2, 4, 10, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s; }
.deck.open .deck-scrim { opacity: 1; }
.deck-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #0c1838, #060b1d); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -30px 80px rgba(0, 0, 0, .6); transform: translateY(105%); transition: transform .6s cubic-bezier(.2, .9, .2, 1); }
.deck.open .deck-sheet { transform: none; }
.deck-grip { width: 44px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); margin: 10px auto 0; }
.deck-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gutter) 18px; border-bottom: 1px solid var(--line); }
.deck-head h2 { font-size: clamp(30px, 4vw, 44px); }
.deck-head .progress-bar { width: 120px; }
.deck-body { overflow-y: auto; padding: 26px var(--gutter) 40px; overscroll-behavior: contain; }
.deck-body .coll-grid { grid-template-columns: repeat(auto-fill, minmax(min(170px, 40vw), 1fr)); max-width: 1400px; margin: 0 auto; }
.deck .coll-item { opacity: 0; transform: translateY(30px) rotate(var(--r, 0deg)); transition: opacity .5s var(--ease), transform .6s var(--ease-spring); transition-delay: calc(var(--i) * 35ms + .1s); }
.deck.open .coll-item { opacity: 1; transform: none; }
.deck .coll-item:hover { transform: translateY(-6px); }
.deck .coll-item.current .tc-face { box-shadow: 0 0 0 3px #fff, 0 20px 50px -10px rgba(127, 178, 255, .6); }
@media (max-width: 720px) { .deck-head .progress { display: none; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 70px 4vw 40px; background: rgba(2, 4, 10, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; cursor: zoom-out; }
.lightbox.open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.open img { transform: none; }
.lightbox p { margin: 16px 0 0; font: 800 18px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #c3cde3; }
.lightbox .icon-btn { position: absolute; top: 16px; right: 16px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 75; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(8, 16, 37, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(127, 178, 255, .5); transform: translate(-50%, 140%); transition: transform .7s var(--ease-spring); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); }
.toast-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #fff, #cfe0ff 40%, #ffe6a8); color: #0b1430; flex: none; }
.toast-ic .ic { width: 24px; height: 24px; }
.toast b { display: block; font: 800 18px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.toast span { font-size: 13px; color: var(--muted); }
.burst { position: fixed; z-index: 76; pointer-events: none; width: 8px; height: 8px; border-radius: 2px; animation: burst 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes burst { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; } }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-bg *, .kb { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}