@charset "UTF-8";
/* ============================================================== TOKEN ===
   Sistema di design CEDA SERVIZIO. Un solo tema, due contesti:
   corpo pagina chiaro (surface-*) e fasce scure (ground-*).
   ======================================================================= */
:root {
  --surface-page:#f6f4ef; --surface-card:#ffffff; --surface-sunken:#ede9e1;
  --ground-900:#052722; --ground-800:#07302a; --ground-700:#0c4438;
  --ink-900:#10201c; --ink-700:#33433d; --ink-500:#5c6b64;
  --on-ground-900:#f2f6f3; --on-ground-700:#c3d5ce; --on-ground-500:#9bb4ac;
  --brand-800:#083a30; --brand-700:#0b4b3e; --brand-600:#0e5c4c; --brand-300:#55d6b0; --brand-200:#9ce9d2;
  --accent-700:#8c3d14; --accent-600:#a84b1a; --accent-300:#f0a46a; --accent-100:#fbefe6;
  --line-100:#e4dfd5; --line-200:#cfc9bc; --line-control:#78827c;
  --line-ground:#1d4f45; --line-ground-control:#5c9487;
  --success-600:#0f6b54; --success-100:#e4f3ee;
  --warning-600:#8a5a00; --warning-100:#fbf0d9;
  --danger-600:#b3261e; --danger-100:#fbeae8; --danger-300:#ff9b8f;
  --focus-ring:#0e5c4c; --focus-ring-ground:#55d6b0;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:24px;
  --radius-xl:32px; --radius-2xl:44px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(16,32,28,.06);
  --shadow-sm:0 2px 8px rgba(16,32,28,.06), 0 1px 2px rgba(16,32,28,.04);
  --shadow-md:0 8px 24px rgba(16,32,28,.08), 0 2px 6px rgba(16,32,28,.05);
  --shadow-lg:0 24px 60px rgba(16,32,28,.14), 0 6px 16px rgba(16,32,28,.07);
  --shadow-ground:0 28px 70px rgba(2,18,15,.55);

  --font-sans:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.8,.25,1); --dur:200ms;
  --wrap:1200px;
  --header-h:88px;
  color-scheme: light;
}

/* contesti */
.ctx-light, :root {
  --ctx-bg:var(--surface-page); --ctx-surface:var(--surface-card); --ctx-surface-2:var(--surface-sunken);
  --ctx-ink:var(--ink-900); --ctx-body:var(--ink-700); --ctx-muted:var(--ink-500);
  --ctx-line:var(--line-100); --ctx-line-strong:var(--line-200); --ctx-line-control:var(--line-control);
  --ctx-accent:var(--accent-600); --ctx-accent-soft:var(--accent-100);
  --ctx-brand:var(--brand-600); --ctx-brand-ink:var(--brand-700);
  --ctx-focus:var(--focus-ring); --ctx-danger:var(--danger-600);
  --ctx-btn-bg:var(--brand-600); --ctx-btn-bg-hover:var(--brand-700); --ctx-btn-bg-active:var(--brand-800);
  --ctx-btn-fg:#ffffff;
}
.ctx-dark {
  --ctx-bg:var(--ground-800); --ctx-surface:var(--ground-700); --ctx-surface-2:var(--ground-900);
  --ctx-ink:var(--on-ground-900); --ctx-body:var(--on-ground-700); --ctx-muted:var(--on-ground-500);
  --ctx-line:var(--line-ground); --ctx-line-strong:var(--line-ground); --ctx-line-control:var(--line-ground-control);
  --ctx-accent:var(--accent-300); --ctx-accent-soft:rgba(240,164,106,.14);
  --ctx-brand:var(--brand-300); --ctx-brand-ink:var(--brand-300);
  --ctx-focus:var(--focus-ring-ground); --ctx-danger:var(--danger-300);
  --ctx-btn-bg:var(--brand-200); --ctx-btn-bg-hover:var(--brand-300); --ctx-btn-bg-active:#7fdcc0;
  --ctx-btn-fg:var(--ink-900);
  background:var(--ctx-bg); color:var(--ctx-body);
}

/* ================================================================ base === */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: le ancore e il focus non finiscono sotto l'intestazione fissa */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
body{
  margin:0; font-family:var(--font-sans); font-size:16px; line-height:26px;
  color:var(--ink-700); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%}
