/* Motion enhances the page; content remains visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }
.scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:30; background:linear-gradient(90deg,var(--violet),var(--lime)); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.hero { position:relative; }
.hero h1>span { position:relative; display:inline-block; background:linear-gradient(115deg,#f1ddbd 15%,#f8eedd 50%,#ecd0a4 90%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero h1>span::after { content:''; position:absolute; left:3px; right:7px; bottom:-6px; height:3px; border-radius:100%; background:linear-gradient(90deg,var(--violet),var(--lime)); transform-origin:left; }
.hero-visual::before { content:''; position:absolute; inset:10% 4%; z-index:-1; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse,#e7c48d30,transparent 68%); }
.status-dot { box-shadow:0 0 0 5px #e8c89412,0 0 17px #e8c89440; }
.button { position:relative; overflow:hidden; isolation:isolate; transition:background .25s,transform .3s var(--motion-ease),box-shadow .3s; }
.button::after { content:''; position:absolute; inset:-70% auto -70% -65%; width:35%; background:linear-gradient(90deg,transparent,#ffffff65,transparent); transform:skewX(-22deg); pointer-events:none; }
.button>span,.text-link>span,.round-arrow { transition:transform .3s var(--motion-ease); }
.button:focus-visible>span,.button:hover>span,.text-link:hover>span { transform:translate(3px,-3px); }
.button:hover { box-shadow:0 8px 28px #f1ddbd25; }
.button:hover::after,.button:focus-visible::after { animation:button-glint .7s var(--motion-ease) both; }
nav a { position:relative; padding-block:6px; }
nav a::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--violet); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
nav a:hover::after,nav a.is-current::after { transform:scaleX(1); }
nav a.is-current { color:var(--violet); }
.feature,.plan { position:relative; transition:box-shadow .35s,border-color .35s; }
.feature::after { content:''; pointer-events:none; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(350px circle at var(--spot-x,50%) var(--spot-y,50%),#ffffff22,transparent 65%); opacity:0; transition:opacity .35s; }
.feature:hover::after { opacity:1; }
.feature:hover { box-shadow:0 14px 38px #0003; }
.plan:hover { border-color:var(--violet); box-shadow:0 12px 32px #0002; }
.premium { box-shadow:inset 0 1px 0 #f5e6cf25,0 0 32px #d0b07c0a; }
.example:hover .round-arrow { transform:rotate(45deg); background:var(--lime); }
.example:focus-visible .example-phone { transform:rotate(0deg) translateY(-8px); }
.swatch { transition:transform .45s var(--motion-ease); }
.feature:hover .swatch-dark { transform:rotate(-20deg) translate(-2px,-6px); }
.feature:hover .swatch-cream { transform:translateY(-10px); }
.feature:hover .swatch-violet { transform:rotate(20deg) translate(2px,-6px); }
.menu-toggle>span { transition:transform .25s; }
.menu-toggle[aria-expanded=true]>span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true]>span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.steps li { transition:border-color .3s; }
.steps li:hover { border-color:var(--violet); }
.steps li>span { transition:transform .3s; }
.steps li:hover>span { transform:translateX(4px); }
@media(prefers-reduced-motion:no-preference) {
  .motion-ready .reveal { opacity:0; transform:translateY(28px); transition:opacity .75s var(--motion-ease),transform .75s var(--motion-ease); transition-delay:var(--reveal-delay,0ms); }
  .motion-ready .reveal.is-visible { opacity:1; transform:none; }
  .motion-ready .reveal:focus-within { opacity:1; transform:none; }
  .motion-ready .hero-copy>* { animation:hero-enter .8s var(--motion-ease) both; }
  .motion-ready .hero-copy>h1 { animation-delay:.08s; }
  .motion-ready .hero-description { animation-delay:.16s; }
  .motion-ready .hero-actions { animation-delay:.24s; }
  .motion-ready .hero-note { animation-delay:.32s; }
  .motion-ready .hero h1>span::after { animation:underline-in .85s .5s var(--motion-ease) both; }
  .motion-ready .spark { animation:spark-turn 1.6s .25s var(--motion-ease) both; }
  .motion-ready .phone { animation:phone-arrive 1.3s .12s var(--motion-ease) backwards; }
  .motion-ready .phone-front { animation-delay:.28s; }
  .motion-ready .scan-card { animation:scan-arrive 1s .6s var(--motion-ease) both; }
  .motion-ready .hero-visual::before { animation:glow-in 1.8s var(--motion-ease) both; }
  .phone { translate:var(--phone-x,0px) var(--phone-y,0px); transition:translate .65s var(--motion-ease),transform .4s; }
  details[open] p { animation:faq-open .3s var(--motion-ease); }
  .price-changing { animation:price-change .35s var(--motion-ease); }
  .closing.is-visible .closing-asterisk { animation:closing-turn 1.8s .2s var(--motion-ease) both; }
}
@keyframes hero-enter { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes underline-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes spark-turn { from { transform:rotate(-95deg) scale(.55); opacity:0; } to { transform:rotate(10deg) scale(1); opacity:1; } }
@keyframes phone-arrive { from { opacity:0; translate:0 45px; } to { opacity:1; translate:0 0; } }
@keyframes scan-arrive { from { opacity:0; translate:-20px 18px; } to { opacity:1; translate:0 0; } }
@keyframes glow-in { from { opacity:0; scale:.7; } to { opacity:1; scale:1; } }
@keyframes button-glint { from { left:-65%; } to { left:140%; } }
@keyframes faq-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes price-change { 0% { opacity:.3; transform:translateY(7px); } 100% { opacity:1; transform:none; } }
@keyframes closing-turn { from { transform:rotate(-95deg) scale(.8); } to { transform:rotate(-15deg) scale(1); } }
@media(prefers-reduced-motion:reduce) {
  .reveal { opacity:1!important; transform:none!important; }
  .phone { translate:none!important; }
  .hero-copy>*,.phone,.scan-card,.spark,.closing-asterisk { animation:none!important; }
  .scroll-progress { display:none; }
}