/* ============================================================
   Double Zero — Every world begins at zero.
   Warm paper canvas with a soft light field, frosted-glass
   plates, hairline borders, no shadows. One typeface
   (Inter + LINE Seed KR), no uppercase. One accent: stream blue.
   ============================================================ */

/* Original Latin faces, pinned to local files so Safari and Chromium use
   identical font bytes instead of user-agent-specific Google Fonts output. */
@font-face {
  font-family: 'Doublezero Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('./assets/fonts/Inter-Latin-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Doublezero Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('./assets/fonts/SpaceGrotesk-Latin-Variable.woff2') format('woff2');
}

/* LINE Seed KR — self-hosted. A private family name prevents an installed
   local copy from taking precedence while preserving the original faces. */
@font-face {
  font-family: 'Doublezero LINE Seed KR';
  font-weight: 300;
  font-style: normal;
  font-display: block;
  src: url('./assets/fonts/LINESeedKR-Thin.woff2') format('woff2');
}
@font-face {
  font-family: 'Doublezero LINE Seed KR';
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url('./assets/fonts/LINESeedKR-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Doublezero LINE Seed KR';
  font-weight: 700;
  font-style: normal;
  font-display: block;
  src: url('./assets/fonts/LINESeedKR-Bold.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* neutrals — warm zinc */
  --obsidian: #09090b;
  --graphite: #18181b;
  --slate: #27272a;
  --iron: #3f3f46;
  --fog: #71717a;
  --ash: #a1a1aa;
  --mist: #d4d4d8;
  --paper: #f6f5f2;
  --snow: #ffffff;

  /* glass layers */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --inset: rgba(17, 17, 20, 0.028);
  --hairline: rgba(17, 17, 20, 0.08);
  --hairline-soft: rgba(17, 17, 20, 0.05);

  /* single accent — brand stream blue */
  --stream: #00578d;

  /* Original typography: Inter for Latin, LINE Seed KR for Korean. */
  --display-font: 'Doublezero Inter', 'Doublezero LINE Seed KR', -apple-system,
    BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  --sans: 'Doublezero Inter', 'Doublezero LINE Seed KR', -apple-system,
    BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;

  --max: 1600px;
  --gap: 18px;

  --r-card: 36px;
  --r-inner: 20px;
  --r-btn: 14px;
  --r-chip: 12px;
}

* { box-sizing: border-box; }

p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the light field behind the glass — soft, fixed, barely there */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 540px at 12% 6%, rgba(97, 128, 169, 0.12), transparent 70%),
    radial-gradient(880px 660px at 88% 24%, rgba(0, 87, 141, 0.09), transparent 70%),
    radial-gradient(760px 600px at 30% 80%, rgba(136, 162, 190, 0.14), transparent 70%),
    radial-gradient(640px 520px at 78% 92%, rgba(97, 128, 169, 0.07), transparent 70%);
}

button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--stream); color: #fff; }

:focus-visible {
  outline: 2px solid var(--stream);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  transform: translateY(-200%);
  background: var(--obsidian); color: var(--snow);
  padding: 10px 16px; font-weight: 500; font-size: 13px;
  border-radius: var(--r-btn);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   Topbar — floating glass pill
   ============================================================ */

.topbar {
  position: fixed;
  inset: 12px 0 auto;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 var(--gap);
  pointer-events: none;
}
.topbar-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--max);
  height: 60px;
  padding: 0 12px 0 22px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 30px rgba(20, 24, 34, 0.06);
  transition: background 220ms ease, border-color 220ms ease,
    box-shadow 220ms ease;
}
/* once the page scrolls, the pill separates from the white plates below */
.topbar.is-scrolled .topbar-inner {
  background: rgba(252, 252, 251, 0.92);
  border-color: rgba(17, 17, 20, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(20, 24, 34, 0.06),
    0 14px 36px rgba(20, 24, 34, 0.14);
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}
.brand-logo { height: 26px; width: auto; }

.site-nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.site-nav a {
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--iron);
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.site-nav a:hover {
  color: var(--obsidian);
  background: rgba(255, 255, 255, 0.7);
}

.lang-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  cursor: pointer;
}
.lang-pill {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fog);
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.lang-pill.is-active {
  background: var(--obsidian);
  color: var(--snow);
}

/* ============================================================
   Plates — frosted glass panels on the light field
   ============================================================ */

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 92px var(--gap) 0;
}

