/* =============================================================
   Secure Purple: Design System
   ============================================================= */

:root {
  /* Brand */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;

  /* Neutrals */
  --ink-900: #0B0A12;
  --ink-800: #1A1825;
  --ink-700: #2E2B3B;
  --ink-600: #4A4758;
  --ink-500: #6B6879;
  --ink-400: #9B98A6;
  --ink-300: #D2CFDB;
  --ink-200: #E8E6EF;
  --ink-100: #F4F2F8;
  --ink-50:  #FAF9FC;
  --white:   #FFFFFF;

  /* Surface */
  --bg: #FFFFFF;
  --bg-alt: #FBFAFE;
  --bg-soft: #F7F4FC;
  --border: #ECE8F5;
  --border-strong: #D9D2EC;

  /* Brand gradients */
  --grad-primary: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
  --grad-soft:    linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
  --grad-text:    linear-gradient(135deg, #7C3AED 0%, #A78BFA 60%, #4C1D95 100%);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(20, 15, 40, 0.04);
  --shadow-md:  0 8px 24px -12px rgba(76, 29, 149, 0.14), 0 2px 6px rgba(20, 15, 40, 0.05);
  --shadow-lg:  0 24px 48px -20px rgba(76, 29, 149, 0.25), 0 4px 12px rgba(20, 15, 40, 0.05);
  --shadow-glow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 20px 50px -18px rgba(124, 58, 237, 0.35);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --container: 1200px;
  --container-tight: 1040px;
  --nav-h: 68px;
}

/* =============================================================
   Reset
   ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--violet-700);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover { color: var(--violet-900); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1.15;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection {
  background: var(--violet-200);
  color: var(--violet-950);
}

/* =============================================================
   Utilities
   ============================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.muted { color: var(--ink-500); font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-700);
  padding: 6px 12px;
  background: var(--violet-50);
  border: 1px solid var(--violet-100);
  border-radius: var(--r-pill);
  margin-bottom: 20px;
}

.eyebrow--light {
  color: var(--violet-100);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.section {
  padding: clamp(72px, 10vw, 120px) 0;
}

.partners + .section {
  padding-top: clamp(56px, 7vw, 88px);
}

/* Compact all sections that follow the homepage metrics strip */
.metrics ~ .section,
.metrics ~ .testimonial,
.metrics ~ .cta,
.metrics ~ .final-cta {
  padding: clamp(48px, 6vw, 76px) 0;
}
.metrics ~ .section .section__head,
.metrics ~ .section .service-block__head,
.metrics ~ .section .why__copy {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.metrics ~ .section .section__head {
  margin-top: 0;
}

.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__head {
  max-width: 740px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

.section__head--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.section__head--flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: none;
  margin-bottom: 48px;
  text-align: left;
}

.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  max-width: none;
}
.section__head--row > div { max-width: 640px; }

.section__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--purple-700, #6D28D9);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 999px;
  background: var(--violet-50);
  transition: gap .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.section__back span { transition: transform .25s ease; display: inline-block; }
.section__back:hover {
  gap: 12px;
  background: #fff;
  border-color: var(--purple-500, #8B5CF6);
  transform: translateY(-1px);
}
.section__back:hover span { transform: translateX(2px); }

.section__title {
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}

.section__lede {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-500);
  max-width: 640px;
  margin: 0 auto;
}

.section__head--left .section__lede,
.section__head--flex .section__lede {
  margin: 0;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--violet-700);
  font-size: 15px;
}
.link-arrow:hover { gap: 10px; }

/* =============================================================
   Buttons
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, box-shadow .25s ease, color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--lg { padding: 14px 24px; font-size: 15.5px; }

.btn--primary {
  background: var(--grad-primary);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -10px rgba(124,58,237,.55);
}
.btn--primary:hover {
  transform: translateY(-1px);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 36px -14px rgba(124,58,237,.65);
}

.btn--ghost {
  background: var(--white);
  color: var(--ink-800);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  color: var(--violet-800);
  border-color: var(--violet-400);
  background: var(--violet-50);
}

.btn--white {
  background: var(--white);
  color: var(--violet-900);
}
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); color: var(--violet-950); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.08); color: #fff; }

.btn--block { width: 100%; }

/* =============================================================
   Announcement bar
   ============================================================= */

.announce {
  background: var(--violet-950);
  color: var(--violet-100);
  font-size: 13.5px;
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  flex-wrap: wrap;
  text-align: center;
}

.announce__pill {
  background: var(--violet-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

.announce__text { color: var(--violet-200); }

.announce__link {
  color: #fff;
  font-weight: 600;
}
.announce__link:hover { color: var(--violet-200); }

/* =============================================================
   Navigation
   ============================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(255,255,255,0.88);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--ink-900);
  font-weight: 700;
  flex-shrink: 0;
}
.nav__brand:hover { color: var(--violet-800); }

.nav__logo { display: none; }

.nav__wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.nav__wordmark span { color: var(--violet-700); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav__link,
.nav__links a {
  color: var(--ink-700);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: color .2s ease, background .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.nav__link:hover,
.nav__links a:hover {
  color: var(--violet-800);
  background: var(--violet-50);
}

/* Dropdown caret */
.nav__caret {
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease;
  opacity: 0.7;
}

/* Dropdown wrapper + panel */
.nav__item {
  position: relative;
  display: inline-flex;
}
.nav__item--has-dropdown > .nav__link { padding-right: 12px; }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 50px -20px rgba(76, 29, 149, 0.28),
    0 8px 20px -12px rgba(11, 10, 18, 0.15);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav__item--has-dropdown:hover > .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--has-dropdown > .nav__link[aria-expanded="true"] + .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item--has-dropdown:hover > .nav__link .nav__caret,
.nav__item--has-dropdown:focus-within > .nav__link .nav__caret,
.nav__item--has-dropdown > .nav__link[aria-expanded="true"] .nav__caret {
  transform: translateY(1px) rotate(225deg);
  opacity: 1;
}

.nav__dropdown a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-800);
  text-decoration: none;
  background: transparent;
}
.nav__dropdown a strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.nav__dropdown a span {
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 500;
  line-height: 1.4;
}
.nav__dropdown a:hover {
  background: var(--violet-50);
}
.nav__dropdown a:hover strong { color: var(--violet-800); }

/* Invisible bridge so the dropdown doesn't close when the cursor crosses the gap */
.nav__item--has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.nav__cta {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-sm);
}
.nav__toggle span {
  width: 22px; height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.nav__mobile a {
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: var(--ink-800);
  font-weight: 500;
}
.nav__mobile a:hover { background: var(--violet-50); color: var(--violet-800); }
.nav__mobile .btn { margin-top: 12px; }

.nav__mobile-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: transparent;
  border: 0;
  color: var(--ink-800);
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.nav__mobile-group:hover { background: var(--violet-50); color: var(--violet-800); }
.nav__mobile-group .nav__caret { margin-left: auto; }
.nav__mobile-group[aria-expanded="true"] .nav__caret { transform: translateY(1px) rotate(225deg); }

.nav__mobile-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 8px 10px;
  margin-left: 6px;
  border-left: 1px solid var(--border);
}
/* Respect the [hidden] attribute so the JS toggle actually collapses the submenu.
   Default UA `[hidden] { display: none }` loses to the class rule above; this
   override wins back. */
.nav__mobile-sub[hidden] { display: none !important; }
.nav__mobile-sub a { font-size: 14px; padding: 10px 14px; }

/* =============================================================
   Hero
   ============================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 120px) 0 clamp(28px, 3.5vw, 48px);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(800px 400px at 85% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109,40,217,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center top, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 40%, transparent 75%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.hero__copy { text-align: left; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.hero__badge .dot {
  width: 8px; height: 8px;
  background: var(--violet-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.18);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139,92,246,0.18); }
  50% { box-shadow: 0 0 0 8px rgba(139,92,246,0.05); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero__sub {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--ink-500);
  max-width: 560px;
  margin: 0 0 32px;
  line-height: 1.6;
}

.hero__cta {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero__trust {
  list-style: none;
  padding: 0;
  margin: 0 0 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-600);
  font-weight: 500;
}
.hero__trust svg { color: var(--purple-600); flex-shrink: 0; }

/* =============================================================
   Hero visual: operations console mockup
   ============================================================= */

.hero__visual {
  position: relative;
  min-height: 460px;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: -60px -40px -40px 10%;
  background:
    radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

.console {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 20px 40px -20px rgba(76, 29, 149, 0.18),
    0 8px 20px -8px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255,255,255,0.9) inset;
  overflow: hidden;
  transform: perspective(1600px) rotateY(-2deg) rotateX(1deg);
}
.console__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FBFAFE, #F5F3FF);
}
.console__dots { display: inline-flex; gap: 6px; }
.console__dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E4E4E7;
}
.console__dots i:nth-child(1) { background: #F87171; }
.console__dots i:nth-child(2) { background: #FBBF24; }
.console__dots i:nth-child(3) { background: #34D399; }
.console__title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.console__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--purple-700);
  background: var(--purple-50);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.18);
}
.console__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-600);
  box-shadow: 0 0 0 0 rgba(124,58,237,0.6);
  animation: consolePulse 1.8s ease-out infinite;
}
@keyframes consolePulse {
  0% { box-shadow: 0 0 0 0 rgba(124,58,237,0.55); }
  80%, 100% { box-shadow: 0 0 0 6px rgba(124,58,237,0); }
}

.console__body { padding: 8px 16px; }
.console__row {
  display: grid;
  grid-template-columns: auto 1fr 120px auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
}
.console__row:last-child { border-bottom: 0; }

.console__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.console__tag--offensive { background: #FEE2E2; color: #B91C1C; }
.console__tag--defensive { background: #DBEAFE; color: #1D4ED8; }
.console__tag--grc { background: #DCFCE7; color: #15803D; }

.console__meta strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.console__meta span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-500);
  font-family: var(--font-mono);
}

.console__bar {
  height: 8px;
  background: #E4DCFB;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(109, 40, 217, 0.08);
}
.console__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7C3AED, #5B21B6);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.35);
}

.console__pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  text-align: right;
}
.console__pct--done {
  color: #15803D;
  background: #ECFDF5;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.console__foot {
  display: flex;
  gap: 18px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #FAFAFB;
}
.console__foot-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-500);
  font-weight: 500;
}
.console__foot-item svg { color: var(--purple-600); }

/* Floating chips */
.chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow:
    0 12px 28px -10px rgba(15, 23, 42, 0.18),
    0 4px 10px -4px rgba(76, 29, 149, 0.12);
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.chip--threat {
  top: -28px;
  left: -36px;
  max-width: 260px;
}
.chip__icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #FEF2F2;
  color: #DC2626;
}
.chip__body strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: 2px;
}
.chip__body span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-500);
}

.chip--stat {
  bottom: -24px;
  right: -24px;
  animation-delay: 1.5s;
}
.chip__kpi { display: flex; flex-direction: column; }
.chip__num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chip__label {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 4px;
  line-height: 1.3;
}
.chip__spark { flex-shrink: 0; }

.hero__proof {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 16px;
  margin-top: 48px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.hero__proof-item {
  position: relative;
  padding: 4px 20px;
  text-align: left;
}
.hero__proof-item + .hero__proof-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--border);
}
.hero__proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--purple-50);
  color: var(--purple-700);
  margin-bottom: 14px;
}
.hero__proof-item strong {
  display: block;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.hero__proof-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500);
  font-weight: 500;
}

/* =============================================================
   Partner logos
   ============================================================= */

.partners {
  padding: 28px 0 40px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FBFAFE 0%, #FFFFFF 100%);
}
.partners__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 180px;
  opacity: 0.95;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.marquee__item:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
}
.marquee__item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* =============================================================
   Services / Pillars  (flagship services showcase)
   ============================================================= */

/* Section-level showcase backdrop: soft violet radial glows that signal
   "this is the main product section" without competing with the cards. */
#services {
  position: relative;
  overflow: hidden;
}
#services::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(124, 58, 237, 0.08) 0%, transparent 62%),
    radial-gradient(55% 45% at 90% 100%, rgba(167, 139, 250, 0.07) 0%, transparent 65%),
    radial-gradient(50% 40% at 8% 85%, rgba(109, 40, 217, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#services > .container { position: relative; z-index: 1; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  counter-reset: pillarCount;
}

.pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 38px 34px 30px;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  counter-increment: pillarCount;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s ease,
    border-color .32s ease;
}

/* Gradient top accent bar; brightens on hover for a lively lift. */
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--violet-700) 0%,
    var(--violet-500) 45%,
    var(--violet-300) 100%);
  opacity: 0.55;
  transition: opacity .3s ease, height .3s ease;
}

/* Pillar index badge ("01", "02"...): CSS counter, no HTML change needed. */
.pillar::after {
  content: "0" counter(pillarCount);
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-700);
  background: #F5F3FF;
  border: 1px solid rgba(124, 58, 237, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow:
    0 24px 48px -20px rgba(76, 29, 149, 0.28),
    0 6px 18px -6px rgba(76, 29, 149, 0.10);
}
.pillar:hover::before {
  opacity: 1;
  height: 4px;
}

.pillar__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 26px;
  padding-bottom: 22px;
  padding-right: 64px;           /* reserve room for the index badge */
  border-bottom: 1px dashed var(--border-strong);
}
.pillar__head h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.pillar__head p {
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.5;
}

.pillar__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.pillar__icon svg {
  width: 26px;
  height: 26px;
}
.pillar:hover .pillar__icon {
  transform: scale(1.06) rotate(-3deg);
}

.pillar__icon--offensive {
  background: linear-gradient(135deg, #F5F3FF 0%, #E9E3FE 100%);
  color: var(--violet-700);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.20);
}
.pillar__icon--defensive {
  background: linear-gradient(135deg, #EDE9FE 0%, #D9CFFB 100%);
  color: var(--violet-800);
  box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.22);
}
.pillar__icon--grc {
  background: linear-gradient(135deg, #E9E3FB 0%, #C9B8F4 100%);
  color: var(--violet-900);
  box-shadow: inset 0 0 0 1px rgba(91, 33, 182, 0.24);
}
.pillar__icon--training {
  background: linear-gradient(135deg, #F3EFFE 0%, #DFD1FB 100%);
  color: var(--violet-600);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.20);
}

.pillar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;                       /* push CTA to the bottom, align across cards */
}
.pillar__list li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.55;
}
.pillar__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.pillar__list li:last-child { border-bottom: none; }
.pillar__list strong {
  color: var(--ink-900);
  font-weight: 600;
}

/* CTA reads as a button-chip, flips to solid violet on card hover. */
.pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 24px;
  padding: 10px 18px;
  background: #F5F3FF;
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--violet-700);
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    gap .22s ease,
    transform .22s ease;
}
.pillar:hover .pillar__cta {
  gap: 12px;
  background: var(--violet-700);
  color: #fff;
  border-color: var(--violet-700);
}

/* =============================================================
   Service blocks (detailed service sections)
   ============================================================= */

.service-block__head {
  max-width: 820px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
.service-block__head .section__title {
  font-size: clamp(28px, 3.6vw, 40px);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-grid--3 { grid-template-columns: repeat(3, 1fr); }

.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet-200);
  box-shadow: var(--shadow-md);
}
.service-card h3 {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.service-card p {
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.55;
}
.service-card__list {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
  display: grid;
  gap: 8px;
}
.service-card__list li {
  font-size: 13.5px;
  color: var(--ink-700);
  padding-left: 18px;
  position: relative;
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-500);
}

.service-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 48px auto 0;
  padding: 14px 28px;
  background: var(--white);
  border: 1px solid var(--violet-200);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--violet-800);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.service-block__cta { display: flex; width: fit-content; justify-content: center; }
.service-block__cta:hover {
  transform: translateY(-1px);
  background: var(--violet-700);
  border-color: var(--violet-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.service-block .container { display: block; }
.service-block .service-block__cta { margin-left: auto; margin-right: auto; }

/* industry icon: svg variant */
.industry__ic svg { color: var(--violet-700); }

/* =============================================================
   Service detail pages (breadcrumb, hero, meta sidebar, related)
   ============================================================= */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-500);
  margin-bottom: 32px;
}
.breadcrumb a {
  color: var(--ink-600);
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--violet-700); }
.breadcrumb span[aria-current="page"] {
  color: var(--ink-900);
  font-weight: 600;
}
.breadcrumb > span[aria-hidden="true"],
.breadcrumb > span:not([aria-current]) {
  color: var(--ink-300);
}

.svc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 72px) 0 clamp(56px, 7vw, 88px);
  background:
    radial-gradient(1000px 400px at 50% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(600px 300px at 85% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 100%);
}
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109,40,217,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center top, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 40%, transparent 75%);
  pointer-events: none;
}

.svc-hero .container { position: relative; }

.svc-hero__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

.svc-hero__copy { max-width: 640px; }

.svc-hero__title {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 18px 0 18px;
  color: var(--ink-900);
}

.svc-hero__sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink-500);
  margin-bottom: 28px;
}

.svc-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.svc-hero__nudge {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 3px solid #059669;
  background: rgba(5, 150, 105, 0.06);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #374151;
  max-width: 640px;
}
.svc-hero__nudge a { color: #047857; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.svc-hero__nudge a:hover { color: #065F46; }

.svc-hero__meta {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-meta__item {
  padding: 14px 0;
  border-top: 1px dashed var(--border-strong);
}
.svc-meta__item:first-child { border-top: none; padding-top: 0; }
.svc-meta__item:last-child { padding-bottom: 0; }
.svc-meta__item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-700);
  margin-bottom: 6px;
}
.svc-meta__item span {
  display: block;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.5;
}

