/* ============================================================
   ABOUT PAGE — VisionForge Technologies
   Sections: About Hero (ah-) + Who We Are (wwa-)
   ============================================================ */

/* ─────────────────────────────────────────────
   SECTION 1 — ABOUT HERO
───────────────────────────────────────────── */

.ah-hero {
  position: relative;
  padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-10));
  padding-bottom: var(--space-10);
  overflow: hidden;
}

.ah-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ah-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.ah-hero__glow--tl {
  width: 560px;
  height: 560px;
  top: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.20) 0%, transparent 65%);
}

.ah-hero__glow--br {
  width: 380px;
  height: 380px;
  bottom: -60px;
  right: 6%;
  background: radial-gradient(circle, rgba(14, 114, 212, 0.12) 0%, transparent 65%);
}

/* 55 / 45 grid */
.ah-hero__container {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-8);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Left column ── */
.ah-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.ah-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.24);
  animation: ah-dot-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ah-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.24); }
  50%       { box-shadow: 0 0 0 4px rgba(27, 142, 248, 0.10); }
}

.ah-hero__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 20px;
}

.ah-hero__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ah-hero__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 460px;
  margin-top: 12px;
}

.ah-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* ── Right column ── */
.ah-hero__visual {
  position: relative;
  height: 460px;
}

/* ════════════════════════════════════════
   ABOUT HERO ILLUSTRATION
   "Company Profile Card" — identity-focused,
   not a dev-tool dashboard
════════════════════════════════════════ */

/* Main card */
.ahv-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-8px);
  width: 300px;
  background: linear-gradient(160deg, #0D1E36 0%, #080F1C 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(27, 142, 248, 0.06),
    0 28px 64px rgba(0, 0, 0, 0.60),
    0 0 80px rgba(27, 142, 248, 0.05);
  overflow: hidden;
}

/* Gradient bar at top */
.ahv-card__topbar {
  height: 4px;
  background: linear-gradient(90deg, #1B8EF8 0%, #4DAAFF 50%, #0E72D4 100%);
}

/* Card header */
.ahv-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 0;
}

.ahv-card__logomark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1B8EF8 0%, #0E72D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(27, 142, 248, 0.35);
}

.ahv-card__logomark svg {
  display: block;
}

.ahv-card__identity {
  flex: 1;
  min-width: 0;
}

.ahv-card__company {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  /* Wrap onto a 2nd line rather than truncating the company's own name —
     the card is narrow enough on phones/tablets that nowrap+ellipsis
     regularly cut it down to "VisionForge Te…". */
  white-space: normal;
  overflow-wrap: break-word;
}

.ahv-card__type {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.36);
  margin-top: 2px;
}

.ahv-card__avail {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ahv-card__avail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
  animation: ahv-blink 2s ease-in-out infinite;
}

.ahv-card__avail-text {
  font-size: 8.5px;
  font-weight: 600;
  color: #4ADE80;
}

@keyframes ahv-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Meta row */
.ahv-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 0;
}

.ahv-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.36);
}

.ahv-meta-item svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.ahv-meta-sep {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

/* Divider */
.ahv-card__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 14px 16px 0;
}

/* Tech stack */
.ahv-card__section {
  padding: 12px 16px 0;
}

