:root {
  --ink: #dfe2ee;
  --muted: #b9cacb;
  --bg: #0f131c;
  --panel: #181c24;
  --line: #262a33;
  --blue: #00dce6;
  --green: #60ff98;

  /* Stitch Tokens */
  --surface: #0f131c;
  --surface-container-lowest: #0a0e16;
  --surface-container-low: #181c24;
  --surface-container: #1c2028;
  --surface-container-high: #262a33;
  --surface-container-highest: #31353e;
  --surface-bright: #353942;
  --on-surface: #dfe2ee;
  --on-surface-variant: #b9cacb;
  --outline: #849495;
  --outline-variant: #3a494b;
  --primary-container: #00f2fe;
  --primary-fixed: #6ff6ff;
  --primary-fixed-dim: #00dce6;
  --on-primary-container: #002022;
  --secondary-fixed: #60ff98;
  --secondary-fixed-dim: #00e478;
  --secondary-container: #34ff8c;
  --tertiary-fixed-dim: #7bd0ff;
  --tertiary-container: #b2e1ff;
  --error: #ffb4ab;
  --error-container: #93000a;
}
* { box-sizing: border-box; }
html { background: var(--surface); color: var(--on-surface); }
body {
  margin: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* Stitch Account Portal Telemetry Styles */
.telemetry-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(31, 42, 63, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 42, 63, 0.35) 1px, transparent 1px);
  background-size: 32px 32px;
}

.glass-card {
  background: linear-gradient(135deg, rgba(15, 20, 32, 0.85) 0%, rgba(10, 14, 23, 0.95) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glow-border-cyan:hover {
  box-shadow: 0 0 20px -3px rgba(0, 242, 254, 0.25);
  border-color: rgba(0, 242, 254, 0.5);
}

/* Top Bar / Site Header (Stitch Specification) */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(58, 73, 75, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.site-header-inner {
  max-width: 1340px;
  height: 76px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .site-header-inner {
    padding: 0 1rem;
    height: 70px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #00f2fe 0%, #00dce6 50%, #b2e1ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.45);
}

.brand-icon-box .brand-icon {
  color: #00373a;
  font-size: 22px;
  font-weight: 800;
}

.brand-text-col {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #dfe2ee;
  line-height: 1.1;
}

.brand-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #00f2fe;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .header-nav {
    gap: 1rem;
  }
}

@media (max-width: 1040px) {
  .header-nav {
    display: none;
  }
}

.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #b9cacb;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}

.nav-link:hover {
  color: #dfe2ee;
}

.nav-link.active {
  color: #00f2fe;
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #00f2fe;
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.telemetry-grid-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 9999px;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.45);
}

@media (max-width: 860px) {
  .telemetry-grid-pill {
    display: none;
  }
}

.grid-dot-pulse {
  position: relative;
  display: flex;
  height: 8px;
  width: 8px;
}

.grid-dot-pulse .ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #60ff98;
  opacity: 0.75;
}

.grid-dot-pulse .core {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  background-color: #00e478;
}

.header-auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.15rem;
  border-radius: 0.65rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.45);
  color: #dfe2ee;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-signin:hover {
  background: #262a33;
  color: #00f2fe;
  border-color: rgba(0, 242, 254, 0.35);
}

.btn-getstarted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.35rem;
  border-radius: 0.65rem;
  background: linear-gradient(90deg, #00f2fe 0%, #6ff6ff 100%);
  color: #00373a;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 14px rgba(0, 242, 254, 0.35);
  transition: all 0.2s ease;
}

.btn-getstarted:hover {
  box-shadow: 0 0 24px rgba(0, 242, 254, 0.55);
  filter: brightness(1.05);
}

.btn-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #262a33;
  color: #b9cacb;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(58, 73, 75, 0.4);
  transition: all 0.2s ease;
}

.btn-avatar-circle:hover {
  border-color: #00f2fe;
  color: #00f2fe;
}

