/* ─── Logo-Accurate Color System — Split Theme Redesign ─────────────────────
   Navy + Mint + Teal derived from the Pears logo.
   Loaded after app.css; cascade overrides Tailwind compiled values.
   No Tailwind recompile needed.
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── CSS Custom Property Overrides ────────────────────────────────────────── */
:root {
  --background:           210 30% 97%;   /* #f5f8fc — light body sections */
  --foreground:           218 62% 12%;   /* #0d1f3c — dark navy primary text */
  --card:                 0 0% 100%;     /* #ffffff */
  --card-foreground:      218 62% 12%;
  --popover:              0 0% 100%;
  --popover-foreground:   218 62% 12%;
  --primary:              218 62% 22%;   /* #153469 — navy buttons */
  --primary-foreground:   0 0% 100%;     /* white text on navy */
  --secondary:            210 25% 93%;   /* #ebeff7 — light secondary */
  --secondary-foreground: 218 62% 22%;
  --muted:                210 20% 93%;   /* #ebf0f5 */
  --muted-foreground:     218 25% 48%;   /* #5a769a — subdued text */
  --accent:               148 70% 52%;   /* #3ddb7c — mint green */
  --accent-foreground:    218 62% 12%;   /* dark navy on mint */
  --border:               210 18% 86%;   /* #d5dde8 */
  --input:                210 20% 93%;
  --ring:                 148 70% 52%;   /* mint focus rings */
  --charcoal:             218 72% 9%;    /* #091628 — deep navy hero/footer */
  --charcoal-light:       218 55% 16%;   /* #112244 */
  --gradient-hero:    linear-gradient(160deg, hsl(218 72% 9%), hsl(218 62% 18%));
  --gradient-primary: linear-gradient(135deg, hsl(148 70% 52%), hsl(168 60% 40%));
  --gradient-light:   linear-gradient(135deg, hsl(210 30% 97%), hsl(210 25% 93%));
  --shadow-card:       0 2px 16px -4px hsl(218 62% 22% / 0.12);
  --shadow-card-hover: 0 8px 32px -8px hsl(148 70% 52% / 0.25);
}

/* ── Typography ───────────────────────────────────────────────────────────── */
body,
.font-sans {
  font-family: 'Poppins', system-ui, sans-serif;
}

h1, h2,
.font-display,
[class*="font-display"] {
  font-family: 'Playfair Display', Georgia, serif;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* H3-H6: Poppins (card titles, step titles, etc.) */
h3, h4, h5, h6,
h3.font-display, h4.font-display, h5.font-display, h6.font-display {
  font-family: 'Poppins', system-ui, sans-serif;
}

/* ── Hero: animated dot-grid background ──────────────────────────────────── */
.bg-gradient-hero {
  background: var(--gradient-hero);
  position: relative;
}

.bg-gradient-hero::after {
  content: none;
}

/* Dot grid — targets <div class="hero-dot-grid"> */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, hsl(218 55% 40% / 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  animation: dot-grid-pan 12s linear infinite;
}

@keyframes dot-grid-pan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -280px; }  /* 10 × 28px — seamless loop */
}

.bg-gradient-hero > * {
  position: relative;
  z-index: 1;
}

/* Suppress old pear/teal blobs */
.bg-pear,
.bg-pear-teal {
  background-color: transparent !important;
}

/* ── Hero text ────────────────────────────────────────────────────────────── */
.bg-gradient-hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bg-gradient-hero p {
  color: hsl(210 30% 75%);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.bg-gradient-hero .flex.flex-wrap.gap-4 {
  justify-content: center;
}

/* ── Badge label (eyebrow above H1) ──────────────────────────────────────── */
.badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(148 70% 52% / 0.12);
  border: 1px solid hsl(148 70% 52% / 0.30);
  color: hsl(148 70% 35%);   /* darker mint — passes contrast on white */
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

/* On dark hero background: brighter mint */
.bg-gradient-hero .badge-label {
  color: hsl(148 70% 65%);
  background: hsl(148 70% 52% / 0.12);
  border-color: hsl(148 70% 52% / 0.28);
}

.badge-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(148 70% 52%);
  flex-shrink: 0;
}

/* ── CTA Buttons ─────────────────────────────────────────────────────────── */

/* btn-primary: navy bg + white text — for light body sections */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(218 62% 22%);
  color: hsl(0 0% 100%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  height: 2.75rem;
  border-radius: 0.5rem;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn-primary:hover {
  background: hsl(218 62% 17%);
  box-shadow: 0 0 24px hsl(148 70% 52% / 0.30);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* btn-mint: mint bg + dark navy text — navbar CTA + dark-section CTAs */
.btn-mint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(148 70% 52%);
  color: hsl(218 62% 12%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  height: 2.75rem;
  border-radius: 0.5rem;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn-mint:hover {
  background: hsl(148 70% 46%);
  box-shadow: 0 0 24px hsl(148 70% 52% / 0.40);
  transform: translateY(-1px);
}

.btn-mint:active {
  transform: translateY(0);
}

/* btn-ghost: base — for dark sections (white border, light text) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: hsl(210 30% 78%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  height: 2.75rem;
  border-radius: 0.5rem;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid hsl(218 45% 32%);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-ghost:hover {
  border-color: hsl(148 70% 52%);
  color: hsl(148 70% 65%);
  background: hsl(148 70% 52% / 0.08);
}

/* btn-amber — re-skin to mint for backward compat */
.btn-amber {
  background: hsl(148 70% 52%);
  color: hsl(218 62% 12%);
  box-shadow: none;
}

.btn-amber:hover {
  filter: none;
  background: hsl(148 70% 46%);
  box-shadow: 0 0 24px hsl(148 70% 52% / 0.40);
}

/* ── Stat numbers ────────────────────────────────────────────────────────── */
[data-stat] {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: hsl(218 62% 22%);   /* navy in light sections */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Stat numbers in dark hero sections: mint */
.bg-gradient-hero [data-stat] {
  color: hsl(148 70% 52%);
}

/* ── Scroll-reveal animation ─────────────────────────────────────────────── */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Cards: white bg, blue-grey border, mint hover glow ──────────────────── */
.rounded-xl.border,
.rounded-2xl.border {
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.rounded-xl.border:hover,
.rounded-2xl.border:hover {
  border-color: hsl(148 70% 52% / 0.40);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* ── Section label (eyebrow text) ────────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(148 70% 35%);   /* darker mint on light bg — WCAG AA */
}

/* Section label on dark hero: brighter mint */
.bg-gradient-hero .section-label {
  color: hsl(148 70% 62%);
}

.section-label::before,
.section-label::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: hsl(148 70% 52% / 0.50);
}

/* ── Navbar: white opaque — no glass/blur ────────────────────────────────── */
nav.fixed.top-0 {
  background-color: hsl(0 0% 100%);
  border-bottom: 1px solid hsl(210 18% 86%);
  box-shadow: 0 1px 0 hsl(210 18% 86%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.bg-charcoal {
  background-color: hsl(218 72% 9%);
}

/* Footer link hover: mint green */
footer a:hover {
  color: hsl(148 70% 52%) !important;
  transition: color 0.2s;
}

/* Footer copyright bar top border: subtle navy */
footer .border-t {
  border-color: hsl(218 55% 16% / 0.50);
}

/* ── bg-gradient-light sections ──────────────────────────────────────────── */
.bg-gradient-light {
  background: var(--gradient-light) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bg-gradient-hero h1 {
    font-size: 2.25rem;
  }

  [data-stat] {
    font-size: 2rem;
  }
}

/* ── Reduced-motion: pause all custom animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-dot-grid,
  .animate-float,
  .animate-pulse-glow,
  .animate-bounce-subtle,
  [class*="animate-"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Hero chips ──────────────────────────────────────────────────────────── */
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: hsl(148 70% 52% / 0.12);
  border: 1px solid hsl(148 70% 52% / 0.28);
  color: hsl(148 70% 70%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  animation: chip-float 3.5s ease-in-out infinite;
}

.flex.flex-wrap.gap-2 .hero-chip:nth-child(2) { animation-delay: 0.6s; }
.flex.flex-wrap.gap-2 .hero-chip:nth-child(3) { animation-delay: 1.2s; }

/* ── Staggered card entrance ─────────────────────────────────────────────── */
.grid > :nth-child(2) { animation-delay: 80ms;  }
.grid > :nth-child(3) { animation-delay: 160ms; }
.grid > :nth-child(4) { animation-delay: 240ms; }

/* ── Talent card (dark navy in-card element within dark hero) ─────────────── */
.talent-card {
  background: hsl(218 50% 14%);
  border: 1px solid hsl(148 70% 52% / 0.22);
  border-radius: 1rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 0 0 1px hsl(148 70% 52% / 0.10),
              0 24px 48px -8px hsl(218 72% 5% / 0.60);
}

.talent-card__header {
  margin-bottom: 1.25rem;
}

.talent-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(148 70% 62%);
  background: hsl(148 70% 52% / 0.12);
  border: 1px solid hsl(148 70% 52% / 0.22);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-family: 'Poppins', system-ui, sans-serif;
}

.talent-card__profiles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.talent-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: hsl(218 55% 10%);
  border: 1px solid hsl(218 55% 22%);
  transition: border-color 0.2s;
}

.talent-profile:hover {
  border-color: hsl(148 70% 52% / 0.35);
}

.talent-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(148 70% 52%), hsl(168 60% 40%));
  color: hsl(218 62% 12%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.talent-avatar--alt {
  background: hsl(220 70% 55%);
  color: #fff;
}

.talent-avatar--2 {
  background: hsl(280 60% 55%);
  color: #fff;
}

.talent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.talent-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(210 30% 92%);
  font-family: 'Poppins', system-ui, sans-serif;
}

.talent-role {
  font-size: 0.75rem;
  color: hsl(195 65% 65%);   /* teal-tinted light */
  font-family: 'Poppins', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talent-flag {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.talent-card__footer {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid hsl(218 55% 20%);
}

.talent-stat {
  font-size: 0.75rem;
  font-family: 'Poppins', system-ui, sans-serif;
  color: hsl(210 25% 60%);
}

/* ── How It Works: numbered step circles + connector ─────────────────────── */
.step-wrapper {
  position: relative;
}

.step-number {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px hsl(148 70% 52% / 0.20),
              0 0 0 8px hsl(148 70% 52% / 0.07);
  transition: box-shadow 0.3s ease;
}

.step-wrapper:hover .step-number {
  box-shadow: 0 0 0 4px hsl(148 70% 52% / 0.40),
              0 0 0 10px hsl(148 70% 52% / 0.12);
}

@media (min-width: 768px) {
  .step-connector {
    position: absolute;
    top: 1.75rem;
    left: calc(50% + 1.75rem);
    width: calc(100% - 3.5rem);
    height: 1px;
    background: linear-gradient(
      to right,
      hsl(148 70% 52% / 0.40),
      hsl(148 70% 52% / 0.10)
    );
    border: none;
    pointer-events: none;
  }

  .step-wrapper:last-child .step-connector {
    display: none;
  }
}

/* ── CEO: pull-quote glyph ───────────────────────────────────────────────── */
.ceo-quote-glyph {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: hsl(148 70% 52% / 0.25);
  margin-bottom: -1.5rem;
  user-select: none;
}

/* ── Geography badges ────────────────────────────────────────────────────── */
.geo-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(210 18% 86%);
  background: hsl(0 0% 100%);
  min-width: 160px;
}

.geo-badge strong {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(218 62% 12%);
}

.geo-badge span {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  color: hsl(218 25% 48%);
}

.geo-badge--nordic {
  border-color: hsl(148 70% 52% / 0.35);
  background: hsl(148 70% 52% / 0.06);
}

.geo-badge__flag {
  font-size: 2rem;
  flex-shrink: 0;
}

.geo-badge__flags {
  font-size: 1.25rem;
  flex-shrink: 0;
  letter-spacing: 0.1em;
}

.geo-connector {
  color: hsl(148 70% 52% / 0.50);
}

@media (max-width: 767px) {
  .geo-connector {
    transform: rotate(90deg);
  }
}

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
details.faq-item {
  border-bottom: 1px solid hsl(210 18% 86%);
}

details.faq-item summary {
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  color: hsl(218 62% 12%);
  padding: 1.25rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary:hover,
details.faq-item[open] summary {
  color: hsl(148 70% 35%);
}

/* Chevron indicator */
details.faq-item summary::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid hsl(148 70% 52%);
  border-bottom: 2px solid hsl(148 70% 52%);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

details.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

/* ── Skill / expertise tags ──────────────────────────────────────────────── */
.skill-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(218 25% 48%);
  border: 1px solid hsl(210 18% 86%);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  transition: border-color 0.2s, color 0.2s;
}

.skill-tag:hover {
  border-color: hsl(148 70% 52%);
  color: hsl(148 70% 35%);
}

/* ── Consultation modal ──────────────────────────────────────────────────── */
dialog#consultation-modal {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(210 18% 86%);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 520px;
  width: calc(100vw - 2rem);
  box-shadow: 0 24px 64px -12px hsl(218 62% 22% / 0.20);
  color: hsl(218 62% 12%);
}

dialog#consultation-modal::backdrop {
  background: hsl(218 72% 9% / 0.60);
  backdrop-filter: blur(4px);
}

dialog#consultation-modal h2,
dialog#consultation-modal h3 {
  color: hsl(218 62% 12%);
  font-family: 'Playfair Display', Georgia, serif;
}

dialog#consultation-modal input,
dialog#consultation-modal textarea,
dialog#consultation-modal select {
  background: hsl(210 30% 97%);
  border: 1px solid hsl(210 18% 86%);
  border-radius: 0.5rem;
  color: hsl(218 62% 12%);
  font-family: 'Poppins', system-ui, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

dialog#consultation-modal input:focus,
dialog#consultation-modal textarea:focus,
dialog#consultation-modal select:focus {
  outline: none;
  border-color: hsl(148 70% 52%);
  box-shadow: 0 0 0 3px hsl(148 70% 52% / 0.20);
}

