/* ==========================================================================
   Sistema Recensioni 5 Stelle — site.css
   CSS unico del sito. Derivato dalla landing-dentisti (styles.css, pagine.css,
   footer-design.css) e dal design system Codex Light (tokens-light.css).
   Organizzato in sezioni commentate. Se serve un componente nuovo, aggiungilo
   qui in una sezione dedicata con il nome della pagina che lo introduce:
   niente CSS inline sparso nelle pagine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN — design system Codex Light
   -------------------------------------------------------------------------- */
@font-face{font-family:Manrope;src:url('../fonts/manrope-400.woff2') format('woff2'),url('../fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-500.woff2') format('woff2'),url('../fonts/manrope-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-600.woff2') format('woff2'),url('../fonts/manrope-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-700.woff2') format('woff2'),url('../fonts/manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-800.woff2') format('woff2'),url('../fonts/manrope-800.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  color-scheme: light;
  --red: #ff3045;
  --red-hover: #ff5264;
  --dark: #191919;
  --surface: #fffdf8;
  --elevated: #e7e3d9;
  --paper: #f2f0e9;
  --muted: #68665f;
  --line: #d4d0c5;
  --success: #356441;
  --warning: #80570d;
  --font: 'Manrope',Arial,sans-serif;
  --mono: 'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --gutter: clamp(24px,4.6vw,88px);
  --max: 1400px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-reveal: 800ms;
  --motion-scale: 1;
  --canvas: #f2f0e9;
  --ink: #191919;
  --error: var(--red);
  --accent-text: var(--red);
  --header-h: 86px;
}

/* --------------------------------------------------------------------------
   2. BASE — reset, elementi, focus, accessibilità
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:hidden}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--dark)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button,summary{cursor:pointer}
button{color:inherit;background:none;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:5px}
h1,h2,h3,h4,p,figure{margin:0}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
h1,h2{text-transform:uppercase}
h1{font-size:clamp(42px,4.65vw,72px);font-weight:800;line-height:1.04;letter-spacing:-.066em}
h2{font-size:clamp(34px,3.65vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.055em}
h3{font-size:24px;font-weight:600;line-height:1.24;letter-spacing:-.035em}
h4{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
strong{font-weight:700}
ul,ol{margin:0;padding:0}
.skip{position:fixed;left:12px;top:10px;z-index:100;background:var(--dark);color:var(--paper);padding:12px 20px;transform:translateY(-150%)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* --------------------------------------------------------------------------
   3. LAYOUT — wrap, section, grid
   -------------------------------------------------------------------------- */
.wrap{width:min(calc(100% - var(--gutter)*2),var(--max));margin-inline:auto}
.wrap-wide{width:min(calc(100% - var(--gutter)*2),1600px);margin-inline:auto}
.section{padding-block:104px}
.section-tight{padding-block:64px}
.accent{color:var(--accent-text)}
.mono,.eyebrow{font:11px/1.6 var(--mono);letter-spacing:.065em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent-text)}
.dot{width:6px;height:6px;flex-shrink:0;background:var(--red);border-radius:50%}
.section-heading{margin-bottom:48px}
.section-heading .eyebrow{margin-bottom:22px}
.lead{max-width:840px;margin-top:24px;color:var(--muted);font-size:17px}
.centered{text-align:center}
.centered .lead{margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.section-dark{background:var(--dark);color:var(--paper)}
.section-dark .accent{color:var(--red)}
.section-dark p{color:#c2c0ba}
.section-dark p strong{color:var(--paper)}
.section-surface{background:var(--surface);border-block:1px solid var(--line)}

/* --------------------------------------------------------------------------
   4. PULSANTI
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;border:1px solid transparent;border-radius:var(--radius-pill);padding:15px 25px;font-weight:700;font-size:12px;line-height:1.4;text-transform:uppercase;transition:background .32s,color .32s,transform .32s}
.btn-primary{background:var(--red);color:var(--dark)}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:var(--paper)}
.btn-dark:hover{background:#2a2a2a;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:#aaa495}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn span{font-size:22px;font-weight:400;transition:transform .32s}
.btn:hover span{transform:translate(2px,-2px)}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:11px 20px;gap:18px}

/* --------------------------------------------------------------------------
   5. HEADER — navigazione con tendine + menu mobile
   -------------------------------------------------------------------------- */
.topbar{height:var(--header-h);position:sticky;top:0;background:rgb(242 240 233 / .96);backdrop-filter:blur(18px);z-index:50;border-bottom:1px solid var(--line)}
.topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;width:154px;flex-shrink:0}
.brand img{width:100%}
.main-nav{display:flex;align-items:center;gap:8px}
.main-nav>ul{display:flex;align-items:center;gap:4px;list-style:none}
.main-nav>ul>li{position:relative}
.nav-link{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:13px;font-weight:600;border-radius:var(--radius-pill)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--accent-text)}
.nav-caret{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-item.is-open .nav-caret{transform:rotate(180deg)}
.nav-dropdown{position:absolute;z-index:2;top:calc(100% + 8px);left:0;min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 24px 48px rgb(25 25 25 / .14);padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-item.is-open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:block;padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--ink)}
.nav-dropdown a:hover,.nav-dropdown a[aria-current="page"]{background:var(--paper);color:var(--accent-text)}
.nav-dropdown a span{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:14px}
.header-login{font-size:12px;font-weight:600}
.header-login:hover{color:var(--accent-text)}
.header-cta{border:1px solid var(--red);background:var(--red);color:var(--dark);border-radius:var(--radius-pill);padding:11px 20px;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;text-transform:uppercase;transition:background .25s,transform .25s}
.header-cta:hover{background:var(--red-hover);transform:translateY(-2px)}
.header-cta span{font-size:16px}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0}
.menu-toggle-icon{position:relative;width:22px;height:16px}
.menu-toggle-icon span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.menu-toggle-icon span:nth-child(1){top:0}
.menu-toggle-icon span:nth-child(2){top:7px}
.menu-toggle-icon span:nth-child(3){top:14px}
.menu-open .menu-toggle-icon span:nth-child(1),.is-close .menu-toggle-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-toggle-icon span:nth-child(2),.is-close .menu-toggle-icon span:nth-child(2){opacity:0}
.menu-open .menu-toggle-icon span:nth-child(3),.is-close .menu-toggle-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.progress{position:absolute;bottom:-1px;left:0;height:2px;background:var(--red);width:100%;transform:scaleX(0);transform-origin:left}

/* Pannello mobile a tutta altezza */
.mobile-panel{position:fixed;inset:0;z-index:60;background:var(--canvas);display:flex;flex-direction:column;padding:24px var(--gutter) 32px;transform:translateX(100%);transition:transform .32s var(--ease-out);overflow-y:auto}
.mobile-panel[data-open="true"]{transform:translateX(0)}
.mobile-panel-top{display:flex;align-items:center;justify-content:space-between;height:62px;flex-shrink:0}
.mobile-nav{margin-top:24px;display:grid;gap:4px}
.mobile-nav-group{border-bottom:1px solid var(--line)}
.mobile-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;font-size:16px;font-weight:700;text-transform:uppercase}
.mobile-nav-toggle .nav-caret{width:11px;height:11px}
.mobile-nav-group[data-open="true"] .nav-caret{transform:rotate(180deg)}
.mobile-nav-panel{display:grid;gap:2px;max-height:0;overflow:hidden;transition:max-height .3s var(--ease-out)}
.mobile-nav-group[data-open="true"] .mobile-nav-panel{max-height:600px;padding-bottom:14px}
.mobile-nav-panel a{display:block;padding:9px 4px;font-size:14px;color:var(--muted)}
.mobile-nav-panel a:hover{color:var(--accent-text)}
.mobile-nav-simple{display:block;padding:16px 4px;font-size:16px;font-weight:700;text-transform:uppercase;border-bottom:1px solid var(--line)}
.mobile-nav-simple[aria-current="page"]{color:var(--accent-text)}
.mobile-actions{margin-top:28px;display:grid;gap:12px}
body.no-scroll{overflow:hidden}
@media(min-width:801px){.mobile-panel,.menu-toggle{display:none}}

