/* ============================================================================
   EXCLUSIWE — page-fammiilsito.css
   CSS specifico della pagina "Fammi il Sito". Caricato dopo style.css.
   1. Sezione narrativa "Come nasce il tuo sito" — palco 3D + 5 stati
   2. Il mini-sito: skeleton condiviso fra gli stati
   3. Pannello codice, telefono, badge live
   4. Passi di testo a lato
   5. Fascia dispositivi (desktop + tablet + telefono in prospettiva)
   6. Responsive e risparmio movimento
   7. Risparmio movimento
   8. IDENTITÀ DI PAGINA — fondale petrolio #0A1620
   9. Il perno "24 ORE" — striscia, filigrana, blocco Sprint
  10. Voce del cliente — le frasi in prima persona
  11. Lavori realizzati — tre progetti consegnati
  12. WhatsApp in chiusura
  13. Responsive e risparmio movimento dei blocchi 8-12
   ============================================================================ */

/* ─────────────────────────────────────────────
   1. SEZIONE NARRATIVA
   ───────────────────────────────────────────── */
.fs-story{ background:var(--bg-2); }
.fs-story::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 26% 34%, rgba(92,243,164,.055), transparent 68%),
    radial-gradient(620px 400px at 84% 72%, rgba(142,123,255,.045), transparent 70%);
}
.fs-story > .wrap{ position:relative; z-index:2; }

.fs-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:0 52px;
  align-items:start;
  position:relative;
  z-index:2;
}

/* Il palco: resta fermo mentre i passi scorrono */
.fs-stage{
  align-self:start;
  justify-content:center;
  overflow:visible;          /* il 3D deve poter respirare oltre la colonna */
  perspective:1600px;
  perspective-origin:52% 46%;
}
.fs-stage-inner{
  position:relative;
  width:100%;
  transform-style:preserve-3d;
}
.fs-frame{position:relative;transform-style:preserve-3d}

/* Barra di avanzamento sotto al palco */
.fs-rail{margin-top:30px;display:flex;flex-direction:column;gap:11px}
.fs-rail-track{
  position:relative;display:block;height:2px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.fs-rail-track i{
  position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:2px;
  background:linear-gradient(90deg, rgba(92,243,164,.35), var(--green));
  transition:width 1s var(--ease);
}
[data-stage][data-active="1"] .fs-rail-track i{width:40%}
[data-stage][data-active="2"] .fs-rail-track i{width:60%}
[data-stage][data-active="3"] .fs-rail-track i{width:80%}
[data-stage][data-active="4"] .fs-rail-track i{width:100%}
.fs-rail-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.fs-rail-labels span{
  font-family:var(--font-ui);font-size:.6rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;text-align:center;
  color:var(--text-faint);transition:color .6s var(--ease);
}
[data-stage][data-active="0"] .fs-rail-labels span:nth-child(1),
[data-stage][data-active="1"] .fs-rail-labels span:nth-child(2),
[data-stage][data-active="2"] .fs-rail-labels span:nth-child(3),
[data-stage][data-active="3"] .fs-rail-labels span:nth-child(4),
[data-stage][data-active="4"] .fs-rail-labels span:nth-child(5){color:var(--green)}

/* Alone dietro al palco: cambia colore col racconto */
.fs-halo{
  position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1/.72;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.08), transparent 72%);
  filter:blur(46px);opacity:.55;
  transition:background 1s var(--ease), opacity 1s var(--ease);
  pointer-events:none;
}
[data-stage][data-active="2"] .fs-halo,
[data-stage][data-active="3"] .fs-halo{
  background:radial-gradient(closest-side, rgba(142,123,255,.20), transparent 72%);opacity:.8;
}
[data-stage][data-active="4"] .fs-halo{
  background:radial-gradient(closest-side, rgba(92,243,164,.26), transparent 72%);opacity:1;
}

/* ── La finestra del browser ── */
.fs-browser{
  position:relative;
  width:100%;
  aspect-ratio:16/10.2;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(20,20,28,.96), rgba(9,9,14,.98));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
  transform-style:preserve-3d;
  transform:rotateY(10deg) rotateX(6deg) translateZ(-30px);
  transition:transform 1.05s var(--ease), box-shadow 1.05s var(--ease),
             border-color .8s var(--ease);
  will-change:transform;
}
[data-stage][data-active="1"] .fs-browser{ transform:rotateY(7.5deg) rotateX(4deg) translateZ(-14px); }
[data-stage][data-active="2"] .fs-browser{ transform:rotateY(4.5deg) rotateX(2.5deg); }
[data-stage][data-active="3"] .fs-browser{
  transform:rotateY(-7deg) rotateX(2deg) translateX(30px) translateZ(-10px);
}
[data-stage][data-active="4"] .fs-browser{
  transform:rotateY(0deg) rotateX(0deg) translateX(-26px) scale(1.02);
  border-color:var(--green-line);
  box-shadow:0 46px 100px -40px rgba(0,0,0,.95), 0 0 60px -22px rgba(92,243,164,.45);
}

