/* =========================================================
   Tazkia Intelligence — Global Styles
   ========================================================= */

:root {
  /* Palette */
  --bg-0: #060a1f;
  --bg-1: #0a0f2c;
  --bg-2: #0f1840;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #e7ecff;
  --text-muted: #9aa6cf;
  --text-dim: #6f7aa6;

  --accent: #2ea1ff;          /* electric blue */
  --accent-2: #18e0c8;         /* teal */
  --accent-3: #e6c87a;         /* subtle gold */
  --accent-glow: rgba(46, 161, 255, 0.45);

  /* Layout */
  --container: 1200px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 600px at 85% -10%, rgba(46, 161, 255, 0.20), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(24, 224, 200, 0.12), transparent 60%),
    radial-gradient(600px 320px at 95% 45%, rgba(230, 200, 122, 0.09), transparent 65%),
    radial-gradient(800px 700px at 50% 110%, rgba(230, 200, 122, 0.07), transparent 65%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-0));
  background-attachment: fixed;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s var(--easing);
}

a:hover {
  color: var(--accent-2);
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; color: var(--text-muted); }

ul { color: var(--text-muted); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(24, 224, 200, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(230, 200, 122, 0.10) 0%, rgba(24, 224, 200, 0.06) 100%);
  position: relative;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 8px var(--accent-3);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.gradient-text {
  background: linear-gradient(120deg, #ffffff 0%, var(--accent) 45%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-center { text-align: center; }
.muted { color: var(--text-muted); }

/* ----------------- Buttons ----------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.25s var(--easing),
    box-shadow 0.25s var(--easing),
    background 0.25s var(--easing),
    border-color 0.25s var(--easing),
    color 0.25s var(--easing);
  white-space: nowrap;
}

.btn-primary {
  color: #001428;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:
    0 10px 30px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(230, 200, 122, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px -12px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(230, 200, 122, 0.35);
  color: #001428;
}

.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-arrow::after {
  content: "→";
  font-weight: 400;
  transition: transform 0.25s var(--easing);
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* ----------------- Navigation ----------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(6, 10, 31, 0.65);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--easing), background 0.3s var(--easing);
}

.nav.scrolled {
  background: rgba(6, 10, 31, 0.85);
  border-bottom-color: var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 140px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.brand:hover { color: var(--text); }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  color: #001428;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}

.brand-name { display: inline-flex; align-items: baseline; gap: 6px; }
.brand-name span { color: var(--accent-2); }

.brand-logo {
  height: 120px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.25s var(--easing);
}

.brand:hover .brand-logo { transform: scale(1.03); }

.brand-logo-footer {
  height: 200px;
}

.brand-footer { margin-bottom: 8px; display: inline-flex; }
.footer-brand .brand-footer { margin-bottom: 10px; }
.footer-brand p { margin-top: 6px !important; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  transition: color 0.2s var(--easing), background 0.2s var(--easing);
}

.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: "";
  display: block;
  height: 2px;
  width: 22px;
  margin: 6px auto -8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

.nav-cta { margin-left: 8px; padding: 10px 18px; font-size: 0.9rem; }

/* Premium hamburger toggle: glassy square with a subtle gradient ring
   on hover, asymmetric lines (bottom slightly shorter) for a refined
   modern feel, smooth morph to X when the menu opens. */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.25s var(--easing),
    background 0.25s var(--easing),
    transform 0.25s var(--easing),
    box-shadow 0.25s var(--easing);
}

/* Soft blue/gold gradient ring that fades in on hover/focus. */
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(46, 161, 255, 0.55) 0%,
    rgba(24, 224, 200, 0.10) 45%,
    rgba(230, 200, 122, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--easing);
  pointer-events: none;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(46, 161, 255, 0.10);
  border-color: transparent;
  box-shadow: 0 8px 22px -10px var(--accent-glow);
}
.nav-toggle:hover::before,
.nav-toggle:focus-visible::before { opacity: 1; }

.nav-toggle:active { transform: translateY(1px); }

/* Hamburger lines: three thin bars with the bottom slightly shorter
   for an asymmetric, considered look. */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.32s var(--easing),
    opacity 0.22s var(--easing),
    width 0.32s var(--easing),
    background 0.22s var(--easing);
}
.nav-toggle span { width: 20px; position: relative; }
.nav-toggle span::before { width: 20px; position: absolute; left: 0; top: -7px; }
.nav-toggle span::after  { width: 13px; position: absolute; left: 0; top:  7px; }

/* On hover, the short bottom line extends and the colour shifts to
   the brand teal. Subtle but feels intentional. */
