:root {
  /* Bitmaps: assets/homepage/ — Aura (.vl-ph-portrait), rails (vault…secure), tour (files + tour-email / tour-chat mocks) */
  --white: #ffffff;
  --page: #f6f6f6;
  --bg: #eceeef;
  --bg-card: #ffffff;
  --t1: #1d1c1d;
  --t2: #454447;
  --t3: #868686;
  /* Primary marketing accent (blue) */
  --slack-green: #2563eb;
  --slack-green-hover: #1d4ed8;
  --slack-green-soft: #eff6ff;
  --slack-green-border: #bfdbfe;
  --slack-ink: #0f172a;
  /* Links / secondary UI blue */
  --blue: #1d4ed8;
  --blue-light: #eff6ff;
  --blue-mid: #bfdbfe;
  /* Legacy token names — aligned to primary blue */
  --indigo: #1e40af;
  --indigo-light: #dbeafe;
  --teal: #0d9488;
  --teal-light: #f0fdfa;
  --amber: #d97706;
  --amber-light: #fffbeb;
  --green: #1f9d55;
  --green-light: #e8f5ee;
  --red: #dc2626;
  --red-light: #fef2f2;
  --border: #dddddd;
  --border-light: #eceeef;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.05);
  --f-head: 'Plus Jakarta Sans', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-display: Georgia, 'Times New Roman', Times, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Main column (~+25% vs former 1180px); nav/hero/sections share this cap */
  --layout-max: 1475px;
  --pipeline-track-min: 1125px;
  --pipeline-track-max: 1550px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--page); color: var(--t1); font-family: var(--f-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }

/* Section display headings — same stack as #feature-clips ("Manage all of your work…") */
.section-title,
.fc-section-title {
  font-family: var(--f-display), var(--f-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--t1);
}
.section-title { font-size: 44px; margin-bottom: 16px; }
.section-title .accent { color: var(--slack-green); }
.fc-section-title { font-size: clamp(32px, 3.5vw, 44px); margin-bottom: 16px; }

/* Section body copy — matches .hero-sub (Inter 17 / 1.75 / secondary ink) */
.hero-sub,
.section-sub,
.fc-section-intro,
.feat-desc,
.wf-step-desc,
.stat-desc,
.cp-desc,
.sec-desc,
.proof-desc,
.proof-quote p,
.tcard-quote,
.vl-secure-points li,
.ops-bullets li,
.fc-tour-desc {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--t2);
  line-height: 1.75;
}

/* ── GRADIENT ACCENT TEXT ── */
.gradient-accent {
  background: linear-gradient(135deg, #1e40af 0%, var(--slack-green) 55%, #60a5fa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── NAV glassmorphism refinement ── */
nav {
  height: 72px; display: flex; align-items: center; position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border); transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 40px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-size: 20px; font-weight: 800; color: var(--t1); letter-spacing: -0.02em; }
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.logo span { color: var(--slack-ink); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--t2); transition: color 0.2s; }
.nav-links a:hover { color: var(--t1); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger { color: var(--t1); }
.nav-dropdown-chevron { transition: transform 0.2s; }
.nav-dropdown.is-open .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100vw - 40px));
  max-width: 1240px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md, 0 12px 40px rgba(15, 23, 42, 0.12));
  z-index: 400;
  overflow: hidden;
}
.nav-dropdown-item {
  display: block;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--t2);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background: var(--bg);
  color: var(--t1);
  outline: none;
}
.nav-mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 100%;
}
.nav-mega-main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  padding: 28px 30px 30px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.nav-mega-heading {
  display: block;
  margin: 4px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.nav-mega-link {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
}
.nav-mega-link:hover,
.nav-mega-link:focus {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(248, 250, 252, 0.92);
}
.nav-mega-link-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--t1);
  margin-bottom: 5px;
}
.nav-mega-link-desc {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--t3);
}
.nav-mega-rail {
  padding: 28px 26px 30px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(248, 244, 236, 0.98), rgba(244, 239, 229, 0.98)),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-mega-rail-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b5e3c;
}
.nav-mega-rail-title {
  font-family: var(--f-display), var(--f-head);
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1e293b;
  margin: 0;
}
.nav-mega-rail-copy {
  font-size: 14px;
  line-height: 1.65;
  color: #5b6472;
  margin: 0;
}
.nav-mega-rail-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.nav-mega-rail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--slack-green);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
}
.nav-mega-rail-cta:hover { background: var(--slack-green-hover); color: #fff !important; }
.nav-mega-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slack-green-hover) !important;
}
.nav-mega-rail-link:hover { color: var(--slack-green) !important; }
.nav-ctas { display: flex; align-items: center; gap: 12px; }
.nav-mobile-trigger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.82);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}
.nav-mobile-trigger span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--t1);
}
.nav-mobile-shell[hidden] { display: none !important; }
.nav-mobile-shell {
  position: fixed;
  inset: 0;
  z-index: 420;
}
.nav-mobile-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  cursor: pointer;
}
.nav-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
}
.nav-mobile-head,
.nav-mobile-foot {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-foot {
  border-bottom: 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav-mobile-brand { font-size: 20px; font-weight: 800; }
.nav-mobile-close {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(248,250,252,0.92);
  cursor: pointer;
}
.nav-mobile-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--t1);
  border-radius: 999px;
}
.nav-mobile-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.nav-mobile-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-mobile-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile-group,
.nav-mobile-toplink {
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.nav-mobile-accordion-trigger,
.nav-mobile-toplink {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  text-align: left;
}
.nav-mobile-accordion-trigger svg { transition: transform 0.2s ease; }
.nav-mobile-accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mobile-accordion-panel {
  display: grid;
  gap: 18px;
  padding: 4px 0 18px;
}
.nav-mobile-section {
  display: grid;
  gap: 4px;
}
.nav-mobile-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 6px;
}
.nav-mobile-link {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
}
.nav-mobile-link:hover,
.nav-mobile-toplink:hover { color: var(--t1); }
.nav-mobile-cta {
  width: 100%;
  justify-content: center;
}
.btn-ghost { font-size: 14px; font-weight: 500; color: var(--t2); padding: 8px 16px; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.btn-ghost:hover { background: var(--bg); color: var(--t1); }
.btn-nav { background: var(--slack-green); color: white; padding: 9px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background 0.2s, transform 0.15s; }
.btn-nav:hover { background: var(--slack-green-hover); transform: translateY(-1px); }

/* ── HERO — HubSpot-style top band (full-bleed photo + dark scrim) ── */
@media (max-width: 1024px) {
  .nav-inner { padding: 0 20px; }
  .nav-links,
  .nav-ctas { display: none; }
  .nav-mobile-trigger { display: inline-flex; }
}

@media (max-width: 640px) {
  .nav-mobile-panel { width: min(100vw, 420px); }
  .nav-mobile-head,
  .nav-mobile-foot { padding-left: 18px; padding-right: 18px; }
  .nav-mobile-body { padding-left: 18px; padding-right: 18px; }
}

.hero-hubspot {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(76vh, 760px);
  padding: clamp(100px, 14vh, 140px) 24px clamp(72px, 10vh, 100px);
  text-align: center;
  color: #fff;
  background-color: #0f172a;
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.52) 42%, rgba(15, 23, 42, 0.72) 100%),
    url('assets/homepage/consult.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-hubspot-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
}
.hero-hubspot-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 20px;
}
.hero-hubspot-title {
  font-family: var(--f-display), Georgia, serif;
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #fff;
}
.hero-hubspot-dot {
  color: #ff5c35;
  -webkit-text-fill-color: #ff5c35;
}
.hero-hubspot-sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 auto 36px;
}
.hero-hubspot-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.btn-hubspot-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #ff5c35;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 92, 53, 0.35);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-hubspot-primary:hover {
  background: #e54a28;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 92, 53, 0.4);
}
.btn-hubspot-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.95);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-hubspot-secondary:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-2px);
}

/* ── HERO — two-column product story (below HubSpot band) ── */
.hero.hero-below {
  padding: 112px 0 96px;
  position: relative;
  overflow: hidden;
  background: var(--white);
  scroll-margin-top: 88px;
}
.hero.hero-below::before {
  content: ''; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 70%); pointer-events: none;
}
.hero.hero-below::after {
  content: ''; position: absolute; bottom: -100px; left: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(13,148,136,0.06) 0%, transparent 70%); pointer-events: none;
}
.hero-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: var(--slack-green-soft); border: 1px solid var(--slack-green-border); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--slack-green-hover); margin-bottom: 24px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.1s forwards; }
.badge-dot { width: 20px; height: 20px; background: var(--slack-green); border-radius: 50%; display: grid; place-items: center; }
.badge-dot::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; }
.hero h1 { font-family: var(--f-display), var(--f-head); font-size: clamp(40px, 5vw, 56px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.2s forwards; color: var(--slack-ink); }
.hero h1 .accent {
  background: linear-gradient(135deg, #1e40af 0%, var(--slack-green) 50%, #60a5fa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { margin-bottom: 36px; max-width: 500px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.32s forwards; }
.hero-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 36px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.42s forwards; }
.btn-primary { padding: 14px 28px; background: var(--slack-green); color: white; border-radius: 10px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(37,99,235,0.28); position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { background: var(--slack-green-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,0.35); }
.btn-secondary { padding: 14px 28px; border: 1.5px solid var(--border); color: var(--t1); border-radius: 10px; font-size: 15px; font-weight: 600; transition: border-color 0.2s, color 0.2s, background 0.2s; background: var(--white); }
.btn-secondary:hover { border-color: var(--t1); color: var(--t1); background: var(--page); }
.trust-row { display: flex; gap: 24px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.52s forwards; }
.trust-pill { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t3); font-weight: 500; }
.trust-pill svg { width: 14px; height: 14px; color: var(--green); }

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

/* ── HERO VISUAL ── */
.hero-visual { position: relative; opacity: 0; animation: fadeIn 0.8s var(--ease) 0.3s forwards; }
.hero-visual-extract { width: 100%; display: flex; justify-content: flex-end; align-items: flex-start; }
.hero-visual-extract .ai-extract-panel {
  width: 100%; max-width: min(100%, 540px); margin: 0;
  box-shadow: var(--shadow-lg);
}
.extraction-scan-visual { width: 100%; display: flex; justify-content: center; align-items: flex-start; }
.extraction-scan-visual--tour-hint {
  min-height: 220px;
  padding: 28px 20px;
  align-items: center;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  box-sizing: border-box;
}
.extraction-scan-placeholder { max-width: 420px; margin: 0 auto; }
.extraction-scan-placeholder a { color: var(--slack-green-hover); font-weight: 700; text-decoration: underline; }
.extraction-scan-visual .hero-scan-card,
.ai-extract-grid .hero-scan-card { max-width: 480px; width: 100%; margin: 0 auto; }
.dash-card { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.dash-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--bg); }
.dots { display: flex; gap: 5px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #fc6058; }
.dot-y { background: #fec02f; }
.dot-g { background: #2aca3e; }
.dash-label { font-size: 11px; font-weight: 600; color: var(--t3); margin-left: 4px; }
.dash-content { padding: 16px; }

.k-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.k-head { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t3); padding: 4px 8px; margin-bottom: 4px; }
.k-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 5px; }
.k-name { font-size: 10px; font-weight: 600; color: var(--t1); }
.k-meta { font-size: 9px; color: var(--t3); margin-top: 2px; }
.k-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; margin-top: 4px; }
.bg-green { background: #dcfce7; color: #15803d; }
.bg-amber { background: #fef3c7; color: #b45309; }
.bg-red { background: #fee2e2; color: #b91c1c; }
.bg-blue { background: var(--blue-mid); color: var(--blue); }

.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.d-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.d-stat-num { font-size: 18px; font-weight: 800; color: var(--slack-green); line-height: 1; }
.d-stat-lbl { font-size: 9px; color: var(--t3); font-weight: 500; margin-top: 2px; }

.float-card { position: absolute; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226,232,240,0.8); border-radius: 12px; box-shadow: 0 8px 32px rgba(37,99,235,0.12), 0 2px 8px rgba(0,0,0,0.06); padding: 10px 14px; z-index: 5; }
.fc-top { top: -20px; right: -20px; animation: floatY 3s ease-in-out infinite; }
.fc-bot { bottom: -20px; left: -20px; animation: floatY 3s ease-in-out infinite 1.5s; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.fc-val { font-size: 18px; font-weight: 800; color: var(--slack-green); line-height: 1; display: block; }
.fc-lbl { font-size: 10px; color: var(--t3); font-weight: 500; margin-top: 2px; }

/* ── ACCESSIBILITY ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── FEATURE TOUR — tabbed list + single framed screenshot (Slack-style) ── */
.feature-clips-section { padding: 96px 0 88px; background: var(--white); border-bottom: 1px solid var(--border); }
.feature-clips-section .section-container { padding-left: 16px; padding-right: 16px; }
.fc-stack-section { display: flex; flex-direction: column; gap: 0; }
.fc-section-head {
  text-align: center; max-width: 720px; margin: 0 auto 48px; padding: 0 8px;
}
.fc-section-head .section-label { justify-content: center; margin-bottom: 14px; }
.fc-section-head .section-label::before { display: none; }
.fc-section-intro { margin: 0 auto; }

.fc-tour-split {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: var(--layout-max);
  margin: 0 auto;
  position: relative;
}
.fc-tour-split::before {
  content: '';
  position: absolute;
  inset: -12% -6% auto -6%;
  height: 85%;
  background: radial-gradient(ellipse 75% 55% at 72% 35%, rgba(31, 157, 85, 0.09), transparent 58%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(18, 100, 163, 0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.fc-tour-list,
.fc-tour-visual { position: relative; z-index: 1; min-width: 0; }

.fc-tour-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.fc-tour-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 22px 20px 22px 18px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 0 12px 12px 0;
  transition: background 0.2s, border-color 0.2s;
}
.fc-tour-item:hover { background: var(--page); }
.fc-tour-item.is-active {
  border-left-color: var(--slack-green);
  border-left-width: 4px;
  padding-left: 17px;
  background: var(--slack-green-soft);
}
.fc-tour-item:focus-visible {
  outline: 2px solid var(--slack-green);
  outline-offset: 2px;
}
.fc-tour-title {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(17px, 1.85vw, 19px);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0;
}
.fc-tour-item.is-active .fc-tour-title { color: var(--slack-green-hover); margin-bottom: 12px; }

.fc-tour-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.fc-tour-group { border-bottom: 1px solid var(--border); }
.fc-tour-group.is-expanded .fc-tour-sublist { display: flex; }
.fc-tour-item--parent { border-bottom: none; }
.fc-tour-sublist {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 12px 12px 28px;
  background: rgba(248, 250, 252, 0.65);
  border-left: 3px solid transparent;
}
.fc-tour-group.is-expanded .fc-tour-sublist,
.fc-tour-item--parent.is-active + .fc-tour-sublist {
  border-left-color: var(--slack-green);
}
.fc-tour-subitem {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  transition: background 0.15s, color 0.15s;
}
.fc-tour-subitem:hover,
.fc-tour-subitem.is-active {
  background: rgba(31, 157, 85, 0.08);
  color: var(--slack-green-hover);
}
.fc-tour-item.is-active .fc-tour-expand {
  grid-template-rows: 1fr;
}
.fc-tour-expand-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-tour-desc { display: block; margin: 0; }
.fc-tour-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--slack-green-hover);
}

@media (prefers-reduced-motion: reduce) {
  .fc-tour-expand { transition: none; }
}

.fc-tour-window {
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-card);
}
.fc-tour-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}
.fc-tour-dots { display: flex; gap: 5px; flex-shrink: 0; }
.fc-tour-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.fc-tour-dots span:nth-child(1) { background: #fc6058; }
.fc-tour-dots span:nth-child(2) { background: #fec02f; }
.fc-tour-dots span:nth-child(3) { background: #2aca3e; }
.fc-tour-chrome-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-tour-canvas {
  position: relative;
  /* 16:9 matches most screen recordings; media uses object-fit:contain so nothing is cropped */
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}
.fc-tour-media-root {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.fc-tour-media-root .fc-tour-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.fc-tour-media-root .fc-tour-chat-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.fc-tour-media-root .fc-tour-chat-embed .chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Tour email mock: match v8/index.html palette (blues + slate neutrals) inside embed only */
.fc-tour-media-root .fc-tour-email-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-mid: #dbeafe;
  --indigo: #4f46e5;
  --indigo-light: #eef2ff;
  --bg: #f8fafc;
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;
  --border: #e2e8f0;
}
.fc-tour-media-root .fc-tour-email-embed .email-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Tour Kanban: pipeline mock + index.html-like stage accents inside the tour frame */
.fc-tour-media-root .fc-tour-kanban-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: 0;
  box-shadow: none;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-mid: #dbeafe;
  --indigo: #4f46e5;
  --indigo-light: #eef2ff;
  --bg: #f8fafc;
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;
  --border: #e2e8f0;
}
.fc-tour-media-root .fc-tour-kanban-embed .section-container {
  max-width: 100%;
  margin: 0;
  padding: 8px 10px 12px;
}
.fc-tour-media-root .fc-tour-kanban-embed .pipeline-showcase-header {
  margin-bottom: 12px;
}
.fc-tour-media-root .fc-tour-kanban-embed .pipeline-showcase-header .section-title {
  font-size: clamp(17px, 2.6vw, 26px);
  margin-bottom: 6px;
}
.fc-tour-media-root .fc-tour-kanban-embed .section-sub {
  font-size: 12px;
  line-height: 1.45;
}
.fc-tour-media-root .fc-tour-kanban-embed .pipeline-track-wrap {
  padding: 0 8px 10px;
}
.fc-tour-media-root .fc-tour-kanban-embed .pipeline-stage-body {
  min-height: 140px;
}
/* Tour radar: calendar → expiry → tasks (JS adds .is-active per slide) */
.fc-tour-media-root .fc-tour-radar-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-mid: #dbeafe;
  --indigo: #4f46e5;
  --indigo-light: #eef2ff;
  --bg: #f8fafc;
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;
  --border: #e2e8f0;
}
.fc-tour-media-root .fc-tour-radar-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 6px;
  box-sizing: border-box;
}
.fc-tour-media-root .fc-tour-radar-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fc-tour-media-root .fc-tour-radar-slide .smart-cal-visual,
.fc-tour-media-root .fc-tour-radar-slide .expiry-visual,
.fc-tour-media-root .fc-tour-radar-slide .tasks-visual {
  max-width: 100%;
  margin: 0 auto;
}
/* Tour extract: AI scan mock — fill the 16:9 canvas like other tour clips (no 480px cap) */
.fc-tour-media-root .fc-tour-extract-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.fc-tour-media-root .fc-tour-extract-embed .extraction-scan-visual {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.fc-tour-media-root .fc-tour-extract-embed .hero-scan-card {
  max-width: none;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  box-shadow: none;
}
.fc-tour-media-root .fc-tour-extract-embed .hero-scan-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.fc-tour-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
/* Hint copy is only for empty / asset-missing states — hide once media or an inline embed is shown */
.fc-tour-window.fc-tour-window--has-media .fc-tour-fallback {
  display: none;
}
.fc-tour-fb-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t3);
}
.fc-tour-fb-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  line-height: 1.5;
  max-width: 320px;
}
.fc-tour-fb-title code {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

@media (max-width: 960px) {
  .fc-tour-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fc-tour-visual { order: -1; }
}

@media (max-width: 768px) {
  .feature-clips-section { padding: 56px 0 48px; }
  .fc-section-head { margin-bottom: 32px; }
  .fc-section-title { font-size: 28px; }
  .fc-tour-item { padding: 18px 16px; }
  .fc-tour-canvas { aspect-ratio: 16 / 9; }
}

.vl-aura-section { padding: 88px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.vl-aura-split {
  display: grid; grid-template-columns: 1fr minmax(280px, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start;
}
.aura-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.aura-cap-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
}
.aura-cap-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--slack-green-soft);
  color: var(--slack-green-hover);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aura-cap-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  color: var(--t1);
  margin-bottom: 8px;
}
.aura-cap-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--t2);
}
.vl-rails-section { padding: 0 0 24px; background: var(--white); }
.vl-rails-head { padding: 72px 0 48px; text-align: center; max-width: 720px; margin: 0 auto; }
.vl-rails-head .section-label { justify-content: center; }
.vl-rails-head .section-label::before { display: none; }
.vl-split-band {
  display: grid; grid-template-columns: 1fr minmax(260px, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: 72px 0; border-top: 1px solid var(--border);
}
.vl-split-band.vl-band-reverse { grid-template-columns: minmax(260px, 1fr) 1fr; }
.vl-split-band.vl-band-reverse .vl-split-text { order: 2; }
.vl-split-band.vl-band-reverse .vl-split-ph { order: 1; }
.vl-split-text .section-label { margin-bottom: 12px; }
.vl-split-text .section-title { margin-bottom: 14px; }
.vl-split-text .section-sub { margin: 0; max-width: 520px; }
.vl-ph {
  border-radius: 16px; border: 1px solid var(--border); overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
  background-size: 22px 22px;
}
/* Product rails + tour: same 16:9 clip as .fc-tour-canvas */
.vl-ph.vl-ph-tour-aspect { aspect-ratio: 16 / 9; }
/* Inline tour mocks in #rails when assets are missing — same embed rules as .fc-tour-media-root */
.vl-ph.vl-ph--rails-mock {
  display: block;
  padding: 0;
  gap: 0;
  background-image: none;
  position: relative;
  overflow: hidden;
}
.vl-ph.vl-ph--rails-mock .fc-tour-media-root {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.vl-ph-lg { aspect-ratio: 16 / 9; min-height: 220px; }
/* Aura marketing clip: artwork 536×906 (portrait); frame 75% scale vs native width — assets/homepage/aura.{webp,png,jpg} */
.vl-ph-lg.vl-ph-portrait {
  aspect-ratio: 536 / 906;
  width: 100%;
  max-width: calc(536px * 0.75);
  min-height: 0;
  margin-left: auto;
}
.vl-ph-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); }
.vl-ph-title { font-size: 15px; font-weight: 700; color: var(--t2); text-align: center; padding: 0 20px; line-height: 1.4; }
/* Filled by script: assets/homepage/<slot>.* — img or video (.vl-ph-media); data-vl-prefer="video" tries mp4/webp first */
.vl-ph.vl-ph--has-media {
  padding: 0;
  gap: 0;
  background-image: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.vl-ph.vl-ph--has-media .vl-ph-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Aura portrait: keep full frame visible (corner chrome / FAB); avoid cover+scale clipping */
.vl-aura-split .vl-ph[data-vl-slot="aura"].vl-ph--has-media .vl-ph-media {
  object-fit: contain;
  object-position: center;
}
.vl-secure-section { padding: 88px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vl-secure-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; margin-top: 40px; }
.vl-secure-grid > .reveal {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.vl-secure-grid > .reveal .section-label {
  justify-content: center;
}
.vl-secure-grid > .reveal .vl-secure-enterprise-points-clean {
  text-align: left;
}
.vl-secure-points { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.vl-secure-points li { padding-left: 22px; position: relative; list-style: none; }
.vl-secure-points li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--slack-green);
}
.vl-secure-copy {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--t2);
  line-height: 1.75;
}
.vl-secure-copy-clean {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--t2);
  line-height: 1.75;
}
.vl-secure-enterprise-points { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.vl-secure-enterprise-points li { padding-left: 22px; position: relative; list-style: none; font-size: 17px; color: var(--t2); line-height: 1.75; }
.vl-secure-enterprise-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slack-green);
}
.vl-secure-enterprise-points strong { color: var(--t1); }
.vl-secure-enterprise-points-clean { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.vl-secure-enterprise-points-clean li { padding-left: 22px; position: relative; list-style: none; font-size: 17px; color: var(--t2); line-height: 1.75; }
.vl-secure-enterprise-points-clean li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slack-green);
}
.vl-secure-enterprise-points-clean strong { color: var(--t1); }
.vl-secure-section .reveal > .vl-secure-copy,
.vl-secure-section .reveal > .vl-secure-enterprise-points,
.vl-secure-section .reveal > .section-sub,
.vl-secure-section .reveal > .vl-secure-points { display: none; }
.features-slim .feat-grid-compact { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .vl-aura-split, .vl-secure-grid { grid-template-columns: 1fr; }
  .aura-cap-grid { grid-template-columns: 1fr; }
  .vl-ph-lg.vl-ph-portrait { margin-right: auto; }
  .vl-split-band, .vl-split-band.vl-band-reverse { grid-template-columns: 1fr; }
  .vl-split-band.vl-band-reverse .vl-split-text { order: 0; }
  .vl-split-band.vl-band-reverse .vl-split-ph { order: 0; }
  .features-slim .feat-grid-compact { grid-template-columns: 1fr; }
}

