:root {
  --ink: #02070d;
  --ink-2: #07101a;
  --panel: rgba(9, 18, 28, .82);
  --line: rgba(139, 178, 214, .22);
  --line-strong: rgba(153, 196, 237, .42);
  --text: #f3f7fb;
  --muted: #91a0af;
  --muted-2: #667789;
  --blue: #9ecbfa;
  --blue-white: #d9ebff;
  --glow: rgba(85, 160, 232, .35);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--text); background: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
svg { display: block; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 84px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 0 clamp(28px, 4vw, 72px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; font-size: 14px; font-weight: 650; letter-spacing: .29em; }
.brand > span > span { color: #a8d3ff; }
.brand-mark { width: 34px; height: 34px; fill: none; stroke: #80bff4; stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 7px #4d9addaa); }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 35px; color: #c3ccd5; font-size: 12px; }
.primary-nav a { white-space: nowrap; transition: color .2s ease; }
.primary-nav a:hover { color: #fff; }
.chevron { display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.header-actions { justify-self: end; display: flex; gap: 9px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: #eff5fb; font-size: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); border-color: rgba(188, 220, 251, .7); }
.button-primary { border-color: #b7d9fc; background: linear-gradient(180deg, #dcecff, #a9cdf7); box-shadow: 0 0 23px rgba(107, 174, 243, .35), inset 0 1px 0 #fff; color: #06111d; }
.button-primary:hover { box-shadow: 0 0 34px rgba(107, 174, 243, .5), inset 0 1px 0 #fff; }
.button-ghost { background: rgba(4, 10, 16, .52); backdrop-filter: blur(12px); }
.button-small { min-height: 36px; padding: 0 16px; font-size: 11px; }
.menu-button { display: none; border: 0; background: transparent; padding: 8px; }
.menu-button span { display: block; width: 22px; height: 1px; margin: 6px 0; background: #dce9f4; }

.hero { position: relative; min-height: 720px; height: min(78vw, 850px); overflow: hidden; border-bottom: 1px solid rgba(120, 167, 207, .14); background: #02070d; }
.hero-film { position: absolute; z-index: 0; top: 0; left: 28%; width: 78%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.87) contrast(1.08) brightness(.86); }
.hero-wash { position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 66% 47%, transparent 0 24%, rgba(2, 7, 13, .1) 43%, rgba(2, 7, 13, .78) 78%), linear-gradient(90deg, #02070d 0 23%, rgba(2, 7, 13, .7) 37%, rgba(2, 7, 13, .06) 68%, rgba(2, 7, 13, .5) 100%), linear-gradient(0deg, #02070d 0, transparent 30%); }
.hero-copy { position: relative; z-index: 3; width: min(610px, 46vw); padding-top: clamp(170px, 18vw, 250px); margin-left: clamp(34px, 4.8vw, 84px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #8297aa; font-size: 10px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow span { width: 20px; height: 1px; background: #5caaf0; box-shadow: 0 0 8px #5caaf0; }
.hero h1 { max-width: 590px; margin: 0; font-size: clamp(44px, 4.2vw, 68px); line-height: 1.04; letter-spacing: -.052em; font-weight: 550; text-wrap: balance; }
.hero h1 em { color: #a8cff7; font-weight: 520; }
.hero-lede { margin: 22px 0 26px; color: #aab7c3; font-size: 15px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; }
.hero-actions .button { min-width: 166px; }
.play-icon { color: #bcd6ec; font-size: 14px; }
.microcopy { color: #718293; font-size: 10px; }
.hero-person { position: absolute; z-index: 4; left: 58%; bottom: 23%; width: 8px; height: 43px; border-radius: 50% 50% 35% 35%; background: #02060a; box-shadow: 0 32px 11px 5px rgba(3, 9, 15, .8); opacity: .92; }
.hero-person::before { content: ""; position: absolute; left: 1px; top: -7px; width: 6px; height: 7px; border-radius: 50%; background: #02060a; }
.hero-person span { position: absolute; left: -3px; bottom: -20px; width: 14px; height: 22px; border-left: 4px solid #02060a; border-right: 4px solid #02060a; transform: skew(-6deg); }

.principles { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); max-width: 1420px; margin: -88px auto 0; padding: 32px clamp(28px, 4vw, 66px) 38px; background: linear-gradient(180deg, rgba(3, 9, 15, .16), #02070d 55%); }
.principles article { min-height: 138px; padding: 0 clamp(14px, 1.6vw, 26px); border-right: 1px solid rgba(137, 173, 204, .13); }
.principles article:first-child { padding-left: 0; }
.principles article:last-child { border-right: 0; }
.principles svg { width: 24px; height: 24px; margin-bottom: 15px; fill: none; stroke: #a7c7e4; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.principles h2 { margin: 0 0 8px; font-size: 13px; font-weight: 560; }
.principles p { margin: 0; color: #68798a; font-size: 10px; line-height: 1.55; }

.trust { padding: 32px 7vw 44px; text-align: center; }
.trust > p, .formats > p { margin: 0 0 25px; color: #526779; font-size: 9px; letter-spacing: .37em; }
.studio-list { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 34px; max-width: 1120px; margin: auto; color: #5f6c79; font-size: 10px; font-weight: 600; letter-spacing: .18em; }

.create-section { position: relative; width: min(1180px, calc(100% - 60px)); margin: 0 auto 72px; padding: 55px 70px 45px; overflow: hidden; border: 1px solid rgba(137, 184, 225, .28); border-radius: 24px; background: radial-gradient(circle at 50% 25%, rgba(38, 83, 120, .14), transparent 38%), linear-gradient(180deg, rgba(6, 15, 24, .78), rgba(3, 9, 15, .96)); box-shadow: inset 0 0 80px rgba(19, 65, 103, .06); }
.create-heading { text-align: center; }
.create-heading .eyebrow { justify-content: center; margin-bottom: 14px; }
.create-heading h2 { margin: 0 0 8px; font-size: 28px; font-weight: 450; letter-spacing: -.025em; }
.create-heading > p:last-child { margin: 0; color: #758697; font-size: 13px; }
.creation-composer { width: min(800px, 100%); margin: 38px auto 24px; border: 1px solid rgba(126, 171, 211, .38); border-radius: 12px; background: rgba(10, 21, 32, .86); box-shadow: 0 20px 65px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .02); }
.creation-composer label { display: block; padding: 22px 24px 0; color: #91a4b5; font-size: 14px; }
.creation-composer textarea { width: 100%; min-height: 70px; padding: 10px 24px; resize: none; border: 0; outline: 0; background: transparent; color: #dce8f2; font-size: 13px; line-height: 1.5; }
.creation-composer textarea::placeholder { color: #53687a; }
.composer-options { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(126, 171, 211, .13); }
.composer-options button { min-width: 120px; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid rgba(132, 173, 210, .26); border-radius: 7px; background: #0b151f; color: #c9d5df; text-align: left; }
.composer-options svg { width: 18px; height: 18px; fill: none; stroke: #aac4dc; stroke-width: 1.3; }
.composer-options small { display: block; color: #586c7d; font-size: 8px; text-transform: uppercase; }
.composer-options .voice-button { min-width: 40px; margin-left: auto; border-radius: 50%; }
.create-button { width: 205px; margin: 0 auto 46px; }
.formats { padding: 24px 20px 0; border-top: 1px solid rgba(132, 173, 210, .12); text-align: center; }
.formats > p { margin-bottom: 20px; }
.format-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.format-grid div { min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(129, 166, 198, .16); border-radius: 8px; background: rgba(13, 24, 35, .7); color: #9cadbc; font-size: 9px; }
.format-grid span { color: #b4d2ec; font-size: 22px; }

.overview-dialog { width: min(540px, calc(100% - 30px)); padding: 42px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(5, 13, 21, .96); color: var(--text); box-shadow: 0 30px 110px #000, 0 0 50px var(--glow); }
.overview-dialog::backdrop { background: rgba(0, 4, 8, .78); backdrop-filter: blur(7px); }
.overview-dialog h2 { margin: 0 0 12px; font-size: 34px; font-weight: 500; }
.overview-dialog > p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted); line-height: 1.7; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav { position: absolute; top: 73px; right: 24px; width: 230px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 13, 21, .97); box-shadow: 0 25px 70px #000b; }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 12px; }
  .header-actions { display: none; }
  .menu-button { display: block; justify-self: end; }
  .principles { grid-template-columns: repeat(3, 1fr); margin-top: -60px; }
  .principles article { border-bottom: 1px solid rgba(137, 173, 204, .13); padding: 22px; }
  .principles article:nth-child(3) { border-right: 0; }
  .principles article:nth-child(n+4) { border-bottom: 0; }
  .format-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .site-header { height: 68px; padding: 0 20px; }
  .brand { font-size: 12px; }
  .brand-mark { width: 30px; height: 30px; }
  .hero { min-height: 680px; height: 94vh; max-height: 790px; }
  .hero-film { left: 0; width: 150%; height: 64%; top: 8%; object-position: 57% center; opacity: .86; }
  .hero-wash { background: linear-gradient(0deg, #02070d 0 30%, transparent 68%), radial-gradient(circle at 60% 28%, transparent 0 16%, rgba(2, 7, 13, .32) 52%, #02070d 86%); }
  .hero-copy { width: auto; margin: 0; padding: 350px 22px 0; text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero h1 { margin: auto; font-size: clamp(39px, 12vw, 54px); }
  .hero-lede { font-size: 14px; }
  .desktop-only { display: none; }
  .hero-actions { justify-content: center; }
  .hero-actions .button { min-width: 145px; padding: 0 14px; gap: 13px; }
  .microcopy { text-align: center; }
  .hero-person { display: none; }
  .principles { grid-template-columns: repeat(2, 1fr); margin-top: -20px; padding: 20px; }
  .principles article { min-height: 154px; padding: 22px 16px; }
  .principles article:nth-child(2n) { border-right: 0; }
  .principles article:nth-child(3) { border-right: 1px solid rgba(137, 173, 204, .13); }
  .principles article:nth-child(4) { border-bottom: 1px solid rgba(137, 173, 204, .13); }
  .studio-list { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .create-section { width: calc(100% - 24px); padding: 38px 15px 24px; border-radius: 17px; }
  .create-heading h2 { font-size: 24px; }
  .creation-composer { margin-top: 28px; }
  .composer-options { flex-wrap: wrap; }
  .composer-options button { min-width: calc(33.333% - 6px); flex: 1; }
  .composer-options .voice-button { min-width: 40px; flex: 0; }
  .format-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
  .hero-copy { padding-top: 320px; }
  .hero h1 { font-size: 38px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .principles { padding-inline: 12px; }
  .trust { padding-inline: 20px; }
  .studio-list { gap: 20px 8px; font-size: 8px; }
  .composer-options button { min-width: calc(50% - 5px); }
  .composer-options .voice-button { min-width: 40px; }
}