:root {
  --indigo: #4146B8;
  --coral: #FF725E;
  --light-indigo: #E8EAFF;
  --light-coral: #FFD8D1;
  --ink: #171A2B;
  --night: #0B0F1F;
  --paper: #F7F8FC;
  --text: #F7F8FC;
  --muted: rgba(235,238,255,.68);
  --panel: rgba(13,17,46,.50);
  --line: rgba(255,255,255,.14);
  --shadow: rgba(0,0,0,.40);
  --mx: 50vw;
  --my: 50vh;
  --overall: 0;
  --mark-x: 4vw;
  --mark-y: -10vh;
  --mark-z: 0px;
  --mark-ry: -12deg;
  --mark-rx: 5deg;
  --mark-rz: -4deg;
  --mark-scale: .92;
  --nav-x: 2%;
  --nav-y: 52px;
  --ease: cubic-bezier(.2,.76,.2,1);
}
html[data-theme="light"] {
  --text: #14162A;
  --muted: rgba(30,32,66,.68);
  --panel: rgba(236,237,255,.64);
  --line: rgba(65,70,184,.16);
  --shadow: rgba(65,70,184,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--night); }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0B0F1F;
  overflow-x: hidden;
  transition: color .7s ease, background-color .9s ease;
}
html[data-theme="light"] body { background: #E8EAFF; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.film-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .052; mix-blend-mode: soft-light;
  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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; z-index: 0; width: 42rem; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  left: var(--mx); top: var(--my); transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(112,119,255,.16), rgba(255,114,94,.06) 38%, transparent 70%);
  filter: blur(14px); opacity: .9; transition: opacity .7s ease, background .7s ease;
}
html[data-theme="light"] .cursor-glow {
  opacity: .72;
  background: radial-gradient(circle, rgba(65,70,184,.20), rgba(255,114,94,.10) 40%, transparent 70%);
}
.theme-wash {
  position: fixed; z-index: 130; right: 32px; top: 26px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  transform: translate(50%,-50%) scale(.1); opacity: 0;
  background: radial-gradient(circle at 45% 45%, rgba(255,114,94,.26), rgba(65,70,184,.30) 42%, transparent 72%);
  filter: blur(4px); mix-blend-mode: screen;
}
html.theme-changing .theme-wash { animation: themeWash 900ms var(--ease) both; }

