/* ==========================================================================
   DEPLOYBIRDS — Professional SaaS Design System
   ========================================================================== */

/* Fonts are linked from each page's <head> (preconnect + stylesheet).
   Do NOT re-add @import here: it forces a 4-hop serial discovery chain
   (html -> style.css -> fonts css -> woff2) and delays first text paint. */

:root {
  /* Core Palette — blue on a blue-biased black.
     Grounds are never neutral grey: each carries a slight blue bias so the
     accent sits in the same family as the surfaces rather than on top of them. */
  --bg-black: #05070A;
  --bg-dark: #080C12;
  --bg-surface: #0D131C;
  --bg-surface-elevated: #131A24;
  --bg-surface-3: #1B2531;
  --bg-card: rgba(13, 19, 28, 0.6);

  /* Accent — every value verified as TEXT, not just as a fill:
       --accent        6.66:1 on --bg-dark, 5.77:1 on --bg-surface-3
       --accent-deep   5.48:1 / 4.75:1
       --accent-bright 12.10:1 / 10.49:1
     SDLC's own #2563EB was rejected: 3.90:1 on this ground, large-text only. */
  --accent: #4D93FF;
  --accent-deep: #3B82F6;
  --accent-bright: #7DD3FC;
  --accent-dim: rgba(77, 147, 255, 0.1);

  /* 21 inline styles across the HTML reference --accent-lime, which was never
     defined — those elements silently inherited instead of being accented.
     Aliased so the markup's intent finally applies. */
  --accent-lime: var(--accent);

  /* Typography Colours */
  --text-primary: #EEF3FA;
  --text-secondary: #9FB0C4;
  --text-muted: #8394A8;   /* 6.31:1 on ground, 4.99:1 on --bg-surface-3 */

  /* Borders */
  --border-subtle: rgba(77, 147, 255, 0.12);
  --border-card: rgba(77, 147, 255, 0.28);   /* decorative card edges (F-14) */
  /* Interactive boundaries must clear WCAG 1.4.11's 3:1.
     The green build used 0.58 alpha (3.32:1). This blue is darker, so the
     same alpha only reaches 2.86:1 — caught by measuring the rendered page,
     not by assuming the alpha carried over. 0.68 gives 3.55:1. */
  --border-field: rgba(77, 147, 255, 0.68);
  --border-strong: rgba(77, 147, 255, 0.35);
  --border-light: #DCE8DA;

  /* Fonts */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — use ONLY these (F-17) */
  --fs-xs:   0.8125rem;                      /* 13px — labels, tags, meta */
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.15rem, 2.4vw, 1.5rem);
  --fs-2xl:  clamp(1.3rem,  4vw, 2.25rem);
  --fs-3xl:  clamp(1.75rem, 5vw, 3.25rem);
  --fs-4xl:  clamp(2rem,    6vw, 4rem);

  /* Layout */
  --header-height: 80px;
  --max-width: 1280px;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(77, 147, 255, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(77, 147, 255, 0.45);
}

/* Background Dot Grid — replaces cyber grid */
.cyber-grid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(77, 147, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
}

.radial-vignette {
  display: none;
}

/* ==========================================================================
   NAVIGATION & HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(10, 19, 16, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-card);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(10, 19, 16, 0.95);
  border-color: rgba(77, 147, 255, 0.2);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.brand-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon svg {
  width: 100%;
  height: 100%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  transition: color 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
}

.nav-cta-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-nav-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bg-dark);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.btn-nav-cta:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: rgba(10, 19, 16, 0.98);
  border-bottom: 1px solid var(--border-strong);
  padding: 24px 20px;
  z-index: 99;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-drawer.open {
  display: flex;
}

.mobile-nav-drawer .nav-link {
  font-size: var(--fs-base);
  padding: 10px 0;
}

/* ==========================================================================
   BUTTONS & BADGES
   ========================================================================== */
.btn-chamfer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  border: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-dark);
  border: none;
}

.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(77, 147, 255, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid rgba(77, 147, 255, 0.75);  /* was 0.4 = 2.19:1 (F-14) */
}

