/*
  ZERO — public website stylesheet
  Originally based on Tooplate 2127 Little Fashion (https://www.tooplate.com/view/2127-little-fashion),
  reworked for the ZERO product site. Loaded after Bootstrap 5.
*/

/*---------------------------------------
  CUSTOM PROPERTIES
-----------------------------------------*/
:root {
  --white-color:          #FFFFFF;
  --primary-color:        #04b9a1;   /* brand teal: accents, dark backgrounds */
  --primary-strong:       #04a08c;   /* teal for large text / icons on white */
  --primary-dark:         #037a6b;   /* teal for small text and hovers on white (AA) */
  --section-bg-color:     #022a4a;   /* brand navy */
  --navy-deep:            #011c33;
  --navy-line:            rgba(255, 255, 255, 0.14);
  --light-bg-color:       #f3f6f8;
  --border-color:         #e1e6ea;
  --dark-color:           #000000;
  --ink-color:            #0d1b26;
  --grey-color:           #d1d0d0;
  --p-color:              #5f6368;
  --p-on-dark:            #b8c7d3;

  --sev-high:             #c2410c;
  --sev-medium:           #a16207;
  --sev-low:              #1d4ed8;

  --body-font-family:     'Inter', sans-serif;
  --mono-font-family:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --p-font-size:          18px;
  --small-font-size:      14px;
  --copyright-text-font-size: 15px;
  --custom-link-font-size: 12px;

  --font-weight-thin:     100;
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --radius:               14px;
  --nav-height:           86px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--white-color);
  color: var(--ink-color);
  font-family: var(--body-font-family);
  position: relative;
}

/* anchor targets clear the fixed navbar */
[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

/*---------------------------------------
  TYPOGRAPHY
-----------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  color: var(--dark-color);
  font-weight: var(--font-weight-bold);
}

h1, h2 { font-weight: var(--font-weight-black); letter-spacing: -0.02em; text-wrap: balance; }

h1 { font-size: 60px; line-height: 1.08; }
h2 { font-size: 42px; line-height: 1.15; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 19px; }
h6 { font-size: 16px; }

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
  line-height: 1.65;
}

.lead {
  font-size: 1.35rem;
  font-weight: var(--font-weight-light);
  line-height: 1.55;
}

a, button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--primary-color); }

b, strong { font-weight: var(--font-weight-bold); }

h1 span, h2 span, h4 span, .navbar-brand span { color: var(--primary-strong); }

.text-primary { color: var(--primary-strong) !important; }

::selection {
  background: var(--primary-color);
  color: var(--white-color);
}

.eyebrow {
  display: inline-block;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-intro { max-width: 760px; }
.section-intro p,
.lead { text-wrap: pretty; }
.section-intro.text-center { margin-left: auto; margin-right: auto; }

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
  box-shadow: none;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 16px;
  transform: translateY(-150%);
  z-index: 100000;
  background: var(--dark-color);
  color: var(--white-color);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus { transform: none; color: var(--white-color); }

/*---------------------------------------
  CUSTOM LINK
-----------------------------------------*/
.custom-link {
  color: var(--p-color);
  font-size: var(--custom-link-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}

.custom-link i {
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: 100%;
  transition: all 0.3s;
  line-height: normal;
}

.custom-link:hover { color: var(--primary-dark); }
.custom-link:hover i { opacity: 1; left: 101%; }

/*---------------------------------------
  PRE LOADER
-----------------------------------------*/
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white-color);
}

.spinner {
  border: 1px solid transparent;
  border-radius: 5px;
  position: relative;
}

.spinner::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  margin-top: -10px;
  margin-left: -23px;
  border-radius: 50%;
  border: 1px solid #959595;
  border-top-color: var(--white-color);
  animation: spinner .9s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/*---------------------------------------
  BUTTONS
-----------------------------------------*/
.custom-btn {
  background: var(--dark-color);
  border: 2px solid var(--dark-color);
  border-radius: 50px;
  color: var(--white-color);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 30px;
}

.custom-btn:hover,
.custom-btn:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white-color);
}

.custom-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}

.custom-btn-outline:hover,
.custom-btn-outline:focus-visible {
  background: var(--white-color);
  border-color: var(--white-color);
  color: var(--dark-color);
}

.custom-btn-sm {
  font-size: 13px;
  padding: 9px 20px;
}

/*---------------------------------------
  NAVIGATION
-----------------------------------------*/
.navbar {
  background: var(--white-color);
  border-bottom: 1px solid transparent;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 22px 0;
  z-index: 10;
  will-change: transform;
  transition: transform 300ms linear, padding 300ms, border-color 300ms;
}