.ahv-section-label {
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ahv-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ahv-tech {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 600;
  border: 1px solid transparent;
}

.ahv-tech__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ahv-tech--laravel  { background: rgba(255, 69, 0, 0.10); color: #FF7057; border-color: rgba(255, 69, 0, 0.18); }
.ahv-tech--laravel .ahv-tech__dot { background: #FF4500; }
.ahv-tech--react    { background: rgba(97, 218, 251, 0.10); color: #67DBFC; border-color: rgba(97, 218, 251, 0.18); }
.ahv-tech--react .ahv-tech__dot { background: #61DAFB; }
.ahv-tech--aws      { background: rgba(255, 153, 0, 0.10); color: #FFB347; border-color: rgba(255, 153, 0, 0.18); }
.ahv-tech--aws .ahv-tech__dot { background: #FF9900; }
.ahv-tech--mysql    { background: rgba(0, 117, 143, 0.15); color: #3AB5D6; border-color: rgba(0, 117, 143, 0.25); }
.ahv-tech--mysql .ahv-tech__dot { background: #00758F; }
.ahv-tech--php      { background: rgba(119, 123, 179, 0.12); color: #9EA3D4; border-color: rgba(119, 123, 179, 0.20); }
.ahv-tech--php .ahv-tech__dot { background: #777BB3; }
.ahv-tech--api      { background: rgba(27, 142, 248, 0.10); color: var(--color-brand-light); border-color: rgba(27, 142, 248, 0.18); }
.ahv-tech--api .ahv-tech__dot { background: var(--color-brand-primary); }

/* Stats row */
.ahv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 12px 16px 16px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ahv-stat {
  text-align: center;
  position: relative;
}

.ahv-stat + .ahv-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.ahv-stat__val {
  font-family: 'Manrope', var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
}

.ahv-stat__lbl {
  display: block;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.30);
  margin-top: 3px;
}

/* ── Float cards: About Hero ── */

/* Review card — top right */
.ahv-review-card {
  position: absolute;
  top: 5%;
  right: -7%;
  z-index: 4;
  padding: 10px 13px;
  background: rgba(13, 25, 44, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: float-sm 4.6s ease-in-out infinite;
  min-width: 152px;
  max-width: 170px;
}

.ahv-review-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 5px;
}

.ahv-star {
  width: 10px;
  height: 10px;
  color: #FBBF24;
}

.ahv-review-card__quote {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.45;
  display: block;
  margin-bottom: 6px;
}

.ahv-review-card__author {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  display: block;
}

/* Launch card — bottom left */
.ahv-launch-card {
  position: absolute;
  bottom: 8%;
  left: -7%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(13, 25, 44, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: float-sm 5.8s ease-in-out infinite;
  animation-delay: 0.9s;
  white-space: nowrap;
}

.ahv-launch-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1B8EF8 0%, #0E72D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ahv-launch-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.ahv-launch-sub {
  display: block;
  font-size: 9px;
  /* 0.58, not 0.36 — 0.36 fails WCAG AA 4.5:1 at this font size */
  color: rgba(255, 255, 255, 0.58);
  margin-top: 1px;
}

/* ─────────────────────────────────────────────
   SECTION 2 — WHO WE ARE
───────────────────────────────────────────── */

.wwa-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

/* Hairline separator */
.wwa-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.wwa-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.wwa-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.wwa-glow--left {
  width: 480px;
  height: 480px;
  top: 10%;
  left: -8%;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.09) 0%, transparent 70%);
}

/* 50 / 50 grid */
.wwa-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Left column: Process Timeline ── */
.wwa-section__visual {
  position: relative;
  height: 480px;
  margin-top: 34px;
}

/* ════════════════════════════════════════
   WHO WE ARE ILLUSTRATION
   "How We Work" — vertical process flow,
   structurally different from any dashboard
════════════════════════════════════════ */

.wwav-process {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-10px);
  width: 286px;
  background: linear-gradient(160deg, #0D1E36 0%, #080F1C 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow:
    0 0 0 1px rgba(27, 142, 248, 0.06),
    0 28px 64px rgba(0, 0, 0, 0.60),
    0 0 80px rgba(27, 142, 248, 0.05);
}

.wwav-process__heading {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Step + connector layout */
.wwav-steps {
  display: flex;
  flex-direction: column;
}

.wwav-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background 220ms ease;
}

.wwav-step--done     { background: rgba(34, 197, 94, 0.05); border: 1px solid rgba(34, 197, 94, 0.08); }
.wwav-step--active   { background: rgba(27, 142, 248, 0.09); border: 1px solid rgba(27, 142, 248, 0.18); }
.wwav-step--upcoming { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); }

/* The connecting line between steps */
.wwav-connector {
  width: 1.5px;
  height: 8px;
  margin-left: calc(12px + 17px);  /* left padding + half step-num width */
  flex-shrink: 0;
}

.wwav-connector--done     { background: rgba(34, 197, 94, 0.30); }
.wwav-connector--active   { background: linear-gradient(to bottom, rgba(34,197,94,0.30), rgba(27,142,248,0.30)); }
.wwav-connector--upcoming { background: rgba(255, 255, 255, 0.08); }

/* Step number circle */
.wwav-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.wwav-step--done .wwav-step__num {
  background: rgba(34, 197, 94, 0.18);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.wwav-step--active .wwav-step__num {
  background: rgba(27, 142, 248, 0.22);
  color: var(--color-brand-light);
  border: 1px solid rgba(27, 142, 248, 0.28);
  animation: ahv-blink 2.4s ease-in-out infinite;
}

.wwav-step--upcoming .wwav-step__num {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.wwav-step__body {
  flex: 1;
  min-width: 0;
}

.wwav-step__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.wwav-step--done .wwav-step__name     { color: rgba(255,255,255,0.55); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.20); }
.wwav-step--active .wwav-step__name   { color: rgba(255,255,255,0.92); }
.wwav-step--upcoming .wwav-step__name { color: rgba(255,255,255,0.38); }

.wwav-step__sub {
  font-size: 9px;
  margin-top: 2px;
}

.wwav-step--done .wwav-step__sub     { color: rgba(255,255,255,0.28); }
.wwav-step--active .wwav-step__sub   { color: rgba(255,255,255,0.48); }
.wwav-step--upcoming .wwav-step__sub { color: rgba(255,255,255,0.22); }

.wwav-step__tag {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.wwav-step__tag--done   { background: rgba(34, 197, 94, 0.14); color: #4ADE80; }
.wwav-step__tag--active { background: rgba(27, 142, 248, 0.18); color: var(--color-brand-light); }
.wwav-step__tag--soon   { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.28); }

/* Bottom progress bar */
.wwav-process__footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wwav-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.wwav-progress-title {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wwav-progress-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-brand-light);
}

.wwav-progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.wwav-progress-fill {
  height: 100%;
  width: 55%;
  background: linear-gradient(90deg, #1B8EF8 0%, #4DAAFF 100%);
  border-radius: 3px;
}

/* ── Float cards: Who We Are ── */

/* Quality card — top right */
.wwav-quality-card {
  position: absolute;
  top: 4%;
  right: -7%;
  z-index: 4;
  padding: 10px 13px;
  background: rgba(13, 25, 44, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: float-sm 3.8s ease-in-out infinite;
  min-width: 136px;
}

.wwav-quality-card__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(251, 191, 36, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBBF24;
  margin-bottom: 6px;
}

.wwav-quality-card__val {
  font-family: 'Manrope', var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  display: block;
}

.wwav-quality-card__lbl {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  display: block;
  margin-top: 3px;
}

/* Delivery pill — bottom left */
.wwav-delivery-card {
  position: absolute;
  bottom: 7%;
  left: -7%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(13, 25, 44, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: float-sm 5.4s ease-in-out infinite;
  animation-delay: 1.1s;
  white-space: nowrap;
}

.wwav-delivery-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ADE80;
  flex-shrink: 0;
}

.wwav-delivery-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.wwav-delivery-sub {
  display: block;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.36);
  margin-top: 1px;
}

/* Status pill — right mid */
.wwav-active-pill {
  position: absolute;
  top: 46%;
  right: -7%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(27, 142, 248, 0.10);
  border: 1px solid rgba(27, 142, 248, 0.20);
  border-radius: var(--radius-full);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.wwav-active-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 5px rgba(27, 142, 248, 0.65);
  animation: ahv-blink 2.2s ease-in-out infinite;
}

.wwav-active-pill__text {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-brand-light);
}

/* ── Right column: Content ── */
.wwa-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.wwa-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.wwa-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 16px;
}

.wwa-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wwa-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 440px;
  margin-top: 12px;
}

/* 2×2 feature cards */
.wwa-section__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1-5);
  margin-top: var(--space-3);
}

.wwa-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  transition:
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.wwa-card:hover {
  background: rgba(27, 142, 248, 0.05);
  border-color: rgba(27, 142, 248, 0.24);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(27, 142, 248, 0.10);
  transform: translateY(-2px);
}

.wwa-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-faint);
  border: 1px solid rgba(27, 142, 248, 0.14);
  border-radius: var(--radius-lg);
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.wwa-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.wwa-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

/* xs: ≤ 479px */
@media (max-width: 479px) {
  .ah-hero {
    padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-6));
    padding-bottom: var(--space-8);
  }

  .ah-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ah-hero__heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .ah-hero__desc {
    max-width: 100%;
  }

  .ah-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ah-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hidden on mobile — matches the Home page pattern, so the headline
     leads immediately instead of a decorative card taking the whole
     first screen. Reappears at 768px+ in normal document order. */
  .ah-hero__visual {
    display: none;
  }

  .wwa-section { padding-block: var(--space-8); }

  .wwa-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Hidden on mobile — same reasoning as .ah-hero__visual above. */
  .wwa-section__visual {
    display: none;
  }

  .wwa-section__cards {
    grid-template-columns: 1fr;
  }

  .wwa-section__desc {
    max-width: 100%;
  }
}

/* sm: 480px – 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .ah-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Hidden through 767px — see the xs tier above for reasoning. */
  .ah-hero__visual {
    display: none;
  }

  .wwa-section { padding-block: var(--space-10); }

  .wwa-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .wwa-section__visual {
    display: none;
  }

  .wwa-section__desc { max-width: 100%; }
}

