/* =========================================================
   ALCHEMYST — Global Stylesheet
   Brand: Crimson Pro (display) + Inter (UI)
   Primary: #2563EB | Dark: #1E293B | Teal: #0D9488
   ========================================================= */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- Custom Properties ---- */
:root {
  /* Brand Colors */
  --blue:       #2563EB;
  --blue-dark:  #1D4ED8;
  --blue-light: #EFF6FF;
  --dark-slate: #1E293B;
  --teal:       #0D9488;
  --purple:     #7C3AED;
  --purple-light: #F5F3FF;
  --green:      #16A34A;
  --green-light: #F0FDF4;
  --amber:      #D97706;
  --amber-light: #FFFBEB;
  --off-white:  #F8FAFC;
  --slate:      #64748B;
  --slate-light:#94A3B8;
  --border:     #E2E8F0;
  --border-dark:#334155;
  --white:      #FFFFFF;

  /* Typography */
  --font-display: 'Crimson Pro', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing Scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
  --radius:       8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.15);

  /* Animation */
  --ease:       cubic-bezier(.4,0,.2,1);
  --duration:   300ms;
}

/* ---- Base Typography ---- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-slate);
  background: var(--white);
}

h1,h2,h3,h4 { line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-family: var(--font-display); font-weight: 300; }
h2 { font-family: var(--font-display); font-weight: 300; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
p  { color: var(--slate); line-height: 1.7; }

.display-1 { font-size: clamp(2.75rem, 5vw + 1rem, 4.5rem); }
.display-2 { font-size: clamp(2rem, 3vw + .5rem, 3.25rem); }
.display-3 { font-size: clamp(1.5rem, 2vw + .25rem, 2.25rem); }
.text-lg    { font-size: 1.125rem; }
.text-sm    { font-size: 0.875rem; }
.text-xs    { font-size: 0.75rem; }
.text-muted { color: var(--slate); }
.text-light { color: rgba(255,255,255,.7); }
.text-white { color: var(--white); }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section        { padding: var(--space-24) 0; }
.section-sm     { padding: var(--space-16) 0; }
.section-lg     { padding: var(--space-32) 0; }
.section-dark   { background: var(--dark-slate); color: var(--white); }
.section-dark p { color: rgba(255,255,255,.7); }
.section-light  { background: var(--off-white); }
.section-blue   { background: var(--blue); color: var(--white); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { flex-direction: column; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }
.items-start { align-items: flex-start; }
.items-center{ align-items: center; }

.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.max-60 { max-width: 60ch; }
.max-72 { max-width: 72ch; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 8px 16px; font-size: 0.875rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(37,99,235,.3);
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 4px 12px rgba(37,99,235,.35); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--dark-slate);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--slate); background: var(--off-white); }

.btn-ghost-white {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.25);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: var(--white); }

.btn-dark {
  background: var(--dark-slate);
  color: var(--white);
}
.btn-dark:hover { background: #0F172A; }

.btn-group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.badge-blue   { background: var(--blue-light); color: var(--blue); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.badge-green  { background: var(--green-light); color: var(--green); }
.badge-amber  { background: var(--amber-light); color: var(--amber); }
.badge-dark   { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.15); }
.badge-neutral{ background: var(--off-white); color: var(--slate); border: 1px solid var(--border); }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-dark {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.feature-card .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.icon-blue   { background: var(--blue-light); color: var(--blue); }
.icon-purple { background: var(--purple-light); color: var(--purple); }
.icon-green  { background: var(--green-light); color: var(--green); }
.icon-teal   { background: #F0FDFA; color: var(--teal); }
.icon-amber  { background: var(--amber-light); color: var(--amber); }

/* ---- Screenshot Placeholder ---- */
.screenshot-placeholder {
  background: var(--off-white);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  min-height: 320px;
  color: var(--slate);
  position: relative;
  overflow: hidden;
}
.screenshot-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.03) 0%, rgba(13,148,136,.03) 100%);
}
.screenshot-placeholder .sp-inner { position: relative; z-index: 1; }
.screenshot-placeholder .sp-icon  { color: var(--border); margin: 0 auto var(--space-3); }
.screenshot-placeholder .sp-label { font-weight: 600; font-size: 0.875rem; color: var(--dark-slate); margin-bottom: var(--space-1); }
.screenshot-placeholder .sp-note  { font-size: 0.8125rem; color: var(--slate-light); }
.screenshot-placeholder.sp-dark {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
.screenshot-placeholder.sp-dark .sp-icon  { color: rgba(255,255,255,.15); }
.screenshot-placeholder.sp-dark .sp-label { color: rgba(255,255,255,.7); }
.screenshot-placeholder.sp-dark .sp-note  { color: rgba(255,255,255,.35); }

/* Browser frame wrapper */
.browser-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(0,0,0,.1);
}
.browser-frame .bf-bar {
  background: #F5F5F5;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.browser-frame .bf-dots { display: flex; gap: 6px; }
.browser-frame .bf-dot  { width: 12px; height: 12px; border-radius: 50%; }
.browser-frame .bf-dot:nth-child(1) { background: #FF5F57; }
.browser-frame .bf-dot:nth-child(2) { background: #FEBC2E; }
.browser-frame .bf-dot:nth-child(3) { background: #28C840; }
.browser-frame .bf-url  {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: 0.8125rem;
  color: var(--slate);
  font-family: var(--font-body);
}
.browser-frame .bf-content { background: var(--white); }

/* ---- Navigation ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration) var(--ease);
}
.site-nav.scrolled { box-shadow: var(--shadow-sm); }
.site-nav .nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--dark-slate);
  flex-shrink: 0;
}
.nav-logo img { width: 28px; height: 28px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}
.nav-link {
  padding: 6px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  border-radius: var(--radius);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
  position: relative;
}
.nav-link:hover { color: var(--dark-slate); background: var(--off-white); }
.nav-link.active { color: var(--dark-slate); }

/* Dropdown */
.nav-item { position: relative; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  min-width: 560px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--duration) var(--ease);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease);
}
.dropdown-item:hover { background: var(--off-white); }
.dropdown-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.dropdown-text h4 { font-size: 0.875rem; font-weight: 600; color: var(--dark-slate); margin-bottom: 2px; }
.dropdown-text p  { font-size: 0.8125rem; color: var(--slate); line-height: 1.4; }
.dropdown-divider { grid-column: 1 / -1; height: 1px; background: var(--border); margin: var(--space-2) 0; }
.dropdown-footer  { grid-column: 1 / -1; padding: var(--space-2) var(--space-3); display: flex; justify-content: space-between; align-items: center; }
.dropdown-footer a { font-size: 0.8125rem; font-weight: 500; color: var(--blue); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }
.nav-sign-in {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: color var(--duration) var(--ease);
}
.nav-sign-in:hover { color: var(--dark-slate); }

/* Mobile nav */
.nav-mobile-toggle {
  display: none;
  padding: 8px;
  border-radius: var(--radius);
  color: var(--dark-slate);
}
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 99;
  padding: var(--space-6);
  overflow-y: auto;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.nav-mobile-link { padding: 12px; font-size: 1.0625rem; font-weight: 500; color: var(--dark-slate); border-bottom: 1px solid var(--border); display: block; }
.nav-mobile-cta { margin-top: var(--space-4); }

/* ---- Hero ---- */
.hero {
  background: var(--dark-slate);
  color: var(--white);
  padding: var(--space-24) 0 var(--space-20);
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(37,99,235,.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow { margin-bottom: var(--space-5); }
.hero h1 { color: var(--white); margin-bottom: var(--space-5); }
.hero .hero-sub { font-size: 1.1875rem; line-height: 1.65; color: rgba(255,255,255,.7); max-width: 52ch; margin-bottom: var(--space-8); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero-trial-note { font-size: 0.8125rem; color: rgba(255,255,255,.4); margin-top: var(--space-3); }

/* ---- Section Headers ---- */
.section-header { margin-bottom: var(--space-12); }
.section-header.centered { text-align: center; }
.section-header.centered p { margin: var(--space-4) auto 0; max-width: 56ch; }
.section-header h2 { margin-top: var(--space-3); }
.section-header p  { margin-top: var(--space-4); font-size: 1.0625rem; }

/* ---- Events Strip ---- */
.events-strip {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
  overflow: hidden;
}
.events-strip .strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-light);
  white-space: nowrap;
  margin-right: var(--space-8);
  flex-shrink: 0;
}
.events-strip .strip-inner { display: flex; align-items: center; gap: var(--space-8); }
.events-strip .event-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  letter-spacing: .01em;
}

/* ---- Stats ---- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.stat-number { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; color: var(--white); line-height: 1; margin-bottom: var(--space-2); }
.stat-label  { font-size: 0.8125rem; color: rgba(255,255,255,.5); }

/* ---- Comparison ---- */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.comparison-col { padding: var(--space-8); background: var(--white); }
.comparison-col.col-alchemyst { background: var(--blue-light); border-left: 3px solid rgba(37,99,235,.3); }
.comparison-col h3 { font-size: 1rem; margin-bottom: var(--space-5); }
.comparison-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.9375rem;
}
.comparison-item .ci-icon { flex-shrink: 0; margin-top: 2px; }
.check-icon { color: var(--green); }
.cross-icon { color: var(--slate-light); }

/* ---- Pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); align-items: start; }
.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.pricing-card.featured {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}
.pricing-card.dark-card {
  background: var(--dark-slate);
  border-color: var(--border-dark);
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}
.pricing-tier   { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3); }
.pricing-price  { font-family: var(--font-display); font-weight: 300; font-size: 2.75rem; line-height: 1; margin-bottom: var(--space-1); }
.pricing-period { font-size: 0.875rem; color: var(--slate); margin-bottom: var(--space-2); }
.pricing-annual { font-size: 0.8125rem; color: var(--slate); margin-bottom: var(--space-5); min-height: 20px; }
.pricing-divider { height: 1px; background: var(--border); margin: var(--space-5) 0; }
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
  color: var(--dark-slate);
}
.pricing-feature .pf-check { color: var(--green); flex-shrink: 0; margin-top: 1px; }
/* Fix: block overrides inline-flex from .btn, killing vertical text centering */
.pricing-cta { margin-top: var(--space-6); display: flex; justify-content: center; align-items: center; width: 100%; }
.trial-note { font-size: 0.8rem; color: var(--slate); text-align: center; margin-top: var(--space-2); }

/* Pricing toggle */
.billing-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}
.toggle-label { font-size: 0.9375rem; font-weight: 500; color: var(--slate); }
.toggle-label.active { color: var(--dark-slate); }
.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--blue);
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--duration) var(--ease);
}
.toggle-switch.annual::after { transform: translateX(20px); }
.toggle-save-pill {
  background: var(--green-light);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

/* ---- Personas ---- */
.persona-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-10);
}
.persona-tab {
  padding: 10px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  border-bottom: 2px solid transparent;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
  margin-bottom: -1px;
}
.persona-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.persona-panel { display: none; }
.persona-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }

/* ---- Advisors (App agents) ---- */
.advisor-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.advisor-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: .05;
  transform: translate(30%, -30%);
}
.advisor-blue   { background: var(--blue-light); border: 1px solid rgba(37,99,235,.15); }
.advisor-blue::after   { background: var(--blue); }
.advisor-teal   { background: #F0FDFA; border: 1px solid rgba(13,148,136,.15); }
.advisor-teal::after   { background: var(--teal); }
.advisor-purple { background: var(--purple-light); border: 1px solid rgba(124,58,237,.15); }
.advisor-purple::after { background: var(--purple); }

/* ---- Team ---- */
.team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.team-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  overflow: hidden;
  background: var(--off-white);
  border: 2px solid var(--border);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-placeholder { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-4); background: var(--off-white); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--slate-light); }
.team-name   { font-size: 1rem; font-weight: 600; color: var(--dark-slate); margin-bottom: 2px; }
.team-title  { font-size: 0.8125rem; font-weight: 500; color: var(--blue); margin-bottom: var(--space-3); }
.team-bio    { font-size: 0.875rem; line-height: 1.6; color: var(--slate); }
.team-linkedin { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--blue); margin-top: var(--space-3); font-weight: 500; }

/* ---- Advisor section (advisory board) ---- */
.advisor-bio-card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.advisor-bio-card .advisor-photo { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--off-white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--slate-light); }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark-slate);
  cursor: pointer;
  gap: var(--space-4);
}
.faq-question .faq-icon { flex-shrink: 0; transition: transform var(--duration) var(--ease); color: var(--slate); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding-bottom: var(--space-5); color: var(--slate); line-height: 1.7; font-size: 0.9375rem; }
.faq-item.open .faq-answer { display: block; }

