:root{--sans:Archivo,"Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
  :root{
    --ground:#08090B; --film:#0B0D11; --panel:#12151A; --panel-2:#171B22; --edge:#232935;
    --ink:#F3F5F9; --ink-2:#A6AEBC; --ink-3:#7E8697;
    --verde:#2ECC71; --aqua:#40E0D0; --arancio:#FF8A3D; --blu:#4C8DFF; --acciaio:#96A0B0;
    --c:var(--arancio);
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--sans); -webkit-font-smoothing:antialiased;
    display:flex; align-items:center; justify-content:center; padding:16px}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

  .film{width:min(100%, calc((100vh - var(--fuori,134px)) * 16 / 9)); display:flex; flex-direction:column; gap:10px}
  body.dentro{--fuori:92px}

  /* ---------- la pellicola ---------- */
  .stage{position:relative; width:100%; aspect-ratio:16/9; container-type:size;
    background:var(--film); border:1px solid var(--edge); border-radius:6px; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.55)}
  .stage::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:40;
    background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.42) 100%)}

  .sc{position:absolute; inset:0; opacity:0; visibility:hidden; padding:5.2cqw 6cqw 6.4cqw;
    display:flex; flex-direction:column; justify-content:center}
  .sc.on{visibility:visible}
  .sc::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(58cqw 40cqw at 88% -8%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%)}

  /* ---------- strumenti di bordo (dentro la pellicola) ---------- */
  .hud{position:absolute; left:0; right:0; top:0; z-index:30; display:flex; align-items:center;
    gap:1.6cqw; padding:1.9cqw 2.4cqw; font-family:var(--mono); font-size:.98cqw;
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
  .hud b{color:var(--ink-2); font-weight:500}
  .hud .live{display:flex; align-items:center; gap:.6cqw}
  .hud .live i{width:.55cqw; height:.55cqw; border-radius:50%; background:var(--c); display:block;
    box-shadow:0 0 0 .3cqw color-mix(in srgb, var(--c) 25%, transparent)}
  .hud .sep{flex:1}
  .hud .out b{color:var(--c)}

  /* ---------- mattoni tipografici ---------- */
  .eyebrow{display:flex; align-items:center; gap:.9cqw; font-family:var(--mono); font-size:1cqw;
    letter-spacing:.24em; text-transform:uppercase; color:var(--c); margin:0 0 1.4cqw}
  .eyebrow::before{content:""; width:2.2cqw; height:1px; background:var(--c); flex:none}
  h2{font-size:3.9cqw; font-weight:800; letter-spacing:-.03em; line-height:1.03; margin:0;
    text-wrap:balance; max-width:20ch}
  h2 em{font-style:normal; color:var(--c)}
  .kick{font-size:1.6cqw; line-height:1.5; color:var(--ink-2); margin:1.5cqw 0 0; max-width:46ch}
  .kick b{color:var(--ink); font-weight:600}

  /* ---------- animazioni (tutte su orologio assoluto) ---------- */
  #film *{animation-play-state:paused !important}
  .a{animation-duration:var(--dur,.72s); animation-delay:var(--d,0s);
    animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  .up{animation-name:up} @keyframes up{from{opacity:0; transform:translateY(1.5cqw)} to{opacity:1; transform:none}}
  .fade{animation-name:fade} @keyframes fade{from{opacity:0} to{opacity:1}}
  .rt{animation-name:rt} @keyframes rt{from{opacity:0; transform:translateX(4cqw)} to{opacity:1; transform:none}}
  .lf{animation-name:lf} @keyframes lf{from{opacity:0; transform:translateX(-2.4cqw)} to{opacity:1; transform:none}}
  .pop{animation-name:pop} @keyframes pop{from{opacity:0; transform:scale(.86)} to{opacity:1; transform:none}}
  .draw{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation-name:draw}
  @keyframes draw{to{stroke-dashoffset:0}}
  .type{display:inline-block; overflow:hidden; white-space:pre; vertical-align:bottom;
    width:0; animation-name:type; animation-timing-function:steps(var(--n),end)}
  @keyframes type{to{width:calc(var(--n) * 1ch)}}
  .blink{animation-name:blink; animation-duration:1s; animation-iteration-count:infinite;
    animation-timing-function:steps(2,end)}
  @keyframes blink{50%{opacity:0}}
  .floaty{animation-name:floaty; animation-duration:7s; animation-iteration-count:infinite;
    animation-timing-function:ease-in-out}
  @keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-.8cqw)}}

  /* ============ 1 · la domanda ============ */
  .ask{max-width:62cqw}
  .ask .line{font-family:var(--mono); font-size:2.1cqw; line-height:1.6; color:var(--ink)}
  .ask .line .q{color:var(--c)}
  .ask .line2{font-family:var(--mono); font-size:1.5cqw; color:var(--ink-3); margin-top:1.6cqw}
  .caret{display:inline-block; width:.62ch; height:1.05em; background:var(--c);
    vertical-align:-.16em; margin-left:.18ch}

  /* ============ 2 · il marchio ============ */
  .lock{display:flex; align-items:center; gap:2.6cqw; justify-content:center}
  .shard{width:7.1cqw; height:10.4cqw; flex:none}
  .shard .face{transform-origin:50% 50%; transform-box:fill-box}
  /* le linee del marchio: una tinta chiara dello stesso colore, non bianco */
  .shard .linea{stroke:#D7DEE9; stroke:color-mix(in srgb, var(--c) 62%, #E8ECF3)}
  .schema .linea{stroke:#9AA7B8; stroke:color-mix(in srgb, var(--c) 62%, #E8ECF3)}
  .wm{font-size:6.6cqw; font-weight:800; letter-spacing:.13em; line-height:1; margin:0}
  .payoff{font-size:1.75cqw; color:var(--ink-2); letter-spacing:.02em; margin:1.6cqw 0 0;
    text-align:center}
  .payoff b{color:var(--ink); font-weight:600}
  .centro{align-items:center; justify-content:center; text-align:center}

  /* ============ 3 · l'oggetto ============ */
  .duo{display:grid; grid-template-columns:1fr 1.02fr; gap:3cqw; align-items:center; width:100%}
  .shotbox{position:relative; height:33cqw; display:grid; place-items:center}
  .shotbox img{max-width:100%; max-height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 2cqw 2.6cqw rgba(0,0,0,.6))}
  .shotbox::after{content:""; position:absolute; left:50%; bottom:1.4cqw; width:56%; height:2.6cqw;
    transform:translateX(-50%); z-index:-1; filter:blur(.5cqw);
    background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), transparent)}
  .specs{list-style:none; margin:2cqw 0 0; padding:0; display:grid; gap:.95cqw}
  .specs li{display:grid; grid-template-columns:auto 1fr; gap:1.1cqw; align-items:baseline;
    font-family:var(--mono); font-size:1.12cqw; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3)}
  .specs b{color:var(--ink); font-weight:500; letter-spacing:.06em}
  .specs i{width:1.5cqw; height:1px; background:var(--c); display:block; transform:translateY(-.35cqw)}

  /* ============ 4 · il dato non esce ============ */
  .schema{width:100%; height:auto; max-height:34cqw}
  .schema .box{fill:none; stroke:#2A313D; stroke-width:1.2}
  .schema .fill{fill:#11141A; stroke:#2A313D; stroke-width:1.2}
  .schema .lbl{font-family:var(--mono); font-size:7px; letter-spacing:1.7px; fill:#69707E}
  .schema .lbl-c{font-family:var(--mono); font-size:7.4px; letter-spacing:1.7px; fill:var(--c)}
  .schema .acc{fill:var(--c)}
  .schema .link{fill:none; stroke:var(--c); stroke-width:1.5; stroke-dasharray:4 4}
  .schema .cross{stroke:#E4573D; stroke-width:2; stroke-linecap:round; fill:none}
  .schema .dead{fill:none; stroke:#4A505C; stroke-width:1.3; stroke-dasharray:3 4}
  .stamp{display:inline-flex; align-items:center; gap:.8cqw; font-family:var(--mono);
    font-size:1.15cqw; letter-spacing:.18em; text-transform:uppercase; color:var(--c);
    border:1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius:99px;
    padding:.55cqw 1.2cqw; margin-top:1.8cqw;
    background:color-mix(in srgb, var(--c) 8%, transparent)}

  /* ============ 5 · quattro colleghi ============ */
  .gamma{position:relative; height:31cqw; display:grid; place-items:center}
  .gamma img{position:absolute; max-width:100%; max-height:100%; object-fit:contain; opacity:0;
    filter:drop-shadow(0 2cqw 2.6cqw rgba(0,0,0,.6))}
  .gnome{font-size:3.4cqw; font-weight:800; letter-spacing:-.02em; color:var(--c); line-height:1}
  .grole{font-family:var(--mono); font-size:1.15cqw; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-3); margin-top:.7cqw}
  .gsw{display:flex; gap:.7cqw; margin-top:2cqw}
  .gsw i{width:1.5cqw; height:.28cqw; border-radius:99px; background:#242A34; display:block}
  .gsw i.on{background:var(--c)}

  /* ============ 6 · si monta ============ */
  .duo.rovescio{grid-template-columns:1.02fr 1fr}
  .duo.rovescio .testo{order:2}
  .duo.rovescio .figura{order:1}
  .monta{position:relative; height:33cqw; display:grid; place-items:center}
  .monta img{position:absolute; max-width:100%; max-height:100%; object-fit:contain; opacity:0}
  .pezzo{font-family:var(--mono); font-size:1.15cqw; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3); text-align:center; margin-top:1cqw}
  .pezzo b{color:var(--c); font-weight:500}

  /* ============ 7 · lo fa davvero ============ */
  .prova{display:grid; grid-template-columns:1.18fr .82fr; gap:2.6cqw; align-items:center; width:100%}
  .schermo{position:relative; height:36cqw; display:grid; place-items:center}
  .schermo img{max-width:100%; max-height:100%; object-fit:contain;
    transform:scale(1.3) translate(-5%, 7%); transform-origin:50% 40%;
    filter:drop-shadow(0 2cqw 2.6cqw rgba(0,0,0,.6))}
  .bolla{background:var(--panel); border:1px solid var(--edge); border-left:.28cqw solid var(--c);
    border-radius:0 .45cqw .45cqw 0; padding:1.4cqw 1.6cqw}
  .bolla .tag{font-family:var(--mono); font-size:.9cqw; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3); display:block; margin-bottom:.8cqw}
  .bolla p{margin:0; font-size:1.35cqw; line-height:1.5; color:var(--ink-2)}
  .bolla p + p{margin-top:.7cqw}
  .bolla b{color:var(--ink); font-weight:600}
  .bolla .fonte{font-family:var(--mono); font-size:1cqw; color:var(--c); letter-spacing:.06em}
  .masc{width:9cqw; height:10.8cqw; margin-top:1.4cqw}

  /* ============ 8 · chiusa ============ */
  .end .wmrow{display:flex; align-items:center; gap:2cqw; justify-content:center}
  .end .shard{width:4.9cqw; height:7.2cqw}
  .end .wm{font-size:5cqw}
  .dominio{font-family:var(--mono); font-size:1.9cqw; letter-spacing:.28em; text-transform:uppercase;
    color:var(--c); margin:2.4cqw 0 0}
  .endnote{font-size:1.35cqw; color:var(--ink-3); margin:1cqw 0 0}
  .endmasc{position:absolute; right:7cqw; bottom:6cqw; width:12.5cqw; height:15cqw}

  /* ---------- comandi (fuori dalla pellicola) ---------- */
  .rail{display:flex; align-items:center; gap:12px; height:34px}
  .btn{flex:none; width:34px; height:34px; border-radius:4px; background:var(--panel);
    border:1px solid var(--edge); color:var(--ink-2); cursor:pointer; display:grid; place-items:center;
    padding:0; transition:border-color .2s, color .2s}
  .btn:hover{color:var(--ink); border-color:#39414F}
  .btn svg{width:14px; height:14px; fill:currentColor}
  .track{flex:1; position:relative; height:34px; cursor:pointer; display:flex; align-items:center}
  .track .bar{position:absolute; left:0; right:0; height:3px; border-radius:2px; background:#20262F}
  .track .done{position:absolute; left:0; height:3px; border-radius:2px; background:var(--c); width:0}
  .track .tick{position:absolute; top:50%; width:1px; height:9px; background:var(--ground);
    transform:translateY(-50%)}
  .tc{flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-2);
    min-width:76px; text-align:right}
  .cap{flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-2); min-width:150px}
  :focus-visible{outline:2px solid var(--c); outline-offset:2px}

  /* la riga sotto: dice dove sei e cosa fare dopo. Sparisce dentro la cornice della home */
  .sotto{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
    font-size:12.5px; color:var(--ink-2); line-height:1.5}
  .sotto .marchio{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-2); text-decoration:none}
  .sotto .marchio:hover{color:var(--ink)}
  .sotto .dett{flex:1 1 220px; min-width:0}
  .sotto .cta{flex:none; color:var(--c); text-decoration:none; font-weight:600; font-size:12.5px;
    border:1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius:99px; padding:7px 15px;
    transition:background .2s}
  .sotto .cta:hover{background:color-mix(in srgb, var(--c) 12%, transparent)}
  .dentro .sotto,.solofilm .sotto{display:none}

  /* modo pellicola pura: serve a girarne il filmato */
  body.solofilm{padding:0; background:var(--film)}
  .solofilm .film{width:100vw; gap:0}
  .solofilm .rail{display:none}
  .solofilm .stage{border:0; border-radius:0; box-shadow:none}

  @media (max-width:620px){
    .rail{flex-wrap:wrap; height:auto}
    .cap{order:3; width:100%; min-width:0; text-align:center; padding-top:2px}
  }