/* ═══════════════════════════════════════════════════════════════
   VisionFirm WordPress — Global Styles
   Ported from static site styles.css for visual parity.
   Fonts come from theme.json (self-hosted Albert Sans + JetBrains).
   ═══════════════════════════════════════════════════════════════ */


/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand colors — VisionFirm Figma Styleguide */
  --midnight:      #000C1F;
  --steel:         #4C7186;
  --steel-medium:  #B29EAD;
  --steel-light:   #C9D5DB;
  --gray-subtle:   #F5F5F5;
  --cobalt:        #2C5CF8;
  --vivid-orange:  #EB591F;
  --manilla:       #D9D1CF;
  --manilla-light: #EEECE8;
  --white:         #FFFFFF;

  /* Semantic */
  --bg-dark:          var(--midnight);
  --bg-light:         var(--gray-subtle);
  --bg-warm:          var(--manilla-light);
  --accent-primary:   var(--cobalt);
  --accent-secondary: var(--vivid-orange);
  --text-primary:     var(--midnight);
  --text-secondary:   var(--steel);
  --text-on-dark:     var(--steel-light);
  --border-color:     var(--manilla);
  --border:           var(--manilla);

  /* Status */
  --success: #22C55E;
  --danger:  #EF4444;
  --warning: #F59E0B;

  /* Spacing */
  --section-pad: 128px 5%;
  --section-pad-sm: 64px 5%;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Typography ───────────────────────────────────────────── */
.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vivid-orange);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
p  { font-size: 1rem; line-height: 1.7; }
.lead { font-size: 1.2rem; line-height: 1.65; color: var(--text-secondary); }
.label-text {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Marketing heading variant — slightly larger/bolder for hero/feature sections */
.marketing-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* ─── Buttons (pill per styleguide) ────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  border: 2px solid transparent;
  text-decoration: none; position: relative;
}
.btn i[class*="ph"] {
  display: inline-flex; align-items: center; line-height: 1;
}
.btn:active { transform: scale(0.97); }
.btn .btn-arrow {
  opacity: 0; max-width: 0; margin-left: 0; transform: translateX(-6px);
  display: inline-flex; align-items: center;
  transition: all 0.22s ease; overflow: hidden;
}
.btn:hover .btn-arrow {
  opacity: 1; max-width: 20px; margin-left: 10px; transform: translateX(0);
}
.btn-lg {
  padding: 16px 34px; font-size: 1rem;
}

/* Filled Vivid Orange — primary CTA */
.btn-orange {
  background: var(--vivid-orange); color: var(--white);
  border-color: var(--vivid-orange);
}
.btn-orange:hover {
  background: #D14E18; border-color: #D14E18;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(235,89,31,0.35);
}

/* Filled Midnight — primary on light bg */
.btn-midnight {
  background: var(--midnight); color: var(--white);
  border-color: var(--midnight);
}
.btn-midnight:hover {
  background: #0D2236; border-color: #0D2236;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,12,31,0.25);
}

/* Filled Cobalt */
.btn-cobalt {
  background: var(--cobalt); color: var(--white);
  border-color: var(--cobalt);
}
.btn-cobalt:hover {
  background: #0B3FE0; border-color: #0B3FE0;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(44,92,248,0.35);
}

/* Outline — light bg */
.btn-outline {
  background: transparent; color: var(--midnight);
  border-color: var(--manilla);
}
.btn-outline:hover {
  border-color: var(--midnight);
  background: var(--gray-subtle);
}

/* Outline — dark bg */
.btn-outline-light {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

/* Ghost */
.btn-ghost {
  background: transparent; color: var(--cobalt);
  border-color: transparent; padding: 8px 4px;
}
.btn-ghost:hover { color: #0B3FE0; text-decoration: underline; }

/* ─── Nav ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 72px;
  background: rgba(0,12,31,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.3s ease, background 0.3s ease;
}
nav.nav-hidden { transform: translateY(-100%); }
nav.nav-elevated { box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.nav-logo {
  display: flex; align-items: center; gap: 10px;
}
.nav-logo img {
  height: 28px; width: auto;
  filter: brightness(0) invert(1);
}
.nav-logo .logo-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--white); font-weight: 800;
  font-size: 1.05rem; letter-spacing: -0.01em;
}
.nav-logo .logo-v {
  width: 26px; height: 26px; flex: 0 0 auto;
}
.nav-links {
  display: flex; align-items: center; gap: 32px; list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,0.75); font-size: 0.88rem; font-weight: 500;
  transition: color 0.15s; position: relative;
  padding: 6px 2px;
}
.nav-links a:hover { color: white; }
.nav-links a[aria-current="page"],
.nav-links a.nav-active {
  color: var(--white);
}
.nav-links a[aria-current="page"]::after,
.nav-links a.nav-active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--vivid-orange);
  border-radius: 2px;
}
.nav-cta {
  display: flex; align-items: center; gap: 12px;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  padding: 140px 5% 96px;
  background: linear-gradient(155deg, var(--midnight) 0%, #061728 50%, #0D2236 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(44,92,248,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(76,113,134,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  max-width: 1320px; margin: 0 auto;
  position: relative; z-index: 1;
}
.hero-text { max-width: 620px; }
.hero-text .eyebrow { margin-bottom: 20px; }
.hero-text h1 { color: var(--white); margin-bottom: 24px; }
.hero-text h1 em {
  font-style: normal; color: var(--vivid-orange);
}
.hero-text .lead {
  color: var(--steel-light); margin-bottom: 36px;
}

.hero-screenshot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-screenshot img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
}
/* Browser chrome frame */
.hero-screenshot .browser-bar {
  background: #1A2A3A;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px 12px 0 0;
}
.hero-screenshot .browser-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.hero-screenshot .browser-bar .dot.r { background: #EF4444; }
.hero-screenshot .browser-bar .dot.y { background: #F59E0B; }
.hero-screenshot .browser-bar .dot.g { background: #22C55E; }

/* ─── Stats Bar ────────────────────────────────────────────── */
.stats-bar {
  background: var(--midnight);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 40px 5%;
}
.stats-grid {
  display: flex; justify-content: center; align-items: center;
  gap: 48px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 1.8rem; font-weight: 800;
  color: var(--steel-light);
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel-light); margin-top: 4px;
}
.stat-sep {
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.1);
}

/* ─── Section Layout ───────────────────────────────────────── */
.section { padding: var(--section-pad); }
.section-dark { background: var(--midnight); color: var(--white); }
.section-light { background: var(--gray-subtle); }
.section-warm { background: var(--manilla-light); }
.section-white { background: var(--white); }
.section-header {
  text-align: center; max-width: 720px; margin: 0 auto 56px;
}
.section-header .eyebrow { margin-bottom: 16px; }
.section-header p { margin-top: 20px; color: var(--text-secondary); }
.section-header-dark p { color: var(--steel-light); }

/* ─── Card Grid ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 24px; max-width: 1280px; margin: 0 auto; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card {
  background: var(--white); border: 1px solid var(--manilla);
  border-radius: 16px; padding: 32px;
  transition: all 0.2s ease;
}
.card:hover {
  border-color: var(--cobalt);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,12,31,0.08);
}
/* Flat brand-color glyphs per styleguide — no gradient tiles */
.card-icon {
  width: auto; height: auto; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-size: 2rem; color: var(--midnight); margin-bottom: 18px;
  background: transparent !important; box-shadow: none !important;
}
.card-icon-cobalt { color: var(--cobalt); }
.card-icon-orange { color: var(--vivid-orange); }
.card-icon-steel  { color: var(--steel); }
.card-icon-midnight { color: var(--midnight); }
/* Legacy aliases → brand equivalents */
.card-icon-success { color: var(--steel); }
.card-icon-danger  { color: var(--vivid-orange); }
.card-icon-purple  { color: var(--cobalt); }

.card-icon-heading {
  width: 52px; height: 52px; font-size: 1.5rem;
}

.card h3 { color: var(--midnight); margin-bottom: 12px; }
.card p { color: var(--text-secondary); font-size: 0.92rem; }

/* ─── Feature Card (module cards) ──────────────────────────── */
.feature-card {
  background: var(--white); border: 1px solid var(--manilla);
  border-radius: 16px; padding: 28px;
  transition: all 0.2s ease;
  display: flex; flex-direction: column;
}
.feature-card:hover {
  border-color: var(--cobalt);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,12,31,0.08);
}
.feature-card .card-icon { margin-bottom: 16px; }
.feature-card h3 { color: var(--midnight); margin-bottom: 8px; font-size: 1.1rem; }
.feature-card .desc { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 20px; }
.feature-list {
  list-style: none; margin-top: auto; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.feature-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-secondary);
}
.feature-list li i { color: var(--success); font-size: 1rem; }
.feature-card-footer {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--manilla);
  font-size: 0.82rem; color: var(--steel);
  font-weight: 600;
}

/* ─── Architecture Diagram ─────────────────────────────────── */
.arch-diagram {
  background: linear-gradient(165deg, var(--midnight) 0%, #061728 100%);
  border-radius: 20px; padding: 48px 32px;
  max-width: 1100px; margin: 0 auto 48px;
  position: relative; overflow: hidden;
}
.arch-diagram::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(44,92,248,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.arch-modules {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; position: relative; z-index: 1;
}
.arch-module {
  text-align: center; padding: 20px 12px;
  border: 1px solid rgba(76,113,134,0.3);
  border-radius: 12px; background: rgba(0,12,31,0.5);
  cursor: default;
}
.arch-module i { font-size: 1.6rem; color: var(--cobalt); margin-bottom: 8px; display: block; }
.arch-module span {
  font-size: 0.78rem; font-weight: 600;
  color: var(--steel-light); display: block;
}

.arch-connector {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 24px 0;
}
.arch-connector-line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cobalt), transparent);
}
.arch-connector-badge {
  padding: 8px 20px; border-radius: 20px;
  background: var(--cobalt); color: var(--white);
  font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; letter-spacing: 0.02em;
}