.navbar.headroom--not-top {
  padding: 14px 0;
  border-bottom-color: var(--border-color);
}

.headroom--pinned { transform: translate(0, 0); }
.headroom--unpinned { transform: translate(0, -150%); }

.navbar-brand {
  color: var(--dark-color);
  font-size: 28px;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
}

.navbar-brand small {
  color: var(--p-color);
  font-size: 12px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.navbar-brand:hover { color: var(--dark-color); }

.navbar-expand-xl .navbar-nav .nav-link {
  display: inline-block;
  padding: 0;
  margin-right: 0.85rem;
  margin-left: 0.85rem;
}

.nav-link {
  color: var(--p-color);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  position: relative;
}

.navbar .nav-link::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(10px);
}

.navbar .nav-link.active::after,
.navbar .nav-link:hover::after {
  opacity: 1;
  transform: translateY(4px);
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.nav-link:focus {
  color: var(--dark-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
}

.navbar-toggler:focus { box-shadow: none; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(-45deg); }

.navbar-toggler .navbar-toggler-icon {
  background: var(--dark-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--dark-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon:before { top: -8px; }
.navbar-toggler .navbar-toggler-icon:after { top: 8px; }

/*---------------------------------------
  HOME HERO
-----------------------------------------*/
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--section-bg-color) url('../images/hero.jpg') center right / cover no-repeat;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 20, 38, 0.94) 0%, rgba(1, 28, 51, 0.82) 45%, rgba(1, 28, 51, 0.25) 100%);
}

.hero .container {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.hero h1 { color: var(--white-color); }
.hero h1 span { color: var(--primary-color); }

.hero .lead {
  color: var(--p-on-dark);
  max-width: 620px;
}

.hero .eyebrow { color: var(--primary-color); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  color: var(--p-on-dark);
  font-size: var(--small-font-size);
  margin-top: 28px;
}

.hero-note i { color: var(--primary-color); margin-right: 6px; }

/*---------------------------------------
  SUBPAGE HEADER (split image)
-----------------------------------------*/
.site-header {
  background-color: var(--section-bg-color);
  position: relative;
  overflow: hidden;
  margin-top: var(--nav-height);
}

.site-header.section-padding-img {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.site-header h1 { color: var(--white-color); }
.site-header h1 span { color: var(--primary-color); }
.site-header .lead { color: var(--p-on-dark); }
.site-header .eyebrow { color: var(--primary-color); }

.header-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}

/*---------------------------------------
  SECTIONS
-----------------------------------------*/
.section-padding {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.section-light { background: var(--light-bg-color); }

.section-dark {
  background: var(--section-bg-color);
  color: var(--white-color);
}

.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5 { color: var(--white-color); }
.section-dark h2 span { color: var(--primary-color); }
.section-dark p { color: var(--p-on-dark); }
.section-dark .eyebrow { color: var(--primary-color); }

/*---------------------------------------
  CARDS (shared)
-----------------------------------------*/
.info-card {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  height: 100%;
  padding: 32px 28px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.info-card:hover {
  border-color: rgba(4, 185, 161, 0.5);
  box-shadow: 0 1rem 2.5rem rgba(2, 42, 74, 0.08);
  transform: translateY(-3px);
}

.info-card h3,
.info-card h4 { font-size: 20px; margin-bottom: 10px; }

.info-card p {
  font-size: 16px;
  margin-bottom: 0;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(4, 185, 161, 0.12);
  color: var(--primary-dark);
  font-size: 22px;
  margin-bottom: 20px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--p-color);
  font-size: 17px;
}

.check-list li::before {
  content: '\F272'; /* bootstrap-icons: check2 */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary-strong);
  font-weight: bold;
}

.check-list.is-negative li::before {
  content: '\F659'; /* bootstrap-icons: x-lg */
  color: var(--sev-high);
  font-weight: normal;
}

.section-dark .check-list li { color: var(--p-on-dark); }
.section-dark .check-list li::before { color: var(--primary-color); }

.example-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--p-color);
  background: var(--light-bg-color);
  border: 1px dashed #b9c3cb;
  border-radius: 50px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.section-dark .example-label {
  color: var(--p-on-dark);
  background: transparent;
  border-color: var(--navy-line);
}

/*---------------------------------------
  PROBLEM
-----------------------------------------*/
.source-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.source-chip {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--p-color);
}

.source-chip strong {
  display: block;
  color: var(--ink-color);
  font-size: 15px;
}

.question-list {
  list-style: none;
  counter-reset: q;
  padding: 0;
  margin: 0;
}

