/* ============================================================
   TOKENS — palette scaricata da centraai.it
   ============================================================ */
:root{
  --background:#ffffff;
  --foreground:#0C1A14;
  --ink:#0C1A14;           /* nero-verde del brand */
  --ink-2:#12241C;
  --ink-3:#1B3529;
  --muted:#5B6B63;
  --subtle:#8C9A92;
  --line:#DDE3DC;
  --surface:#F6F4EE;       /* crema — tela della pagina */
  --surface-2:#EAF6F0;     /* menta — stacco di tono */
  --accent:#0F7A53;        /* verde profondo — sicuro sul chiaro */
  --accent-from:#19C37D;   /* verde brillante — solo su scuro */
  --accent-to:#0F7A53;
  --wa:#075E54;            /* WhatsApp */
  --wa-bubble:#DCF8C6;
  --alert:#B45F16;         /* solo stato "chiamata persa" */
  --hero-from:#EAF6F0;
  --hero-to:#C9CFC9;
  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:#0C1A14; font-family:'Inter',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
h1,h2,h3{ font-family:'Schibsted Grotesk','Inter',sans-serif }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid #0F7A53; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ============================================================
   GRIGLIA ADATTIVA (rem)
   ============================================================ */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

/* ============================================================
   PRIMITIVE
   ============================================================ */
.shell{ max-width:var(--container-shell); margin-inline:auto }
.icon{ width:1em; height:1em; display:inline-block; flex:none }
.tnum{ font-variant-numeric:tabular-nums }
#sprite{ display:none }

.skip-link{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:0.875rem; background:#0C1A14; padding:0.5rem 1rem; font-size:0.875rem; color:#fff;
}

/* --- reveal --- */
.reveal{
  opacity:0; transform:translateY(var(--ry,16px)) scale(var(--rsf,1));
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--rd,0ms),
             transform .8s cubic-bezier(.16,1,.3,1) var(--rd,0ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:var(--ro,1); transform:translateY(0) scale(1) }

.lines .line{ display:block; overflow:hidden }
.lines .line > i{
  display:block; font-style:normal; transform:translateY(100%); opacity:0;
  transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1);
}
.lines.is-in .line > i{ transform:translateY(0); opacity:1 }

.word{
  display:inline-block; font-style:normal; transform:translateY(24px); opacity:0;
  transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1);
}
.words.is-in .word{ transform:translateY(0); opacity:1 }

