/* Clienti Per Artigiani, design condiviso (v2, ottobre 2026)
   Stile sul modello del funnel parrucchieriambiziosi.it: fondo quasi nero,
   titoli condensati maiuscoli, palette verde e giallo di Gerson, card scure con bordi sottili.
   Design piatto: niente aloni, ombre colorate, vetro sfocato o bottoni che pulsano. */
:root{
  /* palette di Gerson: verde bosco, verde scuro, crema, giallo */
  --bg:#14201A; --bg-2:#1E3D30; --panel:#1B2E24; --panel-2:#22392D; --forest:#1E3D30; --green-brand:#2E5A47;
  --line:rgba(247,201,72,.22); --line-soft:rgba(244,241,230,.12);
  --gold:#F7C948; --gold-hover:#FFD65E; --gold-ink:#14201A;
  --green:#3E8A64; --no:#c8584a;
  --ink:#F4F1E6; --muted:#BAC4BC; --dim:#8A978F;
  --display:'League Gothic','Oswald',Impact,sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --gutter:32px; --wrap:1160px; --r:18px;
}
@media (max-width:640px){ :root{ --gutter:18px } }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:450 18px/1.65 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; display:block}
p{margin:0}
a{color:inherit}
strong,b{color:#fff; font-weight:750}
::selection{background:var(--gold); color:#000}

/* ---------- struttura ---------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.narrow{max-width:820px}
.sec{position:relative; padding:96px 0}
@media (max-width:640px){ .sec{padding:64px 0} }
.sec.alt{background:var(--forest); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}

/* ---------- titoli ---------- */
.display,h1,h2,h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.012em; margin:0; color:#fff}
h2{font-size:clamp(42px,5.4vw,72px); line-height:.98; text-wrap:balance}
h3{font-size:clamp(28px,2.6vw,34px); line-height:1}
h1 em,h2 em,h3 em,.gold{font-style:normal; color:var(--gold)}
.head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin:0 auto 48px; max-width:900px}
.head .sub{font-size:clamp(17px,1.7vw,20px); color:var(--muted); max-width:720px}
.kicker{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:750; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.kicker::before{content:""; width:28px; height:1px; background:currentColor}
.lead{font-size:clamp(18px,1.7vw,21px); line-height:1.55}
.muted{color:var(--muted)}
.prose p{font-size:clamp(17.5px,1.6vw,19px); line-height:1.7; color:rgba(244,239,227,.9)}
.prose p + p{margin-top:1.05em}

/* frase forte con barra oro */
.punch{margin:34px 0; padding:6px 0 6px 26px; border-left:3px solid var(--gold); font:400 clamp(30px,3.4vw,44px)/1.02 var(--display); text-transform:uppercase; color:#fff; letter-spacing:.01em}
.punch span{display:block; color:var(--gold); margin-top:8px}

/* ---------- barra in alto ---------- */
.topbar{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line-soft)}
.topbar .in{display:flex; align-items:center; gap:18px; height:64px}
.brand{font:400 26px/.9 var(--display); text-transform:uppercase; letter-spacing:.02em; color:#fff; text-decoration:none}
.brand b{color:var(--gold); font-weight:400}
.topbar .info{margin-left:auto; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.topbar .go{padding:11px 18px; border:0; border-radius:10px; background:var(--gold); color:var(--gold-ink); font:850 14px/1 var(--body); text-transform:uppercase; letter-spacing:.02em; cursor:pointer; white-space:nowrap}
.topbar .go:hover{background:var(--gold-hover)}
@media (max-width:959px){ .topbar .in{justify-content:center} }
@media (max-width:640px){ .topbar .info{display:none} .topbar .go{margin-left:auto; padding:10px 14px; font-size:13px} .brand{font-size:22px} }

/* ---------- bottoni (CTA su due righe) ---------- */
.cta{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; max-width:100%; padding:20px 34px 18px;
  border:0; border-radius:14px; cursor:pointer; text-align:center; text-decoration:none; background:var(--gold); color:var(--gold-ink); font-family:var(--body); transition:background .2s}
.cta:hover{background:var(--gold-hover)}
.cta:focus-visible{outline:3px solid #fff; outline-offset:3px}
.cta-main{font-size:19px; font-weight:850; letter-spacing:.01em; line-height:1.2; text-transform:uppercase}
.cta-sub{font-size:13.5px; font-weight:600; line-height:1.35; opacity:.82}
.cta-row{display:flex; justify-content:center; margin-top:44px}
@media (max-width:640px){ .cta{width:100%; padding:17px 18px 15px} .cta-main{font-size:min(16px,4.3vw)} .cta-sub{font-size:12.5px} }

/* ---------- card ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}

/* ---------- numeri ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (min-width:900px){ .stats{grid-template-columns:repeat(4,1fr); gap:18px} }
.stat{padding:26px 24px 22px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line)}
.stat b{display:block; font:400 clamp(52px,6vw,84px)/.9 var(--display); color:var(--gold)}
.stat span{display:block; margin-top:12px; font-size:15px; line-height:1.45; color:var(--ink)}
@media (max-width:640px){ .stat{padding:18px 16px} .stat span{font-size:13.5px} }

/* ---------- liste ---------- */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.checks li{position:relative; padding-left:36px; font-size:17px; line-height:1.55}
.checks li::before{content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%; background:var(--gold)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141005' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.checks.no li::before{background:rgba(200,88,74,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07a6b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- testimonianze ---------- */
.tgrid{display:grid; gap:18px}
.tcard{display:grid; grid-template-columns:1fr; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (min-width:760px){ .tcard{grid-template-columns:260px 1fr} }
.tcard .tmedia{position:relative; aspect-ratio:4/3; background:var(--panel-2)}
@media (min-width:760px){ .tcard .tmedia{aspect-ratio:auto; min-height:240px} }
.tcard .tmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.tcard .tbody{padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; justify-content:center; gap:14px}
.tcard .tquote{font-size:clamp(18px,1.8vw,20px); line-height:1.55; color:#fff; font-weight:500; font-style:italic}
.tcard .tfact{font-size:15px; color:var(--muted)}
.tcard .tfact strong{color:var(--gold)}
.stars{color:var(--gold); letter-spacing:3px; font-size:16px}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:10px}
.faq details{background:var(--panel); border:1px solid var(--line-soft); border-radius:14px}
.faq details[open]{border-color:var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 56px 20px 22px; position:relative; font-weight:750; font-size:18px; line-height:1.4; color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:400; color:var(--gold)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 22px 22px; color:rgba(244,239,227,.86); font-size:17px}

/* ---------- form ---------- */
.qbody{display:flex; flex-direction:column; gap:16px}
.qfield{display:flex; flex-direction:column; gap:7px; border:0; margin:0; padding:0; min-width:0}
.qlabel{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.qin{width:100%; background:var(--bg); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:15px 16px; font:500 17px/1.3 var(--body); color:#fff; outline:none}
.qin::placeholder{color:var(--dim)}
.qin:focus{border-color:var(--gold)}
/* form standard MarketX: 2 colonne da 480px, 1 su mobile */
.qgrid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:480px){ .qgrid{grid-template-columns:1fr 1fr} .qgrid .full{grid-column:1/-1} }
.qphone{display:grid; grid-template-columns:104px minmax(0,1fr); gap:8px}
select.qin{-webkit-appearance:none; appearance:none; padding-right:28px; cursor:pointer; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7C948' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center}
.qin.bad{border-color:var(--no)}
.qcontatti{display:flex; flex-direction:column; gap:16px}
.qchecks{display:flex; flex-direction:column; gap:10px}
.qerr{font-size:15px; border-radius:10px; padding:10px 14px; background:rgba(200,88,74,.14); color:#f2b3a9; border:1px solid rgba(200,88,74,.4)}
.qnext{width:100%; min-height:58px; border:0; border-radius:12px; cursor:pointer; padding:16px 22px; background:var(--gold); color:var(--gold-ink);
  font:850 17px/1.2 var(--body); letter-spacing:.01em; text-transform:uppercase; transition:background .2s}
.qnext:hover{background:var(--gold-hover)}
.qnext:focus-visible{outline:3px solid #fff; outline-offset:2px}
.qback{align-self:center; background:none; border:0; color:var(--muted); font:600 15px var(--body); text-decoration:underline; cursor:pointer; padding:4px}
.qcheck{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; cursor:pointer; color:var(--muted)}
.qcheck input{flex:0 0 auto; width:20px; height:20px; margin:1px 0 0; accent-color:var(--gold)}
.qcheck a{color:var(--gold)}
.qtrust{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:14px; color:var(--muted)}
.qtrust span::before{content:"✓ "; color:var(--gold); font-weight:800}
.qwait{font-size:15px; line-height:1.5; padding:12px 14px; border-radius:10px; background:rgba(247,201,72,.08); color:var(--ink); border:1px solid var(--line)}
.progress{display:flex; flex-direction:column; gap:8px}
.progress .ptxt{display:flex; justify-content:space-between; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.progress .bar{height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.progress .bar i{display:block; height:100%; background:var(--gold); transition:width .3s}

/* ---------- passi del percorso ---------- */
.steps{display:flex; justify-content:center; gap:8px; list-style:none; margin:0; padding:0; font-size:13.5px; font-weight:700}
.steps li{display:flex; align-items:center; gap:8px; padding:6px 13px 6px 6px; border-radius:99px; border:1px solid var(--line-soft); color:var(--dim)}
.steps li b{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.08); font-size:12px; color:var(--muted)}
.steps li.done{color:var(--muted)}
.steps li.done b{background:var(--green); color:#fff}
.steps li.now{border-color:var(--gold); color:#fff}
.steps li.now b{background:var(--gold); color:var(--gold-ink)}
@media (max-width:480px){
  .steps{gap:4px; font-size:12px}
  .steps li{padding:4px 9px 4px 4px; gap:5px}
  .steps li b{width:20px; height:20px; font-size:11px}
}

/* ---------- barra CTA fissa su mobile ---------- */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .25s}
.stickybar.show{transform:none}
.stickybar .cta{width:100%; padding:13px 16px 12px}
@media (min-width:900px){ .stickybar{display:none} }

/* ---------- footer ---------- */
footer{background:var(--bg); border-top:1px solid var(--line-soft); text-align:center; padding:48px 16px 110px}
@media (min-width:900px){ footer{padding-bottom:48px} }
footer .brand{display:inline-block; font-size:30px; margin-bottom:16px}
footer a.fl{color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin:0 12px}
footer small{display:block; margin-top:18px; font-size:13px; color:var(--dim)}

/* ---------- entrata morbida (mai contenuto nascosto di base) ---------- */
.reveal.in{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }