:root{
      --accent:#d63384;
      --accent-2:#ff8a42;
      --muted:#6c757d;
      --bg:#fff8fb;
      --card:#ffffff;
      --radius:14px;
    }

    body{
      background:var(--bg);
      color:#222;
      font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    .hero{padding:4rem 0}
    @media(min-width:992px){ .hero{padding:6rem 0} }
    :root{
      --accent:#d63384;
      --accent-2:#ff8a42;
      --accents:#f61e8a;
      --accents-2:#a41743;
      --yellow:#ffef62; /* bumble influence */
      --bg:#fff8fb;
      --card:#ffffff;
      --radius:18px;
    }

    .cta-btn{
      border-radius:999px;
      padding:.6rem 1.25rem;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      border:none;
    }
    .hero-badge{
        display:inline-block;
        background:var(--yellow);
        padding:.35rem .8rem;
        border-radius:999px;
        font-weight:600;
        font-size:.9rem;
      }
      
    .cta-btn:hover{opacity:.9}

    .text-gradient{
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .feature-card{
      border-radius:12px;
      background:var(--card);
      box-shadow:0 8px 28px rgba(33,37,41,0.06);
      padding:1.25rem;
    }

    .testimonial{
      background:linear-gradient(180deg,#fff,#fff0f7);
      border-radius:12px;
      padding:1rem;
      border:1px solid #f1f3f5;
    }

    .phone-mock{
      background:linear-gradient(180deg,#fff,#fff1f3);
      border-radius:28px;
      padding:1rem;
      border:1px solid rgba(214,51,132,0.08);
      max-width:330px;
      margin:auto;
    }

    .wave{
      background:linear-gradient(180deg, rgba(214,51,132,0.08), rgba(255,138,66,0.05));
      padding:3rem 0;
    }

    footer{
      padding:2.5rem 0;
    }

    /* --- Improved Mobile Styling --- */

    @media (max-width: 576px) {
      .hero .display-5{font-size:2rem;}
      .phone-mock{max-width:260px;}
      nav .btn{padding:0.4rem 0.9rem;font-size:.85rem;}
      footer .nav-link{padding:0.15rem 0;font-size:.9rem;}
    }
    .bg-gradient {
      background: linear-gradient(45deg, #d63384, #ff4081) !important;
    }
    .bg-dark-gradient {
      background: linear-gradient(45deg, #681840, #bf2a5c) !important;
    }
    .text-primary{
      color: #bf2a5c !important;
    }


.form-switch-primary:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-switch-primary:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25) !important;
}

/* Textarea styling */
.fancy-pink-textarea {
  background: #ffe5f2;
  border: 2px solid #ff80c8;
  border-radius: 12px;
  padding: 12px;
  font-size: 1rem;
  color: #d63384;
  transition: all 0.25s ease;
}

.fancy-pink-textarea::placeholder {
  color: #ff99d6;
}

.fancy-pink-textarea:focus {
  border-color: #e83e8c !important;
  box-shadow: 0 0 12px rgba(232, 62, 140, 0.4);
  background: #ffd6ec;
}

/* Heart icon inside textarea */
.pink-heart-icon {
  position: absolute;
  right: 12px;
  bottom: 52px;
  color: #ff4da6;
  font-size: 1.2rem;
  opacity: 0.8;
}

/* Container for floating hearts */
#floatingHearts {
  position: absolute;
  pointer-events: none;
  inset: 0;
  overflow: visible;
}

/* Floating hearts animation */
.floating-heart {
  position: absolute;
  color: #ff4da6;
  font-size: 1.2rem;
  animation: floatUp 2.5s linear forwards;
  opacity: 0;
}

@keyframes floatUp {
  0% {
      transform: translateY(0) scale(0.8);
      opacity: 0.7;
  }
  50% {
      opacity: 1;
      transform: translateY(-40px) scale(1);
  }
  100% {
      transform: translateY(-80px) scale(1.3);
      opacity: 0;
  }
}

.stage-btn {
    border-color: #d63384;
    color: #d63384;
}
.stage-btn:hover {
    background-color: #d63384;
    border-color: #d63384;
    color: #ffffff;
}
.stage-btn.active {
    background: #d63384;
    border-color: #d63384;
    color: #fff;
}
.stage-btn.active:hover {
    background: #811e4f;
    border-color: #811e4f;
}

.bg-default{
  background-color: #eeeeee;
}
::-webkit-scrollbar { height: 6px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
  .no-underline{
    text-decoration: none !important;
  }
  .mini-profile {
    background: #fff;
    border-radius: 16px;
    padding: 18px 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: .2s ease;
  }

  .mini-profile:hover {
    transform: translateY(-4px);
  }

  .mini-profile img {
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .mini-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .mini-status {
    background: #fff4f2;
    color: #ff6f61;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
    display: inline-block;
  }

  .mini-goals .badge {
    background: #7a6ff0 !important; /* soft purple */
    font-size: .7rem;
  }

  .mini-breakers .badge {
    background: #e63946 !important;
    font-size: .7rem;
  }

  /* Fullscreen splash */
#splash {
  position: fixed;
  inset: 0;
  background: #ffffff;      /* clean white background */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

/* Logo / App name */
#splash .logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
  animation: fadeIn 1.2s forwards;
}

/* Fade-in animation */
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Hide splash */
#splash.hidden {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  text-align: center;
  padding: 20px;
}
.app-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.btn-lg {
  margin-top: 12px;
}
.fullscreen-center {
    height: 100vb;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffdde1, #ee9ca7);
  }

  .text-md{
    font-size: 16px;
  }

body {
  padding-top: 70px; /* adjust to your navbar height */
}

.navbar {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}