/* ============================================================
   GATE1 — SYSTEM EDITION (skin ufficiale)
   Caricato sopra style.css su TUTTE le pagine.
   Tipografia industriale, HUD, accenti acidi, banda acciaio.
   NOTA: la griglia lavori (home/archivio) resta quella di base.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --line-2:rgba(255,255,255,.13);
  --line:rgba(141,255,205,.3);
  --mono:"IBM Plex Mono",monospace;
  --acid:#E6FF3F;                 /* giallo acido — accento secondario */
  --steel-d:#2B2B31;              /* acciaio scuro — banda invertita */
  --steel-d2:#232328;
}

/* ---------- tipografia industriale, peso medio ---------- */
h1,h2,h3{font-family:"Archivo",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:0;line-height:1.04}
.hero h1{font-weight:600;font-size:clamp(38px,6.6vw,96px);letter-spacing:-.01em;line-height:.96}
.hero h1 em{font-weight:600;color:var(--green)}
.sec-head h2{font-size:clamp(28px,4.4vw,58px)}
.hero p.lead{font-size:clamp(14px,1.3vw,16.5px);color:#aab4ae;max-width:560px}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.3em}

/* aberrazione cromatica periodica SOLO sui titoli */
@keyframes chroma{
  0%,93%,100%{text-shadow:none;transform:none}
  94%{text-shadow:-3px 0 rgba(141,255,205,.85),3px 0 rgba(230,255,63,.7)}
  95%{text-shadow:3px 0 rgba(141,255,205,.85),-3px 0 rgba(208,207,236,.85);transform:translateX(2px)}
  96%{text-shadow:none;transform:none}
}
.hero h1,.sec-head h2{animation:chroma 8s linear infinite}

/* ---------- HUD viewport ---------- */
.bg-fx::before{content:"";position:absolute;inset:14px;pointer-events:none;z-index:5;
  background:
    linear-gradient(var(--green),var(--green)) 0 0/26px 1px,linear-gradient(var(--green),var(--green)) 0 0/1px 26px,
    linear-gradient(var(--green),var(--green)) 100% 0/26px 1px,linear-gradient(var(--green),var(--green)) 100% 0/1px 26px,
    linear-gradient(var(--green),var(--green)) 0 100%/26px 1px,linear-gradient(var(--green),var(--green)) 0 100%/1px 26px,
    linear-gradient(var(--green),var(--green)) 100% 100%/26px 1px,linear-gradient(var(--green),var(--green)) 100% 100%/1px 26px;
  background-repeat:no-repeat;opacity:.5}
.bg-fx::after{content:"GATE1 · 45.4642°N 9.1900°E · MILANO · REAL-TIME VISUAL SYSTEMS · SYS.ONLINE";
  position:absolute;bottom:19px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.34em;color:rgba(255,255,255,.22);pointer-events:none;z-index:5;white-space:nowrap}
.bg-grid{opacity:.4;background-size:64px 64px}
.bg-scan{opacity:.6}
.bg-glow::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 26px,rgba(141,255,205,.026) 26px 27px)}
/* grana pellicola, leggerissima */
body::after{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.9"/></svg>')}

/* ---------- HERO: duotone menta, parola fantasma, slash, dati ---------- */
.hero{align-items:center}
.hero-inner{max-width:820px}
/* video hero a colori naturali (niente duotone) */
.hero::after{content:"STUDIO";position:absolute;right:-12px;bottom:4px;z-index:2;pointer-events:none;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(90px,15vw,230px);letter-spacing:-.05em;line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(141,255,205,.16)}
.hero-video::after{content:"";position:absolute;top:0;right:0;width:48%;height:64%;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 38px,rgba(141,255,205,.12) 38px 42px,transparent 42px 84px,rgba(230,255,63,.1) 84px 88px);
  mask-image:linear-gradient(225deg,#000,transparent 72%)}
.hero .eyebrow{color:var(--lilac)}
.hero .eyebrow::before{background:var(--lilac)}
.hero-foot .wrap{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.26em;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.hero-foot .wrap::after{content:"";width:84px;height:16px;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px,#fff 3px 5px,transparent 5px 6px,#fff 6px 7px,transparent 7px 10px);opacity:.35}
.hero-scrim{background:radial-gradient(120% 90% at 70% 20%,transparent,rgba(0,0,0,.5) 70%),linear-gradient(180deg,rgba(0,0,0,.6) 0,transparent 22% 42%,rgba(0,0,0,.88) 86%,var(--bg) 100%)}

/* ---------- sezioni: etichette SYS + numerali fantasma ---------- */
main{counter-reset:sys}
main>section{counter-increment:sys;position:relative}
.sec-head{border-top:1px solid var(--line-2);padding-top:26px;position:relative}
.sec-head::before{content:"SYS.0" counter(sys) " ⁄⁄ OUTPUT";position:absolute;right:0;top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--acid)}
.sec-head::after{content:"";position:absolute;left:0;top:-1px;width:54px;height:3px;background:var(--green)}
.sec-head p{font-size:13.5px;color:var(--muted)}
#work::before,#instagram::before{content:counter(sys,decimal-leading-zero);position:absolute;right:2vw;top:-30px;z-index:0;pointer-events:none;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(120px,18vw,300px);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07)}
@keyframes ghostdrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#work::before,#instagram::before{animation:ghostdrift 11s ease-in-out infinite}
/* nastri segnaletici diagonali come divisori */
#work::after,#instagram::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:7px;
  background:repeating-linear-gradient(45deg,rgba(141,255,205,.4) 0 13px,transparent 13px 26px);opacity:.3}

/* ---------- bottoni / nav / marquee ---------- */
.btn{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px;padding:14px 26px;--cut:12px;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .45s ease}
.btn:hover::before{left:120%}
.btn-ghost{border-color:rgba(255,255,255,.25)}
.nav-links a{font-family:var(--mono);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em}
.marquee{border-top:1px solid rgba(230,255,63,.4);border-bottom:1px solid rgba(230,255,63,.4);margin:26px 0}
.marquee span{font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;color:#9aa39d}
.marquee span::after{border-radius:0;background:var(--lilac);opacity:.85}

/* ---------- griglia lavori: SOLO tipografia (layout invariato) ---------- */
.work .cat{font-family:var(--mono);font-weight:500;font-size:8.5px;letter-spacing:.22em}
.work .client{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--lilac)}
.work .meta h3{font-weight:600}
.work .arrow{border-radius:0}
.filters button{font-family:var(--mono);letter-spacing:.12em}

/* ---------- HIGHLIGHTS card ---------- */
.hl{--cut:18px;border-color:var(--line-2)}
.hl-main{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}
.hl-num{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;border-radius:0}
.hl-body{border-top:2px solid var(--green);position:relative}
.hl-body::after{content:"REC ●";position:absolute;right:18px;top:14px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--acid);opacity:.75}
.hl-body .cat{font-family:var(--mono);font-weight:500;letter-spacing:.24em}
.hl-body h3{font-size:18px}
.hl-client{font-family:var(--mono);font-weight:500;letter-spacing:.1em;color:var(--lilac)}
.hl-txt{text-transform:none;font-size:13px;color:#b8c2bb}
.hl-cta{font-family:var(--mono);font-weight:600;letter-spacing:.2em}

/* ---------- CAPABILITIES: fondo del sito, solo tipografia della skin ---------- */
#capabilities .cap .num{font-family:var(--mono);font-weight:600}
#capabilities .cap .num::after{content:"";display:block;width:26px;height:2px;background:var(--acid);margin-top:10px}
#capabilities .cap h3{font-size:16px;margin:16px 0 10px}
#capabilities .cap p{font-size:12.5px;text-transform:none}
#capabilities .cap .tools{font-family:var(--mono);font-weight:500;font-size:8.5px;letter-spacing:.14em}
#capabilities .cap::after{display:none}

/* ---------- clienti / press / instagram ---------- */
.logo-wall,.clients-wall,.logo-cell,.cw,.pcard,.lane{border-color:var(--line-2)}
.pcard-top span,.lane-k{font-family:var(--mono);font-weight:600;letter-spacing:.18em}
.pcard p,.lane p{text-transform:none}
.pcard .read,.soc{font-family:var(--mono);font-weight:500;letter-spacing:.16em}
/* tile Instagram: stile di base del sito (dritte, coi tagli d'angolo originali) */
.iglabel{font-family:var(--mono);font-weight:500;font-size:8px}
.igtype{border-radius:0}

/* ---------- contatti + footer ---------- */
.contact h2{font-size:clamp(30px,5.4vw,68px)}
.contact h2 em{color:var(--green)}
.lane.on .lane-k::after{color:var(--acid)}
.foot{font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.foot::after{content:"⁄⁄ EOF";color:var(--lilac);opacity:.6;font-size:9px;letter-spacing:.3em}
footer{position:relative;overflow:hidden}
footer::after{content:"GATE1";position:absolute;right:-8px;bottom:-28px;pointer-events:none;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(80px,11vw,170px);letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(141,255,205,.12)}

/* ============================================================
   PAGINA PROGETTO
   ============================================================ */
.phero-frame{--cut:22px;border-color:rgba(255,255,255,.2)}
.phero-frame::after{content:"";position:absolute;inset:10px;pointer-events:none;z-index:4;
  background:
    linear-gradient(var(--acid),var(--acid)) 0 0/20px 1px,linear-gradient(var(--acid),var(--acid)) 0 0/1px 20px,
    linear-gradient(var(--acid),var(--acid)) 100% 0/20px 1px,linear-gradient(var(--acid),var(--acid)) 100% 0/1px 20px,
    linear-gradient(var(--acid),var(--acid)) 0 100%/20px 1px,linear-gradient(var(--acid),var(--acid)) 0 100%/1px 20px,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/20px 1px,linear-gradient(var(--acid),var(--acid)) 100% 100%/1px 20px;
  background-repeat:no-repeat;opacity:.65}
.phero-in h1{font-size:clamp(24px,3.4vw,52px)}
.phero-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.phero-sub .pill{color:var(--acid)}
.back{font-family:var(--mono);letter-spacing:.16em}
.metabar{border-color:rgba(255,255,255,.16)}
.metabar .m{border-color:rgba(255,255,255,.16)}
.metabar .k{font-family:var(--mono);font-weight:600;color:var(--acid);letter-spacing:.2em}
.metabar .v{font-family:"Archivo",sans-serif;font-weight:600;font-size:14px}

/* testi: scheda tecnica — etichetta a colonna, corpo accanto, righe alternate */
.b-text{padding:22px 0}
.b-text .inner{max-width:none;display:grid;grid-template-columns:250px 1fr;gap:18px 56px;align-items:start;border-top:1px solid var(--line-2);padding-top:26px}
.b-text h2{grid-column:1;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.26em;color:var(--green);margin:4px 0 0;line-height:1.6}
.b-text h2::before{content:"⁄⁄ ";color:var(--acid)}
.b-text p{grid-column:2;font-size:14px;line-height:1.75;color:#c3ccc6;max-width:760px;margin:0 0 14px;text-transform:none}
main section.b-text:nth-of-type(even) .inner{grid-template-columns:1fr 250px}
main section.b-text:nth-of-type(even) h2{grid-column:2;grid-row:1;text-align:right}
main section.b-text:nth-of-type(even) p{grid-column:1;justify-self:end;text-align:left}

/* quote = divisore di capitolo a bandiera, alternato */
.b-quote{padding:34px 0}
.b-quote .q{border:0;background:none;border-radius:0;max-width:none;margin:0;padding:0;
  display:flex;align-items:center;gap:28px;justify-content:flex-start;text-align:left;
  font-family:"Archivo",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(12px,1.25vw,16px);color:var(--green);line-height:1.5}
.b-quote .q::before{content:"⁄⁄";color:var(--acid);font-size:11px}
.b-quote .q::after{content:"";height:1px;flex:1;min-width:60px;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}
main section.b-quote:nth-of-type(even) .q{flex-direction:row-reverse;text-align:right}
main section.b-quote:nth-of-type(even) .q::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22))}

/* etichette di sezione progetto */
.sec-lbl{font-family:var(--mono);font-weight:600;letter-spacing:.26em;color:var(--green)}
.sec-lbl::before{background:var(--acid)}
.chips span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;border-color:rgba(255,255,255,.2)}
.chips span:hover{border-color:var(--acid);color:var(--acid)}
.credits{border-color:rgba(255,255,255,.16)}
.credits .c{border-color:rgba(255,255,255,.16)}
.credits .c .k{font-family:var(--mono);color:var(--lilac);letter-spacing:.18em}
.press-card .src{font-family:var(--mono);letter-spacing:.16em}
.press-card h3{text-transform:none;font-weight:400;font-family:var(--body)}
.b-image figure,.b-duo .cell,.b-gal .g{border-color:rgba(255,255,255,.16)}
/* next projects: stile originale del sito (la tipografia globale viene riportata alla base) */
.mw h3{font-family:var(--disp);font-weight:300;font-size:18px;text-transform:none;letter-spacing:-.01em}

