/* ==========================================================================
   GenovCell Biomedicals — Custom Stylesheet
   (Tailwind utility classes are loaded via CDN in index.html;
   this file holds brand tokens, components and animations that
   Tailwind's default utilities don't cover.)
   ========================================================================== */

:root{
  --blue:#0056D2; --blue-deep:#003B96; --cyan:#00C2FF; --teal:#0F6E5C; --ink:#0A1B33;
  --bg-soft:#F5FAFF;
}

*{ scroll-behavior:smooth; }

body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{ font-family:'Poppins',sans-serif; }

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

/* ---------- Brand utilities ---------- */
.grad-text{
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.grad-bg{ background:linear-gradient(120deg,var(--blue) 0%, #0077E6 45%, var(--cyan) 100%); }

.glass{
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 8px 32px rgba(0,60,150,0.08);
}
.glass-dark{
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.25);
}

.card-hover{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.card-hover:hover{ transform:translateY(-8px); box-shadow:0 25px 50px rgba(0,86,210,0.15); }

/* ---------- Helix signature element ---------- */
.helix-strand{ position:absolute; pointer-events:none; opacity:.35; }
.helix-thread{ stroke-dasharray: 6 10; animation: dash 6s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-160; } }

.float-y{ animation: floaty 5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.float-slow{ animation: floaty 8s ease-in-out infinite; }

.pulse-dot{ animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(1.4)} }

/* ---------- Brand marquee ---------- */
.marquee{ display:flex; width:max-content; animation: marquee 28s linear infinite; }
.marquee:hover{ animation-play-state: paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.badge-new{ background:linear-gradient(90deg,var(--teal),#17A589); }

input:focus, textarea:focus, button:focus-visible, a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

.section-divider{ height:80px; position:relative; overflow:hidden; }

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }

.accordion-content{ max-height:0; overflow:hidden; transition:max-height .4s ease; }

.skeleton{
  background:linear-gradient(90deg, #eef4fb 25%, #f7fbff 37%, #eef4fb 63%);
  background-size:400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.dots-pattern{
  background-image: radial-gradient(rgba(0,86,210,0.15) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.scale-hover{ transition: transform .4s ease; }
.scale-hover:hover{ transform: scale(1.05); }

::selection{ background:var(--cyan); color:#fff; }

.timeline-line{ background: linear-gradient(180deg, var(--blue), var(--cyan)); }
@media (min-width: 768px){
  .timeline-line-h{ background: linear-gradient(90deg, var(--blue), var(--cyan)); }
}

/* ---------- Safe-area aware floating action buttons ---------- */
.fab-bl{ bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: calc(1.5rem + env(safe-area-inset-left)); }
.fab-bl-2{ bottom: calc(6rem + env(safe-area-inset-bottom)); left: calc(1.5rem + env(safe-area-inset-left)); }
.fab-br{ bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: calc(1.5rem + env(safe-area-inset-right)); }
.fab-br-2{ bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: calc(6rem + env(safe-area-inset-right)); }

/* Prevent iOS input zoom on focus */
@media (max-width: 767px){
  input, textarea, select{ font-size:16px; }
}

img{ max-width:100%; height:auto; }
table{ display:block; overflow-x:auto; max-width:100%; }

/* ---------- Top announcement bar ---------- */
#announceBar{
  background: var(--ink);
  color:#fff;
  height:2.5rem;
}
#announceBar a{ color:var(--cyan); text-decoration:underline; }

/* ---------- Cart badge ---------- */
.cart-badge{
  min-width:18px; height:18px; padding:0 4px;
  font-size:10px; font-weight:700; line-height:18px;
  background:var(--teal); color:#fff; border-radius:9999px;
  position:absolute; top:-6px; right:-6px; text-align:center;
  transform:scale(0); transition:transform .25s ease;
}
.cart-badge.show{ transform:scale(1); }

/* ---------- Toast notification ---------- */
#toast{
  position:fixed; left:50%; bottom:1.5rem; bottom:calc(1.5rem + env(safe-area-inset-bottom));
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--ink); color:#fff; font-family:'Poppins',sans-serif; font-weight:600;
  font-size:13px; padding:12px 22px; border-radius:9999px; box-shadow:0 15px 35px rgba(0,0,0,0.25);
  z-index:80; transition:opacity .3s ease, transform .3s ease;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }