/* SveaHost — font self-hosted (GDPR: niente richieste a Google).
   Bricolage 500 e Geist 300 rimossi: NESSUN elemento li usa (i pesi 500/450 sono
   serviti da Geist/JetBrains) → −61KB sul primo caricamento. */

/* Bricolage Grotesque 700 latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-700-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque 700 latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-700-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bricolage Grotesque 800 latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-800-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque 800 latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-800-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist 400 latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geist-400-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist 400 latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geist-400-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist 500 latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geist-500-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist 500 latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geist-500-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist 600 latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geist-600-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist 600 latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geist-600-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono: un solo peso (600) per le etichette mono decorative → −62KB.
   Il blocco 600 sotto dichiara font-weight:400 700 così copre tutti gli usi mono
   (500/600/700) senza caricare file extra né faux-bold. */

/* JetBrains Mono 600 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-600-latin-ext.woff2?2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 600 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-600-latin.woff2?2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================
   SveaHost — «Il sentiero della formica»
   Design system: carta + inchiostro + viola brand.
   Token unici; il vetro vive SOLO nell'header.
   ===================================================== */
:root{
  /* ----- Palette (derivata da #CC55DE) ----- */
  --carta:#FCFAFD;          /* il foglio */
  --velo:#F4ECF8;           /* riempimenti tenui */
  --viola:#CC55DE;          /* brand — invariato */
  --viola-vivo:#D94CE3;     /* stati interattivi */
  --viola-profondo:#9B2BC9; /* accenti scuri, hover */
  --viola-notte:#201430;    /* il sottosuolo: banda, footer, menu mobile */
  --inchiostro:#241B30;     /* testo */
  --linfa:#2FA36E;          /* un solo puntino vivo */

  /* ----- Scala spazi (multipli di 8) ----- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  /* ----- Radius (4 valori, basta) ----- */
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;

  /* ----- Ombre (2 ricette) ----- */
  --ombra-1:0 1px 2px rgba(36,27,48,.05),0 10px 28px -14px rgba(36,27,48,.12);          /* posata */
  --ombra-2:0 2px 4px rgba(36,27,48,.07),0 28px 56px -20px rgba(123,28,158,.22);        /* sollevata */

  /* ----- Movimento (2 curve, 2 durate) ----- */
  --curva:cubic-bezier(.22,.8,.26,1); --curva-elastica:cubic-bezier(.34,1.56,.64,1);
  --vel-1:.22s; --vel-2:.5s;

  /* ----- Tipografia — scala modulare 1.25 su base 17 ----- */
  --t-1:.8rem; --t0:1.0625rem; --t1:1.33rem; --t2:1.66rem; --t3:2.08rem; --t4:2.59rem; --t5:3.24rem; --t6:4.05rem; --t7:5.07rem;
  --f-display:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  --f-body:'Geist','Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ===== Alias legacy (compatibilità 10 pagine — mappati sui token) ===== */
  --cream:var(--carta); --sand:var(--velo);
  --warm-black:var(--inchiostro); --warm-black-soft:#2C2138;
  --magenta:var(--viola); --magenta-deep:var(--viola-profondo); --magenta-soft:#E3A6EF; --magenta-light:#F1D8F8;
  --accent:var(--viola-vivo); --accent-d:#C42FD0;
  --leaf:var(--linfa);
  --terracotta:var(--viola); --terracotta-deep:var(--viola-profondo); --peach:#E3A6EF; --peach-light:#F1D8F8;
  --glass-bg:rgba(255,255,255,.86); --glass-bg-strong:rgba(255,255,255,.94); --glass-bg-soft:rgba(255,255,255,.7);
  --glass-border:rgba(204,85,222,.14); --glass-border-soft:rgba(204,85,222,.1);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9); --glass-inset-bottom:inset 0 -1px 0 rgba(36,27,48,.03);
  --shadow-sm:var(--ombra-1); --shadow-md:var(--ombra-1); --shadow-lg:var(--ombra-2); --shadow-xl:var(--ombra-2);
  --shadow-glow:0 0 0 transparent;
  --r-sm:var(--r-s); --r-md:var(--r-m); --r-lg:var(--r-l); --r-xl:var(--r-l);
  --ease-out-soft:var(--curva); --ease-elastic:var(--curva-elastica);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--cream);overflow-x:hidden}
body{font-family:var(--f-body);color:var(--warm-black);background:transparent;line-height:1.5;font-weight:400;min-height:100vh}
a{color:inherit;text-decoration:none}
img,svg{display:block}

/* ===== Background blobs + grain ===== */
.bg-canvas{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%);pointer-events:none}
.bg-canvas::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,rgba(24,21,32,.07) 1px,transparent 0);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 35%,transparent 78%);mask-image:radial-gradient(120% 100% at 50% 0%,#000 35%,transparent 78%)}
main,.footer{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.24;will-change:transform}
.blob--1{width:60vw;height:60vw;background:var(--magenta-soft);top:-10%;left:-10%;animation:blobFloat1 28s ease-in-out infinite}
.blob--2{width:50vw;height:50vw;background:var(--magenta);top:30%;right:-15%;opacity:.13;animation:blobFloat2 32s ease-in-out infinite}
.blob--3{width:55vw;height:55vw;background:var(--magenta-light);bottom:-20%;left:20%;opacity:.24;animation:blobFloat3 36s ease-in-out infinite}
@keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vw,12vh) scale(1.1)}66%{transform:translate(-5vw,8vh) scale(.95)}}
@keyframes blobFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,-10vh) scale(1.15)}}
@keyframes blobFloat3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(10vw,-6vh) scale(.9)}80%{transform:translate(-8vw,4vh) scale(1.05)}}
/* regola di Chanel: il grain globale è stato tolto — la carta è pulita, il sentiero respira */
.grain{display:none}

/* ===== Typography ===== */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.03;letter-spacing:-.03em;color:var(--warm-black)}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,4.8vw,3.8rem);letter-spacing:-.035em}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.02em}
h4{font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:600}
em{font-style:italic;font-weight:400;color:var(--magenta)}
p{font-size:clamp(.98rem,1.1vw,1.08rem);color:rgba(24,21,32,.72);line-height:1.65;max-width:62ch}
strong{font-weight:600;color:var(--warm-black)}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--magenta-deep);display:inline-flex;align-items:center;gap:10px;max-width:100%}
.eyebrow::before{content:'';width:24px;height:1px;flex:none;background:var(--magenta-deep);opacity:.7}
@media (max-width:560px){.eyebrow{font-size:.66rem;letter-spacing:.1em;gap:8px}.eyebrow::before{width:18px}}
/* monospace technical labels — modern hosting/product feel */
.cta-pill,.dual-card__eyebrow,.advantage__num,.hero__micro,.cmp__cell--head,.cmp__badge,.footer__col h4{font-family:var(--f-mono)}
.cmp__cell--head{letter-spacing:.1em}

/* ===== Layout ===== */
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px);position:relative;z-index:1}
.ant-lane{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
section{padding:clamp(72px,10vw,150px) 0;position:relative}

/* ===== Nav ===== */
.header-row{position:fixed;top:18px;left:0;right:0;margin-inline:auto;z-index:100;
  width:min(calc(100% - 32px),1200px);display:flex;align-items:stretch;gap:12px;
  transition:top .42s cubic-bezier(.65,0,.35,1),width .42s cubic-bezier(.65,0,.35,1)}
.header-row.is-scrolled{top:10px;width:min(calc(100% - 32px),1060px)}
.nav{position:relative;z-index:2;flex:1 1 auto;min-width:0;
  height:70px;box-sizing:border-box;padding:0 12px 0 26px;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.42) 50%,rgba(255,255,255,.55));
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border:none;border-radius:var(--r-pill);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(24,21,32,.04),0 18px 50px -12px rgba(123,28,158,.16),0 6px 18px rgba(24,21,32,.07);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .42s cubic-bezier(.65,0,.35,1),background .42s ease,box-shadow .42s ease,gap .42s cubic-bezier(.65,0,.35,1)}
/* specular light-leak rim — bright top-left, fades out (premium glass edge, not a flat outline) */
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 36%,rgba(255,255,255,0) 62%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* slow ambient sheen drifting inside the glass */
.nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(55% 130% at 18% -10%,rgba(255,255,255,.5),transparent 60%),radial-gradient(45% 130% at 92% 110%,rgba(222,140,235,.13),transparent 55%);
  animation:navAurora 18s ease-in-out infinite alternate}
@keyframes navAurora{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,0,0)}}
.nav__brand,.nav__links,.nav__actions,.nav__menu-toggle{position:relative;z-index:2}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__login{color:var(--accent-d);font-weight:600;font-size:.97rem;letter-spacing:-.01em;padding:13px 22px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(217,76,227,.12);
  box-shadow:inset 0 0 0 1px rgba(217,76,227,.3),0 4px 14px rgba(217,76,227,.13);
  transition:transform .3s var(--ease-out-soft),background .3s ease,box-shadow .3s ease,color .3s ease}
.nav__login:hover{transform:translateY(-2px);background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px var(--accent),0 10px 24px rgba(217,76,227,.36)}
.header-row.is-scrolled .nav{padding:0 11px 0 22px;gap:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.64) 50%,rgba(255,255,255,.74));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(24,21,32,.05),0 14px 40px -10px rgba(123,28,158,.2),0 4px 12px rgba(24,21,32,.08)}
.nav__brand{display:inline-flex;transition:transform .4s var(--ease-out-soft)}
.nav__brand:hover{transform:scale(1.045)}
.nav__logo{height:39px;width:auto;display:block;transform:translateY(-2px)}
.nav__links{display:flex;align-items:center;gap:2px}
/* sliding magic indicator — physically follows the hovered/active link */
.nav__indicator{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:var(--r-pill);opacity:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(217,76,227,.2),rgba(217,76,227,.1));
  box-shadow:inset 0 0 0 1px rgba(217,76,227,.3),inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(155,43,201,.16);
  transition:transform .55s var(--ease-elastic),width .55s var(--ease-elastic),opacity .35s ease}
.nav__link{position:relative;z-index:1;white-space:nowrap;font-size:1.04rem;color:rgba(123,28,158,.86);padding:9px 13px;border-radius:var(--r-pill);transition:color .3s;font-weight:600;letter-spacing:-.01em}
.nav__link:hover,.nav__link.is-active{color:#6d1a8f}
.nav .nav__cta{font-size:.97rem;padding:13px 22px;letter-spacing:-.01em;box-shadow:0 6px 16px rgba(24,21,32,.18)}
.nav .nav__cta:hover{transform:translateY(-2px);background:var(--warm-black);color:#fff;box-shadow:0 10px 22px rgba(24,21,32,.26)}
.nav__menu-toggle{display:none;width:46px;height:46px;border-radius:50%;background:var(--warm-black);color:#fff;align-items:center;justify-content:center;border:none;cursor:pointer;font-size:1.2rem;line-height:1;flex:0 0 auto;box-shadow:0 6px 16px rgba(24,21,32,.22);transition:transform .3s var(--ease-out-soft),background .3s ease}
.nav__menu-toggle:active{transform:scale(.92)}
.nav__menu-toggle.is-open{background:var(--magenta-deep)}
.nav__mobile{position:fixed;top:84px;left:14px;right:14px;z-index:99;
  background:rgba(32,20,48,.96);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:none;border-radius:var(--r-l);box-shadow:var(--ombra-2);
  padding:12px;display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);transform-origin:top center;pointer-events:none;
  transition:opacity .3s ease,transform .38s var(--ease-out-soft),visibility .3s ease}
.nav__mobile.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav__mobile a{padding:15px 18px;border-radius:16px;color:#fff;font-size:1.06rem;font-weight:600;letter-spacing:-.01em;transition:background .25s ease}
.nav__mobile a:hover,.nav__mobile a:active{background:rgba(255,255,255,.16)}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__menu-toggle{display:flex}
  .nav__actions{display:none}
  .nav{height:62px;padding:0 10px 0 18px}
  .header-row.is-scrolled .nav{padding:0 10px 0 16px}
  .nav__logo{height:33px}
}

/* ===== Focus (tastiera) — anello brand, niente outline col mouse ===== */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.nav__login:focus-visible,.nav__cta:focus-visible{border-radius:var(--r-pill)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--r-pill);font-family:var(--f-body);font-weight:600;font-size:.95rem;cursor:pointer;border:none;position:relative;transition:transform .3s var(--ease-out-soft),box-shadow .3s,background .3s,color .3s;white-space:nowrap;letter-spacing:-.005em}
.btn--primary{background:var(--warm-black);color:var(--cream);box-shadow:0 12px 30px rgba(24,21,32,.18),inset 0 1px 0 rgba(255,255,255,.1)}
.btn--primary:hover{background:var(--accent);color:#fff;box-shadow:0 18px 40px rgba(217,76,227,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--glass{background:rgba(255,255,255,.7);border:1px solid var(--glass-border);color:var(--warm-black);box-shadow:var(--shadow-sm),var(--glass-inset)}
.btn--glass:hover{background:#fff;box-shadow:var(--shadow-md),var(--glass-inset)}
.btn--magenta{background:var(--accent);color:#fff;box-shadow:0 14px 36px rgba(217,76,227,.38),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--magenta:hover{background:var(--accent-d);box-shadow:0 18px 44px rgba(196,47,208,.46)}
.btn--small{padding:10px 18px;font-size:.86rem}
.btn--lg{padding:17px 32px;font-size:1.05rem}
.btn__arrow{display:inline-block;transition:transform .3s var(--ease-out-soft)}
.btn:hover .btn__arrow{transform:translateX(4px)}
/* every button on the site lifts the same amount on hover */
.btn:hover{transform:translateY(-2px)}

/* ===== Pill ===== */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);border-radius:var(--r-pill);font-size:.82rem;font-weight:500;color:var(--warm-black);box-shadow:var(--shadow-sm),var(--glass-inset)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 10px var(--leaf);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}

/* ===== Glass card ===== */
/* «carta»: superficie quieta del sistema — il vetro vive solo nell'header */
.glass{background:#fff;border:1px solid rgba(204,85,222,.13);border-radius:var(--r-l);box-shadow:var(--ombra-1);position:relative;overflow:hidden}
.glass-card{padding:var(--s4);transition:transform var(--vel-2) var(--curva),box-shadow var(--vel-2) var(--curva)}
.glass-card:hover{transform:translateY(-4px);box-shadow:var(--ombra-2)}

/* ===== Hero ===== */
/* ===== L'ELEMENTO FIRMA — il sentiero della formica =====
   Un percorso punteggiato che parte dai piedi della mascotte, attraversa
   le tappe, si immerge nel sottosuolo (il problema: sei invisibile) e
   arriva a destinazione nella CTA: il pin — ti hanno trovato. */
.trail-seg{position:relative;height:clamp(76px,9vw,124px);pointer-events:none;z-index:1}
.trail-seg svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.trail-path{fill:none;stroke:var(--viola);stroke-width:3;stroke-linecap:round;stroke-dasharray:.01 10;opacity:.5;vector-effect:non-scaling-stroke}
@supports (animation-timeline: view()){
  .trail-seg--draw{animation:trailReveal linear both;animation-timeline:view();animation-range:entry 0% cover 48%}
  @keyframes trailReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -8% 0)}}
}
/* niente stub verticale dritto sotto la formica: il sentiero comincia direttamente con la curva del primo segmento */
.hero__trail-start{display:none}
@media (max-width:1024px){
  .hero__trail-start{display:none}
  .trail-seg{height:60px}
  .trail-seg svg{display:none}
  .trail-seg::before{content:'';position:absolute;left:50%;top:4px;bottom:4px;width:3px;transform:translateX(-50%);opacity:.5;
    background-image:radial-gradient(circle,var(--viola) 1.5px,transparent 1.6px);background-size:3px 10px;background-repeat:repeat-y}
}
/* entrando nel sottosuolo il sentiero svanisce (sei invisibile); uscendo riprende forza */
.trail-seg--fadeout{-webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 96%);mask-image:linear-gradient(180deg,#000 25%,transparent 96%)}
.trail-seg--fadein{-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 70%);mask-image:linear-gradient(180deg,transparent 4%,#000 70%)}
/* l'arrivo: il pin — sei stato trovato */
.trail-pin{display:flex;justify-content:center;margin:0 0 var(--s2)}
.trail-pin svg{display:block}
@media (prefers-reduced-motion:reduce){.trail-seg--draw{animation:none;clip-path:none}}

/* ===== HERO — il palcoscenico: la formica al lavoro, il sentiero parte dai suoi piedi ===== */
.hero{padding-top:clamp(140px,16vw,190px);padding-bottom:clamp(40px,5vw,64px);position:relative;min-height:86vh;display:flex;align-items:flex-start}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4.5vw,72px);align-items:end;width:100%}
.hero__copy{display:flex;flex-direction:column;gap:var(--s3);align-self:center;padding-bottom:clamp(8px,2vw,32px)}
.hero__title{margin-top:4px;font-size:clamp(2.6rem,6.4vw,5.5rem);line-height:.99;letter-spacing:-.045em;text-wrap:balance}
.hero__sub{font-size:clamp(1.05rem,1.25vw,1.2rem);max-width:50ch}
/* checklist hero: niente pallini di default, spunte magenta in tile arrotondate */
.hero__points{list-style:none;display:grid;gap:12px;max-width:46ch;margin:0}
.hero__points li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(1rem,1.05vw,1.08rem);line-height:1.4;color:rgba(36,27,48,.82)}
.hero__points .hl-grad{font-weight:650;background:linear-gradient(96deg,var(--viola-profondo) 0%,var(--viola) 52%,var(--viola-vivo) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__points li::before{content:"";flex:none;width:23px;height:23px;margin-top:1px;border-radius:8px;
  background:rgba(204,85,222,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC55DE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(204,85,222,.16)}

.hero__actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-top:var(--s1)}
.hero__micro{font-size:.9rem;color:rgba(36,27,48,.62);margin-top:2px}
/* palcoscenico: spotlight tenue dietro, terra sotto i piedi, sentiero che parte */
.hero__visual{position:relative;aspect-ratio:512/562;max-height:640px;display:grid;place-items:end center}
.hero__visual::before{content:'';position:absolute;inset:-6% -14% -2%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 58%,var(--velo) 0%,rgba(244,236,248,0) 70%)}
.hero__visual::after{content:'';position:absolute;left:50%;bottom:8px;width:46%;height:22px;z-index:1;pointer-events:none;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,27,48,.16),transparent 70%)}
/* Mascotte = immagine statica trasparente (WebP). La classe .hero__video è storica
   (un tempo era un <video>); ora è un <img>, stesse regole di layout. */
.hero__video{position:relative;z-index:2;height:100%;max-width:100%;object-fit:contain;display:block}
.hero__visual img{position:relative;z-index:2;width:84%;height:auto;filter:drop-shadow(0 34px 44px rgba(24,21,32,.3))}
/* cartellini di lavoro (non vetrini): carta, bordo brand, puntina */
.hero__float-card{position:absolute;z-index:3;padding:12px 16px 12px 14px;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid rgba(204,85,222,.16);border-radius:var(--r-m);font-size:.85rem;box-shadow:var(--ombra-1)}
.hero__float-card::before{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;
  transform:translateX(-50%);background:var(--viola);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 1px 3px rgba(123,28,158,.4)}
.hero__float-card--1{top:8%;left:-4%;animation:floatY 6s ease-in-out infinite}
.hero__float-card--2{bottom:14%;right:-3%;animation:floatY 7s ease-in-out infinite reverse}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero__fc-ico{width:36px;height:36px;border-radius:50%;background:var(--inchiostro);color:var(--carta);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.95rem;flex:none}
.hero__fc-ico--m{background:var(--viola);color:#fff}
.hero__fc-label{font-weight:600;color:var(--inchiostro)}
.hero__fc-sub{font-size:.75rem;color:rgba(36,27,48,.6);display:block;margin-top:2px}
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{max-height:440px;margin-top:8px}
  .hero__float-card--1{left:0}.hero__float-card--2{right:0}.hero__float-card--3{right:0}.hero__float-card--4{left:0}
}
/* small phones: la riga "Poi ti facciamo trovare." stava esattamente al limite e su alcuni device traboccava */
@media (max-width:560px){.hero__title{font-size:clamp(2rem,9.4vw,2.5rem)}}
/* short viewports (zoomed-in displays): keep the CTA + carry-ants above the fold */
@media (min-width:1025px) and (max-height:820px){
  .hero{min-height:0;padding-bottom:clamp(36px,5vh,64px)}
  .hero__copy{gap:16px}
  .hero__title{font-size:clamp(2.3rem,5.2vw,4rem)}
  .hero__visual{max-height:clamp(340px,62vh,520px)}
}

/* ===== Stats ===== */
.compare{padding-top:0!important}
.compare__layout{display:grid;grid-template-columns:1.72fr .8fr;gap:36px;align-items:center}
.compare__card{position:relative;padding:38px 30px 28px;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(135% 105% at 26% -18%,rgba(255,255,255,.96),rgba(255,255,255,.58) 44%,rgba(241,216,248,.34) 100%);
  box-shadow:var(--shadow-xl),var(--glass-inset),0 30px 90px -28px rgba(204,85,222,.32)}
.compare__glow{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(150% 120% at 50% -25%,rgba(255,255,255,.6),rgba(255,255,255,.18) 45%,transparent 72%)}
.cmp{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.5fr 1.18fr;align-items:start}
.cmp__col{display:flex;flex-direction:column}
.cmp__cell{display:flex;align-items:center;gap:11px;height:82px;padding:0 18px;font-size:.93rem;line-height:1.3}
.cmp__cell--head{height:44px;font-size:.67rem;text-transform:uppercase;letter-spacing:.17em;font-weight:600;color:rgba(24,21,32,.36)}
.cmp__col--feat .cmp__cell{font-weight:600;color:rgba(24,21,32,.82);letter-spacing:-.005em}
.cmp__col--feat .cmp__cell+.cmp__cell,
.cmp__col--other .cmp__cell+.cmp__cell{border-top:1px solid;border-image:linear-gradient(90deg,transparent,rgba(24,21,32,.11) 18%,rgba(24,21,32,.11) 82%,transparent) 1}

/* featured SveaHost column — elevated glossy magenta panel */
.cmp__col--svea{position:relative;border-radius:20px;color:#fff;isolation:isolate;
  background:linear-gradient(158deg,#D866EA 0%,var(--magenta) 44%,var(--magenta-deep) 100%);
  box-shadow:0 28px 62px -22px rgba(155,43,201,.75),0 6px 16px rgba(155,43,201,.28),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .45s var(--ease-out-soft),box-shadow .45s var(--ease-out-soft)}
.cmp__sheen{display:none} /* luccichio rimosso: la boldness vive nel sentiero */
.cmp__col--svea .cmp__cell+.cmp__cell{border-top:1px solid;border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 18%,rgba(255,255,255,.26) 82%,transparent) 1}
.cmp__col--svea .cmp__cell--head{color:#fff;font-family:var(--f-display);font-weight:800;font-size:.95rem;letter-spacing:.01em;text-transform:none}
.cmp__col--svea em{font-style:normal;color:rgba(255,255,255,.78);font-weight:450;font-size:.88em}
.compare__card:hover .cmp__col--svea{transform:translateY(-5px);
  box-shadow:0 38px 76px -22px rgba(155,43,201,.85),0 8px 20px rgba(155,43,201,.32),inset 0 1px 0 rgba(255,255,255,.45)}

.cmp__col--other .cmp__cell{color:rgba(24,21,32,.5)}
.cmp__col--other .cmp__cell--head{color:rgba(24,21,32,.36)}

.cmp__ic{flex:none;width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;line-height:1;transform-origin:center}
.cmp__ic--yes{background:#fff;color:var(--magenta-deep);box-shadow:0 5px 13px rgba(0,0,0,.2)}
/* il pop del ✓ è ora legato allo scroll (vedi blocco .cmp[data-stagger] più sotto), non al load */
.cmp__ic--no{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(24,21,32,.15);color:transparent;position:relative}
.cmp__ic--no::before,.cmp__ic--no::after{content:'';position:absolute;width:10px;height:2px;background:rgba(24,21,32,.36);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}
.cmp__ic--no::after{transform:translate(-50%,-50%) rotate(-45deg)}
.cmp__ic--down{color:transparent;position:relative}
.cmp__ic--down::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--magenta-deep);clip-path:polygon(30% 0%,70% 0%,70% 50%,100% 50%,50% 100%,0% 50%,30% 50%)}
.cmp__ic--down::after{display:none}
@keyframes cmpPop{0%{transform:scale(0) rotate(-30deg);opacity:0}55%{transform:scale(1.18) rotate(0);opacity:1}100%{transform:scale(1)}}
@keyframes cmpSheen{0%{transform:translateX(-180%) skewX(-9deg)}50%,100%{transform:translateX(330%) skewX(-9deg)}}

.cmp__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:4;
  background:var(--warm-black);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;white-space:nowrap;box-shadow:0 10px 24px rgba(24,21,32,.32)}
@keyframes cmpBadge{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}

/* standalone comparison card (perche page) — same component, centered */
.compare__card--solo{max-width:1080px;margin:0 auto}

/* dark variant */
.compare__card--dark{background:linear-gradient(145deg,#0c0418 0%,#1a083a 55%,#220a46 100%);box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.05),0 30px 90px -28px rgba(204,85,222,.6)}
.compare__card--dark .compare__glow{background:radial-gradient(150% 120% at 50% -25%,rgba(204,85,222,.1),rgba(122,28,180,.04) 45%,transparent 72%)}
.compare__card--dark .cmp__cell--head{color:rgba(255,255,255,.28)}
.compare__card--dark .cmp__col--feat .cmp__cell{color:rgba(255,255,255,.8)}
.compare__card--dark .cmp__col--feat .cmp__cell+.cmp__cell,.compare__card--dark .cmp__col--other .cmp__cell+.cmp__cell{border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 18%,rgba(255,255,255,.1) 82%,transparent) 1}
.compare__card--dark .cmp__col--other .cmp__cell{color:rgba(255,255,255,.38)}
.compare__card--dark .cmp__col--other .cmp__cell--head{color:rgba(255,255,255,.26)}
.compare__card--dark .cmp__ic--no{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.compare__card--dark .cmp__ic--no::before,.compare__card--dark .cmp__ic--no::after{background:rgba(255,255,255,.42)}

.compare__aside{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.compare__title{font-size:clamp(1.7rem,2.5vw,2.25rem);letter-spacing:-.02em;line-height:1.04}
.compare__sub{color:rgba(24,21,32,.6);font-size:.97rem;margin-bottom:6px}
@media (max-width:920px){
  .compare__layout{grid-template-columns:1fr;gap:26px}
}
@media (max-width:600px){
  /* 3 colonne LEGGIBILI con scroll orizzontale (prima si nascondevano le etichette
     e si schiacciava tutto → illeggibile). Etichette ripristinate, larghezze fisse. */
  .compare__card{padding:34px 14px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{grid-template-columns:118px 226px 176px;width:max-content}
  .cmp__col--feat{display:flex}
  .cmp__cell{height:auto;min-height:60px;font-size:.86rem;padding:11px 13px;gap:8px;line-height:1.35}
  .cmp__cell--head{height:auto;min-height:0;padding:9px 13px}
  .cmp__col--svea{box-shadow:0 10px 26px -12px rgba(155,43,201,.55),inset 0 1px 0 rgba(255,255,255,.4)}
}

/* ===== Section head ===== */
.section-head{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.section-head__title{max-width:20ch}
.section-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.section-head.center .section-head__title{max-width:24ch;margin-inline:auto}
@media (max-width:820px){.section-head{grid-template-columns:1fr;gap:18px}}

/* ===== Advantages (staggered) ===== */
.advantages{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:18px}
.advantage{padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px;min-height:300px}
.advantage:nth-child(2){transform:translateY(28px)}
.advantage:nth-child(3){transform:translateY(56px)}
.advantage__num{font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--magenta-deep)}
.advantage__title{margin-bottom:2px}
.advantage__desc{font-size:.98rem}
.advantage__ico{width:56px;height:56px;border-radius:18px;background:var(--warm-black);color:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:auto;font-size:1.4rem}
.advantage:nth-child(2) .advantage__ico{background:var(--magenta);color:#fff}
.advantage:nth-child(3) .advantage__ico{background:var(--magenta-soft);color:var(--warm-black)}
@media (max-width:980px){.advantages{grid-template-columns:1fr}.advantage:nth-child(2),.advantage:nth-child(3){transform:none;margin-top:0}}

/* ===== Steps (how it works) ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-height:240px}
.step__num{font-family:var(--f-display);width:48px;height:48px;border-radius:14px;background:var(--warm-black);color:var(--cream);display:grid;place-items:center;font-weight:700;font-size:1.1rem}
.step:nth-child(3) .step__num{background:var(--magenta);color:#fff}
@media (max-width:880px){.steps{grid-template-columns:1fr}}

/* How it works → soft, elegant vertical flow */
.steps--flow{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);--progress:0}
.steps--flow::after{content:'';position:absolute;left:28px;top:44px;bottom:44px;width:4px;z-index:0;border-radius:4px;transform-origin:top;transform:scaleY(var(--progress));background:linear-gradient(180deg,var(--magenta),var(--magenta-deep));-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 100%);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 100%)}
.steps--flow::before{content:'';position:absolute;left:28.5px;top:44px;bottom:44px;width:3px;z-index:0;opacity:.45;
  background-image:radial-gradient(circle,var(--viola) 1.5px,transparent 1.6px);background-size:3px 10px;background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.flow-step{position:relative;z-index:2;display:grid;grid-template-columns:60px 1fr;gap:clamp(20px,2.4vw,30px);align-items:center;
  opacity:0;animation:fadeUp .7s var(--ease-out-soft) forwards}
.steps--flow>*:nth-child(2){animation-delay:.07s}
.steps--flow>*:nth-child(3){animation-delay:.14s}
.steps--flow>*:nth-child(4){animation-delay:.21s}
.steps--flow>*:nth-child(5){animation-delay:.28s}
.steps--flow>*:nth-child(6){animation-delay:.35s}
.steps--flow>*:nth-child(7){animation-delay:.42s}
.steps--flow>*:nth-child(8){animation-delay:.49s}

/* phase dividers on the timeline — who does what, at a glance */
.flow-phase{position:relative;z-index:2;display:grid;grid-template-columns:60px 1fr;gap:clamp(20px,2.4vw,30px);align-items:center;margin:4px 0 -2px;opacity:0;animation:fadeUp .7s var(--ease-out-soft) forwards}
.flow-phase__marker{justify-self:center;width:11px;height:11px;border-radius:3px;transform:rotate(45deg);
  background:linear-gradient(145deg,var(--magenta),var(--magenta-deep));
  box-shadow:0 0 0 4px rgba(204,85,222,.14),0 4px 10px rgba(155,43,201,.38)}
.flow-phase__label{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-deep);white-space:nowrap}
.flow-phase__label em{font-style:normal;color:rgba(24,21,32,.46);letter-spacing:.06em;text-transform:none}
.flow-phase__label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(204,85,222,.35),transparent)}