/* ---- CTA Banner ---- */
.cta-banner {
  background: var(--dark-slate);
  padding: var(--space-20) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(37,99,235,.2) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
.cta-banner p  { color: rgba(255,255,255,.65); font-size: 1.0625rem; margin-bottom: var(--space-8); }
.cta-banner .btn-group { justify-content: center; }

/* ---- Footer ---- */
.site-footer {
  background: #0F172A;
  color: rgba(255,255,255,.65);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-brand p { font-size: 0.875rem; line-height: 1.65; margin-top: var(--space-3); max-width: 32ch; }
.footer-col h5 { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: var(--space-4); }
.footer-link  { display: block; font-size: 0.9rem; color: rgba(255,255,255,.6); margin-bottom: var(--space-3); transition: color var(--duration) var(--ease); }
.footer-link:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--space-8); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom p { font-size: 0.875rem; }
.footer-social { display: flex; gap: var(--space-4); }
.footer-social-link { color: rgba(255,255,255,.4); transition: color var(--duration) var(--ease); }
.footer-social-link:hover { color: var(--white); }
.footer-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--white); }

/* ---- Roadmap ---- */
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.roadmap-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.roadmap-status { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); display: inline-block; margin-bottom: var(--space-4); }
.status-next    { background: var(--blue-light); color: var(--blue); }
.status-dev     { background: var(--amber-light); color: var(--amber); }
.status-horizon { background: var(--off-white); color: var(--slate); border: 1px solid var(--border); }

/* ---- Step process ---- */
.steps { display: flex; flex-direction: column; gap: var(--space-6); }
.step  { display: flex; gap: var(--space-5); align-items: flex-start; }
.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}
.step-body h4 { margin-bottom: var(--space-1); }

