/* GenoThrive Biotech - Scientific Brand Stylesheet (Midnight Navy, Electric Cyan, Aqua-Blue & Ice Alabaster) */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-midnight: #020B16;
  --color-midnight-dark: #01060E;
  --color-midnight-light: #0A1B33;
  --color-navy: #040E1E;
  --color-cyan: #00D2FF;
  --color-cyan-light: #38BDF8;
  --color-blue: #0284C7;
  --color-aqua: #38BDF8;
  --color-ice: #F8FAFC;
  --color-ice-dark: #E2E8F0;
  --color-slate-text: #0F172A;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-ice);
  color: var(--color-slate-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

font-mono, kbd, code, pre {
  font-family: var(--font-mono);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: var(--color-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-cyan);
}

/* Subtle animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes dna-float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes dna-helix-flow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -240; }
}

@keyframes dna-helix-flow-reverse {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 240; }
}

@keyframes molecular-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)); }
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes glow-drift {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(2, 132, 199, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.6)); }
}

.hero-dna-bg {
  animation: dna-float 10s ease-in-out infinite;
}

.dna-strand-bold-1 {
  stroke-dasharray: 16 10;
  animation: dna-helix-flow 16s linear infinite, glow-drift 6s ease-in-out infinite;
}

.dna-strand-bold-2 {
  stroke-dasharray: 16 10;
  animation: dna-helix-flow-reverse 16s linear infinite, glow-drift 6s ease-in-out infinite 3s;
}

.dna-helix-animated {
  stroke-dasharray: 12 8;
  animation: dna-helix-flow 16s linear infinite;
}

.molecular-node-pulse {
  animation: molecular-pulse 3.5s ease-in-out infinite;
}

.float-slow {
  animation: float-subtle 6s ease-in-out infinite;
}

/* Utility Classes */
.btn-primary {
  @apply px-6 py-3 bg-[#0284C7] text-white font-bold rounded-xl hover:bg-[#0369A1] border border-[#38BDF8]/40 transition-all duration-300 shadow-md shadow-cyan-950/20;
}

.btn-secondary {
  @apply px-6 py-3 bg-transparent border-2 border-[#0284C7] text-[#0284C7] font-bold rounded-xl hover:bg-[#0284C7] hover:text-white transition-all duration-300;
}

.section-dark {
  @apply bg-[#01060E] text-white;
}

.card-biotech {
  @apply bg-white border border-[#E2E8F0] rounded-2xl p-6 transition-all duration-300 relative overflow-hidden;
  border-left: 4px solid transparent;
}

.card-biotech:hover {
  @apply shadow-xl -translate-y-1;
  border-left-color: var(--color-cyan);
}

.smooth-transition {
  @apply transition-all duration-300 ease-in-out;
}

/* Print Stylesheet for Official Receipts & Confirmation Slips */
@media print {
  body * { visibility: hidden; }
  #receipt-modal-container, #receipt-modal-container * { visibility: visible; }
  #receipt-modal-container {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; background: #FFFFFF !important;
  }
  header, footer, nav, button, .print\:hidden { display: none !important; }
}

/* Scroll Reveal Animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-reveal="left"] { transform: translateX(-20px); }
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal].revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .animate-fade-in, .animate-pulse { animation: none; }
  .hero-dna-bg { animation: none; }
}

/* Skip Navigation Link */
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  padding: 12px 24px; background: var(--color-navy); color: white;
  font-weight: 600; font-size: 14px; border-radius: 4px;
  text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

*:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; border-radius: 4px; }

/* Scroll-to-Top Button */
.scroll-to-top-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 35;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: white; border-radius: 50%;
  cursor: pointer; opacity: 0; transform: translateY(16px);
  transition: all 0.3s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(11, 17, 32, 0.2);
}
.scroll-to-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-to-top-btn:hover { background: var(--color-teal); transform: translateY(-2px); }

.card-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(11, 17, 32, 0.08); }

.filter-pill { transition: all 0.2s ease; border-radius: 9999px; }
.filter-pill.active { background: var(--color-teal); color: white; border-color: var(--color-teal); }

/* Mobile Homepage Hero Layout Optimization strictly for screens <= 430px */
@media (max-width: 430px) {
  .hero-home-section {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
    min-height: auto !important;
  }
  .hero-dna-container-mobile {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    opacity: 0.32 !important;
    justify-content: center !important;
    z-index: 0 !important;
  }
  .hero-mobile-text-backdrop {
    display: block !important;
    position: absolute !important;
    inset: -30px !important;
    background: radial-gradient(ellipse 90% 70% at 25% 30%, rgba(1, 6, 14, 0.95) 0%, rgba(1, 6, 14, 0.80) 55%, rgba(1, 6, 14, 0.20) 100%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .hero-mobile-content-wrap {
    row-gap: 1rem !important;
  }
  .hero-pill-mobile {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .hero-heading-mobile {
    font-size: 26px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
  }
  .hero-heading-mobile .hero-br-desktop {
    display: none !important;
  }
  .hero-heading-mobile .hero-underline-accent {
    width: 3.5rem !important;
    height: 3px !important;
    bottom: -6px !important;
  }
  .hero-desc-mobile {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 340px !important;
    padding-top: 0.25rem !important;
  }
  .hero-cta-group-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    padding-top: 0.25rem !important;
  }
  .hero-btn-primary-mobile {
    padding: 0.625rem 1.125rem !important;
    font-size: 11px !important;
    min-height: 42px !important;
    justify-content: center !important;
  }
  .hero-btn-secondary-mobile {
    padding: 0.625rem 1rem !important;
    font-size: 11px !important;
    min-height: 42px !important;
    justify-content: center !important;
  }
  .hero-btn-tertiary-mobile {
    font-size: 11px !important;
    justify-content: center !important;
    padding-top: 0.25rem !important;
  }
  .hero-ribbon-mobile {
    margin-top: 2rem !important;
    padding: 0.875rem !important;
  }

  /* Mobile Navigation Drawer UI Optimization (360px - 430px) */
  #mobile-menu-drawer {
    background-color: #F8FAFC !important;
    padding: 1rem 0.875rem !important;
  }
  #mobile-menu-drawer .mobile-section-heading {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #0284C7 !important;
    padding: 0.5rem 0.75rem 0.35rem 0.75rem !important;
    text-transform: uppercase !important;
  }
  #mobile-menu-drawer .mobile-menu-item {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    padding: 0.625rem 0.75rem !important;
    border-radius: 0.5rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    display: block !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }
  #mobile-menu-drawer .mobile-menu-item:hover,
  #mobile-menu-drawer .mobile-menu-item:active {
    color: #0284C7 !important;
    background-color: #FFFFFF !important;
  }
  #mobile-menu-drawer .mobile-nav-section {
    padding-top: 0.625rem !important;
  }

  /* Mobile Navbar Logo Size Optimization (360px - 430px) */
  .navbar-logo-container {
    width: 3.625rem !important;
    height: 3.625rem !important;
  }
}