/* Adaptify motion system. One set of tokens, four patterns:
   1) Reveal on scroll  2) Hover lift  3) Press feedback  4) Focus glow
   Everything is disabled under prefers-reduced-motion. */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --t-press:.12s;   /* press feedback */
  --t-hover:.25s;   /* hover, focus, small state changes */
  --t-reveal:.7s;   /* entrances */
  --lift:-4px;      /* card hover travel */
  --lift-sm:-2px;   /* button hover travel */
}

/* ---------- 1. Entrances ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero h1,.hero .lead,.hero-cta,.hero .hero-note,.hero-points{animation:rise var(--t-reveal) var(--ease) both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.18s}.hero-cta{animation-delay:.28s}
.hero .hero-note{animation-delay:.36s}.hero-points{animation-delay:.46s}
.hm-main{animation:pop-in .9s var(--ease) .2s both}
.hm-before{animation:rise .9s var(--ease) .55s both}
.hm-phone{animation:rise .9s var(--ease) .7s both}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.hm-phone{animation:rise .9s var(--ease) .7s both,float 6s ease-in-out 1.8s infinite}

/* Scroll reveal (main.js adds html.js, tags elements, and toggles .in) */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- Header + progress ---------- */
header{transition:box-shadow var(--t-hover),background var(--t-hover)}
header .nav{transition:height var(--t-hover) var(--ease)}
header.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.28)}
header.scrolled .nav{height:60px}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),#FFB58F);z-index:70;pointer-events:none}
.nav-links a:not(.btn){position:relative;transition:color var(--t-hover)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease)}
.nav-links a:not(.btn).active{color:#fff}
.nav-links a:not(.btn).active::after{transform:scaleX(1)}

/* ---------- 2/3. Buttons: lift on hover, press on click, shine sweep ---------- */
.btn{position:relative;overflow:hidden;transition:transform var(--t-hover) var(--ease),background var(--t-hover),box-shadow var(--t-hover),border-color var(--t-hover)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--t-press);box-shadow:0 4px 12px rgba(255,107,44,.3)}
.btn-ghost:active{box-shadow:none}
.tc-btn{transition:transform var(--t-hover) var(--ease),border-color var(--t-hover),color var(--t-hover),background var(--t-hover)}
.tc-btn:active{transform:scale(.92);transition-duration:var(--t-press)}
.tc-dots button{transition:width var(--t-hover) var(--ease),background var(--t-hover)}

/* ---------- Cards: one hover language ---------- */
.card,.feat,.step,.tcard,.plan,.addon,.work,details{transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),border-color var(--t-hover),background var(--t-hover)}
.card .ico,.feat .ck{transition:transform var(--t-hover) var(--ease),background var(--t-hover),color var(--t-hover)}
.work .shot{overflow:hidden}
.work img{transition:transform .8s var(--ease)}
.work .go{display:inline-block;transition:transform var(--t-hover) var(--ease),color var(--t-hover)}
.plan.pop .badge{animation:badge 3s ease-in-out infinite}
@keyframes badge{0%,100%{box-shadow:0 0 0 0 rgba(255,107,44,.5)}50%{box-shadow:0 0 0 8px rgba(255,107,44,0)}}
.spec b{display:inline-block;transition:transform var(--t-hover) var(--ease)}

@media (hover:hover){
  .btn:hover{transform:translateY(var(--lift-sm));box-shadow:0 14px 30px rgba(255,107,44,.42)}
  .btn:hover::before{transform:translateX(120%)}
  .btn-ghost:hover{box-shadow:none;border-color:rgba(255,255,255,.7)}
  .plan .btn.alt:hover,.addon .btn:hover{box-shadow:0 12px 26px rgba(11,31,51,.3)}
  .card:hover,.feat:hover,.tcard:hover,.step:hover{transform:translateY(var(--lift));box-shadow:var(--shadow);border-color:#FFD2BB}
  .card:hover .ico{transform:scale(1.1) rotate(-4deg)}
  .feat:hover .ck{transform:scale(1.12);background:var(--green);color:#fff}
  .plan:hover{transform:translateY(var(--lift));box-shadow:var(--shadow)}
  .addon:hover{border-style:solid;border-color:var(--orange)}
  .work:hover img{transform:scale(1.045)}
  .work:hover .go{transform:translateX(5px);color:var(--orange-d)}
  details:hover{border-color:#FFD2BB}
  .spec:hover b{transform:scale(1.08)}
  .tc-btn:hover{transform:translateY(-1px)}
}

/* ---------- FAQ ---------- */
summary::after{transition:transform var(--t-hover) var(--ease)}
details[open] summary::after{content:"+";transform:rotate(135deg)}
details[open]{border-color:#FFD2BB;box-shadow:0 10px 26px rgba(11,31,51,.07)}
details[open] p{animation:rise .45s var(--ease) both}

/* ---------- 4. Form: focus glow, check-draw success ---------- */
input,select{transition:border-color var(--t-hover),box-shadow var(--t-hover),background var(--t-hover)}
input:focus,select:focus{box-shadow:0 0 0 4px rgba(255,107,44,.18)}
.thanks.show{animation:pop-in .6s var(--ease) both}
.thanks .tick{width:64px;height:64px;margin:0 auto 14px;display:block}
.thanks .tick circle{fill:none;stroke:#E6F6EC;stroke-width:4}
.thanks .tick .ring{stroke:var(--green);stroke-dasharray:176;stroke-dashoffset:176;stroke-linecap:round;animation:draw .7s var(--ease) .1s forwards}
.thanks .tick path{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s var(--ease) .65s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.shake{animation:shake .35s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .progress{display:none}
  /* the testimonial strip is the one exception: it is a slow, hover-to-pause marquee the page relies on */
  .tc-track.marquee .tc-move{animation:tc-scroll var(--tc-dur,70s) linear infinite!important}
  .tc-track.marquee:hover .tc-move,.tc-track.marquee:focus-within .tc-move,.tc-track.marquee.held .tc-move{animation-play-state:paused!important}
}