.arch-foundation {
  position: relative; z-index: 1;
  background: rgba(76,113,134,0.1);
  border: 1px solid rgba(76,113,134,0.2);
  border-radius: 12px; padding: 20px 28px;
  text-align: center;
}
.arch-foundation-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--steel-light); margin-bottom: 12px;
}
.arch-pillars {
  display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
}
.arch-pillars span {
  font-size: 0.75rem; color: var(--steel-medium);
  font-weight: 500;
}

/* ─── Testimonial ──────────────────────────────────────────── */
.testimonial-section {
  background: var(--midnight);
  position: relative; overflow: hidden;
}
.testimonial-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(44,92,248,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.testimonial-card {
  max-width: 680px; margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 40px;
  text-align: center; position: relative; z-index: 1;
}
.testimonial-stars {
  display: flex; justify-content: center; gap: 4px;
  margin-bottom: 24px;
}
.testimonial-stars i { color: var(--vivid-orange); font-size: 1.2rem; }
.testimonial-quote {
  font-size: 1.1rem; font-style: italic;
  line-height: 1.7; color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
}
.testimonial-author {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cobalt), var(--vivid-orange));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--white); font-size: 1.1rem;
}
.testimonial-info { text-align: left; }
.testimonial-name {
  font-weight: 700; color: var(--white); font-size: 0.95rem;
}
.testimonial-role {
  font-size: 0.82rem; color: var(--steel-light);
}

/* ─── Roadmap Timeline ─────────────────────────────────────── */
.roadmap-container {
  background: linear-gradient(165deg, var(--midnight) 0%, #061728 100%);
  border-radius: 20px; padding: 48px 32px;
  max-width: 1100px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.roadmap-container::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at 20% 50%, rgba(235,89,31,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 50%, rgba(44,92,248,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.roadmap-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 20px;
  background: rgba(235,89,31,0.12); border: 1px solid rgba(235,89,31,0.25);
  font-size: 0.78rem; font-weight: 700; color: var(--vivid-orange);
  margin-bottom: 24px; position: relative; z-index: 1;
}
.roadmap-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vivid-orange);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.timeline {
  position: relative; z-index: 1;
  margin: 40px 0;
}
.timeline-axis {
  display: flex; align-items: center;
  position: relative; margin-bottom: 48px;
}
.timeline-line {
  flex: 1; height: 3px;
  background: linear-gradient(90deg, var(--vivid-orange), var(--cobalt), var(--steel));
  border-radius: 2px;
}
.timeline-quarters {
  display: flex; justify-content: space-between;
  position: relative; margin-bottom: 16px;
}
.timeline-quarter {
  text-align: center; flex: 1;
}
.timeline-quarter-label {
  display: inline-block;
  padding: 4px 14px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 700;
  color: var(--white);
}
.timeline-quarter-label.q2 { background: var(--vivid-orange); }
.timeline-quarter-label.q3 { background: var(--cobalt); }
.timeline-quarter-label.q4 { background: var(--steel); }

.timeline-items {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.timeline-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 20px;
}
.timeline-item i {
  font-size: 1.4rem; margin-bottom: 8px; display: block;
}
.timeline-item.q2 i { color: var(--vivid-orange); }
.timeline-item.q3 i { color: var(--cobalt); }
.timeline-item.q4 i { color: var(--steel-light); }
.timeline-item h4 {
  font-size: 0.88rem; color: var(--white); margin-bottom: 4px;
}
.timeline-item p {
  font-size: 0.78rem; color: var(--steel-light); line-height: 1.5;
}
.timeline-item .quarter-tag {
  display: inline-block; margin-top: 10px;
  padding: 2px 10px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 700;
}
.quarter-tag.q2 { background: rgba(235,89,31,0.15); color: var(--vivid-orange); }
.quarter-tag.q3 { background: rgba(44,92,248,0.15); color: var(--cobalt); }
.quarter-tag.q4 { background: rgba(76,113,134,0.2); color: var(--steel-light); }

/* Roadmap email form */
.roadmap-form {
  display: flex; gap: 12px; max-width: 480px;
  margin: 32px auto 0; position: relative; z-index: 1;
}
.roadmap-form input {
  flex: 1; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--white); font-family: inherit; font-size: 0.9rem;
}
.roadmap-form input::placeholder { color: var(--steel-medium); }
.roadmap-form input:focus {
  outline: none; border-color: var(--cobalt);
  background: rgba(255,255,255,0.08);
}

/* ─── Mid-Page CTA ────────────────────────────────────────── */
.mid-cta-section {
  background: var(--bg-warm);
  text-align: center;
  padding: 72px 5%;
}
.mid-cta-content {
  max-width: 640px;
  margin: 0 auto;
}
.mid-cta-content h2 {
  color: var(--midnight);
  margin-bottom: 16px;
}
.mid-cta-content p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.65;
}

/* ─── CTA Section ──────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--midnight) 0%, #0D2236 100%);
  text-align: center; padding: var(--section-pad);
}
.cta-content {
  max-width: 700px; margin: 0 auto;
}
.cta-content h2 { color: var(--white); margin-bottom: 20px; }
.cta-content p { color: var(--steel-light); margin-bottom: 32px; }
.cta-fine {
  margin-top: 24px; font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ─── Footer ───────────────────────────────────────────────── */
footer {
  background: #070E1C;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 64px 5% 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; max-width: 1280px; margin: 0 auto;
}
.footer-brand img {
  height: 28px; width: auto; margin-bottom: 20px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  font-size: 0.88rem; line-height: 1.7;
  color: rgba(255,255,255,0.55); max-width: 320px;
}
.footer-col h4 {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel); margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 0.88rem; color: rgba(255,255,255,0.55);
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  max-width: 1280px; margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p {
  font-size: 0.8rem; color: rgba(255,255,255,0.3);
}
.footer-bottom-links {
  display: flex; gap: 24px;
}
.footer-bottom-links a {
  font-size: 0.8rem; color: rgba(255,255,255,0.3);
  transition: color 0.15s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

/* ─── Page Hero (sub-pages) ────────────────────────────────── */
.page-hero {
  padding: 140px 5% 64px;
  background: linear-gradient(155deg, var(--midnight) 0%, #061728 100%);
  text-align: center; position: relative;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(44,92,248,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 { color: var(--white); margin-bottom: 16px; position: relative; z-index: 1; }
.page-hero p { color: var(--steel-light); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 16px; position: relative; z-index: 1; }

/* ─── Content Sections (sub-pages) ─────────────────────────── */
.content-section {
  padding: 64px 5%;
  max-width: 900px; margin: 0 auto;
}
.content-section h2 {
  margin-bottom: 20px; font-size: 1.6rem;
}
.content-section h3 {
  margin-top: 32px; margin-bottom: 12px;
}
.content-section p {
  margin-bottom: 16px; color: var(--text-secondary);
  line-height: 1.8;
}
.content-section ul, .content-section ol {
  margin-bottom: 16px; padding-left: 24px;
  color: var(--text-secondary); line-height: 1.8;
}
.content-section li { margin-bottom: 8px; }

/* TOC for legal pages */
.toc {
  background: var(--gray-subtle); border-radius: 12px;
  padding: 24px 32px; margin-bottom: 40px;
}
.toc h3 { margin-top: 0; margin-bottom: 12px; font-size: 1rem; }
.toc ol { padding-left: 20px; }
.toc li { margin-bottom: 6px; }
.toc a {
  color: var(--cobalt); font-size: 0.92rem;
  transition: color 0.15s;
}
.toc a:hover { color: #0B3FE0; text-decoration: underline; }

/* Code blocks (API docs) */
.code-block {
  background: var(--midnight); color: var(--steel-light);
  border-radius: 12px; padding: 24px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem; line-height: 1.7;
  overflow-x: auto; margin-bottom: 24px;
  border: 1px solid rgba(76,113,134,0.2);
}
.code-block .comment { color: var(--steel-medium); }
.code-block .string { color: var(--success); }
.code-block .keyword { color: var(--cobalt); }

/* Contact form */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; max-width: 1100px; margin: 0 auto;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; margin-bottom: 6px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--midnight);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--manilla);
  border-radius: 8px; font-family: inherit;
  font-size: 0.92rem; color: var(--midnight);
  background: var(--white);
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(44,92,248,0.1);
}
.form-group textarea { resize: vertical; min-height: 140px; }

/* ─── Utility Classes ──────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible {
  opacity: 1; transform: translateY(0);
}
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-orange { color: var(--vivid-orange); }
.text-cobalt { color: var(--cobalt); }
.text-steel { color: var(--steel); }
.max-w-720 { max-width: 720px; margin-left: auto; margin-right: auto; }
.max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; }
.max-w-1280 { max-width: 1280px; margin-left: auto; margin-right: auto; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ─── Mobile Nav Toggle + Overlay ──────────────────────────── */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: transparent;
  color: var(--white); font-size: 1.5rem; cursor: pointer;
  padding: 0; line-height: 1;
}
.nav-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,12,31,0.98);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-mobile.open {
  opacity: 1; pointer-events: auto;
}
.nav-mobile-close {
  position: absolute; top: 16px; right: 5%;
  width: 40px; height: 40px; border: none; background: transparent;
  color: var(--white); font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
.nav-mobile ul {
  list-style: none; display: flex; flex-direction: column;
  align-items: center; gap: 24px; padding: 0; margin-bottom: 40px;
}
.nav-mobile ul a {
  color: var(--white); font-size: 1.2rem; font-weight: 600;
  min-height: 48px; display: flex; align-items: center;
  transition: color 0.15s;
}
.nav-mobile ul a:hover { color: var(--vivid-orange); }
.nav-mobile .btn {
  min-width: 200px; justify-content: center;
}

/* ─── Challenge Cards (numbered watermark style) ──────────── */
.challenge-card {
  background: var(--white); border: 1px solid var(--manilla);
  border-radius: 14px; padding: 28px;
  position: relative; overflow: hidden;
  transition: all 0.2s ease;
}
.challenge-card:hover {
  border-color: var(--cobalt);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,12,31,0.08);
}
.challenge-card .watermark {
  position: absolute; top: -10px; right: -10px;
  font-size: 6rem; opacity: 0.05; color: var(--steel);
  pointer-events: none; line-height: 1;
}
.challenge-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 0.85rem; font-weight: 800; color: var(--white);
  margin-bottom: 16px; position: relative;
}
.num-cobalt { background: var(--cobalt); }
.num-orange { background: var(--vivid-orange); }
.num-steel { background: var(--steel); }
.challenge-card h3 {
  color: var(--midnight); margin-bottom: 10px;
  font-size: 1.1rem; position: relative;
}
.challenge-card p {
  color: var(--text-secondary); font-size: 0.9rem;
  line-height: 1.65; margin-bottom: 14px; position: relative;
}
.challenge-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; position: relative;
}
.challenge-tag-red { background: rgba(239,68,68,0.1); color: var(--danger); }
.challenge-tag-orange { background: rgba(235,89,31,0.1); color: var(--vivid-orange); }