/* md: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .ah-hero__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .ah-hero__visual { height: 400px; }

  /* A -2% offset still isn't enough clearance at this width and the
     chips end up overlapping the card header/badges — hide until
     1280px+, where the visual column is wide enough for the chips'
     default -7% offset to clear the card entirely (verified). */
  .ahv-review-card,
  .ahv-launch-card { display: none; }

  .wwa-section { padding-block: var(--space-10); }

  .wwa-section__grid { gap: var(--space-8); }

  .wwa-section__visual { height: 420px; }

  .wwav-quality-card,
  .wwav-delivery-card,
  .wwav-active-pill { display: none; }

  .wwa-section__desc { max-width: 100%; }

  /* The content column is still fairly narrow at this width (it's
     sharing the row with the illustration) — a nested 2-column card
     grid inside it squeezes text into cramped ~3-4 word lines. Single
     column reads far more comfortably until there's more width to work
     with at 1024px+. */
  .wwa-section__cards {
    grid-template-columns: 1fr;
  }
}

/* lg: 1024px – 1279px — visual column still isn't wide enough here for
   the floating chips to clear the card without overlap (verified), so
   keep them hidden through this tier too; they return at 1280px+. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ahv-review-card,
  .ahv-launch-card,
  .wwav-quality-card,
  .wwav-delivery-card,
  .wwav-active-pill { display: none; }
}

/* lg+: 1024px+ */
@media (min-width: 1024px) {
  .wwa-section { padding-block: var(--space-12); }
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  .ah-hero__visual     { height: 480px; }
  .wwa-section__visual { height: 500px; }
}

