@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url(/font/bodoni-moda-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url(/font/bodoni-moda-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(/font/bodoni-moda-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/font/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/font/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/font/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
:root{--carta:#FAF7F2;--bianco:#FFFFFF;--notte:#1F2233;--inchiostro:#24263A;--tenue:#666879;--oro:#B08D57;--oro-chiaro:#E8D3A8;--riga:#E6E0D6;--velo:#F1ECE4}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--carta);color:var(--inchiostro);font:17px/1.6 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-.005em}
.contenitore{width:min(1140px,100% - 40px);margin:0 auto}
.salta{position:absolute;left:-9999px}.salta:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
.occhiello{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.bottone{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--notte);transition:transform .15s,background .15s}
.bottone:hover{transform:translateY(-1px)}
.b-pieno{background:var(--notte);color:#fff}
.b-pieno:hover{background:#2E3250}
.b-vuoto{color:var(--notte);background:transparent}
.b-vuoto:hover{background:rgba(31,34,51,.05)}
.ic{width:26px;height:26px;color:var(--oro);flex:none}

/* testata */
.testata{position:sticky;top:0;z-index:20;background:rgba(250,247,242,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.testata.giu{border-bottom-color:var(--riga)}
.testata .contenitore{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Bodoni Moda",Georgia,serif;font-size:22px;white-space:nowrap}
.logo .marchio{width:32px;height:32px}
.menu{display:flex;gap:22px;margin-left:auto;font-size:15px}
.menu a{text-decoration:none;color:var(--tenue)}
.menu a:hover{color:var(--inchiostro)}
.testata .entra{font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--riga);text-decoration:none;white-space:nowrap;background:#fff}
.testata .entra:hover{border-color:var(--oro)}

/* apertura */
.apertura{padding:72px 0 90px;position:relative;overflow:hidden}
.apertura::before{content:"";position:absolute;inset:-30% -10% auto 45%;height:760px;background:radial-gradient(closest-side,rgba(201,164,106,.22),transparent);pointer-events:none}
.apertura .contenitore{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.apertura h1{font-size:clamp(40px,5.6vw,66px);margin:16px 0 22px}
.apertura h1 em{font-style:italic;color:var(--oro)}
.apertura .sotto{font-size:19px;color:var(--tenue);max-width:34em;margin-bottom:32px}
.inviti{display:flex;gap:12px;flex-wrap:wrap}
.nota{font-size:14px;color:var(--tenue);margin-top:18px}

/* telefono finto */
.telefono{width:300px;margin:0 auto;border-radius:44px;padding:12px;background:#15161F;box-shadow:0 50px 90px -40px rgba(31,34,51,.65),0 0 0 1px rgba(255,255,255,.06) inset;transform:rotate(2.5deg)}
.schermo{border-radius:33px;overflow:hidden;background:var(--sf);color:var(--in);height:600px;padding:34px 18px 0;text-align:center}
.t-orn{color:var(--ac);width:96px;margin:0 auto 4px}
.t-frase{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;color:var(--te);font-size:15px}
.t-nomi{font-family:"Bodoni Moda",Georgia,serif;font-size:31px;line-height:1.1;margin:4px 0}
.t-sotto{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--te)}
.t-studio{display:flex;align-items:center;gap:10px;background:var(--ca);border-radius:12px;padding:9px 12px;margin:18px 0 16px;text-align:left;font-size:10.5px;color:var(--te);line-height:1.35;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.t-studio b{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--in);font-size:11px;letter-spacing:.12em;border:1px solid var(--in);padding:4px 6px;line-height:1.1}
.t-studio strong{color:var(--in);font-weight:600;font-size:12px}
.t-sez{font-family:"Bodoni Moda",Georgia,serif;font-size:19px;text-align:left;margin-bottom:8px}
.t-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.t-griglia i{aspect-ratio:1;background:linear-gradient(150deg,hsl(var(--h) 28% 74%),hsl(calc(var(--h) + 40) 22% 52%))}

/* sezioni */
section{scroll-margin-top:70px}
.blocco{padding:96px 0}
.blocco.scuro{background:var(--notte);color:#EDEAF2}
.blocco.scuro .tenue,.blocco.scuro .testa p{color:#A9ABBE}
.blocco.bianco{background:var(--bianco)}
.testa{max-width:680px;margin-bottom:46px}
.testa h2{font-size:clamp(32px,4vw,46px);margin:12px 0 14px}
.testa p{color:var(--tenue);font-size:18px}
.centro{text-align:center;margin-left:auto;margin-right:auto}

/* occasioni */
.occasioni{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.occasione{background:var(--sf);color:var(--in);border-radius:18px;padding:22px 16px 24px;text-align:center;position:relative;border:1px solid rgba(0,0,0,.05);transition:transform .2s}
.occasione:hover{transform:translateY(-3px)}
.occasione .etichetta{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ca);color:var(--te);padding:3px 9px;border-radius:999px}
.occasione .orn{color:var(--ac);width:88px;margin:16px auto 6px;height:62px}
.occasione .frase{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;color:var(--te);font-size:15px;min-height:1.5em}
.occasione .nomi{font-family:"Bodoni Moda",Georgia,serif;font-size:25px;line-height:1.15}
.occasione .sotto{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--te);margin-top:4px}
.dopo-occasioni{margin-top:26px;color:var(--tenue);font-size:16px;text-align:center}

/* passi */
.passi{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:p}
.passi li{background:var(--bianco);border:1px solid var(--riga);border-radius:18px;padding:28px 26px;counter-increment:p}
.passi li::before{content:counter(p);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--notte);color:var(--oro-chiaro);font-family:"Bodoni Moda",Georgia,serif;font-size:20px;margin-bottom:18px}
.passi h3{font-size:24px;margin-bottom:8px}
.passi p{color:var(--tenue);font-size:16px}

/* vantaggi */
.vantaggi{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 48px}
.vantaggio{display:flex;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}
.blocco:not(.scuro) .vantaggio{border-top-color:var(--riga)}
.vantaggio h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;margin-bottom:4px;letter-spacing:0}
.vantaggio p{font-size:16px}
.scuro .vantaggio p{color:#A9ABBE}
.blocco:not(.scuro) .vantaggio p{color:var(--tenue)}
.scuro .ic{color:var(--oro-chiaro)}

/* demo */
.demo{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:linear-gradient(120deg,#FFFDF9,#F4ECDD);border:1px solid var(--riga);border-radius:24px;padding:44px 48px}
.demo h2{font-size:clamp(28px,3.4vw,38px);margin-bottom:10px}
.demo p{color:var(--tenue)}
.demo .credenziali{font-size:15px;margin-top:12px}
.demo code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--riga);padding:2px 8px;border-radius:6px;font-size:14px}

/* domande */
.domande{max-width:820px;margin:0 auto}
.domande details{border-bottom:1px solid var(--riga);padding:4px 0}
.domande summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-size:19px;font-weight:500;position:relative}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:28px;font-weight:300;color:var(--oro);transition:transform .2s}
.domande details[open] summary::after{transform:rotate(45deg)}
.domande details p{color:var(--tenue);padding:0 0 20px;max-width:44em}

/* contatti */
.contatti{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contatti .testa{margin-bottom:22px}
.contatti .diretto{font-size:16px;color:var(--tenue)}
.contatti .diretto a{color:var(--inchiostro)}
form.modulo{background:var(--bianco);border:1px solid var(--riga);border-radius:20px;padding:30px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.largo{grid-column:1/-1}
.campo label,.ruolo legend{font-size:14px;font-weight:500}
.campo input,.campo textarea{font:inherit;font-size:16px;color:inherit;padding:12px 14px;border:1px solid var(--riga);border-radius:10px;background:var(--carta)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--oro);outline-offset:0;border-color:var(--oro);background:#fff}
.campo textarea{min-height:130px;resize:vertical}
.ruolo{border:0;grid-column:1/-1}
.ruolo legend{margin-bottom:8px}
.scelte{display:flex;gap:8px;flex-wrap:wrap}
.scelte label{cursor:pointer}
.scelte input{position:absolute;opacity:0}
.scelte span{display:inline-block;padding:8px 16px;border:1px solid var(--riga);border-radius:999px;font-size:15px;background:var(--carta)}
.scelte input:checked+span{background:var(--notte);border-color:var(--notte);color:#fff}
.scelte input:focus-visible+span{outline:2px solid var(--oro)}
.privacy{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tenue)}
.privacy input{margin-top:4px;accent-color:var(--notte)}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.modulo button{margin-top:20px;width:100%;justify-content:center;cursor:pointer;font-family:inherit}
form.modulo button:disabled{opacity:.6}
.esito{margin-top:14px;font-size:15px;min-height:1.4em}
.esito.ok{color:#3F6B47}.esito.no{color:#9A3B2E}

/* piede */
.piede{background:var(--notte);color:#A9ABBE;padding:46px 0;font-size:14px}
.piede .contenitore{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.piede address{font-style:normal;line-height:1.7}
.piede nav{display:flex;gap:22px;align-items:flex-start}
.piede a{color:#EDEAF2;text-decoration:none}
.piede a:hover{text-decoration:underline}

/* privacy */
.pagina-testo{padding:70px 0 90px}
.pagina-testo .contenitore{max-width:760px}
.pagina-testo h1{font-size:44px;margin-bottom:6px}
.pagina-testo h2{font-size:25px;margin:34px 0 8px}
.pagina-testo p{color:#45475A;margin-bottom:12px}
.pagina-testo .agg{color:var(--tenue);font-size:14px}

/* comparsa */
.svela{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.svela.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.svela{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:980px){
  .apertura .contenitore{grid-template-columns:1fr;gap:50px}
  .occasioni{grid-template-columns:repeat(2,1fr)}
  .passi{grid-template-columns:1fr}
  .contatti{grid-template-columns:1fr;gap:20px}
  .menu{display:none}
  .testata .entra{margin-left:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .contenitore{width:calc(100% - 32px)}
  .apertura{padding:44px 0 64px}
  .blocco{padding:70px 0}
  .vantaggi{grid-template-columns:1fr;gap:0}
  .occasioni{gap:10px}
  .occasione{padding:18px 10px 20px}
  .occasione .nomi{font-size:20px}
  .occasione .etichetta{font-size:10px;left:8px;top:8px}
  .occasione .orn{width:72px;height:52px;margin-top:20px}
  .demo{grid-template-columns:1fr;padding:30px 24px}
  .campi{grid-template-columns:1fr}
  form.modulo{padding:22px 18px}
  .telefono{width:270px;transform:none}
  .schermo{height:540px}
  .logo span{font-size:20px}
}