/* ==========================
   THEME VARIABLES
   ========================== */
:root{
  --bg:#0f1115; --panel:#161a22; --text:#e6e9ef; --muted:#aab1bd;
  --brand:#f4a024; --brand-2:#cf7f00; --ring:#2a3242;
  --maxw:1100px; --radius:16px; --space:clamp(16px,3vw,28px);
  --h1:clamp(28px,4vw,42px); --h2:clamp(22px,3.2vw,30px); --h3:clamp(18px,2.4vw,22px);
}

/* ==========================
   BASE / RESET
   ========================== */
*{ box-sizing:border-box }
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space) }
.section{ padding: calc(var(--space)*2) 0 }
.panel{ background:var(--panel); border:1px solid var(--ring); border-radius:var(--radius); padding:var(--space) }
.muted{ color:var(--muted) }
h1{ font-size:var(--h1); margin:.4em 0 }

/* ==========================
   UTILITIES
   ========================== */
.section-title{ font-size:var(--h2); text-align:center; margin:0 0 var(--space) }
.section-title.left{ text-align:left }
.centered{ text-align:center }
.mt-1{ margin-top:calc(var(--space)*0.75) }
.mt-2{ margin-top:var(--space) }
.mt-3{ margin-top:calc(var(--space)*1.5) }
.list-clean{ margin:0; padding-left:18px }
.text-justify{ text-align:justify; text-justify:inter-word }

/* ==========================
   HEADER / NAV (consolidato)
   ========================== */

/* Barra sticky con blur */
header#site-header { min-height: 64px; }
header{
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(15,17,21,.8);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--ring);
}

/* Layout principale della nav */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

/* Brand (logo + scritta) */
.brand{ display: flex; align-items: center; gap: 12px; }
.brand img{ width: 48px; height: 48px; border-radius: 50%; }
.brand b{ font-size: 18px; letter-spacing: .3px; }

/* Link di home come contenitore pulito del brand */
.brand .home-link{
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}

/* Menu voci (desktop) */
.nav-list{
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a{
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.nav-list a:hover{ color: var(--text); }

/* Controlli a destra (selettore lingua + hamburger) */
.nav-controls{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Selettore lingua – versione desktop */
.lang-select{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
}
.lang-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.lang-desktop{ display: list-item; } /* visibile su desktop */
.lang-item-mobile{ display: none; }  /* e nascosto su desktop */

/* Hamburger */
.menu-btn{
  display: none;                   /* visibile solo su mobile */
  background: transparent;
  color: var(--text);
  border: 1px solid var(--ring);
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1;
}
.menu-btn .icon{ font-size: 22px; }

/* ========== Mobile ========== */
@media (max-width: 880px){
  /* compattiamo la barra */
  .nav{ gap: 10px; }

  /* hamburger a destra, lingua prima dell’hamburger */
  .menu-btn{ display: inline-flex; align-items: center; justify-content: center; }
  .lang-desktop{ display: none; }
  .lang-item-mobile{ display: block; }        /* l’<li> nel menu a tendina */
  .nav-controls select.lang-select{ order: 1; }  /* se mostri il select fuori dal drawer */
  .nav-controls .menu-btn{ order: 2; }

  /* nascondi lista standard; il drawer si apre con body.menu-open */
  .nav-list{ display: none; }
  .menu-open .nav-list{
    position: absolute; left: 0; right: 0; top: 64px;
    display: flex; flex-direction: column; gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--ring);
    z-index: 20;
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
  }
  .menu-open .nav-list li a{ display: block; padding: 14px var(--space); }

  /* il select mobile occupa tutta la riga nel drawer */
  .lang-item-mobile .lang-select{ width: 100%; }
}

/* Accessibilità: label testuali “nascoste” */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ==========================
   HERO (slideshow CSS only)
   ========================== */
.hero{
  position:relative; min-height:56vh; display:grid; place-items:center;
  isolation:isolate; overflow:hidden; text-align:center;
}
.lead{ color:var(--muted); max-width:780px; margin-inline:auto }

/* immagini di sfondo */
.hero .hero-bg .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation: heroFade4 24s infinite ease-in-out; /* 4 immagini × 6s visibilità */
}

/* timeline → 4 immagini */
.hero .hero-bg .s1{ animation-delay: 0s; }
.hero .hero-bg .s2{ animation-delay: 6s; }
.hero .hero-bg .s3{ animation-delay: 12s; }
.hero .hero-bg .s4{ animation-delay: 18s; }

/* keyframes per 4-slide */
@keyframes heroFade4{
  0%   { opacity:0; }
  6%   { opacity:1; }  /* fade-in */
  25%  { opacity:1; }  /* visibile */
  31%  { opacity:0; }  /* fade-out */
  100% { opacity:0; }
}

/* Riduzione movimento: mostra solo la prima */
@media (prefers-reduced-motion: reduce){
  .hero .hero-bg .slide{ animation:none; opacity:0; }
  .hero .hero-bg .s1{ opacity:1; }
}

.hero-content {
  position: relative;
  z-index: 2;      /* sopra le immagini */
  text-align: center;
  color: var(--text);
  transition: opacity .6s ease;
}

/* Hero: titolo + descrizione centrati in basso */
.hero-content {
  position: absolute;
  bottom: 4%;              /* Desktop: un po’ sopra al bordo basso */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  color: #fff;
}

.hero-title {
  font-size: 2.2rem;
  margin-bottom: 0.6rem;
}

.hero-lead {
  font-size: 1.2rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Mobile (max 768px) → spostiamo più in alto per non tagliare */
@media (max-width: 768px) {
  .hero-content {
    bottom: 5%;            /* più vicino al bordo basso */
    padding: 0 12px;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-lead {
    font-size: 1rem;
  }
}

/* === HERO: icona + refinement semplificato === */

/* wrapper controllato */
.hero.hero--slides .hero-content{
  position: absolute;
  left: 50%;
  bottom: 5%;                  /* base desktop */
  transform: translateX(-50%);
  width: min(96vw, 1100px);
  text-align: center;
}

/* icona sopra al titolo */
.hero-icon{
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-icon img{
  width: 200px;   /* grandezza fissa desktop */
  height: auto;
  aspect-ratio: 1/1;
  filter: drop-shadow(0 0 14px rgba(255,200,85,.3));
}

/* titolo e lead */
.hero-title{
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: .6rem;
  text-wrap: balance;
}
.hero-lead{
  font-size: 18px;
  line-height: 1.4;
  max-width: 80ch;
  margin: 0 auto;
  opacity: .92;
}

/* MOBILE ≤768px */
@media (max-width:768px){
  .hero.hero--slides .hero-content{
    bottom: 6%;
    width: 92vw;
    padding: 0;
  }
  .hero-lead{ max-width: none; }

  .hero-icon img{
    width: 150px;   /* grandezza fissa mobile */
  }
}


/* ==========================
   COMPONENTS
   ========================== */
/* CTA generica */
a.cta{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:#fff; border:0; border-radius:12px;
  padding:12px 18px; font-weight:800;
  box-shadow:0 6px 18px rgba(244,160,36,.25);
  transition:background .2s ease, color .2s ease, transform .06s ease;
}
a.cta:hover, a.cta:focus, a.cta:focus-visible{ background:var(--brand-2); color:#fff; outline:none }
a.cta:active{ transform:translateY(1px) }
a.cta:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 6px 18px rgba(244,160,36,.25); border-radius:12px }

/* CTA "Leggi di più" (Chi siamo) */
.readmore-wrapper{ display:flex; justify-content:center }
.cta-readmore{
  display:inline-flex; justify-content:center; align-items:center;
  margin:20px auto 0;
  font-size:1.1rem; padding:14px 28px; border-radius:14px; min-width:180px;
  background:var(--brand); color:#fff; font-weight:700; cursor:pointer; border:none;
  box-shadow:0 6px 18px rgba(244,160,36,.25);
  transition:background .2s ease, transform .06s ease;
}
.cta-readmore:hover, .cta-readmore:focus{
  background:var(--brand-2); transform:translateY(-1px);
}
@media (max-width:600px){
  .cta-readmore{ display:block; width:100%; font-size:1.2rem; padding:18px }
}

/* ==========================
   SECTION-SPECIFIC
   ========================== */
/* Chi siamo: pannello espandibile (JS gestisce le classi) */
#about .panel{ transition:max-height .4s ease; overflow:hidden }
.hidden{ display:none }               /* usata per nascondere porzioni di testo */
.about-toggle{ text-align:center; margin-top:calc(var(--space)*1.5) }

.about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 4px;
}

.about-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(255,200,85,.25));
}

@media (min-width: 1024px) {
  .about-icon img {
    width: 24px;
    height: 24px;
  }
}

/* Titoli sezione specifici */
#contact h2{ font-size:var(--h2); text-align:center; margin-bottom:var(--space) }

/* Loghi tecnologie e prodotto */
.tech-logos{ display:flex; justify-content:center; flex-wrap:wrap; gap:32px; margin-top:24px }
.tech-logos img{ height:100px; width:auto; flex:0 0 auto }
.logo-product{ max-width:250px; width:100%; height:auto; display:block; margin:0 auto }

/* ==========================
   DECORATIONS (divider & bands)
   ========================== */
/* separatore “soft” */
.divider{
  height:48px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.04), transparent 60%);
  border:0;
}

