/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM ENHANCE LAYER — "Liquid Glass" polish  (ui-ux-pro-max guided)
   Additive over style.css · vanilla CSS · touch-safe · reduced-motion aware
   ═══════════════════════════════════════════════════════════════════════ */

@property --lux-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  --ease-lux:    cubic-bezier(.22,1,.36,1);   /* premium ease-out */
  --ease-spring: cubic-bezier(.34,1.4,.5,1);  /* gentle overshoot */
}

/* ── 0. Adaptive nav — darker warm text over LIGHT sections (JS sets .nav--on-light) ─ */
.nav__logo-text, .nav__logo-text em, .nav__link, .nav__cta{ transition: color .45s var(--ease-lux); }
.nav__burger span{ transition: background-color .45s var(--ease-lux); }
.nav__logo-mark, .nav__inner{ transition: filter .45s var(--ease-lux), border-color .45s var(--ease-lux); }
.nav--on-light .nav__logo-text{ color:#241a0f; }
.nav--on-light .nav__logo-text em{ color: var(--terra); }
.nav--on-light .nav__link{ color: rgba(36,26,15,.80); }
.nav--on-light .nav__link:hover{ color:#241a0f; background: rgba(36,26,15,.06); }
.nav--on-light .nav__cta{ color:#241a0f; }
.nav--on-light .nav__burger span{ background:#241a0f; }
.nav--on-light .nav__logo-mark{ filter: brightness(.68) contrast(1.12) saturate(1.15); }
.nav--on-light .nav__inner{ border-color: rgba(120,70,20,.22); }
/* Mobile drawer is ALWAYS dark — while it's open, force its links + the burger X
   back to light even when the adaptive nav is in on-light (dark-text) mode. */
@media (max-width: 860px) {
  body.menu-open .nav--on-light .nav__link{ color: rgba(247,237,222,.88); }
  body.menu-open .nav--on-light .nav__link:hover{ color: var(--on-dark); background: rgba(255,246,232,.1); }
  body.menu-open .nav--on-light .nav__link--call{ color: var(--amber-lt); }
  body.menu-open .nav--on-light .nav__burger span{ background: var(--on-dark); }
}

/* ── 1. Buttons — tactile press, warmer glow, springy arrow ─────────────── */
.btn{ transition: transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux),
       background .3s ease, filter .3s ease; }
.btn--solid:hover{
  box-shadow: 0 24px 56px -16px rgba(224,104,58,.72), inset 0 1px 0 rgba(255,255,255,.75);
  filter: saturate(1.07) brightness(1.03);
}
.btn:active{ transform: scale(.96) !important; transition-duration: .1s; }
.btn__arrow{ transition: transform .45s var(--ease-spring); }
.btn:hover .btn__arrow{ transform: translateX(7px); }

/* ── 2. Nav links — sliding gradient underline ──────────────────────────── */
.nav__link{ position: relative; }
.nav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--amber-lt), var(--terra));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-lux);
}
.nav__link:hover::after{ transform: scaleX(1); }

/* ── 3. Cards — unified lift + glow (services already tilt via JS) ──────── */
.cert-card, .partner, .step, .faq-item, .mortgage__feature{
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux),
              border-color .5s var(--ease-lux) !important;
  will-change: transform;
}
.step:hover, .mortgage__feature:hover{
  transform: translateY(-7px);
  box-shadow: 0 42px 74px -34px rgba(80,40,10,.7);
}
.cert-card:hover, .partner:hover{ transform: translateY(-6px) scale(1.015); }
.faq-item{ transition: background .4s var(--ease-lux) !important; }

/* ── 4. Images — elegant slow zoom on certificates only ─────────────────── */
/* (founder photo intentionally NOT zoomed — kept static rounded + white border) */
.cert-card__zoom img{ transition: transform .9s var(--ease-lux); }
.cert-card:hover .cert-card__zoom img{ transform: scale(1.06); }

/* ── 5. Gradient text shimmer — .price__amount only: animating background-position
   on background-clip:text REPAINTS every frame, and .accent includes the hero H1 —
   that alone dropped Retina Macs to single-digit FPS during load. ─────────── */
.price__amount{ background-size: 220% auto; animation: lux-shimmer 7s ease-in-out infinite; }
@keyframes lux-shimmer{ 0%,100%{ background-position:0% center; } 50%{ background-position:100% center; } }

/* ── 6. Featured pricing tier — slow rotating gradient glow ─────────────── */
.price--feature{ position: relative; }
.price--feature::after{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius: inherit;
  background: conic-gradient(from var(--lux-a),
    var(--amber-lt), var(--terra), var(--amber-glow), var(--amber-lt));
  filter: blur(10px); opacity:.55; animation: lux-rotate 7s linear infinite;
  /* repaints every frame — spin only while the visitor is actually looking at it */
  animation-play-state: paused;
}
.price--feature:hover::after{ animation-play-state: running; }
@keyframes lux-rotate{ to{ --lux-a: 360deg; } }

/* ── 7. Section tags — gentle spring on hover ───────────────────────────── */
.section__tag{ transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-lux); }
.section__tag:hover{ transform: translateY(-2px); }

/* ── 8. Cursor-follow warm glow on cards (JS sets --gx / --gy) ──────────── */
[data-glow]{ position: relative; isolation: isolate; }
[data-glow]::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit; pointer-events:none;
  background: radial-gradient(300px 300px at var(--gx,50%) var(--gy,120%),
    rgba(255,196,110,.16), transparent 62%);
  opacity:0; transition: opacity .5s ease;
}
[data-glow]:hover::after{ opacity:1; }

/* ── 9. Respect reduced motion — calm everything ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .accent, .price__amount, .price--feature::after{ animation: none !important; }
  [data-tilt-x]{ transform: none !important; }
  .btn:hover .btn__arrow{ transform: none; }
}