/* ============ tokens ============ */
:root{
  --white:#FFFFFF;
  --cream:#FFFDF9;
  --mint:#A8DADC;
  --mint-deep:#7FC3C6;
  --yellow:#FFCB77;
  --yellow-deep:#F5AC3C;
  --pink:#E5989B;
  --pink-deep:#D97479;
  --navy:#1D3557;
  --navy-70: rgba(29,53,87,.7);
  --navy-50: rgba(29,53,87,.5);
  --navy-10: rgba(29,53,87,.08);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 20px 50px -20px rgba(29,53,87,.25);
  --shadow-tight: 0 8px 24px -12px rgba(29,53,87,.3);

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{ max-width:100%; display:block; }

.shell{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}
.narrow{ max-width:760px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:var(--white);
  padding:12px 20px; z-index:200; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--pink-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ============ type ============ */
h1,h2,h3{ font-family:var(--font-display); color:var(--navy); margin:0; letter-spacing:-0.01em; }
h1{ font-weight:700; }
h2{ font-weight:600; }
h3{ font-weight:600; }
p{ margin:0; }

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pink-deep);
  margin-bottom:14px;
}
.eyebrow.center{ text-align:center; }

.section-title{
  font-size:clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
  line-height:1.15;
  margin-bottom:18px;
}
.section-title.center{ text-align:center; margin-inline:auto; }

