@layer components {
  .marketing-hero { position: relative; }

  .marketing-hero__glow {
    position: absolute;
    z-index: 0;
    inset: -20% -10% auto;
    height: 56rem;
    background: radial-gradient(42rem 24rem at 30% 12%, var(--glow-a), transparent 68%), radial-gradient(38rem 21rem at 72% 4%, var(--glow-b), transparent 65%);
    pointer-events: none;
    will-change: transform;
  }

  .marketing-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(4.5rem, 9vw, 7rem);
    text-align: center;
  }

  .marketing-hero h1 {
    max-width: 16ch;
    margin: 1.5rem auto 1.375rem;
    font-size: clamp(2.375rem, 5.4vw, 3.75rem);
    letter-spacing: -0.035em;
    line-height: 1.04;
  }

  .marketing-hero h1 em { color: var(--accent-text); font-style: normal; }

  .marketing-hero__lede {
    max-width: 60ch;
    margin: 0 auto 2rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.0625rem);
    line-height: 1.65;
  }

  .marketing-hero__fine { margin-top: 1.125rem; color: var(--text-faint); font-size: 0.8125rem; }
  .marketing-hero__console { margin-top: 3.375rem; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1); }

  .marketing-band { position: relative; padding: clamp(4.25rem, 9vw, 6rem) 0; }
  .marketing-band--sunken { border-block: 0.0625rem solid var(--border); background: var(--bg-sunken); }

  .marketing-heading { max-width: 60ch; margin: 0 auto 3rem; text-align: center; }
  .marketing-heading h2 { margin: 0.875rem 0 0.75rem; font-size: clamp(1.75rem, 3.3vw, 2.1875rem); letter-spacing: -0.028em; }
  .marketing-heading p { color: var(--text-muted); font-size: 0.96875rem; }

  .marketing-eyebrow {
    color: var(--text-faint);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.0625rem;
    padding: 0.0625rem;
    overflow: hidden;
    border-radius: 0.6875rem;
    background: var(--border);
    list-style: none;
  }

  .workflow-step { display: flex; min-width: 0; flex-direction: column; padding: 1.75rem 1.625rem; background: var(--bg); }
  .workflow-step__number { margin-bottom: 0.875rem; color: var(--accent-text); font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; }
  .workflow-step h3 { margin-bottom: 0.5625rem; font-size: 1.125rem; }
  .workflow-step p { margin-bottom: 1.125rem; color: var(--text-muted); font-size: 0.875rem; }
  .workflow-step__meta { margin-top: auto; padding-top: 0.875rem; border-top: 0.0625rem dashed var(--border-strong); color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; }

  .capability-notes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.875rem 1.125rem; border: 0.0625rem solid var(--border); border-top: 0; border-radius: 0 0 0.6875rem 0.6875rem; background: var(--bg-overlay); color: var(--text-muted); font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; }
  .capability-notes strong { color: var(--text); font-weight: 500; }
  #capabilities .table-shell { border-radius: 0.6875rem 0.6875rem 0 0; }

  .security-grid .card { min-height: 100%; }
  .distribution-grid .card { display: flex; min-height: 100%; flex-direction: column; }
  .distribution-grid .card__content { margin-top: auto; padding-top: 1rem; }

  .stats-band { padding: clamp(2.25rem, 5vw, 3.25rem) 0; border-bottom: 0.0625rem solid var(--border); }
  .stats-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; text-align: center; }
  .stats-band__stat { display: flex; flex-direction: column; gap: 0.3125rem; }
  .stats-band__value { margin: 0; color: var(--text); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; }
  .stats-band__label { margin: 0; color: var(--text-muted); font-size: 0.8125rem; }

  .governance-grid .card { display: flex; min-height: 100%; flex-direction: column; }
  .governance-card__links { display: flex; flex-direction: column; gap: 0.375rem; margin-top: auto; padding-top: 1rem; list-style: none; }
  .governance-card__links a { color: var(--accent-text); font-size: 0.875rem; font-weight: 500; }
  .governance-card__links a:hover { color: var(--accent-hover); }

  .marketing-cta { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 6rem) 0; border-block: 0.0625rem solid var(--border); background: var(--cta-bg); text-align: center; }
  .marketing-cta::before { position: absolute; inset: auto -20% -60%; height: 26rem; background: radial-gradient(37rem 18rem at 50% 100%, var(--glow-a), transparent 70%); content: ""; pointer-events: none; }
  .marketing-cta__inner { position: relative; z-index: 1; }
  .marketing-cta h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(2rem, 4.4vw, 2.875rem); letter-spacing: -0.032em; }
  .marketing-cta p { max-width: 52ch; margin: 1rem auto 1.75rem; color: var(--text-muted); font-size: 1rem; }

  .marketing-footer { padding: 3.5rem 0 2.75rem; background: var(--bg-sunken); }
  .marketing-footer__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
  .marketing-footer__grid p { max-width: 42ch; color: var(--text-faint); font-size: 0.8125rem; }
  .marketing-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; align-content: start; }
  .marketing-footer nav a { color: var(--text-muted); font-size: 0.8125rem; }
  .marketing-footer nav a:hover { color: var(--text); }
  .marketing-footer__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.125rem; padding-top: 1.375rem; border-top: 0.0625rem solid var(--border); }
  .marketing-footer__chips span { padding: 0.25rem 0.6875rem; border: 0.0625rem solid var(--border-strong); border-radius: 999px; color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.65625rem; letter-spacing: 0.06em; }

  .preview-canvas { min-height: 100vh; padding: 2rem; background: var(--bg); color: var(--text); }

  @media (max-width: 50rem) {
    .workflow-grid { grid-template-columns: minmax(0, 1fr); }
    .governance-grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 42rem) {
    .marketing-hero__glow { inset: -20% 0 auto; }
    .marketing-hero__inner { padding-top: 3.75rem; }
    .marketing-hero h1 { font-size: clamp(2.25rem, 12vw, 3rem); }
    .marketing-hero__console { margin-top: 2.5rem; }
    .marketing-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .stats-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .marketing-hero__glow,
    .marketing-hero__console { transform: none; }
  }
}