/* ============================================================
   ENHANCE - dynamic accent layer (loaded LAST on both pages).
   Keys off --accent so it adapts (Skyline blue / Silvia sky-sunset).
   Motion lives on backgrounds + transforms only (never on text), so
   there is no "rainbow bar". Includes a visible hero entrance.
   ============================================================ */

:root { --enh-glow: color-mix(in oklab, var(--accent) 32%, transparent); }

/* ---------- HERO backdrop wash (sunset.css replaces this on the umbrella) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 66%; z-index: -1;
  background: radial-gradient(48% 70% at 78% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}

/* ---------- BOLDER, TIGHTER TYPE ---------- */
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; }
.section-head h2 { font-weight: 800; letter-spacing: -0.022em; }
.eyebrow { letter-spacing: 0.14em; }

/* Accent highlight + eyebrow are SOLID color (sharp, no clip tricks). */
.hero h1 .grad, .hero h1 .accent-text {
  background: none; -webkit-text-fill-color: var(--accent); color: var(--accent);
}
.eyebrow { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }

/* ---------- HERO ENTRANCE ----------
   First-viewport text paints immediately for LCP; decorative hero art may still
   ease in after the real content is visible. */
.hero-copy > * { opacity: 1; transform: none; }
.hero-art { animation: popIn 0.9s var(--ease-out) 0.18s both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes popIn  { from { opacity: 0; transform: scale(0.9); }       to { opacity: 1; transform: none; } }

/* ---------- PRIMARY BUTTON: solid accent default, strong hover ---------- */
.btn-primary {
  background-image: none; background-color: var(--accent); border-color: transparent;
  box-shadow: 0 6px 16px -8px var(--enh-glow);
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 32px -10px var(--enh-glow); filter: brightness(1.05); }

/* ---------- CARDS: clear lift + glow ---------- */
.product-card, .card.tenet, .card.value-card, .problem-card, .price-card, .trust-card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.product-card:hover, .card.tenet:hover, .card.value-card:hover,
.problem-card:hover, .price-card:hover, .trust-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}
.product-card.feature { border-color: color-mix(in oklab, var(--accent) 34%, var(--border)); }

/* ---------- NAV: frosted glass ---------- */
.nav { backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); background: color-mix(in oklab, var(--bg) 80%, transparent); }
.nav.scrolled { background: color-mix(in oklab, var(--bg) 92%, transparent); box-shadow: 0 1px 0 var(--border); }

.link-arrow { transition: gap 0.16s var(--ease-out); }
.link-arrow:hover { gap: 0.55rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .hero-copy > *, .hero-art { opacity: 1 !important; transform: none !important; }
}