@import url('fonts.css');

:root{
  --bg:#1c1d17;
  --panel:#33352b;
  --panel-raised:#3d3f33;
  --panel-hi:#4a4c3d;
  --border:#6b6550;
  --border-soft:#4a4636;
  --text:#e6e0c8;
  --text-dim:#b3ac93;
  --text-faint:#847d64;
  --ink:#221d13;
  --amber:#d9a441;
  --amber-dim:#8a6b2e;
  --green:#6b8f4e;
  --red:#9c3b30;
  --phos-main:#f0a83c;
  --phos-red:#ff5c4d;
  --phos-green:#7fe08a;
  --screen-bg:#0d0904;
  --surface:#7c8768;
  --surface-dk:#616b4f;
  --surface-lt:#93a077;
  --mono:'PT Mono',ui-monospace,monospace;
  --disp:'PT Sans Narrow',sans-serif;
  --body:'PT Sans',sans-serif;
  --type:'Special Elite',var(--mono);
  --radius:6px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(18,20,13,.28) 0%, rgba(10,11,7,.46) 55%, rgba(6,7,4,.64) 100%),
    linear-gradient(155deg, var(--surface-lt) 0%, var(--surface) 45%, var(--surface-dk) 100%);
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--amber);color:#1a1a12}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- header / nav ---------- */
.site-header{
  background:linear-gradient(180deg,#2a2b22,#1c1d17);
  border-bottom:3px solid var(--border);
  box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text)}
.brand .mark{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.03em;color:var(--phos-main);text-shadow:0 0 10px rgba(240,168,60,.4)}
.brand .tag{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.nav-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sitenav{display:flex;gap:6px;flex-wrap:wrap}
.sitenav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;padding:8px 12px;border-radius:4px;
  border:1px solid transparent;transition:border-color .15s,color .15s,background .15s;
}
.sitenav a:hover{color:var(--phos-main);border-color:var(--border-soft);background:rgba(0,0,0,.2)}
.lang-btn{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  color:var(--text-dim);background:rgba(0,0,0,.22);border:1px solid var(--border);
  padding:8px 12px;border-radius:4px;cursor:pointer;white-space:nowrap;
}
.lang-btn:hover{border-color:var(--amber-dim);color:var(--phos-main)}
.sitenav a.active{color:var(--phos-main);border-color:var(--amber-dim);background:rgba(0,0,0,.25)}

/* ---------- selettore lingua a più voci (IT/EN/DE/FR/RU) ---------- */
.lang-switch{position:relative}
.lang-menu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:40;min-width:150px;
  background:linear-gradient(180deg,#2a2b22,#1c1d17);border:1px solid var(--border);border-radius:4px;
  box-shadow:0 10px 24px rgba(0,0,0,.5);padding:4px;display:flex;flex-direction:column;gap:2px;
}
.lang-menu[hidden]{display:none}
.lang-menu button{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-align:left;
  color:var(--text-dim);background:transparent;border:1px solid transparent;border-radius:3px;
  padding:7px 10px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;
}
.lang-menu button:hover{color:var(--phos-main);background:rgba(0,0,0,.25);border-color:var(--border-soft)}
.lang-menu button.active{color:var(--phos-main);border-color:var(--amber-dim);background:rgba(0,0,0,.3)}
.lang-menu button .code{font-family:var(--mono);color:var(--text-faint);font-size:11px}

/* ---------- beta banner ---------- */
.beta-banner{
  background:#2c2313;border-top:1px solid var(--amber-dim);border-bottom:1px solid var(--amber-dim);
  color:#ffd98a;
}
.beta-banner .wrap{display:flex;align-items:center;gap:10px;padding:9px 20px;font-family:var(--mono);font-size:13px;flex-wrap:wrap}
.beta-banner strong{color:var(--phos-main)}
.beta-banner a{color:var(--phos-main);text-decoration:underline}

/* ---------- panels (instrument-panel look, reused everywhere) ---------- */
.panel{
  background:linear-gradient(175deg,var(--panel-raised),var(--panel));
  border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  padding:18px 20px;position:relative;
}
.panel h2,.panel h3{
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;font-size:14px;
  color:var(--text);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.panel h2 .tag,.panel h3 .tag{font-size:11px;color:var(--text-faint);text-transform:none;letter-spacing:.02em}
.panel p{color:var(--text-dim);line-height:1.55;font-size:14.5px}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px}
.hero-plate{
  background:var(--screen-bg);border:1px solid #050502;border-radius:8px;
  padding:26px 28px;box-shadow:inset 0 0 20px rgba(0,0,0,.8);
}
.hero h1{
  font-family:var(--disp);font-weight:700;font-size:clamp(34px,6vw,58px);letter-spacing:.02em;
  margin:0 0 6px;color:var(--phos-main);text-shadow:0 0 3px var(--phos-main),0 0 10px rgba(240,168,60,.55),0 0 26px rgba(240,168,60,.25);
}
.hero .sub{font-family:var(--mono);color:var(--phos-green);font-size:15px;letter-spacing:.04em;text-shadow:0 0 6px rgba(127,224,138,.4)}
.hero .lede{color:var(--text);font-size:16.5px;line-height:1.65;max-width:640px;margin:22px 0 0}

