/* ===========================
   ROOT & RESET
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --amber:      #f59e0b;
  --amber-light:#fbbf24;
  --amber-glow: rgba(245, 158, 11, 0.15);
  --dark:       #000000;
  --dark-2:     #080808;
  --dark-3:     #0f0f0f;
  --card-bg:    #111111;
  --border:     rgba(255,255,255,0.07);
  --text:       #efefef;
  --text-muted: #a1a1aa;
  --white:      #ffffff;
  --purple:     #7c3aed;
  --blue:       #1d6ef5;
  --green:      #10b981;
  --font:       'Outfit', 'Inter', sans-serif;
  --radius:     12px;
  --radius-sm:  8px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;     /* belt-and-suspenders with body overflow-x: hidden */
}

/* ===========================
   INTRO TERMINAL LOADER
   Terminal-style boot sequence shown on first session visit.
   Blocks scroll while .loading is on body; JS removes the class when done.
   =========================== */
body.loading { overflow: hidden; }

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}
#intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#intro-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 7px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: inherit;
  transition: color 0.2s, background 0.2s;
}
#intro-skip:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.1);
}
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none; }
  body.loading { overflow: auto; }
}

/* Reveal-on-scroll. Elements get .reveal at init, then .visible when an
   IntersectionObserver fires. Stagger via .reveal-delay-1/2/3 modifiers. */

/* Reveal-on-scroll. Elements get .reveal at init, then .visible when an
   IntersectionObserver fires. Stagger via .reveal-delay-1/2/3 modifiers. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 3px; }

/* ===========================
   TYPOGRAPHY UTILITIES
   =========================== */
.gradient-text {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.section-label-wrap { text-align: center; }

/* On mobile, center any .section-label that lives directly in a .container
   without being wrapped in .section-label-wrap (e.g. About, Process, Contact).
   inline-block + auto margins via display:table is the cheapest center pattern. */
@media (max-width: 768px) {
  .section > .container > .section-label {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 48px;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ===========================
   BUTTONS
   =========================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber);
  color: #000;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.02em;
  position: relative;
}
.btn-primary:hover { background: var(--amber-light); transform: translateY(-1px); }
.btn-primary:disabled { cursor: not-allowed; opacity: 0.6; transform: none; }
.btn-full { width: 100%; justify-content: center; border-radius: var(--radius-sm); }

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.btn-primary.is-loading .btn-spinner { display: inline-block; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: var(--transition);
  background: transparent;
}
.btn-ghost:hover { color: var(--white); border-color: rgba(255,255,255,0.14); }

.btn-nav {
  position: relative;
  color: #000;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 20px;
  border-radius: 999px;
  transition: var(--transition);
  white-space: nowrap;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fb923c, #f59e0b);
  background-size: 300% 100%;
  animation: nav-cta-flow 6s linear infinite;
  box-shadow: 0 0 0 0 rgba(245,158,11,0.5);
}
.btn-nav:hover {
  animation-duration: 2.5s;
  box-shadow: 0 0 22px rgba(245,158,11,0.45);
}
@keyframes nav-cta-flow {
  to { background-position: -300% 0; }
}

/* ===========================
   LAYOUT
   =========================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; position: relative; }
.section-dark { background: var(--dark-2); }

/* ===========================
   NAV
   =========================== */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
}
/* Solar flare — lava-lamp tongues dripping from the top edge, sunset palette */
.nav-liquid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  filter: blur(6px) saturate(1.6) contrast(1.2);
  opacity: 0.28;
  transition: opacity 0.5s ease;
  z-index: 0;
}
#navbar.scrolled .nav-liquid { opacity: 0.45; }

.flare {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  pointer-events: none;
}
.flare-left  { left: 0; }
.flare-right { right: 0; }

/* Steady bright core — flat ellipse anchored just above the top edge.
   Sunrise palette: pale cream → soft gold → peach → blush pink → lavender */
.flare-core {
  position: absolute;
  top: -30px;
  width: 180px;
  height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top center,
    rgba(254,249,195,0.9) 0%,
    rgba(253,224,138,0.78) 18%,
    rgba(254,215,170,0.6) 36%,
    rgba(251,207,232,0.4) 54%,
    rgba(196,181,253,0.22) 72%,
    transparent 84%);
  animation: core-pulse 11s ease-in-out infinite;
}
.flare-left  .flare-core { left: 35%; }
.flare-right .flare-core { left: 65%; }

/* Tongues — short vertical drips from the top edge, sunrise palette */
.flare-tongue {
  position: absolute;
  top: -10px;
  width: 70px;
  height: 60%;
  transform-origin: top center;
  border-radius: 50% 50% 50% 50% / 0% 0% 60% 60%;
  background: radial-gradient(ellipse at top center,
    rgba(254,249,195,0.85) 0%,
    rgba(253,224,138,0.72) 20%,
    rgba(254,215,170,0.55) 40%,
    rgba(251,207,232,0.36) 58%,
    rgba(196,181,253,0.2) 74%,
    transparent 86%);
}

/* Spread tongues across each half horizontally so they're not stacked at one point */
.flare-left  .ft-1 { left: 8%;  }
.flare-left  .ft-2 { left: 26%; }
.flare-left  .ft-3 { left: 46%; }
.flare-left  .ft-4 { left: 66%; }
.flare-left  .ft-5 { left: 86%; }

.flare-right .ft-1 { left: 12%; }
.flare-right .ft-2 { left: 32%; }
.flare-right .ft-3 { left: 54%; }
.flare-right .ft-4 { left: 72%; }
.flare-right .ft-5 { left: 90%; }

/* Each tongue gets its own keyframe + own duration */
.flare .ft-1 { animation: drip-1 7.2s ease-in-out infinite alternate; }
.flare .ft-2 { animation: drip-2 9.4s ease-in-out infinite alternate; opacity: 0.85; }
.flare .ft-3 { animation: drip-3 5.8s ease-in-out infinite alternate; }
.flare .ft-4 { animation: drip-4 11s  ease-in-out infinite alternate; opacity: 0.78; }
.flare .ft-5 { animation: drip-5 8.2s ease-in-out infinite alternate; opacity: 0.72; }

/* desync left/right */
.flare-right .ft-1 { animation-delay: -2.4s; animation-duration: 8.4s; }
.flare-right .ft-2 { animation-delay: -3.7s; animation-duration: 7.6s; }
.flare-right .ft-3 { animation-delay: -1.5s; animation-duration: 6.4s; }
.flare-right .ft-4 { animation-delay: -2.9s; animation-duration: 10s;  }
.flare-right .ft-5 { animation-delay: -4.2s; animation-duration: 9s;   }
.flare-right .flare-core { animation-delay: -4.5s; animation-duration: 12s; }

@keyframes core-pulse {
  0%, 100% { transform: translate(-50%, 0) scale(1);       opacity: 0.55; }
  18%      { transform: translate(-52%, -2px) scale(1.04); opacity: 0.7;  }
  31%      { transform: translate(-48%, 1px) scale(0.92);  opacity: 0.5;  }
  47%      { transform: translate(-50%, -3px) scale(1.10); opacity: 0.78; }
  62%      { transform: translate(-46%, 2px) scale(0.96);  opacity: 0.55; }
  74%      { transform: translate(-54%, -1px) scale(1.06); opacity: 0.7;  }
  88%      { transform: translate(-50%, 0) scale(0.98);    opacity: 0.5;  }
}

