@font-face{font-family:Satoshi;src:url('../assets/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap}
:root{--line:#d5d8d2;--sm-accent:var(--accent);--ease:cubic-bezier(.23,1,.32,1)}
html{scroll-behavior:auto;scroll-padding-top:108px}body{overflow-x:clip}h1,h2,h3,p,figure{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}a,button{touch-action:manipulation}input,textarea{caret-color:var(--accent)}button:active{transform:scale(.97)}input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}p{text-wrap:pretty}button{color:inherit}.brand-dot{color:var(--accent);-webkit-text-stroke:0}.outline{color:transparent;-webkit-text-stroke:1.05px var(--ink)}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.chapter{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;border-bottom:1px solid #a8aeaa;font-size:15px;width:max-content;max-width:100%;transition:color .16s}.text-link>span:last-child{font-size:22px}.quiet-link{display:inline-flex;align-items:center;gap:26px;min-height:44px;font-size:13px}.quiet-link>span{font-size:21px}.text-link:hover,.quiet-link:hover{color:var(--accent)}
.sm-header .sm-pill{font-weight:600}.sm-header .sm-talk{background:var(--ink);color:var(--paper)}.sm-header .sm-talk>span,.sm-header .sm-icon{display:none}.sm-header .sm-toggle{min-width:106px}.sm-toggle-textWrap{text-align:center}.staggered-menu-panel{padding-top:125px}.sm-panel-list{gap:5px}.sm-panel-item{font-size:clamp(32px,3.7vw,58px)}.sm-contact{gap:14px}.sm-contact p{font-size:16px}.sm-locked .hero{pointer-events:none}
.hero{min-height:100svh}.hero-baseline{min-height:58px}
.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:9vw;padding:124px var(--gutter) 132px}.contact-intro h2{font:400 clamp(54px,6.3vw,104px)/1 Arial,sans-serif;letter-spacing:-.06em;margin-top:40px}.contact-intro>p:not(.chapter){font-size:20px;line-height:1.5;max-width:27ch;margin-top:28px}.contact-email{display:flex;gap:35px;align-items:center;width:max-content;min-height:44px;font-size:16px;margin-top:42px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}.field{margin-bottom:30px;min-width:0}.field label{display:block;font-size:14px;margin-bottom:10px}.field label span{font-size:11px;color:var(--muted)}.field input,.field textarea{display:block;width:100%;border:0;border-radius:0;border-bottom:1px solid #b9beb8;background:none;color:var(--ink);padding:8px 0 13px;min-height:44px;font-size:17px;line-height:1.5;resize:vertical}.field textarea{min-height:105px}.field textarea::placeholder{color:#777e77;font-size:15px}.field-error{font-size:12px;color:var(--accent);line-height:1.5;margin-top:7px}.field-error:empty{display:none}[aria-invalid=true]{border-color:var(--accent)!important}.interest{border:0;padding:0;margin:4px 0 30px;display:flex;flex-wrap:wrap;gap:9px}.interest legend{font-size:14px;margin-bottom:15px}.interest label{position:relative;cursor:pointer}.interest input{position:absolute;opacity:0;width:1px;height:1px}.interest span{display:flex;align-items:center;min-height:44px;padding:0 17px;border:1px solid #cbd0c8;border-radius:999px;font-size:13px}.interest input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}.interest input:focus-visible+span{outline:2px solid var(--accent);outline-offset:4px}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}.form-bottom p{font-size:11px;line-height:1.6;color:var(--muted)}.form-bottom a{text-decoration:underline;text-underline-offset:3px}.submit-button{display:flex;align-items:center;gap:24px;min-height:52px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;white-space:nowrap}.submit-button span{font-size:20px}.form-result{margin-top:24px;padding:22px;border-radius:14px;background:#e7ece4}.form-result p{font-size:15px;line-height:1.5}.form-result .text-link{margin-top:10px}
/* il piede, con l'impianto di quello del sito online (Landing_Apotelic/site, Footer.astro): nero a tutta pagina, poche voci in colonne,
   il filo sopra la riga legale e il logotipo enorme come filigrana appoggiata al bordo di sotto — fuori dal flusso, così il piede è alto
   quanto i suoi link. I toni sono quelli di questa pagina (inchiostro #191d20), non quelli del sito online (#100F0D). */
footer.site-footer{position:relative;display:block;overflow:hidden;border-top:0;background:var(--ink);color:var(--paper);padding:0;font-size:14px}
.footer-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:88px var(--gutter) 64px}
.footer-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.footer-claim p{margin:0;font-size:18px;line-height:1.4;letter-spacing:-.02em;color:var(--paper)}
.footer-label{margin:0 0 16px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#8b877c}
.footer-label--secondo{margin-top:26px}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li+li{margin-top:9px}
.footer-col a{display:inline-block;font-size:15px;line-height:1.5;color:var(--paper);text-decoration:none;transition:color .2s ease}
.footer-col a:hover{color:#d85512}   /* l'ambra chiara: sull'inchiostro fa 4,77:1, quella normale 3,09 (kit d'identità) */
@media(pointer:fine){.footer-col a{min-height:0}}   /* col mouse le voci stanno strette come nel sito online; col dito resta il bersaglio da 44 px di hero.css */
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:64px;padding-top:26px;border-top:1px solid #2a2825;font-size:13.5px;color:#8b877c}
.footer-bottom .back-top{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13.5px;color:#8b877c;transition:color .2s ease}
.footer-bottom .back-top:hover{color:var(--paper)}
.footer-wordmark{position:absolute;left:0;right:0;bottom:-.08em;z-index:0;font:700 clamp(88px,21vw,340px)/.74 Satoshi,Arial,sans-serif;letter-spacing:-.055em;text-align:center;color:#262a2d;user-select:none;pointer-events:none}
.footer-dot{color:#4a2009}   /* il punto resta ambra, ma spento come il resto */
dialog{border:0;padding:0;width:min(1500px,95vw);height:92svh;max-height:92svh;max-width:none;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0004}dialog::backdrop{background:#191d2070;backdrop-filter:blur(6px)}dialog[open]{display:flex;flex-direction:column}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 24px;border-bottom:1px solid var(--line)}.dialog-header h2{font:500 16px Satoshi,sans-serif;letter-spacing:-.02em}.dialog-header button{border:0;background:transparent;display:flex;gap:24px;align-items:center;min-height:44px;font-size:14px}.dialog-header button span{font-size:25px}dialog iframe{border:0;display:block;flex:1;width:100%;min-height:0}.dialog-open{overflow:hidden}
/* Apotelic → AI → three products. The same sky opens onto a concise overview. */
/* La scena AI, seconda versione (15/09 sera): palco fisso di 100svh in una sezione di 170svh; il film recita da solo, il bagliore sopra tutto */
.ai-section{position:relative;isolation:isolate;height:320svh;--ai-tail:60svh;background:#000;color:var(--paper);text-align:center;scroll-margin-top:0}   /* terza versione: film scrubbato dallo scroll, 160svh di corsa */
.ai-stage{position:sticky;top:0;height:100svh;overflow:clip;display:flex;align-items:flex-start;justify-content:center;padding:9svh var(--gutter) 0}
/* La card di testo al centro: il vetro (fluid glass) lo disegna il canvas copiando questo rettangolo; qui solo il testo, in Satoshi (prova del font Apotelic), che entra alla BlurText. Senza WebGL: vetro CSS. */
.ai-copy{position:relative;z-index:3;max-width:1200px}
.ai-copy h2{font:500 clamp(52px,7.6vw,120px)/1 Satoshi,Arial,sans-serif;letter-spacing:-.045em;color:var(--paper);text-wrap:balance}   /* il titolo in alto, fuori dalla card; Satoshi in prova al posto dell'Arial degli altri titoli */
.ai-card{position:absolute;left:50%;top:50%;z-index:3;width:min(700px,56vw);transform:translate(-50%,-50%) scale(var(--card-s,1));padding:44px 52px 46px;border-radius:40px;text-align:center;pointer-events:none}   /* cresce con il vetro (0,92 → 1) */
.ai-copy h2,.ai-card-text{text-shadow:0 1px 18px #000a,0 0 3px #0007}   /* come l'outlineBlur del testo nel componente: un'ombra morbida scura sotto le lettere, per leggerle sopra il guanto */
.ai-card-text{font:400 clamp(19px,1.55vw,25px)/1.45 Satoshi,Arial,sans-serif;letter-spacing:-.012em;color:#ece9e3;max-width:40ch;margin:0 auto;opacity:var(--card-on,0)}   /* paragrafo grande (16/09, sera): 23 px a 1470 di larghezza */   /* appare con la card, sul progresso */
.bt-root{display:flex;flex-wrap:wrap;justify-content:center}.bt-seg{display:inline-block;will-change:transform,filter,opacity}
.ai-section:not(.is-gl) .ai-card{background:#ffffff14;border:1px solid #ffffff2a;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);opacity:var(--card-on,0)}
.ai-film{position:absolute;left:50%;bottom:0;z-index:1;height:100svh;width:auto;aspect-ratio:9/16;transform:translateX(-50%);pointer-events:none;object-fit:cover;background:#000}
.ai-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}   /* grande quanto il palco: film e bagliore in un colpo solo */
.ai-section.is-gl .ai-wash,.ai-section.is-gl .ai-rim{display:none}   /* col compositore bagliore e cornice li disegna lo shader */
/* con il compositore WebGL il video impilato (colore sopra, matte sotto) resta nel DOM ma fuori vista: il canvas disegna il film con l'alpha vero */
.ai-section.is-gl .ai-film{opacity:0;width:2px;height:2px;left:0;bottom:0;transform:none}
.ai-section:not(.is-gl) .ai-canvas{display:none}
.ai-film-still{display:none;position:absolute;left:50%;bottom:0;z-index:1;height:100svh;width:auto;transform:translateX(-50%);pointer-events:none}   /* con movimento ridotto, o se l'autoplay è negato: il fotogramma finale al posto del film */
.ai-section.is-still .ai-film,.ai-section.is-still .ai-canvas{visibility:hidden}.ai-section.is-still .ai-film-still{display:block}
.ai-section.is-gl .ai-film-still{display:none}
.ai-section.is-glowing .ai-stars{opacity:.35}
.ai-wash{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--wash-on,0);will-change:opacity}
.ai-wash-strip{position:absolute;top:0;left:0;height:100%;width:300%;object-fit:fill;transform:translateX(var(--wash-x,0%));will-change:transform}
.ai-wash-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.ai-rim{position:absolute;inset:0;z-index:6;width:100%;height:100%;object-fit:fill;pointer-events:none;opacity:var(--rim-on,0);will-change:opacity}
.ai-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateY(var(--stars-shift,0px))}
.ai-section.is-glowing .ai-stars{opacity:.6}
.ai-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#a0acba;opacity:.5}
.ai-stars i:nth-child(3n){width:1px;height:1px;opacity:.35}
.ai-stars i:nth-child(5n){background:#b58d70}




















.contact-section{border-top:1px solid var(--line)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){}
@media(max-width:1100px){
 
 .form-bottom{align-items:start;flex-direction:column}
}
@media(max-width:760px){
 
 
 
 
 
 
}
@media(max-width:700px){
 :root{--gutter:22px;--radius:14px}.sm-header .sm-pill{padding-inline:17px}.sm-header .sm-brand{padding-inline:15px}.sm-header .sm-toggle{min-width:90px}.staggered-menu-panel{padding:105px 28px 25px}.sm-panel-list{gap:4px}.sm-panel-item{font-size:clamp(29px,7.8vw,43px);min-height:44px;padding-bottom:5px}.sm-contact p{font-size:15px}.sm-contact a{font-size:13px}.hero-baseline{min-height:52px}
 .ai-section{height:300svh}.ai-stage{padding-top:11svh}.ai-film{height:100svh;width:100vw;object-fit:cover}.ai-copy h2{font-size:clamp(44px,12vw,80px)}.ai-card{width:calc(100vw - 2*var(--gutter));padding:26px 22px 28px;border-radius:28px}.ai-card-text{font-size:17px}
 .contact-section{display:block;padding:76px var(--gutter) 65px}.contact-intro h2{font-size:16vw;margin-top:28px}.contact-intro>p:not(.chapter){font-size:18px;max-width:30ch;margin-top:24px}.contact-email{font-size:15px;margin-top:24px}#contact-form{margin-top:50px}.form-row{grid-template-columns:1fr;gap:0}.field{margin-bottom:25px}.field label{font-size:13px}.field input,.field textarea{font-size:16px}.field textarea::placeholder{font-size:14px}.interest{gap:8px}.interest span{padding-inline:14px;font-size:12px}.form-bottom{gap:22px}.submit-button{width:100%;justify-content:space-between;font-size:14px;min-height:54px}
 footer.site-footer .footer-inner{padding:64px var(--gutter) 44px}.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}.footer-claim{grid-column:1/-1;margin-bottom:6px}.footer-claim p{font-size:22px}.footer-col:last-child{grid-column:1/-1;display:grid;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:24px}.footer-label--secondo{margin-top:0}.footer-label{margin-bottom:12px}.footer-col li+li{margin-top:12px}.footer-bottom{margin-top:44px;padding-top:22px;font-size:13px}.footer-wordmark{font-size:21vw}   /* 23/09: quattro gruppi su due colonne (Contatti e Social affiancati, non impilati), respiro uniforme, logotipo che sta nella larghezza */
 dialog{width:100%;height:100svh;max-height:100svh;border-radius:0;margin:0}.dialog-header{padding-inline:18px}.dialog-header h2{font-size:14px}.dialog-header button{font-size:12px;gap:12px}
}
@media(max-width:350px){.sm-header .sm-pill{padding-inline:12px}.sm-header .sm-toggle{min-width:76px}.sm-header .sm-brand{padding-inline:12px}.sm-header-right{gap:6px}.sm-header{gap:8px}.sm-panel-item{font-size:27px}.ai-card-text{font-size:14px}}
@media(max-height:550px) and (min-aspect-ratio:6/5){.ai-section{height:300svh}.ai-copy h2{font-size:15svh}.ai-card{padding:18px 24px 20px}.ai-card-text{font-size:15px;max-width:56ch}.staggered-menu-panel{padding-top:76px;padding-bottom:16px}.sm-panel-list{gap:0}.sm-panel-item{font-size:27px;min-height:40px;padding-bottom:1px}.sm-contact{margin-top:12px}.sm-contact p{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ai-copy,.ai-stars{transform:none!important}.ai-section{height:auto}.ai-stage{position:relative}.ai-card,.ai-copy,.ai-card-text{opacity:1}.ai-film,.ai-canvas{display:none}.ai-film-still{display:block}}
[hidden]{display:none!important}

/* ——— Al tocco (telefono e tablet, 23/09): niente motore di scroll, quindi niente corse. Prodotti e contatti sono blocchi in flusso (products.js
   sceglie «still» e contact.js non è live senza puntatore fine); la scena AI perde la coda di 60svh su cui saliva la cupola. Gli scudi (.orlo)
   contro le fasce di Safari iOS: due strisce fisse trasparenti, larghe l'80 % (sotto la soglia del 90 %), sul punto che Safari tasta al centro dei
   bordi; il primo antenato fisso che trova è lo scudo, non candidato, e sotto le barre resta il documento che scorre (vedi prototipi/hero-manifesto). */
.orlo{position:fixed;left:10%;width:80%;height:12px;z-index:200;pointer-events:auto;background:transparent}.orlo-alto{top:0}.orlo-basso{bottom:0}
@media(hover:hover) and (pointer:fine){.orlo{display:none}}
@media(hover:none),(pointer:coarse){
 .hero{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 44px)}   /* «Scorri per scoprire» sopra la barra bassa di Safari, che sul telefono galleggia sul contenuto (Alessandro, 23/09) */
 .sm-header .sm-talk{box-shadow:0 0 0 1px #f6f6f440}   /* la pillola scura sui fondi scuri (stanza del form, piede): un filo chiaro al 25 % che sul chiaro non si vede */
 html .contact-section .ct-facts a{min-height:44px;align-items:center}html .contact-section .ct-card .interest span{min-height:44px}html .contact-section .ct-card .form-bottom a{display:inline-flex;min-height:44px;align-items:center}   /* bersagli da dito; «html» davanti perché contact.css, caricato dopo, fissava le scelte a 38 px */
}
/* Prodotti in flusso (products.js mette html.pr-flow al tocco e quando le finestre non stanno nel palco): la scena AI perde la coda di 60svh su cui
   saliva la cupola, e la cima tonda della cupola resta, ferma, montata sul fondo nero del film (senza il margine negativo gli angoli tondi
   scoprivano la carta del body e la cima sembrava dritta); il titolo sotto l'header. */
html.pr-flow .ai-section{--ai-tail:0svh;height:260svh}html.pr-flow .ai-stage{padding-top:max(9svh,110px)}
html.pr-flow .products-section.is-still{margin-top:-22vw}html.pr-flow .products-section.is-still .pr-stage{padding-top:100px;padding-bottom:80px;border-radius:50vw 50vw 0 0/22vw 22vw 0 0}
html.pr-flow .products-section.is-still .pr-dome{display:none}html.pr-flow .products-section.is-still .pr-window{transform:none!important;opacity:1!important}
@media(max-width:700px){html.pr-flow .ai-section{height:240svh}html.pr-flow .ai-stage{padding-top:max(11svh,100px)}}
@media(max-width:700px),(hover:none),(pointer:coarse){   /* testi del form e del piede: sul telefono e su ogni schermo a tocco */
 html .contact-section .ct-card .field label{font-size:13.5px}html .contact-section .ct-card .interest legend{font-size:13.5px}html .contact-section .ct-card .form-bottom p,html .contact-section .ct-card .form-bottom a{font-size:13px}html .contact-section .ct-card .field label span{font-size:12.5px}   /* «html» davanti: contact.css è caricato dopo e a pari specificità vincerebbe lui */
 .footer-label{font-size:13px}.footer-bottom{font-size:13.5px}
}