/* ============================================================
   STOODIO LANDING PAGE — STYLE SYSTEM
   Clean, minimal, Apple-inspired design
   ============================================================ */

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

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary: #999999;
  --color-accent: #1a1a1a;
  --color-accent-hover: #333333;
  --color-ghost-hover: rgba(0, 0, 0, 0.04);
  --color-icon-bg: #f3f3f3;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.5rem;
  --font-size-hero: clamp(2.5rem, 5.5vw, 4rem);
  --font-size-section: clamp(1.75rem, 3.5vw, 2.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --max-width: 1120px;
  --content-padding: clamp(1.25rem, 5vw, 2rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

img {
  max-width: 100%;
  display: block;
}

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


/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}

.btn-sm {
  font-size: var(--font-size-sm);
  padding: 8px 18px;
}

.btn-lg {
  font-size: var(--font-size-base);
  padding: 14px 32px;
  min-height: 48px;
}

.btn-primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

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

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

.btn-secondary:hover {
  background-color: var(--color-ghost-hover);
  border-color: var(--color-border-hover);
}

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

.btn-ghost:hover {
  background-color: var(--color-ghost-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}


/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 var(--content-padding);
  transition: all var(--transition-base);
}

.navbar.scrolled {
  background-color: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
}

.navbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: -0.03em;
}

.logo-icon {
  flex-shrink: 0;
  border-radius: 6px;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast);
}

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


/* === BADGE === */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}


/* === HERO === */
.hero {
  padding-top: calc(64px + var(--space-3xl));
  padding-bottom: var(--space-4xl);
  text-align: center;
  overflow-x: clip;
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.navbar-counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.03);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  pointer-events: none;
}

#shutter-count {
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.counter-label {
  opacity: 0.7;
}

/* Shutter Floating FAB */
.shutter-fab-container {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shutter-note {
  position: absolute;
  top: -48px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  font-family: 'Comic Sans MS', 'Inter', cursive;
  white-space: nowrap;
  width: 120px;
}

.hand-arrow {
  color: var(--color-text-tertiary);
  margin-top: 5px;
  transform: rotate(-10deg);
  opacity: 0.7;
}

.shutter-btn-wrap {
  width: 64px;
  height: 64px;
  padding: 5px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  border-radius: 50%;
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.1),
    0 4px 10px rgba(0,0,0,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}

.shutter-btn-wrap:hover {
  transform: translateY(-5px);
}

.shutter-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 35%, #ff4d4d, #c41414);
  box-shadow: 
    0 4px 8px rgba(180,0,0,0.3),
    inset 0 2px 2px rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s;
}

.shutter-btn:active {
  transform: translateY(3px) scale(0.96);
  background: radial-gradient(circle at 35% 35%, #c41414, #a01010);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Flash Effect */
.camera-flash::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  animation: flashAnim 0.15s ease-out;
}

@keyframes flashAnim {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .shutter-fab-container {
    bottom: 20px;
    right: 20px;
    transform: scale(0.9);
  }
  .navbar-counter {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    margin-right: 8px;
    gap: 4px;
  }
  .counter-label {
    display: none;
  }
  .navbar-counter::after {
    content: 'captured';
    opacity: 0.7;
    font-size: 10px;
  }
  .shutter-note {
    right: 0px;
    top: -45px;
  }
}

.hero-badge {
  margin-bottom: var(--space-xl);
}

.hero-title {
  font-size: var(--font-size-hero);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto var(--space-2xl);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-cta-hint {
  margin-top: 16px;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: 500;
  opacity: 0.8;
}

/* Hero Preview */
.hero-preview {
  max-width: 1100px;
  margin: var(--space-3xl) auto 0;
  padding: 0 var(--content-padding);
  position: relative;
}

/* Floating Pills */
.floating-pill {
  position: absolute;
  background: var(--color-white);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  z-index: 10;
  animation: pill-bob 4s ease-in-out infinite;
  pointer-events: none;
}

/* Pill positions — tucked inward so they don't expand the layout */
.fp-1 { top: 8%;   left: 3%;  animation-delay: 0s; }
.fp-2 { top: 14%;  right: 2%; animation-delay: 1s; }
.fp-3 { bottom: 20%; left: 2%;  animation-delay: 1.8s; }
.fp-4 { top: -16px; right: 12%; animation-delay: 0.5s; }
.fp-5 { bottom: 40%; right: 1%; animation-delay: 2.4s; }

@keyframes pill-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .hero-preview {
    width: 100%;
    padding: 0 var(--content-padding);
  }
  .floating-pill {
    display: none;
  }
}

.preview-window {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 40px 80px rgba(0, 0, 0, 0.06);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #f8f8f8, #f2f2f2);
  border-bottom: 1px solid var(--color-border);
}

.preview-dots {
  display: flex;
  gap: 6px;
  min-width: 60px;
}

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

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

.preview-url {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 16px;
  border-radius: var(--radius-full);
}

.preview-dots-spacer {
  min-width: 60px;
}

.preview-body {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f7f7f7;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}


/* === MOCK DASHBOARD (Skeletal Stoodio) === */
.preview-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  animation: fadeInMock 0.8s ease both;
  background: #fafafa;
  overflow: hidden;
}

