/* ═══════════════════════════════════════════════════════════════
   Heeiz Animations & Section Styles — v2
   ═══════════════════════════════════════════════════════════════ */

/* ─── Brand Gradient Palette ─── */
:root {
  --brand-1: #2fb7b0;
  --brand-2: #005579;
  --brand-g:   linear-gradient(135deg, #2fb7b0 0%, #005579 100%);
  --brand-g-r: linear-gradient(135deg, #005579 0%, #2fb7b0 100%);
  --brand-g-h: linear-gradient(to left,  #2fb7b0 0%, #005579 100%);
  --brand-glow: rgba(47,183,176,0.28);

  /* ── Z-index scale ── */
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
}
/* Gradient text utility */
.g-text {
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Scroll Reveal System ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Global Button Overrides ─── */
.btn-primary {
  background: linear-gradient(135deg, #2fb7b0 0%, #005579 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(47,183,176,0.35) !important;
  border-color: transparent !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #38cac3 0%, #006a99 100%) !important;
  box-shadow: 0 8px 36px rgba(47,183,176,0.55) !important;
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent !important;
  color: #2fb7b0 !important;
  border: 1px solid transparent !important;
  background-image: linear-gradient(rgba(3,14,22,0.01),rgba(3,14,22,0.01)),
    linear-gradient(135deg, rgba(47,183,176,0.5), rgba(0,85,121,0.5)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.btn-secondary:hover {
  color: #fff !important;
  background-image: linear-gradient(rgba(47,183,176,0.12),rgba(47,183,176,0.12)),
    linear-gradient(135deg, #2fb7b0, #005579) !important;
  transform: translateY(-2px);
}

/* ─── Section Header shared ─── */
.section-header-v2 { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: var(--space-16); }
.section-header-v2 .section-label { margin-bottom: var(--space-5); }
.section-header-v2 h2 { margin-bottom: var(--space-6); }
.section-header-v2 p  { color: var(--heeiz-ink-500); font-size: 1.05rem; line-height: 1.85; }

.section-dark .section-header-v2 p  { color: rgba(255,255,255,0.55); }
.section-dark .section-label        { color: #2fb7b0; }
.section-dark .section-label::before{ background: var(--brand-g); }

/* Global gradient text (used in headings via class text-gradient-teal) */
.text-gradient-teal {
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════
   HERO v2 — Deep Brand
   ═══════════════════════════════════════════════ */
.hero-v2 {
  background: #030e16;
  min-height: 100vh;   /* fallback for browsers without dvh support */
  min-height: 100dvh;  /* dynamic viewport: excludes mobile browser chrome */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% -5%,  rgba(0,85,121,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 90%,  rgba(47,183,176,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero-v2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,183,176,0.25), transparent);
  z-index: 2;
}
.hero-v2-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 840px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  padding-block: clamp(96px, 14vw, 148px);
}
.hero-v2-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-v2-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illustration { width: 100%; max-width: 480px; height: auto; }
.hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-7);
}

/* Pulsing live dot */
.hve-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2fb7b0;
  box-shadow: 0 0 0 0 rgba(47,183,176,0.6);
  animation: hveDotPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hveDotPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(47,183,176,0.6); }
  50%     { box-shadow: 0 0 0 6px rgba(47,183,176,0);   }
}

/* "منصة" — small muted prefix */
.hve-pre {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* Thin separator */
.hve-sep {
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom,
    transparent, rgba(47,183,176,0.45), transparent);
  flex-shrink: 0;
}

/* "حيّز" — bold gradient brand name */
.hve-brand {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(to left, #2fb7b0 0%, #90e8e4 50%, #2fb7b0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 3.5s linear infinite;
  position: relative;
}
/* gradient underline instead of pill */
.hve-brand::after {
  content: '';
  position: absolute;
  bottom: -3px;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(to left, #2fb7b0, #005579);
  border-radius: 2px;
  opacity: 0.7;
}
.hero-v2-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-8);
}
.hero-v2-title em {
  font-style: normal;
  background: linear-gradient(to left, #2fb7b0 0%, #80d8d4 40%, #2fb7b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.hero-v2-lead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: 1.75;
}
.hero-v2-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-14);
}
.hero-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: var(--space-12);
}
.hero-stat {
  background: rgba(255,255,255,0.03);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  transition: background 0.25s;
}
.hero-stat:hover { background: rgba(255,255,255,0.06); }
.hero-stat-value {
  display: block;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hero-stat-label {
  display: block;
  font-size: 0.775rem;
  color: rgba(255,255,255,0.45);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════
   HERO — Background Animation & Word Morph
   ═══════════════════════════════════════════════ */
.hba {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Diagonal crosshatch grid */
.hba-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg,  rgba(47,183,176,0.07) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(47,183,176,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 1;
}

/* Animated gradient blobs */
.hba-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.hba-blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,85,121,0.55) 0%, transparent 70%);
  top: -220px; right: -120px;
  animation: blobDrift1 16s ease-in-out infinite;
}
.hba-blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(47,183,176,0.22) 0%, transparent 70%);
  bottom: -140px; left: -80px;
  animation: blobDrift2 20s ease-in-out infinite;
}
.hba-blob-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(0,85,121,0.3) 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  animation: blobDrift3 12s ease-in-out infinite;
}
@keyframes blobDrift1 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(-70px, 60px); }
  70%     { transform: translate(40px, -50px); }
}
@keyframes blobDrift2 {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(50px, -40px); }
  66%     { transform: translate(-30px, 60px); }
}
@keyframes blobDrift3 {
  0%,100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 0.7; transform: translate(-50%,-50%) scale(1.3); }
}

/* ── Geometric Diamond Shapes ── */
.hba-diamond {
  position: absolute;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(3,14,22,0) 0 0) padding-box,
    linear-gradient(135deg, rgba(47,183,176,0.22), rgba(0,85,121,0.12)) border-box;
  pointer-events: none;
}
.hba-diamond-1 {
  width: 380px; height: 380px;
  top: -100px; right: -80px;
  transform: rotate(45deg);
  animation: diamondSpin 50s linear infinite;
}
.hba-diamond-2 {
  width: 220px; height: 220px;
  bottom: -60px; left: -50px;
  transform: rotate(45deg);
  opacity: 0.7;
  animation: diamondSpin 36s linear infinite reverse;
}
.hba-diamond-3 {
  width: 140px; height: 140px;
  top: 20%; left: 7%;
  transform: rotate(45deg);
  opacity: 0.4;
  animation: diamondSpin 28s linear infinite;
  background:
    linear-gradient(rgba(3,14,22,0) 0 0) padding-box,
    linear-gradient(135deg, rgba(47,183,176,0.15), rgba(0,85,121,0.08)) border-box;
}
@keyframes diamondSpin {
  0%   { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}

/* ── Corner Bracket Ornaments ── */
.hba-corner {
  position: absolute;
  width: 54px;
  height: 54px;
  pointer-events: none;
}
.hba-corner-tl {
  top: 28px; left: 28px;
  border-top: 1.5px solid rgba(47,183,176,0.4);
  border-left: 1.5px solid rgba(47,183,176,0.4);
}
.hba-corner-tr {
  top: 28px; right: 28px;
  border-top: 1.5px solid rgba(47,183,176,0.4);
  border-right: 1.5px solid rgba(47,183,176,0.4);
}
.hba-corner-bl {
  bottom: 28px; left: 28px;
  border-bottom: 1.5px solid rgba(0,85,121,0.45);
  border-left: 1.5px solid rgba(0,85,121,0.45);
}
.hba-corner-br {
  bottom: 28px; right: 28px;
  border-bottom: 1.5px solid rgba(0,85,121,0.45);
  border-right: 1.5px solid rgba(0,85,121,0.45);
}

/* ── Word Morph line ── */
.hero-morph-line {
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: rgba(255,255,255,0.48);
  margin-bottom: var(--space-12);
  font-family: 'Noto Kufi Arabic', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: wrap;
  line-height: 1.7;
}
.hero-morph-word {
  display: inline-block;
  font-weight: 900;
  font-size: 1.2em;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  background: linear-gradient(to left, #2fb7b0 0%, #80e0db 50%, #2fb7b0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(47,183,176,0.6));
  animation: shimmerWord 3s linear infinite;
}
@keyframes shimmerWord {
  0%   { background-position: 200% center; }
  100% { background-position:   0% center; }
}
.hero-morph-word::after {
  content: '';
  position: absolute;
  bottom: -4px;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, #2fb7b0, #005579);
  border-radius: 2px;
  opacity: 0.8;
}
.hero-morph-word.visible  { opacity: 1; transform: translateY(0); }
.hero-morph-word.fading   { opacity: 0; transform: translateY(-12px); }

/* ═══════════════════════════════════════════════
   MAP COVERAGE — Section 2
   ═══════════════════════════════════════════════ */
.map-coverage-section {
  background: #050d15;
  position: relative;
  overflow: hidden;
}
/* Top + bottom border lines */
.map-coverage-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(47,183,176,0.35) 40%, rgba(0,85,121,0.35) 70%, transparent 100%);
  z-index: 2;
}
.map-coverage-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,85,121,0.25) 50%, transparent 100%);
  z-index: 2;
}

/* ── Background layers ── */
.mcs-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.mcs-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.mcs-bg-glow-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(47,183,176,0.11) 0%, transparent 70%);
  top: -120px; left: -80px;
}
.mcs-bg-glow-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,85,121,0.18) 0%, transparent 70%);
  bottom: -80px; right: -60px;
}
.mcs-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47,183,176,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,183,176,0.04) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ── Eyebrow ── */
.mcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-14);
  position: relative;
  z-index: 1;
}
.mcs-eyebrow-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}
.mcs-eyebrow-sep {
  width: 32px; height: 1px;
  background: linear-gradient(to left, rgba(47,183,176,0.5), transparent);
  flex-shrink: 0;
}
.mcs-eyebrow-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ── Body grid ── */
.mcs-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-24);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Content column ── */