/* Modal submit button: mint */
dialog#consultation-modal .btn-primary,
dialog#consultation-modal button[type="submit"] {
  background: hsl(148 70% 52%);
  color: hsl(218 62% 12%);
  border: none;
}

dialog#consultation-modal .btn-primary:hover,
dialog#consultation-modal button[type="submit"]:hover {
  background: hsl(148 70% 46%);
  box-shadow: 0 0 24px hsl(148 70% 52% / 0.40);
}

/* ── Hero video integration ──────────────────────────────────────────────── */
.hero-video-section {
  min-height: 85vh;
}

.hero-video {
  opacity: 0.55;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    hsl(218 72% 9% / 0.92) 0%,
    hsl(218 72% 9% / 0.72) 45%,
    hsl(218 72% 9% / 0.38) 72%,
    transparent 100%
  );
  pointer-events: none;
}

/* Left-align fixes for video hero text (undo .bg-gradient-hero p centering) */
.hero-video-section .grid p {
  margin-left: 0;
  margin-right: 0;
}

.hero-video-section .grid .flex.flex-wrap.gap-4 {
  justify-content: flex-start;
}

/* ── Startup support band ─────────────────────────────────────────────────── */
.startup-band {
  background: var(--gradient-hero);
  position: relative;
}

.startup-band > * {
  position: relative;
  z-index: 1;
}