/* ─── Why Cards — full-color brand cards per styleguide ─── */
.why-card {
  border-radius: 18px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex; flex-direction: column;
  min-height: 260px;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,12,31,0.18);
}
.why-card i {
  font-size: 2rem; margin-bottom: 18px; display: block;
  opacity: 0.92;
}
.why-card h3 {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 10px; letter-spacing: -0.01em;
  line-height: 1.25;
}
.why-card p {
  font-size: 0.92rem; line-height: 1.6; flex: 1;
}
.why-card .ready-tag {
  margin-top: 20px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.why-card .ready-tag i[class*="ph"] {
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 1.1em;
}
.why-card::after {
  content: ''; position: absolute; right: -60px; bottom: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  opacity: 0.08; pointer-events: none; background: currentColor;
}

/* Midnight card (dark) */
.why-card-midnight {
  background: var(--midnight); color: var(--white);
}
.why-card-midnight h3 { color: var(--white); }
.why-card-midnight p  { color: rgba(255,255,255,0.72); }
.why-card-midnight i  { color: var(--vivid-orange); }
.why-card-midnight .ready-tag {
  background: rgba(235,89,31,0.18); color: var(--vivid-orange);
}

/* Manilla card (warm, light) */
.why-card-manilla {
  background: var(--manilla); color: var(--midnight);
}
.why-card-manilla h3 { color: var(--midnight); }
.why-card-manilla p  { color: rgba(0,12,31,0.72); }
.why-card-manilla i  { color: var(--midnight); }
.why-card-manilla .ready-tag {
  background: rgba(0,12,31,0.08); color: var(--midnight);
}

/* Cobalt card */
.why-card-cobalt {
  background: var(--cobalt); color: var(--white);
}
.why-card-cobalt h3 { color: var(--white); }
.why-card-cobalt p  { color: rgba(255,255,255,0.82); }
.why-card-cobalt i  { color: var(--white); }
.why-card-cobalt .ready-tag {
  background: rgba(255,255,255,0.15); color: var(--white);
}

/* Orange card (used sparingly — only one per section) */
.why-card-orange {
  background: var(--vivid-orange); color: var(--white);
}
.why-card-orange h3 { color: var(--white); }
.why-card-orange p  { color: rgba(255,255,255,0.88); }
.why-card-orange i  { color: var(--white); }
.why-card-orange .ready-tag {
  background: rgba(255,255,255,0.2); color: var(--white);
}

/* Legacy -steel stays dark */
.why-card-steel { background: var(--midnight); color: var(--white); }
.why-card-steel h3 { color: var(--white); }
.why-card-steel p  { color: rgba(255,255,255,0.72); }
.why-card-steel i  { color: var(--steel-light); }

/* ─── Future Modules Grid ──────────────────────────────────── */
.future-modules-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto;
}
.future-module-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 24px; text-align: center;
  transition: all 0.2s ease;
}
.future-module-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.future-module-card i { font-size: 1.5rem; margin-bottom: 12px; display: block; }
.future-module-card h4 { font-size: 0.9rem; color: var(--white); font-weight: 700; margin-bottom: 6px; }
.future-module-card p { font-size: 0.8rem; color: var(--steel-light); line-height: 1.5; }

/* ─── Responsive Utility Classes ───────────────────────────── */
.btn-nav { padding: 10px 22px; font-size: 0.85rem; }
.card-horizontal { display: flex; gap: 20px; }
.content-narrow { max-width: 800px; margin: 0 auto; padding: 0 5%; line-height: 1.8; }
.section-heading-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.section-heading-row h2 { margin: 0; }
.info-panel { padding: 36px; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-screenshot { display: none; }
  .arch-modules { grid-template-columns: repeat(3, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-items { grid-template-columns: repeat(2, 1fr); }
  .future-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 64px 5%; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 120px 5% 64px; }
  .card-grid-3, .card-grid-2, .card-grid-4 { grid-template-columns: 1fr; }
  .arch-modules { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { gap: 24px; }
  .stat-sep { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .timeline-items { grid-template-columns: 1fr; }
  .timeline-quarters { flex-direction: column; gap: 8px; }
  .roadmap-form { flex-direction: column; }
  .future-modules-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 120px 5% 48px; }
}

@media (max-width: 480px) {
  :root { --section-pad: 48px 4%; }
  .card-icon { width: 52px; height: 52px; font-size: 1.5rem; }
  .card-icon-heading { width: 44px; height: 44px; font-size: 1.3rem; }
  .btn { padding: 10px 18px; font-size: 0.85rem; }
  .btn-lg { padding: 12px 24px; font-size: 0.92rem; }
  .btn-nav { padding: 8px 16px; font-size: 0.8rem; }
  .card { padding: 20px; }
  .feature-card { padding: 20px; }
  .card-horizontal { gap: 12px; }
  .section-heading-row { gap: 10px; }
  .info-panel { padding: 20px; }
  .arch-diagram { padding: 24px 16px; }
  .arch-modules { grid-template-columns: 1fr; }
  .arch-connector-badge { white-space: normal; text-align: center; }
  .challenge-card { padding: 20px; }
  .why-card { padding: 20px; }
  .challenge-card .watermark { font-size: 4rem; }
  .roadmap-container { padding: 24px 16px; }
  .testimonial-card { padding: 24px; }
  .toc { padding: 16px 20px; }
  .code-block { font-size: 0.78rem; padding: 16px; }
  .page-hero { padding: 100px 4% 36px; }
  .hero { padding: 100px 4% 48px; }
  .stats-grid { gap: 16px; }
  .stat-num { font-size: 1.3rem; }
  .content-section { padding: 48px 4%; }
  .contact-grid { gap: 24px; }
  .future-modules-grid { grid-template-columns: 1fr; }
  .future-module-card { padding: 20px; }
}


/* ════════════════════════════════════════════════════════════════
   IMPROVEMENTS LAYER — applied per brand audit recommendations
   ════════════════════════════════════════════════════════════════ */

/* ─── Marketing Pillar Banners ───────────────────────────── */
.pillar-banner {
  padding: 80px 5%;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex; align-items: center;
}
.pillar-banner .pillar-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: center;
}
.pillar-banner h2.pillar-text {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 18ch;
}
.pillar-banner .pillar-sub {
  margin-top: 16px; font-size: 1rem; line-height: 1.65;
  max-width: 46ch; opacity: 0.78;
}
.pillar-banner .pillar-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.pillar-banner .pillar-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: currentColor;
}
.pillar-banner .pillar-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pillar-banner .pillar-visual svg {
  width: 100%; max-width: 380px; height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.25));
}
/* Variants */
.pillar-banner.pillar-cobalt { background: var(--cobalt); color: var(--white); }
.pillar-banner.pillar-cobalt .pillar-eyebrow { color: rgba(255,255,255,0.7); }
.pillar-banner.pillar-orange { background: var(--vivid-orange); color: var(--white); }
.pillar-banner.pillar-orange .pillar-eyebrow { color: rgba(255,255,255,0.85); }

@media (max-width: 768px) {
  .pillar-banner { padding: 56px 5%; min-height: 0; }
  .pillar-banner .pillar-inner { grid-template-columns: 1fr; gap: 24px; }
  .pillar-banner .pillar-visual { order: 2; }
}

/* ─── Hero Dashboard Mock (SVG) ──────────────────────────── */
.hero-dashboard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  background: #0A1626;
}
.hero-dashboard .browser-bar {
  background: #06111F;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-dashboard .browser-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.hero-dashboard .browser-bar .dot.r { background: var(--vivid-orange); }
.hero-dashboard .browser-bar .dot.y { background: #C58A2B; }
.hero-dashboard .browser-bar .dot.g { background: var(--steel); }
.hero-dashboard .dash-url {
  margin-left: 12px; flex: 1;
  background: rgba(255,255,255,0.04); color: var(--steel-light);
  font-size: 0.72rem; padding: 5px 12px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
}
.hero-dashboard svg.dashboard-svg {
  width: 100%; height: auto; display: block;
}
/* animated pulses on dashboard */
@keyframes dash-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.4); }
}
.dashboard-svg .pulse-dot { animation: dash-pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.dashboard-svg .pulse-dot.d2 { animation-delay: 0.6s; }
.dashboard-svg .pulse-dot.d3 { animation-delay: 1.2s; }

@keyframes dash-line-draw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
.dashboard-svg .trend-line {
  stroke-dasharray: 600;
  animation: dash-line-draw 2.2s ease-out 0.3s both;
}

@keyframes dash-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.dashboard-svg .bar {
  transform-origin: bottom; transform-box: fill-box;
  animation: dash-bar-grow 0.9s cubic-bezier(.25,1,.3,1) both;
}
.dashboard-svg .bar.b2 { animation-delay: 0.08s; }
.dashboard-svg .bar.b3 { animation-delay: 0.16s; }
.dashboard-svg .bar.b4 { animation-delay: 0.24s; }
.dashboard-svg .bar.b5 { animation-delay: 0.32s; }
.dashboard-svg .bar.b6 { animation-delay: 0.40s; }

@keyframes row-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dashboard-svg .row { animation: row-slide-in 0.5s ease-out both; }
.dashboard-svg .row.r2 { animation-delay: 0.25s; }
.dashboard-svg .row.r3 { animation-delay: 0.5s; }
.dashboard-svg .row.r4 { animation-delay: 0.75s; }

/* ─── Incident Response Timeline ─────────────────────────── */
.incident-timeline-section {
  background: var(--white); padding: var(--section-pad);
}
.incident-timeline-section .it-inner {
  max-width: 1280px; margin: 0 auto;
}
.it-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end; margin-bottom: 56px;
}
.it-header .eyebrow { margin-bottom: 14px; }
.it-header h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em; line-height: 1.1;
}
.it-header p {
  font-size: 1rem; color: var(--text-secondary);
  max-width: 48ch; line-height: 1.65;
}
.it-track {
  position: relative; padding: 40px 0 60px;
}
.it-axis {
  position: absolute; left: 4%; right: 4%; top: 76px;
  height: 3px; background: var(--manilla);
  border-radius: 2px;
}
.it-axis-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--vivid-orange), var(--cobalt), var(--steel));
  border-radius: 2px; width: 0%;
  transition: width 1.8s cubic-bezier(.25,1,.3,1);
}
.incident-timeline-section.in-view .it-axis-fill { width: 100%; }
.it-stops {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; position: relative;
}
.it-stop {
  text-align: center; padding: 0 12px;
  opacity: 0; transform: translateY(12px);
  transition: all 0.5s ease;
}
.incident-timeline-section.in-view .it-stop { opacity: 1; transform: translateY(0); }
.incident-timeline-section.in-view .it-stop.s1 { transition-delay: 0.1s; }
.incident-timeline-section.in-view .it-stop.s2 { transition-delay: 0.5s; }
.incident-timeline-section.in-view .it-stop.s3 { transition-delay: 0.95s; }
.incident-timeline-section.in-view .it-stop.s4 { transition-delay: 1.4s; }

