/* Nandi site: modern premium, dark. Night backgrounds, crisp Geist type, one
   warm accent (marigold) used for actions, the device's screen and small
   signals. The one bold element is the device in the hero holding a live
   conversation; the rest stays calm. Colour pairs: tools/contrast.mjs. */

:root {
  --night: #07090F;
  --night-2: #0D111C;
  --night-3: #121826;
  --text: #EEF1F7;
  --text-2: #A6ADBE;
  --text-3: #8A91A3;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  --marigold: #FFB547;
  --marigold-2: #FF8A3D;
  --marigold-soft: rgb(255 181 71 / .12);
  --on-marigold: #1A1206;
  --glow-indigo: rgb(76 92 230 / .35);

  --font: "Geist", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --indic: "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans", sans-serif;
  --r: 22px;
  --r-sm: 14px;
  --wrap: 1200px;
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --section: clamp(80px, 11vw, 150px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark only;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--night); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[lang="hi"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"], [lang="kn"], [lang="ml"], [lang="or"], [lang="pa"], [lang="te"] { font-family: var(--indic); }
a { color: var(--marigold); text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 10px 16px; border-radius: 10px; background: var(--marigold); color: var(--on-marigold); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- buttons ------------------------------------------------------------------ */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--marigold); color: var(--on-marigold);
  font: 600 1rem/1 var(--font); letter-spacing: -.005em; text-decoration: none;
  box-shadow: 0 8px 30px rgb(255 181 71 / .22), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.button:hover { background: #FFC266; box-shadow: 0 10px 40px rgb(255 181 71 / .32), inset 0 1px 0 rgb(255 255 255 / .35); }
.button:active { transform: translateY(1px); }
.button--ghost { background: rgb(255 255 255 / .04); color: var(--text); border-color: var(--line-2); box-shadow: none; }
.button--ghost:hover { background: rgb(255 255 255 / .08); box-shadow: none; }
.button--small { min-height: 38px; padding: 0 16px; font-size: .9375rem; }

/* ---- header --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgb(7 9 15 / .72); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  padding-top: env(safe-area-inset-top);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.brand-logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.brand-default { display: inline-flex; align-items: center; gap: 10px; }
.brand-word { font: 600 1.25rem/1 var(--font); letter-spacing: -.02em; }
.mark { width: 28px; height: 28px; }
.mark path { fill: none; stroke: var(--marigold); stroke-width: 2.6; stroke-linecap: round; }
.mark circle { fill: var(--marigold); }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.button) { color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: color .2s; }
.site-nav a:not(.button):hover { color: var(--text); }
.menu-button { display: none; }
@media (max-width: 960px) {
  .menu-button {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 500 .9375rem var(--font); cursor: pointer;
  }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: rgb(7 9 15 / .96); border-bottom: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.button) { padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
  .site-nav .button { margin-top: 16px; }
}

/* ---- hero: the device and a live conversation ----------------------------------------- */
.hero { position: relative; padding: clamp(44px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); isolation: isolate; overflow: hidden; }
.hero::before {                          /* a faint grid that fades out */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  opacity: .5;
}
.hero-glow {
  position: absolute; z-index: -1; left: 50%; bottom: -10%; width: min(1100px, 140vw); height: 720px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 58%, rgb(255 181 71 / .30), transparent 70%),
    radial-gradient(closest-side at 30% 45%, var(--glow-indigo), transparent 70%),
    radial-gradient(closest-side at 72% 50%, rgb(255 138 61 / .16), transparent 70%);
  filter: blur(40px);
}
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / .04); color: var(--text-2); font-size: .875rem; font-weight: 500;
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 4px rgb(255 181 71 / .18); }
.hero h1 {
  margin-top: 24px; max-width: 15ch;
  font: 600 clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem)/1.02 var(--font); letter-spacing: -.045em;
  background: linear-gradient(180deg, #FFFFFF 35%, #B3BACA 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.lede { margin-top: 24px; max-width: 46ch; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

.stage { position: relative; margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }

/* the device, drawn in CSS; its screen runs the real bull engine */
.device { position: relative; width: clamp(240px, 26vw, 310px); }
.device-body {
  position: relative; padding: 26px 24px 30px; border-radius: 56px;
  background: linear-gradient(165deg, #2B303C 0%, #151922 48%, #0B0D13 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -10px 24px rgb(0 0 0 / .55),
              0 0 0 1px rgb(255 255 255 / .06), 0 40px 90px rgb(0 0 0 / .6);
}
.device-button { position: absolute; top: -3px; right: 64px; width: 40px; height: 6px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #3A404D, #1D212A); }
.device-screen {
  position: relative; border-radius: 16px; overflow: hidden; background: #040507;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 0 38px rgb(255 181 71 / .10);
}
.device-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / .07), transparent 38%); pointer-events: none; }
.device-screen img, .device-screen canvas { width: 100%; aspect-ratio: 2 / 1; }
.device-screen .bull-still { filter: invert(1) sepia(1) saturate(3) hue-rotate(-12deg) brightness(.95); opacity: .9; }
.device-grille {
  margin-top: 22px; height: clamp(120px, 13vw, 150px); border-radius: 22px;
  background: radial-gradient(circle, rgb(255 255 255 / .16) 1.1px, transparent 1.7px) 0 0 / 9px 9px;
  mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 55%, transparent 100%);
}
.device-led { position: absolute; left: 50%; bottom: 13px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3A3F4B; transition: background-color .3s, box-shadow .3s; }
.device.is-listening .device-led { background: #7C8BFF; box-shadow: 0 0 12px #7C8BFF; }
.device.is-speaking .device-led { background: var(--marigold); box-shadow: 0 0 14px var(--marigold); }
.device-shadow { position: absolute; left: 12%; right: 12%; bottom: -26px; height: 30px; border-radius: 50%; background: rgb(0 0 0 / .55); filter: blur(14px); z-index: -1; }
.device-rings { position: absolute; left: 50%; top: 66%; width: 0; height: 0; pointer-events: none; }
.device-rings i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgb(255 181 71 / .45); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .device.is-speaking .device-rings i { animation: ring 2.4s var(--ease) infinite; }
  .device.is-speaking .device-rings i:nth-child(2) { animation-delay: .8s; }
  .device.is-speaking .device-rings i:nth-child(3) { animation-delay: 1.6s; }
}
@keyframes ring { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }

.bubble {
  position: relative; max-width: 300px; padding: 16px 18px; border-radius: 18px;
  background: rgb(18 24 38 / .72); border: 1px solid var(--line-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgb(0 0 0 / .35);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bubble p { font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
.bubble-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-3); font-size: .8125rem; font-weight: 500; }
.bubble-lang, .bubble-time { padding: 2px 8px; border-radius: 999px; background: var(--marigold-soft); color: var(--marigold); font-size: .75rem; font-weight: 600; }
.bubble-time { background: rgb(255 255 255 / .06); color: var(--text-2); }
.bubble--you { justify-self: end; margin-bottom: 120px; border-bottom-right-radius: 6px; }
.bubble--nandi { justify-self: start; margin-top: 120px; border-bottom-left-radius: 6px; border-color: rgb(255 181 71 / .35); }
.bubble.is-hidden { opacity: 0; transform: translateY(8px); }
@media (max-width: 860px) {
  .stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
  .device { order: -1; margin-bottom: 20px; }
  .bubble--you, .bubble--nandi { justify-self: center; margin: 0; width: 100%; max-width: 420px; }
}

/* ---- built on ---------------------------------------------------------------------- */
.builton { border-block: 1px solid var(--line); background: rgb(255 255 255 / .015); }
.builton-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.builton-list li { display: flex; flex-direction: column; gap: 2px; padding: 22px 24px; border-left: 1px solid var(--line); }
.builton-list li:first-child { border-left: 0; padding-left: 0; }
.builton-list span { color: var(--text-3); font-size: .8125rem; }
.builton-list strong { color: var(--text); font-weight: 500; font-size: .9375rem; }
@media (max-width: 860px) {
  .builton-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builton-list li { padding: 16px 0 16px 16px; }
  .builton-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .builton-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---- sections ------------------------------------------------------------------------ */
.section { padding: var(--section) 0; }
.section--alt { background: var(--night-2); border-block: 1px solid var(--line); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); }
.section-head h2 { font: 600 clamp(2rem, 1.3rem + 2.8vw, 3.25rem)/1.08 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.section-head p { margin-top: 18px; color: var(--text-2); font-size: 1.125rem; text-wrap: pretty; }
.section-head--left { text-align: left; margin-left: 0; }

/* ---- bento --------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: 16px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  border: 1px solid var(--line); transition: border-color .3s;
}
.card:hover { border-color: var(--line-2); }
.card--wide { grid-column: span 2; }
.card--tall { grid-row: span 2; }
.card h3 { font: 600 1.1875rem/1.3 var(--font); letter-spacing: -.015em; }
.card-text p { margin-top: 8px; color: var(--text-2); font-size: .98rem; max-width: 44ch; }
.mini { margin-top: auto; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card--tall { grid-row: span 1; } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .card--wide { grid-column: span 1; } }

.marquee { margin: auto -28px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 40px; padding: 8px 0; }
.marquee-track span { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 500; color: var(--text); white-space: nowrap; }
.marquee-track span:nth-child(3n+1) { color: var(--marigold); }
@media (prefers-reduced-motion: no-preference) { .marquee-track { animation: slide 40s linear infinite; } }
@keyframes slide { to { transform: translateX(-50%); } }

.mini--memory { display: flex; flex-direction: column; gap: 8px; }
.mini-q, .mini-a { padding: 10px 14px; border-radius: 14px; font-size: .9375rem; max-width: 90%; }
.mini-q { align-self: flex-end; background: rgb(255 255 255 / .07); border-bottom-right-radius: 4px; }
.mini-a { align-self: flex-start; background: var(--marigold-soft); border: 1px solid rgb(255 181 71 / .3); border-bottom-left-radius: 4px; }
.mini-tag { align-self: flex-start; color: var(--text-3); font-size: .8125rem; }

.mini--reminder { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); }
.mini-time { font: 600 2.75rem/1 var(--font); letter-spacing: -.04em; }
.mini-time small { font-size: .9rem; margin-left: 6px; color: var(--text-2); letter-spacing: 0; }
.mini-what { font-weight: 500; }
.mini-where { color: var(--marigold); font-size: .875rem; }

.mini--rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room { position: relative; padding: 14px 12px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgb(255 255 255 / .02); color: var(--text-3); font-size: .8125rem; }
.room--from { color: var(--text-2); border-color: var(--line-2); }
.room--on { color: var(--text); border-color: rgb(255 181 71 / .55); background: var(--marigold-soft); }
.room--on::after { content: ""; position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 0 rgb(255 181 71 / .6); }
@media (prefers-reduced-motion: no-preference) { .room--on::after { animation: ping 1.8s var(--ease) infinite; } }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgb(255 181 71 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 181 71 / 0); } }

.mini-screen { margin-top: auto; border-radius: 14px; overflow: hidden; background: #040507; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 0 30px rgb(255 181 71 / .08); }
.mini-screen canvas { width: 100%; aspect-ratio: 2 / 1; }
.moods { display: flex; flex-wrap: wrap; gap: 8px; }
.moods button {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--text-2); font: 500 .875rem var(--font); cursor: pointer; transition: all .2s;
}
.moods button:hover { color: var(--text); border-color: rgb(255 255 255 / .28); }
.moods button[aria-pressed="true"] { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }

.wave { display: flex; align-items: center; gap: 5px; height: 64px; }
.wave i { flex: 1; height: 30%; border-radius: 3px; background: linear-gradient(180deg, var(--marigold), var(--marigold-2)); opacity: .85; }
.wave i:nth-child(4n+1) { height: 45%; } .wave i:nth-child(4n+2) { height: 80%; } .wave i:nth-child(4n+3) { height: 55%; } .wave i:nth-child(5n) { height: 95%; }
@media (prefers-reduced-motion: no-preference) {
  .wave i { animation: eq 1.2s ease-in-out infinite alternate; }
  .wave i:nth-child(2n) { animation-delay: -.4s; } .wave i:nth-child(3n) { animation-delay: -.8s; } .wave i:nth-child(5n) { animation-delay: -.2s; }
}
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.mini-stat { display: block; margin-top: 14px; color: var(--text-2); font-size: .875rem; }
.mini-stat strong { color: var(--text); font-weight: 600; }

.mini--update { display: flex; align-items: center; gap: 18px; }
.ring { width: 76px; height: 76px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke: var(--line-2); stroke-width: 5; }
.ring .ring-fill { stroke: var(--marigold); stroke-linecap: round; stroke-dasharray: 164; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .ring .ring-fill { animation: fill 3.2s var(--ease) infinite; } }
@keyframes fill { 0% { stroke-dashoffset: 164; } 60%, 100% { stroke-dashoffset: 0; } }
.mini--update strong { display: block; font: 600 1.75rem/1.1 var(--font); letter-spacing: -.03em; }
.mini--update span { color: var(--text-2); font-size: .875rem; }

.chipgrid { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: 3px; }
.chipgrid i { aspect-ratio: 1; border-radius: 2px; background: rgb(255 255 255 / .06); }
.chipgrid i.on { background: var(--marigold); }
.chipgrid i.keep { background: rgb(124 139 255 / .35); }

/* ---- pipeline ------------------------------------------------------------------------- */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pipeline::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 1px; background: linear-gradient(90deg, var(--marigold), rgb(255 181 71 / .15)); }
.pipeline li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night-2); border: 1px solid rgb(255 181 71 / .6); color: var(--marigold); font-weight: 600; box-shadow: 0 0 24px rgb(255 181 71 / .18); }
.pipeline h3 { margin-top: 12px; font: 600 1.25rem/1.2 var(--font); letter-spacing: -.02em; }
.pipeline p { color: var(--text-2); font-size: .98rem; }
.step-t { align-self: flex-start; margin-top: auto; padding: 4px 10px; border-radius: 999px; background: var(--marigold-soft); color: var(--marigold); font-size: .8125rem; font-weight: 600; }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pipeline::before { left: 20px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; background: linear-gradient(180deg, var(--marigold), rgb(255 181 71 / .15)); }
  .pipeline li { padding-left: 60px; }
  .step-n { position: absolute; left: 0; top: 0; }
  .pipeline h3 { margin-top: 6px; }
}

