/* =============================================
   PHYTOVENTURES — Premium Corporate Site
   ============================================= */

:root {
  --bg:            #09090b;
  --bg-subtle:     #111113;
  --bg-card:       #18181b;
  --bg-elevated:   #27272a;

  --text:          #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted:    #52525b;

  --accent:        #10b981;
  --accent-light:  #34d399;
  --accent-dark:   #059669;
  --accent-glow:   rgba(16, 185, 129, 0.15);

  --gold:          #f59e0b;
  --gold-dark:     #d97706;
  --gold-glow:     rgba(245, 158, 11, 0.15);

  --blue:          #3b82f6;
  --blue-glow:     rgba(59, 130, 246, 0.15);

  --border:        rgba(255, 255, 255, 0.06);
  --border-hover:  rgba(255, 255, 255, 0.12);
  --border-accent: rgba(16, 185, 129, 0.25);

  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     24px;
  --radius-xl:     32px;

  --shadow:        0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 60px rgba(16, 185, 129, 0.1);

  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:    0.4s var(--ease);
}

/* ---- Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:has(.page-home) {
  scroll-snap-type: y mandatory;
}

@media (max-width: 768px) {
  html:has(.page-home) { scroll-snap-type: none; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

::selection {
  background: rgba(16, 185, 129, 0.3);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Skip link ---- */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Container ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section ---- */
.section {
  padding: 120px 0;
  position: relative;
}

.page-home .section {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--dark {
  background: var(--bg-subtle);
}

.section--brands {
  background: var(--bg);
}

.section--contact {
  background: var(--bg-subtle);
}

/* ---- Section Header ---- */
.section-header {
  text-align: center;
  margin-bottom: 72px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.section-tag--gold {
  color: var(--gold);
  background: var(--gold-glow);
  border-color: rgba(245, 158, 11, 0.15);
}

.section-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.section-title--xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.04em;
}

.section-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Reveal Animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

/* ========================================
   NAVIGATION
   ======================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all 0.4s var(--ease);
}

.nav.scrolled {
  padding: 12px 0;
  background: rgba(9, 9, 11, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent) 1;
  box-shadow: 0 4px 30px rgba(16, 185, 129, 0.04);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo-icon {
  display: flex;
  transition: transform 0.3s var(--ease);
}

.nav-logo:hover .nav-logo-icon {
  animation: logoPulse 0.8s var(--ease) forwards;
}

@keyframes logoPulse {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(8deg) scale(1.08); }
  50% { transform: rotate(-4deg) scale(1.05); }
  75% { transform: rotate(2deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

.nav-logo-icon svg circle {
  transition: all 0.3s var(--ease);
}

.nav-logo:hover .nav-logo-icon svg circle {
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}

.nav-logo-text {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}

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

.nav-logo-text strong {
  font-weight: 700;
  color: var(--text);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.3s var(--ease);
  position: relative;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-cta {
  padding: 8px 20px !important;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  transition: all 0.3s var(--ease) !important;
  position: relative;
  overflow: hidden;
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.1), 0 0 20px rgba(16, 185, 129, 0); }
  50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.2), 0 0 30px rgba(16, 185, 129, 0.08); }
}

.nav-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
  transform: skewX(-20deg);
  animation: ctaShimmer 4s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0%, 100% { left: -75%; }
  50% { left: 125%; }
}

.nav-cta::after { display: none !important; }

.nav-cta:hover {
  background: var(--accent-glow) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25), 0 0 40px rgba(16, 185, 129, 0.1) !important;
  animation: none;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 1001;
}

.nav-mobile span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.nav-mobile.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.nav-mobile.active span:nth-child(2) {
  opacity: 0;
}

.nav-mobile.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(9, 9, 11, 0.97);
  backdrop-filter: blur(40px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mobile-link {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 12px 24px;
  transition: all 0.3s;
  transform: translateY(20px);
  opacity: 0;
}

.mobile-overlay.open .mobile-link {
  transform: translateY(0);
  opacity: 1;
}

.mobile-overlay.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-overlay.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
.mobile-overlay.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-overlay.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }
.mobile-overlay.open .mobile-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-overlay.open .mobile-link:nth-child(6) { transition-delay: 0.3s; }

.mobile-link:hover { color: var(--accent); }

.mobile-link--cta {
  color: var(--accent);
  margin-top: 16px;
}

/* ========================================
   HERO
   ======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 140px 0 0;
}

.page-home .hero {
  scroll-snap-align: start;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg), transparent);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 820px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 32px;
  width: fit-content;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.hero-title .word.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-title .word--accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 0.8s forwards;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 1s forwards;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 1.2s forwards;
}

.hero-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 1.2em;
}

/* ========== FLIP CLOCK — HERO ========== */
.hero-stat-value .flip-digit {
  position: relative;
  display: inline-block;
  width: 0.65em;
  height: 1.15em;
  perspective: 200px;
}

.hero-stat-value .flip-digit--comma {
  width: 0.25em;
}

.hero-stat-value .flip-digit .flip-top,
.hero-stat-value .flip-digit .flip-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat-value .flip-digit .flip-top {
  top: 0;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  align-items: flex-end;
}

.hero-stat-value .flip-digit .flip-bottom {
  bottom: 0;
  border-radius: 0 0 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  align-items: flex-start;
}

.hero-stat-value .flip-digit .flip-top span,
.hero-stat-value .flip-digit .flip-bottom span {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15em;
  color: var(--text);
}

.hero-stat-value .flip-digit .flip-top span {
  transform: translateY(50%);
}

.hero-stat-value .flip-digit .flip-bottom span {
  transform: translateY(-50%);
}

.hero-stat-value .flip-digit .flip-flap {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  top: 0;
  transform-origin: bottom center;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  z-index: 2;
}

.hero-stat-value .flip-digit .flip-flap span {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15em;
  color: var(--text);
  transform: translateY(50%);
}

.hero-stat-value .flip-digit .flip-flap-back {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  bottom: 0;
  transform-origin: top center;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 0 0 4px 4px;
  z-index: 2;
  transform: rotateX(90deg);
}

.hero-stat-value .flip-digit .flip-flap-back span {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15em;
  color: var(--text);
  transform: translateY(-50%);
}

.hero-stat-value .flip-digit.flipping .flip-flap {
  animation: flipDown 0.4s cubic-bezier(0.37, 0, 0.18, 1) forwards;
}

.hero-stat-value .flip-digit.flipping .flip-flap-back {
  animation: flipUp 0.4s cubic-bezier(0.37, 0, 0.18, 1) 0.2s forwards;
}

.hero-stat-value .flip-suffix {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
  margin-left: 2px;
}

.hero-stat-value .flip-text-value {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text);
}

