:root {
  color-scheme: dark;
  --background: #0b0d10;
  --surface-1: #12161b;
  --surface-2: #1a2027;
  --surface-hover: #242c36;
  --border: #303945;
  --border-strong: #4a5665;
  --text-primary: #f4f6f8;
  --text-secondary: #b7c0cb;
  --text-tertiary: #8a95a3;
  --accent: #5b8cff;
  --accent-hover: #7da2ff;
  --success: #43c989;
  --warning: #e8ae58;
  --focus-ring: #9bb5ff;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-width: 320px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

::selection { background: color-mix(in srgb, var(--accent), transparent 65%); }

.site-shell { min-height: 100vh; overflow: hidden; }

.site-header,
.content,
.site-footer {
  margin-inline: auto;
  max-width: 1160px;
  padding-inline: 24px;
}

.site-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  min-height: 72px;
}

.brand { align-items: center; display: inline-flex; gap: 10px; font-weight: 650; letter-spacing: -0.02em; }
.brand svg { color: var(--accent-hover); }

.site-nav { align-items: center; display: flex; gap: 24px; font-size: 13px; }
.site-nav a:not(.button) { color: var(--text-secondary); }
.site-nav a:not(.button):hover { color: var(--text-primary); }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
}

.button-primary { background: var(--accent); color: white; }
.button-primary:hover { background: var(--accent-hover); color: #0b0d10; }
.button-secondary { border-color: var(--border-strong); color: var(--text-primary); }
.button-secondary:hover { background: var(--surface-hover); color: var(--text-primary); }

.content { padding-block: 88px 112px; }

.hero {
  align-items: center;
  display: grid;
  gap: 72px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.eyebrow { align-items: center; color: var(--accent-hover); display: inline-flex; font-size: 13px; font-weight: 650; gap: 9px; letter-spacing: 0.02em; }
.status-dot { background: var(--success); border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--success), transparent 84%); height: 7px; width: 7px; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(42px, 6vw, 72px); letter-spacing: -0.055em; line-height: 0.99; max-width: 700px; }
h1 span { color: var(--text-secondary); }
.hero h1 { margin-top: 23px; }
.hero-copy > p { color: var(--text-secondary); font-size: 18px; line-height: 1.65; margin-top: 27px; max-width: 620px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.beta-note { border-left: 2px solid var(--warning); color: var(--text-secondary); font-size: 13px; line-height: 1.65; margin-top: 27px; max-width: 560px; padding-left: 14px; }
.beta-note strong { color: var(--text-primary); }
.beta-note a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.workflow-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1), white 2%), var(--surface-1));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px color-mix(in srgb, #000, transparent 55%);
  padding: 24px;
}

.workflow-heading { align-items: baseline; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding-bottom: 18px; }
.workflow-heading strong { font-size: 15px; }
.workflow-heading span { color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.workflow-list { list-style: none; margin: 0; padding: 25px 0 0; }
.workflow-list li { align-items: center; display: grid; gap: 13px; grid-template-columns: 34px 1fr auto; padding: 15px 0; position: relative; }
.workflow-list li:not(:last-child)::after { background: var(--border-strong); content: ""; height: 19px; left: 16px; position: absolute; top: 55px; width: 1px; }
.step-number { align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--accent-hover); display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; height: 32px; justify-content: center; width: 32px; }
.step-name { font-size: 14px; font-weight: 600; }
.step-description { color: var(--text-tertiary); font-size: 12px; margin-top: 4px; }
.step-state { color: var(--success); font-size: 12px; }
.workflow-footer { border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 12px; line-height: 1.55; margin-top: 14px; padding-top: 17px; }

.section { border-top: 1px solid var(--border); margin-top: 112px; padding-top: 30px; }
.section-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; }
.section-heading h2 { font-size: 26px; letter-spacing: -0.035em; }
.section-heading p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 430px; }

.capability-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin-top: 31px; overflow: hidden; }
.capability { background: var(--surface-1); border: 1px solid var(--border); margin: -1px 0 0 -1px; min-height: 190px; padding: 22px; }
.capability-index { color: var(--accent-hover); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.capability h3 { font-size: 15px; margin-top: 31px; }
.capability p { color: var(--text-secondary); font-size: 13px; line-height: 1.65; margin-top: 9px; }

.steps-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-top: 31px; }
.step-card { background: var(--surface-1); border: 1px solid var(--border); margin: -1px 0 0 -1px; min-height: 215px; padding: 22px; }
.step-card h3 { font-size: 15px; margin-top: 31px; }
.step-card p { color: var(--text-secondary); font-size: 13px; line-height: 1.65; margin-top: 10px; }

.support-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 31px; }
.support-panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.support-panel h3 { font-size: 14px; }
.support-panel ul { color: var(--text-secondary); display: grid; gap: 10px; line-height: 1.5; list-style: none; margin: 17px 0 0; padding: 0; }
.support-panel li { align-items: baseline; display: flex; font-size: 13px; gap: 10px; }
.support-panel li::before { color: var(--success); content: "✓"; font-weight: 700; }
.support-panel.limits li::before { color: var(--warning); content: "—"; }
.support-panel.limits { background: color-mix(in srgb, var(--surface-1), var(--warning) 3%); }

.beta-panel { align-items: center; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); display: flex; gap: 32px; justify-content: space-between; margin-top: 31px; padding: 28px; }
.beta-panel h2 { font-size: 25px; letter-spacing: -0.035em; }
.beta-panel p { color: var(--text-secondary); font-size: 14px; line-height: 1.65; margin-top: 10px; max-width: 660px; }
.beta-panel .button { flex: 0 0 auto; }

.site-footer { border-top: 1px solid var(--border); color: var(--text-tertiary); display: flex; font-size: 12px; justify-content: space-between; padding-block: 24px 36px; }
.footer-links { display: flex; gap: 18px; }

@media (max-width: 900px) {
  .hero { gap: 48px; grid-template-columns: 1fr; }
  .workflow-card { max-width: 620px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-header, .content, .site-footer { padding-inline: 18px; }
  .site-header { min-height: 64px; }
  .site-nav { gap: 14px; }
  .site-nav a:not(.button) { display: none; }
  .site-nav .button { min-height: 38px; padding-inline: 12px; }
  .content { padding-block: 60px 80px; }
  .hero-copy > p { font-size: 16px; }
  .workflow-card { padding: 18px; }
  .workflow-heading span { display: none; }
  .section { margin-top: 80px; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .capability-grid, .steps-grid, .support-grid { grid-template-columns: 1fr; }
  .capability, .step-card { min-height: 0; }
  .beta-panel { align-items: start; flex-direction: column; padding: 22px; }
  .site-footer { align-items: start; flex-direction: column; gap: 14px; }
}

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