/* Studio Gazzignato — stili.
   Mobile-first. Sfondo scuro + accento lime + glow radiale + grana SVG.
   Le custom property qui sotto governano colore, grana e glow:
   puoi ritoccarle a piacere senza toccare il resto.
*/

:root {
  --sg-green: #c8f73a;             /* accento lime principale */
  --sg-green-glow: 200 247 58;     /* stesso colore in formato rgb-triplet per rgba() */
  --sg-ink:    #0c0c08;            /* nero caldo (testo su sfondo chiaro) */
  --sg-paper:  #f5f1e6;            /* bianco caldo (testo su sfondo scuro) */
  --sg-text:   var(--sg-paper);
  --sg-bg:     #0a0a07;            /* sfondo applicazione */
  --sg-card:   rgba(255,255,255,0.07);
  --sg-card-strong: rgba(255,255,255,0.92);
  --sg-border: rgba(255,255,255,0.18);
  --sg-mono:   'JetBrains Mono', ui-monospace, monospace;
  --sg-body:   'Montserrat', system-ui, -apple-system, sans-serif;
  --sg-display:'Archivo Black', system-ui, sans-serif;
  --sg-grain:  0.85;               /* intensità grana (0–1) — alzata per visibilità */
  --sg-glow:   0.55;               /* intensità glow (0–1) */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: var(--sg-body);
  background: var(--sg-bg);
  color: var(--sg-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                /* la SPA gestisce lo scroll dentro ogni .sg-page */
}
button { font-family: inherit; cursor: pointer; }

/* Default per i link: niente blu di sistema, niente sottolineatura,
   eredita il colore dal contesto. Per i link che vogliamo verdi
   (es. menu footer) c'è una classe dedicata sotto. */
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }

/* Focus-visible: indicatore keyboard chiaro per tutti gli elementi
   interattivi (WCAG 2.4.7). Outline lime + offset proporzionale al
   raggio dell'elemento. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sg-green);
  outline-offset: 3px;
  border-radius: 4px;
}
.sg-btn:focus-visible { outline-offset: 4px; }
.sg-pack-toggle:focus-visible { outline-offset: 6px; }
.sg-menu-link:focus-visible { outline-offset: 8px; }

/* Shell applicazione — riempe la viewport, chrome fisso */
.sg-app { position: fixed; inset:0; overflow:hidden; isolation:isolate; }

/* ── Sfondi atmosferici ─────────────────────────────────────────── */
.sg-glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  transition: background .8s ease;
}
.sg-glow[data-pos="tr"] {
  background:
    radial-gradient(ellipse 75% 55% at 78% 28%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.95)), transparent 62%),
    radial-gradient(ellipse 60% 45% at 18% 88%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.42)), transparent 65%);
}
.sg-glow[data-pos="c"] {
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.9)), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 90%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.38)), transparent 65%);
}
.sg-glow[data-pos="bl"] {
  background:
    radial-gradient(ellipse 70% 55% at 22% 72%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.95)), transparent 62%),
    radial-gradient(ellipse 55% 40% at 85% 18%, rgba(var(--sg-green-glow) / calc(var(--sg-glow) * 0.38)), transparent 65%);
}

/* Grana SVG, opacity guidata da --sg-grain */
.sg-grain {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity: var(--sg-grain);
  mix-blend-mode: overlay;
}
.sg-grain-multiply {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity: calc(var(--sg-grain) * 0.55);
  mix-blend-mode: multiply;
}

/* ── Top bar (fissa) ────────────────────────────────────────────── */
/* Grid 1fr auto 1fr: burger sx, logo CENTRATO assoluto, lang dx.
   Con justify-content:space-between il logo era al centro del suo
   spazio disponibile, non al centro della viewport — ora sì. */
.sg-topbar {
  position:absolute; top:0; left:0; right:0; height:60px; z-index:30;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 14px 16px 0;
}
.sg-topbar > :nth-child(1) { justify-self: start; }
.sg-topbar > :nth-child(2) { justify-self: center; }
.sg-topbar > :nth-child(3) { justify-self: end; }
/* Burger 44x44 = touch target WCAG/Apple HIG minimo */
.sg-burger {
  width:44px; height:44px; border-radius:10px; background:transparent;
  border:1.4px solid var(--sg-border); color: var(--sg-text);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  padding: 0 11px;
}
/* Burger classico: 3 righe della stessa larghezza */
.sg-burger span { display:block; height:1.8px; background:currentColor; width:100%; transition:transform .25s, opacity .2s; }
.sg-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sg-burger.open span:nth-child(2) { opacity:0; }
.sg-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Logo: testo "STUDIO GAZZIGNATO" piccolo orizzontale, cliccabile = torna a home */
.sg-logo {
  font-family: var(--sg-display); font-size:11px; letter-spacing:.04em; color:var(--sg-text);
  display:flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:0;
  white-space:nowrap; line-height:1;
}
.sg-logo-star { color: var(--sg-green); font-size:14px; line-height:1; transform: translateY(-1px); }
@media (min-width: 480px) {
  .sg-logo { font-size: 13px; }
  .sg-logo-star { font-size: 16px; }
}

/* Toggle lingua: UN SOLO bottone che mostra la lingua attiva grande +
   l'altra piccola in opacity bassa. Click → swap. */
.sg-lang-toggle {
  display:inline-flex; align-items:center; gap:6px;
  border:1.4px solid var(--sg-border); border-radius:999px;
  padding: 6px 14px; background: var(--sg-card);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--sg-body); font-weight:700; font-size:11px;
  color: var(--sg-text); letter-spacing:.04em; cursor:pointer;
  transition: background .2s, transform .15s;
}
.sg-lang-toggle:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }
.sg-lang-toggle-current { color: var(--sg-green); }
.sg-lang-toggle-sep { opacity: .35; }
.sg-lang-toggle-other { opacity: .5; }

