/* ═══════════════════════════════════════════════════════════════
   services.css — Teh Tarik Digital · Services Section
   Single shared stylesheet for all 7 pages (index + 6 subpages)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  /* ── Brand colours ── */
  --brand-blue:          #2979ff;
  --brand-blue-dim:      #1a4fcc;
  --brand-orange:        #ff9f43;
  --brand-orange-dim:    #e67e22;
  --brand-green:         #00e676;

  /* ── Surfaces ── */
  --bg:                  #05080f;
  --card-bg:             rgba(4, 8, 20, 0.60);   /* index service cards */
  --card-bg-alt:         rgba(4, 8, 20, 0.50);   /* cap-item, process-step */
  --card-bg-hover:       rgba(41, 121, 255, 0.07);
  --badge-bg:            rgba(41, 121, 255, 0.06);

  /* ── Borders ── */
  --border-subtle:       rgba(41, 121, 255, 0.10);
  --border-card:         rgba(41, 121, 255, 0.18);
  --border-card-hover:   rgba(41, 121, 255, 0.50);
  --border-card-dim:     rgba(41, 121, 255, 0.12);  /* cap-item */
  --border-process:      rgba(41, 121, 255, 0.15);
  --border-badge:        rgba(41, 121, 255, 0.25);
  --border-corner-dim:   rgba(41, 121, 255, 0.30);
  --border-section-line: rgba(41, 121, 255, 0.20);  /* section-tag rule */

  /* ── Grid overlay ── */
  --grid-line:           rgba(41, 121, 255, 0.032);

  /* ── Text ── */
  --text-primary:        #ffffff;
  --text-muted:          rgba(255, 255, 255, 0.55);
  --text-faint:          rgba(255, 255, 255, 0.25);
  --text-dim:            rgba(255, 255, 255, 0.32);
  --text-nav:            rgba(255, 255, 255, 0.45);
  --text-back-link:      rgba(255, 255, 255, 0.35);
  --text-cap:            rgba(255, 255, 255, 0.60);
  --text-process-num:    rgba(41, 121, 255, 0.15);
  --text-badge:          rgba(255, 255, 255, 0.50);
  --text-footer-link:    rgba(255, 255, 255, 0.35);
  --text-footer-active:  rgba(255, 255, 255, 0.75);

  /* ── Buttons ── */
  --btn-primary-text:    var(--brand-orange);
  --btn-primary-border:  rgba(255, 159, 67, 0.55);
  --btn-primary-bg:      rgba(255, 159, 67, 0.08);
  --btn-primary-bg-hov:  rgba(255, 159, 67, 0.18);
  --btn-secondary-text:  rgba(255, 255, 255, 0.50);
  --btn-secondary-bdr:   rgba(255, 255, 255, 0.15);
  --btn-secondary-bhov:  rgba(255, 255, 255, 0.40);

  /* ── Typography ── */
  --font-mono:           'Share Tech Mono', monospace;
  --font-display:        'Orbitron', monospace;

  /* ── Layout ── */
  --content-w:           960px;
  --gap-grid:            16px;
}


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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  font-family: var(--font-mono);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Global grid-line background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}


/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */

/* gold token — used by nav alliance + footer labels + ai-tag */
:root {
  --brand-gold:        #c8922a;
  --brand-gold-dim:    rgba(200,146,42,0.15);
  --brand-gold-border: rgba(200,146,42,0.35);
}

nav:not(.back-bar):not(.nav-lang):not(.footer-col) {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: rgba(5, 8, 15, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* subtle grid overlay on header */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-color: rgba(5, 8, 15, 0.96);
  border-bottom: none;
}

/* Logo image */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  width: 150px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* Right cluster: links + lang */
.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

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

.nav-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-nav);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--text-primary); }

/* TTD Alliance™ — amber gold */
.nav-links a.nav-alliance {
  color: var(--brand-gold);
  letter-spacing: 2px;
}
.nav-links a.nav-alliance:hover { color: #e8b040; }

/* Separator dot between Investors and Alliance */
.nav-sep {
  display: block;
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   TACTICAL LANGUAGE SWITCHER (CYBER BLUE VIBE)
   ========================================================================== */
.nav-lang {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.lang-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease;
  position: relative;
}

/* Hover state: slight text glow & brightness */
.lang-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Active/Selected state: Tactical Blue glow */
.lang-btn.active {
  color: var(--brand-blue, #2563eb); /* Pulls your exact brand blue variable */
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
  font-weight: 600;
}

/* Subtle data-dot indicator under the active language */
.lang-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background-color: var(--brand-blue, #2563eb);
  border-radius: 50%;
  box-shadow: 0 0 6px #00d2ff;
}

/* Clean, low-profile tactical dividers */
.lang-divider {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
  margin: 0 2px;
}


/* ─────────────────────────────────────────
   BACK NAV (subpages only)
───────────────────────────────────────── */
.back-bar {
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 24px 40px 0;
}

.back-link {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-back-link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.back-link:hover { color: var(--brand-blue); }


/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  padding: 80px 40px 36px;
  max-width: var(--content-w);
  margin: 0 auto;
  overflow: hidden;       /* clip the nebula canvas to the hero box */
  min-height: 380px;      /* room for the teaser beneath the copy */
}

/* Nebula teaser canvas — confined to .hero, sits behind the copy */
.hero-nebula {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;   /* decorative only — never intercepts clicks */
}

/* Left-to-right veil so hero copy stays legible over the animation */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--bg) 0%,
    var(--bg) 16%,
    rgba(5, 8, 15, 0.55) 38%,
    rgba(5, 8, 15, 0) 62%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Subpage hero: less vertical padding, no forced height, no canvas to clip */
.hero--sub {
  padding: 48px 40px 28px;
  min-height: 0;
  overflow: visible;
}

.page-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Subpage page-tag: tighter margin */
.hero--sub .page-tag { margin-bottom: 16px; }

.page-tag span { color: var(--brand-blue); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Subpage hero title: slightly smaller */
.hero--sub .hero-title {
  font-size: clamp(24px, 4vw, 44px);
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 560px;
}


/* ─────────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 36px 40px 64px;
  /*border-top: 1px solid var(--border-subtle);*/
}

/* Subpage section: tighter padding */
.section--sub { padding: 28px 40px 56px; }

.section-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--brand-blue);
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section--sub .section-tag { margin-bottom: 28px; }

.section-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-section-line);
}