/* Title block */
.mcs-title-block {
  position: relative;
  margin-bottom: var(--space-10);
}
/* Watermark "18" behind title */
.mcs-title-watermark {
  position: absolute;
  top: -16px;
  inset-inline-end: -8px;
  font-size: clamp(6rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(47,183,176,0.07);
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.mcs-title {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}
.mcs-title-top {
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: #fff;
}
.mcs-title-mid {
  font-size: clamp(2rem, 4vw, 3rem);
  color: rgba(255,255,255,0.75);
}
.mcs-title-mid em {
  font-style: normal;
  background: linear-gradient(to left, #2fb7b0 0%, #80e0db 45%, #2fb7b0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 5s linear infinite;
}
.mcs-title-btm {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: rgba(255,255,255,0.28);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

.mcs-lead {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.42);
  line-height: 2;
  margin-bottom: var(--space-10);
  font-family: 'Noto Kufi Arabic', sans-serif;
  max-width: 400px;
  border-inline-start: 2px solid rgba(47,183,176,0.2);
  padding-inline-start: var(--space-4);
}

/* Metric feature rows */
.mcs-feat-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-8);
}
.mcs-feat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.mcs-feat-row:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.mcs-feat-row:hover { background: rgba(47,183,176,0.03); }
/* Prominent metric number */
.mcs-feat-metric {
  min-width: 58px;
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: linear-gradient(to left, #2fb7b0 0%, #80e0db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  padding-top: 2px;
  text-align: center;
}
.mcs-feat-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  margin-bottom: 3px;
}
.mcs-feat-body span {
  font-size: 0.775rem;
  color: rgba(255,255,255,0.38);
  font-family: 'Noto Kufi Arabic', sans-serif;
  line-height: 1.55;
}

/* Stats bar — 4 col horizontal */
.mcs-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.mcs-stat {
  background: rgba(5,13,21,0.8);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  transition: background 0.25s;
}
.mcs-stat:hover { background: rgba(47,183,176,0.08); }
.mcs-stat strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  background: linear-gradient(to left, #2fb7b0, #80e0db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.mcs-stat span {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.38);
  font-family: 'Noto Kufi Arabic', sans-serif;
  margin-top: 3px;
}

/* ── Map column ── */
.mcs-map-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.mcs-map-frame {
  position: relative;
  width: 100%;
}
/* Ambient glow behind the map */
.mcs-map-glow {
  position: absolute;
  inset: -50px;
  background: radial-gradient(ellipse 65% 55% at 50% 52%,
    rgba(47,183,176,0.14) 0%, rgba(0,85,121,0.08) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Floating coverage badge */
.mcs-coverage-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 0;
  background: rgba(5,13,21,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(47,183,176,0.22);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  z-index: 10;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(47,183,176,0.06);
}
.mcs-coverage-badge strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  background: linear-gradient(to left, #2fb7b0, #80e0db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.mcs-coverage-badge span {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  font-family: 'Noto Kufi Arabic', sans-serif;
}
.mcs-map-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.28);
  font-family: 'Noto Kufi Arabic', sans-serif;
  letter-spacing: 0.03em;
}
.map-coverage-section .iraq-svg { max-width: 100%; position: relative; z-index: 1; }
.map-coverage-section .iraq-map-wrap { min-height: auto; }

/* ── Hero Feature Grid ── */
.hero-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.hfg-item {
  background: rgba(3,14,22,0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: background 0.25s;
}
.hfg-item:hover { background: rgba(47,183,176,0.09); }
.hfg-ico {
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(47,183,176,0.16), rgba(0,85,121,0.2));
  border: 1px solid rgba(47,183,176,0.22);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #2fb7b0;
}
.hfg-text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
}
.hfg-text span {
  font-size: 0.69rem;
  color: rgba(255,255,255,0.36);
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ── Hero Stats Strip ── */
.hero-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-8);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  max-width: 420px;
  margin-inline: auto;
}
.hss-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hss-item strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 900;
  background: linear-gradient(to left, #2fb7b0, #80e0db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.hss-item span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.38);
  font-family: 'Noto Kufi Arabic', sans-serif;
  margin-top: 2px;
}
.hss-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(47,183,176,0.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   PIPELINE v2 — Phase Rows Layout
   ═══════════════════════════════════════════════ */
.pipeline-v2 {
  background: #f4f7f9;
  position: relative;
  overflow: hidden;
}
.plv2-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 35% at 50% 0%,
    rgba(47,183,176,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Top block: title + pills ── */
.plv2-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.plv2-top-text { flex: 1; min-width: 260px; }
.plv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.plv2-ey-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plv2-ey-sep {
  width: 28px; height: 1px;
  background: linear-gradient(to left, rgba(47,183,176,0.5), transparent);
  flex-shrink: 0;
}
.plv2-ey-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plv2-title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  color: var(--heeiz-ink-900);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.plv2-title em {
  font-style: normal;
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plv2-sub {
  font-size: 0.9rem;
  color: var(--heeiz-ink-400);
  line-height: 1.9;
  font-family: 'Noto Kufi Arabic', sans-serif;
  max-width: 420px;
  margin-top: var(--space-1);
}

/* Phase indicator pills */
.plv2-phase-pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-bottom: var(--space-1);
}
.plv2-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: 'Noto Kufi Arabic', sans-serif;
  white-space: nowrap;
}
.plv2-pill--1 { background: rgba(47,183,176,0.1); color: #1a9aa6; }
.plv2-pill--2 { background: rgba(0,85,121,0.08);  color: #005579; }
.plv2-pill--3 { background: rgba(47,183,176,0.08); color: #1a9aa6; }
.plv2-pill-arrow { color: var(--heeiz-ink-300); flex-shrink: 0; }

/* ══ Phase Rows ══ */
.plv2-phases {
  position: relative;
  z-index: 1;
}
.plv2-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-14);
  align-items: start;
  padding-block: var(--space-12);
  border-top: 1px solid var(--heeiz-ink-100);
}
.plv2-row:last-child { border-bottom: 1px solid var(--heeiz-ink-100); }

/* Phase label column */
.plv2-row-label {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-1);
  position: sticky;
  top: 100px;
}
.plv2-row-num {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.plv2-row-label strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--heeiz-ink-800);
  margin-bottom: var(--space-1);
  display: block;
}
.plv2-row-label > span {
  font-size: 0.75rem;
  color: var(--heeiz-teal-600);
  font-family: 'Noto Kufi Arabic', sans-serif;
  display: block;
}

/* Step cards grid */
.plv2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-4);
}
.plv2-card {
  background: #fff;
  border: 1px solid var(--heeiz-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
/* Animated left accent line on hover */
.plv2-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 3px; height: 0;
  background: var(--brand-g);
  transition: height 0.25s ease;
}
.plv2-card:hover {
  border-color: rgba(47,183,176,0.3);
  box-shadow: 0 4px 20px rgba(47,183,176,0.09);
  transform: translateY(-2px);
}
.plv2-card:hover::before { height: 100%; }
.plv2-card-n {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--heeiz-teal-500);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.plv2-card strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heeiz-ink-800);
  margin-bottom: 4px;
}
.plv2-card span {
  display: block;
  font-size: 0.72rem;
  color: var(--heeiz-ink-400);
  line-height: 1.55;
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ═══════════════════════════════════════════════
   WHY HEEIZ v2 — Premium Redesign
   ═══════════════════════════════════════════════ */
.why-v2 {
  background: #030e16;
  position: relative;
  overflow: hidden;
}

/* ── Background ── */
.why-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.why-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.why-bg-glow-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(47,183,176,0.07) 0%, transparent 70%);
  top: -200px; inset-inline-start: -150px;
}
.why-bg-glow-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,85,121,0.14) 0%, transparent 70%);
  bottom: -100px; inset-inline-end: -80px;
}
.why-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47,183,176,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,183,176,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Header ── */
.why-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
  position: relative;
  z-index: 1;
}
.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.why-ey-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--brand-g-r);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.why-ey-sep {
  width: 28px; height: 1px;
  background: linear-gradient(to left, rgba(47,183,176,0.5), transparent);
  flex-shrink: 0;
}
.why-ey-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Noto Kufi Arabic', sans-serif;
}
.why-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-7);
}
.why-title em {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  background: linear-gradient(to left, #2fb7b0 0%, #80e0db 45%, #2fb7b0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 5s linear infinite;
}
.why-lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.4);
  line-height: 2;
  font-family: 'Noto Kufi Arabic', sans-serif;
  max-width: 480px;
  margin-inline: auto;
}

/* ── Compare grid ── */
.why-compare {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 0;
  align-items: start;
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-8);
}

/* VS pill */
.why-vs {
  display: flex;
  justify-content: center;
  padding-top: var(--space-14);
}
.why-vs span {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  font-weight: 900;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.04em;
}

/* ── Shared column ── */
.why-col {
  border-radius: var(--radius-xl);
  padding: var(--space-9);
  display: flex;
  flex-direction: column;
}
.why-col-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.why-col-label-bad  { color: rgba(248,113,113,0.65); }
.why-col-label-good { color: var(--heeiz-teal-400); }
.why-col-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  margin: 0 0 var(--space-1);
  line-height: 1.3;
}
.why-col-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.28);
  font-family: 'Noto Kufi Arabic', sans-serif;
  margin-bottom: var(--space-6);
}

/* ── List ── */
.why-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.why-item:last-child { border: none; }
.why-item-ico { flex-shrink: 0; margin-top: 2px; }
.why-item-bad  span { color: rgba(255,255,255,0.38); }
.why-item-good span { color: rgba(255,255,255,0.82); }

/* ── Bad column ── */
.why-col-bad {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(220,38,38,0.1);
  border-top: 2px solid rgba(220,38,38,0.22);
}
.why-bad-footer {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: rgba(220,38,38,0.04);
  border: 1px solid rgba(220,38,38,0.08);
  border-radius: var(--radius-lg);
  text-align: center;
}
.why-bad-label {
  display: block;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}
.why-bad-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(248,113,113,0.5);
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ── Good column ── */
.why-col-good {
  background: rgba(3,18,32,0.95);
  border: 1px solid rgba(47,183,176,0.22);
  position: relative;
  box-shadow:
    0 0 80px rgba(47,183,176,0.09),
    0 24px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(47,183,176,0.12);
}
/* Gradient glow line at top */
.why-col-good::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18%; right: 18%;
  height: 2px;
  background: linear-gradient(to right, transparent, #2fb7b0, #005579, #2fb7b0, transparent);
  border-radius: 2px;
}
/* Floating badge */
.why-good-badge {
  position: absolute;
  top: -15px;
  left: 0; right: 0;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(135deg, #2fb7b0 0%, #005579 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 5px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(47,183,176,0.45), 0 2px 8px rgba(0,0,0,0.4);
  white-space: nowrap;
}
/* Good column CTA */
.why-good-cta {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(47,183,176,0.14);
}

/* ── Metrics strip ── */
.why-metrics {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.why-metric {
  flex: 1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  transition: background 0.25s;
}
.why-metric:hover { background: rgba(47,183,176,0.05); }
.why-metric strong {
  display: block;
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 900;
  background: linear-gradient(to left, #2fb7b0, #80e0db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.why-metric span {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-family: 'Noto Kufi Arabic', sans-serif;
  line-height: 1.5;
}
.why-divider {
  width: 1px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-self: stretch;
}

/* ═══════════════════════════════════════════════
   SERVICES v2 — Cool Light / Dark Featured Card
   ═══════════════════════════════════════════════ */
.services-v2 { background: #eef2f7; }

/* ── Centered header ── */
.srv-header {
  text-align: center;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-14);
}
.srv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  background: rgba(26,154,166,0.08);
  border: 1px solid rgba(26,154,166,0.2);
  border-radius: var(--radius-full);
  padding: 6px 18px;
}
.srv-ey-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--heeiz-teal-600);
  letter-spacing: 0.1em;
}
.srv-ey-sep {
  width: 14px;
  height: 1px;
  background: var(--heeiz-teal-300);
  flex-shrink: 0;
}
.srv-ey-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--heeiz-teal-700);
  letter-spacing: 0.04em;
}
.srv-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: var(--heeiz-ink-900);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.srv-title em {
  display: block;
  font-style: normal;
  background: linear-gradient(to left, #0d8a94 0%, #2fb7b0 50%, #0d8a94 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s linear infinite;
}
.srv-lead {
  font-size: 1rem;
  color: var(--heeiz-ink-500);
  line-height: 1.78;
  max-width: 440px;
  margin-inline: auto;
}

/* ── Grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── Base card (white) ── */
.srv-card {
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s;
}
.srv-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to left, #0d8a94, #2fb7b0);
  transition: width 0.38s ease;
}
.srv-card:hover::before { width: 100%; }
.srv-card:hover {
  border-color: #a8c8e0;
  box-shadow: 0 10px 36px rgba(26,154,166,0.1), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-3px);
}

/* ── Card number ── */
.srv-card-num {
  position: absolute;
  top: var(--space-5);
  inset-inline-end: var(--space-5);
  font-size: 1.9rem;
  font-weight: 900;
  color: #dce4ef;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.28s;
}
.srv-card:hover .srv-card-num { color: rgba(26,154,166,0.18); }

/* ── Card icon ── */
.srv-card-icon {
  width: 46px;
  height: 46px;
  background: var(--heeiz-teal-50);
  border: 1px solid var(--heeiz-teal-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-teal-600);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.srv-card:hover .srv-card-icon {
  background: var(--heeiz-teal-100);
  color: var(--heeiz-teal-700);
  box-shadow: 0 0 0 5px rgba(26,154,166,0.08);
}

/* ── Card text ── */
.srv-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heeiz-ink-900);
  margin-bottom: var(--space-3);
}
.srv-card-desc {
  font-size: 0.875rem;
  color: var(--heeiz-ink-500);
  line-height: 1.7;
  flex: 1;
}
.srv-card-badge {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--heeiz-teal-600);
  background: var(--heeiz-teal-50);
  border: 1px solid var(--heeiz-teal-100);
  border-radius: var(--radius-full);
  padding: 3px 11px;
  letter-spacing: 0.03em;
}
.srv-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heeiz-teal-600);
  margin-top: var(--space-5);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.srv-card-link:hover { gap: 9px; color: var(--heeiz-teal-700); }

/* ── Featured card (DARK — stands out in light section) ── */
.srv-card--feat {
  grid-column: span 2;
  background: #07111d;
  border-color: rgba(26,154,166,0.28);
  padding: var(--space-9);
}
.srv-card--feat::before {
  width: 100%;
  background: linear-gradient(to right, transparent, rgba(47,183,176,0.65), transparent);
  transition: none;
}
.srv-card--feat:hover {
  border-color: rgba(26,154,166,0.55);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(26,154,166,0.15), inset 0 0 40px rgba(26,154,166,0.04);
  transform: translateY(-3px);
}
.srv-feat-num {
  position: absolute;
  top: var(--space-6);
  inset-inline-end: var(--space-8);
  font-size: 6rem;
  font-weight: 900;
  color: rgba(26,154,166,0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.srv-feat-icon {
  width: 58px;
  height: 58px;
  background: rgba(26,154,166,0.12);
  border: 1px solid rgba(26,154,166,0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-teal-400);
  margin-bottom: var(--space-6);
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(26,154,166,0.14);
  transition: box-shadow 0.3s;
}
.srv-card--feat:hover .srv-feat-icon {
  box-shadow: 0 0 40px rgba(26,154,166,0.28);
}
.srv-card--feat .srv-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-4);
}
.srv-card--feat .srv-card-desc {
  font-size: 0.925rem;
  color: rgba(255,255,255,0.55);
  max-width: 380px;
  margin-bottom: 0;
}
.srv-feat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
}
.srv-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--heeiz-teal-300);
  background: rgba(26,154,166,0.1);
  border: 1px solid rgba(26,154,166,0.22);
  border-radius: var(--radius-full);
  padding: 5px 14px;
}
.srv-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heeiz-teal-400);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.srv-card-cta:hover { gap: var(--space-3); color: var(--heeiz-teal-300); }