.nav-toggle:hover span,
.nav-toggle:hover span::before,
.nav-toggle:hover span::after,
.nav-toggle:focus-visible span,
.nav-toggle:focus-visible span::before,
.nav-toggle:focus-visible span::after { background: var(--accent-2); }
.nav-toggle:hover span::after,
.nav-toggle:focus-visible span::after { width: 20px; }

/* Open state: clean morph to a balanced X. */
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); width: 20px; }
.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); width: 20px; }

/* ----------------- Hero ----------------- */
.hero {
  position: relative;
  padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 72px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg svg {
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 70% 30%, rgba(46, 161, 255, 0.18), transparent 60%),
    radial-gradient(500px 300px at 20% 70%, rgba(24, 224, 200, 0.12), transparent 60%),
    radial-gradient(600px 200px at 50% 100%, rgba(230, 200, 122, 0.08), transparent 70%);
}

/* Subtle gold streak that runs diagonally across the hero */
.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 200, 122, 0.45) 50%, transparent 100%);
  transform: rotate(-12deg);
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -8%;
  right: -8%;
  width: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 200, 122, 0.35) 50%, transparent 100%);
  transform: rotate(-8deg);
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.hero h1 {
  margin-bottom: 22px;
}

.hero p.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 36px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.hero-meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.hero-meta .stat {
  text-align: center;
  padding: 18px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  backdrop-filter: blur(10px);
}

.hero-meta strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-meta span {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ----------------- Page Hero (interior pages) ----------------- */
.page-hero {
  padding: clamp(72px, 9vw, 110px) 0 clamp(40px, 6vw, 70px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(46, 161, 255, 0.18), transparent 70%),
    radial-gradient(400px 250px at 80% 100%, rgba(24, 224, 200, 0.10), transparent 70%),
    radial-gradient(500px 160px at 20% 100%, rgba(230, 200, 122, 0.08), transparent 70%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 18%;
  right: -10%;
  width: 55%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 200, 122, 0.35) 50%, transparent 100%);
  transform: rotate(-10deg);
  filter: blur(0.5px);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ----------------- Cards / Grids ----------------- */
.grid {
  display: grid;
  gap: 22px;
}

.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(12px);
  transition:
    transform 0.35s var(--easing),
    border-color 0.35s var(--easing),
    box-shadow 0.35s var(--easing);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(46, 161, 255, 0.4), rgba(24, 224, 200, 0.0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--easing);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 60px -30px rgba(46, 161, 255, 0.35);
}

.card:hover::before { opacity: 1; }

.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(46, 161, 255, 0.18), rgba(24, 224, 200, 0.16));
  border: 1px solid rgba(46, 161, 255, 0.25);
  margin-bottom: 18px;
  color: var(--accent);
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
  margin: 0;
}

/* ----------------- Value Prop ----------------- */
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.value {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.value strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 8px;
}

.value p { margin: 0; font-size: 0.9rem; }

/* ----------------- Human + AI Collaboration ----------------- */
.collab-grid {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 12px;
}

.collab-card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 0.35s var(--easing), transform 0.35s var(--easing);
}

.collab-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.collab-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
}

.collab-human::before {
  background: linear-gradient(140deg, rgba(46, 161, 255, 0.45), rgba(46, 161, 255, 0) 65%);
}

.collab-ai::before {
  background: linear-gradient(220deg, rgba(24, 224, 200, 0.45), rgba(230, 200, 122, 0.18) 50%, rgba(24, 224, 200, 0) 80%);
}

.collab-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.collab-human .collab-tag {
  color: var(--accent);
  background: rgba(46, 161, 255, 0.10);
  border: 1px solid rgba(46, 161, 255, 0.32);
}

.collab-ai .collab-tag {
  color: var(--accent-2);
  background: rgba(24, 224, 200, 0.10);
  border: 1px solid rgba(24, 224, 200, 0.32);
}