/* ── TICKER (Slack-like dark band) ── */
.ticker { background: #1d1c1d; padding: 14px 0; overflow: hidden; cursor: pointer; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track { display: flex; gap: 48px; animation: tickScroll 22s linear infinite; white-space: nowrap; }
@keyframes tickScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); display: flex; align-items: center; gap: 10px; transition: color 0.2s; }
.ticker:hover .tick-item { color: rgba(255,255,255,0.95); }
.tick-dot { width: 5px; height: 5px; background: var(--slack-green); border-radius: 50%; flex-shrink: 0; }
template + .ticker { display: none; }

/* ── MOBILE KANBAN HERO ── */
@media (max-width: 768px) {
  .k-cols { grid-template-columns: 1fr; overflow-x: auto; display: flex; gap: 8px; padding-bottom: 8px; }
  .k-cols > div { min-width: 140px; flex-shrink: 0; }
  .dash-card { overflow: hidden; }
  .dash-content { overflow-x: auto; }
}

/* ── STATS ── */
.stats { padding: 72px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.stats-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.stat-box { padding: 36px 28px; position: relative; transition: background 0.2s; }
.stat-box:not(:last-child) { border-right: 1px solid var(--border); }
.stat-box:hover { background: var(--bg); }
.stat-num { font-family: var(--f-head); font-size: 48px; font-weight: 800; color: var(--t1); line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px; }
.stat-num em { color: var(--slack-green); font-style: normal; }
.stat-desc { font-weight: 400; }

/* ── SECTION SHARED ── */
.section-container { max-width: var(--layout-max); margin: 0 auto; padding: 0 40px; }
.section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slack-green-hover); margin-bottom: 16px; }
.section-label::before { content: ''; width: 16px; height: 2px; background: var(--slack-green); display: block; border-radius: 2px; }
.section-sub { max-width: 580px; }

/* ── FEATURES ── */
.features { padding: 100px 0; background: var(--white); border-top: 1px solid var(--border); }
.features-header { margin-bottom: 60px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.feat-card {
  background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px;
  position: relative; overflow: hidden; cursor: default;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--slack-green-border); }

/* ── HOVER ANIMATIONS ON FEATURE CARDS ── */
.feat-card .anim-preview {
  position: absolute; inset: 0; background: white; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none; z-index: 10;
}
.feat-card:hover .anim-preview { opacity: 1; }
.feat-card:hover .feat-main { opacity: 0; transition: opacity 0.2s; }
.feat-main { transition: opacity 0.2s; }

/* Pipeline animation */
.anim-pipeline { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.anim-bar { border-radius: 4px; animation: barGrow 1s ease-in-out infinite alternate; }
.bar-blue { background: var(--blue); width: 20px; height: 60%; animation-delay: 0s; }
.bar-indigo { background: var(--indigo); width: 20px; height: 85%; animation-delay: 0.15s; }
.bar-teal { background: var(--teal); width: 20px; height: 45%; animation-delay: 0.3s; }
.bar-amber { background: var(--amber); width: 20px; height: 70%; animation-delay: 0.45s; }
.bar-green { background: var(--green); width: 20px; height: 55%; animation-delay: 0.6s; }
@keyframes barGrow { from { transform: scaleY(0.8); } to { transform: scaleY(1.1); } }

/* Chat animation */
.anim-chat { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.chat-bubble { border-radius: 10px; padding: 7px 11px; font-size: 10px; font-weight: 500; max-width: 80%; animation: bubbleIn 0.5s ease both; }
.bubble-in { background: var(--blue); color: white; margin-left: auto; }
.bubble-out { background: var(--bg); color: var(--t2); border: 1px solid var(--border); }
.bubble-typing { background: var(--bg); border: 1px solid var(--border); display: flex; gap: 4px; padding: 8px 12px; width: 48px; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); animation: typePulse 1.2s ease infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typePulse { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }

/* Email animation */
.anim-email { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.email-row { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; animation: slideIn 0.4s ease both; }
.email-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.email-text { font-size: 10px; font-weight: 600; color: var(--t2); flex: 1; }
.email-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* Task animation */
.anim-tasks { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.task-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.task-check { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.task-check.done { background: var(--green); }
.task-check.done::after { content: ''; width: 6px; height: 4px; border-left: 1.5px solid white; border-bottom: 1.5px solid white; transform: rotate(-45deg) translate(0.5px, -0.5px); display: block; }
.task-check.pending { background: white; border: 1.5px solid var(--border); animation: taskPop 2s ease infinite; }
@keyframes taskPop { 50% { border-color: var(--blue); transform: scale(1.1); } }
.task-text { font-size: 10px; font-weight: 500; flex: 1; }
.task-text.striked { text-decoration: line-through; color: var(--t3); }

/* Doc animation */
.anim-docs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.doc-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.doc-icon { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.doc-name { font-size: 10px; font-weight: 600; flex: 1; color: var(--t2); }
.doc-status { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.scan-bar { height: 2px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.scan-fill { height: 100%; background: var(--blue); border-radius: 2px; animation: scanProg 2s ease-in-out infinite; }
@keyframes scanProg { 0% { width: 0; } 70% { width: 100%; } 100% { width: 100%; } }

/* Calendar animation */
.anim-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.cal-day { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: var(--t3); }
.cal-today { background: var(--blue); color: white; }
.cal-event { animation: calPulse 1.5s ease infinite alternate; }
.cal-event-red { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.cal-event-amber { background: #fffbeb; color: var(--amber); border: 1px solid #fde68a; }
.cal-event-green { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
@keyframes calPulse { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Matrix animation */
.anim-matrix { position: relative; width: 120px; height: 80px; flex-shrink: 0; }
.matrix-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; animation: matrixFloat 2.5s ease-in-out infinite; }
@keyframes matrixFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-4px); } }

/* Score animation */
.anim-score { display: flex; gap: 12px; align-items: center; }
.score-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--slack-green) 0% 78%, var(--border) 78% 100%); display: grid; place-items: center; flex-shrink: 0; animation: spinRing 2s ease-out; }
@keyframes spinRing { from { background: conic-gradient(var(--slack-green) 0% 0%, var(--border) 0% 100%); } to { background: conic-gradient(var(--slack-green) 0% 78%, var(--border) 78% 100%); } }
.score-inner { width: 48px; height: 48px; background: white; border-radius: 50%; display: grid; place-items: center; }
.score-val { font-size: 14px; font-weight: 800; color: var(--t1); }
.score-flags-mini { display: flex; flex-direction: column; gap: 4px; }
.sflag { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--t2); }
.sflag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.feat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.feat-title { font-family: var(--f-display), var(--f-head); font-size: 17px; font-weight: 600; color: var(--t1); margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.2; }
.feat-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.feat-win { margin-top: 14px; padding: 10px 12px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--blue); }
.feat-win p { font-size: 12px; color: var(--t2); line-height: 1.5; font-weight: 500; }
.feat-win strong { color: var(--blue); }

/* ── CHAT SECTION ── */
.chat-section { padding: 140px 0; background: var(--white); }
.chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.chat-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--slack-green), #60a5fa); display: grid; place-items: center; color: white; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.chat-person-name { font-size: 13px; font-weight: 600; }
.chat-person-sub { font-size: 11px; color: var(--t3); }
.chat-badges-row { display: flex; gap: 6px; }
.chat-badges-row span { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg.them { align-items: flex-start; }
.msg.me { align-items: flex-end; margin-left: auto; }
.msg-bubble { padding: 9px 13px; border-radius: 12px; font-size: 12px; line-height: 1.55; font-weight: 400; }
.msg.them .msg-bubble { background: var(--bg); border: 1px solid var(--border); color: var(--t2); border-radius: 4px 12px 12px 12px; }
.msg.me .msg-bubble { background: var(--blue); color: white; border-radius: 12px 4px 12px 12px; }
.msg-sender { font-size: 10px; color: var(--t3); margin-bottom: 3px; font-weight: 600; }
.doc-attach { margin-top: 6px; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.doc-attach-icon { width: 28px; height: 28px; background: var(--blue-light); border-radius: 6px; display: grid; place-items: center; font-size: 13px; }
.doc-attach-name { font-size: 11px; font-weight: 600; color: var(--t1); }
.doc-attach-size { font-size: 10px; color: var(--t3); }
.ai-summary-bar { margin: 4px 8px; background: linear-gradient(90deg, var(--indigo-light), var(--blue-light)); border: 1px solid var(--blue-mid); border-radius: 8px; padding: 8px 12px; display: flex; gap: 8px; align-items: flex-start; }
.ai-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.ai-text { font-size: 11px; color: var(--t2); line-height: 1.5; }
.chat-input-bar { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.chat-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--t3); font-family: var(--f-body); }
.chat-send { width: 32px; height: 32px; background: var(--blue); border-radius: 8px; display: grid; place-items: center; }
.chat-send svg { width: 14px; height: 14px; fill: white; }

.chat-right { }
.chat-points { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.chat-point { display: flex; gap: 14px; align-items: flex-start; }
.cp-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.cp-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }

/* ── EMAIL SECTION ── */
.email-section { padding: 140px 0; background: var(--bg); }
.email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.email-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.email-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 8px; }
.email-topbar-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.email-list { }
.email-item { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; transition: background 0.15s; cursor: default; }
.email-item:hover { background: var(--bg); }
.email-item:last-child { border-bottom: none; }
.ei-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.ei-subject { font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 2px; }
.ei-preview { font-size: 12px; color: var(--t3); }
.ei-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ei-tag { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 5px; }
.ei-time { font-size: 11px; color: var(--t3); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.ei-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 5px; }

/* ── TASKS SECTION ── */
.tasks-section { padding: 140px 0; background: var(--white); }
.tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.tasks-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.task-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: space-between; }
.task-topbar-title { font-size: 13px; font-weight: 700; }
.task-count-badge { background: var(--blue); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; }
.task-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; transition: transform 0.2s; }
.task-item:hover { transform: translateX(3px); }
.task-circle { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: grid; place-items: center; }
.task-circle.done { border-color: var(--green); background: var(--green); }
.task-circle.done::after { content: ''; width: 7px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(0.5px, -0.5px); display: block; }
.task-circle.urgent { border-color: var(--red); animation: urgentPulse 1.5s ease infinite; }
@keyframes urgentPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,0.15); } }
.task-info { flex: 1; }
.task-name { font-size: 13px; font-weight: 600; color: var(--t1); }
.task-name.done { text-decoration: line-through; color: var(--t3); }
.task-student { font-size: 11px; color: var(--t3); margin-top: 1px; }
.task-due { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.due-tomorrow { background: #fef3c7; color: var(--amber); }
.due-overdue { background: #fee2e2; color: var(--red); }
.due-today { background: var(--blue-light); color: var(--blue); }
.task-auto-badge { padding: 8px 16px; background: var(--slack-green-soft); border: 1px solid var(--slack-green-border); display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; border-radius: 8px; }
.tab-auto-text { font-size: 12px; color: var(--indigo); font-weight: 500; }

/* ── WORKFLOW ── */
.workflow { padding: 140px 0; background: var(--bg); }
.wf-intro { margin-bottom: 64px; }
.wf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--border); }
.wf-step { background: white; padding: 28px; position: relative; }
.wf-step-num { font-family: var(--f-head); font-size: 11px; font-weight: 700; color: var(--slack-green-hover); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.wf-step-num::before { content: ''; width: 20px; height: 2px; background: var(--slack-green); border-radius: 2px; }
.wf-step-title { font-family: var(--f-display), var(--f-head); font-size: 18px; font-weight: 600; color: var(--t1); margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.2; }
.wf-arrow { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: var(--slack-green); border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.wf-arrow::after { content: '›'; color: white; font-size: 14px; font-weight: 700; line-height: 1; }
.wf-step:last-child .wf-arrow { display: none; }

/* ── TESTIMONIALS ── */
.testimonials { padding: 120px 0; background: var(--page); overflow: hidden; border-top: 1px solid var(--border); }
.test-header { text-align: center; margin-bottom: 56px; }
.test-track-wrap { overflow: hidden; position: relative; }
.test-track-wrap::before, .test-track-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.test-track-wrap::before { left: 0; background: linear-gradient(to right, var(--page), transparent); }
.test-track-wrap::after { right: 0; background: linear-gradient(to left, var(--page), transparent); }
.test-track { display: flex; gap: 20px; animation: testScroll 28s linear infinite; width: max-content; }
@keyframes testScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tcard { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: 300px; flex-shrink: 0; }
.tcard-stars { color: #f59e0b; font-size: 13px; margin-bottom: 12px; letter-spacing: 2px; }
.tcard-quote { margin-bottom: 16px; }
.tcard-author { display: flex; align-items: center; gap: 10px; }
.tcard-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: white; }
.tcard-name { font-size: 13px; font-weight: 700; }
.tcard-role { font-size: 11px; color: var(--t3); }

/* ── COMPARISON ── */
.comparison { padding: 140px 0; background: var(--bg); }
.compare-table { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-top: 56px; }
.compare-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; background: var(--bg); border-bottom: 1px solid var(--border); }
.compare-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: var(--blue-light); }
.ch { padding: 16px 20px; font-size: 12px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.07em; }
.ch.hl { background: var(--slack-green); color: white; }
.cd { padding: 14px 20px; font-size: 14px; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.cd.feat { color: var(--t1); font-weight: 500; }
.cd.hl { background: rgba(37,99,235,0.04); }
.yes { color: var(--green); font-size: 16px; font-weight: 700; }
.no { color: #d1d5db; font-size: 16px; }
.part { color: var(--amber); font-size: 16px; }

/* ── CTA ── */
.cta-section { padding: 100px 32px; background: var(--white); }
.cta-box { max-width: var(--layout-max); margin: 0 auto; background: linear-gradient(135deg, #1e40af 0%, var(--slack-green) 55%, #60a5fa 100%); border-radius: 24px; padding: 72px 80px; position: relative; overflow: hidden; }
.cta-box::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); }
.cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; position: relative; z-index: 1; }
.cta-title {
  font-family: var(--f-display), var(--f-head);
  font-size: 44px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.cta-sub {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 28px;
}
.cta-trust { display: flex; gap: 20px; }
.cta-trust-item { font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.cta-trust-item::before { content: '✓'; color: rgba(255,255,255,0.9); font-weight: 700; }
.cta-right { display: flex; flex-direction: column; gap: 12px; min-width: 200px; }
.btn-cta-white { padding: 15px 28px; background: white; color: var(--slack-green-hover); border-radius: 10px; font-size: 15px; font-weight: 700; text-align: center; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.2); }
.btn-cta-outline { padding: 15px 28px; border: 1.5px solid rgba(255,255,255,0.3); color: white; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: center; transition: border-color 0.2s; }
.btn-cta-outline:hover { border-color: rgba(255,255,255,0.6); }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--border); padding: 60px 0 36px; background: var(--white); }
.foot-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 40px; }
.foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--border); margin-bottom: 36px; }
.foot-brand p { font-size: 14px; color: var(--t3); margin-top: 12px; max-width: 240px; line-height: 1.65; }
.foot-col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--t2); margin-bottom: 8px; transition: color 0.2s; }
.foot-col a:hover { color: var(--t1); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--t3); }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 48px; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stats-inner .stat-box:nth-child(2) { border-right: 1px solid var(--border); }
  .stats-inner .stat-box:nth-child(even) { border-right: none; }
  .stats-inner .stat-box:nth-child(3), .stats-inner .stat-box:nth-child(4) { border-top: 1px solid var(--border); }
  .chat-grid, .email-grid, .tasks-grid { grid-template-columns: 1fr; gap: 48px; }
  .wf-steps { grid-template-columns: 1fr 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-right { align-items: flex-start; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero h1 { font-size: 38px; }
  .section-title { font-size: 34px; }
  .feat-grid { grid-template-columns: 1fr; }
  .wf-steps { grid-template-columns: 1fr; }
  .cta-box { padding: 40px 24px; }
  .cta-title { font-size: 34px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .compare-head, .compare-row { grid-template-columns: 2fr 1fr; }
  .compare-head .ch:nth-child(3), .compare-head .ch:nth-child(4),
  .compare-row .cd:nth-child(3), .compare-row .cd:nth-child(4) { display: none; }
}

/* ── MANAGER / OWNER SECTION ── */
.mgr-section { padding: 140px 0; background: var(--bg); }
/* Homepage (index - 3): band after expiry radar */
.mgr-section.mgr-after-expiry {
  padding: 88px 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
/* Generic hide for full sections still in the DOM */
.vl-section--hidden {
  display: none !important;
}
/* Product rails deep-dive — hidden on this page layout */
.vl-rails-section.vl-rails-section--hidden {
  display: none !important;
}
.mgr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

.mgr-visual { display: flex; flex-direction: column; gap: 14px; }
.mgr-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-sm); }
.mgr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mgr-card-title { font-size: 12px; font-weight: 600; color: var(--t2); flex: 1; }
.mgr-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }

.mgr-digest-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mgr-digest-item { text-align: center; padding: 10px 6px; background: var(--bg); border-radius: 8px; }
.mgr-digest-num { font-family: var(--f-head); font-size: 22px; font-weight: 800; line-height: 1; }
.mgr-digest-lbl { font-size: 10px; color: var(--t3); font-weight: 500; margin-top: 3px; }

.mgr-perf-list { display: flex; flex-direction: column; gap: 8px; }
.mgr-perf-row { display: flex; align-items: center; gap: 8px; }
.mgr-perf-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: white; flex-shrink: 0; }
.mgr-perf-name { font-size: 12px; font-weight: 600; color: var(--t1); width: 110px; flex-shrink: 0; }
.mgr-perf-bar-wrap { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.mgr-perf-bar { height: 100%; border-radius: 3px; transition: width 1s var(--ease); }
.mgr-perf-cases { font-size: 11px; color: var(--t3); font-weight: 500; flex-shrink: 0; width: 48px; text-align: right; }

.mgr-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mgr-role-card { border: 1px solid; border-radius: 10px; padding: 10px; }
.mgr-role-label { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; display: inline-block; margin-bottom: 8px; }
.mgr-role-items { display: flex; flex-direction: column; gap: 4px; }
.mgr-role-item { font-size: 10px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.mgr-role-item.yes { color: var(--t2); }
.mgr-role-item.yes::before { content: '✓'; color: var(--green); font-weight: 700; font-size: 10px; }
.mgr-role-item.no { color: var(--t3); }
.mgr-role-item.no::before { content: '✕'; color: #d1d5db; font-size: 10px; }

@media (max-width: 1024px) {
  .mgr-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── UTILITY ── */
.text-center { text-align: center; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }
.text-center .section-label { justify-content: center; }
.count-anim { display: inline; }

/* ── GLOW UTILITY ── */
@layer utilities {
  .glow-effect {
    position: relative;
    overflow: hidden;
  }
  .glow-effect::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(29,107,232,0.15) 0%, transparent 60%);
    pointer-events: none;
  }
}

/* ── PULSE GLOW for expiry radar card ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4), 0 4px 16px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0.0), 0 8px 32px rgba(220,38,38,0.2); }
}
@keyframes pulseGlowAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.4), 0 4px 16px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 0 0 8px rgba(217,119,6,0.0), 0 8px 32px rgba(217,119,6,0.2); }
}
.glow-red { animation: pulseGlow 2s ease-in-out infinite; }
.glow-amber { animation: pulseGlowAmber 2.5s ease-in-out infinite; }

/* ── PIPELINE SHOWCASE SECTION ── */
.pipeline-showcase { padding: 120px 0; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.pipeline-showcase-header { text-align: center; margin-bottom: 72px; }
.pipeline-track-wrap { overflow-x: auto; padding: 0 32px 24px; -webkit-overflow-scrolling: touch; }
.pipeline-track { display: flex; gap: 0; align-items: stretch; min-width: var(--pipeline-track-min); max-width: var(--pipeline-track-max); margin: 0 auto; position: relative; }
.pipeline-stage-col { flex: 1; display: flex; flex-direction: column; position: relative; }
.pipeline-stage-head {
  padding: 10px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  border-top: 3px solid; border-right: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; gap: 6px;
}
.pipeline-stage-col:last-child .pipeline-stage-head { border-right: none; }
.pipeline-stage-body { flex: 1; padding: 10px; border-right: 1px solid var(--border); min-height: 260px; }
.pipeline-stage-col:last-child .pipeline-stage-body { border-right: none; }

/* Student card in pipeline */
.pipe-card {
  background: white; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 8px; cursor: default; position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pipe-card-name { font-size: 12px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.pipe-card-meta { font-size: 10px; color: var(--t3); margin-bottom: 6px; }
.pipe-card-score { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-bottom: 6px; }
.pipe-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pipe-card-tag { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--t3); }

/* Compliance gate tooltip */
.compliance-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1e293b; color: white; border-radius: 10px; padding: 10px 14px;
  font-size: 11px; line-height: 1.5; white-space: nowrap; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%) translateY(4px);
}
.compliance-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1e293b;
}
.pipe-card.blocked:hover .compliance-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.pipe-card.blocked { border-color: #fca5a5; background: #fff5f5; }
.pipe-card.expiry-warn { border-color: #fde68a; }

/* Moving card animation */
@keyframes cardSlide {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  30% { transform: translateX(10px) scale(1.04); opacity: 0.8; }
  70% { transform: translateX(-10px) scale(1.04); opacity: 0.8; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
.pipe-card.moving { animation: cardSlide 0.6s var(--ease) forwards; }

/* Ghost card that slides between columns */
@keyframes ghostTravel {
  0% { opacity: 0; transform: translateX(-40px) scale(0.95); }
  20% { opacity: 1; transform: translateX(0) scale(1); }
  80% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(40px) scale(0.95); }
}
.pipe-ghost { animation: ghostTravel 1.4s var(--ease) forwards; }

/* Scroll-triggered pipeline animation state */
.pipeline-showcase.demo-playing .pipe-card,
.fc-tour-kanban-embed.demo-playing .pipe-card { transition: all 0.5s var(--ease); }

/* Highlight flash on accepted card */
@keyframes acceptFlash {
  0%, 100% { background: white; box-shadow: none; }
  40% { background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22,163,74,0.25); }
}
.pipe-card.flash-accepted { animation: acceptFlash 1.2s ease forwards; }

/* Progress connector arrows */
.stage-arrow {
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 28px; height: 28px; background: white;
  border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--t3);
}

/* ── DARK CTA SECTION ── */
.cta-section-dark { padding: 100px 32px; background: #0f172a; position: relative; overflow: hidden; }
.cta-section-dark::before {
  content: ''; position: absolute; top: -200px; right: -100px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 65%); pointer-events: none;
}
.cta-section-dark::after {
  content: ''; position: absolute; bottom: -150px; left: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 65%); pointer-events: none;
}
.cta-dark-inner { max-width: var(--layout-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.cta-dark-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #5eead4; margin-bottom: 20px; }
.cta-dark-title {
  font-family: var(--f-display), var(--f-head);
  font-size: 48px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.cta-dark-title .accent-blue { color: #5eead4; }
.cta-dark-sub {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 480px;
}
.cta-dark-trust { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-dark-trust-item { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px; }
.cta-dark-trust-item::before { content: '✓'; color: #34d399; font-weight: 700; }
.cta-dark-right { display: flex; flex-direction: column; gap: 0; }

/* Demo form card */
.demo-form-card {
  background: #1e293b; border: 1px solid #334155; border-radius: 20px; padding: 36px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.demo-form-title {
  font-family: var(--f-display), var(--f-head);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
  margin-bottom: 4px;
}
.demo-form-sub { font-family: var(--f-body); font-size: 17px; font-weight: 400; color: #94a3b8; line-height: 1.75; margin-bottom: 24px; }
.demo-tab-row { display: flex; gap: 4px; margin-bottom: 24px; background: #0f172a; border-radius: 10px; padding: 4px; }
.demo-tab { flex: 1; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; color: #64748b; transition: all 0.2s; }
.demo-tab.active { background: var(--slack-green); color: white; }
.demo-form-fields { display: flex; flex-direction: column; gap: 14px; }
.demo-form-fields.hidden { display: none; }
.demo-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; margin-bottom: 6px; }
.demo-field-input {
  width: 100%; padding: 11px 14px; background: #0f172a; border: 1px solid #334155;
  border-radius: 8px; color: white; font-size: 14px; font-family: var(--f-body);
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.demo-field-input::placeholder { color: #475569; }
.demo-field-input:focus { border-color: var(--slack-green); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.demo-field-select {
  width: 100%; padding: 11px 14px; background: #0f172a; border: 1px solid #334155;
  border-radius: 8px; color: #94a3b8; font-size: 14px; font-family: var(--f-body); outline: none;
  -webkit-appearance: none; transition: border-color 0.2s;
}
.demo-field-select:focus { border-color: var(--slack-green); }
.demo-submit-btn {
  width: 100%; padding: 13px; background: var(--slack-green); color: white; border: none;
  border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--f-body);
  margin-top: 8px; transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}
.demo-submit-btn:hover { background: var(--slack-green-hover); transform: translateY(-1px); }
.demo-success { display: none; text-align: center; padding: 24px 0; }
.demo-success-icon { font-size: 40px; margin-bottom: 12px; }
.demo-success-title { font-size: 18px; font-weight: 700; color: white; margin-bottom: 8px; }
.demo-success-sub { font-size: 14px; color: #64748b; }

/* privacy note */
.form-privacy { text-align: center; font-size: 11px; color: #475569; margin-top: 10px; }

@media (max-width: 1024px) {
  .cta-dark-inner { grid-template-columns: 1fr; gap: 48px; }
  .cta-dark-title { font-size: 38px; }
}

/* ── CHAT LIVE ANIMATIONS ── */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg { animation: msgSlideIn 0.4s var(--ease) both; }
.msg:nth-child(1) { animation-delay: 0.1s; }
.msg:nth-child(2) { animation-delay: 0.5s; }
.msg:nth-child(3) { animation-delay: 0.9s; }
.msg:nth-child(4) { animation-delay: 1.3s; }
.msg:nth-child(5) { animation-delay: 1.7s; }

/* typing indicator repeating */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
.chat-typing-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  margin: 4px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px 10px 10px 4px; width: fit-content;
}
.chat-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--t3);
  animation: typingBounce 1.2s ease infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* AI summary bar pulse */
@keyframes aiBarPulse {
  0%, 100% { border-color: rgba(37,99,235,0.25); }
  50% { border-color: rgba(37,99,235,0.55); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
}
.ai-summary-bar { animation: aiBarPulse 2.5s ease infinite; }

/* ── TASKS LIVE ANIMATIONS ── */
@keyframes taskCheck {
  0%  { transform: scale(0.5) rotate(-45deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(-45deg); }
  100% { transform: scale(1) rotate(-45deg); opacity: 1; }
}
@keyframes taskSlideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.task-item { animation: taskSlideIn 0.45s var(--ease) both; }
.task-item:nth-child(1) { animation-delay: 0.05s; }
.task-item:nth-child(2) { animation-delay: 0.18s; }
.task-item:nth-child(3) { animation-delay: 0.3s; }
.task-item:nth-child(4) { animation-delay: 0.42s; }

/* auto-badge shimmer */
@keyframes badgeShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.task-auto-badge {
  background: linear-gradient(90deg, var(--slack-green-soft) 25%, rgba(183,228,199,0.65) 50%, var(--slack-green-soft) 75%);
  background-size: 200% auto;
  animation: badgeShimmer 3s linear infinite;
}

/* urgent pulse ring */
@keyframes urgentRing {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.task-circle.urgent { animation: urgentPulse 1.5s ease infinite, urgentRing 1.8s ease infinite; }

/* ── CALENDAR LIVE ANIMATIONS ── */
@keyframes dotPop {
  0%  { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
.sc-day.has-event::after {
  animation: dotPop 0.4s var(--ease) both;
}
/* stagger the dot pops for calendar days */
.sc-day:nth-child(11)::after  { animation-delay: 0.1s; }
.sc-day:nth-child(15)::after  { animation-delay: 0.2s; }
.sc-day:nth-child(16)::after  { animation-delay: 0.35s; }
.sc-day:nth-child(21)::after  { animation-delay: 0.45s; }
.sc-day:nth-child(24)::after  { animation-delay: 0.55s; }
.sc-day:nth-child(30)::after  { animation-delay: 0.65s; }
.sc-day:nth-child(32)::after  { animation-delay: 0.7s; }
.sc-day:nth-child(36)::after  { animation-delay: 0.8s; }
.sc-day:nth-child(41)::after  { animation-delay: 0.9s; }

@keyframes eventRowIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sc-event-row { animation: eventRowIn 0.4s var(--ease) both; }
.sc-event-row:nth-child(1) { animation-delay: 0.3s; }
.sc-event-row:nth-child(2) { animation-delay: 0.5s; }
.sc-event-row:nth-child(3) { animation-delay: 0.7s; }
.sc-event-row:nth-child(4) { animation-delay: 0.9s; }

/* today cell pulse */
@keyframes todayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
  50% { box-shadow: 0 0 0 5px rgba(37,99,235,0); }
}
.sc-day.today { animation: todayPulse 2.5s ease infinite; }

/* ── AI EXTRACTION PANEL CSS ── */
.ai-extract-section { padding: 120px 0; background: var(--white); border-top: 1px solid var(--border); }
.ai-extract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 1024px) { .ai-extract-grid { grid-template-columns: 1fr; gap: 48px; } }

.ai-extract-panel {
  background: white; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
/* scanning line */
@keyframes scanLine {
  0%   { top: 0%; opacity: 1; }
  95%  { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan-overlay {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.45), rgba(37,99,235,0.85), rgba(37,99,235,0.45), transparent);
  animation: scanLine 2.8s ease-in-out infinite;
  z-index: 20; pointer-events: none;
}
.scan-overlay-glow {
  position: absolute; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, rgba(37,99,235,0.06) 0%, transparent 100%);
  animation: scanLine 2.8s ease-in-out infinite;
  z-index: 19; pointer-events: none; margin-top: -20px;
}

.aep-topbar {
  padding: 14px 18px; background: #0f172a; display: flex; align-items: center; gap: 10px;
}
.aep-dots { display: flex; gap: 5px; }
.aep-dots span { width: 10px; height: 10px; border-radius: 50%; }
.aep-title { font-size: 12px; font-weight: 600; color: #64748b; margin-left: 4px; flex:1; }
.aep-status {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #34d399;
}

.aep-doc-list {
  padding: 12px; background: #1e293b; display: flex; gap: 8px; border-bottom: 1px solid #334155;
  overflow-x: auto;
}
.aep-doc-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  border: 1px solid;
}
.aep-doc-pill.active { background: rgba(37,99,235,0.22); border-color: rgba(37,99,235,0.55); color: #bfdbfe; }
.aep-doc-pill.done   { background: rgba(22,163,74,0.15); border-color: rgba(22,163,74,0.4); color: #4ade80; }
.aep-doc-pill.queued { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); color: #64748b; }

.aep-body { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.aep-field {
  display: flex; align-items: flex-start; gap: 0;
  border-bottom: 1px solid var(--border); padding: 10px 0;
  animation: fieldReveal 0.5s var(--ease) both;
}
.aep-field:last-child { border-bottom: none; }
.aep-field-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--t3); width: 130px; flex-shrink: 0; padding-top: 2px;
}
.aep-field-val { font-size: 13px; font-weight: 600; color: var(--t1); flex: 1; }
.aep-field-val.typing { color: var(--slack-green); }
.aep-field-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 5px;
  margin-left: 8px; flex-shrink: 0; align-self: center;
}

/* typewriter for extracted values */
@keyframes fieldReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aep-field:nth-child(1)  { animation-delay: 0.1s; }
.aep-field:nth-child(2)  { animation-delay: 0.3s; }
.aep-field:nth-child(3)  { animation-delay: 0.55s; }
.aep-field:nth-child(4)  { animation-delay: 0.8s; }
.aep-field:nth-child(5)  { animation-delay: 1.05s; }
.aep-field:nth-child(6)  { animation-delay: 1.3s; }
.aep-field:nth-child(7)  { animation-delay: 1.55s; }

/* cursor blink on last field */
@keyframes cursorBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.aep-cursor { display: inline-block; width: 2px; height: 13px; background: var(--slack-green); vertical-align: middle; margin-left: 2px; animation: cursorBlink 0.8s ease infinite; }

/* flag rows below panel */
.aep-flag-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--bg);
}
.aep-flag-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; font-size: 9px; }
.aep-flag-text { font-size: 12px; color: var(--t2); line-height: 1.5; }
.aep-flag-text strong { color: var(--t1); }

/* name mismatch banner */
.aep-mismatch-bar {
  margin: 0 14px 12px; padding: 10px 12px; background: #fff7ed;
  border: 1px solid #fed7aa; border-radius: 8px; display: flex; align-items: flex-start; gap: 8px;
  animation: fieldReveal 0.5s var(--ease) 1.8s both;
}
.aep-mismatch-label { font-size: 11px; font-weight: 700; color: var(--amber); margin-bottom: 2px; }
.aep-mismatch-desc { font-size: 11px; color: #92400e; line-height: 1.5; }

/* progress bar inside panel */
.aep-progress-wrap {
  padding: 10px 14px; background: var(--bg); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.aep-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.aep-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--slack-green), #60a5fa);
  animation: progressGrow 2.8s ease-in-out infinite;
}
@keyframes progressGrow {
  0%   { width: 0%; }
  80%  { width: 100%; }
  100% { width: 100%; }
}
.aep-progress-pct { font-size: 11px; font-weight: 700; color: var(--slack-green); }
.aep-progress-label { font-size: 11px; color: var(--t3); }
@keyframes liveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: liveDot 1.6s ease-in-out infinite; margin-right: 4px;
}
.live-dot-red { background: var(--red); animation-delay: 0.3s; }
.live-dot-amber { background: var(--amber); animation-delay: 0.6s; }

/* ── HERO cards shimmer ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.k-card.active-processing {
  background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ── LOGO enhancement ── */
.logo-text { font-weight: 800; letter-spacing: -0.02em; }
.logo-text .visa { color: var(--t1); }
.logo-text .lens { color: var(--slack-green); }

/* ── AI BADGE INLINE ── */
.ai-badge-inline { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; background: linear-gradient(90deg, var(--slack-green-soft), var(--blue-light)); border: 1px solid var(--slack-green-border); border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--slack-green-hover); vertical-align: middle; margin-left: 6px; }
.ai-badge-inline svg { width: 11px; height: 11px; }

/* ── SMART CALENDAR SECTION ── */
.smart-cal { padding: 140px 0; background: var(--white); }
.smart-cal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.smart-cal-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sc-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: space-between; }
.sc-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.sc-tabs { display: flex; gap: 4px; }
.sc-tab { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; color: var(--t3); cursor: default; }
.sc-tab.active { background: var(--slack-green); color: white; }
.sc-body { padding: 16px; }
.sc-month { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.sc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
.sc-day-hd { font-size: 9px; font-weight: 700; color: var(--t3); text-align: center; padding: 4px 0; text-transform: uppercase; }
.sc-day { height: 36px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--t2); position: relative; cursor: default; transition: background 0.15s; }
.sc-day:hover { background: var(--bg); }
.sc-day.today { background: var(--slack-green); color: white; }
.sc-day.has-event::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; }
.sc-day.ev-red::after { background: var(--red); }
.sc-day.ev-amber::after { background: var(--amber); }
.sc-day.ev-green::after { background: var(--green); }
.sc-day.ev-blue::after { background: var(--slack-green); }
.sc-day.ev-multi::after { background: linear-gradient(90deg, var(--red) 0 33%, var(--amber) 33% 66%, var(--green) 66% 100%); width: 12px; }
.sc-events { display: flex; flex-direction: column; gap: 6px; }
.sc-event-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.sc-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-ev-info { flex: 1; }
.sc-ev-name { font-size: 11px; font-weight: 700; color: var(--t1); }
.sc-ev-meta { font-size: 10px; color: var(--t3); margin-top: 1px; }
.sc-ev-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.sc-ev-source { font-size: 9px; font-weight: 600; color: var(--t3); display: flex; align-items: center; gap: 3px; padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
@media (max-width: 1024px) { .smart-cal-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── LEAD RADAR SECTION ── */
.lead-radar { padding: 140px 0; background: var(--bg); }
.radar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.radar-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.rv-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 10px; }
.rv-title { font-size: 13px; font-weight: 700; color: var(--t1); flex: 1; }
.rv-mode { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--indigo-light); color: var(--indigo); }
.rv-body { padding: 16px; }
.rv-matrix { position: relative; width: 100%; height: 180px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.rv-axis-x { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.07em; }
.rv-axis-y { position: absolute; top: 50%; left: 8px; transform: translateY(-50%) rotate(-90deg); font-size: 9px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }
.rv-grid-lines { position: absolute; inset: 0; }
.rv-lead-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: white; cursor: default; transition: transform 0.2s; }
.rv-lead-dot:hover { transform: translate(-50%, -50%) scale(1.3); }
.rv-lead-dot.high { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,0.2); }
.rv-lead-dot.mid { background: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.2); }
.rv-lead-dot.low { background: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.15); border: 2px dashed var(--red); background: white; }
.rv-legend { display: flex; gap: 12px; margin-bottom: 10px; }
.rv-leg-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--t2); }
.rv-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.rv-top-leads { display: flex; flex-direction: column; gap: 6px; }
.rv-lead-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.rv-lead-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: white; flex-shrink: 0; }
.rv-lead-info { flex: 1; }
.rv-lead-name { font-size: 11px; font-weight: 700; color: var(--t1); }
.rv-lead-meta { font-size: 9px; color: var(--t3); }
.rv-priority-bar { width: 50px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.rv-priority-fill { height: 100%; border-radius: 2px; }
@media (max-width: 1024px) { .radar-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── EXPIRY RADAR EXPANDED ── */
.expiry-section { padding: 140px 0; background: var(--white); }
.expiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.expiry-visual { display: flex; flex-direction: column; gap: 12px; }
.expiry-banner { padding: 14px 18px; background: linear-gradient(90deg, #fef2f2, #fff7ed); border: 1px solid #fecaca; border-radius: 12px; display: flex; align-items: center; gap: 12px; }
.expiry-banner-icon { width: 36px; height: 36px; background: var(--red-light); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.expiry-banner-text { flex: 1; }
.expiry-banner-title { font-size: 13px; font-weight: 700; color: var(--red); }
.expiry-banner-sub { font-size: 11px; color: var(--t3); margin-top: 1px; }
.expiry-card { background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.expiry-card-head { padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.expiry-card-title { font-size: 12px; font-weight: 700; color: var(--t1); flex: 1; }
.expiry-filter-tabs { display: flex; gap: 4px; }
.expiry-filter-tab { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 5px; cursor: default; }
.expiry-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.expiry-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; }
.expiry-item.critical { background: #fff5f5; border-color: #fecaca; }
.expiry-item.warning { background: #fffbeb; border-color: #fde68a; }
.expiry-item.safe { background: #f0fdf4; border-color: #bbf7d0; }
.expiry-item.upcoming { background: #f5f3ff; border-color: #ddd6fe; }
.expiry-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.expiry-info { flex: 1; }
.expiry-student { font-size: 12px; font-weight: 700; color: var(--t1); }
.expiry-doc-type { font-size: 11px; color: var(--t3); margin-top: 1px; }
.expiry-days { font-size: 11px; font-weight: 700; }
.expiry-cal-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--blue-light); color: var(--blue); flex-shrink: 0; }
.expiry-ai-note { padding: 10px 14px; background: linear-gradient(90deg, var(--indigo-light), var(--blue-light)); border: 1px solid var(--blue-mid); border-radius: 10px; display: flex; align-items: flex-start; gap: 8px; }
.expiry-ai-label { font-size: 11px; color: var(--indigo); font-weight: 500; line-height: 1.5; }
@media (max-width: 1024px) { .expiry-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── DOCUMENT VAULT ── */
.docvault { padding: 140px 0; background: var(--bg); }
.docvault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.docvault-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.dv-topbar { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: space-between; }
.dv-title { font-size: 12px; font-weight: 700; color: var(--t1); }
.dv-search { display: flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; }
.dv-search-text { font-size: 11px; color: var(--t3); }
.dv-body { padding: 14px; }
.dv-student-group { margin-bottom: 12px; }
.dv-student-hd { font-size: 11px; font-weight: 700; color: var(--t2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dv-student-hd::before { content: ''; display: block; width: 12px; height: 12px; background: var(--blue); border-radius: 50%; }
.dv-doc-list { display: flex; flex-direction: column; gap: 4px; }
.dv-doc-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: default; transition: border-color 0.15s; }
.dv-doc-item:hover { border-color: var(--blue-mid); }
.dv-doc-icon { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.dv-doc-name { font-size: 11px; font-weight: 600; color: var(--t1); flex: 1; }
.dv-doc-date { font-size: 10px; color: var(--t3); }
.dv-doc-type { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
@media (max-width: 1024px) { .docvault-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── GROUP CHAT / POLICY ALERTS — shared with chat section ── */
.chat-tab-bar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ctab { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: default; color: var(--t3); }
.ctab.active { background: var(--blue); color: white; }
.group-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--indigo-light); color: var(--indigo); }

/* ── POLICY ALERTS SECTION ── */
.policy-section { padding: 140px 0; background: var(--white); }
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.policy-visual { display: flex; flex-direction: column; gap: 12px; }
.policy-card { background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.policy-card-head { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); background: var(--bg); }
.policy-card-title { font-size: 12px; font-weight: 700; color: var(--t1); flex: 1; }
.policy-severity { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 100px; }
.policy-sev-high { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.policy-sev-med { background: #fffbeb; color: var(--amber); border: 1px solid #fde68a; }
.policy-sev-low { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.policy-body { padding: 14px 16px; }
.policy-desc { font-size: 12px; color: var(--t2); line-height: 1.6; margin-bottom: 10px; }
.policy-affected { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.policy-affected-label { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; }
.policy-case-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--blue-light); color: var(--blue); }
.policy-admin-note { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--t3); }
.policy-summary-row { display: flex; gap: 8px; margin-top: 10px; }
.policy-sum-box { flex: 1; text-align: center; padding: 8px; background: var(--bg); border-radius: 8px; }
.policy-sum-num { font-size: 18px; font-weight: 800; color: var(--blue); line-height: 1; }
.policy-sum-label { font-size: 9px; color: var(--t3); font-weight: 500; margin-top: 2px; }
@media (max-width: 1024px) { .policy-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── HUMAN IN THE LOOP ── */
.hitl { padding: 140px 0; background: var(--bg); }
.hitl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hitl-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.hitl-topbar { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 8px; }
.hitl-title { font-size: 12px; font-weight: 700; color: var(--t1); flex: 1; }
.hitl-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 6px; background: var(--amber-light); color: var(--amber); }
.hitl-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hitl-field { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hitl-field-head { padding: 8px 12px; background: var(--bg); display: flex; align-items: center; justify-content: space-between; }
.hitl-field-label { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; }
.hitl-ai-tag { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: var(--indigo); }
.hitl-field-val { padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--t1); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hitl-field-val.edited { background: #fff7ed; border-top: 1px solid #fde68a; }
.hitl-field-val.confirmed { background: #f0fdf4; border-top: 1px solid #bbf7d0; }
.hitl-actions { display: flex; gap: 6px; }
.hitl-btn { font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: none; cursor: default; }
.hitl-btn-confirm { background: var(--green); color: white; }
.hitl-btn-edit { background: var(--bg); color: var(--t2); border: 1px solid var(--border); }
.hitl-btn-flag { background: var(--red-light); color: var(--red); }
.hitl-confidence { display: flex; align-items: center; gap: 6px; }
.hitl-conf-label { font-size: 10px; color: var(--t3); }
.hitl-conf-bar { width: 60px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.hitl-conf-fill { height: 100%; border-radius: 2px; }
@media (max-width: 1024px) { .hitl-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── AI SUMMARIES & CHAT PANEL ── */
.ai-assist { padding: 140px 0; background: var(--white); }
.ai-assist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.aia-visual { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.aia-topbar { padding: 12px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--slack-green-soft), #eff6ff); display: flex; align-items: center; gap: 8px; }
.aia-topbar-icon { width: 28px; height: 28px; background: var(--slack-green); border-radius: 8px; display: grid; place-items: center; }
.aia-title { font-size: 13px; font-weight: 700; color: var(--indigo); flex: 1; }
.aia-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.aia-summary-card { background: linear-gradient(135deg, var(--slack-green-soft), #eff6ff); border: 1px solid var(--slack-green-border); border-radius: 12px; padding: 14px; }
.aia-summary-title { font-size: 11px; font-weight: 700; color: var(--indigo); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.aia-summary-body { font-size: 12px; color: var(--t2); line-height: 1.65; }
.aia-summary-body strong { color: var(--t1); }
.aia-divider { height: 1px; background: var(--border); }
.aia-chat-prompt { font-size: 11px; font-weight: 600; color: var(--t3); margin-bottom: 6px; }
.aia-qa-row { display: flex; flex-direction: column; gap: 6px; }
.aia-question { background: var(--bg); border: 1px solid var(--border); border-radius: 10px 10px 10px 4px; padding: 9px 12px; font-size: 12px; color: var(--t2); max-width: 85%; }
.aia-answer { background: linear-gradient(135deg, var(--slack-green), #60a5fa); color: white; border-radius: 10px 10px 4px 10px; padding: 9px 12px; font-size: 12px; line-height: 1.5; max-width: 90%; margin-left: auto; }
.aia-input-bar { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; background: var(--bg); }
.aia-input { flex: 1; font-size: 12px; color: var(--t3); font-family: var(--f-body); background: white; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; }
.aia-send { width: 30px; height: 30px; background: var(--indigo); border-radius: 8px; display: grid; place-items: center; }
.aia-send svg { width: 13px; height: 13px; fill: white; }
@media (max-width: 1024px) { .ai-assist-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── DATA SECURITY SECTION ── */
.security { padding: 140px 0; background: var(--bg); }
.security-header { text-align: center; margin-bottom: 64px; }
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sec-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; }
.sec-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sec-card.blue::before { background: linear-gradient(90deg, var(--slack-green), #60a5fa); }
.sec-card.teal::before { background: linear-gradient(90deg, var(--teal), #059669); }
.sec-card.red::before { background: linear-gradient(90deg, #dc2626, #b91c1c); }
.sec-card.amber::before { background: linear-gradient(90deg, var(--amber), #b45309); }
.sec-card.green::before { background: linear-gradient(90deg, var(--green), #15803d); }
.sec-card.indigo::before { background: linear-gradient(90deg, #1e40af, var(--slack-green)); }
.sec-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.sec-title { font-family: var(--f-head); font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
@media (max-width: 1024px) { .sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .sec-grid { grid-template-columns: 1fr; } }

/* ── TYPEWRITER HERO COUNTER ANIMATION ── */
@keyframes flipIn {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes flipOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
.hero-counter-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 20px;
  opacity: 0; animation: fadeUp 0.6s var(--ease) 0.55s forwards;
}
.hero-counter-num {
  font-family: var(--f-head); font-size: 22px; font-weight: 800; color: var(--blue);
  line-height: 1; min-width: 36px; overflow: hidden; height: 26px; position: relative;
}
.hero-counter-word {
  overflow: hidden; height: 26px; position: relative;
}
.hero-counter-label {
  font-size: 12px; font-weight: 600; color: var(--t3); display: block;
  white-space: nowrap; position: absolute; width: 100%;
  animation: flipIn 0.5s var(--ease) both;
}
.hero-counter-label.out {
  animation: flipOut 0.4s var(--ease) both;
}
.hero-counter-sep {
  width: 1px; height: 22px; background: var(--border);
}

/* ── "WHY VISALENS" PROBLEM/SOLUTION BAND ── */
.prob-band {
  padding: 56px 0; background: var(--t1); overflow: hidden;
}
.prob-band-inner {
  max-width: var(--layout-max); margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 2px 1fr; gap: 48px; align-items: center;
}
.prob-divider { width: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; align-self: stretch; }
.prob-col-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.prob-col-label.before { color: #f87171; }
.prob-col-label.after { color: #34d399; }
.prob-col-label::before { content: ''; width: 16px; height: 2px; background: currentColor; border-radius: 2px; display: block; }
.prob-item {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; last-child: margin-bottom: 0;
}
.prob-item-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; margin-top: 2px;
}
.prob-item-icon.bad { background: rgba(248,113,113,0.15); color: #f87171; }
.prob-item-icon.good { background: rgba(52,211,153,0.15); color: #34d399; }
.prob-item-text { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.55; }
.prob-item-text strong { color: rgba(255,255,255,0.92); font-weight: 600; }
@media (max-width: 768px) {
  .prob-band-inner { grid-template-columns: 1fr; gap: 36px; }
  .prob-divider { display: none; }
}

/* ── SCROLL-TRIGGERED COUNTER NUMBERS ── */
.count-reveal {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.count-reveal.visible { opacity: 1; }

/* ── GLOWING FEATURE CARD BORDER ON HOVER ── */
.feat-card {
  background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px;
  position: relative; overflow: hidden; cursor: default;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.feat-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,0.08) 0%, transparent 60%);
  transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
.feat-card:hover::after { opacity: 1; }

/* ── SHIMMER BAND on stat numbers ── */
@keyframes statShimmer {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}
.stat-num::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateX(-100%) skewX(-12deg);
}
.stat-box.shimmered .stat-num::after {
  animation: statShimmer 0.8s ease forwards;
}
.stat-num { position: relative; overflow: hidden; }

/* ── PIPELINE CARD PULSE ON LOAD ── */
@keyframes cardStagger {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pipe-card { animation: cardStagger 0.4s var(--ease) both; }
.pipeline-stage-col:nth-child(1) .pipe-card { animation-delay: 0.1s; }
.pipeline-stage-col:nth-child(2) .pipe-card { animation-delay: 0.2s; }
.pipeline-stage-col:nth-child(3) .pipe-card { animation-delay: 0.3s; }
.pipeline-stage-col:nth-child(4) .pipe-card { animation-delay: 0.4s; }
.pipeline-stage-col:nth-child(5) .pipe-card { animation-delay: 0.5s; }
.pipeline-stage-col:nth-child(6) .pipe-card { animation-delay: 0.6s; }

/* ── HERO BACKGROUND MESH ── */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.hero-mesh canvas { position: absolute; inset: 0; opacity: 0.35; }

/* ── AURA ORBS (ambient hero decoration) ── */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.hero-orb-1 {
  width: 500px; height: 500px; top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 65%);
  animation: orbDrift1 8s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px; bottom: -150px; left: -80px;
  background: radial-gradient(circle, rgba(13,148,136,0.1) 0%, transparent 65%);
  animation: orbDrift2 10s ease-in-out infinite;
}
.hero-orb-3 {
  width: 300px; height: 300px; top: 40%; left: 35%;
  background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 65%);
  animation: orbDrift3 12s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -30px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(25px, -20px) scale(1.08); }
  75% { transform: translate(-15px, 30px) scale(0.93); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -15px); }
}

/* ── TESTIMONIALS IMPROVED ── */
.tcard {
  background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  width: 300px; flex-shrink: 0; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── SECTION REVEAL STAGGER ── */
.reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }

/* ── LOTTIE-STYLE DOT GRID ── */
@keyframes dotGridPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}
.dot-grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, #94a3b8 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.2;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

/* ── HOMEPAGE REFRESH: proof, compact features, ops, hero scan, light CTA ── */
.hero.hero-below { padding: 84px 0 72px; }
.hero-inner { gap: 56px; }
.proof-section { padding: 88px 0 96px; background: var(--page); border-bottom: 1px solid var(--border); }
.proof-head { margin-bottom: 40px; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.proof-stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px;
  position: relative; overflow: hidden;
}
.proof-num {
  font-family: var(--f-head); font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--t1);
  line-height: 1; margin-bottom: 10px; position: relative; overflow: hidden;
}
.proof-num em { color: var(--slack-green); font-style: normal; }
.proof-stat-em .proof-num { color: var(--green); }
.proof-num::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-100%) skewX(-12deg);
}
.proof-stat.shimmered .proof-num::after { animation: statShimmer 0.8s ease forwards; }
.proof-quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proof-quote {
  background: white; border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.pq-stars { color: #f59e0b; font-size: 13px; margin-bottom: 10px; letter-spacing: 2px; }
.proof-quote p { margin-bottom: 14px; }
.pq-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--t3); }
.pq-meta strong { color: var(--t1); font-size: 13px; }
.features-compact { padding: 88px 0 100px; background: var(--page); }
.features-compact .features-header { margin-bottom: 40px; }
.feat-grid-compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.compact-card { padding: 22px 22px 20px; }
.compact-card .feat-icon { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; font-size: 18px; }
.compact-card .feat-title { font-size: 16px; margin-bottom: 8px; }
.compact-card .feat-desc { margin-bottom: 0; }
.feat-mini-list { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.feat-mini-list li {
  font-size: 12px; color: var(--t3); padding: 4px 0 4px 14px; position: relative; list-style: none;
}
.feat-mini-list li::before { content: '·'; position: absolute; left: 0; color: var(--slack-green); font-weight: 800; }
.feat-tag-row { margin-top: 12px; }
.feat-tag-row a { font-size: 13px; font-weight: 600; color: var(--slack-green-hover); }
.feat-tag-row a:hover { text-decoration: underline; }
.ops-section { padding: 96px 0; background: var(--white); border-top: 1px solid var(--border); }
.ops-head { margin-bottom: 36px; max-width: 720px; }
.ops-shell {
  background: white; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ops-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.ops-tab {
  flex: 1; min-width: 120px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--t2);
  background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.2s, background 0.2s;
}
.ops-tab:hover { color: var(--t1); background: rgba(255,255,255,0.6); }
.ops-tab.active { color: var(--slack-green-hover); background: white; border-bottom-color: var(--slack-green); }
.ops-panes { padding: 28px 28px 32px; }
.ops-pane { display: none; }
.ops-pane.active { display: block; }
.ops-pane-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.ops-mock {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 16px;
  font-size: 13px; color: var(--t2);
}
.ops-chat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 700; color: var(--t1); font-size: 12px; }
.ops-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ops-title { flex: 1; }
.ops-chat-body { display: flex; flex-direction: column; gap: 8px; }
.ops-msg { display: flex; }
.ops-msg.out { justify-content: flex-end; }
.ops-bubble {
  display: inline-block; max-width: 92%; padding: 10px 12px; border-radius: 10px; background: white;
  border: 1px solid var(--border); line-height: 1.45; font-size: 12px;
}
.ops-bubble.alt { background: var(--slack-green-soft); border-color: var(--slack-green-border); color: var(--t1); }
.ops-email-row { padding: 10px 0; border-bottom: 1px solid var(--border-light); display: flex; gap: 10px; align-items: flex-start; }
.ops-email-row:last-child { border-bottom: none; }
.ops-email-row .tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  background: var(--slack-green-soft); color: var(--slack-green-hover); flex-shrink: 0;
}
.ops-email-row .tag.muted { background: var(--bg); color: var(--t3); }
.ops-task-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border-light); }
.ops-task-line:last-child { border-bottom: none; }
.ops-task-line.done { color: var(--t3); text-decoration: line-through; }
.ops-task-line.urgent { color: var(--amber); font-weight: 600; }
.ops-cal-head { font-weight: 700; color: var(--t1); margin-bottom: 10px; font-size: 14px; }
.ops-cal-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 12px; }
.ops-cal-cells .hot { background: var(--slack-green-soft); color: var(--slack-green-hover); font-weight: 700; border-radius: 6px; padding: 6px 0; }
.ops-bullets { margin: 0; padding: 0; }
.ops-bullets li { margin-bottom: 10px; padding-left: 18px; position: relative; }
.ops-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.workflow-tight { padding: 96px 0; background: var(--page); }
.wf-steps-3 { grid-template-columns: repeat(3, 1fr); }
.wf-steps-3 .wf-step:nth-child(3) .wf-arrow { display: none; }
.comparison-tight { padding: 96px 0; background: var(--page); }
.cta-section-light { padding: 88px 0 100px; background: var(--page); }
.cta-light-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  padding: 44px 48px; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(135deg, #ffffff 0%, var(--slack-green-soft) 100%);
  box-shadow: var(--shadow-md);
}
.cta-light-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-light-trust { margin-top: 16px; font-size: 13px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero-scan-inner { padding: 18px 16px 20px; }
.hero-scan-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hero-pill {
  font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--bg); color: var(--t3);
}
.hero-pill.done { background: var(--green-light); border-color: #bbf7d0; color: var(--green); }
.hero-pill.active { background: var(--slack-green-soft); border-color: var(--slack-green-border); color: var(--slack-green-hover); }
.hero-pill.queued { opacity: 0.75; }
.hero-scan-progress { height: 6px; background: var(--border-light); border-radius: 100px; overflow: hidden; margin-bottom: 16px; }
.hero-scan-progress-bar { height: 100%; border-radius: 100px; background: var(--border); }
.hero-scan-progress-fill {
  height: 100%; border-radius: 100px; width: 40%; background: linear-gradient(90deg, var(--slack-green), #60a5fa);
  transition: width 0.6s var(--ease);
}
.hero-scan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-scan-field {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 11px;
}
.hsf-l { display: block; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.hsf-v { font-weight: 700; color: var(--t1); font-size: 13px; }
.hsf-v.ok { color: var(--green); }
.hsf-v.warn { color: var(--amber); }
.hero-scan-note { margin-top: 12px; font-size: 12px; color: var(--t2); line-height: 1.45; }
@media (max-width: 1024px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid-compact { grid-template-columns: 1fr 1fr; }
  .ops-pane-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .proof-quote-row { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .feat-grid-compact { grid-template-columns: 1fr; }
  .wf-steps-3 { grid-template-columns: 1fr; }
  .wf-steps-3 .wf-arrow { display: none; }
  .cta-light-wrap { padding: 28px 22px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual-extract { justify-content: center; }
  .hero-visual-extract .ai-extract-panel { max-width: 100%; }
  .extraction-scan-visual .hero-scan-card,
  .ai-extract-grid .hero-scan-card { max-width: 100%; }
}