/* ─────────────────────────────────────────
   INDEX: SERVICES BENTO GRID
   Layout (3-col, 3-row):
     Col:  1        2        3
     R1:  [tall ]  [sm   ]  [sm   ]
     R2:  [tall ]  [wide        ]
     R3:  [wide2        ]  [sm3  ]
───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--gap-grid);
}

/* ── Base card ── */
.service-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--border-card);
  background: var(--card-bg);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  overflow: hidden;
  min-height: 200px;
}

/* Corner brackets — top-left */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border-top: 2px solid var(--brand-blue);
  border-left: 2px solid var(--brand-blue);
}

/* Corner brackets — bottom-right */
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 24px; height: 24px;
  border-bottom: 2px solid var(--border-corner-dim);
  border-right: 2px solid var(--border-corner-dim);
  transition: border-color 0.25s;
}

.service-card:hover {
  border-color: var(--border-card-hover);
  background: var(--card-bg-hover);
  transform: translateY(-3px);
}

.service-card:hover::after      { border-color: var(--brand-orange); }
.service-card:hover .card-arrow { color: var(--brand-orange); transform: translateX(4px); }
.service-card:hover .card-icon  { color: var(--brand-orange); }

/* ── Bento span modifiers ── */

/* Module 01 — tall: col 1, rows 1–2 */
.service-card--tall {
  grid-column: 1;
  grid-row: 1 / 3;
  padding: 36px 28px;
}

/* Module 04 — wide: cols 2–3, row 2 */
.service-card--wide {
  grid-column: 2 / 4;
  grid-row: 2;
}

/* Module 05 — wide: cols 1–2, row 3 */
.service-card--wide-bottom {
  grid-column: 1 / 3;
  grid-row: 3;
}

/* Module 06 — col 3, row 3 */
.service-card--last {
  grid-column: 3;
  grid-row: 3;
}

/* Wide cards: horizontal content rhythm */
.service-card--wide,
.service-card--wide-bottom {
  flex-direction: row;
  align-items: stretch;
  gap: 28px;
  padding: 28px 32px;
}

.service-card--wide .card-body,
.service-card--wide-bottom .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevent flex blowout */
}

/* ── Card internals ── */
.card-module {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.card-icon {
  font-size: 22px;
  color: var(--brand-blue);
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.service-card--tall .card-icon   { font-size: 28px; margin-bottom: 20px; }

.service-card--wide .card-icon,
.service-card--wide-bottom .card-icon {
  font-size: 26px;
  margin-bottom: 0;
  padding-top: 4px;
  align-self: flex-start;
}

.card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.service-card--tall .card-title { font-size: 13px; }

.card-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 0;
}

.card-arrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--brand-blue);
  text-transform: uppercase;
  transition: color 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  align-self: flex-start;
}


/* ─────────────────────────────────────────
   SUBPAGES: CAPABILITY LIST
───────────────────────────────────────── */
.capabilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.cap-item {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-card-dim);
  background: var(--card-bg-alt);
}

.cap-item .cap-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cap-icon {
  color: var(--brand-blue);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  align-self: flex-start;
}

.cap-text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-cap);
}

/* Semantic bold label inside cap-text — flat selector via added class */
.cap-label {
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
}

.cap-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-cap);
}


/* ─────────────────────────────────────────
   SUBPAGES: CAP-ITEM AUDIENCE BADGES
───────────────────────────────────────── */
.cap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  margin-bottom: 10px;
}

.cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 400;
  border: 1px solid;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s, transform 0.15s;
  opacity: 0.9;
  cursor: default;
}

.cap-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   BADGE COLOUR VARIANTS
───────────────────────────────────────── */
.badge--blue       { background: rgba(0,150,255,0.18);   color: #0096ff; border-color: #0096ff66; }
.badge--sky        { background: rgba(0,170,255,0.18);   color: #00aaff; border-color: #00aaff66; }
.badge--green      { background: rgba(0,200,100,0.18);   color: #00c864; border-color: #00c86466; }
.badge--teal       { background: rgba(0,210,190,0.18);   color: #00d2be; border-color: #00d2be66; }
.badge--mint       { background: rgba(50,255,200,0.18);  color: #32ffc8; border-color: #32ffc866; }
.badge--periwinkle { background: rgba(41,121,255,0.18);  color: #5b9eff; border-color: #5b9eff66; }
.badge--lime       { background: rgba(100,220,50,0.18);  color: #64dc32; border-color: #64dc3266; }
.badge--violet     { background: rgba(180,0,255,0.18);   color: #c44dff; border-color: #c44dff66; }
.badge--magenta    { background: rgba(220,50,255,0.18);  color: #dc32ff; border-color: #dc32ff66; }
.badge--rose       { background: rgba(255,0,128,0.18);   color: #ff0080; border-color: #ff008066; }
.badge--crimson    { background: rgba(255,60,90,0.18);   color: #ff3c5a; border-color: #ff3c5a66; }
.badge--orange     { background: rgba(255,100,0,0.18);   color: #ff6400; border-color: #ff640066; }
.badge--amber      { background: rgba(255,170,0,0.18);   color: #ffaa00; border-color: #ffaa0066; }
.badge--gold       { background: rgba(255,200,0,0.18);   color: #ffc800; border-color: #ffc80066; }

/* ─────────────────────────────────────────
   SUBPAGES: PROCESS STRIP
───────────────────────────────────────── */
.process-row {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.process-step {
  flex: 1;
  padding: 24px 20px;
  border: 1px solid var(--border-process);
  background: var(--card-bg-alt);
  text-align: center;
}

.process-step:not(:last-child) { border-right: none; }

.process-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--text-process-num);
  margin-bottom: 10px;
  line-height: 1;
}

.process-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--brand-blue);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.process-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}


/* ─────────────────────────────────────────
   SUBPAGES: TECH STACK BADGES
───────────────────────────────────────── */
.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-badge {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--border-badge);
  color: var(--text-badge);
  background: var(--badge-bg);
}


/* ─────────────────────────────────────────
   SUBPAGES: CTA BAR & BUTTONS
───────────────────────────────────────── */
.cta-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-primary {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hov);
  border-color: var(--brand-orange);
  color: var(--text-primary);
}

.btn-secondary {
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-bdr);
  background: transparent;
}

.btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--btn-secondary-bhov);
}


/* ─────────────────────────────────────────
   FOOTER — full 5-column layout
───────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 10px 48px;
  display: grid;
  grid-template-columns: 1.9fr 1.1fr 1.1fr 0.85fr 1.35fr;
  gap: 40px clamp(20px, 2.5vw, 30px);
  align-items: start;
}

/* Column section label */
.footer-col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-col-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brand-gold-border);
  opacity: 0.5;
}

.footer-col-label--gap { margin-top: 24px; }

/* Col 1: Brand */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-logo-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-logo-row .footer-logo {
  margin-bottom: 0;
  flex-shrink: 0;
}

.footer-reg-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
}

.footer-reg-block .footer-reg {
  margin-bottom: 0;
  line-height: 1.4;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer-logo {
  display: block;
  text-decoration: none;
  margin-bottom: 12px;
}

.footer-logo img {
  width: 150px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.footer-brand-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 360px;
}

/* Compliance badges row — SVG sprites */
.footer-badges {
  display: flex;
  gap: 17px;
  flex-wrap: nowrap;
  align-items: center;
}

.compliance-badge {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  /* tint: dim blue-grey circle look */
  opacity: 0.7;
  transition: opacity 0.2s;
}

.compliance-badge:hover { opacity: 1; }

/* Nav columns (2, 3, 4) */
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-nav-list a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-footer-link);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-nav-list a:hover { color: rgba(255,255,255,0.85); }

/* AI badge on The Lab */
.ai-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-gold);
  border: 1px solid var(--brand-gold-border);
  background: var(--brand-gold-dim);
  line-height: 1;
}

/* Col 5: Reach Out */
.footer-reach {
  display: flex;
  flex-direction: column;
}

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

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-icon {
  font-size: 13px;
  color: rgba(41, 121, 255, 0.55);
  margin-top: 1px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.contact-text {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.40);
  transition: color 0.2s;
}

.footer-contact-list li:hover .contact-text { color: rgba(255,255,255,0.7); }

.contact-text a {
  color: inherit;
  text-decoration: none;
}

/* Footer bottom bar */
/* ── Footer social icons ──────────────────────────────── */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.30);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1;
}

.footer-social-icon:hover {
  color: rgba(255, 255, 255, 0.80);
}

.cb-badge {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
  user-select: none;
}

.footer-bottom {
  border-top: 1px solid rgba(41, 121, 255, 0.08);
  background: rgba(3, 5, 10, 0.55);
}

.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--text-faint);
  text-transform: uppercase;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.footer-legal-links li { display: flex; align-items: center; }

.footer-legal-links a {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s;
  padding: 0 14px;
}

.footer-legal-links a:hover { color: var(--brand-blue); }

.footer-legal-links li + li::before {
  content: '·';
  color: rgba(255,255,255,0.10);
}


/* ─────────────────────────────────────────
   TRUSTED CLIENTS — INFINITE MARQUEE
───────────────────────────────────────── */
.section--clients {
  padding: 16px 0 20px;
  overflow: hidden;
}

/* Centred wrapper for section-tag + heading — mirrors .section box model */
.clients-header {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 40px;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 12px 0 20px;
}

.marquee-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
}

.marquee-track::before {
  content: none;
}

.marquee-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding: 16px 0;
  animation: marquee-scroll 90s linear infinite;
}

.marquee-inner:hover {
  animation-play-state: paused;
}

.marquee-logo {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.35);
  transition: filter 0.35s ease;
  flex-shrink: 0;
}

.marquee-logo:hover {
  filter: grayscale(0) opacity(1);
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────
   INDUSTRIES / SECTORS — crosshair registration grid
───────────────────────────────────────── */
.section--industries {
  padding: 20px 40px 48px;
}

/*
  5 cols × 3 rows = 15 cells (14 sectors + 1 teaser)
  Marks live at cell corners via pseudo-elements.
  No borders, no boxes.

  Mark types by position:
    corner TL: ┌   corner TR: ┐   corner BL: └   corner BR: ┘
    top edge interior cols: ┬   bottom edge interior cols: ┴
    left edge interior rows: ├   right edge interior rows: ┤
    interior intersections: +
*/

.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  position: relative;  /* SVG crosshair overlay anchors to this */
}

/* ── Base cell ── */
.industry-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px 24px;
  cursor: default;
}

/* ── Crosshair marks are drawn by crosshair-grid.js as an SVG overlay.
   No ::before / ::after pseudo-elements used for marks on this grid. ── */

/* ── Icon ── */
.industry-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.industry-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  /* SVGs are black-filled: invert(1) flips to white, then dim */
  filter: invert(1) opacity(0.28);
  transition: filter 0.3s ease;
}

/* Fallback if SVG missing */
.industry-icon-fallback {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(41, 121, 255, 0.3);
}

/* ── Meta: num + label below icon ── */
.industry-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.industry-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-blue);
  opacity: 0.4;
  letter-spacing: 1px;
  transition: opacity 0.25s;
}
.industry-cell:hover .industry-num { opacity: 0.9; }
.industry-cell:hover .industry-icon { filter: invert(1) opacity(0.85); }

.industry-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
  transition: color 0.25s;
}
.industry-cell:hover .industry-label { color: var(--text-primary); }

/* ── Teaser cell (slot 15) ── */
.industry-cell--open .industry-open-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(41, 121, 255, 0.25);
  transition: color 0.25s;
}
.industry-cell--open:hover .industry-open-icon { color: var(--brand-blue); }
.industry-num--open  { color: var(--text-faint); opacity: 1; }
.industry-label--open { color: var(--text-faint); font-style: italic; }


/* ─────────────────────────────────────────
   ANIMATION
───────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────
   RESPONSIVE — 1200px (footer compact)
───────────────────────────────────────── */
@media (max-width: 1200px) {
  .footer-main {
    padding: 48px 10px 40px;
    grid-template-columns: 1.8fr 1.05fr 1.05fr 1.05fr 1.0fr;
    gap: 36px clamp(16px, 2vw, 28px);
  }
  .footer-bottom-inner { padding: 16px 10px; }
}

/* ─────────────────────────────────────────
   RESPONSIVE — 768px
───────────────────────────────────────── */
@media (max-width: 768px) {
  nav:not(.back-bar):not(.nav-lang):not(.footer-col) { padding: 0 20px; height: 56px; }
  .nav-lang  { display: none; }
  .hero    { padding: 48px 20px 24px; min-height: 0; }
  .hero--sub { padding: 40px 20px 20px; }
  .hero-nebula,
  .hero-veil { display: none; } /* skip the simulation on small screens entirely */
  .section { padding: 24px 20px 48px; }
  .section--sub { padding: 20px 20px 40px; }
  .section--clients    { padding: 12px 0 16px; }
  .section--industries { padding: 16px 20px 36px; }
  .back-bar { padding: 20px 20px 0; }

  .footer-main {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 40px 8px 36px;
    gap: 32px 20px;
  }
  .footer-brand  { grid-column: 1 / -1; }
  .footer-reach  { grid-column: 1 / -1; }
  .footer-bottom-inner { padding: 14px 8px; }

  /* Collapse bento to 2-col, reset all spans */
  .services-grid { grid-template-columns: 1fr 1fr; }

  .service-card--tall,
  .service-card--wide,
  .service-card--wide-bottom,
  .service-card--last {
    grid-column: auto;
    grid-row: auto;
  }

  .service-card--wide,
  .service-card--wide-bottom {
    flex-direction: column;
    gap: 0;
    padding: 28px 24px;
  }

  .service-card--wide .card-icon,
  .service-card--wide-bottom .card-icon {
    margin-bottom: 14px;
  }

  .process-row { flex-direction: column; }

  .clients-header   { padding: 0 20px; }
  .section-heading  { margin: 8px 0 16px; }
  .industries-grid  { grid-template-columns: repeat(3, 1fr); }

  .marquee-logo { height: 28px; }
  .marquee-inner { gap: 40px; padding: 12px 0; animation-duration: 70s; }
}


/* ─────────────────────────────────────────
   RESPONSIVE — 480px
───────────────────────────────────────── */
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .nav-links     { display: none; }
  .section--clients    { padding: 10px 0 12px; }
  .section--industries { padding: 12px 20px 28px; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .industry-icon, .industry-icon-fallback { width: 36px; height: 36px; }
  .marquee-inner { gap: 32px; padding: 10px 0; animation-duration: 52s; }
  .marquee-logo  { height: 22px; }
  .footer-main   { grid-template-columns: 1fr; padding: 32px 6px 28px; }
  .footer-brand  { grid-column: auto; }
  .footer-reach  { grid-column: auto; }
}