h1,h2,h3,h4{margin:0; color:var(--ctx-ink); text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit}
::selection{background:var(--brand-200); color:var(--ink-900)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ctx-focus); outline-offset:2px; border-radius:var(--radius-xs);
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-5)}
@media (min-width:768px){ .wrap{padding-inline:var(--space-7)} }

.section{padding-block:var(--space-7)}
@media (min-width:768px){ .section{padding-block:var(--space-9)} }
.section--tight{padding-block:var(--space-7)}

.skip{
  position:absolute; left:16px; top:-100px; z-index:200;
  padding:12px 20px; background:var(--brand-600); color:#fff; font-weight:600;
  border-radius:var(--radius-sm); text-decoration:none; transition:top var(--dur) var(--ease);
}
.skip:focus{top:calc(env(safe-area-inset-top, 0px) + 12px)}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============================================================ tipografia = */
.display{font-size:40px; line-height:44px; font-weight:800; letter-spacing:-1.2px}
@media (min-width:768px){ .display{font-size:52px; line-height:54px; letter-spacing:-1.6px} }
@media (min-width:1024px){ .display{font-size:64px; line-height:64px; letter-spacing:-2px} }
.h2{font-size:26px; line-height:32px; font-weight:700; letter-spacing:-0.6px}
@media (min-width:768px){ .h2{font-size:30px; line-height:36px; letter-spacing:-0.8px} }
.h3{font-size:19px; line-height:26px; font-weight:600; letter-spacing:-0.2px}
.lead{font-size:17px; line-height:28px; color:var(--ctx-body)}
@media (min-width:768px){ .lead{font-size:19px; line-height:30px} }
.small{font-size:14px; line-height:22px}
.caption{font-size:13px; line-height:19px; color:var(--ctx-muted)}
.eyebrow{display:block; font-size:12px; font-weight:600; line-height:16px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ctx-accent)}
.num{font-variant-numeric:tabular-nums}

.heading{max-width:40rem}
.heading--center{margin-inline:auto; text-align:center}
.heading__title{margin-top:var(--space-3)}
.heading__lede{margin-top:var(--space-4)}

/* =============================================================== bottoni = */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:inherit; font-size:15px; font-weight:600; line-height:16px;
  padding:15px var(--space-6); border-radius:var(--radius-pill);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed; opacity:.55; transform:none}
.btn--primary{background:var(--ctx-btn-bg); color:var(--ctx-btn-fg); box-shadow:var(--shadow-xs)}
.btn--primary:hover:not([disabled]){background:var(--ctx-btn-bg-hover)}
.btn--primary:active:not([disabled]){background:var(--ctx-btn-bg-active)}
.btn--secondary{background:transparent; color:var(--ctx-ink); border-color:var(--ctx-line-control)}
.btn--secondary:hover:not([disabled]){border-color:var(--ctx-ink); background:rgba(16,32,28,.05)}
.ctx-dark .btn--secondary:hover:not([disabled]){background:rgba(242,246,243,.08)}
.btn--ghost{background:transparent; color:var(--ctx-accent); padding-inline:var(--space-3)}
.btn--ghost:hover:not([disabled]){background:var(--ctx-accent-soft)}
.btn--sm{padding:10px var(--space-4); font-size:14px}
.btn--lg{padding:19px var(--space-7); font-size:16px}
.btn__spin{width:16px; height:16px; flex:none; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center}
@media (max-width:599px){ .btn-row .btn{width:100%} }

/* ================================================================= badge = */
.badge{display:inline-flex; align-items:center; gap:var(--space-2); padding:6px var(--space-3);
  font-size:13px; font-weight:600; line-height:18px; border-radius:var(--radius-pill);
  background:var(--ctx-accent-soft); color:var(--ctx-accent); border:1px solid transparent}
.badge--neutral{background:var(--ctx-surface-2); color:var(--ctx-body); border-color:var(--ctx-line)}
.badge--brand{background:rgba(14,92,76,.12); color:var(--ctx-brand-ink)}
.ctx-dark .badge--brand{background:rgba(85,214,176,.16); color:var(--brand-300)}
.badge__dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

/* ================================================================== card = */
.grid{display:grid; gap:var(--space-5)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

.card{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6);
  background:var(--ctx-surface); border:1px solid var(--ctx-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm)}