.collab-card h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.collab-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.collab-card li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.collab-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.collab-human li::before {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.collab-ai li::before {
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(24, 224, 200, 0.6);
}

.collab-connector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.connector-rail {
  position: relative;
  width: 4px;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  overflow: visible;
  box-shadow: 0 0 24px rgba(46, 161, 255, 0.35);
}

.connector-dot {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, 0);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  animation: collab-flow 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.connector-dot-1 { animation-delay: 0s; }
.connector-dot-2 { animation-delay: 1.5s; background: var(--accent-3); box-shadow: 0 0 14px var(--accent-3); }
.connector-dot-3 { animation-delay: 3s;   background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }

@keyframes collab-flow {
  0%   { top: -2%;  opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  90%  { top: 100%; opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { top: 102%; opacity: 0; transform: translate(-50%, 0) scale(0.6); }
}

.connector-label {
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, 0) rotate(90deg);
  transform-origin: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  background: var(--bg-0);
  padding: 0 10px;
}

.collab-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.outcome-pill {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.outcome-pill strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}

.outcome-pill span {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .collab-grid {
    grid-template-columns: 1fr;
  }
  .collab-connector {
    height: 80px;
    flex-direction: row;
  }
  .connector-rail {
    width: 70%;
    height: 4px;
  }
  .connector-dot {
    top: 50%;
    left: -2%;
    transform: translate(0, -50%);
    animation-name: collab-flow-h;
  }
  @keyframes collab-flow-h {
    0%   { left: -2%;  opacity: 0; transform: translate(0, -50%) scale(0.6); }
    10%  { opacity: 1; transform: translate(0, -50%) scale(1); }
    90%  { left: 100%; opacity: 1; transform: translate(0, -50%) scale(1); }
    100% { left: 102%; opacity: 0; transform: translate(0, -50%) scale(0.6); }
  }
  .connector-label {
    transform: translate(-50%, 0);
  }
  .collab-outcomes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .collab-outcomes {
    grid-template-columns: 1fr;
  }
}

/* ----------------- Service detail (Services page) ----------------- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.service-block:first-of-type { border-top: none; }

.service-block .meta .num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  margin-bottom: 8px;
  display: block;
}

.service-block h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.service-block ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.service-block li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.service-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}

.service-block .benefits {
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background:
    radial-gradient(280px 140px at 100% 0%, rgba(46, 161, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.service-block .benefits h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 12px;
}

.service-block .benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.service-block .benefits-list li {
  padding-left: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.service-block .benefits-list li::before { display: none; }

.service-block .benefits-list strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}

/* ----------------- About page ----------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.pillar {
  padding: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.pillar h4 {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.principle {
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  text-align: left;
}

.principle .num {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent-3);
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}

.principle strong {
  display: block;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 6px;
}

.principle p { margin: 0; font-size: 0.88rem; }

/* ----------------- Case studies ----------------- */
.case-grid {
  display: grid;
  gap: 26px;
}

.case {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  transition: border-color 0.3s var(--easing), transform 0.3s var(--easing);
}

.case:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.case .industry {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
  display: block;
}

.case .case-side h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  line-height: 1.2;
}

.case .placeholder-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-3);
  padding: 4px 10px;
  border: 1px dashed rgba(230, 200, 122, 0.4);
  border-radius: 999px;
}

.case-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.case-detail h4 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.case-detail p { font-size: 0.92rem; margin: 0; }

.case .outcome-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}
.case .outcome-stats span {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-2);
}
.case .outcome-stats em {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

/* ----------------- Focus section ----------------- */
.focus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.focus .panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  background:
    radial-gradient(400px 250px at 80% 20%, rgba(46, 161, 255, 0.18), transparent 70%),
    radial-gradient(300px 200px at 20% 80%, rgba(24, 224, 200, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}

.focus .panel svg { width: 100%; height: auto; opacity: 0.85; }

.focus .focus-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.focus .focus-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
}

.focus .focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 10px var(--accent-3);
}