/* ═══════════════════════════════════════════════════════════════
   AI SUBPAGE — "RAG IN MOTION" PIPELINE STRIP
   Scoped to .pipeline-strip — page-specific widget, not part of
   the shared template. See ai/index.html + pipeline-strip.js.
═══════════════════════════════════════════════════════════════ */
.pipeline-strip {
  position: relative;
  border: 1px solid var(--border-card-dim);
  background: var(--card-bg-alt);
  padding: 24px;
}

/* ── Query chips ── */
.pipeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.pipeline-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-badge);
  background: var(--badge-bg);
  border: 1px solid var(--border-badge);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.pipeline-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-card-hover);
}

.pipeline-chip.is-active {
  color: var(--brand-orange);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
}

/* ── Stage rail: small caption row tracking the active stage ── */
.pipeline-rail {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.pipeline-rail span { transition: color 0.25s; }

.pipeline-strip[data-stage="query"]      .pipeline-rail span:nth-child(1),
.pipeline-strip[data-stage="retrieval"]  .pipeline-rail span:nth-child(2),
.pipeline-strip[data-stage="generation"] .pipeline-rail span:nth-child(3),
.pipeline-strip[data-stage="done"]       .pipeline-rail span:nth-child(3) {
  color: var(--brand-blue);
}

/* ── Stage 1: query terminal line ── */
.pipeline-query-row {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-subtle);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 20px;
}

.pipeline-prompt-glyph { color: var(--brand-blue); flex-shrink: 0; }

.pipeline-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--brand-orange);
  margin-left: 2px;
  animation: pipelineBlink 1s steps(1) infinite;
}

@keyframes pipelineBlink { 50% { opacity: 0; } }

/* ── Stage 2: retrieval cluster (chunk grid) ── */
.pipeline-retrieval {
  position: relative;
  margin-bottom: 18px;
  min-height: 124px;
}

/* Spans the whole widget — annotation arrows need to reach from
   the chunk grid down into the output row below, not just within
   the retrieval block. Drawn under all real content (z-index: 0). */
.pipeline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.pipeline-chunks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-left: 28px; /* leave room for the connecting lines' origin point */
}

.pchunk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  border: 1px solid var(--border-card-dim);
  background: rgba(255,255,255,0.015);
  opacity: 0.45;
  transition: opacity 0.3s, border-color 0.3s, color 0.3s, background 0.3s;
}

.pchunk-icon { font-size: 11px; flex-shrink: 0; opacity: 0.7; }

.pchunk-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pchunk.is-checked { opacity: 0.65; }

.pchunk.is-hit {
  opacity: 1;
  color: rgba(0, 255, 204, 0.92);
  border-color: rgba(0, 255, 204, 0.45);
  background: rgba(0, 255, 204, 0.06);
}

.pchunk.is-hit .pchunk-icon { color: rgba(0, 255, 204, 0.92); }

/* ── Stage 3: generation output ── */
.pipeline-output-row {
  position: relative;
  z-index: 1; /* must paint above .pipeline-canvas (absolute, z-index:0) —
                 static/non-positioned boxes paint *under* positioned
                 z-index:0 siblings per CSS2.1 order, so this needs an
                 explicit stacking position of its own */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-cap);
  border-left: 2px solid var(--border-section-line);
  padding: 4px 0 4px 14px;
  min-height: 44px;
}

/* ── Status readout ── */
.pipeline-stats {
  position: relative;
  z-index: 1; /* same reasoning as .pipeline-output-row above */
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

@media (max-width: 768px) {
  .pipeline-strip { padding: 18px; }
  .pipeline-chunks { grid-template-columns: 1fr; padding-left: 18px; }
  .pipeline-rail { flex-wrap: wrap; gap: 10px 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   AGENTS SUBPAGE — "ORCHESTRATION TRACE" AGENT GRAPH
   Scoped to .agent-graph — page-specific widget, not part of the
   shared template. See agents/index.html + agent-graph.js.

   Reuses the .pipeline-chip visual language for task chips (shared
   pattern, not duplicated CSS) — but node/edge styling is new, since
   this widget's content (a branching supervisor/specialist graph) is
   structurally different from the AI page's linear RAG strip.
═══════════════════════════════════════════════════════════════ */
.agent-graph {
  position: relative;
  border: 1px solid var(--border-card-dim);
  background: var(--card-bg-alt);
  padding: 24px;
}

.agraph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* identical to .pipeline-chip — shared chip language across both
   demo widgets so they read as one design system, not two */
.agraph-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-badge);
  background: var(--badge-bg);
  border: 1px solid var(--border-badge);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.agraph-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-card-hover);
}

.agraph-chip.is-active {
  color: var(--brand-orange);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
}

/* ── Graph canvas + node layer ── */
.agraph-stage {
  position: relative;
  min-height: 280px;
  margin-bottom: 16px;
}

.agraph-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.agraph-node {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 104px;
  text-align: center;
}

.agraph-node-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-card-dim);
  background: rgba(0,0,0,0.25);
  color: var(--text-faint);
  font-size: 15px;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
}

.agraph-node--sup .agraph-node-icon {
  width: 46px;
  height: 46px;
  border-color: var(--border-card-hover);
}

.agraph-node-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  transition: color 0.3s;
}

/* node states — driven by JS via is-active / is-escalating / is-done */
.agraph-node.is-active .agraph-node-icon {
  color: rgba(0, 255, 204, 0.95);
  border-color: rgba(0, 255, 204, 0.55);
  background: rgba(0, 255, 204, 0.07);
  box-shadow: 0 0 14px rgba(0, 255, 204, 0.25);
}
.agraph-node.is-active .agraph-node-label { color: rgba(0, 255, 204, 0.9); }

