/* ============================================================
   BuildLab v5 — Custom AI Solutions
   Design system based on Mobbin production CSS
   ============================================================ */

/* --- Mobbin Color Tokens (exact HSL from production) --- */
:root {
  /* Neutral scale */
  --neutral-0: 0 0% 100%;
  --neutral-5: 0 0% 96%;
  --neutral-10: 0 0% 93%;
  --neutral-20: 0 0% 86%;
  --neutral-30: 0 0% 76%;
  --neutral-40: 0 0% 68%;
  --neutral-50: 0 0% 53%;
  --neutral-60: 0 0% 44%;
  --neutral-70: 0 0% 36%;
  --neutral-80: 0 0% 25%;
  --neutral-90: 0 0% 15%;
  --neutral-95: 0 0% 12%;
  --neutral-100: 0 0% 8%;

  /* Opacity scales */
  --opacity-black-4: 0 0% 0% / 4%;
  --opacity-black-6: 0 0% 0% / 6%;
  --opacity-black-8: 0 0% 0% / 8%;
  --opacity-black-10: 0 0% 0% / 10%;
  --opacity-black-12: 0 0% 0% / 12%;
  --opacity-black-16: 0 0% 0% / 16%;

  /* Semantic (light theme) */
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-60);
  --text-tertiary: var(--neutral-40);
  --text-disabled: var(--neutral-40);
  --bg-primary: var(--neutral-0);
  --bg-secondary: var(--opacity-black-6);
  --bg-tertiary: var(--opacity-black-8);
  --border-primary: var(--neutral-100);
  --border-secondary: var(--opacity-black-8);
  --border-divider: var(--neutral-10);
  --shadow-card: 0 12px 80px hsl(0 0% 0% / 8%);
  --shadow-dropdown: 0 8px 24px hsl(0 0% 0% / 12%);
  --shadow-image-inset: inset 0 0 0 0.5px hsl(0 0% 0% / 10%);

  /* Navbar */
  --navbar-height: 72px;
  --max-content-width: 1200px;

  /* Spacing (Mobbin scale) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-60: 60px;
  --sp-64: 64px;
  --sp-80: 80px;

  /* Border radius (Mobbin scale) */
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-32: 32px;
  --r-full: 9999px;

  /* Transition */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 200ms;
  --duration-slow: 300ms;
}

/* ============================================================
   DARK MODE (Mobbin exact dark theme tokens)
   ============================================================ */

/* Opacity scales for dark */
:root {
  --opacity-white-6: 0 0% 100% / 6%;
  --opacity-white-8: 0 0% 100% / 8%;
  --opacity-white-10: 0 0% 100% / 10%;
  --opacity-white-12: 0 0% 100% / 12%;
  --opacity-white-16: 0 0% 100% / 16%;
}

[data-theme="dark"] {
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-40);
  --text-tertiary: var(--neutral-60);
  --text-disabled: var(--neutral-60);
  --bg-primary: var(--neutral-100);
  --bg-secondary: var(--opacity-white-6);
  --bg-tertiary: var(--opacity-white-8);
  --border-primary: var(--neutral-0);
  --border-secondary: var(--opacity-white-8);
  --border-divider: var(--neutral-80);
  --shadow-card: 0 12px 80px hsl(0 0% 0% / 32%);
  --shadow-dropdown: 0 8px 24px hsl(0 0% 0% / 48%);
  --shadow-image-inset: inset 0 0 0 0.5px hsl(0 0% 100% / 10%);
  color-scheme: dark;
}

