/* ============================================================================
   TeamHUD site — "work outside the box."
   Synthwave palette + Y2K/Swiss new-media structure on dark.
   The DESKTOP sits behind the copy, gradient-faded out; it pans on scroll to
   reveal widget areas (real widgets mount from apps/teamhud-web). Dock at bottom.
   Body + display: NV Monobreach. Smooth scroll: Lenis.
   ============================================================================ */

:root {
  /* logo gradient — yellow ↔ almost-white */
  --logo-grad: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #fff) 60%, var(--accent));   /* accent yellow ↔ pale yellow shimmer */

  --accent:      #faca08;
  --accent-soft: rgba(250, 202, 8, 0.18);
  --accent-2:    var(--accent);   /* single yellow accent */

  /* cool slate ramp */
  --bg:        #14171b;
  --bg-elev:   #1b1f25;
  --bg-panel:  #232830;
  --bg-card:   #1b1f25;
  --screen:    #0e1014;
  --text:      #e8eaef;
  --text-dim:  #98a0ac;
  --text-faint:#5e6672;
  --ink:       #14171b;

  --border:        rgba(232, 234, 239, 0.10);
  --border-strong: rgba(232, 234, 239, 0.20);
  --hairline:      rgba(232, 234, 239, 0.05);

  --font-display: "NV Monobreach", "Inter", system-ui, sans-serif;
  --font-mono:    "NV Monobreach", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: var(--font-mono);

  --cut: 32px;                 /* horizontal leg of each chamfer (cut width along top/bottom edges) */
  --cut-angle: 51.111deg;      /* chamfer angle from the horizontal edge (45deg = symmetric) */
  --cut-y: calc(var(--cut) * tan(var(--cut-angle)));   /* vertical leg = run × tan(angle); ≈25.8px */
  --clip-notch: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut-y));
  --clip-tab:   polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);

  --maxw: 1920px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  /* Shared 2-col eyeline: hero / vision / alpha CTA (left media-or-copy, right rail) */
  --split-cols: minmax(0, 0.95fr) minmax(320px, 0.7fr);
  --split-gap: clamp(32px, 6vw, 80px);

  --ease-techno:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

* { box-sizing: border-box; }
::selection { background: rgba(250, 202, 8, 0.4); color: var(--ink); }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Dark overlay-style scrollbars ── thin, translucent, no layout shift.
   Standard props (scrollbar-width/color) cover Firefox + Chrome/Edge 121+;
   the -webkit- rules cover Safari and older Chromium. True hide-on-idle is
   native only on macOS; a JS lib (OverlayScrollbars) is the only cross-browser
   way to fully idle-hide — overkill for a landing page, so skipped. */
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;   /* inset the thumb so it reads as a floating pill */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox has no ::-webkit-scrollbar (and no per-state thumb styling). Give it
   the standard thin translucent bar — scoped so Chromium keeps the webkit rules
   above; setting scrollbar-color unscoped makes Chrome ignore ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
}