.topbar {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 22px clamp(20px,4vw,64px); pointer-events: none;
}
.brand, .launch-statement, .theme-orbit { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -.035em; align-self:center; }
.brand img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 7px 14px rgba(77,85,255,.28)); }
.launch-statement {
  justify-self:center; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 19px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); backdrop-filter:blur(22px) saturate(1.35); -webkit-backdrop-filter:blur(22px) saturate(1.35); box-shadow:0 14px 45px var(--shadow);
  transition:background .7s ease,border-color .7s ease,box-shadow .7s ease;
}
.launch-kicker { font-size:9px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--coral); }
.launch-copy { font-size:11px; font-weight:650; letter-spacing:.015em; white-space:nowrap; }
.theme-orbit {
  justify-self:end; border:0; background:transparent; color:var(--text); display:flex; align-items:center; gap:10px; cursor:pointer; padding:0;
}
.orbit-icon {
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center; position:relative; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(145deg,rgba(65,70,184,.38),rgba(255,114,94,.15));
  box-shadow:inset 0 0 20px rgba(255,255,255,.08),0 12px 35px var(--shadow); backdrop-filter:blur(18px);
  transition:transform .65s var(--ease),background .8s ease,border-color .8s ease,box-shadow .8s ease;
}
.theme-orbit:hover .orbit-icon { transform:rotate(12deg) scale(1.05); }
.orbit-sun { position:absolute; color:#FFD4CA; font-size:24px; transform:translate(-8px,-8px) rotate(0deg); transition:transform .8s var(--ease),opacity .6s ease; }
.orbit-moon { position:absolute; width:21px; height:21px; border-radius:50%; background:#F4F5FF; box-shadow:-8px 5px 0 0 #4146B8; transform:translate(9px,8px); transition:transform .8s var(--ease),opacity .6s ease; }
html[data-theme="light"] .orbit-icon { background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,114,94,.24)); }
html[data-theme="light"] .orbit-sun { transform:translate(0,0) rotate(90deg) scale(1.08); color:#FF725E; }
html[data-theme="light"] .orbit-moon { transform:translate(22px,22px) scale(.5); opacity:.2; }
.orbit-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.orbit-copy small { font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.orbit-copy b { font-size:12px; letter-spacing:.04em; }

.story { height: 430vh; position: relative; }
.stage { position: sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; }
.stage::before,
.stage::after { content:""; position:absolute; inset:0; z-index:-5; transition:opacity .95s ease; }
.stage::before {
  opacity:1;
  background:
    radial-gradient(ellipse at 78% 17%,rgba(73,78,205,.42),transparent 33%),
    radial-gradient(ellipse at 92% 76%,rgba(255,114,94,.23),transparent 37%),
    linear-gradient(112deg,#070A18 0%,#0B1030 44%,#191850 72%,#221737 100%);
}
.stage::after {
  opacity:0;
  background:
    radial-gradient(ellipse at 16% 20%,rgba(65,70,184,.26),transparent 40%),
    radial-gradient(ellipse at 78% 18%,rgba(107,113,255,.28),transparent 34%),
    radial-gradient(ellipse at 88% 78%,rgba(255,114,94,.28),transparent 38%),
    linear-gradient(122deg,#CED3FF 0%,#E4E4FF 34%,#F3DBEC 67%,#FFD7CF 100%);
}
html[data-theme="light"] .stage::before { opacity:0; }
html[data-theme="light"] .stage::after { opacity:1; }
.atmosphere { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.atmosphere::before {
  content:""; position:absolute; inset:-4%; background:url("assets/komeetix-dark-atmosphere.png") center/cover no-repeat; opacity:.24; mix-blend-mode:screen;
  transition:opacity .9s ease,filter .9s ease,mix-blend-mode .9s ease;
  transform:translate3d(calc(var(--overall) * -1.8vw),calc(var(--overall) * 2.3vh),0) scale(1.04);
}
html[data-theme="light"] .atmosphere::before { opacity:.14; mix-blend-mode:multiply; filter:saturate(1.25) hue-rotate(-6deg); }
.world-grid {
  position:absolute; inset:42% -20% -35%; transform:perspective(800px) rotateX(68deg) translateY(calc(var(--overall) * -4vh)); transform-origin:center top;
  background-image:linear-gradient(rgba(123,129,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(123,129,255,.12) 1px,transparent 1px);
  background-size:72px 72px; -webkit-mask-image:linear-gradient(to bottom,transparent,black 24%,transparent 92%); mask-image:linear-gradient(to bottom,transparent,black 24%,transparent 92%);
  opacity:.45; transition:opacity .8s ease;
}
html[data-theme="light"] .world-grid { opacity:.28; }
.aurora { position:absolute; border-radius:50%; filter:blur(76px); will-change:transform; transition:background .9s ease,opacity .9s ease; }
.aurora-a { width:56vw; height:56vw; right:-14vw; top:-14vw; background:radial-gradient(circle,#5E63FF 0%,rgba(65,70,184,.52) 36%,transparent 72%); transform:translate3d(calc(var(--overall) * -12vw),calc(var(--overall) * 7vh),0); opacity:.48; }
.aurora-b { width:48vw; height:48vw; right:-5vw; bottom:-20vw; background:radial-gradient(circle,#FF725E 0%,rgba(255,114,94,.38) 36%,transparent 72%); transform:translate3d(calc(var(--overall) * 9vw),calc(var(--overall) * -8vh),0); opacity:.40; }
.aurora-c { width:42vw; height:42vw; left:-18vw; top:18vh; background:radial-gradient(circle,#777DFF 0%,rgba(65,70,184,.24) 36%,transparent 72%); transform:translate3d(calc(var(--overall) * 7vw),calc(var(--overall) * 9vh),0); opacity:.25; }
html[data-theme="light"] .aurora-a { background:radial-gradient(circle,#8086FF 0%,rgba(65,70,184,.34) 36%,transparent 72%); opacity:.55; }
html[data-theme="light"] .aurora-b { background:radial-gradient(circle,#FF8D79 0%,rgba(255,114,94,.32) 38%,transparent 72%); opacity:.58; }
html[data-theme="light"] .aurora-c { background:radial-gradient(circle,#A7ABFF 0%,rgba(65,70,184,.28) 40%,transparent 74%); opacity:.48; }
.glass-orb { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.24); box-shadow:inset 0 0 34px rgba(255,255,255,.12),0 30px 100px rgba(28,23,106,.24); backdrop-filter:blur(9px); transition:border-color .8s ease,box-shadow .8s ease,background .8s ease; will-change:transform; }
.orb-a { width:13vw; height:13vw; right:9vw; top:9vh; background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.64),rgba(99,106,255,.34) 24%,rgba(44,48,155,.15) 60%,transparent); transform:translate3d(calc(var(--overall) * -9vw),calc(var(--overall) * 13vh),0) scale(calc(1 + var(--overall) * .12)); }
.orb-b { width:7vw; height:7vw; right:40vw; bottom:15vh; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.58),rgba(255,114,94,.44) 35%,transparent 70%); transform:translate3d(calc(var(--overall) * 8vw),calc(var(--overall) * -18vh),0); }
.orb-c { width:19vw; height:19vw; right:-8vw; bottom:5vh; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),rgba(255,114,94,.26) 28%,rgba(65,70,184,.18) 62%,transparent); transform:translate3d(calc(var(--overall) * -5vw),calc(var(--overall) * -6vh),0) scale(calc(1 - var(--overall) * .08)); }
html[data-theme="light"] .glass-orb { border-color:rgba(65,70,184,.20); box-shadow:inset 0 0 34px rgba(255,255,255,.78),0 28px 90px rgba(65,70,184,.18); }
.light-ribbon { position:absolute; border-radius:50%; border:1px solid rgba(130,136,255,.22); filter:blur(.2px); opacity:.65; will-change:transform; }
.ribbon-a { width:92vw; height:40vw; right:-44vw; top:5vh; transform:translate3d(calc(var(--overall) * -15vw),calc(var(--overall) * 7vh),0) rotate(-26deg); box-shadow:0 0 45px rgba(98,104,255,.12),inset 0 0 70px rgba(255,114,94,.08); }
.ribbon-b { width:72vw; height:22vw; left:-32vw; bottom:2vh; transform:translate3d(calc(var(--overall) * 18vw),calc(var(--overall) * -8vh),0) rotate(14deg); box-shadow:0 0 40px rgba(255,114,94,.10),inset 0 0 60px rgba(98,104,255,.08); }
html[data-theme="light"] .light-ribbon { border-color:rgba(65,70,184,.22); opacity:.82; }
.light-sweep { position:absolute; width:22vw; height:150vh; left:44vw; top:-24vh; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transform:rotate(22deg) translateX(calc(-55vw + var(--overall) * 110vw)); filter:blur(10px); opacity:.75; }

.ghost-type { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ghost-type span {
  position:absolute; left:2vw; top:49%; transform:translateY(-50%) translateX(var(--ghost-x,0)) scale(.96); width:96vw;
  font-weight:900; font-size:clamp(150px,22vw,430px); line-height:.72; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px rgba(160,165,255,.14);
  opacity:var(--ghost-opacity,0); filter:blur(var(--ghost-blur,8px)); transition:-webkit-text-stroke-color .8s ease; white-space:nowrap;
}
html[data-theme="light"] .ghost-type span { -webkit-text-stroke-color:rgba(50,55,150,.14); }

.visual { position:absolute; right:clamp(3vw,6vw,110px); top:50%; transform:translateY(-50%); width:min(52vw,830px); aspect-ratio:1; display:grid; place-items:center; perspective:1300px; z-index:2; pointer-events:none; }
.mark-path { width:100%; height:100%; display:grid; place-items:center; position:relative; transform:translate3d(var(--mark-x),var(--mark-y),var(--mark-z)) rotateZ(var(--mark-rz)) scale(var(--mark-scale)); will-change:transform; }
.mark-shell { width:76%; height:76%; display:grid; place-items:center; transform:rotateY(var(--mark-ry)) rotateX(var(--mark-rx)); transform-style:preserve-3d; }
.hero-mark { width:100%; height:100%; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 52px 50px rgba(0,0,0,.24)) drop-shadow(0 0 38px rgba(93,99,255,.26)); animation:microFloat 7s ease-in-out infinite; transition:filter .8s ease; }
html[data-theme="light"] .hero-mark { filter:drop-shadow(0 38px 48px rgba(65,70,184,.19)) drop-shadow(0 0 32px rgba(255,114,94,.16)); }
.mark-halo { position:absolute; width:76%; height:76%; border-radius:50%; background:conic-gradient(from 180deg,rgba(65,70,184,.30),rgba(255,114,94,.25),rgba(120,126,255,.22),rgba(65,70,184,.30)); filter:blur(58px); opacity:.66; animation:halo 13s linear infinite; }
.reflection { position:absolute; width:58%; height:12%; bottom:7%; border-radius:50%; background:radial-gradient(ellipse,rgba(104,110,255,.38),rgba(255,114,94,.15) 43%,transparent 73%); filter:blur(22px); transform:translateY(calc(var(--overall) * 1.5vh)) scaleX(calc(1 + var(--overall) * .18)); }
.mark-trace { position:absolute; width:86%; height:86%; border-radius:50%; border:1px solid rgba(130,136,255,.13); transform:rotate(calc(-28deg + var(--overall) * 42deg)) scale(calc(.90 + var(--overall) * .14)); box-shadow:0 0 70px rgba(65,70,184,.10); }
html[data-theme="light"] .mark-trace { border-color:rgba(65,70,184,.20); }

.scenes { position:absolute; left:clamp(24px,6.5vw,112px); top:50%; transform:translateY(-50%); width:min(49vw,900px); min-height:500px; z-index:4; }
.scene { position:absolute; inset:auto 0; top:50%; transform:translate3d(0,var(--scene-y,0),0) translateY(-50%) scale(var(--scene-scale,1)); opacity:var(--scene-opacity,0); filter:blur(var(--scene-blur,0)); pointer-events:none; will-change:transform,opacity,filter; }
.scene.is-current { pointer-events:auto; }
.eyebrow { display:block; margin-bottom:24px; text-transform:uppercase; letter-spacing:.24em; font-size:clamp(10px,.86vw,13px); font-weight:800; color:var(--muted); }
.scene h1,.scene h2 { margin:0; max-width:10.6ch; font-size:clamp(64px,7.4vw,142px); line-height:.86; letter-spacing:-.072em; font-weight:810; text-wrap:balance; text-shadow:0 16px 70px rgba(0,0,0,.06); }
.scene[data-scene="3"] h2 { max-width:12.5ch; font-size:clamp(56px,6.15vw,116px); }
.scene p { margin:32px 0 0; max-width:590px; font-size:clamp(16px,1.18vw,21px); line-height:1.55; color:var(--muted); }

.story-nav { position:absolute; left:clamp(24px,6.5vw,112px); right:clamp(170px,16vw,320px); bottom:34px; z-index:6; height:86px; }
.nav-rail { position:absolute; inset:0 0 25px; }
.nav-rail svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nav-rail path { fill:none; vector-effect:non-scaling-stroke; }
.rail-shadow { stroke:rgba(255,255,255,.08); stroke-width:1.4; }
.rail-glow { stroke:url(#none); stroke:rgba(118,124,255,.26); stroke-width:1; stroke-dasharray:2 8; }
html[data-theme="light"] .rail-shadow { stroke:rgba(65,70,184,.16); }
html[data-theme="light"] .rail-glow { stroke:rgba(65,70,184,.32); }
.nav-comet { position:absolute; left:var(--nav-x); top:var(--nav-y); width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,#FFB2A6 20%,#FF725E 43%,#656BFF 74%,transparent 76%); box-shadow:0 0 22px rgba(255,114,94,.65),0 0 46px rgba(86,92,255,.40); }
.nav-comet::before { content:""; position:absolute; right:10px; top:50%; width:110px; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,transparent,rgba(100,106,255,.06),rgba(255,114,94,.55)); filter:blur(.2px); transform-origin:right center; }
.nav-comet::after { content:""; position:absolute; inset:-12px; border-radius:50%; border:1px solid rgba(255,255,255,.15); animation:cometPulse 2.8s ease-in-out infinite; }
.nav-comet i { position:absolute; inset:4px; border-radius:50%; background:#fff; opacity:.88; }
.nav-labels { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); }
.nav-labels button { border:0; background:none; color:var(--muted); padding:10px 0 0; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:color .35s ease,opacity .35s ease; }
.nav-labels button:first-child { text-align:left; }
.nav-labels button:last-child { text-align:right; }
.nav-labels button.is-current { color:var(--text); }
.nav-labels button:not(.is-current) { opacity:.62; }

.orbit-signature { position:absolute; right:clamp(28px,5vw,82px); bottom:28px; z-index:7; width:112px; height:112px; display:grid; place-items:center; }
.signature-ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; animation:spin 18s linear infinite; }
.signature-ring path { fill:none; }
.signature-ring text { fill:var(--muted); font-size:7.2px; font-weight:700; letter-spacing:1.75px; text-transform:uppercase; }
.signature-core { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(18px); color:var(--coral); font-size:18px; box-shadow:0 12px 30px var(--shadow); animation:coreDrift 3s ease-in-out infinite; }
.progress { position:absolute; z-index:8; left:0; bottom:0; width:100%; height:2px; background:rgba(255,255,255,.06); }
.progress i { display:block; height:100%; width:calc(var(--overall)*100%); background:linear-gradient(90deg,var(--indigo),#777DFF,var(--coral)); box-shadow:0 0 20px rgba(255,114,94,.34); }

.mobile-story { display:none; }
footer { min-height:110px; padding:30px clamp(24px,6vw,90px); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; color:var(--muted); background:#080B18; transition:background .8s ease; }
html[data-theme="light"] footer { background:#DDE0F8; }

@keyframes pulse { 50%{transform:scale(1.35);opacity:.65} }
@keyframes microFloat { 50%{transform:translateY(-8px) rotate(.55deg)} }
@keyframes halo { to{transform:rotate(360deg)} }
@keyframes cometPulse { 50%{transform:scale(1.25);opacity:.15} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes coreDrift { 50%{transform:translateY(4px)} }
@keyframes themeWash { 0%{opacity:0;transform:translate(50%,-50%) scale(.2)} 30%{opacity:.20} 100%{opacity:0;transform:translate(50%,-50%) scale(8)} }

@media (max-width: 1080px) and (min-width: 881px) {
  .launch-copy { display:none; }
  .launch-statement { padding-inline:15px; }
  .scene h1,.scene h2 { font-size:clamp(58px,7.8vw,104px); }
  .visual { right:-2vw; width:54vw; }
  .story-nav { right:180px; }
}

@media (max-width: 880px) {
  .topbar { padding:16px 18px; grid-template-columns:1fr auto; }
  .launch-statement { display:none; }
  .theme-orbit { grid-column:2; }
  .orbit-copy { display:none; }
  .orbit-icon { width:44px; height:44px; }
  .story { display:none; }
  .mobile-story { display:block; position:relative; padding-top:76px; overflow:hidden; background:linear-gradient(155deg,#0B0F1F,#171A4B 50%,#2A1637); transition:background .9s ease; }
  html[data-theme="light"] .mobile-story { background:linear-gradient(155deg,#CCD1FF,#E9E6FF 44%,#FFD8D1); }
  .mobile-atmosphere { position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 78% 20%,rgba(93,99,255,.36),transparent 33%),radial-gradient(circle at 24% 78%,rgba(255,114,94,.22),transparent 35%); transform:translateY(calc(var(--mobile-overall,0)*-6vh)); }
  html[data-theme="light"] .mobile-atmosphere { background:radial-gradient(circle at 78% 20%,rgba(65,70,184,.28),transparent 35%),radial-gradient(circle at 24% 78%,rgba(255,114,94,.30),transparent 38%); }
  .mobile-scene { min-height:100svh; padding:112px 24px 76px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
  .mobile-scene::before { content:""; position:absolute; inset:auto -30vw 6vh auto; width:78vw; height:78vw; border-radius:50%; border:1px solid rgba(126,132,255,.18); box-shadow:inset 0 0 60px rgba(255,114,94,.08); transform:rotate(-22deg); }
  .mobile-scene img { width:min(78vw,440px); align-self:center; filter:drop-shadow(0 30px 42px rgba(0,0,0,.28)); margin:-34px 0 -8px; animation:microFloat 7s ease-in-out infinite; }
  .mobile-scene h1,.mobile-scene h2 { margin:0; font-size:clamp(50px,15.3vw,88px); line-height:.89; letter-spacing:-.065em; max-width:9ch; }
  .mobile-scene p { max-width:32rem; margin:24px 0 0; font-size:17px; line-height:1.55; color:var(--muted); }
  .mobile-scene .eyebrow { margin-bottom:20px; }
  .mobile-orb { width:62vw; height:62vw; align-self:flex-end; margin:-6vh -24vw -1vh 0; border-radius:50%; background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.62),rgba(99,106,255,.58) 24%,rgba(255,114,94,.32) 56%,transparent 72%); box-shadow:inset 0 0 30px rgba(255,255,255,.15),0 30px 80px rgba(65,70,184,.16); }
  .signature { margin-top:46px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  footer { min-height:150px; flex-direction:column; justify-content:center; text-align:center; }
  .cursor-glow { display:none; }
  .theme-wash { right:18px; top:16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   v3 refinement: cinematic type, magnetic coming-soon portal,
   artful meeting-point control, richer light footer.
   ───────────────────────────────────────────────────────────── */

/* The display face stays dense, but no longer crushes the counters. */
.scene h1,
.scene h2 {
  letter-spacing: -.044em;
  position: relative;
  z-index: 12;
  transform: translateZ(92px);
  text-shadow:
    0 2px 0 rgba(255,255,255,.035),
    0 20px 70px rgba(0,0,0,.18),
    0 0 36px rgba(91,98,255,.08);
}
.scene[data-scene="3"] h2 { letter-spacing: -.038em; }
.scenes { perspective: 1050px; transform-style: preserve-3d; }
.scene { transform-style: preserve-3d; }
.scene .eyebrow,
.scene p {
  position: relative;
  z-index: 15;
  transform: translateZ(138px);
  text-shadow:
    0 8px 28px rgba(0,0,0,.30),
    0 0 20px rgba(93,99,255,.16);
}
.scene .eyebrow {
  margin-bottom: 26px;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: .22em;
  font-weight: 820;
}
.scene p {
  margin-top: 34px;
  max-width: 640px;
  font-size: clamp(18px, 1.34vw, 24px);
  line-height: 1.48;
  font-weight: 530;
  letter-spacing: -.012em;
}
html[data-theme="light"] .scene h1,
html[data-theme="light"] .scene h2 {
  text-shadow:
    0 2px 0 rgba(255,255,255,.62),
    0 20px 60px rgba(65,70,184,.15),
    0 0 30px rgba(255,114,94,.08);
}
html[data-theme="light"] .scene .eyebrow,
html[data-theme="light"] .scene p {
  text-shadow:
    0 8px 24px rgba(255,255,255,.74),
    0 16px 38px rgba(65,70,184,.14);
}

/* A richer light atmosphere without a dead-white left side. */
.stage::after {
  background:
    radial-gradient(ellipse at 6% 36%, rgba(122,128,255,.36), transparent 42%),
    radial-gradient(ellipse at 52% 2%, rgba(239,218,255,.72), transparent 36%),
    radial-gradient(ellipse at 82% 18%, rgba(107,113,255,.34), transparent 36%),
    radial-gradient(ellipse at 90% 78%, rgba(255,114,94,.34), transparent 40%),
    linear-gradient(122deg,#BCC3FF 0%,#D3D4FF 28%,#EACEEB 63%,#FFC9BE 100%);
}

/* COMING SOON becomes a small interactive object instead of a status pill. */
.coming-portal {
  --portal-x: 0px;
  --portal-y: 0px;
  --portal-tilt-x: 0deg;
  --portal-tilt-y: 0deg;
  pointer-events: auto;
  justify-self: center;
  width: clamp(330px, 34vw, 520px);
  min-height: 66px;
  padding: 9px 10px 9px 22px;
  display: grid;
  grid-template-columns: 1fr 54px;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 24px 44px 44px 24px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 45%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 54px var(--shadow),
    0 0 0 1px rgba(101,108,255,.04);
  backdrop-filter: blur(24px) saturate(1.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.42);
  cursor: pointer;
  appearance: none;
  transform: perspective(900px) rotateX(var(--portal-tilt-x)) rotateY(var(--portal-tilt-y));
  transform-style: preserve-3d;
  transition:
    background .8s ease,
    border-color .8s ease,
    box-shadow .55s var(--ease),
    transform .24s ease;
}
.coming-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(72% + var(--portal-x)) calc(50% + var(--portal-y)), rgba(255,114,94,.19), transparent 22%),
    radial-gradient(circle at calc(88% + var(--portal-x)) calc(46% + var(--portal-y)), rgba(92,99,255,.24), transparent 28%);
  opacity: .86;
}
.coming-portal::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 65px;
  bottom: 7px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--coral), rgba(123,129,255,.72), transparent);
  transform: scaleX(.16);
  opacity: .62;
  transition: transform .75s var(--ease), opacity .45s ease;
}
.coming-portal:hover::after,
.coming-portal:focus-visible::after { transform: scaleX(1); opacity: .96; }
.coming-portal:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 22px 68px var(--shadow),
    0 0 36px rgba(95,102,255,.16);
}
.coming-portal:focus-visible { outline: 2px solid rgba(255,114,94,.7); outline-offset: 4px; }
.portal-aura {
  position: absolute;
  width: 160px;
  height: 160px;
  right: -54px;
  top: -46px;
  border-radius: 50%;
  background: conic-gradient(from 40deg, rgba(255,114,94,.24), rgba(104,111,255,.24), transparent 72%);
  filter: blur(18px);
  animation: portalAura 11s linear infinite;
  pointer-events: none;
}
.portal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  transform: translateZ(30px);
}
.portal-copy strong {
  display: flex;
  align-items: baseline;
  gap: .34em;
  font-size: clamp(16px, 1.28vw, 21px);
  line-height: .95;
  font-weight: 860;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.portal-copy strong span:first-child { color: var(--coral); }
.portal-copy strong span:last-child { color: var(--text); }
.portal-copy small {
  display: block;
  max-width: 31ch;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--muted);
  white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}
.portal-game {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.11), rgba(79,86,210,.12) 52%, transparent 74%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.06);
  transform: translate3d(var(--portal-x),var(--portal-y),48px);
  transition: transform .18s ease;
}
.portal-track {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(129,136,255,.24);
  border-left-color: rgba(255,114,94,.72);
  transform: rotate(-22deg);
  animation: portalTrack 8s linear infinite;
}
.portal-comet {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 17%, #FFD1C9 25%, var(--coral) 56%, #656BFF 100%);
  box-shadow: 0 0 14px rgba(255,114,94,.82), 0 0 28px rgba(91,98,255,.44);
  animation: portalComet 4.2s ease-in-out infinite;
}
.portal-comet::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 4px;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,114,94,.68));
  transform-origin: right center;
}
.portal-point {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.92), 0 0 22px rgba(100,107,255,.7);
}
.coming-portal.is-charged .portal-game { animation: portalCharge .9s var(--ease); }
.coming-portal.is-charged .portal-track { animation-duration: .75s; }
.coming-portal.is-charged .portal-point { animation: pointBurst .8s ease-out; }
html[data-theme="light"] .coming-portal {
  background:
    linear-gradient(120deg, rgba(255,255,255,.36), rgba(255,255,255,.08) 46%),
    rgba(225,226,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 18px 50px rgba(65,70,184,.16),
    0 0 0 1px rgba(65,70,184,.035);
}

/* The lower-right object is art first, navigation second. */
.orbit-signature {
  position: absolute;
  right: clamp(24px,4.5vw,76px);
  bottom: 22px;
  z-index: 12;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.20));
}
.orbit-signature::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,112,255,.06), transparent 66%);
  opacity: .8;
  transition: transform .6s var(--ease), opacity .5s ease;
}
.orbit-signature:hover::before { transform: scale(1.12); opacity: 1; }
.orbit-signature:focus-visible { outline: 2px solid rgba(255,114,94,.78); outline-offset: 4px; }
.signature-ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; animation:spin 22s linear infinite; transition:filter .45s ease; }
.orbit-signature:hover .signature-ring { animation-duration: 10s; filter: drop-shadow(0 0 8px rgba(255,114,94,.28)); }
.signature-ring path { fill:none; }
.signature-ring text {
  fill: var(--text);
  opacity: .66;
  font-size: 8.6px;
  font-weight: 780;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
html[data-theme="light"] .signature-ring text { opacity: .72; }
.signature-core {
  width: 58px;
  height: 58px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.14), transparent 40%),
    var(--panel);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.07),
    0 14px 34px var(--shadow),
    0 0 26px rgba(91,98,255,.12);
  animation: coreDrift 3.8s ease-in-out infinite;
  transition: transform .55s var(--ease), box-shadow .55s ease;
}
.orbit-signature:hover .signature-core {
  transform: scale(1.08);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.10),
    0 18px 40px var(--shadow),
    0 0 34px rgba(255,114,94,.18);
}
.meeting-orbit {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(120,127,255,.25);
  border-top-color: rgba(255,114,94,.56);
  transform: rotate(25deg);
  animation: spin 8s linear infinite reverse;
}
.meeting-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  z-index: 3;
}
.meeting-dot-a {
  background: #7077FF;
  box-shadow: 0 0 12px rgba(96,103,255,.8);
  animation: meetLeft 2.8s var(--ease) infinite;
}
.meeting-dot-b {
  background: var(--coral);
  box-shadow: 0 0 12px rgba(255,114,94,.8);
  animation: meetRight 2.8s var(--ease) infinite;
}
.meeting-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: white;
  opacity: .85;
  box-shadow: 0 0 8px white, 0 0 20px rgba(255,114,94,.5), 0 0 28px rgba(101,108,255,.5);
  animation: meetingPulse 2.8s ease-in-out infinite;
}