.question-list li {
  counter-increment: q;
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 19px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-color);
}

.question-list li::before {
  content: '0' counter(q);
  color: var(--primary-dark);
  font-family: var(--mono-font-family);
  font-size: 14px;
}

/*---------------------------------------
  PIPELINE (flow diagram)
-----------------------------------------*/
.pipeline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
  padding: 0;
  margin: 0;
}

.pipeline li {
  display: flex;
  align-items: center;
}

.pipeline li:not(:last-child)::after {
  content: '\F285'; /* bootstrap-icons: chevron-right */
  font-family: 'bootstrap-icons';
  color: var(--primary-color);
  font-size: 13px;
  margin: 0 8px;
}

.pipeline-node {
  border: 1px solid var(--navy-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-color);
  border-radius: 50px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.pipeline-node.is-ai {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--navy-deep);
  font-weight: var(--font-weight-bold);
}

.pipeline-node.is-human {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/*---------------------------------------
  STEPS (How it works)
-----------------------------------------*/
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: background 0.3s, border-color 0.3s;
}

.step:hover {
  background: rgba(4, 185, 161, 0.08);
  border-color: rgba(4, 185, 161, 0.5);
}

.step-number {
  display: block;
  font-family: var(--mono-font-family);
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 18px;
}

.step h3 {
  color: var(--white-color);
  font-size: 20px;
  margin-bottom: 8px;
}

.step p {
  color: var(--p-on-dark);
  font-size: 15px;
  margin-bottom: 0;
}

/*---------------------------------------
  FINDING CARD (illustrative)
-----------------------------------------*/
.finding-card {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3.5rem rgba(2, 42, 74, 0.12);
  overflow: hidden;
}

.finding-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.finding-card-head h3 {
  font-size: 18px;
  margin: 0;
}

.severity {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}

.severity-high { color: var(--sev-high); background: #fff1e8; }
.severity-medium { color: var(--sev-medium); background: #fdf6e3; }
.severity-low { color: var(--sev-low); background: #eef3ff; }

.finding-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}

.finding-meta div {
  padding: 14px 24px;
  border-right: 1px solid var(--border-color);
}

.finding-meta div:last-child { border-right: 0; }

.finding-meta dt,
.finding-body dt {
  color: var(--p-color);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.finding-meta dd {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  margin: 0;
  overflow-wrap: anywhere;
}

.finding-body {
  padding: 20px 24px 24px;
  margin: 0;
}

.finding-body dd {
  font-size: 15px;
  color: var(--ink-color);
  margin-bottom: 16px;
}

.finding-body dd:last-child { margin-bottom: 0; }

.evidence {
  display: block;
  background: var(--navy-deep);
  color: #cfe3ef;
  font-family: var(--mono-font-family);
  font-size: 13px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*---------------------------------------
  RISK FLOW
-----------------------------------------*/
.risk-flow {
  list-style: none;
  padding: 0;
  margin: 0;
}

.risk-flow li {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--navy-line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 26px;
}

.risk-flow li:not(:last-child)::after {
  content: '\F282'; /* bootstrap-icons: chevron-down */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-50%);
  color: var(--primary-color);
  font-size: 14px;
}

.risk-flow li:last-child {
  margin-bottom: 0;
  border-color: var(--primary-color);
  background: rgba(4, 185, 161, 0.1);
}

.risk-flow strong {
  display: block;
  color: var(--white-color);
  font-size: 16px;
}

.risk-flow span {
  display: block;
  color: var(--p-on-dark);
  font-size: 14px;
}

.risk-flow .mini-findings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.risk-flow .mini-findings span {
  display: inline-block;
  font-size: 12px;
  border: 1px solid var(--navy-line);
  border-radius: 6px;
  padding: 2px 8px;
}

.factor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.factor-grid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--navy-line);
  padding-top: 14px;
}

.factor-grid i {
  color: var(--primary-color);
  font-size: 18px;
  line-height: 1.3;
}

.factor-grid strong {
  display: block;
  color: var(--white-color);
  font-size: 16px;
}

.factor-grid span {
  color: var(--p-on-dark);
  font-size: 14px;
}

/*---------------------------------------
  AI ANALYSIS LAYER
-----------------------------------------*/
.ai-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.ai-column {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ai-column li {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-color);
}

.ai-column li i {
  color: var(--primary-dark);
  margin-right: 8px;
}

.ai-column-label {
  color: var(--p-color);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ai-core {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 26px; /* aligns with the column lists below their labels */
  color: var(--primary-dark);
}

.ai-core-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--section-bg-color);
  color: var(--white-color);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 10px rgba(4, 185, 161, 0.12), 0 0 0 20px rgba(4, 185, 161, 0.06);
  text-align: center;
}