/* ─────────────────────────────────────────────
   SECTION 3 — WHY CHOOSE VISIONFORGE
   Prefix: wcv-
───────────────────────────────────────────── */

.wcv-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

/* Hairline separator — matches all other sections */
.wcv-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.wcv-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.wcv-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.wcv-glow--right {
  width: 520px;
  height: 520px;
  top: -5%;
  right: -8%;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.09) 0%, transparent 70%);
}

/* 40 / 60 two-column grid */
.wcv-section__grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: var(--space-12);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Left: Intro column ── */
.wcv-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.wcv-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.wcv-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 16px;
}

.wcv-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wcv-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-top: 12px;
}

.wcv-section__cta {
  margin-top: var(--space-4);
}

/* ── Right: Comparison Table ── */
.wcv-compare {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.wcv-compare__note {
  margin: 0;
  padding: 12px 14px;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wcv-compare__head {
  display: grid;
  grid-template-columns: 96px 1fr 1fr;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 0 8px;
}

.wcv-compare__col-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.wcv-compare__col-old {
  font-size: 10px;
  font-weight: 600;
  /* 0.60, not 0.28 — 0.28 fails WCAG AA 4.5:1 at this font size */
  color: rgba(255,255,255,0.60);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.wcv-compare__col-new {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-brand-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.wcv-compare__vf-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  flex-shrink: 0;
}

.wcv-compare__row {
  display: grid;
  grid-template-columns: 96px 1fr 1fr;
  gap: 0 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
  transition: background 200ms ease;
}

.wcv-compare__row:last-child {
  border-bottom: none;
}

.wcv-compare__row:hover {
  background: rgba(27, 142, 248, 0.025);
}

.wcv-compare__aspect {
  font-family: 'Manrope', var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  /* 0.62, not 0.38 — 0.38 fails WCAG AA 4.5:1 at the mobile breakpoint's smaller font size */
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.01em;
}

.wcv-compare__cell {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.wcv-compare__cell--old {
  /* 0.58, not 0.35 — 0.35 fails WCAG AA 4.5:1 at this font size */
  color: rgba(255,255,255,0.58);
  padding-right: 4px;
}

.wcv-compare__cell--new {
  color: var(--color-text-primary);
  background: rgba(27, 142, 248, 0.065);
  padding: 5px 9px;
  border-radius: 8px;
}

.wcv-x {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.10);
  color: rgba(239, 68, 68, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wcv-check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: rgba(27, 142, 248, 0.18);
  color: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── WCV Responsive ── */

/* xs: ≤ 479px */
@media (max-width: 479px) {
  .wcv-section { padding-block: var(--space-8); }

  .wcv-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Aspect label stays visible (narrower column) rather than hidden —
     without it, a row like "Account managers & middlemen" vs. "Direct
     access to your engineers" loses the topic it's actually about. */
  .wcv-compare__col-label,
  .wcv-compare__aspect {
    font-size: 9px;
    line-height: 1.3;
  }

  .wcv-compare__head,
  .wcv-compare__row { grid-template-columns: 72px 1fr 1fr; gap: 0 6px; }
}

/* sm: 480px – 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .wcv-section { padding-block: var(--space-10); }

  .wcv-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .wcv-compare__head,
  .wcv-compare__row { grid-template-columns: 80px 1fr 1fr; }
}

/* md: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .wcv-section { padding-block: var(--space-10); }

  .wcv-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* On tablet with stacked layout, intro desc can be wider */
  .wcv-section__desc {
    max-width: 560px;
  }
}

/* lg: 1024px – 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wcv-section__grid {
    gap: var(--space-8);
  }
}

/* ─────────────────────────────────────────────
   SECTION 4 — CORE VALUES
   Prefix: cv-
───────────────────────────────────────────── */

.cv-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

/* Hairline separator */
.cv-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.cv-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cv-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.cv-glow--right {
  width: 560px;
  height: 560px;
  top: -5%;
  right: -10%;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.09) 0%, transparent 68%);
}

.cv-glow--left {
  width: 360px;
  height: 360px;
  bottom: 5%;
  left: -6%;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.06) 0%, transparent 70%);
}