.btn-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #262a33;
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.site-header nav { flex-wrap: nowrap; }
.button { background: var(--blue); border: 0; border-radius: 6px; color: white; cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 700; justify-content: center; padding: 13px 18px; }
.button:hover { filter: brightness(1.12); }
.button:disabled { cursor: wait; opacity: .6; }
.site-page-frame { margin: 0 auto; max-width: 1240px; padding: 6rem 28px 100px; }
.site-page-frame:has(.flagship-landing), .site-page-frame:has(.flagship-page), .site-page-frame:has(.ops-shell-root), .site-page-frame:has(.ops-error-root), .site-page-frame:has(.founder-portal-root),
main:has(.flagship-landing), main:has(.flagship-page), main:has(.ops-shell-root), main:has(.ops-error-root), main:has(.founder-portal-root) { max-width: 100%; padding: 0; margin: 0; }
.ops-shell-root, .ops-shell-root main { max-width: 100% !important; margin: 0 !important; }
.ops-shell-root h1 { max-width: none !important; }
.flagship-landing,
.flagship-page {
  padding-top: 5rem;
}
.hero { max-width: 780px; }
.flagship-hero { align-items: center; background: linear-gradient(90deg, rgba(10,15,20,.96) 0%, rgba(10,15,20,.78) 48%, rgba(10,15,20,.28)), url('/images/motorsignal-hero.jpg') center/cover; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; min-height: 560px; overflow: hidden; padding: 72px; }
.hero-copy { max-width: 720px; }
.hero-copy h1 { font-size: clamp(50px, 7vw, 92px); }
.cockpit-card { align-self: end; background: rgba(9,18,28,.8); border: 1px solid #2e697c; box-shadow: 0 0 40px rgba(0,196,255,.12); padding: 28px; }
.cockpit-label, .cockpit-footer { color: #7dd3fc; font: 12px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; }
.cockpit-speed { color: #effcff; font-size: clamp(86px, 11vw, 150px); font-weight: 800; line-height: .9; margin: 34px 0; }
.cockpit-speed span { color: #67e8f9; font-size: 16px; margin-left: 10px; }
.cockpit-line, .cockpit-footer { display: flex; gap: 14px; justify-content: space-between; }
.cockpit-line { border-bottom: 1px solid #274454; border-top: 1px solid #274454; color: var(--muted); font-size: 12px; padding: 16px 0; }
.cockpit-line strong { color: #f0fdf4; font-size: 24px; }
.telemetry-bars { align-items: end; display: flex; gap: 8px; height: 90px; padding: 18px 0; }
.telemetry-bars i { background: #22d3ee; display: block; flex: 1; height: 35%; opacity: .8; }
.telemetry-bars i:nth-child(2n) { height: 75%; background: #34d399; }.telemetry-bars i:nth-child(3n) { height: 55%; }
.cockpit-footer { padding-top: 12px; }.signal-live { color: #4ade80; }
.metric-ribbon { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 90px; padding: 22px 0; }
.metric-ribbon div { border-left: 1px solid var(--line); padding-left: 24px; }.metric-ribbon div:first-child { border-left: 0; }.metric-ribbon strong, .metric-ribbon span { display: block; }.metric-ribbon strong { font-size: 30px; }.metric-ribbon span { color: var(--muted); font-size: 12px; margin-top: 5px; }
.section-heading, .public-intro { max-width: 760px; }.section-heading h2 { font-size: 48px; margin: 14px 0 10px; }.section-heading p, .public-intro p { font-size: 18px; }
.feature-grid, .club-pillars, .architecture-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 36px; }.feature-panel, .club-pillars article, .architecture-grid article, .side-panel { background: #111a22; border: 1px solid var(--line); border-radius: 8px; padding: 28px; }.feature-panel span, .club-pillars span, .architecture-grid article > span { color: #67e8f9; font: 12px ui-monospace, monospace; }.feature-panel h3 { font-size: 24px; line-height: 1.15; margin: 50px 0 8px; }.feature-panel p, .club-pillars p, .architecture-grid p { color: var(--muted); }.feature-green { border-top: 3px solid #34d399; }.feature-blue { border-top: 3px solid #60a5fa; }.conversion-band { align-items: center; background: #0c2534; border: 1px solid #155e75; display: flex; justify-content: space-between; margin-top: 90px; padding: 30px; }.conversion-band h2 { margin: 10px 0 0; }
.public-page { max-width: 1180px; margin: auto; }.public-intro h1 { font-size: clamp(48px, 7vw, 78px); margin: 18px 0 12px; }.architecture-grid { grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.architecture-grid article { min-height: 300px; }.architecture-grid h2, .club-pillars h2 { font-size: 25px; margin: 50px 0 10px; }.mini-readout, .status-line { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin-top: 30px; padding-top: 16px; }.mini-readout strong { color: #e0f2fe; font-size: 34px; }.mini-readout span, .status-line { font: 11px ui-monospace, monospace; }.status-line b { color: #4ade80; }.trace-lines { border-bottom: 2px solid #155e75; display: flex; gap: 8px; height: 70px; margin-top: 30px; transform: skewY(-12deg); }.trace-lines i { background: #22d3ee; flex: 1; height: 60%; }.trace-lines i:nth-child(2) { height: 90%; background: #34d399; }.trace-lines i:nth-child(3) { height: 35%; }
.ride-hero-panel { align-items: center; background: #0d1a25; border: 1px solid #1e4d64; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; margin: 54px 0; padding: 46px; }.ride-hero-panel h2 { font-size: 38px; margin: 14px 0; }.radar { aspect-ratio: 1; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 62%), repeating-radial-gradient(circle, transparent 0 35px, #214556 36px 37px); border: 1px solid #28748a; border-radius: 50%; max-width: 370px; position: relative; }.radar-ring { border: 1px solid #28748a; border-radius: 50%; inset: 25%; position: absolute; }.r2 { inset: 42%; }.radar-center { color: #67e8f9; left: 42%; position: absolute; top: 46%; }.rider-dot { background: #4ade80; border: 4px solid #0d1a25; border-radius: 50%; height: 16px; position: absolute; width: 16px; }.one { left: 22%; top: 28%; }.two { right: 24%; top: 20%; background: #facc15; }.three { bottom: 22%; left: 30%; }.four { bottom: 28%; right: 20%; }.alert-strip { background: #3a2c0a; border: 1px solid #854d0e; color: #fde68a; font: 12px ui-monospace, monospace; margin-top: 24px; padding: 12px; }.public-split { display: grid; gap: 24px; grid-template-columns: 1.5fr .8fr; margin-top: 54px; }.public-split > div > h2 { font-size: 30px; }.side-panel { align-self: start; }.side-panel h2 { font-size: 28px; margin: 18px 0 8px; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
h1 { font-size: clamp(42px, 7vw, 82px); line-height: .98; margin: 18px 0; max-width: 850px; }
h2 { font-size: 32px; margin: 0 0 14px; }
p { color: var(--muted); line-height: 1.65; }
.hero p { font-size: 18px; max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button-secondary { background: transparent; border: 1px solid var(--line); }
.section-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 92px; }
.section-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
.panel { background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.panel h3 { margin: 0 0 8px; }
.panel h2 { font-size: 24px; }
.panel p { font-size: 14px; margin: 0; }
.panel .button { margin-top: 20px; }
.content-page { max-width: 900px; margin: auto; }
.content-page > p { font-size: 18px; max-width: 700px; }
.account-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
.companion-list { display: grid; gap: 16px; margin-top: 36px; }
.legal-page { max-width: 760px; }
.legal-page h2 { font-size: 22px; margin-top: 36px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 24px 28px 40px; font-size: 13px; }
.auth-page { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); margin: auto; max-width: 980px; align-items: center; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
label { color: var(--muted); display: grid; font-size: 13px; gap: 7px; }
input { background: #0c131a; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: inherit; padding: 12px; }
input:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.form-error { color: #ff8e8e; font-size: 13px; margin: 0; }
.muted-link { color: var(--blue); font-size: 14px; }
.recovery-stack { display: grid; gap: 8px; }
.form-divider { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; margin-top: 12px; padding-top: 20px; }
.form-message { color: var(--green); font-size: 13px; }
.audit-list { display: grid; gap: 10px; margin-top: 32px; }
.audit-row { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 18px 20px; }
.audit-row p { font-size: 13px; margin: 5px 0 0; }
.audit-row time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.admin-page { max-width: 1440px; margin: auto; }
.admin-title-row { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; padding-bottom: 28px; }
.admin-title-row h1 { font-size: clamp(48px, 7vw, 76px); margin: 16px 0 10px; }
.admin-title-row h1 span { color: #22d3ee; }
.admin-title-row p { margin: 0; }
.admin-environment { align-items: center; color: var(--muted); display: flex; font: 11px ui-monospace, SFMono-Regular, monospace; gap: 14px; }
.admin-environment strong { background: #082f49; border: 1px solid #155e75; color: #67e8f9; padding: 5px 8px; }
.admin-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 24px 0; }
.admin-kpis article { background: #111a26; border: 1px solid #26364a; border-radius: 8px; display: grid; gap: 8px; padding: 18px; }
.admin-kpis span, .admin-kpis small { color: var(--muted); font-size: 12px; }
.admin-kpis strong { font-size: 30px; }
.health-good { color: var(--green); }
.admin-console { margin-top: 24px; padding: 0; }
.admin-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 8px 12px 0; }
.admin-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.admin-tab { align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; font: inherit; gap: 8px; padding: 14px 16px; text-transform: capitalize; }
.admin-tab small { background: #1e293b; border-radius: 10px; color: #67e8f9; font-size: 11px; padding: 2px 6px; }
.admin-tab.active { border-bottom-color: var(--blue); color: var(--ink); }
.admin-create-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 20px 8px; }
.admin-create-heading span { color: var(--muted); font-size: 12px; }
.admin-create-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 20px 20px; }
.admin-create-form input, .admin-create-form select { flex: 1 1 150px; min-width: 130px; }
.admin-table-wrap { padding: 0 12px 12px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { border-collapse: collapse; min-width: 700px; width: 100%; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: 14px 10px; text-align: left; }
.admin-table th { color: var(--muted); font-size: 12px; }
.admin-table td { font-size: 13px; }
.admin-table td code, .audit-event code { color: var(--muted); display: block; font: 11px ui-monospace, SFMono-Regular, monospace; margin-top: 5px; }
.status-badge { border: 1px solid; border-radius: 10px; display: inline-block; font-size: 11px; padding: 3px 8px; text-transform: capitalize; }
.status-badge.active { background: #052e23; border-color: #166534; color: #4ade80; }
.status-badge.inactive { background: #3f1d25; border-color: #7f1d1d; color: #fda4af; }
.danger { color: #fb7185; }
.admin-section-heading { align-items: end; display: flex; justify-content: space-between; margin-top: 54px; }
.admin-section-heading h2 { margin: 0; }
.admin-section-heading p { margin: 4px 0 0; }
.admin-section-heading > span { color: var(--muted); font-size: 12px; }
.text-button { background: transparent; border: 0; color: var(--blue); cursor: pointer; padding: 4px 0; }
.empty-state { color: var(--muted); }
.audit-row { align-items: center; background: #111a26; border: 1px solid #26364a; border-radius: 6px; display: flex; gap: 14px; padding: 14px 16px; }
.audit-icon { align-items: center; background: #0e7490; border-radius: 50%; color: white; display: flex; font: 11px ui-monospace, monospace; height: 26px; justify-content: center; width: 26px; }
.audit-event { flex: 1; }
.audit-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.account-sessions { margin-top: 16px; }
.session-heading { align-items: center; display: flex; justify-content: space-between; }
.session-heading h2 { margin: 0; }
.session-row { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; }
.session-row p { font-size: 13px; margin: 5px 0 0; }
@media (max-width: 760px) { .site-header { flex-wrap: wrap; padding: 16px 18px; } nav { order: 3; width: 100%; } .site-page-frame, main { padding: 48px 18px 72px; } .section-grid, .section-grid-two, .account-grid, .auth-page, .admin-kpis { grid-template-columns: 1fr; margin-top: 56px; } .admin-title-row { align-items: flex-start; flex-direction: column; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .admin-tabs { width: 100%; } .admin-tab { flex: 1; justify-content: center; } h1 { font-size: 48px; } .site-footer { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 760px) { .flagship-hero, .ride-hero-panel, .public-split { grid-template-columns: 1fr; padding: 28px; }.flagship-hero { min-height: 0; padding: 36px 24px; }.metric-ribbon { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 56px; }.metric-ribbon div:nth-child(3) { border-left: 0; }.feature-grid, .club-pillars, .architecture-grid { grid-template-columns: 1fr; }.conversion-band { align-items: flex-start; flex-direction: column; gap: 20px; }.radar { max-width: 270px; }.public-intro h1 { font-size: 48px; } }
.flagship-section-heading { margin-top: 90px; }
.flagship-feature-grid { grid-template-columns: repeat(2, 1fr); }
.feature-purple { border-top: 3px solid #c084fc; }
.feature-stat { align-items: baseline; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 26px; padding-top: 16px; }
.feature-stat strong { color: #e0f2fe; font-size: 23px; }
.feature-stat span { color: var(--muted); font: 10px ui-monospace, monospace; margin-right: 12px; }
.lap-section { background: #0e1821; border: 1px solid #24475a; display: grid; gap: 48px; grid-template-columns: .8fr 1.2fr; margin-top: 90px; padding: 42px; }
.lap-section h2, .proof-section h2 { font-size: 42px; margin: 16px 0 12px; }
.lap-facts { display: grid; gap: 14px; margin-top: 34px; }
.lap-facts span { color: var(--muted); font: 11px ui-monospace, monospace; }
.lap-facts strong { color: #67e8f9; font-size: 20px; margin-right: 8px; }
.lap-chart { background: #09131b; border: 1px solid #1e4d64; min-height: 280px; overflow: hidden; padding: 24px; position: relative; }
.chart-grid { background: repeating-linear-gradient(0deg, transparent 0 54px, #173545 55px), repeating-linear-gradient(90deg, transparent 0 78px, #173545 79px); inset: 24px; position: absolute; }
.lap-chart svg { height: 220px; position: relative; width: 100%; }
.lap-chart path { fill: none; stroke: #22d3ee; stroke-width: 4; }
.lap-chart .trace-secondary { stroke: #4ade80; stroke-dasharray: 8 6; }
.chart-label { bottom: 18px; color: var(--muted); font: 10px ui-monospace, monospace; position: absolute; }
.label-a { color: #22d3ee; left: 24px; }.label-b { color: #4ade80; right: 24px; }
.proof-section { margin-top: 90px; }.quote-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.quote-grid blockquote { background: #111a22; border-left: 2px solid #22d3ee; margin: 0; padding: 24px; }
.quote-grid cite { color: var(--muted); display: block; font-size: 12px; font-style: normal; margin-top: 22px; }
@media (max-width: 760px) { .lap-section { grid-template-columns: 1fr; padding: 28px; }.flagship-feature-grid, .quote-grid { grid-template-columns: 1fr; }.lap-section h2, .proof-section h2 { font-size: 34px; } }
.feature-detail-band, .club-radar-band { align-items: center; background: #0d1a25; border: 1px solid #24475a; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-top: 54px; padding: 38px; }.feature-detail-band h2, .club-radar-band h2 { font-size: 34px; margin: 14px 0 10px; }.detail-list { display: grid; gap: 14px; }.detail-list span { border-bottom: 1px solid var(--line); color: var(--muted); padding-bottom: 14px; }.detail-list b { color: #22d3ee; font: 12px ui-monospace, monospace; margin-right: 14px; }.ride-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 26px; }.ride-facts span, .club-metrics span { color: var(--muted); font: 10px ui-monospace, monospace; }.ride-facts b { color: #e0f2fe; display: block; font-size: 20px; margin-bottom: 4px; }.pillars-strip { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }.pillars-strip article { border-top: 2px solid #1e7490; padding: 22px 10px; }.pillars-strip span { color: #67e8f9; font: 11px ui-monospace, monospace; }.pillars-strip h3 { margin: 18px 0 8px; }.pillars-strip p { font-size: 14px; margin: 0; }.section-inline-heading { align-items: end; display: flex; justify-content: space-between; }.section-inline-heading h2 { margin: 12px 0 0; }.section-inline-heading > span { color: var(--muted); font-size: 12px; }.directory-list { border-top: 1px solid var(--line); margin-top: 20px; }.directory-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr auto auto; padding: 18px 0; }.directory-row h3 { margin: 0 0 4px; }.directory-row p { font-size: 13px; margin: 0; }.account-list-heading { font-size: 22px; margin-top: 46px; }.club-radar-band { grid-template-columns: 1fr 1fr; margin-top: 54px; }.club-metrics { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }.club-metrics div { border-left: 1px solid var(--line); padding-left: 14px; }.club-metrics strong, .club-metrics span { display: block; }.club-metrics strong { color: #4ade80; font-size: 25px; margin-bottom: 8px; }
.pricing-intro { margin-bottom: 50px; }.pricing-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.price-card { background: #111a22; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; padding: 30px; }.price-card.pro { border-color: #0e7490; box-shadow: 0 0 28px rgba(34,211,238,.1); }.price-card.team { border-color: #166534; }.price { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: 10px; margin: 22px 0; padding-bottom: 20px; }.price strong { font-size: 52px; }.price span { color: var(--muted); font-size: 12px; }.price-card ul { display: grid; gap: 14px; list-style: none; margin: 0 0 30px; padding: 0; }.price-card li { color: #d5e1e8; font-size: 14px; }.price-card .button { margin-top: auto; }.comparison-section, .faq-section { margin-top: 90px; }.comparison-section h2, .faq-section h2 { font-size: 40px; margin: 14px 0 28px; }.comparison-table { border: 1px solid var(--line); overflow-x: auto; }.comparison-row { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); min-width: 700px; }.comparison-row span { border-bottom: 1px solid var(--line); color: var(--muted); padding: 16px; text-align: center; }.comparison-row:last-child span { border-bottom: 0; }.comparison-row .comparison-label { color: var(--ink); text-align: left; }.hardware-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.hardware-card { background: #0d1a25; border: 1px solid #24475a; padding: 30px; }.hardware-card h2 { font-size: 32px; margin: 38px 0 10px; }.hardware-card strong { color: #4ade80; display: block; font-size: 13px; margin: 26px 0 16px; }.faq-section details { border-bottom: 1px solid var(--line); padding: 20px 0; }.faq-section summary { cursor: pointer; font-size: 18px; }.faq-section details p { margin-bottom: 0; }
@media (max-width: 760px) { .feature-detail-band, .club-radar-band, .hardware-grid { grid-template-columns: 1fr; padding: 28px; }.pillars-strip, .pricing-grid { grid-template-columns: 1fr; }.ride-facts, .club-metrics { grid-template-columns: 1fr; }.directory-row { grid-template-columns: 1fr auto; }.directory-row .text-button { grid-column: 1 / -1; text-align: left; }.price strong { font-size: 44px; } }

/* ==========================================================================
   MotorSignal Flagship Landing (Stitch Design Specification)
   ========================================================================== */

.flagship-landing {
  background-color: #0f131c;
  color: #dfe2ee;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  padding-top: 5rem;
  width: 100%;
}

.flagship-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .flagship-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .flagship-container {
    padding: 0 2rem;
  }
}

/* Typography styles */
.font-display-hero {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.font-headline-xl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(23px, 3.5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.font-headline-lg {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 600;
  overflow-wrap: break-word;
}

.font-headline-md {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.font-headline-sm {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: 600;
}

.font-code-mono {
  font-family: 'Space Grotesk', monospace;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.font-label-caps {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.font-label-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.font-body-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #b9cacb;
}

.font-body-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #b9cacb;
}

.font-body-sm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #849495;
}

.font-telemetry-metric-xl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 46px;
  line-height: 48px;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.font-telemetry-metric-md {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Colors and Gradients */
.text-cyan-accent {
  color: #00f2fe;
}

.text-green-accent {
  color: #60ff98;
}

.text-dim-cyan {
  color: #6ff6ff;
}

.text-dim-green {
  color: #00e478;
}

.text-blue-accent {
  color: #7bd0ff;
}

.text-danger-accent {
  color: #ffb4ab;
}

.gradient-title-text {
  background: linear-gradient(90deg, #00f2fe 0%, #e0fdff 50%, #34ff8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero Section */
.hero-wrapper {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 2.5rem;
}

@media (max-width: 768px) {
  .hero-wrapper {
    padding: 2.5rem 0 1.5rem;
  }
}

.hero-glow-1 {
  position: absolute;
  top: 2rem;
  left: 20%;
  transform: translateX(-50%);
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  background: rgba(0, 242, 254, 0.08);
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}

.hero-glow-2 {
  position: absolute;
  top: 8rem;
  right: 5%;
  width: min(500px, 80vw);
  height: min(500px, 80vw);
  background: rgba(52, 255, 140, 0.07);
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(38, 42, 51, 0.8);
  border: 1px solid rgba(58, 73, 75, 0.45);
  backdrop-filter: blur(12px);
  width: fit-content;
  max-width: 100%;
}

.pulse-dot-green {
  position: relative;
  display: flex;
  height: 9px;
  width: 9px;
}

.pulse-dot-green .ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #60ff98;
  opacity: 0.75;
}

.pulse-dot-green .core {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  height: 9px;
  width: 9px;
  background-color: #00e478;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Button variants */
.btn-primary-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #00f2fe 0%, #00dce6 50%, #6ff6ff 100%);
  color: #002022;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary-gradient:hover {
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.55);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-secondary-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 0.75rem;
  background: rgba(38, 42, 51, 0.9);
  color: #dfe2ee;
  border: 1px solid rgba(58, 73, 75, 0.45);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary-surface:hover {
  background: #353942;
  color: #ffffff;
  border-color: rgba(0, 242, 254, 0.4);
}

.btn-ghost-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 0.75rem;
  background: #181c24;
  color: #b9cacb;
  border: 1px solid rgba(58, 73, 75, 0.4);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-ghost-surface:hover {
  background: #1c2028;
  color: #00f2fe;
}

/* Hero Cockpit Frame */
.cockpit-frame-wrapper {
  position: relative;
  border-radius: 1.25rem;
  background: rgba(10, 14, 22, 0.9);
  padding: 0.35rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(58, 73, 75, 0.35);
  overflow: hidden;
}

.cockpit-viewport {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 1rem;
  overflow: hidden;
}

@media (max-width: 640px) {
  .cockpit-viewport {
    height: 440px;
  }
}

.cockpit-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cockpit-frame-wrapper:hover .cockpit-viewport img {
  transform: scale(1.04);
}

.cockpit-vignette-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0a0e16 0%, rgba(10, 14, 22, 0.35) 45%, transparent 100%);
  pointer-events: none;
}

.cockpit-vignette-side {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 14, 22, 0.5) 0%, transparent 50%, rgba(10, 14, 22, 0.35) 100%);
  pointer-events: none;
}

/* Floating HUD elements */
.hud-apex-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(58, 73, 75, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.hud-lean-card {
  position: absolute;
  top: 4.8rem;
  left: 1rem;
  width: 210px;
  border-radius: 0.85rem;
  background: rgba(24, 28, 36, 0.92);
  backdrop-filter: blur(16px);
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(58, 73, 75, 0.4);
}

.hud-speed-card {
  position: absolute;
  top: 14rem;
  left: 1rem;
  width: 210px;
  border-radius: 0.85rem;
  background: rgba(24, 28, 36, 0.92);
  backdrop-filter: blur(16px);
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(58, 73, 75, 0.4);
}

.hud-gps-card {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 230px;
  border-radius: 0.85rem;
  background: rgba(10, 14, 22, 0.92);
  backdrop-filter: blur(16px);
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(58, 73, 75, 0.45);
}

@media (max-width: 480px) {
  .hud-lean-card {
    width: 140px;
    top: 3.5rem;
    left: 0.75rem;
    padding: 0.65rem;
  }
  .hud-speed-card {
    width: 140px;
    top: 10.5rem;
    left: 0.75rem;
    padding: 0.65rem;
  }
  .hud-gps-card {
    width: 155px;
    padding: 0.65rem;
    bottom: 0.75rem;
    right: 0.75rem;
  }
}

@media (max-width: 420px) {
  .hud-gps-card {
    display: none;
  }
}

/* Metric Strip */
.telemetry-strip {
  width: 100%;
  background: #0a0e16;
  border-top: 1px solid rgba(58, 73, 75, 0.4);
  border-bottom: 1px solid rgba(58, 73, 75, 0.4);
  padding: 2rem 0;
  position: relative;
  z-index: 10;
}

.metric-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .metric-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .metric-strip-grid {
    grid-template-columns: 1fr;
  }
}

.metric-box {
  padding: 1.5rem;
  border-radius: 0.85rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
}

.metric-box:hover {
  background: #1c2028;
  border-color: rgba(0, 242, 254, 0.3);
  transform: translateY(-2px);
}

/* Core Pillars Bento Grid */
.pillars-section {
  padding: 4rem 0;
}

@media (max-width: 768px) {
  .pillars-section {
    padding: 3.5rem 0;
  }
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

.bento-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.bento-card:hover {
  border-color: rgba(58, 73, 75, 0.6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

@media (min-width: 640px) {
  .bento-card {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .bento-card {
    padding: 2.5rem;
  }
}

.bento-card.col-span-12 {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .bento-card.col-span-7,
  .bento-grid > .col-span-7 {
    grid-column: span 7 / span 7;
  }

  .bento-card.col-span-5,
  .bento-grid > .col-span-5 {
    grid-column: span 5 / span 5;
  }
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  background: #262a33;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-bottom: 1.5rem;
}

/* Interactive Lap Breakdown */
.lap-section-wrapper {
  background: rgba(10, 14, 22, 0.85);
  padding: 4rem 0;
  border-top: 1px solid rgba(58, 73, 75, 0.25);
  border-bottom: 1px solid rgba(58, 73, 75, 0.25);
}

.lap-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .lap-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.lap-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.3);
  margin: 1.25rem 0;
}

.lap-tab-btn {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: transparent;
  color: #b9cacb;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lap-tab-btn.active {
  background: #262a33;
  color: #00f2fe;
}

.lap-tab-btn:hover:not(.active) {
  color: #dfe2ee;
}

.sector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.25);
  margin-bottom: 0.65rem;
}

.graph-card {
  border-radius: 1.25rem;
  background: #181c24;
  padding: 1.75rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(58, 73, 75, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Testimonials */
.testimonials-section {
  padding: 4rem 0;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (max-width: 960px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  padding: 2rem;
  border-radius: 1.25rem;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
}

/* Bottom CTA Banner */
.bottom-cta-section {
  padding: 2rem 0 6rem;
}

.cta-banner-box {
  position: relative;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #262a33 0%, #1c2028 50%, #181c24 100%);
  padding: 4rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(58, 73, 75, 0.4);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .cta-banner-box {
    padding: 2.5rem 1.25rem;
    border-radius: 1.25rem;
  }
}

.cta-banner-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.08) 0%, rgba(52, 255, 140, 0.08) 100%);
  pointer-events: none;
}

.guarantee-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 1rem;
  color: #b9cacb;
  font-size: 13px;
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .guarantee-badges {
    gap: 1rem;
  }
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   Flagship Footer (Stitch Match)
   ========================================================================== */

.flagship-footer {
  width: 100%;
  background-color: #0a0e16;
  border-top: 1px solid rgba(58, 73, 75, 0.35);
  padding: 4.5rem 0 2.5rem;
  color: #b9cacb;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(58, 73, 75, 0.25);
}

@media (max-width: 1024px) {
  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand-col {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .footer-columns-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand-col {
    grid-column: span 1;
  }
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-desc {
  color: #849495;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: #181c24;
  border: 1px solid rgba(58, 73, 75, 0.3);
  width: fit-content;
}

.footer-status-pill .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00e478;
}

.footer-link-group h4 {
  color: #dfe2ee;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1.25rem;
}

.footer-link-group ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link-group li a {
  color: #849495;
  font-size: 13.5px;
  transition: color 0.2s ease;
}

.footer-link-group li a:hover {
  color: #00f2fe;
}

.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 13px;
  color: #849495;
}

.footer-bottom-bar p {
  margin: 0;
}

.footer-sys-info {
  display: flex;
  gap: 1.5rem;
  color: #849495;
  font-size: 12px;
}

/* ==========================================================================
   Flagship Layout Refactor (Extracted from Inline Styles)
   ========================================================================== */
.hero-content-col { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-title { margin: 0; color: #dfe2ee; }
.hero-desc { margin: 0; max-width: 580px; }
.hero-actions-row { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; }
.hero-trust-row { display: flex; alignItems: center; gap: 1rem; padding-top: 0.75rem; }
.hero-trust-avatars { display: flex; margin-left: -0.25rem; }
.trust-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); margin-right: -10px;
  border: 2px solid #0f131c;
}
.avatar-blue { background: #31353e; color: #00f2fe; }
.avatar-green { background: #262a33; color: #00e478; }
.avatar-cyan { background: #353942; color: #7bd0ff; }
.avatar-count { background: #00f2fe; color: #00373a; font-family: 'Space Grotesk'; font-size: 11px; font-weight: bold; }
.hero-trust-text { display: flex; flex-direction: column; }
.status-dot-green { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00e478; }
.hud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hud-value-row { display: flex; align-items: baseline; gap: 6px; }
.hud-progress-bg { width: 100%; height: 7px; background: #31353e; border-radius: 9999px; overflow: hidden; margin-top: 6px; }
.hud-progress-bar { height: 100%; border-radius: 9999px; }
.lean-progress { width: 88%; background: linear-gradient(90deg, #00f2fe, #00dce6, #34ff8c); }
.hud-footer { display: flex; justify-content: space-between; margin-top: 4px; }
.hud-lateral-box { display: flex; justify-content: space-between; align-items: center; background: rgba(10, 14, 22, 0.5); border-radius: 6px; padding: 4px 8px; margin-top: 8px; }
.hud-header-title { display: flex; align-items: center; gap: 5px; }
.hud-detail-row { display: flex; justify-content: space-between; margin-top: 6px; }

.metric-box-header { display: flex; justify-content: space-between; align-items: center; }
.metric-box-content { margin-top: 0.75rem; }
.metric-box-desc { margin: 4px 0 0; }

.pillars-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 3rem; }
.pill-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; margin-bottom: 10px; }
.pillars-desc { margin: 0; max-width: 440px; }
.bento-icon { font-size: 26px; }
.bento-title { margin: 6px 0 12px; color: #dfe2ee; }
.bento-desc { margin: 0 0 2rem; max-width: 580px; }
.bento-desc-short { margin: 0 0 2rem; }
.bento-inner-card { border-radius: 0.75rem; background: #0a0e16; padding: 1rem 1.25rem; border: 1px solid rgba(58, 73, 75, 0.3); box-sizing: border-box; }
.bento-inner-inset { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }
.bento-inner-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(58, 73, 75, 0.25); gap: 0.5rem; }
.bento-stats-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 0.75rem; }
.bento-stats-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem; box-sizing: border-box; }
.bento-stat-box { background: #1c2028; padding: 0.5rem 0.25rem; border-radius: 0.5rem; }
.bento-flex-between { display: flex; justify-content: space-between; }
.bento-flex-row { display: flex; flex-direction: row; }
.bento-progress-bar-container { display: flex; gap: 4px; height: 10px; border-radius: 9999px; overflow: hidden; background: #31353e; }
.bento-progress-bar-fill { border-radius: 9999px; }
.bento-icon-box { width: 40px; height: 40px; border-radius: 0.5rem; background: #262a33; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bento-text-col { display: flex; flex-direction: column; min-width: 0; }

.lap-left-col { display: flex; flex-direction: column; gap: 1.25rem; }
.sector-list { display: flex; flex-direction: column; }
.sector-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(58, 73, 75, 0.25); }
.sector-row:last-child { border-bottom: none; }
.sector-info { display: flex; align-items: center; gap: 12px; }
.sector-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sector-dot-small { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.graph-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(58, 73, 75, 0.3); padding-bottom: 0.75rem; }
.graph-header-left { display: flex; align-items: center; gap: 10px; }
.graph-badge { padding: 2px 8px; border-radius: 4px; }
.graph-svg-container { border-radius: 0.75rem; padding: 1.25rem; position: relative; overflow: hidden; border: 1px solid rgba(58, 73, 75, 0.25); }
.graph-svg-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.graph-svg-footer { display: flex; justify-content: space-between; margin-top: 8px; gap: 4px; overflow: hidden; }

.testimonial-card { background: #0a0e16; border: 1px solid rgba(58, 73, 75, 0.3); border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.testimonial-content { display: flex; flex-direction: column; gap: 0.75rem; }
.testimonial-stars { display: flex; }
.testimonial-author-row { padding-top: 1rem; border-top: 1px solid rgba(58, 73, 75, 0.25); display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; font-family: 'Space Grotesk'; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.testimonial-author-info { display: flex; flex-direction: column; }

.cta-banner-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background: #0a0e16; position: relative; z-index: 2; }
.cta-banner-title { max-width: 640px; position: relative; z-index: 2; }
.cta-banner-desc { max-width: 580px; position: relative; z-index: 2; }
.cta-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding-top: 0.75rem; position: relative; z-index: 2; }

/* Utility classes mapped from style objects */
.text-ink { color: #dfe2ee; }
.text-muted { color: #849495; }
.text-muted-blue { color: #b9cacb; }
.bg-surface-lowest { background: #0a0e16; }
.bg-surface-container { background: #1c2028; }
.bg-surface-highest { background: #31353e; }
.bg-surface-bright { background: #353942; }
.bg-green-accent { background: #60ff98; }
.bg-cyan-accent { background: #00f2fe; }
.bg-blue-accent { background: #7bd0ff; }
.m-0 { margin: 0; }
.max-w-md { max-width: 440px; }
.w-fit { width: fit-content; }
.w-35 { width: 35%; }
.w-30 { width: 30%; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex { display: flex; }
.gap-1rem { gap: 1rem; }
.gap-6px { gap: 6px; }
.mt-2px { margin-top: 2px; }
.mt-10px { margin-top: 10px; }
.mb-8px { margin-bottom: 8px; }
.mb-10px { margin-bottom: 10px; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shrink-0 { flex-shrink: 0; }
.block { display: block; }
.icon-md { font-size: 20px; }
.icon-sm { font-size: 16px; }
.icon-bold { font-size: 20px; font-weight: bold; }
.italic { font-style: italic; }