/* ZeroField Systems — page-local reference-driven implementation */
.systems-page {
  --sys-bg: #06131d;
  --sys-bg-soft: #05111a;
  --sys-text: #f4f0e8;
  --sys-muted: #9fb1c1;
  --sys-muted-low: #6f8191;
  --sys-blue: #42a5ff;
  --sys-blue-soft: #2d607f;
  --sys-gold: #d7a844;
  --sys-line: #1c3a50;
  --sys-grid: rgba(71, 130, 166, .12);
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  overflow: clip;
  color: var(--sys-text);
  background:
    radial-gradient(circle at 70% 9%, rgba(42,126,184,.06), transparent 30%),
    linear-gradient(180deg, var(--sys-bg) 0%, var(--sys-bg-soft) 100%);
  font-family: "Inter", Arial, sans-serif;
}
.systems-page::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--sys-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sys-grid) 1px,transparent 1px);
  background-size:110px 110px;
  opacity:.28;
  mask-image:linear-gradient(to bottom,transparent 1%,#000 7%,#000 96%,transparent 100%);
}
.systems-page *, .systems-page *::before, .systems-page *::after { box-sizing:border-box; }
.systems-page h1,.systems-page h2,.systems-page h3,.systems-page p { margin:0; }
.systems-page a { color:inherit; }
.systems-section {
  position:relative;
  z-index:1;
  width:100%;
  padding-inline:64px;
  border-bottom:1px solid var(--sys-line);
}
.systems-section-head {
  display:flex;
  align-items:center;
  gap:28px;
  padding-top:34px;
}
.systems-section-head h2,.systems-section-label {
  font-size:17px;
  line-height:1.2;
  letter-spacing:.08em;
  font-weight:650;
  color:var(--sys-text);
}
.systems-number { color:var(--sys-gold); font-size:12px; font-weight:750; letter-spacing:.12em; }
.systems-kicker,.systems-field-kicker { color:var(--sys-gold); font-size:12px; line-height:1.3; font-weight:750; letter-spacing:.18em; }
.systems-section-intro { max-width:1120px; margin-top:28px !important; color:var(--sys-muted); font-size:20px; line-height:1.46; }