.hero-physics{
  display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 16px;max-width:640px;
  background:rgba(0,0,0,.22);border:1px solid var(--border-soft);border-left:3px solid var(--phos-green);
  border-radius:5px;font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--text-dim);
}
.hero-physics .ico{color:var(--phos-green);font-size:16px;flex-shrink:0;text-shadow:0 0 6px rgba(127,224,138,.4)}
.hero-physics strong{color:var(--text)}

.btn-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;letter-spacing:.03em;
  text-decoration:none;padding:13px 22px;border-radius:5px;font-weight:700;
  transition:transform .12s,box-shadow .12s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(175deg,#e8b957,var(--amber-dim));color:#241a08;box-shadow:0 3px 0 #5c481d,0 5px 14px rgba(0,0,0,.4)}
.btn-primary:hover{box-shadow:0 3px 0 #5c481d,0 6px 18px rgba(240,168,60,.35)}
.btn-ghost{background:rgba(0,0,0,.22);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--amber-dim);color:var(--phos-main)}

/* ---------- card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px}
.card{
  background:linear-gradient(175deg,var(--panel-raised),var(--panel));
  border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--amber-dim);transform:translateY(-2px)}
.card .ico{font-size:26px}
.card h3{font-family:var(--mono);font-size:14px;letter-spacing:.03em;text-transform:uppercase;margin:0;color:var(--phos-main)}
.card p{margin:0;font-size:13.5px;color:var(--text-dim);line-height:1.5}

/* ---------- page shell (non-landing pages) ---------- */
.page-hero{padding:34px 0 8px}
.page-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4vw,38px);color:var(--phos-main);margin:0 0 6px;
  text-shadow:0 0 3px var(--phos-main),0 0 10px rgba(240,168,60,.4)}
.page-hero .sub{font-family:var(--mono);color:var(--text-dim);font-size:14px}
.content{padding:24px 0 70px;display:flex;flex-direction:column;gap:16px}

/* ---------- biblio list ---------- */
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-row{
  display:flex;align-items:center;gap:16px;padding:14px 16px;background:rgba(0,0,0,.18);
  border:1px solid var(--border-soft);border-radius:5px;text-decoration:none;color:var(--text);
  transition:border-color .15s,background .15s;
}
.doc-row:hover{border-color:var(--amber-dim);background:rgba(0,0,0,.28)}
.doc-row .doc-ico{font-size:22px;flex:none;width:32px;text-align:center;color:var(--phos-main)}
.doc-row .doc-body{flex:1;min-width:0}
.doc-row .doc-title{font-weight:700;font-size:15px;margin:0 0 3px}
.doc-row .doc-meta{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);letter-spacing:.02em;margin-bottom:4px}
.doc-row .doc-desc{font-size:13.5px;color:var(--text-dim);line-height:1.45;margin:0}
.doc-row .doc-dl{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--phos-green);letter-spacing:.03em;white-space:nowrap}

/* ---------- photo gallery ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.photo-grid button{
  padding:0;border:1px solid var(--border-soft);border-radius:4px;overflow:hidden;cursor:zoom-in;
  background:#000;aspect-ratio:3/4;display:block;width:100%;
}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.photo-grid button:hover img{transform:scale(1.06)}
/* per gli schemi tecnici usiamo "contain" invece di "cover": sono spesso molto panoramici
   (tubazioni orizzontali larghe) e un ritaglio aggressivo può mostrare solo una fetta poco
   leggibile — meglio vedere sempre il disegno intero, anche con bande vuote ai lati */
.schemi-grid button{background:#e8e4d4;cursor:zoom-in}
.schemi-grid img{object-fit:contain;padding:8px}
.schemi-grid button:hover img{transform:scale(1.03)}
.lightbox{
  position:fixed;inset:0;background:rgba(8,8,5,.92);display:flex;align-items:center;justify-content:center;
  z-index:100;padding:30px;flex-direction:column;gap:14px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:78vh;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox .lb-controls{display:flex;align-items:center;gap:18px;font-family:var(--mono);color:var(--text)}
.lightbox button.lb-btn{
  background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text);
  font-family:var(--mono);padding:8px 14px;border-radius:4px;cursor:pointer;font-size:13px;
}
.lightbox button.lb-btn:hover{border-color:var(--amber-dim);color:var(--phos-main)}
.lb-count{font-size:12.5px;color:var(--text-faint)}
.lb-caption{max-width:80vw;text-align:center;color:var(--text)}
.lb-caption strong{display:block;font-size:16px;color:var(--phos-main);margin-bottom:4px}
.lb-caption p{margin:0 0 6px;color:var(--text-dim);font-size:13.5px;line-height:1.5}
.lb-src{font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.03em}
.photo-grid .card-title{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);text-align:center;padding:6px 4px 0;line-height:1.3}