.ctx-dark .card{box-shadow:none}
.card--flat{box-shadow:none}
.card__title{font-size:17px; line-height:24px; font-weight:600; color:var(--ctx-ink)}
.card__text{font-size:15px; line-height:24px; color:var(--ctx-body)}
.card__foot{margin-top:auto; padding-top:var(--space-4)}

.tile{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border-radius:var(--radius-md); background:rgba(14,92,76,.11); color:var(--brand-700)}
.ctx-dark .tile{background:rgba(85,214,176,.14); color:var(--brand-300)}
.tile--accent{background:var(--ctx-accent-soft); color:var(--ctx-accent)}
.tile svg{width:22px; height:22px}

.solution{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6); background:var(--ctx-surface); border:1px solid var(--ctx-line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.solution:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.solution::after{content:""; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--brand-600),var(--accent-600)); opacity:0; transition:opacity var(--dur) var(--ease)}
.solution:hover::after,.solution:focus-within::after{opacity:1}
.solution__title{font-size:22px; line-height:28px; font-weight:700; letter-spacing:-.4px}
.ticks{display:grid; gap:var(--space-2)}
.ticks li{position:relative; padding-left:26px; font-size:14px; line-height:22px; color:var(--ctx-body)}
.ticks li::before{content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%;
  background:rgba(14,92,76,.14); box-shadow:inset 0 0 0 1.5px var(--ctx-brand)}
.ctx-dark .ticks li::before{background:rgba(85,214,176,.16)}

.step{display:flex; gap:var(--space-4); align-items:flex-start}
.step__num{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:var(--radius-pill); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--ctx-accent-soft); color:var(--ctx-accent); border:1.5px solid rgba(168,75,26,.35)}
.ctx-dark .step__num{border-color:rgba(240,164,106,.4)}
.step__title{font-size:17px; line-height:24px; font-weight:600; margin-bottom:var(--space-1)}
.step__text{font-size:15px; line-height:24px; color:var(--ctx-body)}

/* ================================================================ moduli = */
.field{display:block; margin-bottom:var(--space-4)}
.field__label{display:block; margin-bottom:var(--space-2); font-size:14px; font-weight:600; line-height:18px; color:var(--ctx-ink)}
.field__req{color:var(--ctx-danger); margin-left:2px}
.field__hint{margin-top:var(--space-2); font-size:13px; line-height:18px; color:var(--ctx-muted)}
.input,.select,.textarea{
  display:block; width:100%; padding:13px var(--space-4); font-family:inherit; font-size:16px; line-height:24px;
  color:var(--ctx-ink); background:var(--ctx-surface); border:1.5px solid var(--ctx-line-control);
  border-radius:var(--radius-sm); transition:border-color var(--dur) var(--ease)}
.textarea{min-height:128px; resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--ctx-muted); opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ctx-ink)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--ctx-danger); border-width:2px}
.select{appearance:none; padding-right:var(--space-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333433d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-4) center; background-size:20px}
.field__error{display:flex; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-2);
  font-size:13px; line-height:18px; font-weight:500; color:var(--ctx-danger)}
.field__error svg{width:16px; height:16px; flex:none; margin-top:1px}

.choices{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.choice{position:relative}
.choice input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.choice span{display:block; padding:11px var(--space-5); font-size:15px; font-weight:600; line-height:20px;
  color:var(--ctx-body); background:var(--ctx-surface); border:1.5px solid var(--ctx-line-control);
  border-radius:var(--radius-pill); transition:all var(--dur) var(--ease)}
.choice input:checked + span{background:var(--ctx-btn-bg); color:var(--ctx-btn-fg); border-color:var(--ctx-btn-bg)}
.choice input:checked + span::before{content:"\2713\00a0"}
.choice input:focus-visible + span{outline:3px solid var(--ctx-focus); outline-offset:2px}
.choice:hover span{border-color:var(--ctx-ink)}

.check{display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-3)}
.check input[type="checkbox"]{appearance:none; width:22px; height:22px; flex:none; margin:2px 0 0;
  border:1.5px solid var(--ctx-line-control); border-radius:6px; background:var(--ctx-surface); cursor:pointer;
  transition:all var(--dur) var(--ease)}
.check input[type="checkbox"]:checked{background:var(--ctx-btn-bg); border-color:var(--ctx-btn-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px; background-position:center; background-repeat:no-repeat}
.check input[type="checkbox"][aria-invalid="true"]{border-color:var(--ctx-danger); border-width:2px}
.check label{font-size:14px; line-height:22px; color:var(--ctx-body)}
.fieldset{border:0; padding:0; margin:0 0 var(--space-5)}
.fieldset legend{padding:0; margin-bottom:var(--space-2); font-size:14px; font-weight:600; line-height:18px; color:var(--ctx-ink)}

/* ============================================================== avvisi === */
.alert{display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg); border:1px solid transparent; font-size:14px; line-height:22px}
.alert svg{width:20px; height:20px; flex:none; margin-top:1px}
.alert strong{display:block; font-weight:700; margin-bottom:2px}
.alert--info{background:var(--surface-sunken); color:var(--ink-700); border-color:var(--line-200)}
.alert--success{background:var(--success-100); color:var(--success-600); border-color:rgba(15,107,84,.3)}
.alert--danger{background:var(--danger-100); color:var(--danger-600); border-color:rgba(179,38,30,.3)}
.ctx-dark .alert--info{background:var(--ground-900); color:var(--on-ground-700); border-color:var(--line-ground)}
.note{display:flex; gap:var(--space-3); align-items:flex-start; font-size:13px; line-height:19px; color:var(--ctx-muted)}
.note svg{width:16px; height:16px; flex:none; margin-top:2px}

/* ========================================================= fisarmonica === */
.accordion{border-top:1px solid var(--ctx-line); max-width:62rem}
.accordion__item{border-bottom:1px solid var(--ctx-line)}
.accordion__btn{display:flex; width:100%; gap:var(--space-4); align-items:center; justify-content:space-between;
  padding:var(--space-5) 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; font-size:17px; font-weight:600; line-height:26px; color:var(--ctx-ink)}
.accordion__btn:hover{color:var(--ctx-accent)}
.sign{position:relative; width:22px; height:22px; flex:none}
.sign::before,.sign::after{content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease)}
.sign::before{width:14px; height:2px}
.sign::after{width:2px; height:14px}
.accordion__btn[aria-expanded="true"] .sign::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.accordion__panel{padding:0 0 var(--space-5); max-width:64ch}
.accordion__panel p{font-size:15px; line-height:25px; color:var(--ctx-body)}
.accordion__panel p + p{margin-top:var(--space-3)}

/* ========================================================= navigazione === */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:100; padding-block:var(--space-3);
  transition:background-color var(--dur) var(--ease)}
.site-header.is-stuck{background:rgba(246,244,239,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-100)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4)}
.brand{display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--ink-900)}
.brand svg{width:38px; height:38px; flex:none}
.brand__name{font-size:17px; font-weight:700; letter-spacing:-.2px; line-height:1.05}
.brand__name small{display:block; font-size:10px; font-weight:600; letter-spacing:1.8px; color:var(--ink-500); text-transform:uppercase}
.nav__links{display:flex; align-items:center; gap:var(--space-1)}
.nav__link{display:block; padding:9px var(--space-4); border-radius:var(--radius-pill);
  font-size:15px; font-weight:500; color:var(--ink-700); text-decoration:none;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.nav__link:hover{background:rgba(16,32,28,.06); color:var(--ink-900)}
.nav__link[aria-current="page"]{color:var(--ink-900); font-weight:600; background:rgba(14,92,76,.12)}
.nav__end{display:flex; align-items:center; gap:var(--space-3)}
.burger{display:none; width:46px; height:46px; align-items:center; justify-content:center; flex:none;
  background:transparent; border:1.5px solid var(--line-control); border-radius:var(--radius-pill);
  color:var(--ink-900); cursor:pointer}
.burger svg{width:22px; height:22px}
.nav__cta{display:none}
@media (max-width:599px){ .nav__end > .btn{display:none} }
/* Su schermi stretti il menu è un pannello a comparsa: resta chiuso finché
   il bottone non aggiunge .is-open (vedi site.js). */
@media (max-width:899px){
  .nav{position:relative}
  .burger{display:inline-flex}
  .nav__links{position:absolute; left:var(--space-5); right:var(--space-5); top:calc(100% + 10px);
    flex-direction:column; align-items:stretch; gap:2px; padding:var(--space-3);
    background:var(--surface-card); border:1px solid var(--line-100); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg)}
  .nav__links:not(.is-open){display:none}
  .nav__link{padding:13px var(--space-4); font-size:16px}
  .nav__cta{display:block; margin-top:var(--space-2)}
  .nav__cta .btn{width:100%}
}

/* ================================================================= hero = */
.hero{position:relative; overflow:hidden; background:var(--ground-800);
  padding-block:var(--space-8) var(--space-9)}
@media (min-width:768px){ .hero{padding-block:var(--space-9) var(--space-10)} }
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.hero::before{width:820px; height:820px; top:-420px; right:-260px;
  background:radial-gradient(circle, rgba(14,92,76,.75) 0%, rgba(7,48,42,0) 68%)}
.hero::after{width:680px; height:680px; bottom:-380px; left:-220px;
  background:radial-gradient(circle, rgba(168,75,26,.32) 0%, rgba(7,48,42,0) 70%)}
.hero .wrap{position:relative; z-index:1}
.hero--page{padding-block:var(--space-8)}
.hero__grid{display:grid; gap:var(--space-8); align-items:center}
@media (min-width:1024px){ .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--space-9)} }
.hero__title{margin-top:var(--space-4)}
.hero__title--page{font-size:36px; line-height:42px}
.hero__lede{margin-top:var(--space-5); max-width:34rem}
.hero__cta{margin-top:var(--space-7)}
.hero__reassure{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin-top:var(--space-7);
  padding-top:var(--space-6); border-top:1px solid var(--line-ground)}
.hero__reassure li{display:flex; align-items:center; gap:var(--space-2); font-size:14px; color:var(--on-ground-700)}
.hero__reassure svg{width:18px; height:18px; flex:none; color:var(--brand-300)}

/* composizione grafica dell'Hero */
.figure{position:relative; aspect-ratio:1/1; max-width:100%; width:100%;
  filter:drop-shadow(var(--shadow-ground))}
.figure svg{display:block; width:100%; height:auto}
.figure__card{position:absolute; left:4%; bottom:4%; width:min(320px,82%);
  background:rgba(7,48,42,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-ground-control); border-radius:var(--radius-xl); padding:var(--space-5)}
.figure__label{font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-300)}
.figure__steps{margin-top:var(--space-4); display:grid; gap:var(--space-3)}
.figure__steps li{display:flex; align-items:center; gap:var(--space-3); font-size:14px; color:var(--on-ground-700)}
.figure__mark{width:22px; height:22px; flex:none; border-radius:50%; border:1.5px solid var(--line-ground-control);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--on-ground-500)}
.figure__steps li[data-on] .figure__mark{background:var(--brand-200); border-color:var(--brand-200); color:var(--ink-900)}
.figure__steps li[data-on]{color:var(--on-ground-900); font-weight:600}

@media (max-width:767px){
  .figure{aspect-ratio:auto; filter:none}
  .figure svg{max-width:280px; margin-inline:auto; filter:drop-shadow(var(--shadow-ground))}
  .figure__card{position:static; width:100%; margin-top:-46px}
}

/* ========================================================== simulatore == */
.sim{display:grid; gap:var(--space-6); align-items:start}
@media (min-width:900px){ .sim{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--space-7)} }
.sim__panel{background:var(--surface-card); border:1px solid var(--line-100); border-radius:var(--radius-xl);
  padding:var(--space-6); box-shadow:var(--shadow-lg)}
@media (min-width:768px){ .sim__panel{padding:var(--space-7)} }
.sim__row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap}
.sim__value{font-size:40px; line-height:44px; font-weight:700; letter-spacing:-1px; color:var(--ink-900); font-variant-numeric:tabular-nums}
@media (min-width:768px){ .sim__value{font-size:44px; line-height:48px} }
.sim__bounds{display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:13px; color:var(--ink-500); font-variant-numeric:tabular-nums}
.sim__recap{display:grid; gap:var(--space-3); padding:var(--space-5); margin-top:var(--space-6);
  background:var(--surface-sunken); border-radius:var(--radius-lg)}
.sim__line{display:flex; justify-content:space-between; gap:var(--space-4); font-size:15px}
.sim__line dt{color:var(--ink-500)}
.sim__line dd{margin:0; font-weight:600; color:var(--ink-900); text-align:right; font-variant-numeric:tabular-nums}

.range{appearance:none; width:100%; height:34px; background:transparent; cursor:pointer; display:block; margin:0}
.range::-webkit-slider-runnable-track{height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--brand-600) 0 var(--pct,50%), var(--line-200) var(--pct,50%) 100%)}
.range::-moz-range-track{height:8px; border-radius:var(--radius-pill); background:var(--line-200)}
.range::-moz-range-progress{height:8px; border-radius:var(--radius-pill); background:var(--brand-600)}
.range::-webkit-slider-thumb{appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%;
  background:#fff; border:3px solid var(--brand-600); box-shadow:var(--shadow-md); transition:transform var(--dur) var(--ease)}
.range::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--brand-600); box-shadow:var(--shadow-md)}
.range:hover::-webkit-slider-thumb{transform:scale(1.08)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--focus-ring); outline-offset:2px}
.range:focus-visible::-moz-range-thumb{outline:3px solid var(--focus-ring); outline-offset:2px}

.form-panel{background:var(--surface-card); border:1px solid var(--line-100); border-radius:var(--radius-xl);
  padding:var(--space-6); box-shadow:var(--shadow-lg); max-width:46rem; margin-inline:auto}
@media (min-width:768px){ .form-panel{padding:var(--space-7)} }
.form-step__title{margin-top:var(--space-6); outline:none}
.form-step__intro{margin-top:var(--space-2); font-size:15px; line-height:24px; color:var(--ink-500)}
.form-fields{margin-top:var(--space-6)}
.form-nav{display:flex; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--line-100)}
@media (max-width:599px){ .form-nav{flex-direction:column-reverse} .form-nav .btn{width:100%} }
.form-nav .btn--primary{margin-left:auto}
@media (max-width:599px){ .form-nav .btn--primary{margin-left:0} }
.pair{display:grid; gap:0 var(--space-4)}
@media (min-width:600px){ .pair{grid-template-columns:1fr 1fr} }
.recap{display:grid; gap:var(--space-2); padding:var(--space-5); background:var(--surface-sunken); border-radius:var(--radius-lg)}
.recap div{display:flex; justify-content:space-between; gap:var(--space-4); font-size:15px; padding-block:6px}
.recap div + div{border-top:1px solid var(--line-200)}
.recap dt{color:var(--ink-500)}
.recap dd{margin:0; font-weight:600; color:var(--ink-900); text-align:right; overflow-wrap:anywhere}
.done{text-align:center; padding-block:var(--space-6)}
.done__mark{width:72px; height:72px; margin:0 auto var(--space-5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--success-100); color:var(--success-600)}
.done__mark svg{width:34px; height:34px}

/* ============================================================== fiducia = */
.trust__row{display:flex; gap:var(--space-4); align-items:flex-start; padding-block:var(--space-4); border-bottom:1px solid var(--ctx-line)}
.trust__row:last-child{border-bottom:0}
.trust__title{font-size:16px; font-weight:600; color:var(--ctx-ink); margin-bottom:2px}
.trust__text{font-size:14px; line-height:22px; color:var(--ctx-body)}

/* =============================================================== footer = */
.footer{background:var(--ground-900); padding-block:var(--space-8) var(--space-6)}
.footer__grid{display:grid; gap:var(--space-7)}
@media (min-width:768px){ .footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))} }
.footer h2{font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--on-ground-500); margin-bottom:var(--space-4)}
.footer ul{display:grid; gap:var(--space-3)}
.footer a{font-size:15px; color:var(--on-ground-700); text-decoration:none}
.footer a:hover{color:var(--brand-200); text-decoration:underline; text-underline-offset:3px}
.footer .brand{color:var(--on-ground-900)}
.footer .brand__name small{color:var(--on-ground-500)}
.footer__about{margin-top:var(--space-4); max-width:30rem; color:var(--on-ground-700)}
.footer [data-config="contatti-footer"] li{font-size:15px; line-height:22px; color:var(--on-ground-700)}
.footer__bar{margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid var(--line-ground);
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); justify-content:space-between;
  font-size:13px; line-height:20px; color:var(--on-ground-500)}
.footer__legal{max-width:62rem; margin-top:var(--space-5); font-size:12.5px; line-height:20px; color:var(--on-ground-500)}

/* ================================================================ legale = */
.prose{max-width:42rem}
.prose h2{margin-top:var(--space-7); font-size:22px; line-height:28px; font-weight:700; letter-spacing:-.4px}
.prose h2:first-child{margin-top:0}
.prose p, .prose ul{margin-top:var(--space-3); font-size:15px; line-height:25px; color:var(--ink-700)}
.prose ul{display:grid; gap:var(--space-2)}
.prose li{position:relative; padding-left:20px}
.prose li::before{content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent-600)}
.prose a{text-decoration:underline; text-underline-offset:3px}