/* ---- Data Sources ---- */
.source-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.source-pill { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 0.875rem; color: rgba(255,255,255,.7); font-weight: 500; }

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 500ms var(--ease) forwards; }
.fade-up-delay-1 { animation-delay: 100ms; }
.fade-up-delay-2 { animation-delay: 200ms; }
.fade-up-delay-3 { animation-delay: 300ms; }

.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.animate-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* ---- Utilities ---- */
.divider { height: 1px; background: var(--border); }
.text-blue   { color: var(--blue); }
.text-purple { color: var(--purple); }
.text-green  { color: var(--green); }
.text-teal   { color: var(--teal); }
.text-amber  { color: var(--amber); }
.w-full { width: 100%; }

/* ---- Page hero variants ---- */
.page-hero { padding: var(--space-20) 0 var(--space-16); background: var(--dark-slate); }
.page-hero-light { padding: var(--space-20) 0 var(--space-16); background: var(--white); border-bottom: 1px solid var(--border); }

/* ---- Intelligence page ---- */
.phase-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
}
.phase-current { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.phase-future  { background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2); }
.model-card    { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: var(--space-8); }

/* ---- Inline icon alignment ---- */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* ========= RESPONSIVE ========= */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .nav-dropdown { min-width: 440px; }
}

@media (max-width: 768px) {
  :root { --container-pad: 16px; }
  .section { padding: var(--space-16) 0; }
  .section-lg { padding: var(--space-20) 0; }

  .nav-links, .nav-actions { display: none; }
  .nav-mobile-toggle { display: flex; margin-left: auto; }

  .hero { padding: var(--space-16) 0; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .persona-panel.active { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .persona-tabs { flex-wrap: wrap; }

  .events-strip .strip-inner { flex-wrap: wrap; gap: var(--space-4); }
}

@media (max-width: 480px) {
  .btn-lg { padding: 12px 20px; font-size: 0.9375rem; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   FIXES & ADDITIONS — v2
   ========================================================= */

/* ---- Fix: white cards inside dark sections (prevents white-on-white) ---- */
.section-dark .roadmap-card { color: var(--dark-slate); }
.section-dark .roadmap-card h3 { color: var(--dark-slate) !important; }
.section-dark .roadmap-card p { color: var(--slate) !important; }
.section-dark .roadmap-card .text-xs { color: var(--slate-light) !important; }
.section-dark .card,
.section-dark .feature-card { color: var(--dark-slate); }
.section-dark .card h3,
.section-dark .feature-card h3 { color: var(--dark-slate); }
.section-dark .card p,
.section-dark .feature-card p { color: var(--slate); }
/* advisor-bio-card in dark sections: flip to glassy dark so white inline text is readable */
.section-dark .advisor-bio-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* Roadmap card icon row */
.roadmap-card .rc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* ---- Partner logo strip ---- */
.events-strip .partner-logo {
  height: 28px;
  width: auto;
  max-width: 120px;
  display: inline-block;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.25s ease;
  flex-shrink: 0;
}
.events-strip .partner-logo:hover { opacity: 0.85; }
.events-strip .strip-inner {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

/* ---- Screenshots inside browser frames & persona panels ---- */
.browser-frame .bf-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---- Hero animation iframe ---- */
/* Padding-bottom trick: universally reliable aspect-ratio for iframes */
.bf-content.hero-anim-wrap {
  position: relative;
  padding-bottom: 65%; /* 520/800 = 0.65 */
  height: 0;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero-anim-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.persona-screenshot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}
.section-screenshot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

/* ---- Nav full logo ---- */
.nav-logo .logo-full {
  height: 28px;
  width: auto;
  display: block;
}
.nav-logo span { display: none; }

/* ---- Team photo sizing ---- */
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---- Readability: ensure p inside feature cards always visible ---- */
.feature-card p,
.feature-card h3,
.advisor-card p,
.advisor-card h3 { color: var(--dark-slate); }
.feature-card p,
.advisor-card p { color: var(--slate); }

/* ---- Comparison grid: ensure text never inherits dark ---- */
.comparison-col,
.comparison-col p,
.comparison-col h3,
.comparison-item { color: var(--dark-slate); }
.comparison-col.col-alchemyst .comparison-item { color: var(--dark-slate); }

/* ---- Team card bio ---- */
.team-card .team-bio { color: var(--slate) !important; }

/* =========================================================
   QA FIXES & POLISH — v3
   ========================================================= */

/* ---- Blog card image zoom on hover ---- */
.card:hover img { transform: scale(1.04); }

/* ---- Ensure btn always uses flex alignment regardless of display overrides ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}

/* ---- Dark card pricing: ensure text is readable ---- */
.pricing-card.dark-card .pricing-tier { color: rgba(255,255,255,.5); }
.pricing-card.dark-card .pricing-price { color: var(--white); }
.pricing-card.dark-card .pricing-period { color: rgba(255,255,255,.5); }
.pricing-card.dark-card .pricing-annual { color: rgba(255,255,255,.4); }
.pricing-card.dark-card .pricing-feature { color: rgba(255,255,255,.8); }
.pricing-card.dark-card .pricing-divider { background: rgba(255,255,255,.1); }
.pricing-card.dark-card .trial-note { color: rgba(255,255,255,.4); }

/* ---- Fix: .section-dark p cascade overriding card content paragraphs ---- */
.section-dark .card p,
.section-dark .feature-card p,
.section-dark .pricing-card p { color: var(--slate); }
.section-dark .pricing-card.dark-card p { color: rgba(255,255,255,.6); }

/* ---- Fix: btn-secondary on dark background needs contrast ---- */
.section-dark .btn-secondary,
.cta-banner .btn-secondary {
  color: var(--white);
  border-color: rgba(255,255,255,.3);
}
.section-dark .btn-secondary:hover,
.cta-banner .btn-secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
}

/* ---- Fix: h3 inside cards should always be dark-slate on white cards ---- */
.card h3 { color: var(--dark-slate); }

/* ---- Fix: article body h3 references in dark inline CTA ---- */
.section-dark h3,
[style*="background: #1E293B"] h3,
[style*="background:#1E293B"] h3 { color: var(--white); }

/* =========================================================
   ANIMATION INFRASTRUCTURE — ready to activate
   =========================================================

   Usage:
     data-anim="fade-up"        → fade up on scroll
     data-anim="fade-in"        → fade in on scroll
     data-anim="slide-left"     → slide in from left
     data-anim="slide-right"    → slide in from right
     data-anim="scale-in"       → scale in from 95%
     data-anim="count-up"       → JS counter (add data-count-target="4000000")
     data-anim-group="stagger"  → on parent: staggered children
     data-anim-delay="1–6"      → delay multiplier (100ms each)
   ========================================================= */

/* ---- Keyframes ---- */
@keyframes alc-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes alc-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes alc-scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes alc-slideLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes alc-slideRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Floating / bobbing  — for hero blobs and decorative elements */
@keyframes alc-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
/* Pulse glow — for CTA radial gradients */
@keyframes alc-pulseGlow {
  0%, 100% { opacity: .15; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: .25; transform: translate(-50%,-50%) scale(1.15); }
}
/* Gradient shift — for hero backgrounds */
@keyframes alc-gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Marquee — for partner/events strip */
@keyframes alc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Underline draw — for section header accent */
@keyframes alc-drawLine {
  from { width: 0; }
  to   { width: 100%; }
}
/* Shimmer — for skeleton loading states */
@keyframes alc-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* ---- Animation utility classes (activate by adding class or via JS) ---- */
.anim-fade-up    { animation: alc-fadeUp    600ms var(--ease) both; }
.anim-fade-in    { animation: alc-fadeIn    600ms var(--ease) both; }
.anim-scale-in   { animation: alc-scaleIn   600ms var(--ease) both; }
.anim-slide-left { animation: alc-slideLeft 600ms var(--ease) both; }
.anim-slide-right{ animation: alc-slideRight 600ms var(--ease) both; }
.anim-float      { animation: alc-float     4s ease-in-out infinite; }
.anim-pulse-glow { animation: alc-pulseGlow 3s ease-in-out infinite; }

/* ---- Stagger delay utilities ---- */
.anim-delay-1 { animation-delay: 100ms; }
.anim-delay-2 { animation-delay: 200ms; }
.anim-delay-3 { animation-delay: 300ms; }
.anim-delay-4 { animation-delay: 400ms; }
.anim-delay-5 { animation-delay: 500ms; }
.anim-delay-6 { animation-delay: 600ms; }

/* ---- Marquee strip (activate by wrapping content in .marquee-track) ---- */
.marquee-overflow { overflow: hidden; }
.marquee-track    { display: flex; width: max-content; }
.marquee-track.running { animation: alc-marquee 28s linear infinite; }
.marquee-track.running:hover { animation-play-state: paused; }

/* ---- Hero decoration blobs (add .hero-blob divs to hero for effect) ---- */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .12;
  pointer-events: none;
  animation: alc-float 6s ease-in-out infinite;
}
.hero-blob-blue   { background: var(--blue); }
.hero-blob-teal   { background: var(--teal); }
.hero-blob-purple { background: var(--purple); }

/* ---- CTA banner animated glow (replaces static ::before) ---- */
.cta-banner::before { animation: alc-pulseGlow 4s ease-in-out infinite; }

/* ---- Section header underline accent ---- */
.section-header-accent {
  display: block;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  margin-top: var(--space-3);
  width: 40px; /* expand to full with alc-drawLine when in view */
  transition: width 600ms var(--ease);
}
.section-header-accent.in-view { width: 100%; }

/* ---- Counter number (JS animates from 0 to data-count-target) ---- */
[data-anim="count-up"] { font-variant-numeric: tabular-nums; }

/* ---- Scroll-triggered: data-anim attribute variants ---- */
/* JS reads these and adds the matching .anim-* class when in viewport */
[data-anim]:not(.anim-activated) { opacity: 0; }
[data-anim].anim-activated { opacity: 1; }


/* =========================================================
   POLISH PASS — Elite B2B SaaS micro-interactions & motion
   ========================================================= */

/* ---- Typography: negative letter-spacing on large headings ---- */
.display-1 { letter-spacing: -0.03em; }
.display-2 { letter-spacing: -0.025em; }
.display-3 { letter-spacing: -0.02em; }

/* ---- Hero section: relative position for blobs + overflow ---- */
.hero { position: relative; overflow: hidden; }

/* ---- Hero screenshot: clean lift on hover (perspective removed — too gimmicky) ---- */
.hero .browser-frame {
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
  will-change: transform;
}
.hero .browser-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(37,99,235,.18), 0 16px 48px rgba(0,0,0,.18);
}

/* ---- Partner logos: opacity base + smooth hover restore ---- */
.events-strip .partner-logo {
  opacity: 0.45;
  transition: opacity 300ms ease, filter 300ms ease;
  filter: grayscale(1);
}
.events-strip .partner-logo:hover {
  opacity: 0.85;
  filter: grayscale(0.3);
}

/* ---- Marquee: events strip layout override ---- */
.events-strip .strip-inner {
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.events-strip .marquee-overflow { width: 100%; }

/* ---- Cards: stronger hover — lift + shadow + border glow ---- */
.card {
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.13), 0 0 0 1px rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.2);
}

/* ---- Cards: icon color shift on hover ---- */
.card:hover .dropdown-icon {
  background: rgba(37,99,235,0.12);
  transition: background 300ms ease;
}

/* ---- Advisor cards: hover lift ---- */
.advisor-card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.advisor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}
.advisor-blue:hover  { border-color: rgba(37,99,235,.3); }
.advisor-teal:hover  { border-color: rgba(13,148,136,.3); }
.advisor-purple:hover{ border-color: rgba(124,58,237,.3); }

/* ---- Roadmap cards: hover lift + glassmorphism feel ---- */
.roadmap-card {
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.roadmap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: rgba(37,99,235,0.2);
}

/* ---- Roadmap status "Coming next" pulse ---- */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
  60%       { box-shadow: 0 0 0 5px rgba(37,99,235,0); }
}
.roadmap-status.status-next {
  animation: statusPulse 2.8s ease-in-out infinite;
}

/* ---- Pricing featured card: glow elevation ---- */
.pricing-card.featured {
  box-shadow: 0 0 0 1px var(--green), 0 0 40px rgba(16,185,129,0.18);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.pricing-card.featured:hover {
  box-shadow: 0 0 0 1px var(--green), 0 0 60px rgba(16,185,129,0.28);
  transform: translateY(-4px);
}

/* ---- Buttons: primary glow + arrow micro-animation ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 0 28px rgba(37,99,235,0.45), 0 4px 12px rgba(37,99,235,0.3);
  transform: translateY(-2px);
}
.btn-primary::after {
  content: '→';
  position: absolute;
  right: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  font-size: 1em;
  line-height: 1;
}
.btn-primary:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.btn-primary:hover {
  padding-right: 2.25rem;
  transition: all 200ms ease, padding-right 200ms ease;
}

/* ---- Ghost white button: stronger hover ---- */
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 16px rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

/* ---- Nav links: animated underline on hover ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width 250ms ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ---- Persona tabs: animated underline indicator ---- */
.persona-tab {
  position: relative;
}
.persona-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width 250ms ease, left 250ms ease;
}
.persona-tab.active::after {
  width: 100%;
  left: 0;
}

/* ---- Persona panel: fade-in on tab switch ---- */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.persona-panel.active {
  animation: panelFadeIn 280ms ease forwards;
}

/* ---- Steps: stagger-ready (JS adds data-anim-group="stagger") ---- */
.step {
  transition: transform 300ms ease;
}
.step:hover {
  transform: translateX(4px);
}

/* ---- CTA banner: stronger pulse + larger glow ---- */
.cta-banner::before {
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.35) 0%, rgba(124,58,237,0.15) 50%, transparent 75%);
  animation: alc-pulseGlow 3s ease-in-out infinite;
}

/* ---- Mobile menu: slide-in animation ---- */
.nav-mobile-menu {
  display: flex !important;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 320ms ease,
              visibility 0s 320ms;
}
.nav-mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 320ms ease,
              visibility 0s 0s;
}

/* ---- Mobile touch targets ---- */
@media (max-width: 768px) {
  .nav-mobile-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .btn {
    min-height: 48px;
  }
}

/* ---- Smooth hero gradient shift ---- */
.hero {
  animation: alc-gradientShift 12s ease-in-out infinite;
}

/* ---- Marquee track: logo spacing ---- */
.marquee-track .partner-logo {
  margin: 0 var(--space-8);
}
/* ---- Strip-inner with marquee: reset flex-wrap ---- */
.events-strip .strip-inner {
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* =========================================================
   FAQ — Enhanced design & SEO-optimised layout
   ========================================================= */

/* Category group header */
.faq-category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0 0.5rem;
  margin-top: 1rem;
}
.faq-category-header:first-child { padding-top: 0; margin-top: 0; }
.faq-category-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.faq-category-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Rich answer content */
.faq-answer { padding-bottom: 1.5rem; }
.faq-answer p { margin: 0 0 0.75rem; color: var(--slate); line-height: 1.75; font-size: 0.9375rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--dark-slate); font-weight: 600; }
.faq-answer ul {
  margin: 0.625rem 0 0.75rem;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.faq-answer ul li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--slate);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.faq-answer ul li::before {
  content: '–';
  color: var(--blue);
  flex-shrink: 0;
  font-weight: 600;
  margin-top: 1px;
}
.faq-answer a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: var(--blue-dark); }

/* FAQ question: ensure consistent styling across all pages */
.faq-question {
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--dark-slate);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.5;
}
.faq-question:hover { color: var(--blue); }
.faq-question:hover .faq-icon { color: var(--blue); }
.faq-item.open .faq-question { color: var(--blue); }

/* FAQ count badge on section header */
.faq-count {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate);
  background: var(--off-white);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 0.5rem;
  vertical-align: middle;
}

/* =========================================================
   SCREENSHOT POLISH — Hover lift + ambient glow only
   No idle animation. Quality of the screenshot speaks.
   ========================================================= */

/* ── Browser frame: lift + glow on hover ── */
.browser-frame {
  position: relative;
  transition: box-shadow 450ms var(--ease), transform 450ms var(--ease);
}
/* Ambient glow underneath — emerges on hover */
.browser-frame::after {
  content: '';
  position: absolute;
  inset: -4px -8px -20px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(37,99,235,.18) 0%, transparent 70%);
  filter: blur(24px);
  border-radius: calc(var(--radius-lg) + 8px);
  opacity: 0;
  transition: opacity 500ms var(--ease);
  z-index: -1;
  pointer-events: none;
}
.browser-frame:hover::after { opacity: 1; }
.browser-frame:hover {
  box-shadow: 0 24px 64px rgba(37,99,235,.12), 0 12px 32px rgba(0,0,0,.14);
}

/* ── Wrapper injected by JS around .section-screenshot, .persona-screenshot ── */
/* Provides overflow clip + hover lift without auto-zoom distraction */
.screenshot-zoom-wrap {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 450ms var(--ease), transform 450ms var(--ease);
}
.screenshot-zoom-wrap.wrap-section { box-shadow: var(--shadow-md); }
.screenshot-zoom-wrap.wrap-persona { box-shadow: var(--shadow-lg); }

/* 1px inset border ring: invisible at rest, appears on hover */
.screenshot-zoom-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.15);
  opacity: 0;
  transition: opacity 450ms var(--ease);
  pointer-events: none;
}
.screenshot-zoom-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 52px rgba(37,99,235,.12), 0 8px 24px rgba(0,0,0,.10);
}
.screenshot-zoom-wrap:hover::after { opacity: 1; }

/* Img inside wrap inherits width; wrap handles border-radius */
.screenshot-zoom-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
}

/* =========================================================
   GLOBAL POLISH FIXES
   ========================================================= */

/* ── FAQ icon: smooth rotation on open ── */
.faq-question .faq-icon {
  transition: transform var(--duration) var(--ease), color var(--duration) var(--ease);
}

/* ── Roadmap status pulse: remove — badge color is sufficient ── */
.roadmap-status.status-next {
  animation: none;
}

/* ── Nav dropdown: keyboard accessible via focus-within ── */
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

/* ── Buttons: visible focus ring for keyboard users ── */
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.btn-primary:focus-visible {
  outline-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}
.btn-ghost-white:focus-visible {
  outline-color: rgba(255,255,255,.8);
  box-shadow: 0 0 0 4px rgba(255,255,255,.2);
}

/* ── Persona tabs: focus ring ── */
.persona-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Card hover: stronger shadow contrast ── */
.card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,.13), 0 0 0 1px rgba(37,99,235,.25);
}

/* ── Footer links: improve contrast ── */
.footer-links a,
.footer-col a,
footer a:not(.btn) {
  color: rgba(255,255,255,.75);
  transition: color 200ms var(--ease);
}
.footer-links a:hover,
.footer-col a:hover,
footer a:not(.btn):hover {
  color: rgba(255,255,255,1);
}