/* ── Menu overlay ──────────────────────────────────────────────── */
.sg-menu {
  position:absolute; inset:0; z-index:40; display:flex; flex-direction:column;
  background: rgba(8,8,6,0.65);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.sg-menu.open { opacity:1; pointer-events:auto; }
.sg-menu-list { flex:1; display:flex; flex-direction:column; justify-content:center; padding: 0 28px; gap: 6px; }
.sg-menu-link {
  display:flex; align-items:center; justify-content:space-between;
  background: transparent; border: 0; padding: 18px 0;
  font-family: var(--sg-display); font-size: 44px; letter-spacing:-.02em;
  color: var(--sg-text); text-align:left; line-height:.95;
  border-bottom: 1px solid var(--sg-border);
  opacity: 0; transform: translateX(-20px);
}
.sg-menu.open .sg-menu-link { animation: sgMenuIn .45s cubic-bezier(.2,.7,.3,1) forwards; }
.sg-menu.open .sg-menu-link:nth-child(1) { animation-delay: .08s; }
.sg-menu.open .sg-menu-link:nth-child(2) { animation-delay: .14s; }
.sg-menu.open .sg-menu-link:nth-child(3) { animation-delay: .20s; }
.sg-menu.open .sg-menu-link:nth-child(4) { animation-delay: .26s; }
@keyframes sgMenuIn { to { opacity:1; transform:none; } }
.sg-menu-link.active { color: var(--sg-green); }
.sg-menu-link-num { font-family: var(--sg-mono); font-size:11px; opacity:.55; letter-spacing:.15em; }
.sg-menu-footer { padding: 20px 28px 32px; font-family: var(--sg-mono); font-size:10px; letter-spacing:.05em; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.sg-menu-contact { color: var(--sg-green); text-decoration: none; opacity: .9; transition: opacity .15s; }
.sg-menu-contact:hover { opacity: 1; }

/* ── Container pagine + transizioni ────────────────────────────── */
.sg-pages { position:absolute; inset:0; top:60px; bottom:0; z-index:5; }
.sg-page {
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  opacity:0; transform: translateY(14px) scale(.99);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
  scrollbar-width: thin; scrollbar-color: rgba(200,247,58,.25) transparent;
}
.sg-page.active { opacity:1; transform:none; pointer-events:auto; }
.sg-page::-webkit-scrollbar { width: 4px; }
.sg-page::-webkit-scrollbar-thumb { background: rgba(200,247,58,.25); border-radius: 2px; }

/* Footer flush al fondo: padding-bottom 0 sulla page-inner.
   Il respiro a fondo pagina viene dal padding interno del footer stesso.
   Padding-top RIDOTTO (round 11: "alza tutto") — contenuti più vicini
   al top, sito più "presente" all'apertura. */
.sg-page-inner { padding: 4px 16px 0; max-width: 720px; margin: 0 auto; min-height: 100%; display:flex; flex-direction:column; }

/* Su mobile / tablet limitiamo la larghezza di hero-sub e di paragrafi
   bio/intro a una misura leggibile (~70 caratteri) anche se il container
   si allarga. Senza questo, sui desktop full-width le righe diventano
   troppo lunghe e stanca la lettura. */
.sg-readable { max-width: 70ch; }

/* Layout 2-colonne per la pagina Aaron su desktop (bio sx, foto + box dx) */
.sg-aaron-grid { display:flex; flex-direction:column; gap: 24px; }

/* Layout 3-colonne per i pacchetti su desktop */
.sg-pack-grid { display:grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }

/* ── Tipografia ────────────────────────────────────────────────── */
.sg-eyebrow { font-family: var(--sg-mono); font-size:10px; letter-spacing:.18em; opacity:.7; text-transform:uppercase; }
.sg-h1 { font-family: var(--sg-display); font-size: clamp(40px, 12vw, 56px); line-height:.86; letter-spacing:-.02em; margin:0; }
.sg-h1-green { color: var(--sg-green); text-shadow: 0 0 40px rgba(var(--sg-green-glow) / .35); }
.sg-h1-outline { color: transparent; -webkit-text-stroke: 1.4px var(--sg-text); }
/* Stroke proporzionale: sui titoli h2 (pacchetti, contatti) tracce più sottili
   altrimenti su testo piccolo sembrano spesse e illeggibili. */
.sg-h2-outline { color: transparent; -webkit-text-stroke: 0.9px var(--sg-text); font-family: var(--sg-display); line-height:.9; letter-spacing:-.015em; margin:0; }
.sg-h2 { font-family: var(--sg-display); font-size: clamp(28px, 7vw, 36px); line-height:.9; letter-spacing:-.015em; margin:0; }
.sg-body { font-size: 14px; line-height: 1.55; color: var(--sg-text); }

/* Accento per parole evidenziate dentro <em>: Montserrat bold italic */
em.sg-accent, .sg-accent {
  font-family: 'Montserrat', var(--sg-body);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--sg-text);
}

/* ── Pill, badge, chip ─────────────────────────────────────────── */
/* Pill DISPONIBILE: rectangle MA con angoli arrotondati come il chip 24h */
.sg-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 12px; background: var(--sg-green); color: var(--sg-ink);
  font-family: var(--sg-body); font-weight:700; font-size:10px; letter-spacing:.1em;
  border-radius: 999px; text-transform: uppercase;
}
/* Su desktop: +10% di dimensioni per pill DISPONIBILE e chip "Rispondo 24h" */
@media (min-width: 1024px) {
  .sg-pill { font-size: 11px; padding: 7px 14px; }
  .sg-status-row .sg-chip-reply { font-size: 11px; padding: 6px 13px; }
}
.sg-pill::before { content:'●'; font-size:8px; }
.sg-chip {
  padding: 5px 11px; border: 1px solid var(--sg-border); border-radius:999px;
  font-family: var(--sg-mono); font-size: 11px; color: var(--sg-text);
  background: var(--sg-card);
}
.sg-tag {
  display:inline-block; padding: 2px 7px; font-family: var(--sg-mono);
  font-size: 9px; letter-spacing:.08em; background: var(--sg-green); color: var(--sg-ink);
  border-radius: 3px; text-transform:uppercase;
}

/* ── Bottoni ───────────────────────────────────────────────────── */
.sg-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 18px; border-radius: 8px; border: 1.4px solid var(--sg-text);
  font-family: var(--sg-display); font-size: 13px; letter-spacing:.04em;
  background: transparent; color: var(--sg-text);
  transition: transform .15s ease, background .15s, color .15s;
  text-decoration:none;
}
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn:active { transform: translateY(0); }
.sg-btn-primary { background: var(--sg-green); color: var(--sg-ink); border-color: var(--sg-green); }
.sg-btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.sg-btn-row > .sg-btn { flex: 1 1 130px; }

/* ── Card glass (sfocate semi-trasparenti) ────────────────────── */
.sg-glass {
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: 18px;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 20px rgba(0,0,0,.18);
  padding: 16px;
}
.sg-glass-strong {
  background: var(--sg-card-strong);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--sg-ink);
}
.sg-glass-strong .sg-eyebrow { color: rgba(0,0,0,.55); opacity:1; }


/* ── Border Beam Button ───────────────────────────────────────
   Bottone CTA con raggio luminoso lime che ruota attorno al bordo.
   Tecnica: conic-gradient mascherato per disegnare solo l'anello.
   Usa @property per animare un angolo CSS — fallback graceful sui
   browser più vecchi (il bottone resta primary, senza animazione). */