/* ═══════════════════════════════════════════════
   HOW IT WORKS — Timeline Steps
   ═══════════════════════════════════════════════ */
.hiw-section {
  background: #060e18;
  position: relative;
  overflow: hidden;
}

/* ── Background glows ── */
.hiw-bg { position: absolute; inset: 0; pointer-events: none; }
.hiw-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}
.hiw-bg-glow-1 {
  width: 640px; height: 640px;
  background: rgba(26,154,166,0.07);
  top: -180px;
  inset-inline-end: -140px;
}
.hiw-bg-glow-2 {
  width: 480px; height: 480px;
  background: rgba(26,154,166,0.05);
  bottom: -120px;
  inset-inline-start: -100px;
}

/* ── Centered header ── */
.hiw-header {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-20);
  position: relative;
  z-index: 1;
}
.hiw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  background: rgba(26,154,166,0.08);
  border: 1px solid rgba(26,154,166,0.18);
  border-radius: var(--radius-full);
  padding: 7px 18px;
}
.hiw-ey-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--heeiz-teal-400);
  letter-spacing: 0.1em;
}
.hiw-ey-sep {
  width: 14px;
  height: 1px;
  background: rgba(26,154,166,0.4);
  flex-shrink: 0;
}
.hiw-ey-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
}
.hiw-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.hiw-title em {
  display: block;
  font-style: normal;
  background: linear-gradient(to left, #0d8a94 0%, #2fb7b0 50%, #67d5cf 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s linear infinite;
}
.hiw-lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.75;
}

/* ── Two rows container ── */
.hiw-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  position: relative;
  z-index: 1;
}

/* ── One row of 3 steps ── */
.hiw-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  position: relative;
}

/* The horizontal connector line through circle centers */
.hiw-row::before {
  content: '';
  position: absolute;
  top: 27px; /* half of 54px node */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(26,154,166,0.12),
    rgba(26,154,166,0.5) 25%,
    rgba(26,154,166,0.5) 75%,
    rgba(26,154,166,0.12)
  );
  z-index: 0;
}

/* ── Individual step ── */
.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Numbered circle node (sits on the line) */
.hiw-step-node {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #060e18; /* same as section bg — "cuts" through the line */
  border: 1.5px solid rgba(26,154,166,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-7);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.32s, box-shadow 0.32s;
}
.hiw-step:hover .hiw-step-node {
  border-color: rgba(26,154,166,0.75);
  box-shadow: 0 0 0 7px rgba(26,154,166,0.07), 0 0 22px rgba(26,154,166,0.2);
}
.hiw-step-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--heeiz-teal-400);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Step card body */
.hiw-step-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--space-6) var(--space-5);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  flex: 1;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.hiw-step:hover .hiw-step-body {
  background: rgba(26,154,166,0.06);
  border-color: rgba(26,154,166,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Icon box */
.hiw-step-icon {
  width: 42px;
  height: 42px;
  background: rgba(26,154,166,0.1);
  border: 1px solid rgba(26,154,166,0.18);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-teal-400);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.hiw-step:hover .hiw-step-icon {
  background: rgba(26,154,166,0.16);
  box-shadow: 0 0 18px rgba(26,154,166,0.2);
}

.hiw-step-title {
  font-size: 0.975rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}
.hiw-step-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════════
   DELIVERY NETWORK v6 — Partner Logo Showcase
   ═══════════════════════════════════════════════ */

.dnet3 {
  background: transparent;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
}

/* ── Background accent glows ── */
.dnet3-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.dnet3-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.dnet3-glow-1 {
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(26,154,166,0.12) 0%, transparent 65%);
  top: -60px;
  inset-inline-start: -80px;
}
.dnet3-glow-2 {
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.07) 0%, transparent 65%);
  bottom: -40px;
  inset-inline-end: -60px;
}

/* ── Header ── */
.dnet3-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}
.dnet3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--heeiz-teal-400);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.dnet3-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--heeiz-teal-400);
  animation: pulseScale 2s ease-in-out infinite;
  flex-shrink: 0;
}
.dnet3-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}
.dnet3-title em {
  font-style: normal;
  background: linear-gradient(135deg, #5ee7df 0%, #1a9aa6 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dnet3-lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
}

/* ── Logo grid ── */
.dnet3-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-14);
  list-style: none;
  padding: 0;
  margin-inline: auto;
  max-width: 960px;
}

/* ── Partner card ── */
.dnet3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  text-decoration: none;
  overflow: hidden;
  transition:
    background   0.35s ease,
    border-color 0.35s ease,
    transform    0.35s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow   0.35s ease;
  cursor: default;
}
a.dnet3-card { cursor: pointer; }

/* Shimmer sweep on hover */
.dnet3-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(26,154,166,0.06) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.dnet3-card:hover::before { transform: translateX(100%); }

.dnet3-card:hover {
  background: rgba(26,154,166,0.07);
  border-color: rgba(26,154,166,0.32);
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(26,154,166,0.18),
    0 0 0 1px rgba(26,154,166,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: default;
}
a.dnet3-card:hover { cursor: pointer; }

/* ── Verified badge ── */
.dnet3-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(26,154,166,0.12);
  border: 1px solid rgba(26,154,166,0.22);
  border-radius: var(--radius-full);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--heeiz-teal-300);
  letter-spacing: 0.04em;
}
.dnet3-badge svg { width: 9px; height: 9px; color: var(--heeiz-teal-400); }

/* ── Logo image ── */
.dnet3-card-img-wrap {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-3);
}
.dnet3-card-img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  /* subtle desaturation — full color on hover */
  filter: saturate(0.75) brightness(0.95);
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.dnet3-card:hover .dnet3-card-img {
  filter: saturate(1.1) brightness(1.05);
  transform: scale(1.06);
}

/* ── Initials fallback ── */
.dnet3-card-initials {
  width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(26,154,166,0.18), rgba(26,154,166,0.06));
  border: 1px solid rgba(26,154,166,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--heeiz-teal-300);
}

/* ── Card name ── */
.dnet3-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.4;
  transition: color 0.25s;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dnet3-card:hover .dnet3-card-name { color: rgba(255,255,255,0.75); }

/* ── Stats strip ── */
.dnet3-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  max-width: 780px;
  margin-inline: auto;
}
.dnet3-stat {
  flex: 1;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  transition: background 0.25s;
}
.dnet3-stat:hover { background: rgba(26,154,166,0.07); }
.dnet3-stat strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dnet3-stat span {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  margin-top: var(--space-2);
  font-weight: 500;
}
.dnet3-stat-sep {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ── Also keep dnet2 for any other usage ── */
/* ═══════════════════════════════════════════════
   DELIVERY NETWORK v5 — Marquee Logo Showcase
   ═══════════════════════════════════════════════ */
.dnet2 {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  padding-bottom: var(--space-20);
}
.dnet2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26,154,166,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 35% 25% at 100% 85%, rgba(26,154,166,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Centered header ── */
.dnet2-header {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  padding-top: var(--space-20);
  margin-bottom: var(--space-14);
}
.dnet2-header .display-md {
  color: #fff;
  margin-block: var(--space-4) var(--space-5);
}
.dnet2-header .display-md em {
  font-style: normal;
  color: var(--heeiz-teal-400);
}
.dnet2-lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  margin-bottom: var(--space-7);
}

/* ── Status badges ── */
.dnet2-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dnet2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.dnet2-badge--live {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
  color: #4ade80;
}
.dnet2-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: dnetBlink 2.5s ease-in-out infinite;
}
@keyframes dnetBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); opacity: 1; }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); opacity: 0.55; }
}

/* ── Marquee wrapper — full viewport width, no container ── */
.dnet2-marquee-wrap {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 10%, black 90%, transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 10%, black 90%, transparent 100%
  );
}

/* ── Scroll tracks ── */
.dnet2-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: dnet2Fwd 40s linear infinite;
}
.dnet2-track--rev {
  animation: dnet2Rev 32s linear infinite;
}
@keyframes dnet2Fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dnet2Rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.dnet2-marquee-wrap:hover .dnet2-track {
  animation-play-state: paused;
}

/* ── Logo pill ── */
.dnet2-logo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 36px;
  min-width: 150px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.dnet2-logo-pill:hover {
  background: rgba(26,154,166,0.1);
  border-color: rgba(26,154,166,0.35);
  box-shadow: 0 0 28px rgba(26,154,166,0.14);
}
.dnet2-logo-pill img {
  height: 34px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.3s, filter 0.3s;
  pointer-events: none;
  user-select: none;
}
.dnet2-logo-pill:hover img {
  opacity: 0.9;
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(26,154,166,0.55));
}

