/* ============================================================
   KRATI Younes — Portfolio  ·  v2 "Signal"
   Refined palettes · channel surfaces · parallax
   ============================================================ */

:root {
  --bg: #07080d;
  --bg-2: #0b0d14;
  --fg: #ece9e3;
  --accent: #7aa2e3;
  --accent-2: #b8a6e8;
  --muted: #8a92a4;
  --line: rgba(236, 233, 227, 0.10);
  --glass: rgba(236, 233, 227, 0.03);
  --speed: 1;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --c-fr: var(--accent);
  --c-de: #e0b24a;
  --c-ch: #e0584f;
}

.palette-nocturne { --bg:#07080d; --bg-2:#0b0d14; --fg:#ece9e3; --accent:#7aa2e3; --accent-2:#b8a6e8; --muted:#8a92a4; --line:rgba(236,233,227,.10); }
.palette-sodium   { --bg:#0c0907; --bg-2:#130f0b; --fg:#f1ebe1; --accent:#f0a368; --accent-2:#ef8079; --muted:#a2917f; --line:rgba(241,235,225,.10); }
.palette-veronese { --bg:#06100c; --bg-2:#0a1610; --fg:#e9eee7; --accent:#6cc9a0; --accent-2:#9bd6c0; --muted:#7e9388; --line:rgba(233,238,231,.10); }

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--bg); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 14px; }
html.smooth-on { scroll-behavior: auto; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}
/* big display headings: resolve --fg at the element (never inherit a transitioned color) */
.hero-name, .surface-title, .act-title, .contact-h, .band-head h2, .simu-l h3 { color: var(--fg); }
body { cursor: none; position: relative; }
/* cinematic vignette — depth at the edges of the world (behind content, over the webgl field) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(128% 118% at 50% 40%, transparent 50%, color-mix(in oklab, var(--bg) 70%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklab, var(--bg) 30%, transparent) 0%, transparent 14%, transparent 80%, color-mix(in oklab, var(--bg) 52%, transparent) 100%);
}
@media (max-width: 900px) { body { cursor: auto; } #cursor-dot, #cursor-ring, #cursor-label { display: none !important; } }

a, button { color: inherit; text-decoration: none; cursor: none; background: none; border: none; font: inherit; }
img { display: block; max-width: 100%; }

/* grain overlay for that filmic, classy texture */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* ---------- ambient field — a discreet, slowly-drifting soft glow (replaces the 3D core) ---------- */
#ambient {
  position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 40% at 72% 16%, var(--ambient, transparent), transparent 72%),
    radial-gradient(38% 36% at 20% 84%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 74%);
  transition: background 1.6s ease;
  animation: ambientDrift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2.2%, -2.6%, 0) scale(1.07); }
}
body.no-ambient #ambient { animation: none; }
@media (prefers-reduced-motion: reduce) { #ambient { animation: none; } }

/* ---------- cursor — precise "lock-on" (never covers the target) ---------- */
#cursor-dot, #cursor-ring, #cursor-label {
  position: fixed; pointer-events: none; z-index: 9999;
  left: 0; top: 0; transform: translate3d(-50%,-50%,0); will-change: transform;
}
#cursor-dot, #cursor-ring { border-radius: 50%; }
#cursor-dot { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent); transition: width .2s, height .2s, opacity .2s, background .25s; }
#cursor-ring { width: 34px; height: 34px; border: 1.5px solid color-mix(in oklab, var(--fg) 45%, transparent); transition: width .3s cubic-bezier(.2,.9,.3,1.2), height .3s cubic-bezier(.2,.9,.3,1.2), border-color .3s, opacity .3s; }
#cursor-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 4px 9px; border-radius: 100px;
  opacity: 0; transition: opacity .25s; white-space: nowrap; font-weight: 600;
  /* margin offset (JS owns transform for positioning) — sits lower-right, never hides target */
  margin-left: 22px; margin-top: 22px;
}
/* hover: ring SHRINKS to frame the dot precisely + accent; dot stays visible */
body.cursor-hover #cursor-ring { width: 17px; height: 17px; border-color: var(--accent); border-width: 1.5px; }
body.cursor-hover #cursor-dot { width: 4px; height: 4px; }
body.cursor-hover #cursor-label { opacity: 1; }
/* press: quick confirmation tap */
body.cursor-down #cursor-ring { width: 12px; height: 12px; border-color: var(--accent); }
body.cursor-down #cursor-dot { width: 6px; height: 6px; }

main { position: relative; z-index: 1; }
.container { max-width: 1500px; margin: 0 auto; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4vw; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--fg);
}
/* legibility scrim so the bar always reads on top of any section, without a hard edge */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 80%, transparent), transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask: linear-gradient(to bottom, #000 52%, transparent); mask: linear-gradient(to bottom, #000 52%, transparent);
}
.nav .logo { font-family: var(--font-display); font-size: 23px; font-style: italic; letter-spacing: -.02em; }
.nav ul { display: flex; gap: 26px; list-style: none; }
.nav ul a { position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: currentColor; transition: width .35s ease; }
.nav ul a:hover::after { width: 100%; }
.nav .meta { display: flex; gap: 16px; align-items: center; }
.nav .pulse { width: 8px; height: 8px; border-radius: 50%; background: #06140d; box-shadow: 0 0 0 0 #06140d; animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(6,20,13,.5);} 70%{box-shadow:0 0 0 9px rgba(6,20,13,0);} 100%{box-shadow:0 0 0 0 rgba(6,20,13,0);} }
/* "Discutons" pill — always a clear GREEN CTA, readable in both light & dark */
.nav-discutons { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 100px;
  border: 1px solid #2fe08a; background: #2fe08a;
  text-decoration: none; transition: background .25s, border-color .25s; }
.nav-discutons:hover { background: #25c873; border-color: #25c873; }
.nav-disc-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: #06140d; }

/* ---------- HERO ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 10vh 4vw 4vh; position: relative; }
.hero-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(58px, min(13vw, 20vh), 210px); line-height: .84; letter-spacing: -.04em; }
.hero-name .line { display: block; overflow: hidden; }
.hero-name .line .char { display: inline-block; transform: translateY(0); opacity: 1; }
.hero-name.anim-in .line .char { animation: lineUp 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero-name .line .ital { font-style: italic; color: var(--accent); }
@keyframes lineUp { 0%{transform:translateY(110%);opacity:0;} 100%{transform:translateY(0);opacity:1;} }

.hero-sub { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-sub .chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px; transition: color .3s, border-color .3s; white-space: nowrap; }
.hero-sub .chip.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.hero-sub .chip.lead { color: var(--fg); border-color: color-mix(in oklab, var(--fg) 24%, transparent); }
.hero-type { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 100px; }
.hero-type .ht-label { color: var(--muted); }
.hero-type .ht-word { color: var(--accent); min-width: 1ch; }
.hero-type .ht-caret { width: 2px; height: 1.05em; background: var(--accent); display: inline-block; margin-left: 1px; animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero-thesis { margin-top: 16px; font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 30px); line-height: 1.28; max-width: 22ch; color: color-mix(in oklab, var(--fg) 90%, transparent); }
.hero-thesis em { font-style: italic; color: var(--accent); }

.hero-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 30px; margin-top: 26px; }
.hero-row > div { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 14px; }
.hero-row h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.hero-row p { font-size: 15px; line-height: 1.55; }
.hero-row .right { text-align: left; }
.hero-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scroll-cue { display: flex; align-items: center; gap: 12px; }
.scroll-cue .bar { width: 64px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; left: -30%; top: 0; width: 30%; height: 100%; background: var(--accent); animation: scrollBar 2.2s ease-in-out infinite; }
@keyframes scrollBar { 0%{left:-30%;} 100%{left:100%;} }

/* ---------- generic SURFACE (channel) ---------- */
.surface { position: relative; padding: 22vh 6vw; overflow: hidden; }
.surface + .surface::before, .impact::before, .band::before, .contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); pointer-events: none; }
.surface-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 7vh; position: relative; z-index: 3; }
.surface-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.surface-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 6.4vw, 116px); line-height: .92; letter-spacing: -.03em; }
.surface-title em { font-style: italic; color: var(--accent); margin-left: .22em; }
.surface-desc { font-size: 16px; line-height: 1.62; color: color-mix(in oklab, var(--fg) 90%, transparent); max-width: 46ch; justify-self: end; }
.surface-desc .k { color: var(--accent); }

/* giant ghost word for parallax depth */
.ghost-word {
  position: absolute; font-family: var(--font-display); font-style: italic;
  font-size: clamp(180px, 30vw, 560px); line-height: .7; letter-spacing: -.05em;
  color: color-mix(in oklab, var(--fg) 5%, transparent); pointer-events: none; user-select: none;
  z-index: 0; white-space: nowrap;
}

