/* M3 · FRAME — un solo carattere per tutta la pagina.
   Il colpo: la cornice sottile con i crocini agli angoli, sempre presente. */
body{font-family:var(--mono);font-weight:400;letter-spacing:-0.005em}
h1,h2,h3{font-family:var(--mono);font-weight:400;letter-spacing:-0.02em}

/* the frame */
.fr{position:fixed;inset:clamp(12px,1.6vw,22px);border:1px solid var(--line-0);pointer-events:none;z-index:60}
.fr span{position:absolute;width:9px;height:9px;border:0}
.fr span::before,.fr span::after{content:"";position:absolute;background:var(--amber)}
.fr span::before{width:9px;height:1px;top:0;left:0}
.fr span::after{width:1px;height:9px;top:0;left:0}
.fr .tl{top:-1px;left:-1px}
.fr .tr{top:-1px;right:-1px;transform:scaleX(-1)}
.fr .bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.fr .br{bottom:-1px;right:-1px;transform:scale(-1)}

.hd{position:fixed;top:clamp(12px,1.6vw,22px);left:clamp(12px,1.6vw,22px);right:clamp(12px,1.6vw,22px);z-index:55;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,2.4vw,30px);border-bottom:1px solid var(--line-0);background:var(--bg)}
/* width:auto è necessario: gli attributi width/height sull'<img> valgono come
   regola di presentazione, quindi senza questo il logo verrebbe stirato */
.hd img{height:22px;width:auto}
.hd nav{display:flex;gap:clamp(10px,1.6vw,22px);flex-wrap:wrap}
.hd nav a{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.hd nav a:hover{color:var(--amber)}
.hd .rgt{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.hd .sb{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;background:var(--amber);color:#0b0b0a;padding:7px 13px;font-weight:500;white-space:nowrap}
.hd .sb:hover{background:#FFC733;color:#0b0b0a}

/* language switch — same face, reads like a field on a spec sheet */
.lg{display:flex;align-items:center;border:1px solid var(--line-0)}
.lg button{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;background:transparent;border:0;color:var(--fg-2);padding:7px 9px;cursor:pointer;font-weight:400;line-height:1}
.lg button:hover{color:var(--fg)}
.lg button[aria-pressed="true"]{background:var(--amber);color:#0b0b0a;font-weight:500}
.lg .sep{width:1px;align-self:stretch;background:var(--line-0)}

.inner{padding:calc(clamp(12px,1.6vw,22px) + 62px) calc(clamp(12px,1.6vw,22px) + clamp(18px,3vw,44px)) clamp(12px,1.6vw,22px)}
.mx{max-width:1080px;margin:0 auto}

/* blinking caret — the page feels live */
.car{display:inline-block;width:0.55em;height:0.92em;background:var(--amber);vertical-align:-0.1em;margin-left:0.14em;animation:bl 1.15s steps(1,end) infinite}
@keyframes bxh{to{transform:scaleX(1)}}
@keyframes bxv{to{transform:scaleY(1)}}
@keyframes bl{0%,50%{opacity:1}50.01%,100%{opacity:0}}

.hero{padding:clamp(58px,12vh,140px) 0 clamp(44px,8vh,90px)}
.tagline{font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--fg-3);margin-bottom:clamp(28px,4vh,46px)}
h1{font-size:clamp(24px,3.9vw,48px);line-height:1.26;max-width:26ch;font-weight:400}
h1 em{font-style:normal;color:var(--amber)}
.lede{font-size:13.5px;line-height:1.86;color:var(--fg-2);max-width:70ch;margin-top:clamp(26px,4vh,40px);font-weight:400}

/* key/value lines — the whole page is one long spec sheet */
.set{border-top:1px solid var(--line-1);margin-top:clamp(30px,4vh,48px)}
.ln{display:grid;grid-template-columns:minmax(140px,19%) 1fr;gap:clamp(16px,2.6vw,42px);padding:17px 0;border-bottom:1px solid var(--line-1);align-items:start}
/* righe con la terza colonna (cadenza, prezzo): serve una traccia in più,
   altrimenti il terzo figlio va a capo e resta sospeso a metà riga */
.ln:has(.x){grid-template-columns:minmax(140px,19%) 1fr auto}
.ln:hover{background:var(--bg-2)}
.ln .k{font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--amber);padding-top:3px}
.ln .v{font-size:13.5px;line-height:1.78;color:var(--fg-2);max-width:none;font-weight:400}
.ln .v b{color:var(--fg);font-weight:500}
.ln .x{font-size:14px;color:var(--fg-3);white-space:nowrap;text-align:right}

.sec{padding:clamp(50px,8vh,92px) 0;border-top:1px solid var(--line-0)}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(20px,3vh,32px);flex-wrap:wrap}
.sh .n{font-size:10.5px;letter-spacing:0.2em;color:var(--amber)}
.sh h2{font-size:clamp(17px,2vw,23px);letter-spacing:0.02em;font-weight:400}
.sh .rt{margin-left:auto;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3)}
.tx{font-size:13.5px;line-height:1.86;color:var(--fg-2);max-width:none;font-weight:400}
.tx+.tx{margin-top:16px}

.acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:clamp(26px,3.6vh,40px)}
.bt{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--line-0);color:var(--fg);font-weight:400;white-space:nowrap}
.bt:hover{border-color:var(--amber);color:var(--amber)}
.bt.p{background:var(--amber);border-color:var(--amber);color:#0b0b0a;font-weight:500}
.bt.p:hover{background:#FFC733;color:#0b0b0a}

/* the one big number, drawn in the same face */
.count{display:flex;align-items:center;gap:22px;padding:clamp(30px,5vh,58px) 0;border-top:1px solid var(--line-0);border-bottom:1px solid var(--line-0);flex-wrap:wrap}
.count .big{font-size:clamp(52px,10vw,116px);line-height:0.82;color:var(--amber);font-weight:400;letter-spacing:-0.05em}
.count .lb{font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-3);line-height:2}

.flag{font-size:10px;letter-spacing:0.05em;color:var(--fg-3);margin-top:20px;display:flex;gap:10px;align-items:center}
.flag i{width:4px;height:4px;background:var(--amber);flex-shrink:0}

.ft{padding:clamp(40px,6vh,72px) 0 30px;border-top:1px solid var(--line-0)}
.ft-r{display:flex;flex-wrap:wrap;gap:36px;margin-bottom:32px}
.ft-r h5{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 13px;font-weight:400}
.ft-r a{display:block;font-size:12px;color:var(--fg-2);margin-bottom:9px}
.rsk{border:1px solid var(--line-1);padding:17px 20px}
.rsk .t{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--dn);margin-bottom:10px}
.rsk p{font-size:11px;line-height:1.8;color:var(--fg-3);font-weight:400}
.sg{font-size:10px;letter-spacing:0.08em;color:var(--fg-3);padding-top:22px}

