:root {
  --quantis-purple: #4e008f;
  --quantis-purple-deep: #38006b;
  --quantis-purple-dark: #26004a;
  --quantis-blue: #1b3bb3;
  --quantis-blue-tech: #2a5cff;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

.font-display {
  font-family: 'Sora', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Wide tracking to echo the QUANTIS wordmark */
.brand-track {
  letter-spacing: 0.18em;
}

/* ---------- Gradients ---------- */
.gradient-purple {
  background: linear-gradient(135deg, #4e008f 0%, #38006b 55%, #26004a 100%);
}

.gradient-purple-blue {
  background: linear-gradient(120deg, #38006b 0%, #4e008f 45%, #1b3bb3 100%);
}

.text-gradient {
  background: linear-gradient(100deg, #4e008f 0%, #6b21c9 45%, #2a5cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-light {
  background: linear-gradient(100deg, #ffffff 0%, #d9c8f5 60%, #9ab4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero overlay ---------- */
.hero-overlay {
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(38, 0, 74, 0.35) 0%, rgba(11, 7, 16, 0.85) 55%, rgba(11, 7, 16, 0.96) 100%),
    linear-gradient(180deg, rgba(11, 7, 16, 0.4) 0%, rgba(11, 7, 16, 0.7) 100%);
}

/* Family hero: keep light/people on the LEFT, darken the RIGHT for text legibility */
.hero-overlay-family {
  background:
    linear-gradient(
      90deg,
      rgba(11, 7, 16, 0.15) 0%,
      rgba(20, 6, 40, 0.35) 38%,
      rgba(38, 0, 74, 0.78) 62%,
      rgba(15, 6, 30, 0.94) 100%
    ),
    linear-gradient(180deg, rgba(11, 7, 16, 0.25) 0%, rgba(11, 7, 16, 0.55) 100%);
}
/* On small screens the text sits over the whole image, so darken more evenly */
@media (max-width: 1023px) {
  .hero-overlay-family {
    background:
      linear-gradient(
        180deg,
        rgba(11, 7, 16, 0.55) 0%,
        rgba(30, 4, 58, 0.8) 55%,
        rgba(15, 6, 30, 0.94) 100%
      );
  }
}

/* ---------- Fine molecular grid ---------- */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- Cards ---------- */
.card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -30px rgba(78, 0, 143, 0.45);
  border-color: rgba(78, 0, 143, 0.35);
}

.card-dark {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease, border-color 0.4s ease;
}
.card-dark:hover {
  transform: translateY(-6px);
  border-color: rgba(154, 180, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
.header-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(78, 0, 143, 0.08), 0 8px 30px -20px rgba(38, 0, 74, 0.4);
}

/* Logo swap: white by default (over hero), purple when scrolled */
.logo-dark {
  display: none;
}
.header-scrolled .logo-light {
  display: none;
}
.header-scrolled .logo-dark {
  display: block;
}
/* Hide the wordmark on very small screens, keep the Q icon */
.logo-word {
  display: none;
}
@media (min-width: 640px) {
  .logo-light.logo-word {
    display: block;
  }
  .header-scrolled .logo-light.logo-word {
    display: none;
  }
  .header-scrolled .logo-dark.logo-word {
    display: block;
  }
}

/* Nav links: light over hero, dark when scrolled */
#site-header .nav-link {
  color: rgba(255, 255, 255, 0.82);
}
#site-header .nav-link:hover {
  color: #ffffff;
}
.header-scrolled .nav-link {
  color: rgba(38, 0, 74, 0.8);
}
.header-scrolled .nav-link:hover {
  color: var(--quantis-purple);
}

/* Mobile toggle color over hero */
#menu-toggle {
  color: #ffffff;
}
.header-scrolled #menu-toggle {
  color: var(--quantis-purple-dark);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(120deg, #4e008f 0%, #6b21c9 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(78, 0, 143, 0.7);
  filter: brightness(1.06);
}

.btn-outline {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------- Pill / tag ---------- */
.pill {
  border: 1px solid rgba(78, 0, 143, 0.22);
  background: rgba(78, 0, 143, 0.05);
}

/* ---------- Divider fibers ---------- */
.fiber-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 0, 143, 0.4), transparent);
}

/* ---------- Floating animation ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.floaty { animation: floaty 7s ease-in-out infinite; }

/* ---------- Slow drift for hero image ---------- */
@keyframes drift {
  0% { transform: scale(1.05) translate(0, 0); }
  50% { transform: scale(1.1) translate(-1.5%, -1%); }
  100% { transform: scale(1.05) translate(0, 0); }
}
.drift { animation: drift 26s ease-in-out infinite; }

/* Mobile menu */
.mobile-menu {
  transition: max-height 0.4s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.mobile-menu.open {
  max-height: 520px;
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .floaty, .drift { animation: none; }
}

/* Language switcher */
.lang-btn {
  color: rgba(11, 7, 16, 0.45);
  transition: color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}
.lang-btn:hover {
  color: #4E008F;
}
.lang-btn.lang-active {
  color: #4E008F;
  background-color: rgba(78, 0, 143, 0.1);
}
/* Language switcher inside dark/mobile contexts inherits button colors */
#mobile-menu .lang-btn {
  color: rgba(11, 7, 16, 0.55);
}
#mobile-menu .lang-btn.lang-active {
  color: #4E008F;
  background-color: rgba(78, 0, 143, 0.12);
}