/* Layout: colonna centrata stile Apple — hero enorme, oggetto-calcolatrice al centro, sezioni che si rivelano scorrendo */
:root{
  --bg:#FBFBFD; --bg-alt:#F2F2F5; --surface:#FFFFFF; --fg:#1D1D1F; --muted:#6E6E73; --faint:#C9C9CE; --line:#D9D9DE;
  --accent:#0066CC; --nav-bg:rgba(251,251,253,.78);
  --c-netto:#2F7D5B; --c-inps:#5B7FB5; --c-irpef:#C2873A; --c-add:#9A86B8; --warn:#B4541A;
  /* oggetto calcolatrice: stesso aspetto in entrambi i temi */
  --calc-body:#33302B; --calc-body2:#24221F; --calc-edge:#141311; --calc-print:#B9B2A6;
  --lcd:#B7C1A1; --lcd2:#A7B290; --lcd-ink:#1D2316; --lcd-ghost:rgba(29,35,22,.075);
  --solar:#3A2620; --solar-line:#5A3E33; --key:#4A4640; --key-top:#57524B; --key-ink:#EDE7DD; --key-op:#C9652E; --key-op-top:#D9763D;
  --f-display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg-alt:#111113; --surface:#1A1A1C; --fg:#F5F5F7; --muted:#A1A1A6; --faint:#3A3A3E; --line:#2E2E31;
  --accent:#2997FF; --nav-bg:rgba(0,0,0,.72);
  --c-netto:#4FBF8E; --c-inps:#7FA3D9; --c-irpef:#E0A55A; --c-add:#B9A6D6; --warn:#F09A5E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --bg-alt:#111113; --surface:#1A1A1C; --fg:#F5F5F7; --muted:#A1A1A6; --faint:#3A3A3E; --line:#2E2E31;
  --accent:#2997FF; --nav-bg:rgba(0,0,0,.72);
  --c-netto:#4FBF8E; --c-inps:#7FA3D9; --c-irpef:#E0A55A; --c-add:#B9A6D6; --warn:#F09A5E; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.gut{max-width:1000px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}

/* barra di navigazione */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:11;background:var(--bg)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .gut{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px}
.logo{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--fg)}
.logo span{color:var(--muted);font-weight:500}
.logo:hover{text-decoration:none}
.nav nav{display:flex;gap:22px;font-size:14px}
.nav nav a{color:var(--fg);opacity:.8;white-space:nowrap}
.nav nav a[aria-current]{opacity:1;font-weight:600}

/* tipografia */
.eyebrow{font-size:15px;font-weight:600;color:var(--c-irpef);letter-spacing:.01em;margin:0 0 10px}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.025em;text-wrap:balance;margin:0}
.display{font-size:clamp(44px,9vw,88px);font-weight:800;line-height:1.02}
h1.page{font-size:clamp(38px,7vw,64px);font-weight:800;line-height:1.05}
h2.big{font-size:clamp(32px,5.5vw,56px);font-weight:800;line-height:1.06}
h3{font-size:24px;font-weight:700}
.sub{font-size:clamp(19px,2.6vw,24px);color:var(--muted);line-height:1.35;margin:18px 0 0;max-width:36ch;font-weight:500;letter-spacing:-.01em}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

/* hero */
.hero{padding-block:clamp(56px,10vw,110px) 40px}
.hero-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(40px,7vw,72px)}
.hint{font-size:14px;color:var(--muted)}