.plate {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.1) 22%, rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.25) 100%),
    var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--r-card);
  padding: clamp(32px, 3.6vw, 60px) clamp(40px, 5vw, 88px) clamp(40px, 5vw, 88px);
  backdrop-filter: saturate(140%) blur(22px);
  -webkit-backdrop-filter: saturate(140%) blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(20, 24, 34, 0.04),
    0 1px 2px rgba(20, 24, 34, 0.04),
    0 24px 40px -16px rgba(20, 24, 34, 0.08),
    0 56px 96px -32px rgba(20, 24, 34, 0.07);
}

/* ============================================================
   Hero — vast, centered
   ============================================================ */

/* the hero breaks out of the plate system: full-bleed canvas */
.hero-plate {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  margin-bottom: clamp(28px, 4vw, 56px);
  min-height: calc(100svh - 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.hero-plate > :not(.world) {
  position: relative;
  z-index: 1;
}

/* the world — work stills drifting on faint orbits around the headline */
.world {
  --rx: 42%;
  --ry: 40%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
}
.wtile {
  position: absolute;
  margin: 0; /* reset UA figure margin (1em 40px) — it shifted the whole ring */
  transform-origin: center;
  translate: -50% -50%;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(20, 24, 34, 0.06),
    0 8px 18px -6px rgba(20, 24, 34, 0.14),
    0 26px 50px -18px rgba(20, 24, 34, 0.22);
  transform: rotate(var(--rot, 0deg));
  will-change: transform, filter;
  pointer-events: auto;
  transition: filter 320ms ease, opacity 320ms ease, box-shadow 320ms ease;
}

/* glass sheen across the top edge */
.wtile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 15px;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 26%,
    rgba(255, 255, 255, 0) 52%);
}
/* far tiles come into focus when the pointer reaches them */
.wtile:hover {
  filter: blur(0) !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(20, 24, 34, 0.08),
    0 14px 26px -8px rgba(20, 24, 34, 0.2),
    0 40px 70px -22px rgba(20, 24, 34, 0.28);
}
.wtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.12);
  animation: wbob 8s ease-in-out infinite alternate;
}
@keyframes wbob {
  from { transform: translateY(-3px) scale(1.12); }
  to   { transform: translateY(3px) scale(1.12); }
}
.wtile img { animation-delay: calc(var(--i, 0) * -1.3s); }

/* orderly ring — 12 unique stills, evenly spaced every 30°.
   Every tile derives from --rx/--ry so responsive overrides move the
   whole ring, not just part of it. Sizes scale with the viewport. */
.r1  { --rot: -5deg; --i: 0;  width: clamp(126px, 10.4vw, 230px); left: calc(50% + var(--rx));           top: 50%; }
.r2  { --rot: 5deg;  --i: 1;  width: clamp(98px, 8.1vw, 178px);   left: calc(50% + var(--rx) * 0.866);   top: calc(50% + var(--ry) * 0.5);   filter: blur(1.2px); opacity: 0.82; }
.r3  { --rot: -5deg; --i: 2;  width: clamp(126px, 10.4vw, 230px); left: calc(50% + var(--rx) * 0.5);     top: calc(50% + var(--ry) * 0.866); }
.r4  { --rot: 5deg;  --i: 3;  width: clamp(98px, 8.1vw, 178px);   left: 50%;                             top: calc(50% + var(--ry));         filter: blur(1.2px); opacity: 0.82; }
.r5  { --rot: -5deg; --i: 4;  width: clamp(126px, 10.4vw, 230px); left: calc(50% - var(--rx) * 0.5);     top: calc(50% + var(--ry) * 0.866); }
.r6  { --rot: 5deg;  --i: 5;  width: clamp(98px, 8.1vw, 178px);   left: calc(50% - var(--rx) * 0.866);   top: calc(50% + var(--ry) * 0.5);   filter: blur(1.2px); opacity: 0.82; }
.r7  { --rot: -5deg; --i: 6;  width: clamp(126px, 10.4vw, 230px); left: calc(50% - var(--rx));           top: 50%; }
.r8  { --rot: 5deg;  --i: 7;  width: clamp(98px, 8.1vw, 178px);   left: calc(50% - var(--rx) * 0.866);   top: calc(50% - var(--ry) * 0.5);   filter: blur(1.2px); opacity: 0.82; }
/* Upper-arc tiles carry a px floor on their distance from center: the
   headline block sits ~120px above hero center, so on short viewports a
   purely %-based ring would drop these three tiles onto the text. The
   floor (scaling with vw like the headline itself) pins them above the
   copy no matter the window size — worst case they clip off the top. */