/* Related services cards */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related__card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.related__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--violet-300);
  color: inherit;
}
.related__card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.related__card h3 span { color: var(--violet-700); transition: transform .2s ease; }
.related__card:hover h3 span { transform: translateX(4px); }
.related__card p {
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Service page responsive */
@media (max-width: 1024px) {
  .svc-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .related { grid-template-columns: 1fr; }
}

/* =============================================================
   Contact-us Cactus nudge
   ============================================================= */
.contact-cactus-nudge {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #E8E5F5;
}
.contact-cactus-nudge__tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #86EFAC;
  background: rgba(74, 222, 128, 0.12);
  padding: 5px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.contact-cactus-nudge strong {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}
.contact-cactus-nudge p { margin: 0; font-size: 14px; color: #CBC5DE; line-height: 1.5; }
.contact-cactus-nudge .btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .contact-cactus-nudge { flex-direction: column; align-items: stretch; padding: 20px; }
  .contact-cactus-nudge .btn { width: 100%; justify-content: center; }
}

/* =============================================================
   Cactus promo (homepage)
   ============================================================= */
.cactus-promo { padding: 40px 0 20px; }
.cactus-promo__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 60%, #E0F2E9 100%);
  border: 1px solid rgba(109, 40, 217, 0.15);
  overflow: hidden;
}
.cactus-promo__card::before {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 260px; height: 260px;
  background: radial-gradient(closest-side, rgba(74, 222, 128, 0.22), transparent 70%);
  pointer-events: none;
}
.cactus-promo__copy { max-width: 620px; position: relative; z-index: 1; }
.cactus-promo__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #047857;
  background: rgba(74, 222, 128, 0.18);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.cactus-promo__card h3 {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #0B0A12;
}
.cactus-promo__card p {
  margin: 0;
  color: #4B4B5E;
  font-size: 15px;
  line-height: 1.55;
}
.cactus-promo__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.cactus-promo__link {
  font-size: 13px;
  color: #6D28D9;
  text-decoration: none;
  font-weight: 600;
}
.cactus-promo__link:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .cactus-promo__card {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 22px;
    gap: 20px;
  }
  .cactus-promo__actions { align-items: stretch; }
  .cactus-promo__actions .btn { width: 100%; justify-content: center; }
  .cactus-promo__link { text-align: center; }
}

/* =============================================================
   Metrics
   ============================================================= */

.metrics {
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--grad-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.metrics__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.metrics__num {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 12px;
  color: #fff;
}
.metrics__label {
  color: rgba(255,255,255,0.78);
  font-size: 14.5px;
  line-height: 1.45;
  max-width: 240px;
}

/* =============================================================
   Selection funnel (used by project pages for "By The Numbers")
   Renders a pipeline: Applications → Accepted → Teams → Winners.
   Each stage gets progressively darker purple; arrow connectors
   visualise the narrowing.
   ============================================================= */

.funnel {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  position: relative;
}
.funnel__stage {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px -16px rgba(76, 29, 149, 0.22);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}
.funnel__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0) 0%, rgba(139, 92, 246, 0.04) 100%);
  pointer-events: none;
  z-index: -1;
}
.funnel__stage:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(76, 29, 149, 0.35);
}

/* Progressive intensity: each stage slightly more saturated */
.funnel__stage:nth-child(1) .funnel__bar { background: linear-gradient(90deg, #C4B5FD, #A78BFA); }
.funnel__stage:nth-child(3) .funnel__bar { background: linear-gradient(90deg, #A78BFA, #8B5CF6); }
.funnel__stage:nth-child(5) .funnel__bar { background: linear-gradient(90deg, #8B5CF6, #7C3AED); }
.funnel__stage:nth-child(7) .funnel__bar { background: linear-gradient(90deg, #7C3AED, #4C1D95); }

.funnel__stage:nth-child(7) {
  background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 40px -16px rgba(76, 29, 149, 0.55);
}
.funnel__stage:nth-child(7) .funnel__head,
.funnel__stage:nth-child(7) .funnel__num,
.funnel__stage:nth-child(7) .funnel__label,
.funnel__stage:nth-child(7) .funnel__meta { color: #fff; }
.funnel__stage:nth-child(7) .funnel__head { color: rgba(255,255,255,0.72); }
.funnel__stage:nth-child(7) .funnel__label { color: rgba(255,255,255,0.85); }
.funnel__stage:nth-child(7) .funnel__meta {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88);
}
.funnel__stage:nth-child(7) .funnel__bar { background: linear-gradient(90deg, #F59E0B, #FBBF24); }

.funnel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-700);
}
.funnel__head .step {
  background: var(--violet-50);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--violet-700);
}
.funnel__num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink-900);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.funnel__num small {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--violet-700);
}
.funnel__stage:nth-child(7) .funnel__num small { color: #FBBF24; }
.funnel__label {
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.funnel__bar {
  height: 4px;
  border-radius: 2px;
  margin-top: auto;
}
.funnel__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  background: #F8F7FB;
  border: 1px solid var(--border);
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
}

/* Arrow connectors between stages (on desktop only) */
.funnel__arrow {
  align-self: center;
  justify-self: center;
  color: var(--violet-400);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.funnel__arrow svg { width: 100%; height: 100%; }

@media (max-width: 960px) {
  .funnel { grid-template-columns: 1fr; gap: 10px; }
  .funnel__arrow { transform: rotate(90deg); justify-self: start; margin-left: 24px; }
}

/* =============================================================
   Why us
   ============================================================= */

.why__wrap {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: start;
}

.why__list { margin-top: 32px; }
.why__list li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.why__list li:first-child { border-top: none; padding-top: 0; }
.why__mark {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-600);
  background: var(--violet-50);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  height: fit-content;
}
.why__list h3 { font-size: 18px; margin-bottom: 6px; }
.why__list p { color: var(--ink-500); font-size: 15px; line-height: 1.55; }

.why__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.why__card-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.why__card-title { font-weight: 700; color: var(--ink-900); font-size: 16px; margin-bottom: 4px; }
.why__card-sub { color: var(--ink-500); font-size: 13.5px; }

.cert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cert-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cert-list li:hover {
  border-color: rgba(139, 92, 246, 0.45);
  background: linear-gradient(180deg, #fff 0%, var(--violet-50) 180%);
  transform: translateX(3px);
  box-shadow: 0 6px 18px -10px rgba(109, 40, 217, 0.35);
}
.cert-list span {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "ss02" on, "calt" on;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--violet-700, #6D28D9) 0%, var(--violet-500, #8B5CF6) 100%);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(109, 40, 217, 0.35);
  box-shadow: 0 2px 6px -2px rgba(109, 40, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-width: 92px;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Circular logo badge that replaces the purple text pill when an actual cert
   image is available. Size stays in the same column width as the old pill so
   the row rhythm doesn't shift. */
.cert-list span.cert-list__badge {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding: 6px;
  margin: 0 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(139, 92, 246, 0.28);
  box-shadow: 0 2px 8px -3px rgba(109, 40, 217, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.cert-list span.cert-list__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cert-list li:hover span.cert-list__badge {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.4);
}
.cert-list__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
  gap: 4px;
}
.cert-list em {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.cert-list b {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 11px;
  color: var(--violet-700, #6D28D9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cert-list b::before { content: none; }

/* =============================================================
   Process
   ============================================================= */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
  position: relative;
}

.process__step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  position: relative;
  transition: border-color .25s ease, transform .25s ease;
}
.process__step:hover {
  transform: translateY(-3px);
  border-color: var(--violet-300);
}

.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--violet-700);
  background: var(--violet-50);
  border: 1px solid var(--violet-100);
  border-radius: 12px;
  margin-bottom: 18px;
}
.process__step h3 { font-size: 18px; margin-bottom: 8px; }
.process__step p { color: var(--ink-500); font-size: 14.5px; }

/* =============================================================
   Industries
   ============================================================= */

.industries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.industry {
  background: #fff;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.industry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--violet-200);
}
.industry__ic {
  font-size: 28px;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--violet-50);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.industry h3 { font-size: 18px; margin-bottom: 8px; }
.industry p { color: var(--ink-500); font-size: 14.5px; }

/* =============================================================
   Community
   ============================================================= */

.community {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.community__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.community__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(139, 92, 246, 0.28);
}
.community__card:hover .community__img { transform: scale(1.04); }

.community__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--violet-100);
}
.community__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.community__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(46, 16, 101, 0) 40%, rgba(46, 16, 101, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.community__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.18) 0%, rgba(167, 139, 250, 0) 55%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.community__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.community__body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.community__body h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--ink-900);
}
.community__body p {
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.community__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}
.community__meta li {
  font-size: 12px;
  font-weight: 500;
  color: var(--purple-700);
  background: var(--purple-50);
  padding: 4px 10px;
  border-radius: 999px;
}
.community__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--purple-700);
  letter-spacing: -0.005em;
  transition: gap .25s ease, color .25s ease;
}
.community__more span { transition: transform .25s ease; display: inline-block; }
.community__card:hover .community__more { color: var(--purple-900, #4C1D95); gap: 10px; }
.community__card:hover .community__more span { transform: translateX(2px); }
.community__card:focus-visible {
  outline: 2px solid var(--purple-600, #7C3AED);
  outline-offset: 3px;
}

/* =============================================================
   Project page: hero photo strip
   ============================================================= */

.hero-photo {
  position: relative;
  margin-top: -32px;
  padding: 0 0 clamp(56px, 7vw, 88px);
}
.hero-photo__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 21/9;
  box-shadow: 0 24px 60px -20px rgba(76, 29, 149, 0.35), 0 12px 24px -12px rgba(17, 10, 40, 0.18);
  border: 1px solid var(--border);
  isolation: isolate;
}
.hero-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.hero-photo__frame:hover .hero-photo__img { transform: scale(1.02); }
.hero-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(17, 10, 40, 0.55) 100%),
    linear-gradient(115deg, rgba(109, 40, 217, 0.18) 0%, transparent 45%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero-photo__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 2;
}
.hero-photo__caption .pill {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

@media (max-width: 768px) {
  .hero-photo { margin-top: -16px; }
  .hero-photo__frame { aspect-ratio: 4/3; }
  .hero-photo__caption { font-size: 11.5px; left: 14px; right: 14px; bottom: 12px; }
}

/* =============================================================
   Project page: photo gallery (masonry)
   Uses CSS multi-column to preserve each image's natural aspect
   ratio, no cropping, so subjects sit exactly where they were
   framed in the original photo.
   ============================================================= */

.gallery {
  column-count: 3;
  column-gap: 16px;
}
.gallery__item {
  position: relative;
  display: block;
  margin: 0 0 16px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--violet-50);
  border: 1px solid var(--border);
  isolation: isolate;
  box-shadow: 0 6px 20px -12px rgba(76, 29, 149, 0.25);
  transition: box-shadow .3s ease, transform .3s ease;
}
.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s ease, filter .4s ease;
  filter: saturate(0.95);
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, transparent 55%, rgba(76, 29, 149, 0.18));
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity .3s ease;
}
.gallery__item:hover {
  box-shadow: 0 16px 40px -16px rgba(76, 29, 149, 0.35);
  transform: translateY(-2px);
}
.gallery__item:hover img { transform: scale(1.03); filter: saturate(1.08); }
.gallery__item:hover::after { opacity: 0.15; }

@media (max-width: 960px) {
  .gallery { column-count: 2; column-gap: 14px; }
  .gallery__item { margin-bottom: 14px; }
}
@media (max-width: 560px) {
  .gallery { column-count: 1; }
  .gallery__item { margin-bottom: 12px; }
}

/* =============================================================
   Project page: film-strip scroll gallery
   A creative horizontal album: each frame sits in a perforated
   strip with a shot-id stamp + handwritten-style sequence label,
   rotated at a slight angle so the strip feels physically laid
   out rather than gridded.
   ============================================================= */

.scroll-row {
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(700px 340px at 15% 20%, rgba(139,92,246,0.10), transparent 60%),
    radial-gradient(600px 300px at 85% 80%, rgba(167,139,250,0.08), transparent 60%),
    #0E0A1A;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.scroll-row::before,
.scroll-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background-image:
    radial-gradient(circle at 12px 50%, #0E0A1A 6px, transparent 7px);
  background-size: 28px 24px;
  background-repeat: repeat-x;
  background-color: #1a1130;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}
.scroll-row::before { top: 0; }
.scroll-row::after { bottom: 0; }

.scroll-row__head {
  max-width: 760px;
  margin: 0 0 40px;
  position: relative;
  z-index: 3;
}
.scroll-row__head .eyebrow {
  margin-bottom: 12px;
  display: inline-block;
  color: var(--violet-300);
  background: rgba(139, 92, 246, 0.14);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.scroll-row__head h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  color: #fff;
}
.scroll-row__head p {
  color: rgba(255,255,255,0.68);
  font-size: 16px;
  line-height: 1.65;
  max-width: 620px;
}
.scroll-row__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--violet-300);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 14px;
  padding: 8px 14px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px dashed rgba(139, 92, 246, 0.35);
  border-radius: 999px;
}
.scroll-row__hint svg { width: 16px; height: 16px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.scroll-track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 24px 0 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.45) transparent;
  z-index: 1;
}
.scroll-track::-webkit-scrollbar { height: 6px; }
.scroll-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.scroll-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--violet-400), var(--violet-600));
  border-radius: 4px;
}
.scroll-track__inner {
  display: flex;
  gap: 24px;
  padding: 0 48px 0 0;
  align-items: center;
}

.scroll-card {
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 360px);
  position: relative;
  scroll-snap-align: start;
  padding: 10px 10px 44px;
  background: #fafafa;
  border-radius: 6px;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.05),
    0 24px 40px -20px rgba(0,0,0,0.5),
    0 12px 20px -12px rgba(76, 29, 149, 0.5);
  transform: rotate(-1.2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.scroll-card:nth-child(even) { transform: rotate(1.4deg) translateY(-8px); }
.scroll-card:nth-child(3n) { transform: rotate(-2deg) translateY(4px); }
.scroll-card:nth-child(5n) { transform: rotate(0.8deg) translateY(-4px); }
.scroll-card:hover {
  transform: rotate(0) translateY(-8px) scale(1.03);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.05),
    0 32px 50px -20px rgba(0,0,0,0.6),
    0 16px 30px -10px rgba(76, 29, 149, 0.65);
  z-index: 4;
}
.scroll-card__media {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 3px;
  background: #1a1130;
}
.scroll-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
  transition: transform .8s ease, filter .5s ease;
  filter: saturate(0.9) contrast(1.02);
}
.scroll-card:hover .scroll-card__media img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1);
}
.scroll-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(109,40,217,0.08), transparent 55%);
  pointer-events: none;
}
.scroll-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(17, 10, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
}
.scroll-card__label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #111;
  text-transform: uppercase;
}
.scroll-card__label em {
  font-style: normal;
  font-weight: 700;
  color: var(--violet-800);
}
.scroll-card__label span { color: rgba(17, 17, 17, 0.55); }

@media (max-width: 640px) {
  .scroll-card { width: 78vw; transform: rotate(0) !important; }
  .scroll-card:nth-child(even) { transform: rotate(0) !important; }
}

/* =============================================================
   Page-level compact spacing (applied via body class)
   ============================================================= */

.page--tight .section { padding: clamp(48px, 6vw, 72px) 0; }
.page--tight .section__head,
.page--tight .service-block__head { margin: 0 auto clamp(28px, 3.5vw, 44px); }
.page--tight .hero-photo { margin-top: -24px; padding: 0 0 clamp(32px, 4vw, 52px); }
.page--tight .final-cta { padding: clamp(56px, 7vw, 88px) 0; }
.page--tight .impact-banner { padding: clamp(44px, 5.5vw, 68px) 0; }
.page--tight .scroll-row { padding: clamp(48px, 6vw, 72px) 0 clamp(52px, 6.5vw, 80px); }
.page--tight .svc-hero { padding-bottom: clamp(40px, 5vw, 64px); }

/* =============================================================
   Project page: pull-quote
   ============================================================= */

.pull-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px);
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(139, 92, 246, 0.10), transparent 65%),
    #fff;
  border: 1px solid var(--violet-200);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 48px -24px rgba(76, 29, 149, 0.25);
  position: relative;
}
.pull-quote::before {
  content: "“";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-primary);
  color: #fff;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1;
  padding-top: 14px;
  box-shadow: 0 10px 24px -10px rgba(109, 40, 217, 0.5);
}
.pull-quote p {
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.pull-quote cite {
  font-style: normal;
  font-size: 13.5px;
  color: var(--violet-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* =============================================================
   Project page: impact / highlight banner
   ============================================================= */

.impact-banner {
  background: var(--grad-primary);
  color: #fff;
  padding: clamp(56px, 7vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.impact-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(255,255,255,0.15), transparent 55%),
    radial-gradient(600px 280px at 85% 100%, rgba(255,255,255,0.1), transparent 60%);
  pointer-events: none;
}
.impact-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.impact-banner__copy .eyebrow {
  color: rgba(255,255,255,0.7);
  display: inline-block;
  margin-bottom: 14px;
}
.impact-banner h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.impact-banner p {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}
.impact-banner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.impact-banner__list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 18px;
  border-radius: var(--r-md);
}
.impact-banner__list .num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  text-align: center;
}
.impact-banner__list .txt {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
@media (max-width: 900px) {
  .impact-banner__inner { grid-template-columns: 1fr; }
}

/* =============================================================
   Project page: content layout helper (two-col with aside)
   ============================================================= */

.content-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.content-split__prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  margin-bottom: 18px;
}
.content-split__prose p:last-child { margin-bottom: 0; }
.content-split__aside {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 100px;
}
.content-split__aside h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-700);
  margin-bottom: 14px;
}
.content-split__aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.content-split__aside li {
  font-size: 14.5px;
  color: var(--ink-700);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.content-split__aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--grad-primary);
  opacity: 0.75;
}
@media (max-width: 900px) {
  .content-split { grid-template-columns: 1fr; }
  .content-split__aside { position: static; }
}

/* =============================================================
   Testimonial
   ============================================================= */