/* ----------------- Agentforce cloud orchestration (focus panel) ----------------- */
.cloud-panel {
  padding: 0;
  min-height: 460px;
  display: grid;
  place-items: stretch;
  background:
    radial-gradient(640px 420px at 50% 50%, rgba(46, 161, 255, 0.12), transparent 70%),
    radial-gradient(420px 280px at 18% 82%, rgba(24, 224, 200, 0.08), transparent 70%),
    radial-gradient(380px 220px at 82% 18%, rgba(230, 200, 122, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border-color: rgba(230, 200, 122, 0.16);
}

.cloud-orchestration {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  border-radius: inherit;
}

.cloud-streaks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Connection paths - referenced by id by the moving dots */
.cloud-link {
  stroke-dasharray: 4 6;
  opacity: 0.85;
}

/* Moving data dots travelling between hub and clouds */
.cloud-dot {
  filter: drop-shadow(0 0 6px currentColor);
}
.cloud-dot-1 { offset-path: path("M250,210 C190,170 140,140 90,108"); animation: cloud-flow-out 6s linear infinite; }
.cloud-dot-2 { offset-path: path("M250,210 C310,170 360,140 410,108"); animation: cloud-flow-in 7s linear infinite; animation-delay: 1.4s; }
.cloud-dot-3 { offset-path: path("M250,210 C190,260 140,300 90,332"); animation: cloud-flow-in 6.5s linear infinite; animation-delay: 2.8s; }
.cloud-dot-4 { offset-path: path("M250,210 C310,260 360,300 410,332"); animation: cloud-flow-out 7.5s linear infinite; animation-delay: 4.2s; }

@keyframes cloud-flow-out {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cloud-flow-in {
  0%   { offset-distance: 100%; opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { offset-distance: 0%;   opacity: 0; }
}

/* Central Agentforce hub */
.cloud-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.cloud-hub .hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(230, 200, 122, 0.35);
  box-shadow:
    0 0 30px rgba(230, 200, 122, 0.18) inset,
    0 0 40px rgba(46, 161, 255, 0.18);
  animation: cloud-pulse 5.5s ease-in-out infinite;
}

.cloud-hub .hub-core {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff 0%, var(--accent-2) 22%, var(--accent) 65%, rgba(46, 161, 255, 0) 100%);
  box-shadow:
    0 0 60px rgba(46, 161, 255, 0.5),
    0 0 28px rgba(230, 200, 122, 0.32),
    inset 0 0 18px rgba(255, 255, 255, 0.55);
  animation: cloud-pulse 4s ease-in-out infinite;
}

.cloud-hub .hub-label {
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Floating capability cloud nodes */
.cloud-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  box-shadow:
    0 8px 22px -10px rgba(46, 161, 255, 0.25),
    0 0 0 1px rgba(230, 200, 122, 0.06) inset;
  animation: cloud-bob 7s ease-in-out infinite;
}

.cloud-node .cloud-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(46, 161, 255, 0.14);
  border: 1px solid rgba(46, 161, 255, 0.32);
  color: var(--accent-2);
}

.cloud-node-tl { top: 16%; left: 6%;  animation-delay: 0s; }
.cloud-node-tr { top: 16%; right: 6%; animation-delay: 1.8s; }
.cloud-node-bl { bottom: 16%; left: 6%;  animation-delay: 3.6s; }
.cloud-node-br { bottom: 16%; right: 6%; animation-delay: 5.4s; }

.cloud-node-tr .cloud-icon { color: var(--accent); }
.cloud-node-bl .cloud-icon { color: var(--accent-3); background: rgba(230, 200, 122, 0.10); border-color: rgba(230, 200, 122, 0.35); }
.cloud-node-br .cloud-icon { color: var(--accent-2); }

@keyframes cloud-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

@keyframes cloud-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 720px) {
  .cloud-orchestration { height: 380px; }
  .cloud-hub { width: 110px; height: 110px; }
  .cloud-hub .hub-core { width: 64px; height: 64px; }
  .cloud-hub .hub-label { font-size: 0.72rem; }
  .cloud-node { font-size: 0.72rem; padding: 8px 12px; }
  .cloud-node .cloud-icon { width: 26px; height: 26px; }
  .cloud-node-tl, .cloud-node-tr { top: 8%; }
  .cloud-node-bl, .cloud-node-br { bottom: 8%; }
}

/* ----------------- Selected Experience card ----------------- */
.experience-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
  align-items: start;
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(46, 161, 255, 0.12), transparent 70%),
    radial-gradient(360px 220px at 0% 100%, rgba(230, 200, 122, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  position: relative;
  overflow: hidden;
}

.experience-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 200, 122, 0.7) 50%, transparent 100%);
}

.experience-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-3);
  background: rgba(230, 200, 122, 0.10);
  border: 1px solid rgba(230, 200, 122, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.experience-meta h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
  line-height: 1.25;
}

.experience-role {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}

.experience-body p {
  font-size: 0.98rem;
  margin: 0 0 14px;
}

.experience-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: grid;
  gap: 10px;
}

.experience-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.experience-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px rgba(230, 200, 122, 0.35);
}

.experience-list strong { color: var(--text); font-weight: 600; }