/* Smooth theme transition on body + key elements */
body,
.nav-pill,
.nav-wrap,
.announce-bar,
.mobile-menu,
.showcase__browser,
.showcase__bar,
.showcase__url,
.uc-card,
.proof__card,
.process__step,
.int-tile,
.security__card,
.pricing__card,
.test-card,
.faq__item,
.form-section__layout,
.side-panel__drawer,
.modal__panel,
.cap-tab,
.filter-chip,
.btn,
.lead-form__field input,
.lead-form__field select {
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* --- Dark mode component overrides --- */

/* Nav pill — dark glass */
[data-theme="dark"] .nav-pill {
  background: hsl(0 0% 15% / 80%);
  border-color: hsl(0 0% 100% / 8%);
  color: hsl(var(--neutral-0));
  --pill-logo-text: #141414;
}
[data-theme="dark"] .nav-pill__link {
  color: hsl(var(--neutral-40));
}
[data-theme="dark"] .nav-pill__link:hover {
  color: hsl(var(--neutral-0));
}
[data-theme="dark"] .announce-bar {
  border-color: hsl(var(--neutral-80));
}
[data-theme="dark"] .announce-bar__badge {
  border-color: hsl(var(--neutral-60));
  color: hsl(var(--neutral-0));
}
[data-theme="dark"] .mobile-menu {
  background: hsl(var(--neutral-100));
}
[data-theme="dark"] .mobile-menu__cta {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Buttons — invert primary */
[data-theme="dark"] .btn--primary {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}
[data-theme="dark"] .btn--primary:hover {
  background: hsl(var(--neutral-5));
}
[data-theme="dark"] .btn--outline {
  border-color: hsl(var(--neutral-80));
}
[data-theme="dark"] .btn--outline:hover {
  border-color: hsl(var(--neutral-60));
  background: hsl(var(--opacity-white-6));
}
[data-theme="dark"] .btn:focus-visible {
  outline-color: hsl(var(--neutral-0));
}
[data-theme="dark"] .btn--shine::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
}

/* Filter chips */
[data-theme="dark"] .filter-chip--active {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
  border-color: hsl(var(--neutral-0));
}
[data-theme="dark"] .filter-chip:hover {
  border-color: hsl(var(--neutral-60));
}

/* Showcase browser */
[data-theme="dark"] .showcase__bar {
  background: hsl(var(--neutral-95));
}
[data-theme="dark"] .showcase__dots span {
  background: hsl(var(--neutral-70));
}
[data-theme="dark"] .showcase__url {
  background: hsl(var(--neutral-90));
  border-color: hsl(var(--neutral-80));
  color: hsl(var(--neutral-50));
}
[data-theme="dark"] .showcase__topbar-badge {
  background: hsl(142 72% 15%);
  color: hsl(142 72% 65%);
}
[data-theme="dark"] .showcase__wf-bar {
  background: hsl(var(--neutral-80));
}
[data-theme="dark"] .showcase__wf-fill {
  background: hsl(var(--neutral-0));
}
[data-theme="dark"] .showcase__wf-status--live {
  background: hsl(142 72% 55%);
  box-shadow: 0 0 0 3px hsl(142 72% 55% / 25%);
}

/* Capability tabs */
[data-theme="dark"] .cap-tab--active {
  background: hsl(var(--opacity-white-8));
  border-color: hsl(var(--neutral-80));
}
[data-theme="dark"] .cap-tab:hover {
  background: hsl(var(--opacity-white-6));
}

/* Cap panel example (stays dark in both themes, invert in dark) */
[data-theme="dark"] .cap-panel__example {
  background: hsl(var(--neutral-95));
  border: 1px solid hsl(var(--neutral-80));
}
[data-theme="dark"] .cap-panel__example-label {
  color: hsl(var(--neutral-40));
}
[data-theme="dark"] .cap-panel__example code {
  color: hsl(var(--neutral-30));
}

/* Cards hover in dark */
[data-theme="dark"] .uc-card:hover,
[data-theme="dark"] .proof__card:hover,
[data-theme="dark"] .process__step:hover,
[data-theme="dark"] .int-tile:hover,
[data-theme="dark"] .pricing__card:hover {
  border-color: hsl(var(--neutral-60));
}

/* Pricing featured card */
[data-theme="dark"] .pricing__card--featured {
  border-color: hsl(var(--neutral-0));
}
[data-theme="dark"] .pricing__badge {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Testimonial featured card */
[data-theme="dark"] .test-card--featured {
  background: hsl(var(--neutral-0));
  border-color: hsl(var(--neutral-0));
}
[data-theme="dark"] .test-card--featured .test-card__name { color: hsl(var(--neutral-100)); }
[data-theme="dark"] .test-card--featured .test-card__role { color: hsl(var(--neutral-60)); }
[data-theme="dark"] .test-card--featured .test-card__quote { color: hsl(var(--neutral-100)); }
[data-theme="dark"] .test-card--featured .test-card__avatar {
  background: hsl(var(--neutral-10));
  color: hsl(var(--neutral-60));
}

/* Step numbers */
[data-theme="dark"] .process__step-num {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}
[data-theme="dark"] .sp-step__num {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Integration tooltips */
[data-theme="dark"] .int-tile::after {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Form inputs */
[data-theme="dark"] .lead-form__field input,
[data-theme="dark"] .lead-form__field select {
  background: hsl(var(--neutral-95));
  border-color: hsl(var(--neutral-80));
  color: hsl(var(--neutral-0));
}
[data-theme="dark"] .lead-form__field input::placeholder {
  color: hsl(var(--neutral-60));
}
[data-theme="dark"] .lead-form__field input:focus,
[data-theme="dark"] .lead-form__field select:focus {
  border-color: hsl(var(--neutral-0));
}
[data-theme="dark"] .lead-form__field select option {
  background: hsl(var(--neutral-95));
}

/* Form success icon */
[data-theme="dark"] .lead-form__success-icon {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Logo items — slightly more visible in dark */
[data-theme="dark"] .logos-strip__item {
  color: hsl(var(--neutral-60));
}
/* Selection */
[data-theme="dark"] ::selection {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}

/* Guardrails items */
[data-theme="dark"] .guardrails__item {
  background: hsl(var(--opacity-white-6));
}

/* Side panel overlay — deeper in dark */
[data-theme="dark"] .side-panel__overlay,
[data-theme="dark"] .modal__overlay {
  background: hsl(0 0% 0% / 60%);
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  color: hsl(var(--text-secondary));
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  background: hsl(var(--bg-secondary));
  color: hsl(var(--text-primary));
}
.theme-toggle__icon {
  position: absolute;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.theme-toggle__sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.theme-toggle__moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle__rain {
  opacity: 0;
  transform: scale(0.5);
}
[data-theme="dark"] .theme-toggle__sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* Rain mode — show rain icon, hide sun & moon */
body.rain-mode .theme-toggle__rain {
  opacity: 1;
  transform: scale(1);
}
body.rain-mode .theme-toggle__sun {
  opacity: 0 !important;
  transform: rotate(-90deg) scale(0.5) !important;
}
body.rain-mode .theme-toggle__moon {
  opacity: 0 !important;
  transform: rotate(90deg) scale(0.5) !important;
}

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

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "ss07" on, "cv11" on;
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--text-primary));
  background: hsl(var(--bg-primary));
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
::selection { background: hsl(var(--neutral-100)); color: hsl(var(--neutral-0)); }

/* --- Layout --- */
.content-w {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--sp-24);
}
.content-w--narrow { max-width: 860px; }

/* --- Typography (Mobbin scale — exact) --- */
.text-showcase {
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.text-spotlight {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.text-title-1 {
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.text-title-2 {
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.125;
  font-weight: 650;
}
.text-title-3 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 650;
}
.text-feature {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 440;
}
.text-body {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 456;
}
.text-compact {
  font-size: 14px;
  line-height: 1.43;
  font-weight: 456;
}
.text-caption {
  font-size: 12px;
  line-height: 1.33;
  font-weight: 456;
}
.text-secondary { color: hsl(var(--text-secondary)); }
.text-tertiary { color: hsl(var(--text-tertiary)); }

/* --- Scroll Animations --- */
.anim-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.anim-reveal--d1 { transition-delay: 0.1s; }
.anim-reveal--d2 { transition-delay: 0.2s; }
.anim-reveal--d3 { transition-delay: 0.3s; }
.anim-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .anim-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BUTTONS (Mobbin style — minimal with arrows)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.43;
  padding: 10px 20px;
  border-radius: var(--r-full);
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn svg { flex-shrink: 0; transition: transform var(--duration) var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn--primary {
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
}
.btn--primary:hover {
  background: hsl(var(--neutral-90));
}
.btn--ghost {
  color: hsl(var(--text-primary));
  padding: 10px 4px;
}
.btn--ghost:hover { color: hsl(var(--text-secondary)); }
.btn--outline {
  border: 1px solid hsl(var(--border-divider));
  color: hsl(var(--text-primary));
  padding: 10px 20px;
}
.btn--outline:hover {
  background: hsl(var(--bg-secondary));
  border-color: hsl(var(--neutral-20));
}
.btn--large { padding: 14px 28px; font-size: 16px; }
.btn--full { width: 100%; justify-content: center; }
.btn:focus-visible { outline: 2px solid hsl(var(--neutral-100)); outline-offset: 2px; }

/* Shine effect (Mobbin hero button) */
.btn--shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: btnShine 3s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes btnShine {
  0% { left: -100%; }
  30% { left: 120%; }
  100% { left: 120%; }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar {
  border-bottom: 1px solid hsl(var(--border-divider));
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), padding 0.4s var(--ease);
  max-height: 60px;
  overflow: hidden;
}
.announce-bar.is-dismissed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  border: none;
}
.announce-bar__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-24);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.announce-bar__content {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 14px;
  font-weight: 456;
  color: hsl(var(--text-primary));
  transition: color var(--duration) var(--ease);
}
.announce-bar__content:hover { color: hsl(var(--text-secondary)); }
.announce-bar__content svg { width: 14px; height: 14px; }
.announce-bar__badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border: 1px solid hsl(var(--neutral-20));
  border-radius: var(--r-full);
  color: hsl(var(--text-primary));
  letter-spacing: 0.01em;
}
.announce-bar__close {
  position: absolute;
  right: var(--sp-24);
  color: hsl(var(--text-tertiary));
  transition: color var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
}
.announce-bar__close:hover { color: hsl(var(--text-primary)); }

/* ============================================================
   NAV — Floating Glass Pill (Mobbin v4)
   ============================================================ */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: var(--sp-12) var(--sp-24) var(--sp-12);
  pointer-events: none;
}
.nav-pill {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-12) var(--sp-20);
  border-radius: 60px;
  background: hsl(0 0% 93% / 72%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(0 0% 93% / 8%);
  box-shadow: 0 12px 80px hsl(0 0% 0% / 10%);
  pointer-events: auto;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-pill__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-weight: 700;
  font-size: 16px;
  color: hsl(var(--text-primary));
  --pill-logo-text: hsl(var(--bg-primary));
}
.nav-pill__right {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.nav-pill__link {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--text-secondary));
  transition: color var(--duration) var(--ease);
  white-space: nowrap;
}
.nav-pill__link:hover { color: hsl(var(--text-primary)); }
.nav-pill__hamburger {
  display: none;
  color: hsl(var(--text-primary));
  padding: 2px;
}

@media (max-width: 640px) {
  .nav-pill { max-width: none; }
  .nav-pill__link--desktop { display: none; }
  .nav-pill__hamburger { display: flex; }
  .nav-pill__right .nav-pill__link { display: none; }
  .nav-pill__right .theme-toggle { display: flex; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: hsl(var(--bg-primary));
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-slow) var(--ease);
  padding-top: 100px;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__inner { padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-4); }
.mobile-menu__link {
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--text-primary));
  padding: var(--sp-12) 0;
}
.mobile-menu__divider { height: 1px; background: hsl(var(--border-divider)); margin: var(--sp-16) 0; }
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  font-weight: 600;
  font-size: 16px;
  padding: var(--sp-16);
  border-radius: var(--r-12);
  justify-content: center;
}

/* ============================================================
   HERO (Mobbin style — centered, large type, clean)
   ============================================================ */
.hero {
  padding: 60px 0 var(--sp-40);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero__neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero__content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--sp-24);
  position: relative;
  z-index: 1;
}
.hero__line {
  white-space: nowrap;
}
.hero__title {
  font-size: clamp(44px, 7vw, 80px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: hsl(var(--text-primary));
  margin-bottom: var(--sp-20);
}
.hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  font-weight: 440;
  color: hsl(var(--text-secondary));
  max-width: 600px;
  margin: 0 auto var(--sp-32);
}
.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

/* ============================================================
   LOGO STRIP (Mobbin ticker)
   ============================================================ */