/* step header row: kicker + time chip */
.flow-step__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.flow-step__head .flow-step__kicker{margin-bottom:0}
.flow-step__tag{flex:none;font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta-deep);background:rgba(204,85,222,.1);padding:4px 11px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(204,85,222,.18)}

.flow-step__num{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:#fff;
  background:linear-gradient(165deg,#DE74EA 0%,var(--magenta) 46%,#9226BE 100%);
  box-shadow:0 10px 22px -8px rgba(123,28,158,.42),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -7px 12px rgba(86,14,118,.28);
  transition:transform .45s var(--ease-out-soft),box-shadow .45s var(--ease-out-soft)}
.flow-step__num::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);pointer-events:none}
.flow-step__num::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(204,85,222,.5);opacity:0;transform:scale(.7);z-index:-1;pointer-events:none}
.flow-step:hover .flow-step__num{transform:scale(1.04);box-shadow:0 14px 28px -8px rgba(123,28,158,.5),0 0 0 6px rgba(204,85,222,.1),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -7px 12px rgba(86,14,118,.28)}
.flow-step.reached .flow-step__num{box-shadow:0 14px 30px -8px rgba(123,28,158,.55),0 0 0 5px rgba(204,85,222,.12),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -7px 12px rgba(86,14,118,.28);animation:stepPop .55s var(--ease-elastic)}
.flow-step.reached .flow-step__num::before{animation:stepPing 1s var(--ease-out-soft)}
@keyframes stepPing{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
@keyframes stepPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

.flow-step__card{position:relative;padding:clamp(20px,2.3vw,26px) clamp(24px,3vw,34px);border-radius:var(--r-lg);
  box-shadow:0 16px 40px -26px rgba(123,28,158,.32),var(--glass-inset);
  transition:transform .5s var(--ease-out-soft),box-shadow .5s var(--ease-out-soft)}
.flow-step__card::after{content:'';position:absolute;left:0;top:50%;width:3px;height:58%;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--magenta),var(--magenta-deep));transform:translateY(-50%) scaleY(0);transform-origin:center;transition:transform .55s var(--ease-out-soft);pointer-events:none;z-index:2}
.flow-step.in-view .flow-step__card::after,.flow-step.reached .flow-step__card::after,.flow-step:hover .flow-step__card::after{transform:translateY(-50%) scaleY(1)}
.flow-step__kicker{display:block;font-family:var(--f-mono);font-weight:500;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-deep);opacity:.85;margin-bottom:9px}
.flow-step__card h3{font-size:1.22rem;font-weight:700;margin-bottom:7px;letter-spacing:-.018em}
.flow-step__card p{font-size:.97rem;margin:0;color:rgba(24,21,32,.66);line-height:1.62}
.flow-step:hover .flow-step__card{transform:translateY(-4px);box-shadow:0 26px 54px -28px rgba(123,28,158,.42),var(--glass-inset)}
.flow-step.reached .flow-step__card{box-shadow:0 22px 50px -28px rgba(123,28,158,.4),0 0 0 1px rgba(204,85,222,.12),var(--glass-inset)}
/* connector node -> card */
/* niente lineetta orizzontale dal pallino alla card: il numero e la linea verticale bastano */
.flow-step::after{display:none}
/* the comet that rides the leading edge of the progress fill */
/* la formica-cliente vista DALL'ALTO che percorre il sentiero. --dir: 1 scende, -1 sale (flip verticale) */
.steps__dot{position:absolute;left:30px;width:26px;height:auto;z-index:1;color:var(--inchiostro);pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scaleY(var(--dir,1));transform-origin:center;overflow:visible;
  filter:drop-shadow(0 3px 3px rgba(36,27,48,.22));transition:opacity .3s ease}
/* le due tripodi oscillano in controfase; zampe e antenne ferme di default, in moto solo mentre cammina */
.steps__dot .tw-legA,.steps__dot .tw-legB{transform-box:view-box;transform-origin:20px 30px;animation:twWalk .46s ease-in-out infinite;animation-play-state:paused}
.steps__dot .tw-legB{animation-delay:-.23s}
.steps__dot .tw-ae{transform-box:view-box;transform-origin:20px 47px;animation:twAntennae .46s ease-in-out infinite;animation-play-state:paused}
.steps__dot.is-walking .tw-legA,.steps__dot.is-walking .tw-legB,.steps__dot.is-walking .tw-ae{animation-play-state:running}
@keyframes twWalk{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes twAntennae{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

@media (max-width:560px){
  .steps--flow{gap:14px}
  .flow-step{grid-template-columns:50px 1fr;gap:18px}
  .flow-step__num{width:50px;height:50px;font-size:1.15rem}
  .steps--flow::before{left:24px}.steps--flow::after{left:23.5px}
  .steps__dot{left:25.5px}
  .flow-step::after{left:50px;width:14px}
  .flow-step__card{padding:18px 22px}
  .flow-phase{grid-template-columns:50px 1fr;gap:18px}
  .flow-phase__label{white-space:normal;line-height:1.6}
}

/* ===== Steps showcase (come-funziona): centered spine, alternating cards ===== */
.flow-step__ghost{position:absolute;top:2px;right:16px;z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,rgba(204,85,222,.13),rgba(204,85,222,.02));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.flow-step__card>*:not(.flow-step__ghost){position:relative;z-index:1}
@media (min-width:881px){
  .steps--showcase{max-width:1060px;gap:clamp(22px,2.6vw,34px)}
  .steps--showcase::before{left:calc(50% - 1.5px)}
  .steps--showcase::after{left:calc(50% - 2px)}
  .steps--showcase .steps__dot{left:50%}
  .steps--showcase .flow-step{grid-template-columns:1fr 84px 1fr;gap:clamp(22px,2.8vw,40px)}
  .steps--showcase .flow-step__num{grid-column:2;grid-row:1;width:76px;height:76px;font-size:1.6rem;justify-self:center}
  .steps--showcase .flow-step--r .flow-step__card{grid-column:3;grid-row:1}
  .steps--showcase .flow-step--l .flow-step__card{grid-column:1;grid-row:1}
  .steps--showcase .flow-step::after{display:none}
  .steps--showcase .flow-step__card{padding:clamp(22px,2.4vw,30px) clamp(24px,2.8vw,34px)}
  .steps--showcase .flow-step__card h3{font-size:clamp(1.25rem,1.8vw,1.45rem)}
  .steps--showcase .flow-step__card p{font-size:1rem}
  .steps--showcase .flow-step--l .flow-step__card::after{left:auto;right:0;border-radius:3px 0 0 3px}
  /* phase pills sit centered on the spine */
  .steps--showcase .flow-phase{display:flex;justify-content:center;margin:8px 0 2px}
  .steps--showcase .flow-phase__marker{display:none}
  .steps--showcase .flow-phase__label{white-space:nowrap;padding:9px 20px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.78);box-shadow:var(--shadow-sm),var(--glass-inset),inset 0 0 0 1px rgba(204,85,222,.16)}
  .steps--showcase .flow-phase__label::after{display:none}
}

/* ===== Dual cards ===== */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dual-card{padding:clamp(30px,3.5vw,48px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-height:300px;justify-content:space-between}
.dual-card__eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--magenta-deep);font-weight:600}
@media (max-width:820px){.dual{grid-template-columns:1fr}}

/* ===== Section variety — distinct treatments, same language ===== */
.eyebrow--light{color:var(--magenta-soft)}
.eyebrow--light::before{background:var(--magenta-soft);opacity:.85}