/* Full-width section: centered header + timeline */
.cv-section__grid {
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Centered section header ── */
.cv-section__content {}

.cv-section__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-10);
}

.cv-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.cv-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.cv-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 16px;
  /* Balances wrapping on the line after the manual <br> so a lone word
     doesn't get orphaned onto its own line on narrow phones. */
  text-wrap: balance;
}

.cv-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cv-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-top: 12px;
}

/* ── Vertical Timeline ── */
.cv-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}

/* Each timeline item */
.cv-tl-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--space-4);
  align-items: start;
}

/* Left track column: dot + connector */
.cv-tl-item__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

/* Icon dot */
.cv-tl-item__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(27, 142, 248, 0.08);
  border: 1.5px solid rgba(27, 142, 248, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: background 240ms ease, border-color 240ms ease,
              box-shadow 240ms ease, transform 240ms ease;
}

.cv-tl-item:hover .cv-tl-item__dot {
  background: rgba(27, 142, 248, 0.14);
  border-color: rgba(27, 142, 248, 0.50);
  box-shadow: 0 0 0 5px rgba(27, 142, 248, 0.08);
  transform: scale(1.06);
}

/* Connector line between dots */
.cv-tl-item__connector {
  width: 2px;
  flex: 1;
  min-height: 20px;
  margin: 3px 0;
  background: linear-gradient(to bottom,
    rgba(27, 142, 248, 0.35) 0%,
    rgba(27, 142, 248, 0.08) 100%);
}