/* ── Stats grid ── */
.dnet2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-14);
}
.dnet2-stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.dnet2-stat:hover {
  background: rgba(26,154,166,0.08);
  border-color: rgba(26,154,166,0.22);
  transform: translateY(-2px);
}
.dnet2-stat strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dnet2-stat span {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   CALCULATOR v2 — Deep Navy
   ═══════════════════════════════════════════════ */
.calc-v2 {
  background: #060e18;
  position: relative;
  overflow: hidden;
}
.calc-v2::before {
  content: '';
  position: absolute;
  bottom: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(26,154,166,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Section header */
.calc-section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.calc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  background: rgba(26,154,166,.1);
  border: 1px solid rgba(26,154,166,.25);
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
  color: var(--heeiz-teal-300);
  letter-spacing: .04em;
  margin-bottom: var(--space-5);
}

.calc-eyebrow-num {
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}

.calc-main-title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.calc-main-title em {
  font-style: normal;
  background: linear-gradient(90deg, #f0a500, #ffd700, #f0a500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.calc-main-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.45);
  max-width: 420px;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════
   APP SECTION — Dark Navy + floating badges
   ═══════════════════════════════════════════════ */
.app-section {
  background: #080f1a;
  position: relative;
  overflow: hidden;
}
.app-section::before {
  content: '';
  position: absolute;
  top: 50%; right: -80px; transform: translateY(-50%);
  width: 520px; height: 580px;
  background: radial-gradient(ellipse, rgba(26,154,166,.1) 0%, transparent 65%);
  pointer-events: none;
}
.app-section::after {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(ellipse, rgba(99,102,241,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Grid */
.app-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-16);
  align-items: center;
}

/* Eyebrow */
.app-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  background: rgba(26,154,166,.1);
  border: 1px solid rgba(26,154,166,.25);
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
  color: var(--heeiz-teal-300);
  letter-spacing: .04em;
  margin-bottom: var(--space-5);
}
.app-eyebrow-num { color: rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }

/* Title */
.app-title {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--space-5);
}
.app-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--heeiz-teal-300), var(--heeiz-teal-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lead */
.app-lead {
  font-size: 1rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 440px;
}

/* Features */
.app-features {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-8);
}
.app-feat {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-feat:first-child { padding-top: 0; }
.app-feat:last-child  { border-bottom: none; }
.app-feat-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: rgba(26,154,166,.1);
  border: 1px solid rgba(26,154,166,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.app-feat-body h4 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.app-feat-body p  { font-size: .82rem; color: rgba(255,255,255,.45); margin: 0; }

/* Download buttons */
.app-downloads {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.app-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  color: #fff;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.app-dl-btn:hover {
  background: rgba(26,154,166,.12);
  border-color: rgba(26,154,166,.35);
  transform: translateY(-2px);
}
.app-dl-icon { width: 22px; height: 22px; flex-shrink: 0; opacity: .9; }
.app-dl-text small { display: block; font-size: .65rem; color: rgba(255,255,255,.45); }
.app-dl-text strong { display: block; font-size: .9rem; font-weight: 700; }
.app-platform-note { font-size: .75rem; color: rgba(255,255,255,.25); }

/* Visual column */
.app-visual {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.app-phone-wrap {
  position: relative;
  width: 240px;
  animation: phoneFloat 7s ease-in-out infinite;
}

/* ── CSS phone frame ── */
.phone-frame {
  position: relative;
  width: 240px;
  background: linear-gradient(160deg, #222230 0%, #0d0d14 60%, #111120 100%);
  border-radius: 44px;
  border: 1.5px solid rgba(255,255,255,0.13);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    0 8px  0 -2px rgba(255,255,255,0.04),  /* rim highlight bottom */
    -6px 0 0 -2px rgba(255,255,255,0.05), /* rim highlight left */
    0 70px 140px rgba(0,0,0,0.80),
    0 30px  60px rgba(0,0,0,0.50),
    0 10px  20px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    inset 1px 0 0 rgba(255,255,255,0.05);
  padding: 10px;
  /* Subtle 2D tilt — no perspective distortion on the screen */
  transform: rotate(-2deg);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.app-visual:hover .phone-frame {
  transform: rotate(-1deg);
}

/* Power button — right edge */
.phone-btn-power {
  position: absolute;
  right: -2.5px; top: 148px;
  width: 3px; height: 58px;
  background: linear-gradient(180deg, #252535 0%, #1a1a27 100%);
  border-radius: 0 2px 2px 0;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: none;
}

/* Volume buttons — left edge (stacked via ::before / ::after) */
.phone-btn-vol {
  position: absolute;
  left: -2.5px; top: 100px;
  width: 3px; height: 36px;
  background: linear-gradient(180deg, #252535 0%, #1a1a27 100%);
  border-radius: 2px 0 0 2px;
  border: 1px solid rgba(255,255,255,0.06);
  border-right: none;
}
.phone-btn-vol::after {
  content: '';
  position: absolute;
  top: 46px; left: 0;
  width: 3px; height: 36px;
  background: inherit;
  border: inherit;
  border-radius: 2px 0 0 2px;
}

/* Screen container — height driven by image, overflow clips to rounded frame */
.phone-screen {
  position: relative;
  width: 100%;
  background: #06060e;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Dynamic island pill */
.phone-island {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.04);
}

/* Real app screenshot — no forced scaling, no animation, native quality */
.phone-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

/* Glossy glare overlay */
.phone-screen-glare {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    155deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.02) 35%,
    transparent 60%
  );
  border-radius: 34px 34px 0 0;
  pointer-events: none;
  z-index: 6;
}

/* Floating animation for the whole phone */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* Teal glow beneath phone */
.app-phone-glow {
  position: absolute;
  bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 200px;
  background: radial-gradient(ellipse, rgba(26,154,166,.55) 0%, transparent 65%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

/* Floating badges */
.app-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(8,15,26,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(26,154,166,.06);
  white-space: nowrap;
  z-index: 3;
}
.app-badge strong { display: block; font-size: .8rem; font-weight: 700; color: #fff; }
.app-badge span   { font-size: .7rem; color: rgba(255,255,255,.45); }
.app-badge-icon   { font-size: 1.2rem; line-height: 1; }
.app-badge-body   { display: flex; flex-direction: column; }

/* Badge: new order — top right */
.app-badge--new-order {
  top: 80px; right: -125px;
  animation: appFloat 3.5s ease-in-out infinite;
}
.app-badge-pulse {
  position: absolute;
  top: 9px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: appPulse 2s ease-in-out infinite;
}

/* Badge: delivered — bottom left */
.app-badge--delivered {
  bottom: 180px; left: -115px;
  animation: appFloat 4s ease-in-out infinite reverse;
  animation-delay: -1.5s;
}

/* Badge: stat — bottom right */
.app-badge--stat {
  bottom: 70px; right: -105px;
  animation: appFloat 4.5s ease-in-out infinite;
  animation-delay: -2.5s;
}
.app-badge--stat strong {
  font-size: 1.05rem;
  background: linear-gradient(135deg, #f0a500, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes appFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes appPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,.35); }
  50%       { box-shadow: 0 0 0 6px rgba(74,222,128,.1); }
}

/* ═══════════════════════════════════════════════
   PARTNERS v5 — شركاء النجاح (Dark Premium)
   ═══════════════════════════════════════════════ */

.ptns3 {
  background: #030c14;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── Background decoration ── */
.ptns3-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ptns3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ptns3-orb-1 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(26,154,166,0.22) 0%, transparent 65%);
  top: -200px;
  inset-inline-start: -100px;
}
.ptns3-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(13,88,96,0.18) 0%, transparent 65%);
  bottom: -160px;
  inset-inline-end: -80px;
}
.ptns3-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,154,166,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,154,166,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── Header ── */
.ptns3-head {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

/* Eyebrow badge */
.ptns3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 18px;
  background: rgba(26,154,166,0.1);
  border: 1px solid rgba(26,154,166,0.28);
  border-radius: 100px;
  color: var(--heeiz-teal-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
}
.ptns3-eyebrow svg { opacity: 0.7; }

/* Main title */
.ptns3-title {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}
.ptns3-title-em {
  display: block;
  background: linear-gradient(135deg, #6ee7e0 0%, #2fb7b0 35%, #1a9aa6 70%, #0d8a94 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.ptns3-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.78;
  margin: 0;
}

/* ── Trust metrics strip ── */
.ptns3-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-10);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  margin-bottom: var(--space-14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ptns3-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ptns3-trust-val {
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ptns3-trust-lbl {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ptns3-trust-sep {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent);
  flex-shrink: 0;
}

/* ── Logo grid ── */
.ptns3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

/* ── Card ── */
.ptns3-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.32s;
}
.ptns3-card:hover {
  background: rgba(26,154,166,0.07);
  border-color: rgba(26,154,166,0.35);
  box-shadow: 0 16px 48px rgba(26,154,166,0.18), 0 0 0 1px rgba(26,154,166,0.08);
  transform: translateY(-5px);
}
.ptns3-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  min-height: 170px;
  text-decoration: none;
  transition: background 0.25s;
}

/* Logo wrapper — fixed frame, crops edges, focuses center */
.ptns3-card-logo {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Logo image — cover fills frame, center always visible */
.ptns3-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) brightness(1.1) contrast(0.9);
  opacity: 0.6;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ptns3-card:hover .ptns3-card-logo img {
  filter: grayscale(0%) brightness(1.05) contrast(1);
  opacity: 1;
  transform: scale(1.08);
}

/* Initials fallback */
.ptns3-card-initials {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, rgba(26,154,166,0.18), rgba(26,154,166,0.08));
  border: 1px solid rgba(26,154,166,0.28);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--heeiz-teal-300);
  transition: background 0.25s, box-shadow 0.25s;
}
.ptns3-card:hover .ptns3-card-initials {
  background: rgba(26,154,166,0.25);
  box-shadow: 0 0 24px rgba(26,154,166,0.25);
}

/* Partner name — revealed on hover */
.ptns3-card-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: transparent;
  opacity: 0;
  transform: translateY(7px);
  transition: color 0.28s, opacity 0.28s, transform 0.28s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.ptns3-card:hover .ptns3-card-name {
  color: rgba(26,154,166,0.85);
  opacity: 1;
  transform: translateY(0);
}

/* ── Bottom tagline ── */
.ptns3-tagline {
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.25);
  font-style: italic;
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ptns3-trust {
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-6);
    padding: var(--space-5) var(--space-5);
  }
  .ptns3-trust-sep { display: none; }
  .ptns3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ptns3-title { font-size: 2rem; }
  .ptns3-trust-val { font-size: 1.4rem; }
}

/* ── Shared outline-teal button (reused across sections) ── */
.btn-outline-teal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  border: 1.5px solid var(--heeiz-teal-500);
  border-radius: var(--radius-full);
  color: var(--heeiz-teal-700);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  background: #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-outline-teal:hover {
  background: var(--heeiz-teal-600);
  border-color: var(--heeiz-teal-600);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13,148,136,0.25);
}

/* ═══════════════════════════════════════════════
   FAQ FULL PAGE (fhp) — صفحة الأسئلة الشائعة الكاملة
   ═══════════════════════════════════════════════ */

/* ── Hero ── */
.fhp-hero {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-20) var(--space-16);
}
.fhp-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -10%,
    rgba(26,154,166,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.fhp-hero-inner {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.fhp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heeiz-teal-300);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
  background: rgba(255,255,255,0.04);
}
.fhp-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--heeiz-teal-400);
  animation: pulseScale 2s ease-in-out infinite;
}
.fhp-hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.fhp-hero-title em {
  font-style: normal;
  color: var(--heeiz-teal-400);
}
.fhp-hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-10);
  line-height: 1.7;
}
.fhp-hero-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
}
.fhp-hero-stat { text-align: center; }
.fhp-hero-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.fhp-hero-stat span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
  display: block;
}
.fhp-hero-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ── Sticky nav ── */
/* ── Category nav bar ── */
.fhp-nav {
  /* in normal flow — JS makes it pinned on scroll */
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--heeiz-ink-100);
  z-index: 88;
  box-shadow: 0 1px 0 var(--heeiz-ink-100);
  transition: box-shadow 0.25s;
}
.fhp-nav.pinned {
  position: fixed;
  inset-inline: 0;
  /* top set by JS */
  box-shadow: 0 4px 24px rgba(0,0,0,0.09), 0 1px 0 var(--heeiz-ink-100);
  animation: fhpNavIn 0.22s ease both;
}
@keyframes fhpNavIn {
  from { opacity: 0.6; transform: translateY(-6px); }
  to   { opacity: 1;   transform: translateY(0); }
}
/* placeholder inserted by JS to hold layout when nav is pinned */
.fhp-nav-ph { flex-shrink: 0; }

.fhp-nav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 52px;
}
.fhp-nav-inner::-webkit-scrollbar { display: none; }

.fhp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: var(--space-4);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--heeiz-ink-500);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  position: relative;
}
.fhp-nav-link:hover {
  color: var(--heeiz-teal-700);
  background: var(--heeiz-teal-50);
}
.fhp-nav-link.active {
  color: var(--heeiz-teal-700);
  border-bottom-color: var(--heeiz-teal-500);
  background: var(--heeiz-teal-50);
  font-weight: 700;
}
.fhp-nav-icon {
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.18s;
}
.fhp-nav-link:hover .fhp-nav-icon,
.fhp-nav-link.active .fhp-nav-icon { opacity: 1; }

.fhp-nav-count {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--heeiz-ink-100);
  color: var(--heeiz-ink-500);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  transition: background 0.18s, color 0.18s;
  letter-spacing: 0.02em;
}
.fhp-nav-link.active .fhp-nav-count {
  background: var(--heeiz-teal-100);
  color: var(--heeiz-teal-700);
}

/* separator between links and WA button */
.fhp-nav-sep {
  flex: 1;
  min-width: var(--space-4);
}
.fhp-nav-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  font-size: 0.82rem;
  font-weight: 700;
  color: #128c4f;
  background: rgba(37,211,102,0.07);
  border-inline-start: 1px solid var(--heeiz-ink-100);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.fhp-nav-wa:hover {
  background: #25d366;
  color: #fff;
}

/* ── Content area ── */
.fhp-content { background: var(--off-white, #f8f9fa); }

.fhp-section {
  padding-block: var(--space-14);
  border-bottom: 1px solid var(--heeiz-ink-100);
}
.fhp-section:last-child { border-bottom: none; }
.fhp-section:nth-child(even) { background: #fff; }

/* Section header */
.fhp-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--heeiz-ink-100);
}
.fhp-section-icon {
  width: 52px;
  height: 52px;
  background: var(--heeiz-teal-50);
  border: 1px solid var(--heeiz-teal-100);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-teal-600);
  flex-shrink: 0;
}
.fhp-section-meta { display: flex; flex-direction: column; gap: 2px; }
.fhp-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--heeiz-ink-900);
  margin: 0;
}
.fhp-section-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heeiz-teal-600);
}

/* Accordion items */
.fhp-accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.fhp-item {
  background: #fff;
  border: 1px solid var(--heeiz-ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fhp-item:hover { border-color: var(--heeiz-teal-200); }
.fhp-item.open {
  border-color: var(--heeiz-teal-300);
  box-shadow: 0 4px 20px rgba(26,154,166,0.08);
}
.fhp-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--heeiz-ink-800);
  line-height: 1.5;
  transition: color 0.2s;
}
.fhp-item.open .fhp-q { color: var(--heeiz-teal-700); }
.fhp-q-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--heeiz-teal-500);
  background: var(--heeiz-teal-50);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.fhp-q-text { flex: 1; }
.fhp-q-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--heeiz-ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-ink-500);
  transition: background 0.2s, color 0.2s, transform 0.25s;
}
.fhp-item.open .fhp-q-toggle {
  background: var(--heeiz-teal-500);
  color: #fff;
  transform: rotate(45deg);
}
.fhp-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.fhp-item.open .fhp-a { grid-template-rows: 1fr; }
.fhp-a-inner {
  overflow: hidden;
  padding: 0 var(--space-6) 0 calc(var(--space-6) + 28px + var(--space-4));
}
.fhp-item.open .fhp-a-inner { padding-bottom: var(--space-5); }
.fhp-a-inner p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--heeiz-ink-600);
  line-height: 1.75;
}
.fhp-a-inner p + p { margin-top: var(--space-3); }
.fhp-a-inner strong { color: var(--heeiz-ink-800); }

/* ── WhatsApp section ── */
.fhp-wa {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-20);
}
.fhp-wa-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%,
    rgba(37,211,102,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.fhp-wa-inner {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.fhp-wa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  border: 1px solid rgba(37,211,102,0.2);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  color: #4ade80;
  background: rgba(37,211,102,0.06);
  letter-spacing: 0.05em;
}
.fhp-wa-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #25d366;
  animation: pulseScale 2s ease-in-out infinite;
}
.fhp-wa-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.15;
}
.fhp-wa-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 460px;
  margin: 0;
}
.fhp-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 32px;
  background: #25d366;
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 32px rgba(37,211,102,0.3);
}
.fhp-wa-btn:hover {
  background: #1ebe5a;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(37,211,102,0.4);
}
.fhp-wa-btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.fhp-wa-btn:hover .fhp-wa-btn-arrow { transform: translateX(-4px); }
.fhp-wa-alts {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}
.fhp-wa-alt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.fhp-wa-alt:hover { color: rgba(255,255,255,0.8); }
.fhp-wa-alt-sep { color: rgba(255,255,255,0.2); }
.fhp-wa-trust {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.06);
  width: 100%;
}
.fhp-wa-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
.fhp-wa-trust svg { color: #25d366; flex-shrink: 0; }

/* ── FAQ page responsive ── */
@media (max-width: 768px) {
  .fhp-hero { padding-block: var(--space-14) var(--space-10); }
  .fhp-hero-stats { flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
  .fhp-hero-stat-divider { width: 40px; height: 1px; }
  .fhp-nav-wa span { display: none; }
  .fhp-section { padding-block: var(--space-10); }
  .fhp-section-header { gap: var(--space-3); }
  .fhp-section-icon { width: 44px; height: 44px; }
  .fhp-a-inner { padding-inline-start: var(--space-6); }
  .fhp-wa-trust { gap: var(--space-4); }
}
@media (max-width: 480px) {
  .fhp-hero-stats { display: none; }
  .fhp-q { padding: var(--space-4); gap: var(--space-3); }
  .fhp-wa-alts { flex-direction: column; gap: var(--space-3); }
  .fhp-wa-alt-sep { display: none; }
  .fhp-wa-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════
   MERCHANTS (mfeat) — التجار المميزون
   Dark section, card grid with testimonials
   ═══════════════════════════════════════════════ */
.mfeat {
  background: #060d1a;
  position: relative;
  overflow: hidden;
}

/* Wave separator at top */
.mfeat-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}
.mfeat-wave svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Header */
.mfeat-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.mfeat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heeiz-teal-300);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}
.mfeat-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heeiz-teal-400);
  animation: pulseScale 2s ease-in-out infinite;
}
.mfeat-header .display-md {
  color: #fff;
  margin-bottom: var(--space-4);
}
.mfeat-header .display-md em {
  font-style: normal;
  color: var(--heeiz-teal-400);
}
.mfeat-lead {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: rgba(255,255,255,0.55);
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Grid */
.mfeat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

/* Card */
.mfeat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  transition-delay: var(--delay, 0s);
}
.mfeat-card:hover {
  background: rgba(26,154,166,0.07);
  border-color: rgba(26,154,166,0.22);
  transform: translateY(-3px);
}

/* Card head — avatar + identity */
.mfeat-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.mfeat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--heeiz-teal-600), var(--heeiz-teal-800));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mfeat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mfeat-avatar-initials {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.mfeat-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mfeat-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mfeat-store {
  font-size: 0.78rem;
  color: var(--heeiz-teal-400);
  font-weight: 500;
}

/* Quote */
.mfeat-quote {
  margin: 0;
  padding: var(--space-4);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  flex: 1;
  position: relative;
}
.mfeat-quote-mark {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 20px;
  height: 20px;
  opacity: 0.18;
  flex-shrink: 0;
}

/* Card footer */
.mfeat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.mfeat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.mfeat-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.mfeat-tag--city {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
}
.mfeat-tag--city::before {
  content: '📍';
  font-size: 0.65rem;
}
.mfeat-tag--cat {
  background: rgba(26,154,166,0.12);
  color: var(--heeiz-teal-300);
}
.mfeat-tag--since {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
}
.mfeat-metric {
  font-size: 0.82rem;
  color: var(--heeiz-teal-400);
}
.mfeat-metric strong {
  font-weight: 700;
}

/* Stars */
.mfeat-stars {
  display: flex;
  gap: 3px;
}
.mfeat-stars svg {
  width: 14px;
  height: 14px;
}

/* Footer CTA */
.mfeat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
}
.mfeat-footer p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   API SECTION — Dev-first dark terminal (v2)
   ═══════════════════════════════════════════════ */

/* Rotating border property */
@property --api-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes apiBorderSpin {
  to { --api-border-angle: 360deg; }
}

.api-section {
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid background */
.api-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

/* Atmospheric glows */
.api-glow-left {
  position: absolute;
  top: -100px;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(26,154,166,0.1) 0%, transparent 68%);
  pointer-events: none;
}
.api-glow-right {
  position: absolute;
  bottom: -80px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 68%);
  pointer-events: none;
}

/* ── Header ── */
.api-header {
  text-align: center;
  max-width: 740px;
  margin-inline: auto;
  margin-bottom: var(--space-14);
}
.api-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border: 1px solid rgba(26,154,166,0.28);
  border-radius: var(--radius-full);
  background: rgba(26,154,166,0.07);
  color: var(--heeiz-teal-300);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.api-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--heeiz-teal-400);
  box-shadow: 0 0 6px var(--heeiz-teal-400);
  animation: apiDotPulse 2s ease-in-out infinite;
}
@keyframes apiDotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.api-title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}
.api-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--heeiz-teal-400), #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.api-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin-bottom: var(--space-8);
}

/* ── Live Metrics Strip ── */
.api-metrics-strip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  margin-top: var(--space-4);
}
.api-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-4);
}
.api-metric strong {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-mono);
  line-height: 1;
}
.api-metric strong small {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-inline-start: 1px;
}
.api-metric span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.api-metric-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.api-metric--live strong {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 6px;
}
.api-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.4);
  animation: apiLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes apiLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ── Main 2-col grid ── */
.api-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-14);
  align-items: start;
}

/* ── Connection Flow ── */
.api-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
}
.api-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.api-flow-node span {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}
.api-flow-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(26,154,166,0.1);
  border: 1px solid rgba(26,154,166,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heeiz-teal-400);
}
.api-flow-node--hub .api-flow-icon {
  background: rgba(26,154,166,0.18);
  border-color: rgba(26,154,166,0.4);
  box-shadow: 0 0 18px rgba(26,154,166,0.18);
  color: var(--heeiz-teal-300);
}
.api-flow-node--dest .api-flow-icon {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.25);
  color: #818cf8;
}
.api-flow-connector {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 var(--space-2);
}
.api-flow-line {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(26,154,166,0.12),
    rgba(26,154,166,0.45),
    rgba(26,154,166,0.12));
  border-radius: 2px;
  overflow: hidden;
}
.api-flow-line--rev {
  background: linear-gradient(90deg,
    rgba(99,102,241,0.12),
    rgba(99,102,241,0.45),
    rgba(99,102,241,0.12));
}
[dir="rtl"] .api-flow-line {
  background: linear-gradient(270deg,
    rgba(26,154,166,0.12),
    rgba(26,154,166,0.45),
    rgba(26,154,166,0.12));
}
.api-flow-packet {
  position: absolute;
  top: -3px;
  left: -10px;
  width: 10px;
  height: 8px;
  background: var(--heeiz-teal-400);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--heeiz-teal-400);
  animation: apiPacket 2s ease-in-out infinite;
}
.api-flow-packet--rev {
  background: #818cf8;
  box-shadow: 0 0 10px #818cf8;
  animation-name: apiPacketRev;
  animation-delay: 1s;
}
[dir="rtl"] .api-flow-packet { animation-name: apiPacketRTL; }
@keyframes apiPacket {
  0%   { left: -10px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes apiPacketRev {
  0%   { left: 100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: -10px; opacity: 0; }
}
@keyframes apiPacketRTL {
  0%   { left: 100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: -10px; opacity: 0; }
}
.api-flow-label {
  font-size: 0.63rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Feature cards ── */
.api-feats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.api-feat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.api-feat:hover {
  border-color: rgba(26,154,166,0.22);
  background: rgba(26,154,166,0.04);
  transform: translateX(-3px);
}
[dir="rtl"] .api-feat:hover { transform: translateX(3px); }

/* Large metric callout number */
.api-feat-metric {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--mc, var(--heeiz-teal-400));
  font-family: var(--font-mono);
  line-height: 1;
  min-width: 54px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}
.api-feat-metric sub {
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: baseline;
  opacity: 0.75;
}

/* Wrapper for icon + body */
.api-feat-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.api-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--fi-color, rgba(26,154,166,0.1));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fi-stroke, var(--heeiz-teal-400));
  flex-shrink: 0;
}
.api-feat-body h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.api-feat-body p {
  font-size: 0.775rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
  margin: 0;
}

/* ── Tech stack badges ── */
.api-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.api-stack-badge {
  padding: 5px 13px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.api-stack-badge:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.api-stack-badge--teal   { border-color: rgba(26,154,166,0.3); color: var(--heeiz-teal-300); background: rgba(26,154,166,0.07); }
.api-stack-badge--indigo { border-color: rgba(99,102,241,0.3); color: #a5b4fc; background: rgba(99,102,241,0.07); }
.api-stack-badge--green  { border-color: rgba(52,211,153,0.3); color: #6ee7b7; background: rgba(52,211,153,0.07); }
.api-stack-badge--yellow { border-color: rgba(251,191,36,0.3); color: #fde68a; background: rgba(251,191,36,0.07); }
.api-stack-badge--purple { border-color: rgba(167,139,250,0.3); color: #c4b5fd; background: rgba(167,139,250,0.07); }

/* ── CTA row ── */
.api-cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.api-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
  cursor: pointer;
  border: none;
}
.api-btn--primary {
  background: var(--heeiz-teal-500);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,154,166,0.3);
}
.api-btn--primary:hover {
  background: var(--heeiz-teal-400);
  box-shadow: 0 6px 28px rgba(26,154,166,0.5);
  transform: translateY(-2px);
}
.api-btn--ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
}
.api-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

/* ═══ Code Window Wrapper (for floating badges) ═══ */
.api-window-wrap {
  position: relative;
}

/* Floating badge cards */
.api-float-badge {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: apiBadgeFloat 4s ease-in-out infinite;
}
.api-float-badge--speed {
  top: -14px;
  right: 24px;
  background: rgba(26,154,166,0.18);
  border: 1px solid rgba(26,154,166,0.35);
  color: var(--heeiz-teal-300);
  box-shadow: 0 8px 24px rgba(26,154,166,0.2);
}
.api-float-badge--secure {
  bottom: 36px;
  left: -20px;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.35);
  color: #a5b4fc;
  box-shadow: 0 8px 24px rgba(99,102,241,0.2);
  animation-delay: 2s;
}
@keyframes apiBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.api-float-badge-icon {
  font-size: 1rem;
}
.api-float-badge-body { display: flex; flex-direction: column; gap: 1px; }
.api-float-badge-val {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}
.api-float-badge-lbl {
  font-size: 0.63rem;
  font-weight: 500;
  opacity: 0.65;
}

/* ═══ Code Window ═══ */
.api-window {
  border-radius: var(--radius-xl);
  background: #0a1220;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 0 0 1px rgba(26,154,166,0.1),
    0 40px 80px rgba(0,0,0,0.55),
    0 0 100px rgba(26,154,166,0.07),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  position: sticky;
  top: 100px;
  animation: apiBorderSpin 8s linear infinite;
  /* subtle animated border glow */
  --api-glow: conic-gradient(
    from var(--api-border-angle) at 50% 50%,
    transparent 0deg,
    rgba(26,154,166,0.4) 60deg,
    transparent 120deg
  );
}
.api-window::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--api-glow);
  z-index: -1;
  opacity: 0.5;
  animation: apiBorderSpin 8s linear infinite;
}