/* Mission → dark manifesto band */
/* il sottosuolo: qui il sentiero scompare — sei invisibile. Notte viola piatta, una sola galleria ad arco. */
.band--dark{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(42px,6vw,84px);
  background:var(--viola-notte);
  box-shadow:0 36px 90px -34px rgba(32,20,48,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.band--dark .band__glow{position:absolute;inset:0;pointer-events:none;
  /* la galleria: due archi sottili all'orizzonte del sottosuolo */
  background:radial-gradient(560px 560px at 82% 128%,transparent 61.5%,rgba(204,85,222,.32) 62%,rgba(204,85,222,.32) 62.7%,transparent 63.3%),
             radial-gradient(400px 400px at 82% 128%,transparent 60.5%,rgba(204,85,222,.16) 61.2%,rgba(204,85,222,.16) 62%,transparent 62.8%),
             radial-gradient(560px 560px at 82% 128%,rgba(204,85,222,.05) 62%,transparent 63%)}
.band--dark::before{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.1;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band--dark>*{position:relative;z-index:1}
.band__title{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;margin:16px 0 18px;max-width:17ch;text-wrap:balance}
.band__title em{font-style:italic;color:#E3A6EF}
.band__text{font-size:clamp(1rem,1.2vw,1.12rem);color:rgba(255,255,255,.82);max-width:50ch;line-height:1.6}
.band--dark strong{color:#fff}

/* How it works → connected timeline */
.steps--timeline{position:relative}
.steps--timeline::before{content:'';position:absolute;left:17%;right:17%;top:calc(clamp(28px,3vw,40px) + 28px);height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--magenta-soft) 0 9px,transparent 9px 18px);opacity:.7}
.steps--timeline .step{position:relative;z-index:1}
.steps--timeline .step__num,
.steps--timeline .step:nth-child(3) .step__num{width:58px;height:58px;border-radius:50%;font-size:1.3rem;
  background:linear-gradient(150deg,#D866EA,var(--magenta-deep));color:#fff;
  box-shadow:0 10px 26px rgba(155,43,201,.42),inset 0 1px 0 rgba(255,255,255,.4)}
@media (max-width:880px){.steps--timeline::before{display:none}}

/* Advantages → staggered, less uniform grid */
.advantages{align-items:start}
.advantage:nth-child(2){margin-top:34px}
.advantage:nth-child(3){margin-top:17px}

/* Dual → second card filled magenta for contrast */
.dual-card--accent{background:var(--viola-profondo);border-color:transparent;color:#fff;
  box-shadow:var(--ombra-2),inset 0 1px 0 rgba(255,255,255,.22)}
.dual-card--accent .dual-card__eyebrow{color:rgba(255,255,255,.92)}
.dual-card--accent h3,.dual-card--accent p{color:#fff}
.dual-card--accent p{color:rgba(255,255,255,.9)}
.dual-card--accent .btn--magenta{background:#fff;color:var(--accent-d);border-color:#fff}
.dual-card--accent .btn--magenta:hover{background:#fff;color:var(--accent-d)}

/* ===== Pricing ===== */
.toggle{display:inline-flex;align-items:center;background:var(--glass-bg-strong);border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:6px;position:relative;box-shadow:var(--shadow-sm),var(--glass-inset);margin:0 auto}
.toggle button{font-family:var(--f-body);font-weight:600;border:none;background:none;cursor:pointer;padding:10px 22px;border-radius:var(--r-pill);position:relative;z-index:2;color:var(--warm-black);transition:color .3s;font-size:.92rem}
.toggle .knob{position:absolute;top:6px;bottom:6px;border-radius:var(--r-pill);background:var(--warm-black);transition:left .4s var(--ease-out-soft),width .4s var(--ease-out-soft);z-index:1}
.toggle button.active{color:var(--cream)}
.save-badge{display:inline-block;background:var(--leaf);color:#fff;font-weight:600;font-size:.74rem;padding:.25em .7em;border-radius:var(--r-pill);margin-left:.5rem}
.price-card{max-width:560px;margin:clamp(28px,4vw,44px) auto 0;padding:clamp(32px,4vw,52px);text-align:left}
.price-amt{display:flex;align-items:baseline;gap:.3rem;font-family:var(--f-display);font-weight:700;color:var(--warm-black)}
.price-amt .num{font-size:clamp(3rem,7vw,4.4rem);line-height:1}
.price-amt .per{font-size:1.1rem;font-weight:500;opacity:.6;font-family:var(--f-body)}
.price-note{font-weight:600;color:var(--leaf);margin-top:.4rem;min-height:1.5em}
.incl{list-style:none;margin:1.8rem 0;display:grid;gap:.85rem}
.incl--2col{grid-template-columns:1fr 1fr;column-gap:2.4rem;margin:1.4rem 0 1.8rem}
@media (max-width:680px){.incl--2col{grid-template-columns:1fr}}
.incl li{display:flex;gap:.7rem;align-items:flex-start;font-weight:450;color:var(--warm-black)}
.incl li svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--magenta)}
.price-card .btn{width:100%;justify-content:center}

/* (le tabelle di confronto usano il componente .compare__card/.cmp condiviso) */

/* prezzi: il piano a sinistra, il confronto onesto affiancato a destra */
.price-layout{display:grid;grid-template-columns:minmax(330px,415px) minmax(0,1fr);gap:clamp(26px,3vw,50px);align-items:start;max-width:1180px;margin:0 auto}
.price-layout__plan{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px)}
.price-layout__plan .price-card{max-width:none;width:100%;margin:0}
.price-layout__cmp{min-width:0}
.price-layout__cmp .section-head{margin-bottom:clamp(16px,2vw,22px)}
.price-layout__cmp .compare__card--solo{max-width:none;margin:0}
@media (max-width:1040px){
  .price-layout{grid-template-columns:1fr;max-width:620px;gap:clamp(26px,5vw,40px)}
}

/* ===== Stats (perche) ===== */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.stat__num{font-family:var(--f-display);font-size:clamp(2.1rem,3.2vw,2.9rem);font-weight:700;letter-spacing:-.03em;color:var(--warm-black);line-height:1}
.stat__lbl{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(24,21,32,.5)}
@media (max-width:820px){.stats__grid{grid-template-columns:repeat(2,1fr)}}

/* ===== FAQ ===== */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq{padding:0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:24px 28px;font-family:var(--f-display);font-weight:700;font-size:1.12rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--warm-black)}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;transition:transform .35s var(--ease-out-soft),background .3s;font-weight:700}
.faq[open] .plus{transform:rotate(135deg);background:var(--magenta);color:#fff}
.faq .ans{padding:0 28px 24px;color:rgba(24,21,32,.72)}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-family:var(--f-display);margin-bottom:.4rem;font-size:.92rem}
.field input,.field textarea{width:100%;font-family:inherit;font-size:1rem;padding:.9em 1.05em;border-radius:var(--r-md);border:1px solid var(--glass-border);background:rgba(255,255,255,.5);color:var(--warm-black);transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(204,85,222,.16)}
.field textarea{min-height:130px;resize:vertical}
.contact-side .ci{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.4rem}
.contact-side .ci svg{flex:none;width:22px;height:22px;color:var(--magenta-deep);margin-top:3px}
.contact-side .ci a{color:var(--magenta-deep);font-weight:600}
.form-ok{display:none;background:rgba(63,125,88,.12);border:1px solid var(--leaf);color:var(--leaf);border-radius:var(--r-md);padding:1rem;font-weight:600;margin-bottom:1rem}

/* ===== CTA block ===== */
.cta-block{padding:clamp(40px,6vw,84px);display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;
  background:radial-gradient(72% 58% at 50% -6%,rgba(255,255,255,.20),transparent 60%),linear-gradient(135deg,rgba(204,85,222,.94) 0%,rgba(155,43,201,.94) 100%);color:#fff;border-radius:var(--r-xl);position:relative;overflow:hidden}
.cta-block::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:overlay}
.cta-block>*{position:relative;z-index:1}
.cta-block h2{color:#fff;max-width:20ch}
.cta-block p{color:rgba(255,255,255,.92);margin-inline:auto}
.cta-block .eyebrow{color:rgba(255,255,255,.95)}.cta-block .eyebrow::before{background:rgba(255,255,255,.95)}
.cta-block .btn--glass{background:rgba(255,255,255,.96);color:var(--warm-black);border-color:rgba(255,255,255,.96)}
/* CTA finale — fumetto del cliente, design ultra-moderno e animato */
.cta-cloud{position:relative;display:flex;flex-direction:column;align-items:center}
/* l'arrivo: pannello viola quieto — la voce del cliente, senza fuochi d'artificio */
.cta-block--bubble{width:100%;max-width:880px;overflow:visible;gap:15px;isolation:isolate;
  border-radius:var(--r-l);margin-bottom:clamp(8px,1vw,14px);padding:clamp(44px,5.5vw,76px) clamp(32px,5vw,72px);
  background:linear-gradient(165deg,#A833C9 0%,var(--viola-profondo) 58%,#8A1FB8 100%);
  box-shadow:var(--ombra-2),inset 0 1px 0 rgba(255,255,255,.22)}
.cta-block--bubble::before{border-radius:inherit;opacity:.09;z-index:0}
.cta-block--bubble::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(46% 50% at 82% 8%,rgba(255,255,255,.1),transparent 60%)}

/* aurora rimossa: la boldness vive nel sentiero */
.cta-aurora{display:none}

/* bordo a gradiente conico che ruota */
@property --cta-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.cta-border{position:absolute;inset:0;border-radius:inherit;z-index:2;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--cta-a),rgba(255,255,255,.95),rgba(255,150,230,.45),rgba(124,92,255,.85),rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:ctaBorderSpin 7s linear infinite}
@keyframes ctaBorderSpin{to{--cta-a:360deg}}

/* pill "live" con puntino pulsante */
.cta-pill{display:inline-flex;align-items:center;gap:9px;align-self:center;z-index:1;
  padding:7px 16px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.cta-dot{width:8px;height:8px;border-radius:50%;background:#6EE7B7;box-shadow:0 0 10px #6EE7B7;animation:pulse 1.8s ease-in-out infinite}

/* virgoletta decorativa */
.cta-quote{position:absolute;top:clamp(-4px,.6vw,8px);left:clamp(20px,3.4vw,40px);z-index:0;font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,9vw,7rem);line-height:1;color:rgba(255,255,255,.12);pointer-events:none}

/* tipografia + shimmer animato sul titolo */
.cta-block--bubble h2{max-width:15ch;font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.035em;line-height:1.02;
  background:linear-gradient(100deg,#fff 0 42%,#FFD9F7 50%,#fff 58% 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sheenText 7s linear infinite}
.cta-block--bubble p{max-width:46ch;color:rgba(255,255,255,.88);font-size:clamp(1rem,1.25vw,1.12rem)}
.cta-attrib{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:rgba(255,255,255,.7);letter-spacing:.01em;margin-top:-2px}
.cta-block--bubble .btn--lg{margin-top:6px}

/* sottolineatura raffinata su "invisibile" */
.cta-underline{position:relative;white-space:nowrap;
  background:linear-gradient(100deg,#fff 0 42%,#FFD9F7 50%,#fff 58% 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sheenText 7s linear infinite}
.cta-underline::after{content:'';position:absolute;left:0;right:0;bottom:.0em;height:.07em;border-radius:4px;transform:scaleX(1);transform-origin:left;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,217,247,.5))}
@supports (animation-timeline: view()){
  .cta-underline::after{transform:scaleX(0);animation:ctaUnderline linear both;animation-timeline:view();animation-range:entry 18% cover 42%}
}
@keyframes ctaUnderline{to{transform:scaleX(1)}}

/* la coda NON e' un quadrato a se': e' una sporgenza triangolare del fondo del contenitore.
   un triangolo a filo del bordo inferiore non ha "meta' da nascondere" -> non puo' leggersi come quadrato.
   stesso colore del bordo inferiore del pannello, niente ombra. */
.cta-tail{position:absolute;left:50%;bottom:-14px;width:0;height:0;z-index:0;background:none;border-radius:0;
  transform:translateX(-50%);
  border-left:18px solid transparent;border-right:18px solid transparent;border-top:15px solid #8A1FB8}

/* dark variant — CTA finali pagine secondarie (nero + glow magenta) */
.cta-block--bubble.cta--dark{background:var(--viola-notte);
  box-shadow:var(--ombra-2),inset 0 1px 0 rgba(255,255,255,.08)}
.cta--dark .cta-tail{border-top-color:var(--viola-notte)}

/* la formica-cliente che "parla" sotto il fumetto */
.cta-mascot{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.cta-mascot--speaker{z-index:2;margin-top:2px}
.cta-mascot .cta-ant{width:clamp(120px,13vw,172px);height:auto;margin:0;position:relative;z-index:2;filter:drop-shadow(0 16px 20px rgba(24,21,32,.32));animation:floatY 6s ease-in-out infinite}
.cta-shadow{position:absolute;left:50%;bottom:-8px;width:60px;height:10px;transform:translateX(-50%);z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(24,21,32,.42),transparent 72%);filter:blur(2px);animation:ctaShadow 6s ease-in-out infinite}
@keyframes ctaShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.78);opacity:.3}}

@media (max-width:560px){
  .cta-block--bubble{padding:clamp(32px,7vw,46px) clamp(22px,6vw,32px)}
  .cta-tail{bottom:-11px;border-left-width:14px;border-right-width:14px;border-top-width:12px}
}

/* ===== Page header (inner) ===== */
.page-head{padding-top:clamp(140px,16vw,190px);padding-bottom:clamp(40px,6vw,72px)}
.page-head__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.page-head p{max-width:52ch}
@media (max-width:820px){.page-head__inner{grid-template-columns:1fr;gap:20px}}

/* ===== Pillars / benefits ===== */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pillar{padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:12px}
.pillar__num{font-family:var(--f-display);font-size:.92rem;color:var(--magenta-deep);font-weight:700}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}


/* ===== Promises (home, prominent 3-point value prop) ===== */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.8vw,40px);max-width:1080px;margin:0 auto;--fill:0}
/* 4-in-riga per l'IT (4 promesse) SOLO su desktop: scoped in min-width così la sua
   specificità (:has) non sovrascrive il collasso a 2/1 colonne su tablet/mobile. */
@media (min-width:1081px){.promises:has(.promise:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.promise{position:relative;padding-top:6px}
/* niente linea di collegamento: i numeri raccontano la sequenza accendendosi uno a uno allo scroll */
/* Numero promessa: colore SOLIDO (niente background-clip:text, che falliva su
   alcuni browser per via di filter/isolation → numero invisibile). Tolto anche il
   quadrato glass ::before (si vedeva vuoto). Robusto e sempre visibile. */
.promise__n{position:relative;z-index:1;display:inline-block;font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;margin-bottom:14px;letter-spacing:-.03em;color:var(--magenta)}
.promise__t{font-family:var(--f-display);font-weight:700;font-size:clamp(1.18rem,1.45vw,1.46rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 9px;color:var(--warm-black);text-wrap:balance}
.promise__p{font-size:clamp(.96rem,1vw,1.02rem);color:rgba(24,21,32,.64);line-height:1.55;margin:0}
/* responsivo a gradini: 4 colonne (riga unica) → 2 → 1, niente salto brusco */
/* Griglia promesse responsiva: NON usare :has() in lista con virgola — su Safari
   senza :has() l'intera regola decade e la griglia non collassa (numeri sovrapposti
   al testo su mobile). Regola base .promises standalone → sempre applicata. */
@media (max-width:1080px){.promises{grid-template-columns:repeat(2,1fr);gap:34px 40px;max-width:680px}}
@media (max-width:560px){.promises{grid-template-columns:1fr;gap:28px}.promise__n{margin-bottom:14px}}
.promises>*{opacity:0;animation:fadeUp .7s var(--ease-out-soft) forwards}
.promises>*:nth-child(2){animation-delay:.12s}
.promises>*:nth-child(3){animation-delay:.24s}
.promises>*:nth-child(4){animation-delay:.36s}

/* ===== Direct-answer Q&A ===== */
.qa-list{max-width:880px;margin:0 auto;display:grid;gap:16px}
.qa{padding:clamp(24px,2.6vw,32px) clamp(26px,3vw,38px);transition:transform .5s var(--ease-out-soft),box-shadow .5s var(--ease-out-soft)}
.qa:hover{transform:translateY(-3px)}
.qa__q{font-family:var(--f-display);font-weight:700;font-size:clamp(1.12rem,1.5vw,1.28rem);letter-spacing:-.015em;line-height:1.18;margin:0 0 10px;color:var(--warm-black)}
.qa__a{font-size:1rem;margin:0;color:rgba(24,21,32,.72);line-height:1.66;max-width:64ch}
.qa__a strong{color:var(--warm-black);font-weight:700}
.qa__cmp{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.qa__tag{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:var(--r-pill);letter-spacing:-.005em;line-height:1.3}
.qa__tag--them{background:rgba(24,21,32,.05);color:rgba(24,21,32,.55)}
.qa__tag--us{background:rgba(204,85,222,.12);color:var(--magenta-deep);box-shadow:inset 0 0 0 1px rgba(204,85,222,.25)}
.qa-list>*{opacity:0;animation:fadeIn .75s var(--ease-out-soft) forwards}
.qa-list>*:nth-child(2){animation-delay:.08s}
.qa-list>*:nth-child(3){animation-delay:.16s}
.qa-list>*:nth-child(4){animation-delay:.24s}
.qa-list>*:nth-child(5){animation-delay:.32s}
.pillars>*:nth-child(5){animation-delay:.32s}
.pillars>*:nth-child(6){animation-delay:.4s}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.benefit__ico{width:46px;height:46px;border-radius:13px;background:rgba(204,85,222,.14);color:var(--magenta-deep);display:grid;place-items:center;margin-bottom:4px}
.benefit__ico svg{width:24px;height:24px}
@media (max-width:880px){.benefits{grid-template-columns:1fr}}

/* === come-funziona: partner split §1 === */
.partner-split{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 2px 32px rgba(0,0,0,.06)}
.partner-split__dark{background:linear-gradient(145deg,#1a0828 0%,#4d1063 55%,#7b2896 100%);color:#fff;padding:clamp(28px,3.5vw,46px);display:flex;flex-direction:column;gap:16px}
.partner-split__dark .tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.12)}
.partner-split__dark .tag__ic svg{color:rgba(255,255,255,.5)}
.partner-split__dark h3{color:#fff;font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0}
.partner-split__dark em{color:#e07ef5;font-style:normal}
.partner-split__dark p{color:rgba(255,255,255,.76);margin:0;line-height:1.65}
.partner-split__dark strong{color:rgba(255,255,255,.95)}
.partner-split__light{background:#fff;padding:clamp(28px,3.5vw,46px);display:flex;flex-direction:column;gap:16px}
.partner-split__light h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0}
.partner-split__light p{color:rgba(24,21,32,.72);margin:0;line-height:1.65}
@media(max-width:700px){.partner-split{grid-template-columns:1fr}}

/* === come-funziona: SEO banner §2 === */
.seo-banner{position:relative;background:linear-gradient(135deg,#100420 0%,#2a084a 100%);border-radius:var(--r-lg);padding:clamp(32px,4vw,54px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);overflow:hidden}
.seo-banner::before{content:'SEO';position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-size:210px;font-weight:900;color:rgba(255,255,255,.025);line-height:1;pointer-events:none;font-family:var(--f-display);letter-spacing:-.05em}
.seo-banner__stmt p{color:rgba(255,255,255,.82);line-height:1.68;margin:0}
.seo-banner__stmt p:first-child{font-size:1.13rem;color:#fff}
.seo-banner__stmt strong{color:#df82f5}
.seo-banner__stmt p+p{margin-top:14px;color:rgba(255,255,255,.58)}
.seo-banner__list{border-left:1px solid rgba(255,255,255,.1);padding-left:clamp(24px,3.5vw,48px)}
.seo-banner__list .dual-card__eyebrow{color:rgba(255,255,255,.42)}
.seo-banner__list .incl{margin:14px 0 0}
.seo-banner__list .incl li{color:rgba(255,255,255,.8)}
.seo-banner__list .incl svg{color:#cc55de}
@media(max-width:700px){.seo-banner{grid-template-columns:1fr}.seo-banner::before{display:none}.seo-banner__list{border-left:none;border-top:1px solid rgba(255,255,255,.1);padding-left:0;padding-top:24px}}

/* === come-funziona: feature rows §3 === */
.feat-rows{display:grid;grid-template-columns:1fr 1fr;gap:0}
.feat-row{display:grid;grid-template-columns:48px 44px 1fr;align-items:center;gap:0 18px;padding:22px 0;border-bottom:1px solid rgba(24,21,32,.07)}
.feat-rows .feat-row:nth-child(odd){padding-right:clamp(18px,3vw,40px);border-right:1px solid rgba(24,21,32,.07)}
.feat-rows .feat-row:nth-child(even){padding-left:clamp(18px,3vw,40px)}
.feat-rows .feat-row:last-child{border-bottom:none}
.feat-rows .feat-row:nth-last-child(2):nth-child(even){border-bottom:none}
.feat-row__num{font-family:var(--f-mono);font-size:1.55rem;font-weight:600;color:rgba(24,21,32,.09);line-height:1;text-align:right;letter-spacing:-.03em}
.feat-row__ico{width:44px;height:44px;border-radius:12px;background:rgba(204,85,222,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-row__ico svg{width:20px;height:20px;color:var(--magenta-deep)}
.feat-row__body h3{font-size:1rem;margin:0 0 2px;font-weight:700}
.feat-row__body p{font-size:.88rem;color:rgba(24,21,32,.57);margin:0;line-height:1.55}
@media(max-width:700px){.feat-rows{grid-template-columns:1fr}.feat-rows .feat-row:nth-child(odd){padding-right:0;border-right:none}.feat-rows .feat-row:nth-child(even){padding-left:0}.feat-rows .feat-row:nth-last-child(-n+2){border-bottom:1px solid rgba(24,21,32,.07)}.feat-row:last-child{border-bottom:none}}

/* ===== Descending price — editorial "scala del prezzo" ===== */
.ladder{display:flex;flex-direction:column;gap:clamp(13px,1.7vw,19px)}
.ladder__row{display:grid;grid-template-columns:78px 1fr auto 84px;align-items:center;gap:clamp(12px,1.8vw,22px);
  grid-template-areas:"yr bar price delta"}
.ladder__yr{grid-area:yr;font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(36,27,48,.5)}
.ladder__track{grid-area:bar;height:clamp(36px,4.2vw,48px);border-radius:var(--r-s);background:var(--velo);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(36,27,48,.04)}
.ladder__fill{height:100%;width:var(--w);border-radius:inherit;position:relative;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--viola-profondo),var(--viola));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  animation:ladderGrow 1.05s var(--curva) both}
.ladder__row--base .ladder__fill{background:linear-gradient(90deg,#3a2c4a,var(--inchiostro))}
.ladder__row:nth-child(1) .ladder__fill{animation-delay:.05s}
.ladder__row:nth-child(2) .ladder__fill{animation-delay:.16s}
.ladder__row:nth-child(3) .ladder__fill{animation-delay:.27s}
.ladder__row:nth-child(4) .ladder__fill{animation-delay:.38s}
.ladder__row:nth-child(5) .ladder__fill{animation-delay:.49s}
.ladder__row:nth-child(6) .ladder__fill{animation-delay:.60s}
/* il minimo: la destinazione — prezzo evidenziato, riempimento vivo, chip accent */
.ladder__row--floor .ladder__fill{background:linear-gradient(90deg,var(--viola-profondo),var(--viola-vivo))}
.ladder__row--floor .ladder__track{box-shadow:inset 0 0 0 1px rgba(204,85,222,.22)}
.ladder__row--floor .ladder__price{color:var(--viola-profondo)}
@keyframes ladderGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ladder__price{grid-area:price;justify-self:end;font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.1vw,1.7rem);letter-spacing:-.02em;color:var(--inchiostro);white-space:nowrap}
.ladder__price small{font-size:.6em;font-weight:700;opacity:.55;margin-left:1px}
.ladder__delta{grid-area:delta;justify-self:end;font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:5px 0;min-width:84px;text-align:center;border-radius:var(--r-pill);
  background:rgba(204,85,222,.1);color:var(--viola-profondo)}
.ladder__delta--none{background:transparent;color:rgba(36,27,48,.4);font-weight:600;text-transform:uppercase;font-size:.62rem;letter-spacing:.08em}
.ladder__delta--floor{background:var(--viola-profondo);color:#fff;text-transform:uppercase;font-size:.62rem;letter-spacing:.08em}
@media (max-width:600px){
  .ladder__row{grid-template-columns:1fr auto;grid-template-areas:"yr price" "bar bar" "delta delta";gap:8px 12px;row-gap:9px}
  .ladder__delta{justify-self:start;min-width:0;padding:5px 12px}
}

/* ===== Tag chip (icona + label, sostituisce le pill con emoji) ===== */
.tag{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:var(--r-pill);
  background:#fff;border:1px solid rgba(204,85,222,.16);box-shadow:var(--ombra-1);
  font-family:var(--f-mono);font-size:.71rem;font-weight:600;letter-spacing:.03em;color:var(--inchiostro)}
.tag__ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(204,85,222,.1);color:var(--viola-profondo)}
.tag__ic svg{width:15px;height:15px}

/* ===== Prose (legal) ===== */
.prose{max-width:780px;margin:0 auto}
.prose h2{font-size:1.5rem;margin:2rem 0 .7rem}
.prose h3{font-size:1.15rem;margin:1.4rem 0 .5rem}
.prose p,.prose li{margin-bottom:.8rem}
.prose ul{padding-left:1.3rem;margin-bottom:1rem}
.prose .updated{font-weight:600;color:var(--magenta-deep);font-size:.9rem}

/* ===== Footer ===== */
/* Footer "del colore della pagina": sfondo TRASPARENTE → segue il bg sotto, niente stacco.
   --fg = colore testo (rgb), si inverte sul tema scuro (perché). */
.footer{position:relative;background:transparent;color:rgb(var(--fg));padding:clamp(72px,10vw,130px) 0 36px;margin-top:clamp(64px,8vw,100px);overflow:hidden;
  --fg:36,27,48;--fg-h:var(--viola-profondo)}
/* niente alone radiale in cima al footer: creava una fascia/linea visibile. Sfondo continuo. */
.footer__logo{display:block;height:clamp(40px,6.4vw,78px);width:auto;margin-bottom:clamp(40px,7vw,72px);position:relative}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:56px;position:relative}
.footer__col h4{color:var(--fg-h);font-family:var(--f-body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer__col a,.footer__col li{color:rgba(var(--fg),.74);font-size:.96rem;transition:color .3s}
.footer__col a:hover{color:var(--fg-h)}
.footer__col p{color:rgba(var(--fg),.66);font-size:.95rem;max-width:34ch;line-height:1.6}
.deca{display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(var(--fg),.2);border-radius:var(--r-pill);padding:.4em 1em;font-size:.85rem;font-weight:500;margin-top:.8rem;color:rgb(var(--fg))}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding-top:28px;border-top:1px solid rgba(var(--fg),.14);font-size:.85rem;color:rgba(var(--fg),.52);position:relative}
.footer__bottom a{color:rgba(var(--fg),.66)}.footer__bottom a:hover{color:var(--fg-h)}
/* perché: footer scuro (testo chiaro), in continuità col fondo scuro della pagina */
body.t-dark .footer{--fg:246,240,245;--fg-h:var(--magenta-soft)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ===== Reveal DISABLED (no scroll effects) ===== */
.reveal{opacity:1;transform:none;transition:none}
.reveal-img>*{clip-path:none}
body{opacity:1}

/* ===== Ants — ground walk cycle (brand signature) ===== */
.roamer{position:fixed;z-index:80;width:30px;pointer-events:none;color:var(--warm-black);opacity:0}
.ant{display:block;overflow:visible;fill:currentColor;stroke:none}
.ant .ant-bob{transform-box:view-box;transform-origin:27px 16px;animation:antBob .27s ease-in-out infinite}
.ant .mand{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.ant .ant-ant{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-box:view-box;transform-origin:40px 9px;animation:antenna .54s ease-in-out infinite}
.ant .ant-ant.a2{animation-delay:-.13s;transform-origin:37px 8px}
.ant .leg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;animation:legSwing .54s ease-in-out infinite}
.ant .leg.far{stroke-width:1.5;opacity:.4}
.ant .l1,.ant .f1{transform-origin:31px 19px}
.ant .l2,.ant .f2{transform-origin:27px 20px}
.ant .l3,.ant .f3{transform-origin:23px 19px}
.ant .pB{animation-delay:-.27s}
@keyframes legSwing{0%,100%{transform:rotate(-19deg)}50%{transform:rotate(17deg)}}
@keyframes antBob{0%,100%{transform:translateY(.2px) rotate(-.5deg)}50%{transform:translateY(-1.4px) rotate(.6deg)}}
@keyframes antenna{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes march-line{to{offset-distance:100%}}
/* elegant walking ants placed in smart spots */
.ant-walker{position:absolute;top:0;left:0;offset-rotate:auto;offset-distance:0;
  animation:march-line linear infinite;filter:drop-shadow(0 2px 1.5px rgba(24,21,32,.14))}
.ant-walker--patrol{animation:ant-patrol linear infinite}
@keyframes ant-patrol{0%{offset-distance:0%;opacity:0}10%,90%{opacity:var(--ant-op,.7)}100%{offset-distance:100%;opacity:0}}

/* ===== Selection / scrollbar ===== */
::selection{background:var(--magenta);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(24,21,32,.18);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(24,21,32,.32)}

/* ===== Elegant animations (no scroll triggers) ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes navDrop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes sheenText{to{background-position:-200% 0}}

/* nav drops in */
.nav{animation:navDrop .9s var(--ease-out-soft) both}

/* hero copy staggered rise, visual pops */
.hero__copy>*{animation:fadeUp .9s var(--ease-out-soft) both}
.hero__copy>*:nth-child(1){animation-delay:.05s}
.hero__copy>*:nth-child(2){animation-delay:.13s}
.hero__copy>*:nth-child(3){animation-delay:.21s}
.hero__copy>*:nth-child(4){animation-delay:.29s}
.hero__copy>*:nth-child(5){animation-delay:.37s}
.hero__visual{animation:popIn 1.1s var(--ease-out-soft) both;animation-delay:.2s}
.hero__float-card{opacity:0;animation:fadeIn .6s ease-out forwards}
.hero__float-card--1{animation-delay:.7s}.hero__float-card--2{animation-delay:.9s}.hero__float-card--3{animation-delay:1.1s}.hero__float-card--4{animation-delay:1.3s}

/* page-head + section-head rise */
.page-head__inner>*,.section-head>*{animation:fadeUp .8s var(--ease-out-soft) both}
.section-head>*:nth-child(2){animation-delay:.1s}
.page-head__inner>*:nth-child(2){animation-delay:.1s}

/* grids fade-in with stagger (opacity only → no conflict with layout transforms) */
.compare__layout>*,.steps>*,.pillars>*,.benefits>*,.advantages>*,.dual>*,.faq-list>*{opacity:0;animation:fadeIn .75s var(--ease-out-soft) forwards}
.compare__layout>*:nth-child(2),.steps>*:nth-child(2),.pillars>*:nth-child(2),.benefits>*:nth-child(2),.advantages>*:nth-child(2),.dual>*:nth-child(2),.faq-list>*:nth-child(2){animation-delay:.08s}
.stats__grid>*:nth-child(3),.steps>*:nth-child(3),.pillars>*:nth-child(3),.benefits>*:nth-child(3),.advantages>*:nth-child(3),.faq-list>*:nth-child(3){animation-delay:.16s}
.stats__grid>*:nth-child(4),.pillars>*:nth-child(4),.benefits>*:nth-child(4),.faq-list>*:nth-child(4){animation-delay:.24s}
.benefits>*:nth-child(5),.faq-list>*:nth-child(5){animation-delay:.32s}
.benefits>*:nth-child(6),.faq-list>*:nth-child(6){animation-delay:.4s}
.benefits>*:nth-child(7){animation-delay:.48s}
.benefits>*:nth-child(8){animation-delay:.56s}
.benefits>*:nth-child(9){animation-delay:.64s}
.faq-list>*:nth-child(7){animation-delay:.48s}.faq-list>*:nth-child(8){animation-delay:.56s}
.price-card,.compare,.cta-block,.contact-grid>*,.glass.prose{opacity:0;animation:fadeIn .8s var(--ease-out-soft) forwards;animation-delay:.1s}

/* hero accent word: living magenta sheen */
.hero__title em{background:linear-gradient(100deg,var(--magenta-deep) 20%,var(--magenta) 50%,var(--magenta-deep) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sheenText 6s linear infinite;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.14em;margin-right:-.14em}


/* icons react on hover */
.advantage__ico,.step__num,.benefit__ico{transition:transform .4s var(--ease-elastic)}
.advantage:hover .advantage__ico,.step:hover .step__num,.benefit:hover .benefit__ico{transform:scale(1.1) rotate(-5deg)}

/* nav links cascade in */
@keyframes navLinkIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
.nav__links .nav__link{animation:navLinkIn .6s var(--ease-out-soft) both}
.nav__links .nav__link:nth-child(1){animation-delay:.34s}
.nav__links .nav__link:nth-child(2){animation-delay:.40s}
.nav__links .nav__link:nth-child(3){animation-delay:.46s}
.nav__links .nav__link:nth-child(4){animation-delay:.52s}
.nav__links .nav__link:nth-child(5){animation-delay:.58s}
.nav__links .nav__link:nth-child(6){animation-delay:.64s}
.nav__cta{animation:navLinkIn .6s var(--ease-out-soft) both;animation-delay:.7s}

/* eyebrow line breathes */

/* button arrow + magnetic transition */
.btn{will-change:transform}

/* intro: the 3D ant delivers the CTA */
.intro-overlay{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.intro-ant{position:absolute;left:0;top:0;z-index:3;transform-origin:50% 100%;will-change:transform,background-position,opacity,filter;filter:drop-shadow(0 14px 16px rgba(24,21,32,.28))}
.intro-proxy{z-index:4}
.carry-ant{position:absolute;left:0;top:0;z-index:3;color:var(--warm-black);will-change:transform,opacity;filter:drop-shadow(0 3px 2px rgba(24,21,32,.22))}
.intro-shadow{position:absolute;left:0;top:0;z-index:0;width:120px;height:34px;border-radius:50%;transform-origin:50% 50%;background:radial-gradient(closest-side,rgba(24,21,32,.4),transparent 78%);will-change:transform,opacity;filter:blur(2px)}
/* cinematic layers */
.intro-spot{position:absolute;left:0;top:0;z-index:0;width:560px;height:560px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(255,250,245,.5),rgba(255,250,245,0) 70%);mix-blend-mode:soft-light;will-change:transform,opacity}
@keyframes ctaPop{0%{transform:scale(.86)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.intro-proxy{position:absolute;left:0;top:0;margin:0;will-change:transform,opacity;box-shadow:0 16px 40px rgba(24,21,32,.28)}

/* gradient glow on feature cards (hover) */
.advantage,.step{transition:transform .55s var(--ease-out-soft),box-shadow .55s var(--ease-out-soft)}
.advantage:hover,.step:hover{box-shadow:var(--shadow-xl),0 0 0 1px rgba(204,85,222,.4),0 26px 64px -22px rgba(204,85,222,.5),var(--glass-inset)}

/* ===== Scroll-driven grow — some sections scale up as they enter the viewport ===== */
@supports (animation-timeline: view()){
  .scroll-grow{animation:scrollGrow linear both;animation-timeline:view();animation-range:entry 2% cover 26%;transform-origin:center 60%;will-change:transform}
  @keyframes scrollGrow{from{transform:scale(.9);opacity:.45}to{transform:scale(1);opacity:1}}
  /* Variante più marcata — solo la CTA finale cresce di più e su un range più lungo */
  .scroll-grow--strong{animation-name:scrollGrowStrong;animation-range:entry 0% cover 42%}
  @keyframes scrollGrowStrong{from{transform:scale(.74);opacity:.25}to{transform:scale(1);opacity:1}}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .scroll-grow{animation:none!important;transform:none!important;opacity:1!important}
  .cta-ant,.cta-shadow,.cta-border,.cta-dot,.cta-block--bubble h2,.cta-underline,
  .cta-aurora::before,.cta-aurora::after{animation:none!important}
  .cta-underline::after{animation:none!important;transform:scaleX(1)!important}
  .cta-carry{animation:none}
  .carry-ant{display:none}
  .hero__copy>*,.section-head>*,.page-head__inner>*,.hero__visual,.hero__float-card,
  .compare__layout>*,.steps>*,.flow-step,.flow-phase,.pillars>*,.benefits>*,.advantages>*,.dual>*,.faq-list>*,.qa-list>*,.promises>*,
  .price-card,.compare,.cta-block,.contact-grid>*,.glass.prose{opacity:1!important;animation:none!important}
  .hero__title em{-webkit-text-fill-color:var(--magenta);color:var(--magenta)}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .blob,.roamer{display:none}
}

/* ===== Language switcher (footer + mobile menu) ===== */
.footlang{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.footlang__lbl{font-family:var(--f-mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--fg),.45);margin-right:4px}
.footlang a{font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.03em;color:rgba(var(--fg),.6);text-decoration:none;padding:4px 10px;border-radius:var(--r-pill);transition:color .2s ease,background .2s ease}
.footlang a:hover{color:var(--fg-h);background:rgba(var(--fg),.08)}
.footlang a.is-on{color:#fff;background:var(--viola-profondo)}
.nav__mobile-lang{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.nav__mobile-lang a{font-family:var(--f-mono);font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);text-decoration:none}
.nav__mobile-lang a.is-on{background:rgba(204,85,222,.3)}

/* ============================================================
   PERCHÉ — dark walkthrough "il confronto, punto per punto"
   ============================================================ */
body.t-dark .bg-canvas{background:radial-gradient(120% 92% at 50% -10%,#2A1142 0%,#150A26 44%,#07040E 100%)}
/* niente blob fluttuanti dietro l'header sul tema scuro (l'ambiance viene dal gradiente + i glow dei pannelli) */
body.t-dark .blob{display:none}
/* niente glow bianco dentro il vetro dell'header sul tema scuro (radiale bianco → spento) */
body.t-dark .nav::after{display:none}
/* lo sfondo root è crema in tutto il sito: su perché lo scurisco così in cima
   (overscroll / area sopra l'header fisso) non spunta la banda chiara */
html:has(body.t-dark){background:#160a28}

/* ====== HEADER SCURO (solo pagina perché) — colori invertiti, MISURE INVARIATE ======
   Cambia solo background/colore/ombre: nessun padding, height, raggio, gap o font toccato. */
body.t-dark .nav{
  background:linear-gradient(135deg,rgba(42,24,64,.64),rgba(24,14,40,.54) 50%,rgba(42,24,64,.6));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(255,255,255,.06),0 18px 50px -12px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.45)}
body.t-dark .header-row.is-scrolled .nav{
  background:linear-gradient(135deg,rgba(46,28,70,.82),rgba(26,15,44,.7) 50%,rgba(46,28,70,.78));
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(255,255,255,.08),0 14px 40px -10px rgba(0,0,0,.65),0 4px 12px rgba(0,0,0,.5)}
/* link chiari */
body.t-dark .nav__link{color:rgba(240,232,255,.8)}
body.t-dark .nav__link:hover,body.t-dark .nav__link.is-active{color:#fff}
/* indicatore scorrevole: glow chiaro */
body.t-dark .nav__indicator{
  background:linear-gradient(180deg,rgba(231,160,255,.22),rgba(231,160,255,.1));
  box-shadow:inset 0 0 0 1px rgba(231,160,255,.34),inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(155,43,201,.3)}
/* "Accedi": accento magenta su scuro */
body.t-dark .nav__login{color:#EDB6F7;background:rgba(217,76,227,.18);
  box-shadow:inset 0 0 0 1px rgba(231,160,255,.38),0 4px 14px rgba(217,76,227,.2)}
body.t-dark .nav__login:hover{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px var(--accent),0 10px 24px rgba(217,76,227,.4)}
/* CTA "Inizia ora": pill chiara (invertita) */
body.t-dark .nav .nav__cta{background:#fff;color:var(--viola-notte);box-shadow:0 6px 16px rgba(0,0,0,.32)}
body.t-dark .nav .nav__cta:hover{background:var(--accent);color:#fff;box-shadow:0 10px 22px rgba(217,76,227,.4)}
/* toggle mobile chiaro */
body.t-dark .nav__menu-toggle{background:rgba(255,255,255,.14);color:#fff}

body.t-dark{color:rgba(244,238,255,.84)}
body.t-dark .page-head h1{color:#fff}
body.t-dark .page-head p{color:rgba(240,234,255,.6)}
body.t-dark .page-head em{ -webkit-text-fill-color:initial }
/* eyebrow leggibile sul tema scuro */
body.t-dark .eyebrow{color:#E7B6FF}
body.t-dark .eyebrow::before{background:rgba(231,182,255,.55);opacity:1}

/* ============================================================
   PAGINA FUSA "Come funziona" (dark): le sezioni nate chiare
   (steps, partner split, feat-rows…) riprogettate native dark.
   Tutto scoped a body.t-dark → tocca solo questa pagina (e perché).
   ============================================================ */
/* titoli di sezione chiari */
body.t-dark .section-head__title{color:#fff}
/* il filo della formica più luminoso sul fondo scuro */
body.t-dark .trail-path{stroke:#CC55DE;opacity:.7}

/* ---- vetri (card dei passi) → vetro scuro ---- */
body.t-dark .glass{background:linear-gradient(162deg,rgba(62,36,94,.5),rgba(34,20,54,.42));
  border:1px solid rgba(231,182,255,.13);
  box-shadow:0 26px 64px -38px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)}
body.t-dark .glass-card:hover{box-shadow:0 32px 72px -34px rgba(0,0,0,.9),0 0 0 1px rgba(231,182,255,.2),inset 0 1px 0 rgba(255,255,255,.07)}

/* ---- timeline dei 6 passi ---- */
body.t-dark .flow-step__card h3{color:#fff}
body.t-dark .flow-step__card p{color:rgba(240,234,255,.64)}
body.t-dark .flow-step__kicker{color:#E7B6FF}
body.t-dark .flow-step__tag{color:#E7B6FF;background:rgba(204,85,222,.18);box-shadow:inset 0 0 0 1px rgba(231,182,255,.28)}
body.t-dark .flow-step__ghost{background:linear-gradient(180deg,rgba(231,182,255,.18),rgba(231,182,255,.03));-webkit-background-clip:text;background-clip:text}
body.t-dark .flow-phase__label{color:#E7B6FF}
body.t-dark .flow-phase__label em{color:rgba(240,234,255,.5)}
body.t-dark .flow-phase__label::after{background:linear-gradient(90deg,rgba(231,182,255,.4),transparent)}
body.t-dark .steps--showcase .flow-phase__label{background:rgba(231,182,255,.1);box-shadow:inset 0 0 0 1px rgba(231,182,255,.22)}
body.t-dark .flow-step__card::after,body.t-dark .steps--flow::after{background:linear-gradient(180deg,#E479F0,var(--viola-profondo))}
/* la formica che cammina sulla timeline: chiara, non inchiostro */
body.t-dark .steps__dot{color:#E7B6FF;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}

/* ---- partner split: la metà "light" diventa un vetro scuro (resta il contrasto) ---- */
body.t-dark .partner-split{box-shadow:0 40px 90px -50px rgba(0,0,0,.85);border:1px solid rgba(231,182,255,.1)}
body.t-dark .partner-split__light{background:linear-gradient(160deg,rgba(72,42,104,.42),rgba(40,22,64,.36));color:rgba(240,234,255,.84)}
body.t-dark .partner-split__light h3{color:#fff}
body.t-dark .partner-split__light p{color:rgba(240,234,255,.66)}
body.t-dark .partner-split__light strong{color:#fff}
body.t-dark .partner-split__light em{color:#E479F0;font-style:normal}
body.t-dark .partner-split__light .tag{background:rgba(231,182,255,.1);color:rgba(231,182,255,.85);border-color:rgba(231,182,255,.18)}
body.t-dark .partner-split__light .tag__ic svg{color:rgba(231,182,255,.62)}

/* ---- feat-rows "cosa include" → dark ---- */
body.t-dark .feat-row{border-bottom-color:rgba(231,182,255,.12)}
body.t-dark .feat-rows .feat-row:nth-child(odd){border-right-color:rgba(231,182,255,.12)}
body.t-dark .feat-row__num{color:rgba(231,182,255,.16)}
body.t-dark .feat-row__ico{background:rgba(204,85,222,.18)}
body.t-dark .feat-row__ico svg{color:#E7B6FF}
body.t-dark .feat-row__body h3{color:#fff}
body.t-dark .feat-row__body p{color:rgba(240,234,255,.6)}
@media(max-width:700px){body.t-dark .feat-rows .feat-row:nth-last-child(-n+2){border-bottom-color:rgba(231,182,255,.12)}}

/* ---- componenti delle versioni lingua (dual cards, benefit, tag) → dark ---- */
body.t-dark .glass-card h3,body.t-dark .benefit h3{color:#fff}
body.t-dark .glass-card p,body.t-dark .benefit p{color:rgba(240,234,255,.66)}
body.t-dark .benefit__ico{background:rgba(204,85,222,.18)}
body.t-dark .benefit__ico svg{color:#E7B6FF}
body.t-dark .dual-card__eyebrow{color:#E7B6FF}
body.t-dark .tag{background:rgba(231,182,255,.08);border-color:rgba(231,182,255,.18);color:rgba(240,234,255,.84);box-shadow:none}
body.t-dark .tag__ic{background:rgba(204,85,222,.18);color:#E7B6FF}

/* intro lead */
.vs-intro{max-width:920px;margin:0 auto;text-align:center}
.vs-intro .section-head__title{margin-inline:auto;color:#fff;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.035em;line-height:1.04}
.vs-intro__sub{max-width:58ch;margin:18px auto 0;color:rgba(240,234,255,.6);font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.6}

/* ===== walkthrough — luxury slabs, cinematic scroll ===== */
.vs{--lux:cubic-bezier(.16,1,.3,1);position:relative;padding:clamp(22px,3.4vw,54px) 0}
/* luminous through-line connecting the sequence */
.vs::before{content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(22px,3.4vw,54px);transform:translateX(-50%);
  background:linear-gradient(rgba(229,160,255,0),rgba(229,160,255,.42));pointer-events:none}
.vs:first-of-type::before{display:none}

.vs__panel{position:relative;overflow:visible;border-radius:34px;border:1px solid transparent;
  padding:clamp(34px,4.8vw,74px) clamp(28px,4.8vw,78px);
  background:
    linear-gradient(155deg,rgba(50,25,84,.58),rgba(15,8,28,.72)) padding-box,
    linear-gradient(150deg,rgba(236,172,255,.55),rgba(217,156,255,.08) 38%,rgba(120,60,170,.04) 66%,rgba(236,172,255,.30)) border-box;
  box-shadow:0 60px 130px -60px rgba(0,0,0,.95),0 12px 44px -28px rgba(150,50,200,.5),inset 0 1px 0 rgba(255,255,255,.09);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3.8vw,66px);align-items:center;
  opacity:0;transform:translateY(56px) scale(.978);
  transition:opacity 1s var(--lux),transform 1.2s var(--lux)}
.vs__panel.is-in{opacity:1;transform:none}
/* volumetric glow — contained inside the slab (panel is overflow:visible per gli indici) */
.vs__panel::before{content:"";position:absolute;z-index:0;width:58%;height:86%;right:4%;top:7%;border-radius:50%;
  background:radial-gradient(circle at center,rgba(214,86,224,.32),transparent 62%);filter:blur(26px);pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--lux)}
.vs__panel.is-in::before{opacity:calc(.34 + var(--c,.5)*.66)}
/* hairline that lights up */
.vs__panel::after{content:"";position:absolute;z-index:3;left:9%;right:9%;top:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(233,170,255,.9),transparent);
  opacity:0;transform:scaleX(.35);transform-origin:center;
  transition:opacity 1.1s var(--lux) .15s,transform 1.2s var(--lux) .15s}
.vs__panel.is-in::after{opacity:1;transform:scaleX(1)}
.vs--alt .vs__panel::before{left:4%;right:auto}

/* Il gradiente NON deve scendere sotto un'alpha visibile: a .22 la parte
   bassa-destra della cifra spariva nel fondo scuro (sembrava tagliata in diagonale).
   Niente transform/will-change qui: evita anche la cucitura di compositing su background-clip:text. */
.vs__index{position:relative;z-index:2;font-family:var(--f-display);font-weight:800;line-height:1;
  font-size:clamp(4rem,10vw,9rem);letter-spacing:-.05em;padding:.1em .06em .12em;
  background:linear-gradient(156deg,rgba(238,194,255,1) 0%,rgba(186,118,222,.92) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transition:opacity 1.1s var(--lux) .08s}
.vs__panel.is-in .vs__index{opacity:1}

.vs__main{position:relative;z-index:2}
/* cinematic staggered reveal of inner content */
.vs__feat,.vs__claim,.vs__sub,.vs__other{opacity:0;transform:translateY(24px);filter:blur(8px);
  transition:opacity .9s var(--lux),transform .9s var(--lux),filter .9s var(--lux)}
.vs__panel.is-in .vs__feat{opacity:1;transform:none;filter:blur(0);transition-delay:.1s}
.vs__panel.is-in .vs__claim{opacity:1;transform:none;filter:blur(0);transition-delay:.2s}
.vs__panel.is-in .vs__sub{opacity:1;transform:none;filter:blur(0);transition-delay:.32s}
.vs__panel.is-in .vs__other{opacity:1;transform:none;filter:blur(0);transition-delay:.44s}

.vs__feat{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(231,182,255,.9);display:inline-block;margin-bottom:16px}
.vs__claim{font-family:var(--f-display);font-weight:700;font-size:clamp(1.85rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.03em;color:#fff;margin:0;text-wrap:balance}
.vs__claim .g{background:linear-gradient(96deg,#EE93F5 0%,#CC55DE 50%,#9B2BC9 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 24px rgba(204,85,222,.3))}
.vs__sub{margin:18px 0 0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.6;color:rgba(240,234,255,.66);max-width:52ch}
.vs__sub strong{color:#fff;font-weight:600}

.vs__other{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vs__other-lbl{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.vs__other-txt{display:inline-flex;align-items:center;gap:10px;font-size:.98rem;color:rgba(240,234,255,.5)}
.vs__x{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,120,120,.13);color:rgba(255,150,150,.92);font-size:.66rem;flex:none}

/* alternating mirror */
.vs--alt .vs__panel{grid-template-columns:1fr auto}
.vs--alt .vs__index{order:2;text-align:right}
.vs--alt .vs__main{order:1}

/* descending accent for the price point */
.vs--floor .vs__index{background:linear-gradient(156deg,rgba(128,238,196,1) 0%,rgba(70,196,148,.92) 100%);-webkit-background-clip:text;background-clip:text}
.vs--floor .vs__panel::before{background:radial-gradient(circle at center,rgba(80,220,160,.24),transparent 60%)}
.vs--floor .vs__claim .g{background:linear-gradient(96deg,#7DEBC0,#2FA36E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px rgba(47,163,110,.3))}

@media (prefers-reduced-motion:reduce){
  .vs__panel,.vs__index,.vs__feat,.vs__claim,.vs__sub,.vs__other,.vs__panel::before,.vs__panel::after{transition:none!important}
}
@media (max-width:720px){
  .vs__panel,.vs--alt .vs__panel{grid-template-columns:1fr;gap:8px;text-align:left;padding:clamp(26px,7vw,42px)}
  .vs--alt .vs__index{order:0;text-align:left}
  .vs--alt .vs__main{order:1}
  .vs__index{font-size:clamp(3.2rem,18vw,4.4rem)}
  .vs::before,.vs__panel::after{display:none}
}

/* ============================================================
   PREZZI — "Tutto dentro" feature grid (premium)
   ============================================================ */
.feat-prem{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px)}
.feat-prem__card{position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(22px,2.3vw,30px);
  background:linear-gradient(162deg,#ffffff 0%,#FBF3FE 100%);
  border:1px solid rgba(204,85,222,.14);
  box-shadow:0 18px 48px -30px rgba(155,43,201,.4),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .5s var(--ease-out-soft),box-shadow .5s var(--ease-out-soft),border-color .5s var(--ease-out-soft)}
.feat-prem__card:hover{transform:translateY(-5px);border-color:rgba(204,85,222,.28);box-shadow:0 32px 72px -34px rgba(155,43,201,.5),inset 0 1px 0 rgba(255,255,255,.8)}
.feat-prem__card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--viola-vivo),transparent);opacity:0;transition:opacity .5s var(--ease-out-soft)}
.feat-prem__card:hover::before{opacity:1}
.feat-prem__card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%);transition:transform .9s var(--ease-out-soft)}
.feat-prem__card:hover::after{transform:translateX(130%)}
.feat-prem__num{position:absolute;top:12px;right:18px;font-family:var(--f-display);font-weight:800;font-size:2.5rem;line-height:1;color:rgba(204,85,222,.1);letter-spacing:-.02em}
.feat-prem__ico{position:relative;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:16px;
  background:linear-gradient(150deg,var(--viola-vivo) 0%,var(--viola-profondo) 100%);
  box-shadow:0 10px 22px -8px rgba(155,43,201,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.feat-prem__ico svg{width:24px;height:24px}
.feat-prem__card h3{font-family:var(--f-display);font-weight:700;font-size:1.16rem;letter-spacing:-.01em;margin:0 0 7px;color:var(--inchiostro,#241B30)}
.feat-prem__card p{margin:0;font-size:.97rem;line-height:1.5;color:rgba(24,21,32,.62)}
@media (max-width:900px){.feat-prem{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-prem{grid-template-columns:1fr}}

/* ============================================================
   PREZZI — value split: ladder + "tutto incluso" affiancati
   ============================================================ */
.value-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,38px);align-items:stretch}
.value-split__panel{display:flex;flex-direction:column}
.value-split__panel .section-head{text-align:left;margin-bottom:clamp(14px,1.6vw,22px)}
.value-split__panel .section-head__title{max-width:18ch;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.06}
.value-split__card{flex:1;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;justify-content:center}
.value-split__note{text-align:center;margin:20px auto 0;font-size:.88rem;color:rgba(24,21,32,.6)}

.incl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.incl-list__item{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(155,43,201,.1)}
.incl-list__item:first-child{padding-top:0}
.incl-list__item:last-child{border-bottom:0;padding-bottom:0}
.incl-list__ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--viola-vivo) 0%,var(--viola-profondo) 100%);
  box-shadow:0 8px 18px -8px rgba(155,43,201,.55),inset 0 1px 0 rgba(255,255,255,.42)}
.incl-list__ico svg{width:21px;height:21px}
.incl-list__t{font-family:var(--f-display);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;margin:0;color:var(--inchiostro,#241B30)}
.incl-list__p{margin:3px 0 0;font-size:.9rem;line-height:1.45;color:rgba(24,21,32,.6)}

@media (max-width:980px){.value-split{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}.value-split__panel .section-head__title{max-width:24ch}}

/* ============================================================
   PREZZI — layout rigoroso, centrato e simmetrico (2026)
   ============================================================ */
.price-plan{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.3vw,28px)}
.price-plan .price-card{margin:0;width:100%;max-width:560px}
.price-ladder-card{max-width:880px;margin:0 auto;padding:clamp(28px,3.4vw,48px)!important}
.prezzi-section{padding-top:clamp(40px,6vw,84px)}
.prezzi-section .section-head.center{margin-bottom:clamp(26px,3vw,44px)}

/* ============================================================
   2026 UPGRADE — Interactive layer & scroll animations
   ============================================================ */

/* ---- Word Reveal — fade + lieve risalita, SENZA clip ----
   Niente overflow:hidden → niente tagli di glifi/corsivi, niente buchi.
   Le parole evidenziate (em/.g/.hl-grad) sono unità ATOMICHE: il gradiente
   (background-clip:text) non si spezza mai e non resta trasparente.
   Stato finale garantito da .word-reveal.is-in: opacity 1, nessun transform. */
.word-reveal .word{display:inline-block;opacity:0;transform:translateY(.24em);
  transition:opacity .72s var(--curva),transform .72s var(--curva);transition-delay:var(--wd,0ms)}
.word-reveal.is-in .word{opacity:1;transform:none}
/* le evidenziate atomiche conservano il loro display di gradiente */
.word-reveal .word.hl-grad,.word-reveal .word.g{-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- Card Glow Spotlight ---- */
.card-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,-9999px) var(--my,-9999px),rgba(204,85,222,.14),transparent 70%)}
.feat-prem__card>.card-glow~*,.dual-card>.card-glow~*{position:relative;z-index:1}
.feat-prem__card,.dual-card{isolation:isolate}

/* ---- Button sheen enhancement ---- */
.btn--primary,.btn--glass{overflow:hidden}
.btn--primary::after,.btn--glass::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(108deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);
  transform:translateX(-80%);pointer-events:none}
@media(hover:hover){
  .btn--primary:hover::after,.btn--glass:hover::after{transform:translateX(80%);transition:transform .55s var(--curva-elastica)}
}

/* dual-card: solo sollevamento morbido (niente tilt). Transizione calma, coerente. */
.dual-card{transition:transform .5s var(--curva),box-shadow .5s var(--curva)}

/* ---- Perché reading progress ---- */
.vs-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:rgba(155,43,201,.15);pointer-events:none}
.vs-progress__bar{height:100%;background:linear-gradient(90deg,var(--viola-profondo),var(--viola-vivo));width:0%;box-shadow:0 0 10px rgba(204,85,222,.55);transition:width .12s linear}
.vs-counter{position:fixed;top:14px;right:18px;z-index:200;font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:rgba(252,250,253,.5);pointer-events:none;display:flex;align-items:center;gap:2px}
.vs-counter__num{color:rgba(252,250,253,.82)}
.vs-counter__sep,.vs-counter__total{opacity:.42}
body:not(.t-dark) .vs-counter{color:rgba(36,27,48,.38)}
body:not(.t-dark) .vs-counter__num{color:rgba(36,27,48,.62)}

/* ---- Partner Split entrance ---- */
.partner-split__dark,.partner-split__light{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--curva),transform .6s var(--curva)}
.partner-split__light{transition-delay:.11s}
.partner-split.is-in .partner-split__dark,.partner-split.is-in .partner-split__light{opacity:1;transform:none}

/* ---- Feat-row stagger (add data-stagger to .feat-rows) ---- */
.feat-rows[data-stagger] .feat-row{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--curva),transform .5s var(--curva);transition-delay:var(--si,0ms)}
.feat-rows[data-stagger].is-in .feat-row{opacity:1;transform:none}

/* ---- Ladder stagger ---- */
/* le barre crescono quando la scala ENTRA in scena (con JS); senza JS restano l'animazione di load */
.reveal-ready .ladder[data-stagger]:not(.is-in) .ladder__fill{transform:scaleX(0);animation-name:none}
.reveal-ready .ladder[data-stagger].is-in .ladder__fill{animation-name:ladderGrow}
.ladder[data-stagger] .ladder__row{opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--curva),transform .5s var(--curva);transition-delay:var(--si,0ms)}
.ladder[data-stagger].is-in .ladder__row{opacity:1;transform:none}

/* ---- Compare cell stagger ---- */
.cmp[data-stagger] .cmp__col--svea .cmp__cell,.cmp[data-stagger] .cmp__col--other .cmp__cell{
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--curva),transform .4s var(--curva);transition-delay:var(--si,0ms)}
.cmp[data-stagger] .cmp__col--svea .cmp__cell--head,.cmp[data-stagger] .cmp__col--other .cmp__cell--head{opacity:1!important;transform:none!important}
.cmp[data-stagger].is-in .cmp__col--svea .cmp__cell,.cmp[data-stagger].is-in .cmp__col--other .cmp__cell{opacity:1;transform:none}
/* il ✓ fa pop in sincrono con la cella (delay = --si della cella, +90ms) */
.cmp[data-stagger].is-in .cmp__col--svea .cmp__ic--yes{animation:cmpPop .5s var(--curva-elastica) both;animation-delay:calc(var(--si,0ms) + 90ms)}
/* la colonna "Altri" entra leggermente desaturata, poi torna piena */
.cmp[data-stagger] .cmp__col--other .cmp__cell{filter:saturate(.55)}
.cmp[data-stagger].is-in .cmp__col--other .cmp__cell{filter:none;
  transition:opacity .4s var(--curva),transform .4s var(--curva),filter .55s var(--curva);transition-delay:var(--si,0ms)}
/* il badge ★ Consigliato atterra per ultimo */
.cmp[data-stagger] .cmp__badge{opacity:0}
.cmp[data-stagger].is-in .cmp__badge{animation:cmpBadge .6s var(--curva-elastica) 1.05s both}

/* ---- Esempi filter bar ---- */
.ex-filterbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:0 auto clamp(22px,2.8vw,38px)}
.ex-filterbar__pill{border:1.5px solid rgba(155,43,201,.22);background:#fff;color:var(--viola-profondo);
  font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;padding:7px 16px;
  border-radius:var(--r-pill);cursor:pointer;
  transition:background .22s var(--curva),border-color .22s var(--curva),color .22s var(--curva),transform .3s var(--curva)}
.ex-filterbar__pill:hover{background:rgba(204,85,222,.08);border-color:rgba(204,85,222,.38);transform:translateY(-2px)}
.ex-filterbar__pill.is-on{background:var(--viola-profondo);border-color:var(--viola-profondo);color:#fff}
.ex-card{transition:transform .45s var(--curva),opacity .3s var(--curva),box-shadow var(--vel-2) var(--curva)}
.ex-card:hover{transform:translateY(-4px);box-shadow:var(--ombra-2)}
.ex-card.is-hidden{opacity:0!important;transform:scale(.93)!important;pointer-events:none;height:0;overflow:hidden;padding:0!important;margin:0!important;border:none!important;min-height:0!important}

/* ---- Benefits stagger (lang come-funziona uses .benefits/.benefit) ---- */
.benefits[data-stagger] .benefit{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--curva),transform .5s var(--curva);transition-delay:var(--si,0ms)}
.benefits[data-stagger].is-in .benefit{opacity:1;transform:none}

/* ---- Mission band: kinetic word scrub ---- */
.band--scrub .band__text{color:rgba(255,255,255,.2)}
.band--scrub .band__text .sw{transition:color .5s var(--curva)}
.band--scrub .band__text .sw.lit{color:rgba(255,255,255,.86)}
.band--scrub .band__text strong{color:inherit;font-weight:600}
.band--scrub .band__text strong .sw.lit{color:#E7B6FF}

/* ---- CTA attribution typewriter caret ---- */
.cta-attrib.is-typing::after{content:'';display:inline-block;width:.46ch;height:1em;margin-left:2px;
  background:rgba(255,255,255,.72);vertical-align:-.12em;border-radius:1px;animation:caretBlink .82s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

/* ---- Reduced motion overrides ---- */
@media(prefers-reduced-motion:reduce){
  .word-reveal .word{opacity:1!important;transform:none!important;transition:none!important}
  .band--scrub .band__text,.band--scrub .band__text .sw{color:rgba(255,255,255,.82)!important}
  .band--scrub .band__text strong .sw{color:#fff!important}
  .cta-attrib.is-typing::after{display:none}
  .cmp[data-stagger] .cmp__badge{opacity:1!important}
  .cmp[data-stagger] .cmp__col--other .cmp__cell{filter:none!important}
  .card-glow{display:none!important}
  .dual-card{transform:none!important}
  .btn--primary::after,.btn--glass::after{display:none}
  .partner-split__dark,.partner-split__light{opacity:1;transform:none;transition:none}
  .feat-rows[data-stagger] .feat-row{opacity:1;transform:none;transition:none}
  .benefits[data-stagger] .benefit{opacity:1;transform:none;transition:none}
  .ladder[data-stagger] .ladder__row{opacity:1;transform:none;transition:none}
  .cmp[data-stagger] .cmp__col--svea .cmp__cell,.cmp[data-stagger] .cmp__col--other .cmp__cell{opacity:1;transform:none;transition:none}
  .ex-card{transition:none!important}
  .vs-progress{display:none}
  .vs-counter{display:none}
}

/* ============================================================
   2026 — MOVIMENTO DIFFUSO
   Ingresso · Riposo · Interazione su tutto.
   Solo transform/opacity. Selettori globali → vale su tutte le lingue.
   ============================================================ */

/* ---------- INGRESSO ---------- */
/* eyebrow: la linetta si disegna quando la sezione entra (solo il pseudo, non tocca il fade di load) */
.reveal-ready .eyebrow::before{transform:scaleX(0);transform-origin:left center}
.reveal-ready .eyebrow.is-in::before{transform:scaleX(1);transition:transform .65s var(--curva) .04s}

/* stagger generico: qualunque contenitore con [data-stagger] non gestito da regole dedicate
   tiene i figli sotto e li solleva uno a uno (sovrascrive le entrate di load con animation:none) */
[data-stagger]:not(.cmp):not(.ladder):not(.feat-rows):not(.benefits):not(.promises)>*{
  animation:none!important;opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--curva),transform .6s var(--curva);transition-delay:var(--si,0ms)}
[data-stagger]:not(.cmp):not(.ladder):not(.feat-rows):not(.benefits):not(.promises).is-in>*{opacity:1;transform:none}

/* ---------- INTERAZIONE ---------- */
/* spotlight: solo sulle card-firma (feature/dual). Glow sobrio che segue il cursore. */
.dual-card,.feat-prem__card{isolation:isolate;position:relative}

/* sollevamento coerente per le righe-lista (peso al passaggio del cursore) */
@media (hover:hover){
  .incl-list__item{transition:transform .4s var(--curva),padding-left .4s var(--curva)}
  .incl-list__item:hover{transform:translateX(4px)}
  .incl-list__item:hover .incl-list__ico{transform:scale(1.08) rotate(-4deg)}
  .incl-list__ico{transition:transform .45s var(--curva)}
  /* le voci del footer: underline animata che cresce da sinistra */
  .footer__col li a,.footer__bottom a{background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
    transition:background-size .4s var(--curva),color .25s ease}
  .footer__col li a:hover,.footer__bottom a:hover{background-size:100% 1px}
  /* i check delle liste incluse reagiscono */
  .incl li{transition:transform .35s var(--curva)}
  .incl li:hover{transform:translateX(3px)}
  .incl li:hover svg{transform:scale(1.18)}
  .incl li svg{transition:transform .35s var(--curva)}
  /* le 4 promesse si sollevano col cursore */
  .promise{transition:transform .45s var(--curva)}
  .promise:hover{transform:translateY(-4px)}
}

/* Regola di Chanel: il badge "−43%" sta fermo. Niente pulsazioni a riposo. */

/* ---------- RM-safe ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal-ready .eyebrow::before{transform:scaleX(1)!important;transition:none!important}
  [data-stagger]:not(.cmp):not(.ladder):not(.feat-rows):not(.benefits):not(.promises)>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* === Cookie banner === */
#svh-cookie{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);z-index:9999;max-width:660px;width:calc(100% - 32px);background:#fff;border:1px solid #ece6f3;box-shadow:0 14px 44px rgba(40,20,80,.20);border-radius:18px;padding:18px 20px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;font-family:var(--f-body,system-ui)}
#svh-cookie.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#svh-cookie p{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:#3a2f4a}
#svh-cookie a{color:var(--accent-d,#C42FD0);text-decoration:underline}
#svh-cookie .svh-ck-btns{display:flex;gap:10px;flex-wrap:wrap}
#svh-cookie button{cursor:pointer;border-radius:11px;padding:10px 18px;font-size:13.5px;font-weight:700;border:0;font-family:inherit;transition:filter .15s}
#svh-cookie button:hover{filter:brightness(.95)}
#svh-cookie .svh-ck-ok{background:var(--accent-d,#C42FD0);color:#fff}
#svh-cookie .svh-ck-no{background:#f2edf8;color:#4a3f5a}
@media(max-width:520px){#svh-cookie button{flex:1 1 auto}}

/* ====================================================================
   AUDIT MOBILE (2026-06) — append in coda: stessa specificità → vince
   l'ultima regola; non modifica le regole esistenti sopra.
   ==================================================================== */

/* Tabelle pagine legali (privacy/cookie/dpa/termini): erano <table> native a
   4–5 colonne dentro .glass{overflow:hidden} + html{overflow-x:hidden} → su
   mobile le colonne di destra venivano TAGLIATE e illeggibili. display:block +
   overflow-x:auto rende la singola tabella scrollabile orizzontalmente (crea un
   proprio contesto di scroll, funziona anche dentro .glass). Su desktop la .prose
   è stretta → la tabella ci sta, nessuna barra, resa invariata. */
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;border-collapse:collapse;font-size:.9rem;margin:1.1rem 0}
.prose th,.prose td{padding:9px 11px;border:1px solid rgba(24,21,32,.12);text-align:left;vertical-align:top;line-height:1.45;min-width:84px}
.prose thead th{background:rgba(204,85,222,.06);font-weight:600;white-space:nowrap}

/* Spezza stringhe lunghe (URL/email/parole) invece di sforare il viewport. */
body{overflow-wrap:break-word}

/* Hover-lift che resta "incollato" dopo il tap su touch: applicalo solo dove
   c'è un vero hover (mouse). */
@media(hover:none){.glass-card:hover{transform:none}}

/* Schermi stretti: padding card ridotto + tabelle legali più compatte. */
@media(max-width:560px){
  .glass-card{padding:20px}
  .prose table{font-size:.84rem}
  .prose th,.prose td{padding:7px 9px;min-width:74px}
}

/* Tabella comparativa (home): l'altezza fissa 76px tagliava i testi lunghi
   (SV/HR). min-height + allineamento in alto → la riga cresce, niente taglio. */
@media(max-width:600px){
  .cmp__cell{height:auto;min-height:76px;align-items:flex-start;padding-top:12px;padding-bottom:12px}
}

/* CTA primario nel menu mobile: mancava → gli utenti mobile (hamburger) non
   vedevano "Inizia ora". Stile a pulsante magenta, vince su .nav__mobile a. */
.nav__mobile .nav__mobile-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent,#D94CE3);color:#fff;font-weight:700;text-align:center;margin-top:6px;box-shadow:0 10px 24px rgba(217,76,227,.34)}
.nav__mobile .nav__mobile-cta:hover,.nav__mobile .nav__mobile-cta:active{background:var(--accent,#D94CE3)}

/* ---- Polish mobile round 2 (append, vince l'ultima regola) ---- */

/* Titolo hero: clamp più basso sulle lingue lunghe (SV/HR) → niente righe orfane. */
@media (max-width:560px){.hero__title{font-size:clamp(1.85rem,8.4vw,2.4rem)}}
@media (max-width:400px){.hero__title{font-size:clamp(1.75rem,9vw,2.2rem)}}
.hero__title{overflow-wrap:anywhere}

/* Card flottanti hero: margine di sicurezza dai bordi del viewport. */
@media (max-width:1024px){
  .hero__float-card{max-width:calc(100% - 12px)}
  .hero__float-card--1{left:6px}
  .hero__float-card--2{right:6px}
}

/* Eyebrow lungo (HR/SV): wrap pulito. */
@media (max-width:560px){.eyebrow{flex-wrap:wrap}}

/* Toggle prezzi mensile/annuale: niente overflow col badge sconto su schermi stretti. */
@media (max-width:560px){
  .toggle{max-width:100%;flex-wrap:wrap}
  .toggle button{padding:10px 16px;font-size:.86rem}
  .save-badge{font-size:.66rem}
}

/* Pillola step (es. "Entro 10 giorni"): resta su una riga, il contenitore va a capo. */
.flow-step__tag{white-space:nowrap}
.flow-step__head{flex-wrap:wrap}

/* Label fase lunga: nascondi la linea decorativa quando va a capo (<=560px). */
@media (max-width:560px){.flow-phase__label::after{display:none}}

/* FAQ: padding/font ridotti su mobile. */
@media (max-width:560px){
  .faq summary{padding:18px;font-size:1.02rem;gap:.6rem}
  .faq .ans{padding:0 18px 18px}
  .faq .plus{width:26px;height:26px}
}

/* Titoli pagine interne: scala su mobile come l'hero. */
@media (max-width:560px){.page-head h1{font-size:clamp(2.05rem,8vw,2.6rem)}}

/* Ladder prezzi: margine su schermi piccolissimi. */
@media (max-width:380px){.ladder__price{font-size:1.1rem}.ladder__yr{font-size:.66rem}}

/* Spezza stringhe lunghe (URL/email/codici) nel testo e nelle tabelle delle card. */
.prose,.prose p,.prose li,.prose a,.prose td{overflow-wrap:break-word;word-break:break-word}

/* Tap target ~40px per i selettori lingua. */
.footlang a{padding:8px 12px;min-height:36px;display:inline-flex;align-items:center}
.nav__mobile-lang a{padding:9px 14px;min-height:40px;display:inline-flex;align-items:center}

/* overflow-x:clip è più affidabile di hidden (non crea un contesto di scroll). */
html,body{overflow-x:clip}

/* ---- Polish mobile round 3 (da screenshot reali) ---- */

/* Le float-card dell'hero ("Sito Premium", "SEO inclusa") restano VISIBILI anche
   su mobile (sovraimpressione, come su desktop) — l'utente le vuole. Su schermi
   stretti le rimpiccioliamo un filo così invadono meno la mascotte. */
@media (max-width:560px){
  .hero__float-card{padding:9px 13px 9px 11px;gap:9px;font-size:.9rem;border-radius:14px}
  .hero__float-card--1{left:2px}
  .hero__float-card--2{right:2px}
}

/* ============ PERFORMANCE Safari mobile (iPhone) ============
   Il design "vetro" usa effetti molto costosi da disegnare in CONTINUO su mobile:
   3 blob blur(120px) animati a tutto schermo, backdrop-filter, e ~20 animazioni
   "infinite" (sheen del titolo, aurora del menu, float, formiche che camminano…).
   Su iPhone tengono GPU/CPU sempre occupate → la pagina arranca e "sembra lenta"
   anche con rete veloce (è il caso classico: veloce nei test ma lento sul device).
   Sotto gli 820px li sostituisco con equivalenti STATICI: look quasi identico,
   costo di rendering ~zero. */
@media (max-width:820px){
  /* sfondo: via i 3 blob sfocati animati → gradiente statico equivalente */
  .blob{display:none}
  .bg-canvas{background:
    radial-gradient(75vw 58vh at 0% -6%, rgba(227,166,239,.28) 0%, transparent 56%),
    radial-gradient(66vw 54vh at 104% 26%, rgba(241,216,248,.42) 0%, transparent 60%),
    linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%)}
  /* backdrop-filter è caro su Safari mobile e il vetro è già opaco all'86% → via il blur */
  .pill,.nav,.header-row,.glass,[class*="glass"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* stop alle animazioni decorative INFINITE (ridipingono ogni frame). Le animazioni
     d'entrata "una tantum" restano. Resa identica, solo senza micro-movimenti continui. */
  .nav::after,.pill__dot,.hero__float-card--1,.hero__float-card--2,
  .steps__dot .tw-legA,.steps__dot .tw-legB,.steps__dot .tw-ae,
  .cta-border,.cta-dot,.cta-block--bubble h2,.cta-underline,.cta-mascot .cta-ant,
  .cta-shadow,.ant .ant-bob,.ant .ant-ant,.ant .leg,.ant-walker,.ant-walker--patrol,
  .hero__title em,.cta-attrib.is-typing::after{animation:none!important}
}