.hero-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  display: block;
}

.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flipDown {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

@keyframes flipUp {
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

/* Hero Marquee */
.hero-marquee {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--border);
  padding: 20px 0;
  overflow: hidden;
  margin-top: auto;
}

.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  will-change: transform;
}

.marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  align-self: center;
  flex-shrink: 0;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hover);
}

.btn-ghost:hover {
  border-color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
}

.btn-submit {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg);
  padding: 16px 28px;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

.btn-submit:hover {
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.btn-submit.loading .btn-text,
.btn-submit.loading .btn-arrow { opacity: 0; }

.btn-submit.loading .btn-loader {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(9, 9, 11, 0.3);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  position: absolute;
  left: 50%;
  margin-left: -10px;
}

.btn-loader { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   ABOUT
   ======================================== */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 80px;
}

.about-lead {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  font-weight: 500;
}

.about-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Value Cards */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s var(--ease);
  overflow: hidden;
}

.value-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

.value-card-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.value-card:hover .value-card-line {
  opacity: 1;
}

.value-card-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0.6;
}

.value-card-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.value-card-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ========================================
   BRAND CARDS
   ======================================== */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1000px;
}

.brand-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}

.brand-card:hover {
  box-shadow: var(--shadow-lg);
}

.brand-card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.brand-card:hover .brand-card-glow {
  opacity: 1;
}

.brand-card--emerald .brand-card-glow {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(16, 185, 129, 0.08), transparent 60%);
}

.brand-card--blue .brand-card-glow {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.08), transparent 60%);
}

.brand-card--amber .brand-card-glow {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 158, 11, 0.08), transparent 60%);
}

.brand-card-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
}

.brand-card--emerald .brand-card-border {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), transparent 50%, rgba(16, 185, 129, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.brand-card--blue .brand-card-border {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), transparent 50%, rgba(59, 130, 246, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.brand-card--amber .brand-card-border {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), transparent 50%, rgba(245, 158, 11, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.brand-card-inner {
  position: relative;
  z-index: 2;
  background: var(--bg-card);
  border-radius: inherit;
  padding: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.brand-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.brand-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.brand-card-icon--emerald { background: var(--accent-glow); color: var(--accent); }
.brand-card-icon--blue { background: var(--blue-glow); color: var(--blue); }
.brand-card-icon--amber { background: var(--gold-glow); color: var(--gold); }

.brand-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.brand-card-name {
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.brand-card-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-weight: 500;
}

.brand-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

.brand-card-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.brand-card-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
}

.brand-card--emerald .brand-card-stat-value { color: var(--accent); }
.brand-card--blue .brand-card-stat-value { color: var(--blue); }
.brand-card--amber .brand-card-stat-value { color: var(--gold); }

.brand-card-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.brand-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: gap 0.3s var(--ease);
}

.brand-card--emerald .brand-card-link { color: var(--accent); }
.brand-card--blue .brand-card-link { color: var(--blue); }
.brand-card--amber .brand-card-link { color: var(--gold); }

.brand-card-link:hover {
  gap: 12px;
}

/* ========================================
   BENTO GRID (Services)
   ======================================== */
.bento-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0 40px;
  position: relative;
}
.bento-grid::-webkit-scrollbar { display: none; }

.bento-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: center;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--border-hover), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background 0.4s;
  pointer-events: none;
  z-index: 1;
}

.bento-card:hover::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(16, 185, 129, 0.2) 60%, transparent);
}

.bento-card-inner {
  background: var(--bg-card);
  border-radius: inherit;
  padding: 32px;
  height: 100%;
  position: relative;
}

.bento-card--wide {
  flex: 0 0 min(600px, 85vw);
}

.bento-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-glow);
  border-radius: 14px;
  margin-bottom: 20px;
  color: var(--gold);
}

.bento-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.bento-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.bento-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.services-proof {
  text-align: center;
  margin-top: 48px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.services-proof strong {
  color: var(--text-secondary);
}

/* ---- Bento Carousel Nav ---- */
.bento-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.bento-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.bento-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(16, 185, 129, 0.05);
}

.bento-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bento-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-hover);
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  padding: 0;
}

.bento-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* ========================================
   WHY US
   ======================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.why-item {
  display: flex;
  gap: 24px;
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.4s var(--ease);
}

.why-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

.why-number {
  font-family: 'Sora', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, var(--accent), rgba(16, 185, 129, 0.2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.why-content h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.why-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.why-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: var(--accent-glow);
  color: var(--accent-light);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

/* ========================================
   CONTACT
   ======================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

.contact-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 32px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.contact-detail svg {
  color: var(--accent);
  flex-shrink: 0;
}

.contact-detail a {
  color: var(--accent);
  transition: opacity 0.3s;
}

.contact-detail a:hover {
  opacity: 0.8;
}

.contact-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  transition: all 0.3s var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-group select option {
  background: var(--bg-elevated);
  color: var(--text);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-checkbox {
  margin-bottom: 24px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
}

.form-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-message strong { display: block; margin-bottom: 2px; }
.form-message p { margin: 0; color: var(--text-secondary); font-size: 0.82rem; }

.form-message--success {
  background: var(--accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--accent-light);
}

.form-message--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  position: relative;
  border-top: none;
  padding: 0 0 40px;
  background: var(--bg);
}

.page-home .footer {
  scroll-snap-align: end;
}

/* Gradient divider at top */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-light) 50%, var(--accent) 70%, transparent 100%);
  opacity: 0.4;
}