/* --- pill --- */
.pill{ display:inline-block }
.pill__s{ display:inline-block; will-change:transform }
.pill__in{
  display:inline-flex; align-items:center; gap:0.75rem; border-radius:9999px;
  font-size:0.875rem; font-weight:500; padding:0.875rem 1.75rem; white-space:nowrap;
}
.pill--arrow .pill__in{ padding:0.375rem 0.375rem 0.375rem 1.5rem }
.pill--dark .pill__in{ background:#0C1A14; color:#fff }
.pill--light .pill__in{ background:#F6F4EE; color:#0C1A14 }
.pill--accent .pill__in{ background:#0F7A53; color:#fff }
.pill--outline .pill__in{ border:1px solid #DDE3DC; background:transparent; color:#0C1A14 }
.pill__badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; flex:none }
.pill--dark .pill__badge{ background:#19C37D; color:#062017 }
.pill--accent .pill__badge{ background:#fff; color:#0F7A53 }
.pill--light .pill__badge, .pill--outline .pill__badge{ background:#0C1A14; color:#fff }
.pill__badge .icon{ will-change:transform }

/* --- eyebrow --- */
/* Etichetta di sezione: niente pallino — una linea che si apre,
   come la linea telefonica che il prodotto tiene aperta. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.115em;
}
.eyebrow::before{
  content:""; width:1.85rem; height:1px; flex:none; background:currentColor;
  transform-origin:left center; transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .12s;
}
/* a riposo dentro un blocco non ancora rivelato la linea è chiusa */
.reveal:not(.is-in) .eyebrow::before{ transform:scaleX(0) }
.eyebrow--dark{ color:#0F7A53 }
.eyebrow--light{ color:#19C37D }
/* nelle intestazioni centrate la linea sta da entrambi i lati */
.works__head .eyebrow::after{
  content:""; width:1.85rem; height:1px; flex:none; background:currentColor;
  transform-origin:right center; transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .12s;
}
.works__head .reveal:not(.is-in) .eyebrow::after{ transform:scaleX(0) }

.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:0.5rem 1rem; font-size:0.875rem }

.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; will-change:transform,opacity }

/* ============================================================
   HEADER
   ============================================================ */
.header{ position:absolute; left:0; right:0; top:0; z-index:50 }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
.brand{ display:inline-flex }
.brand__s{ display:flex; align-items:center; gap:0.6rem; font-family:'Schibsted Grotesk',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.035em; will-change:transform }
.brand__s .icon{ font-size:1.5rem }
.nav{ display:none }
.nav ul{ display:flex; align-items:center; gap:2rem; font-size:0.875rem; font-weight:500 }
.nav button{ display:inline-flex; align-items:center; gap:0.25rem }
.nav button > span{ display:inline-block; opacity:.8; will-change:transform,opacity }
.hdr-right{ display:flex; align-items:center; gap:0.75rem }
.clock{
  display:none; align-items:center; gap:0.75rem;
  border:1px solid var(--line); background:#fff;
  border-radius:0.875rem; padding:0.5rem 0.75rem; font-size:0.75rem; color:var(--muted);
}
.clock__lab{ color:#8C9A92 }
.clock__t{ min-width:3.5rem; font-weight:600; color:#0C1A14 }
.clock__sep{ color:#B4C0B8 }
.clock__d{ font-weight:500 }
.clock__live{ display:inline-flex; align-items:center; gap:.4rem; color:#0F7A53; font-weight:600 }
.clock__dot{ width:.4rem; height:.4rem; border-radius:50%; background:#0F7A53; animation:pulse 2.4s infinite }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,122,83,.5)}70%{box-shadow:0 0 0 .5rem rgba(15,122,83,0)}100%{box-shadow:0 0 0 0 rgba(15,122,83,0)}}
.menu-btn{
  border:1px solid var(--line); background:#fff;
  border-radius:0.875rem; transition:border-color .25s ease;
}
.menu-btn:hover{ border-color:var(--text-dim) }
.menu-btn__s{ display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; will-change:transform }
.menu-btn__s .icon{ font-size:0.875rem }
.menu-btn__s .lbl{ display:none }
@media (min-width:640px){ .header__in{ padding:1.5rem 2rem } .menu-btn__s .lbl{ display:inline } }
@media (min-width:768px){ .clock{ display:flex } }
@media (min-width:1024px){ .nav{ display:flex } }

/* ============================================================
   HERO — testo su fondo pulito, foto contenuta a destra
   ============================================================ */
.hero{
  position:relative; overflow:hidden; border-radius:0 0 2rem 2rem;
  background:var(--surface);
}
.hero__wm{
  position:absolute; left:0; right:0; bottom:5rem; z-index:0; text-align:center;
  pointer-events:none; user-select:none; -webkit-user-select:none;
  font-family:'Schibsted Grotesk',sans-serif; font-weight:700; line-height:1; letter-spacing:-.05em;
  font-size:var(--text-watermark); color:rgba(12,26,20,.038);
}
.hero__grid{ position:relative; z-index:2; display:flex; flex-direction:column; gap:3rem; padding:6.5rem 1.25rem 3rem }
.hero__left{ display:flex; flex-direction:column; gap:1.5rem }
.hero__h1{ max-width:15ch; font-size:2.5rem; font-weight:700; line-height:1.01; letter-spacing:-.04em }
.hero__h1 .hl{ color:#0F7A53 }
.hero__lede{ max-width:40ch; font-size:1.0625rem; line-height:1.6; color:var(--muted) }
.hero__rating{ display:flex; align-items:center; gap:.7rem }
.hero__stars{ color:#0F7A53; display:inline-flex; gap:.1rem; font-size:.9375rem }
.hero__rating-txt{ font-size:.875rem; font-weight:500; color:var(--muted) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero__facts{ display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; font-size:.8125rem; color:#8C9A92 }
.hero__facts span{ display:inline-flex; align-items:center; gap:.4rem }
.hero__facts .icon{ color:#0F7A53; font-size:.9rem }

/* pannello foto con l'effetto prima/dopo */
.hero__right{ position:relative }
.media{
  position:relative; overflow:hidden; border-radius:2rem; aspect-ratio:3/2;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50% }
.media canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.media__hint{
  position:absolute; right:1rem; top:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; color:#0C1A14; border:1px solid var(--line);
  border-radius:9999px; padding:.45rem .85rem .45rem .7rem;
  font-size:.75rem; font-weight:500; letter-spacing:.01em;
  transition:opacity .45s ease;
}
.media__hint .hdot{ width:.4rem; height:.4rem; border-radius:50%; background:#0F7A53; animation:pulse 2.4s infinite }
.media.is-used .media__hint{ opacity:0 }

/* ── quello che ti arriva davvero: l'avviso su WhatsApp ── */
.wacard{
  position:relative; z-index:4; width:100%; max-width:23rem; margin:-2.75rem auto 0;
  border-radius:1.25rem; background:#fff; border:1px solid var(--line); padding:.5rem;
}
.wacard__hd{ display:flex; align-items:center; gap:.6rem; padding:.45rem .45rem .6rem }
.wacard__av{ width:2.15rem; height:2.15rem; flex:none; border-radius:50%; background:#0C1A14; display:grid; place-items:center; font-size:1.05rem }
.wacard__who{ display:flex; flex-direction:column; min-width:0 }
.wacard__n{ font-size:.875rem; font-weight:600; letter-spacing:-.015em; line-height:1.25 }
.wacard__s{ display:flex; align-items:center; gap:.35rem; font-size:.6875rem; color:var(--subtle); line-height:1.3 }
.wacard__s .hdot{ width:.35rem; height:.35rem; border-radius:50%; background:var(--accent); flex:none }
.wacard__body{ background:var(--surface-2); border-radius:.9rem; padding:.7rem; display:flex; flex-direction:column; gap:.45rem; min-height:11rem }

.bub{ max-width:93%; border-radius:.8rem; padding:.55rem .65rem; font-size:.8125rem; line-height:1.45 }
.bub--in{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-top-left-radius:.22rem; color:var(--text) }
.bub--out{ align-self:flex-end; background:#DCF3E6; border:1px solid #BFE3D2; border-top-right-radius:.22rem; color:#0C1A14 }
.bub b{ font-weight:600 }
.bub__lab{ display:block; font-size:.5938rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem }
.bub__t{ display:flex; align-items:center; justify-content:flex-end; gap:.25rem; margin-top:.3rem; font-size:.625rem; color:var(--subtle); font-variant-numeric:tabular-nums }
.bub__t .icon{ font-size:.8rem; color:var(--accent) }

/* barra di chiusura della hero */
.hero__bar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem 1.5rem;
  border-top:1px solid #DDE3DC; padding:1.25rem; margin-top:2.5rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
.hero__sectors{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem }
.hero__sectors b{ color:#0C1A14; font-weight:600 }
.hero__sectors span{ display:inline-flex; align-items:center; gap:.35rem }
.hero__sectors .icon{ color:#0F7A53; font-size:.75rem }

@media (min-width:640px){
  .hero__grid{ padding-left:2rem; padding-right:2rem }
  .hero__bar{ padding-left:2rem; padding-right:2rem }
  .hero__h1{ font-size:3rem }
}
@media (min-width:1024px){
  .hero__grid{
    display:grid; grid-template-columns:repeat(12,1fr); gap:3.5rem; align-items:center;
    padding:9rem 2rem 4.5rem;
  }
  .hero__left{ grid-column:span 5 }
  .hero__right{ grid-column:span 7 }
  .hero__h1{ font-size:3.75rem }
  .wacard{ position:absolute; left:-2rem; bottom:-2rem; width:21rem; max-width:21rem; margin:0;
           box-shadow:0 0 0 .4rem var(--surface) }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:#fff }
.about__in{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
.about__left{ position:relative; min-height:14rem; display:flex; flex-direction:column; justify-content:space-between; gap:3rem }
.about__globe{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(15,122,83,.09); pointer-events:none }
.about__eyebrow{ position:relative }
.about__note{ position:relative; display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--muted) }
.about__note .icon{ font-size:1.5rem; color:#0F7A53 }
.about__note span{ max-width:16rem }
.about__right{ display:flex; flex-direction:column; gap:2.5rem }
.about__h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.015em }
.about__h2 .dim{ color:var(--muted) }
.about__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid #DDE3DC; padding-top:1.5rem }
.about__social-lab{ font-size:0.875rem; color:#8C9A92; margin-bottom:0.5rem }
.about__socials{ display:flex; gap:0.5rem }
.soc{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:0.875rem }
.soc .icon{ will-change:transform }
.soc--a{ background:#0F7A53; color:#fff }
.soc--n{ background:#F6F4EE; color:var(--muted) }
@media (min-width:640px){ .about__in{ padding-left:2rem; padding-right:2rem } .about__globe{ font-size:16rem } .about__h2{ font-size:1.875rem } }
@media (min-width:1024px){ .about__in{ grid-template-columns:1fr 1fr; padding-top:7rem; padding-bottom:7rem } .about__left{ min-height:20rem } .about__globe{ left:-1.5rem; font-size:20rem } }

/* ============================================================
   BAND — il ciclo del prodotto
   ============================================================ */
.band{ background:#fff }
.band ul{ display:flex; flex-direction:column; gap:0.75rem; padding:2.5rem 1.25rem }
.band li{ flex:1 }
.band__tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-family:'Schibsted Grotesk',sans-serif; font-size:1.625rem; font-weight:600; letter-spacing:-.025em; will-change:transform }
.band__tile .icon{ font-size:2.25rem }
.band--light{ background:#F6F4EE; color:#0C1A14 }
.band--accent{ background:#0F7A53; color:#fff }
.band--dark{ background:#0C1A14; color:#19C37D }
.band--ghost{ background:rgba(234,246,240,.75); color:#0F7A53 }
@media (min-width:640px){ .band ul{ flex-direction:row; gap:1rem; padding-left:2rem; padding-right:2rem } .band__tile{ height:10rem; font-size:2rem } .band__tile .icon{ font-size:3rem } }

/* ============================================================
   SCENARI (ex portfolio)
   ============================================================ */
.works{ background:#fff }
.works__in{ padding:2.5rem 1.25rem 5rem }
.works__head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; margin-bottom:3rem }
.works__eyebrow{ letter-spacing:.13em }
.works__h2{ font-size:2.25rem; font-weight:700; letter-spacing:-.03em; width:fit-content }
.works__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
.work{
  position:relative; min-height:22rem; overflow:hidden; border-radius:2rem;
  background:#0C1A14; padding:1.5rem; color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06); will-change:transform; display:block;
}
.work__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.45); position:relative; z-index:2 }
.work__badge{ width:2.75rem; height:2.75rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:rgba(25,195,125,.14); color:#19C37D; box-shadow:0 0 0 1px rgba(25,195,125,.3); font-size:1rem; will-change:transform }
/* bolla WhatsApp al centro della card — il motivo ricorrente del brand */
.work__wa{ position:absolute; left:1.5rem; right:1.5rem; top:5rem; z-index:1; display:flex; flex-direction:column; gap:.5rem; pointer-events:none }
.wa-msg{ align-self:flex-start; max-width:min(22rem,86%); background:#16352A; border:1px solid rgba(25,195,125,.18); border-radius:.9rem; border-top-left-radius:.2rem; padding:.7rem .85rem; font-size:.8rem; line-height:1.45; color:#D8E8DF }
.wa-msg b{ color:#fff; font-weight:600 }
.wa-msg .lbl{ display:block; font-size:.6rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#19C37D; margin-bottom:.3rem }
.work__bot{ position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2 }
.work__bot h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.025em }
.work__bot p{ margin-top:0.5rem; max-width:28rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
.work__tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:0.5rem }
@media (min-width:640px){
  .works__in{ padding-left:2rem; padding-right:2rem }
  .works__h2{ font-size:3rem }
  .work{ min-height:26rem; padding:2rem }
  .work__wa{ left:2rem; right:2rem; top:5.5rem }
  .work__bot{ left:2rem; right:2rem; bottom:2rem }
  .work__bot h3{ font-size:1.875rem }
}
@media (min-width:768px){ .works__grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .works__in{ padding-bottom:7rem } }

/* ============================================================
   SERVIZI
   ============================================================ */
.services{ background:#fff }
.services__in{ padding:5rem 1.25rem }
.services__h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:700; letter-spacing:-.03em }
.srow{ border-top:1px solid #DDE3DC }
.srow:first-child{ border-top:0 }
.srow a{ display:block }
.srow__in{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem; background:rgba(246,244,238,0) }
.srow__i{ width:1.75rem; flex:none; font-size:0.875rem; font-weight:600; color:#0F7A53 }
.srow__t{ flex:1; font-size:1.5rem; font-weight:600; letter-spacing:-.025em }
.srow__d{ display:none; max-width:20rem; font-size:0.875rem; color:var(--muted) }
.srow__b{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:#0C1A14; color:#19C37D; font-size:1rem; will-change:transform }
@media (min-width:640px){
  .services__in{ padding-left:2rem; padding-right:2rem }
  .services__h2{ margin-bottom:3.5rem; font-size:3rem }
  .srow__in{ gap:1.5rem; padding-top:2rem; padding-bottom:2rem }
  .srow__i{ width:2.5rem }
  .srow__t{ font-size:1.875rem }
  .srow__b{ width:3rem; height:3rem }
}
@media (min-width:768px){ .srow__t{ font-size:2.25rem } }
@media (min-width:1024px){ .services__in{ padding-top:7rem; padding-bottom:7rem } .srow__d{ display:block } }

/* ============================================================
   PREZZI
   ============================================================ */
.prices{ background:#F6F4EE; border-block:1px solid #DDE3DC }
.prices__in{ padding:5rem 1.25rem }
.prices__h2{ margin:1.25rem 0 0.75rem; max-width:20ch; font-size:2.25rem; font-weight:700; letter-spacing:-.03em }
.prices__lede{ max-width:52ch; font-size:1rem; color:var(--muted) }
.plans{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:3rem }
.plan{ background:#fff; border:1px solid #DDE3DC; border-radius:1.25rem; padding:1.75rem; display:flex; flex-direction:column }
.plan--best{ border:2px solid #0F7A53; position:relative }
.plan__tag{ position:absolute; top:-0.7rem; left:1.75rem; background:#0F7A53; color:#fff; font-size:0.688rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:9999px }
.plan__n{ font-family:'Schibsted Grotesk',sans-serif; font-size:1.125rem; font-weight:600; letter-spacing:-.02em }
.plan__p{ font-family:'Schibsted Grotesk',sans-serif; font-size:2.5rem; font-weight:700; letter-spacing:-.04em; margin-top:0.5rem; font-variant-numeric:tabular-nums }
.plan__p small{ font-family:'Inter',sans-serif; font-size:0.875rem; font-weight:500; color:#8C9A92; letter-spacing:0 }
.plan__inc{ margin-top:1.25rem; display:flex; flex-direction:column; gap:0.6rem; font-size:0.875rem; color:var(--muted); flex:1 }
.plan__inc li{ display:flex; gap:0.6rem; align-items:flex-start }
.plan__inc .icon{ color:#0F7A53; margin-top:.2rem; font-size:.9rem }
.plan .pill{ margin-top:1.5rem }
.prices__note{ margin-top:1.75rem; font-size:0.813rem; color:#8C9A92; text-align:center }
@media (min-width:640px){ .prices__in{ padding-left:2rem; padding-right:2rem } .prices__h2{ font-size:3rem } }
@media (min-width:1024px){ .prices__in{ padding-top:7rem; padding-bottom:7rem } .plans{ grid-template-columns:repeat(3,1fr) } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:#fff }
.stats__in{ padding:5rem 1.25rem }
.stats__panel{ border-radius:2rem; background:#0C1A14; padding:3rem 1.5rem; color:#fff }
.stats__h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:600; letter-spacing:-.025em }
.stats__grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
.stat__n{ font-family:'Schibsted Grotesk',sans-serif; font-size:3rem; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:#19C37D }
.stat__l{ margin-top:0.75rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
@media (min-width:640px){ .stats__in{ padding-left:2rem; padding-right:2rem } .stats__panel{ padding:4rem 2rem } .stat__n{ font-size:3.75rem } }
@media (min-width:768px){ .stats__panel{ padding-left:4rem; padding-right:4rem } .stats__h2{ font-size:2.25rem } .stat__n{ font-size:4.5rem } }
@media (min-width:1024px){ .stats__in{ padding-bottom:7rem } .stats__grid{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:#0C1A14; color:#fff }
.footer__in{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.footer__cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
.footer__h2{ max-width:16ch; font-size:2.25rem; font-weight:700; letter-spacing:-.03em }
.footer__cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.footer__brand{ display:flex; align-items:center; gap:0.6rem; font-family:'Schibsted Grotesk',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.035em }
.footer__brand .icon{ font-size:1.5rem }
.footer__tag{ margin-top:0.75rem; max-width:22rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
.footer__ct{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.4); margin-bottom:1rem }
.footer__list{ display:flex; flex-direction:column; gap:0.75rem; font-size:0.875rem }
.footer__legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:0.75rem; color:rgba(255,255,255,.45) }
.footer__legal-links{ display:flex; gap:1.5rem }
.footer__wm{
  position:absolute; left:0; right:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none;
  user-select:none; -webkit-user-select:none; font-family:'Schibsted Grotesk',sans-serif;
  font-weight:700; line-height:1; letter-spacing:-.05em; font-size:var(--text-watermark); color:rgba(255,255,255,.05);
}
@media (min-width:640px){ .footer__in{ padding-left:2rem; padding-right:2rem } .footer__h2{ font-size:3rem } .footer__legal{ flex-direction:row } }
@media (min-width:768px){ .footer__h2{ font-size:3.75rem } .footer__cols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .footer__in{ padding-top:6rem } .footer__cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } .footer__cols{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   NAV MENU
   ============================================================ */
.navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:#0C1A14; color:#fff; opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1) }
.navmenu.is-open{ opacity:1 }
.navmenu[hidden]{ display:none !important }
.navmenu__top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
.navmenu__brand{ display:flex; align-items:center; gap:0.6rem; font-family:'Schibsted Grotesk',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.035em }
.navmenu__brand .icon{ font-size:1.5rem }
.navmenu__close{ display:inline-flex; align-items:center; gap:0.5rem; border:1px solid rgba(255,255,255,.15); border-radius:0.875rem; padding:0.5rem 1rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:color .25s ease, border-color .25s ease }
.navmenu__close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navmenu__close .icon{ font-size:0.875rem }
.navmenu__nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
.navmenu__nav ul{ display:flex; flex-direction:column; gap:0.25rem }
.navmenu__item{
  display:flex; align-items:baseline; gap:1rem; width:100%; padding-block:0.5rem; text-align:left;
  font-family:'Schibsted Grotesk',sans-serif; font-size:2.25rem; font-weight:700; letter-spacing:-.035em;
  transform:translateY(1rem); opacity:0; transition:transform .5s ease-out, opacity .5s ease-out;
}
.navmenu.is-open .navmenu__item{ transform:translateY(0); opacity:1 }
.navmenu__idx{ font-family:'Inter',sans-serif; font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.navmenu__lbl{ color:rgba(255,255,255,.7); transition:color .3s }
.navmenu__item:hover .navmenu__idx{ color:#19C37D }
.navmenu__item:hover .navmenu__lbl{ color:#fff }
.navmenu__bot{ display:flex; flex-direction:column; gap:0.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.45) }
.navmenu__start{ color:rgba(255,255,255,.7); transition:color .25s ease }
.navmenu__start:hover{ color:#19C37D }
@media (min-width:640px){ .navmenu__top{ padding:1.5rem 2rem } .navmenu__item{ font-size:3.75rem } .navmenu__bot{ flex-direction:row; align-items:center; justify-content:space-between; padding-left:2rem; padding-right:2rem } }

/* ============================================================
   MODALE
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem;
  background:rgba(12,26,20,.35); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
.modal.is-open{ opacity:1 }
.modal[hidden]{ display:none !important }
.modal__panel{
  position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem; background:#fff; padding:1.5rem;
  box-shadow:0 12px 32px rgba(12,26,20,.10), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__panel{ opacity:1; transform:translateY(0) }
.modal.is-closing .modal__panel{ opacity:0; transform:translateY(18px) }
.modal__close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:#F6F4EE; color:var(--muted); font-size:.875rem; transition:background .2s ease, color .2s ease }
.modal__close:hover{ background:#EAF6F0; color:#0C1A14 }
.modal__head{ display:flex; flex-direction:column; gap:0.375rem; margin-bottom:1.5rem }
.modal__kicker{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.115em; color:var(--accent);
}
.modal__kicker::before{ content:""; width:1.85rem; height:1px; flex:none; background:currentColor }
.modal__h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.025em }
.modal form{ display:flex; flex-direction:column; gap:1rem }
.field{ display:flex; flex-direction:column; gap:0.5rem }
.field__lab{ font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#8C9A92 }
.field input, .field textarea{
  width:100%; border:1px solid #DDE3DC; background:rgba(246,244,238,.6); border-radius:0.875rem;
  padding:0.75rem 1rem; font-size:0.875rem; font-family:inherit; color:#0C1A14; outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:none }
.field input:focus, .field textarea:focus{ border-color:#0F7A53; background:#fff }
.modal__bot{ margin-top:0.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.modal__note{ font-size:0.75rem; color:#8C9A92 }
.modal__ok{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:2rem }
.modal__ok-badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:#0C1A14; font-size:1.5rem }
.modal__ok p{ max-width:34ch; font-size:0.875rem; color:var(--muted) }
@media (min-width:640px){ .modal{ align-items:center } .modal__panel{ padding:2rem } .modal__h2{ font-size:1.875rem } }

/* barra CTA mobile */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:58; display:none; gap:0.625rem;
  background:#fff; border-top:1px solid var(--line); padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom,0px));
}
.mbar .pill{ flex:1 }
.mbar .pill__s, .mbar .pill__in{ width:100%; justify-content:center }
@media (max-width:767px){ .mbar{ display:flex } body{ padding-bottom:5rem } }
/* la barra entra quando il pulsante dell'hero esce dallo schermo: così non ci
   sono due Attiva Centra uno sopra l'altro (#248).
   La classe la mette centra.js: senza JS la barra resta sempre visibile. */
.mbar{ transition:transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s }
.mbar.is-attesa{ transform:translateY(110%); visibility:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s }
@media (prefers-reduced-motion: reduce){ .mbar, .mbar.is-attesa{ transition:none } }

/* ============================================================
   PAGINE INTERNE — stesso sistema: piatto, bordi 1px, stacchi di tono
   ============================================================ */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.75rem; color:var(--subtle); margin-bottom:1.25rem }
.crumb a:hover{ color:var(--accent) }
.crumb span{ color:var(--line) }

.phero{ position:relative; overflow:hidden; background:var(--surface); border-radius:0 0 2rem 2rem }
.phero__grid{ display:flex; flex-direction:column; gap:2.5rem; padding:6.5rem 1.25rem 3rem }
.phero__left{ display:flex; flex-direction:column; gap:1.35rem }
.phero h1{ max-width:17ch; font-size:2.25rem; font-weight:700; line-height:1.03; letter-spacing:-.035em }
.phero h1 .hl{ color:var(--accent) }
.phero__lede{ max-width:44ch; font-size:1.0625rem; line-height:1.6; color:var(--muted) }
.phero__bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1.5rem;
  border-top:1px solid var(--line); padding:1.25rem; margin-top:2rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
@media (min-width:640px){
  .phero__grid{ padding-left:2rem; padding-right:2rem }
  .phero__bar{ padding-left:2rem; padding-right:2rem }
  .phero h1{ font-size:2.75rem }
}
@media (min-width:1024px){
  .phero__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:3.5rem; align-items:center; padding:8.5rem 2rem 4.5rem }
  .phero__left{ grid-column:span 6 }
  .phero__right{ grid-column:span 6; position:relative }
  .phero h1{ font-size:3.25rem }
  .phero .wacard{ position:absolute; left:-2rem; bottom:-2rem; width:19rem; max-width:19rem; margin:0; box-shadow:0 0 0 .4rem var(--surface) }
}

/* sezione generica */
.sec{ padding:4.5rem 1.25rem }
.sec--alt{ background:var(--surface); border-block:1px solid var(--line) }
.sec__h2{ margin:1.1rem 0 0; max-width:18ch; font-size:1.875rem; font-weight:700; letter-spacing:-.03em }
.sec__lede{ margin-top:.9rem; max-width:50ch; font-size:1rem; color:var(--muted); line-height:1.6 }
@media (min-width:640px){ .sec{ padding-left:2rem; padding-right:2rem } .sec__h2{ font-size:2.25rem } }
@media (min-width:1024px){ .sec{ padding-top:6rem; padding-bottom:6rem } }

/* tre problemi */
.probs{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem }
.prob{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.prob__i{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent); font-size:1rem; margin-bottom:.9rem }
.prob p{ font-size:.9375rem; line-height:1.55; color:var(--text) }
@media (min-width:768px){ .probs{ grid-template-columns:repeat(3,1fr) } }

/* tre step */
.steps3{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem; counter-reset:s }
.step3{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.step3__n{ font-family:'Schibsted Grotesk',sans-serif; font-size:.8125rem; font-weight:700; color:var(--accent); letter-spacing:.06em }
.step3 h3{ margin-top:.7rem; font-size:1.1875rem; font-weight:600; letter-spacing:-.02em }
.step3 p{ margin-top:.5rem; font-size:.9375rem; line-height:1.55; color:var(--muted) }
@media (min-width:768px){ .steps3{ grid-template-columns:repeat(3,1fr) } }

/* chiamata di esempio */
.call{ background:var(--ink); border-radius:2rem; padding:2rem 1.5rem; color:#fff; margin-top:2.5rem }
.call__h{ display:flex; align-items:center; gap:.6rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.45); margin-bottom:1.5rem }
.call__h .icon{ color:var(--accent-from); font-size:.95rem }
.turns{ display:flex; flex-direction:column; gap:.75rem; max-width:46rem }
.turn{ display:flex; gap:.85rem; align-items:flex-start }
.turn__w{ flex:none; width:4.5rem; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding-top:.35rem }
.turn--c .turn__w{ color:rgba(255,255,255,.4) }
.turn--a .turn__w{ color:var(--accent-from) }
.turn__b{ border-radius:.9rem; padding:.7rem .9rem; font-size:.9375rem; line-height:1.5 }
.turn--c .turn__b{ background:#16241E; border:1px solid rgba(255,255,255,.07); color:#D7E3DC }
.turn--a .turn__b{ background:#16352A; border:1px solid rgba(25,195,125,.18); color:#EAF6F0 }
@media (min-width:640px){ .call{ padding:2.5rem 2rem } }

/* tabella confronto */
.cmp{ margin-top:2.5rem; overflow-x:auto; border:1px solid var(--line); border-radius:1.25rem; background:#fff }
.cmp table{ width:100%; border-collapse:collapse; min-width:34rem }
.cmp th, .cmp td{ padding:.9rem 1rem; text-align:left; font-size:.875rem; border-top:1px solid var(--line) }
.cmp thead th{ border-top:0; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--subtle) }
.cmp thead th.is-us{ color:#fff; background:var(--accent); border-radius:.6rem .6rem 0 0 }
.cmp td.is-us{ background:var(--surface-2); font-weight:500 }
.cmp td:first-child{ color:var(--text); font-weight:500 }
.cmp .yes{ color:var(--accent); font-weight:600 }
.cmp .no{ color:var(--subtle) }

/* FAQ */
.faq{ margin-top:2.5rem; border-top:1px solid var(--line) }
.faq__i{ border-bottom:1px solid var(--line); padding:1.5rem 0 }
.faq__q{ font-family:'Schibsted Grotesk',sans-serif; font-size:1.125rem; font-weight:600; letter-spacing:-.02em }
.faq__a{ margin-top:.55rem; max-width:62ch; font-size:.9375rem; line-height:1.65; color:var(--muted) }

/* CTA scura */
.ctaband{ background:var(--ink); color:#fff; border-radius:2rem; padding:3rem 1.5rem; text-align:center; margin:0 1.25rem }
.ctaband h2{ max-width:20ch; margin-inline:auto; font-size:1.875rem; font-weight:700; letter-spacing:-.03em }
.ctaband p{ margin:1rem auto 0; max-width:46ch; color:rgba(255,255,255,.6); font-size:1rem; line-height:1.6 }
.ctaband__b{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem }
@media (min-width:640px){ .ctaband{ padding:4rem 2rem; margin-inline:2rem } .ctaband h2{ font-size:2.5rem } }

/* griglia di link (altri settori / articoli correlati) */
.lgrid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2.5rem }
.lcard{ display:block; background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.35rem; transition:border-color .2s ease }
.lcard:hover{ border-color:var(--accent) }
.lcard__k{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent) }
.lcard__t{ margin-top:.5rem; font-family:'Schibsted Grotesk',sans-serif; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em }
.lcard__d{ margin-top:.45rem; font-size:.875rem; color:var(--muted); line-height:1.5 }
.lcard__m{ margin-top:.9rem; font-size:.75rem; color:var(--subtle); display:flex; gap:.6rem; align-items:center }
@media (min-width:640px){ .lgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .lgrid--3{ grid-template-columns:repeat(3,1fr) } }

/* filtri blog */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem }
.chipf{ font-size:.8125rem; font-weight:500; padding:.5rem 1rem; border-radius:9999px; border:1px solid var(--line); background:#fff; color:var(--muted) }
.chipf[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.chipf:hover{ border-color:var(--accent); color:var(--accent) }
.chipf[aria-current="true"]:hover{ color:#fff }

/* testo lungo: articoli e pagine legali */
.prose{ max-width:42rem; font-size:1rem; line-height:1.75; color:var(--text) }
.prose > * + *{ margin-top:1.15rem }
.prose h2{ margin-top:2.75rem; font-size:1.5rem; font-weight:700; letter-spacing:-.025em }
.prose h3{ margin-top:2rem; font-size:1.1875rem; font-weight:600; letter-spacing:-.02em }
.prose p{ color:var(--muted) }
.prose strong{ color:var(--text); font-weight:600 }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:.15em }
.prose ul, .prose ol{ padding-left:1.15rem; color:var(--muted) }
.prose ul{ list-style:disc } .prose ol{ list-style:decimal }
.prose li + li{ margin-top:.5rem }
.prose blockquote{ border-left:2px solid var(--accent); padding-left:1.1rem; color:var(--text); font-size:1.0625rem }
.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem }
.prose th, .prose td{ padding:.7rem .8rem; border-top:1px solid var(--line); text-align:left }
.prose__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.8125rem; color:var(--subtle); margin-top:1.1rem }
.prose__box{ margin-top:2.5rem; background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.prose__box p{ color:var(--text); font-size:.9375rem; margin:0 0 1.1rem }

/* form */
.formwrap{ display:grid; grid-template-columns:1fr; gap:3rem; margin-top:2.5rem }
.formcard{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem }
.formcard form{ display:flex; flex-direction:column; gap:1rem }
.f2{ display:grid; grid-template-columns:1fr; gap:1rem }
.fcheck{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8125rem; color:var(--muted); line-height:1.5 }
.fcheck input{ margin-top:.2rem; accent-color:var(--accent); width:1rem; height:1rem; flex:none }
.field select{
  width:100%; border:1px solid var(--line); background:rgba(246,244,238,.6); border-radius:.875rem;
  padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:var(--text); outline:none;
}
.field select:focus{ border-color:var(--accent); background:#fff }
.contacts{ display:flex; flex-direction:column; gap:1.25rem }
.contact{ display:flex; gap:.85rem; align-items:flex-start; padding-bottom:1.25rem; border-bottom:1px solid var(--line) }
.contact:last-child{ border-bottom:0 }
.contact{ align-items:center }
.contact__i{ width:2.35rem; height:2.35rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent) }
.contact__k{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--subtle) }
.contact__v{ display:block; margin-top:.2rem; font-size:.9375rem; font-weight:500 }
.contact__v a:hover{ color:var(--accent) }
@media (min-width:640px){ .formcard{ padding:2rem } .f2{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .formwrap{ grid-template-columns:1.25fr .75fr; gap:4rem } }

/* ============================================================
   SCHEDE SETTORE — la foto fa il prima/dopo al passaggio del mouse
   ============================================================ */
.sgrid{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.75rem }
@media (min-width:640px){ .sgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .sgrid{ grid-template-columns:repeat(3,1fr) } }

.scard{
  display:block; overflow:hidden; border-radius:1.5rem;
  border:1px solid var(--line); background:#fff;
  transition:border-color .35s ease;
}
.scard:hover{ border-color:var(--accent) }
.scard__ph{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2) }
.scard__ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50%;
}
/* la seconda foto sta sopra e si scopre: stessa scena, esito diverso */
.scard__ph .is-warm{ opacity:0; transition:opacity .55s cubic-bezier(.22,1,.36,1) }
.scard:hover .is-warm, .scard:focus-visible .is-warm{ opacity:1 }
/* su touch non c'è il passaggio del mouse: mostro direttamente l'esito buono */
@media (hover:none){ .scard__ph .is-warm{ opacity:1 } }

.scard__tag{
  position:absolute; left:.85rem; top:.85rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(12,26,20,.72); color:#fff; border-radius:9999px;
  padding:.35rem .7rem .35rem .55rem; font-size:.6875rem; font-weight:600;
  letter-spacing:.02em; transition:background .35s ease;
}
.scard__tag .d{ width:.4rem; height:.4rem; border-radius:50%; background:#E0A15C; transition:background .35s ease }
.scard:hover .scard__tag{ background:rgba(15,122,83,.92) }
.scard:hover .scard__tag .d{ background:#19C37D }
/* l'etichetta racconta lo stato che la foto sta mostrando */
.scard__tag .t2{ display:none }
.scard:hover .scard__tag .t1, .scard:focus-visible .scard__tag .t1{ display:none }
.scard:hover .scard__tag .t2, .scard:focus-visible .scard__tag .t2{ display:inline }
@media (hover:none){
  .scard__tag{ background:rgba(15,122,83,.92) }
  .scard__tag .d{ background:#19C37D }
  .scard__tag .t1{ display:none } .scard__tag .t2{ display:inline }
}

.scard__in{ display:block; padding:1.25rem 1.25rem 1.35rem }
.scard__k{ display:block; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent) }
.scard__t{ display:block; margin-top:.5rem; font-family:'Schibsted Grotesk',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.025em; line-height:1.2 }
.scard__m{
  margin-top:.75rem; display:flex; gap:.55rem; align-items:flex-start;
  background:var(--surface-2); border-radius:.75rem; border-top-left-radius:.2rem;
  padding:.55rem .65rem; font-size:.8125rem; line-height:1.4; color:var(--text);
}
.scard__m .icon{ color:var(--accent); font-size:.85rem; flex:none; margin-top:.15rem }
.scard__go{
  margin-top:1rem; display:flex; align-items:center; justify-content:space-between;
  font-size:.8125rem; font-weight:600; color:var(--accent);
}
.scard__go .icon{ font-size:1rem; transition:transform .35s cubic-bezier(.22,1,.36,1) }
.scard:hover .scard__go .icon{ transform:translate(3px,-3px) }

/* ============================================================
   ACCESSO — Accedi / Inizia ora nell'intestazione, pagine auth
   ============================================================ */
.hdr-sep{ display:none; width:1px; height:1.5rem; background:var(--line); flex:none }
.hdr-login{ display:none; font-size:.875rem; font-weight:500; white-space:nowrap }
.hdr-login > span{ display:inline-block; opacity:.82; will-change:transform,opacity }
.hdr-login[aria-current="page"] > span{ opacity:1; color:var(--accent) }
.hdr-cta .pill__in{ padding:.625rem 1.25rem; font-size:.8125rem; font-weight:600 }
@media (min-width:640px){ .hdr-sep, .hdr-login{ display:block } }
@media (max-width:389px){ .hdr-cta{ display:none } }

.navmenu__nav ul li.navmenu__gap{ height:1px; background:rgba(255,255,255,.1); margin:1.1rem 0 }
.navmenu__item--auth .navmenu__idx{ color:rgba(25,195,125,.55) }
/* il menu scorre quando le voci non stanno nello schermo (telefoni bassi) e
   le fasce restano larghe quanto lo schermo: con margin-inline:auto di .shell
   in una colonna flex si stringerebbero al contenuto, al centro */
.navmenu{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.navmenu > .shell{ width:100%; flex-shrink:0 }
.navmenu__nav{ flex:1 0 auto }
.navmenu__nav ul{ margin-block:auto }
@media (max-width:639px){
  .navmenu__item{ font-size:clamp(1.625rem, 5.2vh, 2.25rem); padding-block:.3rem }
  .navmenu__item--auth{ font-size:1.375rem }
  .navmenu__nav ul li.navmenu__gap{ margin:.75rem 0 }
  .navmenu__bot{ padding-block:1.1rem }
}
.navmenu__bot .navmenu__start{ display:inline-flex; align-items:center; gap:.45rem; color:#19C37D; font-weight:600 }

/* --- impianto delle due pagine --- */
.auth{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-top:2.5rem; align-items:start }
@media (min-width:1024px){ .auth{ grid-template-columns:1.15fr .85fr; gap:4rem } .auth--narrow{ grid-template-columns:1fr .9fr } }
.authcard{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem }
.authcard form{ display:flex; flex-direction:column; gap:1.1rem }
@media (min-width:640px){ .authcard{ padding:2.25rem } }
.authcard__h{ font-family:'Schibsted Grotesk',sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:-.03em; margin-bottom:.4rem }
.authcard__p{ font-size:.9375rem; color:var(--muted); margin-bottom:.35rem }
.auth__swap{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.875rem; color:var(--muted); text-align:center }
.auth__swap a{ color:var(--accent); font-weight:600 }
.auth__swap a:hover{ text-decoration:underline }
.field__hint{ font-size:.75rem; color:var(--subtle) }
.field__opt{ text-transform:none; font-weight:400; letter-spacing:0; color:var(--subtle) }
.frow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.frow .fcheck{ margin:0 }
.flink{ font-size:.8125rem; font-weight:600; color:var(--accent) }
.flink:hover{ text-decoration:underline }

/* --- stati di errore sui campi --- */
.field--err input, .field--err select{ border-color:#C2410C; background:#FEF6F1 }
.field__err{ display:none; font-size:.75rem; font-weight:500; color:#C2410C }
.field--err .field__err{ display:block }
.fcheck--err{ color:#C2410C }
.fcheck--err input{ outline:2px solid #C2410C; outline-offset:2px }

/* --- avvisi: buon fine ed errore --- */
.alert{
  display:flex; gap:.85rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:1rem; padding:.9rem 1rem;
  font-size:.875rem; line-height:1.5;
}
.alert__i{ width:1.6rem; height:1.6rem; flex:none; display:grid; place-items:center; border-radius:9999px; font-size:.8rem }
.alert__t{ display:block; font-weight:600; margin-bottom:.15rem }
.alert--ok{ background:var(--surface-2); border-color:#BFE6D4; color:#0C1A14 }
.alert--ok .alert__i{ background:var(--accent); color:#fff }
.alert--err{ background:#FDF3ED; border-color:#EED3BF; color:#0C1A14 }
.alert--err .alert__i{ background:#C2410C; color:#fff }
.alert p{ color:var(--muted); margin:0 }

/* --- pannello di conferma che sostituisce il modulo --- */
.authdone{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:1.5rem }
.authdone__badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:var(--accent); color:#fff; font-size:1.5rem }
.authdone h2{ font-family:'Schibsted Grotesk',sans-serif; font-size:1.625rem; font-weight:700; letter-spacing:-.03em }
.authdone p{ max-width:38ch; font-size:.9375rem; color:var(--muted) }
.authdone__steps{ width:100%; margin-top:.5rem; text-align:left; display:flex; flex-direction:column; gap:.75rem }
.authdone__step{ display:flex; gap:.75rem; align-items:flex-start; font-size:.875rem; color:var(--muted) }
.authdone__step b{ color:var(--ink); font-weight:600 }
.authdone__n{ width:1.5rem; height:1.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent); font-size:.75rem; font-weight:700 }

/* --- colonna di destra --- */
.authside{ display:flex; flex-direction:column; gap:1.5rem }
.authside__box{ background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.authside__k{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); display:inline-flex; align-items:center; gap:.75rem }
.authside__k::before{ content:""; width:1.85rem; height:1px; background:currentColor; flex:none }
.authside__list{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.9rem }
.authside__li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.875rem; color:var(--muted); line-height:1.55 }
.authside__li b{ color:var(--ink); font-weight:600 }
.authside__li .icon{ color:var(--accent); margin-top:.15rem; flex:none }
.authside__note{ font-size:.8125rem; color:var(--subtle); line-height:1.6 }
.alert[hidden]{ display:none }
/* la scheda WhatsApp, nella colonna di destra, non deve sovrapporsi al riquadro sopra */
.authside .wacard{ position:static; inset:auto; width:100%; max-width:none; margin:0; box-shadow:none }

/* ============================================================
   SITO LARAVEL — aggiunte al prototipo (A77X-T14)
   ============================================================ */

/* Oltre i 1920px la griglia continua a crescere, come faceva lo script del
   prototipo: 16px a 1920px, poi due terzi della crescita della finestra. */
@media (min-width:1921px){ html{ font-size:calc(5.3344px + .5555vw) } }

/* Senza JS (o se lo script non arriva) il contenuto si vede subito: le entrate
   animate le accende solo la classe .js messa nell'head. */
html:not(.js) .reveal{ opacity:var(--ro,1); transform:none }
html:not(.js) .lines .line > i, html:not(.js) .word{ opacity:1; transform:none }
html:not(.js) .reveal .eyebrow::before, html:not(.js) .works__head .eyebrow::after{ transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:var(--ro,1); transform:none }
  .lines .line > i, .word{ opacity:1; transform:none }
}

/* titoli dei piani e delle FAQ ora sono h3: niente margini ereditati */
.plan__n, .faq__q{ margin:0 }

/* pulsanti sulla fascia scura (.ctaband) */
.pill--onink .pill__in{ background:#19C37D; color:#062017 }
.pill--onink .pill__badge{ background:#062017; color:#fff }
.pill--ghostink .pill__in{ border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff }

/* prezzi: selettore mensile / annuale e riga sotto il prezzo annuale */
.ciclo{ display:flex; width:max-content; max-width:100%; margin:0 auto; padding:.25rem; gap:.25rem;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff }
.ciclo[hidden]{ display:none }
.ciclo__b{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:var(--radius-pill);
  font-size:.875rem; font-weight:600; color:var(--muted); transition:background .25s, color .25s }
.ciclo__b[aria-pressed="true"]{ background:var(--ink); color:#fff }
.ciclo__sconto{ font-size:.75rem; font-weight:600; color:var(--accent) }
.ciclo__b[aria-pressed="true"] .ciclo__sconto{ color:#19C37D }
.ciclo + .plans{ margin-top:2rem }
.plan__p[hidden], .plan__sub[hidden]{ display:none }
.plan__sub{ margin-top:.35rem; font-size:.8125rem; font-weight:500; color:var(--accent) }

/* banner cookie: sopra la barra mobile, sotto il menu */
.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:100; padding:1rem }
.cookie[hidden]{ display:none }
.cookie__panel{ max-width:48rem; margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-card-sm);
  padding:1.25rem; box-shadow:0 1.5rem 3rem -1rem rgba(12,26,20,.25) }
.cookie__t{ font-size:.875rem; line-height:1.6; color:var(--ink) }
.cookie__t a{ color:var(--accent); text-decoration:underline }
.cookie__prefs{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem }
.cookie__prefs[hidden]{ display:none }
.cookie__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .85rem;
  border:1px solid var(--line); border-radius:var(--radius-control); font-size:.875rem; cursor:pointer }
.cookie__row input{ width:1.1rem; height:1.1rem; accent-color:var(--accent) }
.cookie__b{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.6rem }
.cookie__link{ margin-right:auto; font-size:.875rem; font-weight:500; color:var(--muted); text-decoration:underline }
.cookie__link[hidden]{ display:none }
.cookie .pill__in{ padding:.6rem 1.1rem; font-size:.875rem }
@media (max-width:767px){ .cookie{ bottom:calc(4.4rem + env(safe-area-inset-bottom,0px)); padding:.75rem } }

/* bottone "Preferenze cookie" nel footer, uguale ai link vicini */
.footer__legal-links button.alink{ font-size:inherit; line-height:inherit; padding:0 }

/* con le cifre tabulari il punto delle migliaia prende la larghezza di una
   cifra ("2 . 490 €"): nei prezzi grandi meglio quelle proporzionali */
.plan__p{ font-variant-numeric:proportional-nums }

/* pagine settore (A77X-T21..T26): tag semantici al posto dei div del prototipo */
ol.steps3{ list-style:none }
.cmp tbody th{ padding:.9rem 1rem; text-align:left; font-size:.875rem; font-weight:500; color:var(--text); border-top:1px solid var(--line) }
.cmp:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* blog (A77X-T29): schede con span dentro il link, articoli dall'editor dell'admin */
.lcard__k, .lcard__t, .lcard__d{ display:block }
.prose__meta a{ color:var(--text); font-weight:500; text-decoration:underline; text-underline-offset:.15em }
.prose h2, .prose h3{ scroll-margin-top:6rem }
.prose hr{ border:0; border-top:1px solid var(--line); margin-block:2.25rem }
.prose img{ max-width:100%; height:auto; border-radius:1rem }
.prose figure{ margin-block:1.75rem } .prose figcaption{ margin-top:.5rem; font-size:.8125rem; color:var(--subtle) }
.prose table{ display:block; overflow-x:auto }
.prose code{ font-size:.9em; background:var(--surface); border-radius:.35rem; padding:.1em .35em }
.prose__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.1rem }
.prose__settori{ margin-top:2.5rem; max-width:42rem }
.prose__settori-t{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--subtle) }

/* Moduli veri (contatti, accesso, registrazione): avvisi dal server e textarea in errore. */
.formcard > .alert{ margin-bottom:1.25rem }
.authcard > .alert{ margin-block:.75rem .25rem }
.field--err textarea{ border-color:#C2410C; background:#FEF6F1 }