/* === 9BizClaw Landing Page — Liquid Glass Dark === */

:root {
  /* Design tokens */
  --cream: #F5F1EA;
  --ink: #0A0A0A;
  --navy: #0F1419;
  --charcoal: #1A1A1A;
  --gold: #D4A94F;
  --gold-foil: linear-gradient(135deg, #E6C878 0%, #B88A33 50%, #E6C878 100%);
  --paper: #FBF8F3;
}

/* =====================================================
   ALWAYS DARK — comprehensive Tailwind overrides
   ===================================================== */

/* Backgrounds */
body { background: var(--t-bg); color: var(--t-text); }
.bg-paper,
.bg-paper.p-6,
.bg-paper.p-8,
.bg-paper.p-10 { background: var(--t-surface) !important; }
.bg-cream,
.bg-section-alt { background: var(--t-bg-alt) !important; }
.bg-white,
.bg-white\/90 { background: var(--t-surface) !important; }
.bg-gray-100,
.bg-gray-50 { background: rgba(255,255,255,0.05) !important; }
.bg-ink\/10 { background: rgba(255,255,255,0.04) !important; }

/* Text — all ink/dark variants → light */
.text-ink,
.text-text-primary { color: var(--t-text) !important; }
.text-text-secondary { color: var(--t-text-secondary) !important; }
/* opacity slash-variants */
.text-ink\/50 { color: rgba(245,241,234,0.4) !important; }
.text-ink\/40 { color: rgba(245,241,234,0.3) !important; }
.text-ink\/20 { color: rgba(245,241,234,0.15) !important; }
.text-gray-800 { color: rgba(245,241,234,0.85) !important; }
.text-gray-700 { color: rgba(245,241,234,0.75) !important; }
.text-gray-600 { color: rgba(245,241,234,0.5) !important; }
.text-gray-500 { color: rgba(245,241,234,0.4) !important; }

/* Borders */
.border-ink\/10,
.border-ink\/15,
.border-ink\/20,
.border-ink\/25 { border-color: rgba(255,255,255,0.08) !important; }
.border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }
.border-gray-100 { border-color: rgba(255,255,255,0.06) !important; }
.border-gray-50  { border-color: rgba(255,255,255,0.04) !important; }

/* Integration grid container gap lines */
.bg-ink\/10.border-ink\/10,
.bg-ink\/10 { background: rgba(255,255,255,0.04) !important; }
.border-ink\/10 { border-color: rgba(255,255,255,0.06) !important; }

/* Pain / solution cards */
.pain-card { background: rgba(22,22,28,0.9) !important; }
.pain-card:hover { background: rgba(30,30,38,1) !important; }

/* Integration items */
.integration-item { background: rgba(18,18,24,0.95) !important; }

/* Tab panels */
.tab-content .bg-white { background: rgba(18,18,24,0.95) !important; }
.tab-content .border-gray-50 { border-color: rgba(255,255,255,0.04) !important; }
.tab-content .border-gray-100 { border-color: rgba(255,255,255,0.06) !important; }
.tab-content .text-text-primary { color: var(--t-text) !important; }
.agent-tab.active span:first-child,
.agent-tab:hover span:first-child { color: var(--t-text) !important; }