.logos-strip {
  padding: var(--sp-48) 0;
  overflow: hidden;
  border-bottom: 1px solid hsl(var(--border-divider));
}
.logos-strip__inner { position: relative; }
.logos-strip__track {
  display: flex;
  gap: var(--sp-48);
  animation: ticker 30s linear infinite;
  width: max-content;
}
.logos-strip__item {
  font-size: 18px;
  font-weight: 700;
  color: hsl(var(--neutral-30));
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   SHOWCASE (Product screenshot — Mobbin style)
   ============================================================ */
.showcase {
  padding: var(--sp-48) 0 var(--sp-80);
}
.showcase__container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--sp-24);
}
.showcase__browser {
  background: hsl(var(--bg-primary));
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.showcase__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid hsl(var(--border-divider));
  background: hsl(var(--neutral-5));
}
.showcase__dots { display: flex; gap: 6px; }
.showcase__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(var(--neutral-20));
}
.showcase__url {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--text-tertiary));
  background: hsl(var(--bg-primary));
  padding: 4px 12px;
  border-radius: var(--r-4);
  border: 1px solid hsl(var(--border-divider));
}
.showcase__dashboard {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 320px;
}
.showcase__sidebar {
  border-right: 1px solid hsl(var(--border-divider));
  padding: var(--sp-16) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.showcase__sidebar-item {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--text-secondary));
  padding: 8px 12px;
  border-radius: var(--r-8);
  transition: all var(--duration) var(--ease);
}
.showcase__sidebar-item--active {
  background: hsl(var(--bg-tertiary));
  color: hsl(var(--text-primary));
  font-weight: 600;
}
.showcase__main { padding: var(--sp-20); }
.showcase__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-16);
}
.showcase__topbar-title { font-size: 16px; font-weight: 650; }
.showcase__topbar-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: hsl(142 72% 94%);
  color: hsl(142 72% 29%);
}
.showcase__cards { display: flex; flex-direction: column; gap: var(--sp-12); }
.showcase__wf-card {
  padding: var(--sp-16);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-12);
  transition: border-color var(--duration) var(--ease);
}
.showcase__wf-card:hover { border-color: hsl(var(--neutral-20)); }
.showcase__wf-header { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-4); }
.showcase__wf-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.showcase__wf-status--live {
  background: hsl(142 72% 45%);
  box-shadow: 0 0 0 3px hsl(142 72% 45% / 20%);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px hsl(142 72% 45% / 20%); }
  50% { box-shadow: 0 0 0 6px hsl(142 72% 45% / 10%); }
}
.showcase__wf-name { font-size: 14px; font-weight: 600; }
.showcase__wf-meta { font-size: 12px; color: hsl(var(--text-tertiary)); margin-bottom: var(--sp-8); }
.showcase__wf-bar {
  height: 4px;
  background: hsl(var(--neutral-10));
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.showcase__wf-fill {
  height: 100%;
  background: hsl(var(--neutral-100));
  border-radius: var(--r-full);
  transition: width 1s var(--ease);
}
.showcase__wf-stat { font-size: 12px; color: hsl(var(--text-secondary)); }

@media (max-width: 600px) {
  .showcase__dashboard { grid-template-columns: 1fr; }
  .showcase__sidebar { flex-direction: row; border-right: none; border-bottom: 1px solid hsl(var(--border-divider)); overflow-x: auto; }
}

/* ============================================================
   STATS (Mobbin style)
   ============================================================ */
.stats {
  padding: var(--sp-40) 0;
  text-align: center;
  border-bottom: 1px solid hsl(var(--border-divider));
}
.stats__line {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 650;
  color: hsl(var(--text-primary));
  letter-spacing: -0.01em;
}
.stats__num { /* styled inline — just uses parent weight */ }

/* ============================================================
   VALUE SECTION (Left/Right — Mobbin feature layout)
   ============================================================ */
.value-section {
  padding: var(--sp-80) 0;
}
.value-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-64);
  align-items: start;
}
.value-section__right .text-feature { margin-bottom: var(--sp-32); }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.before-after__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
  display: block;
}
.before-after__label--after { color: hsl(var(--text-primary)); }
.before-after__list { display: flex; flex-direction: column; gap: var(--sp-8); }
.before-after__list li {
  font-size: 14px;
  color: hsl(var(--text-secondary));
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.before-after__list--before li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: hsl(var(--neutral-30));
}
.before-after__list--after li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: hsl(var(--text-primary));
  font-weight: 600;
}

@media (max-width: 840px) {
  .value-section__layout { grid-template-columns: 1fr; gap: var(--sp-40); }
}

/* ============================================================
   CAPABILITIES (Tabbed — Mobbin "Find design patterns")
   ============================================================ */
.capabilities {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.capabilities__layout {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: var(--sp-64);
  align-items: start;
}
.capabilities__sub { margin: var(--sp-16) 0 var(--sp-32); }
.capabilities__tabs { display: flex; flex-direction: column; gap: var(--sp-4); }
.cap-tab {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: hsl(var(--text-tertiary));
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-12);
  transition: all var(--duration) var(--ease);
  border: 1px solid transparent;
}
.cap-tab:hover { color: hsl(var(--text-secondary)); background: hsl(var(--bg-secondary)); }
.cap-tab--active {
  color: hsl(var(--text-primary));
  background: hsl(var(--bg-tertiary));
  font-weight: 600;
  border-color: hsl(var(--border-divider));
}

.cap-panel__content {
  display: none;
  animation: panelFade 0.35s var(--ease);
}
.cap-panel__content.is-active { display: block; }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cap-panel__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
}
.cap-panel__content .text-title-2 { margin-bottom: var(--sp-16); }
.cap-panel__content .text-body { margin-bottom: var(--sp-24); }
.cap-panel__example {
  padding: var(--sp-16);
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border-radius: var(--r-12);
}
.cap-panel__example-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--neutral-50));
  margin-bottom: var(--sp-8);
}
.cap-panel__example code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--neutral-20));
}

@media (max-width: 840px) {
  .capabilities__layout { grid-template-columns: 1fr; gap: var(--sp-32); }
  .capabilities__tabs { flex-direction: row; flex-wrap: wrap; gap: var(--sp-8); }
  .cap-tab { padding: var(--sp-8) var(--sp-12); font-size: 14px; }
}

/* ============================================================
   USE CASES
   ============================================================ */
.use-cases {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.use-cases__header { text-align: center; margin-bottom: var(--sp-24); }
.use-cases__header .text-feature { margin-top: var(--sp-12); }
.use-cases__filters {
  display: flex;
  gap: var(--sp-8);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-40);
}
.filter-chip {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--text-secondary));
  padding: 8px 16px;
  border-radius: var(--r-full);
  border: 1px solid hsl(var(--border-divider));
  transition: all var(--duration) var(--ease);
  background: transparent;
}
.filter-chip:hover {
  border-color: hsl(var(--neutral-20));
  color: hsl(var(--text-primary));
}
.filter-chip--active {
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border-color: hsl(var(--neutral-100));
}
.use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}
.uc-card {
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  padding: var(--sp-24);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
}
.uc-card:hover {
  border-color: hsl(var(--neutral-20));
  box-shadow: var(--shadow-card);
}
.uc-card.is-hidden { display: none; }
.uc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-12);
}
.uc-card__tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
}
.uc-card__arrow {
  color: hsl(var(--text-tertiary));
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all var(--duration) var(--ease);
}
.uc-card:hover .uc-card__arrow { opacity: 1; transform: translate(0, 0); }
.uc-card__title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: var(--sp-8);
}
.uc-card__desc {
  font-size: 14px;
  color: hsl(var(--text-secondary));
  line-height: 1.5;
  margin-bottom: var(--sp-16);
  flex: 1;
}
.uc-card__footer { margin-top: auto; }
.uc-card__impact {
  font-size: 12px;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
}
.uc-card__systems { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.uc-card__systems span {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: hsl(var(--bg-secondary));
  color: hsl(var(--text-secondary));
}
@media (max-width: 900px) { .use-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .use-cases__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SIDE PANEL
   ============================================================ */
.side-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.side-panel.is-open { pointer-events: auto; }
.side-panel__overlay {
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 40%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease);
}
.side-panel.is-open .side-panel__overlay { opacity: 1; }
.side-panel__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 92vw;
  background: hsl(var(--bg-primary));
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-dropdown);
}
.side-panel.is-open .side-panel__drawer { transform: translateX(0); }
.side-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-24) var(--sp-24) var(--sp-16);
  border-bottom: 1px solid hsl(var(--border-divider));
}
.side-panel__tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-4);
}
.side-panel__title {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}
.side-panel__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  color: hsl(var(--text-secondary));
  transition: all var(--duration) var(--ease);
  flex-shrink: 0;
}
.side-panel__close:hover { background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary)); }
.side-panel__body { flex: 1; overflow-y: auto; padding: var(--sp-24); }
.sp-section { margin-bottom: var(--sp-24); }
.sp-section__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
}
.sp-steps { display: flex; flex-direction: column; gap: var(--sp-8); }
.sp-step {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  background: hsl(var(--bg-secondary));
  border-radius: var(--r-8);
  font-size: 14px;
}
.sp-step__num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sp-io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.sp-io__card {
  padding: var(--sp-12);
  background: hsl(var(--bg-secondary));
  border-radius: var(--r-8);
}
.sp-io__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-4);
}
.sp-io__text { font-size: 13px; color: hsl(var(--text-secondary)); line-height: 1.5; }
.sp-metrics { display: flex; flex-direction: column; gap: var(--sp-8); }
.sp-metrics li {
  font-size: 14px;
  color: hsl(var(--text-primary));
  padding-left: 20px;
  position: relative;
}
.sp-metrics li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 600;
}
.side-panel__foot {
  padding: var(--sp-16) var(--sp-24);
  border-top: 1px solid hsl(var(--border-divider));
}

/* ============================================================
   PROOF
   ============================================================ */
.proof {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.proof__heading { text-align: center; margin-bottom: var(--sp-48); }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}
.proof__card {
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  padding: var(--sp-32);
  transition: border-color var(--duration) var(--ease);
}
.proof__card:hover { border-color: hsl(var(--neutral-20)); }
.proof__num {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
  display: block;
}
.proof__card .text-title-3 { margin-bottom: var(--sp-12); }
.proof__card .text-body { margin-bottom: var(--sp-20); }
.proof__outcomes { display: flex; flex-direction: column; gap: var(--sp-8); }
.proof__outcomes li {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--text-primary));
  padding-left: 20px;
  position: relative;
}
.proof__outcomes li::before {
  content: '→';
  position: absolute;
  left: 0;
}
@media (max-width: 900px) { .proof__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROCESS
   ============================================================ */
.process {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.process__layout {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: var(--sp-64);
  align-items: start;
}
.process__left .text-feature { margin-top: var(--sp-16); }
.process__right { display: flex; flex-direction: column; gap: var(--sp-20); }
.process__step {
  display: flex;
  gap: var(--sp-20);
  padding: var(--sp-24);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  transition: border-color var(--duration) var(--ease);
}
.process__step:hover { border-color: hsl(var(--neutral-20)); }
.process__step-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border-radius: var(--r-12);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.process__step-body { flex: 1; }
.process__step-body .text-title-3 { font-size: 18px; margin-bottom: var(--sp-4); }
.process__step-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-8);
  display: block;
}

