:root {
  --navy: #070b1d;
  --navy-2: #0e1733;
  --panel: #121c3b;
  --line: #2b385e;
  --ink: #10182d;
  --body: #58667d;
  --paper: #f4f7fb;
  --white: #ffffff;
  --muted: #aeb9cf;
  --purple: #6b5cff;
  --cyan: #24bdea;
  --green: #1fcb72;
  --amber: #ffad15;
  --red: #ef4444;
  --shadow: 0 24px 70px rgba(4, 8, 24, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { touch-action: manipulation; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-150%); border-radius: 10px; padding: 12px 16px; background: #fff; color: var(--ink); font-weight: 900; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 11, 29, 0.9);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 78px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; margin-right: auto; align-items: center; text-decoration: none; }
.brand img { display: block; width: 190px; height: auto; }
.nav { display: flex; align-items: center; gap: 15px; color: #c6cfe2; font-size: 12px; font-weight: 800; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.header-actions { display: flex; gap: 9px; }
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 17px;
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}
.button.primary { border-color: var(--purple); background: var(--purple); }
.button.light { border-color: #fff; background: #fff; color: var(--ink); }
.menu-button {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  color: #fff;
  font-size: 21px;
}
.mobile-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-bottom: 18px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #dbe3f3;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.mobile-nav .primary { justify-content: center; border-color: var(--purple); background: var(--purple); color: #fff; }
.hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 88px;
  background:
    radial-gradient(circle at 88% 12%, rgba(36, 189, 234, 0.18), transparent 31rem),
    radial-gradient(circle at 12% 70%, rgba(107, 92, 255, 0.17), transparent 34rem),
    var(--navy);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 54px; align-items: center; }
.eyebrow { margin: 0 0 15px; color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(48px, 6vw, 76px); line-height: .96; letter-spacing: -.052em; }
h2 { max-width: 860px; margin-bottom: 17px; font-size: clamp(36px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; }
h3 { margin-bottom: 9px; font-size: 22px; line-height: 1.18; }
.lead { max-width: 700px; color: #d5dced; font-size: 19px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; color: var(--muted); font-size: 13px; font-weight: 750; }
.hero-proof span::before { content: "✓"; margin-right: 6px; color: var(--green); }
.product-window {
  overflow: hidden;
  border: 1px solid #53648f;
  border-radius: 22px;
  background: #0b142d;
  box-shadow: 0 34px 88px rgba(0,0,0,.48);
  transform: perspective(1000px) rotateY(-2deg);
}
.product-window.real-screen { aspect-ratio: 16 / 10; margin: 0; background: #070b1d; }
.product-window.real-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.window-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #2c3a5d; }
.window-top b { font-size: 14px; }
.window-top span { color: #94a3bd; font-size: 9px; }
.window-pills { display: flex; gap: 5px; }
.window-pills i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.window-pills i:nth-child(2) { background: var(--cyan); }
.window-pills i:nth-child(3) { background: var(--green); }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; }
.metric { min-width: 0; border: 1px solid #2d3a5d; border-radius: 12px; padding: 12px; background: #131e3c; }
.metric span, .metric strong { display: block; }
.metric span { color: #9da9bf; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.metric strong { margin-top: 5px; font-size: 19px; }
.product-table { margin: 0 12px 12px; overflow: hidden; border: 1px solid #2d3a5d; border-radius: 12px; background: #111a35; }
.table-head, .table-row { display: grid; grid-template-columns: 1.35fr .75fr .75fr .8fr; gap: 7px; align-items: center; }
.table-head { padding: 8px 10px; background: #1b2848; color: #9faac1; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.table-row { min-height: 45px; padding: 8px 10px; border-top: 1px solid #293858; color: #edf2fb; font-size: 8px; font-weight: 750; }
.table-row b { font-size: 9px; }
.status { display: inline-flex; justify-self: start; border-radius: 999px; padding: 5px 7px; background: rgba(31,203,114,.13); color: #4de397; font-size: 7px; font-style: normal; font-weight: 900; }
.status.amber { background: rgba(255,173,21,.14); color: #ffc44c; }
.status.purple { background: rgba(107,92,255,.18); color: #aca5ff; }
.section { padding: 92px 0; }
.light { background: var(--paper); color: var(--ink); }
.light .eyebrow { color: #4256d8; }
.intro { max-width: 790px; color: var(--body); font-size: 18px; line-height: 1.7; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.pillar {
  position: relative;
  overflow: hidden;
  min-height: 225px;
  border: 1px solid #d7dfeb;
  border-radius: 20px;
  padding: 27px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(25,40,75,.06);
}
.pillar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--wash, rgba(107,92,255,.1)), transparent 52%); pointer-events: none; }
.pillar:nth-child(4n+2) { --wash: rgba(36,189,234,.11); }
.pillar:nth-child(4n+3) { --wash: rgba(31,203,114,.1); }
.pillar:nth-child(4n) { --wash: rgba(255,173,21,.12); }
.pillar b { position: relative; display: block; margin-bottom: 16px; color: #4f46d8; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.pillar h3, .pillar p { position: relative; }
.pillar p { margin-bottom: 0; color: var(--body); font-size: 14px; line-height: 1.62; }
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 42px; align-items: center; }
.story-list { display: grid; gap: 12px; margin-top: 26px; }
.story-item { border-left: 4px solid var(--accent, var(--purple)); border-radius: 0 13px 13px 0; padding: 15px 17px; background: rgba(255,255,255,.05); }
.light .story-item { background: #fff; box-shadow: 0 10px 28px rgba(22,38,70,.05); }
.story-item:nth-child(2) { --accent: var(--cyan); }
.story-item:nth-child(3) { --accent: var(--green); }
.story-item:nth-child(4) { --accent: var(--amber); }
.story-item strong, .story-item span { display: block; }
.story-item span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.light .story-item span { color: var(--body); }
.trust-band { border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); background: #0c142c; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { min-height: 150px; padding: 27px 22px; border-right: 1px solid rgba(255,255,255,.09); }
.trust-item:last-child { border: 0; }
.trust-item strong { display: block; font-size: 17px; }
.trust-item span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: 24px; padding: 48px; background: linear-gradient(135deg, #5e52f4, #3156d8 58%, #168eb6); box-shadow: var(--shadow); }
.cta h2 { max-width: 720px; margin-bottom: 11px; font-size: clamp(34px, 4vw, 50px); color: #fff; }
.cta p { max-width: 680px; margin-bottom: 0; color: #e1e7fb; line-height: 1.6; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.footer { border-top: 1px solid rgba(255,255,255,.09); padding: 40px 0; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 32px; }
.footer img { width: 180px; }
.footer p, .footer a { color: var(--muted); font-size: 13px; line-height: 1.65; text-decoration: none; }
.footer-col { display: grid; align-content: start; gap: 8px; }
.footer-col strong { margin-bottom: 5px; }
.legal { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; color: #7f8ba4; font-size: 12px; }
.screen-label { padding: 10px 13px; border-bottom: 1px solid #2d3a5d; color: #aeb9cf; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.bar-row { display: grid; grid-template-columns: 1fr 1.5fr .65fr; gap: 8px; align-items: center; padding: 9px 11px; border-top: 1px solid #293858; color: #dde5f4; font-size: 8px; }
.bar { height: 11px; overflow: hidden; border-radius: 999px; background: #243252; }
.bar i { display: block; width: var(--width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.summary-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 12px; }
.summary-card { border: 1px solid #2d3a5d; border-radius: 12px; padding: 13px; background: #131e3c; }
.summary-card span, .summary-card strong, .summary-card small { display: block; }
.summary-card span { color: #9ca9c1; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.summary-card strong { margin-top: 4px; font-size: 18px; }
.summary-card small { margin-top: 4px; color: #57df99; font-size: 7px; }
.issue-row { display: grid; grid-template-columns: 1.1fr .72fr .7fr; gap: 8px; align-items: center; padding: 10px 11px; border-top: 1px solid #293858; color: #e8eef9; font-size: 8px; }
.issue-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.issue-pills span { border-radius: 999px; padding: 4px 6px; background: rgba(107,92,255,.16); color: #b8b3ff; font-size: 6px; font-weight: 900; }
.issue-pills .current { background: rgba(36,189,234,.15); color: #5fd5f4; }
.issue-pills .superseded { background: rgba(148,163,184,.15); color: #c6d0dd; }
@media (max-width: 1050px) {
  .nav { display: none; }
  .menu-button { display: block; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .product-window { transform: none; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item { border-bottom: 1px solid rgba(255,255,255,.09); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .wrap { width: min(100% - 28px, 1180px); }
  .header-inner { min-height: 70px; }
  .brand img { width: 158px; }
  .header-actions { display: none; }
  .mobile-nav { grid-template-columns: 1fr; }
  .hero { padding: 58px 0 68px; }
  h1 { font-size: clamp(42px, 12vw, 52px); }
  h2 { font-size: clamp(34px, 10vw, 44px); }
  .lead, .intro { font-size: 17px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric:last-child { grid-column: 1 / -1; }
  .table-head, .table-row { grid-template-columns: 1.2fr .75fr .75fr; }
  .table-head span:nth-child(4), .table-row span:nth-child(4), .table-row em:nth-child(4) { display: none; }
  .pillar-grid, .trust-grid, .footer-grid { grid-template-columns: 1fr; }
  .trust-item { border-right: 0; }
  .section { padding: 70px 0; }
  .cta { display: block; padding: 32px 24px; }
  .cta-actions { display: grid; margin-top: 24px; }
  .summary-cards { grid-template-columns: 1fr; }
  .product-window.real-screen { aspect-ratio: 16 / 10.5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}