.r9  { --rot: -5deg; --i: 8;  width: clamp(126px, 10.4vw, 230px); left: calc(50% - var(--rx) * 0.5);     top: calc(50% - max(var(--ry) * 0.866, 210px + 6vw)); }
.r10 { --rot: 5deg;  --i: 9;  width: clamp(98px, 8.1vw, 178px);   left: 50%;                             top: calc(50% - max(var(--ry), 200px + 5.5vw));       filter: blur(1.2px); opacity: 0.82; }
.r11 { --rot: -5deg; --i: 10; width: clamp(126px, 10.4vw, 230px); left: calc(50% + var(--rx) * 0.5);     top: calc(50% - max(var(--ry) * 0.866, 210px + 6vw)); }
.r12 { --rot: 5deg;  --i: 11; width: clamp(98px, 8.1vw, 178px);   left: calc(50% + var(--rx) * 0.866);   top: calc(50% - var(--ry) * 0.5);   filter: blur(1.2px); opacity: 0.82; }

.display {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(44px, 6.1vw, 84px);
  font-weight: 300;
  -webkit-text-stroke: 1.85px currentColor;
  line-height: 1.18;
  letter-spacing: 0.015em;
  color: var(--obsidian);
  word-break: keep-all;
}
.display .zero { color: inherit; }
html:lang(en) .display { -webkit-text-stroke: 0.5px currentColor; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(32px, 4.5vw, 44px);
}

/* backed-by — quiet logo marquee under the hero CTAs */
.backed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 7vw, 80px);
  width: min(920px, 92%);
}
.backed-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.backed-viewport {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  border-radius: 999px;
  /* glass backdrop so logos stay legible when ring tiles drift behind */
  background: rgba(244, 244, 245, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to right,
    transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right,
    transparent, #000 9%, #000 91%, transparent);
}
.backed-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: backscroll 26s linear infinite;
}
.backed-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fog);
  white-space: nowrap;
}
.backed-item img {
  height: 22px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.9;
}
@keyframes backscroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .backed-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .backed-track .backed-item:nth-child(n+6) { display: none; }
}

/* ============================================================
   Buttons · chips
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: var(--r-btn);
  transition: transform 160ms ease, background 160ms ease,
    border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-dark {
  background: var(--obsidian);
  color: var(--snow);
  border: 1.5px solid #2c2e34;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-dark:hover { background: var(--slate); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--iron);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover {
  color: var(--obsidian);
  border-color: var(--ash);
}

.btn-light {
  background: var(--snow);
  color: var(--obsidian);
  border: 1px solid var(--snow);
}
.btn-light:hover { background: rgba(255, 255, 255, 0.85); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--iron);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-chip);
  white-space: nowrap;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   Shared type — one family, weight does the work
   ============================================================ */


.meta {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ash);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--obsidian);
  word-break: keep-all;
}
h2 em {
  font-style: normal;
  color: var(--stream);
  font-family: 'Doublezero Space Grotesk', var(--sans);
  font-variant-numeric: tabular-nums;
}

h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--obsidian);
  word-break: keep-all;
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  color: var(--stream);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 5px 14px rgba(20, 24, 34, 0.05);
}
.step-icon svg { width: 21px; height: 21px; }

.sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 14px;
  color: var(--stream);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hairline-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 6px 18px rgba(20, 24, 34, 0.05);
}
.sec-icon svg { width: 24px; height: 24px; }

.statement-sub {
  max-width: 680px;
  margin: 24px 0 0;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--fog);
  word-break: keep-all;
}

/* ============================================================
   Manifesto — flow diagram + values
   ============================================================ */