/* firma GATE1 a chiusura del progetto */
.psign{padding:54px 0 16px}
.psign-in{display:flex;align-items:center;justify-content:center;gap:36px}
.psign-in::before,.psign-in::after{content:"";height:1px;flex:1;max-width:200px}
.psign-in::before{background:linear-gradient(90deg,transparent,rgba(141,255,205,.35))}
.psign-in::after{background:linear-gradient(90deg,rgba(141,255,205,.35),transparent)}
.psign .logo{height:46px;width:auto;fill:var(--ink);opacity:.92;filter:drop-shadow(0 0 16px rgba(141,255,205,.35));transition:fill .4s,filter .4s}
.psign:hover .logo{fill:var(--green);filter:drop-shadow(0 0 22px rgba(141,255,205,.55))}
@media(max-width:560px){.psign .logo{height:34px}.psign-in{gap:20px}}

/* ============================================================
   binari laterali + puntatore + flash titoli (system.js)
   ============================================================ */
.sysrail{position:fixed;top:0;bottom:0;z-index:120;pointer-events:none}
.sysrail-l{left:10px}.sysrail-r{right:10px}
.sysrail i{position:absolute;width:6px;height:1px;background:rgba(255,255,255,.12);left:0;transform-origin:left center}
.sysrail-r i{left:auto;right:0;transform-origin:right center}
@keyframes mintin{0%{color:var(--green);text-shadow:0 0 22px rgba(141,255,205,.55)}100%{color:inherit;text-shadow:none}}
.sysflash{animation:mintin .85s ease both}
/* puntatore: crocina menta + puntino giallo. Il cursore nativo si spegne
   solo quando il JS ha creato la crocina (classe .sysui sul body) */