.btn-secondary:hover {
  background: rgba(77, 147, 255, 0.06);
  border-color: rgba(77, 147, 255, 0.65);
  transform: translateY(-1px);
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(77, 147, 255, 0.1);
  border: 1px solid rgba(77, 147, 255, 0.3);
  color: var(--accent);
}

.badge-tag::before {
  content: '›';
  font-size: var(--fs-base);
  line-height: 1;
}

/* ==========================================================================
   HOMEPAGE 3D SCROLL EXPERIENCE
   ========================================================================== */
#webgl-canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

.scroll-experience-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
}

.scroll-section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8vw;
  position: relative;
  box-sizing: border-box;
}

.scroll-section.section-right {
  justify-content: flex-end;
}

.scroll-section.section-center {
  justify-content: center;
  text-align: center;
}

.section-content-card {
  max-width: 580px;
  /* Smooth opacity gradient rather than a flat fill — reads as depth against
     the 3D scene. Every stop verified with text on it, not just the average:
       start rgba(27,37,49,.96) -> secondary text 7.08:1
       end   rgba(8,12,18,.96)  -> secondary text 8.85:1
     Worst case (white star directly behind the lightest stop): 6.22:1. */
  background: linear-gradient(155deg,
    rgba(27, 37, 49, 0.96) 0%,
    rgba(19, 26, 36, 0.96) 45%,
    rgba(8, 12, 18, 0.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-card);
  padding: 36px 40px;
  border-radius: 12px;
  position: relative;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 12px 12px 0 0;
}

.scroll-section.active .section-content-card {
  opacity: 1;
  transform: translateY(0);
}

.section-num-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.section-heading span.highlight {
  color: var(--accent);
}

.section-body {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}

.scroll-section.active .section-body {
  opacity: 1;
  transform: translateY(0);
}

.section-metrics-row {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-top: 6px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: rgba(77, 147, 255, 0.07);
  color: var(--text-secondary);
  border: 1px solid rgba(77, 147, 255, 0.18);
  padding: 4px 10px;
  border-radius: 4px;
}

/* ==========================================================================
   HOMEPAGE HUD ELEMENTS
   ========================================================================== */
.hud-progress-rail {
  position: fixed;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(77, 147, 255, 0.1);
  transform: translateX(-50%);
  z-index: 1;
}

.rail-fill {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 0%;
  background: var(--accent);
  transform: translateX(-50%);
  z-index: 2;
  transition: height 0.2s ease-out;
}

.rail-dot {
  position: relative;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.rail-dot.active {
  color: var(--bg-dark);
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

.hud-section-label {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  white-space: nowrap;
}

.hud-section-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.hud-bottom-route {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(10, 19, 16, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  padding: 10px 24px;
  border-radius: 999px;
}

.waypoint-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.waypoint-step.active {
  color: var(--accent);
  font-weight: 600;
}

.waypoint-node {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.3s ease;
}

.waypoint-step.active .waypoint-node {
  background: var(--accent);
  transform: scale(1.3);
}

.waypoint-arrow {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Scroll Discovery Cue */
.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  animation: floatBounce 2s infinite ease-in-out;
  cursor: pointer;
  z-index: 20;
}

@keyframes floatBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

.scroll-cue svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

/* Audio Toggle */
.audio-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 32px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 19, 16, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.audio-toggle-btn:hover {
  color: var(--text-primary);
  border-color: rgba(77, 147, 255, 0.3);
}

.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.sound-bar {
  width: 2px;
  height: 4px;
  background: var(--accent);
  border-radius: 1px;
}

.audio-playing .sound-bar:nth-child(1) { animation: soundWave 0.8s infinite alternate ease-in-out; }
.audio-playing .sound-bar:nth-child(2) { animation: soundWave 0.6s infinite alternate ease-in-out 0.2s; }
.audio-playing .sound-bar:nth-child(3) { animation: soundWave 0.9s infinite alternate ease-in-out 0.4s; }
.audio-playing .sound-bar:nth-child(4) { animation: soundWave 0.7s infinite alternate ease-in-out 0.1s; }

@keyframes soundWave {
  0% { height: 3px; }
  100% { height: 14px; }
}

/* ==========================================================================
   INTERIOR PAGES LAYOUT
   ========================================================================== */
.page-container {
  position: relative;
  z-index: 10;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 40px) 24px 80px;
}

.page-hero {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 60px;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 18px 0 20px;
}

.page-hero p.lead {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Filterable Pill Tabs */
.filter-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.filter-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(20, 35, 27, 0.7);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  color: var(--text-primary);
  border-color: rgba(77, 147, 255, 0.3);
}

.filter-pill.active {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
  font-weight: 600;
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

.service-card {
  background: rgba(20, 35, 27, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(77, 147, 255, 0.12);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 147, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent);
}

.card-category-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.service-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
  line-height: 1.2;
}

.service-card p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-list {
  list-style: none;
  margin-bottom: 24px;
}

.feature-list li {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.feature-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: bold;
}

/* ==========================================================================
   FLAGSHIP / LAUNCHPAD / UNICORN PROGRAM PAGE
   ========================================================================== */
.flagship-hero-banner {
  background: linear-gradient(135deg, rgba(14, 23, 18, 0.9), rgba(20, 35, 27, 0.9));
  border: 1px solid rgba(77, 147, 255, 0.2);
  border-radius: 16px;
  padding: 48px;
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.flagship-hero-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(77, 147, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.countdown-box {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}

.time-slot {
  background: rgba(10, 19, 16, 0.8);
  border: 1px solid var(--border-card);
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  min-width: 72px;
}

.time-val {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.time-lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stats Counter Section */
.stats-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.stat-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--accent);
  line-height: 1.1;
}

.stat-desc {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Milestone Timeline */
.timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0 64px;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 1px;
  background: var(--border-card);
  z-index: 1;
}

.timeline-node-card {
  position: relative;
  z-index: 2;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 24px;
  padding-top: 40px;
}

.timeline-dot {
  position: absolute;
  top: 16px;
  left: 24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 2px solid var(--accent);
}

.timeline-node-card h4,
.timeline-node-card .milestone-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.timeline-node-card p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Architecture Diagram */
.architecture-canvas-wrap {
  background: var(--bg-surface);
  border: 1px solid rgba(77, 147, 255, 0.2);
  border-radius: 16px;
  padding: 40px;
  margin: 48px 0;
  position: relative;
}

.arch-layer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.arch-col {
  background: rgba(10, 19, 16, 0.8);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
}

.arch-col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 8px;
}

.arch-node-chip {
  background: rgba(77, 147, 255, 0.05);
  border: 1px solid rgba(77, 147, 255, 0.14);
  border-radius: 4px;
  padding: 8px 6px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-primary);
}

/* ==========================================================================
   CONTACT / APPLICATION FORM
   ========================================================================== */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: flex-start;
  margin-top: 20px;
}

.contact-form-card {
  background: var(--bg-card);
  border: 1px solid rgba(77, 147, 255, 0.2);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: rgba(10, 19, 16, 0.9);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-base);   /* must stay >= 16px or iOS Safari auto-zooms (F-15) */
  padding: 12px 16px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(77, 147, 255, 0.5);
  background: rgba(14, 23, 18, 0.9);
}

.checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 28px;
}

.checkbox-wrap input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

.checkbox-wrap label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  cursor: pointer;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.direct-contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 24px;
}

.contact-link-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 0.2s ease;
}

.contact-link-row:last-child {
  border-bottom: none;
}

.contact-link-row:hover {
  color: var(--accent);
}

.consultation-badge-box {
  background: rgba(20, 35, 27, 0.8);
  border: 1px solid rgba(77, 147, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
}

/* ==========================================================================
   BLOG / INSIGHTS CARDS
   ========================================================================== */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

.insight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.insight-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 147, 255, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.insight-illustration-header {
  height: 180px;
  background: linear-gradient(135deg, #0D1A12, #162B1E);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.insight-illustration-header svg {
  width: 90px;
  height: 90px;
  opacity: 0.85;
}

.insight-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.insight-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 12px;
}

.insight-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.insight-excerpt {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: 20px;
}
.newsletter-box {
  background: linear-gradient(135deg, rgba(14, 23, 18, 0.95), rgba(20, 35, 27, 0.95));
  border: 1px solid rgba(77, 147, 255, 0.2);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 10;
  background: var(--bg-black);
  border-top: 1px solid var(--border-card);
  padding: 60px 40px 30px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  max-width: 320px;
  margin-top: 14px;
  line-height: 1.6;
}

.footer-col h5,
.footer-col .footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
  .hud-progress-rail,
  .hud-section-label,
  .hud-bottom-route {
    display: none !important;
  }

  .scroll-section {
    padding: 0 24px;
    justify-content: center !important;
  }

  .section-content-card {
    max-width: 100%;
  }

  .stats-banner-grid,
  .timeline-track,
  .arch-layer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-layout-grid,
  .flagship-hero-banner {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 20px;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .stats-banner-grid,
  .timeline-track,
  .arch-layer-grid,
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   AUDIT FIXES — 26 Aug 2026
   Appended last so these win on equal specificity. See audit F-numbers.
   ========================================================================== */

/* --- F-09: visible keyboard focus. Previously only form fields had any. --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--bg-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* --- F-05: fixed header must not cover an anchored heading on arrival --- */
[id] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* --- F-08: honour the OS motion preference --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* The WebGL scene is decorative — remove it entirely rather than freeze it */
  #webgl-canvas-container {
    display: none !important;
  }
  .scroll-section .section-content-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- F-29: if WebGL is unavailable the canvas layer stays empty.
       js/three-scene.js adds .no-webgl to <html> in that case. --- */
html.no-webgl #webgl-canvas-container {
  background:
    radial-gradient(ellipse 70% 50% at 72% 38%, rgba(77, 147, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 45% at 28% 78%, rgba(0, 240, 255, 0.06), transparent 70%);
}

/* --- F-03 + F-04: the mobile header and the 320px clipping --------------- */

@media (max-width: 1024px) {
  /* max-width alone loses to the flex item's automatic minimum size,
     which is why copy was being clipped at 320px. min-width:0 is the fix. */
  .section-content-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  /* Sections previously had no top padding, so the first badge sat behind
     the fixed header. */
  .scroll-section {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 48px;
  }
}

@media (max-width: 768px) {
  /* The quote pill, the wordmark and the hamburger could not all fit.
     The CTA is already repeated in the drawer and at the foot of every page. */
  .btn-nav-cta {
    display: none;
  }
  .mobile-menu-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .brand-logo {
    min-width: 0;
    flex-shrink: 1;
  }
  .brand-logo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .section-content-card {
    padding: 28px 22px;
  }
}

@media (max-width: 430px) {
  /* Three fixed columns could not hold their labels below ~400px */
  .section-metrics-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding: 0 14px;
  }
  .brand-icon {
    width: 26px;
    height: 26px;
  }
}