/* Each drip: 9 stops, scaleY varies for drip-length spikes,
   translateX adds horizontal sway, rotate tilts the drip */
@keyframes drip-1 {
  0%   { transform: translateX(-50%) scaleY(0.42) scaleX(0.92) rotate(-2deg); opacity: 0.35; }
  12%  { transform: translateX(-46%) scaleY(0.62) scaleX(1.05) rotate(-4deg); opacity: 0.6;  }
  23%  { transform: translateX(-54%) scaleY(0.95) scaleX(0.84) rotate(-7deg); opacity: 0.85; }
  35%  { transform: translateX(-50%) scaleY(0.55) scaleX(1.10) rotate(-3deg); opacity: 0.45; }
  48%  { transform: translateX(-44%) scaleY(0.38) scaleX(0.96) rotate(2deg);  opacity: 0.5;  }
  61%  { transform: translateX(-52%) scaleY(0.80) scaleX(1.02) rotate(-5deg); opacity: 0.75; }
  74%  { transform: translateX(-48%) scaleY(0.50) scaleX(0.98) rotate(-1deg); opacity: 0.55; }
  86%  { transform: translateX(-56%) scaleY(1.00) scaleX(0.88) rotate(-6deg); opacity: 0.85; }
  100% { transform: translateX(-50%) scaleY(0.60) scaleX(1.00) rotate(0deg);  opacity: 0.5;  }
}
@keyframes drip-2 {
  0%   { transform: translateX(-50%) scaleY(0.48) scaleX(0.90) rotate(3deg);  opacity: 0.4;  }
  14%  { transform: translateX(-46%) scaleY(0.65) scaleX(1.06) rotate(5deg);  opacity: 0.6;  }
  26%  { transform: translateX(-42%) scaleY(0.92) scaleX(0.86) rotate(8deg);  opacity: 0.82; }
  38%  { transform: translateX(-50%) scaleY(0.55) scaleX(1.04) rotate(4deg);  opacity: 0.5;  }
  51%  { transform: translateX(-56%) scaleY(0.40) scaleX(0.94) rotate(1deg);  opacity: 0.45; }
  64%  { transform: translateX(-48%) scaleY(0.78) scaleX(1.00) rotate(6deg);  opacity: 0.7;  }
  77%  { transform: translateX(-44%) scaleY(0.55) scaleX(0.96) rotate(3deg);  opacity: 0.55; }
  89%  { transform: translateX(-50%) scaleY(0.98) scaleX(0.88) rotate(7deg);  opacity: 0.82; }
  100% { transform: translateX(-50%) scaleY(0.62) scaleX(1.02) rotate(2deg);  opacity: 0.55; }
}
@keyframes drip-3 {
  0%   { transform: translateX(-50%) scaleY(0.55) scaleX(1.04) rotate(-1deg); opacity: 0.5;  }
  13%  { transform: translateX(-50%) scaleY(0.70) scaleX(0.96) rotate(-3deg); opacity: 0.65; }
  25%  { transform: translateX(-50%) scaleY(1.05) scaleX(0.84) rotate(-6deg); opacity: 0.85; }
  37%  { transform: translateX(-50%) scaleY(0.62) scaleX(1.10) rotate(-2deg); opacity: 0.55; }
  50%  { transform: translateX(-50%) scaleY(0.42) scaleX(0.94) rotate(2deg);  opacity: 0.55; }
  63%  { transform: translateX(-50%) scaleY(0.88) scaleX(1.00) rotate(-4deg); opacity: 0.72; }
  76%  { transform: translateX(-50%) scaleY(0.55) scaleX(1.06) rotate(0deg);  opacity: 0.5;  }
  88%  { transform: translateX(-50%) scaleY(1.10) scaleX(0.86) rotate(-5deg); opacity: 0.85; }
  100% { transform: translateX(-50%) scaleY(0.68) scaleX(1.00) rotate(0deg);  opacity: 0.6;  }
}
@keyframes drip-4 {
  0%   { transform: translateX(-50%) scaleY(0.45) scaleX(1.00) rotate(4deg);  opacity: 0.38; }
  14%  { transform: translateX(-46%) scaleY(0.60) scaleX(1.06) rotate(6deg);  opacity: 0.6;  }
  27%  { transform: translateX(-42%) scaleY(0.96) scaleX(0.86) rotate(9deg);  opacity: 0.8;  }
  40%  { transform: translateX(-50%) scaleY(0.58) scaleX(1.04) rotate(5deg);  opacity: 0.45; }
  53%  { transform: translateX(-56%) scaleY(0.40) scaleX(0.94) rotate(2deg);  opacity: 0.5;  }
  66%  { transform: translateX(-48%) scaleY(0.82) scaleX(1.00) rotate(7deg);  opacity: 0.7;  }
  78%  { transform: translateX(-44%) scaleY(0.55) scaleX(0.96) rotate(4deg);  opacity: 0.55; }
  90%  { transform: translateX(-50%) scaleY(1.02) scaleX(0.88) rotate(8deg);  opacity: 0.78; }
  100% { transform: translateX(-50%) scaleY(0.60) scaleX(1.00) rotate(3deg);  opacity: 0.55; }
}
@keyframes drip-5 {
  0%   { transform: translateX(-50%) scaleY(0.38) scaleX(1.02) rotate(-3deg); opacity: 0.3;  }
  15%  { transform: translateX(-46%) scaleY(0.55) scaleX(1.08) rotate(-5deg); opacity: 0.55; }
  28%  { transform: translateX(-54%) scaleY(0.90) scaleX(0.86) rotate(-8deg); opacity: 0.75; }
  41%  { transform: translateX(-50%) scaleY(0.50) scaleX(1.04) rotate(-4deg); opacity: 0.4;  }
  54%  { transform: translateX(-44%) scaleY(0.35) scaleX(0.94) rotate(-1deg); opacity: 0.5;  }
  67%  { transform: translateX(-52%) scaleY(0.78) scaleX(1.00) rotate(-6deg); opacity: 0.68; }
  80%  { transform: translateX(-48%) scaleY(0.50) scaleX(0.96) rotate(-3deg); opacity: 0.55; }
  92%  { transform: translateX(-56%) scaleY(0.95) scaleX(0.88) rotate(-7deg); opacity: 0.78; }
  100% { transform: translateX(-50%) scaleY(0.58) scaleX(1.00) rotate(-3deg); opacity: 0.5;  }
}
@media (prefers-reduced-motion: reduce) {
  .flare-core, .flare-tongue { animation: none !important; }
}
/* animated gradient hairline at the bottom (visible when scrolled) */
#navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,158,11,0.5) 30%,
    rgba(124,58,237,0.5) 50%,
    rgba(245,158,11,0.5) 70%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: nav-line 8s linear infinite;
  pointer-events: none;
}
#navbar.scrolled::after { opacity: 1; }
@keyframes nav-line {
  to { background-position: -200% 0; }
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--white);
}
.nav-logo-mark {
  flex-shrink: 0;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.nav-logo-first {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nav-logo-last {
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fb923c);
  background-size: 200% 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  animation: link-grad-flow 3s linear infinite;
  pointer-events: none;
}
@keyframes link-grad-flow {
  to { background-position: -200% 0; }
}
.nav-link:hover,
.nav-link.active {
  color: var(--white);
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); display: block; }

/* ===========================
   HERO
   =========================== */
#hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  gap: 48px;
  padding: 120px 60px 80px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.hero-bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
}

/* CONSTELLATION — WebGL dot-sphere shell that fills the hero.
   - opacity 0.5 keeps it well behind the headline + CTAs
   - radial mask is aggressive: fully opaque only in the center 25%,
     fading hard so the constellation reads as a vignette, not edge-to-edge noise */
#hero-vanta {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  display: block;
  background: #0a0a0a;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 200% 45% at center, #000 0%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 200% 45% at center, #000 0%, #000 45%, transparent 100%);
}




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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.07); }
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.hero-logo-mark {
  flex-shrink: 0;
  align-self: center;
}
.hero-title {
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin-bottom: 0;
  color: var(--white);
}
/* gradient-text uses background-clip: text which can crop descenders/curves
   on large bold faces — give it a real inline-block box with breathing room */
.hero-title .gradient-text {
  display: inline-block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
/* Glass-effect wrapper around tagline + description — gives the body copy
   a readable backdrop against the bright fog/orb layer */
.hero-text-block {
  position: relative;
  display: inline-block;
  background: rgba(10, 10, 10, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 18px 22px 4px;
  margin-bottom: 36px;
  max-width: 540px;
}
.hero-text-block .hero-tagline,
.hero-text-block .hero-desc {
  margin-bottom: 14px;
}
.hero-text-block .hero-desc:last-child {
  margin-bottom: 14px;
}
.hero-tagline {
  font-size: 1rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-weight: 500;
  margin-bottom: 20px;
  min-height: 1.6em;
}
.typed-role { color: var(--white); font-weight: 600; }
.typed-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--amber);
  margin-left: 4px;
  vertical-align: -2px;
  animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { to { visibility: hidden; } }

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 36px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; align-items: center; gap: 6px; }
.stat { padding: 0 28px; }
.stat:first-child { padding-left: 0; }
.stat-num { display: block; font-size: 1.8rem; font-weight: 900; color: var(--white); letter-spacing: -0.04em; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.05em; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }
.stat-gif { border-radius: 8px; display: block; flex-shrink: 0; }


/* Hero Visual */
.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-ring {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 860px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  filter: drop-shadow(0 30px 60px rgba(245, 158, 11, 0.08));
}

.avatar-fallback {
  display: none;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--dark-3);
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(245, 158, 11, 0.4);
  letter-spacing: -0.05em;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}

/* Floating cards */
.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.fc-icon { font-size: 1.1rem; }
.fc-icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.fc-1 { top: 10%; left: -30px; animation: float-1 4s ease-in-out infinite; }
.fc-2 { bottom: 20%; left: -50px; animation: float-2 5s ease-in-out infinite; }
.fc-3 { top: 30%; right: -40px; animation: float-3 4.5s ease-in-out infinite; }

@keyframes float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes float-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ===========================
   TECH STACK — logo marquee
   =========================== */
