/* COFIDA Coffee Soda — global styles */
*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#0b0907;color:#f5ede1;font-family:'Manrope',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  ::selection{background:rgba(216,166,78,.35);color:#fff}
  input,textarea,select,button{font-family:inherit}
  @keyframes bubbleUp{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.85}90%{opacity:.5}100%{transform:translateY(-112vh) translateX(var(--drift,0));opacity:0}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
  @keyframes floatySlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(3deg)}}
  @keyframes glowPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
  @keyframes scrollDot{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(18px);opacity:0}}
  @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes spinShine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
  @keyframes eqBar{0%,100%{height:5px}50%{height:17px}}
  @keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,-3%)}}
  @keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  @keyframes introMaskRise{0%{transform:translateY(0)}100%{transform:translateY(-101%)}}
  @keyframes introLogoIn{0%{opacity:0;transform:scale(.82) translateY(8px);filter:blur(6px)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
  @keyframes introLogoOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
  .shine-cta::after{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
  .shine-cta:hover::after{animation:spinShine 1.1s cubic-bezier(.16,1,.3,1)}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* Hover & focus states (converted from inline framework attrs) */
.hv0:hover{color:#f6dd9a!important}
.hv1:hover{transform:translateY(-2px)!important;box-shadow:0 12px 30px rgba(200,146,60,.42)!important}
.hv2:hover{transform:translateY(-3px)!important;border-color:rgba(216,166,78,.7)!important}
.hv3:hover{transform:translateY(-3px)!important;box-shadow:0 18px 44px rgba(200,146,60,.46)!important}
.hv4:hover{background:rgba(216,166,78,.1)!important;transform:translateY(-3px)!important}
.hv5:hover{transform:translateY(-10px)!important;border-color:rgba(216,166,78,.4)!important;box-shadow:0 32px 60px rgba(0,0,0,.5),0 0 46px rgba(216,166,78,.08)!important}
.hv6:hover{transform:rotateY(-16deg) rotateX(4deg) scale(1.04)!important}
.hv7:hover{transform:translateY(-3px)!important;box-shadow:0 20px 48px rgba(200,146,60,.46)!important}
.hv8:hover{border-color:rgba(216,166,78,.6)!important;background:rgba(216,166,78,.08)!important}
.hv9:hover{color:#e9c178!important}
.fc0:focus{border-color:rgba(216,166,78,.6)!important}

/* ============================================================
   NAVIGATION — desktop links + mobile hamburger menu
   ============================================================ */
.nav-link{text-decoration:none;color:rgba(245,237,225,.72);font-size:13.5px;font-weight:500;letter-spacing:.4px;transition:color .3s}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:11px;border-radius:12px;border:1px solid rgba(216,166,78,.3);background:rgba(216,166,78,.06);cursor:pointer}
.burger-line{display:block;width:100%;height:2px;background:#e9c178;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-burger.open .burger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open .burger-line:nth-child(2){opacity:0}
.nav-burger.open .burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;padding:6px 20px 20px;border-top:1px solid rgba(216,166,78,.12);background:rgba(11,9,7,.97);max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.mobile-menu.open{max-height:400px}
.mobile-menu-link{display:block;padding:15px 4px;text-decoration:none;color:rgba(245,237,225,.85);font-size:16px;font-weight:600;letter-spacing:.3px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu-link:active{color:#f6dd9a}
.mobile-menu-cta{position:relative;overflow:hidden;display:block;text-align:center;margin-top:16px;padding:15px 22px;border-radius:100px;background:linear-gradient(100deg,#f6dd9a,#caa14a);color:#1a1206;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.3px;box-shadow:0 8px 24px rgba(200,146,60,.28)}

@media (max-width:860px){
  .nav-desktop{display:none!important}
  .nav-burger{display:flex}
  .mobile-menu{display:flex}
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width:768px){
  /* Hero: stack text above bottle, shrink bottle so it fits */
  #top{padding-top:100px!important;padding-bottom:70px!important}
  #top h1{font-size:clamp(38px,11vw,52px)!important}
  #top img[alt="COFIDA Coffee Soda bottle"]{height:min(56vh,440px)!important}
  /* Product bottle */
  #product img[alt="COFIDA bottle detail"]{height:min(48vh,400px)!important}
  /* Kill parallax shifting on small screens (prevents overlap) */
  [data-parallax]{transform:none!important}
  /* Enquiry cards & form breathing room */
  #partner [data-card]{padding:24px!important}
  /* Sound button clear of the thumb zone */
  #soundToggle{bottom:16px;right:16px}
  /* Footer logo smaller */
  footer img[alt="COFIDA Coffee Soda"]{height:96px!important}
}
@media (max-width:420px){
  #top img[alt="COFIDA Coffee Soda bottle"]{height:min(48vh,360px)!important}
  #top h1{font-size:clamp(34px,10.5vw,44px)!important}
}