/* =============================================================
   ARK LABS — SOLUTIONS AUDIENCE PAGES
   Shared stylesheet for /solutions/for-enterprise/,
   /solutions/for-neoclouds/, /solutions/for-sovereign-cloud-operators/.
   Keeps the audience pages visually coherent as a set.
   ============================================================= */

/* ---- Shared .accent within hero + final CTA ---- */
.aud-hero h1 .accent,
.aud-final h2 .accent,
.aud-section h2 .accent { color: var(--cyan); }

/* ---------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------- */
.aud-hero {
  position: relative;
  background: linear-gradient(180deg, var(--light-blue) 0%, var(--white) 100%);
  padding: 88px 48px 72px;
  border-bottom: 1px solid var(--border-light);
}
.aud-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--coral);
}
.aud-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.aud-hero-copy h1 {
  font-size: 3.1em;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 4px 0 18px;
}
.aud-hero-copy .lede {
  font-size: 1.1em;
  color: var(--steel);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 28px;
}
.aud-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.aud-hero-ctas .btn-primary-lg span,
.aud-hero-ctas .btn-outline-lg span { margin-left: 4px; }

/* Hero-right card: proof/stat variant */
.aud-hero-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(12, 35, 64, 0.05);
  position: relative;
  overflow: hidden;
}
.aud-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cyan);
}
.aud-hero-card-kicker {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.aud-hero-card-title {
  font-size: 1.2em;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 16px;
}
.aud-hero-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.aud-hero-card-fact .k {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--steel);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.aud-hero-card-fact .v {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--navy);
}

/* ---------------------------------------------------------------
   2. SECTION SCAFFOLD (shared)
   --------------------------------------------------------------- */
.aud-section { padding: 88px 48px; }
.aud-section.alt { background: var(--bg-warm); }
.aud-section.dark {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
}
.aud-section.dark h2, .aud-section.dark h3, .aud-section.dark h4 { color: var(--white); }
.aud-section.dark p { color: rgba(255, 255, 255, 0.78); }
.aud-section-inner { max-width: 1200px; margin: 0 auto; }
.aud-section-head {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.aud-section-head .section-tag { justify-content: center; display: inline-flex; }
.aud-section-head .section-title { margin: 0 auto 14px; }
.aud-section-head .section-subtitle { margin: 0 auto; }
.aud-section.dark .section-tag,
.aud-section.dark .section-title { color: var(--white); }
.aud-section.dark .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.aud-section.dark .section-tag { color: var(--cyan); }

/* Breadcrumb above hero content — returns to /solutions/ */
.aud-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82em;
  color: var(--steel);
  margin-bottom: 18px;
}
.aud-hero-copy .section-tag { display: flex; }
.aud-crumb a {
  color: var(--steel);
  text-decoration: none;
  transition: color 0.18s ease;
}
.aud-crumb a:hover { color: var(--cyan); }
.aud-crumb .sep { color: var(--border); }
.aud-crumb .here { color: var(--navy); font-weight: 600; }

/* ---------------------------------------------------------------
   3. THREE-CARD EXPLAINER (numbered)
   --------------------------------------------------------------- */
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.three-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
  position: relative;
}
.aud-section.alt .three-card { background: var(--white); }
.aud-section.dark .three-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.aud-section.dark .three-card h4 { color: var(--white); }
.aud-section.dark .three-card p { color: rgba(255, 255, 255, 0.7); }
.three-num {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.three-card h4 {
  font-size: 1.18em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.3;
}
.three-card p {
  font-size: 0.94em;
  color: var(--steel);
  line-height: 1.65;
  margin: 0;
}

/* ---------------------------------------------------------------
   4. FEATURE GRID (four-up with icon badge)
   --------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-cell {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px 22px;
}
.aud-section.alt .feature-cell { background: var(--white); }
.feature-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 800;
  font-size: 1.1em;
  margin-bottom: 14px;
}
.feature-cell h4 {
  font-size: 1.02em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.3;
}
.feature-cell p {
  font-size: 0.88em;
  color: var(--steel);
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------
   5. VERTICAL GRID (reused pattern for /for-enterprise/)
   --------------------------------------------------------------- */
.aud-vertical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.aud-vertical-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.aud-vertical-card.live:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(12, 35, 64, 0.08);
  border-color: var(--cyan);
}
.aud-vertical-card.soon { background: var(--bg-warm); opacity: 0.88; }
.aud-vertical-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.aud-vertical-status.soon { color: var(--steel); }
.aud-vertical-status .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(13, 138, 106, 0.5);
  animation: aud-pulse 2s infinite;
}
@keyframes aud-pulse {
  0% { box-shadow: 0 0 0 0 rgba(13, 138, 106, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(13, 138, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 138, 106, 0); }
}
.aud-vertical-card h4 {
  font-size: 1.08em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.25;
}
.aud-vertical-card > p {
  font-size: 0.88em;
  color: var(--steel);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}
.aud-vertical-cta {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--cyan);
}
.aud-vertical-cta.muted { color: var(--steel); font-weight: 500; font-style: italic; }

/* ---------------------------------------------------------------
   6. REGULATORY BADGES STRIPE
   --------------------------------------------------------------- */
.reg-stripe {
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}
.reg-stripe-copy .section-tag { color: var(--cyan); }
.reg-stripe-copy h3 {
  font-size: 1.45em;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin: 4px 0 10px;
}
.reg-stripe-copy p {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}
.reg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reg-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 174, 232, 0.35);
  color: var(--white);
  font-size: 0.85em;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.reg-chip.strong {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--white);
}

/* ---------------------------------------------------------------
   7. DEPLOYMENT OPTIONS (3 tier cards, enterprise page)
   --------------------------------------------------------------- */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.deploy-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
}
.deploy-card.featured { border: 2px solid var(--cyan); }
.deploy-kicker {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deploy-card h4 {
  font-size: 1.3em;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.deploy-card > p {
  font-size: 0.92em;
  color: var(--steel);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}
.deploy-fit {
  font-size: 0.85em;
  color: var(--navy);
  font-weight: 600;
  background: var(--light-blue);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.deploy-cta {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.deploy-cta span { transition: transform 0.18s ease; }
.deploy-cta:hover span { transform: translateX(4px); }


/* ---------------------------------------------------------------
   9. STATS STRIPE (4-up proof numbers)
   --------------------------------------------------------------- */
.stats-stripe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.aud-section.alt .stats-stripe { background: var(--white); }
.aud-section.dark .stats-stripe {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.stats-item { text-align: center; }
.stats-num {
  font-size: 2.2em;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.stats-label {
  font-size: 0.85em;
  color: var(--steel);
  line-height: 1.45;
}
.aud-section.dark .stats-label { color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------
   10. COMMERCIAL/PROCESS FLOW (4-step)
   --------------------------------------------------------------- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: flow;
}
.flow-node {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px 22px;
  position: relative;
}
.aud-section.dark .flow-node {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.flow-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--white);
  font-weight: 800;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.flow-node h4 {
  font-size: 1.02em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.aud-section.dark .flow-node h4 { color: var(--white); }
.flow-node p {
  font-size: 0.88em;
  color: var(--steel);
  line-height: 1.55;
  margin: 0 0 12px;
}
.aud-section.dark .flow-node p { color: rgba(255, 255, 255, 0.7); }
.flow-meta {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   11. SPLIT NARRATIVE (2-col: copy + list)
   --------------------------------------------------------------- */
.split-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.split-copy h2 {
  font-size: 2.1em;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin: 4px 0 18px;
  letter-spacing: -0.5px;
}
.aud-section.dark .split-copy h2 { color: var(--white); }
.split-copy p {
  font-size: 1em;
  color: var(--steel);
  line-height: 1.7;
  margin-bottom: 14px;
}
.aud-section.dark .split-copy p { color: rgba(255, 255, 255, 0.8); }
.split-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.split-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 10px;
  padding: 18px 22px;
}
.split-item h5 {
  font-size: 0.98em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
.split-item p {
  font-size: 0.88em;
  color: var(--steel);
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------
   12. FINAL CTA (dark band, coral bottom bar)
   --------------------------------------------------------------- */
.aud-final {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 88px 48px;
  text-align: center;
  position: relative;
}
.aud-final::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--coral);
}
.aud-final-inner { max-width: 780px; margin: 0 auto; }
.aud-final .section-tag { color: var(--cyan); margin-bottom: 18px; justify-content: center; display: inline-flex; }
.aud-final h2 {
  font-size: 2.4em;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.aud-final p {
  font-size: 1.05em;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto 28px;
}
.aud-final-ctas {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.aud-final .btn-w,
.aud-final .btn-od {
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.aud-final .btn-w { background: var(--cyan); color: var(--white); }
.aud-final .btn-w:hover { background: var(--cyan-dark); transform: translateY(-1px); }
.aud-final .btn-od {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.aud-final .btn-od:hover { border-color: var(--white); transform: translateY(-1px); }

/* ---------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .aud-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .aud-hero-copy h1 { font-size: 2.5em; }
  .three-grid, .deploy-grid { grid-template-columns: 1fr; }
  .feature-grid, .aud-vertical-grid, .flow-grid, .stats-stripe { grid-template-columns: repeat(2, 1fr); }
  .reg-stripe, .split-wrap { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .aud-hero { padding: 56px 24px 48px; }
  .aud-section { padding: 64px 24px; }
  .aud-final { padding: 64px 24px; }
  .aud-hero-copy h1 { font-size: 2.05em; }
  .feature-grid, .aud-vertical-grid, .flow-grid, .stats-stripe { grid-template-columns: 1fr; }
  .aud-final h2 { font-size: 1.85em; }
  .reg-stripe { padding: 28px 24px; }
}