@media (max-width: 960px) {
  .experience-card { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}

/* ----------------- CTA banner ----------------- */
.cta-banner {
  position: relative;
  text-align: center;
  padding: clamp(50px, 7vw, 80px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(500px 280px at 50% 0%, rgba(46, 161, 255, 0.25), transparent 70%),
    linear-gradient(180deg, rgba(46, 161, 255, 0.08), rgba(24, 224, 200, 0.05));
  overflow: hidden;
}

.cta-banner h2 { margin-bottom: 14px; }

.cta-banner p {
  max-width: 580px;
  margin: 0 auto 28px;
}

/* ----------------- Contact ----------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: start;
}

.contact-info .info-card {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 18px;
}

.contact-info h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}

.contact-info a {
  color: var(--text);
  font-weight: 500;
}

.contact-info a:hover { color: var(--accent); }

.form {
  padding: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--easing), background 0.2s var(--easing), box-shadow 0.2s var(--easing);
  appearance: none;
  -webkit-appearance: none;
}

/* Custom dropdown chevron so the select looks consistent on every OS. */
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
    linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 22px,
    calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* Fix invisible dropdown text: option elements inherit the OS dropdown
   palette unless given an explicit colour + background. */
.field select option,
.field select optgroup {
  background-color: #0f1840;
  color: #e7ecff;
  font-family: inherit;
  padding: 10px 12px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(46, 161, 255, 0.18);
}

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

.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.92rem;
}

.form-status.visible { display: block; }

.form-status.is-success {
  background: rgba(24, 224, 200, 0.10);
  border-color: rgba(24, 224, 200, 0.35);
  color: var(--accent-2);
}

.form-status.is-error {
  background: rgba(230, 80, 90, 0.10);
  border-color: rgba(230, 80, 90, 0.35);
  color: #ff9aa3;
}

/* ----------------- Footer ----------------- */
.footer {
  margin-top: 60px;
  padding: 60px 0 30px;
  border-top: 1px solid var(--border);
  background: rgba(6, 10, 31, 0.6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer h5 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer ul a {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.footer ul a:hover { color: var(--accent); }

.footer .footer-brand p {
  font-size: 0.92rem;
  max-width: 320px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
}

.footer-bottom .legal a { color: var(--text-dim); margin-left: 18px; }
.footer-bottom .legal a:hover { color: var(--accent); }

/* ----------------- Reveal-on-scroll ----------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------- Responsive ----------------- */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .focus { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-block { grid-template-columns: 1fr; gap: 20px; }
  .case { grid-template-columns: 1fr; gap: 18px; }
  .case-detail { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 720px) {
  /* --- Nav: compact mobile header --- */
  .nav-inner { height: 72px; gap: 14px; }
  .brand-logo { height: 50px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(6, 10, 31, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 16px;
    gap: 4px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--easing), transform 0.25s var(--easing);
  }
  .nav-links a {
    padding: 16px 18px;
    font-size: 1.02rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-links a.active::after { display: none; }
  .nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* --- Hero adjustments --- */
  .hero-meta { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .form { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ----------------- Hero brand centrepiece ----------------- */
.hero-brand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* The logo PNG has ~36% transparent padding above and ~31% below the
     brain content. We compensate with negative margins so the visible
     brand sits close to the nav and the headline below sits close to
     the wordmark, without scaling or cropping the logo itself. */
  margin: clamp(-200px, -14vw, -70px) auto clamp(-150px, -11vw, -40px);
  width: clamp(360px, 52vw, 680px);
  height: clamp(360px, 52vw, 680px);
}

.hero-brand-mark {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* A soft glow lifts the logo off the page; the PNG itself is transparent. */
  filter: drop-shadow(0 18px 50px rgba(46, 161, 255, 0.22))
          drop-shadow(0 4px 14px rgba(230, 200, 122, 0.14));
}

.hero-brand-glow {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(46, 161, 255, 0.16) 0%, rgba(46, 161, 255, 0) 72%),
    radial-gradient(closest-side, rgba(230, 200, 122, 0.07) 10%, rgba(230, 200, 122, 0) 78%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
  animation: hero-brand-pulse 8s ease-in-out infinite;
}

@keyframes hero-brand-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ----------------- Testimonials ----------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.testimonial {
  position: relative;
  margin: 0;
  padding: 36px 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(360px 200px at 100% 0%, rgba(46, 161, 255, 0.10), transparent 70%),
    radial-gradient(280px 160px at 0% 100%, rgba(230, 200, 122, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: border-color 0.35s var(--easing), transform 0.35s var(--easing);
}

.testimonial:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.testimonial-mark {
  position: absolute;
  top: 8px;
  left: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent-3);
  opacity: 0.55;
  pointer-events: none;
}

.testimonial blockquote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.testimonial-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.98rem;
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--accent-2);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonial { padding: 30px 24px 24px; }
  .testimonial-mark { font-size: 3.5rem; }
}

/* ----------------- Platform coverage callout (Services page) ----------------- */
.platform-coverage {
  margin-top: 56px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(360px 220px at 0% 0%, rgba(46, 161, 255, 0.12), transparent 70%),
    radial-gradient(380px 220px at 100% 100%, rgba(230, 200, 122, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.platform-coverage h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.platform-coverage p {
  margin: 0;
}

.cloud-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cloud-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.25s var(--easing), color 0.25s var(--easing), background 0.25s var(--easing);
}

.cloud-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.cloud-chip--lead {
  color: #001428;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px var(--accent-glow);
}

.cloud-chip--lead:hover { color: #001428; }

@media (max-width: 720px) {
  .platform-coverage { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
}

/* ----------------- Brand meaning (About) ----------------- */
.brand-meaning {
  position: relative;
}

.brand-meaning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.meaning-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(380px 220px at 100% 0%, rgba(46, 161, 255, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: border-color 0.35s var(--easing), transform 0.35s var(--easing);
}

.meaning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-2) 50%, transparent 100%);
  opacity: 0.55;
}

.meaning-card--tazkia::before {
  background: linear-gradient(90deg, transparent 0%, var(--accent-2) 50%, transparent 100%);
}

.meaning-card--intelligence::before {
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.meaning-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.meaning-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: rgba(24, 224, 200, 0.10);
  border: 1px solid rgba(24, 224, 200, 0.30);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.meaning-card--intelligence .meaning-tag {
  color: var(--accent);
  background: rgba(46, 161, 255, 0.10);
  border-color: rgba(46, 161, 255, 0.30);
}

.meaning-tag-script {
  font-family: "Amiri", "Scheherazade New", "Geeza Pro", "Noto Naskh Arabic", serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-3);
}

.meaning-card h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 14px;
}

.meaning-card p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 14px;
}

.meaning-card p:last-child { margin-bottom: 0; }

.meaning-pivot {
  padding-left: 16px;
  border-left: 2px solid rgba(230, 200, 122, 0.45);
  color: var(--text);
  font-style: italic;
}

.meaning-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.meaning-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.meaning-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(46, 161, 255, 0.55);
}

.meaning-list strong {
  color: var(--text);
  font-weight: 600;
}

/* Synthesis card (combined meaning) */
.meaning-synthesis {
  position: relative;
  padding: 44px 40px;
  border: 1px solid rgba(230, 200, 122, 0.30);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(46, 161, 255, 0.10), transparent 70%),
    radial-gradient(420px 240px at 0% 100%, rgba(230, 200, 122, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}

.meaning-synthesis::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-3) 25%, var(--accent) 50%, var(--accent-3) 75%, transparent 100%);
}

.meaning-tag--featured {
  color: var(--accent-3);
  background: rgba(230, 200, 122, 0.10);
  border-color: rgba(230, 200, 122, 0.40);
}

.meaning-synthesis h3 {
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

.meaning-synthesis p {
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.meaning-synthesis p:last-of-type { margin-bottom: 22px; }

.meaning-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.meaning-themes span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

@media (max-width: 880px) {
  .brand-meaning-grid { grid-template-columns: 1fr; }
  .meaning-card { padding: 28px 24px; }
  .meaning-synthesis { padding: 32px 24px; }
  .meaning-synthesis h3 { font-size: 1.35rem; }
}

/* ----------------- Platform stack (About > Our practice) ----------------- */
.platform-panel {
  padding: 28px;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(230, 200, 122, 0.10), transparent 70%),
    radial-gradient(360px 220px at 0% 100%, rgba(46, 161, 255, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-color: rgba(230, 200, 122, 0.18);
}

.platform-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.stack-layer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(10px);
  transition: transform 0.35s var(--easing), border-color 0.35s var(--easing), box-shadow 0.35s var(--easing);
  position: relative;
}

.stack-layer:hover {
  transform: translateX(6px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px -16px var(--accent-glow);
}

.stack-layer--agentforce {
  background:
    radial-gradient(280px 120px at 100% 0%, rgba(230, 200, 122, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(230, 200, 122, 0.08), rgba(230, 200, 122, 0.02));
  border-color: rgba(230, 200, 122, 0.40);
}

.stack-layer--agentforce:hover {
  border-color: var(--accent-3);
  box-shadow: 0 12px 30px -16px rgba(230, 200, 122, 0.40);
}

.stack-layer--trust {
  background:
    radial-gradient(280px 120px at 0% 100%, rgba(46, 161, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(46, 161, 255, 0.06), rgba(46, 161, 255, 0.02));
  border-color: rgba(46, 161, 255, 0.35);
}

.stack-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(46, 161, 255, 0.12);
  border: 1px solid rgba(46, 161, 255, 0.30);
  color: var(--accent-2);
  flex-shrink: 0;
}

.stack-layer--agentforce .stack-icon {
  background: rgba(230, 200, 122, 0.14);
  border-color: rgba(230, 200, 122, 0.40);
  color: var(--accent-3);
}

.stack-layer--trust .stack-icon {
  background: rgba(46, 161, 255, 0.16);
  border-color: rgba(46, 161, 255, 0.40);
  color: var(--accent);
}

.stack-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stack-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stack-body strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stack-meta {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.stack-connector {
  position: relative;
  height: 22px;
  margin-left: 22px;
  pointer-events: none;
}

.stack-connector::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
}

.stack-connector::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-50%);
  animation: stack-flow 2.6s ease-in-out infinite;
}

@keyframes stack-flow {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.35); }
}

@media (max-width: 720px) {
  .platform-panel { padding: 22px; }
  .stack-layer { padding: 14px 16px; gap: 12px; }
  .stack-icon { width: 38px; height: 38px; }
  .stack-body strong { font-size: 0.95rem; }
  .stack-meta { font-size: 0.78rem; }
}

/* ----------------- Credentials grid (About) ----------------- */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.credential-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(280px 160px at 100% 0%, rgba(46, 161, 255, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  overflow: hidden;
  transition: transform 0.35s var(--easing), border-color 0.35s var(--easing), box-shadow 0.35s var(--easing);
}

.credential-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 200, 122, 0.50) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s var(--easing);
}

.credential-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px -22px var(--accent-glow);
}

.credential-card:hover::before { opacity: 1; }

.credential-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(46, 161, 255, 0.16), rgba(24, 224, 200, 0.14));
  border: 1px solid rgba(46, 161, 255, 0.30);
  color: var(--accent-2);
}