/* oggetto calcolatrice solare */
.calc{width:min(100%,380px);background:linear-gradient(170deg,var(--calc-body),var(--calc-body2));border-radius:26px;padding:20px 20px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 30px 60px -20px rgba(0,0,0,.45),0 8px 18px -8px rgba(0,0,0,.35);border:1px solid var(--calc-edge)}
.calc.wide{width:min(100%,520px)}
.calc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.calc-brand{font:600 11px/1.2 var(--f-body);letter-spacing:.14em;color:var(--calc-print);text-transform:uppercase}
.calc-brand b{display:block;font-weight:400;letter-spacing:.08em;opacity:.7;font-size:10px;margin-top:2px}
.solar{display:flex;gap:2px;padding:3px;background:#1A1210;border-radius:4px;flex-shrink:0}
.solar i{display:block;width:22px;height:20px;background:repeating-linear-gradient(90deg,var(--solar) 0 3px,var(--solar-line) 3px 4px);border-radius:1px}
.lcd{background:linear-gradient(180deg,var(--lcd),var(--lcd2));border-radius:8px;padding:12px 12px 10px;box-shadow:inset 0 3px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.25);border:4px solid #1B1A18}
.lcd-labels{display:flex;justify-content:space-between;font:600 10.5px var(--f-body);letter-spacing:.12em;color:var(--lcd-ink);opacity:.6;text-transform:uppercase;margin-bottom:4px}
.lcd svg{display:block;width:100%;height:auto}
.lcd .on{fill:var(--lcd-ink)}
.lcd .off{fill:var(--lcd-ghost)}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.keys button{appearance:none;border:0;border-radius:12px;height:48px;font:500 20px var(--f-body);color:var(--key-ink);cursor:pointer;
  background:linear-gradient(180deg,var(--key-top),var(--key));box-shadow:0 3px 0 #1E1C19,0 4px 6px rgba(0,0,0,.35);transition:transform .06s,box-shadow .06s}
.keys button.op{background:linear-gradient(180deg,var(--key-op-top),var(--key-op))}
.keys button:active{transform:translateY(2px);box-shadow:0 1px 0 #1E1C19,0 2px 3px rgba(0,0,0,.35)}
.keys .zero{grid-column:span 2}

/* frase che si riempie scorrendo */
.statement{padding-block:clamp(60px,10vw,120px)}
.statement p{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4.6vw,48px);line-height:1.15;letter-spacing:-.025em;margin:0;max-width:24ch}

/* schede */
.section{padding-block:clamp(48px,8vw,96px)}
.section.alt{background:var(--bg-alt)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
.tile{background:var(--surface);border-radius:28px;padding:32px 28px;display:flex;flex-direction:column;gap:14px;color:var(--fg);min-width:0}
.tile:hover{text-decoration:none}
.tile p{margin:0;color:var(--muted)}
.tile .calc{width:100%;padding:12px;border-radius:16px;margin-top:auto}
.tile .lcd{padding:8px 10px 6px}
.tile .more{color:var(--accent);font-weight:500}
.tile:hover .more{text-decoration:underline}
.soon{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.soon li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:8px}
.facts h3{font-size:21px;margin-bottom:6px}
.facts p{margin:0;color:var(--muted);font-size:16px}

/* pagine calcolatore */
.tool{padding-block:clamp(44px,8vw,80px) 64px;display:flex;flex-direction:column;gap:40px}
.card{background:var(--surface);border-radius:24px;padding:28px 24px;border:1px solid var(--line)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:600;color:var(--muted)}
input[type=number],select{font:500 18px var(--f-body);font-variant-numeric:tabular-nums;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;min-width:0}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.check{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--fg);font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.small{font-size:13px;color:var(--muted);margin:0}
details.adv{grid-column:1/-1}
details.adv summary{cursor:pointer;font-size:15px;color:var(--accent);font-weight:500}
details.adv .form{margin-top:14px}

.result{display:flex;flex-direction:column;align-items:center;gap:22px}
.result .calc{width:min(100%,520px)}
.kpis{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;text-align:center}
.kpis div{display:flex;flex-direction:column}
.kpis .k{font-size:13px;color:var(--muted);font-weight:600}
.kpis .v{font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);width:100%}
.bar span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);justify-content:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%}
.two h3{font-size:19px;margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:15.5px}
td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:14px;font-weight:500}
tr.tot td{border-bottom:none;font-weight:700;padding-top:14px}
tr.plus td.n{color:var(--c-netto)}
.note{display:block;font-size:13px;color:var(--muted)}
.warn{border-left:3px solid var(--warn);padding:2px 0 2px 14px;color:var(--fg);font-size:15px;width:100%}
.warn p{margin:4px 0}
.method{border-top:1px solid var(--line);padding-top:22px}
.method summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.method ul{padding-left:20px;margin:14px 0;font-size:16px}
.method li{margin:6px 0}
.method p{font-size:15px;color:var(--muted)}
.disc{font-size:14px;color:var(--muted);margin:0}

/* testi legali */
.legal{padding-block:56px 72px;font-size:17px}
.legal h2{font-size:26px;margin:36px 0 10px}
.legal p{max-width:66ch}

.foot{border-top:1px solid var(--line);background:var(--bg-alt);font-size:13px;color:var(--muted)}
.foot .gut{padding-block:22px 36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}

/* animazioni legate allo scorrimento (solo dove supportate) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .hero-stage .calc{animation:settle linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    .fill p{color:transparent;background:linear-gradient(90deg,var(--fg) 0 50%,var(--faint) 50% 100%) 100% 0/200% 100% no-repeat;
      -webkit-background-clip:text;background-clip:text;animation:fill linear both;animation-timeline:view();animation-range:cover 18% cover 58%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:perspective(1000px) rotateX(18deg) scale(.92)}to{transform:none}}
@keyframes fill{to{background-position:0 0}}

@media (max-width:720px){
  .tiles,.two,.facts{grid-template-columns:minmax(0,1fr)}
  .nav nav{gap:14px;font-size:13px}
  .nav nav .opt,.nav .long{display:none}
}
@media (max-width:520px){ .form{grid-template-columns:minmax(0,1fr)} .card{padding:22px 18px} }

/* gruppi, verdetto, tabella voci */
.tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
h3.group{font-size:28px;font-weight:800;margin:48px 0 0;color:var(--fg)}
.verdict{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;text-align:center}
.scroll{overflow-x:auto}
table.voci{width:100%}
table.voci th{font-size:13px;color:var(--muted);text-align:left;font-weight:600;padding:0 0 8px}
table.voci td{padding:8px 8px 8px 0;vertical-align:middle;font-size:15px}
table.voci input{width:78px;padding:8px;font-size:16px}
table.voci td+td,table.voci th+th{width:86px}
@media (max-width:520px){.field:empty{display:none}}

/* barra dei macro-argomenti, sempre a portata di mano */
.cats{border-top:1px solid var(--line)}
.cats .gut{display:flex;gap:8px;overflow-x:auto;padding-block:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats .gut::-webkit-scrollbar{display:none}
.cats a{flex:none;font-size:14px;font-weight:500;color:var(--fg);background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap}
.cats a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.cats a{transition:background .2s,color .2s,border-color .2s}
.cats a.on,.cats a.on:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
h3.group{scroll-margin-top:calc(118px + env(safe-area-inset-top,0px))}
#calcolatori{scroll-margin-top:calc(100px + env(safe-area-inset-top,0px))}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px;width:100%}
.three h3{font-size:19px;margin-bottom:6px}