:root {
  --bavlo-white: #ffffff;
  --bavlo-cream: #fffbeb;
  --bavlo-bg: #f8fafc;
  --bavlo-soft-blue: #dbeafe;
  --bavlo-soft-yellow: #fef3c7;
  --bavlo-soft-green: #dcfce7;
  --bavlo-blue: #2563eb;
  --bavlo-blue-dark: #1e40af;
  --bavlo-yellow: #fbbf24;
  --bavlo-orange: #f97316;
  --bavlo-green: #22c55e;
  --bavlo-navy: #0f172a;
  --bavlo-text: #111827;
  --bavlo-muted: #64748b;
  --bavlo-border: #e2e8f0;
  --bavlo-radius: 28px;
  --bavlo-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
  --bavlo-shadow-strong: 0 34px 100px rgba(15, 23, 42, 0.16);
}

.bavlo-site,
.bavlo-site * {
  box-sizing: border-box;
}

.bavlo-site {
  background: var(--bavlo-bg);
  color: var(--bavlo-text);
  font-family: Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.bavlo-site img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bavlo-site a {
  color: inherit;
}

.bavlo-container {
  width: min(1160px, calc(100% - 36px));
  margin: 0 auto;
}

.bavlo-section {
  padding: clamp(70px, 8vw, 112px) 0;
}

.bavlo-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,232,240,.86);
}

.admin-bar .bavlo-nav { top: 32px; }

.bavlo-nav-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.bavlo-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none !important;
}

.bavlo-brand span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 950;
  font-size: 22px;
  background: linear-gradient(135deg, var(--bavlo-blue), var(--bavlo-orange));
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
}

.bavlo-brand strong {
  font-size: 22px;
  letter-spacing: -.04em;
  color: var(--bavlo-navy);
}

.bavlo-nav nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.bavlo-nav nav a {
  text-decoration: none !important;
  color: var(--bavlo-muted);
  font-weight: 800;
  font-size: 15px;
}

.bavlo-nav nav a:hover { color: var(--bavlo-blue); }

.bavlo-nav-cta,
.bavlo-btn {
  text-decoration: none !important;
}

.bavlo-nav-cta {
  background: var(--bavlo-navy);
  color: #fff !important;
  font-weight: 900;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.bavlo-hero-v2 {
  position: relative;
  padding: clamp(76px, 8vw, 122px) 0 clamp(80px, 9vw, 130px);
  background:
    radial-gradient(circle at 8% 20%, rgba(251, 191, 36, 0.34), transparent 23%),
    radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.20), transparent 28%),
    radial-gradient(circle at 74% 78%, rgba(34, 197, 94, 0.14), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.bavlo-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .36;
  background-image: linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, transparent 92%);
  pointer-events: none;
}

.bavlo-hero-grid,
.bavlo-how-grid,
.bavlo-institute-grid,
.bavlo-form-layout,
.bavlo-inner-grid,
.bavlo-showcase-grid,
.bavlo-difference-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.bavlo-how-grid-v2 { grid-template-columns: .95fr 1.05fr; }
.bavlo-showcase-grid { margin-bottom: 28px; }

.bavlo-pill,
.bavlo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  color: var(--bavlo-blue);
  background: var(--bavlo-soft-blue);
  font-size: 14px;
  font-weight: 900;
  padding: 10px 15px;
  letter-spacing: -.01em;
}

.bavlo-pill-yellow {
  background: var(--bavlo-soft-yellow);
  color: #92400e;
}

.bavlo-eyebrow {
  background: transparent;
  color: var(--bavlo-orange);
  padding: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .14em;
}

.bavlo-eyebrow-light { color: #fbbf24; }

.bavlo-pill svg,
.bavlo-btn svg,
.bavlo-feature-list svg,
.bavlo-difference-list svg,
.bavlo-mini-link::after {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.bavlo-hero h1,
.bavlo-inner-hero h1,
.bavlo-section-head h2,
.bavlo-centered-head h2,
.bavlo-path-selector h2,
.bavlo-final-cta h2,
.bavlo-difference-card h2,
.bavlo-demo-side h2 {
  color: var(--bavlo-navy);
  letter-spacing: -.07em;
  margin: 16px 0 18px;
  line-height: .96;
}

.bavlo-hero h1,
.bavlo-inner-hero h1 {
  font-size: clamp(46px, 7vw, 84px);
}

.bavlo-section-head h2,
.bavlo-centered-head h2,
.bavlo-path-selector h2,
.bavlo-final-cta h2,
.bavlo-difference-card h2,
.bavlo-demo-side h2 {
  font-size: clamp(34px, 4.7vw, 58px);
}

.bavlo-hero-lead,
.bavlo-inner-hero p,
.bavlo-section-head p,
.bavlo-centered-head p,
.bavlo-difference-card p,
.bavlo-institute-strip p,
.bavlo-final-cta p,
.bavlo-demo-side p,
.bavlo-path-selector p,
.bavlo-simple-card p,
.bavlo-path-card p,
.bavlo-path-detail p,
.bavlo-steps-v2 p,
.bavlo-audience-card p {
  color: var(--bavlo-muted);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.65;
  margin: 0;
}

.bavlo-centered-head,
.bavlo-path-head { text-align: center; }
.bavlo-centered-head { max-width: 820px; margin: 0 auto 38px; }
.bavlo-path-head { max-width: 720px; }

.bavlo-quick-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.bavlo-quick-points span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(37,99,235,.16);
  background: #fff;
  color: var(--bavlo-navy);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.bavlo-quick-points span::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--bavlo-green);
  font-size: 12px;
}

.bavlo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.bavlo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  border-radius: 18px;
  padding: 16px 22px;
  font-size: 15px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.bavlo-btn:hover { transform: translateY(-2px); }

.bavlo-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--bavlo-blue), var(--bavlo-blue-dark));
  box-shadow: 0 18px 34px rgba(37,99,235,.26);
}

.bavlo-btn-secondary {
  background: #fff;
  color: var(--bavlo-navy);
  border: 1px solid var(--bavlo-border);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.bavlo-btn-white {
  background: #fff;
  color: var(--bavlo-blue-dark);
  box-shadow: 0 18px 36px rgba(255,255,255,.18);
}

.bavlo-hero-visual,
.bavlo-section-visual,
.bavlo-showcase-visual,
.bavlo-diff-visual,
.bavlo-institute-visual {
  position: relative;
}

.bavlo-hero-visual img,
.bavlo-section-visual img,
.bavlo-showcase-visual img,
.bavlo-diff-visual img,
.bavlo-institute-visual img,
.bavlo-demo-side-visual {
  width: 100%;
  filter: drop-shadow(0 28px 60px rgba(15,23,42,.12));
}

.bavlo-float { animation: bavloFloat 6s ease-in-out infinite; }
.bavlo-float-slow { animation: bavloFloat 8s ease-in-out infinite; }

@keyframes bavloFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.bavlo-audience-section { background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); }
.bavlo-how-section { background: linear-gradient(180deg, rgba(219,234,254,.32) 0%, rgba(255,255,255,.74) 100%); }

.bavlo-audience-grid,
.bavlo-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.bavlo-path-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

.bavlo-audience-card,
.bavlo-path-card,
.bavlo-simple-card,
.bavlo-demo-form,
.bavlo-demo-side,
.bavlo-steps-v2 article,
.bavlo-selector-box,
.bavlo-path-result,
.bavlo-path-detail {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--bavlo-border);
  border-radius: var(--bavlo-radius);
  box-shadow: var(--bavlo-shadow);
}

.bavlo-audience-card,
.bavlo-path-card,
.bavlo-simple-card {
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bavlo-audience-card:hover,
.bavlo-path-card:hover,
.bavlo-simple-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--bavlo-shadow-strong);
}

.bavlo-audience-card img {
  border-radius: 22px;
  margin-bottom: 16px;
}