/* Filter tabs */
.filter-tab { background: rgba(255,255,255,0.05) !important; color: rgba(245,241,234,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.filter-tab.active { background: rgba(245,241,234,0.95) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* Black SVG icons from simpleicons (ollama/000000, anthropic/000000, openai) */
.integration-item img { filter: brightness(0) invert(1) opacity(0.75); }
/* But coloured logos (Zalo, MoMo, YBAI favicon, etc.) — leave those alone */
.integration-item img[src*="simpleicons.org/telegram"],
.integration-item img[src*="simpleicons.org/whatsapp"],
.integration-item img[src*="simpleicons.org/messenger"],
.integration-item img[src*="simpleicons.org/facebook"],
.integration-item img[src*="simpleicons.org/googlegemini"],
.integration-item img[src*="simpleicons.org/nvidia"],
.integration-item img[src*="simpleicons.org/googlecalendar"],
.integration-item img[src*="openrouter.ai"],
.integration-item img[src*="Ybai"],
.integration-item img[src*="ybai"] { filter: none; }

.nav-link.active { color: #ffffff !important; }
body::before { mix-blend-mode: var(--t-grain-blend); }

/* Section bg overrides for stack sections */
.stack-section { background: var(--t-surface) !important; }
.section-headline { color: var(--t-text) !important; }
.bg-text-primary { background: #0A0A0A !important; }

/* === ALWAYS DARK — base tokens === */
:root {
  --t-bg: #0A0A0A;
  --t-bg-alt: #111111;
  --t-surface: #151515;
  --t-text: #F5F1EA;
  --t-text-secondary: rgba(245,241,234,0.6);
  --t-border: rgba(245,241,234,0.08);
  --t-header-bg: rgba(10,10,10,0.0);
  --t-header-scroll: rgba(10,10,10,0.0);
  --t-card-bg: #151515;
  --t-drawer-bg: #111111;
  --t-modal-bg: rgba(15,15,20,0.92);
  --t-grain-blend: screen;
}

/* === Body defaults === */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--t-bg);
  color: var(--t-text);
}

h1, h2, h3, .font-heading {
  letter-spacing: -0.025em;
}

.font-heading em, .font-heading i, .italic {
  font-style: italic;
}

/* Editorial accent: italic spans inside headlines use Playfair Display, not Inter italic */
.hero-display .italic,
.section-headline .italic,
.font-heading .italic,
h1 .italic, h2 .italic, h3 .italic {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}

/* === Grain noise overlay === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* === Liquid Glass Header — ultra transparent wow === */
#header {
  background: transparent;
  padding: 0 1.25rem;
}
#header nav {
  margin-top: 10px;
  border-radius: 100px;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 64px;
  /* Near-zero tint — the glass is basically invisible, only edges define it */
  background: rgba(255,255,255,0.012);
  border: 1px solid rgba(255,255,255,0.22);
  /* Lower blur so colors behind stay distinguishable (clear glass, not frosted) */
  backdrop-filter: blur(16px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.1);
  box-shadow:
    /* bright mirror line on top edge */
    0 1px 0 rgba(255,255,255,0.5) inset,
    /* subtle inner edge */
    0 0 0 1px rgba(255,255,255,0.03) inset,
    /* soft ambient lift */
    0 4px 24px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.05);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
  position: relative;
  overflow: hidden;
}
/* iridescent top-mirror shimmer — keep strong for glass edge definition */
#header nav::before {
  content: "";
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 15%,
    rgba(255,255,255,0.85) 35%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.85) 65%,
    rgba(255,255,255,0.3) 85%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* bottom subtle reflection */
#header nav::after {
  content: "";
  position: absolute;
  bottom: 0; left: 25%; right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
  pointer-events: none;
}

/* Cursor-tracking shine — radial spotlight follows mouse over glass nav */
#header nav .nav-shine {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    160px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 25%,
    transparent 60%
  );
  mix-blend-mode: plus-lighter;
  z-index: 0;
}
#header nav:hover .nav-shine {
  opacity: 1;
}
/* scrolled: adds just a hint of dark to keep readability over light hero content */
.header-scrolled nav {
  background: rgba(8,8,14,0.22) !important;
  border-color: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(22px) saturate(200%) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 6px 32px rgba(0,0,0,0.3) !important;
}

/* === Nav links — pill hover with gradient === */
.nav-link {
  padding: 6px 14px !important;
  border-radius: 100px;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
}
.nav-link.active {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}

/* Nav CTA — white pill (like "Let's Talk" ref) */
.glass-btn-primary {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.4);
  color: #0a0a0a !important;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: all 0.2s ease;
}
.glass-btn-primary:hover {
  background: #fff;
  box-shadow: 0 4px 20px rgba(255,255,255,0.25), 0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-1px);
}

/* Glass modal card */
.modal-glass-card {
  background: rgba(12,12,18,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06),
    0 24px 80px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.08) inset;
}