/* --------------------------------------------------------------------------
   6. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb{padding-block:18px;font:11px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;list-style:none;gap:8px}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li:not(:last-child)::after{content:'/';color:var(--line)}
.breadcrumb a:hover{color:var(--accent-text)}
.breadcrumb li[aria-current="page"]{color:var(--ink)}

/* --------------------------------------------------------------------------
   7. PAGE HERO — testata delle pagine interne
   -------------------------------------------------------------------------- */
.page-hero{padding-block:36px 72px}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{max-width:920px}
.page-hero .lead{max-width:760px}
.page-hero-media{margin-top:48px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.page-hero-media img{width:100%}
@media(max-width:800px){.page-hero{padding-block:16px 48px}}

/* --------------------------------------------------------------------------
   8. HERO — classi condivise da più hero (home, pagine interne)
   -------------------------------------------------------------------------- */
.hero-intro{font-size:17px;line-height:1.7;margin:28px 0;max-width:570px;color:var(--muted)}
.hero-intro strong{color:var(--ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.benefits{list-style:none;margin:25px 0 0;display:flex;flex-wrap:wrap;column-gap:17px;row-gap:7px;font-size:11px;color:var(--muted)}
.benefits li::before{content:'✓';color:var(--success);font-weight:700;margin-right:6px}

/* Fascia loghi piattaforme (standalone, componente riutilizzabile) */
.platform-strip{padding-block:32px;border-block:1px solid var(--line);background:var(--surface)}
.platform-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px)}
.platform-strip-inner .platform-logo{font-size:15px}

/* --------------------------------------------------------------------------
   9. CARD — generiche, feature grid, liste con icone
   -------------------------------------------------------------------------- */
.card{padding:34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.card h3{margin-bottom:14px}
.card p{color:var(--muted);font-size:15px}
.card-number{font-size:56px;line-height:1;letter-spacing:-.07em;color:var(--accent-text);font-weight:500;display:block;margin-bottom:24px}
.icon-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#f9e2e1;color:var(--accent-text);margin-bottom:20px}
.icon-tile svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feature-card{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.feature-card h3{font-size:20px;margin-bottom:12px}
.feature-card p{color:var(--muted);font-size:14px}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:11px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text)}
.card-link:hover{text-decoration:underline}
.line-list{list-style:none;margin:24px 0 0}
.line-list li{position:relative;padding:12px 0 12px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.line-list li::before{content:'';position:absolute;left:0;top:23px;width:4px;height:4px;border-radius:50%;background:var(--red)}
.line-list li:last-child{border-bottom:0}
.line-list strong{color:var(--ink)}
.line-list.icon-list li{padding-left:33px}
.line-list.icon-list li::before{content:none}
.list-icon{position:absolute;left:0;top:15px;width:20px;height:20px;fill:none;stroke:var(--accent-text);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){.feature-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:560px){.feature-grid,.grid-3,.grid-4{grid-template-columns:1fr}}
/* feature-grid a 4 card (es. i quattro piani): una riga su desktop, 2×2 su
   tablet, una colonna su telefono. Serve il selettore doppio perché
   .feature-grid (3 colonne) viene dopo .grid-4 e la annullerebbe. */
.feature-grid.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.feature-grid.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feature-grid.grid-4{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   10. BAND CTA FINALE — riutilizzabile, verso il Test
   -------------------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;margin-top:20px;padding:44px;background:var(--dark);color:var(--paper);border-radius:var(--radius-md)}
.cta-band-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
/* Spotlight che segue il mouse e anello di stelle attorno al pulsante (creati da
   initCtaBand in site.js, solo desktop): layer puramente decorativi, dietro al testo. */
.cta-band-spotlight{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgb(255 48 69 / .18),transparent 70%);pointer-events:none;z-index:0}
.cta-band-star-ring{position:absolute;width:0;height:0;pointer-events:none;z-index:0}
.cta-band-star-ring-item{position:absolute;left:0;top:0;color:var(--red);opacity:.4;font-size:11px;line-height:1;transform-origin:0 0}
.cta-band p{font-size:clamp(23px,2.35vw,35px);font-weight:500;letter-spacing:-.045em;line-height:1.3;max-width:640px}
.cta-band .accent{color:var(--red)}
.cta-band .btn{flex:none}
.cta-band-benefits{list-style:none;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:11px;color:#c2c0ba}
.cta-band-benefits li::before{content:'✓';color:var(--red);font-weight:700;margin-right:6px}
@media(max-width:800px){.cta-band{padding:30px}.cta-band-inner{flex-direction:column;align-items:flex-start;gap:24px}.cta-band p{font-size:28px}.cta-band .btn{width:100%}}

/* --------------------------------------------------------------------------
   11. STEPS / PROCESSO
   -------------------------------------------------------------------------- */
.steps-list{list-style:none;margin:0;counter-reset:step;display:grid;gap:0}
.step-item{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--line)}
.step-item:last-child{border-bottom:1px solid var(--line)}
.step-num{font-size:clamp(48px,5vw,72px);font-weight:800;line-height:.9;letter-spacing:-.06em;color:var(--red)}
.step-item h3{margin-bottom:10px}
.step-item p{color:var(--muted);font-size:15px;max-width:640px}
@media(max-width:560px){.step-item{grid-template-columns:1fr;gap:12px}}

/* --------------------------------------------------------------------------
   12. VOLANO DELLA PREFERENZA™ — interattivo
   -------------------------------------------------------------------------- */
.flywheel-section{padding-block:104px;background:#eae7de;border-block:1px solid var(--line)}
.flywheel-intro{text-align:center;max-width:760px;margin-inline:auto}
.flywheel-intro p{margin-top:18px;color:var(--muted);font-size:17px;text-wrap:balance}
.flywheel-intro p:first-child{margin-top:0}
.flywheel-fuel{display:block;margin-top:6px;font-size:clamp(22px,2vw,30px);line-height:1.3;letter-spacing:-.03em;color:var(--accent-text)}
.volano{margin-top:64px}
.volano-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,96px);align-items:center}
.volano-wheel{position:relative;width:min(100%,560px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.volano-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.volano-ring{fill:none;stroke:#d6cfbf;stroke-width:6}
.volano-progress-arc{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s var(--ease-out)}
.volano-arrow{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.3;transition:opacity .35s}
.volano-arrow.is-done{opacity:1}
.volano-disc{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:stroke .35s,stroke-width .35s}
.volano-icon{fill:none;stroke:var(--ink);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.volano-accent{stroke:var(--red)}
.volano-fill-accent{fill:var(--red);stroke:none}
.volano-badge circle{fill:var(--dark);transition:fill .35s}
.volano-badge text{fill:var(--paper);font:700 14px var(--font);text-anchor:middle;dominant-baseline:central;transition:fill .35s}
.volano-node{opacity:.55;transition:opacity .35s;cursor:pointer}
.volano-node.is-done{opacity:1}
.volano-node-inner{transition:transform .45s var(--ease-out)}
.volano-node.is-active{opacity:1}
.volano-node.is-active .volano-node-inner{transform:scale(1.17)}
.volano-node.is-active .volano-disc{stroke:var(--red);stroke-width:2.5}
.volano-node.is-active .volano-badge circle{fill:var(--red)}
.volano-node.is-active .volano-badge text{fill:var(--dark)}
.volano-center{position:absolute;inset:29.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:var(--dark);color:var(--paper);box-shadow:0 0 0 7px rgb(25 25 25 / .05),0 26px 50px rgb(25 25 25 / .22)}
.volano-center-star{font-size:8cqw;font-weight:800;line-height:.9;color:var(--red)}
.volano-center-kicker{margin-top:.6cqw;font-size:2.4cqw;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.volano-center-title{font-size:6.2cqw;font-weight:800;line-height:1;letter-spacing:-.05em;text-transform:uppercase;color:var(--red)}
.volano-center-rule{width:6cqw;height:1px;margin:2cqw 0 1.6cqw;background:var(--red)}
.volano-center-note{font-size:2cqw;line-height:1.45;color:#c2c0ba}
@container (max-width:430px){.volano-center-note,.volano-center-rule{display:none}.volano-center-kicker{font-size:2.9cqw}.volano-center-title{font-size:7cqw}}
.volano-panel .eyebrow{justify-content:flex-start}
.volano-lead{margin-top:18px;max-width:520px;font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--muted)}
.volano-steps{list-style:none;margin:40px 0 0;padding:0}
.volano-step{padding-top:24px;margin-top:24px;border-top:1px solid #cdc6b6}
.volano-step:first-child{padding-top:0;margin-top:0;border-top:0}
.volano-step h3{font-size:clamp(24px,2.4vw,34px);font-weight:700;line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}
.volano-step p{margin-top:14px;max-width:520px;font-size:16px;line-height:1.65;color:var(--muted)}
.volano-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:36px;max-width:520px}
.volano-progress span{position:relative;height:2px;overflow:hidden;background:#cdc6b6}
.volano-progress span::after{content:'';position:absolute;inset:0;background:var(--red);transform:scaleX(var(--fill,0));transform-origin:left;transition:transform .3s}
/* Stato attivato via JS: un solo step visibile alla volta */
.volano.is-enhanced .volano-step{display:none}
.volano.is-enhanced .volano-step.is-active{display:block;animation:volano-fade .4s var(--ease-out)}
@keyframes volano-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:800px){.volano-stage{grid-template-columns:1fr;gap:28px}.volano-wheel{width:min(100%,420px)}.volano{margin-top:40px}}
@media(prefers-reduced-motion:reduce){.volano-node-inner,.volano-progress-arc,.volano-arrow{transition:none}}
/* Volano guidato dallo scroll (classe .is-pinned messa da site.js, solo con
   movimento consentito): come nella landing dentisti, il volano è alto quanto il
   percorso di scroll (--travel schermate) e il palco resta fermo sotto l'header
   mentre si avanza di fase in fase. Arco e barre seguono lo scroll, quindi senza
   transizioni; i testi delle fasi sono sovrapposti e si alternano in dissolvenza. */
.volano.is-pinned{height:calc(100svh - var(--nav-h,86px) + var(--travel,6.7) * 100svh)}
.volano.is-pinned .volano-stage{position:sticky;top:var(--nav-h,86px);height:calc(100svh - var(--nav-h,86px));align-content:center}
.volano.is-pinned .volano-wheel{width:min(100%,560px,calc(100svh - var(--nav-h,86px) - 96px))}
.volano.is-pinned .volano-progress-arc,.volano.is-pinned .volano-progress span::after{transition:none}
.volano.is-pinned .volano-steps{display:grid}
.volano.is-pinned .volano-step{grid-area:1/1;margin:0;padding:0;border:0;opacity:var(--fade,0);transform:translate3d(0,calc(var(--d,0) * 40px),0)}
@media(max-width:800px){.volano.is-pinned .volano-stage{gap:16px}.volano.is-pinned .volano-wheel{width:min(84vw,44svh)}.volano.is-pinned .volano-lead,.volano.is-pinned .volano-panel .eyebrow{display:none}.volano.is-pinned .volano-steps{margin-top:0}.volano.is-pinned .volano-step h3{font-size:clamp(22px,6.4vw,30px)}.volano.is-pinned .volano-step p{margin-top:10px;font-size:15px;line-height:1.55}.volano.is-pinned .volano-progress{margin-top:18px}}
@media print{.volano.is-pinned{height:auto}.volano.is-pinned .volano-stage{position:static;height:auto}.volano.is-pinned .volano-steps{display:block}.volano.is-pinned .volano-step{opacity:1;transform:none;margin-top:24px}}

/* --------------------------------------------------------------------------
   13. CARD STICKY SOVRAPPOSTE (come nella landing)
   -------------------------------------------------------------------------- */
.sticky-stack-section{padding-block:72px 104px}
.sticky-stack-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.sticky-stack-media{position:sticky;top:calc(var(--header-h) + 40px);aspect-ratio:658/583;overflow:hidden;border-radius:var(--radius-md)}
.sticky-stack-media img{width:100%;height:100%;object-fit:cover}
.sticky-stack{padding-bottom:30px;min-width:0}
.sticky-card{position:sticky;top:calc(var(--header-h) + 24px);min-height:340px;padding:33px;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:space-between;gap:28px;border:1px solid var(--line);margin-bottom:24px;overflow:hidden;background:var(--surface);color:var(--ink);z-index:1}
.sticky-card:nth-child(2){top:calc(var(--header-h) + 44px);background:var(--red);color:var(--dark);border-color:var(--red);z-index:2}
.sticky-card:nth-child(3){top:calc(var(--header-h) + 64px);background:#232323;color:var(--paper);border-color:#3d3d3b;z-index:3}
.sticky-card-top{font:10px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.sticky-card h3{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.05em;line-height:1.08;max-width:360px;font-weight:600;text-transform:none}
.sticky-card p{font-size:14px;line-height:1.75;max-width:440px;color:inherit}
@media(max-width:800px){.sticky-stack-grid{grid-template-columns:1fr;gap:30px}.sticky-stack-media{position:static;width:min(100%,560px);margin-inline:auto}.sticky-card{padding:26px;min-height:280px}}
@media(prefers-reduced-motion:reduce){.sticky-card,.sticky-stack-media{position:relative;top:auto!important}}
@media print{.sticky-card,.sticky-stack-media{position:relative;top:auto!important}}

/* --------------------------------------------------------------------------
   14. TABELLA DI CONFRONTO responsive (piani)
   -------------------------------------------------------------------------- */
.compare-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.compare-table{width:100%;border-collapse:collapse;min-width:720px}
.compare-table caption{text-align:left;padding:20px 24px;font-weight:700}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table thead th{font:11px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.compare-table tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.compare-table td{color:var(--muted)}
.compare-table tr:last-child td,.compare-table tr:last-child th{border-bottom:0}
.compare-table .col-highlight{background:#fff6ea}
.compare-yes{color:var(--success);font-weight:700}
.compare-no{color:var(--muted)}

/* --------------------------------------------------------------------------
   15. CARD PREZZI
   -------------------------------------------------------------------------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pricing-card{display:flex;flex-direction:column;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.pricing-card.is-featured{background:var(--dark);color:var(--paper);border-color:var(--dark);position:relative}
.pricing-card.is-featured .pricing-note{color:#c2c0ba}
.pricing-badge{position:absolute;top:-13px;left:30px;padding:6px 14px;background:var(--red);color:var(--dark);border-radius:var(--radius-pill);font:10px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.pricing-name{font:11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.pricing-card.is-featured .pricing-name{color:var(--red)}
.pricing-price{margin-top:14px;font-size:40px;font-weight:800;letter-spacing:-.04em}
.pricing-price span{font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.pricing-card.is-featured .pricing-price span{color:#c2c0ba}
.pricing-note{margin-top:6px;font-size:12px;color:var(--muted)}
.pricing-desc{margin-top:16px;font-size:14px;color:var(--muted)}
.pricing-card.is-featured .pricing-desc{color:#c2c0ba}
.pricing-list{list-style:none;margin:24px 0 0;flex:1;display:grid;gap:10px}
.pricing-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.5}
.pricing-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--success);font-weight:700}
.pricing-card.is-featured .pricing-list li::before{color:var(--red)}
.pricing-card .btn{margin-top:26px}
@media(max-width:1100px){.pricing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pricing-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   16. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq-list{display:grid;gap:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:18px;height:18px;flex-shrink:0}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;top:50%;left:50%;background:var(--accent-text);transform:translate(-50%,-50%)}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px;transition:transform .25s}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item p{padding:0 4px 24px;max-width:760px;color:var(--muted);font-size:15px;line-height:1.75}

/* --------------------------------------------------------------------------
   17. PROSA — articoli e pagine legali
   -------------------------------------------------------------------------- */
.prose{max-width:820px}
.prose h2{font-size:28px;text-transform:none;letter-spacing:-.02em;margin-top:56px;margin-bottom:16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin-top:32px;margin-bottom:12px}
.prose p{margin-top:16px;color:#3f3d38;font-size:16px;line-height:1.8}
.prose p:first-child{margin-top:0}
.prose ul,.prose ol{margin:16px 0;padding-left:22px;color:#3f3d38;font-size:16px;line-height:1.8}
.prose li+li{margin-top:6px}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--accent-text)}
.prose blockquote{margin:24px 0;padding:20px 24px;border-left:3px solid var(--red);background:var(--surface);font-size:18px;font-style:italic}
.prose figure{margin:28px 0}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.legal-list{margin:16px 0;padding:0;list-style:none;display:grid;gap:10px}
.legal-list li{position:relative;padding-left:20px;font-size:15px;color:#3f3d38;line-height:1.7}
.legal-list li::before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.legal-table{display:grid;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);margin:16px 0}
.legal-row{display:grid;grid-template-columns:1.25fr 1fr}
.legal-row+.legal-row{border-top:1px solid var(--line)}
.legal-row span{padding:14px 18px;font-size:14px;line-height:1.6;color:#3f3d38}
.legal-row span+span{border-left:1px solid var(--line)}
.legal-row-head span{font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
@media(max-width:560px){.legal-row{grid-template-columns:1fr}.legal-row span+span{border-left:0;border-top:1px dashed var(--line)}}

/* --------------------------------------------------------------------------
   18. FORM (Prospect)
   -------------------------------------------------------------------------- */
.form-panel{padding:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.form-panel>h3{text-transform:uppercase;font-size:23px;margin-bottom:28px}
.field{display:block;margin-bottom:19px;min-width:0}
.field>span,.field>.field-label,legend{display:block;font-size:12px;font-weight:600;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;min-width:0;padding:12px 14px;background:#f8f6ef;border:1px solid #aaa495;border-radius:var(--radius-sm);color:var(--ink);font-size:13px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#777267}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-text);outline:1px solid var(--accent-text);outline-offset:0}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--error)}
.field-error{display:block;font-size:11px;color:var(--error);line-height:1.5;margin-top:5px}
.field-error:empty{display:none}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
fieldset{border:0;padding:0;margin:4px 0 23px;min-width:0}
legend{padding:0}
.priority-list{display:grid;gap:6px}
.priority-list label{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;min-height:30px}
input[type=radio],input[type=checkbox]{accent-color:var(--accent-text);width:16px;height:16px;margin:0;flex-shrink:0}
.form-panel>.btn{width:100%}
#form-status{font-size:13px;color:var(--muted);line-height:1.7;margin-top:18px}
#form-status:empty{display:none}
.combobox{position:relative}
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;margin:0;padding:6px;list-style:none;max-height:288px;overflow-y:auto;background:var(--surface);border:1px solid #aaa495;border-radius:var(--radius-sm);box-shadow:0 18px 36px rgb(25 25 25 / .14)}
.suggestions[hidden]{display:none}
.suggestions li[role=option]{display:grid;gap:1px;padding:9px 11px;border-radius:6px;font-size:13px;line-height:1.45;cursor:pointer}
.suggestions li[role=option] strong{font-weight:600;color:var(--ink)}
.suggestions li[role=option] span{font-size:12px;color:var(--muted)}
.suggestions li[aria-selected=true],.suggestions li[role=option]:not(.suggestion-note):hover{background:var(--canvas)}
.suggestions .suggestion-note{cursor:default;color:var(--muted)}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-panel>.btn:disabled{opacity:.65;cursor:progress;transform:none}
.consents{display:grid;gap:10px;margin:2px 0 20px}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.55;color:var(--muted)}
.consent input[type=checkbox]{margin-top:2px}
.consent label{cursor:pointer}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--accent-text)}
.consent-required{color:var(--accent-text);font-weight:700}
.consent-optional{color:#8a857a}
.consent input[aria-invalid=true]{outline:2px solid var(--error);outline-offset:2px}
.consents .field-error{margin:-4px 0 0 26px}
.turnstile-slot{display:flex;justify-content:center}
.turnstile-slot iframe{margin-bottom:16px}
@media(max-width:800px){.form-panel{padding:32px}.form-pair{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   19. FOOTER multi-colonna
   -------------------------------------------------------------------------- */
.site-footer{padding-top:64px;padding-bottom:26px;background:var(--red);color:var(--dark);overflow:hidden}
.footer-columns{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:44px;border-bottom:1px solid rgb(25 25 25 / .18)}
.footer-brand-col p{margin-top:16px;font-size:13px;line-height:1.6;max-width:280px;color:var(--dark)}
/* Copia decorativa del logo: il ritaglio isola le cinque stelle originali. */
.footer-brand-col .brand{position:relative}
.footer-brand-col .footer-logo-stars{position:absolute;inset:0;filter:brightness(0) invert(1);clip-path:inset(0 0 65% 53%);pointer-events:none}
.footer-col h2{font:11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:16px;color:var(--dark)}
.footer-col ul{list-style:none;display:grid;gap:10px}
.footer-col a{font-size:13px;color:var(--dark)}
.footer-col a:hover{text-decoration:underline}
.footer-bottom{padding-top:21px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:10px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
.footer-bottom a{color:var(--dark)}
.footer-bottom a:hover{text-decoration:underline}
@media(max-width:1100px){.footer-columns{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){.footer-columns{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media(max-width:560px){.footer-columns{grid-template-columns:1fr 1fr}.site-footer{padding-top:48px}}

/* --------------------------------------------------------------------------
   20. UTILITÀ
   -------------------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out)}
.mt-0{margin-top:0}
.mt-1{margin-top:var(--space-4)}
.mt-2{margin-top:var(--space-8)}
.mt-3{margin-top:var(--space-12)}
.text-muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--paper);border:1px solid var(--line);font:10px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.hr{height:1px;background:var(--line);border:0;margin:var(--space-12) 0}
.missing-page{color:var(--muted);font-style:italic}

/* Sezione noindex / 404 */
.error-page{padding-block:96px;text-align:center}
.error-page .error-code{font-size:clamp(80px,14vw,180px);font-weight:800;color:var(--red);line-height:1;letter-spacing:-.06em}
.error-page h1{margin-top:16px}
.error-page .lead{margin-inline:auto}
.error-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}

/* --------------------------------------------------------------------------
   21. RESPONSIVE — breakpoint globali (1100 / 800 / 560), coerenti con la landing
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .grid-2{gap:40px}
  .cta-band-inner{gap:24px}
}
@media(max-width:800px){
  .section{padding-block:72px}
  .topbar{height:74px}
  .main-nav,.header-login{display:none}
  .menu-toggle{display:flex}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .brand{width:136px}
  /* Il CTA "Fai il Test gratuito" resta solo dentro il pannello mobile: in topbar basta l'hamburger. */
  .header-actions>.header-cta{display:none}
}
@media(max-width:560px){
  :root{--gutter:22px}
  .section{padding-block:56px}
  .topbar .brand{width:118px}
  h2{font-size:34px}
  h3{font-size:22px}
}

/* --------------------------------------------------------------------------
   22. PREFERS-REDUCED-MOTION e STAMPA
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn:hover{transform:none}
  .js .reveal{opacity:1;transform:none}
}
@media print{
  .topbar,.menu-toggle,.mobile-panel,.progress,.cta-band,.site-footer,.breadcrumb{display:none}
  body{background:white}
  .section{padding-block:24px}
  a{color:inherit;text-decoration:underline}
}

/* --------------------------------------------------------------------------
   23. BLOG E LEGALI — introdotti da blog/index.html e dalle pagine legali
   -------------------------------------------------------------------------- */
/* Griglia articoli del blog (indice) */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card{display:flex;flex-direction:column;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 36px -20px rgb(25 25 25 / .28)}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.blog-card h3{margin-top:16px;font-size:21px;letter-spacing:-.02em}
.blog-card h3 a{color:var(--ink);background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1.5px;transition:background-size .3s var(--ease-out),color .25s}
.blog-card h3 a:hover{color:var(--accent-text);background-size:100% 1.5px}
.blog-card p{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.7;flex:1}
.blog-card .card-link{margin-top:20px}
@media(max-width:800px){.blog-grid{grid-template-columns:1fr}}

/* Meta articolo (autore, data, tempo di lettura) sotto il titolo */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.article-meta span[aria-hidden]{color:var(--line)}

/* Indice dei contenuti (articoli e pagine legali) */
.toc-box{margin:0 0 44px;padding:28px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.toc-box-title{font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.toc-box ol{list-style:decimal;margin:0;padding-left:20px;display:grid;gap:8px}
.toc-box a{font-size:14px;color:var(--ink)}
.toc-box a:hover{color:var(--accent-text);text-decoration:underline}

/* Box "In sintesi" a metà articolo */
.summary-box{margin:40px 0;padding:28px 32px;background:var(--dark);color:var(--paper);border-radius:var(--radius-md)}
.summary-box-title{font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.summary-box ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.summary-box li{position:relative;padding-left:20px;font-size:15px;line-height:1.65;color:#e5e3dc}
.summary-box li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* Box di rimando alle altre pagine legali, in cima a ogni pagina legale */
.legal-nav{margin-bottom:40px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.legal-nav-title{font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.legal-nav a{display:inline-flex;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:13px;color:var(--ink)}
.legal-nav a:hover{border-color:var(--accent-text);color:var(--accent-text)}
.legal-nav a[aria-current="page"]{background:var(--dark);border-color:var(--dark);color:var(--paper)}

/* --------------------------------------------------------------------------
   PAGINE PIANI / AZIENDA — introdotte da /piani, /start, /faq, /contatti
   -------------------------------------------------------------------------- */
/* Variante a 3 colonne di .pricing-grid, per le pagine con 3 card (senza START) */
.pricing-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.pricing-grid-3{grid-template-columns:1fr}}

/* Blocco START: più sobrio delle pricing-card, separato dal confronto tra i piani con specialista (/piani) */
.start-panel{display:flex;flex-wrap:wrap;align-items:center;gap:32px 40px;padding:36px 40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.start-panel-info{flex:2 1 360px;min-width:260px}
.start-panel-info h3{margin-top:10px;margin-bottom:10px}
.start-panel-info p{color:var(--muted);font-size:14px}
.start-panel-price{flex:1 1 160px}
.start-panel-price .pricing-price{margin-top:0}
.start-panel-actions{flex:1 1 200px;display:flex;justify-content:flex-end}
@media(max-width:700px){.start-panel-actions{justify-content:flex-start}}

/* Nav rapida ai gruppi di domande in /faq */
.faq-groups-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.faq-groups-nav a{padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);font:11px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--surface)}
.faq-groups-nav a:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* Titolo di gruppo dentro il lungo elenco di FAQ generali */
.faq-group-title{scroll-margin-top:calc(var(--header-h) + 20px)}

/* --------------------------------------------------------------------------
   TEST DI PREFERIBILITÀ — /test-preferibilita
   -------------------------------------------------------------------------- */
/* Didascalia sotto l'immagine di esempio del report (chiarisce che è illustrativa) */
.page-hero-media figcaption{padding:14px 20px;font-size:13px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}

/* ==========================================================================
   === HOME === — componenti introdotti dalla nuova Home (index.html):
   hero con mappa SVG ("martello visivo"), marquee settori, manifesto in
   carbone, tab dei settori, accordion dei cinque verbi, percorso in tre
   passi, "cosa promettiamo/cosa no", piani in breve. Classi prefissate
   `home-`. Riusa dove possibile i componenti già esistenti (.hero-ctas,
   .benefits, .card-number, .card-link, .pricing-name/.pricing-price,
   .blog-grid, .faq-list, .cta-band).
   ========================================================================== */

/* Hero — copy + mappa SVG stilizzata con un "preferito" evidenziato */
.home-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;padding-block:56px 40px;align-items:center}
.home-hero-copy{max-width:640px}
.home-hero-copy .eyebrow{margin-bottom:26px}
/* Piattaforme analizzate (Google Maps + AI): loghi fermi, sotto le CTA. L'etichetta
   chiarisce che sono le piattaforme misurate dal Test, non partner. */
.home-hero-platforms{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:570px}
.home-hero-platforms-label{font:10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.home-hero-platforms-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.home-hero-platforms-list .platform-logo{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.home-hero-platforms-list img{width:22px;height:22px;flex:none}
@media(max-width:560px){.home-hero-platforms-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}.home-hero-platforms-list .platform-logo{font-size:13px}}
.home-hero-map{position:relative;aspect-ratio:6/5;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);padding:20px}
.home-hero-map-svg{width:100%;height:100%;display:block;overflow:visible}
.home-hero-pins-minor use{fill:#8a857a}
.home-hero-pin-eye{fill:var(--surface)}
.home-hero-pin-featured{fill:var(--red)}
.home-hero-pin-featured .home-hero-pin-eye{fill:var(--dark)}
.home-hero-ring{fill:none;stroke:var(--red);stroke-width:2;opacity:.5;transform-box:fill-box;transform-origin:50% 50%;animation:home-hero-pulse 2.6s var(--ease-out) infinite}
.home-hero-callout-bg{fill:var(--dark)}
.home-hero-callout-text{fill:var(--paper);font-family:var(--font);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.home-hero-callout-stars{fill:var(--red)}
@keyframes home-hero-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}
@media(max-width:1100px){.home-hero{gap:36px}.home-hero-copy{max-width:none}}
@media(max-width:800px){.home-hero{grid-template-columns:1fr;padding-block:32px 12px;gap:32px}.home-hero-map{aspect-ratio:16/11}}
@media(max-width:560px){.home-hero-callout-text{font-size:13px}.home-hero-callout-stars{font-size:14px}}
@media(prefers-reduced-motion:reduce){.home-hero-ring{animation:none;opacity:.3}}

/* Marquee settori — "04 / CONTINUOUS" del design system: nastro rosso inclinato,
   testo carbone, asterischi del marchio come separatori; statico con
   reduced-motion. Il wrap ritaglia gli angoli del nastro ruotato (niente scroll
   orizzontale) e gli lascia spazio sopra e sotto. */
/* A cavallo tra hero e manifesto: il wrap si sovrappone per metà all'inizio del
   manifesto (margine negativo = metà della sua altezza) e una fascia color pagina,
   inclinata come il nastro, copre tutto ciò che sta sopra la linea centrale del
   nastro. Risultato: sopra il nastro solo il fondo dell'hero, sotto solo la
   sezione scura (con la sua foto), senza triangoli dell'altro colore. */
:root{--marquee-band:clamp(46px,4.8vw,70px);--marquee-pad:clamp(14px,2vw,28px);--marquee-overlap:calc(var(--marquee-band) / 2 + var(--marquee-pad))}
.home-marquee-wrap{position:relative;z-index:2;overflow:hidden;padding-block:var(--marquee-pad);margin-bottom:calc(var(--marquee-overlap) * -1)}
.home-marquee-wrap::before{content:'';position:absolute;left:-10%;right:-10%;top:-100%;bottom:50%;background:var(--canvas);transform:rotate(-1.6deg);transform-origin:50% 100%;pointer-events:none}
.home-marquee-wrap+.home-manifesto{padding-top:calc(104px + var(--marquee-overlap))}
@media(max-width:800px){.home-marquee-wrap+.home-manifesto{padding-top:calc(72px + var(--marquee-overlap))}}
.home-marquee-defs{position:absolute;width:0;height:0;overflow:hidden}
.home-marquee{position:relative;display:flex;align-items:center;height:var(--marquee-band);background:var(--red);color:var(--dark);overflow:hidden;width:102%;margin-left:-1%;transform:rotate(-1.6deg)}
.home-marquee-track{display:flex;width:max-content;animation:home-marquee-scroll 28s linear infinite}
.home-marquee:hover .home-marquee-track{animation-play-state:paused}
.home-marquee-group{display:flex;align-items:center;gap:clamp(22px,2.6vw,38px);padding-right:clamp(22px,2.6vw,38px);flex-shrink:0}
.home-marquee-group span{font-size:clamp(18px,2.4vw,32px);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.home-marquee-star{width:clamp(16px,1.9vw,26px);height:clamp(16px,1.9vw,26px);flex:none;fill:currentColor}
@keyframes home-marquee-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.home-marquee{height:auto;padding-block:14px}.home-marquee-track{animation:none;width:100%}.home-marquee-group:nth-of-type(n+2){display:none}.home-marquee-group{flex-wrap:wrap;flex-shrink:1;min-width:0;padding-right:clamp(24px,4.6vw,66px);padding-left:clamp(24px,4.6vw,66px);row-gap:10px}}

/* Manifesto — sezione tipografica in carbone: statement + tre colonne numerate */
.home-manifesto{background:var(--dark);color:var(--paper);padding-block:104px}
.home-manifesto-head{max-width:920px}
.home-manifesto-head h2{margin-bottom:4px}
.home-manifesto-statement{font-size:clamp(30px,4vw,54px);font-weight:600;letter-spacing:-.045em;line-height:1.1;text-transform:uppercase}
.home-manifesto-cols{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid #3d3d3b;padding-top:48px}
.home-manifesto-col h3{margin:14px 0 10px;text-transform:uppercase}
.home-manifesto-col p{font-size:15px;line-height:1.7;color:#c2c0ba}
.home-manifesto-col p strong{color:var(--paper)}
.home-manifesto-quote{margin-top:56px;padding-top:40px;border-top:1px solid #3d3d3b;max-width:780px;font-size:clamp(19px,1.8vw,25px);line-height:1.55;font-style:italic;color:var(--paper)}
@media(max-width:800px){.home-manifesto{padding-block:72px}.home-manifesto-cols{grid-template-columns:1fr;gap:32px;margin-top:44px;padding-top:32px}.home-manifesto-quote{margin-top:40px;padding-top:28px}}

/* Tab dei settori — role=tablist/tab/tabpanel; senza JS i pannelli restano impilati */
.home-sectors{position:relative;overflow:hidden;margin-top:56px}
/* Nome del settore attivo, gigante e in contorno, dietro al pannello (solo desktop,
   vedi @media sotto): testo puramente decorativo, sincronizzato via JS col tab attivo. */
.home-sectors-bgword{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;font-size:clamp(70px,13vw,200px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none;z-index:0}
.home-tablist{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.home-tab{padding:14px 20px;border-radius:var(--radius-pill) var(--radius-pill) 0 0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.home-tab:hover{color:var(--ink)}
.home-tab[aria-selected="true"]{color:var(--accent-text);border-color:var(--red)}
/* Indicatore che scivola da un tab all'altro (gestito via GSAP in initSectorTabs):
   quando è attivo, sostituisce il bordo statico del tab selezionato qui sopra. */
.home-tab-indicator{position:absolute;left:0;top:0;height:2px;width:0;background:var(--red);pointer-events:none}
.home-tabs.is-enhanced .home-tab[aria-selected="true"]{border-color:transparent}
.home-tabpanels{position:relative;z-index:1;margin-top:8px}
.home-tabpanel{padding:32px 0;border-bottom:1px solid var(--line)}
.home-tabpanel:last-child{border-bottom:0}
.home-tabpanel-promise{font-size:22px;text-transform:none;letter-spacing:-.02em}
.home-tabpanel p{margin-top:14px;color:var(--muted);font-size:15px;max-width:680px}
.home-tabpanel .home-tabpanel-moment{color:var(--ink)}
.home-tabpanel .card-link{margin-top:20px;display:inline-flex}
.home-tabs.is-enhanced .home-tabpanel{display:none}
.home-tabs.is-enhanced .home-tabpanel.is-active{display:block}
@media(max-width:560px){.home-tablist{gap:4px}.home-tab{padding:11px 14px;font-size:11px}}
@media(max-width:800px){.home-sectors-bgword{display:none}}

/* Accordion dei cinque verbi — <details>/<summary> nativo, righe numerate */
.home-services{margin-top:16px;border-top:1px solid var(--line)}
.home-service{position:relative;border-bottom:1px solid var(--line)}
.home-service-trigger{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;padding:26px 4px;list-style:none}
.home-service-trigger::-webkit-details-marker{display:none}
/* Riempimento rosso tenue che attraversa la riga all'hover (solo desktop: niente
   hover reale su touch). Dietro al testo, che resta sopra con z-index. */
.home-service-fill{position:absolute;inset:0;background:rgb(255 48 69 / .07);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease-out);z-index:0}
.home-service-trigger:hover .home-service-fill{transform:scaleX(1)}
.home-service-index{position:relative;z-index:1;font:11px/1.6 var(--mono);color:var(--muted);transition:color .25s,transform .3s var(--ease-out)}
.home-service-trigger:hover .home-service-index{color:var(--accent-text);transform:rotate(8deg)}
.home-service-name{position:relative;z-index:1;font-size:clamp(22px,2.8vw,36px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;transition:color .25s,transform .3s var(--ease-out)}
.home-service-trigger:hover .home-service-name{transform:translateX(6px)}
.home-service-icon{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;line-height:1;flex-shrink:0;transition:transform .3s,background .25s,color .25s,border-color .25s}
.home-service[open] .home-service-icon{transform:rotate(45deg);background:var(--red);color:var(--dark);border-color:var(--red)}
.home-service[open] .home-service-name,.home-service-trigger:hover .home-service-name{color:var(--accent-text)}
.home-service-content{padding:0 4px 30px 72px;max-width:660px}
.home-service-content p{color:var(--muted);font-size:15px}
.home-service-content .card-link{margin-top:16px;display:inline-flex}
@media(max-width:560px){.home-service-trigger{grid-template-columns:32px 1fr auto;gap:12px;padding:20px 2px}.home-service-content{padding-left:44px}}

/* Percorso in tre passi orizzontali, con linea di collegamento */
.home-path{margin-top:56px}
.home-path-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.home-path-list::before{content:'';position:absolute;top:29px;left:29px;right:calc((100% - 80px)/3 - 29px);height:1px;background:var(--line);z-index:0}
.home-path-step{position:relative;z-index:1}
.home-path-num{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--accent-text);font-weight:800;font-size:18px;margin-bottom:20px}
/* Anello che si espande e svanisce quando il cerchio si attiva (vedi popRing in initHomePath) */
.home-path-num-ring{position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--red);opacity:0;pointer-events:none}
.home-path-step p{margin-top:10px;color:var(--muted);font-size:14px}
.home-path-cta{margin-top:44px;text-align:center}
@media(max-width:800px){.home-path-list{grid-template-columns:1fr;gap:32px}.home-path-list::before{display:none}}

/* Cosa promettiamo / cosa no — sezione scura, due colonne */
.home-promise{background:var(--dark);color:var(--paper);padding-block:104px}
.home-promise .lead{color:#c2c0ba}
.home-promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:48px}
.home-promise-col h3{font:12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.home-promise-col.is-yes h3{color:#9fd2a8}
.home-promise-col.is-no h3{color:#e79a9a}
.home-promise-list{list-style:none;margin:20px 0 0;display:grid;gap:14px}
.home-promise-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6;color:#dedcd3}
/* Icone SVG (al posto del glifo testuale ✓/–): il tratto si disegna via
   stroke-dashoffset in initHomePromise, in stagger sincronizzato allo scroll. */
.home-promise-icon{flex-shrink:0;width:16px;height:16px;margin-top:3px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-yes .home-promise-icon{stroke:#9fd2a8}
.is-no .home-promise-icon{stroke:#e79a9a}
/* Colonna "cosa non promettiamo": barratura decorativa che si traccia e si
   ritira sopra ogni voce (il testo resta leggibile, non è mai un vero <del>). */
.home-promise-text{position:relative}
.home-promise-strike{position:absolute;left:0;right:0;top:.68em;height:1.5px;background:#e79a9a;transform:scaleX(0);transform-origin:left center;pointer-events:none}
.home-promise .btn-outline{border-color:#666660;color:var(--paper)}
.home-promise .btn-outline:hover{background:var(--paper);color:var(--dark);border-color:var(--paper)}
@media(max-width:800px){.home-promise{padding-block:64px}.home-promise-grid{grid-template-columns:1fr;gap:36px}}

/* Piani in breve — riga compatta, riusa .pricing-name/.pricing-price */
.home-plans{margin-top:48px}
.home-plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.home-plan-mini{position:relative;overflow:hidden;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.home-plan-mini .pricing-price{margin-top:10px;font-size:32px}
.home-plan-desc{margin-top:12px;color:var(--muted);font-size:14px}
.home-plan-mini .card-link{margin-top:18px;display:inline-flex}
.home-plans-foot{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.home-plans-start{font-size:14px;color:var(--muted)}
.home-plans-start a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.home-plans-start a:hover{color:var(--accent-text)}

/* --------------------------------------------------------------------------
   ANIMAZIONI GSAP — supporto CSS minimo per assets/js/site.js (sez. "ANIMAZIONI
   GSAP"). Tutto il resto (stati iniziali, reveal, timeline) è gestito via JS
   con gsap.set/.from/.to: qui solo ciò che non può essere fatto altrimenti
   (sostituire una ::before statica, disattivare un'animazione CSS quando GSAP
   ne prende il controllo).
   -------------------------------------------------------------------------- */
/* Percorso in tre passi: linea rossa reale sopra la traccia grigia (::before),
   per poterla scrubbare con lo scroll (transform, non width: niente layout
   shift). Entrambe vanno dal centro del cerchio 01 al centro del 03. */
.home-path-line-progress{position:absolute;top:29px;left:29px;right:calc((100% - 80px)/3 - 29px);height:1px;background:var(--red);transform:scaleX(0);transform-origin:left center;z-index:0}
/* La traccia grigia compare insieme ai passi (classe is-in messa all'ingresso),
   così non resta sospesa da sola prima che entrino i cerchi. */
.home-path-list.has-gsap-line::before{opacity:0;transition:opacity .6s var(--ease-out)}
.home-path-list.has-gsap-line.is-in::before{opacity:1}
/* Sotto 800px .home-path-list torna a colonna singola (vedi sez. HOME): niente
   linea (né quella statica né questa), esattamente come per la ::before originale. */
@media(max-width:800px){.home-path-line-progress{display:none}}
.home-path-step.is-active .home-path-num{background:var(--red);border-color:var(--red);color:var(--dark);transition:background .3s,border-color .3s,color .3s}

/* Marquee settori: quando GSAP guida la velocità in base allo scroll,
   l'animazione a velocità fissa di site.css si disattiva (una sola in corsa). */
.home-marquee.gsap-marquee-active .home-marquee-track{animation:none}
@media(max-width:800px){.home-plans-grid{grid-template-columns:1fr}}

/* Cinque verbi: linea reale al posto del border-bottom di ogni riga, per poterla
   "disegnare" (scaleX) in stagger all'ingresso in viewport (initHomeAccordionEntrance). */
.home-service-line{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;z-index:1}
.home-services.has-gsap-lines .home-service{border-bottom-color:transparent}

/* Sezioni scure (manifesto, cosa promettiamo, cta-band): si aprono da un riquadro
   inset con angoli arrotondati, in scrub con lo scroll (initDarkSectionReveal).
   Il campo di stelle decorative è creato via JS solo su desktop. */
.home-manifesto,.home-promise{position:relative;overflow:hidden}
.home-manifesto>.wrap,.home-promise>.wrap{position:relative;z-index:1}
.gsap-star-field{position:absolute;inset:0;pointer-events:none;z-index:0}
.gsap-star{position:absolute;color:var(--red);opacity:.3;line-height:1}
/* Stesso campo di stelle sulle .section-dark delle pagine interne (classe messa via JS). */
.has-star-field{position:relative;overflow:hidden}
.has-star-field>.wrap{position:relative;z-index:1}

/* Card dei piani (Home e /piani): riflesso di luce che segue il cursore, creato da
   initCardTilt solo su desktop. Sta in un livello ritagliato sulla card, così il
   badge «Più scelto» che sporge sopra la card non viene tagliato. */
.pricing-card{position:relative}
.tilt-glow-layer{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.tilt-glow{position:absolute;left:0;top:0;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(circle,rgb(255 48 69 / .16),transparent 70%);opacity:0;transition:opacity .25s}
.has-tilt:hover .tilt-glow{opacity:1}
.has-tilt>:not(.tilt-glow-layer):not(.pricing-badge){position:relative;z-index:1}
.has-tilt>.pricing-badge{z-index:2}

/* Steps / processo: linee reali al posto dei bordi di ogni passo, per poterle
   "disegnare" in stagger all'ingresso (initStepsLists). */
.steps-list.has-gsap-lines .step-item{position:relative;border-top-color:transparent}
.steps-list.has-gsap-lines .step-item:last-child{border-bottom-color:transparent}
.step-line{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center}
.step-line.is-bottom{top:auto;bottom:-1px}


/* Prezzi con conteggio animato: il numero mantiene lo stile del prezzo, non quello di "/ mese". */
.pricing-price .pricing-price-num{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;font-variant-numeric:tabular-nums}
/* Numeri che contano (01/02, step): cifre a larghezza fissa, così durante il
   conteggio il titolo accanto a uno step non si sposta. */
.card-number,.step-num{font-variant-numeric:tabular-nums}

/* HOME — immagini editoriali generate, sfondi e motion (settembre 2026).
   Gli sfondi sono img decorative per lazy loading e riscrittura URL GHL. */
.home-hero-visual{position:relative;min-width:0;margin:0;align-self:stretch;min-height:620px;isolation:isolate}
.home-hero-photo{position:absolute;inset:0;overflow:hidden;border-radius:28px;background:#202124}
.home-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}
.home-hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(25 25 25 / .08),transparent 55%,rgb(25 25 25 / .22));pointer-events:none}
.home-hero-map-layer{position:absolute;inset:0}
/* Pin SVG separato dalla mappa: il punto resta fermo mentre il pin galleggia. */
.home-location-marker{position:absolute;left:50%;top:39%;width:clamp(44px,4.5vw,64px);aspect-ratio:64/88;transform:translate(-50%,-100%);color:var(--red);pointer-events:none}
.home-location-pin{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 5px 8px rgb(0 0 0 / .3));animation:home-location-float 2.8s ease-in-out infinite}
.home-location-pulse{position:absolute;left:50%;bottom:-6px;width:64px;height:22px;margin-left:-32px;border:1px solid rgb(255 48 69 / .7);border-radius:50%;background:rgb(255 48 69 / .18);animation:home-location-ripple 2.8s ease-out infinite}
@keyframes home-location-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes home-location-ripple{0%{transform:scale(.55);opacity:.8}85%,100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.home-location-pin,.home-location-pulse{animation:none}.home-location-pulse{opacity:.5}}
.home-visual-label{position:absolute;top:24px;left:24px;right:24px;width:fit-content;display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:30px;background:var(--surface);font:10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.home-visual-label .dot{width:7px;height:7px;flex:0 0 7px;background:var(--red);border-radius:50%}
.home-visual-caption{position:absolute;bottom:24px;left:24px;right:24px;padding:22px 60px 22px 24px;border:1px solid rgb(255 253 248 / .4);border-radius:18px;background:var(--surface);box-shadow:0 12px 36px rgb(25 25 25 / .12)}
.home-visual-caption>span:first-child{display:block;font:10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.home-visual-caption strong{display:block;font-size:clamp(22px,2.1vw,32px);line-height:1.18;letter-spacing:-.04em}
.home-visual-arrow{position:absolute;right:24px;bottom:22px;color:var(--accent-text);font-size:34px}
.home-photo-background{position:relative;isolation:isolate;overflow:hidden}
.home-photo-background>.home-background-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:-2}
.home-photo-background::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(18 19 18 / .93),rgb(18 19 18 / .76) 55%,rgb(18 19 18 / .62))}
.home-manifesto.home-photo-background{background:#191919}
.home-manifesto.home-photo-background .home-manifesto-cols,.home-manifesto.home-photo-background .home-manifesto-quote{border-color:rgb(255 253 248 / .24)}
.home-manifesto.home-photo-background .home-manifesto-col p{color:#e0ded8}
.home-sector-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.home-sector-photo{margin:0;overflow:hidden;border-radius:20px;aspect-ratio:4/3;background:#e6dfd2}
.home-sector-photo img{display:block;width:100%;height:100%;object-fit:cover}
.home-sector-copy{min-width:0}
.home-sector-copy .home-tabpanel-promise{font-size:clamp(23px,2.5vw,34px);line-height:1.2;max-width:560px}
.home-sector-copy .home-tabpanel-moment{padding-top:18px;margin-top:22px;border-top:1px solid var(--line)}
.home-blog-photo{overflow:hidden;border-radius:12px;margin-bottom:12px;aspect-ratio:16/10;background:#e6dfd2;flex:none}
.home-blog-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease-out)}
.blog-card:hover .home-blog-photo img{transform:scale(1.045)}
.home-photo-cta>.cta-band-inner{position:relative;z-index:1}
.home-photo-cta>.home-background-photo{object-position:center 62%}
.home-photo-cta::after{background:linear-gradient(90deg,rgb(18 19 18 / .94),rgb(18 19 18 / .76))}
@media(max-width:1100px){.home-hero-visual{min-height:580px}.home-visual-caption{left:18px;right:18px;bottom:18px;padding:20px 52px 20px 20px}.home-visual-label{left:18px;right:18px;top:18px}}
@media(max-width:800px){.home-hero-visual{min-height:0;aspect-ratio:5/4}.home-hero-photo img{object-position:50% 54%}.home-sector-layout{grid-template-columns:1fr;gap:26px}.home-sector-photo{aspect-ratio:16/10}.home-photo-background::after{background:rgb(18 19 18 / .82)}.home-hero{padding-bottom:32px}}
@media(max-width:560px){.home-hero-visual{aspect-ratio:4/5}.home-visual-caption strong{font-size:25px}.home-visual-label{font-size:9px}.home-hero-photo{border-radius:20px}.home-sector-photo{border-radius:14px}.home-blog-photo{margin:-12px -12px 12px}.home-photo-background>.home-background-photo{object-position:65% center}}
@media(prefers-reduced-motion:reduce){.home-blog-photo img{transition:none}.blog-card:hover .home-blog-photo img{transform:none}}

/* SISTEMA — continuità con la home: hero editoriale e sfondi fotografici. */
.sistema-hero{padding-block:24px 72px}
.sistema-hero h1{font-size:clamp(38px,4vw,62px);line-height:1.06}
.sistema-hero .home-hero-visual{min-height:560px}
.sistema-hero .home-hero-photo{background:#e6dfd2}
.sistema-hero .home-hero-photo img{object-position:50% 42%}
.sistema-principle .grid-2{align-items:center}
.sistema-principle .eyebrow{color:var(--red);margin-bottom:22px}
.sistema-principle p,.sistema-principle .line-list li{color:#e0ded8}
.sistema-principle .line-list{margin:0}
.sistema-principle .line-list li{padding-block:24px;border-color:rgb(255 253 248 / .24);font-size:16px}
.sistema-principle .list-icon{color:var(--red)}
.sistema-section-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:64px;margin-bottom:48px}
.sistema-section-intro .section-heading{margin-bottom:0}
.sistema-operation-photo{aspect-ratio:4/3}
.sistema-operation-photo img{object-position:center 45%}
@media(max-width:1100px){.sistema-section-intro{gap:36px}}
@media(max-width:800px){.sistema-hero{padding-block:16px 48px}.sistema-hero .home-hero-visual{min-height:0;aspect-ratio:1/1}.sistema-section-intro{grid-template-columns:1fr;gap:28px}.sistema-operation-photo{aspect-ratio:4/3}}
@media(max-width:560px){.sistema-hero h1{font-size:38px}.sistema-hero .home-hero-visual{aspect-ratio:4/5}}