/* ---- dashboard in a browser frame ------------------------------------------------------ */
.browser {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--night-3);
  box-shadow: 0 50px 120px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .03);
}
.browser-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .03); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / .12); }
.browser-bar span { margin-left: 12px; padding: 4px 12px; border-radius: 8px; background: rgb(255 255 255 / .05); color: var(--text-3); font-size: .8125rem; }
.browser-shot { width: 100%; }

/* ---- hardware -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.specs > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.specs dt { color: var(--text-3); font-size: .9375rem; }
.specs dd { color: var(--text); }
@media (max-width: 480px) { .specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.photos { display: grid; gap: 16px; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line-2); }
.board-render { width: 100%; filter: drop-shadow(0 40px 50px rgb(0 0 0 / .65)) drop-shadow(0 0 60px rgb(255 181 71 / .08)); }

/* ---- numbers --------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.facts > div { padding: 28px 24px; border-radius: var(--r); border: 1px solid var(--line); background: rgb(255 255 255 / .02); }
.facts dt { font: 600 clamp(2.75rem, 1.8rem + 3vw, 4.25rem)/1 var(--font); letter-spacing: -.05em; background: linear-gradient(180deg, #fff 40%, #9AA2B4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts dt small { font-size: .42em; margin-left: 4px; letter-spacing: -.01em; -webkit-text-fill-color: var(--marigold); }
.facts dd { margin-top: 12px; color: var(--text-2); font-size: .9375rem; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ---- film ------------------------------------------------------------------------------- */
.film-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .film-grid { grid-template-columns: minmax(0, 1fr); } }
.film h2 { font: 600 clamp(2rem, 1.3rem + 2.8vw, 3.25rem)/1.08 var(--font); letter-spacing: -.035em; }
.film-lede { margin: 18px 0 28px; color: var(--text-2); font-size: 1.125rem; max-width: 40ch; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); }
.video-play { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: #040507; cursor: pointer; box-shadow: 0 40px 90px rgb(0 0 0 / .5); }
.video-screen { display: block; aspect-ratio: 16 / 9; }
.video-screen img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) sepia(1) saturate(3) hue-rotate(-12deg) brightness(.8); opacity: .75; }
.video-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: rgb(255 255 255 / .92); color: #0B0D13; font: 600 1rem var(--font);
  box-shadow: 0 20px 50px rgb(0 0 0 / .45); transition: transform .25s var(--ease);
}
.video-label svg { width: 18px; height: 18px; fill: currentColor; }
.video-play:hover .video-label { transform: translate(-50%, -50%) scale(1.04); }
.video-alt { margin-top: 16px; color: var(--text-3); font-size: .9375rem; }

/* ---- footer ------------------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand p { color: var(--text-2); font-size: .9375rem; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--text-2); text-decoration: none; font-size: .9375rem; }
.footer-nav a:hover { color: var(--text); }
.credit { justify-self: end; text-align: right; }
.credit p { color: var(--text-3); font-size: .875rem; max-width: 34ch; margin-left: auto; }
.credit-logos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px 22px; margin-top: 14px; }
.credit-logos img { height: 32px; width: auto; max-width: 130px; object-fit: contain; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .credit { justify-self: start; text-align: left; }
  .credit p { margin-left: 0; }
  .credit-logos { justify-content: flex-start; }
}

@media (min-width: 1800px) { :root { --wrap: 1320px; } body { font-size: 1.125rem; } }
@media (min-width: 2400px) { :root { --wrap: 1480px; } html { font-size: 112.5%; } }