/* =================================================
   OWLHUB — desktop.css
   Desktop immersive experience (>= 769px)
   ================================================= */

/* =================================================
   1. BACKGROUND COLOR FADES (DESKTOP ONLY)
   ================================================= */

html[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 12% 8%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(1000px 520px at 88% 22%, rgba(225,29,72,0.16), transparent 58%),
    radial-gradient(900px 480px at 50% 95%, rgba(37,99,235,0.14), transparent 60%);
}

html[data-theme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(37,99,235,0.12), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(124,58,237,0.10), transparent 55%),
    radial-gradient(800px 400px at 50% 100%, rgba(255,152,0,0.10), transparent 60%);
}

/* =================================================
   2. HERO — FULL BLEED
   ================================================= */

.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}

/* =================================================
   3. METHOD STEPS — SCROLL REVEAL
   ================================================= */

.method-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.method-step.visible {
  opacity: 1;
  transform: none;
}

/* =================================================
   4. SAFETY — PREVENT GRADIENT BLEED
   ================================================= */

html[data-theme="dark"] .cta-group,
html[data-theme="dark"] .hero-actions,
html[data-theme="dark"] .actions {
  background: none !important;
}

/* =================================================
   5. CHIPS / TAGS — DATA FEEL
   ================================================= */

.chips span,
.tags span {
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] .chips span,
html[data-theme="dark"] .tags span {
  background: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .chips span:hover,
html[data-theme="dark"] .tags span:hover {
  background: rgba(124,58,237,0.18);
}

/* =================================================
   6. FOOTER — FADE OUT
   ================================================= */

.footer {
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  pointer-events: none;
}