body { margin: 0; font-family: var(--font); font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 0.9; letter-spacing: -0.035em; text-transform: lowercase; margin: 0; }
h3 { font-weight: 400; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.goo-defs { position: absolute; width: 0; height: 0; }

/* ───────────── Logo toggle ───────────── */
html[data-logo="a"] .logo--b { display: none !important; }
html[data-logo="b"] .logo--a { display: none !important; }

/* ───────────── Animated-gradient logo ───────────── */
.logo-link { display: inline-flex; align-items: center; line-height: 0; }
.logo-link--header { --logo-h: 42px; transform: translateY(0.3rem); }
.logo-link--footer { --logo-h: 22px; }

/* a11y: skip link (visible on focus only) */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-techno);
}
.skip-link:focus { transform: translateY(12px); outline: 2px solid var(--ink); outline-offset: 2px; }
.page-top-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.logo { position: relative; display: block; height: var(--logo-h, 26px); width: calc(var(--logo-h, 26px) * 5.378); overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.logo--a { -webkit-mask-image: url("/assets/teamhud-wordmark.svg");   mask-image: url("/assets/teamhud-wordmark.svg"); }
.logo--b { -webkit-mask-image: url("/assets/teamhud-wordmark-b.svg"); mask-image: url("/assets/teamhud-wordmark-b.svg"); }
.logo__fx { position: absolute; inset: 0; background: var(--logo-grad); background-size: 220% 100%; animation: logo-pan 8s var(--ease-inout) infinite alternate; }
@keyframes logo-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.brand__logo-img { height: 24px; width: auto; display: block; }

/* ───────────── Registration frame + reticles + chips ───────────── */
.frame { position: fixed; inset: 12px; z-index: 40; pointer-events: none; }
.frame i { position: absolute; width: 20px; height: 20px; }
.frame i::before, .frame i::after { content: ""; position: absolute; background: var(--border-strong); }
.frame i::before { width: 100%; height: 1px; }
.frame i::after  { width: 1px; height: 100%; }
.frame i.tl { top: 0; left: 0; }   .frame i.tl::before { top: 0; }    .frame i.tl::after { left: 0; }
.frame i.tr { top: 0; right: 0; }  .frame i.tr::before { top: 0; }    .frame i.tr::after { right: 0; }
.frame i.bl { bottom: 0; left: 0; }.frame i.bl::before { bottom: 0; } .frame i.bl::after { left: 0; }
.frame i.br { bottom: 0; right: 0; }.frame i.br::before { bottom: 0; }.frame i.br::after { right: 0; }
.reticle { display: inline-block; width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ───────────── Page backdrop (behind desktop) ───────────── */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.facet { position: absolute; }
.facet--tl { top: 0; left: 0;  width: 44vw; height: 80vh; background: rgba(255,255,255,0.015); clip-path: polygon(0 0, 100% 0, 0 100%); }
.facet--br { bottom: 0; right: 0; width: 40vw; height: 70vh; background: rgba(0,0,0,0.25); clip-path: polygon(100% 100%, 100% 0, 0 100%); }
.fx-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: calc(100% / 12) 100%; opacity: 0.5; }
.fx-glyphstrip { position: fixed; top: 0; left: 24px; bottom: 0; z-index: 0; writing-mode: vertical-rl; font: 400 11px/2 var(--font-mono); letter-spacing: 0.4em; text-transform: uppercase; color: rgba(240, 238, 246, 0.05); user-select: none; pointer-events: none; }

/* ───────────── Decorative type bits ───────────── */
.kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; }
.kicker .idx { color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent-soft); flex: none; }
.dot--live { animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.hl { background: none; padding: 0; }
.meta-coord { position: absolute; z-index: 3; font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.meta-coord--tl { top: 6px; left: var(--gutter); }
.fx-chamfer { clip-path: var(--clip-notch); }
.fx-spec { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--text-dim); border-left: 1px solid var(--accent); padding-left: 16px; max-width: 58ch; }
.fx-spec + .fx-spec { margin-top: 18px; }
.spec-stack { border-left: 1px solid var(--accent); padding-left: 16px; max-width: 58ch; }
.spec-stack .fx-spec { border-left: 0; padding-left: 0; max-width: none; }

/* ───────────── Layout helpers ───────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--gutter); position: relative; z-index: 2; }
.demo-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
.section__head { max-width: 760px; margin: 0 auto 48px; }
.section__head h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); }
.section__foot { margin-top: 36px; color: var(--text-faint); font-size: 13px; font-family: var(--font-mono); }

/* ───────────── Header ───────────── */
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 17px var(--gutter); }
/* full-width frosted bar behind the centered header content */
.site-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(20, 23, 27, 0.42); }
.site-header::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--border-strong); }
.header-notch { position: absolute; right: var(--gutter); bottom: -12px; z-index: 31; font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; color: var(--ink); background: var(--accent); padding: 6px 12px 6px 14px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); display: none; }
.nav { font-family: var(--font-mono); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--text-dim); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-fast) var(--ease-techno); }
.nav a::before { content: "// "; color: var(--text-faint); }
.nav a:hover { color: var(--text); }
.nav a:hover::before { color: var(--accent); }
.nav__cta { color: var(--accent) !important; }
.nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 26px; padding: 4px 3px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; height: 2px; width: 100%; background: var(--text); }