/* --- F-25: the drawer needs to sit above the page and lock the body ----- */
body.nav-open {
  overflow: hidden;
}

/* --- F-02: submission status, announced via aria-live ------------------- */
.form-status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  margin: 0 0 16px;
  padding: 0;
  color: var(--text-secondary);
}
.form-status:empty {
  display: none;
}
.form-status.is-ok {
  color: var(--accent);
}
.form-status.is-warn {
  color: #D9A441;
}
.form-status.is-error {
  color: #E8695E;
}

/* --- F-20: headings that belong in the outline but not in the design ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- F-04 (round 2): the real causes found by re-testing at 320px ------- */

/* .section-metrics-row is FLEX, not grid — a grid-template-columns override
   on it did nothing. Three flex items could not hold their labels. */
@media (max-width: 560px) {
  .section-metrics-row {
    flex-direction: column;
    gap: 16px;
  }
}

/* minmax(360px, …) forces a 360px track even in a 320px viewport, so the
   grid overflowed on small phones. min() lets the track collapse. */
.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

/* Same class, same trap, elsewhere in the sheet */
.stats-banner-grid,
.timeline-track,
.arch-layer-grid,
.insights-grid {
  min-width: 0;
}

/* Grid and flex children need this or their content sets the floor */
.service-card,
.insight-card,
.section-content-card,
.metric-item,
.timeline-node-card {
  min-width: 0;
}