/* ── Section-header accent: hook for scroll activation (JS adds .in-view) ── */
.section-header-accent.in-view::before {
  transform: scaleX(1);
}

/* ── Stat numbers: tabular figures for alignment ── */
.stat-number,
.pricing-price,
.pricing-amount {
  font-variant-numeric: tabular-nums;
}

/* ── Reduced-motion: respect user preference, kill all decorative motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive layout helpers ── */

/* Section content grids (platform.html feature sections) — 4rem gap on desktop, tighter on mobile */
.gap-content-section { gap: 4rem; }
@media (max-width: 768px) { .gap-content-section { gap: 2rem; } }

/* Study Alerts 3-col source grid — stacks to 1 col on small screens */
.study-alerts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .study-alerts-grid { grid-template-columns: 1fr; }
}

/* Pricing preview 3-col grid (index.html) */
.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .pricing-preview-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* Advisor card full-width 2-col (Paper Analysis card in index.html) */
.advisor-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 768px) {
  .advisor-full-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Pricing card — reduce padding on very small screens */
@media (max-width: 480px) {
  .pricing-card { padding: var(--space-4); }
}

/* ── Workflow animation iframe embed ── */
/* ── Workflow animation: wrapper handles sizing, iframe is always native size ── */
.workflow-animation-col {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 80px;
  min-width: 0;      /* prevents grid item from overflowing its 1fr track on mobile */
  overflow: hidden;  /* contains any child that temporarily exceeds the column width */
}
@media (max-width: 1024px) {
  .workflow-animation-col { position: static; }
}

.wf-anim-wrapper {
  width: 100%;
  max-width: 420px;  /* caps at native width on desktop */
  height: 560px;     /* native height; JS sets exact scaled height on mobile */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
}

.workflow-animation-frame {
  display: block;
  width: 100%;   /* always fills wrapper — never wider than viewport */
  height: 100%;  /* fills JS-set wrapper height */
  border: none;
  /* no transform needed: content scales itself internally via body zoom */
}

/* =========================================================
   MOBILE POLISH — v3
   Targeted fixes for small-screen readability & layout
   ========================================================= */

/* ── Section headers ── */
@media (max-width: 768px) {
  .section-header { margin-bottom: var(--space-8); }
  .section-header.centered p { font-size: 1rem; }
}

/* ── Feature cards ── */
@media (max-width: 480px) {
  .feature-card { padding: var(--space-5); }
}

/* ── Hero browser-frame: reduce chrome bar size on mobile ── */
@media (max-width: 480px) {
  .browser-frame .bf-bar { padding: 8px 10px; gap: 7px; }
  .browser-frame .bf-dot { width: 10px; height: 10px; }
  .browser-frame .bf-url { font-size: 0.75rem; padding: 3px 10px; }
}

/* ── Prevent hero blobs from causing horizontal overflow ── */
.hero { overflow: hidden; }

/* ── Text-lg: slightly smaller on mobile ── */
@media (max-width: 480px) {
  .text-lg { font-size: 1rem; }
}

/* ── Hero CTA button stack: full width on small phones ── */
@media (max-width: 400px) {
  .hero-ctas .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── advisor-card: reduce padding on mobile ── */
@media (max-width: 768px) {
  .advisor-card { padding: var(--space-5) !important; }
}

/* ── Blog article hero images in article pages ── */
.article-hero img,
.post-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ── Section-screenshot: tighter radius on mobile ── */
@media (max-width: 480px) {
  .section-screenshot { border-radius: var(--radius); }
}

/* ── Events strip (marquee) on mobile: ensure no horizontal scroll ── */
@media (max-width: 768px) {
  .events-strip { overflow: hidden; }
}

/* ── Pricing grid: ensure cards don't overflow on very small screens ── */
@media (max-width: 380px) {
  .pricing-card .pricing-price { font-size: 2rem; }
}

/* ── Study Alerts source grid: two-col on medium mobile, one on small ── */
@media (max-width: 768px) and (min-width: 641px) {
  .study-alerts-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Stat grid spacing on small screens ── */
@media (max-width: 480px) {
  .stat-grid { gap: var(--space-4); }
}

/* ── Section padding: reduce further on very small screens ── */
@media (max-width: 380px) {
  .section { padding: var(--space-10) 0; }
  :root { --container-pad: 12px; }
}

/* ── Contact page grids ── */
.contact-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 900px;
  margin: 0 auto;
}
.contact-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .contact-grid-2 { grid-template-columns: 1fr; gap: 1rem; }
  .contact-grid-3 { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 480px) {
  /* Contact cards: reduce padding on mobile */
  .contact-grid-2 > div,
  .contact-grid-3 > div {
    padding: 1.5rem !important;
  }
}