/* ==========================================================================
   Sugar Power — Eminence Research and Laboratories
   Custom stylesheet (works alongside Tailwind CDN utilities)
   ========================================================================== */

:root{
  --primary:#0F766E;
  --primary-dark:#0B5A54;
  --secondary:#14B8A6;
  --accent:#22C55E;
  --accent-dark:#16A34A;
  --ink:#1F2937;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:'Plus Jakarta Sans', sans-serif;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#f1f5f9;}
::-webkit-scrollbar-thumb{background:var(--primary); border-radius:4px;}

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---------- scroll progress bar ---------- */
#scrollbar{
  position:fixed; top:0; left:0; height:3px; background:var(--accent);
  z-index:100; width:0%; transition:width .1s ease-out;
}

/* ---------- glass header ---------- */
.glass{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---------- pulse dot ---------- */
.pulse-dot{animation:pulse-ring 2s cubic-bezier(0.4,0,0.6,1) infinite;}
@keyframes pulse-ring{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}
  50%{box-shadow:0 0 0 10px rgba(34,197,94,0);}
}

/* ---------- floating hero image ---------- */
.float-slow{animation:float 5s ease-in-out infinite;}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* ---------- ECG signature line ---------- */
#ecg-path{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw 3.5s ease-in-out infinite;
}
@keyframes draw{
  0%{stroke-dashoffset:1000;}
  60%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-1000;}
}

/* ---------- scroll reveal ---------- */
.fade-up{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.fade-up.show{opacity:1; transform:translateY(0);}

/* ---------- animated CTA buttons ---------- */
.btn-cta{position:relative; overflow:hidden;}
.btn-cta::after{
  content:"";
  position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{
  0%{left:-75%;}
  40%{left:130%;}
  100%{left:130%;}
}

/* ---------- countdown boxes ---------- */
.countdown-box{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;
  min-width:56px;
}

/* ---------- comparison table ---------- */
.compare-table th, .compare-table td{
  padding:.85rem 1rem;
  text-align:center;
  font-size:.875rem;
}
.compare-table th{font-family:'Plus Jakarta Sans', sans-serif;}
.compare-table tr:not(:last-child) td, .compare-table tr:not(:last-child) th{
  border-bottom:1px solid #e5e7eb;
}

/* ---------- FAQ accordion ---------- */
details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}
details[open] .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .2s ease;}

/* ---------- exit intent popup ---------- */
#exitPopup{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,23,23,.55);
  display:none; align-items:center; justify-content:center; padding:1rem;
}
#exitPopup.show{display:flex;}
.popup-card{animation:pop-in .3s ease;}
@keyframes pop-in{
  0%{opacity:0; transform:scale(.92);}
  100%{opacity:1; transform:scale(1);}
}

/* ---------- back to top ---------- */
#backToTop{
  position:fixed; bottom:96px; right:20px; z-index:40;
  width:44px; height:44px; border-radius:9999px;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
}
#backToTop.show{opacity:1; pointer-events:auto; transform:translateY(0);}

@media (min-width:1024px){
  #backToTop{bottom:28px;}
}

/* ---------- form ---------- */
.field-label{font-size:.8rem; font-weight:600; color:#374151; margin-bottom:.3rem; display:block;}
.field-input{
  width:100%; border:1px solid #e5e7eb; border-radius:10px;
  padding:.65rem .9rem; font-size:.9rem; transition:border-color .15s ease, box-shadow .15s ease;
  background:#fff;
}
.field-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,118,110,.12);
  outline:none;
}
.pay-option{cursor:pointer;}
.pay-option input:checked + div{
  border-color:var(--primary);
  background:#f0fdfa;
}

/* ---------- misc ---------- */
.section-eyebrow{
  color:var(--primary); font-weight:600; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.badge-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:600; padding:6px 14px; border-radius:9999px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* print */
@media print{
  header, footer, .sticky-buy-bar, #backToTop, .floating-btn{display:none !important;}
}