.bavlo-audience-card span,
.bavlo-path-card > span,
.bavlo-path-detail-copy > span {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bavlo-soft-blue);
  color: var(--bavlo-blue);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.bavlo-card-yellow { background: linear-gradient(180deg, #ffffff 0%, #fffdf3 100%); }
.bavlo-card-blue { background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%); }
.bavlo-card-green { background: linear-gradient(180deg, #ffffff 0%, #f5fff8 100%); }

.bavlo-audience-card h3,
.bavlo-path-card h3,
.bavlo-simple-card h3,
.bavlo-steps-v2 h3,
.bavlo-path-detail h3 { margin: 0 0 10px; color: var(--bavlo-navy); letter-spacing: -.04em; }

.bavlo-audience-card h3,
.bavlo-simple-card h3,
.bavlo-steps-v2 h3,
.bavlo-path-detail h3 { font-size: clamp(24px, 2.2vw, 30px); }
.bavlo-path-card h3 { font-size: clamp(22px, 2vw, 28px); }

.bavlo-steps-v2 {
  display: grid;
  gap: 18px;
}

.bavlo-steps-v2 article {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
}

.bavlo-steps-v2 article span,
.bavlo-simple-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--bavlo-orange), var(--bavlo-yellow));
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(249,115,22,.26);
}

.bavlo-simple-card span { margin-bottom: 12px; }

.bavlo-path-selector-section { background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%); }
.bavlo-path-selector {
  display: grid;
  grid-template-columns: 1.1fr .9fr .95fr;
  gap: 18px;
  align-items: stretch;
}

.bavlo-selector-box,
.bavlo-path-result { padding: 22px; }

.bavlo-selector-box label,
.bavlo-demo-form label {
  display: block;
  font-size: 14px;
  color: var(--bavlo-navy);
  font-weight: 900;
  margin-bottom: 14px;
}

.bavlo-selector-box select,
.bavlo-demo-form input,
.bavlo-demo-form textarea,
.bavlo-demo-form select {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--bavlo-border);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--bavlo-navy);
  background: #fff;
}

.bavlo-selector-box .bavlo-btn { width: 100%; margin-top: 10px; }
.bavlo-path-result h3,
.bavlo-demo-side h2 { margin-top: 0; }

.bavlo-path-result ol,
.bavlo-path-detail ul,
.bavlo-difference-list,
.bavlo-feature-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.bavlo-path-result li,
.bavlo-path-detail li,
.bavlo-difference-list span,
.bavlo-feature-list span {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(226,232,240,.8);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--bavlo-navy);
  font-weight: 700;
}

.bavlo-feature-list span,
.bavlo-difference-list span { display: flex; align-items: center; gap: 10px; }

.bavlo-path-card {
  position: relative;
  min-height: 265px;
  cursor: pointer;
}

.bavlo-path-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: linear-gradient(135deg, #fff8e4, #eef5ff);
  border-radius: 16px;
  margin-bottom: 16px;
}

