:root {
  --night: #120b25;
  --night-2: #20103d;
  --panel: rgba(39, 21, 72, .82);
  --ink: #f5f0ff;
  --muted: #bdb0d7;
  --teal: #2ce2c1;
  --teal-dark: #0a826f;
  --purple: #aa7cff;
  --amber: #ffd66d;
  --line: rgba(44, 226, 193, .22);
  --shadow: 0 30px 80px rgba(3, 0, 12, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 82% 5%, rgba(170,124,255,.16), transparent 30rem), linear-gradient(145deg, #0c071b, var(--night) 45%, #151033); font-family: "Segoe UI Variable", "Bahnschrift", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(44,226,193,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(44,226,193,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
a { color: var(--teal); }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: -80px; left: 12px; padding: 10px 14px; color: var(--night); background: var(--amber); }
.skip-link:focus { top: 12px; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.signal-field { position: fixed; z-index: -1; width: 40rem; height: 13rem; right: -10rem; top: 13rem; border-radius: 50%; background: linear-gradient(100deg, rgba(44,226,193,.15), rgba(170,124,255,.06)); filter: blur(60px); transform: rotate(-14deg); }

.site-header { width: min(1180px, calc(100% - 40px)); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 12px; box-shadow: 0 0 35px rgba(44,226,193,.18); }
.brand span { display: flex; flex-direction: column; }
.brand strong { font-family: Georgia, serif; font-size: 1.2rem; }
.brand small { color: var(--muted); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; }
nav { display: flex; gap: 24px; }
nav a { color: var(--muted); font-size: .88rem; text-decoration: none; }
nav a:hover { color: var(--teal); }

.hero { min-height: 700px; padding: 92px 0 86px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 74px; align-items: center; }
.eyebrow { margin: 0 0 13px; color: var(--teal); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 23px; height: 1px; margin-right: 9px; vertical-align: middle; background: currentColor; }
h1, h2, h3 { margin-top: 0; }
h1 { margin-bottom: 25px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 6.6vw, 6.3rem); font-weight: 400; letter-spacing: -.06em; line-height: .94; }
h1 em { color: var(--purple); font-weight: 400; }
h2 { margin-bottom: 0; font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
h3 { font-size: 1.24rem; line-height: 1.18; }
.lede { max-width: 720px; color: var(--muted); font-family: Georgia, serif; font-size: 1.22rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--teal); color: #051b1a; background: var(--teal); font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(44,226,193,.16); }
.button-secondary { color: var(--ink); background: transparent; }
.microcopy { color: #9183ad; font-size: .82rem; line-height: 1.5; }

.wizard-console { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(44,24,80,.96), rgba(17,9,38,.94)); box-shadow: var(--shadow); overflow: hidden; }
.console-bar { min-height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .08em; }
.console-bar > span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px var(--amber); }
.console-bar i { margin-left: auto; color: var(--teal); font-style: normal; font-weight: 800; }
.wizard-console dl { margin: 0; padding: 14px 20px; }
.wizard-console dl div { padding: 15px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(44,226,193,.1); }
.wizard-console dt { color: var(--muted); }
.wizard-console dd { margin: 0; text-align: right; }
.wizard-console .good { color: var(--teal); }
.pulse-line { height: 88px; padding: 0 20px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.pulse-line span { display: block; flex: 1; height: 1px; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.pulse-line span:nth-child(2) { height: 36px; flex: 0 0 2px; }
.pulse-line span:nth-child(3) { height: 1px; flex: 0 0 22px; transform: rotate(-58deg); transform-origin: right; }
.pulse-line span:nth-child(4) { height: 1px; flex: 0 0 22px; transform: rotate(58deg); transform-origin: left; }

.capabilities { padding: 105px 0 116px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 240px 1fr; gap: 52px; align-items: start; }
.section-heading h2 { max-width: 820px; }
.capability-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.capability-grid article { min-height: 270px; padding: 26px; border-left: 1px solid var(--line); background: rgba(34,17,65,.7); }
.capability-grid article:first-child { border-left: 0; }
.capability-grid article > span { color: var(--purple); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.capability-grid h3 { margin-top: 54px; }
.capability-grid p { color: var(--muted); line-height: 1.55; }

.screens { padding: 104px 0 116px; background: #f4f2f8; color: #20122f; }
.inverse .eyebrow { color: #087b6b; }
.screen-grid { margin-top: 58px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.screen-grid figure { margin: 0; padding: 12px; border: 1px solid rgba(32,18,47,.18); background: white; box-shadow: 8px 10px 0 rgba(32,18,47,.1); }
.screen-main { grid-row: span 2; }
.screen-grid img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; border: 1px solid rgba(32,18,47,.2); }
.screen-main img { height: 518px; }
.screen-grid figcaption { padding: 14px 5px 5px; display: flex; justify-content: space-between; gap: 18px; }
.screen-grid figcaption span { color: #6f627b; font-size: .82rem; }

.field-notes { padding: 112px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 85px; }
.field-notes ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.field-notes li { padding: 21px 0; display: grid; grid-template-columns: 180px 1fr; gap: 22px; border-bottom: 1px solid var(--line); }
.field-notes li span { color: var(--muted); line-height: 1.45; }

.support { padding: 100px 0; border-block: 1px solid rgba(170,124,255,.28); background: linear-gradient(135deg, rgba(78,42,129,.35), rgba(11,43,53,.65)); }
.support-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; }
.support-grid > div > p:last-child { max-width: 720px; color: var(--muted); line-height: 1.7; }
.support-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; justify-content: center; }
.support-actions .button { width: 100%; }
.support-actions > a:not(.button) { font-weight: 700; }
footer { min-height: 105px; padding: 32px 0; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
footer p { margin: 0; }
footer div { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 50px; padding-top: 66px; }
  .wizard-console { max-width: 600px; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .capability-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-main { grid-row: auto; }
  .screen-main img, .screen-grid img { height: auto; aspect-ratio: 16 / 9; }
  .field-notes, .support-grid { grid-template-columns: 1fr; gap: 45px; }
}
@media (max-width: 560px) {
  .wrap, .site-header { width: min(100% - 26px, 1180px); }
  h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .hero-actions, footer { flex-direction: column; }
  .button { width: 100%; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article, .capability-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .capability-grid article:first-child { border-top: 0; }
  .screen-grid figcaption { flex-direction: column; }
  .field-notes li { grid-template-columns: 1fr; gap: 6px; }
  footer div { flex-direction: column; }
}