/* Dryline — beauty layer. Pure enhancement; degrades to fully-visible without JS. */

/* ---------- Scroll reveal (only when motion is welcome + JS active) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s cubic-bezier(.16, .84, .44, 1),
                transform .8s cubic-bezier(.16, .84, .44, 1);
    will-change: opacity, transform;
  }
  html.js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Sticky nav: lifts off the page once you scroll ---------- */
.dl-sticky-nav {
  transition: box-shadow .28s ease, background-color .28s ease;
}
.dl-sticky-nav.is-scrolled {
  box-shadow: 0 1px 0 var(--dl-line), 0 10px 30px rgba(20, 18, 12, .07);
}

/* ---------- Hero: soft accent aurora + refined depth ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 71, 230, .11), rgba(30, 71, 230, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 122, 82, .06), rgba(27, 122, 82, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* the product mock gets a deeper, softer float shadow */
.hero-mock {
  filter: drop-shadow(0 34px 64px rgba(20, 18, 12, .14));
}

/* accent the focal phrase in the hero headline */
.hero-accent { color: var(--dl-accent); }

/* ---------- Tasteful hover on interactive cards ---------- */
.dl-feature-card,
.dl-tier {
  transition: transform .25s cubic-bezier(.16, .84, .44, 1), box-shadow .25s ease;
}
.dl-feature-card:hover,
.dl-tier:hover {
  transform: translateY(-5px);
  box-shadow: var(--dl-shadow-lg);
}

/* ---------- Buttons: gentle press-ready lift ---------- */
.dl-btn--primary,
.dl-btn--ghost {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.dl-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(30, 71, 230, .22); }
.dl-btn--ghost:hover { transform: translateY(-1px); }

/* ---------- Final CTA: faint top light over the blue ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* ---------- Dark problem cards: subtle interactive warmth ---------- */
.problem-card {
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.problem-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(157, 176, 255, .35);
}

/* ---------- Inputs: focus ring in Dryline Blue ---------- */
input:focus, select:focus, textarea:focus {
  border-color: var(--dl-accent) !important;
  box-shadow: 0 0 0 3px var(--dl-accent-soft);
}