/* Footer CTA Banner */
.footer-cta {
  text-align: center;
  padding: 80px 24px 60px;
  position: relative;
}

.footer-cta-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 50%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
  transition: all 0.3s var(--ease);
}

.footer-cta-btn:hover {
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 60px;
  margin-bottom: 48px;
}

.footer-brand {
  position: relative;
}

.footer-brand .nav-logo {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  transition: all 0.3s var(--ease);
}

.footer-brand .nav-logo::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, transparent, transparent);
  z-index: -1;
  transition: background 0.4s var(--ease);
  opacity: 0;
}

.footer-brand .nav-logo:hover::before {
  background: linear-gradient(135deg, var(--accent), var(--accent-light), var(--accent-dark), var(--accent));
  background-size: 300% 300%;
  animation: borderGradient 3s ease-in-out infinite;
  opacity: 1;
}

@keyframes borderGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.footer-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-top: 16px;
  max-width: 320px;
}

.footer-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 20px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color 0.3s var(--ease);
}

.footer-social-proof:hover {
  border-color: var(--border-accent);
}

.footer-social-proof-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-col h4 {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding: 6px 0;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
  transform: translateX(4px);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bottom p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-bottom-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
  z-index: 99;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
  transform: translateY(-2px);
}

/* ========================================
   HERO GRID LINES OVERLAY
   ======================================== */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */
.scroll-indicator {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.8s forwards;
}

.scroll-indicator-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.scroll-indicator-chevron {
  color: var(--accent);
  opacity: 0.6;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ========================================
   TRUST STRIP
   ======================================== */
.trust-strip {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.trust-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.trust-divider {
  width: 1px;
  height: 20px;
  background: var(--border-hover);
  flex-shrink: 0;
}

/* ========================================
   WHY US — ENHANCED
   ======================================== */
.section--why {
  position: relative;
  overflow: hidden;
}

.why-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(16, 185, 129, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(59, 130, 246, 0.04), transparent 60%);
}

.why-quote {
  text-align: center;
  margin: -24px auto 56px;
  padding: 0;
  border: none;
  max-width: 800px;
}

.why-quote-text {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), var(--accent-light), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 6s ease-in-out infinite;
}

.why-quote-text em {
  font-style: italic;
}

.why-item {
  border-left: 3px solid transparent;
  transition: all 0.4s var(--ease);
}

.why-item:hover {
  border-left-color: var(--accent);
}

/* ========================================
   TESTIMONIAL SECTION
   ======================================== */
.testimonial-section {
  position: relative;
  background: var(--bg-subtle);
  padding: 100px 0;
  overflow: hidden;
}

.page-home .testimonial-section {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
}

.testimonial-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(16, 185, 129, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 50%, rgba(59, 130, 246, 0.04), transparent 60%);
}

.testimonial-inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.testimonial-quote-mark {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 0.6;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.3;
  user-select: none;
}

.testimonial-quote {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  font-style: normal;
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.testimonial-cite {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 500;
  font-style: normal;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ========================================
   CONTACT — CTA STYLE
   ======================================== */
.section--contact-cta .contact-cta-layout {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.contact-cta-text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 36px;
}

.contact-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.btn-primary--lg {
  padding: 16px 36px;
  font-size: 1rem;
}

.contact-cta-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-cta-details .contact-detail {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.contact-cta-details .contact-detail svg {
  color: var(--text-muted);
}

.contact-cta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ========================================
   SCROLL PROGRESS BAR
   ======================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #10b981, #34d399);
  z-index: 9999;
  pointer-events: none;
  will-change: width;
  transition: none;
}

/* ========================================
   CURSOR GLOW FOLLOWER
   ======================================== */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s var(--ease);
  transform: translate(-300px, -300px);
}

.cursor-glow.active {
  opacity: 1;
}

/* ========================================
   INTELLIGENCE CARD
   ======================================== */
/* ========================================
   INTELLIGENCE SECTION
   ======================================== */
.section--intel {
  background: #0a0a0c;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  scroll-snap-align: start;
  min-height: 100vh;
}

.intel-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(239, 68, 68, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 68, 68, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.intel-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent);
  animation: intelScan 4s ease-in-out infinite;
}

@keyframes intelScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ---- Intel Background Scene ---- */
.intel-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.intel-svg {
  width: 100%;
  height: 100%;
}

/* Radar sweep rotation */
.intel-sweep {
  animation: intelRadarSweep 4s linear infinite;
  transform-origin: 0 0;
}

@keyframes intelRadarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Radar blips */
.intel-blip {
  animation: intelBlip 4s ease-in-out infinite;
}
.intel-blip--1 { animation-delay: 0s; }
.intel-blip--2 { animation-delay: 1s; }
.intel-blip--3 { animation-delay: 2s; }
.intel-blip--4 { animation-delay: 3s; }

@keyframes intelBlip {
  0%, 100% { opacity: 0.2; r: 2; }
  50% { opacity: 0.8; r: 4; }
}

/* Network nodes pulse */
.intel-node {
  animation: intelNodePulse 3s ease-in-out infinite;
}
.intel-node--1 { animation-delay: 0s; }
.intel-node--2 { animation-delay: 0.5s; }
.intel-node--3 { animation-delay: 1s; }
.intel-node--4 { animation-delay: 1.5s; }
.intel-node--5 { animation-delay: 2s; }
.intel-node--6 { animation-delay: 0.7s; }
.intel-node--7 { animation-delay: 1.3s; }

@keyframes intelNodePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Connection lines pulse */
.intel-conn {
  animation: intelConnPulse 4s ease-in-out infinite;
}
.intel-conn--1 { animation-delay: 0s; }
.intel-conn--2 { animation-delay: 0.6s; }
.intel-conn--3 { animation-delay: 1.2s; }
.intel-conn--4 { animation-delay: 1.8s; }
.intel-conn--5 { animation-delay: 2.4s; }
.intel-conn--6 { animation-delay: 3s; }
.intel-conn--7 { animation-delay: 0.3s; }

@keyframes intelConnPulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.15; }
}

/* Data pulses traveling along connections */
.intel-pulse--1 {
  animation: intelPulseMove1 3s linear infinite;
}
.intel-pulse--2 {
  animation: intelPulseMove2 4s linear infinite;
  animation-delay: 1s;
}
.intel-pulse--3 {
  animation: intelPulseMove3 3.5s linear infinite;
  animation-delay: 2s;
}

@keyframes intelPulseMove1 {
  0% { cx: 600; cy: 120; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 720; cy: 200; opacity: 0; }
}

@keyframes intelPulseMove2 {
  0% { cx: 550; cy: 220; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 650; cy: 300; opacity: 0; }
}

@keyframes intelPulseMove3 {
  0% { cx: 680; cy: 80; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 800; cy: 140; opacity: 0; }
}

/* Data streams */
.intel-stream {
  animation: intelStreamFlow 2s ease-in-out infinite;
}
.intel-stream--1 { animation-delay: 0s; }
.intel-stream--2 { animation-delay: 0.3s; }
.intel-stream--3 { animation-delay: 0.6s; }
.intel-stream--4 { animation-delay: 0.9s; }
.intel-stream--5 { animation-delay: 1.2s; }
.intel-stream--6 { animation-delay: 0.2s; }
.intel-stream--7 { animation-delay: 0.5s; }
.intel-stream--8 { animation-delay: 0.8s; }

@keyframes intelStreamFlow {
  0%, 100% { opacity: 0.05; transform: scaleY(0.6); }
  50% { opacity: 0.25; transform: scaleY(1.2); }
}

/* Eye pupil look around */
.intel-pupil {
  animation: intelLook 6s ease-in-out infinite;
}

.intel-eye--2 .intel-pupil {
  animation-delay: 3s;
}

@keyframes intelLook {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(4px, -2px); }
  40% { transform: translate(-3px, 1px); }
  60% { transform: translate(2px, 3px); }
  80% { transform: translate(-4px, -1px); }
}

.section-tag--red {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.intel-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0 40px;
}
.intel-grid::-webkit-scrollbar { display: none; }

.intel-card {
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: center;
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.1);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s var(--ease);
}

.intel-card:hover {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.06);
  transform: translateY(-4px);
}

.intel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.intel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.05);
  color: rgba(239, 68, 68, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.intel-arrow:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.intel-dots {
  display: flex;
  gap: 8px;
}
.intel-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.intel-dot.active {
  width: 24px;
  background: rgba(239, 68, 68, 0.5);
}

.intel-card-icon {
  color: #ef4444;
  margin-bottom: 16px;
  opacity: 0.8;
}

.intel-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.intel-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.intel-card p strong {
  color: var(--text);
}

@media (max-width: 768px) {
  .section--intel {
    padding: 80px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intel-scan-line { animation: none; display: none; }
}

/* ========================================
   CANNACCESS — Patient Access Section
   ======================================== */
.section--access {
  background: #090b0a;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  scroll-snap-align: start;
  min-height: 100vh;
}

.access-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.access-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.access-svg {
  width: 100%;
  height: 100%;
}

/* ---- Hearts float up ---- */
.access-heart {
  animation: accessHeartFloat 8s ease-in-out infinite;
}
.access-heart--1 { animation-delay: 0s; }
.access-heart--2 { animation-delay: 1.5s; }
.access-heart--3 { animation-delay: 3s; }
.access-heart--4 { animation-delay: 4.5s; }
.access-heart--5 { animation-delay: 6s; }

@keyframes accessHeartFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateY(-15px) scale(1.08); opacity: 1; }
}

/* ---- Hands reach ---- */
.access-hand {
  animation: accessHandReach 6s ease-in-out infinite;
}
.access-hand--1 { animation-delay: 0s; }
.access-hand--2 { animation-delay: 3s; animation-direction: reverse; }

@keyframes accessHandReach {
  0%, 100% { transform: translateY(5px); opacity: 0.5; }
  50% { transform: translateY(-5px); opacity: 1; }
}

/* ---- Network nodes pulse ---- */
.access-node {
  animation: accessNodePulse 3s ease-in-out infinite;
}
.access-node--1 { animation-delay: 0s; }
.access-node--2 { animation-delay: 0.5s; }
.access-node--3 { animation-delay: 1s; }
.access-node--4 { animation-delay: 1.5s; }
.access-node--5 { animation-delay: 2s; }
.access-node--6 { animation-delay: 2.5s; }

@keyframes accessNodePulse {
  0%, 100% { r: 3; opacity: 0.5; }
  50% { r: 5; opacity: 1; }
}

/* ---- Connection line pulse ---- */
.access-conn {
  animation: accessConnPulse 4s ease-in-out infinite;
}

@keyframes accessConnPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ---- Data pulses along connections ---- */
.access-pulse--1 {
  animation: accessPulseMove1 5s ease-in-out infinite;
}
.access-pulse--2 {
  animation: accessPulseMove2 6s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes accessPulseMove1 {
  0% { cx: 400; cy: 200; opacity: 0; }
  10% { opacity: 1; }
  50% { cx: 500; cy: 300; }
  90% { opacity: 1; }
  100% { cx: 750; cy: 320; opacity: 0; }
}

@keyframes accessPulseMove2 {
  0% { cx: 650; cy: 180; opacity: 0; }
  10% { opacity: 1; }
  50% { cx: 500; cy: 300; }
  90% { opacity: 1; }
  100% { cx: 350; cy: 380; opacity: 0; }
}

/* ---- Shield check draw ---- */
.access-shield-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: accessCheckDraw 4s ease-in-out infinite;
}