@keyframes fadeInMock {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar */
.mock-sidebar {
  width: 170px;
  background: #111;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.mock-sidebar-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.mock-bone-logo { width: 22px; height: 22px; background: rgba(255,255,255,0.25); border-radius: 6px; }
.mock-bone-title { width: 70px; height: 10px; background: rgba(255,255,255,0.15); border-radius: 2px; }
.mock-bone-select { height: 26px; background: rgba(255,255,255,0.06); border-radius: 8px; margin-bottom: 16px; }
.mock-bone-label { width: 50px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-bottom: 12px; margin-left: 4px; }
.mock-nav-group { display: flex; flex-direction: column; gap: 6px; }
.mock-bone-nav { height: 22px; background: rgba(255,255,255,0.04); border-radius: 8px; }
.mock-bone-nav.active { background: #2d8c5a; opacity: 1; }
.mock-sidebar-spacer { flex: 1; min-height: 20px; }
.mock-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mock-bone-avatar { width: 28px; height: 28px; background: rgba(255,255,255,0.15); border-radius: 50%; }
.mock-bone-user { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mock-bone-line { height: 6px; background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Main Content */
.mock-main {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

/* Header */
.mock-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.mock-bone-heading { width: 140px; height: 16px; background: rgba(0,0,0,0.15); border-radius: 4px; margin-bottom: 8px; }
.mock-bone-subheading { width: 240px; height: 8px; background: rgba(0,0,0,0.05); border-radius: 3px; }
.mock-header-right { display: flex; gap: 8px; }
.mock-bone-btn { width: 50px; height: 24px; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; }
.mock-bone-btn.dark { width: 100px; background: #111; border: none; }

/* Grid Systems */
.mock-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mock-layout-row { display: grid; grid-template-columns: 2fr 1.2fr; gap: 12px; }

/* Cards & Bones */
.mock-stat-card, .mock-card-wide, .mock-card-narrow {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}
.mock-bone-circle-sm { width: 18px; height: 18px; background: rgba(0,0,0,0.06); border-radius: 6px; margin-bottom: 12px; }
.mock-bone-val { width: 50px; height: 14px; background: rgba(0,0,0,0.12); margin-bottom: 6px; border-radius: 3px; }
.mock-bone-label-sm { width: 80px; height: 6px; background: rgba(0,0,0,0.04); border-radius: 2px; }
.mock-bone-badge-sm { position: absolute; top: 16px; right: 16px; width: 45px; height: 14px; background: #e6f9ee; border-radius: 6px; }

.mock-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mock-bone-label-xs { width: 40px; height: 6px; background: rgba(0,0,0,0.08); border-radius: 2px; }
.mock-bone-badge-xs { width: 40px; height: 14px; background: rgba(0,0,0,0.06); border-radius: 6px; }
.mock-bone-badge-xs.green { background: #2d8c5a; }
.mock-bone-title-lg { width: 140px; height: 20px; background: rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 4px; }
.mock-bone-divider { height: 1px; background: rgba(0,0,0,0.04); margin: 12px 0; }
.mock-bone-details-grid { display: flex; gap: 24px; margin: 12px 0; }
.mock-bone-detail-item { flex: 1; height: 32px; background: rgba(0,0,0,0.02); border-radius: 6px; }
.mock-bone-line-sm { width: 120px; height: 8px; background: rgba(0,0,0,0.04); border-radius: 3px; }
.mock-bone-empty-state { height: 60px; background: rgba(0,0,0,0.015); border-radius: 8px; margin-top: 14px; }
.mock-bone-list { display: flex; flex-direction: column; gap: 10px; }
.mock-bone-list-item { height: 28px; background: rgba(0,0,0,0.025); border-radius: 6px; }
.mock-bone-gear-item { height: 24px; background: rgba(0,0,0,0.02); border-radius: 6px; margin-bottom: 6px; position: relative; }
.mock-bone-gear-item::after { content: ''; position: absolute; right: 10px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.1); }
.mock-bone-gear-item.active { background: #e6f9ee; }
.mock-bone-gear-item.active::after { background: #2d8c5a; }


/* === FEATURES === */
.features {
  padding: var(--space-5xl) var(--content-padding);
}

.features-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.section-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: var(--font-size-section);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-3xl);
  line-height: 1.5;
}

/* Feature Grid — 4 columns on desktop */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Feature Card — square-ish, centered content */
.feature-card {
  position: relative;
  padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: 
    transform var(--transition-spring),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  will-change: transform;
  justify-content: center;
}

/* === PROBLEM SECTION === */
.problem {
  padding: var(--space-4xl) var(--content-padding);
  text-align: center;
}

.problem-inner {
  max-width: 600px;
  margin: 0 auto;
}

.problem-text {
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* === WHO IT'S FOR === */
.audience {
  padding-bottom: var(--space-4xl);
  text-align: center;
}

.audience-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
}

.audience-tag {
  padding: 8px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
}

.audience-tag:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

/* === HOW IT WORKS (Journey) === */
.how-it-works {
  padding: var(--space-5xl) var(--content-padding);
  background: var(--color-bg);
  overflow: hidden;
}

.how-it-works-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
  z-index: 2;
}

.how-it-works-path {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  z-index: 1;
  display: block;
}

.how-it-works-path::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-text-tertiary), transparent);
  background-size: 200% 100%;
  animation: flowLine 3s linear infinite;
}

@keyframes flowLine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.step-card {
  background: var(--color-white);
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  text-align: center;
  position: relative;
  transition: all var(--transition-spring);
  overflow: hidden;
}

.step-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-text-primary);
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.06),
    0 1px 2px rgba(0,0,0,0.02);
}

.step-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 1px;
  background: var(--color-text-primary);
  transition: width var(--transition-base);
}

