/* ═══════════════════════════════════════════════
   ExpoScheduler Index Page — Page-Specific Styles
   ═══════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 5% 5rem;
  position: relative;
  overflow: hidden;
}

/* Radial glow orbs */
.hero::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(73,53,181,0.22) 0%, transparent 65%);
  top: -100px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(239,62,45,0.12) 0%, transparent 65%);
  bottom: 10%; right: 10%;
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(73,53,181,0.45);
  background: rgba(73,53,181,0.12);
  color: #B0A0FF;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--purple);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-h1 {
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 900px;
  position: relative;
  z-index: 1;
  margin-bottom: 1.75rem;
}
.hero-h1 .highlight {
  background: linear-gradient(135deg, #7A60E8 0%, #4935B5 45%, #EF3E2D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-h1 .line-through-word {
  position: relative;
  display: inline-block;
  color: var(--muted);
}
.hero-h1 .line-through-word::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  top: 50%; height: 3px;
  background: var(--red);
  transform: translateY(-50%) rotate(-2deg);
  border-radius: 2px;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.hero-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.btn-lg {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.btn-lg.filled {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 30px rgba(239,62,45,0.4);
}
.btn-lg.filled:hover {
  background: #FF5544;
  box-shadow: 0 0 40px rgba(239,62,45,0.55);
  transform: translateY(-2px);
}
.btn-lg.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.btn-lg.ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }

/* Stat chips */
.hero-stats {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.stat-chip strong { color: var(--white); font-weight: 600; }
.stat-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-purple { background: var(--purple); }
.dot-red    { background: var(--red); }
.dot-blue   { background: var(--blue); }

/* ── BENTO GRID ────────────────────────── */
.bento {
  padding: 7rem 5% 6rem;
}
.bento-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
  text-align: center;
  margin-bottom: 3rem;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.bcard {
  background: var(--ink-2);
  border: none;
  border-radius: var(--rl);
  padding: 2rem;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
/* Gradient border via pseudo-element */
.bcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rl);
  padding: 1px;
  background: linear-gradient(160deg, rgba(73,53,181,0.55) 0%, rgba(134,187,216,0.25) 35%, rgba(255,255,255,0.06) 60%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s;
}
.bcard:hover {
  background: var(--ink-3);
}
.bcard:hover::after {
  background: linear-gradient(160deg, rgba(73,53,181,0.8) 0%, rgba(134,187,216,0.4) 35%, rgba(255,255,255,0.1) 60%, transparent 100%);
}

/* Subtle glow blob on hover */
.bcard::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}
.bcard.purple-accent::before { background: radial-gradient(circle, rgba(73,53,181,0.12) 0%, transparent 70%); top: -50px; left: -50px; }
.bcard.red-accent::before { background: radial-gradient(circle, rgba(239,62,45,0.10) 0%, transparent 70%); bottom: -50px; right: -50px; }
.bcard:hover::before { opacity: 1; }

/* Layout positions */
.bc-scheduler   { grid-column: 1 / 8;  grid-row: 1; }
.bc-magic       { grid-column: 8 / 13; grid-row: 1; }
.bc-noconflict  { grid-column: 1 / 5;  grid-row: 2; }
.bc-attendee    { grid-column: 5 / 13; grid-row: 2; }
.bc-realtime    { grid-column: 1 / 6;  grid-row: 3; }
.bc-mobile      { grid-column: 6 / 9;  grid-row: 3; }
.bc-export      { grid-column: 9 / 13; grid-row: 3; }

.bcard-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.bcard-tag.purple { background: rgba(73,53,181,0.18); color: #B0A0FF; border: 1px solid rgba(73,53,181,0.28); }
.bcard-tag.red    { background: rgba(239,62,45,0.14); color: #FF9085; border: 1px solid rgba(239,62,45,0.22); }
.bcard-tag.blue   { background: rgba(134,187,216,0.14); color: #A8D4E8; border: 1px solid rgba(134,187,216,0.22); }
.bcard-tag.dim    { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--line); }

.bcard h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.bcard.large h3 { font-size: 1.7rem; }
.bcard p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Big number in card */
.bcard-num {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.bcard-num.purple { color: #7A60E8; }
.bcard-num.red    { color: var(--red); }
.bcard-num.blue   { color: var(--blue); }

/* Mini calendar mock (matches animated demo style) */
.mini-cal {
  margin-top: 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #D0D4E0;
  font-family: 'Inter', sans-serif;
}
.mc-hdr {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 1fr;
  background: #F8F9FB;
  border-bottom: 1px solid #D0D4E0;
}
.mc-hdr-empty { padding: 6px; }
.mc-hdr-col {
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #3D4461;
  border-left: 1px solid #D0D4E0;
}
.mc-body {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 1fr;
  background: #fff;
}
.mc-time {
  font-size: 9px;
  color: #9AA0B4;
  font-weight: 600;
  padding: 6px 4px 0 5px;
  height: 36px;
  border-bottom: 1px dashed #E8EAF0;
  border-right: 1px solid #D0D4E0;
  background: #FAFBFC;
}
.mc-cell {
  height: 36px;
  padding: 3px;
  border-left: 1px solid #E8EAF0;
  border-bottom: 1px dashed #E8EAF0;
  position: relative;
}
.mc-mtg {
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  height: 100%;
  display: flex;
  align-items: center;
}
.mc-mtg.fill-purple { background: #7C3AED; color: #fff; }
.mc-mtg.fill-blue   { background: #2563EB; color: #fff; }
.mc-mtg.fill-orange { background: #EA580C; color: #fff; }
.mc-mtg.fill-green  { background: #059669; color: #fff; }
.mc-mtg.fill-teal   { background: #0891B2; color: #fff; }
.mc-mtg.outline-purple { background: #fff; border: 1.5px solid #7C3AED; color: #5B21B6; }
.mc-mtg.outline-blue   { background: #fff; border: 1.5px solid #2563EB; color: #1D4ED8; }

/* Link inside card */
.bcard-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 1.25rem;
  transition: gap 0.2s;
}
.bcard-link.purple { color: #B0A0FF; }
.bcard-link.red    { color: #FF9085; }
.bcard-link:hover { gap: 0.6rem; }

/* Mini reg form mock */
.mini-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mf-row {
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}
.mf-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mf-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.mf-bar.fill  { background: rgba(239,62,45,0.55); width: 60%; flex: none; }
.mf-bar.fill2 { background: rgba(134,187,216,0.55); width: 80%; flex: none; }

/* ── SECTION: TWO TOOLS ────────────────────── */
.tools-section {
  background: var(--lt-bg);
  padding: 7rem 5%;
  color: var(--lt-text);
}
.tools-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 1rem;
}
.section-h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 1rem;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--lt-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.75;
}

.tools-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 3rem;
}
.tool-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: 100px;
  cursor: pointer;
  border: 1.5px solid var(--lt-border);
  background: transparent;
  color: var(--lt-muted);
  transition: all 0.2s;
}
.tool-tab.active-purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.tool-tab.active-red    { background: var(--red);    color: #fff; border-color: var(--red); }
.tool-tab:not(.active-purple):not(.active-red):hover { border-color: var(--lt-text); color: var(--lt-text); }

.tool-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.tool-panel.hidden { display: none; }

.tool-text h3 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lt-text);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.tool-text p {
  font-size: 1rem;
  color: var(--lt-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.tool-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.tf-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--lt-muted);
}
.tf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}
.tf-dot.p { background: var(--purple); }
.tf-dot.r { background: var(--red); }

.tool-visual {
  background: var(--ink-2);
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--line);
}
.tv-header {
  background: var(--ink);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tv-dot { width: 9px; height: 9px; border-radius: 50%; }
.tv-body { padding: 1.25rem; }

/* Calendar visualization */
.cal-vis { display: flex; flex-direction: column; gap: 5px; }
.cv-row { display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 5px; align-items: center; }
.cv-time { font-size: 0.6rem; color: var(--subtle); }
.cv-slot { height: 32px; border-radius: 6px; background: var(--ink-3); border: 1px solid var(--line); }
.cv-slot.v1 { background: rgba(73,53,181,0.65); border-color: transparent; display:flex; align-items:center; padding:0 8px; font-size:0.6rem; color:#fff; font-weight:600; }
.cv-slot.v2 { background: rgba(73,53,181,0.35); border-color: transparent; }
.cv-slot.o1 { background: rgba(239,62,45,0.6); border-color: transparent; display:flex; align-items:center; padding:0 8px; font-size:0.6rem; color:#fff; font-weight:600; }
.cv-slot.t1 { background: rgba(134,187,216,0.35); border-color: transparent; }

/* Registration visualization */
.reg-vis { display: flex; flex-direction: column; gap: 8px; }
.rv-step {
  background: var(--ink-3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rv-step.active { border-color: rgba(239,62,45,0.4); background: rgba(239,62,45,0.08); }
.rv-num { width: 22px; height: 22px; border-radius: 6px; background: var(--ink-4); display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:800; color:var(--muted); flex-shrink:0; }
.rv-num.done { background: var(--red); color:#fff; }
.rv-step-text { font-size: 0.75rem; color: var(--muted); }
.rv-step.active .rv-step-text { color: var(--white); }

/* ── WHY IT MATTERS ────────────────────────── */
.why-section {
  padding: 7rem 5% 4rem;
  background: var(--ink);
}
.why-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.why-header { margin-bottom: 4rem; }
.why-header .section-eyebrow { color: var(--purple); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.why-card {
  background: var(--ink-2);
  border: none;
  border-radius: var(--rl);
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
}
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rl);
  padding: 1px;
  background: linear-gradient(160deg, rgba(73,53,181,0.55) 0%, rgba(134,187,216,0.25) 35%, rgba(255,255,255,0.06) 60%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.why-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.why-role-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.why-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.why-card > p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.why-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none; height: 64px;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}
.wl-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-check svg { width: 10px; height: 10px; }

/* ── FULL FEATURE MARQUEE ──────────────────── */
.marquee-section {
  padding: 3rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 30s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--subtle);
  white-space: nowrap;
}
.marquee-sep { width: 4px; height: 4px; background: var(--purple); border-radius: 50%; flex-shrink: 0; }

/* ── SOCIAL PROOF ──────────────────────────── */
.proof-section {
  padding: 4rem 5% 7rem;
  background: var(--ink);
  text-align: center;
}
.big-stat {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, #7A60E8 0%, var(--purple) 40%, var(--red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}
.big-stat-label {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto 3rem;
  line-height: 1.65;
}
.proof-chips {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.proof-chip {
  background: var(--ink-2);
  border: none;
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.proof-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(73,53,181,0.55) 0%, rgba(134,187,216,0.25) 35%, rgba(255,255,255,0.06) 60%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.proof-chip-num {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}
.proof-chip-label { font-size: 0.82rem; color: var(--muted); }

/* ── DEMO FORM (light) ─────────────────────── */
.demo-section {
  background: var(--lt-bg);
  padding: 7rem 5%;
  color: var(--lt-text);
}
.demo-inner {
  max-width: 680px;
  margin: 0 auto;
}
.demo-header { text-align: center; margin-bottom: 3rem; }
.demo-header .section-eyebrow { color: var(--purple); }
.demo-header .section-h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.demo-header p { font-size: 1rem; color: var(--lt-muted); line-height: 1.75; margin-top: 0.75rem; }

.demo-form {
  background: var(--lt-card);
  border: 1px solid var(--lt-border);
  border-radius: var(--rl);
  padding: 2.5rem;
  box-shadow: 0 8px 48px rgba(7,7,78,0.1);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fg { display: flex; flex-direction: column; gap: 0.4rem; }
.fg label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lt-text);
}
.fg input,
.fg select,
.fg textarea {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  background: var(--lt-bg);
  border: 1.5px solid var(--lt-border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: var(--lt-text);
  outline: none;
  transition: border-color 0.2s;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus { border-color: var(--purple); }
.fg input::placeholder,
.fg textarea::placeholder { color: #aaa; }
.fg textarea { resize: vertical; min-height: 90px; }
.fg.full { grid-column: 1 / -1; }

.form-submit-row {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-note { font-size: 0.78rem; color: var(--lt-muted); }
.btn-submit {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(239,62,45,0.35);
}
.btn-submit:hover { background: #FF5544; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(239,62,45,0.45); }

/* ── LIVE ANIMATION PANELS ────────────────── */
.tool-visual.has-anim {
  background: transparent;
  border: none;
  overflow: visible;
}
.demo-window {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #D0D4E0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.11);
  overflow: visible;
  width: 100%;
  position: relative;
}
.demo-window-inner { border-radius: 14px; overflow: hidden; }
.window-bar {
  background: #F8F9FB;
  border-bottom: 1px solid #D0D4E0;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wdot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.wdot.wr{background:#FF5F56;} .wdot.wy{background:#FFBD2E;} .wdot.wg{background:#27C93F;}
.window-title { font-size:11px;color:#9AA0B4;margin-left:4px;font-weight:600;letter-spacing:0.03em; }

/* Calendar animation */
.cal-anim-header {
  padding: 13px 16px 10px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #E4E7EF; background: #fff;
}
.cal-nav { display:flex;gap:3px; }
.cal-nav button {
  width:26px;height:26px;border-radius:7px;
  border:1px solid #D0D4E0;background:#fff;
  font-size:12px;color:#555;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cal-day  { font-size:11px;color:#9AA0B4;font-weight:600; }
.cal-date { font-size:17px;font-weight:800;color:#1A1D2E;line-height:1.1;font-family:'Poppins',sans-serif; }
.cal-grid {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  position: relative;
}
.col-hdr-empty { background:#F8F9FB;border-bottom:1px solid #D0D4E0;border-right:1px solid #D0D4E0; }
.col-hdr {
  background:#F8F9FB;border-bottom:1px solid #D0D4E0;border-left:1px solid #D0D4E0;
  padding:8px;font-size:10px;font-weight:700;color:#3D4461;
  display:flex;align-items:center;gap:4px;line-height:1.3;
}
.info-ic {
  width:14px;height:14px;border-radius:50%;
  background:#DDE2EF;display:flex;align-items:center;
  justify-content:center;font-size:9px;color:#6B7594;
  font-weight:700;flex-shrink:0;
}
.time-cell {
  border-bottom:1px dashed #E4E7EF;border-right:1px solid #D0D4E0;
  padding:8px 0 0 6px;font-size:10px;color:#9AA0B4;font-weight:600;
  height:58px;background:#FAFBFC;
}
.grid-cell {
  border-left:1px solid #E4E7EF;border-bottom:1px dashed #E4E7EF;
  height:58px;padding:5px;position:relative;transition:background 0.2s;
}
.grid-cell.drop-target { background:#EEF3FF; }
.mtg {
  border-radius:7px;padding:5px 8px;font-size:10px;font-weight:700;
  line-height:1.35;position:relative;z-index:2;
  transition:opacity 0.2s, transform 0.2s, background 0.5s, border-color 0.5s, color 0.3s;
  font-family:'Inter',sans-serif;
}
.mtg .mt { font-weight:500;margin-bottom:1px;opacity:0.88; }
.mtg .mn { font-weight:700; }
.mtg.outline-purple { background:#fff;border:2px solid #7C3AED;color:#5B21B6; }
.mtg.outline-yellow { background:#fff;border:2px solid #F59E0B;color:#92400E; }
.mtg.outline-blue   { background:#fff;border:2px solid #2563EB;color:#1D4ED8; }
.mtg.fill-blue      { background:#2563EB;color:#fff;border:2px solid #2563EB; }
.mtg.fill-green     { background:#059669;color:#fff;border:2px solid #059669; }
.mtg.fill-orange    { background:#EA580C;color:#fff;border:2px solid #EA580C; }
.mtg.fill-purple    { background:#7C3AED;color:#fff;border:2px solid #7C3AED; }
.mtg.fill-yellow    { background:#D97706;color:#fff;border:2px solid #D97706; }
.mtg.fill-teal      { background:#0891B2;color:#fff;border:2px solid #0891B2; }
.mtg.fill-blocked   { background:#E2E5ED;color:#8A94A6;border:2px solid #C8CDD9; }
.mtg.fill-blocked .mt { opacity:0.7; }
.approval-badge {
  display:inline-flex;align-items:center;gap:3px;margin-top:3px;
  font-size:9px;font-weight:700;letter-spacing:0.03em;
  background:rgba(255,255,255,0.25);border-radius:4px;padding:1px 5px;
  opacity:0;transition:opacity 0.4s;white-space:nowrap;
}
.approval-badge.show { opacity:1; }
.snap-flash {
  position:absolute;inset:0;border-radius:7px;
  background:rgba(37,99,235,0.1);border:2px solid rgba(37,99,235,0.4);
  pointer-events:none;opacity:0;z-index:5;transition:opacity 0.35s;
}
.block-flash {
  position:absolute;inset:0;border-radius:7px;
  background:rgba(200,205,217,0.3);border:2px solid #C8CDD9;
  pointer-events:none;opacity:0;z-index:5;transition:opacity 0.35s;
}
.cal-toast {
  position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;font-family:'Inter',sans-serif;
  padding:5px 14px;border-radius:20px;white-space:nowrap;opacity:0;
  transition:opacity 0.3s;letter-spacing:0.02em;pointer-events:none;
}
.cal-toast.green { background:#059669;color:#fff;box-shadow:0 4px 12px rgba(5,150,105,0.4); }
.cal-toast.purple{ background:#7C3AED;color:#fff;box-shadow:0 4px 12px rgba(124,58,237,0.4); }
.cal-toast.gray  { background:#64748B;color:#fff;box-shadow:0 4px 12px rgba(100,116,139,0.4); }

/* Attendee animation */
.att-top {
  padding:14px 16px 12px;display:flex;align-items:flex-start;
  justify-content:space-between;border-bottom:1px solid #E4E7EF;background:#fff;
}
.att-title { font-size:14px;font-weight:800;color:#1A1D2E;font-family:'Poppins',sans-serif; }
.att-sub   { font-size:11px;color:#9AA0B4;font-weight:500;margin-top:1px; }
.live-badge-anim {
  font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
  border:1.5px solid #818CF8;color:#4338CA;background:#EEF2FF;
}
.stats-row-anim {
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 16px;
  border-bottom:1px solid #E4E7EF;background:#fff;
}
.stat-card-anim {
  border-radius:9px;padding:12px 10px;text-align:center;border:1.5px solid #E4E7EF;
}
.stat-card-anim .sn { font-size:24px;font-weight:800;line-height:1;margin-bottom:3px;font-family:'Poppins',sans-serif; }
.stat-card-anim .sl { font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#8A94A6; }
.stat-card-anim.s-invited  { background:#F8F9FB; }
.stat-card-anim.s-invited .sn { color:#1A1D2E; }
.stat-card-anim.s-attend   { background:#F0FDF4;border-color:#BBF7D0; }
.stat-card-anim.s-attend .sn{ color:#059669; }
.stat-card-anim.s-incomp   { background:#FFF7ED;border-color:#FED7AA; }
.stat-card-anim.s-incomp .sn{ color:#EA580C; }
.att-list { padding:10px 14px 14px;display:flex;flex-direction:column;gap:5px;background:#fff; }
.att-row {
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  background:#F8F9FB;border:1px solid #E4E7EF;
  opacity:0;transform:translateY(5px);
  transition:opacity 0.35s,transform 0.35s,background 0.4s,border-color 0.4s;
}
.att-row.vis { opacity:1;transform:translateY(0); }
.att-row.complete     { background:#F0FDF4;border-color:#BBF7D0; }
.att-row.incomplete-r { background:#FFF7ED;border-color:#FED7AA; }
.att-ic {
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;
}
.att-ic.ck  { background:#059669;color:#fff; }
.att-ic.wn  { background:#EA580C;color:#fff; }
.att-ic.nm  { background:#DDE2EF;color:#6B7594;font-size:10px; }
.att-nm { font-size:12px;font-weight:700;color:#1A1D2E; }
.att-st { font-size:10px;font-weight:500;color:#9AA0B4; }
.att-row.complete .att-st     { color:#059669; }
.att-row.incomplete-r .att-st { color:#EA580C; }

/* Cursor & drag clone */
.anim-cursor {
  position:fixed;pointer-events:none;z-index:10000;
  opacity:0;transition:opacity 0.25s;
}
.anim-cursor svg { filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.drag-clone {
  position:fixed;pointer-events:none;z-index:9999;
  border-radius:7px;padding:5px 8px;font-size:10px;font-weight:700;line-height:1.35;
  opacity:0;transition:opacity 0.2s;
  box-shadow:0 10px 28px rgba(0,0,0,0.2),0 0 0 2px rgba(255,255,255,0.5);
  transform:rotate(-2deg) scale(1.05);
  font-family:'Inter',sans-serif;
}

/* ── MAGIC LINK ANIMATION ────────────────────── */
.ml-anim {
  margin-top: 1.5rem;
  position: relative;
  height: 190px;
}
/* Large envelope icon at top */
.ml-icon {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple) 0%, #7A60E8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(73,53,181,0.4);
}
.ml-icon.vis { opacity: 1; }
.ml-icon.pulse { animation: mlPulse 0.6s ease; }
.ml-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mlPulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}
/* Radiating lines SVG */
.ml-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.ml-lines line {
  stroke: rgba(73,53,181,0.25);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  transition: stroke 0.5s;
}
.ml-lines line.active { stroke: rgba(158,203,227,0.35); }
.ml-lines line.done { stroke: rgba(52,211,153,0.3); }
/* Flying mini envelope */
.ml-env {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.ml-env svg { width: 16px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(158,203,227,0.4)); }
/* People row at bottom */
.ml-people {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 4%;
}
.ml-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.4s;
}
.ml-person.vis { opacity: 1; }
/* Person avatar */
.ml-avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
}
.ml-avatar.opened {
  border-color: var(--blue);
  background: rgba(158,203,227,0.1);
  box-shadow: 0 0 10px rgba(158,203,227,0.2);
}
.ml-avatar.clicked {
  border-color: #34D399;
  background: rgba(52,211,153,0.1);
  box-shadow: 0 0 12px rgba(52,211,153,0.25);
}
.ml-avatar-inner {
  font-size: 11px;
  font-weight: 800;
  color: var(--subtle);
  transition: color 0.4s;
}
.ml-avatar.opened .ml-avatar-inner { color: var(--blue); }
.ml-avatar.clicked .ml-avatar-inner { color: #34D399; }
/* Checkmark badge */
.ml-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #34D399;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 2;
}
.ml-badge svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ml-badge.vis { opacity: 1; transform: scale(1); }
/* Name label */
.ml-name {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--subtle);
  transition: color 0.3s;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.ml-name.opened { color: var(--blue); }
.ml-name.clicked { color: #34D399; }

/* ── FADE IN ON SCROLL ─────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .bc-scheduler  { grid-column: 1 / 13; }
  .bc-magic      { grid-column: 1 / 7; grid-row: 2; }
  .bc-noconflict { grid-column: 7 / 13; grid-row: 2; }
  .bc-attendee   { grid-column: 1 / 13; grid-row: 3; }
  .bc-realtime   { grid-column: 1 / 7; grid-row: 4; }
  .bc-mobile     { grid-column: 7 / 10; grid-row: 4; }
  .bc-export     { grid-column: 10 / 13; grid-row: 4; }
}
@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bc-scheduler, .bc-magic, .bc-noconflict, .bc-attendee,
  .bc-realtime, .bc-mobile, .bc-export { grid-column: 1 / -1; grid-row: auto; }
  .tool-panel { grid-template-columns: 1fr; }
  .tool-visual { order: -1; }
  .why-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding: 7rem 1.25rem 4rem; }
  .bento { padding: 5rem 1.25rem 4rem; }
  .tools-section, .why-section, .proof-section, .demo-section { padding: 5rem 1.25rem; }
  .footer-top { grid-template-columns: 1fr; }
  .form-submit-row { flex-direction: column; align-items: stretch; }
  .btn-submit { text-align: center; }
}