/* Founders — "Where we've built" logo strip */
.founders-logos {
  margin-top: var(--sp-40);
  border-top: 1px solid hsl(var(--border-divider));
  padding-top: var(--sp-24);
}
.founders-logos__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-16);
}
.founders-logos__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.founders-logos__name {
  font-size: 20px;
  font-weight: 700;
  color: hsl(var(--text-primary));
  opacity: 0.18;
  letter-spacing: -0.01em;
  line-height: 2;
  transition: opacity 0.3s var(--ease);
}
.founders-logos__name:hover {
  opacity: 1 !important;
}
.founders-logos__name[data-brand="amazon"]:hover { color: #ff9900; }
.founders-logos__name[data-brand="aws"]:hover { color: #ff9900; }
.founders-logos__name[data-brand="mit"]:hover { color: #a31f34; }
.founders-logos__name[data-brand="intuit"]:hover { color: #0077c5; }
.founders-logos__name[data-brand="getaround"]:hover { color: #6c3baa; }
.founders-logos__name[data-brand="hsp"]:hover { color: #0e7c5f; }
.founders-logos__name[data-brand="codegen"]:hover { color: #e63946; }
.founders-logos__name[data-brand="moe"]:hover { color: #8b6914; }

@media (max-width: 840px) {
  .process__layout { grid-template-columns: 1fr; gap: var(--sp-40); }
}

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.integrations {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.integrations__header { text-align: center; margin-bottom: var(--sp-40); }
.integrations__header .text-feature { margin-top: var(--sp-12); }
.integrations__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-12);
  max-width: 800px;
  margin: 0 auto;
}
.int-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-24) var(--sp-12);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  transition: all var(--duration) var(--ease);
  position: relative;
  cursor: default;
}
.int-tile:hover { border-color: hsl(var(--neutral-20)); box-shadow: var(--shadow-card); }
.int-tile__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--bg-secondary));
  border-radius: var(--r-8);
  font-size: 12px;
  font-weight: 700;
  color: hsl(var(--text-secondary));
}
.int-tile:hover .int-tile__icon { background: hsl(var(--bg-tertiary)); color: hsl(var(--text-primary)); }
.int-tile__name { font-size: 12px; font-weight: 600; text-align: center; color: hsl(var(--text-secondary)); }
/* Tooltip */
.int-tile::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--r-8);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration) var(--ease);
  pointer-events: none;
}
.int-tile:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.integrations__more { text-align: center; margin-top: var(--sp-24); font-size: 14px; }
@media (max-width: 600px) {
  .integrations__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SECURITY
   ============================================================ */
.security {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.security__layout {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: var(--sp-64);
  align-items: start;
  margin-bottom: var(--sp-40);
}
.security__left .text-feature { margin: var(--sp-16) 0 var(--sp-24); }
.security__right { display: flex; flex-direction: column; gap: var(--sp-16); }
.security__card {
  padding: var(--sp-24);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
}
.security__card-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-16);
}
.security__list { display: flex; flex-direction: column; gap: var(--sp-8); }
.security__list li {
  font-size: 14px;
  color: hsl(var(--text-secondary));
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.security__list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: hsl(var(--neutral-30));
}
.security__list--check li::before {
  content: '✓';
  font-size: 13px;
  font-weight: 700;
  left: 0;
  color: hsl(var(--text-primary));
}
.guardrails {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
}
.guardrails.is-open { max-height: 300px; padding-top: var(--sp-24); }
.guardrails__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.guardrails__item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  background: hsl(var(--bg-secondary));
  border-radius: var(--r-8);
  font-size: 13px;
  color: hsl(var(--text-secondary));
}
.guardrails__item svg { flex-shrink: 0; color: hsl(var(--text-primary)); }
@media (max-width: 840px) {
  .security__layout { grid-template-columns: 1fr; gap: var(--sp-32); }
  .guardrails__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.pricing__header { text-align: center; margin-bottom: var(--sp-48); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
  max-width: 960px;
  margin: 0 auto;
}
.pricing__card {
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-20);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  transition: all var(--duration) var(--ease);
  position: relative;
}
.pricing__card:hover { border-color: hsl(var(--neutral-20)); box-shadow: var(--shadow-card); }
.pricing__card--featured {
  border-color: hsl(var(--neutral-100));
  border-width: 2px;
}
.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.pricing__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-8);
}
.pricing__name {
  font-size: 28px;
  font-weight: 650;
  margin-bottom: var(--sp-8);
}
.pricing__desc { font-size: 14px; margin-bottom: var(--sp-24); line-height: 1.5; }
.pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-32);
  flex: 1;
}
.pricing__features li {
  font-size: 14px;
  color: hsl(var(--text-secondary));
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.pricing__features li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 600;
  color: hsl(var(--text-primary));
}
@media (max-width: 840px) { .pricing__grid { grid-template-columns: 1fr; max-width: 400px; } }

/* ============================================================
   TESTIMONIALS (Mobbin horizontal carousel)
   ============================================================ */
.testimonials {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
  overflow: hidden;
}
.testimonials__track { position: relative; }
.testimonials__scroll {
  display: flex;
  gap: var(--sp-16);
  animation: testimonialScroll 45s linear infinite;
  width: max-content;
}
.testimonials__scroll:hover { animation-play-state: paused; }
@keyframes testimonialScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.test-card {
  width: 360px;
  flex-shrink: 0;
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  padding: var(--sp-24);
  transition: border-color var(--duration) var(--ease);
}
.test-card:hover { border-color: hsl(var(--neutral-20)); }
.test-card--featured {
  background: hsl(var(--neutral-100));
  border-color: hsl(var(--neutral-100));
}
.test-card--featured .test-card__name { color: hsl(var(--neutral-0)); }
.test-card--featured .test-card__role { color: hsl(var(--neutral-50)); }
.test-card--featured .test-card__quote { color: hsl(var(--neutral-0)); }
.test-card__head { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.test-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: hsl(var(--bg-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: hsl(var(--text-secondary));
  flex-shrink: 0;
}
.test-card--featured .test-card__avatar { background: hsl(var(--neutral-80)); color: hsl(var(--neutral-30)); }
.test-card__name { font-size: 14px; font-weight: 600; }
.test-card__role { font-size: 12px; color: hsl(var(--text-tertiary)); }
.test-card__quote { font-size: 15px; line-height: 1.55; color: hsl(var(--text-primary)); }

/* ============================================================
   FAQ (Mobbin accordion)
   ============================================================ */
.faq {
  padding: var(--sp-80) 0;
  border-top: 1px solid hsl(var(--border-divider));
}
.faq__heading { text-align: center; margin-bottom: var(--sp-48); }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid hsl(var(--border-divider)); }
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-20) 0;
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--text-primary));
  text-align: left;
  transition: color var(--duration) var(--ease);
}
.faq__trigger:hover { color: hsl(var(--text-secondary)); }
.faq__chevron {
  flex-shrink: 0;
  margin-left: var(--sp-16);
  color: hsl(var(--text-tertiary));
  transition: transform var(--duration-slow) var(--ease);
}
.faq__item[data-state="open"] .faq__chevron { transform: rotate(180deg); }
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease);
}
.faq__item[data-state="open"] .faq__body { grid-template-rows: 1fr; }
.faq__body > p {
  overflow: hidden;
  font-size: 15px;
  color: hsl(var(--text-secondary));
  line-height: 1.6;
  padding-bottom: 0;
  transition: padding var(--duration-slow) var(--ease);
}
.faq__item[data-state="open"] .faq__body > p { padding-bottom: var(--sp-20); }
.faq__trigger:focus-visible { outline: 2px solid hsl(var(--neutral-100)); outline-offset: 2px; border-radius: var(--r-4); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  padding: var(--sp-80) 0 var(--sp-48);
  text-align: center;
}
.final-cta__sub { max-width: 600px; margin: var(--sp-20) auto var(--sp-32); }
.final-cta__buttons { display: flex; justify-content: center; gap: var(--sp-16); flex-wrap: wrap; }

/* ============================================================
   FORM SECTION
   ============================================================ */