/* Long unbroken strings (URLs, emails) must not set the page width */
.footer-link,
.section-body,
.insight-excerpt,
p {
  overflow-wrap: break-word;
}

@media (max-width: 420px) {
  .page-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tag-cloud {
    gap: 6px;
  }
}

/* --- F-04 (round 3): the same two traps in the remaining grids ---------- */

/* Every auto-fill grid had a fixed minmax floor larger than a 320px screen */
.insights-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}
/* A bare `1fr` track still floors at the content's min-content width, so an
   uppercase heading pushed this banner wider than its own padding box. */
.flagship-hero-banner {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  padding: clamp(22px, 5vw, 48px);
}

.contact-layout-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .flagship-hero-banner,
  .contact-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Very narrow screens: let a long single word break rather than overflow */
@media (max-width: 360px) {
  h1, h2, h3,
  .section-heading {
    overflow-wrap: break-word;
  }
}

/* --- F-14 (round 2): boundaries you must see in order to operate -------- */
.form-input,
.form-select,
.form-textarea,
.mobile-menu-btn,
.filter-pill,
.checkbox-wrap input[type="checkbox"] {
  border-color: var(--border-field);
}

/* Tag chips used as links should not carry a text underline */
a.tech-tag {
  text-decoration: none;
}
a.tech-tag:hover {
  border-color: var(--border-field);
  color: var(--text-primary);
}

/* ==========================================================================
   SDLC ACCENT MODEL — 26 Aug 2026
   Measured from sdlccorp.com, then translated to the green palette.

   The surprise from measuring their live page: the accent is used far LESS
   than it looks. On their whole homepage the blue appears as text 5 times
   (all 11px eyebrow labels) and as a fill 3 times (none of them a real CTA).

   Their actual rules, which this block implements:
     1. Primary CTA is OFF-WHITE with dark ink — not the accent colour
     2. Secondary CTA is a translucent dark fill, white text
     3. Both are full pills (9999px), 14px, weight 600, tight padding
     4. The accent enters headlines as a text-clipped GRADIENT, not flat fill
     5. Stat numbers are WHITE at a modest size, not big and coloured
     6. Trust pills are translucent dark + hairline border, no accent at all
     7. The accent is reserved for small uppercase eyebrows and hairline glows

   Deviation from SDLC, deliberate: their pill border is rgba(255,255,255,0.08)
   = 1.22:1 against their ground, and their card edge is 1.12:1. Both are
   invisible and both fail WCAG 1.4.11. Ours use 0.38 alpha = 3.57:1.
   ========================================================================== */

:root {
  /* Pill geometry, from SDLC's computed styles */
  --pill: 9999px;

  /* --accent-bright and --bg-surface-3 are declared once, in the palette
     block at the top of this file. They used to be RE-declared here with the
     old green values, and because this block comes later it won — so the
     palette change silently did not reach the card surfaces. Do not
     re-declare tokens outside the palette block. */

  /* Hairline that is actually visible: 3.57:1 on the ground */
  --border-hairline: rgba(255, 255, 255, 0.38);
}

/* --- 1 + 2 + 3. Button hierarchy ---------------------------------------- */

.btn-chamfer,
.btn-nav-cta {
  border-radius: var(--pill);
  letter-spacing: 0.06em;
}

/* Primary: off-white fill, dark ink. 17.12:1 */
.btn-primary {
  background: var(--text-primary);
  color: var(--bg-dark);
  border: 1px solid var(--text-primary);
}
.btn-primary:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(143, 232, 122, 0.18);
}