.stack-section {
  position: relative;
  width: 100%;
  padding: 36px 0 32px;
  background: var(--dark);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.stack-section-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
@media (max-width: 768px) {
  .stack-section-label { font-size: 0.62rem; margin-bottom: 16px; }
}
/* The marquee fills the section. Two duplicated logo strips loop seamlessly. */
.logo-marquee {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  pointer-events: none;
  /* soft horizontal fade on both edges so logos don't pop in/out */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee-flow 60s linear infinite;
  will-change: transform;
}
.logo-marquee-set {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 28px;
  flex-shrink: 0;
}
.logo-marquee-set img {
  height: 42px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: 0.85;     /* matches the prior static logo opacity — same subtle treatment */
  flex-shrink: 0;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-marquee:hover .logo-marquee-set img { opacity: 1; }

/* Contrast on dark bg — invert known black-on-white logos only.
   anthropic/figma/notion ship as fill="#ffffff" already, do NOT invert them. */
.logo-marquee-set img[src*="retell"],
.logo-marquee-set img[src*="openai"] {
  filter: invert(1) brightness(1.05);
}

@keyframes logo-marquee-flow {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

@media (max-width: 768px) {
  .stack-section { padding: 28px 0; }
  .logo-marquee-set { gap: 28px; padding: 0 14px; }
  .logo-marquee-set img {
    height: 28px;
    max-width: 70px;
    /* Tame visual disparity between full-color logos and inverted/wordmark logos */
    opacity: 0.78;
  }
  .logo-marquee-track {
    animation-duration: 35s;     /* faster scroll on mobile so it doesn't feel stalled */
  }
}
.ghl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.ghl-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ghl-tile:hover {
  border-color: rgba(245,158,11,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,158,11,0.06);
}
.ghl-tile-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.ghl-tile-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) {
  .ghl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ghl-grid { grid-template-columns: 1fr; gap: 12px; }
  .ghl-tile { padding: 20px; }
}

/* ── About > GHL stack proof grid (the merged-in 6 layers) ────────────── */
.about-stack {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.about-stack-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.about-stack-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.about-stack-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  text-align: center;
  line-height: 1.3;
}
.about-stack .ghl-grid { margin-top: 28px; }
@media (max-width: 768px) {
  /* Stack the logo above the title so the wrap doesn't shove the logo off-center */
  .about-stack-head {
    flex-direction: column;
    gap: 10px;
  }
  .about-stack-logo { width: 28px; height: 28px; }
  .about-stack-title { font-size: 1.15rem; padding: 0 8px; }
}

/* ── Work section > top-level Automation/Creatives toggle ─────────────── */
.worktype-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 36px auto 0;
  padding: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: fit-content;
}
.worktype-tab {
  background: transparent;
  border: none;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.worktype-tab:hover { color: var(--white); }
.worktype-tab.active {
  background: var(--amber);
  color: #0a0a0a;
}
.worktype-panel {
  display: none;
  margin-top: 32px;
}
.worktype-panel.active { display: block; }
.worktype-panel-desc {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .worktype-tabs { width: 100%; }
  .worktype-tab { flex: 1; padding: 10px 12px; font-size: 0.82rem; }
}

/* ===========================
   ABOUT
   =========================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-text p {
  color: var(--text-muted);
  margin-bottom: 18px;
  font-size: 1rem;
  line-height: 1.8;
}
.about-text p strong { color: var(--text); }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tag {
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--text-muted);
  transition: var(--transition);
}
.tag:hover { border-color: rgba(245,158,11,0.3); color: var(--amber); }

.about-cards { display: flex; flex-direction: column; gap: 20px; }
.about-video-wrap {
  aspect-ratio: 16 / 9 !important;
  height: auto;
}
.about-video-wrap::after { display: none; }
.about-video-center {
  max-width: 720px;
  margin: 0 auto 48px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.about-video-iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.about-text--centered {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-text--centered p { text-align: left; }
.about-tags--centered { justify-content: center; }
.about-photo-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-bg);
  aspect-ratio: 4 / 5;
}
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: var(--transition);
}
.info-card:hover { border-color: rgba(245,158,11,0.18); transform: translateY(-3px); }
.ic-icon { font-size: 2rem; margin-bottom: 12px; }
.info-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.info-card p { color: var(--text-muted); font-size: 0.9rem; }

/* ===========================
   SERVICES
   =========================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  position: relative;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.service-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }

.service-card--featured {
  border-color: rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.03);
}
.service-card--featured:hover { border-color: rgba(245,158,11,0.38); }

.featured-badge {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--amber);
  color: #000;
  padding: 4px 12px;
  border-radius: 999px;
}

.service-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.service-icon { font-size: 2.4rem; margin-bottom: 16px; }
.service-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
  display: block;
}
.service-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.service-card > p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.service-list { flex: 1; }
.service-list li {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.service-list li::before {
  content: '→';
  color: var(--amber);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.service-tag {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.15);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ===========================
   SYSTEM PIPELINE (Services section)
   5 stages connected by amber arrows. Desktop-first; mobile stacks vertically.
   =========================== */
.sysflow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
  width: 100%;
}
.sysflow-stage {
  flex: 1 1 0;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  position: relative;
}
.sysflow-stage:hover {
  border-color: rgba(245,158,11,0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(245,158,11,0.06);
}
.sysflow-stage--featured {
  border-color: rgba(245,158,11,0.28);
  background: linear-gradient(180deg, rgba(245,158,11,0.04), var(--card-bg) 60%);
}
.sysflow-stage--featured:hover {
  border-color: rgba(245,158,11,0.5);
}
.sysflow-stage--final {
  border-style: dashed;
  border-color: rgba(34,197,94,0.3);
}
.sysflow-stage--final:hover {
  border-color: rgba(34,197,94,0.5);
  box-shadow: 0 12px 32px rgba(34,197,94,0.08);
}

.sysflow-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sysflow-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--amber);
  opacity: 0.85;
}
.sysflow-icon { font-size: 1.5rem; line-height: 1; }
.sysflow-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin: 0;
}
.sysflow-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.sysflow-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sysflow-tools img {
  height: 22px;
  width: auto;
  max-width: 70px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.sysflow-stage:hover .sysflow-tools img { opacity: 1; }
.sysflow-tools img[src*="retell"],
.sysflow-tools img[src*="openai"] {
  filter: invert(1) brightness(1.05);
}
.sysflow-tools--text span {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sysflow-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sysflow-bullets li {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.sysflow-bullets li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--amber);
  font-weight: 700;
}

/* Connector arrows between stages — base track + arrow head + animated pulse dot */
.sysflow-arrow {
  flex: 0 0 32px;
  align-self: center;
  position: relative;
  height: 2px;
  background: rgba(245,158,11,0.18);
  border-radius: 99px;
  margin: 0 -2px;
  overflow: visible;
}
.sysflow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translate(2px, -50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid rgba(245,158,11,0.6);
  border-right: 2px solid rgba(245,158,11,0.6);
}
/* Continuous traveling dot — left to right, like data flowing through. */
.sysflow-arrow-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245,158,11,0.7);
  animation: sysflow-travel 2.6s linear infinite;
  opacity: 0;
}
@keyframes sysflow-travel {
  0%   { left: -6px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}
/* Stagger each arrow's dot so they don't all fire at once */
.sysflow-arrow:nth-of-type(2) .sysflow-arrow-dot { animation-delay: 0.4s; }
.sysflow-arrow:nth-of-type(3) .sysflow-arrow-dot { animation-delay: 0.8s; }
.sysflow-arrow:nth-of-type(4) .sysflow-arrow-dot { animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .sysflow-arrow-dot { animation: none; opacity: 0.6; left: 50%; }
}

/* Stage states driven by JS during the play sequence + click-to-replay */
.sysflow-stage.active {
  border-color: rgba(245,158,11,0.6);
  box-shadow: 0 0 36px rgba(245,158,11,0.22);
  transform: translateY(-4px);
  animation: sysflow-stage-pulse 1.2s ease-in-out infinite;
}
.sysflow-stage.done {
  border-color: rgba(245,158,11,0.32);
  background: linear-gradient(180deg, rgba(245,158,11,0.04), var(--card-bg) 70%);
}
.sysflow-stage--final.done {
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(180deg, rgba(34,197,94,0.05), var(--card-bg) 70%);
}
@keyframes sysflow-stage-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(245,158,11,0.18); }
  50%      { box-shadow: 0 0 40px rgba(245,158,11,0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .sysflow-stage.active { animation: none; }
}

/* Cursor cue: stages are clickable to replay */
.sysflow-stage { cursor: pointer; }

.sysflow-footnote {
  text-align: center;
  margin-top: 36px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Live signals inside each stage card (V2 — mini-dashboards) ──────────── */
.sysflow-live {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* Shared: pulsing live dot + counter row */
.sysflow-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245,158,11,0.7);
  flex-shrink: 0;
  display: inline-block;
  animation: sysflow-live-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.sysflow-live-dot--green {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.7);
}
@keyframes sysflow-live-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}
.live-counter {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.live-counter strong {
  color: var(--amber);
  font-weight: 700;
  font-feature-settings: "tnum";
  margin-left: 4px;
}
.live-counter--centered { justify-content: center; }
.live-counter--final {
  margin-top: 8px;
  justify-content: center;
}
.live-counter--final strong { color: #22c55e; }

/* ── 01 Creative — real thumbnail crossfade + shipped counter ─────────── */
.sysflow-live--gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.creative-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(245,158,11,0.25);
  background: rgba(0,0,0,0.4);
}
.creative-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.creative-thumb.swapping { opacity: 0; }
.creative-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(245,158,11,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.creative-shimmer.firing {
  animation: creative-shimmer-pass 0.6s ease-out;
}
@keyframes creative-shimmer-pass {
  to { transform: translateX(100%); }
}

/* ── 02 Distribution — metric pills + sparkline ────────────────────────── */
.sysflow-live--ads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ads-table {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ads-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  font-size: 0.62rem;
  color: var(--text);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ads-row:first-child { border-top: none; }
.ads-row--head {
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 9px;
}
.ads-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.ads-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 600;
}
.ads-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ads-status--active       { color: #22c55e; }
.ads-status--active .ads-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  animation: ads-dot-pulse 1.6s ease-in-out infinite;
}
.ads-status--learning     { color: var(--amber); }
.ads-status--learning .ads-dot { background: var(--amber); }
@keyframes ads-dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}
.ads-spend {
  color: var(--amber);
  font-weight: 700;
  font-feature-settings: "tnum";
  text-align: right;
  font-size: 0.62rem;
}
.ads-row.fresh {
  animation: ads-row-flash 1.2s ease-out;
}
@keyframes ads-row-flash {
  0%   { background: rgba(245,158,11,0.18); }
  100% { background: transparent; }
}

/* ── 03 Capture & Qualify (HERO) — bigger chat + qualified counter ─────── */
.sysflow-live--chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}
.chat-stream {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 78px;
}
.chat-line {
  display: inline-block;
  max-width: 92%;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  line-height: 1.35;
  min-height: 1.35em;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chat-line.show { opacity: 1; }
.chat-line--bot {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text);
  align-self: flex-start;
}
.chat-line--user {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  color: var(--white);
  align-self: flex-end;
}
.chat-line--summary {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.3);
  color: #d4f4dd;
  font-style: italic;
}

