/* ============================================================
   iMenufy — Page Animations & Dynamic Background/Foreground
   ============================================================ */

/* ── Global body floating orbs background ── */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: globalOrbDrift1 18s ease-in-out infinite;
}
body::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(66,148,227,0.07) 0%, transparent 70%);
  top: -100px; right: -80px;
}
body::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(143,18,253,0.06) 0%, transparent 70%);
  bottom: 20%; left: -100px;
  animation: globalOrbDrift2 24s ease-in-out infinite;
}
@keyframes globalOrbDrift1 {
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-30px,40px) scale(1.1);}
  66%{transform:translate(20px,-20px) scale(0.95);}
}
@keyframes globalOrbDrift2 {
  0%,100%{transform:translate(0,0) scale(1);}
  40%{transform:translate(40px,-30px) scale(1.08);}
  70%{transform:translate(-20px,30px) scale(0.92);}
}

/* ── Section fade-up on scroll ── */
.section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card hover lift shimmer ── */
.feat-card, .why-card, .testi-card, .price-card, .step-card, .faq-item {
  position: relative;
  overflow: hidden;
}
.feat-card::after, .why-card::after, .testi-card::after, .step-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  transition: none;
  pointer-events: none;
}
.feat-card:hover::after, .why-card:hover::after, .testi-card:hover::after, .step-card:hover::after {
  top: -50%; left: 140%;
  transition: left 0.55s ease, top 0.55s ease;
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGE — Hero: Floating food emoji orbs + pulse ring
   ══════════════════════════════════════════════════════════════ */
.home-hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.home-orb {
  position: absolute;
  border-radius: 50%;
  animation: homeOrbFloat var(--dur,12s) ease-in-out infinite var(--del,0s);
}
.home-orb-1 { width:300px;height:300px; background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%); top:-60px;left:-60px; --dur:14s; }
.home-orb-2 { width:220px;height:220px; background:radial-gradient(circle,rgba(143,18,253,.18),transparent 70%); bottom:10%;right:-40px; --dur:11s;--del:2s; }
.home-orb-3 { width:160px;height:160px; background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%); top:40%;left:5%; --dur:16s;--del:4s; }
@keyframes homeOrbFloat {
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-22px) scale(1.06);}
}
.home-food-emoji {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0;
  animation: foodEmojiFly var(--dur,9s) ease-in-out infinite var(--del,0s);
  pointer-events: none;
}
@keyframes foodEmojiFly {
  0%{opacity:0;transform:translateY(20px) rotate(-10deg) scale(.7);}
  15%{opacity:.55;}
  70%{opacity:.45;}
  100%{opacity:0;transform:translateY(-60px) rotate(14deg) scale(1.1);}
}
.home-food-1{top:20%;left:8%;--dur:8s;--del:0s;}
.home-food-2{top:55%;right:7%;--dur:10s;--del:1.5s;}
.home-food-3{top:30%;right:18%;--dur:9s;--del:3s;}
.home-food-4{bottom:20%;left:15%;--dur:11s;--del:2s;}
.home-food-5{top:65%;left:35%;--dur:7s;--del:4.5s;}
/* Pulse ring around hero badge */
.hero-badge-ring {
  position:absolute;inset:-8px;border-radius:50px;
  border:2px solid rgba(66,148,227,.4);
  animation: badgeRingPulse 2.5s ease-out infinite;
  pointer-events:none;
}
@keyframes badgeRingPulse {
  0%{transform:scale(1);opacity:.8;}
  100%{transform:scale(1.25);opacity:0;}
}
/* Hero title text shimmer */
h1.hero-title .grad {
  background-size: 200% auto;
  background: linear-gradient(135deg,#4294E3,#8F12FD,#4294E3,#43d9ad);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 4s linear infinite;
}
@keyframes titleShimmer {
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}

/* ══════════════════════════════════════════════════════════════
   FEATURES PAGE — Hero: Orbiting feature icons
   ══════════════════════════════════════════════════════════════ */
.features-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.feat-orbit-ring {
  position:absolute;
  border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.22);
  animation: orbitSpin var(--dur,20s) linear infinite;
  top:50%;left:50%;
  transform-origin:center center;
}
.feat-orbit-ring-1 { width:260px;height:260px;margin:-130px 0 0 -130px; --dur:20s; }
.feat-orbit-ring-2 { width:380px;height:380px;margin:-190px 0 0 -190px; --dur:30s;animation-direction:reverse; }
@keyframes orbitSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.feat-orbit-icon {
  position:absolute;
  width:40px;height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:white;
  animation: orbitIconCounter var(--dur,20s) linear infinite;
  top: -20px; left: calc(50% - 20px);
  transform-origin: 20px calc(130px + 20px);
}
.feat-orbit-icon-2 {
  transform-origin: 20px calc(190px + 20px);
  animation-duration: 30s;
  animation-direction: reverse;
}
@keyframes orbitIconCounter {
  from{transform:rotate(0deg) translateY(0);}
  to{transform:rotate(-360deg) translateY(0);}
}
/* Sparkles that fly across */
.feat-sparkle {
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.7);
  animation: sparkleTrail var(--dur,4s) ease-in-out infinite var(--del,0s);
}
@keyframes sparkleTrail {
  0%{opacity:0;transform:translate(0,0) scale(0);}
  20%{opacity:1;transform:translate(var(--tx1),var(--ty1)) scale(1);}
  80%{opacity:.6;transform:translate(var(--tx2),var(--ty2)) scale(.7);}
  100%{opacity:0;transform:translate(var(--tx3),var(--ty3)) scale(0);}
}
.feat-sparkle-1{top:25%;left:20%;--dur:3.5s;--del:0s;--tx1:15px;--ty1:-20px;--tx2:30px;--ty2:-10px;--tx3:50px;--ty3:-30px;}
.feat-sparkle-2{top:60%;right:22%;--dur:4s;--del:1s;--tx1:-10px;--ty1:-25px;--tx2:-25px;--ty2:-15px;--tx3:-40px;--ty3:-35px;}
.feat-sparkle-3{bottom:25%;left:40%;--dur:3s;--del:2s;--tx1:20px;--ty1:10px;--tx2:35px;--ty2:25px;--tx3:55px;--ty3:15px;}
.feat-sparkle-4{top:35%;right:35%;--dur:5s;--del:.5s;--tx1:-20px;--ty1:15px;--tx2:-40px;--ty2:5px;--tx3:-55px;--ty3:20px;}
/* Features hero title */
.features-hero-bg ~ h1,
.page-hero[data-page="features"] h1 {
  animation: featTitleDrop .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes featTitleDrop {
  from{opacity:0;transform:translateY(-30px);}
  to{opacity:1;transform:translateY(0);}
}

/* ══════════════════════════════════════════════════════════════
   PRICING PAGE — Hero: Coin rain + price tag float
   ══════════════════════════════════════════════════════════════ */
.pricing-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.coin {
  position:absolute;
  width:28px;height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,215,0,.7),rgba(255,165,0,.4));
  border:1.5px solid rgba(255,215,0,.5);
  box-shadow:0 0 10px rgba(255,215,0,.3);
  animation: coinFall var(--dur,6s) linear infinite var(--del,0s);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:rgba(255,255,255,.8);font-weight:800;
}
@keyframes coinFall {
  0%{transform:translateY(-40px) rotateY(0deg);opacity:0;}
  10%{opacity:.9;}
  90%{opacity:.7;}
  100%{transform:translateY(calc(100vh - 100px)) rotateY(720deg);opacity:0;}
}
.coin-1{left:8%;--dur:7s;--del:0s;}
.coin-2{left:22%;--dur:5.5s;--del:1.2s;}
.coin-3{left:40%;--dur:8s;--del:2s;}
.coin-4{left:58%;--dur:6s;--del:.5s;}
.coin-5{left:72%;--dur:7.5s;--del:3s;}
.coin-6{left:88%;--dur:5s;--del:1.8s;}
.price-tag-float {
  position:absolute;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:16px;
  padding:8px 16px;
  font-size:.82rem;font-weight:800;color:white;
  animation: priceTagBob var(--dur,5s) ease-in-out infinite var(--del,0s);
}
@keyframes priceTagBob {
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
  50%{transform:translateY(-12px) rotate(var(--rot2,3deg));}
}
.ptag-1{top:18%;left:6%;--dur:5s;--rot:-4deg;--rot2:2deg;}
.ptag-2{top:22%;right:8%;--dur:6.5s;--del:1s;--rot:5deg;--rot2:-2deg;}
.ptag-3{bottom:22%;left:12%;--dur:7s;--del:2s;--rot:-2deg;--rot2:4deg;}

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE — Hero: Growing timeline nodes + mission pulse
   ══════════════════════════════════════════════════════════════ */