@property --sg-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sg-btn-beam { position: relative; overflow: hidden; isolation: isolate; }
.sg-btn-beam::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--sg-beam-angle),
    transparent 0deg,
    transparent 220deg,
    rgba(255,255,255,.85) 285deg,
    var(--sg-green) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: sgBeamSpin 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes sgBeamSpin { to { --sg-beam-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .sg-btn-beam::before { animation: none; }
}

/* ── Expandable Pack Card ──────────────────────────────────────
   Su mobile/tablet le 3 card pacchetto sono compatte (solo head visibile)
   e si espandono al tap. Su desktop ≥1024px restano sempre aperte (3-col). */
.sg-pack-toggle {
  background: none; border: 0; padding: 0;
  text-align: left; width: 100%; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  position: relative;
  font: inherit;
}
.sg-pack-toggle::after {
  content: '↓';
  position: absolute; top: 0; right: 0;
  font-family: var(--sg-mono); font-size: 18px; color: var(--sg-green);
  transition: transform .3s ease;
}
.sg-pack-featured .sg-pack-toggle::after { color: var(--sg-ink); }
.sg-pack[data-expanded="true"] .sg-pack-toggle::after { transform: rotate(180deg); }

/* Affordance per dire "questa card si apre": visibile SOLO su mobile/tablet
   quando la card è collassata. Su desktop le card sono sempre aperte. */
.sg-pack-hint {
  font-family: var(--sg-mono); font-size: 10px;
  color: var(--sg-green); letter-spacing: .12em;
  text-transform: uppercase; opacity: .9; margin-top: 4px;
  display: none;
}
.sg-pack-featured .sg-pack-hint { color: var(--sg-ink); }
@media (max-width: 1023px) {
  .sg-pack[data-expanded="false"] .sg-pack-hint { display: block; }
}

.sg-pack-body {
  max-height: 0; overflow: hidden; opacity: 0;
  display: flex; flex-direction: column; gap: 12px;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin-top .3s ease;
  margin-top: 0;
}
.sg-pack[data-expanded="true"] .sg-pack-body {
  max-height: 1200px; opacity: 1; margin-top: 6px;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .35s ease .1s, margin-top .3s ease;
}
/* Su desktop ≥1024px disabilito l'expand: tutte le card sempre aperte */
@media (min-width: 1024px) {
  .sg-pack-body {
    max-height: none !important; opacity: 1 !important;
    overflow: visible !important; margin-top: 6px !important;
  }
  .sg-pack-toggle::after { display: none; }
  .sg-pack-toggle { cursor: default; }
}

/* ── Marquee orizzontale ──────────────────────────────────────── */
/* Wrapper FULL-BLEED: ignora il padding del genitore. La tecnica
   "calc(50% - 50vw)" spinge i margini fino ai bordi della viewport
   indipendentemente da quanto padding ha l'antenato. Era questa
   la causa del marquee "stretto" su PC: prima compensavo solo
   il padding mobile (-16px), su desktop il padding era 72-120px. */
.sg-marquee-wrap {
  margin-top: 36px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* Marquee con border top + bottom: la linea SOTTO sostituisce quella che
   prima stava sul footer. Ora la fascia è perfettamente delimitata e
   full-bleed (il .sg-marquee-wrap allarga a 100vw). */
.sg-marquee {
  height: 44px; overflow: hidden; position:relative;
  border-top: 1px solid var(--sg-border);
  border-bottom: 1px solid var(--sg-border);
  background: rgba(0,0,0,.25); display:flex; align-items:center;
}
.sg-marquee-track {
  display: flex; align-items:center; white-space:nowrap;
  animation: sgMarqueeRoll 40s linear infinite;
  font-family: var(--sg-display);
  /* clamp evita che su monitor 4K il testo del marquee diventi enorme */
  font-size: clamp(14px, 1.1vw, 18px);
  color: var(--sg-green);
  letter-spacing: .04em; text-transform: uppercase;
}
.sg-marquee-item { padding: 0 4px; }
.sg-marquee-sep { padding: 0 18px; font-size: 1.1em; color: var(--sg-green); }
/* Segment ripetuto 8x in HTML → translate -12.5% per loop seamless.
   Su 4K il segment singolo è ~1050px: 8x = 8400px, sicuro per ogni viewport. */
@keyframes sgMarqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-12.5%); }
}