/* ── 04 Route & Nurture — counters + activity bar ──────────────────────── */
.sysflow-live--ghl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ghl-list {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ghl-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 0.65rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ghl-row:first-child { border-top: none; }
.ghl-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.ghl-avatar--1 { background: #6366f1; }
.ghl-avatar--2 { background: #10b981; }
.ghl-avatar--3 { background: #f43f5e; }
.ghl-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ghl-tags {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.ghl-tag {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.ghl-tag--hot {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--amber);
}
.ghl-tag--soft {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}
.ghl-row.fresh {
  animation: ghl-row-flash 1.4s ease-out;
}
@keyframes ghl-row-flash {
  0%   { background: rgba(245,158,11,0.2); }
  100% { background: transparent; }
}

/* ── 05 Conversion — toast + booked counter ────────────────────────────── */
.sysflow-live--booked {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sysflow-live--toast {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sysflow-live--toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-icon { font-size: 0.95rem; line-height: 1; }
.toast-text {
  font-size: 0.7rem;
  color: #22c55e;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .sysflow-live-dot,
  .ads-status--active .ads-dot { animation: none; }
  .creative-thumb,
  .chat-line,
  .sysflow-live--toast { transition: none; }
  .ads-row.fresh,
  .ghl-row.fresh { animation: none; }
}

/* Mobile — horizontal scroll-snap carousel.
   Each card takes ~80vw with peek of next, snaps to center on swipe. */
@media (max-width: 900px) {
  .sysflow {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;                /* prevent vertical scroll bleed */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10vw;
    padding: 4px 10vw 16px;
    margin: 36px 0 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sysflow::-webkit-scrollbar { display: none; }

  .sysflow-stage {
    flex: 0 0 80vw;
    max-width: 80vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 20px;
  }
  .sysflow-arrow { display: none; }
}

/* Carousel nav strip — prev arrow + dots + next arrow. Mobile only.
   Next arrow has a subtle pulse on first paint to signal swipe affordance. */
.sysflow-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.sysflow-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.08);
  color: var(--amber);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.sysflow-arrow-btn:active { background: rgba(245,158,11,0.18); }
.sysflow-arrow-btn:disabled,
.sysflow-arrow-btn[aria-disabled="true"] {
  opacity: 0.3;
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
  background: transparent;
  cursor: default;
}
/* The next arrow pulses subtly on initial load to hint "swipe →" */
.sysflow-arrow-btn--pulse:not(.dismissed) {
  animation: sysflow-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes sysflow-arrow-pulse {
  0%, 100% { transform: translateX(0);   box-shadow: 0 0 0 rgba(245,158,11,0); }
  50%      { transform: translateX(3px); box-shadow: 0 0 14px rgba(245,158,11,0.4); }
}

.sysflow-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.sysflow-dot {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.sysflow-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.25s ease, width 0.25s ease, box-shadow 0.25s ease;
}
.sysflow-dot.active::before {
  background: var(--amber);
  width: 22px;
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(245,158,11,0.5);
}
@media (max-width: 900px) {
  .sysflow-nav { display: flex; }
}

/* ===========================
   TESTIMONIALS
   =========================== */
.testi-grid {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testi-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 52px 48px 40px;
  overflow: hidden;
}
.testi-deco {
  position: absolute;
  font-size: 10rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  user-select: none;
  font-family: Georgia, serif;
}
.testi-deco-open { top: -12px; left: 28px; }
.testi-deco-close { bottom: -52px; right: 28px; }
.testi-body {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.testi-accent { color: var(--amber); }
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--amber);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.testi-name { font-size: 0.9rem; font-weight: 700; color: var(--white); }
.testi-role { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* ===========================
   WORK — creatives gallery
   =========================== */
.work-wrap { max-width: 1100px; margin: 0 auto; }
.work-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.work-tab {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}
.work-tab.active {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.4);
  color: var(--amber);
}
.work-tab:hover { color: var(--white); }

.work-panel { display: none; animation: workFade 0.3s ease; }
.work-panel.active { display: block; }
@keyframes workFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.work-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.work-meta-label {
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
.work-meta-divider { margin: 0 12px; opacity: 0.4; }

.work-grid {
  display: grid;
  gap: 16px;
}
.work-grid--3col { grid-template-columns: repeat(3, 1fr); }
.work-grid--4col { grid-template-columns: repeat(4, 1fr); }
.work-grid--5col { grid-template-columns: repeat(5, 1fr); }
.work-grid--mixed { grid-template-columns: repeat(6, 1fr); }
.work-item { aspect-ratio: 1 / 1; }
.work-grid--feed .work-item { aspect-ratio: 4 / 5; }
.work-grid--story .work-item { aspect-ratio: 9 / 16; }
.work-grid--mixed .work-item { grid-column: span 2; }
.work-grid--mixed .work-item--wide { aspect-ratio: 16 / 9; grid-column: span 3; }

.work-item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: var(--transition);
  position: relative;
}
.work-item img,
.work-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.work-item:hover {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 30px rgba(245,158,11,0.15);
  transform: translateY(-3px);
}
.work-item:hover img,
.work-item:hover video { transform: scale(1.04); }

.work-subhead {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.work-subhead:first-of-type { margin-top: 0; }

/* ===========================
   DEMOS — scripted chat widget
   =========================== */
.demo-video-card {
  max-width: 960px;
  margin: 0 auto 48px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.demo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--radius);
}

.demo-wrap { max-width: 960px; margin: 0 auto; }
.demo-stage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
.demo-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.demo-tab {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
}
.demo-tab.active {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.4);
  color: var(--amber);
}
.demo-tab:hover { color: var(--white); }

.demo-chat {
  background: var(--card-bg);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 50px rgba(245,158,11,0.08);
}
.demo-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.demo-chat-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--amber);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.demo-chat-name { font-size: 0.92rem; font-weight: 700; color: var(--white); }
.demo-replay {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.demo-replay:hover {
  color: var(--amber);
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.08);
}
.demo-replay svg { transition: transform 0.4s ease; }
.demo-replay:hover svg { transform: rotate(-180deg); }
.demo-replay:disabled { opacity: 0.5; cursor: not-allowed; }

/* Attention pulse — fires after demo + pipeline both complete to invite replay */
.demo-replay.pulse-attention {
  color: var(--amber);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.5);
  animation: replay-pulse 1.7s ease-in-out infinite;
}
@keyframes replay-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55),
                0 0 0 0 rgba(245, 158, 11, 0.0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.0),
                0 0 18px 4px rgba(245, 158, 11, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-replay.pulse-attention { animation: none; box-shadow: 0 0 0 2px rgba(245,158,11,0.5); }
}
.demo-chat-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.demo-chat-body {
  height: 460px;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  animation: msg-in 0.3s ease;
  word-wrap: break-word;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-user {
  align-self: flex-end;
  background: var(--amber);
  color: #0a0a0a;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.msg-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.msg-trace {
  font-size: 10.5px;
  color: rgba(255,255,255,0.2);
  font-style: italic;
  margin: 3px 0 10px 14px;
  max-width: 78%;
  line-height: 1.4;
}
.typing {
  align-self: flex-start;
  background: rgba(255,255,255,0.05);
  padding: 12px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
  animation: msg-in 0.2s ease;
}

/* ===== Lead Capture Panel ===== */
.capture-panel {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.82rem;
  position: sticky;
  top: 100px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.capture-panel.updating {
  border-color: rgba(34,197,94,0.45);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.25),
    0 0 24px rgba(34,197,94,0.25),
    0 0 60px rgba(34,197,94,0.12);
  animation: panel-glow-pulse 0.9s ease;
}
.capture-panel.completed {
  border-color: rgba(34,197,94,0.5);
  animation: panel-completed-pulse 3s ease-in-out infinite;
}
.capture-panel.completed .capture-header-dot {
  background: #22c55e;
  border: none;
  box-shadow: 0 0 12px rgba(34,197,94,0.85);
  animation: none;
}
.capture-panel.completed .capture-header-dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #0a1f0e;
  line-height: 1;
}
.capture-panel.completed .capture-header-title::after {
  content: "  ✓ Captured";
  color: #22c55e;
  font-weight: 700;
  margin-left: 4px;
}
@keyframes panel-completed-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.3),
      0 0 28px rgba(34,197,94,0.18),
      0 0 60px rgba(34,197,94,0.1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.5),
      0 0 42px rgba(34,197,94,0.32),
      0 0 90px rgba(34,197,94,0.18);
  }
}
@keyframes panel-glow-pulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.0),
      0 0 0 rgba(34,197,94,0),
      0 0 0 rgba(34,197,94,0);
  }
  35% {
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.45),
      0 0 32px rgba(34,197,94,0.4),
      0 0 80px rgba(34,197,94,0.2);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.0),
      0 0 0 rgba(34,197,94,0),
      0 0 0 rgba(34,197,94,0);
  }
}
.capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.capture-header-left { display: flex; align-items: center; gap: 8px; }
.capture-header-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--amber);
  box-shadow: 0 0 6px rgba(245,158,11,0.25);
  animation: spin 0.9s linear infinite;
  position: relative;
  flex: 0 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.capture-header-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.capture-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s ease;
}
.capture-tag.populated {
  background: rgba(245,158,11,0.12);
  color: var(--amber);
  border-color: rgba(245,158,11,0.35);
}
.capture-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.capture-section:last-child { border-bottom: none; }
.capture-section-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
}
.capture-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
  transition: all 0.4s ease;
  position: relative;
}
.capture-field:last-child { border-bottom: none; }
.capture-label {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.capture-value {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  font-weight: 500;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
  transition: all 0.4s ease;
}
.capture-field.populated .capture-value {
  color: var(--white);
  animation: capture-pop 0.5s ease;
}
.capture-field.populated .capture-label {
  color: rgba(255,255,255,0.65);
}
.capture-field.populated::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #22c55e, transparent);
  animation: capture-flash 0.6s ease;
}
@keyframes capture-pop {
  0% { transform: translateY(-4px); opacity: 0; }
  60% { transform: translateY(1px); opacity: 1; }
  100% { transform: translateY(0); }
}
@keyframes capture-flash {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
.capture-appointment.populated .capture-value {
  color: var(--amber);
  font-weight: 700;
}
.capture-child,
.capture-parent {
  animation: child-slide 0.4s ease;
}
@keyframes child-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.capture-parent .capture-section-title {
  color: rgba(245,158,11,0.65);
}

/* ===== Automation Pipeline ===== */
.pipeline-section {
  margin-top: 22px;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.pipeline-section.active {
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 0 36px rgba(245,158,11,0.08);
}
.pipeline-section.complete {
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 36px rgba(34,197,94,0.12);
}
.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pipeline-header-left { display: flex; align-items: center; gap: 8px; }
.pipeline-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.12);
  position: relative;
  transition: all 0.3s ease;
  flex: 0 0 auto;
}
.pipeline-section.active .pipeline-dot {
  border-top-color: var(--amber);
  box-shadow: 0 0 8px rgba(245,158,11,0.35);
  animation: spin 0.9s linear infinite;
}
.pipeline-section.complete .pipeline-dot {
  background: #22c55e;
  border: none;
  box-shadow: 0 0 10px rgba(34,197,94,0.7);
  animation: none;
}
.pipeline-section.complete .pipeline-dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #0a1f0e;
  line-height: 1;
}
.pipeline-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.pipeline-status {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s ease;
}
.pipeline-section.active .pipeline-status {
  background: rgba(245,158,11,0.12);
  color: var(--amber);
  border-color: rgba(245,158,11,0.4);
}
.pipeline-section.complete .pipeline-status {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border-color: rgba(34,197,94,0.45);
}
.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.pipeline-node {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.4;
  transition: all 0.4s ease;
}
.pipeline-node-icon { font-size: 1.1rem; line-height: 1; }
.pipeline-node-system {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.pipeline-node-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}
.pipeline-node-detail {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1.3;
  word-break: break-word;
}
.pipeline-node-status {
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.pipeline-node.firing {
  opacity: 1;
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 18px rgba(245,158,11,0.18);
  animation: node-pulse 0.9s ease-in-out infinite;
}
.pipeline-node.firing .pipeline-node-status {
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pipeline-node.firing .pipeline-node-status::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,158,11,0.18);
  border-top-color: var(--amber);
  animation: spin 0.7s linear infinite;
  flex: 0 0 auto;
}
.pipeline-node.fired {
  opacity: 1;
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.04);
  animation: none;
}
.pipeline-node.fired .pipeline-node-status {
  color: #22c55e;
}
.pipeline-node.fired .pipeline-node-status::before {
  content: "✓ ";
  font-weight: 800;
}
.pipeline-node.skipped {
  opacity: 0.55;
  border-style: dashed;
  border-color: rgba(245,158,11,0.3);
}
.pipeline-node.skipped .pipeline-node-status { color: rgba(245,158,11,0.7); }
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(245,158,11,0.18); }
  50% { box-shadow: 0 0 28px rgba(245,158,11,0.35); }
}
@media (max-width: 768px) {
  .pipeline-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pipeline-flow { grid-template-columns: 1fr; }
}
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-4px); }
}
.demo-note {
  text-align: center;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Competency bars */
.competencies {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.comp-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px; }
.comp-item { display: flex; flex-direction: column; gap: 8px; }
.comp-item > span { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }
.comp-bar {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.comp-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--amber);
  width: 0;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.comp-fill.animated { width: var(--pct); }

/* ===========================
   PROCESS
   =========================== */
/* Interactive pipeline — 4 nodes connected by fillable lines.
   States cycle queued → running → done as IntersectionObserver fires the play.
   Reuses the visual language from .pipeline-node (Demo section) but scoped to .proc-* */
.proc-pipeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
  flex-wrap: nowrap;
}
.proc-node {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.25s ease, opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  opacity: 0.55;
}
.proc-node:hover { transform: translateY(-3px); }
.proc-node-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.proc-node-icon { font-size: 1.6rem; line-height: 1; }
.proc-node-meta { min-width: 0; }
.proc-node-week {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.75;
  margin-bottom: 2px;
}
.proc-node-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}
.proc-node-status {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  transition: all 0.4s ease;
}
.proc-node-body {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease 0.1s, max-height 0.4s ease;
}
.proc-node-body p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}
.proc-deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proc-deliverables li {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  padding-left: 14px;
  position: relative;
}
.proc-deliverables li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--amber);
  opacity: 0.6;
}