.agraph-node.is-escalating .agraph-node-icon {
  color: var(--brand-orange);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  box-shadow: 0 0 14px rgba(255, 159, 67, 0.22);
}
.agraph-node.is-escalating .agraph-node-label { color: var(--brand-orange); }

.agraph-node.is-done .agraph-node-icon {
  color: var(--text-cap);
  border-color: var(--border-card-hover);
  background: rgba(255,255,255,0.02);
}
.agraph-node.is-done .agraph-node-label { color: var(--text-cap); }

/* ── Current-step caption + status readout ── */
.agraph-step {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-cap);
  min-height: 16px;
  margin-bottom: 6px;
}

.agraph-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

@media (max-width: 768px) {
  .agent-graph { padding: 18px; }
  .agraph-stage { min-height: 240px; }
  .agraph-node { width: 84px; }
  .agraph-node-icon { width: 34px; height: 34px; font-size: 13px; }
  .agraph-node--sup .agraph-node-icon { width: 40px; height: 40px; }
  .agraph-node-label { font-size: 9.5px; }
}


/* ═══════════════════════════════════════════════════════════════
   MARKETING SUBPAGE — "CHANNEL MIX MAP" GROWTH FUNNEL
   Scoped to .growth-map — page-specific widget, not part of the
   shared template. See marketing/index.html + growth-map.js.

   Unlike pipeline-strip / agent-graph, this isn't a flow-to-draw or
   a reveal sequence — switching a business-profile chip just
   re-weights two stacked bars and swaps a short verdict. The four
   segment colours map 1:1 to the badge colours already used on the
   capability cards above (SEO&AEO=crimson, Content=magenta,
   Paid=blue, Brand=periwinkle), so the widget reads as "those four
   things, shown as a journey" rather than a new visual language.
   No canvas, no typewriter — reduced motion just removes the width
   transition; the content is correct and complete either way.
═══════════════════════════════════════════════════════════════ */
.growth-map {
  position: relative;
  border: 1px solid var(--border-card-dim);
  background: var(--card-bg-alt);
  padding: 24px;
}

.growth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.growth-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-badge);
  background: var(--badge-bg);
  border: 1px solid var(--border-badge);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.growth-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-card-hover);
}

.growth-chip.is-active {
  color: var(--brand-orange);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
}

/* ── Funnel layout: three tapering stages + connectors ── */
.growth-funnel {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.growth-stage {
  border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.18);
  padding: 18px 16px;
}

.growth-stage--awareness     { flex: 1.15; }
.growth-stage--consideration { flex: 1; }
.growth-stage--outcome       { flex: 0.95; text-align: center; }

.growth-connector {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 11px;
}

.growth-stage-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.growth-stage--outcome .growth-stage-label { margin-bottom: 10px; }

/* ── Stacked weight bar (awareness / consideration stages) ── */
.growth-bar {
  display: flex;
  height: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
  margin-bottom: 14px;
}

.growth-seg {
  height: 100%;
  transition: width 0.5s ease;
}

.growth-map.no-motion .growth-seg { transition: none; }

.growth-seg--seo     { background: rgba(255, 60, 90, 0.6); }
.growth-seg--content { background: rgba(220, 50, 255, 0.6); }
.growth-seg--paid     { background: rgba(0, 150, 255, 0.6); }
.growth-seg--brand    { background: rgba(91, 158, 255, 0.6); }

.growth-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-cap);
}

.growth-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.growth-legend-pct {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 15px;
}

.growth-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  display: inline-block;
}

.growth-dot--seo     { background: #ff3c5a; }
.growth-dot--content { background: #dc32ff; }
.growth-dot--paid     { background: #0096ff; }
.growth-dot--brand    { background: #5b9eff; }

/* ── Outcome stage: verdict, not a chart ── */
.growth-output {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.3;
}

.growth-output-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-cap);
  margin: 0;
}

/* ── Footnote: bridges the widget to the Audit step below ── */
.growth-footnote {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 20px 0 0;
}

.growth-footnote strong { color: var(--brand-orange); }

@media (max-width: 768px) {
  .growth-map { padding: 18px; }
  .growth-funnel { flex-direction: column; gap: 0; }
  .growth-stage--awareness, .growth-stage--consideration, .growth-stage--outcome { flex: 1; }
  .growth-stage--outcome { text-align: left; }
  .growth-connector { flex: 0 0 30px; transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════════
   CLOUD SUBPAGE — "ARCHITECTURE PREVIEW" SCENARIO CONFIGURATOR
   Scoped to .topology-* — page-specific widget, not part of the
   shared template. See cloud/index.html + topology-graph.js.
═══════════════════════════════════════════════════════════════ */

/* ── Scenario chip row ── */
.topology-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.topology-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-badge);
  background: var(--badge-bg);
  border: 1px solid var(--border-badge);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  text-transform: uppercase;
}

.topology-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-card-hover);
}

.topology-chip.is-active {
  color: var(--brand-orange);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
}

/* ── Canvas container ── */
.topology-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  background: rgba(4, 8, 20, 0.55);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  overflow: hidden;
}