/* ── Riga status (pill + linea + meta) ────────────────────────── */
/* Status row: nowrap forzato per garantire 1 riga sempre (mobile incluso).
   Margin-bottom ridotto da 22 a 10 per alzare l'hero. */
.sg-status-row { display:flex; align-items:center; gap:8px; margin: 0 0 10px; flex-wrap:nowrap; }
.sg-status-row .sg-divider { flex:1; height:1px; background: var(--sg-border); min-width: 20px; }
.sg-status-row .sg-status-meta { font-family: var(--sg-mono); font-size: 9px; letter-spacing:.12em; opacity:.7; text-transform:uppercase; }
/* Chip "rispondo entro 24h": outline verde, contrasta con la pill solida */
.sg-status-row .sg-chip-reply {
  padding: 5px 11px; border: 1px solid var(--sg-green); border-radius: 999px;
  font-family: var(--sg-mono); font-size: 10px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--sg-green); background: rgba(200,247,58,.06);
  white-space: nowrap;
}
/* Versione mobile/desktop del testo chip: short su mobile, long su ≥768 */
.sg-only-mobile { display: inline; }
.sg-only-desktop { display: none; }
@media (min-width: 768px) {
  .sg-only-mobile { display: none; }
  .sg-only-desktop { display: inline; }
}

/* ── Card pacchetto ───────────────────────────────────────────── */
.sg-pack {
  position: relative; padding: 20px;
  display:flex; flex-direction:column; gap: 12px;
}
/* .sg-pack-head era usata in vecchio markup; ora la struttura sta dentro
   .sg-pack-toggle. Selettore tenuto per retrocompatibilità: se serve
   ripristinare l'head fuori dal toggle, esiste. */
.sg-pack-head { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.sg-pack-name { font-family: var(--sg-display); font-size: 30px; line-height:1; letter-spacing:-.01em; }
.sg-pack-price { font-family: var(--sg-mono); font-size: 11px; opacity:.85; }
.sg-pack ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size: 13px; line-height:1.45; flex:1; }
.sg-pack li::before { content:'✦'; color: var(--sg-green); margin-right: 8px; font-size: 11px; }
/* Pacchetto Pro (featured): fondo verde lime + testo nero (era bianco).
   Forzo il colore di TUTTO il contenuto su ink: paragrafo descrizione,
   features, tag invertito, bottone outline scuro per leggibilità su verde. */
.sg-pack-featured {
  background: var(--sg-green);
  color: var(--sg-ink);
  border-color: var(--sg-green);
}
.sg-pack-featured .sg-pack-price,
.sg-pack-featured .sg-pack-name,
.sg-pack-featured ul,
.sg-pack-featured .sg-body,
.sg-pack-featured .sg-body em.sg-accent { color: var(--sg-ink) !important; opacity: 1 !important; }
.sg-pack-featured ul li::before { color: var(--sg-ink); }
.sg-pack-featured .sg-tag {
  background: var(--sg-ink); color: var(--sg-green);
}
/* CTA dentro il pacchetto Pro: outline scuro per contrastare col fondo verde */
.sg-pack-featured .sg-btn-primary {
  background: var(--sg-ink); color: var(--sg-green); border-color: var(--sg-ink);
}
.sg-pack-featured .sg-btn-primary:hover { transform: translateY(-2px); }
.sg-pack-cta { margin-top: auto; }

/* Pagina Privacy: testo lungo a una colonna, sezioni separate */
.sg-privacy-list {
  display: flex; flex-direction: column; gap: 28px;
  margin-top: 32px; max-width: 720px;
}
.sg-privacy-section { padding-bottom: 24px; border-bottom: 1px solid var(--sg-border); }
.sg-privacy-section:last-child { border-bottom: 0; }
.sg-privacy-h3 {
  font-family: var(--sg-display); font-size: 22px;
  letter-spacing: -.01em; margin: 8px 0 12px;
}
.sg-privacy-section .sg-body { line-height: 1.6; }
.sg-privacy-section .sg-body a { color: var(--sg-green); text-decoration: underline; text-underline-offset: 3px; }
.sg-privacy-section .sg-body strong { color: var(--sg-green); font-weight: 700; }
@media (min-width: 1024px) {
  .sg-privacy-list { max-width: 820px; }
  .sg-privacy-h3 { font-size: 26px; }
}