.about-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.about-wave {
  position:absolute;bottom:0;left:0;right:0;height:80px;
}
.about-particle {
  position:absolute;border-radius:50%;
  animation: aboutParticleFly var(--dur,10s) ease-in-out infinite var(--del,0s);
}
@keyframes aboutParticleFly {
  0%{transform:translate(0,0);opacity:0;}
  15%{opacity:.7;}
  85%{opacity:.5;}
  100%{transform:translate(var(--tx,50px),var(--ty,-60px));opacity:0;}
}
.ap-1{width:14px;height:14px;background:rgba(255,255,255,.3);top:40%;left:10%;--dur:9s;--del:0s;--tx:80px;--ty:-70px;}
.ap-2{width:8px;height:8px;background:rgba(255,255,255,.5);top:60%;right:15%;--dur:7s;--del:1.5s;--tx:-60px;--ty:-50px;}
.ap-3{width:18px;height:18px;background:rgba(143,18,253,.3);top:25%;left:30%;--dur:11s;--del:3s;--tx:40px;--ty:-80px;}
.ap-4{width:10px;height:10px;background:rgba(255,255,255,.4);bottom:30%;right:30%;--dur:8s;--del:2s;--tx:-40px;--ty:-60px;}
.ap-5{width:12px;height:12px;background:rgba(66,148,227,.35);top:50%;left:50%;--dur:10s;--del:4s;--tx:60px;--ty:30px;}
/* Animated underline for About h1 */
.about-hero-title-line {
  display:block;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.2));
  margin:10px auto 0;
  animation: titleLineGrow 1.2s cubic-bezier(.22,1,.36,1) .4s both;
  max-width:300px;
}
@keyframes titleLineGrow {
  from{transform:scaleX(0);opacity:0;}
  to{transform:scaleX(1);opacity:1;}
}

