:root {
  --qyt-blue: #1457d9;
  --qyt-blue-2: #1d74f5;
  --qyt-teal: #14b8a6;
  --qyt-ink: #102033;
  --qyt-muted: #64748b;
  --qyt-line: rgba(148, 163, 184, 0.22);
  --qyt-panel: rgba(255, 255, 255, 0.92);
  --qyt-shadow: 0 22px 65px rgba(15, 23, 42, 0.08);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--qyt-ink) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(20, 87, 217, 0.11), transparent 24rem),
    radial-gradient(circle at 92% 12%, rgba(20, 184, 166, 0.10), transparent 22rem),
    linear-gradient(180deg, #f8fbff 0%, #eef5fb 48%, #f8fafc 100%) !important;
  letter-spacing: 0;
}

.bg-primary,
.bg-\[\#165DFF\] {
  background-color: var(--qyt-blue) !important;
}

.text-primary,
.text-\[\#165DFF\] {
  color: var(--qyt-blue) !important;
}

.border-primary,
.border-\[\#165DFF\] {
  border-color: var(--qyt-blue) !important;
}

.bg-accent {
  background-color: var(--qyt-teal) !important;
}

.text-accent,
.text-\[\#8B5CF6\] {
  color: var(--qyt-teal) !important;
}

.hover\:text-accent:hover,
.hover\:text-\[\#165DFF\]:hover {
  color: var(--qyt-teal) !important;
}

.hover\:bg-accent:hover,
.hover\:bg-\[\#8B5CF6\]:hover {
  background-color: var(--qyt-teal) !important;
}

.sticky-nav,
.nav-glass,
header.sticky,
nav.sticky-nav {
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

nav a,
header a {
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

nav a:hover,
header a:hover {
  transform: translateY(-1px);
}

section.bg-primary,
section.bg-\[\#165DFF\] {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #0f3f9f 0%, var(--qyt-blue) 48%, #0f9ca7 100%) !important;
}

section.bg-primary::before,
section.bg-\[\#165DFF\]::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: repeating-linear-gradient(116deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 34px);
  opacity: 0.45;
  animation: qytDrift 24s linear infinite;
  pointer-events: none;
}

section.bg-primary > *,
section.bg-\[\#165DFF\] > * {
  position: relative;
}

.peptide-bg {
  background:
    radial-gradient(circle at 18% 24%, rgba(20, 87, 217, 0.15), transparent 28rem),
    radial-gradient(circle at 82% 62%, rgba(20, 184, 166, 0.12), transparent 26rem),
    linear-gradient(180deg, #f9fbff 0%, #edf6ff 100%) !important;
}

.bg-white,
.bg-\[\#F8FAFC\] {
  border-color: rgba(226, 232, 240, 0.75);
}

.rounded-2xl,
.rounded-3xl {
  border-radius: 18px !important;
}

.card-hover,
.tracking-card,
.product-img,
.product-detail-img,
.bg-white.rounded-2xl,
.bg-\[\#F8FAFC\].rounded-2xl {
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease, background-color 0.26s ease !important;
}

.card-hover,
.bg-white.rounded-2xl,
.tracking-card {
  box-shadow: var(--qyt-shadow) !important;
  border: 1px solid rgba(226, 232, 240, 0.78) !important;
}

.card-hover:hover,
.tracking-card:hover,
.product-img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(20, 184, 166, 0.26) !important;
}

button,
.btn-hover-scale,
.btn-scale,
a.bg-primary,
a.bg-\[\#165DFF\],
button.bg-primary {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

button:hover,
.btn-hover-scale:hover,
.btn-scale:hover,
a.bg-primary:hover,
a.bg-\[\#165DFF\]:hover,
button.bg-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(20, 87, 217, 0.2) !important;
}

input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.42) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--qyt-teal) !important;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16) !important;
  outline: none !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
}

tbody tr {
  transition: background-color 0.18s ease, transform 0.18s ease;
}

tbody tr:hover {
  background-color: rgba(20, 184, 166, 0.06) !important;
}

.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible,
.fade-in:first-child {
  opacity: 1;
  transform: translateY(0);
}

.timeline-line {
  background: linear-gradient(180deg, var(--qyt-blue), var(--qyt-teal)) !important;
}

footer.bg-primary {
  background: linear-gradient(135deg, #0d2f78 0%, #123f8d 52%, #0f766e 100%) !important;
}

img {
  max-width: 100%;
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 20% 4%, rgba(20, 87, 217, 0.12), transparent 18rem),
      linear-gradient(180deg, #f8fbff 0%, #f1f7fb 100%) !important;
  }

  .max-w-7xl,
  .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  nav .h-16,
  header .h-16 {
    min-height: 64px;
  }

  h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height: 1.15 !important;
  }

  section {
    scroll-margin-top: 80px;
  }

  section.py-16,
  section.py-20,
  section.py-24,
  .py-16,
  .lg\:py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .grid {
    gap: 1rem;
  }

  .rounded-2xl,
  .rounded-3xl {
    border-radius: 14px !important;
  }

  table {
    min-width: 760px;
  }

  footer .flex.justify-between {
    gap: 1rem;
  }

  .product-img,
  .product-detail-img {
    max-height: 300px;
  }
}

@keyframes qytDrift {
  to {
    transform: translate3d(90px, 44px, 0);
  }
}