/* Imagina · terminale 3270 — un solo tema scuro per scelta: fosfori verdi su nero. */

@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Tiny5";src:url(../fonts/tiny5-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(../fonts/press-start-2p-imagina.woff) format("woff");font-weight:400;font-style:normal;font-display:block}

:root{
  --bg:#000;
  --green:#00C62E;
  --green-2:#1FA347;
  --line:#0E5A1E;
  --white:#F2FFF5;
  --cyan:#00FFFE;
  --yellow:#F5E663;
  --blue:#2F6FD6;
  --panel:#020A04;
  --red:#FF5C5C;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pixel:"Tiny5","DM Mono",ui-monospace,monospace;
  --gutter:32px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--green);font-family:var(--mono);font-size:18px;line-height:1.55;text-shadow:0 0 5px rgba(0,198,46,.35);overflow-x:hidden}
a{color:var(--green)}
a:hover{color:var(--white)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
img,video{max-width:100%}
button,input,textarea{font:inherit}
[hidden]{display:none !important}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--green);color:#000;text-shadow:none;padding:8px 14px;text-decoration:none}
.skip:focus{top:12px}

.cur{animation:blink 1.06s steps(1) infinite}
.blink{animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── Intro a tutto schermo ───────────────────────────────────────────── */
.intro{position:fixed;inset:0;z-index:100;background:#000;cursor:pointer;opacity:1;transition:opacity .45s ease}
.intro.out{opacity:0;pointer-events:none}
.intro canvas{position:absolute;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(0,198,46,.45))}
.intro-bar{position:absolute;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 44px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));cursor:default}
.lang-btn{min-width:8ch;min-height:48px;padding:8px 20px;background:#000;border:2px solid var(--green);color:var(--green);font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:.1em;cursor:pointer;text-shadow:0 0 5px rgba(0,198,46,.35)}
.lang-btn.sel{background:var(--green);color:#000;text-shadow:none}
.lang-btn:focus{outline:none}
.lang-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.lang-btn.sel:focus-visible{outline:none}
.intro-hint{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--white);font-size:16px;letter-spacing:.05em;text-align:center;text-shadow:0 0 6px rgba(0,198,46,.5)}
.intro-hint .keys{color:var(--green);font-size:14px}
.intro-hint .touch{display:none}
@media (pointer:coarse){.intro-hint .keys{display:none}}
html.intro-on body{overflow:hidden}

/* ── Schermo ─────────────────────────────────────────────────────────── */
.screen{position:relative;min-height:100vh;overflow:hidden}
.city{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.city pre{position:absolute;left:0;top:0;margin:0;color:var(--cyan);opacity:.15;font-family:var(--mono);font-size:10px;line-height:1;white-space:pre;text-shadow:none}
.screen > *:not(.scan){position:relative;z-index:1}
.scan{position:absolute;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.3) 3px)}
.banner{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:11/2;filter:drop-shadow(0 0 3px rgba(0,198,46,.45))}
.wrap{max-width:1320px;margin:0 auto;padding:8px var(--gutter) 24px;display:flex;flex-direction:column;gap:20px}
.payoff{margin:0 0 8px;text-align:center;color:var(--white);font-size:20px;text-wrap:balance}