@keyframes accessCheckDraw {
  0%, 20% { stroke-dashoffset: 30; }
  50%, 70% { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 30; }
}

/* ---- Price tags bob ---- */
.access-tag {
  animation: accessTagBob 5s ease-in-out infinite;
}
.access-tag--1 { animation-delay: 0s; }
.access-tag--2 { animation-delay: 2.5s; }

@keyframes accessTagBob {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.6; }
  50% { transform: translateY(-10px) rotate(5deg); opacity: 1; }
}

/* ---- Cards carousel ---- */
.access-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0 40px;
  position: relative;
  z-index: 1;
}
.access-grid::-webkit-scrollbar { display: none; }

.access-card {
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: center;
  background: rgba(16, 185, 129, 0.03);
  border: 1px solid rgba(16, 185, 129, 0.1);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s var(--ease);
}

.access-card:hover {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.06);
  transform: translateY(-4px);
}

.access-card-icon {
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0.8;
}

.access-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.access-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.access-card p strong {
  color: var(--text);
}

/* ---- Nav ---- */
.access-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.access-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  background: rgba(16, 185, 129, 0.05);
  color: rgba(16, 185, 129, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.access-arrow:hover {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent);
  border-color: rgba(16, 185, 129, 0.4);
}

.access-dots {
  display: flex;
  gap: 8px;
}

.access-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.access-dot.active {
  width: 24px;
  background: rgba(16, 185, 129, 0.5);
}

@media (max-width: 768px) {
  .section--access {
    padding: 80px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-scene * { animation: none !important; }
}

/* ========================================
   CANNCONNECT — Events Section
   ======================================== */
.section--connect {
  background: #0b0a08;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  scroll-snap-align: start;
  min-height: 100vh;
}

.connect-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.connect-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.connect-svg {
  width: 100%;
  height: 100%;
}

/* ---- Gathering circles pulse ---- */
.connect-circle {
  animation: connectCirclePulse 5s ease-in-out infinite;
}
.connect-circle--1 { animation-delay: 0s; }
.connect-circle--2 { animation-delay: 0.8s; }
.connect-circle--3 { animation-delay: 1.6s; }
.connect-circle--4 { animation-delay: 0.4s; }
.connect-circle--5 { animation-delay: 1.2s; }

@keyframes connectCirclePulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* ---- People gentle sway ---- */
.connect-person {
  animation: connectPersonSway 4s ease-in-out infinite;
}
.connect-person--1 { animation-delay: 0s; }
.connect-person--2 { animation-delay: 0.6s; }
.connect-person--3 { animation-delay: 1.2s; }
.connect-person--4 { animation-delay: 1.8s; }
.connect-person--5 { animation-delay: 0.3s; }
.connect-person--6 { animation-delay: 0.9s; }
.connect-person--7 { animation-delay: 1.5s; }

@keyframes connectPersonSway {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(3px) translateY(-2px); }
}

/* ---- Bridge dots travel ---- */
.connect-bridge-dot--1 {
  animation: connectDotTravel1 6s ease-in-out infinite;
}
.connect-bridge-dot--2 {
  animation: connectDotTravel2 7s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes connectDotTravel1 {
  0% { cx: 280; cy: 300; opacity: 0; }
  10% { opacity: 1; }
  50% { cx: 580; cy: 260; }
  90% { opacity: 1; }
  100% { cx: 880; cy: 210; opacity: 0; }
}

@keyframes connectDotTravel2 {
  0% { cx: 900; cy: 240; opacity: 0; }
  10% { opacity: 1; }
  50% { cx: 580; cy: 350; }
  90% { opacity: 1; }
  100% { cx: 260; cy: 320; opacity: 0; }
}

/* ---- Bridge lines dash animate ---- */
.connect-bridge-line {
  animation: connectBridgeDash 8s linear infinite;
}

@keyframes connectBridgeDash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

/* ---- Chat bubbles pop ---- */
.connect-bubble {
  animation: connectBubblePop 8s ease-in-out infinite;
}
.connect-bubble--1 { animation-delay: 0s; }
.connect-bubble--2 { animation-delay: 2.5s; }
.connect-bubble--3 { animation-delay: 5s; }

@keyframes connectBubblePop {
  0%, 15% { opacity: 0; transform: translateY(5px) scale(0.9); }
  20%, 55% { opacity: 1; transform: translateY(0) scale(1); }
  60%, 100% { opacity: 0; transform: translateY(-5px) scale(0.95); }
}

/* ---- Handshake pulse ---- */
.connect-handshake {
  animation: connectHandshakePulse 4s ease-in-out infinite;
}

@keyframes connectHandshakePulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ---- Warm glow breathe ---- */
.connect-glow {
  animation: connectGlowBreathe 6s ease-in-out infinite;
}
.connect-glow--1 { animation-delay: 0s; }
.connect-glow--2 { animation-delay: 2s; }
.connect-glow--3 { animation-delay: 4s; }

@keyframes connectGlowBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ---- Cards carousel ---- */
.connect-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0 40px;
  position: relative;
  z-index: 1;
}
.connect-grid::-webkit-scrollbar { display: none; }

.connect-card {
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: center;
  background: rgba(245, 158, 11, 0.03);
  border: 1px solid rgba(245, 158, 11, 0.1);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s var(--ease);
}

.connect-card:hover {
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.06);
  transform: translateY(-4px);
}

.connect-card-icon {
  color: var(--gold);
  margin-bottom: 16px;
  opacity: 0.8;
}

.connect-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.connect-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.connect-card p strong {
  color: var(--text);
}

