/* COMPONENTS — header, buttons, steps, prices, FAQ, footer, sticky CTA */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:.8em 1.5em; border-radius:999px; border:1px solid currentColor;
  font:600 var(--step--1)/1 var(--font-display); letter-spacing:.01em; text-decoration:none;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out)}
.btn--primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn--primary:hover{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.btn--ghost:hover{background:var(--fg); color:var(--bg)}
[data-magnetic]{display:inline-block}

/* Header */
.site-header{position:fixed; inset:0 0 auto; z-index:50; height:var(--header-h);
  display:flex; align-items:center; transition:background-color .3s, color .3s}
.site-header.is-scrolled{background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--fg)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{font:700 var(--step-1)/1 var(--font-display); text-decoration:none; letter-spacing:-.02em}
.nav{display:flex; align-items:center; gap:clamp(1rem,2vw,2rem)}
.nav a:not(.btn){text-decoration:none; font:500 var(--step--1)/1 var(--font-display); padding-block:.75rem}
.nav-toggle{display:none; background:none; border:0; min-width:48px; min-height:48px; cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:inline-grid; place-items:center}
  .nav{position:fixed; inset:var(--header-h) 0 auto; flex-direction:column; align-items:flex-start;
    padding:var(--space-m) var(--gutter); background:var(--bg); color:var(--fg);
    border-bottom:1px solid var(--line); transform:translateY(-120%); visibility:hidden;
    transition:transform .4s var(--ease-out), visibility 0s .4s}
  .nav.is-open{transform:none; visibility:visible; transition:transform .4s var(--ease-out)}
  .nav a:not(.btn){font-size:var(--step-2)}
}

/* Steps (a real sequence -> numbered) */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-m);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); counter-reset:step}
.steps li{counter-increment:step; border-top:1px solid var(--line); padding-top:var(--space-s)}
.steps li::before{content:counter(step); display:block; font:600 var(--step-3)/1 var(--font-display); margin-bottom:.75rem}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font:600 var(--step-1)/1.3 var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:50%; translate:0 -50%;
  font-size:1.5em; font-weight:400; transition:rotate .3s var(--ease-out)}
.faq details[open] summary::after{rotate:45deg}
.faq details > div{padding-bottom:1.25rem}

/* Footer */
.site-footer{padding-block:var(--space-l) var(--space-m); border-top:1px solid var(--line); font-size:var(--step--1)}

/* Sticky mobile CTA */
.cta-sticky{display:none}
@media (max-width:768px){
  .cta-sticky{display:flex; position:fixed; z-index:60; left:var(--gutter); right:var(--gutter);
    bottom:calc(1rem + env(safe-area-inset-bottom)); transition:translate .35s var(--ease-out), opacity .35s}
  .cta-sticky.is-hidden{translate:0 150%; opacity:0; pointer-events:none}
  body{padding-bottom:5.5rem}
}