@media(pointer:fine) and (min-width:781px){body.sysui,body.sysui *,body.sysui *::before,body.sysui *::after{cursor:none!important}}
.sysring{position:fixed;left:0;top:0;z-index:301;pointer-events:none;width:14px;height:14px;
  background:
    linear-gradient(var(--green),var(--green)) 50% 0/1px 5px,
    linear-gradient(var(--green),var(--green)) 50% 100%/1px 5px,
    linear-gradient(var(--green),var(--green)) 0 50%/5px 1px,
    linear-gradient(var(--green),var(--green)) 100% 50%/5px 1px;
  background-repeat:no-repeat}
/* sui cliccabili la croce muta in rombo (l'equivalente della "manina") */
.sysring::before{content:"";position:absolute;inset:1px;border:1px solid var(--green);
  transform:rotate(45deg) scale(.45);opacity:0;transition:opacity .18s,transform .18s}
.sysring::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--acid);border-radius:50%;transition:width .18s,height .18s,margin .18s}
body.sys-hot .sysring{background:none}
body.sys-hot .sysring::before{opacity:1;transform:rotate(45deg) scale(1)}
body.sys-hot .sysring::after{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.systc{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.55)}
.systc i{font-style:normal;color:var(--acid);animation:recblink 1.2s steps(2) infinite}
@keyframes recblink{50%{opacity:.25}}