.bavlo-featured-path { border-color: rgba(37,99,235,.18); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.bavlo-path-card.is-active {
  border-color: rgba(37,99,235,.4);
  box-shadow: 0 30px 80px rgba(37,99,235,.15);
  transform: translateY(-6px);
}

.bavlo-mini-link {
  margin-top: 16px;
  border: 0;
  background: transparent;
  color: var(--bavlo-blue);
  font-weight: 900;
  padding: 0;
  cursor: pointer;
}

.bavlo-mini-link::after {
  content: "→";
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 8px;
}

.bavlo-path-detail {
  margin-top: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: center;
}

.bavlo-path-detail-media img {
  width: 100%;
  border-radius: 24px;
  background: #fff;
}

.bavlo-path-detail-copy h3 { margin-top: 0; }

.bavlo-center-action { display: flex; justify-content: center; margin-top: 26px; }

.bavlo-difference-section { background: linear-gradient(180deg, #fff 0%, #f7faff 100%); }
.bavlo-difference-card {
  padding: clamp(24px, 4vw, 36px);
  background: linear-gradient(135deg, #08112d 0%, #16234d 45%, #3c3210 100%);
  border-radius: 34px;
  color: #fff;
  box-shadow: var(--bavlo-shadow-strong);
}

.bavlo-difference-card h2,
.bavlo-difference-card p { color: #fff; }
.bavlo-diff-visual img { max-width: 460px; }
.bavlo-difference-list span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }

.bavlo-institute-strip { background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); }

.bavlo-final-cta {
  padding: clamp(38px, 7vw, 68px);
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(circle at 22% 20%, rgba(251,191,36,.22), transparent 18%),
    linear-gradient(135deg, #2563eb 0%, #3158ef 100%);
  box-shadow: 0 34px 90px rgba(37,99,235,.24);
}

.bavlo-final-cta span {
  display: inline-flex;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.bavlo-final-cta h2,
.bavlo-final-cta p { color: #fff; max-width: 760px; margin-left: auto; margin-right: auto; }
.bavlo-final-cta .bavlo-btn { margin-top: 18px; }

.bavlo-inner-hero {
  padding: 84px 0 50px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.bavlo-form-layout {
  align-items: flex-start;
}

.bavlo-demo-form,
.bavlo-demo-side { padding: 24px; }
.bavlo-demo-form .bavlo-btn { width: 100%; margin-top: 10px; }

.bavlo-form-message {
  display: none;
  margin-bottom: 12px;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
}

.bavlo-form-message.is-success,
.bavlo-form-message.is-error { display: block; }
.bavlo-form-message.is-success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.bavlo-form-message.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.bavlo-demo-side-visual { margin-bottom: 18px; }

.bavlo-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}

.bavlo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bavlo-reveal-delay { transition-delay: .12s; }
.bavlo-reveal-delay-2 { transition-delay: .22s; }

@media (max-width: 1100px) {
  .bavlo-path-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bavlo-path-selector { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .admin-bar .bavlo-nav { top: 46px; }
  .bavlo-nav-inner,
  .bavlo-nav nav { flex-wrap: wrap; }
  .bavlo-nav-inner { padding: 12px 0; justify-content: center; }
  .bavlo-hero-grid,
  .bavlo-how-grid,
  .bavlo-institute-grid,
  .bavlo-form-layout,
  .bavlo-inner-grid,
  .bavlo-showcase-grid,
  .bavlo-difference-card,
  .bavlo-path-detail { grid-template-columns: 1fr; }
  .bavlo-audience-grid { grid-template-columns: 1fr; }
  .bavlo-hero h1,
  .bavlo-inner-hero h1 { line-height: .96; }
  .bavlo-diff-visual img { max-width: 100%; }
}

@media (max-width: 640px) {
  .bavlo-container { width: min(100% - 22px, 1160px); }
  .bavlo-nav nav { gap: 14px; justify-content: center; }
  .bavlo-nav-cta { width: 100%; text-align: center; }
  .bavlo-steps-v2 article { grid-template-columns: 52px 1fr; }
  .bavlo-path-grid { grid-template-columns: 1fr; }
  .bavlo-btn { width: 100%; }
  .bavlo-actions { flex-direction: column; }
  .bavlo-quick-points { gap: 8px; }
}


/* V1.2.1 hotfix: keep How It Works card text in the wide content column */
.bavlo-steps-v2 article > span {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.bavlo-steps-v2 article > h3,
.bavlo-steps-v2 article > p {
  grid-column: 2;
  min-width: 0;
}

.bavlo-steps-v2 article > h3 {
  align-self: end;
}

.bavlo-steps-v2 article > p {
  align-self: start;
}

/* V1.2.1 refinement: reduce image overpowering on the how section */
.bavlo-how-section .bavlo-section-visual img {
  max-width: 420px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .bavlo-steps-v2 article {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }

  .bavlo-steps-v2 article > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .bavlo-steps-v2 article > h3 {
    font-size: 20px;
  }

  .bavlo-steps-v2 article > p {
    font-size: 15px;
    line-height: 1.55;
  }
}