.form-section {
  padding: var(--sp-48) 0 var(--sp-80);
}
.form-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-64);
  align-items: start;
  padding: var(--sp-40);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-20);
}
.form-section__left .text-title-2 { margin-bottom: var(--sp-12); }
.form-section__left .text-body { margin-bottom: var(--sp-24); }
.form-section__proof { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.form-section__proof-item {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--text-secondary));
  padding: 4px 12px;
  background: hsl(var(--bg-secondary));
  border-radius: var(--r-full);
}
.lead-form { display: flex; flex-direction: column; gap: var(--sp-16); }
.lead-form__field { display: flex; flex-direction: column; gap: var(--sp-4); }
.lead-form__field label {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--text-secondary));
}
.lead-form__field input,
.lead-form__field select {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-8);
  font-family: inherit;
  font-size: 14px;
  color: hsl(var(--text-primary));
  background: hsl(var(--bg-primary));
  transition: border-color var(--duration) var(--ease);
  -webkit-appearance: none;
}
.lead-form__field input::placeholder { color: hsl(var(--text-tertiary)); }
.lead-form__field input:focus,
.lead-form__field select:focus {
  outline: none;
  border-color: hsl(var(--neutral-100));
}
.lead-form__field input.is-error { border-color: hsl(0 72% 51%); }
.lead-form__error {
  font-size: 12px;
  color: hsl(0 72% 51%);
  display: none;
}
.lead-form__error.is-visible { display: block; }
.lead-form__success { display: none; text-align: center; padding: var(--sp-40) 0; }
.lead-form__success.is-visible { display: block; }
.lead-form__success-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-16);
  border-radius: var(--r-full);
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
}
.lead-form__success .text-title-3 { margin-bottom: var(--sp-8); }
.lead-form__success .text-body { margin-bottom: var(--sp-20); }
@media (max-width: 840px) {
  .form-section__layout { grid-template-columns: 1fr; gap: var(--sp-32); padding: var(--sp-24); }
}

/* ============================================================
   INTEGRATIONS GRID (Clean static logo grid)
   ============================================================ */

/* --- LED Logo Wall --- */
.led-wall {
  display: grid;
  grid-template-columns: repeat(19, clamp(16px, 2.5vw, 36px));
  gap: clamp(3px, 0.55vw, 8px);
  justify-content: center;
  margin: 0 auto;
}

.led-wall__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(3px, 0.4vw, 8px);
  border: 1px solid transparent;
  padding: clamp(2px, 0.35vw, 6px);
  background: transparent;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease,
              border-color 0.4s ease, background 0.4s ease;
}

.led-wall__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.07;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
[data-theme="dark"] .led-wall__cell img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.07;
}

/* Lit state — full color, glow */
.led-wall__cell.is-lit {
  background: hsl(var(--bg-secondary));
  box-shadow: 0 0 10px 2px hsl(var(--text-primary) / 0.12),
              0 0 24px 6px hsl(var(--text-primary) / 0.05);
  transform: scale(1.12);
}
.led-wall__cell.is-lit img {
  filter: grayscale(0);
  opacity: 1;
}
[data-theme="dark"] .led-wall__cell.is-lit img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Revealed state — normal logo grid after animation */
.led-wall__cell.is-revealed {
  border-color: hsl(var(--border-divider));
}
.led-wall__cell.is-revealed img {
  filter: grayscale(1) brightness(0);
  opacity: 0.3;
}
[data-theme="dark"] .led-wall__cell.is-revealed img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.35;
}
.led-wall__cell.is-revealed:hover {
  transform: translateY(-2px) scale(1.08);
  border-color: hsl(var(--neutral-20));
  box-shadow: 0 4px 16px hsl(0 0% 0% / 8%);
  background: hsl(var(--bg-secondary));
}
.led-wall__cell.is-revealed:hover img {
  filter: grayscale(0);
  opacity: 1;
}
[data-theme="dark"] .led-wall__cell.is-revealed:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
[data-theme="dark"] .led-wall__cell.is-revealed:hover {
  border-color: hsl(var(--opacity-white-16));
  box-shadow: 0 4px 16px hsl(0 0% 0% / 24%);
}

/* Dim siblings on hover after reveal */
.led-wall.is-revealed:hover .led-wall__cell.is-revealed:not(:hover) img {
  opacity: 0.12;
}

/* Label & sub hidden during animation */
.integrations-grid.led-active .integrations-grid__label,
.integrations-grid.led-active .integrations-grid__sub {
  opacity: 0;
}
.integrations-grid__label,
.integrations-grid__sub {
  transition: opacity 0.6s var(--ease);
}

/* Reduced motion — skip animation, show revealed state */
@media (prefers-reduced-motion: reduce) {
  .led-wall__cell { border-color: hsl(var(--border-divider)); }
  .led-wall__cell img { opacity: 0.3; }
  [data-theme="dark"] .led-wall__cell img { opacity: 0.35; }
}

.integrations-grid {
  padding: var(--sp-64) 0 var(--sp-48);
}
.integrations-grid__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-32);
}
.integrations-grid__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-12);
  max-width: 720px;
  margin: 0 auto;
}
.ig-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 14px;
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-12);
  background: transparent;
  transition: transform 0.3s var(--ease),
              border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease),
              background 0.3s var(--ease);
  text-decoration: none;
}
.ig-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.3;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
[data-theme="dark"] .ig-logo img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.35;
}

/* Hover — pop color, lift, subtle glow */
.ig-logo:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: hsl(var(--neutral-20));
  box-shadow: 0 8px 24px hsl(0 0% 0% / 8%);
  background: hsl(var(--bg-secondary));
}
.ig-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
[data-theme="dark"] .ig-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
[data-theme="dark"] .ig-logo:hover {
  border-color: hsl(var(--opacity-white-16));
  box-shadow: 0 8px 24px hsl(0 0% 0% / 25%);
}

/* Dim siblings on hover */
.integrations-grid__logos:hover .ig-logo:not(:hover) {
  opacity: 0.5;
}
.integrations-grid__logos:hover .ig-logo:not(:hover) img {
  opacity: 0.15;
}

.integrations-grid__sub {
  text-align: center;
  font-size: 13px;
  color: hsl(var(--text-tertiary));
  margin-top: var(--sp-24);
}

@media (max-width: 640px) {
  .integrations-grid { padding: var(--sp-40) 0 var(--sp-32); }
  .ig-logo { width: 48px; height: 48px; padding: 12px; }
  .integrations-grid__logos { gap: var(--sp-8); }
}

/* ============================================================
   FOOTER (Mobbin v4 — Dark with rounded top corners)
   ============================================================ */