/* ══════════════════════════════════════════════════════════════
   FAQS PAGE — Hero: Bouncing question marks
   ══════════════════════════════════════════════════════════════ */
.faqs-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.faq-qmark {
  position:absolute;
  font-family:'Syne',sans-serif;
  font-weight:800;
  color:rgba(255,255,255,.12);
  animation: qmarkBounce var(--dur,4s) cubic-bezier(.36,.07,.19,.97) infinite var(--del,0s);
  line-height:1;
  user-select:none;
}
@keyframes qmarkBounce {
  0%,100%{transform:translateY(0) scale(1);}
  40%{transform:translateY(-18px) scale(1.08);}
  60%{transform:translateY(-10px) scale(1.03);}
}
.fqm-1{font-size:9rem;top:-10px;left:3%;--dur:3.8s;--del:0s;}
.fqm-2{font-size:5rem;top:15%;right:5%;--dur:4.5s;--del:.8s;}
.fqm-3{font-size:7rem;bottom:5%;left:25%;--dur:3.2s;--del:1.5s;}
.fqm-4{font-size:4rem;bottom:10%;right:20%;--dur:5s;--del:2s;}
.fqm-5{font-size:6rem;top:35%;left:45%;--dur:3.6s;--del:3s;}
/* Ripple on FAQ open */
.faq-item.open {
  box-shadow: 0 0 0 3px rgba(66,148,227,.18), var(--shadow-card);
  transition: box-shadow .3s ease;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE — Hero: Message bubbles floating up
   ══════════════════════════════════════════════════════════════ */
.contact-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.msg-bubble {
  position:absolute;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px 18px 18px 4px;
  padding:8px 14px;
  font-size:.75rem;font-weight:700;color:rgba(255,255,255,.85);
  white-space:nowrap;
  animation: bubbleRise var(--dur,8s) ease-in-out infinite var(--del,0s);
}
.msg-bubble.right { border-radius:18px 18px 4px 18px; }
@keyframes bubbleRise {
  0%{transform:translateY(40px) scale(.9);opacity:0;}
  15%{opacity:1;}
  80%{opacity:.8;}
  100%{transform:translateY(-80px) scale(1.05);opacity:0;}
}
.mb-1{bottom:20%;left:6%;--dur:7s;--del:0s;}
.mb-2{bottom:25%;right:8%;--dur:8.5s;--del:1.5s;}
.mb-3{bottom:15%;left:28%;--dur:6s;--del:3s;}
.mb-4{bottom:30%;right:30%;--dur:9s;--del:2s;}
/* Pulsing envelope icon in hero */
.contact-envelope-anim {
  display:inline-block;
  animation: envelopePop 2s cubic-bezier(.36,.07,.19,.97) infinite;
  margin-right:10px;
}
@keyframes envelopePop {
  0%,100%{transform:scale(1) rotate(0deg);}
  15%{transform:scale(1.2) rotate(-8deg);}
  30%{transform:scale(1) rotate(4deg);}
  45%{transform:scale(1.1) rotate(0deg);}
}

/* ══════════════════════════════════════════════════════════════
   TERMS & PRIVACY PAGES — Hero: Animated shield + document lines
   ══════════════════════════════════════════════════════════════ */
.legal-hero-bg {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.legal-line {
  position:absolute;
  height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: legalLineSlide var(--dur,5s) ease-in-out infinite var(--del,0s);
}
@keyframes legalLineSlide {
  0%{transform:translateX(-100%) scaleX(.3);opacity:0;}
  50%{opacity:1;transform:translateX(0) scaleX(1);}
  100%{transform:translateX(100%) scaleX(.3);opacity:0;}
}
.ll-1{top:25%;left:0;width:40%;--dur:5s;--del:0s;}
.ll-2{top:45%;right:0;width:55%;--dur:7s;--del:1s;}
.ll-3{top:65%;left:0;width:35%;--dur:6s;--del:2s;}
.ll-4{top:80%;right:0;width:45%;--dur:8s;--del:.5s;}
.shield-float {
  position:absolute;
  font-size:6rem;
  opacity:.06;
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation: shieldPulse 4s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.06;}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:.1;}
}