.section-lead{
  font-size:1.08rem;
  color:var(--navy-70);
  max-width:52ch;
}
.section-lead.center{ margin-inline:auto; text-align:center; }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:13px 24px; border-radius:100px;
  text-decoration:none; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  border:1.5px solid transparent;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn-primary{
  background:var(--navy); color:var(--white);
  box-shadow: var(--shadow-tight);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: var(--shadow-soft); background:#16294a; }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--navy-10); }
.btn-ghost:hover{ background:var(--navy-10); transform:translateY(-2px); }
.btn-lg{ padding:16px 30px; font-size:1rem; }
.btn-nav{ padding:10px 20px; font-size:.85rem; }

/* ============ header ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,253,249,.82);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom:1px solid rgba(29,53,87,.06);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled{ box-shadow: 0 8px 30px -20px rgba(29,53,87,.4); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--navy); }
.brand-heart{ color:var(--yellow-deep); }
.main-nav{ display:flex; gap:30px; margin-inline:auto; }
.main-nav a{
  color:var(--navy-70); text-decoration:none; font-weight:500; font-size:.94rem;
  position:relative; padding-block:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--pink-deep); transition:width .25s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; }
.mobile-nav{
  display:none; flex-direction:column; gap:4px; padding:12px 24px 20px;
  background:var(--cream); border-top:1px solid var(--navy-10);
}
.mobile-nav a:not(.btn){ color:var(--navy); text-decoration:none; padding:10px 0; font-weight:500; }
.mobile-nav .btn{ margin-top:8px; justify-content:center; }
.mobile-nav.open{ display:flex; }

@media (max-width: 900px){
  .main-nav, .btn-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============ hero ============ */
.hero{ position:relative; overflow:hidden; padding-block: 72px 40px; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:0; will-change:transform; }
.hero-blob-mint{ width:420px; height:420px; background:var(--mint); top:-160px; right:-120px; }
.hero-blob-pink{ width:340px; height:340px; background:var(--pink); bottom:-140px; left:-100px; opacity:.4; }

/* flying bee: loops a wavy path across the hero, purely ambient (no hover trigger) */
.hero-bee-path{
  position:absolute; top:0; left:0; width:1px; height:1px; z-index:2;
  offset-path: path('M -40 260 C 260 60, 480 460, 760 220 S 1180 60, 1500 300');
  offset-rotate: 0deg;
  animation: beeFly 16s linear infinite;
}
.hero-bee-emoji{
  display:inline-block; font-size:1.9rem; transform-origin:center;
  animation: beeBob .55s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 10px rgba(29,53,87,.25));
}
@keyframes beeFly{ 0%{ offset-distance:0%; } 100%{ offset-distance:100%; } }
@keyframes beeBob{ from{ transform:translateY(0) rotate(-6deg); } to{ transform:translateY(-10px) rotate(6deg); } }
@media (max-width:900px){ .hero-bee-path{ display:none; } }

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center;
}
.hero-title{
  font-size:clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  line-height:1.04;
  margin-bottom:22px;
}
.hero-sub{ font-size:1.15rem; color:var(--navy-70); max-width:46ch; margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.hero-microtrust{ font-size:.85rem; color:var(--navy-50); }

/* phone 3d stage: outer element gets scroll-linked tilt (JS), inner keeps its own idle float */
.phone-3d{ perspective:1400px; }
.phone-3d .phone-mock{
  animation: phoneFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes phoneFloat{
  0%,100%{ transform: rotateY(-6deg) rotateX(3deg) translateY(0); }
  50%{ transform: rotateY(6deg) rotateX(-2deg) translateY(-12px); }
}

/* phone mock */
.phone-mock{
  width:min(320px, 100%); margin-inline:auto;
  background:var(--white); border-radius:32px;
  box-shadow: var(--shadow-soft);
  border:8px solid var(--navy);
  overflow:hidden; position:relative;
}
.phone-mock--lg{ width:min(360px,100%); }
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:110px; height:18px; background:var(--navy); border-radius:0 0 14px 14px; z-index:2;
}
.wa-header{
  display:flex; align-items:center; gap:10px; padding:22px 16px 12px;
  background:var(--navy); color:var(--white);
}
.wa-avatar{ border-radius:50%; background:var(--yellow); padding:4px; }
.wa-name{ font-weight:600; font-size:.95rem; margin:0; }
.wa-status{ font-size:.72rem; color:var(--mint); margin:0; }
.wa-body{
  min-height:280px; padding:18px 14px; display:flex; flex-direction:column; gap:10px;
  background: repeating-linear-gradient(180deg, #F2FBFB, #F2FBFB 40px, #EFF9F9 40px, #EFF9F9 80px);
}
.wa-body--testimonial{ justify-content:center; min-height:300px; }
.bubble{
  max-width:82%; padding:11px 14px; border-radius:16px; font-size:.88rem; line-height:1.4;
  opacity:0; transform:translateY(8px) scale(.98);
  animation: bubbleIn .5s var(--ease) forwards;
}
.bubble-in{ background:var(--white); color:var(--navy); border-bottom-left-radius:4px; align-self:flex-start; box-shadow:0 4px 14px -8px rgba(29,53,87,.3); }
.bubble-out{ background:var(--yellow); color:var(--navy); border-bottom-right-radius:4px; align-self:flex-end; }
.bubble:nth-child(1){ animation-delay:.15s; }
.bubble:nth-child(2){ animation-delay:.55s; }
.bubble:nth-child(3){ animation-delay:.95s; }
.bubble:nth-child(4){ animation-delay:1.35s; }
@keyframes bubbleIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
.bubble-attribution{ font-size:.78rem; color:var(--navy-50); text-align:center; margin-top:6px; opacity:0; animation: bubbleIn .5s var(--ease) forwards; animation-delay:1.3s; }
.typing-dots{ display:inline-flex; gap:4px; padding:12px 14px; background:var(--white); border-radius:16px; border-bottom-left-radius:4px; align-self:flex-start; }
.typing-dots span{ width:6px; height:6px; border-radius:50%; background:var(--navy-50); animation: typingBounce 1.1s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.wa-input{
  padding:12px 16px; background:var(--white); border-top:1px solid var(--navy-10);
  font-size:.82rem; color:var(--navy-50);
}
.wa-input span{
  display:block; background:#F2F2F2; border-radius:100px; padding:9px 14px;
}

.scroll-cue{ display:flex; justify-content:center; margin-top:32px; }
.scroll-cue span{
  width:1.5px; height:40px; background: linear-gradient(var(--navy-50), transparent);
  animation: scrollCue 1.8s infinite;
}
@keyframes scrollCue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============ trust bar ============ */
.trust-bar{ padding-block:28px; border-block:1px solid var(--navy-10); background:var(--white); }
.trust-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; }
.trust-label{ font-size:.82rem; color:var(--navy-50); }
.trust-logos{ display:flex; flex-wrap:wrap; gap:12px; }
.trust-chip{
  font-weight:600; font-size:.85rem; color:var(--navy); padding:8px 18px;
  background:var(--navy-10); border-radius:100px; text-decoration:none;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.trust-chip:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }

/* ============ generic section ============ */
.section{ padding-block:96px; }
@media (max-width:700px){ .section{ padding-block:64px; } }

/* problem */
.problem{ background:var(--cream); }
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; perspective:1200px; }
.problem-card{
  background:var(--white); border-radius:var(--radius-md); padding:32px 26px;
  box-shadow: var(--shadow-tight);
}
.problem-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--pink);
  color:var(--white); font-weight:700; font-size:1.2rem; font-family:var(--font-display);
  margin-bottom:18px;
}
.problem-card h3{ font-size:1.15rem; margin-bottom:10px; }
.problem-card p{ color:var(--navy-70); font-size:.95rem; }