/* ---- Nav ---- */
.connect-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.connect-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, 0.15);
  background: rgba(245, 158, 11, 0.05);
  color: rgba(245, 158, 11, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.connect-arrow:hover {
  background: rgba(245, 158, 11, 0.12);
  color: var(--gold);
  border-color: rgba(245, 158, 11, 0.4);
}

.connect-dots {
  display: flex;
  gap: 8px;
}

.connect-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.connect-dot.active {
  width: 24px;
  background: rgba(245, 158, 11, 0.5);
}

@media (max-width: 768px) {
  .section--connect {
    padding: 80px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect-scene * { animation: none !important; }
}

/* ========================================
   PATIENT LED PROJECT FUNDING
   ======================================== */
.section--funding {
  background: #0a090c;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  scroll-snap-align: start;
  min-height: 100vh;
}

.section-tag--purple {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.2);
}

.funding-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.funding-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.funding-svg {
  width: 100%;
  height: 100%;
}

/* ---- Seedlings grow ---- */
.funding-seedling {
  animation: fundingSeedlingGrow 6s ease-in-out infinite;
}
.funding-seedling--1 { animation-delay: 0s; }
.funding-seedling--2 { animation-delay: 1.5s; }
.funding-seedling--3 { animation-delay: 3s; }
.funding-seedling--4 { animation-delay: 4.5s; }

@keyframes fundingSeedlingGrow {
  0%, 100% { transform: scaleY(0.9) translateY(2px); opacity: 0.5; }
  50% { transform: scaleY(1.05) translateY(-3px); opacity: 1; }
}

/* ---- Lightbulb glow ---- */
.funding-bulb {
  animation: fundingBulbFloat 5s ease-in-out infinite;
}
.funding-bulb--1 { animation-delay: 0s; }
.funding-bulb--2 { animation-delay: 2.5s; }

@keyframes fundingBulbFloat {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-8px); opacity: 1; }
}

.funding-filament {
  animation: fundingFilamentGlow 3s ease-in-out infinite;
}

@keyframes fundingFilamentGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.funding-bulb-glow {
  animation: fundingGlowPulse 3s ease-in-out infinite;
}

@keyframes fundingGlowPulse {
  0%, 100% { opacity: 0.3; r: 25; }
  50% { opacity: 1; r: 35; }
}

/* ---- Yarn balls spin ---- */
.funding-yarn {
  animation: fundingYarnSpin 12s linear infinite;
}
.funding-yarn--1 { animation-direction: normal; }
.funding-yarn--2 { animation-direction: reverse; animation-duration: 15s; }

@keyframes fundingYarnSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.funding-thread {
  animation: fundingThreadWave 4s ease-in-out infinite;
}

@keyframes fundingThreadWave {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; transform: translateX(3px); }
}

/* ---- Coins bob ---- */
.funding-coin {
  animation: fundingCoinBob 4s ease-in-out infinite;
}
.funding-coin--1 { animation-delay: 0s; }
.funding-coin--2 { animation-delay: 1.3s; }
.funding-coin--3 { animation-delay: 2.6s; }

@keyframes fundingCoinBob {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.6; }
  50% { transform: translateY(-8px) rotate(5deg); opacity: 1; }
}

/* ---- Arcs dash ---- */
.funding-arc {
  animation: fundingArcDash 6s linear infinite;
}

@keyframes fundingArcDash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -32; }
}

/* ---- Sparkles ---- */
.funding-sparkle {
  animation: fundingSparklePop 4s ease-in-out infinite;
}
.funding-sparkle--1 { animation-delay: 0s; }
.funding-sparkle--2 { animation-delay: 0.8s; }
.funding-sparkle--3 { animation-delay: 1.6s; }
.funding-sparkle--4 { animation-delay: 2.4s; }
.funding-sparkle--5 { animation-delay: 3.2s; }

@keyframes fundingSparklePop {
  0%, 100% { opacity: 0; r: 0; }
  50% { opacity: 1; r: 3; }
}

/* ---- Cards carousel ---- */
.funding-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0 40px;
  position: relative;
  z-index: 1;
}
.funding-grid::-webkit-scrollbar { display: none; }

.funding-card {
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: center;
  background: rgba(168, 85, 247, 0.03);
  border: 1px solid rgba(168, 85, 247, 0.1);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s var(--ease);
  position: relative;
}

.funding-card--featured {
  flex: 0 0 min(520px, 85vw);
  background: rgba(168, 85, 247, 0.05);
  border-color: rgba(168, 85, 247, 0.2);
}

.funding-card:hover {
  border-color: rgba(168, 85, 247, 0.25);
  background: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.06);
  transform: translateY(-4px);
}

.funding-card-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.funding-card-icon {
  color: #a855f7;
  margin-bottom: 16px;
  opacity: 0.8;
}

.funding-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.funding-card--featured h3 {
  font-size: 1.35rem;
}

.funding-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.funding-card p strong {
  color: var(--text);
}

.funding-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.funding-card-tags span {
  padding: 4px 12px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 20px;
  font-size: 0.8rem;
  color: rgba(168, 85, 247, 0.7);
}

/* ---- Nav ---- */
.funding-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.funding-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.15);
  background: rgba(168, 85, 247, 0.05);
  color: rgba(168, 85, 247, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.funding-arrow:hover {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.4);
}

.funding-dots {
  display: flex;
  gap: 8px;
}

.funding-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.funding-dot.active {
  width: 24px;
  background: rgba(168, 85, 247, 0.5);
}

