:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f7f5;
  --surface-strong: #f0f0ed;
  --text: #101110;
  --muted: #626762;
  --subtle: #858a85;
  --line: #e4e5e1;
  --dark: #151716;
  --accent: #aa6b13;
  --accent-soft: #fbf4e8;
  --cyan: #2fc5c8;
  --max: 1120px;
  --reading: 720px;
  --radius: 18px;
  --shadow: 0 30px 80px rgba(18, 22, 20, .12), 0 2px 8px rgba(18, 22, 20, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
button, input { font: inherit; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-160%); padding: 10px 14px; border-radius: 8px; background: var(--dark); color: white; }
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid rgba(170, 107, 19, .38); outline-offset: 3px; }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-weight: 670; letter-spacing: -.02em; }
.brand-mark { width: 29px; height: 25px; position: relative; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--text); border-radius: 7px; }
.brand-mark::after { content: ""; position: absolute; left: 5px; bottom: -5px; width: 7px; height: 7px; background: var(--bg); border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: skewY(-35deg); }
.brand-mark span { position: relative; z-index: 1; width: 5px; height: 2px; margin: 1px; border-radius: 1px; background: var(--text); }
.header-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 550; }
.header-nav > a:not(.button), .site-footer nav a { color: var(--muted); text-decoration: none; }
.header-nav > a:not(.button):hover, .site-footer nav a:hover { color: var(--text); }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--dark); border-radius: 12px; background: var(--dark); color: #fff; padding: 11px 22px; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(17, 18, 17, .16); background: #262927; }
.button-small { min-height: 40px; border-radius: 10px; padding: 9px 16px; font-size: 14px; color: white; }
.text-link { font-weight: 620; text-underline-offset: 5px; }