.flow-diagram {
  margin-top: clamp(40px, 5.5vw, 64px);
  padding: clamp(20px, 3vw, 40px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-inner);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
  overflow-x: auto;
}
.flow-diagram svg {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
  font-family: var(--sans);
}
.fd-node {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(17, 17, 20, 0.12);
}
.fd-node-text { font-size: 17px; font-weight: 500; fill: var(--graphite); }
.fd-node-dim { stroke-dasharray: 5 5; stroke: rgba(17, 17, 20, 0.14); fill: rgba(255, 255, 255, 0.4); }
.fd-dim-text { fill: var(--ash); }
.fd-node-live { stroke: rgba(0, 87, 141, 0.45); fill: rgba(0, 87, 141, 0.05); }
.fd-live-text { fill: var(--stream); }
.fd-broken {
  stroke: #bdbdc2;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.fd-fade { opacity: 0.4; }
.fd-x path { stroke: #c9c9ce; stroke-width: 1.6; stroke-linecap: round; }
.fd-leader line { stroke: rgba(17, 17, 20, 0.12); stroke-width: 1; stroke-dasharray: 2 4; }
.fd-chip { fill: rgba(255, 255, 255, 0.8); stroke: rgba(17, 17, 20, 0.1); }
.fd-chip-text { font-size: 14px; fill: var(--fog); }
.fd-live { stroke: url(#fdGrad); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.fd-capsule { fill: #ffffff; stroke: var(--graphite); stroke-width: 1.6; }
.fd-capsule-text { font-size: 17px; font-weight: 600; fill: var(--graphite); }

@media (prefers-reduced-motion: reduce) {
  .fd-spark { display: none; }
}
/* EN labels are longer — shrink inside the fixed SVG chips */
html:lang(en) .fd-chip-text { font-size: 12.5px; }
html:lang(en) .fd-node-text { font-size: 15px; }

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 5.5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.value {
  display: flex;
  flex-direction: column;
  padding: 4px 32px;
}
.value:first-child { padding-left: 0; }
.value:last-child { padding-right: 0; }
.value + .value { border-left: 1px solid var(--hairline); }
.value-num {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ash);
  margin-bottom: 16px;
}
.value h3 { font-size: 20px; }
.value-tag {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--stream);
}
.value p:not(.value-tag) {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog);
  word-break: keep-all;
}

/* ============================================================
   Section scaffolding
   ============================================================ */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head .meta { justify-self: end; align-self: start; }

.section-note {
  margin: 18px 0 0;
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--fog);
  word-break: keep-all;
}



.lead {
  margin: 0;
  max-width: 820px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--iron);
  word-break: keep-all;
}
.lead strong { color: var(--obsidian); font-weight: 500; }

.about-list {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.about-list li {
  padding: 4px 36px;
}
.about-list li:first-child { padding-left: 0; }
.about-list li:last-child { padding-right: 0; }
.about-list li + li {
  border-left: 1px solid var(--hairline);
}
.about-list h3 { font-size: 14.5px; font-weight: 700; }
.about-list p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fog);
  word-break: keep-all;
}

.about-close {
  margin: 24px 0 clamp(36px, 5vw, 56px);
  font-size: 15px;
  font-weight: 500;
  color: var(--stream);
  word-break: keep-all;
}

/* ============================================================
   Filmography — accordion rows
   ============================================================ */

.filmography {
  margin: clamp(44px, 5.5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filmrow {
  border-radius: var(--r-inner);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, background 200ms ease;
}
.filmrow:hover,
.filmrow.is-open {
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 2px 4px rgba(20, 24, 34, 0.05),
    0 20px 48px rgba(20, 24, 34, 0.1);
}

.filmrow-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.filmrow-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.filmrow.is-open .filmrow-num { color: var(--stream); }

.filmrow-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.filmrow-name .product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--obsidian);
  width: fit-content;
}
.product-logo {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: contain;
}
.product-logo-lg {
  width: 24px;
  height: 24px;
}
.filmrow-name a.product:hover { color: var(--stream); }
.filmrow-name .ext {
  font-size: 12px;
  color: var(--ash);
}
.filmrow-name .title {
  font-size: 12.5px;
  color: var(--fog);
  word-break: keep-all;
}

.filmrow-desc {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fog);
  word-break: keep-all;
}

.filmrow-year {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ash);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.filmrow-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  justify-self: end;
}
.filmrow-toggle::before,
.filmrow-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.6px;
  background: var(--iron);
  transform: translate(-50%, -50%);
  transition: transform 240ms ease;
}
.filmrow-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.filmrow.is-open .filmrow-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

.filmrow-more .filmrow-head {
  grid-template-columns: 44px 1fr;
  cursor: default;
}
.filmrow-more .product { color: var(--ash); }
.filmrow-more:hover {
  transform: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
}

