html, body {
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
    @media (max-width: 768px) {
      body {
        padding-top: 0 !important;
        margin-top: 0 !important;
      }
      main, .main, #main, .wrapper, .page-wrapper, .content-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
      }
      section:first-of-type,
      section.hero,
      .hero,
      #hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      .hero .hero-text,
      .hero-content,
      .hero-left {
        padding-top: 72px !important;
      }
      nav, header, .navbar, .nav, #navbar {
        margin-bottom: 0 !important;
      }
    }

    /* ===== BASE TYPOGRAPHY ===== */
    body { font-family: 'DM Sans', sans-serif; background:#fff; color:#0A0A0A; overflow-x:hidden; }
    h1,h2,h3,.display-font { font-family:'Bebas Neue', sans-serif; letter-spacing:.02em; }
    /* ===== HERO ANIMATIONS ===== */
    .word-reveal { opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
    .word-reveal.is-visible { opacity:1; transform: translateY(0); }
    .float-star { position:absolute; pointer-events:none; opacity:.8; animation: floatUp linear infinite; z-index: 2; }
    @keyframes floatUp { from { transform: translateY(40px) scale(.9); opacity:0; } 15%{opacity:1;} to { transform: translateY(-80vh) scale(1.2); opacity:0; } }
    /* ===== SCROLL REVEAL ===== */
    .reveal-on-scroll { opacity:0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
    .reveal-on-scroll.is-visible { opacity:1; transform: translateY(0); }
    /* ===== GLASS CARDS ===== */
    .glass-card { background: rgba(10,10,10,.72); backdrop-filter: blur(14px); border:1px solid rgba(248,180,217,.25); box-shadow: 0 0 0 rgba(233,30,140,0); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
    .glass-card:hover { transform: translateY(-8px); box-shadow: 0 0 38px rgba(233,30,140,.28); border-color: rgba(233,30,140,.55); }
    .pink-glow { box-shadow: 0 0 28px rgba(233,30,140,.28); }
    /* ===== MARQUEE ===== */
    .marquee { display:flex; width:max-content; animation: marquee 28s linear infinite; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    /* ===== TIMELINE ===== */
    .timeline-line { position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background: linear-gradient(180deg, transparent 0%, #E91E8C 15%, #F472B6 50%, #E91E8C 85%, transparent 100%); box-shadow:0 0 18px rgba(233,30,140,.55); animation:pulseLine 2.8s ease-in-out infinite; }
    @keyframes pulseLine { 50% { opacity:.65; } }
    /* ===== AI BADGE ===== */
    .ai-badge { animation: pulseBadge 2s ease-in-out infinite; }
    @keyframes pulseBadge { 50% { transform: scale(1.05); box-shadow:0 0 24px rgba(248,180,217,.38); } }
    /* ===== NAV SCROLL STATE ===== */
    .nav-scrolled { background: rgba(10,10,10,.95); backdrop-filter: blur(14px); }
    /* ===== ACCENT UNDERLINE ===== */
    .accent-underline { position:relative; display:inline-block; }
    .accent-underline::after { content:''; position:absolute; left:0; bottom:.05em; width:100%; height:10px; background: linear-gradient(135deg, rgba(248,180,217,.15), rgba(233,30,140,.95)); z-index:-1; border-radius:999px; }

    /* ===== HERO ENHANCEMENTS ===== */
    .hero-text-shadow { text-shadow: 2px 2px 0px #000, 4px 4px 12px rgba(0,0,0,0.6); }

    /* SPARKLE ANIMATIONS */
    .sparkle-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
    }

    .sparkle {
      position: absolute;
      color: #E91E8C;
      opacity: 0;
      animation: sparkleFloat 4s ease-in-out infinite;
      text-shadow: 0 0 8px rgba(233,30,140,0.8), 0 0 16px rgba(233,30,140,0.4);
    }

    @keyframes sparkleFloat {
      0% {
        opacity: 0;
        transform: translateY(0px) scale(0.5) rotate(0deg);
      }
      20% {
        opacity: 1;
      }
      60% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
        transform: translateY(-60px) scale(1.2) rotate(180deg);
      }
    }

    @media (max-width: 768px) {
      * { box-sizing: border-box; }
      body { margin: 0 !important; padding: 0 !important; }
      main { margin-top: 0 !important; padding-top: 0 !important; }

      #siteNav {
        margin-bottom: 0 !important;
      }

      .hero {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0 !important;
        margin-top: 0 !important;
        top: 0 !important;
      }

      .hero-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        flex: unset !important;
        z-index: 0 !important;
        opacity: 0.55 !important;
      }

      .hero-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
      }

      .hero-text {
        position: relative !important;
        z-index: 2 !important;
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 72px 28px 60px !important;
        text-align: left !important;
        margin-top: 0 !important;
      }

      .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        top: 0;
        background: linear-gradient(135deg, rgba(248,180,217,0.82) 0%, rgba(233,30,140,0.55) 100%);
        z-index: 1;
        pointer-events: none;
      }
    }

@media (max-width: 768px) {
  body, html {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body > *:not(nav):not(header):first-of-type,
  body > div:first-of-type,
  body > main:first-of-type,
  body > section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  nav ~ section:first-of-type,
  nav ~ div:first-of-type,
  header ~ section:first-of-type,
  header ~ div:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .hero {
    position: relative !important;
    display: block !important;
    min-height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hero-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    flex: none !important;
    z-index: 0 !important;
    opacity: 0.5 !important;
    display: block !important;
  }
  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }
  .hero-text {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 80px 24px 60px 24px !important;
    margin: 0 !important;
    display: block !important;
  }
  
  .marquee,
  .ticker,
  .ticker-wrap,
  .marquee-section,
  .scrolling-text,
  .ticker-section,
  section[data-section="ticker"],
  [class*="marquee"],
  [class*="ticker"] {
    display: block !important;
    height: auto !important;
    min-height: unset !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 100svh !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-text {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 76px 24px 60px 24px !important;
    margin: 0 !important;
    min-height: 100svh !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .hero-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    flex: none !important;
    z-index: 0 !important;
    opacity: 0.5 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }
}

@media (max-width: 768px) {
  .feature-card,
  [class*="feature-card"],
  [class*="feature_card"],
  .features-grid > div,
  .features-grid > article,
  .features section > div,
  #features .card,
  [class*="features"] [class*="card"] {
    transition: box-shadow 0.5s ease, transform 0.5s ease !important;
  }

  .feature-card.glow-active,
  [class*="feature-card"].glow-active,
  .features-grid > div.glow-active,
  .features-grid > article.glow-active,
  [class*="features"] [class*="card"].glow-active {
    box-shadow: 0 0 18px 4px rgba(233,30,140,0.7), 0 0 40px 8px rgba(233,30,140,0.3) !important;
    transform: translateY(-4px) !important;
  }
}

/* Booked & Paid Pipeline Styles */
.bp-step .bp-icon-wrap:hover {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 0 40px rgba(233,30,140,0.8) !important;
}

@keyframes pipelinePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(233,30,140,0.5); }
  50% { box-shadow: 0 0 48px rgba(233,30,140,0.9), 0 0 80px rgba(233,30,140,0.3); }
}

.bp-step .bp-icon-wrap {
  animation: pipelinePulse 3s ease-in-out infinite;
}

.bp-step:nth-child(2) .bp-icon-wrap { animation-delay: 0.4s; }
.bp-step:nth-child(3) .bp-icon-wrap { animation-delay: 0.8s; }
.bp-step:nth-child(4) .bp-icon-wrap { animation-delay: 1.2s; }
.bp-step:nth-child(5) .bp-icon-wrap { animation-delay: 1.6s; }

/* Scroll animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: stack pipeline vertically */
@media (max-width: 768px) {
  .booked-paid-pipeline {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }
  .bp-connector {
    display: none !important;
  }
  .bp-step {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  .bp-step .bp-icon-wrap {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .bp-step h4, .bp-step p {
    text-align: left !important;
  }
}

.founder-img-wrap {
  position: relative;
  width: 300px;
  height: 340px;
  border-radius: 24px;
  flex-shrink: 0;
  animation: founderGlow 3s ease-in-out infinite;
}

.founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 24px;
  display: block;
  position: relative;
  z-index: 1;
}

@keyframes founderGlow {
  0% {
    box-shadow: 
      0 0 20px 4px rgba(233,30,140,0.4),
      0 0 60px 10px rgba(233,30,140,0.15),
      0 0 0px 0px rgba(248,180,217,0);
  }
  50% {
    box-shadow: 
      0 0 30px 8px rgba(233,30,140,0.65),
      0 0 80px 20px rgba(233,30,140,0.25),
      0 0 120px 40px rgba(248,180,217,0.1);
  }
  100% {
    box-shadow: 
      0 0 20px 4px rgba(233,30,140,0.4),
      0 0 60px 10px rgba(233,30,140,0.15),
      0 0 0px 0px rgba(248,180,217,0);
  }
}

@media (max-width: 768px) {
  .founder-img-wrap {
    width: 240px;
    height: 272px;
    margin: 0 auto 32px;
  }
}