/* ============================================================== rivelo == */
/* I blocchi sotto la piega entrano con una breve salita in dissolvenza, uno
   dopo l'altro. Li prepara site.js solo se il movimento è consentito: senza
   JavaScript, in stampa o con movimento ridotto la pagina è già completa.
   È un'animazione e non una transizione, così non rallenta il sollevamento
   delle card al passaggio del mouse. */
.reveal.is-armed{opacity:0; transform:translateY(24px)}
.reveal.is-revealed{animation:rivela 700ms var(--ease) var(--ritardo, 0ms) both}
@keyframes rivela{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

/* ============================================= importi, allegato, nota == */
.input-money{position:relative}
.input-money .input{padding-right:84px}
.input-money__unit{position:absolute; right:var(--space-4); top:50%; transform:translateY(-50%);
  font-size:14px; font-weight:500; color:var(--ink-500); pointer-events:none}
.input[type="number"]{appearance:textfield; -moz-appearance:textfield}
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.upload{display:flex; gap:var(--space-4); align-items:center; padding:var(--space-5);
  border:1.5px dashed var(--line-control); border-radius:var(--radius-lg);
  background:var(--surface-page); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease)}
.upload:hover,.upload.is-over{border-color:var(--brand-600); background:var(--surface-card)}
.upload.is-invalid{border-style:solid; border-width:2px; border-color:var(--danger-600)}
.vh:focus-visible + .upload{outline:3px solid var(--focus-ring); outline-offset:2px}
.upload__icon{width:44px; height:44px; flex:none; border-radius:var(--radius-md);
  background:rgba(14,92,76,.11); color:var(--brand-700); display:flex; align-items:center; justify-content:center}
.upload__icon svg{width:22px; height:22px}
.upload__text{font-size:15px; line-height:22px; color:var(--ink-700)}
.upload__text strong{color:var(--brand-700); text-decoration:underline; text-underline-offset:3px}
.upload__text small{display:block; margin-top:2px; font-size:13px; line-height:18px; color:var(--ink-500)}

.upload__file{display:flex; gap:var(--space-3); align-items:center; padding:var(--space-4);
  border:1.5px solid var(--line-100); border-radius:var(--radius-lg); background:var(--surface-card)}
.upload__file-icon{width:40px; height:40px; flex:none; border-radius:var(--radius-sm);
  background:var(--success-100); color:var(--success-600); display:flex; align-items:center; justify-content:center}
.upload__file-icon svg{width:20px; height:20px}
.upload__file-name{flex:1; min-width:0; font-size:15px; line-height:20px}
.upload__file-name strong{display:block; color:var(--ink-900); overflow-wrap:anywhere}
.upload__file-name small{font-size:13px; color:var(--ink-500)}
.upload__remove{flex:none; background:none; border:0; padding:8px 10px; border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; font-weight:600; color:var(--accent-600); cursor:pointer}
.upload__remove:hover{background:var(--accent-100); color:var(--accent-700)}

.privacy-box{display:flex; gap:var(--space-4); align-items:flex-start; margin-top:var(--space-6);
  padding:var(--space-5); background:var(--surface-sunken); border-radius:var(--radius-lg)}
.privacy-box__icon{width:36px; height:36px; flex:none; border-radius:var(--radius-sm);
  background:rgba(14,92,76,.12); color:var(--brand-700); display:flex; align-items:center; justify-content:center}
.privacy-box__icon svg{width:20px; height:20px}
.privacy-box strong{display:block; font-size:15px; line-height:22px; color:var(--ink-900); margin-bottom:4px}
.privacy-box p{font-size:13.5px; line-height:21px; color:var(--ink-700)}
.privacy-box a{color:var(--accent-600); text-decoration:underline; text-underline-offset:3px}
@media (max-width:479px){
  .upload{flex-direction:column; align-items:flex-start; gap:var(--space-3)}
  .privacy-box{flex-direction:column; gap:var(--space-3)}
}

/* ============================================================ immagini == */
/* Fotografie: proporzioni fisse (la pagina non salta mentre caricano) e un
   fondo neutro al posto dell'immagine non ancora arrivata. */
.foto{display:block; width:100%; height:100%; object-fit:cover; background:var(--surface-sunken)}
.ctx-dark .foto{background:var(--ground-700)}

/* card delle soluzioni: la foto occupa la parte alta, a filo dei bordi */
.solution__media{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-1);
  aspect-ratio:3/2; overflow:hidden}