/* Pagina Metodo: 3 step in colonna mobile / fila desktop */
.sg-metodo-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px;
}
.sg-metodo-step {
  padding: 24px; border: 1px solid var(--sg-border); border-radius: 14px;
  background: var(--sg-card); backdrop-filter: blur(8px);
}
@media (min-width: 1024px) {
  .sg-metodo-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Sezione "servizi singoli" — chip/voci sotto i pacchetti */
.sg-singoli-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px;
}
.sg-singoli-grid > div {
  padding: 14px 16px; border: 1px solid var(--sg-border); border-radius: 10px;
  background: var(--sg-card); backdrop-filter: blur(8px);
  font-family: var(--sg-display); font-size: 14px; letter-spacing:-.01em;
  display:flex; align-items:center; gap: 10px;
}
.sg-singoli-grid > div::before {
  content:'✦'; color: var(--sg-green); font-size: 13px;
}
@media (min-width: 768px) {
  .sg-singoli-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .sg-singoli-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Righe contatti ───────────────────────────────────────────── */
.sg-contact-row {
  display:flex; flex-direction:column; gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-border);
}
.sg-contact-row:last-child { border-bottom: 0; }
.sg-contact-row a { color: inherit; text-decoration: none; }
.sg-contact-row .sg-contact-value {
  font-family: var(--sg-display); font-size: 18px;
  /* overflow-wrap:anywhere è la versione moderna di word-break:break-all,
     evita che mail/URL lunghi tagliino fuori dalla card su mobile stretto */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
@media (max-width: 380px) {
  .sg-contact-row .sg-contact-value { font-size: 15px; }
}
.sg-contact-row .sg-contact-label {
  font-family: var(--sg-mono); font-size: 9px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.65;
}

/* ── Footer ───────────────────────────────────────────────────── */
/* Niente border-top: la linea che separa il footer dal contenuto la fa
   già il border-bottom del marquee (full-bleed). Evita doppia linea. */
.sg-footer {
  margin-top: auto; padding: 28px 0 24px;
}
/* Container interno: max-width comodo per restare presente anche su monitor
   wide senza disperdere le info. Compromesso tra "full-width" e "leggibile". */
.sg-footer-inner { max-width: 1600px; margin: 0 auto; padding: 0 16px; }

/* Brand-block sopra (full width), tagline sotto. Stacked, no più dentro la grid */
.sg-footer-brand-block { margin-bottom: 32px; max-width: 600px; }
.sg-footer-brand { font-family: var(--sg-display); font-size: 32px; color: var(--sg-green); line-height:.9; letter-spacing:-.01em; }

/* Grid sotto: 3 colonne uguali (Contatti, Sezioni, Info), niente più colonna brand 2fr */
.sg-footer-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sg-footer-grid h4 { font-family: var(--sg-mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin:0 0 10px; }
.sg-footer-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 6px; font-size: 12px; }
.sg-footer-grid a, .sg-footer-grid button { background:none; border:0; color:inherit; padding:0; font: inherit; text-align:left; cursor:pointer; word-break: break-word; }
.sg-footer-grid a:hover, .sg-footer-grid button:hover { color: var(--sg-green); }
.sg-footer-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--sg-border); font-family: var(--sg-mono); font-size: 10px; opacity:.65; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.sg-footer-back { color: var(--sg-green); background:none; border:0; cursor:pointer; font-family: var(--sg-mono); font-size: 10px; letter-spacing:.05em; }
@media (min-width: 768px) {
  .sg-footer-inner { padding: 0 40px; }
  .sg-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
  .sg-footer-brand { font-size: 48px; }
}
@media (min-width: 1024px) {
  .sg-footer-inner { padding: 0 72px; }
  .sg-footer-brand { font-size: 64px; }
  .sg-footer-brand-block { margin-bottom: 48px; }
}
@media (min-width: 1440px) {
  .sg-footer-inner { padding: 0 96px; }
}

/* ── Hero ─────────────────────────────────────────────────────── */
/* Padding-top + margin-top headline ridotti = hero più "alto" in pagina */
.sg-hero { padding-top: 0; }
.sg-hero-headline { display:flex; flex-direction:column; gap:4px; margin: 4px 0 0; }
.sg-hero-sub { margin: 22px 0 0; font-size: 14px; line-height: 1.55; max-width: 480px; }
.sg-hero-cta { margin-top: 26px; }

/* Su desktop le CTA non devono espandersi a tutta la colonna left:
   max-width contenuto = 2 bottoni leggibili senza diventare giganti */