.testimonial {
  padding: clamp(72px, 9vw, 104px) 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(139,92,246,0.08), transparent 60%),
    var(--bg-soft);
  text-align: center;
}
.testimonial figure { max-width: 820px; margin: 0 auto; }
.testimonial__quote { color: var(--violet-300); margin: 0 auto 24px; }
.testimonial blockquote {
  margin: 0 0 24px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.testimonial figcaption strong {
  display: block;
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: 2px;
}
.testimonial figcaption span { color: var(--ink-500); font-size: 14px; }

/* =============================================================
   Insights / Blog
   ============================================================= */

.posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.post {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--violet-200);
  color: inherit;
}
.post__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--violet-800);
  background: var(--violet-50);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.post h3 {
  font-size: 20px;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.post p { color: var(--ink-500); font-size: 14.5px; margin-bottom: 16px; }
.post__meta { font-size: 13px; color: var(--ink-400); }

/* =============================================================
   CTA + Form
   ============================================================= */

.cta {
  position: relative;
  padding: clamp(80px, 10vw, 128px) 0;
  background:
    radial-gradient(800px 400px at 15% 20%, rgba(124,58,237,0.22), transparent 60%),
    radial-gradient(700px 300px at 95% 80%, rgba(167,139,250,0.18), transparent 60%),
    linear-gradient(180deg, #15102A 0%, #0B0A12 100%);
  color: var(--violet-100);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(167,139,250,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

.cta__wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.6fr);
  gap: 40px;
  align-items: center;
}
.cta__wrap .contact-form--compact {
  width: calc(100% + clamp(0px, 6vw, 80px));
  margin-right: calc(-1 * clamp(0px, 6vw, 80px));
  justify-self: stretch;
}
@media (max-width: 960px) {
  .cta__wrap .contact-form--compact {
    width: 100%;
    margin-right: 0;
  }
}

.cta__title {
  color: #fff;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.cta__lede {
  color: var(--violet-200);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 480px;
}

.cta__points {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
}
.cta__points li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--violet-100);
  font-size: 15px;
}
.cta__points span {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--violet-600);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.cta__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  color: var(--violet-200);
}
.cta__contact a,
.cta__contact .cta__addr {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--violet-100);
}
.cta__contact a:hover { color: #fff; }

.cta__form {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-glow);
  color: var(--ink-800);
}
.cta__form h3 {
  font-size: 22px;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: block;
  margin-bottom: 14px;
}
.field span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.field span em { color: var(--ink-400); font-style: normal; font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}

.field textarea { resize: vertical; min-height: 84px; }

.field__fine {
  font-size: 12.5px;
  color: var(--ink-500);
  text-align: center;
  margin-top: 12px;
}

.cta__success {
  margin-top: 16px;
  padding: 12px 14px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--r-md);
  color: #065F46;
  font-size: 14px;
  text-align: center;
}

/* =============================================================
   FAQ
   ============================================================= */

.faq__wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.faq {
  display: grid;
  gap: 8px;
}
.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] {
  border-color: var(--violet-200);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  padding: 16px 0;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--violet-700);
  font-size: 20px;
  transition: transform .25s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  padding: 0 0 18px;
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.6;
}

/* =============================================================
   Final CTA
   ============================================================= */

.final-cta {
  padding: clamp(72px, 9vw, 112px) 0;
  background: var(--grad-primary);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% 100%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.final-cta__inner { position: relative; }
.final-cta h2 {
  color: #fff;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  margin-bottom: 32px;
  letter-spacing: -0.03em;
}
.final-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================================
   Footer
   ============================================================= */

.foot {
  background: #0B0A12;
  color: var(--ink-300);
  padding: 72px 0 28px;
}
.foot__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* When a page footer has only 4 children (brand + 3 cols), collapse to 4 tracks */
.foot__inner:has(.foot__col:nth-child(4):last-child) {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
.foot__brand .nav__brand { color: #fff; }
.foot__brand .nav__wordmark span { color: var(--violet-400); }
.foot__brand p {
  margin-top: 16px;
  color: var(--ink-400);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-300);
  border-radius: var(--r-sm);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.foot__social a svg { display: block; }
.foot__social a:hover {
  background: var(--violet-700);
  color: #fff;
  transform: translateY(-1px);
}
.foot__social a:focus-visible {
  outline: 2px solid var(--violet-500, #8B5CF6);
  outline-offset: 2px;
}

.foot__col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.foot__col a,
.foot__col span {
  display: block;
  color: var(--ink-400);
  font-size: 14px;
  padding: 4px 0;
  line-height: 1.6;
}
.foot__col a:hover { color: var(--violet-400); }

.foot__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.foot__bottom small,
.foot__bottom a {
  color: var(--ink-500);
  font-size: 13px;
}
.foot__bottom a:hover { color: var(--violet-400); }

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__mobile[data-open="true"] { display: flex; }

  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__visual { min-height: 400px; max-width: 560px; margin: 0 auto; width: 100%; }
  .chip--threat { left: 0; }
  .chip--stat { right: 0; }
  .hero__proof { grid-template-columns: repeat(2, 1fr); padding: 24px 4px; margin-top: 48px; }
  .hero__proof-item { padding: 16px 20px; }
  .hero__proof-item:nth-child(3)::before { display: none; }
  .hero__proof-item:nth-child(3)::after,
  .hero__proof-item:nth-child(4)::after {
    content: "";
    position: absolute;
    left: 14%; right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  }

  .marquee__track { gap: 56px; }
  .marquee__item { width: 140px; height: 48px; }

  .pillars,
  .posts,
  .community { grid-template-columns: 1fr; }

  .process,
  .industries,
  .metrics__grid,
  .service-grid,
  .service-grid--3 { grid-template-columns: repeat(2, 1fr); }

  .why__wrap,
  .cta__wrap,
  .faq__wrap { grid-template-columns: 1fr; gap: 40px; }
  .why__card { position: static; }

  .foot__inner,
  .foot__inner:has(.foot__col:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot__brand { grid-column: span 2; }
}

@media (max-width: 640px) {
  .announce__inner { font-size: 12.5px; flex-direction: column; gap: 6px; padding: 12px 0; }
  .announce__text { display: none; }

  .hero { padding-top: 64px; }
  .hero__title { font-size: clamp(30px, 8vw, 40px); }
  .hero__trust { gap: 12px; }
  .hero__trust li { font-size: 12px; }
  .hero__visual { min-height: 360px; }
  .console { transform: none; }
  .console__row { grid-template-columns: auto 1fr auto; }
  .console__bar { display: none; }
  .chip--threat { top: -16px; left: -8px; max-width: 220px; padding: 10px 12px; }
  .chip--stat { bottom: -16px; right: -8px; padding: 10px 12px; }
  .chip__num { font-size: 18px; }
  .hero__proof { grid-template-columns: 1fr 1fr; padding: 16px 4px; margin-top: 40px; }
  .hero__proof-item { padding: 14px 14px; }
  .hero__proof-item strong { font-size: 26px; margin-bottom: 6px; }
  .hero__proof-icon { width: 30px; height: 30px; margin-bottom: 10px; border-radius: 8px; }
  .hero__proof-item span { font-size: 11.5px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  .marquee__track { gap: 44px; animation-duration: 35s; }
  .marquee__item { width: 120px; height: 40px; }
  .metrics__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .process,
  .industries,
  .service-grid,
  .service-grid--3 { grid-template-columns: 1fr; }
  .industry__ic { width: 48px; height: 48px; }

  .section__head--flex { flex-direction: column; align-items: flex-start; }

  .field-row { grid-template-columns: 1fr; }
  .cta__form { padding: 24px; }

  .foot__inner,
  .foot__inner:has(.foot__col:nth-child(4):last-child) { grid-template-columns: 1fr; gap: 32px; }
  .foot__brand { grid-column: span 1; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   Animations
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================
   Awards Night / Ceremony section
   ============================================================= */

.ceremony { position: relative; overflow: hidden; }
.ceremony::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background:
    radial-gradient(60% 80% at 30% 0%, rgba(124, 58, 237, 0.12), transparent 70%),
    radial-gradient(40% 60% at 75% 10%, rgba(245, 158, 11, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ceremony > .container { position: relative; z-index: 1; }

/* --- Lead: announcement photo + intro block --- */
.ceremony__lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
  margin: 0 0 clamp(40px, 4.5vw, 64px);
}
.ceremony__lead-photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  background: #0f0a1f;
  box-shadow: 0 30px 60px -30px rgba(76, 29, 149, 0.45);
}
.ceremony__lead-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: 50% 40%;
}
.ceremony__stamp {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ceremony__stamp::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
  animation: ceremonyPulse 1.6s ease-in-out infinite;
}
@keyframes ceremonyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.ceremony__lead-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 20px 18px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  background: linear-gradient(to top, rgba(11, 6, 22, 0.88) 0%, rgba(11, 6, 22, 0.65) 60%, transparent 100%);
}
.ceremony__lead-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(8px, 1.5vw, 20px) 0;
}
.ceremony__lead-text h3 {
  margin: 4px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ceremony__lead-text p {
  margin: 0;
  color: var(--muted, #6b7280);
  max-width: 48ch;
}
.ceremony__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
}
.ceremony__totals > div {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 6px 18px -10px rgba(76, 29, 149, 0.2);
}
.ceremony__totals dt {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #4C1D95;
  letter-spacing: -0.01em;
}
.ceremony__totals dd {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}

/* --- Podium: three prize cards --- */
.ceremony__podium {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: end;
}
.ceremony__prize {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ceremony__prize:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(76, 29, 149, 0.35);
}
.ceremony__prize-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f0fb;
}
.ceremony__prize-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.ceremony__medal {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #0f0a1f;
  background: #fff;
  box-shadow: 0 8px 18px -6px rgba(17, 24, 39, 0.35);
}
.ceremony__medal em {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}
.ceremony__medal small {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ceremony__prize figcaption {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ceremony__prize figcaption em {
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.ceremony__prize figcaption strong {
  font-size: clamp(22px, 2.3vw, 28px);
  letter-spacing: -0.01em;
  color: #0f0a1f;
}
.ceremony__prize figcaption span {
  color: var(--muted, #6b7280);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Rank-specific accents */
.ceremony__prize--first {
  transform: translateY(-18px);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 30px 60px -24px rgba(245, 158, 11, 0.45), 0 18px 36px -24px rgba(76, 29, 149, 0.3);
}
.ceremony__prize--first:hover {
  transform: translateY(-24px);
}
.ceremony__prize--first .ceremony__medal {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: #0f0a1f;
}
.ceremony__prize--first figcaption {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), transparent 60%);
}
.ceremony__prize--first figcaption strong {
  background: linear-gradient(90deg, #B45309, #F59E0B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ceremony__prize--second .ceremony__medal {
  background: linear-gradient(135deg, #9ca3af, #e5e7eb);
}
.ceremony__prize--second figcaption strong { color: #374151; }

.ceremony__prize--third .ceremony__medal {
  background: linear-gradient(135deg, #92400e, #d97706);
  color: #fff;
}
.ceremony__prize--third figcaption strong { color: #7c2d12; }

/* --- Encore photo below podium --- */
.ceremony__encore {
  position: relative;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  background: #0f0a1f;
  box-shadow: 0 30px 60px -30px rgba(76, 29, 149, 0.4);
}
.ceremony__encore img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 40%;
}
.ceremony__encore figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 28px 24px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(to top, rgba(11, 6, 22, 0.88) 0%, rgba(11, 6, 22, 0.55) 60%, transparent 100%);
}
.ceremony__encore figcaption em {
  display: inline-block;
  margin-right: 8px;
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.9);
  color: #0f0a1f;
  vertical-align: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  .ceremony__lead { grid-template-columns: 1fr; }
  .ceremony__lead-photo img { min-height: 280px; }
  .ceremony__podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ceremony__prize--first { transform: none; order: -1; }
  .ceremony__prize--first:hover { transform: translateY(-4px); }
}
@media (max-width: 520px) {
  .ceremony__totals { grid-template-columns: 1fr 1fr; }
  .ceremony__totals > div:nth-child(3) { grid-column: span 2; }
}

/* =============================================================
   Editions grid: Hacker's Assembly "Inside The Room"
   A journal-style card grid: each card has a monospace meta row
   (status dot · tag · log id), a photo, and a two-line caption.
   First card spans 2×2 to anchor the grid.
   ============================================================= */

.editions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}

.edition {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px -20px rgba(17, 24, 39, 0.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.edition:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 24px 48px -20px rgba(124, 58, 237, 0.3);
}

.edition--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.edition__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.05), transparent);
  border-bottom: 1px dashed rgba(17, 24, 39, 0.1);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.edition__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7C3AED;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
  flex: 0 0 auto;
}
.edition__tag {
  color: #4C1D95;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.edition__id {
  margin-left: auto;
  color: #6b7280;
}

.edition__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #0f0a1f;
  min-height: 0;
}
.edition__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 6, 22, 0.35));
  pointer-events: none;
  opacity: 0.8;
  transition: opacity .3s ease;
}
.edition:hover .edition__media::after { opacity: 0.3; }
.edition__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  aspect-ratio: 4 / 3;
  transition: transform .6s ease, filter .4s ease;
  filter: saturate(0.95);
}
.edition:hover .edition__media img {
  transform: scale(1.04);
  filter: saturate(1.08);
}

.edition--feature .edition__media img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}

.edition figcaption {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed rgba(17, 24, 39, 0.08);
  flex: 0 0 auto;
}
.edition figcaption strong {
  font-size: 15px;
  line-height: 1.3;
  color: #0f0a1f;
  letter-spacing: -0.005em;
}
.edition figcaption span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #6b7280);
}

.edition--feature figcaption strong { font-size: 18px; }
.edition--feature figcaption span { font-size: 15px; }

@media (max-width: 980px) {
  .editions {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .edition--feature {
    grid-column: span 2;
    grid-row: auto;
  }
  .edition--feature .edition__media img { min-height: 280px; }
}
@media (max-width: 560px) {
  .editions { grid-template-columns: 1fr; }
  .edition--feature {
    grid-column: auto;
  }
  .edition--feature .edition__media img { min-height: 220px; }
}

/* =============================================================
   Hack Hour: illustrated hero (terminal collaboration scene)
   ============================================================= */

.hack-hero {
  padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 4.5vw, 60px);
}
.hack-hero__frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 10% 0%, rgba(124, 58, 237, 0.5), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(245, 158, 11, 0.25), transparent 70%),
    linear-gradient(135deg, #1A0B3B 0%, #0F0624 100%);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  min-height: 460px;
  isolation: isolate;
  box-shadow: 0 30px 80px -40px rgba(76, 29, 149, 0.6);
}
.hack-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 80% at 60% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 80% at 60% 50%, black, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
.hack-hero__glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 55%;
  height: 110%;
  background: radial-gradient(closest-side, rgba(251, 191, 36, 0.2), transparent 70%);
  pointer-events: none;
  filter: blur(24px);
  z-index: 1;
}

.hack-hero__tag {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 6, 22, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.hack-hero__tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
  animation: ceremonyPulse 1.6s ease-in-out infinite;
}

.hack-window {
  position: relative;
  background: rgba(11, 6, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #f3f0fb;
  z-index: 2;
}
.hack-window__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: #c4b5fd;
  letter-spacing: 0.02em;
}
.hack-window__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4b5563;
}
.hack-window__chrome span:nth-child(1) { background: #ef4444; }
.hack-window__chrome span:nth-child(2) { background: #f59e0b; }
.hack-window__chrome span:nth-child(3) { background: #22c55e; }
.hack-window__chrome em {
  margin-left: 10px;
  font-style: normal;
  opacity: 0.75;
}
.hack-window__body {
  margin: 0;
  padding: 16px 20px 20px;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.hack-window__body .tok-cmd { color: #c4b5fd; }
.hack-window__body .tok-out { color: #e5e7eb; opacity: 0.82; }
.hack-window__body .tok-hit { color: #fbbf24; font-weight: 600; }
.hack-window__body .tok-blink {
  display: inline-block;
  color: #c4b5fd;
  animation: hackBlink 1.1s steps(2) infinite;
}
@keyframes hackBlink { 50% { opacity: 0; } }

.hack-window--main {
  position: relative;
  width: min(66%, 640px);
  z-index: 2;
  transform: rotate(-1deg);
}
.hack-window--mini {
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  bottom: clamp(36px, 4.5vw, 60px);
  width: min(38%, 340px);
  z-index: 3;
  transform: rotate(2.5deg);
}
.hack-chat p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.55;
}
.hack-chat b {
  color: #c4b5fd;
  font-weight: 600;
  font-style: normal;
}

.hack-hero__bounty {
  position: absolute;
  left: clamp(24px, 4vw, 48px);
  bottom: clamp(36px, 4.5vw, 60px);
  z-index: 4;
  padding: 14px 18px;
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: #0f0a1f;
  border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(245, 158, 11, 0.6);
  transform: rotate(-3deg);
  min-width: 160px;
}
.hack-hero__bounty em {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.75;
}
.hack-hero__bounty strong {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.hack-hero__bounty span {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 820px) {
  .hack-hero__frame { min-height: 560px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 36px); }
  .hack-window--main { width: 100%; transform: rotate(-0.5deg); }
  .hack-window--mini {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(80%, 340px);
    margin: 18px 0 0 auto;
    transform: rotate(1.5deg);
  }
  .hack-hero__bounty {
    position: relative;
    left: auto;
    bottom: auto;
    display: inline-block;
    margin-top: 18px;
    transform: rotate(-1.5deg);
  }
}

/* =============================================================
   Hack Hour: Bounty Ledger (stats + weekly bars + findings feed)
   ============================================================= */

.ledger {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: clamp(18px, 2vw, 28px);
}
.ledger__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
}
.stat-card {
  position: relative;
  padding: 22px 22px 22px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 28px -20px rgba(17, 24, 39, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card--primary {
  background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
  color: #fff;
  border-color: transparent;
}
.stat-card--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 100% 0%, rgba(251, 191, 36, 0.35), transparent 60%);
  pointer-events: none;
}
.stat-card__label {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.stat-card__value {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #0f0a1f;
}
.stat-card--primary .stat-card__value { color: #FBBF24; }
.stat-card__sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #6b7280);
}
.stat-card--primary .stat-card__sub { color: rgba(255, 255, 255, 0.78); }

.ledger__chart {
  position: relative;
  padding: 24px;
  background:
    radial-gradient(60% 80% at 20% 100%, rgba(124, 58, 237, 0.28), transparent 70%),
    linear-gradient(135deg, #1A0B3B 0%, #0F0624 100%);
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
}
.ledger__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
}
.ledger__chart-head h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.ledger__chart-head span {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ledger__bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  height: 200px;
  align-items: end;
  position: relative;
  padding: 24px 0 24px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.bar {
  position: relative;
  height: var(--h, 50%);
  background: linear-gradient(180deg, #A78BFA 0%, #6D28D9 100%);
  border-radius: 6px 6px 2px 2px;
  transition: transform .3s ease, filter .3s ease;
  cursor: default;
  min-height: 12px;
}
.bar:hover { transform: scaleY(1.02); filter: brightness(1.18); }
.bar--hot { background: linear-gradient(180deg, #FBBF24 0%, #B45309 100%); }
.bar span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #fde68a;
  opacity: 0;
  transition: opacity .2s ease;
  white-space: nowrap;
  pointer-events: none;
}
.bar:hover span { opacity: 1; }
.bar em {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.ledger__chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}
.ledger__chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ledger__chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.dot--purple { background: linear-gradient(180deg, #A78BFA, #6D28D9); }
.dot--amber { background: linear-gradient(180deg, #FBBF24, #B45309); }

.ledger__feed {
  padding: 22px 24px 8px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 10px 28px -20px rgba(17, 24, 39, 0.3);
  display: flex;
  flex-direction: column;
}
.ledger__feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ledger__feed-head h3 {
  margin: 0;
  font-size: 18px;
}
.ledger__pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16a34a;
}
.ledger__pulse i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
  animation: ceremonyPulse 1.6s ease-in-out infinite;
}
.ledger__feed ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ledger__feed li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed rgba(17, 24, 39, 0.08);
  align-items: flex-start;
}
.ledger__feed li:first-of-type { border-top: 1px dashed rgba(17, 24, 39, 0.08); }
.sev {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  height: fit-content;
  align-self: flex-start;
  margin-top: 2px;
}
.sev--crit { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sev--high { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.sev--med { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.ledger__feed li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ledger__feed li strong {
  font-size: 14.5px;
  line-height: 1.35;
  color: #0f0a1f;
}
.ledger__feed li em {
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

@media (max-width: 980px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ledger__stats { grid-template-columns: 1fr; }
  .ledger__bars { gap: 4px; }
  .bar em { font-size: 8.5px; }
}

/* =========================================================
   Be Internet Secure: reach / topics / fieldnotes
   ========================================================= */

/* Reach stats grid */
.reach {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.reach__card {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px -20px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 170px;
}
.reach__card::before {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(127, 85, 255, 0.14), transparent 70%);
  pointer-events: none;
}
.reach__card--hero {
  grid-column: span 2;
  grid-row: span 2;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(127, 85, 255, 0.14), transparent 55%),
    linear-gradient(135deg, #1a1430 0%, #2a1a55 55%, #3b1f74 100%);
  color: #fff;
  border-color: transparent;
  padding: 28px 28px 26px;
  min-height: 260px;
}
.reach__card--hero::before { display: none; }
.reach__card--hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -10%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255, 193, 7, 0.18), transparent 70%);
  pointer-events: none;
}
.reach__tag {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.reach__card--hero .reach__tag { color: rgba(255, 255, 255, 0.7); }
.reach__num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0f172a;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.reach__card--hero .reach__num {
  font-size: 88px;
  color: #fff;
}
.reach__num em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 700;
  color: #7f55ff;
}
.reach__card--hero .reach__num em { color: #ffc107; }
.reach__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #6b7280);
}
.reach__card--hero .reach__sub {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 36ch;
}

/* Kids programme feature */
.reach__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  padding: 0;
  margin-top: 6px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.35);
}
.reach__feature-copy {
  padding: 28px 28px 28px 30px;
}
.reach__feature-copy h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 8px 0 10px;
}
.reach__feature-copy > p {
  color: var(--muted, #6b7280);
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 56ch;
}
.reach__feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.reach__feature-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  background: #fafaff;
}
.reach__feature-list li strong {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f55ff;
  align-self: center;
}
.reach__feature-list li span {
  font-size: 14.5px;
  line-height: 1.55;
  color: #1f2937;
}
.reach__feature-aside {
  padding: 28px 26px 28px 22px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(127, 85, 255, 0.12), transparent 55%),
    linear-gradient(160deg, #fafaff 0%, #f2eaff 100%);
  border-left: 1px dashed rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reach__feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f172a;
}
.reach__feature-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: ceremonyPulse 2.2s ease-in-out infinite;
}
.reach__feature-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
}
.reach__feature-stats > div {
  padding: 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.reach__feature-stats dt {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.reach__feature-stats dd {
  margin: 6px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.reach__feature-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #6b7280);
  font-style: italic;
}

@media (max-width: 980px) {
  .reach { grid-template-columns: repeat(2, 1fr); }
  .reach__card--hero {
    grid-column: span 2;
    grid-row: auto;
    min-height: 220px;
  }
  .reach__card--hero .reach__num { font-size: 68px; }
  .reach__feature { grid-template-columns: 1fr; }
  .reach__feature-aside { border-left: 0; border-top: 1px dashed rgba(15, 23, 42, 0.1); }
}
@media (max-width: 560px) {
  .reach { grid-template-columns: 1fr; }
  .reach__card--hero { grid-column: span 1; }
  .reach__feature-list li { grid-template-columns: 1fr; gap: 4px; }
  .reach__feature-stats { grid-template-columns: 1fr; }
}

/* Topics: six concept cards */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.topic-card {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.topic-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--topic-glow, linear-gradient(135deg, rgba(127, 85, 255, 0.14), transparent 60%));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.topic-card::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -40%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--topic-blob, radial-gradient(closest-side, rgba(127, 85, 255, 0.12), transparent 70%));
  pointer-events: none;
  z-index: -1;
}
.topic-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 20px 40px -30px rgba(127, 85, 255, 0.5);
}
.topic-card:hover::before { opacity: 1; }

.topic-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.topic-card__idx {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #7f55ff;
  font-weight: 700;
}
.topic-card__tag {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5f3ff;
  border: 1px solid rgba(127, 85, 255, 0.15);
}
.topic-card h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: #0f172a;
}
.topic-card > p {
  margin: 0 0 14px;
  color: var(--muted, #6b7280);
  line-height: 1.6;
  font-size: 14.5px;
}
.topic-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
  padding-top: 12px;
}
.topic-card ul li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: #1f2937;
  line-height: 1.45;
}
.topic-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.4;
}

.topic-card--rights { --topic-blob: radial-gradient(closest-side, rgba(34, 211, 238, 0.16), transparent 70%); }
.topic-card--rights .topic-card__idx, .topic-card--rights .topic-card__tag { color: #0891b2; }
.topic-card--rights .topic-card__tag { background: #ecfeff; border-color: rgba(8, 145, 178, 0.2); }

.topic-card--crime { --topic-blob: radial-gradient(closest-side, rgba(239, 68, 68, 0.16), transparent 70%); }
.topic-card--crime .topic-card__idx, .topic-card--crime .topic-card__tag { color: #dc2626; }
.topic-card--crime .topic-card__tag { background: #fef2f2; border-color: rgba(220, 38, 38, 0.2); }

.topic-card--prevent { --topic-blob: radial-gradient(closest-side, rgba(34, 197, 94, 0.16), transparent 70%); }
.topic-card--prevent .topic-card__idx, .topic-card--prevent .topic-card__tag { color: #16a34a; }
.topic-card--prevent .topic-card__tag { background: #f0fdf4; border-color: rgba(22, 163, 74, 0.2); }

.topic-card--women { --topic-blob: radial-gradient(closest-side, rgba(236, 72, 153, 0.18), transparent 70%); }
.topic-card--women .topic-card__idx, .topic-card--women .topic-card__tag { color: #db2777; }
.topic-card--women .topic-card__tag { background: #fdf2f8; border-color: rgba(219, 39, 119, 0.2); }

.topic-card--harass { --topic-blob: radial-gradient(closest-side, rgba(245, 158, 11, 0.18), transparent 70%); }
.topic-card--harass .topic-card__idx, .topic-card--harass .topic-card__tag { color: #b45309; }
.topic-card--harass .topic-card__tag { background: #fffbeb; border-color: rgba(245, 158, 11, 0.25); }

.topic-card--abuse { --topic-blob: radial-gradient(closest-side, rgba(127, 85, 255, 0.2), transparent 70%); }
.topic-card--abuse .topic-card__idx, .topic-card--abuse .topic-card__tag { color: #7f55ff; }
.topic-card--abuse .topic-card__tag { background: #f5f3ff; border-color: rgba(127, 85, 255, 0.2); }

@media (max-width: 980px) {
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .topics-grid { grid-template-columns: 1fr; }
}

/* Programme Archive: editorial dossier spread */
.dossier {
  position: relative;
  display: grid;
  gap: 28px;
  padding: 28px 28px 22px;
  border-radius: 22px;
  background:
    repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 32px),
    #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 40px -28px rgba(15, 23, 42, 0.35);
}

.dossier__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.15);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  flex-wrap: wrap;
}
.dossier__brand {
  color: #7f55ff;
  font-weight: 700;
}
.dossier__count b {
  color: #0f172a;
  font-weight: 800;
  margin-right: 4px;
}

.dossier__entry {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  position: relative;
}
.dossier__entry--reverse .dossier__media  { order: 2; }
.dossier__entry--reverse .dossier__meta   { order: 1; }

.dossier__entry + .dossier__entry {
  padding-top: 28px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}
.dossier__entry + .dossier__entry::before {
  content: "✶";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #7f55ff;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
  border: 1px dashed rgba(127, 85, 255, 0.4);
}

.dossier__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: #0f0a1f;
  box-shadow:
    0 20px 40px -30px rgba(15, 23, 42, 0.5),
    0 0 0 1px rgba(15, 23, 42, 0.05);
  isolation: isolate;
}
.dossier__media--feature {
  aspect-ratio: 3 / 2;
  padding: 14px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(127, 85, 255, 0.18), transparent 55%),
    linear-gradient(160deg, #1a1430 0%, #0f0a1f 100%);
}
.dossier__media--feature img {
  border-radius: 6px;
  object-fit: cover;
  box-shadow:
    0 12px 28px -18px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dossier__media--feature::after {
  inset: 14px;
  border-radius: 6px;
}
.dossier__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
  filter: saturate(1.02);
}
.dossier__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 10, 31, 0) 55%, rgba(15, 10, 31, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.dossier__media:hover img {
  transform: scale(1.04);
  filter: saturate(1.08);
}
.dossier__stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  background: rgba(15, 10, 31, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dossier__meta {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dossier__index {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted, #6b7280);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.dossier__index b {
  font-size: 52px;
  line-height: 0.9;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.dossier__tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid transparent;
}
.dossier__tag--rights { color: #0891b2; background: #ecfeff; border-color: rgba(8, 145, 178, 0.2); }
.dossier__tag--women  { color: #db2777; background: #fdf2f8; border-color: rgba(219, 39, 119, 0.2); }
.dossier__tag--harass { color: #b45309; background: #fffbeb; border-color: rgba(245, 158, 11, 0.25); }
.dossier__tag--cohort { color: #7f55ff; background: #f5f3ff; border-color: rgba(127, 85, 255, 0.2); }
.dossier__tag--kids   { color: #16a34a; background: #f0fdf4; border-color: rgba(22, 163, 74, 0.2); }
.dossier__tag--scam   { color: #dc2626; background: #fef2f2; border-color: rgba(220, 38, 38, 0.2); }

.dossier__meta h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2px 0 2px;
  color: #0f172a;
}
.dossier__loc {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
}
.dossier__pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}
.dossier__meta > p {
  margin: 4px 0 6px;
  color: #1f2937;
  line-height: 1.6;
  font-size: 15px;
  max-width: 52ch;
}
.dossier__notes {
  list-style: none;
  margin: 6px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fafaff;
  border: 1px solid rgba(127, 85, 255, 0.12);
  display: grid;
  gap: 8px;
}
.dossier__notes li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: baseline;
}
.dossier__notes li b {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f55ff;
  font-weight: 700;
}
.dossier__notes li span {
  font-size: 13.5px;
  color: #1f2937;
  line-height: 1.4;
}

.dossier__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed rgba(15, 23, 42, 0.15);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
  flex-wrap: wrap;
}
.dossier__footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7f55ff;
  box-shadow: 0 0 0 4px rgba(127, 85, 255, 0.18);
}
.dossier__footer-text { flex: 1; }
.dossier__footer-ref {
  padding: 4px 10px;
  border-radius: 6px;
  background: #f5f3ff;
  color: #7f55ff;
  letter-spacing: 0.16em;
  font-weight: 700;
}

@media (max-width: 980px) {
  .dossier { padding: 22px 18px 18px; gap: 22px; }
  .dossier__entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dossier__entry--reverse .dossier__media { order: 0; }
  .dossier__entry--reverse .dossier__meta  { order: 0; }
  .dossier__meta h3 { font-size: 22px; }
  .dossier__index b { font-size: 42px; }
}
@media (max-width: 560px) {
  .dossier__header { font-size: 10px; gap: 10px; }
  .dossier__notes li { grid-template-columns: 1fr; gap: 2px; }
  .dossier__meta h3 { font-size: 20px; }
  .dossier__footer-text { order: 3; flex: 1 0 100%; }
}

/* =============================================================
   Blog: index listing
   ============================================================= */

.container--narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.blog-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0 clamp(48px, 6vw, 76px);
  background:
    linear-gradient(180deg, #FAF9FC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--ink-200);
  isolation: isolate;
}
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.blog-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 18% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(800px 420px at 92% 10%,  rgba(16, 185, 129, 0.12), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.blog-hero__inner {
  position: relative;
  max-width: 960px;
}
.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--purple-700, #6D28D9);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(124, 58, 237, 0.22);
  padding: 9px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
  box-shadow: 0 6px 20px -12px rgba(124, 58, 237, 0.3);
}
.blog-hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple-600, #7C3AED);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
  animation: blogPulse 2.4s ease-in-out infinite;
}
@keyframes blogPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.05); }
}
.blog-hero__title {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  font-weight: 600;
  color: var(--ink-900);
}
.blog-hero__lede {
  font-size: clamp(16.5px, 1.35vw, 19px);
  color: var(--ink-600);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 36px;
}

.blog-hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.blog-hero__topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--ink-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
  cursor: default;
}
.blog-hero__topic:first-child {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.blog-hero__topic:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: var(--purple-700);
  transform: translateY(-1px);
}
.blog-hero__topic-swatch {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block;
}

.blog-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 24px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ink-200);
  box-shadow: 0 24px 60px -40px rgba(76, 29, 149, 0.3);
}
.blog-hero__stats > div {
  padding: 6px 18px;
  border-left: 1px solid var(--ink-200);
}
.blog-hero__stats > div:first-child { border-left: 0; padding-left: 0; }
.blog-hero__stats dt {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 8px;
}
.blog-hero__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

@media (max-width: 820px) {
  .blog-hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .blog-hero__stats > div { padding: 6px 14px; }
  .blog-hero__stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .blog-hero__stats { grid-template-columns: 1fr; }
  .blog-hero__stats > div { border-left: 0; padding: 6px 0; border-top: 1px solid var(--ink-200); }
  .blog-hero__stats > div:first-child { border-top: 0; }
}

/* Section header above feature card */
.blog-list-wrap { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 96px); }
.blog-list__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.blog-list__title {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  color: var(--ink-900);
}
.blog-list__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 500;
}
.blog-list__meta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}

.blog-list__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: clamp(44px, 5vw, 64px) 0 clamp(18px, 2vw, 24px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
  gap: 16px;
  flex-wrap: wrap;
}
.blog-list__subhead h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  margin: 0;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}
.blog-list__subhead span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-500);
}

.blog-subscribe {
  margin-top: clamp(40px, 4vw, 60px);
  padding: 24px 28px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(124, 58, 237, 0.01)),
    #fff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.blog-subscribe__text {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.blog-subscribe__text strong {
  display: block;
  color: var(--ink-900);
  font-size: 15.5px;
  margin-bottom: 3px;
}
.blog-subscribe__text p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.5;
}
.blog-subscribe .blog-list__meta-dot { margin-top: 6px; }

/* =============================================================
   Contact page
   ============================================================= */

.contact-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #FAF9FC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--ink-200);
  isolation: isolate;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.contact-hero__inner { position: relative; max-width: 960px; }
.contact-hero__title {
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  font-weight: 600;
  color: var(--ink-900);
}
.contact-hero__lede {
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--ink-600);
  max-width: 720px;
  line-height: 1.6;
  margin: 0;
}

.contact-shell { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 96px); }
.contact-shell--top {
  position: relative;
  padding-top: clamp(92px, 10vw, 120px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #2A1758 0%, #15092E 55%, #0B0420 100%);
  isolation: isolate;
  overflow: hidden;
}
.contact-shell--top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}
.contact-shell__glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background:
    radial-gradient(ellipse 40% 50% at 30% 40%, rgba(167, 139, 250, 0.28), transparent 60%),
    radial-gradient(ellipse 40% 45% at 70% 50%, rgba(236, 72, 153, 0.16), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact-shell__wrap {
  position: relative;
  z-index: 1;
}
.contact-shell--top .contact-form { position: relative; z-index: 2; }

.contact-form--wide {
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 40px) clamp(24px, 3vw, 48px);
  gap: 20px;
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 50px 100px -40px rgba(0, 0, 0, 0.5),
    0 20px 48px -22px rgba(76, 29, 149, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.contact-form--wide::before { height: 5px; }

.contact-form--wide .contact-form__head {
  padding-bottom: 16px;
  margin-bottom: 0;
  gap: 4px;
}
.contact-form--wide .contact-form__head p {
  font-size: clamp(14px, 1.1vw, 16px);
}

/* Two-column body: fields left, message right */
.contact-form__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.contact-form__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.contact-form__col--message { min-height: 0; }
.contact-form__field--tall {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.contact-form__field--tall textarea {
  flex: 1 1 auto;
  min-height: 240px;
  resize: none;
}

.contact-form--wide .contact-form__row--split {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form--wide .contact-form__field { gap: 6px; }
.contact-form--wide .contact-form__field label { font-size: 12.5px; }
.contact-form--wide input[type="text"],
.contact-form--wide input[type="email"],
.contact-form--wide input[type="tel"],
.contact-form--wide select,
.contact-form--wide textarea {
  padding: 12px 14px;
  font-size: 14.5px;
  border-radius: 10px;
}

.contact-form--wide .contact-form__consent {
  padding: 12px 14px;
  background: #FAFAFB;
  border-radius: 10px;
}
.contact-form--wide .contact-form__consent label { font-size: 12.5px; }

.contact-form--wide .contact-form__foot {
  padding-top: 14px;
  margin-top: 0;
}
.contact-form--wide .contact-form__submit {
  padding: 14px 28px !important;
  font-size: 15px !important;
  min-width: 180px;
}

@media (max-width: 720px) {
  .contact-form__body { grid-template-columns: 1fr; }
  .contact-form__field--tall textarea { min-height: 160px; resize: vertical; }
  .contact-form--wide .contact-form__row--split { grid-template-columns: 1fr; }
}

/* Compact variant: used inside the homepage CTA column */
.contact-form--compact {
  border-radius: 14px;
  padding: 18px 20px;
  gap: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 50px -28px rgba(12, 6, 30, 0.55),
    0 8px 20px -14px rgba(76, 29, 149, 0.32),
    0 0 0 3px rgba(124, 58, 237, 0.06);
}
.contact-form--compact::before { height: 3px; }
.contact-form--compact::after {
  top: -30%;
  right: -25%;
  width: 320px;
  height: 320px;
}
.contact-form--compact .contact-form__head {
  padding-bottom: 12px;
  margin-bottom: 0;
  gap: 4px;
}
.contact-form--compact .contact-form__head h3 { font-size: 11px; }
.contact-form--compact .contact-form__head p {
  font-size: 13px;
  line-height: 1.4;
}
.contact-form--compact .contact-form__row--split { gap: 10px; }
.contact-form--compact .contact-form__field { gap: 5px; }
.contact-form--compact .contact-form__field label { font-size: 12px; }
.contact-form--compact input[type="text"],
.contact-form--compact input[type="email"],
.contact-form--compact input[type="tel"],
.contact-form--compact select,
.contact-form--compact textarea {
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 9px;
}
.contact-form--compact textarea {
  min-height: 88px;
  resize: vertical;
}
.contact-form--compact .contact-form__consent {
  padding: 8px 10px;
  border-radius: 9px;
}
.contact-form--compact .contact-form__consent label { font-size: 12px; }
.contact-form--compact .contact-form__foot {
  padding-top: 2px;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-form--compact .contact-form__submit {
  padding: 11px 20px;
  font-size: 14px;
  min-width: 0;
}
.contact-form--compact .contact-form__hint {
  font-size: 12px;
  min-width: 0;
  flex: 1 1 120px;
}
.contact-form--compact .contact-form__counter { font-size: 11.5px; }
.contact-form--compact .contact-form__error { font-size: 11.5px; }

/* Compact body grid: landscape 2-column layout */
.contact-form--compact .contact-form__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.contact-form--compact .contact-form__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.contact-form--compact .contact-form__col--message { min-height: 0; }
.contact-form--compact .contact-form__field--tall {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.contact-form--compact .contact-form__field--tall textarea {
  flex: 1 1 auto;
  min-height: 120px;
  resize: none;
}
@media (max-width: 720px) {
  .contact-form--compact .contact-form__body { grid-template-columns: 1fr; }
  .contact-form--compact .contact-form__field--tall textarea { min-height: 100px; resize: vertical; }
}

/* Channels strip */
.contact-channels {
  padding: clamp(40px, 5vw, 72px) 0 0;
  background: #fff;
}
.contact-channels__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 18px 44px -30px rgba(76, 29, 149, 0.22);
}
@media (max-width: 900px) {
  .contact-channels__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .contact-channels__grid { grid-template-columns: 1fr; }
}
.contact-channels__grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.contact-channels__grid li + li {
  padding-left: 14px;
  border-left: 1px solid var(--ink-200);
}
@media (max-width: 900px) {
  .contact-channels__grid li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 500px) {
  .contact-channels__grid li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-200); padding-top: 14px; }
}
.contact-channels__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-700, #6D28D9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-channels__grid li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.contact-channels__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-400);
  font-weight: 600;
}
.contact-channels__grid a {
  color: var(--ink-900);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: color .18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-channels__grid a:hover { color: var(--purple-700, #6D28D9); }
.contact-channels__grid li div > span:last-child {
  font-size: 14.5px;
  color: var(--ink-900);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Why block (moved caption) */
.contact-why {
  padding: clamp(40px, 5vw, 72px) 0 clamp(12px, 2vw, 24px);
  background: #fff;
}
.contact-why__copy {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.contact-why__copy .contact-hero__title {
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 14px 0 16px;
}
.contact-why__copy .contact-hero__lede { margin-left: auto; margin-right: auto; }
.contact-why__copy .contact-hero__checks {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  text-align: left;
}
.contact-shell__grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-shell__grid { grid-template-columns: 1fr; }
}

/* ---- Aside (contact info) ---- */
.contact-aside {
  position: sticky;
  top: 96px;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  box-shadow: 0 16px 40px -28px rgba(76, 29, 149, 0.22);
}
.contact-aside__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 700;
  font-family: var(--font-sans);
  margin: 0 0 18px;
}
.contact-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-aside__list li { display: flex; flex-direction: column; gap: 4px; }
.contact-aside__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  font-weight: 600;
}
.contact-aside__list a {
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  transition: color .2s ease;
}
.contact-aside__list a:hover { color: var(--purple-700, #6D28D9); }
.contact-aside__list address {
  font-style: normal;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
}

.contact-aside__promise {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-200);
}
.contact-aside__promise h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 700;
  font-family: var(--font-sans);
  margin: 0 0 12px;
}
.contact-aside__promise ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Form ---- */
.contact-form {
  position: relative;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 24px;
  padding: clamp(32px, 3.8vw, 56px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 40px 90px -40px rgba(76, 29, 149, 0.45),
    0 14px 36px -18px rgba(76, 29, 149, 0.25),
    0 0 0 6px rgba(124, 58, 237, 0.04);
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}
.contact-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #7C3AED 0%, #A78BFA 50%, #4C1D95 100%);
}
.contact-form::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.14) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.contact-form > * { position: relative; z-index: 1; }
.contact-form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.2);
  margin-bottom: 4px;
}
.contact-form__head h3 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--purple-700, #6D28D9);
  font-weight: 700;
  font-family: var(--font-sans);
  margin: 0;
}
.contact-form__head p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-800);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.contact-form__req { color: #B91C1C; }

.contact-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px) {
  .contact-form__row--split { grid-template-columns: 1fr; }
}

.contact-form__field { display: flex; flex-direction: column; gap: 10px; }
.contact-form__field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-900);
  background: #F8F7FB;
  border: 1.5px solid var(--ink-200);
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  line-height: 1.4;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-400); }
.contact-form input:hover:not(:focus),
.contact-form select:hover:not(:focus),
.contact-form textarea:hover:not(:focus) {
  border-color: rgba(124, 58, 237, 0.35);
  background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 180px; font-family: inherit; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--purple-600, #7C3AED);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16);
}
.contact-form [data-invalid] {
  border-color: #DC2626;
  background: #FEF2F2;
}
.contact-form [data-invalid]:focus {
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}
.contact-form__error {
  min-height: 0;
  color: #B91C1C;
  font-size: 12.5px;
  font-weight: 500;
}
.contact-form__error:empty { display: none; }

.contact-form__consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.5;
  cursor: pointer;
}
.contact-form__consent input {
  margin-top: 3px;
  accent-color: var(--purple-600, #7C3AED);
}

.contact-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed rgba(124, 58, 237, 0.18);
}
.contact-form__submit {
  padding: 18px 36px !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  min-width: 220px;
  letter-spacing: -0.01em;
  gap: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 20px 40px -14px rgba(124, 58, 237, 0.55),
    0 6px 16px -8px rgba(124, 58, 237, 0.35) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 28px 52px -16px rgba(124, 58, 237, 0.65),
    0 10px 22px -10px rgba(124, 58, 237, 0.45) !important;
}
.contact-form__btn-arrow {
  transition: transform .25s ease;
  flex-shrink: 0;
}
.contact-form__submit:hover .contact-form__btn-arrow {
  transform: translateX(4px);
}
#contactSubmit.is-busy .contact-form__btn-arrow { opacity: 0; }
@media (max-width: 520px) {
  .contact-form__submit { width: 100%; min-width: 0; }
}
.contact-form__hint { margin: 0; color: var(--ink-500); font-size: 13px; flex: 1; min-width: 220px; }
.contact-form__btn-label { display: inline-block; }
.contact-form__spinner {
  display: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: contactSpin .7s linear infinite;
}
#contactSubmit.is-busy .contact-form__btn-label { opacity: 0.7; }
#contactSubmit.is-busy .contact-form__spinner    { display: inline-block; margin-left: 8px; }
@keyframes contactSpin { to { transform: rotate(360deg); } }

/* Honeypot: visually hidden, kept in layout for bots */
.contact-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form__result {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-form__result[hidden] { display: none; }
.contact-form__result strong { font-size: 15px; }
.contact-form__result--success {
  background: #DCFCE7;
  color: #14532D;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
.contact-form__result--error {
  background: #FEF2F2;
  color: #7F1D1D;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.contact-form__result a { color: inherit; text-decoration: underline; }

/* =============================================================
   Contact page: v2 rich layout
   ============================================================= */

/* Hero split layout */
.contact-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.contact-hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 520px;
  background:
    radial-gradient(ellipse 40% 60% at 25% 30%, rgba(167, 139, 250, 0.25), transparent 65%),
    radial-gradient(ellipse 35% 55% at 80% 20%, rgba(124, 58, 237, 0.18), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  position: relative;
}
@media (max-width: 960px) {
  .contact-hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

.contact-hero__copy { min-width: 0; }
.contact-hero__copy--center {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero__copy--center .contact-crumbs { justify-content: center; }
.contact-hero__copy--center .contact-hero__lede { margin-left: auto; margin-right: auto; }
.contact-hero__copy--center .contact-hero__checks {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  text-align: left;
}

/* Stats strip: horizontal card below form */
.contact-stats {
  padding: clamp(36px, 4vw, 56px) 0 clamp(8px, 1vw, 16px);
  background: #fff;
}
.contact-stats__card {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 3vw, 36px);
  background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 20px;
  box-shadow: 0 20px 48px -32px rgba(76, 29, 149, 0.22);
}
.contact-stats__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.2);
}
.contact-stats__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 28px;
}
@media (max-width: 820px) {
  .contact-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .contact-stats__grid { grid-template-columns: 1fr; }
}
.contact-stats__grid > div { display: flex; flex-direction: column; gap: 6px; }
.contact-stats__grid dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  font-weight: 600;
}
.contact-stats__grid dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.contact-stats__grid dd small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  margin-left: 4px;
  letter-spacing: 0;
}
.contact-stats__foot {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(124, 58, 237, 0.2);
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.4;
}

.contact-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 18px;
}
.contact-crumbs a {
  color: var(--ink-700);
  text-decoration: none;
  transition: color .18s ease;
}
.contact-crumbs a:hover { color: var(--purple-700, #6D28D9); }

.contact-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-700, #6D28D9);
  background: rgba(124, 58, 237, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.contact-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-600, #7C3AED);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45);
  animation: contactPulse 1.8s infinite;
}
@keyframes contactPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

.contact-hero__checks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 620px;
}
.contact-hero__checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-700);
  line-height: 1.5;
}
.contact-hero__tick {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.12);
  position: relative;
  margin-top: 2px;
}
.contact-hero__tick::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--purple-700, #6D28D9);
  border-bottom: 2px solid var(--purple-700, #6D28D9);
  transform: rotate(45deg);
}

/* Hero stats card */
.contact-hero__card {
  position: relative;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 20px;
  box-shadow:
    0 30px 60px -30px rgba(76, 29, 149, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  align-self: stretch;
}
.contact-hero__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.18);
}
.contact-hero__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800);
}
.contact-hero__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  animation: contactLive 2.2s infinite;
}
@keyframes contactLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.contact-hero__card-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  background: rgba(124, 58, 237, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
}
.contact-hero__stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.contact-hero__stats > div {
  padding: 10px 0;
  border-top: 1px solid var(--ink-100, #EDE9F2);
}
.contact-hero__stats > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.contact-hero__stats dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-hero__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.contact-hero__stats dd small {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  margin-left: 3px;
  letter-spacing: 0;
}
.contact-hero__card-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(124, 58, 237, 0.18);
  font-size: 12.5px;
  color: var(--ink-600);
  line-height: 1.4;
}
.contact-hero__avatars {
  display: inline-flex;
  flex-shrink: 0;
}
.contact-hero__avatars span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
}
.contact-hero__avatars span:first-child { margin-left: 0; }
.contact-hero__avatars span:nth-child(2) { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.contact-hero__avatars span:nth-child(3) { background: linear-gradient(135deg, #8B5CF6, #4C1D95); }

/* Service picker tiles */
.contact-picker {
  padding: clamp(40px, 5vw, 72px) 0 clamp(12px, 2vw, 24px);
  background: #FFFFFF;
}
.contact-picker__head {
  max-width: 720px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.contact-picker__title {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.2;
}
.contact-picker__head p {
  margin: 0;
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.55;
}
.contact-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1020px) {
  .contact-picker__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .contact-picker__grid { grid-template-columns: 1fr; }
}

.picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 22px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink-900);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.picker-card:hover {
  border-color: rgba(124, 58, 237, 0.38);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(76, 29, 149, 0.28);
}
.picker-card:focus-visible {
  outline: none;
  border-color: var(--purple-600, #7C3AED);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}
.picker-card[aria-checked="true"] {
  border-color: var(--purple-600, #7C3AED);
  background: linear-gradient(180deg, #FBFAFF 0%, #F5F0FF 100%);
  box-shadow: 0 0 0 1px var(--purple-600, #7C3AED) inset, 0 22px 48px -32px rgba(76, 29, 149, 0.35);
}
.picker-card[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple-600, #7C3AED);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.picker-card strong {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.picker-card span:last-child {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.5;
}
.picker-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.picker-card__icon--off {
  color: #B91C1C;
  background: rgba(220, 38, 38, 0.08);
}
.picker-card__icon--def {
  color: #1D4ED8;
  background: rgba(29, 78, 216, 0.08);
}
.picker-card__icon--grc {
  color: #15803D;
  background: rgba(21, 128, 61, 0.08);
}
.picker-card__icon--tr {
  color: var(--purple-700, #6D28D9);
  background: rgba(124, 58, 237, 0.08);
}
/* Flagship solutions (new) */
.picker-card__icon--soc {
  color: #0E7490;
  background: rgba(14, 116, 144, 0.10);
}
.picker-card__icon--ti {
  color: #C2410C;
  background: rgba(194, 65, 12, 0.10);
}
.picker-card__icon--ai {
  color: #6D28D9;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(34, 211, 238, 0.14));
}
.picker-card--featured {
  position: relative;
  border-color: rgba(124, 58, 237, 0.28);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.03), rgba(34, 211, 238, 0.02)),
    #fff;
}
.picker-card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #A78BFA, #F97316);
  border-radius: 14px 14px 0 0;
  opacity: 0.8;
}
.picker-card--featured[aria-checked="true"]::before { opacity: 1; }

/* Form fieldsets */
.contact-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form__fieldset legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ink-400);
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.contact-form__step {
  display: inline-block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--purple-700, #6D28D9);
  background: rgba(124, 58, 237, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.contact-form__opt {
  font-weight: 500;
  color: var(--ink-400);
  font-size: 12px;
  letter-spacing: 0;
}
.contact-form__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.contact-form__counter {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ink-400);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contact-form__counter.is-near { color: #B45309; }
.contact-form__counter.is-max { color: #B91C1C; }

/* Custom select caret */
.contact-form__select-wrap {
  position: relative;
}
.contact-form__select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.contact-form__select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  pointer-events: none;
}

.contact-form__hint-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  margin-right: 8px;
  vertical-align: middle;
}

/* Aside: blocks / icons / steps / trust */
.contact-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.contact-aside__block {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: clamp(28px, 3.2vw, 44px) clamp(22px, 2.4vw, 30px);
  box-shadow: 0 16px 40px -28px rgba(76, 29, 149, 0.18);
}
.contact-aside__block + .contact-aside__block { padding-top: clamp(22px, 2.4vw, 30px); }
.contact-aside__block h3 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-700, #6D28D9);
  font-weight: 700;
  font-family: var(--font-sans);
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.18);
}
.contact-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-aside__list li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.contact-aside__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--purple-700, #6D28D9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-aside__list li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Steps */
.contact-aside__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-aside__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-aside__step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}
.contact-aside__steps li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-aside__steps strong {
  font-size: 14px;
  color: var(--ink-900);
  font-weight: 700;
}
.contact-aside__steps span {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.5;
}

/* Trust badges */
.contact-aside__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-aside__trust-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  letter-spacing: 0.01em;
}

/* FAQ */
.contact-faq {
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
  background: linear-gradient(180deg, #FAF9FC 0%, #FFFFFF 100%);
  border-top: 1px solid var(--ink-200);
}
.contact-faq__inner {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-faq__inner { grid-template-columns: 1fr; }
}
.contact-faq__head .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-700, #6D28D9);
  font-weight: 700;
  font-family: var(--font-sans);
  margin-bottom: 12px;
  display: inline-block;
}
.contact-faq__head h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink-900);
}
.contact-faq__head p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-600);
  line-height: 1.55;
}
.contact-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  padding: 0 22px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 16px 36px -28px rgba(76, 29, 149, 0.25);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: none;
  color: var(--purple-700, #6D28D9);
}
.faq-item__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.08);
  position: relative;
  transition: transform .25s ease, background .2s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--purple-700, #6D28D9);
  border-radius: 2px;
}
.faq-item__icon::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq-item__icon::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.faq-item[open] .faq-item__icon { background: rgba(124, 58, 237, 0.16); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item p {
  margin: 0;
  padding: 0 0 20px;
  font-size: 14.5px;
  color: var(--ink-700);
  line-height: 1.65;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.blog-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7C3AED, #4C1D95);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 2;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -26px rgba(76, 29, 149, 0.32);
  border-color: rgba(124, 58, 237, 0.35);
}
.blog-card:hover::before { opacity: 1; }

.blog-card__index {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(11, 10, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F2F8 0%, #E8E6EF 100%);
}
.blog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 18, 0.25) 100%);
  pointer-events: none;
}
.blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__ribbon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(90deg, #7C3AED, #4C1D95);
  box-shadow: 0 10px 28px -10px rgba(76, 29, 149, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.blog-card__ribbon-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 22px;
  flex: 1;
}
.blog-card__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.blog-card__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--purple-50, #F5F3FF);
  color: var(--purple-700, #6D28D9);
  border: 1px solid rgba(124, 58, 237, 0.15);
}
.blog-card__tag--mobile { background: #FEF3C7; color: #92400E; border-color: rgba(217, 119, 6, 0.2); }
.blog-card__tag--web    { background: #DBEAFE; color: #1D4ED8; border-color: rgba(37, 99, 235, 0.2); }
.blog-card__tag--appsec { background: #FCE7F3; color: #9D174D; border-color: rgba(219, 39, 119, 0.2); }
.blog-card__tag--auth   { background: #DCFCE7; color: #15803D; border-color: rgba(22, 163, 74, 0.22); }

.blog-card__date {
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 500;
}
.blog-card__body h2 {
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 4px 0 2px;
  color: var(--ink-900);
}
.blog-card__body h2 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.blog-card:hover .blog-card__body h2 a { color: var(--purple-700); }
.blog-card__body p {
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.blog-card__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-100);
}
.blog-card__avatar {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px -8px rgba(76, 29, 149, 0.5);
}
.blog-card__byline-text { line-height: 1.25; font-size: 13.5px; }
.blog-card__byline-text strong {
  display: block;
  color: var(--ink-900);
  font-weight: 700;
}
.blog-card__byline-text em {
  font-style: normal;
  color: var(--ink-500);
  font-size: 12.5px;
}

.blog-card__foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}
.blog-card__link {
  color: var(--purple-700, #6D28D9);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: gap .22s ease, color .22s ease;
}
.blog-card:hover .blog-card__link { gap: 12px; color: var(--purple-900, #4C1D95); }

/* Feature (hero) card spans full width */
.blog-card--feature {
  flex-direction: row;
  min-height: 360px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.blog-card--feature .blog-card__media {
  flex: 0 0 54%;
  aspect-ratio: auto;
  min-height: 360px;
}
.blog-card--feature .blog-card__body {
  padding: clamp(28px, 3.2vw, 44px);
  gap: 16px;
  justify-content: center;
}
.blog-card--feature .blog-card__body h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.blog-card--feature .blog-card__body p {
  font-size: 15.5px;
  line-height: 1.65;
}
.blog-card--feature .blog-card__foot { border-top: 0; padding-top: 0; margin-top: 6px; }

@media (max-width: 820px) {
  .blog-card--feature { flex-direction: column; min-height: 0; }
  .blog-card--feature .blog-card__media { flex: unset; aspect-ratio: 16 / 9; min-height: 0; }
}

/* =============================================================
   Blog: individual article
   ============================================================= */

.post-article {
  padding: clamp(96px, 11vw, 140px) 0 clamp(56px, 7vw, 84px);
  background:
    radial-gradient(900px 420px at 10% -5%, rgba(124, 58, 237, 0.08), transparent 60%),
    #FFFFFF;
}

.post-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-500);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
  font-weight: 600;
}
.post-crumbs a {
  color: var(--ink-600);
  text-decoration: none;
}
.post-crumbs a:hover { color: var(--purple-700); }
.post-crumbs span { color: var(--ink-300); }

.post-header {
  margin-bottom: clamp(28px, 3vw, 40px);
}
.post-header__tags {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.post-header__date {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 500;
}
.post-header h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.post-header__lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-600);
  max-width: 720px;
}
.post-header__lede code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-800);
}
.post-header__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-200);
}
.post-byline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-700);
}
.post-byline strong { display: block; color: var(--ink-900); font-weight: 700; }
.post-byline em { font-style: normal; color: var(--ink-500); font-size: 13px; }
.post-byline__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px -8px rgba(76, 29, 149, 0.5);
}
.post-header__read {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 500;
}

.post-figure {
  margin: clamp(28px, 3vw, 40px) 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
}
.post-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.post-figure--hero {
  margin-top: clamp(12px, 1.4vw, 20px);
  margin-bottom: clamp(32px, 4vw, 52px);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1A1825 0%, #2E2B3B 100%);
}
.post-figure--hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-800);
}
.post-body > p {
  margin: 0 0 1.2em;
}
.post-body h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: clamp(32px, 3.4vw, 44px) 0 14px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.post-body h3 {
  font-size: 20px;
  margin: 28px 0 10px;
  color: var(--ink-900);
}
.post-body a {
  color: var(--purple-700, #6D28D9);
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, 0.4);
  text-underline-offset: 3px;
}
.post-body a:hover { text-decoration-color: var(--purple-700); }
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-800);
  border: 1px solid var(--ink-200);
}
.post-body pre {
  margin: 22px 0 28px;
  padding: 18px 20px;
  background: #0B0A12;
  color: #F4F2F8;
  border-radius: 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid #2E2B3B;
}
.post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
.post-body__list {
  margin: 8px 0 1.4em;
  padding-left: 1.4em;
}
.post-body__list li {
  margin: 0 0 10px;
}
.post-body__list li strong { color: var(--ink-900); }

.post-quote {
  margin: 26px 0 30px;
  padding: 20px 24px;
  border-left: 4px solid var(--purple-600, #7C3AED);
  background: var(--purple-50, #F5F3FF);
  border-radius: 0 12px 12px 0;
  font-size: 16px;
  color: var(--ink-800);
  font-style: italic;
  font-family: var(--font-mono);
  line-height: 1.55;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(36px, 4vw, 56px);
  padding: 22px 0;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.post-footer__share {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.post-footer__label {
  color: var(--ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  font-family: var(--font-sans);
}
.post-footer__share a {
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.post-footer__share a:hover {
  color: var(--purple-700);
  border-color: rgba(124, 58, 237, 0.4);
  background: var(--purple-50);
}
.post-footer__back {
  color: var(--purple-700);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}
.post-footer__back:hover { color: var(--purple-900, #4C1D95); }

.post-related {
  margin-top: clamp(44px, 5vw, 72px);
}
.post-related h3 {
  font-size: 20px;
  margin-bottom: 18px;
  color: var(--ink-900);
}
.post-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.post-related__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-related__card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 14px 32px -22px rgba(76, 29, 149, 0.28);
}
.post-related__card strong {
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink-900);
}
.post-related__card span:last-child {
  font-size: 12.5px;
  color: var(--ink-500);
}

@media (max-width: 640px) {
  .post-header__byline { flex-direction: column; align-items: flex-start; }
  .post-footer { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   Careers page
   ============================================================= */
.careers-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 120px) 0 clamp(48px, 6vw, 72px);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(167, 139, 250, 0.18), transparent 60%),
    linear-gradient(180deg, #0B0A12 0%, #14112A 100%);
  color: #fff;
}
.careers-hero__glow {
  position: absolute;
  inset: auto -10% -40% auto;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.careers-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
}
.careers-hero__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: #A78BFA;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.22);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.22); }
  50% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0.05); }
}
.careers-hero__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
  color: #fff;
}
.careers-hero__lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
}
.careers-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.careers-hero__stats > div { display: flex; flex-direction: column; gap: 3px; }
.careers-hero__stats dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.careers-hero__stats dd {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  word-break: break-word;
  margin: 0;
}

.careers-list-wrap {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg-alt);
}
.careers-list__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
}
.careers-list__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-top: 6px;
}
.careers-list__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-500);
  font-size: 13.5px;
}
.careers-list__meta-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.job-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 22px;
  box-shadow: 0 1px 0 rgba(11, 10, 18, 0.02), 0 20px 50px -40px rgba(76, 29, 149, 0.18);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.job-card:hover {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 1px 0 rgba(11, 10, 18, 0.02), 0 28px 60px -40px rgba(76, 29, 149, 0.32);
  transform: translateY(-1px);
}
.job-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #A78BFA, #6D28D9);
  opacity: 0.9;
}
.job-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.job-card__tag {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
}
.job-card__tag--offensive { background: linear-gradient(90deg, #6D28D9, #9333EA); }
.job-card__tag--defensive { background: linear-gradient(90deg, #1D4ED8, #4338CA); }
.job-card__chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-200);
}
.job-card__number {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.job-card__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 4px 0 10px;
}
.job-card__lede {
  color: var(--ink-700);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 760px;
  margin-bottom: 22px;
}
.job-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: 24px;
}
.job-card__subhead {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 700;
  margin: 0 0 10px;
}
.job-card__subhead--plus { margin-top: 20px; color: #7C3AED; }
.job-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-800);
}
.job-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #A78BFA, #6D28D9);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15);
}
.job-card__list--plus li::before {
  background: transparent;
  border: 2px dashed #A78BFA;
  box-shadow: none;
}
.job-card__list strong { color: var(--ink-900); font-weight: 700; }
.job-card__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px dashed var(--ink-200);
}
.job-card__apply-hint {
  font-size: 13px;
  color: var(--ink-500);
}
.job-card__apply-hint code {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 12.5px;
  padding: 3px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  color: var(--ink-800);
}

.careers-note {
  margin-top: 28px;
  padding: clamp(20px, 2.4vw, 28px);
  background: #fff;
  border: 1px dashed rgba(124, 58, 237, 0.35);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.careers-note__text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.careers-note__text strong {
  display: block;
  color: var(--ink-900);
  font-size: 15.5px;
  margin-bottom: 2px;
}
.careers-note__text p {
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
  max-width: 540px;
}

@media (max-width: 820px) {
  .job-card__grid { grid-template-columns: 1fr; }
  .job-card__head { flex-direction: column; align-items: flex-start; }
  .careers-list__header { align-items: flex-start; }
}
@media (max-width: 520px) {
  .job-card__foot { flex-direction: column; align-items: stretch; }
  .job-card__foot .btn { width: 100%; justify-content: center; }
  .careers-note { flex-direction: column; align-items: stretch; }
  .careers-note .btn { width: 100%; text-align: center; }
}

/* =============================================================
   Legal page
   ============================================================= */
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 104px) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(900px 460px at 90% -10%, rgba(124, 58, 237, 0.2), transparent 60%),
    linear-gradient(180deg, #0B0A12 0%, #14112A 100%);
  color: #fff;
}
.legal-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.legal-hero__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 14px 0 16px;
  color: #fff;
}
.legal-hero__lede {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 760px;
}
.legal-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.legal-hero__meta > div { display: flex; flex-direction: column; gap: 2px; }
.legal-hero__meta dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.legal-hero__meta dd {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 13.5px;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.legal-body {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bg-alt);
}
.legal-body__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
}
.legal-toc {
  position: relative;
}
.legal-toc__sticky {
  position: sticky;
  top: 84px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: 0 18px 44px -36px rgba(76, 29, 149, 0.22);
}
.legal-toc__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 700;
  margin-bottom: 12px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-800);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.legal-toc a:hover { background: var(--bg-soft); color: var(--purple-700, #6D28D9); }
.legal-toc__contact {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #6D28D9;
  text-decoration: none;
}
.legal-toc__contact:hover { text-decoration: underline; }

.legal-article {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 20px 50px -40px rgba(76, 29, 149, 0.18);
}
.legal-section {
  scroll-margin-top: 90px;
}
.legal-section + .legal-section {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px dashed var(--ink-200);
}
.legal-section__head {
  position: relative;
  padding-left: 56px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.legal-section__num {
  position: absolute;
  left: 0;
  top: 2px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  padding: 6px 10px;
  border-radius: 8px;
}
.legal-section__head h2 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.legal-section__head p {
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 760px;
}
.legal-article h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 26px 0 10px;
  letter-spacing: -0.005em;
}
.legal-article p {
  color: var(--ink-800);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.legal-article ul, .legal-article ol {
  padding-left: 22px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-article li {
  color: var(--ink-800);
  font-size: 14.5px;
  line-height: 1.65;
}
.legal-article li::marker { color: #7C3AED; }
.legal-article a {
  color: #6D28D9;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-article a:hover { color: #4C1D95; }
.legal-article code {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-200);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--ink-800);
}
.legal-article strong { color: var(--ink-900); font-weight: 700; }

@media (max-width: 960px) {
  .legal-body__grid { grid-template-columns: 1fr; }
  .legal-toc__sticky { position: static; }
}
@media (max-width: 560px) {
  .legal-section__head { padding-left: 0; }
  .legal-section__num {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }
}

/* Legal page: tighten the final CTA so long copy reads cleanly */
.legal ~ .final-cta .final-cta__inner,
.legal + .final-cta .final-cta__inner,
main.legal .final-cta__inner {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.legal ~ .final-cta .final-cta__inner > div:first-child,
.legal + .final-cta .final-cta__inner > div:first-child,
main.legal .final-cta__inner > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.legal ~ .final-cta .final-cta__inner > div:first-child h2,
.legal + .final-cta .final-cta__inner > div:first-child h2,
main.legal .final-cta__inner > div:first-child h2 {
  margin-bottom: 0;
  max-width: 780px;
}
.legal ~ .final-cta .final-cta__inner > div:first-child p,
.legal + .final-cta .final-cta__inner > div:first-child p,
main.legal .final-cta__inner > div:first-child p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
}
.legal ~ .final-cta .final-cta__actions,
.legal + .final-cta .final-cta__actions,
main.legal .final-cta__actions {
  margin-top: 28px;
}

/* =============================================================
   Global Partners: world map on homepage
   ============================================================= */
.global-partners {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 112px) 0;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(167, 139, 250, 0.15), transparent 60%),
    linear-gradient(180deg, #0B0A12 0%, #14112A 100%);
  color: #fff;
}
.global-partners__aura {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 65%);
  filter: blur(80px);
  pointer-events: none;
}
.global-partners__inner {
  position: relative;
  z-index: 1;
}
.global-partners__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.global-partners__head .section__title { color: #fff; }
.global-partners__lede {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  margin-top: 14px;
}

/* ---- Map card ---- */
.global-partners__map-card {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  aspect-ratio: 950 / 620;
  border-radius: 28px;
  padding: clamp(18px, 2.4vw, 36px);
  background:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #F7F4FF 55%, #EDE7FB 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow:
    0 40px 120px -50px rgba(76, 29, 149, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  overflow: hidden;
}
.global-partners__map-card::before {
  /* subtle latitude/longitude grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
  background-size: 8.33% 10%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}
.global-partners__map-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(76, 29, 149, 0.18));
}

/* ---- Pin overlay: sits on top of the map image ---- */
.global-partners__pins {
  position: absolute;
  inset: clamp(18px, 2.4vw, 36px);
  pointer-events: none;
}
.gp-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Anchor point is the CENTER of the logo circle, sitting directly on the country.
     Teardrop tail hangs below via .gp-pin__marker::after. */
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  width: clamp(34px, 3.4vw, 44px);
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 8px 14px rgba(11, 10, 18, 0.35));
  transition: transform .22s ease, filter .22s ease;
  z-index: 2;
}
.gp-pin:hover,
.gp-pin:focus-visible {
  transform: translate(-50%, -50%) translateY(-4px) scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(76, 29, 149, 0.45));
  outline: none;
  z-index: 5;
}

/* Teardrop: circle body + rotated-square tail */
.gp-pin__marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #0B0A12;
}
.gp-pin__marker::after {
  /* tail pointing down */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: 46%;
  height: 46%;
  transform: translateX(-50%) rotate(45deg);
  background: #0B0A12;
  border-radius: 4px 0 12px 0;
  z-index: -1;
}
.gp-pin--hq .gp-pin__marker,
.gp-pin--hq .gp-pin__marker::after {
  background: linear-gradient(145deg, #7C3AED, #4C1D95);
}

/* Inner white logo circle */
.gp-pin__logo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11, 10, 18, 0.08);
  padding: 3px;
}
.gp-pin__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* For logos designed on dark backgrounds (white text etc.): give them a dark pad. */
.gp-pin__logo--dark {
  background: #0B0A12;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}
/* Per-partner tinted backgrounds for the four white-logo partners so they pop. */
.gp-pin__logo--dark:has(img[src*="laburity"])   { background: #1E3A8A; box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.35); }  /* deep blue  */
.gp-pin__logo--dark:has(img[src*="resecurity"]) { background: #991B1B; box-shadow: inset 0 0 0 1px rgba(254, 202, 202, 0.35); }  /* crimson    */
.gp-pin__logo--dark:has(img[src*="blockliz"])   { background: #065F46; box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.35); }  /* emerald    */
.gp-pin__logo--dark:has(img[src*="qarbon"])     { background: #92400E; box-shadow: inset 0 0 0 1px rgba(253, 211, 141, 0.35); }  /* amber      */
.gp-pin__initials {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: 0.04em;
  color: #4C1D95;
}
.gp-pin--hq .gp-pin__initials { color: #fff; }
.gp-pin--hq .gp-pin__logo {
  background: linear-gradient(145deg, #A78BFA, #6D28D9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Ground dot: small white dot where the tail meets the map */
.gp-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(11, 10, 18, 0.85),
    0 6px 10px rgba(11, 10, 18, 0.35);
}

/* Hover tooltip */
.gp-pin__card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  min-width: 200px;
  background: #0B0A12;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 22px 44px -18px rgba(11, 10, 18, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.gp-pin__card strong { display: block; font-weight: 700; font-size: 13.5px; color: #fff; }
.gp-pin__card em {
  display: block;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 2px;
}
.gp-pin__card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0B0A12;
}
.gp-pin:hover .gp-pin__card,
.gp-pin:focus-visible .gp-pin__card {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Partner chips directory */
.global-partners__list {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 44px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 1100px;
}
.gp-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.gp-chip:hover {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.06);
  transform: translateY(-1px);
}
/* When a chip wraps its content in an <a>, the anchor owns layout + padding. */
.gp-chip:has(> a) { padding: 0; }
.gp-chip > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.gp-chip__logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #7C3AED;
  overflow: hidden;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(11, 10, 18, 0.08);
}
.gp-chip__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gp-chip__logo--dark {
  background: #0B0A12;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}
/* Per-partner tinted backgrounds: matches the pin colors above. */
.gp-chip__logo--dark:has(img[src*="laburity"])   { background: #1E3A8A; box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.35); }
.gp-chip__logo--dark:has(img[src*="resecurity"]) { background: #991B1B; box-shadow: inset 0 0 0 1px rgba(254, 202, 202, 0.35); }
.gp-chip__logo--dark:has(img[src*="blockliz"])   { background: #065F46; box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.35); }
.gp-chip__logo--dark:has(img[src*="qarbon"])     { background: #92400E; box-shadow: inset 0 0 0 1px rgba(253, 211, 141, 0.35); }
.gp-chip strong {
  display: block;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.gp-chip em {
  display: block;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  margin-top: 2px;
}
.gp-chip--hq { border-color: rgba(167, 139, 250, 0.5); background: rgba(167, 139, 250, 0.08); }
.gp-chip--hq .gp-chip__logo {
  background: linear-gradient(135deg, #A78BFA, #6D28D9);
  color: #fff;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.global-partners__foot {
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 780px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(167, 139, 250, 0.3);
  border-radius: 12px;
}
.global-partners__foot-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
  margin-top: 6px;
}
.global-partners__foot p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
}
.global-partners__foot a {
  color: #A78BFA;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.global-partners__foot a:hover { color: #fff; }

@media (max-width: 640px) {
  .gp-pin__card { min-width: 160px; font-size: 12.5px; }
  .global-partners__map-wrap { border-radius: 16px; }
}

/* =====================================================================
   ABOUT PAGE
   ===================================================================== */

/* Hero ------------------------------------------------------------ */
.about-hero {
  position: relative;
  padding: clamp(84px, 12vw, 132px) 0 clamp(72px, 10vw, 112px);
  background:
    radial-gradient(80% 60% at 15% 10%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    radial-gradient(70% 70% at 95% 90%, rgba(76, 29, 149, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, #0B0A12 0%, #13101F 100%);
  color: #fff;
  overflow: hidden;
}
.about-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 55% at 50% 110%, rgba(167, 139, 250, 0.22) 0%, transparent 70%);
}
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  position: relative;
}
.about-hero__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: #A78BFA;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18);
}
.about-hero__title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
  color: #fff;
}
.about-hero__lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
  max-width: 56ch;
  margin: 0 0 28px;
}
.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-hero__art {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -20px rgba(11, 10, 18, 0.7);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.about-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero__art-frame {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, transparent 40%, rgba(11, 10, 18, 0.35) 100%);
  pointer-events: none;
}
@media (max-width: 820px) {
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-hero__art { aspect-ratio: 4 / 3; max-width: 560px; margin: 0 auto; transform: none; }
}

/* Story ----------------------------------------------------------- */
.about-story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: clamp(28px, 4vw, 42px);
}
.about-story__card {
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, rgba(167, 139, 250, 0.02) 100%);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 18px;
  transition: border-color .22s ease, transform .22s ease;
}
.about-story__card:hover {
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-2px);
}
.about-story__kicker {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A78BFA;
  margin-bottom: 14px;
}
.about-story__card h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.about-story__card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Vision & Mission ----------------------------------------------- */
.section--dark {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(76, 29, 149, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, #0B0A12 0%, #13101F 100%);
  color: #fff;
}
.section__title--on-dark { color: #fff; }
.section__lede--on-dark,
.section--dark .section__lede,
.section--alt .section__lede { color: rgba(255, 255, 255, 0.72); }

/* section--alt is rendered on a dark surface (see rule at ~8030); make all
   headings, copy and muted text legible against that background. */
.section--dark .section__title,
.section--alt .section__title { color: #fff; }
.section--dark .section__title .muted,
.section--alt .section__title .muted { color: rgba(255, 255, 255, 0.62); }
.section--dark .why__list h3,
.section--alt .why__list h3 { color: #fff; }
.section--dark .why__list p,
.section--alt .why__list p { color: rgba(255, 255, 255, 0.72); }

/* When multiple section--dark stack, suppress the radial glow on subsequent ones so
   the transitions read as one coherent dark surface rather than repeated "top" hotspots. */
.section--dark + .section--dark,
.section--dark + .section--alt,
.section--alt + .section--dark {
  background: linear-gradient(180deg, #0B0A12 0%, #13101F 100%);
}
.section--dark + .section--dark::before { content: none; }
.about-vm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: clamp(28px, 4vw, 42px);
}
.about-vm__card {
  padding: 32px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 22px;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.about-vm__card:hover {
  border-color: rgba(167, 139, 250, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(124, 58, 237, 0.4);
}
.about-vm__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.28), rgba(76, 29, 149, 0.35));
  color: #E9D5FF;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4);
}
.about-vm__card h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.01em;
}
.about-vm__card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Values --------------------------------------------------------- */
.about-values {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 42px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.about-values__item {
  position: relative;
  padding: 26px 24px 24px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.05), rgba(167, 139, 250, 0.015));
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 16px;
  transition: border-color .22s ease, transform .22s ease;
}
.about-values__item:hover {
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-2px);
}
.about-values__num {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #A78BFA;
  margin-bottom: 10px;
}
.about-values__item h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.about-values__item p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* Section alt (for team) ----------------------------------------- */
.section--alt {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(124, 58, 237, 0.08) 0%, transparent 70%),
    #0B0A12;
}

/* Team grid ------------------------------------------------------ */
.about-team {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 42px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.about-team__card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.about-team__card:hover {
  border-color: rgba(167, 139, 250, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(124, 58, 237, 0.45);
}
.about-team__card--lead {
  border-color: rgba(167, 139, 250, 0.5);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.02));
}
.about-team__photo {
  aspect-ratio: 1 / 1;
  background: #13101F;
  overflow: hidden;
}
.about-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
  transition: transform .3s ease;
}
.about-team__card:hover .about-team__photo img {
  transform: scale(1.04);
}
.about-team__body {
  padding: 16px 18px 18px;
}
.about-team__body h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 17px;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.about-team__role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #A78BFA;
  margin: 0;
}

/* Facts ---------------------------------------------------------- */
.about-facts {
  margin: clamp(28px, 4vw, 42px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.about-facts > div {
  padding: 20px 22px;
  background: rgba(167, 139, 250, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
}
.about-facts dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A78BFA;
  margin-bottom: 8px;
}
.about-facts dd {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.about-facts dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.4);
  transition: border-color .2s ease;
}
.about-facts dd a:hover { border-color: #A78BFA; }

/* =============================================================
   Managed SOC page
   ============================================================= */

/* --- Intro block (image-free) -------------------------------- */
.soc-intro__bullets {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vw, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.soc-intro__bullets li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.soc-intro__bullets li:hover {
  border-color: rgba(124, 58, 237, 0.30);
  box-shadow: 0 14px 28px -20px rgba(76, 29, 149, 0.25);
  transform: translateY(-2px);
}
.soc-intro__ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--violet-700);
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}
.soc-intro__bullets strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.soc-intro__bullets p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* --- Analyst tiers (L1 / L2 / L3) ---------------------------- */
.soc-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.soc-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px 28px 26px;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.soc-tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--violet-700), var(--violet-400));
}
.soc-tier--l1::before { background: linear-gradient(90deg, #A78BFA, #C4B5FD); }
.soc-tier--l2::before { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.soc-tier--l3::before { background: linear-gradient(90deg, #4C1D95, #7C3AED); }
.soc-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 20px 40px -18px rgba(76, 29, 149, 0.26);
}
.soc-tier__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-strong);
}
.soc-tier__badge {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-900) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.soc-tier--l1 .soc-tier__badge { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); }
.soc-tier--l2 .soc-tier__badge { background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%); }
.soc-tier--l3 .soc-tier__badge { background: linear-gradient(135deg, #5B21B6 0%, #2E1065 100%); }
.soc-tier__head h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.soc-tier__head p { color: var(--ink-500); font-size: 14px; }
.soc-tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.soc-tier__list li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-600);
  border-bottom: 1px solid var(--border);
}
.soc-tier__list li:last-child { border-bottom: none; }
.soc-tier__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-500);
}
.soc-tier__meta {
  margin-top: 18px;
  padding: 12px 14px;
  background: #F5F3FF;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-700);
}
.soc-tier__meta strong { color: var(--violet-800); font-weight: 600; }

/* --- SOC ops dashboard (dark mockup section) ----------------- */
.soc-ops {
  background:
    radial-gradient(70% 80% at 20% 0%, rgba(124, 58, 237, 0.35) 0%, transparent 65%),
    radial-gradient(50% 60% at 90% 100%, rgba(76, 29, 149, 0.28) 0%, transparent 65%),
    linear-gradient(180deg, #0B0A12 0%, #13101F 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.soc-ops__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.soc-ops__bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.soc-ops__bullets li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
}
.soc-ops__bullets strong { color: #fff; font-weight: 600; }
.soc-ops__bullets .dot {
  flex-shrink: 0;
  margin-top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.dot--critical { background: #F43F5E; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25); }
.dot--high     { background: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22); }
.dot--medium   { background: #EAB308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22); }
.dot--low      { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }

/* --- SOC dashboard mockup ------------------------------------ */
.soc-dash {
  background: linear-gradient(180deg, #1A1530 0%, #0F0B20 100%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.soc-dash__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 6px 12px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.12);
  margin-bottom: 14px;
}
.soc-dash__bar-dots { display: flex; gap: 6px; }
.soc-dash__bar-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(167, 139, 250, 0.28);
}
.soc-dash__bar-dots span:first-child { background: #F43F5E; }
.soc-dash__bar-dots span:nth-child(2) { background: #EAB308; }
.soc-dash__bar-dots span:nth-child(3) { background: #10B981; }
.soc-dash__bar-title {
  flex: 1;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.soc-dash__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #10B981;
  padding: 4px 10px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
}
.soc-dash__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: socPulse 1.8s ease-out infinite;
}
@keyframes socPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  80%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.soc-dash__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.soc-dash__tile {
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.15);
}
.soc-dash__tile-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.soc-dash__tile-num {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.soc-dash__tile-sub {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.soc-dash__tile--crit { border-color: rgba(244, 63, 94, 0.40); }
.soc-dash__tile--crit .soc-dash__tile-num { color: #FDA4AF; }
.soc-dash__tile--high { border-color: rgba(249, 115, 22, 0.36); }
.soc-dash__tile--high .soc-dash__tile-num { color: #FDBA74; }
.soc-dash__tile--med  { border-color: rgba(234, 179, 8, 0.36); }
.soc-dash__tile--med  .soc-dash__tile-num { color: #FDE68A; }
.soc-dash__tile--low  { border-color: rgba(16, 185, 129, 0.36); }
.soc-dash__tile--low  .soc-dash__tile-num { color: #6EE7B7; }

.soc-dash__panel {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.14);
  margin-top: 10px;
}
.soc-dash__panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.soc-dash__chart {
  width: 100%;
  height: 70px;
  display: block;
}
.soc-dash__tops {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.soc-dash__tops li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.soc-dash__tops li span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: #A78BFA;
  padding: 2px 8px;
  background: rgba(167, 139, 250, 0.10);
  border-radius: 6px;
  flex-shrink: 0;
}
.soc-dash__tops li em {
  margin-left: auto;
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

/* --- 6-step process variant --------------------------------- */
.process--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* --- Severity / SLA matrix ---------------------------------- */
.sla-matrix {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 12px 28px -20px rgba(76, 29, 149, 0.18);
}
.sla-matrix__head,
.sla-matrix__row {
  display: grid;
  grid-template-columns: 140px 1.7fr 140px 1.6fr;
  align-items: center;
  padding: 16px 22px;
  font-size: 14.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.sla-matrix__row:last-child { border-bottom: none; }
.sla-matrix__head {
  background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-800);
  padding: 14px 22px;
}
.sla-matrix__row div[role="cell"] { color: var(--ink-700); }
.sla-matrix__row strong { color: var(--ink-900); font-weight: 700; }
.sla-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.sla-pill--crit { background: #E11D48; }
.sla-pill--high { background: #EA580C; }
.sla-pill--med  { background: #CA8A04; }
.sla-pill--low  { background: #059669; }
.sla-matrix__row--critical { background: linear-gradient(90deg, rgba(244, 63, 94, 0.04) 0%, transparent 100%); }

/* --- Senior Practitioners (dark, image-free) ----------------- */
.soc-practitioners {
  background:
    radial-gradient(60% 70% at 80% 0%, rgba(124, 58, 237, 0.28) 0%, transparent 65%),
    radial-gradient(50% 50% at 10% 100%, rgba(76, 29, 149, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, #0B0A12 0%, #13101F 100%);
  color: #fff;
}
.soc-practitioners__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.soc-practitioners__copy .eyebrow { margin-bottom: 14px; }
.soc-practitioners__certs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.soc-practitioners__certs li {
  display: grid;
  place-items: center;
  padding: 18px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 12px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.soc-practitioners__certs li:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-2px);
}
.soc-practitioners__certs span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #C4B5FD;
}

.eyebrow--on-dark {
  background: rgba(167, 139, 250, 0.15);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

/* =============================================================
   Managed SOC: Solutions We Cover (logo grid)
   ============================================================= */
.soc-solutions {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 60%),
    var(--bg, #fff);
  position: relative;
}
.soc-sol-group {
  margin-top: clamp(36px, 4vw, 52px);
}
.soc-sol-group:first-of-type { margin-top: clamp(32px, 4vw, 48px); }
.soc-sol-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.soc-sol-group__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0;
}
.soc-sol-group__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #7C3AED, #A78BFA);
  border-radius: 999px;
}
.soc-sol-group__sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-500);
  max-width: 420px;
  text-align: right;
}

.soc-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.soc-sol-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  min-height: 108px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.soc-sol-chip:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 18px 32px -20px rgba(76, 29, 149, 0.25);
  transform: translateY(-3px);
  background: linear-gradient(180deg, #ffffff 0%, #FAF8FF 100%);
}
.soc-sol-chip img {
  max-width: 100%;
  max-height: 32px;
  width: auto;
  height: 32px;
  object-fit: contain;
  color: var(--ink-800);
  opacity: 0.85;
  transition: opacity .25s ease, color .25s ease;
}
.soc-sol-chip:hover img {
  opacity: 1;
  color: var(--violet-800);
}
.soc-sol-chip span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.3;
}
.soc-sol-chip--text b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.soc-sol-chip--text span {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 2px;
}

/* Small colored accent dot next to text-logo vendor name ------ */
.sol-accent {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sol-accent--crowdstrike { background: #E03530; box-shadow: 0 0 0 3px rgba(224, 53, 48, 0.14); }
.sol-accent--s1          { background: #6B0AEA; box-shadow: 0 0 0 3px rgba(107, 10, 234, 0.14); }
.sol-accent--sophos      { background: #0F4C8C; box-shadow: 0 0 0 3px rgba(15, 76, 140, 0.14); }
.sol-accent--radiant     { background: linear-gradient(135deg, #7C3AED, #F472B6); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.sol-accent--darktrace   { background: #1E40AF; box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.14); }
.sol-accent--vectra      { background: #FF5F00; box-shadow: 0 0 0 3px rgba(255, 95, 0, 0.14); }
.sol-accent--dropzone    { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14); }
.sol-accent--prophet     { background: #0EA5E9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14); }

/* AI group gets a subtle premium accent --------------------- */
.soc-sol-group--ai .soc-sol-grid {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(124, 58, 237, 0.05) 0%, transparent 65%);
  padding: 4px;
  border-radius: 18px;
}
.soc-sol-chip--ai {
  position: relative;
  border-color: rgba(124, 58, 237, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #FAF8FF 100%);
}
.soc-sol-chip--ai::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #A78BFA 50%, transparent 100%);
  opacity: 0.8;
}
.soc-sol-chip--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border-color: rgba(124, 58, 237, 0.28);
}
.soc-sol-chip--wide b { font-size: 19px; }

.soc-sol-footnote {
  margin-top: clamp(36px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-400, var(--ink-500));
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .soc-tiers { grid-template-columns: 1fr; }
  .process--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soc-ops__wrap,
  .soc-practitioners__wrap { grid-template-columns: 1fr; }
  .soc-intro__bullets { grid-template-columns: 1fr; }
  .soc-sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soc-sol-group__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .soc-sol-group__sub { text-align: left; max-width: none; }
  .sla-matrix__head,
  .sla-matrix__row {
    grid-template-columns: 110px 1fr 110px 1fr;
    padding: 14px 16px;
  }
}
@media (max-width: 720px) {
  .process--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sla-matrix__head { display: none; }
  .sla-matrix__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 16px;
  }
  .sla-matrix__row div[role="cell"]:nth-child(1) { order: 1; }
  .sla-matrix__row div[role="cell"]:nth-child(3)::before { content: "First response: "; color: var(--ink-500); font-weight: 500; }
  .sla-matrix__row div[role="cell"]:nth-child(4)::before { content: "Escalation: "; color: var(--ink-500); font-weight: 500; }
  .soc-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soc-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soc-sol-chip--wide { grid-column: span 2; }
  .soc-practitioners__certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   AI & LLM Pentest page
   ============================================================= */

/* --- Hero tint: cyan-violet aura instead of pure violet ----- */
.ai-hero::before {
  background:
    radial-gradient(60% 55% at 18% 25%, rgba(34, 211, 238, 0.16) 0%, transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(167, 139, 250, 0.18) 0%, transparent 65%),
    radial-gradient(70% 60% at 50% 100%, rgba(124, 58, 237, 0.12) 0%, transparent 70%) !important;
}

.eyebrow--ai {
  color: #0E7490;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(167, 139, 250, 0.12));
  border-color: rgba(34, 211, 238, 0.28);
}

.gradient-text--ai {
  background: linear-gradient(92deg, #7C3AED 0%, #6D28D9 35%, #0891B2 70%, #0E7490 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* --- Stats grid ---------------------------------------------- */
.ai-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}
.ai-stat {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(22px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 0 rgba(17, 12, 38, 0.02), 0 12px 28px -20px rgba(76, 29, 149, 0.14);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.ai-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #A78BFA, #22D3EE);
  opacity: 0.7;
}
.ai-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 10px 30px -14px rgba(76, 29, 149, 0.28);
}
.ai-stat__num {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(92deg, #4C1D95 0%, #7C3AED 55%, #0891B2 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ai-stat__num span {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 4px;
  opacity: 0.85;
}
.ai-stat__label {
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}
.ai-stat__label strong { color: var(--ink-900); font-weight: 700; }
.ai-stat__source {
  margin-top: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  padding-top: 8px;
}

.ai-stat--hero {
  grid-column: span 2;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(34, 211, 238, 0.03)),
    #fff;
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 18px 48px -24px rgba(76, 29, 149, 0.28);
}
.ai-stat--hero::before { height: 4px; opacity: 1; }
.ai-stat--hero .ai-stat__num { font-size: clamp(48px, 6vw, 72px); }
.ai-stat--hero .ai-stat__label { font-size: 17px; }

/* --- Attack flow section (dark) ------------------------------ */
.ai-flow {
  background:
    radial-gradient(60% 50% at 18% 10%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(45% 50% at 90% 90%, rgba(34, 211, 238, 0.16) 0%, transparent 65%),
    linear-gradient(180deg, #0E0920 0%, #0B0A12 100%);
  color: #fff;
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}
.ai-flow__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ai-flow__copy .section__title { margin-top: 10px; }
.ai-flow__copy .section__lede { margin-bottom: 22px; }
.ai-flow__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-flow__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.ai-flow__bullets strong { color: #fff; font-weight: 700; margin-right: 4px; }
.ai-flow__bullets .dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 7px;
}
.ai-flow__diagram {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 56px -24px rgba(0, 0, 0, 0.6);
}
.ai-flow__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
.ai-flow__diagram::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(34, 211, 238, 0.25), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* --- OWASP LLM Top 10 grid ----------------------------------- */
.owasp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.owasp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.owasp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ink-400, #9CA3AF);
}
.owasp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(17, 12, 38, 0.18);
}
.owasp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.owasp-card__code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
  background: var(--bg-alt, #F7F5FB);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.owasp-card__sev {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.owasp-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.3;
}
.owasp-card p {
  color: var(--ink-600, #4B5563);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Severity color variants */
.owasp-card--crit::before { background: linear-gradient(90deg, #F43F5E, #B91C1C); }
.owasp-card--crit .owasp-card__sev { background: rgba(244, 63, 94, 0.10); color: #B91C1C; }
.owasp-card--crit:hover { border-color: rgba(244, 63, 94, 0.35); }

.owasp-card--high::before { background: linear-gradient(90deg, #F97316, #C2410C); }
.owasp-card--high .owasp-card__sev { background: rgba(249, 115, 22, 0.10); color: #C2410C; }
.owasp-card--high:hover { border-color: rgba(249, 115, 22, 0.35); }

.owasp-card--med::before { background: linear-gradient(90deg, #EAB308, #A16207); }
.owasp-card--med .owasp-card__sev { background: rgba(234, 179, 8, 0.12); color: #854D0E; }
.owasp-card--med:hover { border-color: rgba(234, 179, 8, 0.4); }

.owasp-card--emerging::before { background: linear-gradient(90deg, #A78BFA, #22D3EE); }
.owasp-card--emerging .owasp-card__sev {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(34, 211, 238, 0.14));
  color: #6D28D9;
}
.owasp-card--emerging .owasp-card__code {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(34, 211, 238, 0.14));
  color: #6D28D9;
}
.owasp-card--emerging:hover { border-color: rgba(124, 58, 237, 0.35); }

/* --- Why our team is credible (on alt background) ----------- */
.ai-expertise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}
.ai-exp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(22px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.ai-exp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 14px 32px -18px rgba(76, 29, 149, 0.22);
}
.ai-exp-card__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(34, 211, 238, 0.14));
  color: #6D28D9;
  border: 1px solid rgba(167, 139, 250, 0.28);
}
.ai-exp-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.3;
}
.ai-exp-card p {
  color: var(--ink-600, #4B5563);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* --- Responsive breakpoints ---------------------------------- */
@media (max-width: 1024px) {
  .ai-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-stat--hero { grid-column: span 2; }
  .ai-flow__wrap { grid-template-columns: 1fr; }
  .owasp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-stats__grid { grid-template-columns: 1fr; }
  .ai-stat--hero { grid-column: span 1; }
  .owasp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-expertise { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .owasp-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Threat Intelligence page
   ============================================================= */

/* --- Hero tint: amber-violet (threat vibe) ------------------- */
.ti-hero::before {
  background:
    radial-gradient(60% 55% at 18% 25%, rgba(249, 115, 22, 0.16) 0%, transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(167, 139, 250, 0.22) 0%, transparent 65%),
    radial-gradient(70% 60% at 50% 100%, rgba(244, 63, 94, 0.10) 0%, transparent 70%) !important;
}

.eyebrow--ti {
  color: #9A3412;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.10), rgba(167, 139, 250, 0.12));
  border-color: rgba(249, 115, 22, 0.30);
}
.eyebrow--on-dark.eyebrow--ti {
  color: #FBA74A;
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.32);
}

.gradient-text--ti {
  background: linear-gradient(92deg, #7C3AED 0%, #C2410C 50%, #B91C1C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* --- Intelligence pipeline illustration section -------------- */
.ti-flow {
  background:
    radial-gradient(60% 50% at 18% 10%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(45% 50% at 90% 90%, rgba(249, 115, 22, 0.16) 0%, transparent 65%),
    linear-gradient(180deg, #0E0920 0%, #0B0A12 100%);
  color: #fff;
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}
.ti-flow__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ti-flow__copy .section__title { margin-top: 10px; }
.ti-flow__copy .section__lede { margin-bottom: 22px; }
.ti-flow__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ti-flow__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.ti-flow__bullets strong { color: #fff; font-weight: 700; margin-right: 4px; }
.ti-flow__bullets .dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 7px;
}
.ti-flow__diagram {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 56px -24px rgba(0, 0, 0, 0.6);
}
.ti-flow__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
.ti-flow__diagram::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(249, 115, 22, 0.25), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* --- Coverage grid (8 cards) --------------------------------- */
.ti-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.ti-cov-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ti-cov-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #A78BFA, #F97316);
  opacity: 0.7;
}
.ti-cov-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 14px 32px -18px rgba(76, 29, 149, 0.22);
}
.ti-cov-card__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(249, 115, 22, 0.14));
  color: #6D28D9;
  border: 1px solid rgba(167, 139, 250, 0.28);
}
.ti-cov-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.3;
}
.ti-cov-card p {
  color: var(--ink-600, #4B5563);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* --- Featured platform card (Resecurity) --------------------- */
.ti-featured {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
  padding: clamp(22px, 2.4vw, 30px);
  margin-bottom: clamp(16px, 2vw, 24px);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(249, 115, 22, 0.05));
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.ti-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #A78BFA, #F97316, #B91C1C);
}
.ti-featured__ic {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7C3AED, #C2410C);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.5);
}
.ti-featured__copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ti-featured__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6D28D9;
}
.ti-featured h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.25;
}
.ti-featured p {
  color: var(--ink-600, #4B5563);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* --- Responsive breakpoints ---------------------------------- */
@media (max-width: 1024px) {
  .ti-flow__wrap { grid-template-columns: 1fr; }
  .ti-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ti-featured { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) {
  .ti-coverage { grid-template-columns: 1fr; }
}

/* =============================================================
   Quote strip: multi-testimonial pattern used across pages
   ============================================================= */
.quote-strip {
  padding: 72px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F7FD 100%);
}
.quote-strip--dark {
  background: radial-gradient(ellipse at top, #241a46 0%, #120d26 70%);
  color: #E8E4F5;
}
.quote-strip__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.quote-strip__eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7C3AED;
  margin-bottom: 12px;
}
.quote-strip--dark .quote-strip__eyebrow { color: #C4B5FD; }
.quote-strip__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 0;
}
.quote-strip--dark .quote-strip__title { color: #fff; }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.quote-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.quote-grid--1 { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #ECE8F5;
  border-radius: 16px;
  box-shadow: 0 8px 24px -12px rgba(76, 29, 149, 0.14), 0 2px 6px rgba(20, 15, 40, 0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(76, 29, 149, 0.25), 0 4px 10px rgba(20, 15, 40, 0.06);
}
.quote-strip--dark .quote-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.quote-card--featured {
  border-color: rgba(124, 58, 237, 0.28);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(34, 211, 238, 0.02)), #fff;
}
.quote-card--featured::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #A78BFA, #F97316);
}

.quote-card__mark {
  width: 26px;
  height: 26px;
  color: #A78BFA;
  flex-shrink: 0;
}
.quote-card blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-800);
}
.quote-strip--dark .quote-card blockquote { color: #E8E4F5; }

.quote-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #EEE8F7;
}
.quote-strip--dark .quote-card__author { border-top-color: rgba(255,255,255,0.08); }
.quote-card__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
  letter-spacing: -0.02em;
}
.quote-card__author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.quote-card__name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 14.5px;
}
.quote-strip--dark .quote-card__name { color: #fff; }
.quote-card__role {
  font-size: 13px;
  color: var(--ink-500);
}
.quote-strip--dark .quote-card__role { color: #C4B5FD; }

@media (max-width: 1024px) {
  .quote-grid, .quote-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-strip { padding: 56px 0; }
}
@media (max-width: 720px) {
  .quote-grid, .quote-grid--2, .quote-grid--1 { grid-template-columns: 1fr !important; gap: 14px; }
  .quote-strip { padding: 44px 0; }
  .quote-card { padding: 20px 18px; }
  .quote-card blockquote { font-size: 15px; }
}

/* =============================================================
   Global mobile responsiveness (site-wide)
   Added last so it overrides any earlier rule with equal specificity.
   Breakpoints:
     - 1024px: tablet (grids collapse 4-col -> 2-col)
     - 720px:  mobile (grids -> 1-col, nav becomes drawer)
     - 480px:  small phones (tightest typography & padding)
   ============================================================= */

/* --- Mobile-hide utility
   Add `mobile-hidden` to any <section> / element to hide it below 720px. */
.mobile-hidden { display: block; }
@media (max-width: 720px) {
  .mobile-hidden { display: none !important; }
}

/* --- Tablet: tame 4-col grids without breaking desktop */
@media (max-width: 1024px) {
  html { scroll-padding-top: 72px; }
  .container { padding-left: 24px; padding-right: 24px; }

  /* Generic 3-4 col card grids */
  .cards-grid, .values-grid, .ops-grid, .solutions-grid,
  .coverage-grid, .picker-grid, .stats-grid, .ai-stats__grid,
  .partners-grid, .industries-grid, .team-grid, .stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hero layouts: stack image/art beneath copy */
  .hero__inner, .svc-hero__inner, .about-hero__inner,
  .contact-hero__inner, .blog-hero__inner, .cta__inner,
  .final-cta__inner, .hero-split, .hero__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* --- Mobile: the main collapse ------------------------------ */
@media (max-width: 720px) {
  html { scroll-padding-top: 64px; font-size: 15px; }
  body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

  .container { padding-left: 18px; padding-right: 18px; }

  /* Typography scales */
  h1, .h1 { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.15 !important; }
  h2, .h2, .section__title { font-size: clamp(24px, 6vw, 30px) !important; line-height: 1.2 !important; }
  h3, .h3 { font-size: clamp(19px, 5vw, 22px) !important; line-height: 1.3 !important; }
  p, li { font-size: 15px; line-height: 1.6; }

  /* Section vertical rhythm */
  .section, .svc-hero, .hero, .final-cta, .cta,
  .about-hero, .blog-hero, .contact-shell, .contact-channels,
  .contact-stats, .contact-picker, .contact-faq,
  .partners, .metrics, .community, .testimonial,
  .global-partners, .soc-intro, .soc-solutions, .soc-ops,
  .soc-practitioners, .ti-hero, .ai-hero {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* All multi-col grids -> single column on mobile */
  .cards-grid, .values-grid, .ops-grid, .solutions-grid,
  .coverage-grid, .picker-grid, .stats-grid, .ai-stats__grid,
  .partners-grid, .industries-grid, .team-grid, .stack-grid,
  .blog-list, .community__grid, .insights-grid, .final-cta__grid,
  .metrics__grid, .stats__grid, .why__grid, .process__grid,
  .ti-coverage, .ai-stats__grid, .owasp-grid, .ai-expertise {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Nav: only mobile drawer + brand visible, toggle pushed to far right */
  .nav__links, .nav__cta { display: none !important; }
  .nav__toggle { display: inline-flex !important; margin-left: auto !important; }
  .nav__inner { padding: 12px 0; }

  /* Buttons full-width on mobile when in a stacked row */
  .hero__cta .btn, .cta__actions .btn, .final-cta__actions .btn,
  .svc-hero__cta .btn { width: 100%; justify-content: center; }

  /* Footer: single column */
  .foot__inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .foot__brand { max-width: 100%; }
  .foot__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Tables / cards overflow guard */
  table, .table-wrap { display: block; width: 100%; overflow-x: auto; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* Forms: stack and widen
     NOTE: do NOT force .contact-form to display:block — it's a flex column
     with a 30px gap between __head / __body / __consent / __foot. Killing
     flex here collapses those sections into each other on mobile. */
  .contact-form__grid, .contact-form__row {
    display: block !important;
  }
  .contact-form__field {
    width: 100% !important;
  }
  /* Only stretch text inputs — NOT checkboxes/radios (those need to stay
     at their natural small size; stretching them breaks the consent row). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select, textarea { width: 100% !important; font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .contact-form__submit { width: 100% !important; min-width: 0 !important; justify-content: center; }

  /* Contact form: tighten padding + top shell so the card isn't cramped
     inside a 375px viewport (32px * 2 = 64px of padding was eating the
     content area). Also normalise heading sizes inside the form. */
  .contact-shell--top {
    padding-top: clamp(80px, 14vw, 100px) !important;
    padding-bottom: 24px !important;
  }
  .contact-form {
    padding: 20px 18px !important;
    border-radius: 18px !important;
    gap: 20px !important;
  }
  .contact-form__head { padding-bottom: 16px !important; gap: 6px !important; }
  .contact-form__head h3 { font-size: 11.5px !important; letter-spacing: 0.14em !important; }
  .contact-form__head p { font-size: 15.5px !important; line-height: 1.4 !important; }
  .contact-form__body { gap: 14px !important; }
  .contact-form__col { gap: 12px !important; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea {
    padding: 13px 14px !important;
    border-radius: 12px !important;
  }
  .contact-form textarea { min-height: 140px !important; }
  .contact-form__field--tall textarea { min-height: 140px !important; }
  .contact-form__consent {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .contact-form__consent label { font-size: 13px !important; gap: 10px !important; }
  .contact-form__foot {
    padding-top: 14px !important;
    gap: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .contact-form__submit {
    padding: 15px 24px !important;
    font-size: 15.5px !important;
    min-width: 0 !important;
  }
  .contact-form__hint {
    min-width: 0 !important;
    font-size: 12.5px !important;
    text-align: center;
  }
  .contact-form__result { padding: 12px 14px !important; font-size: 13.5px !important; }

  /* Picker cards (contact page) — stack vertically */
  .picker-card { padding: 16px; }

  /* Hero stat strips — flex wrap */
  .hero__stats, .svc-hero__stats, .ai-stats__grid, .ti-hero__stats {
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Long text inputs / code blocks */
  pre, code, kbd { white-space: pre-wrap; word-break: break-word; }

  /* Images/figures full bleed */
  figure { margin: 0 0 20px 0; }

  /* Hide gallery / decorative strips by default on mobile.
     Pages can opt back in with .mobile-keep on the element. */
  .partners__track, .marquee, .community__reel {
    /* Let them stay but shrink; individual pages can add mobile-hidden */
  }

  /* Eyebrow / tag text */
  .eyebrow, .tag { font-size: 11px !important; letter-spacing: 0.08em; }

  /* Remove desktop-only negative margins that cause overflow */
  [class*="--offset"], [class*="--overlap"] { margin-left: 0 !important; margin-right: 0 !important; }
}

/* --- Small phones (iPhone SE / Galaxy S) -------------------- */
@media (max-width: 480px) {
  html { font-size: 14.5px; }
  .container { padding-left: 14px; padding-right: 14px; }

  h1, .h1 { font-size: clamp(26px, 8vw, 32px) !important; }
  h2, .h2, .section__title { font-size: clamp(22px, 7vw, 26px) !important; }
  .eyebrow, .tag { font-size: 10.5px !important; }

  /* Tighter section padding on very small screens */
  .section, .svc-hero, .hero, .final-cta, .cta {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Buttons: prevent text wrap on tiny screens */
  .btn { padding: 12px 18px; font-size: 14.5px; }

  /* Footer brand + meta tighter */
  .foot__brand p { font-size: 14px; }
  .foot__col h4 { font-size: 13px; }
  .foot__col a { font-size: 14px; }
}

/* --- Accessibility: reduced motion respects user preference -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}