/* ───────────── Buttons ───────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: 0; transition: transform var(--dur-fast) var(--ease-techno), background var(--dur-base); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn .slash { color: var(--bg); }
.btn--primary { background: var(--accent); color: var(--ink); clip-path: polygon(calc(var(--cut) / 2) 0, 100% 0, 100% calc(100% - calc(var(--cut-y) / 2)), calc(100% - calc(var(--cut) / 2)) 100%, 0 100%, 0 calc(var(--cut-y) / 2)); }
.btn--primary:hover { background: #fff; filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0px 0px 66px rgba(250, 202, 8, 0.25)); }
.btn--ghost { background: none; color: var(--text-dim); }
.btn--ghost:hover { color: var(--text); }
.btn--ghost .slash { color: var(--text-faint); }
.btn--block { width: 100%; }

/* ───────────── Hero — 16:9 media left, copy right (same split as vision/CTA) ───────────── */
.hero { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; min-height: 86vh; padding: clamp(36px, 7vh, 80px) var(--gutter) clamp(56px, 9vh, 110px); display: flex; flex-direction: column; justify-content: center; }
.hero__layout { display: grid; grid-template-columns: var(--split-cols); gap: max(4vw, var(--split-gap)); align-items: center; width: 100%; }
.hero__media { position: relative; aspect-ratio: 1121 / 720; width: 100%; min-width: 0; overflow: hidden; clip-path: var(--clip-notch); background:
  linear-gradient(135deg, rgba(240, 238, 246, 0.06), transparent 55%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05)); }
.hero__media::after { content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-right: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.hero__copy { max-width: none; width: 100%; text-align: left; min-width: 0; }
.hero h1 { font-size: clamp(2.6rem, 1rem + 5.5vw, 6.2rem); line-height: 0.8; letter-spacing: -0.05em; margin: 0; }
.hero .lede { color: var(--text-dim); font-family: var(--font-mono); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); margin-top: 26px; max-width: 46ch; }
/* Above the stacking breakpoint, size both columns to their CONTENT and center the pair.
   The copy column's visible width is the lede's 46ch — a 0.7fr track is wider than that and
   dumps the slack as a void on the right, pulling the whole composition left. Content-sized
   tracks + justify-content:center split that slack into equal outer margins instead. Media
   gets an explicit capped width (was 100% of an fr track) so it keeps its size but stops
   growing on ultra-wide — the content stays centered rather than drifting right. Below 1366px
   the base grid + single-col stack take over and media returns to full width. */
@media (min-width: 1366px) {
  .hero__layout { grid-template-columns: auto auto; justify-content: center; }
  .hero__media { width: clamp(300px, 52vw, 1010px); }
  .hero__copy { width: auto; }
}
.hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 36px; flex-wrap: wrap; }
.slash { color: var(--accent); font-family: var(--font-mono); }

/* ───────────── Anti-app strip ───────────── */
.strip { max-width: 75rem; margin: 0 auto; padding: clamp(60px, 9vw, 100px) var(--gutter); text-align: center; position: relative; z-index: 2; }
.strip p { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 400; line-height: 1.2; text-transform: lowercase; letter-spacing: -0.02em; }

/* ───────────── Core pillars (message house: 3 columns) ───────────── */
.pillars { padding-top: clamp(28px, 5vw, 64px); }
.pillars__intro { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(34px, 5vw, 58px); }
.pillars__intro .kicker { grid-column: 1 / -1; margin-bottom: -2px; }
.pillars__intro h2 { font-size: clamp(2.15rem, 1.15rem + 4.2vw, 4.6rem); max-width: 850px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border); }
.pillar { position: relative; display: flex; flex-direction: column; padding: 16px 16px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(240, 238, 246, 0.035), rgba(240, 238, 246, 0.012)); }
.pillar::after { content: ""; position: absolute; inset: auto 18px 16px auto; width: 38px; height: 3px; background: var(--accent); opacity: 0.75; }
.pillar__media { position: relative; aspect-ratio: 1121 / 720; width: 100%; margin: 0 0 20px; overflow: hidden; clip-path: var(--clip-notch); background:
  linear-gradient(135deg, rgba(240, 238, 246, 0.06), transparent 55%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05)); }