.it-stop .it-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; color: var(--steel);
  font-weight: 600; margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.it-stop .it-dot {
  width: 22px; height: 22px; border-radius: 50%;
  margin: 0 auto 20px;
  position: relative; z-index: 2;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px currentColor, 0 6px 14px rgba(0,0,0,0.12);
  background: currentColor;
}
.it-stop.s1 { color: var(--vivid-orange); }
.it-stop.s2 { color: var(--vivid-orange); }
.it-stop.s3 { color: var(--cobalt); }
.it-stop.s4 { color: var(--steel); }
.it-stop h4 {
  font-size: 1rem; font-weight: 700;
  color: var(--midnight); margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.it-stop p {
  font-size: 0.85rem; color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .it-header { grid-template-columns: 1fr; gap: 16px; }
  .it-stops { grid-template-columns: 1fr; gap: 32px; }
  .it-axis { display: none; }
  .incident-timeline-section.in-view .it-stop { transition-delay: 0.05s !important; }
}

/* ─── Section Divider ────────────────────────────────────── */
.section-divider {
  display: flex; align-items: center; justify-content: center;
  padding: 0 5%;
  background: var(--white);
}
.section-divider-line {
  width: 100%; max-width: 1280px; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--manilla) 20%,
    var(--steel-light) 50%,
    var(--manilla) 80%,
    transparent 100%
  );
}

/* ─── Architecture Diagram — animated pulse dots ────────── */
.arch-diagram svg.arch-flow {
  width: 100%; height: auto; display: block; margin-bottom: 20px;
}
@keyframes pulse-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.arch-flow .flow-dot {
  fill: var(--vivid-orange); r: 3;
  offset-rotate: 0deg;
  animation: pulse-travel 3s linear infinite;
}
.arch-flow .flow-dot.f2 { animation-delay: 0.5s; fill: var(--cobalt); }
.arch-flow .flow-dot.f3 { animation-delay: 1s; }
.arch-flow .flow-dot.f4 { animation-delay: 1.5s; fill: var(--cobalt); }
.arch-flow .flow-dot.f5 { animation-delay: 2s; }

/* ─── Threat Coverage Map ────────────────────────────────── */
.threat-map-wrap {
  max-width: 1100px; margin: 0 auto 56px;
  background: linear-gradient(165deg, var(--midnight), #061728);
  border-radius: 20px; padding: 36px 40px 44px;
  position: relative; overflow: hidden;
}
.threat-map-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(44,92,248,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.threat-map-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; position: relative; z-index: 1;
  flex-wrap: wrap; gap: 12px;
}
.threat-map-header .eyebrow { color: var(--vivid-orange); margin: 0; }
.threat-map-header .tm-legend {
  display: flex; gap: 18px; font-size: 0.78rem;
  color: var(--steel-light);
}
.threat-map-header .tm-legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.threat-map-header .tm-legend .dot {
  width: 9px; height: 9px; border-radius: 50%;
}
.threat-map-wrap svg.threat-map {
  width: 100%; height: auto; display: block;
  position: relative; z-index: 1;
}
@keyframes tm-pulse {
  0%, 100% { r: 6; opacity: 1; }
  50%      { r: 14; opacity: 0.15; }
}
.threat-map .tm-pulse {
  animation: tm-pulse 2.5s ease-in-out infinite;
  transform-origin: center;
}
.threat-map .tm-pulse.p2 { animation-delay: 0.5s; }
.threat-map .tm-pulse.p3 { animation-delay: 1s; }
.threat-map .tm-pulse.p4 { animation-delay: 1.5s; }
.threat-map .tm-pulse.p5 { animation-delay: 2s; }

/* ─── Testimonial Card — attributed, monochrome portrait ── */
.testimonial-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--steel);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--white); font-size: 1.1rem;
  overflow: hidden; border: 2px solid var(--steel-light);
  flex-shrink: 0;
}
.testimonial-avatar svg {
  width: 100%; height: 100%; display: block;
}

/* ─── Feature card module illustrations ──────────────────── */
.feature-card .card-illustration {
  margin: 8px 0 18px; border-radius: 10px;
  background: var(--gray-subtle);
  border: 1px solid var(--manilla);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.feature-card .card-illustration svg {
  width: 100%; height: 100%; display: block;
}

/* ─── Sub-page hero accent strips ────────────────────────── */
.page-hero {
  padding: 160px 5% 80px;
  border-top: 4px solid var(--cobalt);
}
.page-hero.accent-security { border-top-color: var(--steel); }
.page-hero.accent-api      { border-top-color: var(--cobalt); }
.page-hero.accent-about    { border-top-color: var(--manilla); }
.page-hero.accent-contact  { border-top-color: var(--vivid-orange); }
.page-hero.accent-legal    { border-top-color: var(--steel); }

.page-hero .hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 20px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  color: var(--steel-light);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative; z-index: 1;
}
.page-hero .hero-badge i { font-size: 0.9rem; }
.page-hero.accent-security .hero-badge { background: rgba(76,113,134,0.18); color: var(--steel-light); border-color: rgba(76,113,134,0.35); }
.page-hero.accent-api      .hero-badge { background: rgba(44,92,248,0.18); color: #9BB4FC; border-color: rgba(44,92,248,0.4); }
.page-hero.accent-contact  .hero-badge { background: rgba(235,89,31,0.18); color: #FFB890; border-color: rgba(235,89,31,0.4); }

/* ─── Defense-in-depth diagram ───────────────────────────── */
.defense-stack {
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.defense-layer {
  padding: 22px 28px; border-radius: 14px;
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 18px; align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}
.defense-layer:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 26px rgba(0,12,31,0.12);
}
.defense-layer .dl-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.defense-layer .dl-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.65;
  margin-bottom: 2px;
}
.defense-layer h4 {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.defense-layer .dl-detail {
  font-size: 0.85rem; opacity: 0.8; line-height: 1.5;
}
.defense-layer .dl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; opacity: 0.75;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}
.defense-layer.dl-1 { background: var(--midnight); color: var(--white); }
.defense-layer.dl-1 .dl-icon { background: var(--vivid-orange); color: var(--white); }
.defense-layer.dl-2 { background: #13263A; color: var(--white); }
.defense-layer.dl-2 .dl-icon { background: var(--cobalt); color: var(--white); }
.defense-layer.dl-3 { background: var(--manilla); color: var(--midnight); }
.defense-layer.dl-3 .dl-icon { background: var(--midnight); color: var(--white); }
.defense-layer.dl-3 .dl-tag { background: rgba(0,12,31,0.08); }
.defense-layer.dl-4 { background: var(--manilla-light); color: var(--midnight); border: 1px solid var(--manilla); }
.defense-layer.dl-4 .dl-icon { background: var(--steel); color: var(--white); }
.defense-layer.dl-4 .dl-tag { background: rgba(0,12,31,0.06); }

@media (max-width: 768px) {
  .defense-layer { grid-template-columns: 40px 1fr; }
  .defense-layer .dl-tag { grid-column: 2; justify-self: start; }
}

/* ─── Roadmap Future Modules — 4 cols ────────────────────── */
.future-modules-grid { grid-template-columns: 1fr; max-width: 420px; }
.future-module-card i { color: var(--vivid-orange) !important; }

/* ─── Rotating globe ─────────────────────────────────────── */
.globe-wrap {
  max-width: 1200px; margin: 0 auto 72px;
  background: linear-gradient(165deg, var(--midnight) 0%, #050D19 100%);
  border-radius: 24px;
  padding: 40px 48px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(44,92,248,0.15);
}
.globe-wrap::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at 15% 20%, rgba(44,92,248,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(235,89,31,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.globe-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
  position: relative; z-index: 1;
}
.globe-header .eyebrow { color: var(--vivid-orange); margin-bottom: 10px; }
.globe-header .globe-title {
  font-size: 1.6rem; font-weight: 700; color: var(--white);
  letter-spacing: -0.02em; margin: 0;
  max-width: 24ch; line-height: 1.2;
}
.globe-header .tm-legend {
  display: flex; gap: 20px; font-size: 0.8rem;
  color: var(--steel-light); flex-wrap: wrap;
  padding-top: 6px;
}
.globe-header .tm-legend span {
  display: inline-flex; align-items: center; gap: 8px;
}
.globe-header .tm-legend .dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.globe-stage {
  position: relative;
  display: grid; grid-template-columns: 1fr 280px;
  gap: 40px; align-items: center;
  min-height: 480px;
}

/* Star field */
.globe-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 15%,  rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 22% 45%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 38% 8%,  rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 72% 28%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 15% 82%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.45), transparent 50%),
    radial-gradient(1px 1px at 30% 92%, rgba(255,255,255,0.3), transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 78% 88%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 48% 35%, rgba(255,255,255,0.3), transparent 50%),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 12%, rgba(255,255,255,0.5), transparent 50%);
  opacity: 0.65; pointer-events: none;
  animation: stars-drift 120s linear infinite;
}
@keyframes stars-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-20px); }
}