/* ══════════════════════════════════════════════════════════════
   404 PAGE — Hero: Glitch text + lost fork/knife
   ══════════════════════════════════════════════════════════════ */
.notfound-title {
  animation: glitchText 5s ease-in-out infinite;
}
@keyframes glitchText {
  0%,90%,100%{text-shadow:none;}
  91%{text-shadow:3px 0 rgba(66,148,227,.6),-3px 0 rgba(143,18,253,.5);}
  93%{text-shadow:-4px 0 rgba(66,148,227,.6),4px 0 rgba(143,18,253,.5);}
  95%{text-shadow:2px 0 rgba(66,148,227,.4),-2px 0 rgba(143,18,253,.3);}
  97%{text-shadow:none;}
}
.notfound-bg-emoji {
  position:fixed;
  font-size:3rem;
  opacity:.06;
  animation: lostDrift var(--dur,15s) ease-in-out infinite var(--del,0s);
  pointer-events:none;
  z-index:0;
}
@keyframes lostDrift {
  0%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(30px,-20px) rotate(10deg);}
  50%{transform:translate(-20px,30px) rotate(-5deg);}
  75%{transform:translate(40px,10px) rotate(15deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
.nf-em-1{top:10%;left:5%;--dur:14s;--del:0s;}
.nf-em-2{top:20%;right:8%;--dur:18s;--del:2s;}
.nf-em-3{top:50%;left:2%;--dur:12s;--del:4s;}
.nf-em-4{bottom:20%;right:5%;--dur:16s;--del:1s;}
.nf-em-5{bottom:10%;left:40%;--dur:20s;--del:3s;}

/* ══════════════════════════════════════════════════════════════
   GLOBAL — Floating background dots grid
   ══════════════════════════════════════════════════════════════ */
.bg-dots {
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.bg-dot {
  position:absolute;border-radius:50%;
  background:var(--blue);
  opacity:0;
  animation: dotTwinkle var(--dur,3s) ease-in-out infinite var(--del,0s);
}
@keyframes dotTwinkle {
  0%,100%{opacity:0;transform:scale(.5);}
  50%{opacity:.12;transform:scale(1);}
}

/* ══════════════════════════════════════════════════════════════
   NAV — Animated brand logo pulse on hover
   ══════════════════════════════════════════════════════════════ */
.nav-brand {
  position:relative;
  transition: transform .2s;
}
.nav-brand:hover {
  transform: scale(1.05);
}
.nav-brand::after {
  content:'';
  position:absolute;
  bottom:-3px;left:0;right:0;height:2px;
  background:var(--grad);
  border-radius:2px;
  transform:scaleX(0);
  transition:transform .3s ease;
}
.nav-brand:hover::after {
  transform:scaleX(1);
}

/* ── Section scroll stagger ── */
.stagger > * {
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
}
.stagger.in-view > *:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.05s;}
.stagger.in-view > *:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.15s;}
.stagger.in-view > *:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.25s;}
.stagger.in-view > *:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.35s;}
.stagger.in-view > *:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.45s;}
.stagger.in-view > *:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.55s;}
.stagger.in-view > *:nth-child(n+7){opacity:1;transform:translateY(0);transition-delay:.6s;}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ══════════════════════════════════════════════════════════════
   GENERAL PAGE SECTIONS — Dynamic foreground/background decor
   ══════════════════════════════════════════════════════════════ */