.pillar__media::after { content: ""; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-right: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.pillar__media { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.85; transition: opacity 250ms ease; }
.pillar__media:hover { opacity: 1; }
/* Per-pillar thumbnail backgrounds — kept in the external stylesheet (not inline
   style attrs) so the site's strict CSP (style-src 'self') doesn't block them. */
.pillar__media--matters { background-image: url(/assets/th-see-what-matters.webp); }
.pillar__media--team { background-image: url(/assets/th-work-with-your-team.webp); }
.pillar__media--fun { background-image: url(/assets/th-bring-the-fun-back.webp); }
.pillar__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; transition: opacity 250ms ease; }
.pillar__media:hover video { opacity: 1; }
.pillar__num { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 32px; height: 22px; margin-bottom: 22px; color: var(--ink); background: var(--pillar-tag, var(--accent)); box-shadow: 0 0 18px color-mix(in srgb, var(--pillar-tag, var(--accent)) 34%, transparent); font: 700 11px/1 var(--font-mono); letter-spacing: 0.08em; clip-path: var(--clip-tab); }
.pillar h3 { font-size: clamp(1.28rem, 1rem + 1vw, 1.72rem); margin-bottom: 12px; }
.pillar p { color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; line-height: 1.65; padding-bottom: 12px; }
.pillar:nth-child(2) { --pillar-tag: var(--accent-2); }
.pillar:nth-child(3) { --pillar-tag: var(--accent); }

/* ───────────── Widgets ───────────── */
/* Fixed 4-col tracks so every card is the same width; row 2 can end short. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cards > .notch-glow { min-width: 0; width: 100%; }
.card-demo { position: relative; width: 100%; background: var(--bg-card); padding: 20px 18px 24px; min-height: 0; display: flex; flex-direction: column; align-items: stretch; clip-path: var(--clip-notch); transition: background var(--dur-base) var(--ease-techno), transform var(--dur-base) var(--ease-techno); }
.card-demo:hover { background: var(--bg-elev); }
.card-demo__id { display: block; align-self: flex-end; font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent); margin-bottom: 14px; }
.card-demo__media { aspect-ratio: 3456 / 2234; width: 100%; margin: 0 0 16px; overflow: hidden; clip-path: polygon(calc(var(--cut) / 2) 0, 100% 0, 100% calc(100% - calc(var(--cut-y) / 2)), calc(100% - calc(var(--cut) / 2)) 100%, 0 100%, 0 calc(var(--cut-y) / 2)); background:
  linear-gradient(135deg, rgba(240, 238, 246, 0.06), transparent 55%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.04)); }
.card-demo__media { opacity: 0.85; transition: opacity 250ms ease; }
.card-demo__media:hover { opacity: 1; }
/* Touch / coarse-pointer: no hover, so drop the recede-and-brighten (it would leave
   media permanently dimmed) and hide the never-loaded pillar video — static image only. */
@media (hover: none), (pointer: coarse) {
  .card-demo__media, .pillar__media { opacity: 1; }
  .pillar__media video { display: none; }
}
.card-demo__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: transform var(--dur-base) var(--ease-techno); will-change: transform; }
.card-demo__media:hover img { transform: scale(1.4); }
/* No tap-to-zoom on touch: the scale is a hover-only affordance and there's no cursor to
   follow, so a tap would just zoom to center. Kill it on coarse pointers AND anything under
   the 992px shell breakpoint — stylus devices (e.g. Galaxy S Pen) report hover:hover /
   pointer:fine and slip past the coarse checks, so the width guard catches them. Placed after
   the rule above so it wins on source order. */
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .card-demo__media:hover img { transform: none; }
}
.card-demo__media--ask { display: flex; align-items: center; justify-content: center; background: var(--accent); border-color: transparent; }
.card-demo__ask { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1; }
.card-demo h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem); }
.card-demo p { color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; margin-top: 8px; line-height: 1.55; }

/* Notch glow wrappers — filter must live on a PARENT of the clipped element:
   clip-path is applied *after* filter, so a drop-shadow on the clipped element
   itself gets clipped away. drop-shadow on the wrapper traces the child's
   notched silhouette. To add a yellow glow, uncomment the filter line below
   (or scope it to :hover / .open). */