/* Content body */
.cv-tl-item__body {
  padding-bottom: var(--space-6);
}

.cv-tl-item:last-child .cv-tl-item__body {
  padding-bottom: 0;
}

/* Content card */
.cv-tl-item__card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  transition: background 240ms ease, border-color 240ms ease;
}

.cv-tl-item:hover .cv-tl-item__card {
  background: rgba(27, 142, 248, 0.04);
  border-color: rgba(27, 142, 248, 0.18);
}

.cv-tl-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cv-tl-item__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-brand-primary);
  opacity: 0.75;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.cv-tl-item__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
}

.cv-tl-item__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── CV Responsive ── */

/* xs: ≤ 479px */
@media (max-width: 479px) {
  .cv-section { padding-block: var(--space-8); }
  .cv-section__header { margin-bottom: var(--space-6); }
  .cv-timeline { max-width: 100%; }
  .cv-tl-item__body { padding-bottom: var(--space-4); }
}

/* sm: 480px – 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .cv-section {
    padding-block: var(--space-10);
  }
}

/* md: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .cv-section { padding-block: var(--space-10); }
  .cv-section__header { max-width: 480px; }
}

/* lg+: 1024px+ */
@media (min-width: 1024px) {
  .cv-section { padding-block: var(--space-12); }
}


/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIES WE SERVE  (iws-)
   ═══════════════════════════════════════════════════════════════════ */

.iws-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

/* Hairline top separator */
.iws-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Header (centered) ── */
.iws-section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

.iws-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.iws-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.iws-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 16px;
}

.iws-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.iws-section__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

/* ── Mosaic card grid ── */
.iws-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  /* Without dense packing, mixing span-2 "wide" tiles with span-1 tiles
     leaves visible empty cells whenever a wide tile can't fit the
     remaining space in its row (confirmed at 2-column widths). */
  grid-auto-flow: dense;
}

/* Wide tile: spans 2 columns */
.iws-card--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.iws-card--wide .iws-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.iws-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.iws-card--wide .iws-card__name {
  font-size: var(--text-base);
}

/* ── Individual card ── */
.iws-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: var(--radius-xl);
  transition: background 240ms ease, border-color 240ms ease,
              box-shadow 240ms ease, transform 240ms ease;
}

.iws-card:hover {
  background: rgba(27, 142, 248, 0.05);
  border-color: rgba(27, 142, 248, 0.24);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22),
              0 0 0 1px rgba(27, 142, 248, 0.10);
  transform: translateY(-3px);
}

/* Icon wrapper */
.iws-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 142, 248, 0.08);
  border: 1px solid rgba(27, 142, 248, 0.15);
  border-radius: var(--radius-lg);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: background 240ms ease, border-color 240ms ease;
}