.hero { padding: 92px 0 90px; overflow: hidden; }
.hero-inner { text-align: center; }
.eyebrow, .section-label { margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .095em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 999px; background: #3b9c69; box-shadow: 0 0 0 5px rgba(59, 156, 105, .1); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { max-width: 900px; margin: 0 auto 24px; font-size: clamp(48px, 7vw, 82px); line-height: .99; letter-spacing: -.055em; font-weight: 740; }
.hero-copy { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 25px; }
.hero-note { margin: 18px 0 0; color: var(--subtle); font-size: 14px; }

.product-preview { width: min(100%, 1010px); margin: 72px auto 0; overflow: hidden; border: 1px solid #303330; border-radius: 18px; background: #1b1d1c; color: #f3f4f2; text-align: left; box-shadow: var(--shadow); }
.preview-titlebar { min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 16px; color: #b9bdba; border-bottom: 1px solid #2d302e; font-size: 12px; }
.traffic-lights { display: flex; gap: 7px; }
.traffic-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.traffic-lights i:nth-child(2) { background: #ffbd2e; }
.traffic-lights i:nth-child(3) { background: #28c840; }
.preview-badge { justify-self: end; padding: 4px 8px; border: 1px solid #3b3e3c; border-radius: 6px; color: #989d99; }
.preview-stage { position: relative; aspect-ratio: 2.39 / 1; background: linear-gradient(135deg, #383c3b, #151716); overflow: hidden; }
.preview-footage { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.on-screen-subtitle { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: max-content; max-width: 82%; padding: 5px 9px; border-radius: 4px; background: rgba(10, 10, 10, .76); color: white; font-size: clamp(12px, 2vw, 22px); font-weight: 650; line-height: 1.25; text-align: center; }
.preview-toolbar { min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid #2f3230; border-bottom: 1px solid #2f3230; background: #202221; }
.timecode, .preview-state { color: #949995; font-size: 12px; font-variant-numeric: tabular-nums; }
.preview-state { justify-self: end; }
.wand-button { border: 1px solid #735325; border-radius: 8px; background: #342718; color: #efc887; padding: 7px 11px; font-size: 12px; font-weight: 650; cursor: pointer; }
.wand-button:hover { background: #44321e; }
.wand-button[aria-pressed="true"] { border-color: #2b7779; background: #183234; color: #8fe5e7; }
.preview-timeline { position: relative; height: 184px; padding: 20px 18px; background: #191b1a; overflow: hidden; }
.waveform { height: 68px; display: flex; align-items: end; gap: 3px; border-bottom: 1px solid rgba(47,197,200,.55); }
.waveform span { flex: 1; height: var(--h); min-width: 2px; border-radius: 2px 2px 0 0; background: var(--cyan); opacity: .82; }
.cue { position: absolute; top: 105px; height: 55px; display: flex; align-items: center; padding: 8px 11px; border: 1px solid #a66e21; border-radius: 7px; background: #3c2c19; color: #e6d6bb; font-size: 11px; line-height: 1.25; transition: left 1s cubic-bezier(.2,.8,.2,1), width 1s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease; }
.cue span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cue b { margin-left: auto; color: #a8ded2; }
.cue-one { left: 4%; width: 34%; }
.cue-two { left: 43%; width: 24%; }
.cue-three { left: 70%; width: 25%; border-color: #39746f; background: #1f3835; }
.preview-timeline.is-aligned .cue-one { left: 8%; width: 27%; border-color: #2d8487; background: #1b393a; }
.preview-timeline.is-aligned .cue-two { left: 42%; width: 20%; border-color: #2d8487; background: #1b393a; }
.preview-timeline.is-aligned .cue-three { left: 70%; width: 25%; }
.preview-instruction { margin: 20px 0 0; color: var(--muted); font-size: 14px; }

.section { padding: 105px 0; }
.section-bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-muted { background: var(--surface); }
.section h2 { margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.06; letter-spacing: -.045em; }
.section-intro { max-width: 510px; color: var(--muted); font-size: 18px; }
.section-intro p { margin: 0 0 18px; }
.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.demo-frame { margin-top: 58px; }
.demo-frame video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid #2b2d2c; border-radius: var(--radius); background: #181a19; box-shadow: var(--shadow); }
.demo-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 16px; }
.demo-caption p { margin: 0; }
.demo-caption p:last-child, .attribution { color: var(--muted); font-size: 14px; }
.attribution { margin: 7px 0 0; }
.attribution a { text-underline-offset: 3px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.step { min-height: 285px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.step-number { color: var(--accent); font-size: 13px; font-weight: 750; letter-spacing: .08em; }
.step h3 { margin: auto 0 10px; font-size: 22px; letter-spacing: -.025em; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 55px; }
.use-cases article { padding: 30px 0 0; border-top: 1px solid var(--line); }
.use-cases h3 { margin: 24px 0 8px; font-size: 20px; letter-spacing: -.02em; }
.use-cases p { margin: 0; color: var(--muted); font-size: 15px; }
.line-icon { width: 54px; height: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.line-icon span { display: block; height: 4px; border-radius: 99px; background: var(--text); }
.line-icon span:nth-child(1) { width: 80%; }
.line-icon span:nth-child(2) { width: 100%; }
.line-icon span:nth-child(3) { width: 65%; }
.line-icon-shift span:nth-child(1) { margin-left: 18%; }
.line-icon-shift span:nth-child(2) { margin-left: 0; }
.line-icon-shift span:nth-child(3) { margin-left: 28%; }
.line-icon-check { position: relative; }
.line-icon-check::after { content: "✓"; position: absolute; right: -7px; top: -10px; color: #2f8b5d; font-weight: 800; }

.advantages { background: #fcfcfb; }
.advantages h2 { max-width: 760px; }
.advantage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 58px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.advantage-grid article { min-height: 190px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.advantage-grid h3 { margin: 0 0 9px; font-size: 19px; }
.advantage-grid p { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; }

.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 23px 38px 23px 0; cursor: pointer; list-style: none; font-weight: 650; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; color: var(--muted); font-size: 24px; font-weight: 350; }
details[open] summary::after { content: "−"; }
details p { margin: -6px 40px 25px 0; color: var(--muted); font-size: 15px; }

.request-section { background: var(--dark); color: white; }
.request-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.request-section .section-label { color: #aaaEaa; }
.request-section h2 { max-width: 500px; }
.request-section h2 + p { max-width: 510px; color: #bec2be; }
.direct-email { margin-top: 34px; color: #bec2be; font-size: 14px; }
.direct-email a { color: white; text-underline-offset: 4px; }
.demo-form { display: grid; padding: 30px; border: 1px solid #373a38; border-radius: var(--radius); background: #1d201e; }
.demo-form label:not(.consent) { margin-bottom: 7px; color: #daddda; font-size: 13px; font-weight: 650; }
.demo-form input[type="text"], .demo-form input[type="email"] { width: 100%; min-height: 48px; margin-bottom: 19px; border: 1px solid #444845; border-radius: 9px; background: #131513; color: white; padding: 10px 12px; }
.demo-form input:focus { border-color: #a9adaa; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 2px 0 22px; color: #b6bbb7; font-size: 13px; line-height: 1.45; }
.consent input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #fff; }
.form-submit { width: 100%; border-color: white; background: white; color: var(--text); }
.form-submit:hover { background: #efefed; }
.form-submit:disabled { cursor: wait; opacity: .66; transform: none; }
.form-status { min-height: 24px; margin: 13px 0 0; color: #bfc4bf; font-size: 13px; text-align: center; }
.form-status.is-error { color: #ffb9ad; }
.form-status.is-success { color: #9ee1ba; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.site-footer { padding: 58px 0 34px; border-top: 1px solid var(--line); }
.footer-main { display: flex; justify-content: space-between; gap: 60px; }
.footer-main > div > p { max-width: 420px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: start; justify-content: flex-end; gap: 10px 24px; font-size: 14px; }
.privacy-note { display: flex; justify-content: space-between; gap: 60px; margin-top: 45px; padding-top: 25px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 12px; }
.privacy-note p { margin: 0; }
.privacy-note p:first-child { max-width: 740px; }
.privacy-note a { text-underline-offset: 3px; }

@media (max-width: 860px) {
  .header-nav > a:not(.button) { display: none; }
  .hero { padding-top: 70px; }
  .split-heading, .faq-layout, .request-layout { grid-template-columns: 1fr; gap: 35px; }
  .steps, .use-cases { grid-template-columns: 1fr; }
  .step { min-height: 220px; }
  .demo-caption, .privacy-note { display: block; }
  .demo-caption p + p, .privacy-note p + p { margin-top: 8px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .container { width: min(calc(100% - 32px), var(--max)); }
  .site-header { position: static; }
  .header-inner { min-height: 68px; }
  .header-inner { gap: 10px; }
  .header-inner .brand { gap: 8px; font-size: 14px; }
  .header-nav .button { padding-inline: 10px; font-size: 13px; white-space: nowrap; }
  .hero { padding: 58px 0 72px; }
  h1 br { display: none; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .product-preview { margin-top: 50px; border-radius: 12px; }
  .preview-titlebar { grid-template-columns: 1fr auto; }
  .preview-titlebar > span:not(.preview-badge) { display: none; }
  .preview-stage { aspect-ratio: 16/9; }
  .preview-toolbar { grid-template-columns: 1fr auto; }
  .preview-state { display: none; }
  .preview-timeline { height: 150px; padding-inline: 10px; }
  .cue { top: 92px; height: 43px; padding: 5px; font-size: 9px; }
  .waveform { height: 55px; }
  .section { padding: 74px 0; }
  .split-heading h2 br { display: none; }
  .advantage-grid { grid-template-columns: 1fr; }
  .advantage-grid article { min-height: auto; }
  .demo-caption { margin-top: 12px; }
  .demo-form { padding: 22px; }
  .footer-main { display: block; }
  .site-footer nav { justify-content: flex-start; margin-top: 28px; }
}

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