.footer-v4 {
  background: hsl(0 0% 8%);
  color: hsl(0 0% 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: var(--sp-32);
}
.footer-v4__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--sp-64) var(--sp-32) var(--sp-32);
}
.footer-v4__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-64);
  margin-bottom: var(--sp-64);
}
.footer-v4__brand {
  max-width: 320px;
}
.footer-v4__logo {
  margin-bottom: var(--sp-20);
}
.footer-v4__tagline {
  font-size: 15px;
  font-weight: 440;
  color: hsl(0 0% 68%);
  line-height: 1.5;
}
.footer-v4__cols {
  display: flex;
  gap: var(--sp-64);
}
.footer-v4__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.footer-v4__col h4 {
  font-size: 14px;
  font-weight: 650;
  color: hsl(0 0% 100%);
  margin-bottom: var(--sp-4);
}
.footer-v4__col a,
.footer-v4__col button {
  font-size: 14px;
  font-weight: 440;
  color: hsl(0 0% 68%);
  transition: color var(--duration) var(--ease);
  text-align: left;
}
.footer-v4__col a:hover,
.footer-v4__col button:hover { color: hsl(0 0% 100%); }
.footer-v4__lab-notes { font-size: 14px !important; }
.footer-v4__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-24);
  border-top: 1px solid hsl(0 0% 25%);
}
.footer-v4__bottom p {
  font-size: 13px;
  color: hsl(0 0% 44%);
}
.footer-v4__legal {
  display: flex;
  gap: var(--sp-24);
  align-items: center;
}
.footer-v4__legal a {
  font-size: 13px;
  color: hsl(0 0% 44%);
  transition: color var(--duration) var(--ease);
}
.footer-v4__legal a:hover { color: hsl(0 0% 100%); }
.footer-v4__build-id {
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  color: hsl(0 0% 30%);
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.footer-v4__build-id:hover { color: hsl(0 0% 68%); }

/* Dark mode: footer inverts to light */
[data-theme="dark"] .footer-v4 {
  background: hsl(0 0% 100%);
  color: hsl(0 0% 8%);
}
[data-theme="dark"] .footer-v4__tagline { color: hsl(0 0% 44%); }
[data-theme="dark"] .footer-v4__col h4 { color: hsl(0 0% 8%); }
[data-theme="dark"] .footer-v4__col a,
[data-theme="dark"] .footer-v4__col button { color: hsl(0 0% 44%); }
[data-theme="dark"] .footer-v4__col a:hover,
[data-theme="dark"] .footer-v4__col button:hover { color: hsl(0 0% 8%); }
[data-theme="dark"] .footer-v4__logo rect { fill: #141414; }
[data-theme="dark"] .footer-v4__logo text { fill: #fff; }
[data-theme="dark"] .footer-v4__bottom { border-color: hsl(0 0% 86%); }
[data-theme="dark"] .footer-v4__bottom p { color: hsl(0 0% 68%); }
[data-theme="dark"] .footer-v4__legal a { color: hsl(0 0% 68%); }
[data-theme="dark"] .footer-v4__legal a:hover { color: hsl(0 0% 8%); }
[data-theme="dark"] .footer-v4__build-id { color: hsl(0 0% 80%); }

@media (max-width: 840px) {
  .footer-v4__top { flex-direction: column; gap: var(--sp-40); }
  .footer-v4__cols { gap: var(--sp-40); }
  .footer-v4__bottom { flex-direction: column; gap: var(--sp-12); text-align: center; }
  .footer-v4__legal { justify-content: center; }
}
@media (max-width: 480px) {
  .footer-v4__inner { padding: var(--sp-40) var(--sp-24) var(--sp-24); }
}

/* ============================================================
   MODAL (Lab Notes)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease);
}
.modal.is-open { pointer-events: auto; opacity: 1; }
.modal__overlay {
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 40%);
}
.modal__panel {
  position: relative;
  background: hsl(var(--bg-primary));
  border-radius: var(--r-20);
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow-dropdown);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--duration-slow) var(--ease);
  overflow: hidden;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-24) var(--sp-24) var(--sp-16);
  border-bottom: 1px solid hsl(var(--border-divider));
}
.modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  color: hsl(var(--text-secondary));
  transition: all var(--duration) var(--ease);
}
.modal__close:hover { background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary)); }
.modal__body { padding: var(--sp-24); }
.modal__section { margin-bottom: var(--sp-20); }
.modal__section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-tertiary));
  margin-bottom: var(--sp-12);
}
.modal__section ul { display: flex; flex-direction: column; gap: var(--sp-8); }
.modal__section li {
  font-size: 14px;
  color: hsl(var(--text-secondary));
  padding-left: 20px;
  position: relative;
}
.modal__section li::before { content: '→'; position: absolute; left: 0; font-weight: 600; color: hsl(var(--text-primary)); }
.modal__foot {
  padding: var(--sp-16) var(--sp-24);
  border-top: 1px solid hsl(var(--border-divider));
  text-align: center;
}
.modal__build-id {
  font-family: 'SF Mono', monospace;
  font-size: 12px;
  color: hsl(var(--text-tertiary));
}

/* ============================================================
   V3 ENHANCEMENTS — Interactions & Eye Candy
   ============================================================ */

/* --- Hero Word Rotator --- */
.hero__rotator {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.05em;
}
.hero__rotator-word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  white-space: nowrap;
  background: linear-gradient(135deg, hsl(var(--text-primary)), hsl(var(--text-secondary)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* RGB Glitch — pseudo-element color channels */
.hero__rotator-word::before,
.hero__rotator-word::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  -webkit-text-fill-color: initial;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
[data-theme="light"] .hero__rotator-word::before,
[data-theme="light"] .hero__rotator-word::after {
  mix-blend-mode: multiply;
}
.hero__rotator-word::before {
  color: #ff0040;
}
.hero__rotator-word::after {
  color: #00e5ff;
}

/* Glitch keyframes */
@keyframes glitch-r {
  0%   { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  10%  { opacity: 0.8; transform: translate(-3px, 1px); clip-path: inset(15% 0 60% 0); }
  20%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  30%  { opacity: 0.6; transform: translate(-2px, -1px); clip-path: inset(65% 0 10% 0); }
  40%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  55%  { opacity: 0.7; transform: translate(-4px, 0); clip-path: inset(40% 0 35% 0); }
  65%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  78%  { opacity: 0.5; transform: translate(-2px, 1px); clip-path: inset(20% 0 55% 0); }
  85%  { opacity: 0; transform: translate(0, 0); }
  100% { opacity: 0; }
}
@keyframes glitch-c {
  0%   { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  12%  { opacity: 0.7; transform: translate(3px, -1px); clip-path: inset(70% 0 5% 0); }
  22%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  35%  { opacity: 0.8; transform: translate(2px, 1px); clip-path: inset(10% 0 70% 0); }
  45%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  58%  { opacity: 0.6; transform: translate(4px, 0); clip-path: inset(50% 0 25% 0); }
  68%  { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  80%  { opacity: 0.4; transform: translate(2px, -1px); clip-path: inset(30% 0 45% 0); }
  88%  { opacity: 0; transform: translate(0, 0); }
  100% { opacity: 0; }
}

/* Trigger glitch on active transition */
.hero__rotator-word.is-active::before {
  animation: glitch-r 0.6s steps(1) forwards;
}
.hero__rotator-word.is-active::after {
  animation: glitch-c 0.6s steps(1) forwards;
}

.hero__rotator-word.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.hero__rotator-word.is-exiting {
  opacity: 0;
  transform: translateY(-100%);
}

/* --- Magnetic Buttons --- */
[data-magnetic] {
  transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  will-change: transform;
}

/* --- Logo Strip Hover --- */
.logos-strip__track:hover {
  animation-play-state: paused;
}
.logos-strip__item {
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
  cursor: default;
}
.logos-strip__item:hover {
  transform: scale(1.2);
  color: hsl(var(--text-primary)) !important;
}

/* --- Showcase Cursor --- */
.showcase__screen {
  position: relative;
  overflow: hidden;
}
.showcase__cursor {
  position: absolute;
  top: 40px;
  left: 200px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.showcase__cursor.is-visible {
  opacity: 1;
}
[data-theme="dark"] .showcase__cursor {
  --cursor-fill: #fff;
  --cursor-stroke: #333;
}

/* --- Stats Count-Up --- */
.stats__num {
  display: inline-block;
  min-width: 1.5ch;
  font-variant-numeric: tabular-nums;
}

/* --- Before/After Animations --- */
.before-after__list--before li {
  position: relative;
  text-decoration: line-through transparent;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.6s var(--ease);
}
.before-after__list--before.is-animated li {
  text-decoration-color: hsl(var(--text-tertiary));
}
.before-after__list--before.is-animated li:nth-child(1) { transition-delay: 0.1s; }
.before-after__list--before.is-animated li:nth-child(2) { transition-delay: 0.2s; }
.before-after__list--before.is-animated li:nth-child(3) { transition-delay: 0.3s; }
.before-after__list--before.is-animated li:nth-child(4) { transition-delay: 0.4s; }

.before-after__list--after li::before {
  opacity: 0;
}
.before-after__list--after.is-animated li::before {
  animation: checkPop 0.4s var(--ease) both;
}
.before-after__list--after.is-animated li:nth-child(1)::before { animation-delay: 0.2s; }
.before-after__list--after.is-animated li:nth-child(2)::before { animation-delay: 0.35s; }
.before-after__list--after.is-animated li:nth-child(3)::before { animation-delay: 0.5s; }
.before-after__list--after.is-animated li:nth-child(4)::before { animation-delay: 0.65s; }
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Capabilities Sliding Tab Indicator --- */
.capabilities__tabs {
  position: relative;
}
.cap-tab-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100px;
  background: hsl(var(--bg-tertiary));
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-12);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.cap-tab {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border-color: transparent !important;
}
.cap-tab--active {
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="dark"] .cap-tab-indicator {
  background: hsl(var(--opacity-white-8));
  border-color: hsl(var(--neutral-80));
}
@media (max-width: 840px) {
  .cap-tab-indicator { display: none; }
}

/* --- Terminal Typing --- */
.cap-panel__example code .typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: hsl(var(--neutral-50));
  margin-left: 1px;
  animation: cursorBlink 0.7s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Use Case & Testimonial 3D Tilt --- */
.uc-card,
.test-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Process Scroll Timeline --- */
.process__right {
  position: relative;
}
.process__timeline {
  position: absolute;
  left: 43px;
  top: 44px;
  bottom: 44px;
  width: 2px;
  background: hsl(var(--border-divider));
  z-index: 0;
  border-radius: 1px;
}
.process__timeline-fill {
  width: 100%;
  height: 0%;
  background: hsl(var(--text-primary));
  border-radius: 1px;
  transition: height 0.05s linear;
}
.process__step {
  position: relative;
  z-index: 1;
}

/* --- Integration Floating --- */
.int-tile {
  animation: intFloat 4s ease-in-out infinite;
}
.int-tile:nth-child(1)  { animation-delay: 0s;    animation-duration: 3.5s; }
.int-tile:nth-child(2)  { animation-delay: 0.3s;  animation-duration: 4.2s; }
.int-tile:nth-child(3)  { animation-delay: 0.7s;  animation-duration: 3.8s; }
.int-tile:nth-child(4)  { animation-delay: 0.1s;  animation-duration: 4.5s; }
.int-tile:nth-child(5)  { animation-delay: 0.5s;  animation-duration: 3.3s; }
.int-tile:nth-child(6)  { animation-delay: 0.8s;  animation-duration: 4.1s; }
.int-tile:nth-child(7)  { animation-delay: 0.2s;  animation-duration: 3.6s; }
.int-tile:nth-child(8)  { animation-delay: 0.6s;  animation-duration: 4.4s; }
.int-tile:nth-child(9)  { animation-delay: 0.4s;  animation-duration: 3.9s; }
.int-tile:nth-child(10) { animation-delay: 0.9s;  animation-duration: 4.0s; }
@keyframes intFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.int-tile:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
}

/* --- Pricing Glow Pulse --- */
.pricing__card--featured {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(0 0% 0% / 0%); }
  50% { box-shadow: 0 0 30px 4px hsl(0 0% 0% / 8%); }
}
[data-theme="dark"] .pricing__card--featured {
  animation-name: glowPulseDark;
}
@keyframes glowPulseDark {
  0%, 100% { box-shadow: 0 0 0 0 hsl(0 0% 100% / 0%); }
  50% { box-shadow: 0 0 30px 4px hsl(0 0% 100% / 8%); }
}
.pricing__card--featured:hover {
  animation-play-state: paused;
  box-shadow: 0 0 40px 8px hsl(0 0% 0% / 10%);
}
[data-theme="dark"] .pricing__card--featured:hover {
  box-shadow: 0 0 40px 8px hsl(0 0% 100% / 10%);
}

/* --- FAQ Sliding Accent Bar --- */
.faq__item {
  position: relative;
}
.faq__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--sp-12);
  bottom: var(--sp-12);
  width: 3px;
  background: hsl(var(--text-primary));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item[data-state="open"]::before {
  transform: scaleY(1);
}
.faq__trigger {
  padding-left: var(--sp-16);
}
.faq__body > p {
  padding-left: var(--sp-16);
}

/* --- Final CTA Gradient Mesh --- */
.final-cta {
  position: relative;
  overflow: hidden;
}
.final-cta__mesh {
  position: absolute;
  inset: -50%;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, hsl(0 0% 75% / 25%), transparent),
    radial-gradient(ellipse 500px 500px at 80% 30%, hsl(0 0% 55% / 18%), transparent),
    radial-gradient(ellipse 400px 300px at 50% 80%, hsl(0 0% 65% / 20%), transparent);
  animation: meshDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
[data-theme="dark"] .final-cta__mesh {
  opacity: 0.25;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, hsl(0 0% 35% / 30%), transparent),
    radial-gradient(ellipse 500px 500px at 80% 30%, hsl(0 0% 25% / 22%), transparent),
    radial-gradient(ellipse 400px 300px at 50% 80%, hsl(0 0% 45% / 25%), transparent);
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { transform: translate(40px, -20px) rotate(3deg) scale(1.05); }
}
.final-cta__inner {
  position: relative;
  z-index: 1;
}

/* --- Confetti Canvas --- */
#confettiCanvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* --- Proof Outcomes Count Highlight --- */
.proof__outcomes li .proof-num {
  font-variant-numeric: tabular-nums;
}

/* --- V3 Reduced Motion Override --- */
@media (prefers-reduced-motion: reduce) {
  .hero__neural { display: none; }
  .hero__rotator-word { transition: opacity 0.01s; transform: none !important; }
  .hero__rotator-word.is-active { opacity: 1; }
  .hero__rotator-word.is-exiting { opacity: 0; }
  .hero__rotator-word::before,
  .hero__rotator-word::after { display: none; }
  [data-magnetic] { transition: none !important; }
  .showcase__cursor { display: none; }
  .before-after__list--before li { transition: none; text-decoration-color: hsl(var(--text-tertiary)); }
  .before-after__list--after li::before { animation: none; opacity: 1; }
  .int-tile { animation: none !important; }
  .pricing__card--featured { animation: none !important; }
  .final-cta__mesh { animation: none !important; }
  .cap-tab-indicator { transition: none; }
  .process__timeline-fill { transition: none; }
  .ig-logo { transition: none; }
}

/* ============================================================
   V5 — BuildLab Additions
   ============================================================ */

/* Hero Value Prop Badges */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
}
.hero__badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid hsl(var(--border-divider));
  color: hsl(var(--text-secondary));
  background: hsl(var(--bg-secondary));
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hero__badges { justify-content: center; }
}

/* 2-Column Pricing Grid */
.pricing__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}
@media (max-width: 840px) {
  .pricing__grid--two { grid-template-columns: 1fr; max-width: 400px; }
}

/* Textarea (Form) */
.lead-form__field textarea {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid hsl(var(--border-divider));
  border-radius: var(--r-8);
  font-family: inherit;
  font-size: 14px;
  color: hsl(var(--text-primary));
  background: hsl(var(--bg-primary));
  transition: border-color var(--duration) var(--ease);
  resize: vertical;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
}
.lead-form__field textarea::placeholder { color: hsl(var(--text-tertiary)); }
.lead-form__field textarea:focus {
  outline: none;
  border-color: hsl(var(--neutral-100));
}
[data-theme="dark"] .lead-form__field textarea {
  background: hsl(var(--neutral-95));
  border-color: hsl(var(--opacity-white-10));
  color: hsl(var(--neutral-0));
}
[data-theme="dark"] .lead-form__field textarea::placeholder {
  color: hsl(var(--neutral-60));
}
[data-theme="dark"] .lead-form__field textarea:focus {
  border-color: hsl(var(--neutral-0));
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: var(--sp-24);
  right: var(--sp-24);
  z-index: 900;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: hsl(var(--bg-primary) / 72%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border-divider));
  box-shadow: 0 4px 20px hsl(0 0% 0% / 8%);
  color: hsl(var(--text-secondary));
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover {
  background: hsl(var(--bg-primary));
  color: hsl(var(--text-primary));
  border-color: hsl(var(--neutral-20));
  box-shadow: 0 6px 24px hsl(0 0% 0% / 12%);
}
[data-theme="dark"] .scroll-top {
  background: hsl(0 0% 15% / 72%);
  border-color: hsl(0 0% 100% / 8%);
  box-shadow: 0 4px 20px hsl(0 0% 0% / 24%);
}
[data-theme="dark"] .scroll-top:hover {
  background: hsl(0 0% 18%);
  border-color: hsl(0 0% 100% / 16%);
  color: hsl(var(--neutral-0));
}

/* ============================================================
   TYPEFORM OVERLAY
   ============================================================ */

/* Overlay container */
.tf-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: hsl(var(--bg-primary));
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.tf-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Progress bar */
.tf-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: hsl(var(--border-divider));
  z-index: 2;
}
.tf-progress__bar {
  height: 100%;
  width: 0%;
  background: hsl(var(--text-primary));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Close button */
.tf-close {
  position: absolute;
  top: var(--sp-20);
  right: var(--sp-20);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: hsl(var(--text-secondary));
  transition: all var(--duration) var(--ease);
}
.tf-close:hover {
  background: hsl(var(--bg-secondary));
  color: hsl(var(--text-primary));
}

/* Steps container */
.tf-steps {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Individual step */
.tf-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.tf-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.tf-step.is-exiting {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
}

/* Step content */
.tf-step__content {
  width: 100%;
  max-width: 560px;
}

/* Step number */
.tf-step__num {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--text-tertiary));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-16);
}

/* Question heading */
.tf-step__question {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: hsl(var(--text-primary));
  margin-bottom: var(--sp-32);
}

/* Text input */
.tf-step__input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 440;
  color: hsl(var(--text-primary));
  background: transparent;
  border: none;
  border-bottom: 2px solid hsl(var(--border-divider));
  padding: var(--sp-12) 0;
  outline: none;
  transition: border-color 0.3s var(--ease);
}
.tf-step__input:focus {
  border-color: hsl(var(--text-primary));
}
.tf-step__input::placeholder {
  color: hsl(var(--text-tertiary));
}
.tf-step__input.is-error {
  border-color: hsl(0 72% 51%);
}

/* Textarea */
.tf-step__textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 440;
  color: hsl(var(--text-primary));
  background: transparent;
  border: none;
  border-bottom: 2px solid hsl(var(--border-divider));
  padding: var(--sp-12) 0;
  outline: none;
  resize: none;
  min-height: 100px;
  transition: border-color 0.3s var(--ease);
}
.tf-step__textarea:focus {
  border-color: hsl(var(--text-primary));
}
.tf-step__textarea::placeholder {
  color: hsl(var(--text-tertiary));
}

/* Pill buttons (team size) */
.tf-step__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-bottom: var(--sp-8);
}
.tf-step__pill {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: var(--sp-12) var(--sp-24);
  border: 2px solid hsl(var(--border-divider));
  border-radius: var(--r-full);
  color: hsl(var(--text-secondary));
  background: transparent;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.tf-step__pill:hover {
  border-color: hsl(var(--text-primary));
  color: hsl(var(--text-primary));
}
.tf-step__pill.is-selected {
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border-color: hsl(var(--neutral-100));
}
[data-theme="dark"] .tf-step__pill.is-selected {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
  border-color: hsl(var(--neutral-0));
}

/* Actions row */
.tf-step__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-32);
}

