/* ============================================================
   LAYOUT — bite-buddy template
   Reference structure: fixed white header · hero (copy left /
   food-frame image right) · about · features (2×2 cards with
   iPhone cutouts) · dw (download + phone frame) · create (4-step
   grid with curved arrows around center image) · review (3-slide
   slider) · faq (2-col dropdown accordion) · cta banner · footer.
   ============================================================ */

/* ---------- header (fixed, white, z99) ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:99;
  background:#fff;
  box-shadow:0 1px 0 var(--line);
}
.header__wrapper{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}
.header__logo img{height:40px;width:auto}
.header__navbar{display:flex;gap:36px}
.header__link{font-size:16px;font-weight:500;color:var(--navy);transition:color .3s}
.header__link:hover{color:var(--orange)}
.header__btn{display:flex;gap:12px;align-items:center}
.header__toggle-btn{display:none}
.header__toggle-ic{display:flex;flex-direction:column;gap:5px}
.header__toggle-ic span{width:24px;height:2px;background:var(--navy);border-radius:2px}

/* ---------- hero ---------- */
.hero{background:var(--white);padding-top:150px}
.hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.hero__left .content-box{max-width:560px}
.content-box__head{margin-bottom:18px}
.content-box__desc{margin-bottom:30px;max-width:480px}
.content-box__btn{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero__img-box{position:relative;display:flex;justify-content:center}
.hero__img{width:80%;margin:0 auto}
.hero-frame{width:80%;margin:0 auto;position:relative;z-index:1;border-radius:20px}
/* ---------- photo slideshows ---------- */
.hero__slideshow,.about__slideshow,.dw__slideshow{overflow:hidden}
.hero__slideshow{aspect-ratio:1/1}
.about__slideshow{aspect-ratio:1/1.05}
.dw__slideshow{aspect-ratio:4/3;width:88%;border-radius:24px}
.hero-slide,.about-slide,.dw-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;
}
.hero-slide.is-active,.about-slide.is-active,.dw-slide.is-active{opacity:1}
.hero__slideshow{position:relative}
.about__slideshow{position:relative}
.dw__slideshow{position:relative}
/* floating food cutouts around hero frame */
.hero__float{
  position:absolute;will-change:transform;z-index:2;
  filter:drop-shadow(0 16px 26px rgba(10,17,46,.16));
}
.hero__float--1{width:120px;top:-6%;left:2%}
.hero__float--2{width:110px;bottom:2%;left:-2%}
.hero__float--3{width:130px;top:4%;right:-2%}

/* ---------- about ---------- */
.about{background:var(--cream)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about__img-box{display:flex;justify-content:center}
.about-group{width:70%;margin:20px auto 0;border-radius:20px}

/* ---------- features ---------- */
.features{background:#fff}
.features__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;
}
.feature__card{
  background:var(--cream);
  border-radius:20px;padding:36px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  will-change:transform,opacity;
}
.feature__card-img-box{width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.feature__img{max-height:96px;width:auto}
.feature__heading{font-size:22px;font-weight:600;margin-bottom:8px}
.feature__card-content p{font-size:16px;color:rgba(10,17,46,.68)}

/* ---------- dw (download) ---------- */
.dw{background:var(--orange);color:#fff}
.dw__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dw .content-box__desc{color:rgba(255,255,255,.72)}
.dw__img-box{display:flex;justify-content:center}
.dw__img{width:88%;border-radius:24px}
.dw__float{
  position:absolute;will-change:transform;z-index:2;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.3));
}
.dw{position:relative}
.dw__img-box{position:relative}
.dw__float--1{width:110px;top:-4%;right:4%}
.dw__float--2{width:120px;bottom:0;left:0}

/* ---------- create (steps) ---------- */
.create{background:#fff}
.create__steps{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px;
  position:relative;
}
.create__center{
  display:flex;justify-content:center;align-items:center;
  grid-column:1 / -1;margin:10px 0;
}
.create__img{width:40%;margin-bottom:20px;border-radius:20px}
.create__steps-box-item{
  background:var(--cream);border-radius:16px;padding:28px 30px;
  display:flex;align-items:center;gap:18px;
}
.step__num{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
}
.step__text{font-size:20px;font-weight:600}
.step__arrow{
  position:absolute;z-index:2;pointer-events:none;
  will-change:transform,opacity;
}
.step__arrow--lt{left:6%;top:26%;width:130px}
.step__arrow--lb{left:8%;bottom:4%;width:110px}
.step__arrow--rt{right:6%;top:26%;width:86px;transform:scaleX(-1)}
.step__arrow--rb{right:8%;bottom:4%;width:136px;transform:scaleX(-1)}

/* ---------- review slider ---------- */
.review{background:var(--cream);overflow:hidden}
.review__header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
}
.review__viewport{margin-top:44px;overflow:hidden}
.review__track{
  display:flex;gap:24px;
  will-change:transform;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
}
.review__box{
  flex:0 0 calc((100% - 48px) / 3);
  background:#fff;border-radius:16px;padding:28px;
  box-shadow:var(--shadow);
}
.review__item{display:flex;flex-direction:column;gap:16px}
.review__profile{display:flex;align-items:center;gap:14px}
.review__profile-img{
  width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--sand);
}
.review__profile-name{font-size:16px;font-weight:600}
.star-rating-block{display:flex;gap:3px}
.review__star-ic{width:16px;height:16px}
.review__text{font-size:15px;color:rgba(10,17,46,.7)}
.review__nav{display:flex;gap:10px;margin-top:28px;justify-content:center}
.review__dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(10,17,46,.18);transition:background .3s, width .3s;
}
.review__dot.is-active{background:var(--orange);width:26px;border-radius:6px}

