/* BeBiWo branding - landing page + app polish. Loaded LAST so it wins the cascade.
   Uses tokens from brand-tokens.css. */

/* ---------- base ---------- */
body { font-family: var(--bw-font-body); color: var(--bw-ink); }
::selection { background: var(--bw-pink-600); color: #fff; }

/* ---------- landing nav ---------- */
#landing-nav { background: var(--bw-grad-hero); } /* wrapper behind hero */
#landing-nav nav {
  position: sticky; top: 0; z-index: 50;
  transition: background .25s ease, box-shadow .25s ease;
}
#landing-nav nav.bw-stuck,
#landing-nav nav[data-stuck="true"] {
  background: rgba(46, 16, 101, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(46, 16, 101, .35);
}
#landing-nav .nav-wrapper { max-width: 1320px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; min-height: 72px; }
#landing-nav .header_logo { display: flex; align-items: center; }
#landing-nav .brand-logo img { height: 46px; width: auto; display: block; }
.bw-nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; list-style: none; }
.bw-nav-links li { display: block; }
.bw-nav-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem .9rem; border-radius: 999px; transition: background .18s ease; }
.bw-nav-links a:hover { background: rgba(255,255,255,.16); }
.bw-nav-links a.bw-login { }
.bw-nav-links a.bw-register {
  background: var(--bw-grad-cta); color: #fff; margin-left: .4rem; font-weight: 700;
  box-shadow: 0 12px 26px -10px rgba(190,24,93,.6);
}
.bw-nav-links a.bw-register:hover { filter: brightness(1.06); background: var(--bw-grad-cta); }
.bw-burger { display: none; margin-left: auto; width: 42px; height: 42px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 12px; }
.bw-burger span { display: block; width: 24px; height: 3px; border-radius: 3px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.bw-burger.bw-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bw-burger.bw-open span:nth-child(2) { opacity: 0; }
.bw-burger.bw-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero ---------- */
header_bg, .header_bg { padding: 0; }
.header_bg { position: relative; }
.header_bg .bw-hero-layout {
  max-width: 1320px; margin: 0 auto; padding: 96px 28px 84px;
  display: flex; align-items: center; gap: 48px; position: relative; z-index: 2;
}
.header_bg .home_pz_rel { width: 54%; flex-shrink: 0; }
.header_bg h1.header {
  font-family: var(--bw-font-head);
  color: #fff; font-weight: 700;
  font-size: clamp(2.5rem, 4.2vw, 3.9rem);
  line-height: 1.12; letter-spacing: -.75px;
  text-shadow: 0 8px 30px rgba(46,16,101,.35);
}
.header_bg h1 span { color: #ffd6f2; }
.header_bg h5.header {
  color: rgba(255,255,255,.94); font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.55;
  margin: 16px 0 0; text-shadow: 0 2px 14px rgba(46,16,101,.25);
}
.bw-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.bw-cta .main-hdr-bttn, .bw-cta .btn_primary.main-hdr-bttn {
  background: var(--bw-grad-cta) !important;
  padding: 15px 34px; font-size: 1.02rem; font-weight: 700;
  border-radius: 999px !important; min-height: auto;
  box-shadow: 0 18px 38px -12px rgba(190,24,93,.65);
}
.bw-cta .main-hdr-bttn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.bw-cta .main-know-bttn {
  color: #fff !important; border: 1.5px solid rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.06); border-radius: 999px !important;
  padding: 15px 30px; font-weight: 600; text-transform: none;
}
.bw-cta .main-know-bttn:hover { background: rgba(255,255,255,.18); }

/* keep circles subtle on the gradient */
.bw-hero-circles { position: absolute !important; right: -140px; top: -40px; z-index: 0; opacity: .35; pointer-events: none; }
.bw-hero-circles circle { stroke: #ffd6f2 !important; }

/* ---------- hero filters ---------- */
.dt_hdr_filters { margin-top: 40px; }
.dt_hdr_filters .input-field label, .dt_hdr_filters label.bold { color: rgba(255,255,255,.9); font-weight: 600; }
.dt_hdr_filters select.browser-default, .dt_hdr_filters select {
  border: 1.5px solid rgba(255,255,255,.28); border-radius: 14px; background: rgba(255,255,255,.1);
  color: #fff; padding: 10px 14px; font-weight: 600; font-size: .95rem;
}
.dt_hdr_filters select option { color: var(--bw-ink); }
.dt_hdr_filters .btn { background: var(--bw-grad-cta) !important; border-radius: 999px !important; padding: 0 26px; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(190,24,93,.6); }

/* ---------- hero mockup (right side) ---------- */
.hero_mockup { position: relative; width: 46%; display: flex; justify-content: center; z-index: 2; }
.bw-phone {
  width: 300px; max-width: 92%; border-radius: 44px;
  background: linear-gradient(160deg, #fff 0%, #fdf3ff 100%);
  box-shadow: 0 40px 80px -30px rgba(20,3,45,.65), inset 0 0 0 1px rgba(255,255,255,.6);
  padding: 14px; transform: rotate(3deg);
}
.bw-phone-screen {
  border-radius: 34px; background: var(--bw-grad-hero);
  padding: 22px 18px; min-height: 520px; position: relative; overflow: hidden;
}
.bw-profile-card {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border-radius: 22px; padding: 14px;
  box-shadow: var(--bw-shadow-card);
}
.bw-avatar { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #f9a8d4, #c084fc); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.bw-avatar.bw-av1::after { content: 'A'; }
.bw-profile-info .bw-name { font-weight: 700; color: var(--bw-ink); font-size: 1.02rem; }
.bw-verified { display: inline-block; background: var(--bw-violet-600); color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 17px; text-align: center; font-size: .68rem; margin-left: 3px; vertical-align: middle; }
.bw-location { color: var(--bw-text-muted); font-size: .82rem; margin-top: 2px; }
.bw-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bw-tags span { background: #f6edff; color: var(--bw-violet-700); border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 600; }
.bw-chat-bubble {
  margin-top: 16px; width: fit-content; max-width: 88%;
  background: #fff; color: var(--bw-ink); border-radius: 6px 18px 18px 18px;
  padding: 11px 14px; font-size: .88rem; box-shadow: var(--bw-shadow-soft); animation: bwFloat 4s ease-in-out infinite;
}
.bw-match-card {
  margin-top: 18px; background: #fff; border-radius: 22px; padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; box-shadow: var(--bw-shadow-card);
  animation: bwFloat 5s ease-in-out .6s infinite;
}
.bw-match-heart { font-size: 30px; }
.bw-match-card b { color: var(--bw-ink); font-size: .95rem; }
.bw-match-card { font-size: .82rem; color: var(--bw-text-muted); }
.bw-badge {
  position: absolute; top: 14px; right: -14px; background: #fff; border-radius: 999px;
  padding: 7px 12px; display: flex; gap: 6px; align-items: center; font-size: .76rem; font-weight: 700;
  color: var(--bw-ink); box-shadow: var(--bw-shadow-soft); animation: bwFloat 5.5s ease-in-out 1.1s infinite;
}
@keyframes bwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- below-hero sections ---------- */
.dt_header_short_desc { position: relative; }
.dt_header_short_desc h2 { color: var(--bw-ink); font-family: var(--bw-font-head); font-weight: 700; }
.dt_header_short_desc p { color: var(--bw-ink-soft); font-size: 1.02rem; line-height: 1.7; }
.dt_header_short_desc svg.first { opacity: .5; }
.dt_header_how_works h2 { color: var(--bw-ink); font-family: var(--bw-font-head); font-weight: 700; }
.dt_header_how_works .dt_header_how_works_innr p { color: var(--bw-violet-600); font-weight: 700; letter-spacing: .5px; }
.dt_header_how_works .list h5 { color: var(--bw-ink); font-weight: 700; }
.dt_header_how_works .list p { color: var(--bw-ink-soft); line-height: 1.7; }
.dt_header_how_works { background: var(--bw-bg-cream); }

/* Get-started band */
.dt_get_start { padding: 90px 0; }
.dt_get_start h4 { font-family: var(--bw-font-head); font-weight: 700; color: var(--bw-ink); }
.dt_get_start p { color: var(--bw-violet-600); font-weight: 600; letter-spacing: .5px; }
.dt_get_start .btn_glossy { background: var(--bw-grad-cta) !important; border-radius: 999px !important; padding: 14px 38px; font-weight: 700; box-shadow: 0 18px 38px -12px rgba(190,24,93,.6); }
.container:has(.dt_get_start) { }

/* Footer */
.dt_index_foot { background: var(--bw-bg-cream); border-top: 1px solid var(--bw-border); }
.dt_index_foot h5, .dt_index_foot h6 { color: var(--bw-plum-900); font-weight: 700; }
.dt_index_foot a { color: var(--bw-ink-soft); }
.dt_index_foot a:hover { color: var(--bw-violet-700); }
.dt_index_foot .copyright { color: var(--bw-text-muted); }

/* ---------- app-wide touches ---------- */
.btn_primary, .btn_glossy { font-family: var(--bw-font-head); }

/* ---------- layout stability (CLS) ---------- */
.dt_index_pro_users .user img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
.dt_testimonial_slide .hdr img.circle { width: 52px; height: 52px; }
.dt_header_short_desc, .dt_header_how_works, .dt_tstm, .dt_get_start, .dt_index_foot { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ---------- night mode (body.bw-night, set in header.php) ---------- */
body.bw-night {
  background: #12101c; color: #ece9f5;
}
body.bw-night .dt_header_short_desc,
body.bw-night .dt_header_how_works,
body.bw-night .dt_index_foot { background: #17132a; }
body.bw-night .dt_header_short_desc h2,
body.bw-night .dt_header_how_works h2,
body.bw-night .dt_get_start h4,
body.bw-night .dt_index_foot h5,
body.bw-night .dt_index_foot h6 { color: #e9e4f7; }
body.bw-night .dt_header_short_desc p,
body.bw-night .dt_header_how_works .list p,
body.bw-night .dt_index_foot a,
body.bw-night .dt_index_foot .copyright { color: #c8c2dd; }
body.bw-night .dt_header_how_works .dt_header_how_works_innr p,
body.bw-night .dt_get_start p { color: #f0b4e8; }
body.bw-night .dt_get_start h4 { color: #e9e4f7; }
body.bw-night .dt_header_short_desc svg.first { opacity: .28; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .header_bg .home_pz_rel { width: 62%; }
  .header_bg .bw-hero-layout { gap: 20px; }
  .hero_mockup { width: 38%; }
}
@media (max-width: 900px) {
  .bw-burger { display: flex; }
  .bw-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(46,16,101,.97); padding: 16px 22px 22px;
    box-shadow: 0 30px 50px -20px rgba(20,3,45,.6);
  }
  .bw-nav-links.bw-open { display: flex; }
  .bw-nav-links a { padding: 12px 14px; font-size: 1rem; }
  .bw-nav-links a.bw-register { margin-left: 0; text-align: center; margin-top: 6px; }
  .header_bg .bw-hero-layout { flex-direction: column; padding: 60px 22px 70px; }
  .header_bg .home_pz_rel { width: 100%; }
  .hero_mockup { width: 100%; padding-top: 30px; }
  .bw-phone { max-width: 320px; transform: none; }
  .dt_hdr_filters { display: none; }
}
@media (max-width: 520px) {
  #landing-nav .nav-wrapper { padding: 0 18px; min-height: 64px; }
  #landing-nav .brand-logo img { height: 38px; }
  .header_bg h1.header { font-size: 2.15rem; }
  .bw-cta { flex-direction: column; align-items: stretch; }
  .bw-cta a { text-align: center; }
  .bw-hero-circles { display: none; }
  .bw-phone-screen { min-height: 430px; }
}

/* very small AND short screens: keep both CTAs above the fold */
@media (max-width: 360px) and (max-height: 620px) {
  .header_bg .bw-hero-layout { padding: 40px 18px 48px; }
  .header_bg h1.header { font-size: 1.88rem; }
  .header_bg h5.header { font-size: .95rem; margin-top: 10px; }
  .bw-cta { margin-top: 18px; gap: 10px; }
  .bw-cta a { padding: 12px 20px; font-size: .92rem; }
}