/* ═══════════════════════════════════════════════════════════════════
   SITO AL LAVORO — foglio di stile principale
   Identità: carta + inchiostro + disegno tecnico.
   Blu = struttura e disegno · Arancio = accento caldo · Verde = WhatsApp

   1 Token · 2 Base · 3 Utility · 4 Header · 5 Motore scroll · 6 Hero
   7 Chi siamo · 8 24 ore · 9 Lavori · 10 Come funziona · 11 Prezzo
   12 FAQ · 13 Contatti + footer · 14 Responsive · 15 Fallback
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN ─────────────────────────────────────────────────────── */
:root{
  --paper:   #f1eee7;
  --paper-2: #e8e4d9;
  --card:    #fbf9f4;

  --ink:     #16150f;
  --ink-2:   #2c2a22;
  --muted:   #6c675b;
  --dim:     #918c7e;
  --line:    rgba(22,21,15,.16);
  --line-2:  rgba(22,21,15,.09);

  --blue:    #1f3be0;
  --blue-sk: rgba(31,59,224,.30);
  --warm:    #f04e23;
  --wa:      #1eb95a;

  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-disp: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --ff-serif:'Instrument Serif', Georgia, 'Times New Roman', serif;

  --pad: clamp(20px, 5vw, 68px);
  --ease: cubic-bezier(.22,.68,.28,1);
}

/* fasce scure: stessa palette, invertita */
.dark{
  --paper:   #14130f;
  --paper-2: #1c1b16;
  --card:    #1f1e18;
  --ink:     #f4f1e8;
  --ink-2:   #ded9cc;
  --muted:   #9a9488;
  --dim:     #767063;
  --line:    rgba(244,241,232,.16);
  --line-2:  rgba(244,241,232,.09);
  --blue:    #7f95ff;
  --warm:    #ff7a4d;
  --wa:      #25d366;
  background:var(--paper);
  color:var(--ink);
}

/* ── 2. BASE ──────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--ff-disp); font-weight:800; line-height:1.02; letter-spacing:-.035em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

.ink-accent{ fill:var(--blue); }
::selection{ background:var(--warm); color:#fff; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ── 3. UTILITY ───────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:780px; }

/* etichetta tecnica: monospazio, maiuscoletto, con trattino */
.tag{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:22px;
}
.tag::before{ content:""; width:22px; height:1px; background:var(--blue); flex:0 0 auto; }
.stage--center .tag,.sec--cta .tag,.act--hero .tag{ justify-content:center; }

.btn{
  --bh:56px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding:0 24px; border-radius:5px;
  font-family:var(--ff-disp); font-weight:600; font-size:16.5px; letter-spacing:-.02em;
  white-space:nowrap; cursor:pointer;
  border:1.5px solid var(--ink);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .2s, color .2s;
}
.btn--wa{ background:var(--wa); color:#fff; box-shadow:4px 4px 0 var(--ink); }
.btn--wa:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn--wa:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }

.btn--line{ background:transparent; color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); }

.btn--sm{ --bh:42px; font-size:14.5px; padding:0 16px; box-shadow:3px 3px 0 var(--ink); }
.btn--lg{ --bh:66px; font-size:19px; padding:0 32px; box-shadow:5px 5px 0 var(--ink); }
.btn--lg:hover{ box-shadow:2px 2px 0 var(--ink); transform:translate(3px,3px); }

.wa-ico{ width:20px; height:20px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--wa-svg) center/contain no-repeat; mask:var(--wa-svg) center/contain no-repeat; }
:root{ --wa-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.17-.48-.29Z'/></svg>"); }

.sec{ position:relative; padding:clamp(80px,13vh,160px) 0; }

html.js [data-in]{ opacity:0; transform:translateY(24px); }
html.js [data-in].in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* ── 4. HEADER ────────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:13px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s, backdrop-filter .35s, border-color .35s, transform .45s var(--ease);
}
html.js .hdr{ transform:translateY(-102%); }
html.js .hdr.is-on{ transform:none; background:rgba(241,238,231,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line); }

.brand{ display:flex; align-items:center; gap:11px; }
.brand__mark{ width:30px; height:30px; color:var(--ink); flex:0 0 auto; }
.brand__mark svg{ width:100%; height:100%; }
.brand__name{ font-family:var(--ff-disp); font-weight:800; font-size:17px; letter-spacing:-.045em; }

.hdr__nav{ display:flex; gap:26px; margin-left:auto; font-size:15px; color:var(--muted); }
.hdr__nav a{ position:relative; transition:color .2s; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px; background:var(--ink); transition:right .28s var(--ease); }
.hdr__nav a:hover{ color:var(--ink); }
.hdr__nav a:hover::after{ right:0; }

/* ── 5. MOTORE SCROLL ─────────────────────────────────────────────── */
.act{ position:relative; }
.stage{ position:relative; }

html.js .act{ height:var(--h,300vh); }
html.js .stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:grid; align-content:center;
  padding:calc(80px + env(safe-area-inset-top)) var(--pad) calc(32px + env(safe-area-inset-bottom));
  overflow:clip;
}
html.js .stage--center{ justify-items:center; text-align:center; }

/* ── 6. HERO ──────────────────────────────────────────────────────── */
.act--hero{ --h:320vh; }
html.js .act--hero .stage{ grid-template-areas:"a"; }
html.js .act--hero .stage > *:not(.scrollcue){ grid-area:a; }
.act--hero .stage{ justify-items:center; align-content:center; text-align:center; }

/* carta millimetrata appena accennata + segni di taglio */
.act--hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(22,21,15,.045) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(22,21,15,.045) 1px, transparent 1px) 0 0/34px 100%;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 46%, #000 35%, transparent 78%);
          mask-image:radial-gradient(78% 62% at 50% 46%, #000 35%, transparent 78%);
}

.hero__copy{ position:relative; z-index:3; max-width:920px; justify-self:center; align-self:center; }
html.js .hero__copy{
  opacity:calc(1 - var(--p2,0));
  transform:translateY(calc(var(--p2,0) * -60px));
  pointer-events:none;
}
html.js .act--hero .stage .hero__copy{ pointer-events:auto; }

.hero__h1{ font-size:clamp(44px, 8.4vw, 104px); margin:0; }
.hero__h1 em{ position:relative; display:inline-block; }
.hero__h1 em::after{      /* evidenziatore passato a mano sotto le parole */
  content:""; position:absolute; left:-.03em; right:-.03em; bottom:.06em; height:.20em; z-index:-1;
  background:var(--warm); opacity:.92;
  transform:skewY(-.7deg);
}
.hero__sub{ margin-top:24px; font-size:clamp(16px,1.9vw,19.5px); color:var(--muted); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.hero__note{ margin-top:22px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.02em; color:var(--dim); }

/* --- dal disegno al sito --- */
.build{ position:relative; z-index:2; width:100%; max-width:1040px; justify-self:center; align-self:center; }
html.js .build{
  opacity:calc(.08 + var(--p2,0) * .92);
  transform:translateY(calc((1 - var(--p2,0)) * 32px)) scale(calc(.82 + var(--p2,0) * .18));
}

/* quote tecniche attorno al disegno */
.dim{ position:absolute; display:flex; align-items:center; color:var(--blue);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.dim i{ flex:1; height:1px; background:currentColor; position:relative; }
.dim i::before,.dim i::after{ content:""; position:absolute; width:1px; height:7px; background:currentColor; top:-3px; }
.dim i::before{ left:0; } .dim i::after{ right:0; }
.dim span{ padding:0 10px; white-space:nowrap; }
.dim--top{ top:-30px; left:0; right:0; }
.dim--left{ left:-30px; top:0; bottom:0; width:0; flex-direction:column;
  transform-origin:center; }
.dim--left i{ width:1px; height:auto; flex:1; background:currentColor; }
.dim--left i::before,.dim--left i::after{ width:7px; height:1px; left:-3px; top:auto; }
.dim--left i::before{ top:0; } .dim--left i::after{ bottom:0; top:auto; }
.dim--left span{ padding:8px 0; writing-mode:vertical-rl; }
html.js .dim{ opacity:calc(var(--p2,1) * (1 - var(--p5,0))); }

.browser{
  position:relative;
  border:1.5px solid var(--ink);
  border-radius:8px;
  background:var(--card);
  box-shadow:9px 9px 0 rgba(22,21,15,.12);
  overflow:hidden;
}
.browser__bar,.screen__bar{
  display:flex; align-items:center; gap:7px;
  height:36px; padding:0 14px;
  background:var(--paper-2); border-bottom:1.5px solid var(--ink);
}
.tl{ width:9px; height:9px; border-radius:50%; border:1.3px solid var(--ink); flex:0 0 auto; }
.browser__url,.screen__url{
  margin-left:12px; flex:1; max-width:320px;
  height:21px; border-radius:4px; border:1.3px solid var(--ink);
  background:var(--card);
  font-family:var(--ff-mono); font-size:10.5px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}

.browser__view{
  position:relative;
  container-type:inline-size;
  aspect-ratio:16/10;
  background:#fbf9f4;
  overflow:hidden;
  text-align:left;
}

/* --- livello 1: il disegno tecnico --- */
.wire{
  position:absolute; inset:0; padding:3.4cqw; display:flex; flex-direction:column; gap:3cqw;
  background:
    linear-gradient(rgba(31,59,224,.09) 1px, transparent 1px) 0 0/100% 2.6cqw,
    linear-gradient(90deg, rgba(31,59,224,.09) 1px, transparent 1px) 0 0/2.6cqw 100%,
    #eef2ff;
  clip-path:inset(calc(var(--p3,1) * 100%) 0 0 0);
}
.w{ display:block; background:rgba(31,59,224,.07); border:1.4px dashed rgba(31,59,224,.5); border-radius:.5cqw; }
.wire__note{ position:absolute; font-family:var(--ff-mono); font-size:1.05cqw; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(31,59,224,.75); }
.wire__note--a{ top:1cqw; right:3.4cqw; }
.wire__note--b{ bottom:11.5cqw; right:3.4cqw; }
.wire__nav{ display:flex; align-items:center; gap:1.6cqw; }
.w--logo{ width:11cqw; height:2.6cqw; }
.w--n{ width:5.4cqw; height:1.5cqw; }
.w--n:nth-of-type(2){ margin-left:auto; }
.w--btn{ width:8cqw; height:3cqw; border-radius:100px; }
.wire__hero{ display:flex; gap:3cqw; flex:1; }
.wire__col{ flex:1.05; display:flex; flex-direction:column; gap:1.5cqw; justify-content:center; }
.w--t1{ width:88%; height:5cqw; }
.w--t2{ width:62%; height:5cqw; }
.w--p{ width:78%; height:1.5cqw; margin-top:1cqw; }
.w--p.short{ width:54%; }
.w--cta{ width:15cqw; height:3.6cqw; border-radius:100px; margin-top:1.4cqw; }
.wire__img{ position:relative; flex:1; border:1.4px dashed rgba(31,59,224,.5); border-radius:.8cqw;
  background:rgba(31,59,224,.05); overflow:hidden; }
.wire__img::before,.wire__img::after{ content:""; position:absolute; inset:-30%; top:50%;
  border-top:1.4px dashed rgba(31,59,224,.38); }
.wire__img::before{ transform:rotate(26deg); } .wire__img::after{ transform:rotate(-26deg); }
.wire__img span{ position:absolute; left:34%; top:34%; width:32%; aspect-ratio:1; border-radius:50%;
  border:1.4px dashed rgba(31,59,224,.55); }
.wire__cards{ display:flex; gap:2cqw; }
.w--card{ flex:1; height:9cqw; border-radius:.8cqw; }

/* --- livello 2: il sito finito (chiaro) --- */
.real{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#fbf9f4; color:#16150f;
  clip-path:inset(0 0 calc(100% - var(--p3,1) * 100%) 0);
}
.real__nav{ display:flex; align-items:center; gap:2cqw; padding:2.1cqw 3.4cqw; border-bottom:1px solid rgba(22,21,15,.14); }
.real__logo{ display:flex; align-items:center; gap:1cqw; font-family:var(--ff-disp); font-weight:800; font-size:1.85cqw; letter-spacing:-.045em; }
.real__logo i{ width:2.1cqw; height:2.1cqw; border-radius:.5cqw; background:#16150f; }
.real__links{ display:flex; gap:2.2cqw; margin-left:auto; color:#6c675b; font-size:1.2cqw; font-weight:500; }
.real__btn{ padding:.9cqw 2cqw; border-radius:.4cqw; background:#16150f; color:#fbf9f4; font-weight:600; font-size:1.2cqw; }
.real__hero{ display:flex; gap:3.4cqw; padding:4cqw 3.4cqw 3cqw; flex:1; align-items:center; }
.real__col{ flex:1.08; }
.real__tag{ display:block; font-family:var(--ff-mono); font-size:1.05cqw; letter-spacing:.14em;
  text-transform:uppercase; color:#f04e23; }
.real__col h2{ font-size:4.3cqw; margin:1.5cqw 0 0; letter-spacing:-.04em; font-family:var(--ff-disp); font-weight:800; }
.real__col p{ font-size:1.3cqw; color:#6c675b; margin-top:1.3cqw; max-width:30cqw; line-height:1.6; }
.real__cta{ display:inline-block; margin-top:2.2cqw; padding:1.2cqw 2.4cqw; border-radius:.4cqw;
  background:#f04e23; color:#fff; font-weight:600; font-size:1.25cqw; }
.real__cta--2{ margin-left:.9cqw; background:transparent; border:1.3px solid rgba(22,21,15,.3); color:#16150f; }
.real__img{ position:relative; flex:1; align-self:stretch; border-radius:1cqw; overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 12%, #ffd9a8, transparent 58%),
    radial-gradient(90% 80% at 82% 88%, #f9a06a, transparent 62%),
    linear-gradient(150deg,#e8cfae,#c9a37c 78%); }
.real__badge{ position:absolute; left:1.3cqw; bottom:1.3cqw; padding:.7cqw 1.3cqw; border-radius:.4cqw;
  background:#fbf9f4; font-size:1.05cqw; font-weight:600; }
.real__cards{ display:flex; gap:1.6cqw; padding:0 3.4cqw 3.4cqw; }
.real__card{ flex:1; padding:1.7cqw; border-radius:.8cqw; border:1px solid rgba(22,21,15,.16); background:#fff; }
.real__card em{ font-family:var(--ff-mono); font-size:1.05cqw; color:#f04e23; letter-spacing:.08em; }
.real__card b{ display:block; margin-top:.9cqw; font-size:1.45cqw; font-family:var(--ff-disp); font-weight:800; letter-spacing:-.03em; }
.real__card span{ display:block; margin-top:.4cqw; font-size:1.1cqw; color:#6c675b; line-height:1.45; }

.scanline{
  position:absolute; left:0; right:0; height:2px; pointer-events:none;
  top:calc(var(--p3,1) * 100%);
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  box-shadow:0 0 16px 2px rgba(31,59,224,.5);
  opacity:min(1, calc(var(--p3,0) * 14), calc((1 - var(--p3,0)) * 14));
}

/* pillole e timbro */
.chip{
  position:absolute; z-index:4; padding:8px 14px; border-radius:4px;
  background:var(--card); border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.chip--1{ top:22%; left:0;  --tx:-58%; --k:clamp(0, calc(var(--p4,0) * 2.4), 1); }
.chip--2{ top:56%; right:0;  --tx:58%; --k:clamp(0, calc((var(--p4,0) - .35) * 2.4), 1); }
.chip{ transform:translateX(var(--tx,0)); }
html.js .chip{
  opacity:var(--k,1);
  transform:translateX(var(--tx,0)) translateY(calc((1 - var(--k,1)) * 12px)) scale(calc(.92 + var(--k,1) * .08));
}

.stamp{
  position:absolute; z-index:5; right:-3%; bottom:-7%;
  width:100px; height:100px; border-radius:50%;
  display:grid; place-content:center; text-align:center; gap:1px;
  background:var(--warm); color:#fff; border:1.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.stamp b{ font-family:var(--ff-disp); font-weight:800; font-size:28px; line-height:1; letter-spacing:-.05em; }
.stamp span{ font-family:var(--ff-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
html.js .stamp{ opacity:var(--p5,0); transform:scale(calc(.5 + var(--p5,0) * .5)) rotate(calc((1 - var(--p5,0)) * -20deg)); }

.scrollcue{
  position:absolute; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:6;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.scrollcue i{ width:1px; height:30px; background:linear-gradient(transparent,var(--dim)); }
html.js .scrollcue{ opacity:calc(1 - var(--p1,0)); }

/* ── 7. CHI SIAMO ─────────────────────────────────────────────────── */
.act--manifesto{ --h:200vh; }
.act--manifesto .stage{ max-width:1120px; margin-inline:auto; }

.reveal-text{
  font-family:var(--ff-disp); font-weight:800;
  font-size:clamp(30px, 6vw, 74px);
  line-height:1.06; letter-spacing:-.045em; max-width:15ch;
  margin-inline:auto; text-wrap:balance;
}
html.js .reveal-text .wd{ opacity:clamp(.12, calc((var(--wp,1) * (var(--n) + 5) - var(--i)) * .8), 1); }
.reveal-text .wd.hi{ color:var(--warm); }

.manifesto__after{
  margin-top:clamp(26px,4vh,42px);
  font-family:var(--ff-serif); font-style:italic;
  font-size:clamp(19px,2.6vw,30px); color:var(--muted);
}
html.js .manifesto__after{ opacity:var(--p2,1); transform:translateY(calc((1 - var(--p2,0)) * 14px)); }

/* ── 8. 24 ORE ────────────────────────────────────────────────────── */
.act--speed{ --h:200vh; }
.act--speed .stage{ max-width:820px; margin-inline:auto; }

.clock{ position:relative; width:min(300px,62vw); aspect-ratio:1; display:grid; place-items:center;
  margin-bottom:clamp(24px,4vh,44px); }
.clock__ring{ position:absolute; inset:0; transform:rotate(-90deg); overflow:visible; }
.clock__track{ fill:none; stroke:var(--line); stroke-width:5; }
.clock__fill{
  fill:none; stroke:var(--warm); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:578; stroke-dashoffset:calc(578 - var(--p2,1) * 578);
  filter:drop-shadow(0 0 14px rgba(255,122,77,.75));
}
.clock__num span{
  font-family:var(--ff-disp); font-weight:800; letter-spacing:-.06em;
  font-size:clamp(76px,17vw,132px); line-height:1; color:var(--ink);
}

.speed__h2{ font-size:clamp(30px,6vw,66px); }
html.js .speed__h2{ opacity:var(--p3,1); transform:translateY(calc((1 - var(--p3,0)) * 18px)); }

.speed__note{ margin-top:18px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--dim); }
html.js .speed__note{ opacity:var(--p4,1); }

/* ── 9. LAVORI ────────────────────────────────────────────────────── */
.act--works{ --h:620vh; }
html.js .act--works .stage{
  align-content:stretch;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:clamp(10px,1.8vh,22px);
  justify-items:center;
}

.works__head{ width:100%; max-width:900px; margin-inline:auto; text-align:center; }
.works__head h2{ font-size:clamp(21px,2.9vw,36px); text-wrap:balance; }
.works__head h2 em{ color:var(--warm); }
.works__sub{ margin-top:8px; font-size:14px; color:var(--muted); }

.screen{
  position:relative; width:min(1020px,100%); margin-inline:auto;
  align-self:center; max-height:100%;      /* alto quanto serve, mai più della riga */
  display:flex; flex-direction:column; min-height:0;
  border:1.5px solid var(--ink); border-radius:8px; overflow:hidden;
  background:var(--card);
  box-shadow:9px 9px 0 rgba(0,0,0,.28);
}
.screen__bar{ flex:0 0 auto; }
.screen__url{ font-size:10.5px; }
/* proporzione preferita: si vede tutto il sito. Se lo schermo è basso, si accorcia. */
.screen__view{
  position:relative; flex:1 1 auto; min-height:120px; overflow:hidden; background:#fff;
  aspect-ratio:1200/1560;
}

/* Cambio sito: il nuovo viene "stampato" dall'alto sopra al vecchio,
   con la stessa riga di luce che disegna il sito nel hero.
   Durante la sosta il sito scorre dentro allo schermo: si vede tutto. */
.shot{ position:absolute; inset:0; overflow:hidden; }
html.js .shot{ clip-path:inset(0 0 calc((1 - var(--e,1)) * 100%) 0); }
html.js .shot.is-off{ visibility:hidden; }

/* il sito vecchio si spegne piano mentre viene coperto */
html.js .shot::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#0d0c09; opacity:calc(var(--l,0) * .38);
}
/* velo di inchiostro fresco subito sopra alla riga di stampa */
html.js .shot::before{
  content:""; position:absolute; left:0; right:0; height:60px; z-index:3; pointer-events:none;
  bottom:calc((1 - var(--e,1)) * 100%);
  background:linear-gradient(180deg, transparent, rgba(31,59,224,.12));
  opacity:min(1, calc(var(--e,1) * 9), calc((1 - var(--e,1)) * 9));
}

/* la riga di luce che scende mentre stampa il sito nuovo */
.screen__scan{
  position:absolute; left:0; right:0; height:3px; z-index:20; pointer-events:none;
  top:calc(var(--sl,1) * 100%);
  background:linear-gradient(90deg, transparent, var(--blue) 16%, #e8edff 50%, var(--blue) 84%, transparent);
  box-shadow:0 0 22px 5px rgba(127,149,255,.75), 0 0 60px 14px rgba(127,149,255,.28);
  opacity:min(1, calc(var(--sl,1) * 12), calc((1 - var(--sl,1)) * 12));
}

.scaler{
  width:1200px; transform-origin:top left;
  /* --sy = quanto è sceso (0→1) · --ovf = di quanti px può scendere */
  transform:translate3d(0, calc(var(--sy,0) * var(--ovf,0) * -1px), 0) scale(var(--demo-scale,1));
}

.works__foot{ display:flex; align-items:center; gap:24px; width:min(1020px,100%); margin-inline:auto; }
.cap{ flex:1; min-width:0; }
.cap b{ display:block; font-family:var(--ff-disp); font-weight:800; font-size:20px; letter-spacing:-.04em; }
.cap span{ display:block; font-family:var(--ff-serif); font-style:italic;
  font-size:16px; color:var(--muted); margin-top:2px; }

/* al cambio sito la didascalia rientra dal basso, il claim un attimo dopo */
@keyframes cap-swap{ from{ opacity:0; transform:translateY(9px); } }
html.js .cap.swap b{ animation:cap-swap .5s var(--ease) both; }
html.js .cap.swap span{ animation:cap-swap .5s .08s var(--ease) both; }

/* nella barra: favicon col colore del sito attivo + cursore che scrive */
.screen__url::before{
  content:""; width:7px; height:7px; border-radius:2px; flex:0 0 auto;
  margin-right:7px; background:var(--acc, var(--dim));
  transition:background .4s;
}
.screen__url.typing::after{
  content:""; width:5px; height:11px; margin-left:3px; flex:0 0 auto;
  background:var(--acc, var(--warm));
  animation:caret .6s steps(2, start) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }

.works__dots{ display:flex; gap:6px; flex:0 0 auto; }
.works__dots li{
  width:22px; height:3px; border-radius:2px; background:var(--line);
  transition:width .45s var(--ease), background .45s;
}
.works__dots li.on{ width:44px; background:var(--acc, var(--warm)); }

.works__note{ width:min(1020px,100%); margin-inline:auto;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.05em; color:var(--dim); }

/* ── 10. COME FUNZIONA ────────────────────────────────────────────── */
.sec__h2{ font-size:clamp(32px,5.6vw,64px); margin-bottom:clamp(40px,6vh,72px); }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1.5px solid var(--ink); }
.steps li{
  position:relative; padding:32px 30px 40px;
  border-bottom:1.5px solid var(--ink); border-right:1px solid var(--line);
  transition:background .3s;
}
.steps li:last-child{ border-right:0; }
.steps li:hover{ background:var(--card); }
html.js .steps li[data-in]{ transition:opacity .8s var(--ease), transform .8s var(--ease), background .3s; }
html.js .steps li:nth-child(2){ transition-delay:.1s; }
html.js .steps li:nth-child(3){ transition-delay:.2s; }
.steps__n{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm); }
.steps h3{ font-size:24px; margin:16px 0 12px; }
.steps p{ color:var(--muted); font-size:15.5px; line-height:1.6; }

/* ── 11. PREZZO ───────────────────────────────────────────────────── */
.act--price{ --h:190vh; }
.act--price .stage{ max-width:820px; margin-inline:auto; }

.price__num{
  font-family:var(--ff-disp); font-weight:800; letter-spacing:-.07em; line-height:.86;
  font-size:clamp(120px,27vw,260px); color:var(--ink);
}
.price__num i{ font-style:normal; font-size:.4em; letter-spacing:-.03em; color:var(--warm); }
html.js .price__num{ opacity:var(--p1,1); transform:scale(calc(.76 + var(--p1,0) * .24)); }

.price__lead{ margin-top:22px; max-width:520px; font-size:clamp(17px,2.2vw,21px); color:var(--muted); line-height:1.5; }
.price__lead b{ color:var(--ink); font-weight:600; }
html.js .price__lead{ opacity:var(--p2,1); transform:translateY(calc((1 - var(--p2,0)) * 16px)); }

.act--price .btn{ margin-top:34px; }
html.js .act--price .btn{ opacity:var(--p3,1); transform:translateY(calc((1 - var(--p3,0)) * 16px)); }

/* ── 12. FAQ ──────────────────────────────────────────────────────── */
.sec--faq{ background:var(--paper-2); }
.faq{ border-top:1.5px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:1.5px solid var(--ink); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--ff-disp); font-weight:600; font-size:clamp(17.5px,2.2vw,22px); letter-spacing:-.03em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--warm); }
.faq summary::after,.faq summary::before{
  content:""; position:absolute; right:4px; top:50%; background:var(--warm);
  width:14px; height:2px; transition:transform .28s var(--ease);
}
.faq summary::before{ transform:translateY(-50%) rotate(90deg); }
.faq summary::after{ transform:translateY(-50%); }
.faq details[open] summary::before{ transform:translateY(-50%) rotate(0deg); }
.faq details p{ padding:0 10% 26px 0; color:var(--muted); font-size:16px; line-height:1.65; }

/* ── 13. CONTATTI + FOOTER ────────────────────────────────────────── */
.sec--cta{ text-align:center; padding-bottom:clamp(90px,14vh,170px); }
.cta__h2{ font-size:clamp(38px,7.4vw,86px); }
.cta__p{ margin:22px auto 36px; max-width:480px; color:var(--muted); font-size:17px; }
html.js .cta__p[data-in]{ transition-delay:.08s; }
html.js .sec--cta .btn[data-in]{ transition-delay:.16s; }
html.js .cta__note[data-in]{ transition-delay:.24s; }
.cta__note{ margin-top:22px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; color:var(--dim); }

.ftr{ border-top:1px solid var(--line); padding:46px 0 calc(48px + env(safe-area-inset-bottom)); }
.ftr__tag{ margin-top:16px; color:var(--muted); font-size:15px; }
.ftr__legal{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; color:var(--dim); }

.fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90;
  width:56px; height:56px; border-radius:50%; display:none; place-items:center;
  background:#1eb95a; color:#fff; border:1.5px solid #16150f; box-shadow:3px 3px 0 #16150f;
  transition:transform .25s var(--ease), opacity .25s, box-shadow .25s;
}
.fab:active{ transform:translate(3px,3px); box-shadow:0 0 0 #16150f; }
.fab .wa-ico{ width:27px; height:27px; }
html.js .fab{ opacity:0; transform:scale(.6); pointer-events:none; }
html.js .fab.is-on{ opacity:1; transform:none; pointer-events:auto; }

/* ── 14. RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-right:0; padding:26px 0 32px; }
}

@media (max-width: 820px){
  body{ font-size:16px; }
  .hdr__nav{ display:none; }
  .hdr{ gap:12px; }
  .hdr .btn--sm{ margin-left:auto; }
  .fab{ display:grid; }

  /* sul telefono la barra si vede solo in cima: appena scorri sparisce,
     tanto il pulsante WhatsApp resta sempre in basso a destra */
  html.js .hdr.is-on{ transform:translateY(-102%); }
  html.js .hdr.is-top{
    transform:none; background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  }

  html.js .stage{ padding-top:calc(74px + env(safe-area-inset-top)); }

  .act--hero{ --h:300vh; }
  .act--hero .stage{ padding-inline:16px; }
  .build{ max-width:none; }
  /* più alto, così il disegno riempie lo schermo del telefono */
  .browser__view{ aspect-ratio:1/1; }
  .dim{ display:none; }
  .browser{ box-shadow:5px 5px 0 rgba(22,21,15,.12); }
  .chip{ font-size:10px; padding:6px 10px; box-shadow:2px 2px 0 var(--ink); }
  .chip--1{ top:auto; bottom:calc(100% - 14px); left:8px; --tx:0; }
  .chip--2{ top:auto; bottom:-14px; left:8px; right:auto; --tx:0; }
  .stamp{ width:66px; height:66px; right:-3%; bottom:-9%; box-shadow:3px 3px 0 var(--ink); }
  .stamp b{ font-size:19px; } .stamp span{ font-size:7.5px; letter-spacing:.09em; }

  .act--works{ --h:500vh; }
  .screen{ width:100%; box-shadow:5px 5px 0 rgba(0,0,0,.3); }
  .screen__bar{ height:30px; padding:0 10px; }
  .screen__url{ font-size:9px; height:18px; margin-left:8px; }
  .works__head h2{ font-size:clamp(20px,5vw,30px); }
  .works__sub{ display:none; }
  .cap b{ font-size:17px; }
  .cap span{ font-size:14px; }
  .works__dots li{ width:16px; } .works__dots li.on{ width:32px; }
  .works__note{ padding-right:66px; }

  .clock{ width:min(230px,56vw); }
}

@media (max-width: 560px){
  .hero__cta .btn{ width:100%; }
  .works__dots li:not(.on){ display:none; }
  .works__foot{ flex-direction:row; align-items:center; }
  .works__dots{ margin-left:auto; }
}

/* ── 15. FALLBACK (niente JS / motion ridotto) ────────────────────── */
html:not(.js) .act{ padding:70px 0; }
html:not(.js) .stage{ display:grid; gap:26px; justify-items:center; text-align:center;
  max-width:1200px; margin-inline:auto; padding-inline:var(--pad); }
html:not(.js) .wire,html:not(.js) .scanline,html:not(.js) .scrollcue,html:not(.js) .dim,
html:not(.js) .screen__scan{ display:none; }
html:not(.js) .real{ position:relative; inset:auto; clip-path:none; }
html:not(.js) .browser__view{ aspect-ratio:auto; }
html:not(.js) .screen__view{ height:600px; }
html:not(.js) .hdr{ position:static; }

@media (prefers-reduced-motion: reduce){
  html.js .act{ height:auto; padding:70px 0; }
  html.js .stage{ position:static; height:auto; display:grid; gap:26px; overflow:visible;
    max-width:1200px; margin-inline:auto; }
  html.js .hero__copy,html.js .build,html.js .browser,html.js .chip,html.js .stamp,
  html.js .manifesto__after,html.js .speed__h2,html.js .speed__note,html.js .price__num,
  html.js .price__lead,html.js .act--price .btn,html.js .shot,html.js .reveal-text .wd,
  html.js [data-in],html.js .dim{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  html.js .shot{ position:relative; inset:auto; clip-path:none; visibility:visible; }
  html.js .shot + .shot{ display:none; }
  html.js .screen__view{ height:600px; flex:0 0 auto; }
  html.js .act--works .stage{ grid-template-rows:none; }
  html.js .wire,html.js .scanline,html.js .scrollcue,html.js .screen__scan{ display:none; }
  html.js .real{ clip-path:none; }
  html.js .hdr{ transform:none; background:rgba(241,238,231,.94); backdrop-filter:blur(12px); }
  .clock__fill{ stroke-dashoffset:0; }
  .btn:hover{ transform:none; }
}