.credential-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #ffffff 0%, var(--accent) 55%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 4px;
}

.credential-label {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .credentials-grid { grid-template-columns: 1fr; }
  .credential-card { padding: 22px 20px; }
  .credential-number { font-size: 1.7rem; }
}

/* ----------------- Mobile polish (tablets + phones) ----------------- */
@media (max-width: 720px) {
  /* Tighten section padding so each block feels compact on small screens. */
  section { padding: clamp(48px, 7vw, 72px) 0; }

  /* Tighter container gutters on phones; keeps content closer to edges. */
  .container { padding: 0 20px; }

  /* Hero headline: smaller minimum so it doesn't dominate the screen. */
  .hero h1 { font-size: clamp(1.95rem, 8vw, 2.6rem); }
  .hero p.lead { font-size: clamp(1rem, 4vw, 1.1rem); margin-bottom: 28px; }
  .hero-meta { margin-top: 28px; gap: 12px; }
  .hero-meta .stat { padding: 14px 12px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; max-width: 320px; }

  /* Centrepiece logo: keep proportions sensible on phones. */
  .hero-brand {
    width: clamp(280px, 70vw, 360px);
    height: clamp(280px, 70vw, 360px);
    margin: clamp(-80px, -18vw, -40px) auto clamp(-60px, -14vw, -28px);
  }

  /* Page hero (interior pages) tighter spacing. */
  .page-hero { padding: clamp(40px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); }
  .page-hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }

  /* Buttons: comfortable touch targets and tighter padding. */
  .btn { min-height: 48px; padding: 12px 22px; }

  /* Forms: 16px font on inputs prevents iOS Safari from zooming on focus. */
  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
    padding: 14px 14px;
  }
  .field label { font-size: 0.92rem; }
  .field { margin-bottom: 16px; }
  .form { padding: 20px; }

  /* Footer: smaller logo, tighter rhythm. */
  .brand-logo-footer { height: 96px; }
  .footer { margin-top: 36px; padding: 48px 0 24px; }
  .footer-grid { margin-bottom: 28px; }

  /* Cards and content tighten up. */
  .card { padding: 22px; }
  .card h3 { font-size: 1.08rem; }
  .section-head { margin-bottom: 36px; }
  .section-head p { font-size: 0.98rem; }

  /* Service blocks: stack and tighten. */
  .service-block { padding: 28px 0; gap: 16px; }
  .service-block h3 { font-size: 1.25rem; }

  /* Brand-meaning cards already stack; compact a touch. */
  .meaning-card h3 { font-size: 1.15rem; }
  .meaning-list li { font-size: 0.92rem; }
  .meaning-synthesis h3 { font-size: 1.25rem; }
  .meaning-themes { gap: 8px; }
  .meaning-themes span { font-size: 0.78rem; padding: 7px 11px; }

  /* CTA banner sits closer to edges. */
  .cta-banner { padding: 36px 24px; }
  .cta-banner h2 { font-size: 1.45rem; }

  /* Pills/chips: ensure they don't blow out. */
  .cloud-chip { font-size: 0.78rem; padding: 8px 14px; }

  /* Outcome pills and testimonials breathe. */
  .outcome-pill strong { font-size: 1.2rem; }
  .testimonial blockquote { font-size: 0.98rem; }

  /* Cloud orchestration nodes: shrink labels slightly on narrow phones. */
  .cloud-node .cloud-label { font-size: 0.7rem; }
}

/* Even smaller phones (iPhone SE, small Androids). */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .nav-inner { gap: 10px; }
  .brand-logo { height: 44px; }
  .nav-links { top: 64px; }
  .nav-inner { height: 64px; }
  .hero-brand {
    width: clamp(240px, 78vw, 300px);
    height: clamp(240px, 78vw, 300px);
  }
  .hero h1 { font-size: 1.9rem; }
  .section-head { margin-bottom: 28px; }
  .credential-number { font-size: 1.55rem; }
  .credential-card { padding: 20px 18px; }
  .meaning-card { padding: 24px 20px; }
  .meaning-synthesis { padding: 28px 22px; }
  .cta-banner { padding: 28px 18px; }
  .cta-banner h2 { font-size: 1.3rem; }
}

/* ----------------- Impact arm (About > Two wings) ----------------- */
.impact-arm {
  position: relative;
}

.impact-pair {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 36px;
}

.impact-card {
  position: relative;
  padding: 34px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(360px 200px at 100% 0%, rgba(46, 161, 255, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s var(--easing), transform 0.35s var(--easing);
}

.impact-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.impact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
}

.impact-card--business::before {
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.impact-card--foundation {
  background:
    radial-gradient(360px 200px at 0% 100%, rgba(230, 200, 122, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.impact-card--foundation::before {
  background: linear-gradient(90deg, transparent 0%, var(--accent-3) 50%, transparent 100%);
}

.impact-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.impact-card--business .impact-tag {
  color: var(--accent);
  background: rgba(46, 161, 255, 0.10);
  border: 1px solid rgba(46, 161, 255, 0.32);
}

.impact-card--foundation .impact-tag {
  color: var(--accent-3);
  background: rgba(230, 200, 122, 0.10);
  border: 1px solid rgba(230, 200, 122, 0.36);
}

.impact-card h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 12px;
}

.impact-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

.impact-purpose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.impact-purpose::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.impact-card--business .impact-purpose::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.impact-card--foundation .impact-purpose::before {
  background: var(--accent-3);
  box-shadow: 0 0 8px var(--accent-3);
}

/* Flow connector between the two cards. */
.impact-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
}

.impact-flow-arrow {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  opacity: 0.65;
}

.impact-flow-arrow::before,
.impact-flow-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--accent-3);
  border-top: 1.5px solid var(--accent-3);
  transform: translateY(-50%) rotate(45deg);
}

.impact-flow-arrow::after { right: -2px; }
.impact-flow-arrow::before { display: none; }

.impact-flow-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-3);
  text-shadow: 0 0 12px rgba(230, 200, 122, 0.30);
}