.solution__media .foto{transition:transform 560ms var(--ease)}
.solution:hover .solution__media .foto{transform:scale(1.04)}

/* foto accanto al testo */
.media{margin:0; overflow:hidden; border-radius:var(--radius-xl); box-shadow:var(--shadow-md)}
.media--4x3{aspect-ratio:4/3}
/* in colonna singola (telefono, tablet) la foto si allarga: più bassa */
@media (max-width:899px){ .media--4x3{aspect-ratio:16/9} }
.media--4x5{aspect-ratio:4/5}
/* solo dove le colonne sono affiancate: su telefono non c'è spazio da riempire */
.media--laterale{display:none}
@media (min-width:900px){ .media--laterale{display:block} }

/* foto negli Hero delle pagine interne */
.hero__media{margin:0; overflow:hidden; border-radius:var(--radius-xl); aspect-ratio:16/9;
  border:1px solid var(--line-ground-control); box-shadow:var(--shadow-ground)}
@media (min-width:1024px){ .hero__media{aspect-ratio:3/2} }
/* nella pagina del modulo la foto compare solo su schermi larghi, per non
   allontanare il modulo dall'inizio della pagina sul telefono */
.hero__media--largo{display:none}
@media (min-width:1024px){ .hero__media--largo{display:block} }

/* ============================================================ movimento == */
/* Un solo linguaggio: la curva --ease, ampiezze di pochi pixel, nessun
   effetto che si ripete da solo. site.js attiva gli effetti di scorrimento
   solo senza "movimento ridotto", e quelli legati al puntatore solo con
   mouse o trackpad. */

/* profondità: le luci dell'Hero scorrono a velocità diverse dalla pagina */
.hero::before{transform:translate3d(0, var(--luce-a, 0px), 0)}
.hero::after{transform:translate3d(0, var(--luce-b, 0px), 0)}

/* le foto scivolano appena dentro la loro cornice */
.con-parallasse .hero__media .foto,
.con-parallasse .media .foto{transform:translate3d(0, var(--py, 0px), 0) scale(1.1)}

/* una luce morbida segue il puntatore nelle fasce scure */
[data-luce]{position:relative; overflow:hidden}
[data-luce] > .wrap{position:relative; z-index:1}
.luce{position:absolute; left:0; top:0; width:600px; height:600px; margin:-300px 0 0 -300px; border-radius:50%;
  background:radial-gradient(circle, rgba(85,214,176,.12) 0%, rgba(85,214,176,0) 62%);
  opacity:0; pointer-events:none; transition:opacity 500ms var(--ease); will-change:transform}
.luce.is-on{opacity:1}

/* composizione della home: archi e barre si spostano in direzioni opposte */
.figure__archi, .figure__barre{transition:transform 700ms var(--ease)}
.figure__archi{transform:translate(calc(var(--fx, 0) * 10px), calc(var(--fy, 0) * 8px))}
.figure__barre{transform:translate(calc(var(--fx, 0) * -6px), calc(var(--fy, 0) * -5px))}
.figure__card{transition:transform 700ms var(--ease);
  transform:translate3d(calc(var(--fx, 0) * 4px), calc(var(--fy, 0) * 3px), 0)}

/* bottone principale: un alone al passaggio e pochi pixel verso il puntatore */
.btn--primary:hover:not([disabled]){box-shadow:0 8px 20px rgba(14,92,76,.24)}
.ctx-dark .btn--primary:hover:not([disabled]){box-shadow:0 8px 24px rgba(85,214,176,.22)}
.btn--magnete{transform:translate3d(var(--mx, 0px), var(--my, 0px), 0)}
.btn--magnete:active{transform:translate3d(var(--mx, 0px), calc(var(--my, 0px) + 1px), 0)}

/* scelte del simulatore: si premono */
.choice:active span{transform:scale(.97)}

/* allegato: la freccia si alza quando il file può essere lasciato */
.upload__icon svg{transition:transform var(--dur) var(--ease)}
.upload:hover .upload__icon svg,.upload.is-over .upload__icon svg{transform:translateY(-3px)}

@media print{
  .reveal.is-armed{opacity:1; transform:none}
  .luce{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .solution:hover{transform:none}
  .solution:hover .solution__media .foto{transform:none}
  .reveal.is-armed{opacity:1; transform:none}
  .luce{display:none}
}