.filmrow-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.filmrow.is-open .filmrow-more .filmrow-head {
  grid-template-columns: 44px 1fr;
  cursor: default;
}
.filmrow-more .product { color: var(--ash); }
.filmrow-more:hover {
  transform: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
}

.filmrow-panel { grid-template-rows: 1fr; }
.filmrow-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.filmrow-content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  padding: 4px 24px 24px;
}

.filmrow-plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-inner);
  border: 1px solid var(--hairline-soft);
  background: var(--inset);
  min-height: 220px;
}
.filmrow-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.filmrow-plate-light img { object-fit: contain; padding: 32px; }

.plate-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--iron);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-chip);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.filmrow-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.filmrow-detail > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--iron);
  word-break: keep-all;
}
.filmrow-detail > p strong { color: var(--obsidian); font-weight: 500; }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}
.stat {
  flex: 1 1 120px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-chip);
  box-shadow: 0 6px 18px rgba(20, 24, 34, 0.05);
}
.stat strong {
  display: block;
  font-family: 'Doublezero Space Grotesk', var(--sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg,
    var(--obsidian) 38%, #31609b 48%, #88a2be 50%,
    #31609b 52%, var(--obsidian) 62%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: numshine 3.4s linear infinite;
}
@keyframes numshine {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}
.stat span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fog);
  word-break: keep-all;
}

/* cost comparison — Shoty */
.cost-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.cost-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-chip);
  box-shadow: 0 6px 18px rgba(20, 24, 34, 0.05);
}
.cost-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fog);
}
.cost-value {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--obsidian);
  font-variant-numeric: tabular-nums;
}
.cost-note {
  justify-self: end;
  font-size: 11.5px;
  color: var(--ash);
  word-break: keep-all;
}
.cost-row-now .cost-value { color: var(--stream); }
.cost-savings {
  background: rgba(0, 87, 141, 0.05);
  border-color: rgba(0, 87, 141, 0.22);
}
.cost-savings .cost-label { color: var(--stream); }
.cost-savings .cost-value { color: var(--stream); font-size: 22px; }

/* ============================================================
   AX cards
   ============================================================ */

.ax-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 36px;
}
.ax-card:first-child { padding-left: 0; }
.ax-card:last-child { padding-right: 0; }
.ax-card + .ax-card {
  border-left: 1px solid var(--hairline);
}
.ax-card h3 { font-size: 18px; }
.ax-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--fog);
  word-break: keep-all;
}

/* ============================================================
   Proof — partners + strip
   ============================================================ */

.partners {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.partner {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
  border-radius: var(--r-inner);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.partner:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(20, 24, 34, 0.05),
    0 18px 44px rgba(20, 24, 34, 0.1);
}
.partner-logo {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 18px;
}
.partner-logo img {
  max-height: 30px;
  max-width: 120px;
  width: auto;
  opacity: 0.95;
}
.partner-kicker {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ash);
}
.partner-name {
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--obsidian);
  word-break: keep-all;
}
.partner-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fog);
  word-break: keep-all;
}

.clients-band {
  width: 100%;
  max-width: var(--max);
  margin: clamp(34px, 4.4vw, 62px) auto;
  padding: 0 clamp(8px, 1vw, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.clients-band .clients-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ash);
}
.client-card img.is-tall { height: 44px; }

/* studios using Shoty */
.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}
.clients-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ash);
  margin-right: 8px;
}
.clients-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}
.client-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 20px 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-inner);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.client-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(20, 24, 34, 0.05),
    0 18px 44px rgba(20, 24, 34, 0.1);
}
.client-card img {
  height: 30px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.95;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}
