/* Landing HAIT: solo regole di pagina. Tema, header, footer, pulsanti e movimento condivisi sono in theme.css. */

/* Hero centrata: titolo, descrizione e pulsanti al centro; il messaggio approvato sta nelle due card ai lati dello schema */
/* Pannello glass: staccato di pochi px dai bordi della pagina, angoli arrotondati, padding interno */
.hero{position:relative;isolation:isolate;overflow:hidden;margin:14px clamp(8px,1.6vw,24px) 0;padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) clamp(1rem,2vw,1.5rem);text-align:center;border:1px solid var(--line);border-radius:clamp(20px,2.4vw,32px);background:radial-gradient(38% 45% at 14% 12%,rgba(38,154,226,.3),transparent 70%),radial-gradient(34% 40% at 88% 22%,rgba(108,203,255,.18),transparent 70%),radial-gradient(40% 35% at 50% 60%,rgba(38,154,226,.14),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.35)}
#contenuto{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:radial-gradient(70% 80% at 50% 65%,#000,transparent 78%);mask-image:radial-gradient(70% 80% at 50% 65%,#000,transparent 78%);opacity:.55}
.hero-text{max-width:46rem;margin-inline:auto}
.hero h1{display:flex;justify-content:center;align-items:center;gap:.3em;font-size:clamp(2.75rem,10vw,8.5rem);line-height:.92;letter-spacing:-.04em}
.hero-sub{padding-left:.3em;border-left:1px solid var(--line);text-align:left;white-space:nowrap;font-size:.45em;font-weight:300;line-height:1.05;letter-spacing:-.03em}
.lead{margin:clamp(1.25rem,2.4vw,1.75rem) auto 0;max-width:54ch;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:2rem}
.stage{position:relative;margin-top:clamp(1rem,3vw,2rem);min-height:clamp(22rem,36vw,30rem)}
.visual{position:relative;width:min(100%,34rem);aspect-ratio:1;margin-inline:auto;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 96%);mask-image:linear-gradient(180deg,#000 74%,transparent 96%)}
.visual::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(38,154,226,.22),transparent 70%)}
.visual svg{display:block;width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:rgba(159,178,208,.22);stroke-width:1}
.ring-dash{stroke-dasharray:2 7}
.spoke{stroke:rgba(159,178,208,.16);stroke-width:1}
.frame{fill:none;stroke:rgba(159,178,208,.3);stroke-width:1.25}
.node{fill:var(--bg);stroke:var(--muted);stroke-width:1.5}
.node-on{fill:var(--bright);stroke:var(--bright);filter:drop-shadow(0 0 7px rgba(108,203,255,.85))}
.core{fill:none;stroke:var(--muted);stroke-width:1.5}
.core-dot{fill:var(--text)}
.arc{fill:none;stroke:url(#lume);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(108,203,255,.55))}
.card{position:absolute;display:flex;flex-direction:column;gap:.35rem;width:min(16rem,42%);padding:1.1rem 1.25rem;text-align:left;color:var(--text);background:rgba(16,28,56,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color 150ms ease,transform 160ms var(--ease-out)}
.card small{font-size:.875rem;color:var(--muted)}
.card strong{padding-right:2.5rem;font-size:1.375rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.card .go{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:1px solid var(--line);border-radius:50%;font-size:.9375rem;line-height:1;color:var(--bright)}
.card-l{left:2%;top:34%}
.card-r{right:2%;top:58%}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:var(--accent)}}
.card:active{transform:scale(.98)}

/* Sezioni: titolo a sinistra, testo a destra */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.grid>h2{grid-column:1/8}
.grid>.side{grid-column:8/13}
.side p+p{margin-top:1rem}
.side .big{font-size:1.5rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin-bottom:1.25rem}
.side p:not(.big){max-width:62ch;color:var(--muted)}

/* Pilastri: quattro step collegati da una linea */
.cells{counter-reset:step;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.cells::before{content:"";position:absolute;top:1.125rem;left:1.125rem;right:0;height:1px;background:linear-gradient(90deg,var(--accent),var(--line) 70%,transparent)}
.cell{position:relative;padding-top:4rem;counter-increment:step}
.cell::before{content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--accent);border-radius:50%;background:var(--bg);box-shadow:0 0 0 6px var(--bg);font-size:.9375rem;font-weight:700;line-height:1;color:var(--bright)}
.glyph{display:block;width:3rem;height:3rem;margin-bottom:1.5rem}
.glyph *{fill:none;stroke:var(--bright);stroke-width:1.5}
.glyph .fill{fill:var(--bright);stroke:none}
.cell .tag{font-size:.875rem;font-weight:600;color:var(--muted)}
.cell h3{margin:.4rem 0 1rem;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.cell p:last-child{font-size:.9688rem;color:var(--muted)}

/* Metodo: link agli approfondimenti */
.method-links{display:flex;flex-wrap:wrap;gap:1rem 2.25rem;margin-top:2.5rem}
.method-links a{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.method-links a span{margin-left:.4rem;color:var(--bright)}
@media(hover:hover) and (pointer:fine){.method-links a:hover{color:var(--bright)}}

/* Valore */

/* FAQ: un solo .faq-list */
.grid>.faq-title{grid-column:1/6}
.faq-list{grid-column:6/13}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;cursor:pointer;font-size:1.125rem;font-weight:600;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;font-weight:300;color:var(--bright);transition:transform 150ms var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{max-width:62ch;padding:0 2.5rem 1.25rem 0;color:var(--muted)}

/* Contatto */
.cta{padding:0 var(--gutter) clamp(3rem,6vw,5rem)}
.panel{display:grid;gap:1.5rem}
.panel h2{max-width:18ch}
.panel p{max-width:46ch;color:var(--muted)}
.panel .actions{justify-content:flex-start;margin-top:.5rem}

@media(max-width:1000px){
  .stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-height:0;padding-bottom:clamp(2.5rem,6vw,4rem)}
  .visual{grid-column:1/-1;order:-1;width:min(100%,26rem);margin-bottom:-4rem}
  .card{position:static;width:auto}
  .grid>h2,.grid>.side,.grid>.faq-title,.faq-list{grid-column:1/-1}
}
@media(max-width:900px){
  .cells{grid-template-columns:1fr;gap:2rem}
  .cells::before{display:none}
  .cell{padding:0 0 0 3.5rem}
  .cell:not(:last-child)::after{content:"";position:absolute;top:2.5rem;bottom:-2rem;left:1.125rem;width:1px;background:var(--line)}
}
@media(max-width:700px){
  .stage{grid-template-columns:1fr}
  .grid{grid-template-columns:minmax(0,1fr)}
}

/* Movimento della hero: ingresso a scaglioni (una volta all'apertura) e parallasse collegata allo scroll */
@media(prefers-reduced-motion:no-preference){
  @keyframes arrival{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .hero-text>*{animation:arrival .8s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-text>:nth-child(1){animation-delay:.1s}
  .hero-text>:nth-child(2){animation-delay:.3s}
  .hero-text>:nth-child(3){animation-delay:.5s}
  .card-l{animation:arrival .8s cubic-bezier(.2,.7,.2,1) .7s backwards}
  .card-r{animation:arrival .8s cubic-bezier(.2,.7,.2,1) .85s backwards}
  .arc{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1200ms var(--ease-out) 500ms backwards}
}
@supports (animation-timeline:scroll()){
@media(prefers-reduced-motion:no-preference){
@keyframes scroll-hero{to{translate:0 -36px;opacity:.1}}
@keyframes scroll-card-left{to{translate:0 36px}}
@keyframes scroll-card-right{to{translate:0 72px}}
.hero-text{animation:scroll-hero linear both;animation-timeline:scroll(root);animation-range:0px 520px}
.card-l{animation:arrival .8s cubic-bezier(.2,.7,.2,1) .7s backwards,scroll-card-left linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 700px}
.card-r{animation:arrival .8s cubic-bezier(.2,.7,.2,1) .85s backwards,scroll-card-right linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 700px}
}
}
@media(prefers-reduced-motion:reduce){.faq-list summary::after,.card{transition:none}}
@media print{.hero-text>*,.arc,.card-l,.card-r{animation:none}}

/* Schema HAIT animato dallo scroll: i livelli si muovono a velocita' e versi diversi, solo transform (miglioramento progressivo) */
.layer{transform-box:view-box;transform-origin:50% 50%}
@supports (animation-timeline:scroll()){
@media(prefers-reduced-motion:no-preference){
@keyframes orbit-cycle{to{transform:rotate(144deg)}}
@keyframes orbit-dash{to{transform:rotate(-70deg)}}
@keyframes orbit-dots{to{transform:rotate(90deg)}}
@keyframes core-grow{to{transform:scale(1.35)}}
@keyframes visual-drift{to{translate:0 -56px;scale:1.06}}
.visual{animation:visual-drift linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
.layer-cycle{animation:orbit-cycle linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
.layer-dash{animation:orbit-dash linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
.layer-dots{animation:orbit-dots linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
.layer-core{animation:core-grow linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
}
}


.benefits-note{max-width:62ch;margin:1.75rem auto 0;text-align:center;color:var(--muted)}
.benefits-note+.method-links{margin-top:1.75rem;justify-content:center}

/* Su misura: pannello con grafica animata essenziale (nucleo, archi in rotazione, due pillole) */
.speed{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.75rem,4vw,3.5rem);border:1px solid var(--line);border-radius:28px;background:radial-gradient(ellipse at 88% 0,rgba(38,154,226,.2),transparent 55%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.speed-head{max-width:46rem}
.speed-head p{max-width:56ch;margin-top:1rem;color:var(--muted)}
.speed-stage{position:relative;height:clamp(17rem,28vw,21rem);margin-top:clamp(1.5rem,3vw,2.5rem);overflow:hidden}
.speed-rings{position:absolute;top:0;left:50%;height:100%;aspect-ratio:2/1;translate:-50% 0}
.ring{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:24 76;transform-box:fill-box;transform-origin:center}
.ring-b{stroke-dasharray:30 70;opacity:.9}
.ring-c{stroke-dasharray:18 82;stroke-width:3;opacity:.85}
.speed-core{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:6rem;height:6rem;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--bright),var(--accent) 55%,#0B4F86);box-shadow:0 0 0 .75rem rgba(38,154,226,.12),0 0 3rem rgba(38,154,226,.5)}
.speed-core svg{width:2.5rem;height:2.5rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.speed-pill{position:absolute;display:flex;align-items:center;gap:.75rem;margin:0;padding:.4rem 1.25rem .4rem .4rem;border:1px solid var(--accent);border-radius:999px;background:rgba(10,18,38,.82);backdrop-filter:blur(8px);box-shadow:0 14px 32px -14px rgba(0,0,0,.7);font-size:.9688rem;font-weight:700;line-height:1.2;white-space:nowrap}
.speed-pill-a{top:12%;left:1%}
.speed-pill-b{bottom:12%;right:1%}
.speed-pill-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--accent);border-radius:50%;background:var(--bg)}
.speed-pill-icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--bright);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.speed-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1.25rem,3vw,2rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--line-soft)}
.speed-points article>span{font-size:.875rem;font-weight:600;color:var(--bright)}
.speed-points h3{margin-top:.4rem;font-size:1.25rem;font-weight:800;line-height:1.15;letter-spacing:-.015em}
.speed-points p{margin-top:.6rem;font-size:.9688rem;color:var(--muted)}
@media(max-width:900px){.speed-points{grid-template-columns:1fr}.speed-points article{max-width:46rem}}
@media(max-width:560px){.speed-stage{height:16rem}.speed-core{width:4.75rem;height:4.75rem}.speed-core svg{width:2rem;height:2rem}.speed-pill{padding-right:1rem;font-size:.875rem}.speed-pill-icon{width:2rem;height:2rem}.speed-pill-a{top:6%;left:0}.speed-pill-b{bottom:6%;right:0}}
@media(prefers-reduced-motion:no-preference){
@keyframes speed-spin{to{transform:rotate(360deg)}}
@keyframes speed-float{from{translate:0 -5px}to{translate:0 5px}}
@keyframes speed-pulse{0%{scale:1;opacity:.55}100%{scale:1.9;opacity:0}}
.ring-a{animation:speed-spin 9s linear infinite}
.ring-b{animation:speed-spin 15s linear infinite reverse}
.ring-c{animation:speed-spin 24s linear infinite}
.speed-pill-a{animation:speed-float 5s ease-in-out infinite alternate}
.speed-pill-b{animation:speed-float 6s ease-in-out -2s infinite alternate}
.speed-core::after{content:"";position:absolute;inset:0;border:2px solid var(--bright);border-radius:50%;animation:speed-pulse 2.8s var(--ease-out) infinite}
}