.menu{display:flex;flex-wrap:wrap;gap:0 36px;border-bottom:2px solid var(--blue)}
.menu a{color:var(--white);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.menu a:hover,.menu a:focus-visible{background:var(--white);color:#000;text-shadow:none;outline:none}
.menu a[aria-current="page"]{color:var(--cyan)}
.menu .lang{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--line)}
.menu .lang a{padding:0 8px}
.menu .lang a[aria-current="true"]{color:#000;background:var(--green);text-shadow:none}
.menu .lang a[aria-current="true"]:hover{background:var(--green)}

.page{display:flex;flex-direction:column;gap:20px}
.page:focus{outline:none}
/* I titoli ricevono il fuoco solo per i lettori di schermo quando si cambia pagina: niente riquadro */
h1[tabindex="-1"]:focus{outline:none}

.title{margin:24px 0 0;font-family:"DM Mono",ui-monospace,monospace;font-weight:700;font-size:64px;line-height:1.15;letter-spacing:1px;color:var(--green);text-shadow:2.5px 2.5px 0 #000,4px 4px 0 var(--green-2),6.5px 6.5px 0 #000,8px 8px 0 var(--green-2);overflow-wrap:anywhere}
.lead{margin:0;color:var(--white);font-size:20px}
.msg{margin:0;color:var(--white)}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

/* ── Home: Primary Option Menu ───────────────────────────────────────── */
.pom{margin:0;text-align:center;color:var(--cyan);font-size:18px;font-weight:400}
.cols{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-start}
.opts{flex:1 1 560px;min-width:0;display:flex;flex-direction:column}
.opt{display:grid;grid-template-columns:2ch 15ch minmax(0,1fr);column-gap:20px;align-items:baseline;min-height:44px;padding:4px 8px;text-decoration:none}
.opt .n{color:var(--white)}
.opt .l{color:var(--cyan)}
.opt .d{color:var(--green)}
.opt:hover,.opt:focus-visible{background:var(--green);outline:none}
.opt:hover span,.opt:focus-visible span{color:#000 !important;text-shadow:none}
.sheet{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.kv{display:grid;grid-template-columns:24ch minmax(0,1fr);column-gap:10px;align-items:baseline}
.kv .k{color:var(--cyan)}
.kv .v{color:var(--white)}
.badge{background:var(--green);color:#000;text-shadow:none;padding:0 6px}
.hint{margin:12px 0 0;text-align:center;color:var(--green)}

/* ── Curriculum ──────────────────────────────────────────────────────── */
.intro-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px 56px}
.intro-text{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.portrait{flex:0 0 auto;display:block;width:150px;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0 11px 11px 0;border:2px solid var(--green);box-shadow:4px 4px 0 #000,6px 6px 0 var(--green-2),9px 9px 0 #000,11px 11px 0 var(--green-2)}
.era{margin:20px 0 0;color:var(--white);border-bottom:2px solid var(--line);padding-bottom:6px}
.ds{display:flex;flex-direction:column;gap:8px}
.ds-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px}
.ds-h h2,.ds-h h3,.ds>h2,.ds>h3{margin:0;font-size:18px;font-weight:400;color:var(--cyan)}
.ds-h span{color:var(--white)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.list li{display:grid;grid-template-columns:3ch minmax(0,1fr);align-items:baseline}
.skills{display:flex;flex-wrap:wrap;gap:24px 56px}
.skills .ds{flex:1 1 480px;min-width:0}
.skills .list{gap:0}
.skills .list li{padding:6px 0;border-bottom:1px solid var(--line)}
.skills .list li::before{content:">";color:var(--cyan)}
.skills .list li{grid-template-columns:3ch minmax(0,1fr)}

/* ── Righe a tre colonne (step) ──────────────────────────────────────── */
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;padding:12px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows .c1{flex:0 0 3ch;color:var(--white)}
.rows .c2{flex:1 1 260px;min-width:0;color:var(--cyan)}
.rows .c3{flex:1 1 640px;min-width:0}
.tech{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline}
.tech .k{color:var(--cyan)}
.tech .v{color:var(--white)}

/* ── Video ───────────────────────────────────────────────────────────── */
.player{margin:0;display:flex;flex-direction:column;gap:10px}
.screenbox{position:relative;width:100%;aspect-ratio:16/9;border:2px solid var(--green);background:var(--panel);overflow:hidden}
.screenbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.play{position:absolute;inset:0;width:100%;height:100%;display:flex;text-decoration:none;align-items:center;justify-content:center;background:none;border:0;color:var(--green);cursor:pointer;padding:0}
.play:hover .pl,.play:focus-visible .pl{color:var(--white)}
.play .tl{position:absolute;top:12px;left:16px;color:var(--cyan);font-size:16px}
.play .br{position:absolute;bottom:12px;right:16px;color:var(--cyan);font-size:16px}
.play .bl{position:absolute;bottom:12px;left:16px;right:16px;color:var(--white);font-size:14px;text-align:left;max-width:calc(100% - 150px)}
.play .mid{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:24px}
.play svg{width:110px;height:110px}
.pl{font-family:var(--pixel);font-weight:700;font-size:40px;line-height:1.15}
.player figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;font-size:16px}
.player figcaption span{color:var(--white)}
.player figcaption a{overflow-wrap:anywhere}
.sec-h{margin:12px 0 0;color:var(--white);font-size:20px;border-bottom:2px solid var(--line);padding-bottom:6px;font-weight:400}

/* ── Contatti ────────────────────────────────────────────────────────── */
.two{display:flex;flex-wrap:wrap;gap:32px 56px}
.channels{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:4px}
.channels .h{margin:0 0 8px;color:var(--white);font-size:18px;font-weight:400}
.ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:44px}
.ch .k{color:var(--cyan);width:12ch}
.ch .a{color:var(--cyan)}
.ch .v{color:var(--white);min-width:0;overflow-wrap:anywhere}
/* Riga intera cliccabile, evidenziata come una selezione del terminale */
a.ch{text-decoration:none;align-self:flex-start;padding:0 6px;margin-left:-6px}
a.ch .v{text-decoration:underline;text-underline-offset:3px}
a.ch:hover,a.ch:focus-visible{background:var(--white);outline:none;text-shadow:none}
a.ch:hover *,a.ch:focus-visible *{color:#000}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;background:var(--green);color:#000;text-decoration:none;text-shadow:none;padding:22px 26px;font-weight:500}
.cta:hover,.cta:focus-visible{background:var(--white);color:#000}
.cta .big{font-family:var(--pixel);font-weight:700;font-size:29px;line-height:1.2}
.cta.small{margin-top:20px;padding:18px 22px}
.form{flex:1 1 520px;min-width:0;border:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:16px;margin:0;background:var(--bg)}
.ts:empty{display:none}
.form .h{margin:0;color:var(--white);font-size:18px;font-weight:400}
.field{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--cyan)}
.field .lab{width:10ch}
.field input{flex:1 1 220px;min-width:0;background:transparent;border:0;border-bottom:2px solid var(--green);color:var(--white);padding:6px 2px;font-size:18px;border-radius:0}
.field.col{flex-direction:column;align-items:stretch;gap:8px}
.field.col .lab{width:auto}
.field textarea{background:transparent;border:1px solid var(--line);border-bottom:2px solid var(--green);color:var(--white);padding:10px;font-size:18px;resize:vertical;min-height:140px;border-radius:0}
.field input:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:2px}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;color:var(--white);font-size:16px}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--green)}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{align-self:flex-start;min-height:48px;background:var(--green);color:#000;border:0;font-weight:500;font-size:18px;padding:12px 24px;cursor:pointer;text-shadow:none}
.send:hover,.send:focus-visible{background:var(--white)}
.send[disabled]{opacity:.6;cursor:wait}

/* ── Privacy ─────────────────────────────────────────────────────────── */
.legal{display:flex;flex-direction:column;gap:14px;color:var(--white);max-width:900px}
.legal h2{margin:12px 0 0;font-size:18px;font-weight:400;color:var(--cyan)}
.legal p,.legal ul{margin:0}
.legal ul{padding-left:3ch}

/* ── Piede: tasti funzione e riga di stato ───────────────────────────── */
.fkeys{display:flex;flex-wrap:wrap;gap:0 28px;border-top:1px solid var(--line);padding-top:6px}
.fkeys a{color:var(--yellow);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.fkeys a span{color:var(--cyan)}
.fkeys a:hover span,.fkeys a:focus-visible span{color:var(--white)}
.status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;border-top:2px solid var(--line);padding-top:8px;font-size:16px}
.status .l{display:flex;gap:14px}
.status .l b{font-weight:400;background:var(--green);color:#000;text-shadow:none;padding:0 8px}
.status .l i{font-style:normal;color:var(--cyan)}

/* ── Telefono ────────────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--gutter:16px}
  body{font-size:17px}
  .title{font-size:44px}
  .opt{grid-template-columns:2ch minmax(0,1fr)}
  .opt .d{grid-column:2}
  .kv{grid-template-columns:minmax(0,1fr)}
  .menu{gap:0 18px}
  .pl{font-size:26px}
  .play svg{width:72px;height:72px}
  .play .bl{display:none}
  .cta .big{font-size:24px}
  .form{padding:18px 16px}
  /* Sul telefono i campi vanno a capo: niente frecce, etichetta sopra e campo sotto */
  .ch .a,.field .a{display:none}
  .ch{flex-direction:column;align-items:flex-start;gap:2px;padding-top:6px;padding-bottom:6px}
  .field{flex-direction:column;align-items:stretch;gap:4px}
  .field .lab{width:auto}
  .field input{flex:0 0 auto;width:100%}
  .intro-hint{order:-1;flex-basis:100%;font-size:14px}
  .intro-bar{gap:12px 20px}
}

/* Senza JavaScript: tutte le sezioni visibili una sotto l'altra */
.no-js .page[hidden]{display:flex !important}

@media (prefers-reduced-motion:reduce){
  .cur,.blink{animation:none}
  .intro{transition:none}
}