.topology-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* corner-bracket decoration */
.topology-wrap::before,
.topology-wrap::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--brand-blue);
  border-style: solid;
  opacity: 0.30;
  pointer-events: none;
}
.topology-wrap::before { top: 8px;    left: 8px;  border-width: 1px 0 0 1px; }
.topology-wrap::after  { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

/* ── Stack verdict line ── */
.topology-verdict {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 36px;
}

.topology-verdict-label {
  color: var(--brand-blue);
  opacity: 0.7;
  margin-right: 6px;
}

.topology-verdict-note {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .topology-wrap   { height: 260px; }
  .topology-chips  { gap: 6px; }
  .topology-chip   { font-size: 10px; padding: 6px 10px; }
}

@media (max-width: 640px) {
  .topology-wrap    { display: none; }
  .topology-verdict { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CYBERSECURITY SUB-PAGE
   Page-scoped tokens + component styles.
   All selectors are flat; no !important; no hardcoded colours.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page-scoped tokens: danger/red accent for security context ── */
:root {
  --sec-red:          #e84b4a;
  --sec-red-dim:      rgba(232, 75, 74, 0.12);
  --sec-red-border:   rgba(232, 75, 74, 0.30);
  --sec-red-glow:     rgba(232, 75, 74, 0.08);
  --sec-amber:        #ef9f27;
  --sec-amber-dim:    rgba(239, 159, 39, 0.12);
  --sec-green:        #2ec27e;
  --sec-green-dim:    rgba(46, 194, 126, 0.10);
}

/* ── HITL intro layout ── */
.hitl-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 2rem;
}

.hitl-intro--flush {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .hitl-intro { grid-template-columns: 1fr; }
}

/* ── Sidebar variant: narrower column, visually set apart from main text ── */
.hitl-intro--sidebar {
  grid-template-columns: 1.7fr 1fr;
}

@media (max-width: 700px) {
  .hitl-intro--sidebar { grid-template-columns: 1fr; }
}

.hitl-features--sidebar {
  padding-left: 20px;
  border-left: 1px solid var(--sec-red-border);
  gap: 14px;
}

.hitl-features--sidebar .hitl-feat {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.hitl-features--sidebar .hitl-feat i {
  font-size: 0.6rem;
}

@media (max-width: 700px) {
  .hitl-features--sidebar {
    padding-left: 0;
    border-left: none;
    padding-top: 1rem;
    border-top: 1px solid var(--sec-red-border);
  }
}

.hitl-text h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.hitl-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

/* ── Feature lists ── */
.hitl-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hitl-features--pad-sm { padding-top: 0.5rem; }
.hitl-features--pad-lg { padding-top: 1.5rem; }

.hitl-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hitl-feat i {
  color: var(--sec-red);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.7rem;
}

/* ── Service offering blocks ── */
.offering-block {
  margin-bottom: 2.5rem;
}

.offering-block--last {
  margin-bottom: 0;
}

.offering-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 1rem;
}

.offering-num {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--sec-red);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.offering-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.offering-price {
  margin-left: auto;
  white-space: nowrap;
}

.offering-divider {
  border-top: 1px solid var(--sec-red-border);
  margin-bottom: 2.5rem;
}

/* ── Scan type cards ── */
.scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-grid);
}

.scan-card {
  background: var(--card-bg-alt);
  border: 1px solid var(--border-card-dim);
  border-top: 2px solid var(--sec-red-border);
  border-radius: 4px;
  padding: 1.25rem;
  transition: border-color 0.2s, background 0.2s;
}

.scan-card:hover {
  border-color: var(--sec-red);
  background: var(--sec-red-glow);
}

.scan-icon {
  font-size: 1.3rem;
  color: var(--sec-red);
  margin-bottom: 0.75rem;
}

.scan-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.scan-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Coverage badges ── */
.coverage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}

.cov-badge {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--sec-red-dim);
  border: 1px solid var(--sec-red-border);
  color: var(--sec-red);
  text-transform: uppercase;
}

.cov-badge--amber {
  background: var(--sec-amber-dim);
  border-color: rgba(239, 159, 39, 0.30);
  color: var(--sec-amber);
}

.cov-badge--green {
  background: var(--sec-green-dim);
  border-color: rgba(46, 194, 126, 0.25);
  color: var(--sec-green);
}

/* ── Process step: override num colour for red accent ── */
.process-step--cyber .process-num {
  color: var(--sec-red-border);
}

/* ── Widget frame ── */
.widget-frame-wrap {
  position: relative;
  border: 1px solid var(--sec-red-border);
  border-radius: 6px;
  overflow: hidden;
  background: #0d0f14;
}

.widget-frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(232, 75, 74, 0.06);
  border-bottom: 1px solid var(--sec-red-border);
}

.wfb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.wfb-dot--red   { background: #e84b4a; box-shadow: 0 0 5px #e84b4a; }
.wfb-dot--amber { background: #ef9f27; opacity: 0.5; }
.wfb-dot--green { background: #2ec27e; opacity: 0.5; }

.wfb-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-left: 4px;
  text-transform: uppercase;
}

.wfb-live {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--sec-red);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.wfb-live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sec-red);
}

.widget-iframe {
  width: 100%;
  height: 725px;
  border: none;
  display: block;
}

/* ── Demo instance footnote ── */
.demo-note {
  font-size: 0.65rem;
  color: var(--text-faint);
  margin-top: 0.75rem;
  letter-spacing: 0.05em;
}


