:root {
  --bg: #0a0a0a;
  --panel: #111111;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f2f2f2;
  --muted: #8c8c8c;
  --body: #bdbdbd;
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 1.04; }
::selection { background: var(--text); color: var(--bg); }

.wrap { width: min(1240px, 100% - 64px); margin: 0 auto; }
.label { font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.index { font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); margin: 0; }

/* bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 32px; background: rgba(10, 10, 10, 0.72); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mark { display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--mono); letter-spacing: 0.18em; }
.mark-glyph { width: 12px; height: 12px; border: 1.5px solid var(--text); position: relative; }
.mark-glyph::after { content: ""; position: absolute; inset: 2.5px; background: var(--text); }
.links { display: flex; gap: 32px; font-size: 14px; color: var(--muted); }
.links a:hover { color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 2px; font: 500 14px var(--sans); letter-spacing: 0.01em; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-solid { background: var(--text); color: var(--bg); }
.btn-solid:hover { background: #d6d6d6; }
.btn-line { border: 1px solid rgba(255, 255, 255, 0.3); }
.btn-line:hover { border-color: var(--text); }

/* scroll scrub */
.scrub { position: relative; height: var(--scrub-height, 300vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background-size: cover; background-position: center; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.shade-hero { background: linear-gradient(90deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.4) 34%, transparent 58%), linear-gradient(to bottom, rgba(10, 10, 10, 0.5), transparent 20%, transparent 78%, var(--bg)); }
.shade-process { background: linear-gradient(90deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.2) 36%, transparent 55%), linear-gradient(to bottom, var(--bg), transparent 8%, transparent 92%, var(--bg)); }

.copy { position: absolute; z-index: 2; left: max(32px, calc((100vw - 1240px) / 2)); max-width: 560px; opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.copy.is-on { opacity: 1; transform: none; pointer-events: auto; }
.copy-hero { bottom: 16vh; max-width: 640px; }
.copy-hero h1 { font-size: clamp(40px, 5.2vw, 80px); }
.lede { color: var(--body); font-size: clamp(17px, 1.3vw, 19px); max-width: 500px; margin: 28px 0 36px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.copy-side { top: 50%; transform: translateY(-42%); max-width: 420px; }
.copy-side.is-on { transform: translateY(-50%); }
.copy-side h2 { font-size: clamp(34px, 3.4vw, 54px); margin-bottom: 20px; }
.copy-side p:not(.label) { color: var(--body); margin: 0; }

.hud { position: absolute; z-index: 2; left: max(32px, calc((100vw - 1240px) / 2)); bottom: 28px; display: flex; gap: 28px; font: 400 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hud-frame b { color: var(--text); font-weight: 400; }
.scrub-progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.scrub-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--text); }

/* sections */
.section { padding: clamp(110px, 16vh, 180px) 0; border-top: 1px solid var(--line); }
.head { margin-bottom: 64px; }
.head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.title { font-size: clamp(36px, 4.4vw, 64px); max-width: 860px; }
.note { color: var(--muted); max-width: 380px; margin: 0; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.col { padding: 28px 32px 8px 0; }
.col + .col { padding-left: 32px; border-left: 1px solid var(--line); }
.col h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; margin: 56px 0 14px; }
.col p:not(.index) { color: var(--body); margin: 0; }

.films { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.film { margin: 0; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--line); }
.film figcaption { display: flex; gap: 20px; padding-top: 14px; font: 400 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.film figcaption span:first-child { color: var(--text); }

.macros { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.macro { margin: 0; }
.macro-wide { grid-column: 1 / -1; }
.macro a { display: block; }
.macro img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--line); }
.macro figcaption { display: flex; gap: 20px; padding-top: 14px; font: 400 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.macro figcaption span:first-child { color: var(--text); }

.panel { position: absolute; z-index: 2; left: max(32px, calc((100vw - 1240px) / 2)); top: 50%; transform: translateY(-50%); width: min(420px, calc(100vw - 64px)); padding: 32px; background: rgba(10, 10, 10, 0.86); border: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.step { display: flex; gap: 20px; opacity: 0.3; transition: opacity 0.4s; }
.step.is-on { opacity: 1; }
.step .index { padding-top: 5px; }
.step h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 6px; }
.step p { margin: 0; color: var(--body); font-size: 15px; }
.scrub-progress-inline { position: relative; margin-top: 28px; }

.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.pricing-copy p { color: var(--body); font-size: 19px; margin: 0 0 32px; }

.section-contact { padding-bottom: 140px; }
.mail { display: inline-block; margin-top: 48px; font-size: clamp(30px, 5vw, 72px); font-weight: 300; letter-spacing: -0.035em; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 6px; transition: border-color 0.2s; }
.mail:hover { border-color: var(--text); }

.foot { border-top: 1px solid var(--line); padding: 28px 0; font: 400 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.mark-sm { font-size: 12px; color: var(--text); }

@media (max-width: 900px) {
  .bar { padding: 0 20px; }
  .links { display: none; }
  .wrap { width: calc(100% - 40px); }
  .cols, .films, .pricing, .macros { grid-template-columns: 1fr; }
  .col + .col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .col h3 { margin-top: 28px; }
  .head-split { flex-direction: column; align-items: flex-start; }
  .copy, .copy-side { left: 20px; right: 20px; max-width: none; }
  .copy-hero { bottom: 12vh; }
  .copy-side { top: auto; bottom: 12vh; transform: translateY(16px); }
  .copy-side.is-on { transform: none; }
  .shade-hero, .shade-process { background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55), transparent 18%, rgba(10, 10, 10, 0.55) 34%, rgba(10, 10, 10, 0.93) 62%); }
  .hud { left: 20px; }
  .panel { top: auto; bottom: 20px; left: 20px; transform: none; padding: 22px; }
  .step:not(.is-on) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .copy, .step { transition: none; }
}