.iws-card:hover .iws-card__icon {
  background: rgba(27, 142, 248, 0.14);
  border-color: rgba(27, 142, 248, 0.28);
}

.iws-card__icon svg {
  display: block;
  transition: transform 240ms ease;
}

.iws-card:hover .iws-card__icon svg {
  transform: scale(1.15);
}

/* Card text */
.iws-card__name {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.iws-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  flex: 1;
}

/* ── Responsive ── */

/* xs: ≤479px */
@media (max-width: 479px) {
  .iws-section {
    padding-block: var(--space-8);
  }
  .iws-section__header {
    margin-bottom: var(--space-6);
  }
  .iws-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-1-5);
  }
  .iws-card--wide { grid-column: span 1; flex-direction: column; }
  .iws-card--wide .iws-card__icon { width: 40px; height: 40px; }
}

/* sm: 480px–767px */
@media (min-width: 480px) and (max-width: 767px) {
  .iws-section {
    padding-block: var(--space-8);
  }
  .iws-section__header {
    margin-bottom: var(--space-8);
  }
  .iws-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1-5);
  }
}

/* md: 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .iws-section {
    padding-block: var(--space-10);
  }
  .iws-section__header {
    margin-bottom: var(--space-8);
  }
  .iws-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .iws-card--wide { grid-column: span 2; }
}

/* lg+: 1024px+ */
@media (min-width: 1024px) {
  .iws-section {
    padding-block: var(--space-12);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   OUR COMMITMENT  (oc-)
   ═══════════════════════════════════════════════════════════════════ */

.oc-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

/* Hairline separator */
.oc-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* Background layers */
.oc-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Radial blue glow — right side */
.oc-section__glow {
  position: absolute;
  width: 640px;
  height: 640px;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(27, 142, 248, 0.13) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(50px);
  animation: oc-glow-pulse 7s ease-in-out infinite;
}

@keyframes oc-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateY(-50%) scale(1.07); }
}

/* Subtle dot grid — masked to right half */
.oc-section__grid-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,
    rgba(255, 255, 255, 0.036) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 80% at 75% 50%,
    black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 50%,
    black 0%, transparent 75%);
}

/* ── 50/50 layout ── */
.oc-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Left: content ── */
.oc-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Pill badge */
.oc-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.oc-section__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.24);
  flex-shrink: 0;
}

/* Heading */
.oc-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 20px;
}

.oc-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.oc-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 460px;
  margin-top: var(--space-3);
}

/* Signature quote */
.oc-section__signature {
  margin: 0;
  margin-top: var(--space-5);
  padding-left: 16px;
  border-left: 2px solid var(--color-brand-primary);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-brand-light);
  line-height: var(--leading-relaxed);
}

.oc-section__cta {
  margin-top: var(--space-5);
}

/* ── Right: visual ── */
.oc-section__visual {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner ambient glow */
.oc-visual__glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(27, 142, 248, 0.16) 0%, transparent 68%);
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

/* ── Journey card ── */
.oc-journey {
  width: 100%;
  max-width: 360px;
  background: rgba(11, 20, 36, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12),
              0 12px 36px rgba(0, 0, 0, 0.38),
              0 0 0 1px rgba(255, 255, 255, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: oc-card-float 9s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes oc-card-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Card header */
.oc-journey__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}

.oc-journey__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-journey__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 142, 248, 0.10);
  border: 1px solid rgba(27, 142, 248, 0.18);
  border-radius: var(--radius-lg);
  color: var(--color-brand-light);
  flex-shrink: 0;
}

.oc-journey__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.oc-journey__active-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(27, 142, 248, 0.10);
  border: 1px solid rgba(27, 142, 248, 0.22);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-brand-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.oc-journey__active-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  animation: oc-blink 2s ease-in-out infinite;
}

@keyframes oc-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Phases ── */
.oc-journey__phases {
  display: flex;
  flex-direction: column;
  padding-block: 4px;
}