.ai-core-badge small {
  color: var(--primary-color);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-arrow { font-size: 22px; }

.ai-guardrail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.ai-guardrail i {
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.2;
}

.ai-guardrail h3,
.ai-guardrail h4 {
  font-size: 18px;
  margin-bottom: 4px;
}

.ai-guardrail p {
  font-size: 16px;
  margin: 0;
}

/*---------------------------------------
  REPORT OUTLINE
-----------------------------------------*/
.report-doc {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3.5rem rgba(2, 42, 74, 0.1);
  padding: 32px;
}

.report-doc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--ink-color);
  padding-bottom: 14px;
  margin-bottom: 8px;
}

.report-doc-title i {
  color: var(--primary-dark);
  font-size: 24px;
}

.report-doc-title strong { font-size: 17px; }

.report-toc {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 28px;
}

.report-toc li {
  counter-increment: toc;
  break-inside: avoid;
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-color);
}

.report-toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--primary-dark);
  font-family: var(--mono-font-family);
  font-size: 13px;
  line-height: 1.7;
}

/*---------------------------------------
  ARCHITECTURE LAYERS (platform page)
-----------------------------------------*/
.layers {
  display: grid;
  gap: 14px;
}

.layer {
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.03);
}

.layer-label {
  display: block;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.layer.is-core {
  border-color: var(--primary-color);
  background: rgba(4, 185, 161, 0.07);
}

.layer-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.layer-items li {
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--white-color);
  font-size: 14px;
}

.layer-connector {
  text-align: center;
  color: var(--primary-color);
  font-size: 18px;
  line-height: 1;
}

.layer-note {
  color: var(--p-on-dark);
  font-size: 14px;
  margin: 12px 0 0;
}

/*---------------------------------------
  ROLES (ZERO / ZERO AI / Security team)
-----------------------------------------*/
.roles {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}

.role {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.role.is-ai {
  background: var(--section-bg-color);
  border-color: var(--section-bg-color);
}

.role.is-human { border-color: var(--primary-strong); }

.role-label {
  display: block;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.role h3 {
  font-size: 22px;
  margin-bottom: 14px;
}

.role .check-list li {
  font-size: 15px;
  margin-bottom: 8px;
}

.role.is-ai .role-label { color: var(--primary-color); }
.role.is-ai h3 { color: var(--white-color); }
.role.is-ai .check-list li { color: var(--p-on-dark); }
.role.is-ai .check-list li::before { color: var(--primary-color); }

.role-arrow {
  display: flex;
  align-items: center;
  color: var(--primary-strong);
  font-size: 22px;
}

/*---------------------------------------
  FINDING ORIGIN (ZERO assessment -> finding)
-----------------------------------------*/
.origin-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.origin-flow li {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-color);
}

.origin-flow li.is-source {
  background: var(--section-bg-color);
  border-color: var(--section-bg-color);
  color: var(--white-color);
}

.origin-flow .op {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary-dark);
}

/*---------------------------------------
  ARCHITECTURE DIAGRAM (platform page)
-----------------------------------------*/
.arch {
  border: 1px solid var(--primary-color);
  border-radius: calc(var(--radius) + 4px);
  background: rgba(4, 185, 161, 0.05);
  padding: 22px;
}

.arch-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--white-color);
  font-size: 22px;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.arch-title small {
  color: var(--p-on-dark);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}

.arch-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.arch-module {
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
}

.arch-module.is-ai {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.arch-module .layer-label { margin-bottom: 10px; }
.arch-module.is-ai .layer-label { color: var(--navy-deep); }

.arch-module ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.arch-module li {
  color: var(--white-color);
  font-size: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--navy-line);
}

.arch-module.is-ai li {
  color: var(--navy-deep);
  font-weight: var(--font-weight-medium);
  border-top-color: rgba(1, 28, 51, 0.18);
}

.arch-step {
  display: flex;
  align-items: center;
  color: var(--primary-color);
}

.arch-down {
  text-align: center;
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1;
  margin: 12px 0;
}

.arch-team {
  border: 1px solid var(--primary-color);
  border-radius: var(--radius);
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.arch-team strong {
  color: var(--primary-color);
  margin-right: 6px;
}

.arch-team span {
  color: var(--white-color);
  font-size: 14px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  padding: 5px 11px;
}

/*---------------------------------------
  STATUS / NOTICE
-----------------------------------------*/
.notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--light-bg-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
}

.notice i {
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.2;
}

.notice p { margin: 0; font-size: 16px; }
.notice strong { color: var(--ink-color); }