/* ---------- contact ---------- */
.contact-plate{
  background:var(--screen-bg);border:1px solid #050502;border-radius:8px;padding:24px 26px;
  box-shadow:inset 0 0 16px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:14px;
}
.contact-plate .email{font-family:var(--mono);font-size:19px;color:var(--phos-green);text-shadow:0 0 6px rgba(127,224,138,.4);text-decoration:none}
.contact-plate .email:hover{text-decoration:underline}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{padding-left:22px;position:relative;color:var(--text-dim);font-size:14px;line-height:1.5}
.checklist li::before{content:'▸';position:absolute;left:0;color:var(--phos-main)}

/* ---------- stat strip (contatore visite / online) ---------- */
.stat-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stat-tile{
  background:var(--screen-bg);border:1px solid #050502;border-radius:6px;
  padding:10px 18px;box-shadow:inset 0 0 12px rgba(0,0,0,.8);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;
}
.stat-tile .num{
  font-family:var(--mono);font-size:24px;font-weight:700;color:var(--phos-green);
  text-shadow:0 0 3px var(--phos-green),0 0 8px rgba(127,224,138,.5);letter-spacing:.02em;
}
.stat-tile .lbl{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.stat-tile.live .num{color:var(--phos-main);text-shadow:0 0 3px var(--phos-main),0 0 8px rgba(240,168,60,.5)}
.stat-tile .dot{width:7px;height:7px;border-radius:50%;background:var(--phos-green);box-shadow:0 0 6px var(--phos-green);display:inline-block;margin-right:5px;animation:statPulse 1.8s infinite}
@keyframes statPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- feedback (stelline + commenti) ---------- */
.star-input{display:flex;gap:4px;font-size:28px;line-height:1;cursor:pointer;user-select:none}
.star-input .star{color:var(--border);transition:color .1s}
.star-input .star.filled{color:var(--phos-main);text-shadow:0 0 6px rgba(240,168,60,.5)}
.fb-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.fb-form label{font-family:var(--mono);font-size:12px;color:var(--text-dim);letter-spacing:.03em;text-transform:uppercase;display:block;margin-bottom:5px}
.fb-form input[type=text],.fb-form textarea{
  width:100%;background:rgba(0,0,0,.22);border:1px solid var(--border-soft);border-radius:4px;
  color:var(--text);font-family:var(--body);font-size:14px;padding:9px 11px;resize:vertical;
}
.fb-form textarea{min-height:80px}
.fb-form input[type=text]:focus,.fb-form textarea:focus{outline:none;border-color:var(--amber-dim)}
.fb-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.fb-msg{font-family:var(--mono);font-size:12.5px;margin-top:4px}
.fb-msg.ok{color:var(--phos-green)}
.fb-msg.err{color:var(--phos-red)}
.fb-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.fb-item{background:rgba(0,0,0,.18);border:1px solid var(--border-soft);border-radius:5px;padding:12px 14px}
.fb-stars{color:var(--phos-main);font-size:15px;letter-spacing:2px}
.fb-meta{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-left:8px}
.fb-comment{margin:6px 0 0;color:var(--text-dim);font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.fb-empty{color:var(--text-faint);font-size:13.5px;font-style:italic}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border-soft);margin-top:40px}
.site-footer .wrap{padding:22px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}
.site-footer a{color:var(--text-faint);text-decoration:none}
.site-footer a:hover{color:var(--phos-main)}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- cookie/privacy notice banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:linear-gradient(175deg,var(--panel-raised),var(--panel));
  border-top:1px solid var(--border-soft);
  box-shadow:0 -8px 20px rgba(0,0,0,.4);
}
.cookie-banner .wrap{
  padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.cookie-banner p{margin:0;font-family:var(--mono);font-size:12px;color:var(--text-dim);line-height:1.5;max-width:640px}
.cookie-banner a{color:var(--phos-main);text-decoration:underline}
.cookie-banner button{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);background:rgba(0,0,0,.22);border:1px solid var(--border);
  border-radius:4px;padding:9px 18px;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.cookie-banner button:hover{border-color:var(--amber-dim);color:var(--phos-main)}

/* ---------- privacy.html ---------- */
.privacy-updated{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:24px}

@media (max-width:640px){
  .site-header .wrap{flex-direction:column;align-items:flex-start}
  .hero{padding:34px 0 24px}
  .hero-plate{padding:20px}
}