.oc-phase {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 12px;
}

.oc-phase__track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared dot base */
.oc-phase__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* Done */
.oc-phase__dot--done {
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(27, 142, 248, 0.18);
  color: #fff;
}

/* Active */
.oc-phase__dot--active {
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(27, 142, 248, 0.22);
}

.oc-phase__pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 142, 248, 0.55);
  animation: oc-phase-pulse 2.4s ease-out infinite;
}

@keyframes oc-phase-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Future */
.oc-phase__dot--future {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
}

/* Connecting line */
.oc-phase__line {
  width: 1.5px;
  flex: 1;
  min-height: 14px;
  margin: 3px 0;
  background: linear-gradient(to bottom,
    rgba(27, 142, 248, 0.40) 0%,
    rgba(255, 255, 255, 0.06) 100%);
}

.oc-phase--future .oc-phase__line {
  background: rgba(255, 255, 255, 0.06);
}

/* Phase body text */
.oc-phase__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
  padding-bottom: 18px;
}

.oc-phase:last-child .oc-phase__body {
  padding-bottom: 0;
}

.oc-phase__name {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
}

.oc-phase--future .oc-phase__name {
  color: rgba(255, 255, 255, 0.45);
}

.oc-phase__meta {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.02em;
}

/* ── Stats row ── */
.oc-journey__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.oc-journey__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.oc-journey__stat-val {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.oc-journey__stat-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.03em;
  text-align: center;
}

.oc-journey__stat-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* ── Floating chips ── */
.oc-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(11, 20, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
  z-index: 2;
}

.oc-float--tr {
  top: 8%;
  right: 0;
  animation: oc-float-a 7s ease-in-out infinite;
}

.oc-float--bl {
  bottom: 8%;
  left: 0;
  animation: oc-float-b 6.5s ease-in-out infinite;
}

@keyframes oc-float-a {
  0%, 100% { transform: translateY(0)   rotate(1.5deg); }
  50%       { transform: translateY(-7px) rotate(1.5deg); }
}

@keyframes oc-float-b {
  0%, 100% { transform: translateY(0)  rotate(-1.5deg); }
  50%       { transform: translateY(6px) rotate(-1.5deg); }
}

.oc-float__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 142, 248, 0.12);
  border: 1px solid rgba(27, 142, 248, 0.22);
  border-radius: 6px;
  color: var(--color-brand-light);
  flex-shrink: 0;
}

.oc-float__label {
  font-family: 'Manrope', var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Responsive ── */

/* xs: ≤479px */
@media (max-width: 479px) {
  .oc-section {
    padding-block: var(--space-8);
  }
  .oc-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .oc-section__visual {
    height: 380px;
  }
  .oc-journey {
    max-width: 100%;
  }
  .oc-section__desc {
    max-width: 100%;
  }
  /* .oc-journey is max-width:100% at this width, filling the whole
     visual column — chips pinned at right:0/left:0 have nowhere to
     sit without overlapping it. Hidden through 767px; the card gets
     its own max-width back at 768px+ leaving room for both. */
  .oc-float--tr,
  .oc-float--bl { display: none; }
}

/* sm: 480px–767px */
@media (min-width: 480px) and (max-width: 767px) {
  .oc-section {
    padding-block: var(--space-8);
  }
  .oc-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .oc-section__visual {
    height: 400px;
  }
  .oc-section__desc {
    max-width: 100%;
  }
  .oc-float--tr,
  .oc-float--bl { display: none; }
}

/* md: 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .oc-section {
    padding-block: var(--space-10);
  }
  .oc-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .oc-section__visual {
    height: 380px;
  }
  .oc-section__desc {
    max-width: 560px;
  }
}

/* lg+: 1024px+ */
@media (min-width: 1024px) {
  .oc-section {
    padding-block: var(--space-12);
  }
  .oc-section__layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* xl+: 1280px+ */
@media (min-width: 1280px) {
  .oc-section__visual {
    height: 480px;
  }
}