/*---------------------------------------
  CTA BAND
-----------------------------------------*/
.cta-band {
  background: var(--section-bg-color);
  background-image: radial-gradient(ellipse at 80% 0%, rgba(4, 185, 161, 0.22), transparent 60%);
  text-align: center;
}

.cta-band h2 { color: var(--white-color); }
.cta-band h2 span { color: var(--primary-color); }
.cta-band p { color: var(--p-on-dark); }

.cta-band .custom-btn {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--navy-deep);
}

.cta-band .custom-btn:hover,
.cta-band .custom-btn:focus-visible {
  background: var(--white-color);
  border-color: var(--white-color);
  color: var(--navy-deep);
}

/*---------------------------------------
  CONTACT
-----------------------------------------*/
.contact-form .form-control,
.contact-form .form-select {
  border-color: #c9d1d7;
  border-radius: 10px;
  font-weight: var(--font-weight-normal);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--primary-strong);
  box-shadow: 0 0 0 3px rgba(4, 185, 161, 0.2);
}

.form-floating > label {
  color: var(--p-color);
  font-weight: var(--font-weight-normal);
}

.contact-form textarea.form-control { height: 170px; }

.contact-form .custom-btn { width: 100%; }

.form-hint {
  font-size: var(--small-font-size);
  color: var(--p-color);
}

.visually-hidden-honeypot { display: none !important; }

/*---------------------------------------
  SITE FOOTER
-----------------------------------------*/
.site-footer {
  background: var(--dark-color);
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.site-footer h2 {
  color: var(--white-color);
  font-size: 26px;
  letter-spacing: 0.04em;
}

.site-footer h2 span { color: var(--primary-color); }

.site-footer p { color: #9aa3ab; font-size: 15px; }

.footer-heading {
  color: var(--white-color);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu-link {
  color: #9aa3ab;
  display: inline-block;
  font-size: 15px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.footer-menu-link:hover { color: var(--white-color); }

.footer-bottom {
  border-top: 1px solid #22282d;
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.copyright-text {
  color: #9aa3ab;
  font-size: var(--copyright-text-font-size);
  margin: 0;
}

/*---------------------------------------
  REVEAL ON SCROLL (progressive enhancement)
-----------------------------------------*/
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .info-card:hover { transform: none; }
}

/*---------------------------------------
  RESPONSIVE STYLES
-----------------------------------------*/
@media screen and (max-width: 1199px) {
  h1 { font-size: 52px; }

  .navbar-collapse {
    padding: 12px 0 8px;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    margin: 0.9rem 0 0;
  }

  .navbar-cta { margin-top: 1.25rem; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* roles and architecture stack vertically; arrows point down */
  .roles,
  .arch-columns { grid-template-columns: 1fr; }

  .role-arrow,
  .arch-step { justify-content: center; }

  .role-arrow i,
  .arch-step i { transform: rotate(90deg); }
}

@media screen and (max-width: 991px) {
  :root { --nav-height: 76px; }

  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }

  .lead { font-size: 18px; }

  .section-padding {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .navbar { padding: 18px 0; }

  .hero { min-height: 0; }
  .hero::before { background: linear-gradient(180deg, rgba(1, 20, 38, 0.9) 0%, rgba(1, 28, 51, 0.82) 100%); }

  .site-header.section-padding-img {
    padding-top: 0;
    padding-bottom: 0;
  }

  .site-header .header-info {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .header-image {
    position: relative;
    display: block;
    width: 100%;
    height: 240px;
  }

  .ai-diagram {
    grid-template-columns: 1fr;
  }

  .ai-core {
    flex-direction: column;
    padding-top: 0;
  }

  .ai-arrow { transform: rotate(90deg); }

  .report-toc { columns: 1; }
}

@media screen and (max-width: 767px) {
  .finding-meta { grid-template-columns: 1fr; }
  .finding-meta div { border-right: 0; border-bottom: 1px solid var(--border-color); }
  .finding-meta div:last-child { border-bottom: 0; }

  .factor-grid { grid-template-columns: 1fr; }

  /* the pipeline becomes a vertical list on phones */
  .pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .pipeline li { flex-direction: column; }

  .pipeline li:not(:last-child)::after {
    content: '\F282';
    margin: 4px 0;
  }

  .pipeline-node {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

@media screen and (max-width: 575px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }

  .steps { grid-template-columns: 1fr; }
  .source-stack { grid-template-columns: 1fr; }

  .hero-actions .custom-btn { width: 100%; text-align: center; }

  .report-doc { padding: 22px; }
  .info-card { padding: 26px 22px; }
}