.step-card:hover .step-glow {
  width: 80%;
}

.step-num-bg {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 100px;
  font-weight: 800;
  color: rgba(0,0,0,0.03);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.step-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
  padding: 4px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-full);
}

.step-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.step-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .how-it-works-path {
    display: none;
  }
  .step-num-bg {
    font-size: 80px;
  }
}

/* === PRICING PREVIEW === */
.pricing-preview {
  padding: var(--space-5xl) var(--content-padding);
  text-align: center;
}

.pricing-preview-inner {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--space-3xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.pricing-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.pricing-desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

/* === SOCIAL PROOF === */
.social-proof {
  padding: var(--space-xl) var(--content-padding);
  text-align: center;
}

.social-proof-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.feature-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.03),
    0 8px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.feature-card:active {
  transform: translateY(-1px);
}

/* Icon wrapper — circular with subtle bg */
.feature-icon-wrap {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-icon-bg);
  color: var(--color-text-primary);
  margin-bottom: 4px;
  transition: background var(--transition-base), transform var(--transition-spring);
  flex-shrink: 0;
}

/* ====== INDIVIDUAL ICON ANIMATIONS ====== */

/* 1. Checkmark — draws itself in a loop */
.anim-circle {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw-circle 2.5s ease-in-out infinite;
}
.anim-tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw-tick 2.5s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes draw-circle { 0%,100%{stroke-dashoffset:60} 40%,60%{stroke-dashoffset:0} }
@keyframes draw-tick { 0%,100%{stroke-dashoffset:20} 30%,70%{stroke-dashoffset:0} }

/* 2. People — heads pulse */
.anim-head {
  transform-origin: 9px 7px;
  animation: head-pulse 2s ease-in-out infinite;
}
.anim-head2 {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: draw-head2 2.5s ease-in-out infinite;
  animation-delay: 0.3s;
}
@keyframes head-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
@keyframes draw-head2 { 0%,100%{stroke-dashoffset:14} 40%,60%{stroke-dashoffset:0} }

/* 3. Calendar — line sweeps across */
.anim-cal-line {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: cal-sweep 2s ease-in-out infinite;
}
@keyframes cal-sweep { 0%,100%{stroke-dashoffset:18} 40%,60%{stroke-dashoffset:0} }

/* 4. Dollar — S-curve traces itself */
.anim-dollar-s {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: dollar-trace 3s ease-in-out infinite;
}
.anim-dollar-line {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: dollar-line-draw 3s ease-in-out infinite;
  animation-delay: 0.2s;
}
@keyframes dollar-trace { 0%,100%{stroke-dashoffset:45} 35%,65%{stroke-dashoffset:0} }
@keyframes dollar-line-draw { 0%,100%{stroke-dashoffset:22} 30%,70%{stroke-dashoffset:0} }

/* 5. Layers — fan in and out */
.anim-layer2 {
  animation: layer-shift-2 2.5s ease-in-out infinite;
}
.anim-layer3 {
  animation: layer-shift-3 2.5s ease-in-out infinite;
}
@keyframes layer-shift-2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }
@keyframes layer-shift-3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* 6. Camera — lens pulses like a shutter */
.anim-lens {
  transform-origin: 12px 13px;
  animation: shutter-pulse 2s ease-in-out infinite;
}
@keyframes shutter-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(0.5);opacity:0.4} }

/* 7. Heartbeat — traces like a hospital monitor */
.anim-pulse-line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: heartbeat-trace 2s linear infinite;
}
@keyframes heartbeat-trace { 0%{stroke-dashoffset:60} 100%{stroke-dashoffset:-60} }

/* 8. Phone — vibrates like a notification */
.icon-phone {
  animation: phone-vibrate 3s ease-in-out infinite;
}
@keyframes phone-vibrate {
  0%,20%,40%,100%{transform:rotate(0deg)}
  5%{transform:rotate(3deg)}
  10%{transform:rotate(-3deg)}
  15%{transform:rotate(3deg)}
  25%{transform:rotate(-2deg)}
  30%{transform:rotate(2deg)}
  35%{transform:rotate(-1deg)}
}