/* State: running — amber ring, pulse, status pill goes amber */
.proc-node.running {
  opacity: 1;
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 24px rgba(245,158,11,0.15);
  animation: proc-node-pulse 1.4s ease-in-out infinite;
}
.proc-node.running .proc-node-status {
  background: rgba(245,158,11,0.12);
  color: var(--amber);
  border-color: rgba(245,158,11,0.4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.proc-node.running .proc-node-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,158,11,0.2);
  border-top-color: var(--amber);
  animation: spin 0.7s linear infinite;
}
.proc-node.running .proc-node-body {
  opacity: 1;
  max-height: 400px;
}

/* State: done — green check, settled */
.proc-node.done {
  opacity: 1;
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.03);
  animation: none;
}
.proc-node.done .proc-node-status {
  background: rgba(34,197,94,0.13);
  color: #22c55e;
  border-color: rgba(34,197,94,0.4);
}
.proc-node.done .proc-node-status::before {
  content: "✓ ";
  font-weight: 800;
}
.proc-node.done .proc-node-body {
  opacity: 1;
  max-height: 400px;
}

@keyframes proc-node-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(245,158,11,0.15); }
  50%      { box-shadow: 0 0 32px rgba(245,158,11,0.3); }
}

/* Connector line between nodes — fills with amber as the pipeline advances */
.proc-line {
  flex: 0 0 32px;
  align-self: center;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.proc-line-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(to right, var(--amber), #fbbf24);
  transition: right 0.6s ease;
}
.proc-line.filled .proc-line-fill { right: 0; }

/* Mobile — stack vertically with vertical connectors */
@media (max-width: 768px) {
  .proc-pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .proc-node {
    max-width: 100%;
    width: 100%;
  }
  .proc-line {
    flex: 0 0 28px;
    width: 2px;
    height: 28px;
    align-self: center;
  }
  .proc-line-fill {
    inset: 0 0 100% 0;                          /* fills top→bottom on mobile */
    background: linear-gradient(to bottom, var(--amber), #fbbf24);
    transition: inset 0.6s ease;
  }
  .proc-line.filled .proc-line-fill { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .proc-node.running { animation: none; }
  .proc-line-fill { transition: none; }
}

/* ===========================
   CONTACT
   =========================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.ci-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ci-text { display: flex; flex-direction: column; gap: 3px; }
.ci-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.ci-value { font-size: 0.95rem; color: var(--text); font-weight: 500; transition: var(--transition); }
a.ci-value:hover { color: var(--amber); }

/* Calendar — dark theme with amber glow accents */
.contact-calendar {
  background: var(--card-bg);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.08),
    0 0 50px rgba(245,158,11,0.12),
    0 0 120px rgba(245,158,11,0.05);
}
.calendar-header { display: flex; flex-direction: column; gap: 6px; }
.calendar-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.calendar-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}
.contact-calendar iframe {
  width: 100%;
  border-radius: var(--radius-sm);
  background: #fff;
  display: block;
}
.calendar-fallback {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}
.calendar-fallback a {
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
}
.calendar-fallback a:hover { text-decoration: underline; }

.contact-form {
  background: var(--card-bg);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.08),
    0 0 50px rgba(245,158,11,0.12),
    0 0 120px rgba(245,158,11,0.05);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.92rem;
  outline: none;
  transition: var(--transition);
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 0 12px rgba(245,158,11,0.04), inset 0 0 16px rgba(245,158,11,0.02);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(107,114,128,0.55); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(245,158,11,0.65);
  background: rgba(245,158,11,0.04);
  box-shadow:
    0 0 0 3px rgba(245,158,11,0.14),
    0 0 24px rgba(245,158,11,0.18);
}
.form-group select { cursor: pointer; }
.form-group select option { background: #111111; color: var(--text); }
.form-success {
  display: none;
  font-size: 0.88rem;
  color: var(--green);
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
}

/* ===========================
   CHATBOT DEMO SECTION
   =========================== */
.chatbot-intake-wrap,
.chatbot-ready-wrap {
  max-width: 560px;
  margin: 40px auto 0;
}
.chatbot-ready-wrap {
  background: var(--card-bg);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.08),
    0 0 50px rgba(245,158,11,0.12),
    0 0 120px rgba(245,158,11,0.05);
}
.chatbot-ready-msg {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}
.chatbot-ready-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===========================
   FOOTER
   =========================== */
