:root {
      --navy: #0D2B4E;
      --navy-deep: #071D34;
      --ink: #111418;
      --paper: #F7F4EE;
      --graphite: #4A5566;
      --gold: #C4A035;
      --rule: rgba(13, 43, 78, .16);
      --silver: #D9DEE5;
      --blue-soft: #EAF0F6;
      --green: #1C674A;
      --amber: #9A6412;
      --red: #9B3535;
      --serif: "Source Serif 4", "Iowan Old Style", "Baskerville", "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
    }
    button, a { font: inherit; }
    a { color: inherit; }
    .shell { width: min(1560px, 100%); margin: 0 auto; }

    header {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(24px, 5vw, 76px);
      border-bottom: 1px solid var(--rule);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--navy);
      font-weight: 720;
      letter-spacing: -.02em;
      font-size: 18px;
    }
    .mark {
      width: 30px;
      height: 30px;
      border: 1px solid var(--navy);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
      padding: 5px;
    }
    .mark i { display: block; background: var(--navy); }
    nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 42px); }
    nav a {
      text-decoration: none;
      color: var(--graphite);
      font-size: 14px;
      font-weight: 560;
    }
    nav a:hover { color: var(--navy); }
    .nav-cta {
      color: var(--paper) !important;
      background: var(--navy);
      padding: 11px 17px;
      border: 1px solid var(--navy);
      transition: background .2s ease, color .2s ease;
    }
    .nav-cta:hover { background: transparent; color: var(--navy) !important; }

    main {
      min-height: calc(100vh - 78px);
      display: grid;
      grid-template-columns: minmax(430px, .9fr) minmax(620px, 1.1fr);
      align-items: center;
      gap: clamp(72px, 7vw, 124px);
      padding: clamp(76px, 9vh, 112px) clamp(32px, 5.5vw, 86px) clamp(64px, 8vh, 96px);
      overflow: hidden;
    }
    .copy { max-width: 550px; }
    h1 {
      max-width: 550px;
      margin: 0;
      color: var(--navy-deep);
      font-family: var(--serif);
      font-size: clamp(54px, 4.8vw, 76px);
      font-weight: 400;
      line-height: .96;
      letter-spacing: -.052em;
      text-wrap: balance;
    }
    h1 em { font-style: normal; font-weight: 400; color: var(--navy); }
    .lede {
      max-width: 530px;
      margin: 28px 0 0;
      color: var(--graphite);
      font-size: clamp(16px, 1.22vw, 18px);
      line-height: 1.65;
      text-wrap: pretty;
    }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .btn {
      min-height: 47px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 19px;
      border: 1px solid var(--navy);
      text-decoration: none;
      color: var(--navy);
      font-size: 14px;
      font-weight: 650;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn.primary { background: var(--navy); color: white; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 43, 78, .12); }
    .btn .arrow { transition: transform .2s ease; }
    .btn:hover .arrow { transform: translateX(3px); }
    .engine-wrap { position: relative; min-height: 560px; display: grid; place-items: center; }
    .engine-wrap::before {
      content: "";
      position: absolute;
      inset: 0 -8% 0 8%;
      background-image: linear-gradient(rgba(13,43,78,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(13,43,78,.055) 1px, transparent 1px);
      background-size: 29px 29px;
      -webkit-mask-image: radial-gradient(circle at center, black 25%, transparent 72%);
      mask-image: radial-gradient(circle at center, black 25%, transparent 72%);
      pointer-events: none;
    }
    .engine {
      width: min(585px, 100%);
      position: relative;
      z-index: 1;
      background: #FBFAF7;
      border: 1px solid rgba(13, 43, 78, .28);
      box-shadow: 0 24px 64px rgba(7, 29, 52, .13), 0 2px 6px rgba(7, 29, 52, .07);
    }
    .engine-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 16px;
      background: var(--navy-deep);
      color: white;
    }
    .vendor { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .vendor-icon {
      width: 31px;
      height: 31px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.35);
      font: 600 11px/1 var(--mono);
    }
    .vendor strong { display: block; font-size: 13px; letter-spacing: -.01em; }
    .vendor small { display: block; margin-top: 4px; color: rgba(255,255,255,.58); font: 10px/1 var(--mono); }
    .status {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #CEE8DB;
      font: 600 10px/1 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #71C39B; box-shadow: 0 0 0 4px rgba(113,195,155,.12); }

    .engine-body { padding: 16px; }
    .meta-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); }
    .metric { padding: 12px; border-right: 1px solid var(--rule); }
    .metric:last-child { border-right: 0; }
    .metric span { display: block; color: var(--graphite); font: 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .metric strong { display: block; margin-top: 7px; color: var(--navy-deep); font-size: 14px; font-weight: 680; }
    .metric strong.moderate { color: var(--amber); }

    .section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 17px 0 9px;
      color: var(--navy-deep);
      font-size: 12px;
      font-weight: 700;
    }
    .section-label small { color: var(--graphite); font: 10px/1 var(--mono); font-weight: 400; }
    .pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .step {
      position: relative;
      min-width: 0;
      padding: 9px 7px 8px;
      background: var(--blue-soft);
      border-top: 2px solid var(--silver);
      overflow: hidden;
    }
    .step::after {
      content: "";
      position: absolute;
      inset: -2px 100% auto 0;
      height: 2px;
      background: var(--navy);
      animation: progress 7.5s ease-in-out infinite;
      animation-delay: var(--delay);
    }
    .step b { display: block; color: var(--navy); font: 700 10px/1 var(--mono); }
    .step span { display: block; margin-top: 5px; color: var(--graphite); font-size: 10px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .controls { display: grid; gap: 6px; }
    .control {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(100px, .72fr) 76px;
      align-items: center;
      min-height: 41px;
      padding: 0 11px;
      border: 1px solid var(--rule);
      background: white;
      opacity: 0;
      transform: translateY(8px);
      animation: reveal 7.5s ease-out infinite;
      animation-delay: var(--delay);
    }
    .control-name { min-width: 0; }
    .control-name b { display: block; color: var(--navy-deep); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .control-name small { display: block; margin-top: 3px; color: var(--graphite); font: 9px/1 var(--mono); }
    .bar { height: 4px; margin-right: 18px; background: var(--silver); overflow: hidden; }
    .bar i { display: block; height: 100%; width: var(--score); background: var(--bar-color, var(--navy)); transform-origin: left; animation: load 7.5s ease-out infinite; animation-delay: var(--delay); }
    .badge { justify-self: end; padding: 6px 8px; font: 700 9px/1 var(--mono); letter-spacing: .04em; }
    .pass { color: var(--green); background: #EAF4EF; }
    .review { color: var(--amber); background: #F6EFE3; }
    .decision {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 18px;
      margin-top: 10px;
      padding: 13px;
      color: white;
      background: var(--navy);
    }
    .decision small { display: block; color: rgba(255,255,255,.6); font: 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .decision strong { display: block; margin-top: 6px; font-family: var(--serif); font-size: 18px; font-weight: 400; }
    .decision-badge { padding: 9px 10px; color: #F4E4C1; border: 1px solid rgba(244,228,193,.4); font: 700 9px/1 var(--mono); letter-spacing: .06em; }
    .audit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 9px 16px;
      border-top: 1px solid var(--rule);
      color: var(--graphite);
      font: 9px/1.3 var(--mono);
    }
    .audit code { color: var(--navy); font: inherit; }
    .side-note {
      display: none;
      position: absolute;
      z-index: 2;
      width: 145px;
      padding: 11px 12px;
      background: var(--paper);
      border: 1px solid var(--rule);
      box-shadow: 0 12px 34px rgba(7,29,52,.09);
      color: var(--graphite);
      font-size: 10px;
      line-height: 1.42;
    }
    .side-note b { display: block; margin-bottom: 5px; color: var(--navy); font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .note-one { top: 12%; right: 0; animation: float 5s ease-in-out infinite; }
    .note-two { bottom: 9%; left: 0; animation: float 5s ease-in-out infinite reverse; }

    .system-section {
      padding: 112px clamp(32px, 5.5vw, 86px) 124px;
      border-top: 1px solid var(--rule);
      background: #EEF0F3;
    }
    .system-intro { max-width: 850px; margin: 0 auto 64px; text-align: center; }
    .system-kicker {
      display: inline-flex;
      padding: 7px 12px;
      color: white;
      background: var(--navy-deep);
      font: 600 11px/1 var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .system-intro h2 {
      margin: 24px 0 0;
      color: var(--navy-deep);
      font-family: var(--serif);
      font-size: clamp(44px, 4vw, 66px);
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -.04em;
    }
    .system-intro p {
      max-width: 740px;
      margin: 22px auto 0;
      color: var(--graphite);
      font-size: 18px;
      line-height: 1.6;
    }
    .system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
    .system-card {
      min-width: 0;
      display: grid;
      grid-template-rows: 350px 1fr;
      overflow: hidden;
      background: #DCD8D1;
      border: 1px solid rgba(13,43,78,.1);
    }
    .system-card.wide { grid-column: 1 / -1; }
    .module-art {
      position: relative;
      height: 350px;
      min-height: 0;
      padding: 46px 30px 30px;
      overflow: hidden;
      background-color: #F2F1EE;
      background-image: linear-gradient(rgba(13,43,78,.042) 1px, transparent 1px), linear-gradient(90deg, rgba(13,43,78,.042) 1px, transparent 1px);
      background-size: 26px 26px;
      border-bottom: 1px solid rgba(13,43,78,.1);
    }
    .wide .module-art { height: 350px; min-height: 0; }
    .system-card:not(.wide) .module-art {
      display: grid;
      align-items: stretch;
      padding: 28px 30px;
    }
    .module-tag {
      position: absolute;
      top: 16px;
      left: 20px;
      padding: 5px 9px;
      border: 1px solid rgba(13,43,78,.16);
      background: rgba(247,244,238,.72);
      color: var(--graphite);
      font: 600 10px/1 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .mini-layout { display: grid; grid-template-columns: minmax(0, 1fr) 31%; align-items: start; gap: 14px; }
    .system-card:not(.wide) .mini-layout { height: 100%; align-items: stretch; }
    .mini-panel {
      min-width: 0;
      padding: 18px;
      background: rgba(255,255,252,.82);
      border: 1px solid rgba(13,43,78,.15);
      box-shadow: 0 5px 18px rgba(7,29,52,.045);
    }
    .mini-stack { display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; }
    .system-card:not(.wide) .mini-layout > .mini-panel {
      display: flex;
      height: 100%;
      flex-direction: column;
    }
    .system-card:not(.wide) .mini-layout > .mini-panel > .mini-row,
    .system-card:not(.wide) .mini-layout > .mini-panel > .evidence-item { flex: 1; }
    .system-card:not(.wide) .mini-layout > .mini-panel > .dimension-grid { flex: 1; }
    .system-card:not(.wide) .mini-stack {
      grid-template-rows: repeat(3, minmax(0, 1fr));
      align-content: stretch;
    }
    .system-card:not(.wide) .mini-stack .mini-panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .mini-title { margin-bottom: 13px; color: #667184; font: 600 10px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
    .mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 27px; border-bottom: 1px solid rgba(13,43,78,.08); }
    .mini-row:last-child { border-bottom: 0; }
    .mini-label { color: #7B8491; font: 600 9px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
    .mini-value { min-width: 0; color: var(--navy-deep); font: 600 11px/1.3 var(--mono); text-align: right; }
    .mini-value.blue { color: #2D4E9E; }
    .mini-value.green { color: var(--green); }
    .mini-value.amber { color: var(--amber); }
    .mini-stat { color: var(--navy-deep); font: 500 30px/.95 var(--mono); letter-spacing: -.04em; }
    .mini-sub { margin-top: 7px; color: #8A92A0; font: 9px/1.35 var(--mono); }
    .mini-badge { display: inline-flex; width: fit-content; margin-top: 9px; padding: 6px 8px; font: 700 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
    .mini-badge.green { color: var(--green); background: #EAF4EF; border: 1px solid #C8DCC8; }
    .mini-badge.amber { color: var(--amber); background: #F6EFE3; border: 1px solid #E5D4B3; }
    .mini-badge.blue { color: #2D4E9E; background: #EEF2FB; border: 1px solid #C0CDEE; }
    .mini-bar { height: 4px; margin-top: 10px; overflow: hidden; background: #DDE2E9; }
    .mini-bar i { display: block; width: var(--w); height: 100%; background: var(--c, var(--navy)); transform-origin: left; animation: systemLoad 6.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
    .dimension-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .dimension { min-width: 0; padding: 12px; background: #F7F4EE; border: 1px solid rgba(13,43,78,.1); opacity: 0; animation: systemReveal 6.6s ease infinite; animation-delay: var(--d); }
    .dimension:last-child { grid-column: 1 / -1; }
    .dimension b { display: block; margin-top: 6px; color: var(--navy-deep); font: 500 22px/1 var(--mono); }
    .evidence-item { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; min-height: 31px; border-bottom: 1px solid rgba(13,43,78,.08); opacity: 0; animation: systemReveal 6.6s ease infinite; animation-delay: var(--d); }
    .evidence-item:last-child { border-bottom: 0; }
    .evidence-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(28,103,74,.09); }
    .evidence-item span { min-width: 0; color: var(--navy-deep); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .evidence-item code { color: var(--green); font: 9px/1 var(--mono); }
    .control-dots { display: grid; grid-template-columns: repeat(11, 9px); gap: 5px; justify-content: end; }
    .control-dots i { width: 9px; height: 9px; background: #DDE2E9; animation: controlPass 6.6s ease infinite; animation-delay: calc(var(--i) * 65ms); }
    .control-dots i.review-dot { background: #E9D6AE; animation: none; }
    .timeline { display: flex; align-items: flex-start; padding: 18px 8px 12px; }
    .time-node { width: 140px; flex: 0 0 auto; text-align: center; opacity: 0; animation: systemReveal 6.6s ease infinite; animation-delay: var(--d); }
    .time-dot { width: 13px; height: 13px; margin: 0 auto 8px; border: 2px solid #C7C8C7; border-radius: 50%; background: #FAFAF6; }
    .time-node.done .time-dot { border-color: var(--green); background: var(--green); }
    .time-node.active .time-dot { border-color: #C4A035; background: #C4A035; }
    .time-node code { color: #6F7A8B; font: 9px/1.2 var(--mono); }
    .time-node b { display: block; margin-top: 5px; color: var(--navy-deep); font-size: 11px; }
    .time-node small { display: block; margin-top: 4px; color: #8A92A0; font: 9px/1.25 var(--mono); }
    .time-line { flex: 1; height: 1px; margin-top: 6px; background: #CDD3DA; transform-origin: left; animation: systemLoad 6.6s ease infinite; animation-delay: var(--d); }
    .lifecycle-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
    .lifecycle-stats .mini-panel { padding: 13px; }
    .module-copy { padding: 31px 36px 36px; }
    .module-copy .module-number { display: inline-flex; padding: 6px 10px; color: white; background: var(--navy-deep); font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
    .module-copy h3 { margin: 18px 0 0; color: var(--navy-deep); font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
    .module-copy p { max-width: 600px; margin: 13px 0 0; color: var(--graphite); font-size: 16px; line-height: 1.55; }
    .deep-link { display: inline-flex; margin-top: 20px; color: var(--navy-deep); font: 600 12px/1.2 var(--mono); letter-spacing: .02em; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
    .deep-link:hover { color: var(--cobalt); }

    .roles-section {
      padding: 118px clamp(32px, 5.5vw, 86px) 126px;
      background: var(--paper);
      border-top: 1px solid var(--rule);
    }
    .roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
    .role-card { min-width: 0; overflow: hidden; background: #DED9D0; border: 1px solid rgba(13,43,78,.1); }
    .role-card.wide { grid-column: 1 / -1; }
    .role-art {
      min-height: 360px;
      padding: 34px;
      background-color: #F3F1EC;
      background-image: linear-gradient(rgba(13,43,78,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(13,43,78,.04) 1px, transparent 1px);
      background-size: 24px 24px;
      border-bottom: 1px solid rgba(13,43,78,.1);
    }
    .role-card.wide .role-art { min-height: 330px; }
    .role-copy { padding: 31px 36px 38px; }
    .role-copy .module-number { display: inline-flex; padding: 6px 10px; color: white; background: var(--navy-deep); font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
    .role-copy h3 { margin: 18px 0 0; max-width: 620px; color: var(--navy-deep); font-family: var(--serif); font-size: 31px; font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
    .role-copy p { max-width: 690px; margin: 14px 0 0; color: var(--graphite); font-size: 16px; line-height: 1.58; }
    .role-table { width: 100%; border-collapse: collapse; }
    .role-table th { padding: 0 7px 9px; border-bottom: 1px solid rgba(13,43,78,.12); color: #8A92A0; font: 600 9px/1.2 var(--mono); letter-spacing: .07em; text-align: left; text-transform: uppercase; }
    .role-table td { padding: 10px 7px; border-bottom: 1px solid rgba(13,43,78,.075); color: var(--navy-deep); font-size: 11px; vertical-align: middle; }
    .role-table tr { opacity: 0; animation: systemReveal 7.2s ease infinite; animation-delay: var(--d); }
    .role-table tbody tr:last-child td { border-bottom: 0; }
    .role-table .mono { color: var(--graphite); font: 9px/1.3 var(--mono); }
    .outcome { display: inline-flex; padding: 5px 7px; font: 700 8px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
    .outcome.pass { color: var(--green); background: #EAF4EF; }
    .outcome.review { color: var(--amber); background: #F6EFE3; }
    .audit-layout { display: grid; grid-template-columns: minmax(0,1fr) 34%; gap: 14px; }
    .audit-chain { display: grid; gap: 8px; }
    .audit-line { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 45px; padding: 0 12px; background: #FAFAF6; border: 1px solid rgba(13,43,78,.1); opacity: 0; animation: systemReveal 7.2s ease infinite; animation-delay: var(--d); }
    .audit-line b { color: var(--navy); font: 600 10px/1 var(--mono); }
    .audit-line span { color: var(--navy-deep); font-size: 11px; }
    .audit-line code { color: var(--green); font: 9px/1 var(--mono); }
    .portfolio-layout { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 14px; }
    .portfolio-summary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 13px; color: var(--graphite); font: 9px/1 var(--mono); }
    .portfolio-summary b { color: var(--navy-deep); }
    .event-stack { display: grid; gap: 9px; }
    .event-box { min-height: 58px; padding: 12px; background: #FAFAF6; border: 1px solid rgba(13,43,78,.1); opacity: 0; animation: systemReveal 7.2s ease infinite; animation-delay: var(--d); }
    .event-box strong { display: block; margin-top: 7px; color: var(--navy-deep); font-size: 11px; line-height: 1.35; }

    @keyframes systemReveal { 0%,8% { opacity:0; transform:translateY(5px); } 18%,82% { opacity:1; transform:none; } 95%,100% { opacity:0; } }
    @keyframes systemLoad { 0%,8% { transform:scaleX(0); } 22%,84% { transform:scaleX(1); } 96%,100% { transform:scaleX(0); } }
    @keyframes controlPass { 0%,12% { background:#DDE2E9; } 26%,82% { background:var(--green); } 95%,100% { background:#DDE2E9; } }

    @keyframes progress {
      0%, 8% { right: 100%; }
      22%, 80% { right: 0; }
      92%, 100% { right: 100%; }
    }
    @keyframes reveal {
      0%, 12% { opacity: 0; transform: translateY(8px); }
      22%, 82% { opacity: 1; transform: translateY(0); }
      94%, 100% { opacity: 0; transform: translateY(0); }
    }
    @keyframes load {
      0%, 12% { transform: scaleX(0); }
      26%, 86% { transform: scaleX(1); }
      96%, 100% { transform: scaleX(0); }
    }
    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    @media (max-width: 1080px) {
      main { grid-template-columns: 1fr; gap: 54px; padding-top: 72px; }
      .copy { max-width: 800px; }
      h1 { max-width: 680px; font-size: clamp(56px, 8vw, 74px); }
      .engine-wrap { min-height: 540px; }
      .engine { width: min(585px, 90%); }
      .note-one { right: 0; }
      .note-two { left: 0; }
      .system-grid { grid-template-columns: 1fr; }
      .system-card.wide { grid-column: auto; }
      .lifecycle-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .timeline { overflow-x: auto; }
      .roles-grid { grid-template-columns: 1fr; }
      .role-card.wide { grid-column: auto; }
    }
    @media (max-width: 700px) {
      header { height: 66px; padding: 0 20px; }
      nav > a:not(.nav-cta) { display: none; }
      .nav-cta { padding: 9px 12px; font-size: 12px; }
      main { min-height: auto; gap: 36px; padding: 48px 20px 54px; }
      h1 { font-size: clamp(48px, 15vw, 66px); line-height: .98; letter-spacing: -.045em; }
      .lede { margin-top: 23px; font-size: 16px; line-height: 1.55; }
      .actions { margin-top: 28px; }
      .btn { width: 100%; min-height: 49px; }
      .engine-wrap { min-height: 470px; margin: 0 -9px; place-items: start center; }
      .engine { width: 100%; box-shadow: 0 20px 50px rgba(7,29,52,.12); }
      .engine-top { padding: 13px 14px; }
      .vendor-icon { width: 30px; height: 30px; }
      .engine-body { padding: 12px; }
      .metric { padding: 10px 8px; }
      .metric span { font-size: 8px; }
      .metric strong { margin-top: 7px; font-size: 12px; }
      .pipeline { gap: 4px; }
      .step { padding: 8px 5px; }
      .step b { font-size: 8px; }
      .step span { margin-top: 5px; font-size: 8px; }
      .section-label { margin-top: 16px; }
      .control { grid-template-columns: minmax(0, 1fr) 60px; min-height: 43px; padding: 0 10px; }
      .bar { display: none; }
      .control-name b { font-size: 10px; }
      .decision { padding: 13px; }
      .decision strong { font-size: 17px; }
      .audit { padding: 9px 12px; font-size: 7.5px; }
      .side-note { display: none; }
      .system-section { padding: 76px 20px 82px; }
      .system-intro { margin-bottom: 42px; }
      .system-intro h2 { font-size: 43px; }
      .system-intro p { font-size: 16px; }
      .system-grid { gap: 18px; }
      .system-card { display: block; }
      .module-art, .wide .module-art { height: auto; min-height: 0; padding: 45px 12px 16px; }
      .system-card:not(.wide) .module-art { display: block; padding: 20px 12px 16px; }
      .mini-layout { grid-template-columns: 1fr; }
      .mini-stack { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .system-card:not(.wide) .mini-layout { height: auto; }
      .system-card:not(.wide) .mini-layout > .mini-panel { height: auto; }
      .system-card:not(.wide) .mini-stack { grid-template-rows: none; }
      .mini-panel { padding: 13px; }
      .mini-value { font-size: 9px; }
      .dimension-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .control-dots { grid-template-columns: repeat(11, 7px); gap: 3px; }
      .control-dots i { width: 7px; height: 7px; }
      .module-copy { padding: 26px 24px 30px; }
      .module-copy h3 { font-size: 26px; }
      .lifecycle-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .roles-section { padding: 76px 20px 82px; }
      .role-art, .role-card.wide .role-art { min-height: 0; padding: 16px 12px; }
      .role-copy { padding: 26px 24px 30px; }
      .role-copy h3 { font-size: 26px; }
      .role-table th:nth-child(3), .role-table td:nth-child(3), .role-table th:nth-child(4), .role-table td:nth-child(4) { display: none; }
      .audit-layout, .portfolio-layout { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
      .control { opacity: 1; transform: none; }
    }