.feature-card:hover .feature-icon-wrap {
  background: var(--color-black);
  color: var(--color-white);
  transform: scale(1.05);
}

.feature-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.feature-desc {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  max-width: 180px;
}


/* === CTA === */
.cta {
  padding: var(--space-5xl) var(--content-padding);
}

.cta-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-5xl) var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.cta-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.03), transparent 50%);
  pointer-events: none;
}

.cta-title {
  font-size: var(--font-size-section);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  position: relative;
}

.cta-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-2xl);
  position: relative;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

.cta-actions .btn-primary {
  background: var(--color-white);
  color: var(--color-black);
}

.cta-actions .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.cta-actions .btn-ghost {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

.cta-actions .btn-ghost:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}


/* === FOOTER === */
.footer {
  padding: var(--space-2xl) var(--content-padding);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-text-primary);
}


/* === ANIMATIONS === */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays applied via CSS custom property set by JS */
/* === INTERACTIVE HOTSPOTS === */
.hero-preview { position: relative; }

.hotspot {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border-radius: 50%;
  border: 4px solid var(--color-black);
  z-index: 10;
  cursor: help;
  transition: transform 0.3s var(--transition-spring);
  box-shadow: 0 0 0 rgba(0,0,0,0.4);
  animation: hotspotPulse 2s infinite;
}

.hotspot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--color-black);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.hotspot:hover { transform: scale(1.2); animation-play-state: paused; }
.hotspot:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@keyframes hotspotPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.hotspot-calendar { top: 28%; left: 35%; }
.hotspot-finance { bottom: 25%; right: 25%; }
.hotspot-workflow { top: 45%; left: 10%; }


/* === CHAOS VS ZEN SECTION === */
.zen-mode {
  padding: var(--space-5xl) var(--content-padding);
  background: #fdfdfd;
  overflow: hidden;
}

.zen-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.zen-header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.toggle-btn {
  width: 60px;
  height: 32px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.4s ease;
}

.toggle-btn.active { background: var(--color-black); }

.toggle-circle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-btn.active .toggle-circle { transform: translateX(28px); }

.toggle-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  transition: color 0.3s ease;
}

.toggle-btn.active + .toggle-label { color: var(--color-text-primary); }
.toggle-btn:not(.active) ~ .toggle-label:first-child { color: var(--color-text-primary); }

.zen-stage {
  height: 500px;
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
}

/* Chaos View */
.view-chaos {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
}

.view-chaos.active { opacity: 1; visibility: visible; }

.chaos-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: drift 6s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-15px) rotate(2deg); }
}

.chaos-icon {
  width: 50px;
  height: 50px;
  background: var(--color-white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
}

.chaos-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-border);
  padding: 2px 8px;
  border-radius: 4px;
}

.tag-urgent { background: #fee2e2; color: #ef4444; }

/* Zen View */
.view-zen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  visibility: hidden;
  transition: all 0.6s var(--transition-spring);
}

.view-zen.active { opacity: 1; visibility: visible; transform: scale(1); }

.zen-window {
  width: 480px;
  padding: var(--space-2xl);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  text-align: center;
  position: relative;
}

.zen-circle-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
  z-index: -1;
}

.zen-mock-ui {
  height: 160px;
  display: flex;
  gap: 12px;
  margin-bottom: var(--space-lg);
}