/* In light mode the footer closes the page with the same coral/lavender atmosphere. */
footer { position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,.05); }
html[data-theme="light"] footer {
  color: rgba(23,26,43,.72);
  border-top-color: rgba(65,70,184,.10);
  background:
    radial-gradient(circle at 12% 30%, rgba(255,114,94,.24), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(101,108,255,.22), transparent 34%),
    linear-gradient(106deg, #FFC7BE 0%, #F2D0E9 34%, #DDD9FF 66%, #C7CCFF 100%);
}
html[data-theme="light"] footer::before {
  content: "";
  position: absolute;
  inset: -80% 38% -80% -8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 60px rgba(255,255,255,.18);
  transform: rotate(-18deg);
  pointer-events: none;
}
footer > * { position: relative; z-index: 1; }

@keyframes portalAura { to { transform: rotate(360deg); } }
@keyframes portalTrack { to { transform: rotate(338deg); } }
@keyframes portalComet {
  0%,100% { transform: translate(-14px, 11px) rotate(-28deg) scale(.78); opacity:.72; }
  46% { transform: translate(13px,-11px) rotate(-28deg) scale(1.12); opacity:1; }
  55% { transform: translate(4px,-3px) rotate(-28deg) scale(.88); opacity:.90; }
}
@keyframes portalCharge {
  0% { transform: translate3d(var(--portal-x),var(--portal-y),48px) scale(1); }
  42% { transform: translate3d(var(--portal-x),var(--portal-y),48px) scale(1.16) rotate(8deg); }
  100% { transform: translate3d(var(--portal-x),var(--portal-y),48px) scale(1); }
}
@keyframes pointBurst {
  35% { transform: scale(2.8); box-shadow: 0 0 18px white,0 0 44px var(--coral),0 0 62px #656BFF; }
  100% { transform: scale(1); }
}
@keyframes meetLeft {
  0%,100% { left: 11px; transform: scale(.86); }
  44%,56% { left: 25.5px; transform: scale(1.22); }
}
@keyframes meetRight {
  0%,100% { right: 11px; transform: scale(.86); }
  44%,56% { right: 25.5px; transform: scale(1.22); }
}
@keyframes meetingPulse {
  0%,100% { transform: scale(.65); opacity:.42; }
  47%,54% { transform: scale(1.8); opacity:1; }
}

@media (max-width: 1080px) and (min-width: 881px) {
  .coming-portal { width: 300px; grid-template-columns:1fr 48px; padding-left:16px; }
  .portal-copy small { display:none; }
  .portal-game { width:46px; height:46px; }
  .scene h1,.scene h2 { letter-spacing:-.042em; }
  .scene p { font-size:clamp(17px,1.45vw,20px); max-width:520px; }
  .scene .eyebrow { font-size:12px; }
  .orbit-signature { width:124px; height:124px; right:28px; }
  .signature-ring text { font-size:8px; }
}

@media (max-width: 880px) {
  .coming-portal { display:none; }
  .mobile-scene h1,.mobile-scene h2 { letter-spacing:-.043em; }
  .mobile-scene p { font-size:18px; line-height:1.5; text-shadow:0 10px 26px rgba(0,0,0,.20); }
  .mobile-scene .eyebrow { font-size:12px; letter-spacing:.20em; }
  html[data-theme="light"] footer {
    background:
      radial-gradient(circle at 18% 32%, rgba(255,114,94,.25), transparent 35%),
      radial-gradient(circle at 82% 18%, rgba(101,108,255,.20), transparent 36%),
      linear-gradient(145deg,#FFC7BE,#E7D7F6 52%,#CBD0FF);
  }
}


/* ─────────────────────────────────────────────────────────────
   v4 refinement: living glass, crisp type, floating theme orb,
   slower footer reveal
   ───────────────────────────────────────────────────────────── */

/* Smooth glass edges: no hard 1px circle that can alias on gradients. */
.glass-orb {
  border: 0 !important;
  overflow: visible;
  box-shadow:
    inset 0 0 0 .55px rgba(255,255,255,.16),
    inset 0 0 28px rgba(255,255,255,.10),
    inset -12px -14px 34px rgba(38,43,154,.10),
    0 30px 100px rgba(28,23,106,.20) !important;
  outline: none;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.glass-orb::before {
  content:"";
  position:absolute;
  inset:1.5%;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 1px 1px 2.4px rgba(255,255,255,.28),
    inset -1px -1px 2.8px rgba(80,87,206,.10);
  opacity:.62;
  filter: blur(.28px);
}
html[data-theme="light"] .glass-orb {
  box-shadow:
    inset 0 0 0 .55px rgba(255,255,255,.40),
    inset 0 0 32px rgba(255,255,255,.46),
    inset -13px -16px 36px rgba(65,70,184,.08),
    0 28px 90px rgba(65,70,184,.13) !important;
}

/* Scroll motion + autonomous drift live on separate transform properties. */
.orb-a { animation: orbFloatA 9.5s ease-in-out infinite; }
.orb-b { animation: orbFloatB 7.8s ease-in-out infinite; }
.orb-c { animation: orbFloatC 12.5s ease-in-out infinite; }
@keyframes orbFloatA {
  0%,100% { translate: 0 0; rotate: 0deg; }
  28% { translate: -18px 16px; rotate: -2deg; }
  58% { translate: 12px -22px; rotate: 2.2deg; }
  80% { translate: 23px 8px; rotate: .6deg; }
}
@keyframes orbFloatB {
  0%,100% { translate: 0 0; }
  32% { translate: 20px -15px; }
  65% { translate: -13px -28px; }
  84% { translate: -22px 9px; }
}
@keyframes orbFloatC {
  0%,100% { translate: 0 0; rotate: 0deg; }
  30% { translate: -28px -12px; rotate: 1.5deg; }
  62% { translate: 15px -28px; rotate: -1.2deg; }
  82% { translate: 25px 13px; rotate: .7deg; }
}

/* The large floating glass orb is now the theme control itself. */
.theme-bubble {
  z-index: 3;
  pointer-events: auto;
  appearance: none;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  display: grid;
  place-items: center;
  overflow: visible;
  transition: background .85s ease, box-shadow .85s ease, filter .55s ease !important;
}
.theme-bubble:hover { filter: brightness(1.07) saturate(1.08); }
.theme-bubble:focus-visible { outline: 2px solid rgba(255,114,94,.72); outline-offset: 6px; }
.theme-bubble-core {
  position:relative;
  width:42%;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  transform: translateZ(0);
  opacity:.92;
}
.theme-bubble-sun {
  position:absolute;
  font-size:clamp(18px,1.55vw,28px);
  color:#FFD8CF;
  text-shadow:0 0 20px rgba(255,114,94,.50);
  transition:opacity .7s ease, transform .8s var(--ease), color .7s ease;
}
.theme-bubble-moon {
  position:absolute;
  width:36%;
  aspect-ratio:1;
  border-radius:50%;
  background:#F7F8FC;
  box-shadow:-.30em .19em 0 .02em #5960D5, 0 0 18px rgba(132,138,255,.34);
  opacity:.88;
  transform:translate(42%,34%) scale(.82);
  transition:opacity .7s ease, transform .8s var(--ease), box-shadow .7s ease;
}
.theme-bubble-orbit {
  position:absolute;
  inset:-34%;
  border-radius:50%;
  border-top:1px solid rgba(255,114,94,.34);
  border-right:1px solid rgba(124,131,255,.20);
  animation:spin 12s linear infinite;
  opacity:.62;
}
.theme-bubble-tooltip {
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translate(-50%,8px);
  padding:7px 11px;
  border-radius:999px;
  white-space:nowrap;
  font-size:10px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, transform .35s var(--ease);
}
.theme-bubble:hover .theme-bubble-tooltip,
.theme-bubble:focus-visible .theme-bubble-tooltip { opacity:.82; transform:translate(-50%,0); }
html[data-theme="light"] .theme-bubble-sun { color:#FF725E; transform:scale(1.16) rotate(80deg); }
html[data-theme="light"] .theme-bubble-moon { opacity:.16; transform:translate(82%,72%) scale(.45); }
html[data-theme="dark"] .theme-bubble-sun { opacity:.38; transform:translate(-28%,-26%) scale(.72); }
html[data-theme="dark"] .theme-bubble-moon { opacity:.96; }

/* No rasterizing 3D transform on the text container: portal copy stays crisp. */
.coming-portal {
  transform: none !important;
  border-radius: 26px 46px 46px 26px;
}
.portal-copy { transform:none !important; }
.portal-copy strong {
  font-size:clamp(17px,1.38vw,23px);
  letter-spacing:-.02em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.portal-copy small {
  max-width:34ch;
  font-size:clamp(12px,.9vw,14px);
  line-height:1.18;
  font-weight:650;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}

/* Keep the orbital sculpture alive while the circular type itself remains sharp. */
.orbit-signature { filter:none !important; width:148px; height:148px; }
.orbit-signature::after {
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 68%, rgba(255,114,94,.38) 75%, rgba(109,116,255,.36) 83%, transparent 91%);
  -webkit-mask:radial-gradient(circle, transparent 67%, #000 68% 70%, transparent 71%);
  mask:radial-gradient(circle, transparent 67%, #000 68% 70%, transparent 71%);
  animation:spin 9s linear infinite;
  opacity:.72;
  pointer-events:none;
}
.signature-ring { animation:none !important; filter:none !important; }
.signature-ring text {
  font-size:10.4px;
  font-weight:790;
  letter-spacing:1.22px;
  opacity:.78;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="light"] .signature-ring text { opacity:.80; }

/* Longer, calmer footer reveal: it gets its own scroll beat. */
footer {
  min-height:42svh;
  padding:clamp(54px,9vh,110px) clamp(24px,6vw,90px);
  display:grid;
  place-items:center;
}
.footer-inner {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  opacity:calc(.12 + var(--footer-reveal,0) * .88);
  transform:translateY(calc((1 - var(--footer-reveal,0)) * 34px)) scale(calc(.985 + var(--footer-reveal,0) * .015));
  transition:opacity .18s linear, transform .18s linear;
  will-change:transform,opacity;
}

@media (max-width:1080px) and (min-width:881px) {
  .theme-bubble { width:14vw; height:14vw; right:7vw; }
  .portal-copy small { display:block; font-size:11px; max-width:28ch; }
  .orbit-signature { width:132px; height:132px; }
  .signature-ring text { font-size:9.5px; }
}
@media (max-width:880px) {
  .topbar { grid-template-columns:1fr; }
  .theme-bubble { display:none; }
  .footer-inner { flex-direction:column; justify-content:center; text-align:center; }
  footer { min-height:44svh; }
}

/* ─────────────────────────────────────────────────────────────
   v5 refinement: readable type / interactive theme sphere /
   compact lingering footer / aligned light gradient
   ───────────────────────────────────────────────────────────── */

/* Keep the mark cinematic, but create a soft optical depth field wherever
   the live copy crosses it. This is intentionally not a visible card. */
.scene {
  isolation: isolate;
}
.scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: clamp(-34px, -2.4vw, -12px);
  top: 50%;
  width: min(122%, 980px);
  height: 116%;
  transform: translateY(-50%) translateZ(48px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(7,10,24,.68) 0%,
    rgba(8,12,34,.53) 40%,
    rgba(12,16,43,.22) 67%,
    transparent 92%
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0 70%, rgba(0,0,0,.60) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 70%, rgba(0,0,0,.60) 82%, transparent 100%);
  backdrop-filter: blur(8px) saturate(.86);
  -webkit-backdrop-filter: blur(8px) saturate(.86);
  opacity: .78;
}
html[data-theme="light"] .scene::before {
  background: linear-gradient(
    90deg,
    rgba(232,234,255,.86) 0%,
    rgba(232,228,255,.72) 42%,
    rgba(239,220,239,.30) 68%,
    transparent 92%
  );
  backdrop-filter: blur(9px) saturate(.82) brightness(1.035);
  -webkit-backdrop-filter: blur(9px) saturate(.82) brightness(1.035);
  opacity: .86;
}
.scene > .eyebrow,
.scene > h1,
.scene > h2,
.scene > p {
  position: relative;
  z-index: 12;
}
.scene h1,
.scene h2 {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
html[data-theme="light"] .scene h1,
html[data-theme="light"] .scene h2 {
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 0 1px rgba(247,248,252,.82),
    0 18px 52px rgba(65,70,184,.14);
}

/* The floating sphere explains itself from inside the object. */
.theme-bubble-core {
  width: 70%;
  aspect-ratio: 1;
  transition: transform .55s var(--ease);
  transform: translate3d(var(--bubble-x,0px), var(--bubble-y,0px), 0)
             rotateX(var(--bubble-rx,0deg)) rotateY(var(--bubble-ry,0deg));
  transform-style: preserve-3d;
}
.theme-bubble-label {
  position: absolute;
  inset: 14%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  pointer-events: none;
  transform: translateZ(34px);
  color: #F7F8FC;
  text-shadow: 0 2px 16px rgba(7,10,24,.34), 0 0 24px rgba(102,109,255,.24);
}
.theme-bubble-label small {
  font-size: clamp(7px,.58vw,10px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .72;
}
.theme-bubble-label strong {
  font-size: clamp(10px,.93vw,16px);
  line-height: .94;
  font-weight: 840;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
html[data-theme="light"] .theme-bubble-label {
  color: #171A2B;
  text-shadow: 0 1px 12px rgba(255,255,255,.74), 0 8px 22px rgba(65,70,184,.12);
}
.theme-bubble-sun,
.theme-bubble-moon { z-index: 2; }
.theme-bubble-sun { opacity: .34; }
.theme-bubble-moon { opacity: .44; }
.theme-bubble-orbit { z-index: 3; inset: -22%; }
.theme-click-pulse {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 8%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(255,114,94,.35), 0 0 16px rgba(255,114,94,.46);
  animation: themeClickPulse 2.4s ease-out infinite;
}
.theme-bubble:hover .theme-bubble-core {
  scale: 1.035;
}
.theme-bubble:hover .theme-bubble-label small { opacity: 1; }
.theme-bubble.is-shifting .theme-bubble-core {
  animation: themeBubbleShift .72s var(--ease);
}
.theme-bubble-tooltip { display: none !important; }
@keyframes themeClickPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,114,94,.38), 0 0 16px rgba(255,114,94,.46); transform: scale(.84); opacity:.78; }
  62% { box-shadow: 0 0 0 13px rgba(255,114,94,0), 0 0 24px rgba(103,110,255,.30); transform: scale(1.08); opacity:1; }
  100% { box-shadow: 0 0 0 18px rgba(255,114,94,0), 0 0 12px rgba(103,110,255,0); transform: scale(.84); opacity:.64; }
}
@keyframes themeBubbleShift {
  0% { scale:1; rotate:0deg; }
  42% { scale:1.10; rotate:2.5deg; }
  100% { scale:1; rotate:0deg; }
}

/* Footer is compact again. The extra scroll comfort comes from snap behaviour,
   not from making the footer itself gigantic. */
.footer-beat {
  position: relative;
  min-height: clamp(150px, 20svh, 210px);
  background: #080B18;
  overflow: hidden;
}
footer {
  min-height: clamp(150px, 20svh, 210px) !important;
  height: 100%;
  padding: 30px clamp(24px,6vw,90px) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #080B18;
}
.footer-inner {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  opacity: calc(.18 + var(--footer-reveal,0) * .82);
  transform: translateY(calc((1 - var(--footer-reveal,0)) * 20px));
  transition: opacity .52s var(--ease), transform .62s var(--ease) !important;
  will-change: transform, opacity;
  font-size: 12px;
}
.footer-promise { justify-self:center; font-weight:680; letter-spacing:-.01em; color:var(--text); }
.footer-status { justify-self:end; text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:780; color:var(--coral); }
html[data-theme="light"] .footer-beat,
html[data-theme="light"] footer {
  color: rgba(23,26,43,.74);
  border-top-color: rgba(65,70,184,.10);
  background:
    radial-gradient(circle at 16% 28%, rgba(101,108,255,.28), transparent 31%),
    radial-gradient(circle at 86% 34%, rgba(255,114,94,.30), transparent 34%),
    linear-gradient(106deg, #C7CCFF 0%, #DDD9FF 34%, #F2D0E9 66%, #FFC7BE 100%) !important;
}
html[data-theme="light"] footer::before {
  inset: -80% -8% -80% 38%;
  transform: rotate(18deg);
}

@media (max-width: 1080px) and (min-width: 881px) {
  .theme-bubble-label strong { font-size: 11px; }
  .theme-bubble-label small { font-size: 7px; }
  .scene::before { width: 128%; opacity:.84; }
}
@media (max-width: 880px) {
  .footer-beat,
  footer { min-height: 170px !important; }
  .footer-inner {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }
  .footer-status,
  .footer-promise { justify-self:center; }
  html[data-theme="light"] .footer-beat,
  html[data-theme="light"] footer {
    background:
      radial-gradient(circle at 20% 26%, rgba(101,108,255,.26), transparent 34%),
      radial-gradient(circle at 82% 36%, rgba(255,114,94,.30), transparent 38%),
      linear-gradient(145deg,#CBD0FF,#E7D7F6 52%,#FFC7BE) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   v6 refinement: per-glyph depth, crisp theme-orb copy,
   richer autonomous K motion
   ───────────────────────────────────────────────────────────── */

/* Remove the v5 rectangular haze completely. Readability now follows the
   actual glyph shapes, so the composition stays open and cinematic. */
.scene::before {
  display: none !important;
  content: none !important;
}
.scene h1,
.scene h2 {
  position: relative;
  z-index: 14;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-text-stroke: .45px rgba(6,9,23,.52);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(6,9,23,.98),
    0 0 7px rgba(6,9,23,.88),
    0 0 16px rgba(6,9,23,.64),
    0 18px 58px rgba(0,0,0,.16);
}
.scene .eyebrow,
.scene p {
  position: relative;
  z-index: 14;
  color: rgba(239,241,255,.84);
  text-shadow:
    0 0 2px rgba(7,10,24,.96),
    0 0 7px rgba(7,10,24,.82),
    0 0 14px rgba(7,10,24,.58);
}
html[data-theme="light"] .scene h1,
html[data-theme="light"] .scene h2 {
  -webkit-text-stroke: .45px rgba(246,244,255,.72);
  text-shadow:
    0 0 2px rgba(245,244,255,.98),
    0 0 7px rgba(239,237,255,.92),
    0 0 17px rgba(235,231,255,.74),
    0 17px 48px rgba(65,70,184,.10);
}
html[data-theme="light"] .scene .eyebrow,
html[data-theme="light"] .scene p {
  color: rgba(34,36,72,.78);
  text-shadow:
    0 0 2px rgba(242,241,255,.98),
    0 0 8px rgba(239,235,255,.94),
    0 0 15px rgba(237,230,249,.74);
}

/* More life in the logo without touching the scroll spline. The mark-path
   remains scroll-controlled; mark-shell adds a slow independent camera drift. */
.mark-shell {
  animation: markOrbitDrift 9.6s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform, translate, scale;
}
.hero-mark {
  animation: logoBreath 6.4s ease-in-out infinite !important;
  transform-origin: 50% 52%;
}
.mark-halo {
  animation: markHaloPulse 7.4s ease-in-out infinite;
}
@keyframes markOrbitDrift {
  0%,100% { translate: 0 0; scale: 1; }
  24% { translate: 10px -13px; scale: 1.015; }
  52% { translate: -8px 8px; scale: .994; }
  76% { translate: 14px 11px; scale: 1.009; }
}
@keyframes logoBreath {
  0%,100% { transform: translate3d(0,0,0) rotate(-.25deg) scale(1); }
  30% { transform: translate3d(0,-8px,0) rotate(.45deg) scale(1.012); }
  62% { transform: translate3d(5px,4px,0) rotate(-.55deg) scale(.998); }
  82% { transform: translate3d(-3px,-3px,0) rotate(.22deg) scale(1.006); }
}
@keyframes markHaloPulse {
  0%,100% { opacity:.52; scale:1; }
  48% { opacity:.76; scale:1.06; }
}

/* The sphere may move, but its copy no longer participates in the 3D tilt.
   It stays on a crisp 2D plane above the glass and its brightest moon is kept
   away from the reading zone. */
.theme-bubble {
  --bubble-x: 0px;
  --bubble-y: 0px;
  --bubble-rx: 0deg;
  --bubble-ry: 0deg;
}
.theme-bubble-core {
  width: 72% !important;
  position: relative;
  transform:
    translate3d(var(--bubble-x),var(--bubble-y),0)
    rotateX(var(--bubble-rx)) rotateY(var(--bubble-ry));
  will-change: transform;
}
.theme-bubble-label {
  position: absolute !important;
  z-index: 40 !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  color: #F7F8FC;
}
.theme-bubble-label::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:72%;
  height:44%;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(10,13,38,.48) 0%, rgba(10,13,38,.22) 44%, transparent 76%);
  filter:blur(7px);
  opacity:.88;
}
.theme-bubble-label small {
  font-size: clamp(8px,.66vw,11px) !important;
  line-height: 1;
  font-weight: 780 !important;
  letter-spacing: .18em !important;
  opacity: .82 !important;
  color: rgba(247,248,252,.84);
  text-shadow: 0 1px 2px rgba(4,6,20,.88), 0 0 9px rgba(4,6,20,.70);
  transition: opacity .25s ease, letter-spacing .35s ease;
}
.theme-bubble-label strong {
  font-size: clamp(12px,1.04vw,17px) !important;
  line-height: .96;
  font-weight: 850 !important;
  letter-spacing: -.012em !important;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(4,6,20,.90), 0 0 10px rgba(4,6,20,.72);
}
.theme-bubble:hover .theme-bubble-label small {
  opacity: 1 !important;
  letter-spacing: .205em !important;
}
.theme-bubble-sun {
  left: 30%; top: 30%;
  translate: -50% -50%;
}
.theme-bubble-moon {
  left: 76%; top: 70%;
  translate: -50% -50%;
  width: 28% !important;
  background: rgba(247,248,252,.72) !important;
  box-shadow: -.24em .15em 0 .02em rgba(89,96,213,.82), 0 0 14px rgba(132,138,255,.24) !important;
}
.theme-click-pulse {
  left: 50%; bottom: 14% !important;
}
html[data-theme="light"] .theme-bubble-label {
  color: #171A2B;
}
html[data-theme="light"] .theme-bubble-label::before {
  background:radial-gradient(ellipse, rgba(246,244,255,.76) 0%, rgba(241,236,255,.42) 48%, transparent 78%);
  opacity:.92;
}
html[data-theme="light"] .theme-bubble-label small {
  color: rgba(32,34,69,.68);
  text-shadow: 0 1px 1px rgba(255,255,255,.88), 0 0 8px rgba(248,246,255,.86);
}
html[data-theme="light"] .theme-bubble-label strong {
  color: #171A2B;
  text-shadow: 0 1px 1px rgba(255,255,255,.92), 0 0 9px rgba(247,244,255,.88);
}
html[data-theme="light"] .theme-bubble-moon {
  background: rgba(255,255,255,.44) !important;
  box-shadow: -.20em .13em 0 .01em rgba(104,110,220,.34), 0 0 12px rgba(255,255,255,.30) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mark-shell, .hero-mark, .mark-halo { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   v7 refinement: clearer product story / intent-based wheel nav /
   clean signature copy
   ───────────────────────────────────────────────────────────── */

/* Five story beats need the same generous travel distance as the four-beat
   version, so every transition still has room to feel cinematic. */
.story { height: 540vh; }
.nav-labels { grid-template-columns: repeat(5, 1fr); }

/* The product reveal is deliberately a little tighter than the emotional
   chapters so the explanation reads as one confident statement. */
.scene[data-scene="2"] h2 {
  max-width: 10.9ch;
  font-size: clamp(54px, 5.9vw, 114px);
  line-height: .88;
  letter-spacing: -.036em;
}
.scene[data-scene="2"] p { max-width: 690px; }
.scene[data-scene="3"] h2 {
  max-width: 10.6ch;
  font-size: clamp(64px, 7.4vw, 142px);
  letter-spacing: -.044em;
}
.scene[data-scene="4"] h2 {
  max-width: 12.5ch;
  font-size: clamp(56px, 6.15vw, 116px);
  letter-spacing: -.038em;
}

/* Product vocabulary becomes spatial scenery instead of a feature-list card. */
.product-words {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: 1100px;
  transform-style: preserve-3d;
  opacity: var(--product-reveal, 0);
  transition: opacity .12s linear;
}
.product-word {
  --word-reveal: 0;
  position: absolute;
  display: block;
  color: rgba(242,244,255,.74);
  font-size: clamp(12px, 1.02vw, 18px);
  line-height: 1;
  font-weight: 790;
  letter-spacing: .20em;
  text-transform: uppercase;
  opacity: var(--word-reveal);
  white-space: nowrap;
  text-shadow: 0 8px 30px rgba(0,0,0,.22), 0 0 20px rgba(99,106,255,.24);
  will-change: transform, opacity;
}
.product-word::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 18px rgba(255,114,94,.55);
  vertical-align: .08em;
}
.product-word-clients {
  right: 10vw;
  top: 27vh;
  transform: translate3d(var(--word-dx,0vw), var(--word-dy,0vh), 110px) rotate(-5deg);
}
.product-word-schedule {
  right: 35vw;
  top: 17vh;
  transform: translate3d(var(--word-dx,0vw), var(--word-dy,0vh), 40px) rotate(4deg);
}
.product-word-bookings {
  right: 6vw;
  bottom: 27vh;
  transform: translate3d(var(--word-dx,0vw), var(--word-dy,0vh), 150px) rotate(5deg);
}
.product-word-reminders {
  right: 33vw;
  bottom: 18vh;
  transform: translate3d(var(--word-dx,0vw), var(--word-dy,0vh), 65px) rotate(-4deg);
}
html[data-theme="light"] .product-word {
  color: rgba(31,34,74,.68);
  text-shadow: 0 8px 30px rgba(88,94,189,.12), 0 0 16px rgba(255,255,255,.70);
}

/* One phrase, one lap. The copy no longer repeats into itself, so there is no
   visual MOVMEET collision at the path seam. */
.signature-ring text {
  font-size: 8.8px !important;
  letter-spacing: 2.15px !important;
}

.mobile-product { isolation: isolate; }
.mobile-product::after {
  content: "";
  position: absolute;
  width: 72vw;
  aspect-ratio: 1;
  right: -29vw;
  top: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.50), rgba(99,106,255,.40) 25%, rgba(255,114,94,.20) 58%, transparent 72%);
  filter: blur(.2px);
  opacity: .78;
  z-index: -1;
}
.mobile-product-words {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 34rem;
}
.mobile-product-words span {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .15em;
}

@media (max-width: 1080px) and (min-width: 881px) {
  .scene[data-scene="2"] h2 { font-size: clamp(50px, 6.4vw, 88px); }
  .scene[data-scene="3"] h2 { font-size: clamp(58px, 7.2vw, 98px); }
  .scene[data-scene="4"] h2 { font-size: clamp(52px, 6.1vw, 88px); }
  .product-word { font-size: 11px; }
  .product-word-schedule, .product-word-reminders { right: 28vw; }
}

@media (max-width: 880px) {
  .mobile-product h2 { max-width: 10.5ch; font-size: clamp(47px, 13.6vw, 78px); }
}

/* ─────────────────────────────────────────────────────────────
   v8 — one product journey: Book → Organize → Track → Remind → Progress
   ───────────────────────────────────────────────────────────── */
.nav-labels { grid-template-columns: repeat(5, 1fr); }
.nav-labels button { position: relative; }
.nav-labels button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  transform: translateX(-50%) scale(.75);
  box-shadow: 0 0 0 rgba(255,114,94,0);
  transition: transform .55s var(--ease), opacity .4s ease, box-shadow .55s ease;
}
.nav-labels button.is-current::before {
  opacity: 1;
  transform: translateX(-50%) scale(1.55);
  box-shadow: 0 0 18px rgba(255,114,94,.52);
}

.scene[data-scene="0"] h1 { max-width: 11.3ch; font-size: clamp(54px,6.4vw,122px); }
.scene[data-scene="1"] h2 { max-width: 9.2ch; }
.scene[data-scene="2"] h2 { max-width: 10.9ch; font-size: clamp(54px,5.9vw,114px); }
.scene[data-scene="3"] h2 { max-width: 9.8ch; }
.scene[data-scene="4"] h2 { max-width: 11.2ch; font-size: clamp(58px,6.55vw,124px); }
.scene[data-scene="0"] p,
.scene[data-scene="1"] p,
.scene[data-scene="2"] p,
.scene[data-scene="3"] p,
.scene[data-scene="4"] p { max-width: 670px; }

.flow-words {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.flow-word-group {
  position: absolute;
  inset: 0;
  opacity: var(--flow-reveal, 0);
  transform-style: preserve-3d;
  will-change: opacity;
}
.flow-word {
  --word-reveal: 0;
  position: absolute;
  display: block;
  color: rgba(242,244,255,.70);
  font-size: clamp(11px,.96vw,17px);
  line-height: 1;
  font-weight: 790;
  letter-spacing: .20em;
  text-transform: uppercase;
  opacity: var(--word-reveal);
  white-space: nowrap;
  text-shadow: 0 8px 30px rgba(0,0,0,.22), 0 0 20px rgba(99,106,255,.22);
  transition: color .8s ease;
  will-change: transform, opacity;
}
.flow-word::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 18px rgba(255,114,94,.48);
  vertical-align: .08em;
}
.flow-word:nth-child(1) { right: 10vw; top: 27vh; transform: translate3d(var(--word-dx,0vw),var(--word-dy,0vh),120px) rotate(-5deg); }
.flow-word:nth-child(2) { right: 34vw; top: 17vh; transform: translate3d(var(--word-dx,0vw),var(--word-dy,0vh),45px) rotate(4deg); }
.flow-word:nth-child(3) { right: 6vw; bottom: 27vh; transform: translate3d(var(--word-dx,0vw),var(--word-dy,0vh),155px) rotate(5deg); }
.flow-word:nth-child(4) { right: 33vw; bottom: 18vh; transform: translate3d(var(--word-dx,0vw),var(--word-dy,0vh),70px) rotate(-4deg); }
html[data-theme="light"] .flow-word {
  color: rgba(31,34,74,.66);
  text-shadow: 0 8px 30px rgba(88,94,189,.11), 0 0 16px rgba(255,255,255,.68);
}

/* Old one-scene vocabulary is superseded by the chapter-specific flow words */
.product-words { display:none !important; }

@media (max-width:1080px) and (min-width:881px) {
  .scene[data-scene="0"] h1 { font-size: clamp(50px,6.5vw,90px); }
  .scene[data-scene="2"] h2 { font-size: clamp(48px,5.9vw,84px); }
  .scene[data-scene="4"] h2 { font-size: clamp(52px,6.2vw,90px); }
  .flow-word { font-size: 10px; }
  .flow-word:nth-child(2), .flow-word:nth-child(4) { right: 27vw; }
}

@media (max-width:880px) {
  .mobile-flow-scene h1,
  .mobile-flow-scene h2 { max-width: 10.6ch; }
  .mobile-flow-scene .mobile-product-words { margin-top: 30px; }
}

/* ─────────────────────────────────────────────────────────────
   v9 polish: continuous vocabulary motion / cleaner signature /
   clearer footer platform status
   ───────────────────────────────────────────────────────────── */

/* The art-control now has a complete optical ring. The previous partial
   conic arc could read like a chunk had been clipped out of the object. */
.orbit-signature::before {
  inset: 12px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(105,112,255,.08), rgba(105,112,255,.025) 58%, transparent 73%) !important;
  box-shadow: inset 0 0 0 .65px rgba(255,255,255,.10);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.orbit-signature::after {
  inset: 4px !important;
  background: conic-gradient(
    from -26deg,
    rgba(103,110,255,.20),
    rgba(255,114,94,.52) 22%,
    rgba(126,132,255,.28) 48%,
    rgba(255,179,164,.34) 70%,
    rgba(103,110,255,.20) 100%
  ) !important;
  -webkit-mask: radial-gradient(circle, transparent 67%, #000 68.2% 69.4%, transparent 70.6%) !important;
  mask: radial-gradient(circle, transparent 67%, #000 68.2% 69.4%, transparent 70.6%) !important;
  opacity: .58 !important;
  animation-duration: 14s !important;
}
html[data-theme="light"] .orbit-signature::before {
  box-shadow: inset 0 0 0 .65px rgba(65,70,184,.12);
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.16), rgba(117,123,234,.035) 60%, transparent 74%) !important;
}

/* Four fixed spatial anchors orbit the logo. Every chapter uses the same
   anchors, so vocabulary cross-fades in-place instead of jumping between
   unrelated coordinates. */
.flow-word {
  right: auto !important;
  bottom: auto !important;
  transform-origin: center center;
  transform:
    translate(-50%,-50%)
    translate3d(var(--word-dx,0vw),var(--word-dy,0vh),var(--word-z,70px))
    rotate(var(--word-rot,0deg));
  filter: blur(var(--word-blur,0px));
  will-change: transform, opacity, filter;
}
.flow-word:nth-child(1) { left: 57.5vw; top: 24vh; --word-z: 72px; --word-rot: -4deg; }
.flow-word:nth-child(2) { left: 87vw; top: 35vh; --word-z: 128px; --word-rot: 4deg; }
.flow-word:nth-child(3) { left: 82vw; top: 72vh; --word-z: 150px; --word-rot: 3deg; }
.flow-word:nth-child(4) { left: 58vw; top: 76vh; --word-z: 54px; --word-rot: -3deg; }
.flow-word-group {
  transition: none !important;
  will-change: opacity;
}
@media (max-width:1080px) and (min-width:881px) {
  .flow-word:nth-child(1) { left: 56vw; top: 25vh; }
  .flow-word:nth-child(2) { left: 85vw; top: 37vh; }
  .flow-word:nth-child(3) { left: 80vw; top: 70vh; }
  .flow-word:nth-child(4) { left: 57vw; top: 73vh; }
}

/* Footer status is useful information, not a faint decorative label. */
.footer-platforms {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--text);
  white-space: nowrap;
}
.footer-platforms small {
  margin-right: 2px;
  font-size: 9px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.platform-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .02em;
  color: var(--text);
}
html[data-theme="light"] .footer-platforms small { color: rgba(23,26,43,.68); }
html[data-theme="light"] .platform-chip {
  border-color: rgba(65,70,184,.12);
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 8px 24px rgba(65,70,184,.06);
}
@media (max-width:880px) {
  .footer-platforms { justify-self:center; }
}

/* ─────────────────────────────────────────────────────────────
   v10 repair: no masked bite / genuinely persistent vocabulary
   ───────────────────────────────────────────────────────────── */

/* Remove the masked/conic treatment entirely. The sculpture now uses one
   complete optical circle, so no background can read as a missing wedge. */
.orbit-signature::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.orbit-signature::before {
  content: "" !important;
  inset: 7px !important;
  border-radius: 50% !important;
  background: rgba(90,97,210,.025) !important;
  border: 1px solid rgba(129,136,255,.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 26px rgba(98,105,255,.055),
    0 0 28px rgba(70,76,190,.065) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: .88 !important;
}
html[data-theme="light"] .orbit-signature::before {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(65,70,184,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 0 24px rgba(65,70,184,.035),
    0 0 24px rgba(65,70,184,.045) !important;
}
.signature-ring text {
  opacity: .86 !important;
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--text) 10%, transparent);
  stroke-width: .18px;
}

/* There are now exactly four word objects for the whole desktop experience.
   They never get recreated and never change anchor points. */
.flow-word-group { display: none !important; }
.flow-words .flow-word {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  transform:
    translate3d(var(--word-dx,0vw), var(--word-dy,0vh), var(--word-z,80px))
    rotate(var(--word-rot,0deg));
  transform-origin: 0 0 !important;
  will-change: transform;
}
.flow-words .flow-word::before { content: none !important; display: none !important; }
.flow-copy {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: inherit;
  transform: translate(-50%,-50%);
  transform-origin: center;
  will-change: opacity;
}
.flow-copy::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 18px rgba(255,114,94,.48);
}
.flow-copy-a { opacity: var(--copy-a-opacity,1); }
.flow-copy-b { opacity: var(--copy-b-opacity,0); }

/* Deliberately wide composition: the vocabulary frames the mark instead of
   crowding its top half. */
.flow-words .flow-word-a {
  left: clamp(130px, 12vw, 220px) !important;
  top: 29vh !important;
  --word-z: 72px;
  --word-rot: -3deg;
}
.flow-words .flow-word-b {
  left: calc(100vw - clamp(132px, 11.5vw, 215px)) !important;
  top: 30vh !important;
  --word-z: 128px;
  --word-rot: 3deg;
}
.flow-words .flow-word-c {
  left: calc(100vw - clamp(148px, 13vw, 235px)) !important;
  top: 72vh !important;
  --word-z: 148px;
  --word-rot: 2deg;
}
.flow-words .flow-word-d {
  left: clamp(132px, 12.5vw, 225px) !important;
  top: 74vh !important;
  --word-z: 56px;
  --word-rot: -2deg;
}

@media (max-width: 1120px) and (min-width: 881px) {
  .flow-words .flow-word { font-size: 10px !important; letter-spacing: .17em !important; }
  .flow-words .flow-word-a { left: 112px !important; top: 28vh !important; }
  .flow-words .flow-word-b { left: calc(100vw - 112px) !important; top: 31vh !important; }
  .flow-words .flow-word-c { left: calc(100vw - 126px) !important; top: 72vh !important; }
  .flow-words .flow-word-d { left: 112px !important; top: 73vh !important; }
}

/* ─────────────────────────────────────────────────────────────
   v11: navigation orb — no circular type, no path seam
   ───────────────────────────────────────────────────────────── */
.orbit-signature.nav-orb {
  width: 132px !important;
  height: 132px !important;
  right: clamp(24px,4.2vw,68px);
  bottom: 24px;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: transparent;
  filter: none !important;
}
.orbit-signature.nav-orb::before,
.orbit-signature.nav-orb::after {
  content: none !important;
  display: none !important;
}
.nav-orb-aura {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.18), transparent 29%),
    radial-gradient(circle at 58% 64%, rgba(255,114,94,.12), transparent 43%),
    radial-gradient(circle at 42% 42%, rgba(102,109,255,.15), rgba(25,29,77,.18) 62%, rgba(10,12,31,.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -18px 40px rgba(18,20,60,.16),
    0 18px 42px rgba(0,0,0,.18),
    0 0 44px rgba(83,89,220,.10);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: transform .6s var(--ease), box-shadow .6s ease, background .8s ease;
}
html[data-theme="light"] .nav-orb-aura {
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 64% 66%, rgba(255,114,94,.16), transparent 44%),
    radial-gradient(circle at 43% 42%, rgba(108,115,255,.12), rgba(255,255,255,.22) 66%, rgba(236,231,255,.22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -18px 42px rgba(101,108,255,.05),
    0 16px 38px rgba(65,70,184,.10),
    0 0 36px rgba(255,114,94,.08);
}
.nav-orb-track {
  position:absolute;
  inset: 14px;
  border-radius:50%;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 0 18px rgba(108,115,255,.04);
  animation: navOrbBreathe 4.8s ease-in-out infinite;
}
.nav-orb-track::before {
  content:"";
  position:absolute;
  inset: 9px;
  border-radius:50%;
  border: 1px solid rgba(112,119,255,.10);
}
.nav-orb-comet {
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px;
  border-radius:50%;
  transform-origin: 3.5px 3.5px;
}
.nav-orb-comet-a {
  background:#737AFF;
  box-shadow:0 0 10px rgba(105,112,255,.82),0 0 22px rgba(105,112,255,.38);
  animation:navOrbCometA 6.4s linear infinite;
}
.nav-orb-comet-b {
  background:var(--coral);
  box-shadow:0 0 10px rgba(255,114,94,.82),0 0 22px rgba(255,114,94,.35);
  animation:navOrbCometB 6.4s linear infinite;
}
.nav-orb-copy {
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  text-shadow:0 6px 18px rgba(0,0,0,.15);
}
.nav-orb-copy small {
  display:block;
  margin:0 0 4px;
  color:var(--muted);
  font-size:8px;
  line-height:1;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.nav-orb-copy strong {
  display:block;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:14px;
  line-height:1;
  font-weight:820;
  letter-spacing:-.025em;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.nav-orb-meeting {
  position:absolute;
  left:50%;
  bottom:24px;
  width:28px;
  height:10px;
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
}
.nav-orb-meeting i,
.nav-orb-meeting b {
  position:absolute;
  top:50%;
  border-radius:50%;
  transform:translateY(-50%);
}
.nav-orb-meeting i {
  width:5px;
  height:5px;
}
.nav-orb-meeting i:first-child {
  left:2px;
  background:#747BFF;
  box-shadow:0 0 9px rgba(105,112,255,.72);
  animation:navMeetA 2.8s var(--ease) infinite;
}
.nav-orb-meeting i:nth-child(2) {
  right:2px;
  background:var(--coral);
  box-shadow:0 0 9px rgba(255,114,94,.70);
  animation:navMeetB 2.8s var(--ease) infinite;
}
.nav-orb-meeting b {
  left:50%;
  width:4px;
  height:4px;
  margin-left:-2px;
  background:white;
  box-shadow:0 0 8px white,0 0 18px rgba(255,114,94,.40),0 0 20px rgba(105,112,255,.40);
  animation:navMeetPulse 2.8s ease-in-out infinite;
}
.orbit-signature.nav-orb:hover .nav-orb-aura {
  transform:scale(1.055);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -18px 42px rgba(18,20,60,.16),
    0 22px 52px rgba(0,0,0,.20),
    0 0 52px rgba(255,114,94,.13);
}
html[data-theme="light"] .orbit-signature.nav-orb:hover .nav-orb-aura {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -18px 42px rgba(101,108,255,.05),
    0 20px 48px rgba(65,70,184,.12),
    0 0 48px rgba(255,114,94,.12);
}
.orbit-signature.nav-orb:hover .nav-orb-copy strong { color:var(--coral); }
.orbit-signature.nav-orb:active .nav-orb-aura { transform:scale(.97); }
.orbit-signature.nav-orb:focus-visible { outline:2px solid color-mix(in srgb,var(--coral) 72%,white); outline-offset:5px; }
.signature-ring,
.signature-core { display:none !important; }

@keyframes navOrbCometA {
  from { transform:rotate(0deg) translateX(45px) rotate(0deg); }
  to   { transform:rotate(360deg) translateX(45px) rotate(-360deg); }
}
@keyframes navOrbCometB {
  from { transform:rotate(180deg) translateX(45px) rotate(-180deg); }
  to   { transform:rotate(540deg) translateX(45px) rotate(-540deg); }
}
@keyframes navOrbBreathe {
  0%,100% { transform:scale(.985); opacity:.78; }
  50% { transform:scale(1.025); opacity:1; }
}
@keyframes navMeetA {
  0%,100% { left:2px; opacity:.78; }
  44%,56% { left:11px; opacity:1; }
}
@keyframes navMeetB {
  0%,100% { right:2px; opacity:.78; }
  44%,56% { right:11px; opacity:1; }
}
@keyframes navMeetPulse {
  0%,100% { transform:translateY(-50%) scale(.55); opacity:.30; }
  47%,54% { transform:translateY(-50%) scale(1.5); opacity:1; }
}

@media (max-width:1080px) and (min-width:881px) {
  .orbit-signature.nav-orb { width:122px !important; height:122px !important; right:22px; }
  .nav-orb-copy strong { font-size:13px; max-width:82px; }
  .nav-orb-comet-a { animation-name:navOrbCometATablet; }
  .nav-orb-comet-b { animation-name:navOrbCometBTablet; }
}
@keyframes navOrbCometATablet {
  from { transform:rotate(0deg) translateX(41px) rotate(0deg); }
  to   { transform:rotate(360deg) translateX(41px) rotate(-360deg); }
}
@keyframes navOrbCometBTablet {
  from { transform:rotate(180deg) translateX(41px) rotate(-180deg); }
  to   { transform:rotate(540deg) translateX(41px) rotate(-540deg); }
}

/* ─────────────────────────────────────────────────────────────
   v12: The Komeetix Journey
   One persistent scroll-driven object. Only its internal state
   morphs; position and direction never reset between chapters.
   ───────────────────────────────────────────────────────────── */
:root {
  --j-book: 1;
  --j-organize: 0;
  --j-track: 0;
  --j-remind: 0;
  --j-progress: 0;
  --journey-angle: 0deg;
}

.nav-comet { display:none !important; }

.rail-progress-line {
  fill:none;
  stroke:url(#journey-gradient);
  stroke-width:2.15;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  path-length:1;
  stroke-dasharray:1;
  stroke-dashoffset:var(--journey-dashoffset, 1);
  filter:drop-shadow(0 0 5px rgba(121,127,255,.28)) drop-shadow(0 0 7px rgba(255,114,94,.18));
  opacity:.92;
}
html[data-theme="light"] .rail-progress-line {
  stroke-width:2;
  filter:drop-shadow(0 0 4px rgba(65,70,184,.18)) drop-shadow(0 0 6px rgba(255,114,94,.14));
}

.journey-sprite {
  position:absolute;
  left:var(--nav-x);
  top:var(--nav-y);
  width:76px;
  height:76px;
  z-index:5;
  transform:translate(-50%,-50%) rotate(var(--journey-angle));
  transform-origin:50% 50%;
  will-change:left,top,transform;
  pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(7,9,35,.26));
}
.journey-contrail {
  position:absolute;
  z-index:-1;
  right:50%;
  top:50%;
  width:86px;
  height:14px;
  transform:translateY(-50%);
  transform-origin:right center;
  background:linear-gradient(90deg,transparent 0%,rgba(107,114,255,.03) 18%,rgba(107,114,255,.22) 63%,rgba(255,114,94,.38) 100%);
  filter:blur(5px);
  border-radius:100% 0 0 100%;
  opacity:calc(.34 + var(--overall) * .46);
}
.journey-body {
  position:absolute;
  inset:12px;
  border-radius:50%;
  display:block;
  transform:rotate(calc(-1 * var(--journey-angle)));
  transform-origin:center;
}
.journey-core {
  position:absolute;
  left:50%; top:50%;
  width:19px; height:19px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(calc(.88 + var(--j-organize) * .17 + var(--j-track) * .08));
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.98) 0 12%,rgba(255,255,255,.34) 23%,transparent 39%),
    linear-gradient(145deg,#767DFF 4%,#555CE4 48%,#FF725E 100%);
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.36),
    0 0 12px rgba(105,112,255,.55),
    0 0 22px rgba(255,114,94,.28);
  z-index:3;
  animation:journeyCoreIdle 3.8s ease-in-out infinite;
}
.journey-state { position:absolute; inset:0; transform-origin:center; }
.journey-book { opacity:var(--j-book); }
.journey-organize { opacity:var(--j-organize); }
.journey-track { opacity:var(--j-track); }
.journey-remind { opacity:var(--j-remind); }
.journey-progress { opacity:var(--j-progress); }

/* BOOK — two sides continuously meet at the Komeetix point. */
.journey-particle {
  position:absolute;
  left:50%; top:50%;
  width:8px; height:8px;
  margin:-4px;
  border-radius:50%;
}
.journey-particle-indigo {
  background:#747BFF;
  box-shadow:0 0 11px rgba(105,112,255,.85);
  animation:journeyMeetIndigo 3.2s ease-in-out infinite;
}
.journey-particle-coral {
  background:#FF725E;
  box-shadow:0 0 11px rgba(255,114,94,.82);
  animation:journeyMeetCoral 3.2s ease-in-out infinite;
}
.journey-meet-flash {
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px #fff,0 0 20px rgba(255,114,94,.42),0 0 22px rgba(105,112,255,.44);
  animation:journeyMeetingFlash 3.2s ease-in-out infinite;
}

/* ORGANIZE — the same point unfolds into four ordered glass tiles. */
.journey-card {
  position:absolute;
  left:50%; top:50%;
  width:13px; height:10px;
  margin:-5px -6.5px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.43);
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(110,117,255,.20));
  box-shadow:inset 0 0 6px rgba(255,255,255,.20),0 4px 10px rgba(21,24,74,.18);
  backdrop-filter:blur(4px);
}
.journey-card-a { animation:journeyCardA 5.4s ease-in-out infinite; }
.journey-card-b { animation:journeyCardB 5.4s ease-in-out infinite; }
.journey-card-c { animation:journeyCardC 5.4s ease-in-out infinite; }
.journey-card-d { animation:journeyCardD 5.4s ease-in-out infinite; }

/* TRACK — a scanner travels across persistent milestones. */
.journey-scanner {
  position:absolute; inset:7px;
  border-radius:50%;
  border:1px solid rgba(118,125,255,.46);
  border-top-color:rgba(255,255,255,.92);
  border-right-color:rgba(255,114,94,.62);
  box-shadow:0 0 13px rgba(112,119,255,.20),inset 0 0 10px rgba(112,119,255,.10);
  animation:journeyScan 3.8s linear infinite;
}
.journey-mile {
  position:absolute; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%;
  background:#858BFF; box-shadow:0 0 7px rgba(112,119,255,.70);
  animation:journeyMilestone 2.8s ease-in-out infinite;
}
.journey-mile-a { left:7px; animation-delay:0s; }
.journey-mile-b { left:50%; margin-left:-2px; animation-delay:.45s; }
.journey-mile-c { right:7px; animation-delay:.9s; background:#FF806D; box-shadow:0 0 7px rgba(255,114,94,.70); }

/* REMIND — the main object sends a visible pulse to the client point. */
.journey-client-dot {
  position:absolute; left:calc(50% + 22px); top:50%;
  width:7px; height:7px; margin:-3.5px;
  border-radius:50%; background:#FF725E;
  box-shadow:0 0 10px rgba(255,114,94,.76);
  animation:journeyClientReply 3.1s ease-in-out infinite;
}
.journey-signal {
  position:absolute; left:50%; top:50%;
  width:12px; height:12px; margin:-6px;
  border-radius:50%; border:1px solid rgba(255,255,255,.55);
  transform-origin:center;
  animation:journeySignal 3.1s ease-out infinite;
}
.journey-signal-b { animation-delay:1.05s; border-color:rgba(255,114,94,.48); }

/* PROGRESS — accumulated pieces resolve into the K. */
.journey-k {
  position:absolute; left:50%; top:50%;
  display:block;
  border-radius:999px;
  box-shadow:inset 0 0 5px rgba(255,255,255,.42),0 0 8px rgba(105,112,255,.28);
}
.journey-k-stem {
  width:8px; height:31px;
  transform:translate(-12px,-15px);
  background:linear-gradient(180deg,#7780FF,#4146B8);
}
.journey-k-upper {
  width:8px; height:27px;
  transform:translate(1px,-19px) rotate(43deg);
  background:linear-gradient(180deg,#FF9A88,#FF725E);
}
.journey-k-lower {
  width:8px; height:27px;
  transform:translate(2px,-4px) rotate(-44deg);
  background:linear-gradient(180deg,#7179FF,#4146B8);
}
.journey-k-glow {
  position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px;
  border-radius:50%; background:rgba(255,255,255,.72);
  filter:blur(5px); opacity:.58;
  animation:journeyKGlow 3.4s ease-in-out infinite;
}

html[data-theme="light"] .journey-sprite { filter:drop-shadow(0 12px 22px rgba(65,70,184,.18)); }
html[data-theme="light"] .journey-card { border-color:rgba(255,255,255,.76); background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(124,130,255,.16)); }
html[data-theme="light"] .journey-scanner { border-color:rgba(65,70,184,.28); border-top-color:rgba(255,255,255,.96); border-right-color:rgba(255,114,94,.52); }

@keyframes journeyCoreIdle {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.14); }
}
@keyframes journeyMeetIndigo {
  0%,100% { transform:translate(-22px,-5px) scale(.86); }
  45%,55% { transform:translate(-7px,0) scale(1.05); }
}
@keyframes journeyMeetCoral {
  0%,100% { transform:translate(22px,5px) scale(.86); }
  45%,55% { transform:translate(7px,0) scale(1.05); }
}
@keyframes journeyMeetingFlash {
  0%,38%,68%,100% { transform:scale(.35); opacity:.08; }
  49%,55% { transform:scale(1.3); opacity:.92; }
}
@keyframes journeyCardA {
  0%,100% { transform:translate(-21px,-16px) rotate(-7deg); }
  50% { transform:translate(-18px,-18px) rotate(-1deg); }
}
@keyframes journeyCardB {
  0%,100% { transform:translate(9px,-15px) rotate(6deg); }
  50% { transform:translate(12px,-12px) rotate(1deg); }
}
@keyframes journeyCardC {
  0%,100% { transform:translate(-19px,9px) rotate(5deg); }
  50% { transform:translate(-22px,7px) rotate(0deg); }
}
@keyframes journeyCardD {
  0%,100% { transform:translate(10px,10px) rotate(-6deg); }
  50% { transform:translate(13px,13px) rotate(-1deg); }
}
@keyframes journeyScan { to { transform:rotate(360deg); } }
@keyframes journeyMilestone {
  0%,100% { transform:scale(.72); opacity:.38; }
  45%,60% { transform:scale(1.35); opacity:1; }
}
@keyframes journeySignal {
  0% { transform:translateX(1px) scale(.35); opacity:.84; }
  72%,100% { transform:translateX(23px) scale(1.9); opacity:0; }
}
@keyframes journeyClientReply {
  0%,48%,100% { transform:scale(.78); }
  65%,76% { transform:scale(1.42); }
}
@keyframes journeyKGlow {
  0%,100% { transform:scale(.65); opacity:.32; }
  50% { transform:scale(1.45); opacity:.72; }
}

@media (max-width:1080px) and (min-width:881px) {
  .journey-sprite { width:68px; height:68px; }
  .journey-body { inset:10px; }
  .journey-contrail { width:72px; }
}

@media (prefers-reduced-motion:reduce) {
  .journey-core,
  .journey-particle,
  .journey-meet-flash,
  .journey-card,
  .journey-scanner,
  .journey-mile,
  .journey-client-dot,
  .journey-signal,
  .journey-k-glow { animation:none !important; }
}

/* ─────────────────────────────────────────────────────────────
   v13 — exact journey geometry + frame-locked progress
   The moving object and the illuminated route now share the same
   SVG segment geometry, so chapter anchors cannot drift apart.
   ───────────────────────────────────────────────────────────── */
.rail-guide-segment {
  stroke: transparent !important;
  stroke-width: 8;
  pointer-events: none;
}
.rail-progress-segment {
  fill: none;
  stroke: url(#journey-gradient);
  stroke-width: 2.35;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px rgba(121,127,255,.34)) drop-shadow(0 0 8px rgba(255,114,94,.22));
  opacity: .98;
}
html[data-theme="light"] .rail-progress-segment {
  stroke-width: 2.55;
  filter: drop-shadow(0 0 3px rgba(65,70,184,.28)) drop-shadow(0 0 5px rgba(255,114,94,.28));
}

.journey-sprite {
  left: 0 !important;
  top: 0 !important;
  transform: translate3d(var(--journey-x, 0px), var(--journey-y, 0px), 0)
             translate(-50%, -50%)
             rotate(var(--journey-angle));
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

/* Keep the page-level progress indicator GPU-driven and highly legible.
   It uses the exact same --overall value as the Journey. */
.progress {
  height: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.progress i {
  display: block;
  width: 100% !important;
  height: 100%;
  transform: scaleX(var(--overall));
  transform-origin: 0 50%;
  will-change: transform;
  background: linear-gradient(90deg,#5960E9 0%,#777DFF 46%,#FF725E 100%);
  box-shadow: 0 0 12px rgba(101,108,255,.52), 0 0 16px rgba(255,114,94,.42);
}
html[data-theme="light"] .progress {
  height: 4px;
  background: rgba(45,49,116,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 -1px 8px rgba(65,70,184,.08);
}
html[data-theme="light"] .progress i {
  background: linear-gradient(90deg,#4146B8 0%,#686FEF 50%,#FF725E 100%);
  box-shadow: 0 0 8px rgba(65,70,184,.36), 0 0 12px rgba(255,114,94,.34);
}

/* The visible state blend is driven by scroll; decorative idle motion stays
   deliberately subtle so it cannot read as a discontinuity during a chapter
   transition. */
.journey-card-a,
.journey-card-b,
.journey-card-c,
.journey-card-d { animation-duration: 7.2s; }
.journey-core { animation-duration: 5.6s; }
.journey-scanner { animation-duration: 6.4s; }
.journey-mile { animation-duration: 4.8s; }
.journey-signal,
.journey-client-dot { animation-duration: 4.6s; }
.journey-k-glow { animation-duration: 5.4s; }

/* ─────────────────────────────────────────────────────────────
   v14 — continuous journey rail + exact edge anchors + smoother motion
   ───────────────────────────────────────────────────────────── */

/* One uninterrupted rail. The gradient lives in SVG user space, so it cannot
   restart at chapter boundaries. Hidden guide segments are geometry only. */
.rail-guide-segment {
  stroke: transparent !important;
  stroke-width: 10;
  pointer-events: none;
}
.rail-route {
  fill: none;
  stroke: url(#journey-gradient);
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .42;
  filter: drop-shadow(0 0 4px rgba(112,118,255,.18));
}
.rail-progress-line {
  fill: none;
  stroke: url(#journey-gradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .96;
  filter: drop-shadow(0 0 5px rgba(112,118,255,.32)) drop-shadow(0 0 7px rgba(255,114,94,.18));
}
html[data-theme="light"] .rail-route {
  opacity: .50;
  filter: drop-shadow(0 0 3px rgba(65,70,184,.14));
}
html[data-theme="light"] .rail-progress-line {
  stroke-width: 2.15;
  opacity: .92;
  filter: drop-shadow(0 0 4px rgba(65,70,184,.18)) drop-shadow(0 0 5px rgba(255,114,94,.14));
}
/* Disable the old segmented progress implementation if cached markup ever
   survives a deploy. */
.rail-progress-segment { display:none !important; }

/* Chapter labels now use the same 0/25/50/75/100% anchors as the SVG route.
   BOOK and PROGRESS therefore sit directly below the physical endpoints. */
.nav-labels {
  display:block !important;
  left:0;
  right:0;
}
.nav-labels button {
  position:absolute !important;
  bottom:0;
  width:max-content;
  min-width:72px;
  text-align:center !important;
  transform:translateX(-50%);
}
.nav-labels button:nth-child(1) { left:0%; }
.nav-labels button:nth-child(2) { left:25%; }
.nav-labels button:nth-child(3) { left:50%; }
.nav-labels button:nth-child(4) { left:75%; }
.nav-labels button:nth-child(5) { left:100%; }
.nav-labels button::before { left:50% !important; }

/* The bottom page progress indicator — not the curved Journey rail — gets the
   stronger light-theme contrast requested in the review. */
.progress {
  height:3px;
  background:rgba(255,255,255,.10);
}
.progress i {
  width:100% !important;
  transform:scaleX(var(--overall));
  transform-origin:0 50%;
  background:linear-gradient(90deg,#5960E9 0%,#767DFF 48%,#FF725E 100%);
}
html[data-theme="light"] .progress {
  height:4px;
  background:rgba(39,43,101,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48), 0 -1px 9px rgba(65,70,184,.10);
}
html[data-theme="light"] .progress i {
  background:linear-gradient(90deg,#3439A8 0%,#5962E6 48%,#F65F4D 100%);
  box-shadow:0 0 5px rgba(65,70,184,.38), 0 0 8px rgba(255,114,94,.28);
}

/* ─────────────────────────────────────────────────────────────
   v15 — continuous arc-length Journey
   One expressive curve, one arc-length clock, one progress source.
   ───────────────────────────────────────────────────────────── */

/* Restore the deeper, more cinematic wave. The base line is always visible;
   the progress layer only adds a restrained illuminated history. */
.rail-route {
  stroke-width: 1.3;
  opacity: .54;
  filter:
    drop-shadow(0 0 4px rgba(109,116,255,.20))
    drop-shadow(0 0 7px rgba(255,114,94,.08));
}
.rail-progress-line {
  stroke-width: 2.05;
  opacity: .72;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 4px rgba(112,118,255,.28))
    drop-shadow(0 0 8px rgba(255,114,94,.14));
}
html[data-theme="light"] .rail-route {
  opacity: .47;
  filter: drop-shadow(0 0 3px rgba(65,70,184,.12));
}
html[data-theme="light"] .rail-progress-line {
  stroke-width: 2.0;
  opacity: .66;
  filter:
    drop-shadow(0 0 3px rgba(65,70,184,.16))
    drop-shadow(0 0 6px rgba(255,114,94,.12));
}

/* JavaScript now places every label at the matching point on the actual path.
   These nth-child values are intentionally neutralized. */
.nav-labels button:nth-child(1),
.nav-labels button:nth-child(2),
.nav-labels button:nth-child(3),
.nav-labels button:nth-child(4),
.nav-labels button:nth-child(5) { left:auto; }

/* Keep the comet over the end of the illuminated trace so the rounded SVG cap
   is naturally hidden by the glass body rather than looking chopped off. */
.journey-sprite {
  z-index: 7;
  will-change: transform;
}


/* ─────────────────────────────────────────────────────────────
   v16 — ultrawide stability
   Fixed-size scene-relative theme orb + cheaper wide-screen paint path.
   Journey geometry itself is precomputed in JS, so these rules only keep
   expensive visual effects bounded on 21:9 / 32:9 displays.
   ───────────────────────────────────────────────────────────── */
.theme-bubble.orb-a {
  width: clamp(168px, 9.2vw, 228px);
  height: clamp(168px, 9.2vw, 228px);
  right: clamp(72px, 7.4vw, 168px);
  top: clamp(54px, 8vh, 96px);
}

@media (min-width:1800px) and (min-aspect-ratio:19/10) {
  .theme-bubble.orb-a {
    width: 210px;
    height: 210px;
    right: clamp(120px, 7vw, 190px);
    top: clamp(58px, 7.2vh, 92px);
    transform: translate3d(calc(var(--overall) * -130px), calc(var(--overall) * 118px), 0)
               scale(calc(1 + var(--overall) * .075));
  }
  /* Huge blurred text layers are the main raster cost on 21:9/32:9.
     Opacity + motion still preserve the cinematic transition without forcing
     multi-million-pixel blur surfaces to be rebuilt every frame. */
  .scene { filter:none !important; will-change:transform,opacity; }
  .ghost-type span { filter:none !important; }
  .journey-sprite {
    filter:drop-shadow(0 10px 18px rgba(7,9,35,.22));
    contain:layout style paint;
  }
  html[data-theme="light"] .journey-sprite {
    filter:drop-shadow(0 9px 16px rgba(65,70,184,.15));
  }
  .journey-contrail { filter:blur(3px); }
  .light-sweep { filter:blur(6px); }
}

/* v17: bounded type, a single pixel-space rail, and one scroll clock.
   The approved art, chapter order and idle choreography are unchanged. */
html { scroll-behavior: auto !important; }

@media (min-width:881px) {
  .flow-words { perspective:none !important; transform-style:flat !important; }
  .stage .flow-words .flow-word {
    left:0 !important;top:0 !important;right:auto !important;bottom:auto !important;
    /* JS uses bounded CSS-pixel anchors; no projection can push them offscreen. */
    transform:none; transform-style:flat !important;
    transition:color .8s ease; will-change:transform;
  }
  .flow-copy { transition:none; }
  .nav-rail svg { overflow:visible; }
  .nav-rail svg > path {
    vector-effect:none !important;
    transition:none !important;
  }
  .nav-rail .rail-shadow { display:none; }
  .nav-rail .rail-route {
    stroke:url(#journey-gradient);stroke-width:1.3;stroke-dasharray:none;
    stroke-dashoffset:0;stroke-linecap:round;opacity:.54;
    filter:none !important;
  }
  .nav-rail .rail-progress-line {
    stroke:url(#journey-gradient);stroke-width:2.05;stroke-linecap:round;
    filter:none !important;transition:none !important;
  }
  html[data-theme="light"] .nav-rail .rail-route {opacity:.47;}
  .journey-sprite,
  html[data-theme="light"] .journey-sprite {
    contain:layout style;filter:none !important;
    transition:none !important;will-change:transform;
  }
  .journey-body,.journey-state,.journey-core { transition:none !important; }
  .journey-state { will-change:opacity; }
  .journey-card {backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  .cursor-glow {left:0;top:0;will-change:transform;}
  /* These decorative spheres already have their glass surface in gradients.
     Sampling the entire moving background under them repaints huge areas. */
  .atmosphere .glass-orb {backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .hero-mark {animation:none !important;}
}

/* Rasterize the unchanged atmospheric gradients once, instead of filtering
   several viewport-sized surfaces on every wide-screen frame. The textures
   include their soft alpha edges; their original transform/opacity remain live. */
@media (min-width:1800px) and (min-aspect-ratio:19/10) {
  .aurora {background:none !important;filter:none !important;}
  .aurora::before,.aurora::after {
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background-position:center;background-size:100% 100%;background-repeat:no-repeat;
    transition:opacity .9s ease;
  }
  .aurora::before{opacity:1;}.aurora::after{opacity:0;}
  html[data-theme="light"] .aurora::before{opacity:0;}
  html[data-theme="light"] .aurora::after{opacity:1;}
  .aurora-a::before {background-image:url("assets/optimized/aurora-a-dark.webp");}
  .aurora-a::after {background-image:url("assets/optimized/aurora-a-light.webp");}
  .aurora-b::before {background-image:url("assets/optimized/aurora-b-dark.webp");}
  .aurora-b::after {background-image:url("assets/optimized/aurora-b-light.webp");}
  .aurora-c::before {background-image:url("assets/optimized/aurora-c-dark.webp");}
  .aurora-c::after {background-image:url("assets/optimized/aurora-c-light.webp");}
  .mark-halo {background:none !important;filter:none !important;}
  .mark-halo::before {
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background:url("assets/optimized/mark-halo-dark.webp") center/100% 100% no-repeat;
  }
  .light-ribbon {box-shadow:none;filter:none;}
}