#footer {
  border-top: 1px solid var(--border);
  background: var(--dark-2);
  padding: 40px 0;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--white);
}
.footer-logo-mark {
  flex-shrink: 0;
}
.footer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.footer-logo-first {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.footer-logo-last {
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
@keyframes logo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.18; }
}
.logo-dot {
  animation: logo-pulse 2.2s ease-in-out infinite;
}
.footer-tagline { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 4px; }
.footer-copy { color: rgba(107,114,128,0.45); font-size: 0.78rem; }

/* ===========================
   SCROLL REVEAL
   =========================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
  #hero { grid-template-columns: 1fr; padding: 120px 32px 60px; text-align: center; }
  .hero-visual { margin-top: 40px; }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-desc { margin: 0 auto 36px; }
  .about-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.98); justify-content: center; align-items: center; gap: 16px; z-index: 999; }
  .nav-links.open { display: flex; }
  .nav-link { font-size: 1.3rem; }
  .hamburger { display: flex; z-index: 1000; }
  .btn-nav { display: none; }

  /* When the mobile menu is open, kill the navbar's backdrop-filter — it
     creates a CSS containing block that traps the fixed-position menu inside
     the navbar bar. With it off, the menu can fill the viewport correctly. */
  body.menu-open #navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0);
  }

  /* When a work-sample modal is open, fade out the navbar so it doesn't
     cover the modal's close button at the top. */
  body.modal-open #navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Hero — sized down for mobile */
  #hero { gap: 32px; padding: 100px 24px 48px; }
  .avatar-ring { width: 280px; height: 360px; }
  .hero-visual {
    padding: 16px 0;            /* zero L/R so the avatar matches the constellation bounds exactly */
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Floating cards — hidden on mobile to keep hero clean */
  .floating-card { display: none; }

  /* Service icons — normal size */
  .service-icon-img { width: 36px; height: 36px; }

  /* About photo — constrain so it doesn't dominate */
  .about-photo-wrap { max-width: 380px; margin: 0 auto; aspect-ratio: 4 / 5; }

  /* Hero — hide logo-mark row (name already overlaid on avatar via pseudo-element) */
  .hero-title-row { display: none; }

  /* About video — full width, tighter bottom gap */
  .about-video-center { max-width: 100%; margin-bottom: 28px; }

  /* Demo video card — tighter bottom gap */
  .demo-video-card { margin-bottom: 28px; }

  /* Demo chat — fits in mobile viewport */
  .demo-wrap { max-width: 100%; }
  .demo-stage { grid-template-columns: 1fr; gap: 14px; }
  .capture-panel { position: static; }
  .demo-chat-body { height: 420px; padding: 16px; }
  .demo-tab { padding: 8px 14px; font-size: 0.78rem; }
  .msg { max-width: 85%; font-size: 0.85rem; }

  /* Work gallery — 2-up on tablet/mobile */
  .work-grid--3col,
  .work-grid--4col,
  .work-grid--5col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work-grid--mixed { grid-template-columns: 1fr; gap: 12px; }
  .work-grid--mixed .work-item,
  .work-grid--mixed .work-item--wide { grid-column: span 1; }
  .work-tab { padding: 8px 14px; font-size: 0.78rem; }
  .work-meta { font-size: 0.78rem; }
  .work-meta-divider { margin: 0 8px; }

  /* Form — full width, tighter padding */
  .contact-form { padding: 24px; }
  .contact-calendar { padding: 20px; }
  .contact-calendar iframe { height: 540px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.5rem; }
  .section { padding: 64px 0; }
  .hero-stats { gap: 4px; }
  .stat-gif { width: 110px !important; height: 110px !important; }
  .stat { padding: 0 12px; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: 0.7rem; }

  /* Hero — even smaller avatar on tiny screens */
  .avatar-ring { width: 240px; height: 310px; }

  /* Service / about */
  .service-card { padding: 24px; }
  .service-icon-img { width: 32px; height: 32px; }
  .about-photo-wrap { max-width: 320px; }

  /* Video sections — minimal margin on small screens */
  .about-video-center { margin-bottom: 20px; }
  .demo-video-card { margin-bottom: 20px; }

  /* Demo chat — tighter */
  .demo-chat-body { height: 380px; padding: 14px; }
  .demo-chat-header { padding: 12px 14px; }
  .msg { font-size: 0.83rem; padding: 9px 12px; }

  /* Form — readable on small screens */
  .contact-form { padding: 20px; }
  .form-group input, .form-group select, .form-group textarea {
    padding: 11px 14px;
    font-size: 0.95rem; /* prevents iOS zoom on focus */
  }
}