/* 01 */
.systems-hero { height:650px; min-height:650px; overflow:hidden; }
.systems-section-head--hero { position:absolute; left:64px; top:0; }
.systems-hero-copy { position:absolute; left:64px; top:190px; width:52%; z-index:2; }
.systems-hero h1 { font-size:70px; line-height:1.02; letter-spacing:-.045em; font-weight:730; }
.systems-hero-copy p { margin-top:28px !important; color:var(--sys-muted); font-size:24px; line-height:1.42; }
.systems-hero-field { position:absolute; right:48px; top:135px; width:47%; height:450px; padding:34px 36px 28px; border:1px solid #1d3b52; border-radius:24px; background:#09151f; }
.systems-hero-field svg { width:100%; height:285px; display:block; margin-top:4px; }
.systems-hero-field-labels { display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; margin-top:-38px; color:var(--sys-text); font-size:13px; font-weight:650; }
.systems-field-caption { margin-top:48px !important; text-align:center; color:var(--sys-muted); font-size:13px; }

/* 02 */
.systems-bridge { min-height:390px; }
.systems-bridge-grid { display:grid; grid-template-columns:1fr 68px 1fr; align-items:center; gap:28px; margin-top:44px; }
.systems-bridge-grid article { min-height:190px; padding:34px 40px; border:1px solid #20384c; border-radius:18px; background:#0b1722; }
.systems-bridge-grid h3 { margin-top:24px; font-size:27px; line-height:1.3; font-weight:430; }
.systems-bridge-arrow { text-align:center; color:var(--sys-blue); font-size:34px; font-weight:300; }

/* 03 */
.systems-lens { min-height:720px; }
.systems-lens-field { position:relative; height:400px; margin-top:40px; }
.systems-lens-axis { position:absolute; left:5%; right:4%; top:48%; height:96px; border-top:2px solid #23455d; border-bottom:1px dashed #183447; border-radius:50%; transform:rotate(-1.4deg); }
.systems-lens-item { position:absolute; min-width:190px; padding:16px 18px; border:1px solid #2d4b61; border-radius:13px; background:#0b1823; }
.systems-lens-item::after { content:""; position:absolute; width:1px; height:45px; background:#1f3b4f; left:50%; }
.systems-lens-item h3 { font-size:13px; letter-spacing:.06em; font-weight:720; }
.systems-lens-item--purpose{left:4%;top:72px}.systems-lens-item--participants{left:27%;top:40px;border-color:var(--sys-blue)}.systems-lens-item--context{left:53%;top:92px}.systems-lens-item--authority{left:76%;top:50px}.systems-lens-item--coordination{left:13%;top:230px;border-color:var(--sys-blue)}.systems-lens-item--continuity{left:41%;top:270px}.systems-lens-item--integration{left:66%;top:215px}.systems-lens-item--interaction{left:81%;top:300px}
.systems-lens-item:nth-of-type(-n+4)::after{top:100%}.systems-lens-item:nth-of-type(n+5)::after{bottom:100%}
.systems-lens-caption { color:var(--sys-muted-low); font-size:13px; }

/* 04 */
.systems-expressions { min-height:1080px; }
.systems-expression-field { position:relative; height:770px; margin-top:36px; padding:40px 44px; border:1px solid #1b3a50; border-radius:26px; background:#08141d; overflow:hidden; }
.systems-expression-spine { position:absolute; left:44px; right:44px; bottom:160px; height:150px; border-radius:50% 45% 48% 52%; background:#0b1c29; border:1px solid #23485f; transform:skewY(-1deg); }
.systems-expression-spine::after { content:""; position:absolute; left:0; right:0; top:78px; border-top:5px solid var(--sys-gold); border-radius:50%; }
.systems-expression { position:absolute; z-index:2; }
.systems-expression h3 { font-size:16px; font-weight:720; line-height:1.3; }
.systems-expression p { color:var(--sys-muted); font-size:14px; line-height:1.48; }
.systems-expression svg { display:block; width:100%; }
.systems-expression--role { left:5%; top:110px; width:30%; }
.systems-expression--role svg { height:190px; margin-top:28px; }
.systems-expression--coordination { left:34%; top:88px; width:38%; }
.systems-expression--coordination svg { height:245px; margin-top:18px; }
.systems-expression--decision { right:4%; top:124px; width:29%; }
.systems-expression--decision svg { height:210px; margin-top:14px; }
.systems-expression-caption { position:absolute; bottom:50px; left:0; right:0; text-align:center; color:var(--sys-gold); font-size:13px; }

/* 05 */
.systems-shape { min-height:870px; }
.systems-concerns { display:grid; grid-template-columns:1fr 1fr; gap:0 76px; margin-top:52px; }
.systems-concerns article { position:relative; min-height:205px; padding:30px 0 26px; border-top:1px solid #2c4b61; }
.systems-concern-line { position:absolute; top:-2px; left:0; width:45%; height:3px; background:#2c4b61; }
.systems-concern-line--blue { background:var(--sys-blue); }.systems-concern-line--gold { background:var(--sys-gold); }
.systems-concerns h3 { font-size:14px; letter-spacing:.06em; font-weight:720; }
.systems-concerns p { max-width:75%; margin-top:18px !important; color:var(--sys-muted); font-size:14px; line-height:1.48; }
.systems-cue { position:absolute; right:18px; top:72px; width:130px; height:84px; opacity:.75; }
.systems-cue--roles i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--sys-blue); top:25px; }.systems-cue--roles i:nth-child(1){left:20px}.systems-cue--roles i:nth-child(2){left:58px;top:48px}.systems-cue--roles i:nth-child(3){left:96px;top:30px}
.systems-cue--authority{border-left:4px solid var(--sys-gold);background:linear-gradient(120deg,transparent 0 40%,rgba(215,168,68,.12) 41% 100%)}
.systems-cue--coordination{background:linear-gradient(140deg,transparent 40%,rgba(66,165,255,.2) 41% 43%,transparent 44%),radial-gradient(circle at 25% 60%,var(--sys-blue) 0 4px,transparent 5px),radial-gradient(circle at 70% 30%,#f4f0e8 0 4px,transparent 5px)}
.systems-cue--continuity{border:1px solid #597486;border-radius:50%;box-shadow:inset 0 0 0 14px rgba(215,168,68,.04)}
.systems-cue--external{background:linear-gradient(90deg,transparent 0 12%,#365b72 13% 14%,transparent 15% 45%,#365b72 46% 47%,transparent 48%)}
.systems-cue--surface{border:1px solid var(--sys-gold);clip-path:polygon(5% 15%,72% 0,100% 46%,67% 100%,4% 82%)}
.systems-concerns-caption { color:var(--sys-muted-low); font-size:13px; }

/* 06 */
.systems-emphasis { min-height:650px; }
.systems-emphasis-copy { margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:72px; }
.systems-emphasis-copy h3 { font-size:38px; line-height:1.18; font-weight:430; }
.systems-emphasis-copy p { color:var(--sys-muted); font-size:18px; line-height:1.45; }
.systems-emphasis-visuals { display:grid; grid-template-columns:1fr 1fr 1fr; gap:44px; margin-top:44px; }
.systems-emphasis-card { text-align:center; }.systems-emphasis-card p { margin-top:16px !important; color:var(--sys-muted); font-size:12px; }
.systems-emphasis-art { height:135px; position:relative; margin:auto; max-width:260px; }
.systems-emphasis-card--roles .systems-emphasis-art { border:1px solid #42a5ff; clip-path:polygon(8% 12%,86% 0,100% 50%,83% 100%,3% 88%,0 32%); }
.systems-emphasis-card--roles .systems-emphasis-art span{position:absolute;width:9px;height:9px;border-radius:50%;background:#42a5ff}.systems-emphasis-card--roles .systems-emphasis-art span:nth-child(1){left:18%;top:22%}.systems-emphasis-card--roles .systems-emphasis-art span:nth-child(2){left:44%;top:54%}.systems-emphasis-card--roles .systems-emphasis-art span:nth-child(3){left:72%;top:28%}.systems-emphasis-card--roles .systems-emphasis-art span:nth-child(4){left:65%;top:74%}
.systems-emphasis-card--continuity .systems-emphasis-art { border:2px solid #597486; border-radius:48% 54% 43% 58%; background:radial-gradient(circle at 55% 45%,rgba(215,168,68,.12),transparent 60%); }.systems-emphasis-card--continuity .systems-emphasis-art::after{content:"";position:absolute;inset:28px;border-top:3px solid var(--sys-gold);border-radius:50%}
.systems-emphasis-card--authority .systems-emphasis-art { border:2px solid var(--sys-gold); clip-path:polygon(8% 12%,90% 20%,82% 91%,15% 100%); }.systems-emphasis-card--authority .systems-emphasis-art::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:4px solid var(--sys-gold)}
.systems-emphasis-caption { margin-top:22px !important; text-align:center; color:var(--sys-muted-low); font-size:12px; }

/* 07 */
.systems-progression { min-height:800px; }
.systems-progression-model { width:min(820px,80%); margin:70px auto 0; padding:40px; border:1px solid #1c3a51; border-radius:24px; background:#0a1520; text-align:center; }
.systems-progression-step { width:min(680px,100%); margin:auto; padding:24px 30px; border:2px solid #53748c; border-radius:16px; background:#0f2232; }
.systems-progression-step--framework{border-color:var(--sys-gold)}.systems-progression-step--architecture{border-color:var(--sys-blue)}
.systems-progression-step h3 { font-size:20px; font-weight:720; }.systems-progression-step p { margin-top:7px !important; color:var(--sys-muted); font-size:14px; }
.systems-progression-arrow { display:block; margin:16px auto; color:var(--sys-blue); font-size:30px; }
.systems-progression-caption { margin-top:30px !important; color:var(--sys-gold); font-size:13px; }

/* 08 */
.systems-research { min-height:430px; border-bottom:0; }
.systems-research-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:50px; align-items:center; margin-top:48px; padding:44px 48px; border:1px solid #294760; border-radius:22px; background:#0d1d2a; }
.systems-research-panel h3 { font-size:30px; line-height:1.18; font-weight:680; }.systems-research-panel p { max-width:750px; margin-top:18px !important; color:var(--sys-muted); font-size:18px; line-height:1.4; }

/* Tablet */
@media (max-width: 939px) and (min-width: 680px) {
  .systems-section { padding-inline:44px; }
  .systems-section-head { gap:20px; padding-top:26px; }.systems-section-head h2,.systems-section-label{font-size:15px}.systems-number{font-size:11px}
  .systems-section-intro{font-size:18px;margin-top:22px!important}
  .systems-hero{height:820px;min-height:820px}.systems-section-head--hero{left:44px}.systems-hero-copy{left:44px;top:150px;width:68%}.systems-hero h1{font-size:54px}.systems-hero-copy p{font-size:21px;margin-top:22px!important}.systems-hero-field{left:44px;right:44px;top:400px;width:auto;height:360px;padding:30px}.systems-hero-field svg{height:230px}.systems-hero-field-labels{margin-top:-34px}.systems-field-caption{margin-top:34px!important}
  .systems-bridge{min-height:350px}.systems-bridge-grid{grid-template-columns:1fr 38px 1fr;gap:18px;margin-top:34px}.systems-bridge-grid article{min-height:220px;padding:28px 24px}.systems-bridge-grid h3{font-size:20px}.systems-bridge-arrow{font-size:28px}
  .systems-lens{min-height:560px}.systems-lens-field{height:345px;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:12px 58px}.systems-lens-axis{display:none}.systems-lens-item{position:relative;left:auto!important;top:auto!important;min-width:0;padding:14px 16px}.systems-lens-item::after{display:none}.systems-lens-caption{margin-top:12px!important}
  .systems-expressions{min-height:1010px}.systems-expression-field{height:790px;padding:38px 26px}.systems-expression-spine{left:28px;right:28px;bottom:142px;height:135px}.systems-expression--role{left:4%;top:105px;width:31%}.systems-expression--coordination{left:28%;top:88px;width:48%}.systems-expression--decision{right:2%;top:425px;width:43%}.systems-expression h3{font-size:13px}.systems-expression p{font-size:13px}.systems-expression--role svg{height:160px}.systems-expression--coordination svg{height:210px}.systems-expression--decision svg{height:190px}
  .systems-shape{min-height:780px}.systems-concerns{gap:0 44px;margin-top:42px}.systems-concerns article{min-height:180px;padding-top:26px}.systems-concerns p{max-width:82%;font-size:13px}.systems-cue{width:95px;height:70px;right:0}.systems-concerns-caption{margin-top:10px!important}
  .systems-emphasis{min-height:620px}.systems-emphasis-copy{margin-top:38px;grid-template-columns:1fr;gap:18px}.systems-emphasis-copy h3{font-size:30px}.systems-emphasis-copy p{font-size:17px}.systems-emphasis-visuals{gap:24px;margin-top:34px}.systems-emphasis-art{height:120px}.systems-emphasis-card p{font-size:11px}
  .systems-progression{min-height:690px}.systems-progression-model{width:88%;margin-top:50px;padding:32px}.systems-progression-step{padding:20px 24px}.systems-progression-step h3{font-size:17px}.systems-progression-caption{font-size:11px}
  .systems-research{min-height:360px}.systems-research-panel{margin-top:36px;padding:34px 32px}.systems-research-panel h3{font-size:24px}.systems-research-panel p{font-size:16px}
}

/* Mobile */
@media (max-width: 679px) {
  .systems-page{max-width:none}.systems-section{padding-inline:28px}.systems-section-head{gap:16px;padding-top:24px}.systems-section-head h2,.systems-section-label{font-size:12px;letter-spacing:.06em}.systems-number{font-size:10px}.systems-section-intro{font-size:17px;line-height:1.5;margin-top:18px!important}.systems-desktop-break{display:none}
  .systems-hero{height:760px;min-height:760px}.systems-section-head--hero{left:28px}.systems-hero-copy{left:28px;right:28px;top:150px;width:auto}.systems-hero h1{font-size:43px;line-height:1.06}.systems-hero-copy p{font-size:19px;line-height:1.48;margin-top:24px!important}.systems-hero-field{left:28px;right:28px;top:390px;width:auto;height:310px;padding:24px 20px}.systems-field-kicker{font-size:10px}.systems-hero-field svg{height:190px}.systems-hero-field-labels{margin-top:-22px;font-size:10px}.systems-field-caption{margin-top:28px!important;font-size:10px}
  .systems-bridge{min-height:500px}.systems-bridge-grid{grid-template-columns:1fr;gap:24px;margin-top:30px;padding-left:20px;border-left:1px solid #23485f}.systems-bridge-grid article{min-height:0;padding:24px 20px}.systems-bridge-grid h3{font-size:19px;margin-top:18px}.systems-bridge-arrow{transform:rotate(90deg);font-size:24px}
  .systems-lens{min-height:800px}.systems-lens-field{height:590px;margin-top:26px;padding-left:22px}.systems-lens-axis{left:22px;right:auto;top:0;bottom:0;width:1px;height:auto;border:0;background:linear-gradient(var(--sys-blue),var(--sys-gold),var(--sys-blue));border-radius:0;transform:none}.systems-lens-item{position:relative!important;left:auto!important;top:auto!important;min-width:0;margin:0 0 10px 32px;padding:13px 14px;border-radius:10px}.systems-lens-item::before{content:"";position:absolute;left:-39px;top:50%;width:13px;height:13px;border-radius:50%;background:#071018;border:2px solid var(--sys-gold);box-shadow:0 0 0 3px rgba(215,168,68,.12)}.systems-lens-item:nth-of-type(2n)::before{border-color:var(--sys-blue)}.systems-lens-item::after{display:none}.systems-lens-caption{font-size:10px}
  .systems-expressions{min-height:1770px}.systems-expression-field{height:1580px;margin-top:26px;padding:28px 20px;border-radius:20px}.systems-expression-spine{left:52px;top:84px;bottom:84px;width:84px;height:auto;border-radius:44px;background:linear-gradient(180deg,#0b1c29,#0b1722);transform:none}.systems-expression-spine::after{left:41px;right:auto;top:0;bottom:0;height:auto;border-top:0;border-left:5px solid var(--sys-gold);border-radius:0}.systems-expression{left:72px!important;right:18px!important;width:auto!important}.systems-expression h3{font-size:14px}.systems-expression p{font-size:14px;line-height:1.48}.systems-expression svg{max-width:280px}.systems-expression--role{top:120px}.systems-expression--coordination{top:595px}.systems-expression--decision{top:1080px}.systems-expression--role svg{height:215px}.systems-expression--coordination svg{height:255px}.systems-expression--decision svg{height:220px}.systems-expression-caption{bottom:34px;left:20px;right:20px;font-size:10px}
  .systems-shape{min-height:1540px}.systems-concerns{grid-template-columns:1fr;gap:0;margin-top:34px}.systems-concerns article{min-height:205px;padding:28px 0 22px}.systems-concerns h3{font-size:13px}.systems-concerns p{max-width:75%;font-size:14px}.systems-cue{right:0;width:80px;height:62px}.systems-concerns-caption{font-size:10px;margin-top:12px!important}
  .systems-emphasis{min-height:1250px}.systems-emphasis-copy{margin-top:32px;display:block}.systems-emphasis-copy h3{font-size:28px;line-height:1.2}.systems-emphasis-copy p{font-size:17px;line-height:1.48;margin-top:22px!important}.systems-emphasis-visuals{display:block;margin-top:42px}.systems-emphasis-card{margin-bottom:52px}.systems-emphasis-art{height:180px;max-width:290px}.systems-emphasis-card p{font-size:13px}.systems-emphasis-caption{font-size:10px;margin-top:8px!important}
  .systems-progression{min-height:980px}.systems-progression-model{width:100%;margin-top:44px;padding:30px 18px}.systems-progression-step{padding:22px 16px}.systems-progression-step h3{font-size:16px}.systems-progression-step p{font-size:13px}.systems-progression-arrow{margin:18px auto}.systems-progression-caption{font-size:10px;line-height:1.4}
  .systems-research{min-height:470px}.systems-research-panel{display:block;margin-top:34px;padding:30px 24px}.systems-research-panel h3{font-size:27px}.systems-research-panel p{font-size:16px;line-height:1.48}.systems-research-panel .cta{margin-top:30px}
}

/* Systems V2 wide-surface parity — >1440px only. */
@media (min-width:1441px) {
  .systems-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    overflow: visible;
    background:
      radial-gradient(circle at 70% 9%, rgba(42,126,184,.06), transparent 30%) center top / 1440px 100% no-repeat,
      linear-gradient(180deg, var(--sys-bg) 0%, var(--sys-bg-soft) 100%);
  }

  /* Preserve the accepted 1440px Systems grid exactly in the centered composition. */
  .systems-page::before {
    left: 50%;
    right: auto;
    width: 1440px;
    transform: translateX(-50%);
  }

  /* Continue the same restrained Systems grid into the outer gutters only. */
  .systems-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
      linear-gradient(var(--sys-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--sys-grid) 1px, transparent 1px);
    background-size: 110px 110px;
    background-position: calc(50% - 720px) 0;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 1%, #000 7%, #000 96%, transparent 100%),
      linear-gradient(to right, #000 0, #000 calc(50% - 720px), transparent calc(50% - 720px), transparent calc(50% + 720px), #000 calc(50% + 720px), #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 1%, #000 7%, #000 96%, transparent 100%),
      linear-gradient(to right, #000 0, #000 calc(50% - 720px), transparent calc(50% - 720px), transparent calc(50% + 720px), #000 calc(50% + 720px), #000 100%);
    mask-composite: intersect;
  }

  .systems-section {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
  }

  /* Continue each existing section boundary through both wide gutters. */
  .systems-section::after {
    display: none;
  }

  .systems-section:not(:first-child)::before {
    content: "";
    position: absolute;
    right: 50%;
    top: -1px;
    left: 50%;
    z-index: 5;
    width: auto;
    height: 1px;
    margin-right: -50vw;
    margin-left: -50vw;
    background: var(--sys-line);
    pointer-events: none;
  }
}