/* Unified vision blockquote. */
.impact-vision {
  position: relative;
  margin: 0;
  padding: 36px 44px;
  border: 1px solid rgba(230, 200, 122, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 260px at 50% 0%, rgba(230, 200, 122, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  text-align: center;
  overflow: hidden;
}

.impact-vision::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-3) 25%, var(--accent) 50%, var(--accent-3) 75%, transparent 100%);
}

.impact-vision p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 16px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.impact-vision p::before,
.impact-vision p::after {
  content: '"';
  color: var(--accent-3);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4em;
  font-style: normal;
  vertical-align: -0.1em;
  opacity: 0.75;
}

.impact-vision p::before { margin-right: 4px; }
.impact-vision p::after  { margin-left: 4px; }

.impact-vision cite {
  display: inline-block;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

@media (max-width: 880px) {
  .impact-pair {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .impact-flow {
    flex-direction: row;
    min-height: 48px;
  }
  .impact-flow-arrow {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-3));
  }
  .impact-flow-arrow::after {
    top: auto;
    right: 50%;
    bottom: -2px;
    transform: translateX(50%) rotate(135deg);
  }
  .impact-flow-label {
    font-size: 0.66rem;
  }
  .impact-card { padding: 28px 22px; }
  .impact-vision { padding: 28px 22px; }
  .impact-vision p { font-size: 1rem; }
}