/* schermi larghi: la hero e il blocco 100+ stanno al centro pagina,
   stessa larghezza, stesso margine a destra e a sinistra */
@media (min-width:1100px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,0.46fr);column-gap:clamp(40px,5vw,84px);align-items:center}
  .hero > .count{position:relative;grid-column:2;grid-row:1 / span 5;flex-direction:column;align-items:flex-start;gap:16px;border:0;padding:clamp(26px,4vh,44px) clamp(26px,3vw,40px)}
  .hero > .count::before,.hero > .count::after{content:"";position:absolute;inset:0;pointer-events:none}
  .hero > .count::before{border-top:1px solid var(--line-0);border-bottom:1px solid var(--line-0);transform:scaleX(0);transform-origin:left center;animation:bxh .55s .35s cubic-bezier(.2,.7,.2,1) forwards}
  .hero > .count::after{border-left:1px solid var(--line-0);border-right:1px solid var(--line-0);transform:scaleY(0);transform-origin:center top;animation:bxv .5s .85s cubic-bezier(.2,.7,.2,1) forwards}
  .hero > .count .lb{line-height:2.1}
}
@media (max-width:980px){
  .hd{flex-wrap:wrap}
  .hd > nav.dsk{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:20px;margin-top:12px;padding:11px 0 3px;border-top:1px solid var(--line-1);scrollbar-width:none;-ms-overflow-style:none}
  .hd > nav.dsk::-webkit-scrollbar{display:none}
  .inner{padding-top:calc(clamp(12px,1.6vw,22px) + 112px)}
}
@media (max-width:760px){
  /* header: logo + azione sopra, la stessa riga di navigazione sotto */
  .hd{padding:12px 16px}
  .hd img{height:20px}
  .hd .sb{padding:13px 16px}
  .hd .lg button{padding:15px 10px}
  .hd > nav.dsk{gap:19px;margin-top:10px;padding:11px 0 3px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .hd > nav.dsk a{padding:13px 0}
  .inner{padding:calc(clamp(12px,1.6vw,22px) + 118px) calc(clamp(12px,1.6vw,22px) + 15px) clamp(12px,1.6vw,22px)}
  /* testo: il monospace va rimpicciolito e arieggiato, non stretto */
  .hero{padding:34px 0 44px}
  h1{font-size:21px;line-height:1.4;max-width:none}
  .tagline{letter-spacing:0.15em;line-height:1.8;margin-bottom:24px}
  .lede{font-size:13px;line-height:1.82;margin-top:24px}
  .tx,.ln .v{font-size:13px;line-height:1.82}
  .sec{padding:44px 0}
  .sh{gap:10px}
  .sh h2{font-size:16px}
  .sh .rt{margin-left:0;flex-basis:100%}
  /* righe chiave/valore: una colonna, etichetta sopra */
  .ln,.ln:has(.x){grid-template-columns:1fr;gap:6px;padding:16px 0}
  .ln .k{padding-top:0}
  .ln .x{text-align:left;font-size:13px}
  .set{margin-top:24px}
  /* pulsanti a piena larghezza, area toccabile piena */
  .acts{gap:9px;margin-top:26px}
  .acts .bt{flex:1 1 100%;text-align:center;padding:15px 18px}
  .count{padding:30px 0;gap:16px}
  .count .lb{line-height:2}
  /* piede: link distanziati abbastanza da centrarli col pollice */
  .ft{padding:40px 0 26px}
  .ft-r{gap:26px}
  .ft-r > div{min-width:0;flex:1 1 150px}
  .ft-r a{padding:10px 0;margin-bottom:0}
  .rsk{padding:15px 16px}
}
@media (max-width:420px){
  .fr{inset:9px}
  .hd{padding:11px 14px}
  .hd img{height:18px}
  .hd .rgt{gap:8px}
  .inner{padding-left:calc(9px + 13px);padding-right:calc(9px + 13px)}
  h1{font-size:19px;line-height:1.44}
  .count .big{font-size:40px}
  .ft-r > div{flex:1 1 100%}
}