/* ===== Motion layer (progressive enhancement: content stays visible without JS) ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(0);
  background:var(--grad-brand);box-shadow:0 0 12px rgba(255,61,154,.6);pointer-events:none}

/* Hero headline: typewriter */
.tw{display:inline-block;white-space:nowrap}
.js .tw .ch{opacity:0}
.js .tw .ch.on{opacity:1}
.type-caret{display:inline-block;width:.07em;height:.95em;margin-left:.04em;vertical-align:-.1em;border-radius:2px;
  background:var(--accent-pink);box-shadow:0 0 14px rgba(255,61,154,.8);animation:blink .8s steps(2) infinite}
.type-caret.start{margin-left:0;margin-right:-.07em}
.type-caret.done{animation:blink .6s steps(2) infinite 0s,caretOut .3s ease 1.5s forwards}
@keyframes caretOut{to{opacity:0;width:0}}
.js .hero .eyebrow,.js .hero .lede,.js .hero .hero-actions{opacity:0;transform:translateY(22px);animation:fadeUp .55s var(--ease) forwards}
.js .hero .eyebrow{animation-delay:0s;animation-duration:.5s}
.js .hero .lede{animation-delay:var(--tt,1.2s)}
.js .hero .hero-actions{animation-delay:calc(var(--tt,1.2s) + .12s)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Soft glow sweep on the key word (text stays solid + readable) */
.hero h1 .tw.hl{text-shadow:0 0 28px rgba(185,91,255,.55)}

@keyframes blink{50%{opacity:0}}

/* Scroll reveal */
.js .reveal{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .reveal.in{opacity:1;transform:none;filter:none}

/* Section headings: animated underline accent */
.section-head h2{position:relative}
.section-head.in h2::after,.js .section-head.reveal.in h2::after{width:72px}
.section-head h2::after{content:"";display:block;height:3px;width:0;margin:14px auto 0;border-radius:3px;
  background:var(--grad-brand);transition:width .9s var(--ease) .3s}

/* Cards: cursor spotlight + lift */
.glass.card,.step,.testi-card,.faq-item{position:relative;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.glass.card:hover,.step:hover,.testi-card:hover{transform:translateY(-6px);border-color:rgba(255,61,154,.35);box-shadow:0 22px 50px rgba(5,2,12,.55),0 0 30px rgba(155,47,247,.2)}
.glass.card::before,.step::before,.testi-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,61,154,.16),transparent 70%);transition:opacity .3s}
.glass.card:hover::before,.step:hover::before,.testi-card:hover::before{opacity:1}
.step .num{display:inline-block;transition:transform .4s var(--ease)}
.step:hover .num{transform:scale(1.18) rotate(-4deg)}
.stars{display:inline-block;letter-spacing:3px}
.testi-card.in .stars{animation:starPop .7s var(--ease) .3s both}
@keyframes starPop{from{opacity:0;transform:scale(.6);letter-spacing:-4px}to{opacity:1;transform:none;letter-spacing:3px}}

/* Video frame: gentle float + glow */
.video-banner .frame{animation:floaty 7s ease-in-out infinite;will-change:transform}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* Navbar condenses on scroll */
.navbar{transition:transform .4s var(--ease),padding .3s var(--ease)}
.navbar.scrolled .container{box-shadow:0 12px 40px rgba(5,2,12,.6);backdrop-filter:blur(22px)}
.navbar.hide{transform:translateY(-120%)}

/* Buttons: soft idle pulse on primary CTAs */
.hero-actions .btn-primary{animation:ctaPulse 2.8s ease-in-out 2s infinite}
@keyframes ctaPulse{50%{box-shadow:0 0 0 8px rgba(255,61,154,.12)}}

/* FAQ smooth open */
.faq-item[open] .faq-body{animation:faqOpen .45s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .tw .ch,.js .hero .eyebrow,.js .hero .lede,.js .hero .hero-actions,.js .reveal{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  .video-banner .frame,.hero-actions .btn-primary{animation:none!important}
}

/* ===== Liquid-glass header ===== */
.navbar .container{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.09) 100%),rgba(20,10,36,.38);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(26px) saturate(190%) brightness(1.08);
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.08);
  box-shadow:0 10px 40px rgba(5,2,12,.5),
    inset 0 1.5px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.12);
}
/* moving specular sheen */
.navbar .container::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;clip-path:inset(0 round 10px);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 45%,transparent 60%) no-repeat;background-size:60% 100%;background-position:-80% 0;
  animation:glassSheen 7s ease-in-out infinite}
@keyframes glassSheen{0%,55%{background-position:-80% 0}100%{background-position:180% 0}}
.nav-links a:hover{text-shadow:0 0 14px rgba(255,255,255,.35)}

/* Header CTA = same sparkle/dots button as the hero, in a liquid-glass finish */
.btn-nav-cta,.btn-nav-mobile{padding:11px 24px;font-size:.92rem}
.btn-nav-cta::before,.btn-nav-mobile::before{
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 48%,rgba(255,255,255,0) 52%),
    linear-gradient(135deg,rgba(255,61,154,.92),rgba(155,47,247,.92) 55%,rgba(78,47,224,.92));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(20,0,60,.35),
    0 8px 26px rgba(155,47,247,.45),0 0 0 calc(var(--active,0) * .3rem) rgba(255,61,154,.45)}
.btn-nav-cta .text_button,.btn-nav-mobile .text_button{color:#fff;text-shadow:0 1px 2px rgba(40,0,70,.45)}
.navbar.scrolled .container{box-shadow:0 14px 46px rgba(5,2,12,.6),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08)}
@media (max-width:860px){
  .nav-links{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),rgba(16,9,28,.96)!important;
    border:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(30px) saturate(190%)!important;
    box-shadow:0 16px 50px rgba(5,2,12,.55),inset 0 1.5px 0 rgba(255,255,255,.4)}
}
@media (prefers-reduced-motion:reduce){.navbar .container::before{animation:none}}

/* ===== Phone fixes ===== */
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .navbar{padding:10px 12px}
  .navbar .container{padding:8px 14px}
  .nav-links{top:78px!important;left:0!important;right:0!important}
}
@media (max-width:640px){
  .hero{padding:128px 0 56px}
  .hero h1{font-size:clamp(2rem,9.2vw,2.6rem);max-width:15ch;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
  .hero .lede{font-size:1.02rem;line-height:1.65;padding:0 4px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:320px;margin:28px 0 24px}
  .hero-actions .btn{width:100%}
  h2{font-size:clamp(1.65rem,7vw,2rem)}
  .section-head h2::after{margin-top:10px}
}