/* Glass inner container */
.api-win-inner {
  background: linear-gradient(160deg, rgba(255,255,255,0.025) 0%, transparent 60%);
  border-radius: inherit;
  overflow: hidden;
}

/* Window chrome bar */
.api-win-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 11px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.api-win-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.api-win-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dot-red    { background: #ff5f57; box-shadow: 0 0 4px rgba(255,95,87,0.6); }
.dot-yellow { background: #febc2e; box-shadow: 0 0 4px rgba(254,188,46,0.5); }
.dot-green  { background: #28c840; box-shadow: 0 0 4px rgba(40,200,64,0.5); }

.api-win-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.api-win-tabs::-webkit-scrollbar { display: none; }
.api-win-tab {
  padding: 4px 13px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.api-win-tab:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
}
.api-win-tab.active {
  color: var(--heeiz-teal-300);
  background: rgba(26,154,166,0.13);
}
.api-win-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.api-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.api-status-dot--ok {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  animation: apiStatusPulse 2.5s ease-in-out infinite;
}
@keyframes apiStatusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(74,222,128,0.7); }
  50%       { opacity: 0.55; box-shadow: 0 0 2px rgba(74,222,128,0.3); }
}

/* Code panels */
.api-win-body { position: relative; }
.api-code-panel {
  display: none;
  padding: var(--space-5) var(--space-6);
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.api-code-panel.active { display: block; }
.api-code-panel::-webkit-scrollbar { width: 4px; }
.api-code-panel::-webkit-scrollbar-track { background: transparent; }
.api-code-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.api-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.6);
  margin: 0;
  white-space: pre;
}
/* Syntax token colors */
.api-code .ck { color: var(--heeiz-teal-400); font-weight: 700; }
.api-code .cm { color: rgba(255,255,255,0.55); }
.api-code .cs { color: #fbbf24; }
.api-code .cn { color: #a78bfa; }
.api-code .cc { color: rgba(255,255,255,0.25); font-style: italic; }

/* Two-sided footer bar */
.api-win-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.28);
}
.api-win-footer-left,
.api-win-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.api-win-footer-left span,
.api-win-footer-right span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.api-win-footer svg { opacity: 0.5; }

/* ── Integrations strip ── */
.api-integrations {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.api-int-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.api-int-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.api-int-pill {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--pc, #1a9aa6) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #1a9aa6) 22%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--pc, #1a9aa6) 80%, #fff);
  font-family: var(--font-mono);
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.api-int-pill:hover {
  background: color-mix(in srgb, var(--pc, #1a9aa6) 16%, transparent);
  border-color: color-mix(in srgb, var(--pc, #1a9aa6) 45%, transparent);
  color: color-mix(in srgb, var(--pc, #1a9aa6) 95%, #fff);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════
   AUDIENCE SECTION — Bento light
   ═══════════════════════════════════════════════ */
.aud-section {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.aud-section::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 380px;
  background: radial-gradient(ellipse, rgba(26,154,166,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Header */
.aud-header { text-align: center; margin-bottom: var(--space-14); }

.aud-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  background: rgba(26,154,166,.08);
  border: 1px solid rgba(26,154,166,.2);
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
  color: var(--heeiz-teal-600);
  letter-spacing: .04em;
  margin-bottom: var(--space-5);
}
.aud-eyebrow-num { color: rgba(26,154,166,.45); font-variant-numeric: tabular-nums; }

.aud-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: var(--heeiz-ink-900);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.aud-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--heeiz-teal-500), var(--heeiz-teal-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aud-lead { font-size: .95rem; color: var(--heeiz-ink-500); }

/* Grid */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Base card */
.aud-card {
  background: #f8fafb;
  border: 1px solid var(--heeiz-ink-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.aud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--heeiz-teal-500), rgba(26,154,166,.2));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
.aud-card:hover {
  background: #fff;
  border-color: rgba(26,154,166,.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,154,166,.1);
}
.aud-card:hover::before { transform: scaleX(1); }

/* Card number label */
.aud-card-num {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(26,154,166,.35);
  font-variant-numeric: tabular-nums;
}

/* Icon box */
.aud-card-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: rgba(26,154,166,.08);
  border: 1px solid rgba(26,154,166,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background .25s, transform .25s;
}
.aud-card:hover .aud-card-icon {
  background: rgba(26,154,166,.15);
  transform: scale(1.1);
}

/* Body */
.aud-card-body { display: flex; flex-direction: column; gap: 4px; }
.aud-card-title { font-size: .9rem; font-weight: 700; color: var(--heeiz-ink-800); margin: 0; }
.aud-card-sub   { font-size: .775rem; color: var(--heeiz-ink-500); margin: 0; line-height: 1.45; }

/* Tag chip */
.aud-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(26,154,166,.1);
  border: 1px solid rgba(26,154,166,.2);
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--heeiz-teal-600);
  letter-spacing: .03em;
  width: fit-content;
  margin-bottom: 4px;
}

/* ── Featured card (span 2) ── */
.aud-card--feat {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  background: linear-gradient(135deg, rgba(26,154,166,.07) 0%, #f8fafb 100%);
  border-color: rgba(26,154,166,.18);
  padding: var(--space-6) var(--space-7);
}
.aud-card--feat::before {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--heeiz-teal-500), rgba(26,154,166,.15));
}
.aud-card--feat:hover {
  background: linear-gradient(135deg, rgba(26,154,166,.12) 0%, #fff 100%);
  border-color: rgba(26,154,166,.32);
  box-shadow: 0 14px 36px rgba(26,154,166,.12);
}
.aud-card--feat .aud-card-icon {
  width: 64px; height: 64px;
  font-size: 2rem;
  background: rgba(26,154,166,.1);
  border-color: rgba(26,154,166,.18);
  flex-shrink: 0;
}
.aud-card--feat:hover .aud-card-icon { transform: scale(1.06); }
.aud-card--feat .aud-card-title { font-size: 1.05rem; }
.aud-card--feat .aud-card-sub   { font-size: .85rem; }

/* Decorative BG number in featured */
.aud-card-bg-num {
  position: absolute;
  bottom: -16px;
  inset-inline-start: var(--space-5);
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(26,154,166,.05);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Footer CTA */
.aud-footer {
  margin-top: var(--space-12);
  text-align: center;
  font-size: 1rem;
  color: var(--heeiz-ink-500);
}
.aud-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--heeiz-teal-600);
  font-weight: 700;
  text-decoration: none;
  margin-inline-start: var(--space-2);
  transition: gap .2s, color .2s;
}
.aud-footer-link:hover { color: var(--heeiz-teal-500); gap: 10px; }

/* ═══════════════════════════════════════════════
   CTA FINAL — Grand Finale
   ═══════════════════════════════════════════════ */
.cta-section {
  background: #020709;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
}

/* Spotlight from top */
.cta-section::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(ellipse 55% 55% at 50% 0%,
    rgba(26,154,166,.22) 0%,
    rgba(26,154,166,.08) 35%,
    transparent 70%);
  pointer-events: none;
}

/* Gold bottom shimmer */
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(240,165,0,.07) 0%, transparent 65%);
  pointer-events: none;
}

/* Top accent line */
.cta-topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,154,166,.6) 30%,
    rgba(26,154,166,.8) 50%,
    rgba(26,154,166,.6) 70%,
    transparent 100%);
}

/* Decorative pulsing rings */
.cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(26,154,166,.07);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ctaRing 7s ease-in-out infinite;
}
.cta-ring-1 { width: 500px;  height: 500px;  animation-delay: 0s; }
.cta-ring-2 { width: 800px;  height: 800px;  animation-delay: -2.3s; }
.cta-ring-3 { width: 1100px; height: 1100px; animation-delay: -4.6s; }

@keyframes ctaRing {
  0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: .35; transform: translate(-50%, -50%) scale(1.03); }
}

/* Inner */
.cta-inner {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Status badge */
.cta-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.2);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: #4ade80;
  margin-bottom: var(--space-8);
}
.cta-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.2);
  animation: ctaPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
  50%       { box-shadow: 0 0 0 7px rgba(74,222,128,.08); }
}

/* Title */
.cta-title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.cta-title-line {
  display: block;
  color: #fff;
}
.cta-title-accent {
  display: block;
  font-style: normal;
  background: linear-gradient(135deg, #f0a500 0%, #ffd700 40%, #f0a500 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: ctaGoldShimmer 4s linear infinite;
}
@keyframes ctaGoldShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Lead */
.cta-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,.5);
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: 1.75;
}

/* Action buttons */
.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* Primary CTA button */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-ar);
  text-decoration: none;
  transition: transform .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cta-btn--primary {
  background: linear-gradient(135deg, var(--heeiz-teal-500) 0%, var(--heeiz-teal-600) 100%);
  color: #fff;
  box-shadow: 0 0 40px rgba(26,154,166,.35), 0 8px 24px rgba(0,0,0,.3);
}
.cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 60px rgba(26,154,166,.5), 0 16px 36px rgba(0,0,0,.35);
}

/* Shine sweep on primary button */
.cta-btn-shine {
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: skewX(-15deg);
  animation: ctaShine 3.5s ease-in-out infinite;
}
@keyframes ctaShine {
  0%   { left: -80%; }
  40%, 100% { left: 120%; }
}

.cta-btn--ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  box-shadow: none;
}
.cta-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-2px);
}

/* Trust micro-copy */
.cta-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: .8rem;
  color: rgba(255,255,255,.35);
  margin-bottom: var(--space-12);
}
.cta-micro span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cta-micro svg { color: var(--heeiz-teal-400); flex-shrink: 0; }

/* Stats panel */
.cta-stats-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cta-stat-item {
  flex: 1;
  text-align: center;
  padding-inline: var(--space-4);
}
.cta-stat-val {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cta-stat-lbl { font-size: .78rem; color: rgba(255,255,255,.4); }

.cta-stat-sep {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* ─── Nav Extras ─── */
.nav-whatsapp-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #25D366;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.nav-whatsapp-btn:hover { background: rgba(37,211,102,0.2); transform: scale(1.05); }

/* ── Theme logo — unified sizing across all placements ── */
.theme-logo {
  display: block;
  width: auto;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}
.theme-logo--nav    { height: 36px; max-width: 140px; }
.theme-logo--mobile { height: 30px; max-width: 110px; }
.theme-logo--footer { height: 40px; max-width: 150px; }
.theme-logo--modal  { height: 28px; max-width: 100px; }

/* ═══════════════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  z-index: var(--z-toast);
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.25s, box-shadow 0.25s;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,0.5);
}
.whatsapp-float-tooltip {
  position: absolute;
  right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--heeiz-ink-900);
  color: #fff;
  font-size: 0.8rem; font-weight: 500;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.whatsapp-float:hover .whatsapp-float-tooltip { opacity: 1; }

[dir="rtl"] .whatsapp-float { left: auto; right: var(--space-6); }
[dir="rtl"] .whatsapp-float-tooltip { right: auto; left: calc(100% + 12px); }

/* ═══════════════════════════════════════════════
   PULSE DOT
   ═══════════════════════════════════════════════ */
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--heeiz-teal-400);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ═══════════════════════════════════════════════
   FRONT-PAGE ARTICLES V2
   ═══════════════════════════════════════════════ */

/* ── Section wrapper ── */
/* ═══════════════════════════════════════════════
   ARTICLES SECTION — art3 Editorial Magazine
   ═══════════════════════════════════════════════ */
.art3 {
  background: #f3f4f6;
  padding-block: var(--space-24);
  position: relative;
  overflow: hidden;
}

/* Subtle dot texture */
.art3::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Teal corner glow */
.art3::after {
  content: '';
  position: absolute;
  top: -120px;
  inset-inline-end: -100px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(26,154,166,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Header ── */
.art3-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-14);
  position: relative;
  z-index: 1;
}

.art3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heeiz-teal-600, #10646b);
  margin-bottom: var(--space-4);
}

.art3-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--heeiz-teal-500, #1a9aa6);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

.art3-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: rgba(26,154,166,0.1);
  border: 1px solid rgba(26,154,166,0.2);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--heeiz-teal-700, #0d5a60);
  letter-spacing: 0.04em;
}

.art3-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 900;
  color: #0a1524;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.art3-title em {
  font-style: normal;
  color: var(--heeiz-teal-600, #10646b);
}

.art3-subtitle {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.65;
}

/* ── Main grid ── */
.art3-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* ── Featured card ── */
.art3-feat {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: #080f1c;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.art3-feat:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(26,154,166,0.15);
}

/* Reading time chip — top corner */
.art3-feat-rt {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
}

.art3-feat-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.art3-feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.art3-feat:hover .art3-feat-img img {
  opacity: 0.45;
  transform: scale(1.06);
}