@media (max-width: 768px) {
  .section--funding {
    padding: 80px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .funding-scene * { animation: none !important; }
}

/* ========================================
   DEV OFFICE SCENE — SVG Illustration
   ======================================== */
.section--dark {
  position: relative;
  scroll-snap-align: start;
  min-height: 100vh;
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

/* ---- Core ---- */
.dev-office {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.dev-floor {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 10%, rgba(255,255,255,0.15) 90%, transparent 100%);
}

.dev-office-row {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 0 1%;
}

.dev-workstation {
  flex: 0 0 auto;
}

.dev-svg {
  width: 160px;
  height: 160px;
  display: block;
}

/* ---- SVG Code Lines ---- */
.dev-line {
  animation: devCodePulse 3s ease-in-out infinite;
}
.dev-line--g { fill: #10b981; opacity: 0.6; }
.dev-line--b { fill: #3b82f6; opacity: 0.6; }
.dev-line--p { fill: #a855f7; opacity: 0.6; }
.dev-line--err { fill: #ef4444; opacity: 0.7; }

@keyframes devCodePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

/* ---- Typing Arms ---- */
.dev-arm--type {
  animation: devType 0.6s ease-in-out infinite alternate;
}

@keyframes devType {
  0% { transform: rotate(-3deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(-2px); }
}

.dev-arm--type-fast {
  animation: devTypeFast 0.3s ease-in-out infinite alternate;
}

@keyframes devTypeFast {
  0% { transform: rotate(-4deg) translateY(0); }
  100% { transform: rotate(4deg) translateY(-3px); }
}

/* ---- Scratch Head ---- */
.dev-arm--scratch {
  animation: devScratch 2.5s ease-in-out infinite;
}

@keyframes devScratch {
  0%, 100% { transform: rotate(-50deg) translateY(0); }
  25% { transform: rotate(-62deg) translateY(-3px); }
  50% { transform: rotate(-50deg) translateY(1px); }
  75% { transform: rotate(-58deg) translateY(-2px); }
}

.dev-scratch-dot {
  animation: devScratchDot 2.5s ease-in-out infinite;
}

@keyframes devScratchDot {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, -1px); }
}

.dev-head-tilt {
  animation: devHeadTilt 2.5s ease-in-out infinite;
}

@keyframes devHeadTilt {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-5deg) translateX(-2px); }
}

.dev-head-tilt-slow {
  animation: devHeadTiltSlow 4s ease-in-out infinite;
}

@keyframes devHeadTiltSlow {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(6deg) translateY(2px); }
}

/* ---- Chin rest ---- */
.dev-arm--chin {
  animation: devChinRest 4s ease-in-out infinite;
}

@keyframes devChinRest {
  0%, 100% { transform: rotate(-45deg); }
  50% { transform: rotate(-50deg) translateY(-2px); }
}

/* ---- Throw Paper ---- */
.dev-arm--throw {
  animation: devThrowArm 5s ease-in-out infinite;
}

@keyframes devThrowArm {
  0%, 55% { transform: rotate(-5deg); }
  65% { transform: rotate(-85deg); }
  75% { transform: rotate(15deg); }
  85%, 100% { transform: rotate(-5deg); }
}

.dev-paper-ball {
  animation: devPaperFly 5s ease-in-out infinite;
}

@keyframes devPaperFly {
  0%, 60% { opacity: 0; transform: translate(0, 0); }
  65% { opacity: 1; transform: translate(0, 0); }
  75% { opacity: 1; transform: translate(15px, -40px); }
  85% { opacity: 1; transform: translate(30px, -20px); }
  90% { opacity: 0.5; transform: translate(35px, 10px); }
  91%, 100% { opacity: 0; }
}

/* ---- Stretch ---- */
.dev-arm--stretch-l,
.dev-arm--stretch-r {
  animation: devStretch 6s ease-in-out infinite;
}

@keyframes devStretch {
  0%, 100% { transform: rotate(-5deg); }
  25%, 75% { transform: rotate(-80deg) translateY(-8px); }
}

.dev-torso-stretch {
  animation: devRecline 6s ease-in-out infinite;
}

@keyframes devRecline {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(-8deg) translateY(-3px); }
}

/* ---- Steam ---- */
.dev-steam {
  animation: devSteam 3s ease-in-out infinite;
}

@keyframes devSteam {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50% { opacity: 0.4; transform: translateY(-8px) scale(1.3); }
}

/* ---- Chat Bubbles ---- */
.dev-chat {
  opacity: 0;
  animation: devChatPop 8s ease-in-out infinite;
}

.dev-chat--1 { animation-delay: 0s; }
.dev-chat--2 { animation-delay: 2.5s; }
.dev-chat--3 { animation-delay: 5s; }
.dev-chat--4 { animation-delay: 1.2s; }

@keyframes devChatPop {
  0%, 12% { opacity: 0; transform: translateY(5px); }
  16%, 50% { opacity: 1; transform: translateY(0); }
  55%, 100% { opacity: 0; transform: translateY(-3px); }
}

/* ---- Idle Sway ---- */
.dev-workstation:nth-child(odd) .dev-svg {
  animation: devSway 8s ease-in-out infinite;
}
.dev-workstation:nth-child(even) .dev-svg {
  animation: devSway 8s ease-in-out infinite reverse;
  animation-delay: 2s;
}

@keyframes devSway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .dev-svg { width: 100px; height: 100px; }
}

@media (max-width: 1024px) {
  .dev-workstation:nth-child(n+10) { display: none; }
  .dev-svg { width: 90px; height: 90px; }
}

@media (max-width: 768px) {
  .dev-office { opacity: 0.12; }
  .dev-workstation:nth-child(n+8) { display: none; }
  .dev-svg { width: 70px; height: 70px; }
}

@media (max-width: 480px) {
  .dev-workstation:nth-child(n+6) { display: none; }
  .dev-svg { width: 55px; height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-office * { animation: none !important; }
}

/* ========================================
   WORD REVEAL (Origin heading)
   ======================================== */
[data-word-reveal] .word-reveal-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

[data-word-reveal].revealed .word-reveal-w {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   PARALLAX FLOATING SHAPES
   ======================================== */
.parallax-shape {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.parallax-shape--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.08);
  background: rgba(16, 185, 129, 0.03);
}

.parallax-shape--circle-lg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(59, 130, 246, 0.07);
  background: rgba(59, 130, 246, 0.02);
}

.parallax-shape--square {
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(245, 158, 11, 0.08);
  background: rgba(245, 158, 11, 0.03);
  transform: rotate(45deg);
}

