/* Shared by the landing page and every public page: type, motion, hover. Light on purpose — two font
   files, no libraries. Everything respects prefers-reduced-motion. */
:root { --font-head: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }
html body { font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
html body h1, html body h2, html body h3, html body h4, html body .price, html body .brand, html body .stat3 b { font-family: var(--font-head); letter-spacing: -.02em }
h1 { font-weight: 800 } h2 { font-weight: 800 } h3 { font-weight: 700 }
html body .btn { font-family: var(--font-head); font-weight: 700; letter-spacing: -.005em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease }
.btn:hover { transform: translateY(-1px) } .btn.primary:hover { box-shadow: 0 10px 24px -12px rgba(241,94,37,.6) } .btn:active { transform: translateY(0) }

/* reveal on scroll: an element with .rv (or a container whose children are staggered) */
.rv, .rvs > * { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1) }
.rv.in, .rvs.in > * { opacity: 1; transform: none }
.rvs.in > :nth-child(2) { transition-delay: .07s } .rvs.in > :nth-child(3) { transition-delay: .14s } .rvs.in > :nth-child(4) { transition-delay: .21s } .rvs.in > :nth-child(5) { transition-delay: .28s } .rvs.in > :nth-child(6) { transition-delay: .35s } .rvs.in > :nth-child(n+7) { transition-delay: .42s }

/* hero entrance */
.hero .eyebrow, .hero h1, .hero .lead, .hero p, .hero .cta, .hero .fine { animation: rise .7s cubic-bezier(.2,.7,.2,1) both }
.hero h1 { animation-delay: .08s } .hero .lead, .hero > .wrap > p { animation-delay: .16s } .hero .cta { animation-delay: .24s } .hero .fine { animation-delay: .3s }
@keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

/* soft moving light behind the hero — GPU transforms only */
.hero { position: relative; overflow: hidden }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; will-change: transform }
.hero::before { width: 520px; height: 520px; left: -140px; top: -180px; background: radial-gradient(circle, #FEDCCB 0%, rgba(254,220,203,0) 70%); animation: drift1 18s ease-in-out infinite alternate }
.hero::after { width: 620px; height: 620px; right: -220px; top: -80px; background: radial-gradient(circle, #FEF0E9 0%, rgba(254,240,233,0) 70%); animation: drift2 22s ease-in-out infinite alternate }
@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(60px,40px,0) scale(1.12) } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(-70px,50px,0) scale(1.08) } }

/* cards lift a touch */
.card, .pcard, .step, .g9, .plan, .quote { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.card:hover, .pcard:hover, .step:hover, .g9:hover, .plan:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(32,34,36,.35); border-color: #F9D5C4 }

/* a quiet marquee of channels */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid #ECEEF2; border-bottom: 1px solid #ECEEF2; padding: 12px 0; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9aa0ab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marquee span { display: inline-block; padding-right: 48px } .marquee span b { color: #F15E25 }
.marquee .track { display: inline-block; animation: slide 38s linear infinite }
@keyframes slide { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }

/* progress bars in mock-ups fill when they come into view */
.rv.in .track i, .rvs.in .track i { transition: width 1.1s cubic-bezier(.2,.7,.2,1) .2s }

@media (prefers-reduced-motion: reduce) {
  .rv, .rvs > * { opacity: 1; transform: none; transition: none }
  .hero .eyebrow, .hero h1, .hero .lead, .hero p, .hero .cta, .hero .fine { animation: none }
  .hero::before, .hero::after, .marquee .track { animation: none }
  .card, .pcard, .step, .g9, .plan, .btn { transition: none }
}