/* Barra della finestra */
.fs-bar{
  position:relative;z-index:4;
  display:flex;align-items:center;gap:7px;
  padding:0 12px;height:34px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid var(--line);
}
.fs-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none;
  transition:background .7s var(--ease)}
[data-stage][data-active="4"] .fs-dot:nth-child(3){background:var(--green)}
.fs-url{
  flex:1;margin-left:8px;height:19px;
  display:flex;align-items:center;gap:6px;
  padding:0 9px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  font-family:var(--font-ui);font-size:.58rem;letter-spacing:.02em;
  color:var(--text-faint);
  transition:border-color .7s var(--ease), color .7s var(--ease);
}
.fs-url i{font-size:.66rem;line-height:1}
.fs-url-t::after{content:"appunti — bozza"}
[data-stage][data-active="1"] .fs-url-t::after{content:"struttura / wireframe"}
[data-stage][data-active="2"] .fs-url-t::after{content:"design — anteprima"}
[data-stage][data-active="3"] .fs-url-t::after{content:"localhost:8080"}
[data-stage][data-active="4"] .fs-url-t::after{content:"iltuodominio.it"}
[data-stage][data-active="4"] .fs-url{border-color:var(--green-line);color:var(--green)}

.fs-live{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:2px 8px;border-radius:999px;
  font-family:var(--font-ui);font-size:.53rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--green-soft);border:1px solid var(--green-line);color:var(--green);
  opacity:0;transform:translateX(8px) scale(.9);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.fs-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:fs-blink 1.8s infinite}
[data-stage][data-active="4"] .fs-live{opacity:1;transform:none}
@keyframes fs-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Schermo: i 5 stati sono sovrapposti */
.fs-screen{position:absolute;inset:34px 0 0 0;overflow:hidden}
.fs-state{
  position:absolute;inset:0;
  opacity:0;filter:blur(7px);
  transform:translateY(16px) scale(.982);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  pointer-events:none;
}
[data-stage] .fs-state-0,
[data-stage][data-active="0"] .fs-state-0,
[data-stage][data-active="1"] .fs-state-1,
[data-stage][data-active="2"] .fs-state-2,
[data-stage][data-active="3"] .fs-state-3,
[data-stage][data-active="4"] .fs-state-4{
  opacity:1;filter:none;transform:none;
}
[data-stage][data-active="1"] .fs-state-0,
[data-stage][data-active="2"] .fs-state-0,
[data-stage][data-active="3"] .fs-state-0,
[data-stage][data-active="4"] .fs-state-0{
  opacity:0;filter:blur(7px);transform:translateY(-16px) scale(.982);
}

/* ─────────────────────────────────────────────
   2. STATO 0 — L'IDEA: foglio nero e annotazioni
   ───────────────────────────────────────────── */
.fs-idea{position:absolute;inset:0;padding:16px 18px}
.fs-idea::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px);
  background-size:24px 24px;
}
.fs-scribble{
  position:absolute;
  border:1.4px dashed rgba(255,255,255,.26);
  border-radius:6px;
}
.fs-scribble.s1{left:7%;top:14%;width:34%;height:24%;transform:rotate(-1.6deg)}
.fs-scribble.s2{left:52%;top:11%;width:36%;height:34%;transform:rotate(1.2deg);border-radius:10px}
.fs-scribble.s3{left:10%;top:52%;width:28%;height:28%;transform:rotate(1.8deg)}
.fs-scribble.s4{left:46%;top:56%;width:42%;height:22%;transform:rotate(-1deg);
  border-color:rgba(92,243,164,.34)}
.fs-note{
  position:absolute;
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;letter-spacing:-.005em;
  color:var(--text);white-space:nowrap;
}
.fs-note.n1{left:8.5%;top:20%}
.fs-note.n2{left:54%;top:17%}
.fs-note.n3{left:11.5%;top:60%}
.fs-note.n4{left:47.5%;top:62%;color:var(--green)}
.fs-note.n5{left:8%;top:87%;color:var(--text-faint);font-size:.55rem}
.fs-note small{display:block;color:var(--text-faint);font-size:.56rem;font-weight:400;margin-top:3px}
.fs-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fs-arrows path{
  fill:none;stroke:rgba(255,255,255,.30);stroke-width:1.2;
  stroke-dasharray:4 5;stroke-linecap:round;
}
.fs-arrows path.acc{stroke:rgba(92,243,164,.45)}
.fs-caret{
  position:absolute;left:8%;top:92%;width:1.5px;height:12px;background:var(--green);
  animation:fs-blink 1.1s steps(1) infinite;
}

/* ─────────────────────────────────────────────
   3. IL MINI-SITO — skeleton condiviso (stati 1-4)
   ───────────────────────────────────────────── */
.fs-site{
  position:absolute;inset:0;
  padding:13px 14px;
  display:flex;flex-direction:column;gap:9px;
}
.fs-s-nav{display:flex;align-items:center;gap:7px;height:22px;flex:none}
.fs-s-nav .fs-sp{flex:1}
.fs-s-hero{flex:1;min-height:0;display:grid;grid-template-columns:1.18fr .82fr;gap:11px}
.fs-s-copy{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.fs-s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;height:23%;flex:none}
.fs-s-card{display:flex;flex-direction:column;gap:5px;padding:7px}
.fs-s-foot{height:12px;flex:none}

/* Blocchi generici */
.fs-b{border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.fs-b.h6{height:6px}.fs-b.h8{height:8px}.fs-b.h10{height:10px}.fs-b.h12{height:12px}
.fs-b.h14{height:14px}.fs-b.h18{height:18px}
.fs-b.w30{width:30%}.fs-b.w45{width:45%}.fs-b.w55{width:55%}
.fs-b.w70{width:70%}.fs-b.w85{width:85%}.fs-b.w100{width:100%}
.fs-b.sq{width:16px;height:16px;border-radius:5px;flex:none}
.fs-b.pill{border-radius:999px}

/* ── Stato 1: WIREFRAME — solo grigi, niente colore ── */
.is-wire .fs-b{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.is-wire .fs-img{
  border:1px dashed rgba(255,255,255,.28);border-radius:5px;
  background:rgba(255,255,255,.02);
}
/* la croce del segnaposto immagine, tipica del wireframe */
.is-wire .fs-img::before,
.is-wire .fs-img::after{
  content:"";position:absolute;left:-16%;top:50%;
  width:132%;height:1px;background:rgba(255,255,255,.24);
}
.is-wire .fs-img::before{transform:rotate(34deg)}
.is-wire .fs-img::after{transform:rotate(-34deg)}
.is-wire .fs-s-card{border:1px dashed rgba(255,255,255,.22);border-radius:5px}
.is-wire .fs-tag{
  position:absolute;right:14px;bottom:12px;
  font-family:var(--font-ui);font-size:.55rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);
}

/* ── Stato 2: DESIGN — entrano colore e tipografia ── */
.is-design .fs-b, .is-dev .fs-b, .is-live .fs-b{
  border-color:transparent;background:rgba(255,255,255,.13);
}
.is-design .fs-b.dim, .is-dev .fs-b.dim, .is-live .fs-b.dim{background:rgba(255,255,255,.075)}
.is-design .fs-b.bright, .is-dev .fs-b.bright, .is-live .fs-b.bright{background:rgba(255,255,255,.62)}
.fs-img{
  border-radius:6px;
  background:linear-gradient(150deg, rgba(92,243,164,.30), rgba(142,123,255,.28) 62%, rgba(255,255,255,.05));
  position:relative;overflow:hidden;
}
.is-wire .fs-img{background:none}
.fs-cta{
  height:15px;width:40%;border-radius:999px;
  background:var(--green);
  box-shadow:0 6px 18px -6px rgba(92,243,164,.7);
}
.is-design .fs-s-card, .is-dev .fs-s-card, .is-live .fs-s-card{
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
}
.fs-ic{width:14px;height:14px;border-radius:4px;background:var(--green-soft);
  border:1px solid var(--green-line);flex:none}
.fs-s-card:nth-child(2) .fs-ic{background:rgba(142,123,255,.14);border-color:rgba(142,123,255,.34)}
.fs-swatches{
  position:absolute;right:13px;bottom:13px;display:flex;gap:5px;
}
.fs-sw{width:11px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.14)}
.fs-sw.g{background:var(--green)}
.fs-sw.v{background:var(--violet)}
.fs-sw.w{background:#f4f5f7}
.fs-sw.d{background:#111119}
.fs-type{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-display);font-size:.6rem;font-weight:600;letter-spacing:-.02em;
  color:var(--text-faint);
}

/* ── Stato 3: SVILUPPO — guide di costruzione ── */
.is-dev .fs-guides{position:absolute;inset:0;pointer-events:none;z-index:2}
.is-dev .fs-guides span{
  position:absolute;
  background:repeating-linear-gradient(var(--gd,180deg),
    rgba(92,243,164,.55) 0 4px, transparent 4px 9px);
}
.is-dev .fs-guides span:nth-child(1){left:14px;top:0;bottom:0;width:1px}
.is-dev .fs-guides span:nth-child(2){right:14px;top:0;bottom:0;width:1px}
.is-dev .fs-guides span:nth-child(3){left:0;right:0;top:38px;height:1px;--gd:90deg}
.is-dev .fs-guides span:nth-child(4){left:0;right:0;bottom:34px;height:1px;--gd:90deg}
.is-dev .fs-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%);
  transform:translateX(-100%);
  animation:fs-sweep 2.4s var(--ease) infinite;
}
@keyframes fs-sweep{to{transform:translateX(100%)}}

/* ── Stato 4: ONLINE ── */
.is-live .fs-cta{box-shadow:0 8px 24px -6px rgba(92,243,164,.85)}
.fs-badge{
  position:absolute;right:13px;bottom:13px;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  background:rgba(5,5,7,.7);border:1px solid var(--green-line);
  font-family:var(--font-ui);font-size:.53rem;font-weight:600;color:var(--green);
}
.fs-badge i{font-size:.62rem}

/* ─────────────────────────────────────────────
   3b. PANNELLO CODICE — compare in fase di sviluppo
   ───────────────────────────────────────────── */
.fs-code{
  position:absolute;left:-46px;top:50%;
  width:176px;height:72%;
  transform:translateY(-50%) translateX(-26px) rotateY(16deg);
  transform-origin:left center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(14,14,20,.97), rgba(8,8,12,.97));
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  z-index:3;
}
[data-stage][data-active="3"] .fs-code{ opacity:1;transform:translateY(-50%) translateX(0) rotateY(15deg); }
[data-stage][data-active="4"] .fs-code{
  opacity:.13;transform:translateY(-50%) translateX(-34px) translateZ(-90px) rotateY(22deg) scale(.92);
}
.fs-code::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22px;z-index:2;
  background:linear-gradient(180deg, rgba(10,10,15,1), transparent);
}
.fs-code::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:2;
  background:linear-gradient(0deg, rgba(10,10,15,1), transparent);
}
.fs-code-roll{
  display:flex;flex-direction:column;gap:3px;padding:10px 11px;
  animation:fs-roll 16s linear infinite;
}
@keyframes fs-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.fs-cl{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.5rem;line-height:1.55;white-space:nowrap;color:var(--text-faint);
}
.fs-cl .k{color:var(--violet)}
.fs-cl .a{color:var(--green)}
.fs-cl .s{color:#b9bcc9}
.fs-cl.i1{padding-left:8px}
.fs-cl.i2{padding-left:16px}

/* ─────────────────────────────────────────────
   3c. IL TELEFONO — entra quando il sito va online
   ───────────────────────────────────────────── */
.fs-phone{
  position:absolute;right:-30px;bottom:-3%;
  width:116px;aspect-ratio:9/18.6;
  border:1.5px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg, rgba(20,20,28,.98), rgba(8,8,12,.99));
  box-shadow:0 30px 62px -28px rgba(0,0,0,.95);
  overflow:hidden;z-index:5;
  opacity:0;pointer-events:none;
  transform:translateZ(120px) translateY(26px) rotateY(-16deg) scale(.9);
  transform-origin:right bottom;
  transition:opacity .85s var(--ease), transform .95s var(--ease);
}
[data-stage][data-active="4"] .fs-phone{
  opacity:1;transform:translateZ(120px) translateY(0) rotateY(-15deg) scale(1);
  border-color:var(--green-line);
  box-shadow:0 34px 66px -26px rgba(0,0,0,.95), 0 0 44px -20px rgba(92,243,164,.5);
}
.fs-phone::before{
  content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:28px;height:4px;border-radius:999px;background:rgba(255,255,255,.14);z-index:3;
}
.fs-ph-in{position:absolute;inset:13px 6px 8px;display:flex;flex-direction:column;gap:5px}
.fs-ph-in .fs-img{flex:none;height:34%}
.fs-ph-in .fs-b{background:rgba(255,255,255,.14);border-color:transparent}
.fs-ph-in .fs-b.bright{background:rgba(255,255,255,.6)}
.fs-ph-in .fs-b.dim{background:rgba(255,255,255,.08)}
.fs-ph-in .fs-cta{width:100%;height:11px;margin-top:auto}

/* ─────────────────────────────────────────────
   4. I PASSI DI TESTO
   ───────────────────────────────────────────── */
.fs-story .story-steps{padding-left:4px}
.fs-step-card{
  position:relative;
  padding:26px 0 26px 26px;
  border-left:1px solid var(--line);
  transition:border-color .7s var(--ease);
}
.fs-step-card::before{
  content:"";position:absolute;left:-3px;top:34px;width:5px;height:5px;border-radius:50%;
  background:var(--line-2);
  transition:background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.story-step.on .fs-step-card{border-left-color:var(--green-line)}
.story-step.on .fs-step-card::before{
  background:var(--green);transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(92,243,164,.13);
}
.fs-step-n{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);
  transition:color .6s var(--ease);
}
.fs-step-n b{
  font-variant-numeric:tabular-nums;font-size:.95rem;letter-spacing:-.02em;color:var(--text-dim);
  transition:color .6s var(--ease);
}
.story-step.on .fs-step-n{color:var(--green)}
.story-step.on .fs-step-n b{color:var(--green)}
.fs-step-card h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.35vw,2.05rem);
  letter-spacing:-.038em;line-height:1.04;
  margin:14px 0 12px;text-wrap:balance;
}
.fs-step-card p{
  color:var(--text-dim);font-size:1rem;max-width:44ch;text-wrap:pretty;margin:0;
}

/* ─────────────────────────────────────────────
   5. FASCIA DISPOSITIVI
   ───────────────────────────────────────────── */
.fs-devices{
  position:relative;z-index:2;
  margin-top:92px;padding-top:64px;
  border-top:1px solid var(--line);
}
.fs-dev-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:46px;
}
.fs-dev-head h3{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.5vw,2.1rem);letter-spacing:-.038em;line-height:1.06;
  margin-top:14px;max-width:20ch;text-wrap:balance;
}
.fs-dev-head p{color:var(--text-dim);max-width:38ch;font-size:.98rem;text-wrap:pretty}
.fs-dev-row{
  display:flex;align-items:flex-end;justify-content:center;gap:0;
  perspective:1700px;perspective-origin:50% 62%;
  padding:10px 0 20px;
}
.fs-dev{
  position:relative;flex:none;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(20,20,28,.97), rgba(8,8,12,.99));
  box-shadow:0 44px 90px -46px rgba(0,0,0,.95);
  overflow:hidden;
  transition:transform .8s var(--ease), border-color .6s var(--ease);
}
.fs-dev-desk{
  width:min(56%,600px);aspect-ratio:16/10;border-radius:var(--r);
  transform:rotateY(15deg) rotateX(3deg) translateZ(-40px);
  z-index:1;
}
.fs-dev-tab{
  width:min(24%,240px);aspect-ratio:3/4;border-radius:var(--r-sm);
  margin-left:-3.5%;
  transform:rotateY(9deg) rotateX(2deg) translateZ(20px);
  z-index:2;
}
.fs-dev-phone{
  width:min(13%,134px);aspect-ratio:9/18.6;border-radius:18px;
  margin-left:-3%;
  transform:rotateY(2deg) translateZ(76px);
  z-index:3;border-color:var(--green-line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95), 0 0 52px -26px rgba(92,243,164,.4);
}
.fs-dev .fs-bar{height:24px;padding:0 9px;gap:5px}
.fs-dev .fs-dot{width:6px;height:6px}
.fs-dev .fs-url{height:15px;font-size:.5rem}
.fs-dev-desk .fs-site{inset:24px 0 0 0;padding:12px 13px}
.fs-dev-tab .fs-site{padding:11px 11px;gap:7px}
.fs-dev-tab .fs-s-hero{grid-template-columns:1fr;grid-template-rows:1.1fr .9fr}
.fs-dev-tab .fs-s-cards{grid-template-columns:repeat(2,1fr)}
.fs-dev-phone .fs-ph-in{inset:15px 8px 10px}
.fs-dev-phone::before{
  content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:34px;height:4px;border-radius:999px;background:rgba(255,255,255,.14);z-index:3;
}

/* ─────────────────────────────────────────────
   6. RESPONSIVE
   ───────────────────────────────────────────── */
@media(max-width:1180px){
  .fs-story-grid{gap:0 40px}
  .fs-code{width:150px;left:-14px}
  .fs-phone{width:94px;right:-8px}
  [data-stage][data-active="3"] .fs-browser{transform:rotateY(-6deg) rotateX(2deg) translateX(18px)}
  [data-stage][data-active="4"] .fs-browser{transform:rotateY(0) translateX(-16px) scale(1.01)}
}

@media(max-width:980px){
  /* Il palco esce dallo sticky ed entra nel flusso */
  .fs-story-grid{grid-template-columns:1fr;gap:0}
  .fs-stage{
    height:auto;padding:8px 0 46px;overflow:visible;
    perspective:1300px;
  }
  .fs-stage-inner{max-width:640px;margin:0 auto}
  /* In flusso verticale: finestra sopra, codice e telefono affiancati sotto */
  .fs-frame{
    display:grid;grid-template-columns:minmax(0,1fr) 98px;
    grid-template-rows:auto auto;gap:16px 14px;
  }
  .fs-browser{transform:rotateY(0) rotateX(2deg) !important;grid-area:1/1/2/3}
  .fs-code{
    position:relative;left:auto;top:auto;grid-area:2/1/3/2;
    width:100%;height:186px;align-self:end;margin:0;
    transform:none !important;opacity:1 !important;
  }
  .fs-rail{margin-top:24px}
  .fs-code-roll{animation-duration:22s}
  .fs-phone{
    position:relative;right:auto;bottom:auto;grid-area:2/2/3/3;align-self:end;
    width:100%;opacity:1;transform:rotateY(-9deg) !important;
  }
  .fs-story .story-steps{padding-left:0}
  .fs-step-card{padding:0 0 0 24px}
  .story-step.on .fs-step-card::before{transform:scale(1.4)}
  .fs-devices{margin-top:56px;padding-top:52px}
  .fs-dev-row{perspective:1200px}
  .fs-dev-desk{width:min(60%,520px)}
  .fs-dev-tab{width:min(25%,200px)}
  .fs-dev-phone{width:min(14%,110px)}
}

@media(max-width:640px){
  /* La profondità resta, con prospettiva lunga perché i browser non
     escano dal riquadro. Cadono solo le ombre più costose. */
  .fs-stage{perspective:1500px}
  .fs-stage-inner{transform-style:preserve-3d}
  .fs-browser{
    box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
    aspect-ratio:16/11.4;
  }
  [data-stage][data-active="4"] .fs-browser{box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
  .fs-halo{display:none}
  .fs-frame{grid-template-columns:minmax(0,1fr) 76px;gap:12px 10px}
  .fs-code{height:146px;box-shadow:none}
  .fs-cl{font-size:.46rem}
  .fs-phone{box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
  .fs-ph-in{inset:11px 5px 6px;gap:4px}
  .fs-ph-in .fs-cta{height:9px}
  .fs-note{font-size:.52rem}
  .fs-note.n5{display:none}
  .fs-step-card{padding-left:18px}
  .fs-step-card p{font-size:.96rem}
  .fs-dev-row{
    perspective:1500px;flex-direction:column;align-items:center;gap:26px;padding-bottom:0;
  }
  .fs-dev{box-shadow:0 16px 34px -24px rgba(0,0,0,.9)}
  .fs-dev-desk{width:100%}
  .fs-dev-tab{width:62%;margin-left:0}
  .fs-dev-phone{width:40%;margin-left:0}
  .fs-dev-head{margin-bottom:34px}
  .fs-rail-labels span{font-size:.52rem;letter-spacing:.08em}
}

/* ─────────────────────────────────────────────
   7. RISPARMIO MOVIMENTO
   ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .fs-code-roll,.is-dev .fs-img::after,.fs-caret,.fs-live::before{animation:none !important}
  .fs-state{opacity:1;filter:none;transform:none}
  .fs-state-0,.fs-state-1,.fs-state-2,.fs-state-3{opacity:0 !important}
  .fs-state-4{opacity:1 !important}
  .fs-browser{transform:none !important}
  .fs-code,.fs-phone{opacity:1 !important}
}

/* ============================================================================
   ██ 8. IDENTITÀ DI PAGINA — il fondale petrolio
   Questa è l'unica pagina del sito che cambia aria. Il nero Exclusiwe
   (#050507) lascia il posto al petrolio #0A1620 di Fammi il Sito: più
   freddo, più blu, più "officina". I token si ribaltano qui, una volta
   sola: tutto il resto del foglio e di style.css li eredita.
   Le fasce chiare (.band-light) non sono toccate — ridefiniscono i
   propri token a livello di sezione e continuano a funzionare.
   ============================================================================ */
:root{
  --bg:#0A1620;
  --bg-2:#0c1a26;
  --bg-3:#11242f;
  --bg-4:#17303e;

  /* Superfici e bordi virano al blu: sul petrolio il grigio neutro ingrigisce */
  --surface:rgba(172,214,240,.030);
  --surface-2:rgba(172,214,240,.058);
  --surface-3:rgba(172,214,240,.100);
  --line:rgba(158,206,236,.105);
  --line-2:rgba(158,206,236,.185);
  --line-3:rgba(158,206,236,.300);

  /* Testo: verificato su #0A1620 — 15,9:1 / 8,7:1 / 5,4:1 */
  --text:#eef4f8;
  --text-dim:#a3b5c2;
  --text-faint:#7590a1;
}
body{background:var(--bg)}

/* Cromature fisse di style.css: erano codificate sul nero, vanno riportate */
.site-header.scrolled{background:rgba(10,22,32,.82)}
.mobile-nav{background:rgba(7,17,26,.985)}
.nav-cta{color:#0A1620 !important}
.btn-primary{color:#032015}

/* Le aurore dell'hero: una resta verde (l'azione), l'altra diventa luce
   d'ambiente fredda. Niente ciano: è un residuo, non un accento nuovo. */
.fs-hero .aurora.a1{background:rgba(92,243,164,.17)}
.fs-hero .aurora.a2{background:rgba(96,158,206,.36)}
.fs-hero .grid-overlay{opacity:.30}

/* I mockup della narrazione erano vetro grigio: qui sono vetro petrolio */
.fs-browser,.fs-phone,.fs-dev{
  background:linear-gradient(180deg,rgba(23,44,58,.96),rgba(8,18,26,.98));
}
.fs-code{background:linear-gradient(180deg,rgba(15,32,44,.97),rgba(8,18,26,.97))}
.fs-badge{background:rgba(6,14,22,.72)}
.fs-story::before{
  background:
    radial-gradient(760px 420px at 26% 34%, rgba(92,243,164,.055), transparent 68%),
    radial-gradient(620px 400px at 84% 72%, rgba(112,168,214,.070), transparent 70%);
}

/* ============================================================================
   ██ 9. IL PERNO "24 ORE"
   Il messaggio di Fammi il Sito ha un solo centro di gravità. Qui torna
   tre volte con tre pesi diversi: striscia continua, filigrana, blocco.
   ============================================================================ */

/* ── 9a. La striscia — separa l'hero dal metodo e ripete la promessa ── */
.fs-ticker{
  position:relative;overflow:hidden;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(158,206,236,.035),transparent);
}
.fs-ticker::before,
.fs-ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.fs-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.fs-ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.fs-ticker-row{
  display:flex;align-items:center;gap:24px;
  width:max-content;white-space:nowrap;
  animation:fs-tick 46s linear infinite;
}
.fs-ticker-row span{
  font-family:var(--font-display);font-weight:600;
  font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);
}
.fs-ticker-row span.t{color:var(--green)}
.fs-ticker-row i{
  width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--line-3);
}
@keyframes fs-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 9b. La filigrana — il numero dietro alla sezione che lo promette ── */
.fs-method{overflow:hidden}
.fs-24{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:2%;top:60px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(9rem,19vw,19rem);line-height:1;letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(158,206,236,.115);
}
.fs-method > .wrap{position:relative;z-index:2}
/* I quattro passi diventano una cronologia: il tempo scorre da sinistra */
.fs-method .method-step{position:relative;overflow:hidden}
.fs-method .method-step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--green),rgba(92,243,164,0));
  opacity:.30;
}
.fs-method .method-step:nth-child(2)::before{opacity:.50}
.fs-method .method-step:nth-child(3)::before{opacity:.72}
.fs-method .method-step:nth-child(4)::before{opacity:1;background:var(--green)}
.fs-method .method-step .step-n{color:var(--green)}

/* ── 9c. Il blocco Sprint nell'hero — il 24 diventa oggetto ── */
.fs-sprint{
  max-width:560px;margin:40px auto 0;
  padding:26px 30px 30px;
  border-radius:var(--r-lg);
  background:linear-gradient(152deg,rgba(92,243,164,.10),rgba(158,206,236,.020));
  border:1px solid var(--green-line);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95);
}
.fs-sprint-k{
  font-family:var(--font-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.fs-sprint .fs-big{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-display);font-weight:600;
}
.fs-sprint .fs-big b{
  font-weight:600;font-size:clamp(3.4rem,8.4vw,4.8rem);
  line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  color:var(--text);
}
.fs-sprint .fs-big span{
  font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.035em;color:var(--green);
}
.fs-sprint .fs-sub{margin:8px 0 18px}
.fs-sprint ul{border-top:1px solid var(--line);padding-top:16px}

/* ============================================================================
   ██ 10. LA VOCE DEL CLIENTE
   Nella fascia "per chi è" le tre frasi in prima persona erano una nota
   in corsivo a piè di card. Sono il pezzo più forte della pagina:
   diventano la citazione che chiude ogni profilo.
   ============================================================================ */
/* Le tre citazioni hanno lunghezze diverse: appoggiate al flusso
   restavano a tre quote sfalsate, con due card mezze vuote in fondo.
   Le card diventano colonne flex e la citazione si siede sul piede. */
.fs-voci .pain-card{display:flex;flex-direction:column}
.fs-voci .pain-card > p:first-of-type{margin-bottom:auto}

.fs-voci .fs-quote{
  margin-top:22px;padding:2px 0 2px 16px;
  border-top:none;
  border-left:2px solid var(--green);
  font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:1.04rem;line-height:1.32;letter-spacing:-.03em;
  color:var(--text);
  text-wrap:pretty;
}

/* ============================================================================
   ██ 11. LAVORI REALIZZATI
   Tre progetti consegnati, tre righe editoriali. Le immagini sono
   orizzontali e luminose: niente miniature, niente velo scuro sopra —
   sul petrolio sono schermi accesi, ed è giusto che si vedano.
   ============================================================================ */
.lavori{background:var(--bg);overflow:hidden}
.lavori::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 440px at 10% 6%, rgba(92,243,164,.050), transparent 66%),
    radial-gradient(720px 460px at 92% 92%, rgba(112,168,214,.055), transparent 70%);
}
.lavori > .wrap{position:relative;z-index:2}

.lav-list{display:flex;flex-direction:column;gap:clamp(56px,7vw,100px)}
.lav{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(30px,4vw,58px);
  align-items:center;
}
/* A righe alterne l'immagine passa a destra — e con lei la colonna larga,
   così tutte e tre le foto hanno esattamente la stessa presenza */
.lav:nth-child(even){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.lav:nth-child(even) .lav-shot{order:2}

.lav-shot{
  position:relative;margin:0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--bg-3);
  box-shadow:0 46px 100px -54px rgba(0,0,0,.95);
  isolation:isolate;
}
.lav-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:1000/567;object-fit:cover;
  filter:saturate(.95) contrast(1.02);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
/* Un velo petrolio appena percettibile: le lega alla pagina senza spegnerle */
.lav-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(200deg,rgba(10,22,32,.10),rgba(10,22,32,.02) 46%,rgba(10,22,32,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.lav:hover .lav-shot img{transform:scale(1.025);filter:saturate(1) contrast(1.02)}

.lav-txt{min-width:0}
.lav-n{
  display:block;
  font-family:var(--font-display);font-weight:600;
  font-size:.82rem;letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
  color:var(--green);margin-bottom:14px;
}
.lav-txt h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:-.045em;line-height:1.02;
  margin:0 0 12px;text-wrap:balance;
}
.lav-set{
  font-family:var(--font-ui);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 20px;padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.lav-body{
  color:var(--text-dim);font-size:1rem;line-height:1.64;
  text-wrap:pretty;margin:0;
}
.lav-foot{
  max-width:640px;margin:clamp(52px,6vw,84px) auto 0;
  padding-top:28px;border-top:1px solid var(--line);
  text-align:center;font-size:.95rem;color:var(--text-faint);
  text-wrap:pretty;
}

/* ============================================================================
   ██ 12. WHATSAPP IN CHIUSURA
   Su Fammi il Sito WhatsApp è il canale, non un ripiego. Il bottone
   verde pieno resta uno solo (l'azione principale): questo porta
   l'identità del canale senza rubargli la scena.
   ============================================================================ */
.btn-wa{
  background:rgba(37,211,102,.10);
  border:1px solid rgba(37,211,102,.42);
  color:var(--text);
}
.btn-wa i{color:#3ddc7f;font-size:1.2rem}
.btn-wa:hover{
  transform:translateY(-3px);
  background:rgba(37,211,102,.18);
  border-color:rgba(37,211,102,.72);
}
.fs-wa-note{
  margin-top:18px;text-align:center;
  font-size:.84rem;color:var(--text-faint);
}
.fs-close .claudio-box{
  background:linear-gradient(146deg,rgba(112,168,214,.10),var(--bg-3));
}

/* ============================================================================
   ██ 13. RESPONSIVE E RISPARMIO MOVIMENTO — blocchi 8-12
   ============================================================================ */
@media(max-width:980px){
  /* La colonna sola: l'alternanza destra/sinistra non ha più senso */
  .lav,
  .lav:nth-child(even){grid-template-columns:1fr;gap:26px}
  .lav:nth-child(even) .lav-shot{order:0}
  .lav-list{gap:clamp(52px,8vw,68px)}
  .fs-24{font-size:clamp(9rem,28vw,16rem);top:-1%}
}

@media(max-width:640px){
  /* Le immagini prendono tutta la larghezza dello schermo: sono il
     contenuto, non un'illustrazione a corredo. */
  .lav-shot{
    margin-left:-22px;margin-right:-22px;
    border-radius:0;border-left:none;border-right:none;
    box-shadow:0 18px 42px -30px rgba(0,0,0,.9);
  }
  .lav-txt h3{font-size:1.55rem}
  .lav-body{font-size:.97rem}
  .lav-set{font-size:12.4px;letter-spacing:.1em}
  .lav-n{font-size:12.6px}
  .lav-foot{font-size:.92rem}
  .fs-ticker{padding:13px 0}
  .fs-ticker-row{gap:18px}
  .fs-ticker-row span{font-size:12.4px;letter-spacing:.14em}
  .fs-24{display:none}
  .fs-sprint{padding:22px 22px 26px}
  .fs-voci .fs-quote{font-size:1rem}
  /* Le tre CTA di chiusura vanno a piena larghezza: soglia di tocco 50px */
  .fs-close .hero-actions .btn{width:100%;justify-content:center;min-height:50px}
}

@media(max-width:400px){
  .lav-shot{margin-left:-18px;margin-right:-18px}
}

/* Su schermi senza puntatore non c'è hover da cui dipendere */
@media(hover:none){
  .lav:hover .lav-shot img{transform:none;filter:saturate(.95) contrast(1.02)}
}

@media(prefers-reduced-motion:reduce){
  .fs-ticker-row{animation:none}
  .lav-shot img{transition:none}
  .lav:hover .lav-shot img{transform:none}
}