@media (min-width: 1024px) {
  .sg-hero-cta { max-width: 480px; }
}

/* Layout hero su desktop: 2 colonne. Sx titoli/bio/CTA, dx indice editoriale.
   Su mobile/tablet l'indice non si vede (display:none) per non rubare spazio
   prima delle CTA — chi è su mobile vede l'indice via anchor-nav sotto. */
.sg-hero-grid { display: block; }
.sg-hero-right { display: none; }

@media (min-width: 1024px) {
  .sg-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .sg-hero-right {
    display: block;
    padding-top: 40px;
    border-left: 1px solid var(--sg-border);
    padding-left: 40px;
  }
}

/* Indice editoriale (colonna destra della hero su desktop) */
.sg-hero-index-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sg-border);
  align-items: baseline;
}
.sg-hero-index-row:last-child { border-bottom: 0; }
.sg-hero-index-num {
  font-family: var(--sg-mono); font-size: 11px; opacity:.55;
  letter-spacing:.15em;
}
.sg-hero-index-title {
  font-family: var(--sg-display); font-size: 22px; letter-spacing:-.01em;
  color: var(--sg-green);
}
.sg-hero-index-list {
  font-family: var(--sg-body); font-size: 13px; opacity:.85;
  margin-top: 6px;
}
.sg-hero-mark {
  font-family: var(--sg-display); font-size: 80px; color: var(--sg-green);
  line-height: 1; margin-top: 24px; opacity:.6;
}

/* Anchor-nav: contenuto fermato a 980px e allineato a SINISTRA su desktop
   (era center). Allineamento coerente col titolo hero + CTA — niente più
   "fluttuante centrato" che sembrava sganciato dal resto.
   Mobile/tablet: resta centrato per simmetria 2x2. */
.sg-anchor-nav { max-width: 980px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .sg-anchor-nav { margin-left: 0; margin-right: auto; }
}