/* griglia sottile */
.grid-sep{
  height:100px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0)),
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 24px);
  border-top:1px solid var(--ring);
  border-bottom:1px solid var(--ring);
}

/* bande decorative tra sezioni (immagini di sfondo ottimizzate) */
.section-band{
  --band-h:320px;
  height:clamp(180px,24vw,var(--band-h));
  position:relative; isolation:isolate;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  border-top:1px solid var(--ring); border-bottom:1px solid var(--ring);
}
.section-band::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.22) 100%);
}
/* varianti */
.band--mosaic  { background-image:url("../img/banners/BANNER_01.jpg") } /* per /it/ */
.band--network { background-image:url("../img/banners/BANNER_02.jpg") }
.band--circuit { background-image:url("../img/banners/BANNER_03.jpg") }

/* risparmio dati: evita immagini pesanti */
@media (prefers-reduced-data:reduce){
  .section-band{ background-image:none !important; background-color:#0f1115 }
}


/* ==========================
   BACK TO TOP — stile CTA
   ========================== */
#back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;

  /* visibilità + animazione */
  display: none;
  opacity: 0;
  transition: background .2s ease, transform .06s ease, opacity .25s ease;

  /* dimensioni più grandi */
  width: 56px;
  height: 56px;
  line-height: 56px;        /* centratura del simbolo */
  font-size: 22px;
  font-weight: 900;
  text-align: center;

  /* stile in linea con .cta */
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(244,160,36,.28);
  cursor: pointer;
}

#back-to-top.is-visible{
  display: block;
  opacity: 1;
}

#back-to-top:hover,
#back-to-top:focus{
  background: var(--brand-2);
  color: #fff;
}

#back-to-top:active{
  transform: translateY(1px);
}

#back-to-top:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.15),
    0 10px 24px rgba(244,160,36,.28);
}

/* Mobile: leggermente più compatto */
@media (max-width: 880px){
  #back-to-top{
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    font-size: 20px;
  }
}

/* ==========================
   CONTACT FORM
   ========================== */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

#contact-form .form-group {
  display: flex;
  flex-direction: column;
}

#contact-form input,
#contact-form textarea {
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(244,160,36,.25);
}

#contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Pulsante coerente con le CTA esistenti */
#contact-form button.cta {
  align-self: flex-start;
}

/* Contatti → contenitore azioni del form */
#contact .form-actions{
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Bottone del form = stesso stile di "Leggi di più" */
#contact .form-actions .cta-readmore{
  min-width: 220px;     /* un po' più largo per eleganza */
  padding: 14px 22px;   /* pari al CTA */
  font-weight: 800;
}

/* Mobile: full-width come gli input */
@media (max-width: 680px){
  #contact .form-actions .cta-readmore{
    width: 100%;
  }
}
/* Honeypot: nascondi i campi-trappola dal layout e dalla navigazione */
#contact-form .hp,
#contact-form input[name="website"],
#contact-form input[name="company"]{
  position: absolute !important;
  left: -10000px !important;   /* fuori schermo */
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* ==========================
   FOOTER
   ========================== */
footer{ border-top:1px solid var(--ring); padding:24px 0; color:var(--muted); font-size:14px }
.center{ text-align:center }