/* ═══════════════════════════════════════════════════════════════
   CYBERSECURITY SUBPAGE — CAROUSEL PATTERNS
   Applies same drag/snap/infinite-wrap concept as investors carousel
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   OFFERING CAROUSEL (SERVICE_OFFERINGS)
───────────────────────────────────────── */

/* Outer shell: bleeds past section padding, hosts fade masks */
.offering-shell {
  position: relative;
  margin-left:  -40px;
  margin-right: -40px;
  margin-bottom: 8px;
}

/* Faded edges */
.offering-fade {
  position: absolute;
  top: 0; bottom: 36px; /* don't cover dots */
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.offering-fade--left  { left: 0;  background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.offering-fade--right { right: 0; background: linear-gradient(to left,  var(--bg) 0%, transparent 100%); }

/* Scrollable track */
.offering-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 40px 16px;
  cursor: grab;
}
.offering-track::-webkit-scrollbar { display: none; }
.offering-track.is-dragging        { cursor: grabbing; scroll-snap-type: none; }

/* Individual offering card */
.offering-card {
  flex: 0 0 calc(100% - 80px);
  max-width: 860px;
  scroll-snap-align: center;
  border: 1px solid var(--sec-red-border);
  background: var(--card-bg);
  border-top: 2px solid var(--sec-red-border);
  padding: 28px 32px 28px;
  position: relative;
  user-select: none;
  transition: border-color 0.25s, background 0.25s;
}

/* Corner bracket — top-left */
.offering-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 24px; height: 24px;
  border-top: 2px solid var(--sec-red);
  border-left: 2px solid var(--sec-red);
  pointer-events: none;
  z-index: 1;
}

/* Corner bracket — bottom-right */
.offering-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 24px; height: 24px;
  border-bottom: 2px solid var(--sec-red-border);
  border-right: 2px solid var(--sec-red-border);
  pointer-events: none;
  z-index: 1;
}

.offering-card:hover {
  border-color: var(--sec-red);
  background: var(--sec-red-glow);
}

/* Card header row: num + price badge */
.offering-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* offering-num already defined above — reused */
.offering-card .offering-num {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--sec-red);
  letter-spacing: 0.12em;
  flex-shrink: 0;
}

/* Price badge pushed to the right */
.offering-card .offering-price {
  margin-left: auto;
  white-space: nowrap;
}

/* Card title */
.offering-card .offering-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

/* Prose body */
.offering-body {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sec-red-border);
  padding-bottom: 18px;
}

/* Feature list: 2-column grid */
.offering-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.offering-feat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.offering-feat i {
  color: var(--sec-red);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.7rem;
}

/* Dot indicators */
.offering-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 4px;
}

.offering-dot {
  width: 24px;
  height: 5px;
  background: rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, width 0.25s;
}

.offering-dot.active {
  background: var(--sec-red);
  width: 40px;
  box-shadow: 0 0 8px rgba(232, 75, 74, 0.45);
}


/* ─────────────────────────────────────────
   SCAN COVERAGE MARQUEE (SCAN_COVERAGE)
   Slow infinite scroll — content is a flat
   list of capabilities, not sequential steps,
   so a marquee suits it better than a carousel.
───────────────────────────────────────── */

.scan-marquee-shell {
  position: relative;
  margin-left:  -40px;
  margin-right: -40px;
  margin-bottom: 8px;
  overflow: hidden;
}

.scan-marquee-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
}

.scan-marquee-inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  padding: 8px 0 16px;
  animation: scan-marquee-scroll 48s linear infinite;
}

.scan-marquee-inner:hover {
  animation-play-state: paused;
}

@keyframes scan-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card — same look as before, fixed width since it no longer
   needs to fill 33.333% of a snapping viewport */
.scan-slide {
  flex: 0 0 300px;
  width: 300px;
  background: var(--card-bg-alt);
  border: 1px solid var(--border-card-dim);
  border-top: 2px solid var(--sec-red-border);
  padding: 1.25rem;
  transition: border-color 0.2s, background 0.2s;
}

.scan-slide:hover {
  border-color: var(--sec-red);
  background: var(--sec-red-glow);
}


/* ─────────────────────────────────────────
   LIVE DEMO — HITL INTRO LAYOUT
───────────────────────────────────────── */

.hitl-demo-intro {
  margin-bottom: 28px;
}

.hitl-demo-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.hitl-demo-body {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 820px;
  margin-bottom: 20px;
}

/* 3 labeled groups laid out side by side */
.hitl-demo-groups {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  gap: 10px 32px;
}

.hitl-demo-group-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--sec-red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sec-red-border);
}

/* Single-column list within each group */
.hitl-demo-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hitl-demo-feat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hitl-demo-feat i {
  color: var(--sec-red);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.7rem;
}

@media (max-width: 700px) {
  .hitl-demo-groups { grid-template-columns: 1fr; gap: 20px; }
}


/* ─────────────────────────────────────────
   RESPONSIVE — mobile overrides
───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Carousels bleed compressed on mobile */
  .offering-shell  { margin-left: -20px; margin-right: -20px; }
  .offering-track  { padding: 8px 20px 16px; gap: 14px; }
  .offering-fade   { width: 48px; }
  .offering-card   { flex: 0 0 calc(100% - 40px); }
  .offering-feats  { grid-template-columns: 1fr; }

  .scan-marquee-shell { margin-left: -20px; margin-right: -20px; }
  .scan-marquee-inner { gap: 14px; animation-duration: 36s; }
  .scan-slide         { flex: 0 0 240px; width: 240px; }
}