.art3-feat-nophoto {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, #0d1929, #0a1520);
}

.art3-feat-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    #080f1c 0%,
    rgba(8,15,28,0.9) 30%,
    rgba(8,15,28,0.35) 65%,
    rgba(8,15,28,0.04) 100%
  );
}

.art3-feat-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.art3-feat-title {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art3-feat-excerpt {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art3-feat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.art3-feat-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

.art3-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s, border-color 0.25s, gap 0.25s;
}

.art3-feat:hover .art3-feat-cta {
  background: var(--heeiz-teal-600, #10646b);
  border-color: var(--heeiz-teal-600);
  gap: 11px;
}

/* ── Badges (shared between featured + cards) ── */
.art3-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  margin-bottom: var(--space-4);
}

.art3-badge--sm {
  padding: 3px 9px;
  font-size: 0.62rem;
  margin-bottom: 0;
}

/* Dark-context badge colors (featured card) */
.art3-badge--articles    { background: rgba(16,100,107,0.3);   color: #5eead4; border: 1px solid rgba(94,234,212,0.2); }
.art3-badge--academy     { background: rgba(124,58,237,0.25);  color: #c4b5fd; border: 1px solid rgba(196,181,253,0.2); }
.art3-badge--news        { background: rgba(239,68,68,0.2);    color: #fca5a5; border: 1px solid rgba(252,165,165,0.2); }
.art3-badge--guides      { background: rgba(245,158,11,0.2);   color: #fcd34d; border: 1px solid rgba(252,211,77,0.2); }
.art3-badge--case-studies{ background: rgba(16,185,129,0.2);   color: #6ee7b7; border: 1px solid rgba(110,231,183,0.2); }
.art3-badge--tools       { background: rgba(59,130,246,0.2);   color: #93c5fd; border: 1px solid rgba(147,197,253,0.2); }

/* Light-context badge overrides (inside white side cards) */
.art3-card .art3-badge--articles    { background: rgba(16,100,107,0.1);  color: #10646b; border: 1px solid rgba(16,100,107,0.2); }
.art3-card .art3-badge--academy     { background: rgba(124,58,237,0.08); color: #6d28d9; border: 1px solid rgba(124,58,237,0.18); }
.art3-card .art3-badge--news        { background: rgba(239,68,68,0.08);  color: #dc2626; border: 1px solid rgba(239,68,68,0.18); }
.art3-card .art3-badge--guides      { background: rgba(245,158,11,0.08); color: #b45309; border: 1px solid rgba(245,158,11,0.18); }
.art3-card .art3-badge--case-studies{ background: rgba(16,185,129,0.08); color: #047857; border: 1px solid rgba(16,185,129,0.18); }
.art3-card .art3-badge--tools       { background: rgba(59,130,246,0.08); color: #1d4ed8; border: 1px solid rgba(59,130,246,0.18); }

/* ── Side stack ── */
.art3-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Side card ── */
.art3-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* Category accent bar */
.art3-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0; bottom: 0;
  width: 3.5px;
  background: var(--cat-c, #10646b);
  border-radius: 0 3px 3px 0;
  transition: width 0.25s;
}

[dir="rtl"] .art3-card::before { border-radius: 3px 0 0 3px; }

.art3-card:hover {
  border-color: color-mix(in srgb, var(--cat-c, #10646b) 28%, transparent);
  transform: translateX(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

[dir="rtl"] .art3-card:hover { transform: translateX(4px); }

.art3-card:hover::before { width: 5px; }

/* Faded ordinal number */
.art3-card-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(0,0,0,0.055);
  font-family: var(--font-mono, monospace);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  letter-spacing: -0.04em;
  transition: color 0.25s;
}

.art3-card:hover .art3-card-num {
  color: color-mix(in srgb, var(--cat-c, #10646b) 18%, transparent);
}

.art3-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.art3-card-title {
  font-size: 0.925rem;
  font-weight: 700;
  color: #0a1524;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.22s;
}

.art3-card:hover .art3-card-title {
  color: var(--cat-c, #10646b);
}

.art3-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: #9ca3af;
}

.art3-card-meta-sep { opacity: 0.5; }

.art3-card-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9ca3af;
  transition: background 0.22s, color 0.22s, transform 0.22s;
}

.art3-card:hover .art3-card-arrow {
  background: var(--cat-c, #10646b);
  color: #fff;
  transform: scale(1.12);
}

/* ── CTA Strip ── */
.art3-cta {
  margin-top: var(--space-6);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  background: #080f1c;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 1;
  transition: border-color 0.25s;
}

.art3-cta:hover { border-color: rgba(26,154,166,0.2); }

/* Teal glow */
.art3-cta::before {
  content: '';
  position: absolute;
  inset-inline-end: -60px;
  top: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(26,154,166,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.art3-cta-left { position: relative; z-index: 1; }

.art3-cta-label {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-1);
}

.art3-cta-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  max-width: 480px;
  line-height: 1.55;
}

.art3-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 28px;
  background: var(--heeiz-teal-500, #1a9aa6);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(26,154,166,0.35);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s, gap 0.25s;
}

.art3-cta-btn:hover {
  background: var(--heeiz-teal-400, #2dd4bf);
  box-shadow: 0 8px 32px rgba(26,154,166,0.5);
  transform: translateY(-2px);
  gap: var(--space-4);
}

.art3-cta-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
}

.art3-cta-btn:hover .art3-cta-btn-arrow { transform: translateX(-3px); }
[dir="rtl"] .art3-cta-btn:hover .art3-cta-btn-arrow { transform: translateX(3px); }

/* ── Empty state placeholder ── */
.art3-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16);
  color: #6b7280;
}

.fp-art2-empty h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1524;
  margin-bottom: 8px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .fp-art2-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fp-art2-featured {
    grid-column: 1 / -1;
    min-height: 360px;
  }
  .fp-art2-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fp-art2-card {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 240px;
  }
}

@media (max-width: 768px) {
  .fp-art2-grid {
    grid-template-columns: 1fr;
  }
  .fp-art2-featured {
    min-height: 320px;
  }
  .fp-art2-stack {
    flex-direction: column;
  }
  .fp-art2-card {
    flex: 1 1 auto;
  }
  .fp-art2-view-all {
    padding: var(--space-6) var(--space-6);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .fp-art2-card-img { width: 90px; }
  .fp-art2-view-all-tag { display: none; }
}

/* ═══════════════════════════════════════════════
   CONTACT MODAL
   ═══════════════════════════════════════════════ */

/* Overlay */
.heeiz-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(3,14,22,0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 1rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.heeiz-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Modal card */
.heeiz-modal {
  background: #ffffff;
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,100,107,0.2) transparent;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  opacity: 0;
  box-shadow: 0 40px 120px rgba(0,0,0,0.4), 0 0 0 1px rgba(26,154,166,0.12);
}

.heeiz-modal-overlay.open .heeiz-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close button */
.heeiz-modal-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}

.heeiz-modal-close:hover {
  background: rgba(220,38,38,0.1);
  color: #dc2626;
}

/* Header */
.heeiz-modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-7, 1.75rem) var(--space-7, 1.75rem) 0;
}

.modal-logo {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(16,100,107,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0a1524;
  line-height: 1.3;
  margin: 0 0 3px;
}

.modal-sub {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Steps indicator */
.modal-steps {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-5, 1.25rem) var(--space-7, 1.75rem) 0;
}

.modal-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #9ca3af;
  transition: color 0.25s;
}

.modal-step.active { color: #10646b; }

.modal-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s;
}

.modal-step.active .modal-step-num {
  background: #10646b;
  color: #fff;
}

.modal-step.done .modal-step-num {
  background: rgba(16,100,107,0.15);
  color: #10646b;
}

.modal-step-line {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.modal-step-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #10646b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.modal-step-line.done::after { transform: scaleX(1); }

/* Form */
.heeiz-modal-form {
  padding: var(--space-5, 1.25rem) var(--space-7, 1.75rem) var(--space-7, 1.75rem);
}

/* Step panels */
.modal-step-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  animation: modalPanelIn 0.3s ease forwards;
}

.modal-step-panel.active { display: flex; }

@keyframes modalPanelIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fields */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
}

.modal-required { color: #ef4444; }

.modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-family: inherit;
  font-size: 0.925rem;
  color: #0a1524;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.modal-input:focus {
  border-color: #10646b;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16,100,107,0.1);
}

.modal-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

.modal-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
}

[dir="rtl"] .modal-select {
  background-position: right 14px center;
  padding-inline-end: 40px;
}

.modal-err {
  font-size: 0.75rem;
  color: #ef4444;
  display: none;
  align-items: center;
  gap: 4px;
}

.modal-err.show { display: flex; }

/* Submit-level error (replaces browser alert) */
.modal-submit-err {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #ef4444;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: var(--space-3, 0.75rem);
}
.modal-submit-err.show { display: flex; }

/* Pill radio/checkbox buttons */
.modal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-pill {
  cursor: pointer;
}

.modal-pill input[type="radio"],
.modal-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}

.modal-pill span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.modal-pill input:checked + span {
  background: rgba(16,100,107,0.1);
  border-color: #10646b;
  color: #10646b;
}

.modal-pill span:hover {
  border-color: rgba(16,100,107,0.4);
  color: #10646b;
}

/* Buttons */
.modal-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(135deg, #1a9aa6 0%, #10646b 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.15s;
  margin-top: var(--space-2, 0.5rem);
  box-shadow: 0 4px 20px rgba(16,100,107,0.35);
  position: relative;
  overflow: hidden;
}

.modal-next-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
}

.modal-next-btn:hover { box-shadow: 0 6px 28px rgba(16,100,107,0.45); transform: translateY(-1px); }
.modal-next-btn:hover::after { opacity: 1; }
.modal-next-btn:active { transform: translateY(0); }

.modal-step2-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-2, 0.5rem);
}

.modal-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.modal-back-btn:hover {
  border-color: #10646b;
  color: #10646b;
}

.modal-submit-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #1a9aa6 0%, #10646b 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.15s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16,100,107,0.35);
}

.modal-submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.modal-submit-btn:hover { box-shadow: 0 6px 28px rgba(16,100,107,0.45); transform: translateY(-1px); }
.modal-submit-btn:hover::after { opacity: 1; }
.modal-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: modalBtnShine 3s ease-in-out infinite;
}

@keyframes modalBtnShine {
  0%, 100% { left: -100%; }
  50%       { left: 160%; }
}

/* Success state */
.modal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8, 2rem) var(--space-7, 1.75rem) var(--space-10, 2.5rem);
  gap: var(--space-4, 1rem);
  animation: modalPanelIn 0.4s ease forwards;
}

.modal-success.show { display: flex; }

.modal-success-icon {
  width: 80px; height: 80px;
  background: rgba(16,100,107,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-check-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: modalCheckDraw 0.6s ease 0.2s forwards;
}

@keyframes modalCheckDraw {
  to { stroke-dashoffset: 0; }
}

.modal-success-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0a1524;
  margin: 0;
}

.modal-success-msg {
  font-size: 0.92rem;
  color: #6b7280;
  line-height: 1.7;
  max-width: 340px;
  margin: 0;
}

.modal-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #22c55e;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(34,197,94,0.35);
  margin-top: var(--space-2, 0.5rem);
}

.modal-wa-btn:hover {
  background: #16a34a;
  transform: scale(1.02);
}

/* Mobile */
@media (max-width: 540px) {
  .heeiz-modal {
    max-height: 100dvh;
    border-radius: 20px 20px 0 0;
    align-self: flex-end;
  }
  .heeiz-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .heeiz-modal-overlay.open .heeiz-modal {
    transform: translateY(0) scale(1);
  }
  .heeiz-modal-overlay .heeiz-modal {
    transform: translateY(100%);
  }
  .heeiz-modal-header,
  .heeiz-modal-form {
    padding-inline: var(--space-5, 1.25rem);
  }
  .modal-steps { padding-inline: var(--space-5, 1.25rem); }
}

/* ═══════════════════════════════════════════════
   FAQ v3 — Professional Light Layout
   ═══════════════════════════════════════════════ */
.faq-v3 {
  background: #fff;
}

/* ── Header ── */
.faq-v3-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--heeiz-ink-100);
}
.faq-v3-header-text .section-label { margin-bottom: var(--space-3); }
.faq-v3-header-text h2 { margin-bottom: var(--space-3); }
.faq-v3-header-text p  { max-width: 480px; }