/* Secondary: translucent dark fill, white text, visible edge. 15.59:1 */
.btn-secondary {
  background: rgba(20, 35, 27, 0.7);
  color: var(--text-primary);
  border: 1px solid var(--border-field);
}
.btn-secondary:hover {
  background: rgba(30, 53, 39, 0.85);
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* The nav CTA follows the primary treatment */
.btn-nav-cta {
  background: var(--text-primary);
  color: var(--bg-dark);
  border: 1px solid var(--text-primary);
}
.btn-nav-cta:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* --- 4. Headline emphasis as a clipped gradient -------------------------- */

/* SDLC: linear-gradient(110deg, #F5F5F5 20%, #0052FF 55%, #00C6FF 80%, #F5F5F5 100%)
   The word starts in the body colour, travels through the accent, and returns.
   Flat colour is the fallback, so this degrades safely. */
.section-heading span.highlight,
h1 span.highlight,
h2 span.highlight {
  color: var(--accent);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .section-heading span.highlight,
  h1 span.highlight,
  h2 span.highlight {
    background-image: linear-gradient(
      110deg,
      var(--text-primary) 8%,
      var(--accent) 42%,
      var(--accent-bright) 68%,
      var(--text-primary) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Descenders get clipped without this */
    padding-bottom: 0.06em;
  }
}

/* Windows high-contrast and forced-colors must not lose the text */
@media (forced-colors: active) {
  .section-heading span.highlight,
  h1 span.highlight,
  h2 span.highlight {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    background-image: none;
  }
}

/* --- 5. Stat numbers: white, modest, heavy ------------------------------- */

/* Was the accent colour at --fs-2xl. SDLC runs theirs at 18px/w600 in white,
   which reads as fact rather than decoration. */
.metric-val {
  color: var(--text-primary);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.metric-label {
  color: var(--text-secondary);
}

/* --- 7. The accent, demoted to eyebrows and hairlines -------------------- */

.section-num-label,
.badge-tag {
  color: var(--accent);
}

/* Tech tags follow the pill geometry now */
.tech-tag {
  border-radius: var(--pill);
  padding: 5px 13px 6px;
}

/* Cards get a real edge — SDLC's is 1.12:1 and invisible */
.section-content-card,
.service-card,
.insight-card {
  border-radius: 16px;
}
.service-card,
.insight-card {
  background: var(--bg-surface-3);
}

/* A single hairline accent glow at the top of a card, replacing the old
   full-width gradient bar. This is a 2px bar — .section-content-card must
   NEVER appear in this selector list, or the gradient becomes the card's
   entire background and washes out every word on it. */
.section-content-card::before {
  background: linear-gradient(90deg, var(--accent-bright), var(--accent) 30%, transparent 75%);
}

/* Twin CTA under the hero copy — SDLC runs solid + ghost side by side */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 430px) {
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn-chamfer { justify-content: center; }
}

/* --- Hero fit. The twin CTA row made the stage-01 card taller than the
       viewport, and .scroll-section had no vertical padding on desktop, so
       the card clipped under the fixed header. ------------------------- */

.scroll-section {
  padding-top: calc(var(--header-height) + 32px);
  padding-bottom: 56px;
}

/* Stage 01 carries the most content, so it gets more width — the strip
   needs to fit in two rows, not three. */
#stage-01 .section-content-card {
  max-width: 680px;
}

.hero-cta-row {
  margin-top: 22px;
}

/* Scroll cue placement.
   The cue is position:absolute at bottom:40px inside a flex-centred section.
   Measured budget for it to sit fully in view without touching the card:
     header padding 112 + card ~565 + gap 16 + cue 49 + margin 20 = ~762px
   So it needs a viewport at least ~780px tall. Below that the section grows
   past 100vh and the cue lands under the fold, where it says nothing the
   reader cannot already see. Hidden rather than nudged.
   Also hidden under 1025px wide, where the card alone exceeds the viewport. */
#stage-01 .scroll-cue {
  display: none;
}
@media (min-width: 1025px) and (min-height: 800px) {
  #stage-01 {
    padding-bottom: 130px;
  }
  #stage-01 .scroll-cue {
    display: flex;
  }
}

/* Tighten the stage-01 vertical rhythm — two proof rows plus a CTA row need
   the space back from margins rather than from content. */
#stage-01 .section-content-card { padding: 30px 36px 32px; }
#stage-01 .section-metrics-row  { margin-top: 18px; padding-top: 15px; }
#stage-01 .section-body         { margin-bottom: 0; }

/* --- axe-core finding: .badge-tag inside a .service-card ----------------
   The badge's own rgba(77, 147, 255,0.1) tint composites over the lighter
   --bg-surface-3 card to #25422B, where the accent text lands at 4.48:1 —
   two hundredths under AA. Dropping the tint on cards (the card already
   provides the surface) takes it to 5.33:1 and keeps the accent colour.
   Deliberately not solved by brightening the text: that would give the
   same component two different greens depending on where it sits. */