/* solution */
.solution{ background:var(--white); }
.solution-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.check-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.check-list li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.check-dot{
  width:22px; height:22px; border-radius:50%; background:var(--mint); flex:none; position:relative;
}
.check-dot::after{
  content:''; position:absolute; left:6px; top:4px; width:6px; height:10px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:rotate(45deg);
}
.solution-products{ display:grid; gap:20px; perspective:1200px; }
.product-card{
  background:var(--cream); border-radius:var(--radius-md); padding:28px;
  border:1.5px solid var(--navy-10); position:relative;
}
.product-card--live{ background: linear-gradient(155deg, var(--yellow) 0%, var(--white) 65%); border-color:transparent; }
.product-badge{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; background:var(--navy); color:var(--white); margin-bottom:14px;
}
.product-badge--soon{ background:var(--navy-50); }
.product-card h3{ font-size:1.3rem; margin-bottom:8px; }
.product-card p{ color:var(--navy-70); margin-bottom:20px; }

/* how it works */
.how{ background:var(--mint); }
.how-path{ display:flex; align-items:center; margin-top:56px; }
.how-step{ flex:1; text-align:center; max-width:280px; margin-inline:auto; }
.how-flower{ position:relative; width:64px; height:64px; margin:0 auto 18px; }
.how-flower svg{ width:100%; height:100%; filter: drop-shadow(0 8px 16px rgba(29,53,87,.2)); }
.how-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--navy);
}
.how-step h3{ font-size:1.1rem; margin-bottom:8px; }
.how-step p{ color:var(--navy-70); font-size:.92rem; }
.how-connector{ flex:0 0 auto; width:100px; margin-inline:-6px; }
.how-connector svg{ width:100%; height:24px; overflow:visible; }
.how-connector path{ fill:none; stroke:var(--navy); stroke-width:2; stroke-dasharray:6 7; stroke-linecap:round; opacity:.45; }
@media (max-width:820px){
  .how-path{ flex-direction:column; }
  .how-connector{ width:2px; height:36px; }
  .how-connector svg{ display:none; }
}

/* benefits */
.benefits{ background:var(--cream); }
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; perspective:1200px; }
.benefit-card{
  background:var(--white); border-radius:var(--radius-md); padding:28px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: var(--shadow-tight);
}
.benefit-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-soft); }
.benefit-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:16px;
}
.benefit-card h3{ font-size:1.1rem; margin-bottom:8px; }
.benefit-card p{ color:var(--navy-70); font-size:.92rem; }

/* chat experience */
.chat-experience{ background:var(--navy); color:var(--white); }
.chat-experience .section-lead{ color:rgba(255,255,255,.72); }
.chat-experience .eyebrow{ color:var(--yellow); }
.chat-experience .section-title{ color:var(--white); }
.chat-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; }
.chat-mock-wrap{ display:flex; justify-content:center; }

/* why beeyou */
.why{ background:var(--white); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; perspective:1200px; }
.team-grid--duo{ grid-template-columns:repeat(2,1fr); max-width:520px; margin-inline:auto; width:100%; }
.team-card{
  background:var(--cream); border-radius:var(--radius-md); padding:22px 18px; text-align:center;
}
.team-photo{
  display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%;
  margin-bottom:16px; padding:4px;
  box-shadow: 0 6px 18px -6px rgba(29,53,87,.35);
}
.team-photo img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2.5px solid var(--white);
}
.team-card h3{ font-size:1.05rem; margin-bottom:6px; }
.team-card p{ font-size:.85rem; color:var(--navy-70); }
.team-quote{
  grid-column:1 / -1; margin:10px 0 0; padding:26px 30px; border-left:3px solid var(--pink-deep);
  font-family:var(--font-display); font-size:1.2rem; font-style:italic; color:var(--navy); background:var(--cream);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}