/* ===========================
   AI SOLUTIONS SECTION
   =========================== */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 900px) { .ai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; } }

.ai-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ai-card:hover {
  border-color: rgba(245,158,11,0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.ai-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: top center;
  filter: brightness(0.85);
  transition: filter var(--transition), transform 0.5s ease;
}
.ai-card:hover .ai-card-img {
  filter: brightness(1);
  transform: scale(1.03);
}

.ai-card-body {
  padding: 20px 22px 24px;
}
.ai-card-tag {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.ai-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.ai-card-stat {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===========================
   AI SOLUTIONS MODAL
   =========================== */
.ai-modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.ai-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.ai-modal {
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: min(1160px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  position: relative;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.2,0,0.1,1);
}
.ai-modal-backdrop.open .ai-modal { transform: translateY(0) scale(1); }
@media (max-width: 780px) {
  .ai-modal { grid-template-columns: 1fr; }
}

.ai-modal-img {
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  background: #0d0d0d;
  min-height: 520px;
  display: flex; align-items: center; justify-content: center;
}
.ai-modal-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 780px) {
  .ai-modal-img { border-radius: 16px 16px 0 0; min-height: unset; aspect-ratio: 16/9; }
}

.ai-modal-body {
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (max-width: 780px) { .ai-modal-body { padding: 28px 24px; } }

.ai-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ai-modal-close:hover {
  background: rgba(245, 158, 11, 0.95);
  border-color: var(--amber);
  transform: scale(1.05);
}
.ai-modal-close:active { transform: scale(0.95); }
.ai-modal-close:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.ai-modal-tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 10px;
}
.ai-modal-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; color: var(--text);
  margin-bottom: 6px; line-height: 1.2;
}
.ai-modal-stat {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 24px;
}
.ai-modal-stat strong { color: var(--amber); }

.ai-modal-desc {
  font-size: 15px; line-height: 1.75;
  color: rgba(255,255,255,0.58);
  flex: 1;
}
.ai-modal-desc p { margin-bottom: 14px; }
.ai-modal-desc p:last-child { margin-bottom: 0; }

.ai-modal-stack {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ai-modal-stack .stack-pill {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px;
}

/* ============================================================================
   MOBILE LITE — strip animated decoration, keep content
   Active on touch devices and viewports under 768px.
   Goal: fast load, readable text, large tap targets, minimal motion.
   ============================================================================ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Hero decoration: keep VANTA dots, hide grid + floating cards */
  .hero-bg-grid { display: none; }
  .floating-card { display: none; }

  /* Simplify the glass text block — no backdrop-filter (expensive on mobile),
     just a flat semi-transparent background */
  .hero-text-block {
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 18px 4px;
  }

  /* Avatar ring — kill the floating shimmer animation */
  .avatar-ring { animation: none !important; }

  /* Demo + pipeline — keep functional but no heavy glows on mobile.
     The capture panel + pipeline stack vertically (handled elsewhere). */
  .capture-panel.completed { animation: none; }
  .pipeline-section.complete { animation: none; }

  /* Larger tap targets on the demo replay button */
  .demo-replay { padding: 8px 14px; }

  /* ─── UNIFORM TEXT CENTERING ON MOBILE ──────────────────────────────────────
     Every section's headline + body copy is centered for visual consistency.
     Cards (service / AI / GHL / process) get centered titles + descriptions.
     Lists stay left-aligned for readability. */
  .section-title { text-align: center !important; }
  .section-desc {
    text-align: center !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* About section — full centering */
  #about .container { text-align: center; }
  #about .about-text > * { text-align: center; }
  #about .about-text > p { text-align: center; }
  #about .about-tags { justify-content: center; }

  /* Service cards — center title + description, keep lists left-aligned */
  .service-card { text-align: center; }
  .service-card h3 { text-align: center; }
  .service-card > p { text-align: center; }
  .service-card .service-list {
    text-align: left;
    display: inline-block;
    margin: 0 auto;
  }

  /* AI Solutions card body */
  .ai-card-body { text-align: center; }

  /* GHL Stack tiles */
  .ghl-tile { text-align: center; }

  /* Section titles — keep the gradient phrase intact (no mid-word breaks),
     and when the gradient is at the very end of the title, push it to its own
     line so phrases like "One Pipeline." stay grouped instead of "Three Services. One"
     wrapping with "Pipeline." dangling. */
  .section-title .gradient-text {
    white-space: nowrap;
  }
  .section-title .gradient-text:last-child {
    display: block;
  }

  /* ─── HERO MOBILE LAYOUT ────────────────────────────────────────────────────
     "Magazine cover" approach: full-width avatar at top with name overlaid
     on the bottom-left corner, everything else centered below. */
  #hero {
    grid-template-columns: 1fr !important;
    display: flex;
    flex-direction: column;
    padding: 90px 16px 40px !important;
    gap: 24px;
    text-align: center;
    position: relative;
    min-height: auto;
  }

  /* Avatar block goes first, full width, no container — VANTA dots show through behind it.
     aspect-ratio on hero-visual sets the box, the image fills it. */
  .hero-visual {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: visible;
    background: transparent;
    aspect-ratio: 4 / 5;
  }

  /* Mobile constellation goes FULL viewport width (no side indent), centered
     horizontally regardless of #hero's L/R padding. Soft radial mask fades the
     edges into the surrounding black so it reads seamless with the page bg. */
  #hero-vanta {
    top: 90px;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 100vw;
    height: calc(100vw * 5 / 4);
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(ellipse 78% 88% at center, #000 35%, transparent 95%);
            mask-image: radial-gradient(ellipse 78% 88% at center, #000 35%, transparent 95%);
  }
  .avatar-ring {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
  }
  .avatar-img,
  .avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
    background: transparent;
  }

  /* Name overlaid at the bottom-center of the avatar */
  .hero-visual::after {
    content: 'Idriss Ocampo';
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(2rem, 11vw, 3.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 16px rgba(0,0,0,0.85));
    pointer-events: none;
    z-index: 3;
  }

  /* Hide the original H1 on mobile (replaced by the pseudo-element above) */
  .hero-title { display: none; }

  /* Hero content stacks centered below the avatar */
  .hero-content {
    order: 2;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .hero-badge {
    margin: 0 auto 18px;
    display: inline-flex;
  }
  .hero-tagline,
  .hero-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-text-block {
    margin: 0 auto 28px;
    max-width: 100%;
    text-align: center;
  }
  .hero-ctas {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-stats {
    justify-content: center;
    margin-top: 8px;
  }
}