/* ---------- faq ---------- */
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;align-items:start}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.faq__item.is-open{border-color:rgba(244,115,66,.4)}
.faq__header{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 24px;text-align:left;
}
.faq__heading{font-size:17px;font-weight:600}
.faq__arrow-box{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), background .3s;
}
.faq__arrow-box img{width:16px;height:16px}
.faq__item.is-open .faq__arrow-box{transform:rotate(45deg);background:var(--orange)}
.faq__item.is-open .faq__arrow-box img{filter:brightness(0) invert(1)}
.faq__content{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.25,.46,.45,.94);
}
.faq__content p{padding:0 24px 22px;color:rgba(10,17,46,.68);font-size:15px}

/* ---------- cta ---------- */
.cta{background:#fff;padding-bottom:110px}
.cta__banner{
  position:relative;background:var(--orange);
  border-radius:24px;overflow:hidden;color:#fff;
  display:grid;grid-template-columns:1.2fr 1fr;align-items:center;
  padding:56px 60px;gap:30px;
}
.cta__banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 340px at 85% 20%, rgba(255,255,255,.16), transparent 60%);
}
.cta__content-box{position:relative;z-index:1}
.cta .h2{color:#fff}
.cta .content-box__desc{color:rgba(255,255,255,.85)}
.cta__img-box{position:relative;display:flex;justify-content:center}
.cta-frame{width:70%;position:relative;z-index:1;border-radius:20px}
.cta__float{
  position:absolute;will-change:transform;z-index:2;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.22));
}
.cta__float--1{width:110px;top:-10%;left:6%}
.cta__float--2{width:96px;bottom:-6%;right:10%}

/* ---------- footer ---------- */
.footer{background:#fff;color:var(--navy);padding:70px 0 40px;border-top:1px solid var(--line)}
.footer__wrapper{
  display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;
}
.footer__left{max-width:380px}
.footer__logo{height:40px;width:auto;margin-bottom:22px}
.footer__menu-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.footer__link{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(10,17,46,.78);font-size:15px;
  transition:color .3s, transform .3s;
}
.footer__link:hover{color:var(--orange);transform:translate(5px)}
.footer__link-ic{width:16px;height:16px}
.footer__social-list{display:flex;gap:14px;margin-top:18px}
.footer__social-link{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(10,17,46,.18);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s, border-color .3s;
}
.footer__social-link:hover{background:var(--orange);border-color:var(--orange)}
.footer__social-ic{width:15px;height:15px;fill:var(--navy);transition:fill .3s}
.footer__social-link:hover .footer__social-ic{fill:#fff}
.footer__nav{display:flex;gap:24px;margin-top:26px}
.footer__nav .footer__link{font-size:13px;color:rgba(10,17,46,.5)}
.footer__bottom{
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(10,17,46,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:rgba(10,17,46,.45);font-size:13px;
}

/* ---------- reveal states (JS adds .in; visible when JS off) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(60px)}
.js [data-reveal].in{opacity:1;transform:translateY(0);transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal-scrub]{opacity:0;transform:scale(.8)}
.js [data-reveal-scrub].in{opacity:1;transform:scale(1)}

/* ---------- responsive (Webflow breakpoints 991/767/479) ---------- */
@media screen and (max-width:991px){
  section{padding:64px 0}
  .hero{padding-top:120px}
  .hero__grid,.about__grid,.dw__grid{grid-template-columns:1fr;gap:36px}
  .features__grid{grid-template-columns:1fr}
  .hero__img,.hero-frame{width:90%}
  .create__steps{grid-template-columns:1fr}
  .create__center{order:-1}
  .create__img{width:56%}
  .step__arrow{display:none}
  .faq__grid{grid-template-columns:1fr}
  .review__box{flex-basis:calc((100% - 24px)/2)}
  .header__navbar{display:none}
  .header__toggle-btn{display:block}
  .cta__banner{grid-template-columns:1fr;padding:40px 34px}
  .cta__img-box{order:-1}
  .cta-frame{width:52%}
}
@media screen and (max-width:767px){
  .review__box{flex-basis:100%}
  .header__btn .btn{display:none}
  .hero__float--2,.dw__float--2{display:none}
  .dw__img{width:92%}
}
@media screen and (max-width:479px){
  .feature__card{grid-template-columns:1fr;text-align:left;padding:26px}
  .feature__card-img-box{width:72px;height:72px}
  .feature__img{max-height:72px}
  .h1{font-size:34px}
  .content-box__btn{flex-direction:column;align-items:flex-start}
  .cta__banner{padding:30px 22px}
  .cta-frame{width:64%}
}

/* Location map cards (FAQ) */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:6px}
.loc-card{background:#fff;border:1px solid #eee6da;border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(24,20,14,.06)}
.loc-card__map{display:block;width:100%;height:auto}
.loc-card__body{display:grid;gap:6px;padding:18px 20px 20px}
.loc-card__name{font-size:20px;font-weight:700;color:var(--navy)}
.loc-card__line{font-size:15px;color:#57534b}
.loc-card__tel{font-size:16px;font-weight:600;color:var(--orange);text-decoration:none}
.loc-card__tel:hover{text-decoration:underline}
@media (max-width:760px){.loc-grid{grid-template-columns:1fr}.loc-card__name{font-size:18px}}