/* Community section buttons */
.glass-community-btn {
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(192,57,43,0.15);
}
.glass-community-btn:hover {
  background: rgba(192,57,43,0.25);
  border-color: rgba(192,57,43,0.6);
}
.glass-community-btn-outline {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.glass-community-btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

/* === H1 Multicolor Gradient — glossy pearl/metallic shine === */
/* Rich saturated colors interspersed with bright white/cream highlight
   stops so when the gradient scrolls, white "shine sweeps" visibly pass
   across the letters — giving a metallic/pearl feel without muddy midtones. */
.h1-gradient {
  background-image: linear-gradient(115deg,
    #ffffff 0%,
    #fff5ea 6%,
    #ff9870 14%,
    #ffffff 22%,
    #ff5090 30%,
    #ffe8f0 38%,
    #c85cc8 46%,
    #ffffff 54%,
    #8860e0 62%,
    #eae0ff 70%,
    #5a78e0 78%,
    #ffffff 86%,
    #ff9870 94%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  animation: h1GradientShift 12s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.04));
}
/* Give the italic child its OWN explicit gradient + clip (not inherited).
   On iOS Safari, `background: inherit` combined with `-webkit-background-clip: text`
   on an inline child can render as a solid gradient rectangle instead of
   clipping to the glyphs. Duplicating the gradient is verbose but reliable. */
.h1-gradient .italic {
  background-image: linear-gradient(115deg,
    #ffffff 0%,
    #fff5ea 6%,
    #ff9870 14%,
    #ffffff 22%,
    #ff5090 30%,
    #ffe8f0 38%,
    #c85cc8 46%,
    #ffffff 54%,
    #8860e0 62%,
    #eae0ff 70%,
    #5a78e0 78%,
    #ffffff 86%,
    #ff9870 94%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  animation: h1GradientShift 12s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@keyframes h1GradientShift {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* === Hero display typography — Vietnamese-optimized === */
.hero-display {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem); /* 36px → 60px */
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.hero-display em,
.hero-display .italic {
  font-style: italic;
  font-weight: 600;
}

.section-headline {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Body defaults: bump base + line-height for Vietnamese readability */
body {
  font-size: 17px;
  line-height: 1.65;
}
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

/* Lead paragraph (first paragraph under headlines) */
.hero-display + p,
.section-headline + p {
  font-size: 1.125em;
  line-height: 1.7;
  color: rgba(245,241,234,0.72);
}

/* Mono labels: bump from 10px → 11px with weight 500 */
.font-mono.text-\[10px\],
.font-mono.text-xs {
  font-weight: 500;
  letter-spacing: 0.15em;
}

.mega-number {
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
}

/* Step numbers inside How-it-works — outlined red,
   distinctly different from gold section megas, high-contrast on dark */
.step-mega {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 0.85;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(192, 57, 43, 0.08);
  -webkit-text-stroke: 2.5px #C0392B;
  font-style: italic;
  position: relative;
  filter: drop-shadow(0 0 24px rgba(192, 57, 43, 0.25));
}
.step-mega::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, #C0392B 0%, rgba(192,57,43,0.2) 100%);
  margin-top: 1.5rem;
  border-radius: 2px;
}

/* === Gold foil mega numbers === */
.mega-number.gold-shimmer {
  background-image: linear-gradient(135deg, #E6C878 0%, #D4A94F 30%, #B88A33 50%, #E6C878 70%, #D4A94F 100%);
  background-size: 300% 300%;
  animation: foilShimmer 6s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* === Dashboard fake cursor (auto demo) === */
#dash-fake-cursor {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 100;
  transition: top 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  opacity: 0;
}
#dash-fake-cursor.ready { opacity: 1; }
#dash-fake-cursor.clicking {
  transition: top 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.12s ease;
  transform: scale(0.72);
}

/* Click ripple on target */
.fake-clicked {
  position: relative;
  animation: fakeFlash 0.5s ease-out;
}
@keyframes fakeFlash {
  0%   { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
  40%  { box-shadow: 0 0 0 4px rgba(192,57,43,0.4); }
  100% { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}

/* === Fake-activated state transitions (persist after click) === */

/* Schedule row: disabled → enabled */
.dash-screen[data-screen="schedule"] [data-fake-target].fake-activated {
  background: rgba(26,26,26,1) !important;
  border-color: rgba(255,255,255,0.05) !important;
  border-style: solid !important;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.dash-screen[data-screen="schedule"] [data-fake-target].fake-activated .text-white\/50,
.dash-screen[data-screen="schedule"] [data-fake-target].fake-activated div.text-xs {
  color: #F5F1EA !important;
  transition: color 0.3s ease;
}
.dash-screen[data-screen="schedule"] [data-fake-target].fake-activated .text-white\/40 {
  color: rgba(245,241,234,0.55) !important;
  transition: color 0.3s ease;
}

/* Zalo contact row already colored — just brighten subtext */
.dash-screen[data-screen="zalo"] [data-fake-target].fake-activated .text-white\/55 {
  color: #4ade80 !important;
  transition: color 0.3s ease;
}

/* Docs folders: active vs inactive */
.folder-card {
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color 0.3s ease, background 0.3s ease;
  position: relative;
}
.folder-card .folder-icon {
  color: rgba(255,255,255,0.7);
  transition: color 0.3s ease;
}
.folder-card.folder-active {
  border-color: rgba(192,57,43,0.6);
  background: rgba(192,57,43,0.05) !important;
}
.folder-card.folder-active .folder-icon {
  color: #C0392B;
}
.folder-card.folder-active::before {
  content: "";
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C0392B;
}

/* Docs file lists toggle visibility */
.docs-files { display: none; }
.docs-files.active { display: block; animation: docsFadeIn 0.35s ease; }
@keyframes docsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Telegram prompt block: click → active red border + copied indicator */
.dash-screen[data-screen="telegram"] [data-fake-target].fake-activated {
  border-color: rgba(192,57,43,0.5) !important;
  background: rgba(192,57,43,0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.dash-screen[data-screen="telegram"] [data-fake-target].fake-activated .ph-copy {
  display: none;
}
.dash-screen[data-screen="telegram"] [data-fake-target].fake-activated::after {
  content: "✓ Đã copy";
  position: absolute;
  top: 0.5rem; right: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: #4ade80;
  animation: copiedFade 0.3s ease;
}
@keyframes copiedFade {
  from { opacity: 0; transform: translateX(4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === Dashboard carousel === */
#dashboard-main {
  position: relative;
  min-height: 460px;
}
.dash-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  overflow-y: auto;
}
.dash-screen.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.dash-screen.leaving {
  transform: translateX(-24px);
}

/* Sidebar nav active state */
.dash-nav.active {
  background: rgba(192,57,43,0.15);
  color: #e8756a !important;
  border-left: 2px solid #C0392B;
  padding-left: 10px !important;
}

/* Carousel dots */
.dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}
.dash-dot.active {
  width: 20px;
  border-radius: 3px;
  background: #C0392B;
}
.dash-dot:hover { background: rgba(255,255,255,0.4); }
.dash-dot.active:hover { background: #C0392B; }

/* Toggle switches */
.toggle-on, .toggle-off {
  display: inline-block;
  width: 28px;
  height: 14px;
  border-radius: 100px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.toggle-on { background: rgba(74,222,128,0.85); }
.toggle-off { background: rgba(255,255,255,0.15); }
.toggle-on span, .toggle-off span {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F5F1EA;
  transition: left 0.25s ease;
}
.toggle-on span { left: 16px; }
.toggle-off span { left: 2px; }

/* === Glass dashboard effect === */
.hero-glass-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-glass-mesh::before,
.hero-glass-mesh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
}
.hero-glass-mesh::before {
  width: 500px; height: 500px;
  top: -100px; right: -50px;
  background: radial-gradient(circle, #C0392B 0%, transparent 70%);
}
.hero-glass-mesh::after {
  width: 400px; height: 400px;
  bottom: -80px; left: 30%;
  background: radial-gradient(circle, #D4A94F 0%, transparent 70%);
}
html[data-theme="dark"] .hero-glass-mesh::before { opacity: 0.18; }
html[data-theme="dark"] .hero-glass-mesh::after { opacity: 0.14; }

.dashboard-glass {
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 32px 64px -12px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 1px 0 rgba(255,255,255,0.1) inset;
}
.dashboard-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}

/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--t-border);
  color: var(--t-text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--t-border); color: var(--t-text); }

/* === Mascot watermark === */
.mascot-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  z-index: 0;
}

/* === Sticky card stacking (desktop only) === */
@media (min-width: 1024px) {
  .stack-section {
    position: sticky;
    top: 0;
    will-change: transform;
    /* Shadow at top edge for depth illusion */
    box-shadow: 0 -32px 64px -16px rgba(0,0,0,0.08);
  }
  #pain-points   { z-index: 2; }
  #solutions     { z-index: 3; }
  #features      { z-index: 4; }
}

/* Small rounded top-corners on stacking sections for "card" feel */
@media (min-width: 1024px) {
  .stack-section {
    border-radius: 24px 24px 0 0;
  }
}

/* === Scroll reveal — only applies when JS is ready === */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.40s; }

/* === Crop marks at section corners === */
.crop-marks {
  position: relative;
}
.crop-marks::before,
.crop-marks::after,
.crop-marks > .crop-bl,
.crop-marks > .crop-br {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: currentColor;
  opacity: 0.35;
  pointer-events: none;
}
.crop-marks::before {
  top: 24px; left: 24px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.crop-marks::after {
  top: 24px; right: 24px;
  border-top: 1px solid;
  border-right: 1px solid;
}
.crop-marks > .crop-bl {
  bottom: 24px; left: 24px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
.crop-marks > .crop-br {
  bottom: 24px; right: 24px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/* === Ticker animation === */
.ticker-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.ticker-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C0392B;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* === Animated chart line (svg path) === */
.chart-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.in-view .chart-path {
  stroke-dashoffset: 0;
}

/* === Gradient hover on ALL interactive elements === */
/* Shared glow layer — radial gradient from top on hover */
.pain-card,
.solution-card,
.integration-item,
.agent-tab,
.os-pick-btn,
.filter-tab {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.pain-card::after,
.solution-card::after,
.integration-item::after,
.os-pick-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255,255,255,0.12) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.pain-card:hover::after,
.solution-card:hover::after,
.integration-item:hover::after,
.os-pick-btn:hover::after {
  opacity: 1;
}

/* Card border glow on hover */
.pain-card,
.solution-card {
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.pain-card:hover,
.solution-card:hover {
  border-color: rgba(255,255,255,0.14);
  background-color: rgba(255,255,255,0.04);
}
.pain-card > *,
.solution-card > * {
  position: relative;
  z-index: 2;
}

.solution-card:hover .solution-reveal {
  opacity: 1;
  transform: translateY(0);
}
.solution-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Integration item hover */
.integration-item {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.25s ease !important;
}
.integration-item:hover {
  border-color: rgba(255,255,255,0.15) !important;
}
.integration-item > * {
  position: relative;
  z-index: 2;
}

/* === Tabs / filter === */
.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tab-content.active {
  display: block;
  opacity: 1;
}

/* Agent tabs — editorial underline */
.agent-tab {
  position: relative;
  padding-bottom: 14px;
  cursor: pointer;
}
.agent-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 40px;
  height: 2px;
  background: #C0392B;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.agent-tab.active::after {
  transform: translateX(-50%) scaleX(1);
}
.agent-tab.active span:first-child {
  color: var(--ink);
}
.agent-tab:hover span:first-child {
  color: var(--ink);
}

/* Available integrations: full color */
.integration-logo {
  filter: grayscale(0%);
  opacity: 1;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
/* Integration grid mobile fit */
@media (max-width: 639px) {
  .integration-item .text-xs { font-size: 10px; }
  .integration-item .integration-logo { width: 40px; height: 40px; margin-bottom: 6px; }
  .integration-item .integration-logo img { width: 32px; height: 32px; }
}

/* Soon integrations: grayscale, color on hover */
.integration-item.is-soon .integration-logo {
  filter: grayscale(100%);
  opacity: 0.45;
}
.integration-item.is-soon:hover .integration-logo {
  filter: grayscale(0%);
  opacity: 1;
}

.filter-tab {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-tab.active {
  background-color: var(--ink);
  color: white;
}

/* === Modal === */
.modal-overlay {
  background: rgba(10, 10, 10, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* === Mobile drawer === */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.open {
  transform: translateX(0);
}

/* === Nav link === */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: #C0392B;
}

/* === Form success === */
.form-success {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Gold foil === */
.gold-foil {
  background-image: var(--gold-foil);
  background-size: 200% 200%;
  animation: foilShimmer 6s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gold-foil-bg {
  background: var(--gold-foil);
  background-size: 200% 200%;
  animation: foilShimmer 6s ease-in-out infinite;
}
@keyframes foilShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* === Social icon hover === */
.social-icon {
  transition: color 0.2s ease;
}
.social-icon:hover {
  color: #C0392B !important;
}

/* === Ledger row === */
.ledger-row {
  transition: background-color 0.25s ease;
}
.ledger-row:hover {
  background-color: rgba(255,255,255,0.04);
}
.ledger-row .amount {
  transition: color 0.25s ease, transform 0.25s ease;
}
.ledger-row:hover .amount {
  color: #C0392B;
}

/* Selection */
::selection {
  background: #C0392B;
  color: #FFFFFF;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   YBAI embed form — iframe constraints
   YBAI renders form inside cross-origin iframe. Can't style content,
   only constrain size and frame it nicely.
   ========================================================================== */

.ybai-form {
  width: 100%;
  min-height: 380px;
}

.ybai-form iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  /* Let YBAI set its own height — form is compact without referrer,
     grows when referrer card appears. Modal handles overflow. */
}

/* Modal: allow scrolling if content overflows viewport */
#download-modal .bg-white {
  max-height: 92vh;
  overflow-y: auto;
}

/* Hide YBAI floating chat bubble on opt-in section / small screens so it doesn't block form CTA */
@media (max-width: 768px) {
  #ybai-widget,
  iframe[src*="embed.ybai.me"]:not(.ybai-form iframe),
  div[id^="ybai-chat"],
  div[class*="ybai-widget"] {
    display: none !important;
  }
}

/* Skeleton while iframe loads */
.ybai-form:not(:has(iframe)) {
  background: linear-gradient(90deg, #F0ECE6 0%, #F5F1EA 50%, #F0ECE6 100%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  border-radius: 8px;
  min-height: 420px;
}

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