/* ---------- loghi clienti: grandi dentro le celle ---------- */
.logo-cell{min-height:130px;padding:14px}
.logo-cell img{max-width:51%;max-height:50px;width:auto;height:auto}

/* ---------- mobile: header compatto, loghi 3 per riga, media in coppia ---------- */
@media(max-width:980px){
  /* le coppie di immagini dei progetti restano affiancate anche su mobile */
  .b-duo{grid-template-columns:1fr 1fr;gap:10px}
}
@media(max-width:700px){
  /* gallery: immagini a coppie quadrate; le panoramiche restano a tutta riga */
  .b-gal .grow{flex-wrap:wrap;gap:8px}
  .b-gal .g,.b-gal .grow-c .g{flex:0 0 calc(50% - 4px);max-width:calc(50% - 4px);aspect-ratio:1/1}
  .b-gal .g.gw,.b-gal .grow-c .g.gw{flex:0 0 100%;max-width:100%;aspect-ratio:var(--ar)}
}
@media(max-width:640px){
  /* header più sottile */
  header .nav{height:52px}
  .brand .logo{height:21px}
  .lang-dots{width:32px;height:27px;font-size:15px}
}
@media(max-width:560px){
  /* loghi clienti: 3 per riga, ingombro ridotto */
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .logo-cell{min-height:76px;padding:9px}
  .logo-cell img{max-height:26px;max-width:50%}
  /* instagram: tile più piccole, ~4 visibili per riga */
  .ig-wall .ig{width:23vw}
}

/* ---------- scrollbar in stile (Chrome/Edge/Safari + Firefox) ---------- */
html{scrollbar-color:rgba(141,255,205,.4) #070908;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#070908}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(141,255,205,.55),rgba(141,255,205,.22));border:2px solid #070908;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--green);border-width:1px}
::-webkit-scrollbar-thumb:active{background:var(--acid)}
::-webkit-scrollbar-corner{background:#070908}

/* ---------- responsive + accessibilità ---------- */
@media(max-width:980px){
  .b-text .inner,main section.b-text:nth-of-type(even) .inner{grid-template-columns:1fr;gap:10px}
  .b-text h2,main section.b-text:nth-of-type(even) h2{grid-column:1;text-align:left}
  .b-text p,main section.b-text:nth-of-type(even) p{grid-column:1;justify-self:start}
}
@media(max-width:780px){
  .marquee{margin:18px 0}
  footer::after{display:none}
  .sysrail,.sysring{display:none}
  .bg-fx::after,.hero::after,#work::before,#instagram::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero h1,.sec-head h2{animation:none}
  #work::before,#instagram::before{animation:none}
  .systc i{animation:none}
  .sysflash{animation:none}
}