:root {
  --ink: #050505;
  --ink-raised: #0d0d0d;
  --ink-panel: #121212;
  --line: #2b2b2b;
  --line-soft: #1e1e1e;
  --fog: #f2f0eb;
  --mist: #a4a19b;
  --muted: #73716d;
  --signal: #d9ff54;
  --signal-deep: #a9c83d;
  --danger: #ff8074;
  --display: "Avenir Next Condensed", "Franklin Gothic Condensed", "Arial Narrow", sans-serif;
  --body: "Avenir Next", "Century Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--fog); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled, .button:disabled { cursor: not-allowed; border-color: #3a3a3a; background: #242424; color: #858585; transform: none; }
.button:disabled:hover { border-color: #3a3a3a; background: #242424; color: #858585; transform: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 16px; padding: 10px 14px; background: var(--signal); color: var(--ink); font-weight: 800; }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; min-height: 74px; padding: 0 5.2vw; border-bottom: 1px solid var(--line); background: rgba(5,5,5,.94); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-family: var(--display); font-size: 19px; letter-spacing: -1px; }
.brand-mark { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--signal); color: var(--signal); font-family: Georgia, serif; font-size: 16px; font-weight: 700; transform: rotate(45deg); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.main-nav { display: flex; gap: clamp(12px, 1.7vw, 24px); color: var(--mist); font-size: 14px; white-space: nowrap; }
.mobile-auth-actions { display: none; }
.main-nav a, .text-link { transition: color .18s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"], .text-link:hover { color: var(--signal); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-size: 14px; }
.credit-link { display: inline-flex; align-items: center; gap: 7px; color: var(--mist); white-space: nowrap; }.credit-link span { display: grid; min-width: 26px; height: 26px; place-items: center; border: 1px solid var(--signal); color: var(--signal); font-weight: 800; }.credit-link:hover { color: var(--fog); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--mist); font-weight: 700; }.text-button:hover { color: var(--signal); }
.menu-button { display: none; border: 1px solid var(--line); background: transparent; color: var(--fog); padding: 9px 12px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--signal); background: var(--signal); color: var(--ink); font-weight: 800; letter-spacing: -.2px; transition: transform .18s ease, background .18s ease; }
.button:hover { background: #ebff93; transform: translateY(-2px); }
.button-small { min-height: 38px; padding: 0 15px; font-size: 14px; }
.button-secondary { border-color: var(--line); background: transparent; color: var(--fog); }
.button-secondary:hover { border-color: var(--fog); background: var(--fog); color: var(--ink); }
.eyebrow { margin: 0 0 14px; color: var(--signal); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.hero, .section, .legal-layout, .form-page { padding-right: 5.2vw; padding-left: 5.2vw; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(38px, 8vw, 150px); align-items: center; min-height: 650px; padding-top: clamp(64px, 10vw, 148px); padding-bottom: clamp(64px, 10vw, 130px); border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 46%, rgba(217,255,84,.08) 46.1% 46.25%, transparent 46.4%), radial-gradient(circle at 90% 16%, rgba(217,255,84,.12), transparent 25%); }
.hero-copy, .hero-art { position: relative; z-index: 1; }
h1, h2, h3 { margin-top: 0; font-family: var(--display); letter-spacing: -.075em; line-height: .94; }
h1 { max-width: 720px; margin-bottom: 26px; font-size: clamp(56px, 6.8vw, 114px); }
h2 { max-width: 680px; margin-bottom: 22px; font-size: clamp(38px, 5vw, 78px); }
h3 { font-size: 24px; }
.lede { max-width: 540px; color: var(--mist); font-size: clamp(18px, 1.5vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 17px; align-items: center; margin-top: 35px; }
.inline-link { color: var(--fog); font-weight: 700; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 5px; }
.film-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #4a4a4a; background: linear-gradient(145deg, #1f1f1f, #070707 70%); box-shadow: 22px 22px 0 var(--signal); }
.film-stage::before, .film-stage::after { content: ""; position: absolute; }
.film-stage::before { inset: 8%; border: 1px solid rgba(242,240,235,.25); background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(242,240,235,.07) 55px 56px), linear-gradient(135deg, transparent 0 48%, rgba(217,255,84,.18) 48.1% 48.5%, transparent 48.6%); }
.film-stage::after { width: 40%; height: 40%; top: 23%; left: 30%; border-radius: 50%; background: var(--signal); filter: blur(44px); opacity: .38; }
.stage-corner { position: absolute; z-index: 2; padding: 12px; color: var(--fog); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.stage-corner.top { top: 0; left: 0; }.stage-corner.bottom { right: 0; bottom: 0; color: var(--signal); }
.hero-art p { margin: 29px 0 0; color: var(--mist); font-size: 13px; }
.signal-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.signal-strip p { min-height: 124px; margin: 0; padding: 33px 5.2vw; border-right: 1px solid var(--line); color: var(--mist); font-size: 14px; }.signal-strip p:last-child { border-right: 0; }.signal-strip strong { display: block; margin-bottom: 5px; color: var(--fog); }
.section { padding-top: clamp(78px, 11vw, 160px); padding-bottom: clamp(78px, 11vw, 160px); border-bottom: 1px solid var(--line); }
.workflow { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(42px, 9vw, 160px); }
.workflow-copy p:not(.eyebrow), .section-copy { max-width: 530px; color: var(--mist); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: flow; }.steps li { position: relative; padding: 25px 0 27px 70px; border-top: 1px solid var(--line); counter-increment: flow; }.steps li:last-child { border-bottom: 1px solid var(--line); }.steps li::before { content: "0" counter(flow); position: absolute; top: 28px; left: 0; color: var(--signal); font-weight: 800; font-size: 12px; }.steps h3 { margin-bottom: 8px; }.steps p { margin: 0; color: var(--mist); }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 9vw, 140px); }.data-monolith { min-height: 445px; padding: 25px; border: 1px solid var(--line); background: linear-gradient(135deg, #161616, #070707); }.data-monolith-header { display: flex; justify-content: space-between; color: var(--mist); font-size: 11px; letter-spacing: .1em; }.data-wave { display: grid; height: 330px; place-items: center; margin-top: 20px; border: 1px solid var(--line-soft); background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(217,255,84,.06) 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(217,255,84,.06) 40px); }.data-wave svg { width: 88%; color: var(--signal); }
.facts { margin: 32px 0 0; padding: 0; }.facts div { padding: 14px 0 14px 19px; border-left: 2px solid var(--signal); }.facts dt { font-weight: 800; }.facts dd { margin: 2px 0 0; color: var(--mist); }
.callout { display: flex; justify-content: space-between; align-items: end; gap: 26px; padding: clamp(32px, 5vw, 70px); border: 1px solid var(--line); background: var(--ink-panel); }.callout h2 { margin: 0; }.callout p { max-width: 430px; color: var(--mist); }
.studio-shell { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - 74px); }.studio-controls { padding: 47px 36px 60px 5.2vw; border-right: 1px solid var(--line); background: #080808; }.studio-controls h1 { font-size: clamp(44px, 4vw, 68px); }.studio-controls form { display: grid; gap: 21px; margin-top: 38px; }.field-label { display: grid; gap: 8px; color: var(--fog); font-size: 13px; font-weight: 700; }.field-label span { color: var(--mist); font-weight: 400; }.field-label textarea, .field-label input, .field-label select { width: 100%; border: 1px solid var(--line); outline: none; background: var(--ink-panel); color: var(--fog); padding: 13px; resize: vertical; }.field-label textarea:focus, .field-label input:focus, .field-label select:focus { border-color: var(--signal); }.format-picker { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.format-picker label { cursor: pointer; }.format-picker input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }.format-picker span { display: block; border: 1px solid var(--line); padding: 10px; color: var(--mist); text-align: center; }.format-picker input:checked + span { border-color: var(--signal); color: var(--signal); }.form-note { margin: 0; color: var(--muted); font-size: 12px; }.form-status { min-height: 20px; margin: 0; color: var(--mist); font-size: 13px; }.form-status.error { color: var(--danger); }
.studio-account-line { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 42px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--mist); font-size: 12px; font-weight: 700; }.studio-account-line span { color: var(--signal); }.studio-account-line a:hover { color: var(--signal); }
.studio-results { padding: 47px 5.2vw 80px 40px; background: radial-gradient(circle at 80% 0, rgba(217,255,84,.08), transparent 24%); }.studio-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 32px; }.studio-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); }.studio-heading p { margin: 0; color: var(--mist); }.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 17px; }.video-card { overflow: hidden; border: 1px solid var(--line); background: var(--ink-panel); }.video-frame { position: relative; display: grid; min-height: 180px; place-items: center; overflow: hidden; background: linear-gradient(135deg,#202020,#030303); }.video-frame::before { content: ""; width: 34%; aspect-ratio: 1; border: 1px solid var(--signal); box-shadow: 0 0 42px rgba(217,255,84,.25); transform: rotate(45deg); }.video-frame video { position: absolute; width: 100%; height: 100%; object-fit: cover; }.video-status { position: absolute; top: 12px; left: 12px; padding: 5px 7px; background: var(--signal); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .1em; }.scanline { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.04) 4px); }.video-card-copy { padding: 18px; }.video-card-copy .eyebrow { margin-bottom: 8px; }.video-prompt { min-height: 50px; margin: 0; font-weight: 700; }.job-meta { min-height: 24px; margin: 10px 0; color: var(--mist); font-size: 12px; }.empty-state { display: grid; min-height: 400px; place-content: center; border: 1px solid var(--line); color: var(--mist); text-align: center; }.empty-state strong { display: block; margin-bottom: 7px; color: var(--fog); font-family: var(--display); font-size: 25px; }
.form-page { display: grid; grid-template-columns: minmax(0, 580px) minmax(270px, 1fr); gap: clamp(46px, 12vw, 180px); min-height: calc(100vh - 74px); padding-top: clamp(75px, 10vw, 150px); padding-bottom: clamp(75px, 10vw, 150px); }.form-page h1 { font-size: clamp(50px, 6vw, 88px); }.auth-form { display: grid; gap: 19px; margin-top: 30px; }.form-aside { align-self: end; padding: 30px; border-left: 1px solid var(--signal); color: var(--mist); }.form-message { min-height: 24px; margin: 0; color: var(--signal); }.form-message.error { color: var(--danger); }
.auth-intro { align-self: start; }.auth-form { align-self: start; max-width: 520px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); background: linear-gradient(145deg, #111, #080808); }.auth-form.static-form { gap: 24px; }.auth-form h2 { margin-bottom: 0; font-size: clamp(32px, 4vw, 52px); }.consent-field { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 11px; align-items: start; color: var(--mist); font-size: 13px; }.consent-field input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--signal); }.service-notice, .checkout-notice { display: grid; gap: 4px; padding: 18px; border-left: 3px solid var(--signal); background: #151515; color: var(--mist); font-size: 13px; }.service-notice strong, .checkout-notice strong { color: var(--fog); }.service-notice.compact { padding: 13px; }.service-notice a { color: var(--signal); text-decoration: underline; }
.pricing-head { max-width: 700px; }.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 52px; }.price-card { min-height: 270px; padding: 27px; border: 1px solid var(--line); background: var(--ink-panel); }.price-card.featured { border-color: var(--signal); box-shadow: 8px 8px 0 rgba(217,255,84,.22); }.price-card .price { margin: 15px 0; font-family: var(--display); font-size: 53px; letter-spacing: -.08em; }.price-card p { color: var(--mist); }
.page-heading, .pricing-head { max-width: 820px; margin-bottom: clamp(42px, 6vw, 80px); }.page-heading h1, .pricing-head h1 { overflow-wrap: anywhere; }.history-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }.filter-button { min-height: 40px; padding: 0 17px; border: 1px solid var(--line); background: transparent; color: var(--mist); font-weight: 700; }.filter-button:hover, .filter-button.is-active { border-color: var(--signal); color: var(--signal); }.history-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }.history-skeleton { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }.history-skeleton span { min-height: 250px; border: 1px solid var(--line); background: linear-gradient(100deg, #0d0d0d 25%, #191919 45%, #0d0d0d 65%); background-size: 240% 100%; animation: skeleton-shift 1.3s ease-in-out infinite; }.video-placeholder { display: grid; position: absolute; inset: 0; place-items: center; padding: 20px; color: var(--mist); text-align: center; }.video-frame video { z-index: 1; }.video-status { z-index: 2; }.video-card.status-failed { border-color: rgba(255,128,116,.55); }.video-card.status-failed .video-status { background: var(--danger); }.video-card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 16px; }.video-card-actions .text-button { font-size: 13px; }.job-meta { overflow-wrap: anywhere; }
.checkout-notice { grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; margin-bottom: 34px; }.package-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.package-list li { display: grid; grid-template-columns: minmax(150px,1.2fr) minmax(150px,.8fr) auto; gap: 24px; align-items: center; padding: 23px 0; border-bottom: 1px solid var(--line); }.package-list li > div { display: grid; gap: 4px; }.package-list span { color: var(--mist); font-size: 13px; }.package-price strong { color: var(--signal); font-family: var(--display); font-size: 27px; }.custom-estimator { max-width: 680px; margin-top: 72px; padding: clamp(24px, 5vw, 54px); border: 1px solid var(--line); background: var(--ink-panel); }.custom-estimator h2 { font-size: clamp(34px, 5vw, 58px); }.custom-estimator p { color: var(--mist); }.estimate-output { min-height: 24px; color: var(--signal) !important; font-weight: 800; }
.credits-layout, .account-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: clamp(42px, 8vw, 120px); align-items: start; }.credits-layout h2 { font-size: clamp(34px, 4vw, 58px); }.ledger-list { border-top: 1px solid var(--line); }.ledger-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; min-height: 76px; border-bottom: 1px solid var(--line); }.ledger-row > div { display: grid; gap: 4px; }.ledger-row span { color: var(--mist); font-size: 12px; }.ledger-row b { font-family: var(--display); font-size: 24px; }.ledger-row .positive { color: var(--signal); }.ledger-row .negative { color: var(--fog); }.empty-ledger { color: var(--mist); }.account-aside { display: grid; gap: 19px; padding: 28px; border-left: 2px solid var(--signal); background: #0b0b0b; }.account-aside h3, .account-aside p { margin: 0; }.account-aside p { color: var(--mist); }.account-details { margin: 0; border-top: 1px solid var(--line); }.account-details div { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 25px; padding: 22px 0; border-bottom: 1px solid var(--line); }.account-details dt { color: var(--mist); }.account-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.route-loading { display: flex; min-height: calc(100dvh - 74px); justify-content: center; align-items: center; gap: 9px; }.route-loading span { width: 10px; height: 10px; background: var(--signal); animation: loading-bars .8s ease-in-out infinite alternate; }.route-loading span:nth-child(2) { animation-delay: .12s; }.route-loading span:nth-child(3) { animation-delay: .24s; }#main-content { opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; }#main-content.route-visible { opacity: 1; transform: none; }.noscript-note { margin: 0; padding: 16px 5.2vw; border-top: 1px solid var(--danger); color: var(--fog); }.empty-state .inline-link { display: inline-block; margin-top: 12px; }
@keyframes skeleton-shift { to { background-position: -140% 0; } }
@keyframes loading-bars { to { transform: translateY(-9px); opacity: .35; } }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: clamp(38px, 9vw, 150px); padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); }.legal-nav { align-self: start; position: sticky; top: 96px; display: grid; gap: 8px; color: var(--mist); font-size: 14px; }.legal-nav a:hover { color: var(--signal); }.legal-copy h1 { font-size: clamp(47px, 6vw, 84px); }.legal-copy h2 { margin-top: 55px; font-size: 34px; }.legal-copy p, .legal-copy li { color: var(--mist); }.legal-copy strong { color: var(--fog); }
#site-footer { padding: 60px 5.2vw 22px; border-top: 1px solid var(--line); background: #080808; }.footer-top { display: grid; grid-template-columns: 1.35fr repeat(3,.85fr) 1.25fr; gap: 35px; padding-bottom: 45px; }.footer-top p, .footer-top address { color: var(--mist); font-size: 13px; font-style: normal; }.footer-links { display: grid; align-content: start; gap: 10px; color: var(--mist); font-size: 13px; }.footer-links strong { margin-bottom: 3px; color: var(--fog); }.footer-links a:hover { color: var(--signal); }.footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 800px) { .site-header { grid-template-columns: 1fr auto; padding: 0 16px; min-height: 65px; }.menu-button { display: block; }.main-nav { position: absolute; top: 64px; right: 0; left: 0; display: none; flex-direction: column; gap: 0; max-height: calc(100dvh - 64px); overflow-y: auto; padding: 12px 16px 18px; border-bottom: 1px solid var(--line); background: var(--ink); }.main-nav.is-open { display: flex; }.main-nav > a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }.mobile-auth-actions { display: grid; gap: 10px; padding-top: 16px; }.mobile-auth-actions > a:not(.button), .mobile-auth-actions > button { min-height: 44px; padding: 11px 0; text-align: left; }.mobile-auth-actions .button { width: 100%; }.header-actions { display: none; }.hero, .section, .legal-layout, .form-page { padding-right: 16px; padding-left: 16px; }.hero { grid-template-columns: 1fr; padding-top: 74px; padding-bottom: 60px; }.film-stage { box-shadow: 10px 10px 0 var(--signal); }.signal-strip { grid-template-columns: 1fr; }.signal-strip p { min-height: 0; padding: 19px 16px; border-right: 0; border-bottom: 1px solid var(--line); }.workflow, .split-feature, .studio-shell, .form-page, .legal-layout, .credits-layout, .account-grid { grid-template-columns: 1fr; }.section { padding-top: 82px; padding-bottom: 82px; }.studio-controls { padding: 48px 16px; border-right: 0; border-bottom: 1px solid var(--line); }.studio-results { padding: 48px 16px 70px; }.callout, .studio-heading { display: grid; align-items: start; }.legal-nav { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }.footer-top { grid-template-columns: 1fr 1fr; }.footer-top .footer-brand { grid-column: 1 / -1; }.footer-bottom { display: grid; }.form-aside { margin-top: 15px; }.data-monolith { min-height: 340px; }.data-wave { height: 240px; }.auth-form { padding: 22px; }.history-skeleton { grid-template-columns: 1fr; }.history-skeleton span { min-height: 210px; }.package-list li { grid-template-columns: 1fr; gap: 13px; }.package-list .button { width: 100%; }.checkout-notice { grid-template-columns: 1fr; gap: 5px; }.account-details div { grid-template-columns: 1fr; gap: 6px; }.account-aside { padding: 22px; }.video-grid, .history-grid { grid-template-columns: minmax(0,1fr); }.studio-account-line { margin-bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } #main-content { opacity: 1; transform: none; } }