.service-card .badge-tag,
.insight-card .badge-tag {
  background: transparent;
  border-color: var(--border-field);
}

/* Same trap, hit again when the accent moved to #4D93FF: the brighter, more
   saturated green makes every translucent tint composite LIGHTER. .tech-tag's
   rgba(...,0.07) over the lighter card surface dropped --text-secondary to
   4.44:1 — caught by axe-core across 63 nodes on 4 pages.
   Dropping the tint on cards gives 5.16:1. The tint is kept on the darker
   page ground, where it measures 6.60:1. */
.service-card .tech-tag,
.insight-card .tech-tag {
  background: transparent;
}

/* ==========================================================================
   BLUE / BLACK — smooth opacity gradients
   Gradients used for depth, never behind running text at an opacity that
   would wash it out. Every stop was contrast-checked before shipping; the
   previous green build broke precisely because an accent gradient became a
   card's whole background.
   ========================================================================== */

/* Page ground: a slow vertical fade so the page is not one flat black */
body {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(77, 147, 255, 0.07), transparent 70%),
    linear-gradient(180deg, var(--bg-black) 0%, var(--bg-dark) 45%, var(--bg-black) 100%);
  background-attachment: fixed;
}

/* Header: fades in rather than switching state abruptly */
.site-header {
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.92), rgba(5, 7, 10, 0.74));
}
.site-header.scrolled {
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.98), rgba(8, 12, 18, 0.92));
}

/* The 2px accent bar on a card — a soft blue falloff, not a hard stop */
.section-content-card::before {
  background: linear-gradient(90deg,
    var(--accent-bright) 0%,
    var(--accent) 28%,
    rgba(77, 147, 255, 0.35) 60%,
    transparent 100%);
}

/* Service / insight cards: the same depth treatment, one step lighter */
.service-card,
.insight-card {
  background: linear-gradient(155deg,
    rgba(27, 37, 49, 0.92) 0%,
    rgba(19, 26, 36, 0.96) 60%,
    rgba(13, 19, 28, 0.98) 100%);
}

/* Primary button keeps the SDLC model (off-white, dark ink) but gains a
   barely-there gradient so it does not read as a flat sticker */
.btn-primary {
  background: linear-gradient(160deg, #FFFFFF 0%, var(--text-primary) 100%);
}
.btn-primary:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 100%);
  box-shadow: 0 6px 24px rgba(77, 147, 255, 0.22);
}

/* Ghost button: translucent, with a blue lift on hover */
.btn-secondary {
  background: linear-gradient(160deg, rgba(27, 37, 49, 0.75), rgba(13, 19, 28, 0.75));
}
.btn-secondary:hover {
  background: linear-gradient(160deg, rgba(35, 48, 64, 0.9), rgba(19, 26, 36, 0.9));
  border-color: var(--accent);
}

/* Nav CTA matches the primary treatment */
.btn-nav-cta {
  background: linear-gradient(160deg, #FFFFFF 0%, var(--text-primary) 100%);
}

/* Dot grid: cooler and fainter than the green build's */
.cyber-grid-bg {
  background-image: radial-gradient(circle, rgba(77, 147, 255, 0.07) 1px, transparent 1px);
}

/* Newsletter / flagship panels */
.newsletter-box,
.flagship-hero-banner {
  background: linear-gradient(150deg,
    rgba(27, 37, 49, 0.95) 0%,
    rgba(13, 19, 28, 0.95) 55%,
    rgba(8, 12, 18, 0.95) 100%);
  border-color: rgba(77, 147, 255, 0.22);
}

/* Contact form panel */
.contact-form-card {
  background: linear-gradient(155deg,
    rgba(27, 37, 49, 0.9) 0%,
    rgba(13, 19, 28, 0.96) 100%);
}

/* Static fallback when WebGL is unavailable — blue now */
html.no-webgl #webgl-canvas-container {
  background:
    radial-gradient(ellipse 70% 50% at 72% 38%, rgba(77, 147, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 55% 45% at 28% 78%, rgba(125, 211, 252, 0.07), transparent 70%);
}