.startup-band__radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 90% at 85% 50%, hsl(148 70% 52% / 0.09) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.startup-band__label {
  color: hsl(148 70% 62%);
}

.startup-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.875rem;
  background: hsl(218 55% 14% / 0.70);
  border: 1px solid hsl(148 70% 52% / 0.18);
  transition: border-color 0.2s;
}

.startup-benefit-card:hover {
  border-color: hsl(148 70% 52% / 0.40);
}

.startup-benefit-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.startup-benefit-title {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(210 30% 92%);
  margin-bottom: 0.25rem;
}

.startup-benefit-desc {
  font-size: 0.8125rem;
  color: hsl(218 25% 60%);
  margin: 0;
}

/* ── Stats: accent line + Playfair numbers ─────────────────────────────────── */
.stat-accent-line {
  width: 2.5rem;
  height: 3px;
  background: hsl(var(--accent));
  border-radius: 999px;
}

.stat-number {
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

#stats-section [data-stat] {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.75rem, 6vw, 4rem);
  color: hsl(var(--primary));
  letter-spacing: -0.03em;
}

/* ── Trust Indicators: horizontal pill cards ──────────────────────────────── */
.trust-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--accent));
  background: hsl(var(--card));
  transition: box-shadow 0.2s;
}

.trust-pill:hover {
  box-shadow: var(--shadow-card-hover);
}

.trust-pill__icon {
  color: hsl(var(--accent));
  flex-shrink: 0;
}

/* ── Engagement Models: featured center card ──────────────────────────────── */
#engagement-models-section .grid > :nth-child(2) > a {
  background: hsl(var(--primary));
  border-color: hsl(148 70% 52% / 0.45);
  color: hsl(var(--primary-foreground));
  transform: translateY(-8px);
  box-shadow: 0 16px 40px -8px hsl(218 62% 22% / 0.35),
              0 0 0 1px hsl(148 70% 52% / 0.20);
}

#engagement-models-section .grid > :nth-child(2) > a h3 {
  color: hsl(var(--primary-foreground));
}

#engagement-models-section .grid > :nth-child(2) > a p {
  color: hsl(210 30% 72%);
}

#engagement-models-section .grid > :nth-child(2) > a .w-14 {
  background: hsl(148 70% 52% / 0.15);
}

#engagement-models-section .grid > :nth-child(2) > a .w-14 svg {
  color: hsl(var(--accent));
}

#engagement-models-section .grid > :nth-child(2) > a:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 48px -8px hsl(218 62% 22% / 0.45),
              0 0 0 1px hsl(148 70% 52% / 0.35);
}

/* ── CEO section ──────────────────────────────────────────────────────────── */
.ceo-blockquote {
  padding-left: 1.5rem;
  border-left: 3px solid hsl(var(--accent));
}

.ceo-badge {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  background: hsl(var(--primary));
  border: 2px solid hsl(var(--accent));
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}

/* ── Final CTA: texture + mint accent rule ────────────────────────────────── */
.cta-mint-rule {
  width: 3rem;
  height: 2px;
  background: hsl(var(--accent));
  border-radius: 999px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}