.proof-strip .chip { color: var(--fog); }
.proof-strip .num {
  font-family: 'Doublezero Space Grotesk', var(--sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg,
    var(--obsidian) 38%, #31609b 48%, #88a2be 50%,
    #31609b 52%, var(--obsidian) 62%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: numshine 3.4s linear infinite;
}
.strip-logo {
  height: 14px;
  width: auto;
  opacity: 0.9;
}
.strip-logo.is-tall { height: 18px; }

/* ============================================================
   Closing — the single dark glass moment
   ============================================================ */

.plate-dark {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 360px;
  box-shadow:
    0 2px 6px rgba(20, 24, 34, 0.1),
    0 32px 80px rgba(20, 24, 34, 0.18);
  background: rgba(12, 12, 15, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--snow);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.closing-cause {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(26px, 3.8vw, 44px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--snow);
  word-break: keep-all;
}

.closing-ask {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ash);
}

.contact-mark {
  position: absolute;
  right: 24px;
  top: 38%;
  width: clamp(220px, 30vw, 380px);
  aspect-ratio: 167 / 86;
  pointer-events: none;
  -webkit-mask-image: url('./assets/dbzr-symbol-color.svg');
  mask-image: url('./assets/dbzr-symbol-color.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: linear-gradient(100deg,
    #27476e 0%, #31609b 30%, #6180a9 44%,
    #d7e4f0 50%, #6180a9 56%, #31609b 70%, #27476e 100%);
  background-size: 260% 100%;
  opacity: 0.6;
  /* lenticular: the card tilts, and the light angle follows the tilt */
  animation: lenticular 2.2s ease-in-out infinite alternate;
  will-change: transform, background-position;
}
@keyframes lenticular {
  from {
    transform: translateY(-50%) perspective(900px) rotateY(-12deg) rotateX(2deg);
    background-position: 88% 0;
  }
  to {
    transform: translateY(-50%) perspective(900px) rotateY(12deg) rotateX(-2deg);
    background-position: 12% 0;
  }
}

.plate-dark .btn-light { margin-top: 26px; }

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--ash);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 3vw, 36px) 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}

.footer-col h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ash);
}
.footer-col h4.footer-h4-gap { margin-top: 24px; }
.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-col li {
  font-size: 13px;
  color: var(--fog);
  word-break: keep-all;
}
.footer-col a { transition: color 160ms ease; }
.footer-col a:hover { color: var(--obsidian); }

/* the sign-off — wordmark at full width, like a closing title card */
.footer-giant {
  margin-top: clamp(40px, 6vw, 72px);
}
.footer-giant img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-copy {
  display: block;
  text-align: right;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ash);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .filmrow-more .filmrow-head {
  grid-template-columns: 44px 1fr;
  cursor: default;
}
.filmrow-more .product { color: var(--ash); }
.filmrow-more:hover {
  transform: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 24, 34, 0.03),
    0 1px 2px rgba(20, 24, 34, 0.05),
    0 10px 28px rgba(20, 24, 34, 0.07);
}

.filmrow-panel { transition: none; }
  .btn, .lang-pill, .site-nav a { transition: none; }
  .wtile { animation: none; }
  .value, .partner, .filmrow { transition: none; }
  .contact-mark { animation: none; }
  .stat strong, .proof-strip .num {
    animation: none;
    background: none;
    color: var(--obsidian);
    -webkit-background-clip: initial;
    background-clip: initial;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1440px) {
  .world { --rx: 45%; --ry: 43%; }
}
@media (max-width: 1280px) {
  .world { --rx: 49%; --ry: 46%; }
  .wtile { width: clamp(88px, 8vw, 132px) !important; }
}

@media (max-width: 1080px) {
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filmrow-head { grid-template-columns: 36px minmax(0, 1fr) auto 40px; }
  .values { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .section-head .meta { justify-self: start; }
  .about-list { grid-template-columns: 1fr; gap: 16px; }
  .about-list li { padding: 0; }
  .about-list li + li { border-left: 0; padding-top: 16px; border-top: 1px solid var(--hairline); }
  .ax-steps { grid-template-columns: 1fr; gap: 20px; }
  .ax-card { padding: 0; }
  .ax-card + .ax-card { border-left: 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
  .filmrow-content { grid-template-columns: 1fr; }
  .filmrow-plate { min-height: 180px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  }

@media (max-width: 720px) {
  .site-nav { display: none; }
  .wtile { display: none; }
  .topbar-inner { padding-left: 18px; }
  .partners { grid-template-columns: 1fr 1fr; }
  .plate { border-radius: 24px; }
  .filmrow-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name toggle'
      'year toggle';
    row-gap: 6px;
    padding: 18px 18px;
  }
  .filmrow-num { display: none; }
  .filmrow-name { grid-area: name; }
  .filmrow-year { grid-area: year; }
  .filmrow-toggle { grid-area: toggle; }
  .filmrow-content { padding: 0 18px 18px; }
  .cost-row { grid-template-columns: 1fr auto; }
  .cost-note { display: none; }
  .values { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .partners { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-mark { display: none; }
  .hero-cta .btn { flex: 1 1 100%; }
}