/* ── Anchor nav glass in home (2x2 mobile, 4x1 desktop) ───────── */
.sg-anchor-nav { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sg-anchor-nav button {
  background: var(--sg-card); border: 1px solid var(--sg-border); border-radius: 12px;
  padding: 14px 14px; color: var(--sg-text); font-family: var(--sg-display); font-size: 14px;
  letter-spacing:-.01em; text-align: left; display:flex; flex-direction:column; gap:4px;
  backdrop-filter: blur(12px); cursor:pointer;
  transition: background .15s, transform .15s;
}
.sg-anchor-nav button:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.sg-anchor-nav-num { font-family: var(--sg-mono); font-size: 9px; opacity:.6; letter-spacing:.12em; }
.sg-anchor-nav-meta { font-family: var(--sg-mono); font-size:10px; opacity:.7; letter-spacing:.04em; font-weight:400; }
.sg-anchor-nav button.featured { background: var(--sg-green); color: var(--sg-ink); border-color: var(--sg-green); }
.sg-anchor-nav button.featured .sg-anchor-nav-num,
.sg-anchor-nav button.featured .sg-anchor-nav-meta { opacity:.7; }

/* Strip back-nav (in cima alle sotto-pagine) */
.sg-pagenav { display:flex; align-items:center; gap:10px; font-family: var(--sg-mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom: 18px; }
.sg-pagenav button { background:none; border:0; color: var(--sg-green); cursor:pointer; font: inherit; letter-spacing: .12em; }
.sg-pagenav .sg-divider { flex:1; height:1px; background: var(--sg-border); }
.sg-pagenav-num { font-family: var(--sg-mono); font-size: 10px; opacity:.55; letter-spacing:.18em; }

/* Foto ritratto: rettangolo verticale 3:4, leggera rotazione antioraria
   per raddrizzare l'inclinazione naturale dello scatto (testa pendeva 2° dx).
   Scale 1.05 nasconde i triangoli bianchi che la rotate crea agli angoli. */
.sg-portrait {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 15%;
  border-radius: 14px; display:block;
  border: 1px solid var(--sg-border);
  max-height: 70vh;
  transform: rotate(-2deg) scale(1.05);
  transform-origin: center;
  /* Image Reveal: parte coperto da sx, si svela verso dx quando entra in viewport */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
}
.sg-portrait.revealed {
  clip-path: inset(0 0 0 0);
}
/* Wrapper della foto: overflow:hidden per nascondere il bordo extra del scale */
.sg-portrait-wrap {
  overflow: hidden; border-radius: 14px;
}

/* Adattamenti tablet (da 768px) — più aria, hero più grande */
@media (min-width: 768px) {
  .sg-h1 { font-size: clamp(64px, 8vw, 96px); }
  .sg-h2 { font-size: clamp(40px, 5vw, 64px); }
  .sg-page-inner { padding: 8px 40px 0; max-width: none; }
  /* Su tablet teniamo 2x2 (4 bottoni simmetrici, no orfani); a 1024+ va a 4-col */
  .sg-pack { padding: 28px; }
  .sg-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .sg-menu-link { font-size: 72px; padding: 24px 0; }
  .sg-topbar { padding: 22px 32px 0; }
}

/* Adattamenti desktop pieno (da 1024px) — FULL WIDTH, niente max-width.
   Il padding tiene il contenuto staccato dai bordi. I testi lunghi
   restano leggibili grazie alla classe .sg-readable (~70ch). */
@media (min-width: 1024px) {
  .sg-page-inner { padding: 12px 72px 0; max-width: none; }
  .sg-h1 { font-size: clamp(80px, 9vw, 140px); }
  .sg-anchor-nav { grid-template-columns: repeat(4, 1fr); }
  .sg-pack-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .sg-aaron-grid {
    display:grid;
    /* Colonna destra capped a 380px così la foto non diventa enorme su 4K */
    grid-template-columns: 1.5fr minmax(280px, 380px);
    gap: 64px;
    align-items: start;
  }
  /* Foto FERMA — niente sticky, scrolla con la pagina */
  .sg-aaron-grid > .sg-aaron-right { max-width: 380px; }
  .sg-hero-sub { font-size: 16px; }
  .sg-portrait { max-height: none; }
}

/* ── Text Roll ──────────────────────────────────────────────────
   Container con overflow hidden alto 1em, lista parole impilata
   verticalmente, animazione che trasla -1em per parola. Loop seamless
   grazie alla prima parola duplicata in fondo. Veloce: 1.4s per parola.
   Reduced-motion friendly. */
.sg-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1em;
  line-height: 1;
}
.sg-roll-list {
  display: flex;
  flex-direction: column;
  animation: sgRollHero 7s cubic-bezier(.7, 0, .3, 1) infinite;
}
.sg-roll-list > * {
  display: block;
  height: 1em;
  line-height: 1;
}
/* Opzione A: hero — 6 parole + 1 duplicata = 7 step. Ciclo 9s
   (~1.43s per parola, stessa cadenza). */
.sg-roll-hero .sg-roll-list { animation-duration: 9s; }
@keyframes sgRollHero {
  0%,    11%  { transform: translateY(0); }
  14.3%, 25%  { transform: translateY(-1em); }
  28.6%, 39%  { transform: translateY(-2em); }
  42.9%, 53%  { transform: translateY(-3em); }
  57.1%, 67%  { transform: translateY(-4em); }
  71.4%, 82%  { transform: translateY(-5em); }
  85.7%, 100% { transform: translateY(-6em); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-roll-list { animation: none !important; transform: none !important; }
}

/* Adattamenti desktop largo (da 1440px) — ancora più padding laterali */
@media (min-width: 1440px) {
  .sg-page-inner { padding: 16px 120px 0; max-width: none; }
}

/* Schermi extra large (>1920px) — tetto comodo per non sparare i titoli
   a dimensioni assurde su monitor 4K */
@media (min-width: 1920px) {
  .sg-page-inner { padding: 20px 180px 0; }
  .sg-h1 { font-size: 160px; }
}

/* Rispetto per chi disattiva le animazioni — coverage completa */
@media (prefers-reduced-motion: reduce) {
  .sg-marquee-track { animation: none; }
  .sg-page { transition: opacity .15s; transform: none; }
  .sg-menu.open .sg-menu-link { animation: none; opacity:1; transform:none; }
  /* Foto: niente clip-path reveal */
  .sg-portrait { transition: none; clip-path: none !important; }
  /* Pack card: apri/chiudi senza animazione */
  .sg-pack-body { transition: none; }
  /* Hover transform via */
  .sg-btn:hover, .sg-anchor-nav button:hover, .sg-lang-toggle:hover,
  .sg-footer-grid a:hover, .sg-footer-grid button:hover { transform: none; }
  /* Burger: cambio aspetto istantaneo, niente rotate animato */
  .sg-burger span { transition: none; }
}