.notch-glow { display: flex; filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)); }
/* Inset variant for the clipped media tiles (.pillar__media / .card-demo__media): same 1px
   double drop-shadow trick — filter on the wrapper so the media's own clip-path doesn't clip
   it away — but with the offsets reversed (light from bottom-right) so the notch reads as
   pressed-in rather than raised. Block, not flex: the media is the sole child at width:100%. */
.notch-glow--inset { display: block; filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.45)); }
.notch-glow > .card-demo, .notch-glow > .card { flex: 1 1 auto; width: 100%; min-width: 0; }
.nav__links-glow { display: contents; }   /* desktop: transparent to layout; becomes a box on mobile (see @media) */
/* .notch-glow { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 65%, transparent)); } */

/* ───────────── Foundation (trust + platform) ───────────── */
.private-band { max-width: var(--maxw); margin: 0 auto; padding: clamp(68px, 9vw, 116px) var(--gutter); position: relative; z-index: 2; display: grid; grid-template-columns: var(--split-cols); gap: var(--split-gap); align-items: end; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.private-band h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); margin-bottom: 22px; }
.private-band__copy { max-width: 720px; }
.private-band__proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.private-band__proof li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border); }
.private-band__proof li:last-child { border-bottom: 0; }
.private-band__proof span { color: var(--accent-2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ───────────── Journey invert (full-bleed accent pop) ───────────── */
.section--invert {
  max-width: none;
  width: 100%;
  color: var(--ink);
  background-color: var(--accent);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  background-position: center top;
}
.section--invert .section__head {
  max-width: min(760px, calc(var(--maxw) - 2 * var(--gutter)));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.section--invert,
.section--invert .kicker,
.section--invert .kicker .idx,
.section--invert h2,
.section--invert .hl,
.section--invert .fx-spec { color: var(--ink); }
.section--invert .kicker { font-weight: 600; }
.section--invert h2 { font-weight: 700; }
.section--invert .spec-stack { border-left: 1px solid var(--ink); }
.section--invert .fx-spec { font-weight: 500; }
/* inverted selection: black highlight, yellow text */
.section--invert ::selection { background: var(--ink); color: var(--accent); }

/* ───────────── Fun aside ───────────── */
/* bottom pad matches .private-band / cta-band vertical padding */
.aside-fun { text-align: center; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(68px, 9vw, 116px); position: relative; z-index: 2; }
.aside-fun p { font-family: var(--font-mono); font-size: 14px; color: var(--text-faint); }
.coin { color: var(--accent); font-weight: 700; letter-spacing: 0.06em; }
.fx-hazard { display: block; height: 3px; width: 64px; background: repeating-linear-gradient(45deg, var(--accent) 0 8px, var(--bg) 8px 16px); margin: 0 auto 18px; }

/* ───────────── CTA / form (shares .private-band 2-col grid with foundation) ───────────── */
.cta-band { align-items: center; border-bottom: 0; }
.cta-band .private-band__copy .platform-note { margin-top: 22px; color: var(--accent-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.cta-perk { color: var(--text) !important; }
.cta-perk strong { color: var(--accent); font-weight: 700; }
.cta-band__form { width: 100%; min-width: 0; display: flex; }
.cta-band__form > .form-card { width: 100%; }
.card { background: var(--bg-card); padding: 36px; clip-path: var(--clip-notch); }
.form-card .kicker { margin-bottom: 12px; }
.form-card__lead { color: var(--text-dim); font-family: var(--font-mono); font-size: 14px; margin: 0 0 22px; line-height: 1.55; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.muted { color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.field input { width: 100%; padding: 13px 15px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, 0.3); color: var(--text); font-family: var(--font-mono); font-size: 14px; transition: border-color var(--dur-fast) var(--ease-techno); }
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); }
.form-card__fineprint { color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; margin-top: 14px; text-align: center; }
.hp { position: absolute; left: -9999px; }

/* ───────────── Footer ───────────── */
.site-footer { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gutter) 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.site-footer__brand { display: flex; align-items: center; gap: 20px; }
.site-footer__logo { height: 20px; opacity: 0.55; }
.site-footer__brand p { color: var(--text-faint); font-family: var(--font-mono); font-size: 13px; }
.site-footer__idents { display: flex; flex-direction: column; gap: 4px; }
.site-footer__idents span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); }
.site-footer__idents span:first-child { color: var(--accent); }
.site-footer__copy { color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; }

/* ───────────── Toast ───────────── */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--border-strong); padding: 14px 26px; font-family: var(--font-mono); font-size: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); z-index: 80; animation: toast-in 0.3s ease; transition: opacity 0.4s ease; }
.toast.is-hiding { opacity: 0; }
.toast::before { content: "// "; color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ───────────── Responsive ───────────── */
/* Hero stacks early — video + copy need width before the rest of the page */
@media (max-width: 1365px) {
  .hero__layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.6rem, 1.1rem + 7vw, 5rem); }
}
/* Shell breakpoint: nav + 2-col bands + pillars */
@media (max-width: 991px) {
  .private-band { grid-template-columns: 1fr; align-items: start; }
  .pillars__intro { grid-template-columns: 1fr; align-items: start; }
  .pillar-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav__burger { display: flex; }
  .nav__links-glow { display: block; position: absolute; top: calc(100% - 8px); right: var(--gutter); z-index: 32; }
  .nav__links { display: none; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 28px; background: var(--bg-elev); clip-path: var(--clip-notch); }
  .nav__links.open { display: flex; }
}
@media (max-width: 720px) {
  .fx-glyphstrip, .frame { display: none; }
}
@media (max-width: 560px) {
  .pillar__num { margin-bottom: 16px; }
  .private-band__proof li { grid-template-columns: 1fr; gap: 4px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 26px; }
}

/* ═════════════════ Motion layer (anim.js / anime.js) ═════════════════
   Initial-hidden states gate on html.th-anim / html.th-booting, both added by
   head-init.js BEFORE first paint → no flash. JS toggles .is-in on reveal and
   removes .th-booting when the boot timeline completes. All the actual tweening
   is done by anime.js via CSSOM inline styles (CSP-safe: not style-src). */

/* ── Scroll reveals: fade-in-up ── */
html.th-anim .strip p,
html.th-anim .pillars__intro,
html.th-anim .pillar,
html.th-anim .section__head,
html.th-anim .cards > .notch-glow,
html.th-anim .private-band__copy,
html.th-anim .private-band__proof li,
html.th-anim .spec-stack,
html.th-anim .cta-band__form,
html.th-anim .aside-fun p,
html.th-anim .section__foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-techno),
              transform var(--dur-slow) var(--ease-techno);
  will-change: opacity, transform;
}
/* Revealed state must win over the multi-class hidden selectors above
   (e.g. `.cards > .notch-glow` is more specific than `.is-in`). !important is
   safe: none of these reveal targets carry their own hover transform. */
html.th-anim .is-in { opacity: 1 !important; transform: none !important; }

/* ── Intro boot: pre-boot hidden states (anime animates from here) ── */
html.th-booting .frame i { opacity: 0; transform: scale(0.6); }
html.th-booting .fx-grid,
html.th-booting .fx-glyphstrip,
html.th-booting .meta-coord,
html.th-booting .site-header .brand,
html.th-booting .site-header .nav,
html.th-booting .header-notch,
html.th-booting .hero__copy > * { opacity: 0; }

/* ── Header scramble: per-char cells (kept inline so headings still wrap) ── */
.th-sc { display: inline; }

/* ── Nav scrollspy: active link takes the existing hover treatment ── */
.nav a[aria-current="true"] { color: var(--text); }
.nav a[aria-current="true"]::before { color: var(--accent); }

/* ───────────── Reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo__fx, .dot--live { animation: none; }
  /* Motion layer disabled: reveal everything statically, no build-in. */
  html.th-anim .strip p,
  html.th-anim .pillars__intro,
  html.th-anim .pillar,
  html.th-anim .section__head,
  html.th-anim .cards > .notch-glow,
  html.th-anim .private-band__copy,
  html.th-anim .private-band__proof li,
  html.th-anim .spec-stack,
  html.th-anim .cta-band__form,
  html.th-anim .aside-fun p,
  html.th-anim .section__foot,
  html.th-booting .frame i,
  html.th-booting .fx-grid,
  html.th-booting .fx-glyphstrip,
  html.th-booting .meta-coord,
  html.th-booting .site-header .brand,
  html.th-booting .site-header .nav,
  html.th-booting .header-notch,
  html.th-booting .hero__copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}