.globe-svg {
  width: 100%; height: auto; max-height: 480px;
  display: block; position: relative; z-index: 1;
  overflow: visible;
}

/* Dot-land style on globe */
#globeLand circle { fill: rgba(76,113,134,0.85); }

/* Marker pulse anim (driven by CSS) */
@keyframes globe-mk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
#globeMarkers .mk-core { animation: globe-mk-pulse 2.4s ease-in-out infinite; }
@keyframes globe-mk-ring {
  0%   { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
#globeMarkers .mk-ring {
  transform-origin: center; transform-box: fill-box;
  animation: globe-mk-ring 2.4s ease-out infinite;
}
#globeMarkers .d1 { animation-delay: 0.0s; }
#globeMarkers .d2 { animation-delay: 0.4s; }
#globeMarkers .d3 { animation-delay: 0.8s; }
#globeMarkers .d4 { animation-delay: 1.2s; }
#globeMarkers .d5 { animation-delay: 1.6s; }
#globeMarkers .d6 { animation-delay: 2.0s; }

/* Stats panel beside globe */
.globe-stats {
  display: flex; flex-direction: column; gap: 18px;
  position: relative; z-index: 1;
}
.gs-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 16px 20px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gs-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.gs-num {
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
}
.gs-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel-light); margin-top: 8px;
}

@media (max-width: 900px) {
  .globe-wrap { padding: 32px 24px; }
  .globe-stage { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .globe-stats { flex-direction: row; flex-wrap: wrap; }
  .gs-item { flex: 1 1 40%; min-width: 140px; }
  .globe-header { flex-direction: column; }
}

/* Hide old threat-map styles usage fallback — new globe overrides */
.threat-map-wrap { display: none; }

/* ═════════════════════════════════════════════════════════════════
   ABOUT PAGE — Connected Platform, stats band, origin timeline
   ═════════════════════════════════════════════════════════════════ */

/* Connected platform diagram */
.connected-platform {
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(165deg, var(--midnight) 0%, #061529 100%);
  border-radius: 24px; padding: 56px 48px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(44,92,248,0.15);
}
.connected-platform::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(44,92,248,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cp-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
.cp-header .eyebrow { color: var(--vivid-orange); }
.cp-header h3 {
  font-size: 1.8rem; color: var(--white); margin-top: 8px;
  letter-spacing: -0.02em; line-height: 1.2;
  font-weight: 700;
}
.cp-svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.cp-node-label {
  fill: var(--white); font-family: inherit; font-weight: 600;
  font-size: 11px; text-anchor: middle;
}
.cp-pulse-line { stroke-dasharray: 4 6; animation: cp-dash 4s linear infinite; }
@keyframes cp-dash { to { stroke-dashoffset: -40; } }
.cp-orb { animation: cp-breathe 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cp-orb.d1 { animation-delay: 0s; }
.cp-orb.d2 { animation-delay: 0.4s; }
.cp-orb.d3 { animation-delay: 0.8s; }
.cp-orb.d4 { animation-delay: 1.2s; }
.cp-orb.d5 { animation-delay: 1.6s; }
.cp-orb.d6 { animation-delay: 2.0s; }
@keyframes cp-breathe {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.55; }
}

/* Stats band */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  max-width: 1100px; margin: 0 auto;
}
.stats-band .sb-item {
  padding: 36px 28px; text-align: center;
  border-right: 1px solid var(--border);
  position: relative;
}
.stats-band .sb-item:last-child { border-right: 0; }
.stats-band .sb-num {
  font-size: 2.8rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--midnight);
}
.stats-band .sb-num .unit {
  font-size: 1.3rem; color: var(--vivid-orange);
  margin-left: 2px; vertical-align: top;
  font-weight: 700;
}
.stats-band .sb-label {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel); margin-top: 10px;
}
@media (max-width: 860px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .stats-band .sb-item:nth-child(2) { border-right: 0; }
  .stats-band .sb-item:nth-child(1),
  .stats-band .sb-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* Origin timeline */
.origin-timeline {
  max-width: 900px; margin: 0 auto;
  position: relative; padding-left: 48px;
}
.origin-timeline::before {
  content: ''; position: absolute;
  left: 16px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(to bottom, var(--cobalt), var(--vivid-orange));
  border-radius: 2px;
}
.ot-item {
  position: relative; padding: 0 0 40px 0;
}
.ot-item::before {
  content: ''; position: absolute;
  left: -40px; top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--cobalt);
  box-shadow: 0 0 0 4px rgba(44,92,248,0.12);
}
.ot-item.orange::before { border-color: var(--vivid-orange); box-shadow: 0 0 0 4px rgba(235,89,31,0.14); }
.ot-item .ot-year {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cobalt); margin-bottom: 6px;
}
.ot-item.orange .ot-year { color: var(--vivid-orange); }
.ot-item h4 {
  font-size: 1.25rem; font-weight: 700;
  color: var(--midnight); margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ot-item p {
  color: var(--steel); line-height: 1.65; margin: 0;
}

/* Values cards with side bar accent */
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 32px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.value-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cobalt);
}
.value-card.v-orange::before   { background: var(--vivid-orange); }
.value-card.v-midnight::before { background: var(--midnight); }
.value-card.v-steel::before    { background: var(--steel); }
.value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(0,12,31,0.15);
}
.value-card .vc-icon {
  font-size: 1.8rem; margin-bottom: 16px; display: block;
  color: var(--cobalt);
}
.value-card.v-orange   .vc-icon { color: var(--vivid-orange); }
.value-card.v-midnight .vc-icon { color: var(--midnight); }
.value-card.v-steel    .vc-icon { color: var(--steel); }
.value-card h3 {
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 10px; color: var(--midnight);
  letter-spacing: -0.01em;
}
.value-card p {
  color: var(--steel); line-height: 1.6; font-size: 0.95rem;
  margin: 0;
}
@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; }
  .connected-platform { padding: 40px 24px; }
  .origin-timeline { padding-left: 36px; }
  .ot-item::before { left: -32px; }
}

/* ═════════════════════════════════════════════════════════════════
   SECURITY PAGE — Threat-blocked flow, live dashboard, compliance
   ═════════════════════════════════════════════════════════════════ */

.threat-flow-wrap {
  max-width: 1100px; margin: 0 auto 0;
  background: linear-gradient(165deg, var(--midnight) 0%, #050E1C 100%);
  border-radius: 24px;
  padding: 48px; position: relative; overflow: hidden;
  border: 1px solid rgba(44,92,248,0.12);
}
.tf-header { position: relative; z-index: 1; margin-bottom: 32px; }
.tf-header .eyebrow { color: var(--vivid-orange); }
.tf-header h3 {
  font-size: 1.6rem; color: var(--white); margin-top: 6px;
  letter-spacing: -0.02em; line-height: 1.2;
  font-weight: 700;
}
.tf-svg { width: 100%; height: auto; display: block; }
.tf-attacker-pulse, .tf-defense-pulse {
  animation: tf-send 3.5s cubic-bezier(.5,.0,.5,1) infinite;
  offset-rotate: 0deg;
}
@keyframes tf-send {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  48%  { offset-distance: 48%;  opacity: 1; }
  50%  { offset-distance: 50%;  opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
.tf-shield-block {
  transform-origin: center; transform-box: fill-box;
  animation: tf-block-pulse 3.5s ease-in-out infinite;
}
@keyframes tf-block-pulse {
  0%, 40%, 100% { transform: scale(1); opacity: 0.85; }
  48%, 52%      { transform: scale(1.15); opacity: 1; }
}

/* Live security dashboard (SOC mock) */
.soc-dashboard {
  max-width: 1100px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 32px;
  box-shadow: 0 20px 60px -30px rgba(0,12,31,0.15);
}
.soc-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.soc-head h4 {
  font-size: 0.95rem; font-weight: 700; color: var(--midnight);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.005em;
}
.soc-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--success); background: rgba(34,197,94,0.1);
  padding: 5px 12px; border-radius: 999px;
}
.soc-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
  animation: soc-blink 1.2s ease-in-out infinite;
}
@keyframes soc-blink { 50% { opacity: 0.4; } }

.soc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.soc-metric {
  background: var(--gray-subtle);
  border-radius: 12px; padding: 18px;
  border-left: 3px solid var(--cobalt);
}
.soc-metric.m-orange { border-left-color: var(--vivid-orange); }
.soc-metric.m-green  { border-left-color: var(--success); }
.soc-metric.m-steel  { border-left-color: var(--steel); }
.soc-metric .sm-label {
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel); margin-bottom: 8px;
}
.soc-metric .sm-val {
  font-size: 1.6rem; font-weight: 800; color: var(--midnight);
  letter-spacing: -0.02em; line-height: 1;
}
.soc-metric .sm-sub {
  font-size: 0.75rem; color: var(--steel); margin-top: 6px;
}
.soc-sparkline {
  width: 100%; height: 20px; margin-top: 8px;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: soc-draw 2.5s ease-out forwards infinite alternate;
}
@keyframes soc-draw {
  to { stroke-dashoffset: 0; }
}