.faq-v3-badge {
  flex-shrink: 0;
  text-align: center;
  background: var(--heeiz-teal-50);
  border: 1px solid var(--heeiz-teal-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-8);
}
.faq-v3-badge strong {
  display: block;
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--heeiz-teal-700);
  line-height: 1;
  letter-spacing: -0.03em;
}
.faq-v3-badge span {
  display: block;
  font-size: 0.775rem;
  color: var(--heeiz-ink-500);
  font-weight: 500;
  margin-top: var(--space-1);
}

/* ── Body Grid ── */
.faq-v3-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* ── Sidebar ── */
.faq-v3-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 100px;
}
.faq-v3-sidebar-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--heeiz-ink-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  padding-inline-start: var(--space-3);
}
.faq-v3-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heeiz-ink-500);
  transition: background 0.18s, color 0.18s;
  text-align: start;
  width: 100%;
}
.faq-v3-cat:hover {
  background: var(--heeiz-teal-50);
  color: var(--heeiz-teal-700);
}
.faq-v3-cat.active {
  background: var(--heeiz-teal-50);
  color: var(--heeiz-teal-700);
  font-weight: 600;
}
.faq-v3-cat-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--heeiz-ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--heeiz-ink-500);
  transition: background 0.18s, color 0.18s;
}
.faq-v3-cat.active .faq-v3-cat-icon,
.faq-v3-cat:hover  .faq-v3-cat-icon {
  background: var(--heeiz-teal-100);
  color: var(--heeiz-teal-700);
}
.faq-v3-cat-label { flex: 1; }
.faq-v3-cat-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--heeiz-ink-100);
  color: var(--heeiz-ink-500);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
  transition: background 0.18s, color 0.18s;
}
.faq-v3-cat.active .faq-v3-cat-count {
  background: var(--heeiz-teal-200);
  color: var(--heeiz-teal-800);
}

/* Sidebar CTA box */
.faq-v3-sidebar-cta {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--heeiz-ink-950);
  border-radius: var(--radius-lg);
  text-align: center;
}
.faq-v3-sidebar-cta p {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0;
}
.faq-v3-cta-sub {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.775rem !important;
  font-weight: 400 !important;
  margin-bottom: var(--space-4) !important;
}
.faq-v3-cta-btn {
  width: 100%;
  justify-content: center;
}

/* ── Accordion List ── */
.faq-v3-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Item */
.faq-v3-item {
  border: 1px solid var(--heeiz-ink-100);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.faq-v3-item:hover {
  border-color: var(--heeiz-ink-300);
}
.faq-v3-item.open {
  border-color: var(--heeiz-teal-300);
  box-shadow: 0 4px 24px rgba(16,100,107,0.08);
}
.faq-v3-item[data-cat]:not([data-cat="all"]):not(.visible) {
  display: none;
}

/* Question button */
.faq-v3-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: background 0.18s;
}
.faq-v3-q:hover { background: var(--heeiz-ink-50); }
.faq-v3-item.open .faq-v3-q { background: var(--heeiz-teal-50); }

/* Number badge */
.faq-v3-num {
  flex-shrink: 0;
  width: 28px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--heeiz-teal-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: center;
  transition: color 0.2s;
}
.faq-v3-item.open .faq-v3-num { color: var(--heeiz-teal-600); }

/* Question text */
.faq-v3-q-text {
  flex: 1;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--heeiz-ink-800);
  line-height: 1.5;
  transition: color 0.2s;
}
.faq-v3-item.open .faq-v3-q-text { color: var(--heeiz-teal-800); }

/* +/× toggle */
.faq-v3-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--heeiz-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s, transform 0.3s, color 0.22s;
  color: var(--heeiz-ink-500);
}
.faq-v3-item.open .faq-v3-toggle {
  background: var(--heeiz-teal-600);
  color: #fff;
  transform: rotate(45deg);
}

/* Answer panel */
.faq-v3-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-v3-item.open .faq-v3-a { max-height: 700px; }

.faq-v3-a-inner {
  padding: var(--space-5) var(--space-6) var(--space-6) calc(var(--space-6) + 28px + var(--space-4));
  border-top: 1px solid var(--heeiz-teal-100);
  font-size: 0.9rem;
  color: var(--heeiz-ink-700);
  line-height: 1.8;
}
.faq-v3-a-inner p { margin: 0; }
.faq-v3-a-inner p + p { margin-top: 0.75em; }

/* Empty state */
.faq-empty {
  text-align: center;
  color: var(--heeiz-ink-300);
  padding: var(--space-12) 0;
  display: none;
  font-size: 0.9rem;
}
.faq-empty.show { display: block; }

/* ═══════════════════════════════════════════════
   DESIGN v3 — IMPROVEMENTS & FIXES
   ═══════════════════════════════════════════════ */

/* ── Delivery: text pill fallback (when no logo images) ── */
.dnet2-logo-pill--text {
  min-width: 140px;
  padding: 16px 30px;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.dnet2-logo-pill--text:hover {
  background: rgba(26,154,166,0.08);
  border-color: rgba(26,154,166,0.28);
}
.dnet2-text-name {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  font-family: inherit;
  transition: color 0.25s;
}
.dnet2-logo-pill--text:hover .dnet2-text-name {
  color: rgba(26,154,166,0.85);
}

/* ── Services: featured card — richer depth ── */
.srv-card--feat {
  background: linear-gradient(150deg, #061422 0%, #0a1d2e 50%, #07111d 100%);
}
.srv-card--feat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 45% at 25% 30%, rgba(26,154,166,0.1) 0%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}
.srv-card--feat:hover::after {
  background: radial-gradient(ellipse 70% 50% at 25% 30%, rgba(26,154,166,0.16) 0%, transparent 70%);
}

/* ── Services: card icon — larger presence ── */
.srv-card-icon {
  background: linear-gradient(135deg, rgba(26,154,166,0.1) 0%, rgba(26,154,166,0.05) 100%);
  border: 1px solid rgba(26,154,166,0.18);
  box-shadow: 0 2px 12px rgba(26,154,166,0.07);
}
.srv-card:hover .srv-card-icon {
  background: linear-gradient(135deg, rgba(26,154,166,0.18) 0%, rgba(26,154,166,0.08) 100%);
  box-shadow: 0 4px 20px rgba(26,154,166,0.18);
}

/* ── Services: card link — styled as micro-CTA ── */
.srv-card-link {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(26,154,166,0.1);
}

/* ── Partners: section spacing ── */
.ptns3 .container { padding-bottom: var(--space-2); }

/* ── Audience: subtle entrance stagger via CSS ── */
.aud-grid .aud-card:nth-child(2) { transition-delay: 0.05s; }
.aud-grid .aud-card:nth-child(3) { transition-delay: 0.1s; }
.aud-grid .aud-card:nth-child(4) { transition-delay: 0.15s; }
.aud-grid .aud-card:nth-child(5) { transition-delay: 0.1s; }
.aud-grid .aud-card:nth-child(6) { transition-delay: 0.15s; }

/* ── Audience: featured card — stronger gradient ── */
.aud-card--feat {
  background: linear-gradient(135deg, rgba(26,154,166,0.09) 0%, rgba(248,250,251,0.8) 100%);
  border-color: rgba(26,154,166,0.2);
}
.aud-card--feat:hover {
  background: linear-gradient(135deg, rgba(26,154,166,0.14) 0%, #fff 100%);
}

/* ── How It Works: step card — improved hover ── */
.hiw-step:hover {
  box-shadow: 0 16px 40px rgba(26,154,166,0.12), 0 2px 8px rgba(0,0,0,0.05);
}

/* ── Marquee: smoother rendering ── */
.dnet2-track { will-change: transform; }

/* ── FAQ: category tabs — active state more vivid ── */
.faq-cat-btn.active {
  background: linear-gradient(135deg, var(--heeiz-teal-600) 0%, var(--heeiz-teal-700) 100%);
  box-shadow: 0 4px 16px rgba(26,154,166,0.25);
}

/* ══════════════════════════════════════════════════════
   BLOCK DARK — Unified dark canvas (Sections 5 → 9C)
   ══════════════════════════════════════════════════════ */

/* ── Base: depth gradient — not flat, light enters from top-left ── */
.block-dark {
  background:
    radial-gradient(ellipse 100% 35% at 0% 0%,   rgba(2,18,32,0.9)  0%, transparent 65%),
    radial-gradient(ellipse 80%  40% at 100% 55%, rgba(3,10,20,0.85) 0%, transparent 60%),
    radial-gradient(ellipse 60%  30% at 50% 100%, rgba(1,8,16,0.7)   0%, transparent 55%),
    #020c18;
  position: relative;
  isolation: isolate;
}

/* ── Vignette — edges darker to pull focus inward ── */
.block-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 70% at 50% 50%,
    transparent 30%,
    rgba(1,6,12,0.55) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Grid texture: dots + faint lines for data-grid feel ── */
.block-dark-canvas {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(26,154,166,0.11) 1px, transparent 1px),
    linear-gradient(rgba(26,154,166,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,154,166,0.022) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 2.5%,
    black 97.5%,
    transparent 100%
  );
}

/* ── Aurora blobs — 5 light sources, teal + indigo palette ── */
.block-dark-blob {
  position: absolute;
  filter: blur(130px);
  pointer-events: none;
  z-index: 1;
}

/* 1 — Large teal ellipse, top-start: main light source */
.block-dark-blob-1 {
  width: 1100px; height: 880px;
  border-radius: 62% 38% 55% 45%;
  background: radial-gradient(ellipse,
    rgba(26,154,166,0.26) 0%,
    rgba(13,88,96,0.12)  40%,
    transparent          65%
  );
  top: -60px;
  inset-inline-start: -16%;
}

/* 2 — Indigo, right upper: accent color */
.block-dark-blob-2 {
  width: 720px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(79,70,229,0.13) 0%,
    transparent          60%
  );
  top: 16%;
  inset-inline-end: -6%;
}

/* 3 — Teal center: mid-depth anchor */
.block-dark-blob-3 {
  width: 900px; height: 680px;
  border-radius: 50% 50% 40% 60%;
  background: radial-gradient(ellipse,
    rgba(26,154,166,0.14) 0%,
    transparent           62%
  );
  top: 44%;
  left: 50%;
  transform: translateX(-50%);
}

/* 4 — Cyan, bottom-start: cool accent */
.block-dark-blob-4 {
  width: 580px; height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(6,182,212,0.11) 0%,
    transparent          60%
  );
  bottom: 6%;
  inset-inline-start: 6%;
}

/* 5 — Indigo, bottom-end: depth counterweight */
.block-dark-blob-5 {
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99,102,241,0.09) 0%,
    transparent           62%
  );
  bottom: 14%;
  inset-inline-end: 4%;
}

/* ── Vertical thread — gradient spine connecting sections ── */
.block-dark-vline {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent           0%,
    rgba(26,154,166,0.08) 4%,
    rgba(26,154,166,0.30) 25%,
    rgba(26,154,166,0.42) 50%,
    rgba(26,154,166,0.28) 75%,
    rgba(26,154,166,0.08) 96%,
    transparent           100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Soft glow behind the line */
.block-dark-vline::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  background: inherit;
  filter: blur(4px);
  opacity: 0.4;
}

/* ── All child sections float above canvas layers ── */
.block-dark > section {
  position: relative;
  z-index: 3;
}

/* ── Transparent section backgrounds (canvas takes over) ── */
.block-dark .hiw-section  { background: transparent; }
.block-dark .dnet2        { background: transparent; }
.block-dark .calc-v2      { background: transparent; }
.block-dark .app-section  { background: transparent; }
.block-dark .ptns3        { background: transparent; border-top: none; border-bottom: none; }
.block-dark .mfeat        { background: transparent; }
.block-dark .api-section  { background: transparent; }

/* ── Suppress redundant section-specific full-bg overlays ── */
.block-dark .hiw-bg { display: none; }  /* replaced by block blobs */

/* ── Tune down individual section glows so they complement, not compete ── */
.block-dark .dnet2::before { background: none; }
.block-dark .calc-v2::before {
  background: radial-gradient(ellipse 70% 50% at 50% 110%, rgba(26,154,166,0.07) 0%, transparent 70%);
}
.block-dark .app-section::before {
  background: radial-gradient(ellipse, rgba(26,154,166,0.08) 0%, transparent 65%);
}
.block-dark .app-section::after {
  background: radial-gradient(ellipse, rgba(99,102,241,0.04) 0%, transparent 70%);
}
.block-dark .ptns3-orb-1 {
  background: radial-gradient(circle, rgba(26,154,166,0.14) 0%, transparent 65%);
}
.block-dark .ptns3-orb-2 {
  background: radial-gradient(circle, rgba(13,88,96,0.1) 0%, transparent 65%);
}
.block-dark .api-glow-left,
.block-dark .api-glow-right {
  opacity: 0.6;
}