/* Animated gradient border on section headers */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 60px; height: 3px;
  border-radius: 2px;
  background: var(--grad);
  animation: sectionTitleBar 3s ease-in-out infinite;
}
@keyframes sectionTitleBar {
  0%,100%{width:60px;opacity:.8;}
  50%{width:110px;opacity:1;}
}

/* Subtle animated gradient on section-tag pills */
.section-tag {
  background-size: 200% auto !important;
  animation: tagGradientShift 4s linear infinite;
}
@keyframes tagGradientShift {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Foreground floating accent blobs behind each section */
.section::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66,148,227,0.05) 0%, transparent 70%);
  top: -60px; right: -80px;
  pointer-events: none;
  z-index: 0;
  animation: sectionBlobDrift 14s ease-in-out infinite;
}
@keyframes sectionBlobDrift {
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-20px,20px);}
}

/* Animated stat pills on home */
.stat-pill {
  animation: statPillEntry .5s cubic-bezier(.34,1.56,.64,1) both;
}
.stat-pill:nth-child(1){animation-delay:.1s;}
.stat-pill:nth-child(2){animation-delay:.2s;}
.stat-pill:nth-child(3){animation-delay:.3s;}
.stat-pill:nth-child(4){animation-delay:.4s;}
@keyframes statPillEntry {
  from{opacity:0;transform:translateY(20px) scale(.92);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Pulsing CTA buttons */
.btn-primary-lg, .btn-hero {
  position: relative;
}
.btn-primary-lg::before, .btn-hero::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  animation: ctaGlow 2.5s ease-in-out infinite;
  z-index: -1;
  filter: blur(8px);
}
@keyframes ctaGlow {
  0%,100%{opacity:0;}
  50%{opacity:.35;}
}

/* Testimonial card star twinkle */
.testi-stars {
  display: inline-block;
  animation: starTwinkle 3s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.4) drop-shadow(0 0 4px rgba(245,158,11,.5));}
}

/* Step number bounce */
.step-num {
  animation: stepBounce 3s ease-in-out infinite;
}
.step-card:nth-child(2) .step-num { animation-delay: .5s; }
.step-card:nth-child(3) .step-num { animation-delay: 1s; }
@keyframes stepBounce {
  0%,100%{transform:translateY(0);}
  45%{transform:translateY(-5px);}
  55%{transform:translateY(-3px);}
}

/* Pricing featured card shimmer sweep */
.price-card.featured::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  animation: featuredSweep 4s ease-in-out infinite;
}
@keyframes featuredSweep {
  0%{left:-100%;}
  60%,100%{left:200%;}
}

/* FAQ item answer slide-in */
.faq-a {
  animation: none;
}
.faq-item.open .faq-a {
  animation: faqAnswerReveal .3s ease both;
}
@keyframes faqAnswerReveal {
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

/* Contact form fields animated focus ring */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  animation: focusRingPop .25s ease both;
}
@keyframes focusRingPop {
  0%{box-shadow:0 0 0 0px rgba(66,148,227,.3);}
  100%{box-shadow:0 0 0 3px rgba(66,148,227,.12);}
}

/* Footer brand wave */
.nav-brand {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: brandColorFlow 5s linear infinite;
}
@keyframes brandColorFlow {
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* Scroll-to-top button spin in */
#scrollTop {
  transition: opacity .3s, transform .3s !important;
}
#scrollTop:hover {
  transform: translateY(-3px) rotate(15deg) !important;
}