.soc-events {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.soc-events h5 {
  font-size: 0.85rem; font-weight: 700; color: var(--midnight);
  margin-bottom: 12px;
}
.soc-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 90px;
  gap: 16px; padding: 10px 0;
  font-size: 0.85rem; color: var(--steel);
  border-bottom: 1px solid rgba(201,213,219,0.4);
  align-items: center;
}
.soc-row:last-child { border-bottom: 0; }
.soc-row .t { font-family: 'SF Mono', Consolas, monospace; color: var(--steel); font-size: 0.78rem; }
.soc-row .msg { color: var(--midnight); font-weight: 500; }
.soc-row .tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(44,92,248,0.1); color: var(--cobalt);
  text-align: center;
}
.soc-row .tag.block   { background: rgba(34,197,94,0.12); color: #137a3c; }
.soc-row .tag.alert   { background: rgba(235,89,31,0.14); color: var(--vivid-orange); }
.soc-row .tag.audit   { background: rgba(76,113,134,0.14); color: var(--steel); }
.soc-row .act { color: var(--steel); font-size: 0.78rem; text-align: right; }

/* Compliance badges */
.compliance-badges {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; max-width: 1100px; margin: 0 auto;
}
.cb {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cb:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -15px rgba(0,12,31,0.15);
}
.cb .cb-icon {
  font-size: 2rem; color: var(--cobalt);
  margin-bottom: 10px; display: block;
}
.cb .cb-name {
  font-size: 0.95rem; font-weight: 700;
  color: var(--midnight); margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cb .cb-sub {
  font-size: 0.72rem; color: var(--steel);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.cb.ready .cb-sub { color: var(--success); }
.cb.progress .cb-sub { color: var(--vivid-orange); }

@media (max-width: 900px) {
  .soc-grid { grid-template-columns: repeat(2, 1fr); }
  .compliance-badges { grid-template-columns: repeat(2, 1fr); }
  .soc-row { grid-template-columns: 70px 1fr 90px; }
  .soc-row .act { display: none; }
}
@media (max-width: 720px) {
  .threat-flow-wrap { padding: 32px 20px; }
  .soc-dashboard { padding: 22px; }
}

/* ═════════════════════════════════════════════════════════════════
   API DOCS — Terminal hero, tabbed examples, rate-limit gauge
   ═════════════════════════════════════════════════════════════════ */

/* Terminal window hero */
.api-terminal {
  max-width: 900px; margin: 32px auto 0;
  background: #061323;
  border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(44,92,248,0.25);
}
.api-terminal .t-bar {
  display: flex; align-items: center;
  padding: 12px 16px;
  background: #0B1E34;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 10px;
}
.api-terminal .t-dots {
  display: flex; gap: 6px;
}
.api-terminal .t-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #384A5E;
}
.api-terminal .t-dots span:nth-child(1) { background: #FF5F57; }
.api-terminal .t-dots span:nth-child(2) { background: #FEBC2E; }
.api-terminal .t-dots span:nth-child(3) { background: #28C840; }
.api-terminal .t-title {
  margin: 0 auto; color: var(--steel-light);
  font-size: 0.78rem; font-family: 'SF Mono', Consolas, monospace;
}
.api-terminal .t-body {
  padding: 24px 28px;
  font-family: 'SF Mono', 'Monaco', Consolas, monospace;
  font-size: 0.88rem; line-height: 1.7;
  color: #D7E0E8;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.api-terminal .t-body .prompt { color: var(--vivid-orange); font-weight: 700; }
.api-terminal .t-body .cmd    { color: #9BB4FC; }
.api-terminal .t-body .flag   { color: #7AD98C; }
.api-terminal .t-body .url    { color: #F0D186; }
.api-terminal .t-body .str    { color: #7AD98C; }
.api-terminal .t-body .key    { color: #9BB4FC; }
.api-terminal .t-body .num    { color: #F0D186; }
.api-terminal .t-body .comment{ color: #5A7086; font-style: italic; }
.api-terminal .t-body .dim    { color: #8299AD; }
.api-terminal .t-body .cursor {
  display: inline-block; width: 8px; height: 1.1em;
  background: #7AD98C; vertical-align: text-bottom;
  animation: term-blink 1s step-end infinite; margin-left: 2px;
}
@keyframes term-blink { 50% { opacity: 0; } }

/* Code tabs */
.code-tabs {
  max-width: 900px; margin: 0 auto;
  background: #061323;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(44,92,248,0.2);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,0.4);
}
.code-tabs .ct-bar {
  display: flex;
  background: #0B1E34;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 12px;
}
.code-tabs .ct-tab {
  background: none; border: 0; padding: 14px 18px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: #8299AD; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.code-tabs .ct-tab:hover { color: #D7E0E8; }
.code-tabs .ct-tab.active {
  color: var(--white);
  border-bottom-color: var(--vivid-orange);
}
.code-tabs .ct-bar .spacer { flex: 1; }
.code-tabs .ct-copy {
  background: none; border: 0; color: #8299AD;
  padding: 14px 14px; cursor: pointer;
  font-size: 0.78rem; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.15s ease;
}
.code-tabs .ct-copy:hover { color: var(--white); }
.code-tabs .ct-copy.copied { color: var(--success); }
.code-tabs .ct-panel {
  display: none;
  padding: 24px 28px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.85rem; line-height: 1.7;
  color: #D7E0E8;
  overflow-x: auto;
}
.code-tabs .ct-panel.active { display: block; }
.code-tabs .ct-panel .kw   { color: #C694F8; }
.code-tabs .ct-panel .str  { color: #7AD98C; }
.code-tabs .ct-panel .fn   { color: #9BB4FC; }
.code-tabs .ct-panel .num  { color: #F0D186; }
.code-tabs .ct-panel .cm   { color: #5A7086; font-style: italic; }
.code-tabs .ct-panel .prop { color: #9BB4FC; }

/* Rate-limit gauge */
.rate-gauge {
  max-width: 420px; margin: 40px auto 0;
  text-align: center;
}
.rate-gauge svg { width: 100%; height: auto; max-width: 320px; display: block; margin: 0 auto; }
.rate-gauge .rg-num {
  font-size: 2.4rem; font-weight: 800; color: var(--midnight);
  letter-spacing: -0.02em; line-height: 1;
  margin-top: -80px; position: relative; z-index: 1;
}
.rate-gauge .rg-num .unit {
  font-size: 0.95rem; color: var(--steel);
  font-weight: 600; display: block; margin-top: 4px;
}
.rate-gauge .rg-label {
  margin-top: 24px;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cobalt);
}

/* Endpoint explorer */
.endpoint-explorer {
  max-width: 1100px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 20px 50px -30px rgba(0,12,31,0.12);
}
.ee-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.ee-head h4 {
  font-size: 1.05rem; font-weight: 700; color: var(--midnight);
  letter-spacing: -0.01em;
}
.ee-hint {
  font-size: 0.78rem; color: var(--steel);
}
.ee-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ee-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  background: var(--gray-subtle);
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.88rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.ee-row:hover {
  border-color: var(--cobalt);
  transform: translateX(2px);
}
.ee-method {
  font-weight: 800; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 0; text-align: center;
  border-radius: 6px; color: var(--white);
}
.ee-method.get    { background: #1f8a4d; }
.ee-method.post   { background: var(--cobalt); }
.ee-method.patch  { background: #B88309; }
.ee-method.delete { background: #b53325; }
.ee-path { color: var(--midnight); font-weight: 500; }
.ee-path .param { color: var(--vivid-orange); }
.ee-desc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 0.82rem; color: var(--steel);
  justify-self: end; text-align: right;
}

@media (max-width: 720px) {
  .api-terminal .t-body, .code-tabs .ct-panel { padding: 18px; font-size: 0.78rem; }
  .ee-row { grid-template-columns: 60px 1fr; }
  .ee-desc { display: none; }
  .endpoint-explorer { padding: 22px; }
}

/* ═════════════════════════════════════════════════════════════════
   SECURITY DETAIL PANELS
   Shared visual-panel shell used by the 6 security sections
   ═════════════════════════════════════════════════════════════════ */
.sec-panel {
  max-width: 1100px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(0,12,31,0.12);
}
.sec-panel.dark {
  background: linear-gradient(165deg, var(--midnight) 0%, #061529 100%);
  border-color: rgba(44,92,248,0.15);
  color: var(--steel-light);
}
.sec-panel.warm {
  background: var(--manilla-light);
  border-color: var(--manilla);
}
.sec-panel-head {
  display: flex; align-items: center; gap: 16px;
  padding: 32px 40px 0;
}
.sec-panel-head .sp-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  background: rgba(44,92,248,0.1);
  color: var(--cobalt);
}
.sec-panel.dark .sp-icon { background: rgba(44,92,248,0.2); color: #9BB4FC; }
.sec-panel-head.orange .sp-icon { background: rgba(235,89,31,0.12); color: var(--vivid-orange); }
.sec-panel-head.steel  .sp-icon { background: rgba(76,113,134,0.15); color: var(--steel); }
.sec-panel-head.green  .sp-icon { background: rgba(34,197,94,0.14); color: #1f8a4d; }
.sec-panel-head.orange-warm .sp-icon { background: rgba(235,89,31,0.12); color: var(--vivid-orange); }
.sec-panel-head .sp-eyebrow {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cobalt);
  margin-bottom: 4px;
}
.sec-panel.dark .sp-eyebrow { color: #9BB4FC; }
.sec-panel-head.orange .sp-eyebrow { color: var(--vivid-orange); }
.sec-panel-head.steel  .sp-eyebrow { color: var(--steel); }
.sec-panel-head.green  .sp-eyebrow { color: #1f8a4d; }
.sec-panel-head h3 {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--midnight); margin: 0;
}
.sec-panel.dark .sec-panel-head h3 { color: var(--white); }
.sec-panel-body {
  padding: 24px 40px 40px;
}
.sec-panel-body > p.intro {
  font-size: 1.02rem; line-height: 1.7;
  color: var(--steel); max-width: 680px;
  margin-bottom: 32px;
}
.sec-panel.dark .sec-panel-body > p.intro { color: var(--steel-light); }

/* Feature mini-cards grid */
.sp-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 32px;
}
.sp-features.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sp-features.cols-4 { grid-template-columns: repeat(4, 1fr); }
.sp-feat {
  background: var(--gray-subtle);
  border-radius: 12px; padding: 20px;
  border-left: 3px solid var(--cobalt);
}
.sp-feat.orange { border-left-color: var(--vivid-orange); }
.sp-feat.steel  { border-left-color: var(--steel); }
.sp-feat.green  { border-left-color: #22C55E; }
.sp-feat.midnight { border-left-color: var(--midnight); }
.sec-panel.dark .sp-feat {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--cobalt);
}
.sp-feat .sf-icon {
  font-size: 1.2rem; color: var(--cobalt);
  margin-bottom: 10px; display: block;
}
.sp-feat.orange   .sf-icon { color: var(--vivid-orange); }
.sp-feat.steel    .sf-icon { color: var(--steel); }
.sp-feat.green    .sf-icon { color: #22C55E; }
.sp-feat.midnight .sf-icon { color: var(--midnight); }
.sec-panel.dark .sp-feat .sf-icon { color: #9BB4FC; }
.sec-panel.dark .sp-feat.orange .sf-icon { color: #FFB890; }
.sp-feat h5 {
  font-size: 0.95rem; font-weight: 700;
  color: var(--midnight); margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.sec-panel.dark .sp-feat h5 { color: var(--white); }
.sp-feat p {
  font-size: 0.85rem; line-height: 1.55;
  color: var(--steel); margin: 0;
}
.sec-panel.dark .sp-feat p { color: var(--steel-light); }

@media (max-width: 900px) {
  .sp-features, .sp-features.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sec-panel-head { padding: 24px 22px 0; }
  .sec-panel-body { padding: 18px 22px 28px; }
  .sp-features, .sp-features.cols-2, .sp-features.cols-4 { grid-template-columns: 1fr; }
}

/* ─── Encryption transform graphic ───────────────────────────── */
.enc-visual {
  background: linear-gradient(165deg, #0B1B2D 0%, #03081A 100%);
  border-radius: 18px;
  padding: 40px 32px;
  border: 1px solid rgba(44,92,248,0.15);
  overflow: hidden;
}
.enc-visual svg { width: 100%; height: auto; display: block; max-height: 240px; }
.enc-plaintext, .enc-cipher {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 10px;
}
.enc-flow-dot {
  animation: enc-fly 3s ease-in-out infinite;
  offset-rotate: 0deg;
}
@keyframes enc-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.enc-lock-shackle {
  transform-origin: 50% 100%;
  animation: enc-lock 3s ease-in-out infinite;
}
@keyframes enc-lock {
  0%, 40%   { transform: translateY(-3px); }
  50%, 100% { transform: translateY(0); }
}

/* ─── Role hierarchy pyramid ─────────────────────────────────── */
.role-pyramid {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 520px; margin: 0 auto;
}
.role-tier {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 20px;
  border-radius: 10px;
  color: var(--white);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.role-tier:hover { transform: translateX(4px); }
.role-tier .rt-num {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; opacity: 0.75;
}
.role-tier .rt-name {
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.role-tier .rt-perm {
  font-size: 0.72rem; font-weight: 500;
  opacity: 0.75;
  font-family: 'SF Mono', Consolas, monospace;
}
.role-tier.rt-1 { background: linear-gradient(90deg, #000C1F 0%, #05132B 100%); width: 100%; }
.role-tier.rt-2 { background: linear-gradient(90deg, #0A1A3A 0%, #0F2550 100%); width: 95%; }
.role-tier.rt-3 { background: linear-gradient(90deg, #1A3780 0%, #2448A0 100%); width: 88%; }
.role-tier.rt-4 { background: linear-gradient(90deg, #2C5CF8 0%, #3F6EFF 100%); width: 80%; }
.role-tier.rt-5 { background: linear-gradient(90deg, #4C7186 0%, #5E8397 100%); width: 70%; }
.role-tier.rt-6 { background: linear-gradient(90deg, #8B9FAA 0%, #A3B5BF 100%); width: 58%; color: #0C1A2B; }
.role-tier.rt-6 .rt-num, .role-tier.rt-6 .rt-perm { opacity: 0.7; }

/* JWT lifecycle flow */
.jwt-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 32px;
  align-items: stretch;
}
.jwt-step {
  background: var(--gray-subtle);
  border-radius: 10px; padding: 16px 18px;
  border-top: 3px solid var(--cobalt);
  position: relative;
}
.jwt-step.rotate { border-top-color: var(--vivid-orange); }
.jwt-step.revoke { border-top-color: var(--steel); }
.jwt-step .js-num {
  font-size: 0.7rem; font-weight: 800;
  color: var(--cobalt); letter-spacing: 0.1em;
}
.jwt-step.rotate .js-num { color: var(--vivid-orange); }
.jwt-step.revoke .js-num { color: var(--steel); }
.jwt-step h6 {
  font-size: 0.92rem; font-weight: 700;
  color: var(--midnight); margin: 6px 0;
}
.jwt-step p {
  font-size: 0.78rem; line-height: 1.5;
  color: var(--steel); margin: 0;
}
.jwt-step::after {
  content: '→';
  position: absolute; right: -14px; top: 50%;
  transform: translateY(-50%);
  color: var(--steel-light); font-weight: 700;
  font-size: 1.1rem;
  z-index: 1;
}
.jwt-step:last-child::after { display: none; }
@media (max-width: 720px) {
  .jwt-flow { grid-template-columns: 1fr 1fr; }
  .jwt-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 480px) {
  .jwt-flow { grid-template-columns: 1fr; }
  .jwt-step::after { content: '↓'; right: 50%; transform: translateX(50%); top: auto; bottom: -18px; }
}

/* ─── Append-only audit chain ────────────────────────────────── */
.audit-chain {
  display: flex; gap: 0; align-items: stretch;
  overflow-x: auto;
  padding: 10px 2px 20px;
}
.audit-block {
  min-width: 190px; flex: 1;
  background: #061423;
  border: 1px solid rgba(44,92,248,0.25);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  color: var(--steel-light);
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.75rem;
  animation: audit-appear 0.5s ease-out backwards;
}
.audit-block:nth-child(1) { animation-delay: 0.0s; }
.audit-block:nth-child(2) { animation-delay: 0.3s; }
.audit-block:nth-child(3) { animation-delay: 0.6s; }
.audit-block:nth-child(4) { animation-delay: 0.9s; }
.audit-block:nth-child(5) { animation-delay: 1.2s; }
@keyframes audit-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.audit-block + .audit-block { margin-left: 18px; }
.audit-block + .audit-block::before {
  content: '';
  position: absolute; left: -20px; top: 50%;
  width: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(44,92,248,0.8), rgba(44,92,248,0.2));
  transform: translateY(-50%);
}
.audit-block + .audit-block::after {
  content: '';
  position: absolute; left: -9px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #2C5CF8;
  box-shadow: 0 0 8px #2C5CF8;
}
.audit-block .ab-block-num {
  font-size: 0.68rem; font-weight: 700;
  color: #9BB4FC; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.audit-block .ab-hash {
  color: #F0D186; font-size: 0.68rem;
  word-break: break-all; margin-top: 6px; line-height: 1.4;
}
.audit-block .ab-evt {
  color: var(--white); margin-top: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600;
}
.audit-block .ab-meta {
  color: #8299AD; margin-top: 6px; line-height: 1.5;
  font-size: 0.7rem;
}
.audit-block .ab-tamper {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.62rem; font-weight: 700;
  color: #7AD98C; text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 4px;
}
.audit-block .ab-tamper::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}

/* ─── Microservices mesh ─────────────────────────────────────── */
.mesh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.mesh-node {
  background: #0B1E34;
  border: 1px solid rgba(44,92,248,0.3);
  border-radius: 12px;
  padding: 16px;
  color: var(--steel-light);
  position: relative;
  overflow: hidden;
}
.mesh-node::before {
  content: ''; position: absolute;
  inset: auto 0 0 0; height: 3px;
  background: var(--cobalt);
}
.mesh-node.m-orange::before { background: var(--vivid-orange); }
.mesh-node.m-steel::before  { background: var(--steel-light); }
.mesh-node .mn-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.mesh-node .mn-head i {
  font-size: 1.15rem; color: #9BB4FC;
}
.mesh-node.m-orange .mn-head i { color: #FFB890; }
.mesh-node .mn-head h6 {
  color: var(--white); font-size: 0.92rem;
  font-weight: 700; margin: 0;
  letter-spacing: -0.005em;
}
.mesh-node .mn-db {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.72rem;
  color: #9BB4FC;
  background: rgba(44,92,248,0.12);
  padding: 3px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.mesh-node .mn-db::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 5px #22C55E;
  animation: soc-blink 1.5s ease-in-out infinite;
}
.mesh-gateway {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--vivid-orange) 0%, #B53A0F 100%);
  border-radius: 12px;
  padding: 14px 20px;
  color: var(--white); margin-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.mesh-gateway .mg-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.85;
}
.mesh-gateway h6 {
  font-size: 1.05rem; font-weight: 700; margin: 2px 0 0;
  letter-spacing: -0.005em;
}
.mesh-gateway .mg-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mesh-gateway .mg-tags span {
  font-size: 0.7rem; font-weight: 600;
  padding: 4px 9px;
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  font-family: 'SF Mono', Consolas, monospace;
}
@media (max-width: 720px) {
  .mesh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mesh-grid { grid-template-columns: 1fr; }
}

/* ─── Compliance radial ──────────────────────────────────────── */
.comp-radial {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.comp-radial svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.cr-ring { fill: none; stroke-width: 14; stroke-linecap: round; transform-origin: 50% 50%; transform: rotate(-90deg); }
.cr-track { stroke: #EEECE8; }
.cr-progress {
  stroke-dasharray: var(--cr-dash, 880);
  stroke-dashoffset: var(--cr-dash, 880);
  animation: cr-fill 1.8s ease-out forwards;
}
@keyframes cr-fill { to { stroke-dashoffset: var(--cr-offset); } }
.comp-radial .cr-list { display: flex; flex-direction: column; gap: 12px; }
.cr-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cr-item .cri-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.cr-item .cri-label {
  flex: 1; font-weight: 600; font-size: 0.95rem;
  color: var(--midnight);
}
.cr-item .cri-pct {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.82rem; font-weight: 700;
  color: var(--steel);
}
@media (max-width: 720px) {
  .comp-radial { grid-template-columns: 1fr; }
}

/* ─── Vulnerability pipeline ─────────────────────────────────── */
.vuln-pipe {
  display: flex; gap: 8px; align-items: stretch;
  overflow-x: auto;
  padding: 12px 2px 20px;
}
.vp-stage {
  min-width: 160px; flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vp-stage .vp-icon {
  font-size: 1.3rem;
  color: var(--cobalt);
  margin-bottom: 8px; display: block;
}
.vp-stage.pass .vp-icon { color: #22C55E; }
.vp-stage.block .vp-icon { color: var(--vivid-orange); }
.vp-stage h6 {
  font-size: 0.88rem; font-weight: 700;
  color: var(--midnight); margin-bottom: 4px;
}
.vp-stage p {
  font-size: 0.76rem; line-height: 1.45;
  color: var(--steel); margin: 0;
}
.vp-stage + .vp-stage::before {
  content: ''; position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 2px;
  background: linear-gradient(90deg, rgba(44,92,248,0.3), rgba(44,92,248,0.7));
}
.vp-stage .vp-status {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  background: rgba(34,197,94,0.14); color: #1f8a4d;
}
.vp-stage.block .vp-status {
  background: rgba(235,89,31,0.14); color: var(--vivid-orange);
}
.vp-stage .vp-status::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: soc-blink 1.2s ease-in-out infinite;
}
.vp-flow-dot {
  animation: vp-fly 3s ease-in-out infinite;
  offset-rotate: 0deg;
}
@keyframes vp-fly {
  0%, 100% { offset-distance: 0%; opacity: 0; }
  10%      { opacity: 1; }
  85%      { opacity: 1; offset-distance: 85%; }
  100%     { offset-distance: 100%; opacity: 0; }
}

@media (max-width: 720px) {
  .vp-stage { min-width: 130px; }
}
@media (max-width: 1024px) {
  :root { --section-pad: 88px 5%; }
}

/* ═══════════════════════════════════════════════════════════════
   WordPress block layout adjustments — keeps the static design
   intact when content comes through Gutenberg's wp-block-* wrappers.
   ═══════════════════════════════════════════════════════════════ */

/* Neutralize WordPress is-layout-flow vertical margins between sections
   so our purpose-built spacing isn't double-applied. */
.wp-site-blocks > *,
.entry-content.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Card grids inside groups should ignore default block margins on children. */
.card-grid > *,
.stats-grid > *,
.it-stops > *,
.future-modules-grid > *,
.arch-modules > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Gutenberg gives section-header an extra wrapper; keep it centered/constrained. */
.wp-block-group.section-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.wp-block-group.section-header > * { margin: 0 auto; }
.wp-block-group.section-header .wp-block-heading { margin: 0 auto; }
.wp-block-group.section-header > p:not(.eyebrow) { margin-top: 20px; color: var(--text-secondary); }
.wp-block-group.section-header-dark > p:not(.eyebrow) { color: var(--steel-light); }

/* Default heading class added by Gutenberg shouldn't override our type scale. */
.wp-block-heading { font-family: inherit; }

/* The fixed <nav> at the top of the document needs to win against any
   theme.json link/element styles WordPress may inject after our stylesheet,
   and any wp-block-* defaults that touch list items or anchors.
   These rules are intentionally heavy-handed and use !important. */
nav ul.nav-links {
  display: flex !important;
  align-items: center;
  gap: 32px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav ul.nav-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: list-item;
}
nav ul.nav-links li::marker,
nav ul.nav-links li::before { content: none !important; }
nav ul.nav-links a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 6px 2px;
  text-decoration: none;
  display: inline-block;
}
nav ul.nav-links a:hover { color: #fff !important; }
nav ul.nav-links a[aria-current="page"] { color: #fff !important; }

/* Force header template-part wrapper out of the way so the fixed nav and
   the .nav-mobile overlay aren't confined inside its layout flow. */
header.wp-block-template-part { display: contents; }

/* The footer template-part wraps our <footer> in another <footer class="wp-block-template-part">.
   Collapse the wrapper so the inner footer's background/padding don't double up,
   then re-state the footer link styles at high enough specificity to beat
   theme.json's element styles and any wp-block-* list defaults. */
footer.wp-block-template-part { display: contents; }
footer .footer-col ul,
footer .footer-grid ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}
footer .footer-col li,
footer .footer-grid li {
  list-style: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: list-item;
}
footer .footer-col li::marker,
footer .footer-grid li::marker,
footer .footer-col li::before,
footer .footer-grid li::before { content: none !important; }
footer .footer-col a,
footer .footer-grid a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.15s;
}
footer .footer-col a:hover,
footer .footer-grid a:hover { color: var(--white) !important; }
footer .footer-bottom-links a { color: rgba(255,255,255,0.3) !important; }
footer .footer-bottom-links a:hover { color: rgba(255,255,255,0.7) !important; }

/* WP buttons — only when used inside the static design we restyle them
   to look like our pill .btn-orange.btn-lg. */
.wp-block-button .wp-block-button__link.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 34px; border-radius: 999px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  background: var(--vivid-orange); color: var(--white);
  border: 2px solid var(--vivid-orange);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.wp-block-button .wp-block-button__link.wp-element-button:hover {
  background: #D14E18; border-color: #D14E18;
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(235,89,31,0.35);
}

/* Theme.json injects a default <a> color (cobalt link blue, or the body
   text color depending on the element rule) which can win against our
   static button color declaration. Restate the button text colors with
   higher specificity so the pill buttons always render readable. */
a.btn,
a.btn.btn-orange,
a.btn.btn-cobalt,
a.btn.btn-midnight { color: var(--white) !important; }
a.btn.btn-orange:hover,
a.btn.btn-cobalt:hover,
a.btn.btn-midnight:hover { color: var(--white) !important; }
a.btn .btn-arrow,
a.btn .btn-arrow i { color: inherit !important; }
a.btn.btn-outline { color: var(--midnight) !important; }
a.btn.btn-outline-light { color: var(--white) !important; }
a.btn.btn-ghost { color: var(--cobalt) !important; }

/* Code blocks rendered by wp:code on Security/API pages. */
pre.wp-block-code {
  background: var(--midnight); color: var(--steel-light);
  border-radius: 12px; padding: 24px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem; line-height: 1.7;
  overflow-x: auto; margin: 0 auto 24px;
  border: 1px solid rgba(76,113,134,0.2);
  max-width: 1100px;
}

/* Default link color on body content shouldn't fight our scoped styles. */
.wp-site-blocks a { color: inherit; }

/* Contact page "What to expect" list — checkmark bullets, no default discs. */
.info-panel { padding: 36px; }
.info-panel h3 { margin-bottom: 20px; }
.info-panel h4 { margin-bottom: 12px; }
.info-panel .expect-list,
ul.expect-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-panel .expect-list li,
ul.expect-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.info-panel .expect-list li::marker,
ul.expect-list li::marker { content: none !important; }
.info-panel .expect-list li i.ph,
ul.expect-list li i.ph {
  color: var(--vivid-orange);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Quick contact block under the info panel. */
.info-panel hr,
.info-panel .wp-block-separator { border: 0; border-top: 1px solid var(--border-color); margin: 24px 0; opacity: 1; }
.info-panel p i.ph-envelope,
.info-panel p i.ph-clock { color: var(--cobalt); font-size: 1.1rem; margin-right: 6px; }
.info-panel a[href^="mailto:"] { color: var(--cobalt); font-weight: 500; }

/* Contact form (CF7) styling — match the form-group styling from the static site. */
.wpcf7 form { display: flex; flex-direction: column; gap: 20px; }
.wpcf7 form label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--midnight);
  margin-bottom: 0;
}
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form textarea,
.wpcf7 form select {
  width: 100%;
  padding: 12px 16px;
  margin-top: 6px;
  border: 1px solid var(--manilla);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--midnight);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wpcf7 form input:focus,
.wpcf7 form textarea:focus,
.wpcf7 form select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(44,92,248,0.1);
}
.wpcf7 form textarea { resize: vertical; min-height: 140px; }
.wpcf7 input[type="submit"].btn,
.wpcf7 input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 16px 34px; border-radius: 999px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  background: var(--vivid-orange) !important; color: var(--white) !important;
  border: 2px solid var(--vivid-orange);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: #D14E18 !important;
  border-color: #D14E18;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(235,89,31,0.35);
}
.wpcf7-not-valid-tip { color: var(--danger); font-size: 0.85rem; margin-top: 4px; }

/* CF7's screen-reader status region must be visually hidden — without CF7's
   default styles (we dequeue them) it renders as a visible empty bar above
   the form. Standard a11y "visually hidden" recipe, applied to every
   wrapper CF7 7.x might emit (.screen-reader-response, .wpcf7-spinner,
   the hidden inputs <p>, etc.). */
.wpcf7 .screen-reader-response,
.wpcf7 [aria-live],
.wpcf7 .wpcf7-spinner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* CF7 also wraps its hidden inputs in a <p> sibling at the top of the form;
   when our reset gives <p> any padding it shows as a thin bar. Nuke any
   empty/invisible top elements inside the form. */
.wpcf7-form {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wpcf7-form > p:first-child:empty,
.wpcf7-form > div:first-child:empty,
.wpcf7-form > p:has(> input[type="hidden"]:only-child),
.wpcf7-form > p > input[type="hidden"] {
  display: none !important;
}
/* Fallback for browsers without :has() — push hidden-input wrappers off-flow. */
.wpcf7-form input[type="hidden"] { display: none !important; }

/* CF7 7.x wraps the hidden state inputs (_wpcf7, _wpcf7_version, etc.) in
   <fieldset class="hidden-fields-container">. Browsers give every <fieldset>
   a default 2px groove border, which renders as the visible "bar" above the
   form when the contents are display:none. Hide the wrapper outright. */
.wpcf7-form .hidden-fields-container,
.wpcf7-form fieldset.hidden-fields-container,
fieldset.hidden-fields-container { display: none !important; }
.wpcf7-form > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: 0 !important;
  background: none !important;
}
/* Some CF7 + Gutenberg combos wrap the shortcode in a <p> that picks up
   styling from prose CSS. Strip it. */
.wp-block-column > p:has(.wpcf7) { margin: 0 !important; }

/* Hide the response-output box until CF7 actually fills it with a status. */
.wpcf7-response-output { display: none; }
.wpcf7-response-output:not(:empty) {
  display: block;
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { display: block; }