.parallax-shape--line {
  width: 60px;
  height: 2px;
  background: rgba(16, 185, 129, 0.06);
  transform: rotate(-20deg);
}

.parallax-shape--line-long {
  width: 100px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
  transform: rotate(15deg);
}

/* ========================================
   BRAND CARDS — 3D ENTRANCE
   ======================================== */
.brand-card.reveal {
  transform: translateY(80px) rotateX(15deg) scale(0.95);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transform-style: preserve-3d;
}

.brand-card.reveal.visible {
  transform: translateY(0) rotateX(0) scale(1);
  opacity: 1;
}

/* ========================================
   TERMINAL CODE DEMO
   ======================================== */
.bento-card-inner--terminal {
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.bento-terminal-left {
  flex: 1;
  min-width: 0;
}

.terminal-demo {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
  background: #0d1117;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot--red { background: #ff5f57; }
.terminal-dot--yellow { background: #febc2e; }
.terminal-dot--green { background: #28c840; }

.terminal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #7d8590;
  margin-left: 8px;
}

.terminal-code {
  flex: 1;
  padding: 16px;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.7;
  color: #7ee787;
  white-space: pre;
  overflow: hidden;
  min-height: 200px;
}

.terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #7ee787;
  animation: terminalBlink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}

@keyframes terminalBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ========================================
   HORIZONTAL SCROLL — OUR STACK
   ======================================== */
.horizontal-scroll-container {
  height: 400vh;
  position: relative;
}

.horizontal-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 40px;
}

.horizontal-scroll-sticky .section-header {
  padding-top: 100px;
  flex-shrink: 0;
}

.horizontal-scroll-track {
  display: flex;
  gap: 32px;
  padding: 0 max(24px, calc((100vw - 1200px) / 2 + 24px));
  will-change: transform;
}

.horizontal-scroll-card {
  min-width: 500px;
  max-width: 500px;
  flex-shrink: 0;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.horizontal-scroll-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-accent);
}

.horizontal-scroll-card .why-number {
  font-family: 'Sora', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, var(--accent), rgba(16, 185, 129, 0.2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.horizontal-scroll-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.horizontal-scroll-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.horizontal-scroll-card code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: var(--accent-glow);
  color: var(--accent-light);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

/* Stack stat counters */
.stack-stat {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.stack-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  display: block;
  line-height: 1.1;
}

.stack-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========================================
   SECTION WIPE TRANSITIONS
   ======================================== */
.section--wipe {
  position: relative;
}

.section-wipe-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s var(--ease-out);
  will-change: opacity;
}

.section--wipe.wipe-revealed .section-wipe-overlay {
  opacity: 0;
}

.section--wipe > .container,
.section--wipe > .horizontal-scroll-container {
  position: relative;
  z-index: 2;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; gap: 32px; }
  .brands-grid { grid-template-columns: 1fr 1fr; }
  .brands-grid .brand-card:last-child { grid-column: span 2; max-width: 50%; margin: 0 auto; }
  .bento-card { flex: 0 0 min(380px, 75vw); }
  .bento-card--wide { flex: 0 0 min(500px, 80vw); }
  .why-grid { grid-template-columns: 1fr; }
  .trust-strip-inner { gap: 16px; }
  .trust-divider { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-mobile { display: flex; }

  .section { padding: 80px 0; }
  .section-header { margin-bottom: 48px; }

  .hero { padding: 120px 0 0; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero-stat-divider { display: none; }

  .values-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: 1fr; }
  .brands-grid .brand-card:last-child { grid-column: auto; max-width: none; }
  .bento-card { flex: 0 0 min(320px, 85vw); }
  .bento-card--wide { flex: 0 0 min(320px, 85vw); }

  .bento-card-inner--terminal { flex-direction: column; }
  .terminal-demo { max-width: none; min-width: 0; }

  .horizontal-scroll-container { height: auto; }
  .horizontal-scroll-sticky { position: relative; height: auto; padding: 0; }
  .horizontal-scroll-sticky .section-header { padding-top: 0; }
  .horizontal-scroll-track {
    flex-direction: column;
    padding: 0 24px;
    transform: none !important;
  }
  .horizontal-scroll-card { min-width: 0; max-width: none; }

  .cursor-glow { display: none; }

  .contact-cta-actions { flex-direction: column; }
  .contact-cta-details { flex-direction: column; gap: 12px; }
  .contact-cta-sep { display: none; }
  .scroll-indicator { display: none; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-sep { display: none; }
  .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

  .reveal, .hero-badge, .hero-subtitle, .hero-actions, .hero-stats {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-title .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee-track {
    animation: none !important;
  }

  .scroll-indicator-chevron {
    animation: none !important;
  }

  .why-quote-text {
    animation: none !important;
  }

  .scroll-progress { display: none; }
  .cursor-glow { display: none; }
  .parallax-shape { display: none; }
  .section-wipe-overlay { display: none; }
  .terminal-cursor { animation: none !important; }

  [data-word-reveal] .word-reveal-w {
    opacity: 1 !important;
    transform: none !important;
  }

  .brand-card.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .horizontal-scroll-container { height: auto; }
  .horizontal-scroll-sticky { position: relative; height: auto; }
  .horizontal-scroll-track { flex-wrap: wrap; transform: none !important; }
  .horizontal-scroll-card { min-width: 0; max-width: none; flex: 1 1 400px; }
}

/* ========================================
   PRINT
   ======================================== */
@media print {
  .nav, .hero-mesh, .hero-noise, .hero-marquee, .mobile-overlay, .back-to-top, .hero-grid-lines, .scroll-indicator, .why-bg-pattern, .testimonial-mesh, .scroll-progress, .cursor-glow, .parallax-shape, .section-wipe-overlay {
    display: none;
  }

  .hero { min-height: auto; padding: 40px 0; }
  .section { padding: 40px 0; }

  .brand-card, .bento-card, .value-card, .why-item {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}