/* metric chips floating in scenes */
.metric { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
.metric b { color: var(--accent); font-weight: 500; }
.metric .led { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ====== shared device chrome ====== */
.device { position: relative; }
.device-tag { position: absolute; left: 0; bottom: -28px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes blink { 50% { opacity: 0; } }

/* ====== SEA — desktop browser + SERP ====== */
.sea .stage { position: relative; max-width: 980px; margin: 0 auto; z-index: 2; }
.browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 50px 130px rgba(0,0,0,.55); background: #14161d; }
.browser .chrome { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #1b1e26; border-bottom: 1px solid var(--line); }
.browser .chrome .dots { display: flex; gap: 7px; }
.browser .chrome .dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f4a; }
.browser .chrome .dots i:nth-child(1){ background:#ff5f57; } .browser .chrome .dots i:nth-child(2){ background:#febc2e; } .browser .chrome .dots i:nth-child(3){ background:#28c840; }
.browser .chrome .omnibox { flex: 1; display: flex; align-items: center; gap: 8px; background: #0e1015; border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.browser .chrome .omnibox .lock { width: 9px; height: 8px; border: 1.5px solid var(--muted); border-radius: 2px; position: relative; flex: none; }
.browser .chrome .omnibox .lock::before { content:""; position:absolute; top:-4px; left:1.5px; width:4px; height:4px; border:1.5px solid var(--muted); border-bottom:0; border-radius:3px 3px 0 0; }
.browser .chrome-actions { display: flex; gap: 8px; }
.browser .chrome-actions i { width: 14px; height: 4px; border-radius: 2px; background: #3a3f4a; }
.serp { background: #0e1015; padding: 26px 30px 30px; }
.serp .serp-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.serp .serp-bar .g { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.serp .serp-bar .searchfield { flex: 1; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 100px; padding: 11px 18px; font-size: 16px; color: var(--fg); background: #14161d; }
.serp .searchfield .q::after { content: "▌"; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 1px; }
.serp .searchfield .mag { width: 15px; height: 15px; border: 2px solid var(--muted); border-radius: 50%; position: relative; flex: none; }
.serp .searchfield .mag::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.serp .tabs { display: flex; gap: 22px; margin: 6px 0 4px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.serp .tabs span:first-child { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: -11px; }
.serp .tabs .tools { margin-left: auto; }
.serp .result { padding: 16px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start; opacity: 0; transform: translateY(14px); }
.serp.play .result { animation: serpIn .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes serpIn { to { opacity: 1; transform: none; } }
.serp .result .ad { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
.serp .result .url { font-family: var(--font-mono); font-size: 12px; color: color-mix(in oklab, var(--fg) 55%, transparent); }
.serp .result h5 { font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 400; line-height: 1.08; margin: 3px 0; color: var(--accent-2); }
.serp .result p { font-size: 13px; color: color-mix(in oklab, var(--fg) 68%, transparent); max-width: 64ch; line-height: 1.45; }
.serp .result .pos { font-family: var(--font-mono); font-size: 11px; color: var(--accent); white-space: nowrap; }
.sea .float { position: absolute; z-index: 4; }

/* SEA channel switcher */
.sea-tabs { display: flex; gap: 4px; padding: 10px 16px 0; background: #0e1015; border-bottom: 1px solid var(--line); }
.sea-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); padding: 9px 16px; border-radius: 8px 8px 0 0; transition: color .3s, background .3s; position: relative; }
.sea-tab.on { color: var(--fg); background: #14161d; }
.sea-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.sea-stage { background: #0e1015; padding: 24px 28px 28px; position: relative; height: 472px; }
.sea-pane { position: absolute; inset: 0; padding: 22px 28px 24px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s; pointer-events: none; }
.sea-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); pointer-events: auto; }
@keyframes seaIn { from { transform: translateY(8px); } to { transform: none; } }

/* SEA · Search */
.sea-search .serp-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.sea-search .serp-bar .g { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.sea-search .searchfield { flex: 1; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 100px; padding: 11px 18px; font-size: 16px; color: var(--fg); background: #14161d; }
.sea-search .searchfield .q::after { content: "▌"; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 1px; }
.sea-search .searchfield .mag { width: 15px; height: 15px; border: 2px solid var(--muted); border-radius: 50%; position: relative; flex: none; }
.sea-search .searchfield .mag::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.sea-search .tabs { display: flex; gap: 22px; margin: 6px 0 4px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.sea-search .tabs span:first-child { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: -11px; }
.sea-search .tabs .tools { margin-left: auto; }
.sea-search .result { padding: 11px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; align-items: start; }
.sea-search .result .ad { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
.sea-search .result .url { font-family: var(--font-mono); font-size: 12px; color: color-mix(in oklab, var(--fg) 55%, transparent); }
.sea-search .result h5 { font-family: var(--font-display); font-style: italic; font-size: 21px; font-weight: 400; line-height: 1.05; margin: 2px 0; color: var(--accent-2); }
.sea-search .result p { font-size: 13px; color: color-mix(in oklab, var(--fg) 68%, transparent); max-width: 64ch; line-height: 1.45; }
.sea-search .result .pos { font-family: var(--font-mono); font-size: 11px; color: var(--accent); white-space: nowrap; }

/* SEA · YouTube */
.sea-yt { display: grid; grid-template-columns: 1fr 170px; grid-template-rows: auto auto; gap: 6px 16px; height: 100%; }
.yt-player { grid-column: 1; grid-row: 1; position: relative; aspect-ratio: 16/9; max-height: 250px; border-radius: 8px; overflow: hidden; background: #000; }
.yt-grad { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 80% at 35% 35%, color-mix(in oklab, var(--accent) 55%, #0b0e16), #06080d 75%); }
.yt-badge { position: absolute; left: 12px; bottom: 40px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; background: #ffc800; color: #000; padding: 2px 7px; border-radius: 2px; z-index: 3; }
.yt-skip { position: absolute; right: 0; bottom: 38px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(0,0,0,.6); padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-left: 0; z-index: 3; }
.yt-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 56px; height: 40px; background: #f00; border-radius: 10px; color: #fff; display: grid; place-items: center; font-size: 18px; z-index: 2; box-shadow: 0 8px 30px rgba(255,0,0,.4); }
.yt-overlay { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.4); padding: 6px 11px; border-radius: 100px; }
.yt-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 8px 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.yt-prog { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.yt-prog i { display: block; height: 100%; width: 0; background: #f00; }
.sea .yt-prog i { animation: prog 12s linear infinite; }
.yt-t { font-family: var(--font-mono); font-size: 10px; color: #fff; }
.yt-meta .yt-title { font-size: 14px; font-weight: 500; margin: 12px 0 8px; }
.yt-meta { grid-column: 1; grid-row: 2; }
.yt-row { display: flex; align-items: center; gap: 10px; }
.yt-row .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.yt-row .yt-ch { font-size: 13px; font-weight: 500; } .yt-row .yt-sub { font-size: 11px; color: var(--muted); }
.yt-row .yt-cta { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; background: #f00; padding: 8px 16px; border-radius: 100px; }
.yt-suggest { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 12px; }
.yt-s { display: flex; flex-direction: column; gap: 6px; } .yt-s .th { aspect-ratio: 16/9; border-radius: 6px; background: #1a1e26; } .yt-s .ln { height: 8px; border-radius: 4px; background: #1a1e26; width: 80%; }

/* SEA · Display */
.sea-disp { display: flex; flex-direction: column; gap: 14px; }
.disp-leader { height: 64px; border-radius: 8px; background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 32%, #14161d), #14161d); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; position: relative; }
.disp-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 7px; border-radius: 3px; background: rgba(0,0,0,.3); }
.disp-cta { font-family: var(--font-mono); font-size: 11px; color: var(--bg); background: var(--accent); padding: 8px 14px; border-radius: 6px; } .disp-cta.sm { font-size: 9px; padding: 6px 10px; }
.disp-body { display: grid; grid-template-columns: 1fr 220px; gap: 18px; }
.disp-article { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.disp-article .ln { height: 12px; border-radius: 5px; background: #181c24; }
.disp-mpu { aspect-ratio: 6/5; border-radius: 8px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 38%, #14161d), color-mix(in oklab, var(--accent-2) 26%, #14161d)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; }
.disp-mpu .disp-tag { position: absolute; top: 8px; left: 8px; }
.disp-mpu-mid { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 16px; color: #fff; letter-spacing: .16em; }
.ln.w50 { width: 50%; } .ln.w60 { width: 60%; } .ln.w70 { width: 70%; } .ln.w80 { width: 80%; } .ln.w85 { width: 85%; } .ln.w90 { width: 90%; } .ln.w95 { width: 95%; }

/* SEA · PMax */
.sea-pmax { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pmax-hub { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); padding: 9px 16px; border-radius: 100px; background: color-mix(in oklab, var(--accent) 8%, transparent); }
.pmax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.pmax-tile { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #14161d; display: flex; flex-direction: column; gap: 6px; position: relative; animation: pmaxIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * .08s); }
@keyframes pmaxIn { from { transform: translateY(10px); } to { transform: none; } }
.pmax-tile .pmax-k { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--accent); }
.pmax-tile .pmax-c { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pmax-tile .pmax-dot { position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s infinite; }
.pmax-note { font-size: 13px; color: var(--muted); text-align: center; max-width: 52ch; line-height: 1.5; }

/* ====== SMA — device family (LinkedIn laptop · Instagram tablet · TikTok phone) ====== */
.sma .devices { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.2vw, 40px); perspective: 2000px; position: relative; z-index: 2; flex-wrap: wrap; row-gap: 60px; }
.sma .screen { position: relative; overflow: hidden; background: var(--bg-2); }

/* laptop */
.laptop { width: min(31vw, 330px); transform: rotateY(7deg); transform-style: preserve-3d; }
.laptop .screen.li { aspect-ratio: 16/10; border-radius: 12px 12px 0 0; border: 10px solid #090b10; border-bottom: 0; }
.laptop .base { width: 116%; margin-left: -8%; height: 15px; background: linear-gradient(#262b36, #0a0d13); border-radius: 0 0 16px 16px; box-shadow: 0 30px 50px rgba(0,0,0,.5); }
.laptop .base::after { content:""; display:block; width:14%; height:4px; margin:0 auto; background:#0a0d13; border-radius:0 0 6px 6px; }
.li { display: flex; flex-direction: column; background: #0a0d12; color: var(--fg); font-size: 11px; }
.li-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #11141b; border-bottom: 1px solid var(--line); }
.li-logo { width: 20px; height: 20px; border-radius: 4px; background: #2f7fc4; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.li-search { width: 120px; height: 12px; border-radius: 100px; background: #1d212b; }
.li-nav { margin-left: auto; display: flex; gap: 12px; } .li-nav i { width: 14px; height: 14px; border-radius: 3px; background: #1d212b; }
.li-body { padding: 12px; flex: 1; overflow: hidden; }
.li-card { background: #11141b; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.li-card .li-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.li-head .av.sq { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.li-head .nm { font-weight: 600; font-size: 10px; white-space: nowrap; } .li-head .sp { color: var(--accent); font-weight: 500; }
.li-head .sub { font-size: 8px; color: var(--muted); margin-top: 2px; }
.li-text { font-size: 11px; line-height: 1.4; margin-bottom: 8px; }
.li-media { aspect-ratio: 16/8; border-radius: 6px; background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 34%, #0c1018), #0c1018); display: flex; align-items: flex-end; padding: 10px; }
.li-media .li-cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 6px 10px; border-radius: 4px; }
.li-react { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }
.li-actions { display: flex; justify-content: space-between; padding-top: 8px; font-size: 9px; color: var(--muted); }

/* tablet */
.tablet { width: min(21vw, 206px); transform: rotateY(-2deg); }
.tablet .screen.ig { aspect-ratio: 3/4.1; border-radius: 26px; border: 11px solid #06080c; }
.ig { display: flex; flex-direction: column; background: #07090e; color: var(--fg); }
.ig-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ig-logo { font-family: var(--font-display); font-style: italic; font-size: 18px; }
.ig-ic { display: flex; gap: 10px; } .ig-ic i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--muted); }
.ig-stories { display: flex; gap: 10px; padding: 10px 12px; }
.ig-stories .st { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--bg-2); border: 2px solid var(--accent); padding: 2px; background-clip: content-box; }
.ig-post { padding: 0 0 12px; }
.ig-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.ig-head .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.ig-head .nm { font-size: 12px; font-weight: 600; } .ig-head .nm .sp { color: var(--muted); font-weight: 400; }
.ig-head .dots3 { margin-left: auto; color: var(--muted); }
.ig-media { aspect-ratio: 1; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, #0d1119), color-mix(in oklab, var(--accent-2) 30%, #0d1119)); position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.ig-media .ig-cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; padding: 7px 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.25); }
.ig-actions { display: flex; justify-content: space-between; padding: 10px 12px 4px; font-size: 17px; }
.ig-likes { padding: 0 12px; font-size: 11px; font-weight: 600; }
.ig-cap { padding: 4px 12px 0; font-size: 11px; color: color-mix(in oklab, var(--fg) 85%, transparent); }

/* phone — TikTok */
.phone { width: min(23vw, 224px); aspect-ratio: 9/19; border-radius: 30px; background: #050608; border: 1px solid #14161d; padding: 7px; box-shadow: 0 50px 120px rgba(0,0,0,.6); position: relative; transform: rotateY(-7deg); }
.phone .notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 56px; height: 16px; background: #050608; border-radius: 100px; z-index: 6; }
.tt-top { position: absolute; top: 38px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font-size: 13px; color: rgba(255,255,255,.6); z-index: 4; text-shadow: 0 1px 4px rgba(0,0,0,.6); white-space: nowrap; }
.tt-top .on { color: #fff; font-weight: 700; }
.tt-top .on::after { content: ""; display: block; width: 18px; height: 2px; background: #fff; margin: 3px auto 0; border-radius: 2px; }
.tt-rail { position: absolute; right: 9px; bottom: 110px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 4; }
.tt-rail .av-plus { position: relative; margin-bottom: 3px; }
.tt-rail .av-plus .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 2px solid #fff; display: block; }
.tt-rail .av-plus .plus { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 17px; height: 17px; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 12px; line-height: 16px; text-align: center; }
.tt-rail .act { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tt-rail .act i { font-size: 20px; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.tt-rail .act .heart { color: #fe2c55; }
.tt-rail .disc { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #444 24%, #111 26%, #2a2a2a 52%, #111 70%); border: 3px solid rgba(255,255,255,.15); animation: spin 3.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tt-bottom { position: absolute; left: 14px; right: 64px; bottom: 76px; z-index: 4; display: flex; flex-direction: column; gap: 7px; }
.tt-handle { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tt-handle .follow { font-size: 11px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.6); padding: 3px 11px; border-radius: 6px; }
.tt-cap { font-size: 12px; line-height: 1.4; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tt-music { font-size: 11px; color: #fff; display: flex; align-items: center; gap: 7px; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tt-music .note { font-size: 13px; }
.tt-marquee { overflow: hidden; white-space: nowrap; flex: 1; }
.tt-marquee span { display: inline-block; animation: ttMarquee 9s linear infinite; }
@keyframes ttMarquee { to { transform: translateX(-50%); } }
.tt-promo { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 4; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 9px; padding: 8px 10px; }
.tt-promo .tt-promo-ic { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.tt-promo .tt-promo-t { font-size: 12px; font-weight: 600; color: #fff; flex: 1; }
.tt-promo .tt-promo-cta { font-size: 12px; font-weight: 700; color: #000; background: #fff; padding: 7px 16px; border-radius: 6px; }
.tt-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.2); z-index: 5; }
.tt-progress i { display: block; height: 100%; width: 0; background: #fff; }
.phone .screen.rot { height: 100%; border-radius: 24px; position: relative; overflow: hidden; background: #0a0c12; color: #fff; }
.phone .phone-tabs { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 7; }
.phone .device-tag { left: 50%; transform: translateX(-50%); bottom: -46px; white-space: nowrap; }
.phone .pf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); transition: all .3s; }
.phone .pf-dot.on { background: var(--accent); border-color: var(--accent); width: 18px; border-radius: 4px; }

/* TikTok — vertical product video ad */
.pf-tiktok { position: absolute; inset: 0; background: #0a0c12; }
.tt-video { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(165deg, #20283a 0%, #161c29 48%, #0c111a 100%); }
.tt-scene { position: absolute; inset: 0; }
.tt-scene .tt-product { position: absolute; left: 50%; top: 37%; transform: translate(-50%,-50%); width: 48%; aspect-ratio: 5/7; border-radius: 16px; background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 78%, #fff 8%) 0%, color-mix(in oklab, var(--accent) 55%, #11151f) 55%, color-mix(in oklab, var(--accent-2) 60%, #11151f) 100%); box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 2px 14px rgba(255,255,255,.25); animation: ttFloat 4.5s ease-in-out infinite; }
.tt-scene .tt-product::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); }
.tt-scene .tt-glow { position: absolute; left: 50%; top: 37%; transform: translate(-50%,-50%); width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, transparent), transparent 65%); filter: blur(30px); }
.tt-scene .tt-brand-mark { position: absolute; left: 0; right: 0; bottom: 30%; text-align: center; font-family: var(--font-sans); font-weight: 700; letter-spacing: .42em; font-size: 15px; color: rgba(255,255,255,.92); text-indent: .42em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
@keyframes ttFloat { 50% { transform: translate(-50%,-54%); } }
.tt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 22%, transparent 50%, rgba(0,0,0,.78) 100%); }
.tt-status { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 11px; font-weight: 600; color: #fff; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.tt-status .tt-sig { letter-spacing: -1px; }

/* Snapchat */
.pf-snap { position: absolute; inset: 0; }
.snap-video { position: absolute; inset: 0; background: linear-gradient(165deg, #2a2630, #16131c 60%, #0d0b12); overflow: hidden; }
.snap-video .snap-subj { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); width: 66%; aspect-ratio: 4/5; border-radius: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 70%, #fff), color-mix(in oklab, var(--accent-2) 60%, #2a2630)); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.snap-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 35%, rgba(0,0,0,.7) 100%); }
.snap-top { position: absolute; top: 14px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.snap-top .snap-ghost { width: 26px; height: 26px; border-radius: 8px; background: #FFFC00; display: grid; place-items: center; font-size: 14px; }
.snap-top .snap-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.45); color: #fff; padding: 3px 7px; border-radius: 3px; }
.snap-mid { position: absolute; left: 14px; right: 14px; top: 50%; z-index: 5; }
.snap-mid .snap-kick { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #FFFC00; margin-bottom: 6px; }
.snap-mid .snap-ttl { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.02; color: #fff; }
.snap-bottom { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.snap-swipe { font-size: 11px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.snap-swipe .chev { font-size: 16px; animation: snapChev 1.3s ease-in-out infinite; }
@keyframes snapChev { 50% { transform: translateY(-4px); } }
.snap-card { width: 86%; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 9px; display: flex; align-items: center; gap: 9px; }
.snap-card .snap-ic { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #FFFC00, var(--accent)); flex: none; }
.snap-card .snap-h { font-size: 11px; font-weight: 600; color: #fff; }
.snap-card .snap-s { font-size: 9px; color: rgba(255,255,255,.7); }
.snap-card .snap-b { margin-left: auto; font-size: 10px; font-weight: 600; color: #0a0c12; background: #FFFC00; padding: 6px 11px; border-radius: 100px; }

/* Facebook */
.pf-fb { position: absolute; inset: 0; background: #0e1014; color: #e6eaf0; overflow-y: hidden; }
.fb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px; }
.fb-top .fb-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; color: #4a90f0; letter-spacing: -.02em; }
.fb-top .fb-ic { display: flex; gap: 8px; } .fb-top .fb-ic i { width: 16px; height: 16px; border-radius: 50%; background: #1c2026; }
.fb-post { background: #14171c; }
.fb-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.fb-head > div { flex: 1; min-width: 0; }
.fb-head .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.fb-head .fb-nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.fb-head .fb-sub { font-size: 9px; color: #8a93a0; line-height: 1.2; }
.fb-head .dots3 { margin-left: auto; color: #8a93a0; }
.fb-text { padding: 4px 12px 10px; font-size: 11px; line-height: 1.4; }
.fb-media { aspect-ratio: 1/1; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 42%, #14171c), color-mix(in oklab, var(--accent-2) 30%, #14171c)); position: relative; display: flex; align-items: flex-start; padding: 10px; }
.fb-media .fb-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; background: rgba(0,0,0,.5); color: #fff; padding: 3px 8px; border-radius: 3px; }
.fb-linkbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1a1e24; }
.fb-linkbar .fb-dom { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a0; }
.fb-linkbar .fb-lh { font-size: 11px; font-weight: 600; }
.fb-linkbar .fb-cta { margin-left: auto; font-size: 10px; font-weight: 600; color: #e6eaf0; background: #2a2f37; padding: 7px 13px; border-radius: 6px; }
.fb-stats { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 9px; color: #8a93a0; }
.fb-actions { display: flex; justify-content: space-between; padding: 8px 12px 12px; font-size: 10px; color: #8a93a0; border-top: 1px solid #1c2026; }

.sma.play .tt-progress i { animation: prog 9s linear infinite; }

.sma-metrics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 9vh; position: relative; z-index: 2; }

/* ====== Programmatic — RTB auction ====== */
.rtb .wmetrics { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.auction .winner .won-by { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.auction .winner .won-by b { color: var(--fg); font-weight: 500; }
.auction .winner .won-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--bg); background: var(--accent); padding: 2px 8px; border-radius: 3px; opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; }
.auction .winner .won-tag.show { opacity: 1; transform: none; }
.auction .winner.flash { animation: winFlash .6s ease; }
@keyframes winFlash { 0% { background: color-mix(in oklab, var(--accent) 14%, transparent); } 100% { background: transparent; } }
.auction .winner .big { transition: opacity .3s; }

/* RTB — creative in context (desktop / tablet / mobile) */
.ctx { margin-top: 40px; }
.ctx-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.ctx-label em { font-style: italic; color: var(--accent); font-family: var(--font-display); font-size: 15px; letter-spacing: 0; text-transform: none; }
.ctx-devices { display: grid; grid-template-columns: 1.6fr 1fr .7fr; gap: 26px; align-items: end; }
.ctx-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ctx-ad { background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 36%, var(--bg-2)), color-mix(in oklab, var(--accent-2) 22%, var(--bg-2))); border-radius: 5px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; position: relative; }
.ctx-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 3px 6px; border-radius: 3px; }
.ctx-brand { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; color: #fff; letter-spacing: .12em; }
.ctx-cta { font-family: var(--font-mono); font-size: 9px; color: var(--bg); background: var(--accent); padding: 5px 9px; border-radius: 4px; } .ctx-cta.sm { font-size: 8px; padding: 4px 7px; }
.ctx-ad.lead { height: 56px; margin: 4px 0; }
.ctx-ad.mpu { aspect-ratio: 6/5; flex-direction: column; justify-content: center; gap: 8px; }
.ctx-ad.mid { height: 70px; margin: 4px 0; }
.ctx-ad.inl { height: 44px; margin: 4px 0; }
.ctx-ad.sticky { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 30px; }

.ctx-desktop { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0e1015; }
.ctx-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1b1e26; border-bottom: 1px solid var(--line); }
.ctx-bar .dots { display: flex; gap: 5px; } .ctx-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3f4a; }
.ctx-url { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ctx-page { display: grid; grid-template-columns: 1fr 200px; gap: 14px; padding: 16px; }
.ctx-page.t, .ctx-page.m { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ctx-art, .ctx-side { display: flex; flex-direction: column; gap: 10px; }
.ctx-h { height: 22px; border-radius: 5px; background: #1c2029; } .ctx-h.sm { height: 16px; }
.ctx-page .ln { height: 10px; border-radius: 4px; background: #181c24; }

.ctx-tablet { border: 12px solid #0a0d12; border-radius: 18px; background: #0e1015; overflow: hidden; }
.ctx-mobile { border: 8px solid #0a0d12; border-radius: 22px; background: #0e1015; overflow: hidden; position: relative; }
.ctx-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 44px; height: 10px; background: #0a0d12; border-radius: 100px; z-index: 3; }
.ctx-page.m { position: relative; padding-top: 20px; min-height: 280px; }

/* ============ DCO / Drive-to-store ============ */
.dco { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.dco-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4vw; align-items: start; position: relative; z-index: 2; }
.dco-scale { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.dco-scale-b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); padding: 9px 15px; border-radius: 100px; }
.dco-scale-b.on { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 35%, transparent); }
.dco-radar { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 9%, var(--bg-2)), var(--bg-2) 72%); }
.radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-grid circle { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-grid line { stroke: var(--line); stroke-width: 1; opacity: .5; }
.radar-disc { transition: none; }
.radar-dot.cc-fr { fill: var(--c-fr); } .radar-dot.cc-fr.on { filter: drop-shadow(0 0 5px color-mix(in oklab, var(--c-fr) 85%, transparent)); }
.radar-dot.cc-de { fill: var(--c-de); } .radar-dot.cc-de.on { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c-de) 85%, transparent)); }
.radar-dot.cc-ch { fill: var(--c-ch); } .radar-dot.cc-ch.on { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c-ch) 85%, transparent)); }
.radar-chal { stroke-width: 1; }
.radar-chal.cc-fr { fill: color-mix(in oklab, var(--c-fr) 11%, transparent); stroke: color-mix(in oklab, var(--c-fr) 40%, transparent); }
.radar-chal.cc-de { fill: color-mix(in oklab, var(--c-de) 12%, transparent); stroke: color-mix(in oklab, var(--c-de) 44%, transparent); }
.radar-chal.cc-ch { fill: color-mix(in oklab, var(--c-ch) 12%, transparent); stroke: color-mix(in oklab, var(--c-ch) 44%, transparent); }
.radar-chal.solo { stroke-dasharray: 5 5; }
.radar-zones .zone { stroke: none; }
.radar-zones .zone.fr { fill: color-mix(in oklab, var(--c-fr) 8%, transparent); }
.radar-zones .zone.de { fill: color-mix(in oklab, var(--c-de) 9%, transparent); }
.radar-zones .zone.ch { fill: color-mix(in oklab, var(--c-ch) 9%, transparent); }
.radar-zones .zone-line { fill: none; stroke: color-mix(in oklab, var(--fg) 22%, transparent); stroke-width: 1; stroke-dasharray: 5 5; }
.radar-zones .zone-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.radar-zones .zone-label.fr { fill: color-mix(in oklab, var(--c-fr) 88%, var(--fg)); }
.radar-zones .zone-label.de { fill: var(--c-de); }
.radar-zones .zone-label.ch { fill: var(--c-ch); }
.radar-core { fill: none; }
.radar-core-dot { fill: var(--fg); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--fg) 70%, transparent)); }
.radar-core-label { fill: var(--fg); font-family: var(--font-mono); font-size: 16px; letter-spacing: .18em; text-anchor: middle; font-weight: 500; }
.dco-legend { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 14px; z-index: 3; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dco-legend .lg { display: flex; align-items: center; gap: 6px; }
.dco-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-fr); box-shadow: 0 0 6px color-mix(in oklab, var(--c-fr) 70%, transparent); }
.dco-legend .lg-ring { width: 9px; height: 9px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--c-fr) 55%, transparent); background: color-mix(in oklab, var(--c-fr) 14%, transparent); }
.dco-legend .arrow { color: var(--accent); margin-left: auto; }
.dco-map-meta { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 10px; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); z-index: 3; max-width: 70%; }
.dco-map-meta .k { color: var(--accent); }
.dco-footfall { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--bg-2) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dco-footfall .ff-top { display: flex; align-items: center; gap: 20px; }
.dco-footfall .ff-meta { display: flex; flex-direction: column; gap: 7px; }
.dco-footfall .ff-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dco-footfall .ff-v { font-family: var(--font-display); font-size: clamp(34px, 4vw, 56px); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.dco-footfall .ff-spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; flex: 1; margin-left: auto; }
.dco-footfall .ff-spark span { flex: 1; background: color-mix(in oklab, var(--accent) 55%, transparent); border-radius: 1px; }
.dco-footfall .ff-note { font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 11px; }

.dco-side { display: flex; flex-direction: column; gap: 24px; }
.dco-phone { width: 240px; align-self: center; aspect-ratio: 9/16; border-radius: 30px; background: #050608; border: 1px solid #14161d; padding: 8px; box-shadow: 0 50px 120px rgba(0,0,0,.6); position: relative; }
.dco-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 60px; height: 16px; background: #050608; border-radius: 100px; z-index: 6; }
.dco-screen { height: 100%; border-radius: 24px; overflow: hidden; background: var(--bg-2); position: relative; }
.dco-ad { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: linear-gradient(170deg, color-mix(in oklab, var(--accent) 22%, var(--bg-2)) 0%, var(--bg-2) 55%); animation: seaIn .5s cubic-bezier(.2,.7,.2,1); }
.dco-ad-top { display: flex; align-items: center; gap: 8px; }
.dco-emoji { font-size: 26px; }
.dco-ad-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); padding: 4px 8px; border-radius: 100px; }
.dco-ad-mid .dco-kick { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dco-ad-mid .dco-h { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.04; color: var(--fg); }
.dco-ad-mid .dco-s { font-size: 13px; color: color-mix(in oklab, var(--fg) 75%, transparent); margin-top: 10px; }
.dco-ad-cta { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 13px; border-radius: 10px; }
.dco-signals .dco-sig-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.dco-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dco-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 7px 12px; border-radius: 100px; transition: all .3s; cursor: pointer; }
.dco-chip:hover { color: var(--fg); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.dco-chip.hot { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.dco-metrics { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============ Capability cards (IA / IoT / Web) ============ */
.cap-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap-card { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: color-mix(in oklab, var(--bg) 60%, transparent); display: flex; flex-direction: column; gap: 16px; transition: border-color .35s, transform .35s; }
.cap-card:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateY(-4px); }
.cap-head { display: flex; align-items: baseline; gap: 10px; min-height: 30px; }
.cap-head .cap-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); flex: none; }
.cap-head .cap-ttl { font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.1; }
.cap-visual { height: 160px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; padding: 16px; }
.cap-desc { font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--fg) 78%, transparent); }
.cap-desc .k { color: var(--accent); }
.cap-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cap-tags span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 5px 10px; border-radius: 100px; white-space: nowrap; }

/* IA visual */
.cap-visual.ia { display: flex; gap: 14px; }
.ia-report { flex: 1; background: #11141b; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.ia-r-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ia-auto { color: var(--accent); }
.ia-bar { height: 7px; border-radius: 4px; background: #1c2029; animation: iaFill 2.4s ease-in-out infinite; transform-origin: left; }
.ia-bar.b1 { width: 90%; } .ia-bar.b2 { width: 70%; animation-delay: .3s; } .ia-bar.b3 { width: 80%; animation-delay: .6s; }
@keyframes iaFill { 0%, 100% { transform: scaleX(.4); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }
.ia-chart { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: auto; }
.ia-chart span { flex: 1; background: color-mix(in oklab, var(--accent) 55%, transparent); border-radius: 2px; }
.ia-saved { width: 84px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in oklab, var(--accent) 8%, transparent); }
.ia-saved .ia-saved-v { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ia-saved .ia-saved-l { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* IoT visual */
.cap-visual.iot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.iot-board { width: 130px; height: 60px; border-radius: 6px; background: linear-gradient(135deg, #0c2e1e, #07140d); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); position: relative; display: flex; align-items: center; justify-content: center; }
.iot-board .iot-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: color-mix(in oklab, var(--accent) 80%, #fff); }
.iot-board .iot-pin { position: absolute; bottom: -4px; width: 3px; height: 8px; background: var(--muted); }
.iot-board .iot-pin:nth-child(2) { left: 30%; } .iot-board .iot-pin:nth-child(3) { left: 50%; } .iot-board .iot-pin:nth-child(4) { left: 70%; }
.iot-board .iot-led { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.4s infinite; }
.iot-waves { display: flex; gap: 6px; }
.iot-waves i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .3; animation: iotWave 1.4s ease-in-out infinite; }
.iot-waves i:nth-child(2) { animation-delay: .2s; } .iot-waves i:nth-child(3) { animation-delay: .4s; }
@keyframes iotWave { 50% { opacity: 1; transform: translateY(-4px); } }
.iot-devices { display: flex; gap: 16px; font-size: 22px; }

/* Web visual */
.cap-visual.web { display: flex; align-items: center; justify-content: center; }
.web-win { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #0e1015; display: flex; flex-direction: column; }
.web-bar { display: flex; gap: 5px; padding: 8px 10px; background: #1b1e26; } .web-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3f4a; }
.web-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.web-front { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-right: 1px dashed var(--line); }
.web-front .ln { height: 9px; border-radius: 4px; background: #1c2029; } .web-front .ln.w70 { width: 70%; } .web-front .ln.w50 { width: 50%; }
.web-front .web-btn { width: 50%; height: 18px; border-radius: 5px; background: var(--accent); margin-top: 4px; }
.web-back { padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.web-back .code { font-family: var(--font-mono); font-size: 11px; color: var(--accent); opacity: .85; }
.web-back .code.c2 { color: var(--accent-2); } .web-back .code.c3 { color: var(--muted); }

/* ============ BOOT SEQUENCE ============ */
.boot { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .7s ease, transform .7s ease; overflow: hidden; }
.boot.closing { opacity: 0; transform: scale(1.04); pointer-events: none; }
.boot-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklab, var(--accent) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--accent) 10%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%); opacity: .5; animation: bootGrid 8s linear infinite; }
@keyframes bootGrid { to { background-position: 48px 48px; } }
.boot-inner { position: relative; z-index: 2; width: min(92vw, 520px); }
.boot-brand { font-family: var(--font-display); font-style: italic; font-size: clamp(34px, 5vw, 56px); display: flex; align-items: center; gap: 16px; letter-spacing: -.02em; }
.boot-brand .boot-thin { font-family: var(--font-mono); font-style: normal; font-size: 13px; letter-spacing: .3em; color: var(--accent); align-self: center; }
.boot-brand .boot-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); animation: blink 1.2s infinite; }
.boot-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 10px 0 30px; }
.boot-log { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.boot-line { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.boot-line.in { opacity: 1; transform: none; }
.boot-line .bl-t { color: color-mix(in oklab, var(--fg) 75%, transparent); }
.boot-line .bl-dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-3px); }
.boot-line .bl-v { color: var(--accent); }
.boot-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 22px; }
.boot-bar i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.boot-enter { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); padding: 14px 22px; border-radius: 100px; transition: background .3s, color .3s, border-color .3s; }
.boot-enter:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.boot-skip { position: absolute; bottom: 28px; right: 32px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: none; }
.boot-skip:hover { color: var(--fg); }

/* ============ LIVE HUD ============ */
.hud { position: fixed; left: 4vw; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 18px; padding: 11px 18px; border-radius: 100px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.4); font-family: var(--font-mono); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.hud.shown { opacity: 1; transform: none; pointer-events: auto; }
.hud-live { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em; color: var(--accent); white-space: nowrap; }
.hud-led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.3s infinite; }
.hud-sep { width: 1px; height: 22px; background: var(--line); }
.hud-stat { display: flex; flex-direction: column; gap: 2px; }
.hud-stat .hud-l { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hud-stat .hud-v { font-size: 13px; color: var(--fg); font-variant-numeric: tabular-nums; }
.hud-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 70px; }
.hud-spark span { flex: 1; min-height: 2px; background: color-mix(in oklab, var(--accent) 70%, transparent); border-radius: 1px; transition: height .5s ease; }
@media (max-width: 1180px) {
  /* compact HUD: a slim live pill, centred at the bottom */
  .hud { display: flex; left: 50%; right: auto; bottom: 14px; gap: 11px; padding: 8px 15px; transform: translateX(-50%) translateY(16px); }
  .hud.shown { transform: translateX(-50%); }
  .hud-sep, .hud-stat { display: none; }
  .hud-stat.hud-keep { display: flex; }
  .hud-stat.hud-keep .hud-l { font-size: 7.5px; }
  .hud-stat.hud-keep .hud-v { font-size: 12px; }
  .hud-live { font-size: 9px; }
  .hud-spark { width: 44px; height: 16px; }
}
@media (max-width: 540px) { .hud-spark { display: none; } }

/* ============ FUNNEL RAIL ============ */
.rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.rail-stage { text-align: right; }
.rail-stage .rail-stage-k { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rail-stage .rail-stage-v { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--accent); }
.rail-track { position: relative; display: flex; flex-direction: column; gap: 14px; padding-right: 5px; }
.rail-track::before { content: ""; position: absolute; right: 8px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.rail-fill { position: absolute; right: 8px; top: 4px; width: 1px; background: var(--accent); box-shadow: 0 0 6px var(--accent); transition: height .2s ease; }
.rail-tick { display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: relative; }
.rail-tick .rail-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s, color .3s; }
.rail-tick:hover .rail-label, .rail-tick.on .rail-label { opacity: 1; transform: none; }
.rail-tick.on .rail-label { color: var(--fg); }
.rail-tick .rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--muted); transition: all .3s; z-index: 2; }
.rail-tick.past .rail-dot { background: var(--accent); border-color: var(--accent); }
.rail-tick.on .rail-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); transform: scale(1.15); }
.rail-hbar { display: none; }
@media (max-width: 1180px) {
  /* compact rail: a slim top progress bar instead of the side rail */
  .rail { top: 0; right: 0; left: 0; bottom: auto; transform: none; pointer-events: none; display: block; }
  .rail-stage, .rail-track { display: none; }
  .rail-hbar { display: block; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: color-mix(in oklab, var(--fg) 9%, transparent); z-index: 95; }
  .rail-hbar i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: width .15s ease; }
}
.rtb .stage { position: relative; z-index: 2; }
.auction { border: 1px solid var(--line); border-radius: 16px; background: color-mix(in oklab, var(--bg-2) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.auction .head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.auction .head .live { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.auction .head .live .led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.3s infinite; }
.auction .grid { display: grid; grid-template-columns: 1fr 1px 1.2fr; }
.auction .col { padding: 22px 24px; }
.auction .vline { background: var(--line); }
.bidrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.bidrow:last-child { border-bottom: 0; }
.bidrow .dsp { font-size: 13px; }
.bidrow .meter { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bidrow .meter i { display: block; height: 100%; background: var(--accent); width: 0; }
.rtb.play .bidrow .meter i { animation: bidGrow 2.2s cubic-bezier(.3,.8,.3,1) infinite alternate; }
@keyframes bidGrow { from { width: 12%; } to { width: var(--w, 70%); } }
.bidrow .bid { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.bidrow.win { color: var(--accent); }
.bidrow.win .bid { font-weight: 600; }
.auction .winner { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.auction .winner .big { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 76px); line-height: 1; color: var(--accent); }
.auction .winner .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auction .winner .imp { aspect-ratio: 21/9; border-radius: 10px; margin-top: 8px; background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 24%, var(--bg-2)), var(--bg-2)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ====== CTV — cinematic living room ====== */
.ctv { background: radial-gradient(ellipse 120% 90% at 50% 26%, color-mix(in oklab, var(--accent) 10%, var(--bg)), var(--bg) 72%); }
.room { position: relative; max-width: 1120px; margin: 0 auto; height: 70vh; min-height: 560px; z-index: 2; perspective: 1800px; }
.room .wall-glow { position: absolute; inset: 2% 16% 36%; border-radius: 30px; background: radial-gradient(ellipse at 50% 45%, color-mix(in oklab, var(--accent) 75%, transparent), transparent 70%); filter: blur(80px); opacity: .45; z-index: 0; }
.room .plant { position: absolute; right: 5%; bottom: 16%; width: 60px; height: 30%; z-index: 3; display: flex; justify-content: center; align-items: flex-end; }
.room .plant i { position: absolute; bottom: 0; width: 8px; height: 100%; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 40%, #0a1410), #0a1410); border-radius: 60% 40% 50% 50% / 90% 90% 10% 10%; transform-origin: bottom; }
.room .plant i:nth-child(1){ transform: rotate(-18deg); height: 86%; } .room .plant i:nth-child(2){ transform: rotate(2deg); } .room .plant i:nth-child(3){ transform: rotate(16deg); height: 80%; }
.room .plant::after { content:""; position:absolute; bottom:-6px; width:46px; height:30px; background: linear-gradient(180deg,#1a1d24,#0a0c12); border-radius: 4px 4px 8px 8px; }

.tvunit { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); width: min(76%, 800px); z-index: 2; }
.tvset { position: relative; }
.tvset .bezel { background: linear-gradient(180deg,#0b0c10,#040506); border-radius: 12px; padding: 10px; box-shadow: 0 60px 130px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); }
.tvset .screen { position: relative; aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; background: #0a0e16; }
.ad-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 5%; }
.ad-grad { position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 58% at 26% 24%, rgba(247,214,165,.28), transparent 56%),
  radial-gradient(ellipse 95% 95% at 86% 92%, color-mix(in oklab, var(--accent) 58%, transparent), transparent 62%),
  linear-gradient(158deg, #1c1828 0%, #0b0f18 60%); }
.ad-top, .ad-mid, .ad-foot { position: relative; z-index: 2; }
.ad-top { display: flex; justify-content: space-between; align-items: center; }
.ad-top .badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.5); color: #fff; padding: 4px 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); }
.ad-top .skip { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); }
.ad-mid .ad-kicker { font-family: var(--font-mono); font-size: clamp(10px,1.1vw,13px); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ad-mid .ad-ttl { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.6vw, 60px); line-height: .98; color: #fff; max-width: 16ch; }
.ad-mid .ad-ttl em { color: var(--accent); }
.ad-foot { display: flex; align-items: center; gap: 16px; }
.ad-foot .ad-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; letter-spacing: .18em; font-size: clamp(12px,1.4vw,18px); color: #fff; }
.ad-foot .ad-brand .logo-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.ad-foot .qr { width: clamp(40px,5vw,62px); aspect-ratio: 1; margin-left: auto; border-radius: 6px; background: #fff; background-image: repeating-linear-gradient(0deg,#0a0e16 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg,#0a0e16 0 3px,transparent 3px 6px); background-size: 100% 100%; padding: 4px; }
.ad-foot .ad-cta { font-family: var(--font-mono); font-size: clamp(9px,1vw,11px); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.scanlines { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.08) 2px 3px), radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.07), transparent 60%); }
.prog-tv { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; z-index: 4; }
.prog-tv i { display: block; height: 100%; width: 0; background: var(--accent); }
.ctv.play .prog-tv i { animation: prog 12s linear infinite; }
@keyframes prog { to { width: 100%; } }
.tvset .stand { width: 22%; height: 18px; margin: -1px auto 0; background: linear-gradient(180deg,#0b0c10,#040506); border-radius: 0 0 10px 10px; }
.tvset .stand::after { content:""; display:block; width:160%; height:6px; margin:6px auto 0; margin-left:-30%; background:#070809; border-radius:100px; }
.tvset .reflection { position: absolute; left: 6%; right: 6%; top: 100%; height: 40%; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%); filter: blur(14px); opacity: .25; transform: scaleY(-1); border-radius: 6px; }
.room .console { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); width: 60%; height: 5%; background: linear-gradient(180deg, color-mix(in oklab,var(--fg) 6%, var(--bg)), var(--bg)); border: 1px solid var(--line); border-radius: 6px; z-index: 2; }
.room .sofa { position: absolute; left: 50%; bottom: -5%; transform: translateX(-50%); width: 92%; height: 28%; border-radius: 90px 90px 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--fg) 8%, var(--bg)), var(--bg)); border: 1px solid var(--line); border-bottom: 0; z-index: 5; box-shadow: 0 -16px 70px rgba(0,0,0,.6); }
.room .sofa .cushion { position: absolute; top: 22%; width: 26%; height: 60%; border-radius: 40px 40px 20px 20px; background: color-mix(in oklab, var(--fg) 5%, var(--bg)); border: 1px solid var(--line); }
.room .sofa .cushion:nth-child(1){ left: 14%; } .room .sofa .cushion:nth-child(2){ right: 14%; }
.room .sofa .remote { position: absolute; top: 12%; left: 46%; width: 16px; height: 44px; border-radius: 8px; background: linear-gradient(180deg,#22262f,#0c0e13); border: 1px solid var(--line); transform: rotate(18deg); }
.ctv-platforms { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 5vh; position: relative; z-index: 3; }
.ctv-platforms .pf { font-family: var(--font-display); font-style: italic; font-size: clamp(18px,2vw,28px); color: color-mix(in oklab, var(--fg) 45%, transparent); transition: color .3s; }
.ctv-platforms .pf:hover { color: var(--accent); }
.ctv .metrics-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 3vh; position: relative; z-index: 3; }

/* ====== Audio — vinyl + mirrored waveform ====== */
.audio { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.wave-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 5vw; align-items: center; }
.player { border: 1px solid var(--line); border-radius: 20px; background: color-mix(in oklab, var(--bg-2) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 30px; box-shadow: 0 40px 110px rgba(0,0,0,.45); }
.player .row { display: flex; align-items: center; gap: 18px; }
.player .vinyl { width: 76px; height: 76px; border-radius: 50%; flex: none; position: relative; background: repeating-radial-gradient(circle at 50% 50%, #15171d 0 2px, #0c0e12 2px 4px); box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: spin 4s linear infinite; }
.player .vinyl .label { position: absolute; inset: 28%; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.player .vinyl .hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--bg); }
.player .meta { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.player .meta .t { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.05; color: var(--fg); white-space: nowrap; }
.player .meta .s { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.player .wave { position: relative; display: flex; align-items: center; gap: 2px; height: 96px; margin: 26px 0 14px; }
.player .wave span { flex: 1; align-self: center; height: var(--h, 40%); border-radius: 100px; background: color-mix(in oklab, var(--fg) 22%, transparent); transform-origin: center; }
.player .wave span.on { background: var(--accent); }
.audio.play .player .wave span { animation: wpulse 1.4s ease-in-out infinite alternate; }
@keyframes wpulse { from { transform: scaleY(.7); } to { transform: scaleY(1.08); } }
.player .wave .playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--fg); box-shadow: 0 0 10px var(--fg); }
.player .wave .playhead::after { content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background: var(--fg); }
.player .controls { display: flex; align-items: center; gap: 14px; }
.player .controls .time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.player .controls .time.r { margin-left: auto; }
.player .play-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.player .play-btn::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%); border-left: 13px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.player .audio-pf { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.player .audio-pf .pf { font-family: var(--font-display); font-style: italic; font-size: 22px; color: color-mix(in oklab, var(--fg) 45%, transparent); transition: color .3s; }
.player .audio-pf .pf:hover { color: var(--accent); }
.audio-side .audio-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3vw, 46px); line-height: 1.12; max-width: 18ch; }
.audio-side .audio-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ====== DOOH — the city as media ====== */
.dooh { padding: 20vh 6vw 14vh; position: relative; overflow: hidden; background: linear-gradient(180deg, #05060b 0%, color-mix(in oklab, var(--accent) 9%, #070a12) 50%, #04050a 100%); }
.dooh .sky { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 45% at 72% 14%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%); }
.dooh .stars { position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: radial-gradient(1px 1px at 20% 24%, #fff, transparent), radial-gradient(1px 1px at 60% 16%, #fff, transparent), radial-gradient(1px 1px at 80% 30%, #fff, transparent), radial-gradient(1px 1px at 35% 12%, #fff, transparent), radial-gradient(1px 1px at 48% 26%, #fff, transparent); }
.dooh .skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 1; display: flex; align-items: flex-end; gap: 1.2%; padding: 0 3%; opacity: .8; }
.dooh .skyline .b { flex: 1; position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--fg) 7%, #060810), #05060b); border-top: 1px solid var(--line); }
.dooh .skyline .b .lit { position: absolute; top: 18%; left: 30%; width: 16%; height: 8%; background: color-mix(in oklab, var(--accent) 80%, transparent); box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent); }
.dooh .doohhead { position: relative; z-index: 6; }

.ooh-gallery { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8vh; align-items: end; }
.ooh-card .scene { position: relative; aspect-ratio: 3/3.6; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.ooh-cap { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ooh-cap b { color: var(--fg); font-weight: 500; }
.ooh-card .pk { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.ooh-card .ph { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 26px); line-height: 1; letter-spacing: -.01em; }
.ooh-card .ph em { font-style: italic; }
.ooh-card .pf2 { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

/* metro station */
.metro-scene .scene { background: linear-gradient(180deg, #0c1016 0%, #070a0e 100%); }
.metro-scene .tiles { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; }
.metro-scene .train { position: absolute; left: -10%; right: -10%; top: 8%; height: 30%; background: linear-gradient(180deg, #1a1f29, #0c0f15); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.metro-scene .train::before { content:""; position:absolute; top:30%; left:0; right:0; height:24%; background: repeating-linear-gradient(90deg, color-mix(in oklab,var(--accent) 40%,#0c0f15) 0 18px, transparent 18px 44px); opacity:.8; filter: blur(.5px); }
.metro-scene .platform-line { position: absolute; left: 0; right: 0; bottom: 14%; height: 4px; background: var(--accent); opacity: .7; box-shadow: 0 0 14px var(--accent); }
.metro-scene .poster { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); width: 56%; aspect-ratio: 2/3; border-radius: 3px; background: var(--accent); color: #08080a; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.metro-scene .poster.light { box-shadow: 0 0 50px color-mix(in oklab, var(--accent) 55%, transparent), 0 14px 30px rgba(0,0,0,.5); }
.metro-scene .poster .ph { margin: auto 0; }
.metro-scene .commuter { position: absolute; bottom: 6%; width: 22px; height: 22%; background: #02040799; border-radius: 30px 30px 0 0; z-index: 3; filter: blur(.4px); }
.metro-scene .commuter.c1 { left: 12%; height: 26%; } .metro-scene .commuter.c2 { right: 14%; height: 22%; }

/* bus shelter / mUPI */
.shelter-scene .scene { background: linear-gradient(180deg, #0a0d14 0%, #06080d 60%, #04050a 100%); }
.shelter-scene .sidewalk { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #0d1017, #060709); border-top: 1px solid var(--line); }
.shelter-scene .sidewalk::before { content:""; position:absolute; top:30%; left:0; right:0; height:1px; background: var(--line); }
.shelter-scene .shelter { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); width: 78%; display: flex; align-items: flex-end; gap: 8px; }
.shelter-scene .shelter-roof { position: absolute; top: 6%; left: -6%; right: -6%; height: 8px; background: linear-gradient(180deg,#262b34,#0c0f15); border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.shelter-scene .mupi { position: relative; width: 52%; aspect-ratio: 2/3.2; background: var(--accent-2); color: #08080a; border-radius: 3px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 0 46px color-mix(in oklab, var(--accent-2) 50%, transparent), 0 14px 30px rgba(0,0,0,.5); overflow: hidden; }
.shelter-scene .mupi .ph { margin: auto 0; }
.shelter-scene .mupi-sheen { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%); mix-blend-mode: overlay; }
.shelter-scene .bench { width: 38%; height: 10px; align-self: flex-end; margin-bottom: 6%; background: linear-gradient(180deg,#1a1e27,#0c0f15); border-radius: 3px; }
.shelter-scene .passer { position: absolute; bottom: 8%; width: 22px; height: 22%; background: #01020466; border-radius: 30px 30px 0 0; z-index: 4; }
.shelter-scene .passer.p1 { left: 10%; height: 26%; } .shelter-scene .passer.p2 { right: 12%; height: 20%; }

/* rooftop billboard */
.board-scene .scene { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, #070a12) 0%, #06080d 70%, #04050a 100%); }
.board-scene .rooftops { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: repeating-linear-gradient(90deg, #0a0d13 0 30px, #070a0f 30px 34px, #0a0d13 34px 70px); border-top: 1px solid var(--line); }
.board-scene .big-board { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 76%; }
.board-scene .board-face { position: relative; aspect-ratio: 4/3; background: var(--accent); color: #08080a; border-radius: 4px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; transform: perspective(600px) rotateY(-9deg); box-shadow: 0 0 80px color-mix(in oklab, var(--accent) 50%, transparent), 0 30px 50px rgba(0,0,0,.55); overflow: hidden; }
.board-scene .board-face .ph { margin-top: auto; }
.board-scene .board-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); mix-blend-mode: overlay; }
.board-scene .board-legs { display: flex; justify-content: space-around; padding: 0 18%; }
.board-scene .board-legs i { width: 7px; height: 70px; background: linear-gradient(180deg,#1a1e27,#0a0c11); }

.dooh .doohfoot { position: relative; z-index: 8; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8vh; }

/* ---------- IMPACT numbers ---------- */
.impact { padding: 22vh 6vw; position: relative; z-index: 1; }
.impact-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8vh; }
.impact-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 96px); letter-spacing: -.02em; line-height: 1; max-width: 18ch; }
.impact-head h2 em { font-style: italic; color: var(--accent); margin-left: .18em; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.impact-grid .stat { padding: 46px 30px 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.impact-grid .stat .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 44px; }
.impact-grid .stat .value { font-family: var(--font-display); font-weight: 400; font-size: clamp(54px, 6.6vw, 104px); line-height: 1; letter-spacing: -.03em; }
.impact-grid .stat .value sup { font-size: .34em; vertical-align: top; margin-left: 4px; color: var(--accent); font-style: italic; }
.impact-grid .stat .caption { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 28ch; line-height: 1.5; }

/* ---------- capability band (IA / IT) ---------- */
.band { padding: 16vh 6vw; background: var(--bg-2); position: relative; z-index: 1; }
.band-head { margin-bottom: 6vh; }
.band-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.4vw, 92px); letter-spacing: -.02em; line-height: .95; }
.band-head h2 em { font-style: italic; color: var(--accent); margin-left: .18em; }
.band-sub { margin-top: 22px; font-size: 16px; line-height: 1.6; color: color-mix(in oklab, var(--fg) 86%, transparent); max-width: 56ch; }
.band-sub .k { color: var(--accent); }
.cap-list { border-top: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: 80px 1fr 1.4fr 60px; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .35s, color .35s; }
.cap:hover { padding: 38px 0; color: var(--accent); }
.cap .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cap .nm { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3.4vw, 52px); line-height: 1; }
.cap .ds { font-size: 14px; color: var(--muted); max-width: 50ch; line-height: 1.55; }
.cap .ar { text-align: right; font-family: var(--font-display); font-size: 28px; color: var(--muted); transition: transform .35s, color .35s; }
.cap:hover .ar { color: var(--accent); transform: translateX(8px) rotate(-45deg); }

/* ---------- marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; overflow: hidden; white-space: nowrap; position: relative; z-index: 1; }
.marquee-track { display: inline-flex; gap: 56px; animation: marquee 36s linear infinite; font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3.4vw, 54px); letter-spacing: -.02em; }
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- contact ---------- */
.contact { padding: 26vh 6vw 12vh; position: relative; z-index: 1; }
.contact-eyebrow { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 28px; margin-bottom: 7vh; }
.contact h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 150px); line-height: .96; letter-spacing: -.04em; max-width: 16ch; }
.contact-h em { display: block; }
.contact h2 em { font-style: italic; color: var(--accent); }
.contact-mail { display: inline-block; margin-top: 5vh; font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 4vw, 60px); letter-spacing: -.02em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.contact-mail .ar { margin-left: 12px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 12vh; padding-top: 40px; border-top: 1px solid var(--line); }
.contact-grid h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 16px; }
.contact-grid p, .contact-grid a { font-size: 14px; line-height: 1.6; display: block; }
.contact-grid a { transition: color .25s; }
.contact-grid a:hover { color: var(--accent); }
.footer { padding: 28px 4vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; background: var(--bg); }

/* ---------- reveal / parallax ---------- */
.surface, .impact, .band, .contact { transition: none; }
main > section.enter { animation: sectionIn 1s cubic-bezier(.22,.7,.2,1) both; }
@keyframes sectionIn { from { opacity: 0.4; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 1; transform: none; }
.reveal.play { animation: revealIn .95s cubic-bezier(.22,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes revealIn { from { opacity: 0; transform: translateY(28px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.split-line { display: inline; }
.split-line .word { display: inline-block; transform: translateY(0); will-change: transform, filter, opacity; }
.split-line.play .word { animation: wordRise .95s cubic-bezier(.22,.72,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes wordRise { from { opacity: 0; transform: translateY(.4em); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.play, .split-line .word, .split-line.play .word,
  .hero-name .line .char, .hero-name.anim-in .line .char {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}
[data-parallax] { will-change: transform; }

/* ---------- ACT DIVIDER (compact chapter band) ---------- */
.act-divider { position: relative; min-height: 42vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 7vh 6vw; overflow: hidden; }
.act-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-size: clamp(180px, 30vw, 420px); line-height: .7; letter-spacing: -.04em; color: color-mix(in oklab, var(--accent) 6%, transparent); pointer-events: none; user-select: none; z-index: 0; }
/* chapter "curtain" rules that wipe in on entrance */
.act-rule { position: absolute; left: 8vw; right: 8vw; height: 1px; transform: scaleX(0); opacity: 0; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 60%, transparent), transparent); z-index: 1; }
.act-rule.top { top: 5.5vh; } .act-rule.bot { bottom: 5.5vh; }
.act-divider.enter .act-rule { animation: ruleWipe 1s cubic-bezier(.2,.7,.2,1) both; }
.act-divider.enter .act-rule.bot { animation-delay: .09s; }
@keyframes ruleWipe { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.act-divider.enter .act-watermark { animation: wmIn 1.5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wmIn { from { opacity: 0; transform: translate(-50%, -50%) scale(1.16); filter: blur(16px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
.act-inner { position: relative; z-index: 2; max-width: 64ch; display: flex; flex-direction: column; align-items: center; }
.act-num { display: none; }
.act-kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.act-kicker .act-line { width: 30px; height: 1px; background: currentColor; opacity: .6; }
/* exactly two lines: statement + accent answer */
.act-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.4vw, 90px); line-height: .98; letter-spacing: -.03em; display: flex; flex-direction: column; align-items: center; gap: .02em; }
.act-title .act-l1, .act-title .act-l2 { display: block; white-space: nowrap; }
.act-title em, .act-title .act-l2 { font-style: italic; color: var(--accent); }
.act-sub { margin-top: 15px; font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--fg) 80%, transparent); max-width: 44ch; text-wrap: pretty; }
.act-scroll { display: none; }
@media (max-width: 640px) { .act-title .act-l1, .act-title .act-l2 { white-space: normal; } }

/* ---------- PROJETS (interactive accordion) ---------- */
.proj-list { border-top: 1px solid var(--line); }
.proj-row { border-bottom: 1px solid var(--line); position: relative; }
.proj-bar { display: grid; grid-template-columns: 70px 1fr 1.1fr 64px 30px; gap: 24px; align-items: center; width: 100%; text-align: left; padding: 26px 0; cursor: none; transition: padding .45s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.proj-row:hover .proj-bar, .proj-row.open .proj-bar { padding: 34px 0; background: color-mix(in oklab, var(--accent) 4%, transparent); }
.proj-n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); align-self: start; padding-top: 6px; }
.proj-main { display: flex; flex-direction: column; }
.proj-t { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.05; transition: color .35s; }
.proj-row:hover .proj-t, .proj-row.open .proj-t { color: var(--accent); }
.proj-d { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 52ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, margin-top .4s ease; }
.proj-row:hover .proj-d { max-height: 80px; opacity: 1; margin-top: 10px; }
.proj-row.open .proj-d { max-height: 0 !important; opacity: 0 !important; margin-top: 0 !important; }
.proj-tags { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); align-self: start; padding-top: 8px; }
.proj-y { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; align-self: start; padding-top: 8px; }
.proj-ar { font-family: var(--font-display); font-size: 24px; color: var(--muted); text-align: right; align-self: start; padding-top: 4px; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .35s; }
.proj-row:hover .proj-ar { color: var(--accent); transform: translate(6px, -6px); }
.proj-row.open .proj-bar .proj-ar { color: var(--accent); transform: rotate(45deg); }
/* collapsible detail panel — robust max-height (no fragile 0fr/1fr) */
.proj-panel { max-height: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.2,.7,.2,1); }
.proj-row.open .proj-panel { max-height: 960px; }
.proj-panel-in { overflow: hidden; }
.proj-panel-pad { padding: 4px 0 34px 94px; max-width: 86ch; opacity: 0; transform: translateY(10px); transition: opacity .45s ease .08s, transform .45s cubic-bezier(.2,.7,.2,1) .08s; }
.proj-row.open .proj-panel-pad { opacity: 1; transform: translateY(0); }
.proj-full { font-size: 15px; line-height: 1.6; color: color-mix(in oklab, var(--fg) 84%, transparent); max-width: 60ch; text-wrap: pretty; }
.proj-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.proj-metric { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in oklab, var(--fg) 2.5%, transparent); }
.proj-metric b { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1; color: var(--accent); }
.proj-metric span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proj-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.proj-stack { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.proj-cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: 100px; transition: background .3s, color .3s; }
.proj-cta:hover { background: var(--accent); color: var(--bg); }
.proj-cta .ar { transition: transform .3s; }
.proj-cta:hover .ar { transform: translateX(4px); }

/* ---------- PARCOURS ---------- */
.cv-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 5vw; }
.cv-item.reveal { opacity: 1; transform: none; }
.cv-item.reveal.play { animation: revealIn .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d,0s); }
.cv-col-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cv-timeline { display: flex; flex-direction: column; gap: 34px; }
.cv-item { display: grid; grid-template-columns: 110px 1fr; gap: 20px; position: relative; }
.cv-d { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 3px; }
.cv-body { position: relative; padding-left: 22px; border-left: 1px solid var(--line); }
.cv-body::before { content: ""; position: absolute; left: -4.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent); }
.cv-r { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; }
.cv-o { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin: 6px 0 12px; }
.cv-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cv-pts { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cv-pts li { font-size: 13.5px; line-height: 1.5; color: color-mix(in oklab, var(--fg) 88%, transparent); padding-left: 16px; position: relative; }
.cv-pts li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.cv-k { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); padding: 6px 12px; border-radius: 100px; }
.cv-timeline.edu .cv-r { font-size: clamp(17px, 1.8vw, 23px); }

/* ---------- À PROPOS ---------- */
.apropos-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5vw; align-items: start; }
.apropos-bio p { font-size: 16px; line-height: 1.65; color: color-mix(in oklab, var(--fg) 90%, transparent); max-width: 52ch; }
.apropos-bio .bio-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; color: var(--fg); max-width: none; margin-bottom: 18px; }
.apropos-bio blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--accent); color: var(--fg); }
.diff-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
.diff { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; transition: border-color .35s, transform .35s; }
.diff:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateX(4px); }
.diff-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.diff-t { font-family: var(--font-display); font-style: italic; font-size: 22px; margin: 4px 0 8px; }
.diff p { font-size: 13.5px; line-height: 1.55; color: color-mix(in oklab, var(--fg) 82%, transparent); max-width: none; }
.apropos-skills { position: relative; }
.skills-list { display: flex; flex-direction: column; gap: 18px; }
.skill .skill-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; margin-bottom: 8px; }
.skill .skill-v { color: var(--accent); }
.skill-track { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.skill-track i { display: block; height: 100%; width: var(--v, 0%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width 1.2s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent); }
.stack-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: color-mix(in oklab, var(--fg) 72%, transparent); border: 1px solid var(--line); padding: 7px 12px; border-radius: 100px; transition: color .25s, border-color .25s; }
.stack-chip:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.lang-row { display: flex; gap: 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.lang-row .lang { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.lang-row .lang b { color: var(--accent); font-weight: 500; margin-right: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .surface-head, .wave-wrap, .impact-grid, .contact-grid, .dco-grid, .cv-grid, .apropos-grid { grid-template-columns: 1fr !important; }
  .cv-grid, .apropos-grid { gap: 8vh; }
  .impact-grid { grid-template-columns: 1fr 1fr !important; }
  .cap-cards { grid-template-columns: 1fr !important; max-width: 520px; }
  .sea-yt { grid-template-columns: 1fr !important; }
  .yt-suggest { display: none; }
  .ctx-devices { grid-template-columns: 1fr 1fr !important; }
  .ctx-mobile { display: none; }
  .surface-desc { justify-self: start; }
  .nav ul { display: none; }
  .room { height: 52vh; }
  .ooh-gallery { grid-template-columns: 1fr 1fr; gap: 18px; }
  .laptop, .tablet, .phone { transform: none; }
  .dco-side { max-width: 420px; margin: 0 auto; }
  .dco-radar { max-width: 460px; }
  .cap { grid-template-columns: 50px 1fr 40px; }
  .cap .ds { display: none; }
}
@media (max-width: 620px) {
  section.surface, .impact, .band, .contact { padding-left: 5vw; padding-right: 5vw; }
  .impact-grid { grid-template-columns: 1fr !important; }
  .auction .grid { grid-template-columns: 1fr; }
  .auction .vline { display: none; }
  .ctx-devices { grid-template-columns: 1fr !important; }
  .ctx-tablet { display: none; }
  .sma .devices { gap: 26px; row-gap: 70px; }
  .laptop, .tablet { width: min(82vw, 360px); }
  .phone { width: min(64vw, 240px); }
  .sea-tabs { overflow-x: auto; }
  .pmax-grid { grid-template-columns: 1fr 1fr; }
  .dco-scale { gap: 4px; flex-wrap: wrap; }
  .dco-scale-b { padding: 8px 11px; font-size: 10px; }
  .dco-radar { max-width: 100%; }
  .dco-legend { font-size: 8px; gap: 8px; }
  .dco-legend .arrow { margin-left: 0; width: 100%; }
  .dco-footfall .ff-top { flex-wrap: wrap; gap: 12px; }
  .dco-footfall .ff-spark { width: 100%; flex: none; }
  .ooh-gallery { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .footer { flex-direction: column; gap: 8px; text-align: center; }
  .hero-meta { flex-direction: column; gap: 14px; align-items: flex-start; }
  .hero-row { grid-template-columns: 1fr; gap: 22px; }
  .proj-bar { grid-template-columns: 44px 1fr 28px; gap: 12px; }
  .proj-tags, .proj-y { display: none; }
  .proj-panel-pad { padding-left: 0; padding-bottom: 26px; }
  .proj-row.open .proj-panel { max-height: 1300px; }
  .proj-metric b { font-size: 22px; }
  .cv-item { grid-template-columns: 84px 1fr; gap: 12px; }
}
/* fine phones — guard against overflow on the biggest type */
@media (max-width: 430px) {
  .hero-name { font-size: clamp(58px, 19vw, 92px); }
  .act-title { font-size: clamp(36px, 13vw, 60px); }
  .act-watermark { font-size: clamp(200px, 70vw, 320px); }
  .surface-title, .contact h2 { font-size: clamp(38px, 13vw, 64px); }
  .ghost-word { font-size: clamp(120px, 44vw, 240px); }
  .lang-row { flex-wrap: wrap; gap: 12px; }
  .hero-sub { gap: 6px 8px; }
  .hero-sub .chip { font-size: 11px; padding: 6px 11px; }
  .cv-item { grid-template-columns: 64px 1fr; gap: 10px; }
  .stack-chip { font-size: 10px; padding: 6px 10px; }
}

/* ============================================================
   v3 ADDITIONS — light theme · case-study charts · simulator ·
   trust strip · floating CTA · availability · cursor zones
   ============================================================ */

/* ---------- LIGHT THEME (literal vars on html AND body so background resolves) ---------- */
html[data-theme="light"]:has(body.palette-nocturne), html[data-theme="light"] body.palette-nocturne { --bg:#eef1f6; --bg-2:#e3e8f1; --fg:#10131c; --muted:#5a6376; --line:rgba(16,19,28,.12); --glass:rgba(16,19,28,.025); }
html[data-theme="light"]:has(body.palette-sodium),   html[data-theme="light"] body.palette-sodium   { --bg:#f6efe7; --bg-2:#efe5da; --fg:#1c1510; --muted:#7a6a58; --line:rgba(28,21,16,.12); --glass:rgba(28,21,16,.025); }
html[data-theme="light"]:has(body.palette-veronese), html[data-theme="light"] body.palette-veronese { --bg:#e9f1ec; --bg-2:#dde9e1; --fg:#0e1712; --muted:#566b5e; --line:rgba(14,23,18,.12); --glass:rgba(14,23,18,.025); }
html[data-theme="light"] *::selection { color: #fff; }
/* light mode: soften grain + glass blur (no 3D backdrop anymore) */
html[data-theme="light"] #grain, html[data-theme="light"] body::after { opacity: .35; mix-blend-mode: multiply; }
html[data-theme="light"] .glass, html[data-theme="light"] .twk-panel { backdrop-filter: blur(14px); }

/* ---------- CASE-STUDY PANEL (enriched project detail) ---------- */
.cs { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px 38px; align-items: start; }
.cs-story { display: flex; flex-direction: column; gap: 16px; }
.cs-step { display: grid; grid-template-columns: 18px 1fr; gap: 13px; align-items: start; }
.cs-step .cs-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.cs-step .cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 6px auto 0; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.cs-step .cs-x { font-size: 14.5px; line-height: 1.55; color: color-mix(in oklab, var(--fg) 86%, transparent); }
.cs-step .cs-x b { color: var(--fg); font-weight: 500; }
.cs-side { display: flex; flex-direction: column; gap: 16px; }
.cs-chart-card { border: 1px solid var(--line); border-radius: 16px; background: var(--glass); padding: 18px 18px 14px; }
.cs-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cs-chart-h .t { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cs-chart-h .delta { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); line-height: 1; }
.cs-spark { display: block; width: 100%; height: 84px; overflow: visible; }
.cs-spark .grid-l { stroke: var(--line); stroke-width: 1; }
.cs-spark .area { fill: url(#csg); opacity: 0; transition: opacity .8s ease .35s; }
.cs-spark .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.proj-row.open .cs-spark .line { transition: stroke-dashoffset 1.25s cubic-bezier(.3,.7,.2,1) .25s; stroke-dashoffset: 0; }
.proj-row.open .cs-spark .area { opacity: 1; }
.cs-spark .end-dot { fill: var(--accent); opacity: 0; transition: opacity .3s ease 1.4s; }
.proj-row.open .cs-spark .end-dot { opacity: 1; }
.cs-bars { display: flex; flex-direction: column; gap: 11px; }
.cs-bar-row { display: grid; grid-template-columns: 1fr; gap: 5px; }
.cs-bar-top { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cs-bar-top b { color: var(--fg); font-weight: 500; }
.cs-bar-track { height: 7px; border-radius: 4px; background: color-mix(in oklab, var(--fg) 8%, transparent); overflow: hidden; }
.cs-bar-track i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 60%, transparent), var(--accent)); transition: width 1.1s cubic-bezier(.2,.7,.2,1) .3s; }
.proj-row.open .cs-bar-track i { width: var(--w, 70%); }
@media (max-width: 820px) { .cs { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- TRUST STRIP — "Ils m'ont fait confiance" ---------- */
.trust { padding: 46px 6vw 8px; position: relative; z-index: 2; }
.trust-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 26px; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; max-width: 1100px; margin: 0 auto; }
.trust-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); transition: border-color .35s, transform .35s, background .35s; text-decoration: none; color: inherit; }
a.trust-logo { cursor: pointer; }
.trust-logo:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateY(-3px); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.trust-logo b { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1; color: var(--fg); }
.trust-logo span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- IMPACT BAND — les chiffres en avant ---------- */
.impact { padding: 40px 6vw 18px; position: relative; z-index: 2; }
.impact-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px 56px; align-items: center; }
.impact-ey { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.impact-big { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 14px; }
.impact-v { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(64px, 11vw, 124px); line-height: 0.86; letter-spacing: -0.02em; color: var(--accent); }
.impact-u { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); max-width: 30ch; }
.impact-note { font-size: 15px; line-height: 1.55; max-width: 42ch; color: color-mix(in oklab, var(--fg) 82%, transparent); }
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.impact-cell { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--bg); }
.impact-cell .ic-v { font-family: var(--font-display); font-style: italic; font-size: 36px; line-height: 1; color: var(--fg); }
.impact-cell .ic-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.impact-cell.hot { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); }
.impact-cell.hot .ic-v { color: var(--accent); }
.impact-cell.hot .ic-k { color: color-mix(in oklab, var(--accent) 70%, var(--fg)); }
@media (max-width: 820px) {
  .impact-wrap { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 460px) {
  .impact-grid { grid-template-columns: 1fr; }
}

/* ---------- MEDIA SIMULATOR ---------- */
.simu { position: relative; z-index: 2; padding: 9vh 6vw; }
.simu-demo-note { max-width: 1200px; margin: 0 auto 26px; }
.simu-wrap { max-width: 1200px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(180deg, var(--glass), transparent); padding: clamp(24px, 4vw, 52px); position: relative; overflow: hidden; }
.simu-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% -10%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%); pointer-events: none; }
.simu-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(26px, 4vw, 56px); align-items: center; position: relative; }
.simu-l .simu-ey { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.simu-l h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 14px; }
.simu-l h3 em { font-style: italic; color: var(--accent); }
.simu-l p { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.simu-budget { margin-top: 28px; }
.simu-budget-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.simu-budget-top .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.simu-budget-top .val { font-family: var(--font-display); font-style: italic; font-size: 34px; color: var(--fg); line-height: 1; }
.simu-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: color-mix(in oklab, var(--fg) 14%, transparent); outline: none; cursor: none; }
.simu-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent), 0 4px 16px color-mix(in oklab, var(--accent) 50%, transparent); cursor: none; }
.simu-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); cursor: none; }
.simu-obj { display: flex; gap: 8px; margin-top: 22px; }
.simu-obj button { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: none; transition: all .3s; }
.simu-obj button.on { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--fg); }
.simu-r { position: relative; }
.simu-mix { display: flex; flex-direction: column; gap: 13px; }
.simu-ch { display: grid; grid-template-columns: 96px 1fr 56px; gap: 14px; align-items: center; }
.simu-ch .nm { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); }
.simu-ch .nm small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: .04em; }
.simu-ch-track { height: 10px; border-radius: 6px; background: color-mix(in oklab, var(--fg) 7%, transparent); overflow: hidden; }
.simu-ch-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, transparent), var(--accent)); transition: width .6s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 35%, transparent); }
.simu-ch .pc { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; }
.simu-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.simu-kpi { display: flex; flex-direction: column; gap: 4px; }
.simu-kpi b { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3vw, 38px); color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.simu-kpi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.simu-note { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: .7; margin-top: 16px; letter-spacing: .03em; }
@media (max-width: 880px) { .simu-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- FLOATING CTA + AVAILABILITY ---------- */
.fab { position: fixed; right: 26px; bottom: 24px; z-index: 88; display: flex; align-items: center; gap: 11px; padding: 12px 18px 12px 16px; border-radius: 100px; border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent); background: color-mix(in oklab, var(--bg-2) 80%, transparent); backdrop-filter: blur(14px) saturate(1.2); color: var(--fg); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; text-decoration: none; box-shadow: 0 10px 40px rgba(0,0,0,.4); opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none; transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.fab.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab:hover { background: var(--accent); color: var(--bg); }
.fab .fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 0 0 rgba(70,211,154,.6); animation: fabPulse 2.4s infinite; flex-shrink: 0; }
.fab:hover .fab-dot { background: var(--bg); }
@keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(70,211,154,.5); } 70% { box-shadow: 0 0 0 9px rgba(70,211,154,0); } 100% { box-shadow: 0 0 0 0 rgba(70,211,154,0); } }
.fab .fab-ar { transition: transform .3s; }
.fab:hover .fab-ar { transform: translate(2px,-2px); }
@media (max-width: 760px) { .fab { right: 14px; bottom: 70px; padding: 10px 15px; font-size: 11px; } .fab .fab-txt { display: none; } }

/* availability card inside contact */
.avail { display: inline-flex; align-items: center; gap: 14px; padding: 13px 20px; border: 1px solid color-mix(in oklab, #46d39a 32%, transparent); border-radius: 100px; background: color-mix(in oklab, #46d39a 7%, transparent); margin-bottom: 30px; }
.avail .av-led { width: 9px; height: 9px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 0 0 rgba(70,211,154,.6); animation: fabPulse 2.4s infinite; }
.avail .av-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--fg); }
.avail .av-t b { color: #46d39a; font-weight: 500; }
.avail .av-sep { width: 1px; height: 16px; background: var(--line); }
.avail .av-s { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-line { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 100px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; transition: all .3s; }
.btn-line:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.btn-line.solid { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-line.solid:hover { background: color-mix(in oklab, var(--accent) 84%, var(--fg)); }

/* ---------- language toggle (nav) ---------- */
.lang-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }
.lang-toggle button { padding: 3px 5px; border-radius: 6px; opacity: .45; transition: opacity .25s, color .25s; cursor: none; }
.lang-toggle button.on { opacity: 1; color: var(--accent); }
.lang-toggle button:hover { opacity: 1; }
.lang-toggle .lt-sep { width: 1px; height: 11px; background: currentColor; opacity: .3; }

/* hero thesis: give it room so it stops wrapping every couple of words */
.hero-thesis { max-width: 34ch; text-wrap: balance; }
.hero-row p em { color: var(--accent); font-style: italic; }
.footer .footer-tag { text-align: center; max-width: 46ch; }

/* simulator — objective rationale ("pourquoi ce mix") */
.simu-why { margin-top: 22px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--accent) 5%, transparent); }
.simu-why-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.simu-why p { font-size: 13.5px; line-height: 1.6; color: color-mix(in oklab, var(--fg) 84%, transparent); text-wrap: pretty; }
.simu-ch .nm small { transition: opacity .3s ease; }

/* ---------- responsiveness hardening ---------- */
@media (max-width: 760px) {
  .nav .meta { gap: 11px; }
  .nav-disc-t { display: none; }
  .nav-discutons { padding: 8px; }
}
@media (max-width: 620px) {
  .hero-row .right { text-align: left; }
  .hero-thesis { max-width: 100%; }
  .simu-why p { font-size: 13px; }
}
@media (max-width: 460px) {
  .lang-toggle { font-size: 10px; }
}

@media print {
  #ambient, #grain, body::after, body::before, .fab, .twk-panel, .rail, .hud, .nav .meta, .scroll-cue, .act-scroll, .marquee { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .surface, section { break-inside: avoid; page-break-inside: avoid; }
  .proj-panel { max-height: none !important; }
}

/* ============================================================
   v4 — MOBILE UX LAYER
   Tighter pacing, lighter compositing, calmer scroll on touch.
   Loaded last so it wins cleanly over the rules above.
   ============================================================ */

/* parallax is off on touch (see startParallax) — release the compositor layers
   it would have reserved, so the browser spends that budget on smooth scroll. */
html.no-parallax [data-parallax] { will-change: auto; translate: none !important; }
html.no-parallax #ambient { will-change: auto; }

/* tablets & phones — the huge vh rhythm leaves half-empty screens that make the
   page feel slow and endless on a tall viewport. Bring sections closer together. */
@media (max-width: 900px) {
  .surface { padding-top: 13vh; padding-bottom: 13vh; }
  .band    { padding-top: 11vh; padding-bottom: 11vh; }
  .contact { padding-top: 15vh; padding-bottom: 9vh; }
  .dooh    { padding-top: 13vh; padding-bottom: 10vh; }
  .act-divider { min-height: 36vh; }
  .room { height: 46vh; min-height: 380px; }
  /* momentum scroll inside the horizontal SEA tab strip */
  .sea-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sea-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 620px) {
  .surface { padding-top: 9vh;  padding-bottom: 9vh; }
  .band    { padding-top: 9vh;  padding-bottom: 9vh; }
  .contact { padding-top: 12vh; padding-bottom: 8vh; }
  .dooh    { padding-top: 11vh; padding-bottom: 9vh; }
  .act-divider { min-height: 30vh; }
  .room { height: 40vh; min-height: 300px; }
  /* decorative metric chips orbit the desktop browser mock — on a phone they
     collide with it. Hide them; the in-flow metric rows still carry the numbers. */
  .sea .float { display: none; }
  /* the fixed-height SEA stage stranded a lot of empty space on phones */
  .sea-stage { height: 412px; }
  .sea-disp .disp-body { grid-template-columns: 1fr; }
  .sea-disp .disp-mpu { aspect-ratio: 16/7; }
  /* big ghost watermark words can nudge the layout wider than the viewport */
  .ghost-word { max-width: 100vw; overflow: hidden; }
}

/* coarse pointers: backdrop-filter blur re-rasterises every scroll frame, which
   is the single most expensive thing the GPU does here. Drop it on the many
   in-flow chips and large translucent cards; keep the design via opaque fills. */
@media (pointer: coarse) {
  .metric {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
  }
  .player, .auction, .dco-footfall {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in oklab, var(--bg-2) 94%, transparent);
  }
  .hud, .fab {
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  /* faster, comfier taps */
  a, button, .proj-bar, .sea-tab, .dco-scale-b, .simu-obj button { -webkit-tap-highlight-color: transparent; }
}

/* contact CTAs: on phones make them full-width, easy 48px tap targets, stacked
   in a clean column (the 4 buttons wrapped awkwardly before). */
@media (max-width: 560px) {
  .contact-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .contact-actions .btn-line { justify-content: center; padding: 15px 22px; width: 100%; }
  .avail { flex-wrap: wrap; }
}
/* on the smallest phones the live HUD pill competes with the Contact button at the
   bottom — drop the decorative desk telemetry, keep the persistent Contact CTA. */
@media (max-width: 560px) {
  .hud { display: none !important; }
  .fab { bottom: 16px; }
}

/* ---------- MOBILE NAV — burger + full-screen sheet ---------- */
.nav-burger { display: none; }
.fab-short { display: none; }
@media (max-width: 760px) {
  /* persistent Contact pill reads clearly on phones (long label is hidden) */
  .fab-short { display: inline; }
}
@media (max-width: 1040px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 30px; height: 30px; padding: 0; margin-left: 4px; position: relative; z-index: 210; cursor: pointer;
  }
  .nav-burger span { display: block; width: 22px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s; }
  .nav-burger.open span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }
  /* on the smallest phones the clock crowds the burger — drop it, keep the menu */
  .nav-time { display: none; }
}
@media (min-width: 1041px) { .nav-sheet { display: none !important; } }

.nav-sheet {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12vh 9vw 7vh; overflow-y: auto;
  background: color-mix(in oklab, var(--bg) 92%, #000);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.nav-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-sheet-links { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.nav-sheet-links a {
  font-family: var(--font-display); font-size: clamp(34px, min(12vw, 8.4vh), 76px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--fg); padding: 4px 0; width: max-content; max-width: 100%; position: relative; white-space: nowrap;
}
.nav-sheet-links a::after { content: ""; position: absolute; left: 0; bottom: 8px; width: 0; height: 2px; background: var(--accent); transition: width .35s ease; }
.nav-sheet-links a:active::after { width: 100%; }
.nav-sheet-foot {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; flex: 0 0 auto;
}
.nav-sheet-mail { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
/* entrance is pure enhancement: it only shifts the links (opacity stays 1), so if
   a browser pauses the animation the menu is still fully readable, never blank. */
@media (prefers-reduced-motion: no-preference) {
  .nav-sheet-links a { transform: translateY(15px); }
  .nav-sheet.open .nav-sheet-links a { animation: sheetLink .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.04s + var(--i) * .06s); }
}
@keyframes sheetLink { to { transform: none; } }

/* ============================================================
   v5 — V2 STRUCTURE LAYER
   Channel hub (tabbed), per-act colour, ghost-word legibility,
   simulator sector selector, tablet polish, lighter HUD.
   ============================================================ */

/* ---------- CHANNEL HUB (7 channels → one tabbed section) ---------- */
.channel-hub { padding-top: 16vh; padding-bottom: 14vh; }
.channel-hub .chan-intro { margin-bottom: 3vh; }
/* "this is a demo" explainer — sets expectations for non-specialists */
.chan-demo-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4vh;
  padding: 14px 18px; border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 12px; background: color-mix(in oklab, var(--accent) 6%, transparent); }
.chan-demo-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 5px 11px; border-radius: 100px; white-space: nowrap; flex: none; }
.chan-demo-t { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--muted); flex: 1 1 320px; }
@media (max-width: 560px) { .chan-demo-t { font-size: 12px; } }

.chan-tabs-wrap {
  position: sticky; top: 0; z-index: 40; margin: 0 -6vw 2vh; padding: 14px 6vw;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.chan-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.chan-tabs::-webkit-scrollbar { display: none; }
.chan-tab {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 18px; border-radius: 13px; border: 1px solid var(--line); background: transparent;
  color: var(--fg); cursor: pointer; text-align: left; transition: border-color .25s, background .25s, transform .25s;
}
.chan-tab:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); transform: translateY(-2px); }
.chan-tab.on { border-color: color-mix(in oklab, var(--accent) 70%, transparent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.chan-tab-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.chan-tab-l { font-family: var(--font-display); font-size: 19px; line-height: 1; letter-spacing: -.01em; }
.chan-tab-s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.chan-tab:not(.on) .chan-tab-s { opacity: .7; }

/* the panel mounts one channel at a time; neutralise its own giant surface padding */
.chan-panel { position: relative; animation: chanIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes chanIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chan-panel > .surface { padding: 2vh 0 0 !important; overflow: visible; }
.chan-panel > .surface .ghost-word { display: none; } /* the hub already has its own title; drop the per-channel ghost letters */
.chan-panel .surface-head { margin-bottom: 5vh; }
@media (prefers-reduced-motion: reduce) { .chan-panel { animation: none; } }

/* ---------- PER-ACT COLOUR — each chapter gets its own temperature ---------- */
.act-divider[data-actn="1"] { --act-accent: #9b8cff; }
.act-divider[data-actn="2"] { --act-accent: #6fa8ff; }
.act-divider[data-actn="3"] { --act-accent: #f0b35a; }
.act-divider[data-actn="4"] { --act-accent: #4ea0ff; }
.act-divider[data-actn] { background: radial-gradient(ellipse 90% 70% at 50% 50%, color-mix(in oklab, var(--act-accent) 12%, transparent), transparent 70%); }
.act-divider[data-actn] .act-num,
.act-divider[data-actn] .act-watermark { color: color-mix(in oklab, var(--act-accent) 8%, transparent); }
.act-divider[data-actn] .act-title em { color: var(--act-accent); }
.act-divider[data-actn] .act-kicker { color: color-mix(in oklab, var(--act-accent) 80%, var(--fg)); }
.act-divider[data-actn] .act-kicker .act-line { background: linear-gradient(90deg, transparent, var(--act-accent)); }
.act-divider[data-actn] .act-kicker .act-line:last-child { background: linear-gradient(90deg, var(--act-accent), transparent); }
.act-divider[data-actn] .act-rule { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--act-accent) 60%, transparent), transparent); }

/* ---------- GHOST WORDS — give the decorative letters real presence ---------- */
.ghost-word { opacity: .07; }
[data-theme="light"] .ghost-word { opacity: .05; }

/* ---------- SIMULATOR — sector selector ---------- */
.simu-sector { margin-top: 16px; }
.simu-sector-l { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.simu-sector-b { display: flex; flex-wrap: wrap; gap: 8px; }
.simu-sector-b button {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all .22s;
}
.simu-sector-b button:hover { color: var(--fg); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.simu-sector-b button.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* ---------- TABLET POLISH (760–1040px) ---------- */
@media (min-width: 761px) and (max-width: 1040px) {
  .nav .meta { gap: 12px; }
  .nav-role { max-width: 22ch; }
  .surface-head { grid-template-columns: 1fr; gap: 22px; }
  .surface-desc { justify-self: start; max-width: 60ch; }
  .chan-tab-l { font-size: 17px; }
}

/* ---------- LIGHTER HUD — calmer, less decorative on big screens ---------- */
.hud { opacity: 0; }
.hud.shown { opacity: .82; }
.hud.shown:hover { opacity: 1; }


/* ======================================================================
   LIGHT THEME — CHANNELS READABILITY
   Two fixes:
   1) The device mockups (Google, LinkedIn, the RTB terminal, the audio
      player, the CTV screen) are designed as DARK-mode app screenshots with
      hardcoded dark chrome. Their text uses --fg, which flips dark in the
      light theme → invisible. We restore a dark token context *inside* each
      mockup so they render as crisp dark screenshots on the light page.
   2) The page-level accent (#7aa2e3) is too pale as TEXT on a light bg, so we
      deepen --accent / --accent-2 in light theme — then restore the lighter
      periwinkle inside the dark mockups (point 1).
   ====================================================================== */
html[data-theme="light"] body.palette-nocturne { --accent: #2f63bf; --accent-2: #6b54c0; }
html[data-theme="light"] body.palette-sodium   { --accent: #b85a1c; --accent-2: #b54a44; }
html[data-theme="light"] body.palette-veronese { --accent: #1d7a51; --accent-2: #3f8f6e; }

html[data-theme="light"] .sea .device.browser,
html[data-theme="light"] .sma .devices .device,
html[data-theme="light"] .rtb .auction,
html[data-theme="light"] .rtb .ctx-desktop,
html[data-theme="light"] .rtb .ctx-tablet,
html[data-theme="light"] .rtb .ctx-mobile,
html[data-theme="light"] .audio .player {
  --fg: #ece9e3; --muted: #9aa3b4; --line: rgba(236,233,227,.13);
  --accent: #7aa2e3; --accent-2: #b8a6e8; --bg: #0a0c12; --bg-2: #0e1015;
  color: var(--fg);
}
/* CTV is a self-contained dark theatre in BOTH themes — the living-room scene
   reads perfectly on black, so it never adapts to the light page. */
.ctv .tvset {
  --fg: #ece9e3; --muted: #9aa3b4; --line: rgba(236,233,227,.13);
  --accent: #7aa2e3; --accent-2: #b8a6e8; --bg: #0a0c12; --bg-2: #0e1015;
  color: var(--fg);
}
/* the device captions ("LinkedIn · B2B", "TikTok · Spark Ads"…) and the phone
   dots sit on the LIGHT page, not inside the dark mockup — so the dark-context
   override above made them light-on-light. Force them back to a page-readable
   colour in the light theme. */
html[data-theme="light"] .device-tag { color: #5a6376; }
html[data-theme="light"] .phone .pf-dot { background: rgba(20,30,60,.16); border-color: #8a93a6; }
html[data-theme="light"] .phone .pf-dot.on { background: #2f63bf; border-color: #2f63bf; }
/* the original CTV stays a self-contained dark "theatre" in every theme,
   so the living-room scene the user liked never floats on white */
.ctv .room {
  background: radial-gradient(120% 95% at 50% 8%, #161922 0%, #0a0b11 78%);
  border-radius: 24px; overflow: hidden;
}
.ctv .room::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none;
}


/* ======================================================================
   DOOH (rebuilt) — stand inside three real contexts; the ad lights the
   surface that belongs to each. Daytime palette → reads in the light theme.
   ====================================================================== */
.dooh3 .dooh3-wrap { display: grid; grid-template-columns: 1.62fr 1fr; gap: clamp(26px, 4.5vw, 58px); align-items: center; margin-top: 40px; }
.dooh3-viewer { display: flex; flex-direction: column; gap: 15px; }
.dooh3-scene {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: #d9e2ee; container-type: inline-size;
  box-shadow: 0 34px 80px -34px rgba(20,30,60,.45);
  animation: doohScene .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes doohScene { from { opacity: .25; } to { opacity: 1; } }
.dooh3-trigger { position: absolute; top: 14px; left: 14px; z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: #10131c;
  background: rgba(255,255,255,.84); border: 1px solid rgba(20,30,60,.12);
  padding: 6px 12px; border-radius: 100px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dooh3-trigger .ic { color: #2f63bf; font-size: 13px; }

/* the Lumen ad surface, shared by every scene */
.dooh3-ad { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: linear-gradient(150deg, #86abe8 0%, #5566cf 55%, #3b3f7d 100%);
  box-shadow: 0 0 38px rgba(120,150,230,.5), inset 0 0 0 1px rgba(255,255,255,.16); }
.dooh3-ad.land { padding: 7% 8%; }
.dooh3-ad.port { padding: 9% 9%; }
.dooh3-ad-pk { font-family: var(--font-mono); font-size: clamp(7px, 2cqw, 12px); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.dooh3-ad-ph { font-family: var(--font-display); line-height: 1.0; letter-spacing: -.01em; color: #fff; margin: auto 0; }
.dooh3-ad.land .dooh3-ad-ph { font-size: clamp(13px, 4.4cqw, 30px); }
.dooh3-ad.port .dooh3-ad-ph { font-size: clamp(12px, 3cqw, 24px); }
.dooh3-ad-ph em { font-style: italic; color: #fff; }
.dooh3-ad-pf { font-family: var(--font-mono); letter-spacing: .2em; font-size: clamp(7px, 1.9cqw, 12px); color: rgba(255,255,255,.92); }
.dooh3-ad-sheen { position: absolute; inset: 0; background: linear-gradient(118deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform: translateX(-130%); animation: doohSheen 9s ease-in-out infinite; pointer-events: none; }
@keyframes doohSheen { 0%, 78% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
.dooh3-scene [class$="-person"], .dooh3-scene .s-person { background: #2b3340; border-radius: 46% 46% 8% 8%; z-index: 24; }

/* ---- METRO (immersive platform) ---- */
.dooh3-metro { position: absolute; inset: 0; background: linear-gradient(180deg, #e9eef6 0%, #d4dde9 58%, #aeb9c9 58%, #93a0b4 100%); }
.m-ceiling { position: absolute; top: 0; left: 0; right: 0; height: 9%; background: linear-gradient(180deg, #2b3340, #3c4756); z-index: 4; }
.m-ceiling i { position: absolute; top: 38%; width: 13%; height: 22%; border-radius: 100px; background: #fffdf2; box-shadow: 0 6px 26px rgba(255,250,225,.85); }
.m-ceiling i:nth-child(1){ left: 8%; } .m-ceiling i:nth-child(2){ left: 32%; } .m-ceiling i:nth-child(3){ left: 56%; } .m-ceiling i:nth-child(4){ left: 80%; }
.m-wall { position: absolute; left: 0; right: 0; top: 9%; height: 49%;
  background:
    repeating-linear-gradient(0deg, transparent 0 15%, rgba(40,60,90,.09) 15% 16%),
    repeating-linear-gradient(90deg, transparent 0 6.6%, rgba(40,60,90,.07) 6.6% 7%),
    linear-gradient(180deg, #eef3fa, #d3dce8); }
.m-tunnel { position: absolute; right: 0; top: 9%; width: 22%; height: 49%; z-index: 1;
  background: radial-gradient(120% 100% at 100% 50%, #05070c 0%, #0c1119 48%, transparent 80%); }
.m-ad-frame { position: absolute; top: 16%; left: 6%; width: 45%; height: 36%; border-radius: 6px; padding: 8px; z-index: 3;
  background: linear-gradient(#fcfdff, #e6ecf5); box-shadow: 0 16px 34px rgba(20,30,60,.3), 0 0 50px color-mix(in oklab, var(--accent) 45%, transparent); }
.m-ad-frame .dooh3-ad { width: 100%; height: 100%; border-radius: 3px; }
.m-sign { position: absolute; top: 10.5%; left: 6%; z-index: 5; font-family: var(--font-mono); font-size: clamp(7px, 1.7cqw, 11px); letter-spacing: .14em; color: #fff; background: #1f6fb0; padding: 4px 10px; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.m-train { position: absolute; right: 0; top: 12%; width: 36%; height: 39%; border-radius: 16px 6px 6px 16px; z-index: 6;
  background: linear-gradient(180deg, #e2e8f1 0%, #b9c3d1 50%, #8895a8 100%);
  box-shadow: -22px 0 46px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.6), inset 0 -6px 10px rgba(20,30,50,.25);
  display: flex; align-items: center; gap: 5%; padding: 0 5% 0 11%; animation: trainIn 1.1s cubic-bezier(.2,.85,.3,1) both; }
@keyframes trainIn { from { transform: translateX(55%); opacity: .25; } to { transform: none; opacity: 1; } }
/* destination band along the roof */
.m-train::before { content: ""; position: absolute; left: 9%; right: 4%; top: 13%; height: 9%; border-radius: 3px; background: linear-gradient(90deg, #1f6fb0, #2f86cf); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* the track bed the train rests on — a recessed pit with two HORIZONTAL steel
   rails (side view), grounded into the platform so nothing floats. */
.m-train::after { content: ""; position: absolute; left: -7%; right: -2%; bottom: -13%; height: 15%; z-index: -1;
  background:
    linear-gradient(180deg, transparent 0 30%, #717c8c 30% 34%, transparent 34% 60%, #717c8c 60% 64%, transparent 64%),
    linear-gradient(180deg, #20262f 0%, #0a0d12 100%);
  border-radius: 0 0 4px 4px; }
.m-train .m-head { position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 11px; height: 26%; border-radius: 8px; background: radial-gradient(circle, #fff6d8, #ffd86b); box-shadow: -9px 0 28px 5px rgba(255,216,120,.85); }
.m-win { flex: 1; height: 42%; border-radius: 4px; background: linear-gradient(180deg, #fdf3d2 0%, #f3d98f 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 0 12px rgba(255,228,150,.4); }
.m-door { width: 7%; height: 80%; border-radius: 3px; background: linear-gradient(180deg, #cfd7e3, #95a2b5); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.14); }
.m-edge { position: absolute; left: 0; right: 0; top: 57.5%; height: 1.4%; background: repeating-linear-gradient(90deg, #f0c34f 0 20px, #d9a838 20px 40px); z-index: 8; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.m-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2;
  background:
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(40,60,90,.07) 12% 12.4%),
    linear-gradient(180deg, #b7c1d0 0%, #8f9bae 100%); }
.m-floor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(122,162,227,.16), transparent 50%); }
.m-person { position: absolute; bottom: 5%; z-index: 5; background: linear-gradient(180deg, #3a4250, #20262f); border-radius: 46% 46% 8% 8%; }
.m-person.p1  { left: 8%;  width: 4.2%; height: 22%; }
.m-person.p2  { left: 15%; width: 3.6%; height: 19%; background: linear-gradient(180deg, #2c333f, #181d24); }
.m-person.p3  { left: 21%; width: 3.2%; height: 17%; opacity: .92; }
.m-person.p4  { left: 27%; width: 3.9%; height: 21%; background: linear-gradient(180deg, #333b48, #1c222b); }
.m-person.p5  { left: 33%; width: 3.3%; height: 18%; opacity: .88; }
.m-person.p6  { left: 39%; width: 3.7%; height: 20%; background: linear-gradient(180deg, #2f3947, #14191f); }
.m-person.p7  { left: 45%; width: 3.1%; height: 16%; opacity: .84; }
.m-person.p8  { left: 51%; width: 3.6%; height: 19%; background: linear-gradient(180deg, #313a47, #181e26); }
.m-person.p9  { left: 4%;  width: 3.4%; height: 18%; opacity: .9; }
.m-person.p10 { left: 11.5%; width: 3%; height: 15.5%; opacity: .8; background: linear-gradient(180deg, #2a323d, #14191f); }

/* ---- STREET (traffic, bus, pedestrians, shelter) ---- */
/* ---- STREET — calm boulevard, the Lumen mUPI lightbox as hero ---- */
.dooh3-street { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, #b9d0ee 0%, #d4e3f5 40%, #eaf1fa 56%, #eef2f8 100%); }
/* soft sky light */
.st-sky { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 60% at 72% -6%, rgba(255,255,255,.85), transparent 60%); }
/* receding skyline silhouettes */
.st-skyline { position: absolute; left: 0; right: 0; bottom: 44%; height: 38%; z-index: 1; }
.st-bd { position: absolute; bottom: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #b3c0d3 0%, #97a5ba 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.40) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(0deg, rgba(40,60,90,.16) 0 4px, transparent 4px 14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.st-bd.b1 { left: -3%; width: 21%; height: 60%; filter: brightness(.95); }
.st-bd.b2 { left: 15%; width: 17%; height: 90%; }
.st-bd.b3 { left: 39%; width: 15%; height: 70%; filter: brightness(.98); }
.st-bd.b4 { left: 66%; width: 19%; height: 98%; filter: brightness(.92); }
.st-bd.b5 { left: 85%; width: 19%; height: 56%; }
/* pavement + kerb */
.st-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 2;
  background:
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(40,60,90,.05) 13% 13.5%),
    linear-gradient(180deg, #ccd5e2 0%, #aeb9c8 100%); }
.st-ground::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5%;
  background: linear-gradient(180deg, #dde4ee, #bcc6d4); box-shadow: 0 3px 7px rgba(20,30,60,.16); }
/* accent reflection pooling under the lit panel */
.st-reflection { position: absolute; left: 69%; bottom: 5%; width: 26%; height: 30%; transform: translateX(-50%); z-index: 3;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 38%, transparent), transparent 74%); }
/* modern abribus shelter */
.st-shelter { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); width: 60%; height: 58%; z-index: 6; }
.st-canopy { position: absolute; top: 4%; left: 0; width: 72%; height: 6%; border-radius: 5px;
  background: linear-gradient(180deg, #3b4453, #262d38); box-shadow: 0 9px 20px rgba(20,30,60,.3); }
.st-glass { position: absolute; top: 10%; left: 0; width: 72%; height: 72%; border-radius: 0 0 4px 4px;
  background: linear-gradient(118deg, rgba(255,255,255,.34), rgba(176,198,228,.12) 55%, rgba(255,255,255,.26));
  border: 1px solid rgba(255,255,255,.55); border-top: none; box-shadow: inset 0 0 26px rgba(255,255,255,.22); }
.st-glass::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.4); }
.st-bench { position: absolute; bottom: 9%; left: 7%; width: 52%; height: 5%; border-radius: 4px;
  background: linear-gradient(180deg, #5a6473, #3b4350); box-shadow: 0 4px 10px rgba(20,30,60,.22); }
/* the mUPI lightbox — vertical totem, the hero */
.st-mupi { position: absolute; top: 0; right: 0; width: 30%; height: 100%; border-radius: 7px; padding: 7px; z-index: 7;
  background: linear-gradient(#1b212b, #0b0e14);
  box-shadow: 0 24px 48px rgba(20,30,60,.42), 0 0 50px color-mix(in oklab, var(--accent) 55%, transparent), inset 0 0 0 1px rgba(255,255,255,.07); }
.st-mupi .dooh3-ad { width: 100%; height: 100%; border-radius: 3px; }
.st-mupi::after { content: ""; position: absolute; left: 38%; bottom: -9%; width: 24%; height: 10%;
  background: linear-gradient(180deg, #232a35, #11161d); border-radius: 0 0 3px 3px; }
/* calm waiting figures */
.st-figure { position: absolute; bottom: 11%; z-index: 8; border-radius: 46% 46% 12% 12%; background: linear-gradient(180deg, #3a4250, #20262f); box-shadow: 2px 4px 9px rgba(20,30,60,.18); }
.st-figure.f1 { left: 19%; width: 4.8%; height: 25%; }
.st-figure.f2 { left: 28%; width: 4.1%; height: 21%; background: linear-gradient(180deg, #45413f, #232021); }

/* ---- INDOOR VENUE (mall concourse) ---- */
.dooh3-indoor { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #f1f4f9 0%, #e2e8f1 60%, #cdd5e2 100%); }
.i-ceiling { position: absolute; top: 0; left: 0; right: 0; height: 16%; background: linear-gradient(180deg, #eef1f7, #dbe1ec);
  box-shadow: inset 0 -1px 0 rgba(40,60,90,.12); display: flex; align-items: center; justify-content: space-around; }
.i-ceiling i { width: 9%; height: 26%; border-radius: 100px; background: #fffdf0; box-shadow: 0 5px 22px rgba(255,240,190,.85); }
.i-rail { position: absolute; top: 16%; left: 0; right: 0; height: 2%; background: linear-gradient(180deg, #c2cad6, #aab4c2); z-index: 2; }
/* two storefronts flanking the concourse, with glowing signage */
.i-store { position: absolute; top: 18%; height: 40%; background: linear-gradient(180deg, #eef2f8, #d8dfea); z-index: 1; }
.i-store.store-l { left: 0; width: 26%; border-right: 1px solid rgba(40,60,90,.12); }
.i-store.store-r { right: 0; width: 26%; border-left: 1px solid rgba(40,60,90,.12); }
.i-sign { position: absolute; top: 8%; left: 14%; width: 72%; height: 16%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 70%, #fff), color-mix(in oklab, var(--accent-2) 60%, #fff)); box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 40%, transparent); }
.i-win { position: absolute; bottom: 6%; width: 36%; height: 56%; border-radius: 3px; background: linear-gradient(180deg, #cfe0f4, #9fb6d6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.store-l .i-win:nth-of-type(2) { left: 8%; } .store-l .i-win:nth-of-type(3) { right: 8%; }
.store-r .i-win:nth-of-type(2) { left: 8%; } .store-r .i-win:nth-of-type(3) { right: 8%; }
/* central digital totem (portrait) */
.i-totem { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 26%; height: 50%; border-radius: 8px; padding: 7px; z-index: 4;
  background: linear-gradient(#14171d, #0a0c11); box-shadow: 0 22px 46px rgba(20,30,60,.4), 0 0 40px color-mix(in oklab, var(--accent) 34%, transparent); }
.i-totem .dooh3-ad { width: 100%; height: 100%; border-radius: 4px; }
.i-totem-base { position: absolute; bottom: -8%; left: 30%; width: 40%; height: 9%; background: linear-gradient(180deg, #2a313c, #181d24); border-radius: 0 0 5px 5px; }
.i-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 2;
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(40,60,90,.06) 11% 11.5%),
    linear-gradient(180deg, #ccd4e1 0%, #aeb8c8 100%); }
.i-floor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%); }
.i-person { position: absolute; bottom: 6%; z-index: 5; border-radius: 46% 46% 10% 10%; background: linear-gradient(180deg, #3a4250, #20262f); }
.i-person.p1 { left: 14%; width: 5%; height: 32%; }
.i-person.p2 { left: 78%; width: 5.6%; height: 35%; background: linear-gradient(180deg, #353d4b, #1b212a); }
.i-person.p3 { left: 38%; width: 4.2%; height: 25%; background: linear-gradient(180deg, #45413f, #232021); }
.i-person.p4 { left: 62%; width: 4.6%; height: 28%; opacity: .9; }
.i-person.p5 { left: 27%; width: 4%; height: 23%; background: linear-gradient(180deg, #3d4a3f, #1f2620); }

/* ---- DOOH side controls ---- */
.dooh3-side { display: flex; flex-direction: column; gap: 16px; }
.dooh3-side-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dooh3-cap { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.dooh3-cap b { color: var(--fg); font-weight: 500; }
.dooh3-fmts { display: flex; flex-direction: column; gap: 8px; }
.dooh3-fmt { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; transition: all .25s; }
.dooh3-fmt-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.dooh3-fmt-l { font-family: var(--font-display); font-size: 20px; color: var(--muted); transition: color .25s; }
.dooh3-fmt-e { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.dooh3-fmt:hover { border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); }
.dooh3-fmt:hover .dooh3-fmt-l { color: var(--fg); }
.dooh3-fmt.on { background: color-mix(in oklab, var(--accent) 11%, transparent); border-color: color-mix(in oklab, var(--accent) 52%, transparent); }
.dooh3-fmt.on .dooh3-fmt-l { color: var(--fg); }
.dooh3-metrics { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.dooh3-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); }
.dooh3-metric b { font-family: var(--font-display); font-size: 23px; line-height: 1; color: var(--fg); }
.dooh3-metric span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: right; }

@media (max-width: 920px) {
  .dooh3 .dooh3-wrap { grid-template-columns: 1fr; gap: 24px; }
  .dooh3-metrics { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .dooh3-metrics { grid-template-columns: 1fr; }
  .dooh3-fmts { gap: 7px; }
}

/* ====== Email & SMS — owned media (one CRM journey) ====== */
.esms { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.esms-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 44px); }

/* automation ribbon — binds the email + SMS into a single scénario */
.esms-flow { border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px 18px;
  background: color-mix(in oklab, var(--bg-2) 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.esms-flow-lbl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.esms-flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }
.esms-step { display: flex; align-items: center; gap: 11px; }
.esms-step-n { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px; color: var(--muted); background: color-mix(in oklab, var(--bg) 70%, transparent); }
.esms-step.hot .esms-step-n { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--bg)); box-shadow: 0 0 18px -4px color-mix(in oklab, var(--accent) 60%, transparent); }
.esms-step-txt { display: flex; flex-direction: column; line-height: 1.18; }
.esms-step-l { font-size: 13px; color: var(--fg); }
.esms-step.hot .esms-step-l { color: var(--fg); }
.esms-step-s { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted); }
.esms-flow-x { flex: 1 1 22px; min-width: 22px; height: 1px; margin: 0 14px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg) 28%, transparent) 0 5px, transparent 5px 10px); }

/* the two stages, side by side */
.esms-devices { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(22px, 3vw, 46px); align-items: start; }
.esms-col { display: flex; flex-direction: column; }
.esms-stage-tag { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.esms-stage-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* email client card */
.esms-mail { border: 1px solid var(--line); border-radius: 16px; background: color-mix(in oklab, var(--bg-2) 86%, transparent); overflow: hidden; box-shadow: 0 26px 60px -28px rgba(0,0,0,.5); }
.esms-mail-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.esms-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--bg); background: var(--accent); }
.esms-mail-from { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.esms-mail-from .nm { font-size: 14px; font-weight: 600; color: var(--fg); }
.esms-mail-from .via { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--muted); }
.esms-seg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklab,var(--accent) 40%,var(--line)); border-radius: 100px; padding: 5px 10px; white-space: nowrap; }
.esms-mail-subj { padding: 16px 18px 2px; font-family: var(--font-display); font-size: clamp(19px,2vw,26px); line-height: 1.18; color: var(--fg); }
.esms-mail-pre { padding: 0 18px 14px; font-size: 13px; color: var(--muted); }
.esms-mail-hero { position: relative; height: 150px; margin: 0 16px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab,var(--accent) 24%, var(--bg-2)), var(--bg-2));
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }
.esms-brand { font-family: var(--font-display); font-style: italic; font-size: 40px; letter-spacing: .04em; color: var(--fg); }
.esms-hero-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.esms-mail-body { padding: 16px 18px 22px; }
.esms-mail-body p { font-size: 13.5px; line-height: 1.6; color: color-mix(in oklab,var(--fg) 80%,transparent); max-width: 42ch; margin-bottom: 16px; }
.esms-mail-cta { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bg); background: var(--accent); border-radius: 100px; padding: 11px 20px; }

/* SMS phone */
.esms-phone { position: relative; width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(180deg,#10131a,#0a0c11); padding: 22px 12px 16px; box-shadow: 0 26px 60px -28px rgba(0,0,0,.6); }
.esms-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 34%; height: 7px; border-radius: 100px; background: #000; }
.esms-sms-head { display: flex; align-items: center; gap: 10px; padding: 8px 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.esms-sms-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 15px; color: #0a0c11; background: var(--accent); }
.esms-sms-id { display: flex; flex-direction: column; }
.esms-sms-name { font-size: 13px; font-weight: 600; color: #f2f5fb; }
.esms-sms-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: #7e8798; }
.esms-sms-body { padding: 14px 4px 4px; display: flex; flex-direction: column; }
.esms-sms-day { align-self: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #6f7889; margin-bottom: 12px; }
.esms-sms-bubble { align-self: flex-start; max-width: 90%; background: #1d212b; color: #e9edf4; font-size: 13px; line-height: 1.45; border-radius: 16px 16px 16px 5px; padding: 11px 14px; }
.esms-sms-link { color: var(--accent); }
.esms-sms-stop { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: #6f7889; }
.esms-sms-time { align-self: flex-start; margin: 6px 0 0 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: #6f7889; }

/* footer — platforms + KPIs */
.esms-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.esms-pf { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.esms-pf .pf { font-family: var(--font-display); font-style: italic; font-size: 21px; color: color-mix(in oklab,var(--fg) 45%,transparent); transition: color .3s; }
.esms-pf .pf:hover { color: var(--accent); }
.esms-metrics { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .esms-devices { grid-template-columns: 1fr; gap: 28px; }
  .esms-phone { margin: 0 auto; }
}

/* ---- Programmatique: a meaningful green for the WON auction (clearer + adds
   colour variety beyond the all-blue read the user flagged) ---- */
.bidrow.win, .bidrow.win .bid { color: #4fd29c; }
.bidrow.win .meter i { background: #4fd29c; box-shadow: 0 0 10px rgba(79,210,156,.6); }
.auction .winner .big { color: #4fd29c; }
.auction .winner .won-tag { background: #4fd29c; color: #05210f; }
.auction .winner .imp { background: linear-gradient(120deg, color-mix(in oklab, #4fd29c 26%, var(--bg-2)), var(--bg-2)); }

/* ============================================================
   v6 — AUDIT PASS: semantic warm accent · focus · motion discipline
   ============================================================ */

/* a dedicated WARM accent reserved for results / positive outcomes only —
   breaks the all-blue read with a second hue that carries real meaning. */
:root { --pos: #e8b160; }
.palette-sodium   { --pos: #58cbb1; }
.palette-veronese { --pos: #e8b160; }
html[data-theme="light"] body.palette-nocturne { --pos: #b07d1c; }
html[data-theme="light"] body.palette-sodium   { --pos: #15876d; }
html[data-theme="light"] body.palette-veronese { --pos: #b07d1c; }

.impact-cell.hot .ic-v { color: var(--pos); }
.impact-cell.hot { border-color: color-mix(in oklab, var(--pos) 38%, var(--line)); }
.simu-out .simu-kpi:last-child b { color: var(--pos); }
.cs-metrics .cs-metric:first-child b, .exp-k b { color: var(--pos); }

/* keyboard focus — the custom cursor hides the native one, so make focus
   unmistakable for anyone navigating without a mouse. */
a:focus-visible, button:focus-visible, input:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px;
}

/* motion discipline: silence every decorative loop for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .dooh3-ad-sheen, .hero-type .ht-caret { animation: none !important; }
}

/* harmonise the figures across all three DOOH scenes: a clean head + shoulders
   silhouette. Shoulders are gently squared so the round head reads as a HEAD,
   not a second blob; head sits on its own size with a small neck overlap. */
.m-person, .i-person, .st-figure {
  border-radius: 40% 40% 16% 16% / 24% 24% 11% 11%;
  overflow: visible;
}
.m-person::before, .i-person::before, .st-figure::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  transform: translate(-50%, 32%);
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: inherit;
}

/* ============================================================
   v7 — RESPONSIVE + LIGHT-MODE CTA polish
   ============================================================ */

/* ---- Floating "Disponible, discutons" CTA: green-themed, readable in BOTH
   light and dark (was glass + --fg text → invisible white-on-white in light). */
.fab {
  background: color-mix(in oklab, #2fe08a 12%, var(--bg-2)) !important;
  border-color: color-mix(in oklab, #2fe08a 40%, var(--line)) !important;
  color: var(--fg) !important;
}
.fab .fab-txt, .fab .fab-short { color: var(--fg); }
.fab:hover { background: #2fe08a !important; border-color: #2fe08a !important; color: #06140d !important; }
.fab:hover .fab-txt, .fab:hover .fab-short, .fab:hover .fab-ar { color: #06140d; }
.fab:hover .fab-dot { background: #06140d; }

/* ---- Channels: mobile hint that selecting a tab changes the demo below ---- */
.chan-hint { display: none; }
.chan-hint-ar { display: inline-block; color: var(--accent); font-weight: 600; animation: chanHintBob 1.6s ease-in-out infinite; }
@keyframes chanHintBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .chan-hint-ar { animation: none; } }
@media (max-width: 760px) {
  .chan-hint {
    display: flex; align-items: center; gap: 9px; margin-top: 14px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
    color: var(--muted); padding: 9px 13px; border-radius: 10px;
    border: 1px dashed color-mix(in oklab, var(--accent) 34%, var(--line));
    background: color-mix(in oklab, var(--accent) 5%, transparent);
  }
}

/* ---- Programmatique: on phones, show ALL THREE device renders stacked
   (desktop + tablet + mobile) instead of hiding tablet/mobile. The user
   couldn't see the multi-device story on a phone. ---- */
@media (max-width: 900px) {
  .ctx-devices { grid-template-columns: 1fr !important; gap: 30px; }
  .ctx-mobile, .ctx-tablet { display: block !important; }
  .ctx-tablet, .ctx-mobile { max-width: 360px; margin: 0 auto; width: 100%; }
}

/* ---- Email & SMS: vertical journey on phones so the automation steps read
   top-to-bottom (the horizontal ribbon wrapped mid-row and confused). ---- */
@media (max-width: 640px) {
  .esms-flow-steps { flex-direction: column; align-items: stretch; gap: 0; }
  .esms-step { gap: 13px; padding: 4px 0; }
  .esms-flow-x {
    flex: none; width: 1px; height: 16px; min-width: 0; margin: 2px 0 2px 15px;
    background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--fg) 28%, transparent) 0 4px, transparent 4px 8px);
  }
}

/* ============================================================
   v8 — small-screen polish (tabs · DOOH scenes · simulator bars)
   ============================================================ */

/* ---- Channel tabs: on small phones, switch from wrapping cards to a single
   horizontal scroll row (denser, swipeable) with a snap + edge fade hint. ---- */
@media (max-width: 560px) {
  .chan-tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 8px; padding-bottom: 6px; margin: 0 -4vw; padding-left: 4vw; padding-right: 4vw;
    -webkit-mask: linear-gradient(90deg, transparent, #000 4vw, #000 calc(100% - 4vw), transparent);
            mask: linear-gradient(90deg, transparent, #000 4vw, #000 calc(100% - 4vw), transparent);
  }
  .chan-tab {
    flex: 0 0 auto; scroll-snap-align: start;
    flex-direction: row; align-items: baseline; gap: 7px;
    padding: 9px 13px; border-radius: 11px;
  }
  .chan-tab-n { font-size: 9px; }
  .chan-tab-l { font-size: 14px; }
  .chan-tab-s { display: none; }            /* sub-label is redundant once compact */
  .chan-hint { margin-top: 12px; }
}

/* ---- DOOH scenes keep a usable height on phones (16/10 alone collapses them
   to a thin sliver once the layout stacks to one column). ---- */
@media (max-width: 760px) {
  .dooh3 .dooh3-wrap { grid-template-columns: 1fr; gap: 28px; }
  .dooh3-scene { aspect-ratio: 4 / 3; min-height: 300px; }
}
@media (max-width: 420px) {
  .dooh3-scene { min-height: 260px; }
}

/* ---- Media simulator: taller, easier-to-read allocation bars on phones, and
   stack the name/bar/percent so the mix is legible at narrow widths. ---- */
@media (max-width: 620px) {
  .simu-ch { grid-template-columns: 1fr auto; grid-template-areas: "nm pc" "track track"; gap: 7px 12px; }
  .simu-ch .nm { grid-area: nm; font-size: 12.5px; }
  .simu-ch .nm small { font-size: 10px; }
  .simu-ch .pc { grid-area: pc; font-size: 13px; align-self: center; }
  .simu-ch-track { grid-area: track; height: 16px; border-radius: 8px; }
  .simu-ch-track i { border-radius: 8px; }
  .simu-mix { gap: 16px; }
}