.zen-ui-sidebar { width: 40px; background: #f5f5f5; border-radius: 6px; }
.zen-ui-content { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.zen-ui-line { height: 12px; background: #eee; border-radius: 4px; width: 80%; }
.zen-ui-line.short { width: 50%; }
.zen-ui-grid { display: flex; gap: 8px; flex: 1; }
.zen-ui-grid div { flex: 1; background: #fafafa; border: 1px solid #eee; border-radius: 6px; }

.zen-message { font-weight: 600; color: var(--color-text-primary); }


/* === TIME-BACK CALCULATOR === */
.time-saved { padding: var(--space-5xl) var(--content-padding); text-align: center; }

.calculator-card {
  max-width: 600px;
  margin: var(--space-3xl) auto 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-3xl);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.slider-group { margin-bottom: var(--space-3xl); }
.slider-group label { display: block; font-weight: 500; margin-bottom: var(--space-lg); color: var(--color-text-secondary); }

.slider-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: var(--color-black);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: scale 0.2s ease;
}

input[type=range]::-webkit-slider-thumb:hover { scale: 1.1; }

.slider-value { font-size: 20px; font-weight: 700; }

.result-group {
  padding-top: var(--space-2xl);
  border-top: 1px dashed var(--color-border);
}

.result-number { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; margin: 8px 0; }
.result-label, .result-sub { color: var(--color-text-tertiary); font-weight: 500; }


/* === FOCUS EFFECTS === */
.lens-blur {
  filter: blur(8px);
  opacity: 0.5;
  transition: all 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.lens-focus {
  filter: blur(0);
  opacity: 1;
}

/* Feature 1: Booking Checkmark Loop */
.anim-check {
  animation: drawCheckLoop 3s ease-in-out infinite;
  opacity: 1 !important;
}
@keyframes drawCheckLoop {
  0%, 10% { stroke-dashoffset: 12; opacity: 0; }
  30%, 70% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Feature 2: Client Sway Loop */
.anim-person-2 {
  animation: nudgePersonLoop 4s ease-in-out infinite;
}
@keyframes nudgePersonLoop {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2.5px); }
}

/* Feature 3: Calendar Pulse Loop */
.anim-calendar-today {
  animation: pulseToday 2.5s infinite ease-in-out;
}
@keyframes pulseToday {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* Feature 4: Finance Growth Loop */
.anim-finance-line {
  animation: growLineLoop 3s ease-in-out infinite;
  transform-origin: bottom;
}
@keyframes growLineLoop {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Feature 5: Team Layer Stack Loop */
.anim-layer-1 { animation: layerFloat1 5s ease-in-out infinite; }
.anim-layer-2 { animation: layerFloat2 5s ease-in-out infinite; }
.anim-layer-3 { animation: layerFloat3 5s ease-in-out infinite; }

@keyframes layerFloat1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes layerFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0px); } }
@keyframes layerFloat3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Feature 6: Gear Lens Focus Loop */
.anim-lens {
  animation: focusLens 2s ease infinite alternate;
  transform-origin: center;
}
@keyframes focusLens {
  from { transform: scale(0.85); stroke-width: 1.2; opacity: 0.7; }
  to { transform: scale(1.1); stroke-width: 2.2; opacity: 1; }
}

/* Feature 7: Workflow Signal Loop */
.anim-workflow-path {
  animation: workflowFlow 2s linear infinite;
  stroke-dasharray: 12, 48;
}
@keyframes workflowFlow {
  from { stroke-dashoffset: 60; }
  to { stroke-dashoffset: 0; }
}

/* Feature 8: Invoice Line Slide Loop */
.anim-invoice-line-1 { animation: invoiceSlideLoop 4s ease-in-out infinite; }
.anim-invoice-line-2 { animation: invoiceSlideLoop 4s ease-in-out infinite 0.2s; }

@keyframes invoiceSlideLoop {
  0%, 10%, 90%, 100% { transform: translateX(-4px); opacity: 0; }
  30%, 70% { transform: translateX(0); opacity: 1; }
}

/* Hover Enhancement: Speed up animations slightly on hover */
.feature-card:hover .feature-icon-wrap svg * {
  transition: all 0.3s ease;
}
.feature-card:hover .anim-check { animation-duration: 1.5s; }
.feature-card:hover .anim-lens { animation-duration: 0.8s; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet landscape (≤1024px) --- */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .feature-card {
    padding: var(--space-xl) var(--space-md);
  }
}

/* --- Tablet portrait (≤900px) --- */
@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .feature-card {
    aspect-ratio: auto;
    padding: var(--space-xl) var(--space-lg);
  }
}

/* --- Large phone / small tablet (≤768px) --- */
@media (max-width: 768px) {
  :root {
    --space-5xl: 5rem;
    --space-4xl: 3.5rem;
  }

  .navbar-inner {
    height: 56px;
  }

  .hero {
    padding-top: calc(56px + var(--space-4xl));
    padding-bottom: var(--space-2xl);
  }

  .hero-preview {
    margin-top: var(--space-2xl);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .feature-card {
    aspect-ratio: 1 / 1;
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
  }

  .feature-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
  }

  .feature-icon-wrap svg {
    width: 24px;
    height: 24px;
  }

  .cta-inner {
    padding: var(--space-4xl) var(--space-xl);
    border-radius: var(--radius-xl);
  }

  .preview-window {
    border-radius: var(--radius-lg);
  }

/* Ensure mockup looks the same on mobile (doesn't reflow) */
@media (max-width: 768px) {
  .mock-stats-grid { 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 8px !important;
  }
  .mock-layout-row { 
    grid-template-columns: 2fr 1.2fr !important;
    gap: 8px !important;
  }
  .mock-header-right {
    display: none; /* Hide buttons on header to save space on mobile mockup */
  }
  .mock-bone-subheading {
    width: 120px !important;
  }
}

  .preview-toolbar {
    padding: 10px 12px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }

  .preview-url {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ============================================================
   INTERACTIVE SECTIONS (Desktop & Global)
   ============================================================ */

/* Chaos & Zen Refinement */
.chaos-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.chaos-logo-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.gcash-bg { background: #007dfe; }

.chaos-item { transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chaos-item.inhaled { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0) !important; opacity: 0 !important; }

/* Zen UI Mockup Details */
.zen-ui-sidebar { width: 40px; padding: 12px 0; border-right: 1px solid #eee; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sidebar-logo-dot { width: 16px; height: 16px; background: #000; border-radius: 4px; margin-bottom: 20px; }
/* App Showcase (Horizontal Scroll) */
.app-showcase { padding: 120px var(--content-padding); background: #fafafa; overflow: hidden; }
.showcase-inner { max-width: 1400px; margin: 0 auto; text-align: center; }
.showcase-container { position: relative; margin-top: 60px; }

.showcase-track { 
  display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; 
  padding: 20px calc(50% - 325px) 60px; scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.showcase-track::-webkit-scrollbar { display: none; }

.showcase-card { 
  flex: 0 0 650px; scroll-snap-align: center; background: #fff; 
  border-radius: 20px; border: 1.5px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.06); overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.showcase-card:hover { transform: translateY(-8px); }

.card-image-wrap { width: 100%; aspect-ratio: 16/10; position: relative; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.window-header-mini { display: flex; gap: 6px; padding: 12px 16px; background: #fbfbfb; border-bottom: 1px solid #f0f0f0; }
.dot-mini { width: 8px; height: 8px; border-radius: 50%; opacity: 0.8; }
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.showcase-img { width: 100%; height: 100%; object-fit: cover; }

.showcase-footer { 
  display: flex; flex-direction: column; align-items: center; gap: 40px; 
  margin-top: 40px; padding: 0 20px;
}

.showcase-caption { 
  text-align: center; max-width: 600px; 
  animation: fadeIn 0.4s ease forwards;
}
.showcase-caption h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: var(--color-black); }
.showcase-caption p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.6; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.showcase-nav { display: flex; justify-content: center; gap: 24px; }
.showcase-btn { 
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--color-border);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; color: var(--color-black);
}
.showcase-btn:hover { background: var(--color-black); border-color: var(--color-black); color: #fff; transform: scale(1.1); }

@media (max-width: 992px) {
  .showcase-card { flex: 0 0 90%; }
}

/* CTA Section - The Obsidian Card */
.cta { 
  padding: 160px var(--content-padding); 
  background-color: #ffffff; 
  position: relative;
  overflow: visible;
}

.cta-inner { 
  max-width: 1000px; 
  margin: 0 auto; 
  text-align: center; 
  position: relative;
  background: #000 !important;
  padding: 100px 40px;
  border-radius: 48px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.1);
  z-index: 2;
}


.cta-title { 
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1.1; 
  margin-bottom: 24px; 
  color: #fff !important; 
  letter-spacing: -0.05em; 
  font-weight: 900;
}

.cta-subtitle { 
  font-size: 19px; 
  color: rgba(255,255,255,0.6) !important; 
  margin-bottom: 48px; 
  max-width: 500px; 
  margin-left: auto; 
  margin-right: auto;
  line-height: 1.5;
}

/* Button overrides for black card */
.cta .btn-primary { background: #fff; color: #000; border-color: #fff; }
.cta .btn-primary:hover { background: #eee; transform: translateY(-3px); }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.2); }
.cta .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

@media (max-width: 1024px) {
  .success-pill { font-size: 12px; padding: 10px 18px; }
  .sp-1, .sp-2, .sp-3, .sp-4, .sp-5, .sp-6 { display: none; } /* Better to hide on tablet too if space is tight */
}

@media (max-width: 768px) {
  .cta { padding: 100px var(--content-padding); }
  .cta-inner { padding: 60px 24px; border-radius: 32px; }
  .cta-title { font-size: 36px; }
}


/* Client Portal */
.client-portal { padding: var(--space-5xl) var(--content-padding); background: #fff; }
.portal-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 45% 55%; align-items: center; gap: var(--space-4xl); }
.theme-dots { display: flex; gap: 12px; margin: 16px 0; }
.theme-dot { width: 36px; height: 36px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; box-shadow: 0 0 0 1px #eee; transition: transform 0.2s ease; }
.theme-dot.active { box-shadow: 0 0 0 2px #000; transform: scale(1.1); }
.dot-black { background: #111; }
.dot-cream { background: #E5DCC5; }
.dot-blue { background: #3B82F6; }
#current-theme-name { font-size: 12px; font-weight: 500; color: #999; }
.phone-frame { width: 280px; height: 560px; background: #111; border-radius: 40px; padding: 10px; margin: 0 auto; box-shadow: 0 40px 100px rgba(0,0,0,0.1); }
.phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; }
.portal-branding { padding: 40px 20px 20px; text-align: center; }
.portal-logo-mock { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 12px; transition: background 0.4s ease; }
.portal-branding h5 { font-size: 16px; font-weight: 700; }
.portal-image-placeholder { flex: 1; background: #f7f7f9; margin: 0 16px; border-radius: 16px; }
.portal-content-mock { padding: 24px 20px 40px; }
.portal-text-line { height: 8px; background: #eee; border-radius: 4px; margin-bottom: 10px; width: 100%; }
.portal-text-line.short { width: 50%; }
.portal-btn-mock { width: 100%; padding: 14px; border: none; border-radius: 12px; color: #fff; font-size: 12px; font-weight: 700; margin-top: 20px; transition: background 0.4s ease; }


/* Heartbeat Heatmap */
.heartbeat { padding: var(--space-5xl) var(--content-padding); text-align: center; background: #fff; }
.heartbeat-inner { max-width: 1000px; margin: 0 auto; }
.heatmap-container { margin-top: var(--space-3xl); background: #fafafa; padding: 40px; border-radius: 24px; border: 1px solid #eee; position: relative; overflow-x: auto; }
.heatmap-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 10px; color: #bbb; padding: 0 4px; min-width: 600px; }
.heatmap-grid { display: grid; grid-template-columns: repeat(52, 1fr); grid-template-rows: repeat(7, 1fr); gap: 4px; min-width: 600px; }
.heatmap-day { width: 100%; aspect-ratio: 1/1; background: #eee; border-radius: 2px; cursor: pointer; transition: transform 0.2s ease; }
.heatmap-day:hover { transform: scale(1.5); z-index: 10; border: 1px solid #000; }
.l-0 { background: #eee; }
.l-1 { background: #d9d9d9; }
.l-2 { background: #a6a6a6; }
.l-3 { background: #666666; }
.l-4 { background: #000000; }
.heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; font-size: 10px; color: #999; }
.legend-scale { display: flex; gap: 4px; }
.legend-scale span { width: 12px; height: 12px; border-radius: 2px; }
.heatmap-tooltip { background: #000; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; margin-top: 20px; transition: opacity 0.3s ease; display: inline-block; }

/* Profit Splitter */
.profit-splitter { padding: var(--space-5xl) var(--content-padding); }
.profit-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.splitter-card { max-width: 800px; margin: var(--space-3xl) auto 0; background: #fff; border: 1px solid #eee; border-radius: 32px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.03); }
.splitter-inputs { padding: 40px; text-align: left; background: #fcfcfc; border-right: 1px solid #eee; }
.input-group label { display: block; font-size: 12px; font-weight: 700; color: #111; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.price-input { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ddd; padding: 12px 16px; border-radius: 12px; font-size: 18px; font-weight: 700; }
.price-input input { border: none; width: 100%; font-weight: 700; font-size: 18px; outline: none; background: transparent; }
.toggle-list { margin-top: 32px; }
.toggle-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 13px; font-weight: 500; color: #444; }
.toggle-item:last-child { border: none; }
.profit-toggle { width: 44px; height: 24px; background: #eee; border-radius: 20px; border: none; position: relative; cursor: pointer; transition: background 0.3s ease; }
.profit-toggle::after { content: ''; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.profit-toggle.active { background: #000; }
.profit-toggle.active::after { transform: translateX(20px); }
.splitter-result { padding: 40px; display: flex; align-items: center; justify-content: center; background: #fff; }
.result-box { text-align: center; }
.result-label { font-size: 12px; font-weight: 800; color: #999; text-transform: uppercase; letter-spacing: 0.1em; }
.result-amount { font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 900; letter-spacing: -0.05em; margin: 12px 0; color: #111; }
.result-desc { font-size: 14px; font-weight: 600; color: #666; background: #f0f0f0; padding: 4px 12px; border-radius: 50px; display: inline-block; }

/* Navbar Metrics */
.navbar-metrics { 
  display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.12em; color: #999;
}
.top-stat { color: #999; display: flex; align-items: center; gap: 6px; }

.live-dot { 
  width: 5px; height: 5px; background: #2ecc71; border-radius: 50%;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
  animation: pulse-dot 2s infinite ease-in-out;
}

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

@media (max-width: 768px) {
  .navbar-metrics { display: none; }
}

/* PWA Icon Animation */
.anim-pwa-signal { stroke-dasharray: 4; stroke-dashoffset: 8; animation: pwa-ping 2s infinite ease-in-out; }
@keyframes pwa-ping { 0% { opacity: 0.3; } 50% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0.3; } }
.feature-card:hover .anim-pwa-frame { transform: scale(1.05); transition: transform 0.3s ease; }

/* Team Icon Animation */
.anim-layer-1 { animation: float 3s infinite ease-in-out; }
.anim-layer-2 { animation: float 3s infinite ease-in-out 0.5s; opacity: 0.6; }
.anim-layer-3 { animation: float 3s infinite ease-in-out 1s; opacity: 0.3; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }



/* Built for Scale - REMOVED */

/* The Free Forever Parallax */
.free-parallax { 
  padding: 200px var(--content-padding); 
  background: #fff; 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden;
}

.parallax-container { 
  position: relative; 
  height: 300px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%;
}

.parallax-bg-text {
  font-size: clamp(100px, 20vw, 300px);
  font-weight: 900;
  color: #f0f0f0;
  position: absolute;
  z-index: 1;
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.parallax-fg-text {
  font-size: clamp(60px, 12vw, 180px);
  font-weight: 900;
  color: #000;
  position: relative;
  z-index: 2;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 10px 30px rgba(255,255,255,0.8);
}

.parallax-subtext {
  margin-top: 40px;
  text-align: center;
  max-width: 500px;
  z-index: 3;
}

.parallax-subtext p {
  font-size: 14px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (max-width: 768px) {
  .free-parallax { padding: 120px var(--content-padding); }
  .parallax-container { height: 200px; }
  .how-it-works-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .problem-text {
    font-size: var(--font-size-lg);
  }
}

/* Status Indicators */
.live-dot { 
  width: 5px; height: 5px; background: #2ecc71; border-radius: 50%;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
  animation: pulse-dot 2s infinite ease-in-out;
}

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


/* FAQ Minimalist Overhaul */
.faq { padding: 140px var(--content-padding); background: #fff; }
.faq-inner { max-width: 650px; margin: 0 auto; }
.faq-list { margin-top: 80px; display: flex; flex-direction: column; gap: 16px; }

.faq-item { 
  background: #fbfbfb; border-radius: 20px; overflow: hidden; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item:hover { background: #f5f5f5; }
.faq-item.active { background: #000; color: #fff; }

.faq-trigger { 
  width: 100%; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; 
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq-trigger span { font-size: 18px; font-weight: 800; color: inherit; letter-spacing: -0.02em; }
.faq-icon { position: relative; width: 16px; height: 16px; opacity: 0.4; }
.faq-icon::before, .faq-icon::after { 
  content: ''; position: absolute; background: currentColor; transition: transform 0.4s ease;
}
.faq-icon::before { width: 100%; height: 2px; top: 7px; left: 0; }
.faq-icon::after { width: 2px; height: 100%; left: 7px; top: 0; }
.faq-item.active .faq-icon { opacity: 1; }
.faq-item.active .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item.active .faq-icon::before { transform: rotate(180deg); }

.faq-content { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.active .faq-content { max-height: 400px; }
.faq-content-inner { padding: 0 32px 32px 32px; font-size: 15px; line-height: 1.6; color: inherit; opacity: 0.8; }

.faq-footer { text-align: center; margin-top: 60px; font-size: 13px; color: #999; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.faq-footer a { color: var(--color-black); text-decoration: none; border-bottom: 2px solid #ddd; padding-bottom: 2px; }

@media (max-width: 768px) {
  .heartbeat-container { padding: 20px; border-radius: 20px; }
  .heatmap-grid { grid-template-columns: repeat(26, 1fr); gap: 2px; }
  .faq-trigger { padding: 20px 24px; }
  .faq-trigger span { font-size: 16px; }
}

/* === PRICING PREVIEW === */
.pricing-preview {
  padding: var(--space-5xl) var(--content-padding);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.pricing-preview-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--space-3xl);
  text-align: left;
}

.pricing-card {
  padding: var(--space-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.pricing-card.highlighted {
  border-color: var(--color-black);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-header {
  margin-bottom: var(--space-xl);
}

.plan-name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.plan-price {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  line-height: 1;
}

.plan-price .currency {
  font-size: 0.6em;
  vertical-align: super;
  margin-right: 2px;
}

.plan-price .period {
  font-size: 0.4em;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.plan-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.plan-features {
  list-style: none;
  margin-bottom: var(--space-2xl);
  flex: 1;
}

.plan-features li {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28c840;
  font-weight: 700;
}

.btn-full {
  width: 100%;
}

.pricing-footer {
  margin-top: var(--space-2xl);
}

.footer-link-bold {
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 2px;
  transition: all var(--transition-fast);
}

  border-color: var(--color-black);
}

@media (max-width: 900px) {
  .pricing-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin: var(--space-xl) calc(var(--content-padding) * -1) 0;
    padding: 24px var(--content-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    min-width: 280px;
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* ===== TESTIMONIALS WALL (Wall of Love) ===== */
.testimonials-wall {
  padding: 140px var(--content-padding);
  background: var(--color-white);
  overflow: hidden;
}

.testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 80px;
}

.testimonials-container-mask {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.testimonials-marquee-wrapper {
  display: flex;
  gap: 24px;
  height: 600px;
  justify-content: center;
}

.testimonial-column {
  flex: 1;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* MARQUEE ANIMATION LOGIC */
.column-marquee {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: marquee-scroll linear infinite;
}

/* Parallax Speeds */
.col-1 .column-marquee { animation-duration: 20s; }
.col-2 .column-marquee { animation-duration: 35s; }
.col-3 .column-marquee { animation-duration: 25s; }

@keyframes marquee-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); } /* Scrolls exactly half-way because we duplicated the cards */
}

/* Small Screens: Stack them or keep 2-column scroll */
@media (max-width: 900px) {
  .col-3 { display: none; }
  .testimonials-marquee-wrapper { height: 500px; }
}

@media (max-width: 600px) {
  .col-2 { display: none; }
  .testimonial-column { max-width: 100%; }
}

.testimonial-card {
  width: 100%;
  padding: 32px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 28px;
  transition: all var(--transition-base);
  cursor: default;
}

.testimonial-user {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f0f0f0;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 800;
  color: var(--color-text-primary);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.user-handle {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: 400;
  letter-spacing: -0.01em;
}