/* Continue button */
.tf-step__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--r-full);
  background: hsl(var(--neutral-100));
  color: hsl(var(--neutral-0));
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.tf-step__btn:hover {
  background: hsl(var(--neutral-90));
}
.tf-step__btn svg {
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}
.tf-step__btn:hover svg {
  transform: translateX(2px);
}
[data-theme="dark"] .tf-step__btn {
  background: hsl(var(--neutral-0));
  color: hsl(var(--neutral-100));
}
[data-theme="dark"] .tf-step__btn:hover {
  background: hsl(var(--neutral-5));
}

/* Back arrow */
.tf-step__back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: hsl(var(--text-secondary));
  border: 1px solid hsl(var(--border-divider));
  transition: all var(--duration) var(--ease);
}
.tf-step__back:hover {
  border-color: hsl(var(--text-primary));
  color: hsl(var(--text-primary));
}

/* Enter hint */
.tf-step__hint {
  font-size: 13px;
  color: hsl(var(--text-tertiary));
}
.tf-step__hint strong {
  font-weight: 600;
}

/* Validation error */
.tf-step__error {
  font-size: 13px;
  color: hsl(0 72% 51%);
  margin-top: var(--sp-8);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tf-step__error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Success screen */
.tf-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tf-success__icon {
  color: hsl(var(--text-primary));
  margin-bottom: var(--sp-24);
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.tf-success .tf-step__question {
  margin-bottom: var(--sp-12);
}
.tf-success__sub {
  font-size: 18px;
  font-weight: 440;
  color: hsl(var(--text-secondary));
  line-height: 1.5;
  max-width: 420px;
  margin-bottom: var(--sp-32);
}
.tf-success__close {
  margin-top: 0;
}

/* Staggered reveal for step children */
.tf-step.is-active .tf-step__num {
  animation: tfReveal 0.4s var(--ease) 0.05s both;
}
.tf-step.is-active .tf-step__question {
  animation: tfReveal 0.4s var(--ease) 0.1s both;
}
.tf-step.is-active .tf-step__input,
.tf-step.is-active .tf-step__textarea,
.tf-step.is-active .tf-step__pills {
  animation: tfReveal 0.4s var(--ease) 0.2s both;
}
.tf-step.is-active .tf-step__actions {
  animation: tfReveal 0.4s var(--ease) 0.3s both;
}
@keyframes tfReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Body scroll lock */
body.tf-open {
  overflow: hidden;
}

/* Responsive */
@media (max-width: 640px) {
  .tf-close {
    top: var(--sp-12);
    right: var(--sp-12);
  }
  .tf-step {
    padding: var(--sp-16);
    align-items: flex-start;
    padding-top: 80px;
  }
  .tf-step__pills {
    gap: var(--sp-8);
  }
  .tf-step__pill {
    padding: var(--sp-8) var(--sp-16);
    font-size: 14px;
  }
  .tf-step__actions {
    flex-wrap: wrap;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tf-overlay { transition: none; }
  .tf-step { transition: none; }
  .tf-step.is-active .tf-step__num,
  .tf-step.is-active .tf-step__question,
  .tf-step.is-active .tf-step__input,
  .tf-step.is-active .tf-step__textarea,
  .tf-step.is-active .tf-step__pills,
  .tf-step.is-active .tf-step__actions { animation: none; opacity: 1; transform: none; }
  .tf-success__icon { animation: none; }
  .tf-progress__bar { transition: none; }
}

/* ============================================================
   EASTER EGG — Hidden B logo + Dice Roll Form
   ============================================================ */

/* BuildLab B logo cell in LED wall */
.led-wall__cell--egg {
  cursor: pointer;
  position: relative;
}
.led-wall__cell--egg.is-revealed::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.led-wall__cell--egg.is-revealed:hover::after {
  border-color: hsl(var(--text-primary) / 0.2);
  box-shadow: 0 0 12px hsl(var(--text-primary) / 0.08);
}

/* "EASTER EGG UNLOCKED" overlay text */
.ee-unlock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ee-unlock.is-active {
  opacity: 1;
}
.integrations-grid .content-w {
  position: relative;
}
.ee-unlock__text {
  font-size: clamp(16px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--text-primary));
  background: hsl(var(--bg-primary) / 85%);
  padding: 12px 28px;
  border-radius: var(--r-12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: inset(0 100% 0 0);
}
.ee-unlock.is-active .ee-unlock__text {
  animation: eeTypeReveal 0.7s steps(19) forwards, eeGlow 1.2s ease-in-out 0.8s infinite alternate;
}
@keyframes eeTypeReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}
@keyframes eeGlow {
  from { text-shadow: 0 0 8px hsl(var(--text-primary) / 0.1); }
  to { text-shadow: 0 0 28px hsl(var(--text-primary) / 0.35); }
}
[data-theme="dark"] .ee-unlock__text {
  background: hsl(0 0% 8% / 85%);
}

/* Easter egg trophy animation */
.ee-trophy {
  color: hsl(var(--text-primary));
  margin-bottom: var(--sp-24);
  animation: eeTrophyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes eeTrophyBounce {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Dice step layout */
.ee-dice-step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ee-dice__sub {
  font-size: 18px;
  font-weight: 440;
  color: hsl(var(--text-secondary));
  line-height: 1.5;
  margin-top: -16px;
  margin-bottom: var(--sp-32);
}

/* Dice face — 3×3 dot grid */
.ee-dice {
  margin-bottom: var(--sp-24);
}
.ee-dice__face {
  width: 120px;
  height: 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 18px;
  background: hsl(var(--bg-primary));
  border: 2px solid hsl(var(--border-divider));
  border-radius: var(--r-16);
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.ee-dice__face.is-rolling {
  animation: diceShake 0.08s ease-in-out infinite;
}
@keyframes diceShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(6deg) scale(1.03); }
  75% { transform: rotate(-6deg) scale(1.03); }
}
.ee-dice__face.is-win {
  border-color: hsl(142 72% 45%);
  box-shadow: 0 0 32px hsl(142 72% 45% / 0.25), 0 0 64px hsl(142 72% 45% / 0.1);
  animation: diceWinPulse 1.5s ease-in-out infinite alternate;
}
@keyframes diceWinPulse {
  from { box-shadow: 0 0 24px hsl(142 72% 45% / 0.2); }
  to { box-shadow: 0 0 48px hsl(142 72% 45% / 0.35); }
}

/* Dice dots */
.ee-dice__dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsl(var(--text-primary));
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ee-dice__dot.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Roll button */
.ee-dice__roll {
  margin-top: var(--sp-8);
}

/* Dice result text */
.ee-dice__result {
  margin-top: var(--sp-24);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 400px;
}
.ee-dice__result.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ee-dice__result--win {
  color: hsl(142 72% 40%);
}
[data-theme="dark"] .ee-dice__result--win {
  color: hsl(142 72% 55%);
}
.ee-dice__result--lose {
  color: hsl(var(--text-secondary));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ee-trophy { animation: none; opacity: 1; transform: none; }
  .ee-dice__face.is-rolling { animation: none; }
  .ee-unlock.is-active .ee-unlock__text { animation: none; clip-path: none; }
}

/* ============================================================
   RAIN MODE (Easter egg — toggle dark mode 3× to activate)
   ============================================================ */

/* Rain canvas — full viewport overlay */
#rainCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#rainOverlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 50%, rgba(8, 12, 20, 0.4) 100%),
    linear-gradient(180deg, rgba(10, 15, 30, 0.15) 0%, rgba(10, 15, 30, 0.35) 100%);
}
#lightningFlash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: rgba(200, 210, 255, 0.25);
  transition: opacity 0.05s;
}

/* Active rain mode */
body.rain-mode #rainCanvas {
  opacity: 1;
}
body.rain-mode #rainOverlay {
  opacity: 1;
}
body.rain-mode #lightningFlash.is-flash {
  opacity: 1;
  transition: opacity 0.03s;
}

/* Moody aesthetic overrides */
body.rain-mode {
  transition: filter 1.5s ease;
}
body.rain-mode .hero__neural {
  opacity: 0.3;
}
body.rain-mode .nav-pill {
  backdrop-filter: blur(16px) saturate(0.7);
}
body.rain-mode .logos-strip {
  opacity: 0.6;
}
body.rain-mode .testimonials {
  opacity: 0.85;
}

/* Rain mode indicator — glow on toggle button + rain icon */
body.rain-mode .theme-toggle {
  animation: rain-pulse 2.5s ease-in-out infinite;
  color: hsl(210 60% 70%);
}
body.rain-mode .theme-toggle:hover {
  color: hsl(210 70% 80%);
}
@keyframes rain-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(100, 150, 255, 0); }
  50% { box-shadow: 0 0 14px 5px rgba(100, 150, 255, 0.35); }
}
body.rain-mode .theme-toggle__rain {
  animation: rain-icon-glow 2s ease-in-out infinite alternate;
}
@keyframes rain-icon-glow {
  from { filter: drop-shadow(0 0 2px rgba(120, 160, 255, 0.4)); }
  to { filter: drop-shadow(0 0 6px rgba(120, 160, 255, 0.8)); }
}