.footer-legal {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
.footer-legal a {
  color: var(--muted);
  text-decoration: underline;
}
.footer-legal a:hover {
  color: var(--text);
}

/* ==========================
   COOKIE
   ========================== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--panel);
  border-top: 1px solid var(--ring);
  color: var(--text);
  padding: 16px;
  text-align: center;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.cookie-banner.hidden { display: none; }
.cookie-banner button {
  margin-left: 10px;
  padding: 8px 14px;
  background: var(--brand);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.cookie-banner button:hover {
  background: var(--brand-2);
}

/* ==========================
   LEGAL PAGES (policy)
   ========================== */
.legal h1 { margin-top: 0; font-size: clamp(28px, 3vw, 36px); }
.legal h2 { margin-top: 28px; font-size: clamp(20px, 2.2vw, 24px); }
.legal p  { line-height: 1.65; }
.legal ul { margin: 12px 0 0 18px; padding: 0; }
.legal li { margin: 6px 0; }

/* opzionale: limita la larghezza del testo per leggibilità */
.panel.legal { max-width: 960px; margin-left: auto; margin-right: auto; }

/* ==========================
   PARALLAX DI SEZIONE
   ========================== */
.section.parallax{
  position: relative;
  isolation: isolate;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;     /* immagine fissa */
}

/* Overlay per contrasto testo (default: scuro) */
.section.parallax::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
}

/* Contenuto sopra lo sfondo */
.section.parallax .container,
.section.parallax .panel{
  position: relative;
  z-index: 1;
}

/* ===== Mappe immagini ===== */
.parallax--mosaic  { background-image: url("../img/banners/BANNER_01.jpg"); }
.parallax--network { background-image: url("../img/banners/BANNER_02.jpg"); }
.parallax--circuit { background-image: url("../img/banners/BANNER_03.jpg"); }
/* Nuovo sfondo chiaro per Tecnologia */
.parallax--tech    { background-image: url("../img/banners/BANNER_05.png"); }

/* ===== Varianti overlay ===== */
/* Overlay chiaro per sfondi bianchi/pastello */
.parallax--light::before{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
}

/* Overlay bianco semitrasparente su tutta la sezione */
.section--tech-overlay {
  position: relative;
  isolation: isolate; /* garantisce che l’overlay stia sopra lo sfondo */
}

.section--tech-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255,255,255,.65);  /* bianco trasparente */
  backdrop-filter: blur(2px);         /* sfocatura leggera */
}

/* contenuto sopra */
.section--tech-overlay .container,
.section--tech-overlay .panel {
  position: relative;
  z-index: 1;
}


/* ===== Pannello vetro (se vuoi “respirare” lo sfondo) ===== */
.panel--glass{
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(4px);
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
}

/* ===== Mobile fallback (iOS/Safari) ===== */
@media (max-width:880px){
  .section.parallax{ background-attachment: scroll; }
}

/* ==========================
   TEMA CHIARO + BRONZO
   ========================== */

/* Palette oro/bronzo */
:root{
  --bronze: #D7A74A;        /* oro/ambra principale */
  --bronze-strong: #C7932A; /* titoli/cta */
  --bronze-muted: #9C7A35;  /* testi secondari */
}

/* Sezione a sfondo bianco */
.section--white{
  background-color:#fff;
  color:#111;
}

/* Sezione bianca con parallax (overlay chiaro) */
.section--white.parallax{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment: fixed;
}
.section--white.parallax::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.15));
  backdrop-filter: blur(2px);
}
.section--white.parallax .container,
.section--white.parallax .panel{ position:relative; z-index:1; }

/* Card trasparente (niente box scuro) */
.panel--flat{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Tipografia oro/bronzo dentro la card */
.panel--bronze{
  color: var(--bronze);
}
.panel--bronze h2,
.panel--bronze h3{
  color: var(--bronze-strong);
}
.panel--bronze .muted{
  color: var(--bronze-muted);
}
.panel--bronze a{
  color: var(--bronze-strong);
  text-decoration-color: color-mix(in srgb, var(--bronze-strong) 60%, transparent);
}
.panel--bronze a:hover{
  color: #000;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bronze) 35%, transparent), transparent);
}

/* Liste: marker in oro */
.panel--bronze ul{ list-style: disc; }
.panel--bronze ul li::marker{ color: var(--bronze-strong); }

/* CTA in oro/bronzo su sfondo chiaro */
.panel--bronze .cta,
.panel--bronze .cta-readmore,
.panel--bronze button[type="submit"]{
  background: var(--bronze-strong);
  color:#111;
  border: 1px solid color-mix(in srgb, var(--bronze-strong) 80%, #111 20%);
  box-shadow: 0 6px 18px rgba(215,167,74,.18);
}
.panel--bronze .cta:hover,
.panel--bronze .cta-readmore:hover,
.panel--bronze button[type="submit"]:hover{
  filter: saturate(110%) brightness(1.03);
}

/* Mobile: disattiva fixed anche sul tema chiaro */
@media (max-width:880px){
  .section--white.parallax{ background-attachment: scroll; }
}