/* QR band pulsing glow */
.qr-band {
  animation: qrBandGlow 5s ease-in-out infinite;
}
@keyframes qrBandGlow {
  0%,100%{box-shadow:0 20px 60px rgba(66,148,227,.2);}
  50%{box-shadow:0 20px 80px rgba(143,18,253,.3), 0 8px 30px rgba(66,148,227,.3);}
}

/* QR mock icon rotation hint */
.qr-mock i {
  animation: qrIconPop 4s ease-in-out infinite;
}
@keyframes qrIconPop {
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08) rotate(3deg);}
}

/* About visual chips stagger float */
.about-chip {
  animation: chipFloat var(--cdur, 4s) ease-in-out infinite var(--cdel, 0s);
}
.about-chip:nth-child(1){--cdur:4s;--cdel:0s;}
.about-chip:nth-child(2){--cdur:4.5s;--cdel:.4s;}
.about-chip:nth-child(3){--cdur:5s;--cdel:.8s;}
.about-chip:nth-child(4){--cdur:4.2s;--cdel:1.2s;}
.about-chip:nth-child(5){--cdur:4.8s;--cdel:.6s;}
.about-chip:nth-child(6){--cdur:3.8s;--cdel:1.6s;}
@keyframes chipFloat {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

/* Template card carousel lift */
.tmpl-card {
  animation: tmplCardEntry .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* Feat icon wiggle on card hover */
.feat-card:hover .feat-icon,
.feat-card:hover .why-icon {
  animation: iconWiggle .4s ease both;
}
@keyframes iconWiggle {
  0%{transform:rotate(0);}
  25%{transform:rotate(-8deg) scale(1.1);}
  75%{transform:rotate(8deg) scale(1.1);}
  100%{transform:rotate(0) scale(1);}
}

/* Page hero h1 entrance */
.page-hero h1 {
  animation: heroH1Rise .7s cubic-bezier(.34,1.56,.64,1) both;
}
.page-hero p {
  animation: heroH1Rise .7s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.page-hero .btn-hero {
  animation: heroH1Rise .7s cubic-bezier(.34,1.56,.64,1) .3s both;
}
@keyframes heroH1Rise {
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

/* Marquee template cards glow on hover */
.tmpl-card:hover {
  box-shadow: 0 16px 48px rgba(66,148,227,.25), 0 4px 16px rgba(0,0,0,.08) !important;
}

/* ══ Extra food emojis 6-10 positions ══ */
.home-food-6{top:15%;right:10%;--dur:9.5s;--del:1s;}
.home-food-7{top:75%;right:18%;--dur:8.5s;--del:3.5s;}
.home-food-8{top:45%;left:4%;--dur:11s;--del:0.8s;}
.home-food-9{bottom:8%;right:8%;--dur:7.5s;--del:2.5s;}
.home-food-10{top:55%;right:40%;--dur:10s;--del:5s;}

/* ══ MOBILE OVERFLOW FIXES ══ */
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
}
/* Contain all hero backgrounds */
.home-hero-bg,
.features-hero-bg,
.pricing-hero-bg,
.faqs-hero-bg,
.contact-hero-bg,
.about-hero-bg,
.legal-hero-bg,
.bg-dots {
  max-width: 100vw;
  overflow: hidden;
}
/* Fixed position elements that can overflow */
.home-food-emoji,
.faq-qmark,
.msg-bubble,
.legal-line,
.feat-sparkle,
.about-particle {
  max-width: 100vw;
}
/* Global body orbs — clip on mobile */
@media (max-width: 768px) {
  body::before, body::after { display: none; }
  .home-food-emoji { font-size: 1.6rem; }
  .faq-qmark { font-size: clamp(3rem, 12vw, 7rem) !important; }
  .fqm-1 { font-size: clamp(4rem, 18vw, 8rem) !important; left: 0 !important; }
  .fqm-3 { left: 10% !important; }
  .fqm-5 { left: 30% !important; font-size: clamp(3rem, 10vw, 5rem) !important; }
  .price-tag-float { font-size: .7rem; padding: 6px 10px; }
  .ptag-1 { left: 2% !important; }
  .ptag-2 { right: 2% !important; }
  .ptag-3 { left: 5% !important; }
  .msg-bubble { max-width: calc(50vw - 20px); font-size: .68rem; white-space: normal; }
  .mb-1 { left: 2% !important; }
  .mb-2 { right: 2% !important; }
  .mb-3 { left: 15% !important; }
  .mb-4 { right: 15% !important; }
  .coin { width: 20px; height: 20px; }
  .feat-orbit-ring-1 { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
  .feat-orbit-ring-2 { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .feat-orbit-icon { transform-origin: 20px calc(90px + 20px); }
  .feat-orbit-icon-2 { transform-origin: 20px calc(140px + 20px); }
  /* Section blobs smaller on mobile */
  .section::before { width: 160px; height: 160px; right: -40px; }
  /* Hero illo responsive */
  .hero-illo-wrap svg { max-width: 100% !important; }
}

/* ══ ABOUT PAGE — New hero: DNA helix / spinning rings animation ══ */
.about-hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
/* Remove old particles, replace with new */
.about-particle { display: none !important; }

/* DNA helix dots */
.dna-dot {
  position: absolute;
  border-radius: 50%;
  animation: dnaSine var(--dur, 4s) ease-in-out infinite var(--del, 0s);
}
@keyframes dnaSine {
  0%   { transform: translateX(var(--x0)) translateY(var(--y0)) scale(var(--s0, 1)); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translateX(var(--x1)) translateY(var(--y1)) scale(var(--s1, 1.2)); opacity: .9; }
  85%  { opacity: 1; }
  100% { transform: translateX(var(--x2)) translateY(var(--y2)) scale(var(--s2, .7)); opacity: 0; }
}

/* Spinning geometric rings in about hero */
.about-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  top: 50%; left: 50%;
  animation: aboutRingSpin var(--dur, 12s) linear infinite var(--dir, normal);
  transform-origin: center;
}
.about-ring::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255, 0.6);
  top: -5px; left: calc(50% - 5px);
  box-shadow: 0 0 8px rgba(255,255,255,.4);
}
@keyframes aboutRingSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.about-ring-1 { width: 200px; height: 200px; --dur: 14s; }
.about-ring-2 { width: 320px; height: 320px; --dur: 20s; --dir: reverse; border-color: rgba(255,255,255,.12); }
.about-ring-2::after { background: rgba(255,255,255,.4); width: 8px; height: 8px; top: -4px; left: calc(50% - 4px); }
.about-ring-3 { width: 440px; height: 440px; --dur: 28s; border-color: rgba(255,255,255,.07); }
.about-ring-3::after { background: rgba(255,255,255,.25); width: 6px; height: 6px; top: -3px; left: calc(50% - 3px); }

/* Floating ingredients icons in about hero */
.about-ingredient {
  position: absolute;
  font-size: 1.8rem;
  opacity: 0;
  animation: ingredientOrbit var(--dur,8s) ease-in-out infinite var(--del,0s);
}
@keyframes ingredientOrbit {
  0%   { opacity: 0; transform: scale(.6) translateY(10px); }
  20%  { opacity: .65; }
  50%  { transform: scale(1.1) translateY(-14px) rotate(var(--rot,8deg)); opacity: .7; }
  80%  { opacity: .55; }
  100% { opacity: 0; transform: scale(.7) translateY(16px) rotate(var(--rot2,-5deg)); }
}
.ai-1 { top: 18%; left: 8%;  --dur:8s;  --del:0s;   --rot:10deg;  --rot2:-6deg; }
.ai-2 { top: 55%; right: 7%; --dur:10s; --del:1.5s; --rot:-8deg;  --rot2:4deg;  }
.ai-3 { top: 28%; right:18%; --dur:9s;  --del:3s;   --rot:12deg;  --rot2:-8deg; }
.ai-4 { bottom:22%;left: 15%;--dur:11s; --del:2s;   --rot:-5deg;  --rot2:9deg;  }
.ai-5 { top: 65%; left: 32%; --dur:7s;  --del:4s;   --rot:15deg;  --rot2:-10deg;}
.ai-6 { bottom:18%;right:22%;--dur:9.5s;--del:.8s;  --rot:-12deg; --rot2:6deg;  }

@media (max-width: 768px) {
  .about-ring-2 { width: 220px; height: 220px; }
  .about-ring-3 { width: 320px; height: 320px; }
  .about-ingredient { font-size: 1.3rem; }
}

/* ══ TERMS / PRIVACY scrollTop fix ══ */
/* Ensure #scrollTop is always visible above everything on legal pages */
#scrollTop {
  z-index: 9999 !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
}