/* parents */
.parents{ background:var(--pink); }
.parents-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.parents-quote-card{
  background:var(--white); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-soft); margin:0;
}
.parents-quote-card blockquote{
  margin:0 0 16px; font-family:var(--font-display); font-size:1.35rem; line-height:1.4; color:var(--navy);
}
.parents-quote-card figcaption{ font-size:.9rem; color:var(--navy-50); font-weight:600; }

/* faq */
.faq{ background:var(--cream); }
.faq-list{ margin-top:40px; display:grid; gap:12px; }
.faq-item{ background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-tight); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; padding:20px 22px; font-family:var(--font-body); font-weight:600; font-size:1rem;
  color:var(--navy); cursor:pointer; text-align:left;
}
.faq-icon{ position:relative; width:18px; height:18px; flex:none; }
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; background:var(--navy); border-radius:2px;
}
.faq-icon::before{ width:18px; height:2px; top:8px; left:0; }
.faq-icon::after{ width:2px; height:18px; top:0; left:8px; transition: transform .3s var(--ease); }
.faq-q[aria-expanded="true"] .faq-icon::after{ transform:rotate(90deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 22px 22px; color:var(--navy-70); font-size:.96rem; max-width:65ch; }

/* final cta */
.final-cta{ background: linear-gradient(160deg, var(--yellow) 0%, var(--pink) 100%); text-align:center; }
.final-cta-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.final-cta-bee{ margin-bottom:12px; filter: drop-shadow(0 10px 20px rgba(29,53,87,.25)); }
.final-cta .btn{ margin-top:18px; background:var(--navy); }

/* footer */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.75); padding-top:56px; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand p{ margin-top:12px; font-size:.88rem; max-width:26ch; color:rgba(255,255,255,.6); }
.footer-col h4{ color:var(--white); font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col a, .footer-supporters{ display:block; color:rgba(255,255,255,.7); text-decoration:none; font-size:.92rem; margin-bottom:8px; }
.footer-col a:hover{ color:var(--yellow); }
.footer-bottom{ padding-block:18px; font-size:.8rem; color:rgba(255,255,255,.5); }

/* ============ reveal animations ============ */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.12s; }

/* stagger children for grids: a subtle 3D card-flip reveal, driven purely by scroll (no hover) */
.problem-grid.in-view .problem-card,
.benefits-grid.in-view .benefit-card,
.team-grid.in-view .team-card,
.solution-products.in-view .product-card{
  animation: staggerIn .7s var(--ease) both;
}
.problem-grid .problem-card:nth-child(1){ animation-delay:.05s; }
.problem-grid .problem-card:nth-child(2){ animation-delay:.15s; }
.problem-grid .problem-card:nth-child(3){ animation-delay:.25s; }
.benefits-grid .benefit-card:nth-child(1){ animation-delay:.03s; }
.benefits-grid .benefit-card:nth-child(2){ animation-delay:.09s; }
.benefits-grid .benefit-card:nth-child(3){ animation-delay:.15s; }
.benefits-grid .benefit-card:nth-child(4){ animation-delay:.21s; }
.benefits-grid .benefit-card:nth-child(5){ animation-delay:.27s; }
.benefits-grid .benefit-card:nth-child(6){ animation-delay:.33s; }
.solution-products .product-card:nth-child(1){ animation-delay:.05s; }
.solution-products .product-card:nth-child(2){ animation-delay:.18s; }
@keyframes staggerIn{
  from{ opacity:0; transform: perspective(900px) rotateX(22deg) translateY(22px); }
  to{ opacity:1; transform: perspective(900px) rotateX(0deg) translateY(0); }
}

/* ============ responsive ============ */
@media (max-width: 980px){
  .hero-grid, .solution-grid, .chat-grid, .why-grid, .parents-grid{
    grid-template-columns:1fr; text-align:left;
  }
  .hero-chat{ order:-1; }
  .problem-grid, .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid--duo{ margin-inline:0; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .problem-grid, .benefits-grid{ grid-template-columns:1fr; }
  .team-grid--duo{ grid-template-columns:1fr; max-width:320px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .footer-inner{ grid-template-columns:1fr; }
}