:root {
  --bg-main:#020617;
  --bg-alt:#050816;
  --card:#0b1220;
  --card-alt:#111827;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#f97316;
  --accent-soft:#fb923c44;
  --blue:#1e6ba8;
  --steel:#cbd5f5;
  --radius-lg:18px;
  --radius-full:999px;
  --shadow-soft:0 20px 50px rgba(0,0,0,0.7);
  --max-w:1100px;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:radial-gradient(circle at top left,#111827 0,#020617 55%);
  color:var(--text);
  min-height:100vh;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ========= STRUTTURA ========= */

.page {
  padding:96px 16px 40px; /* spazio per header fisso */
  display:flex;
  justify-content:center;
	/*margin-top: 160px; /* Valore da regolare: 120–160px */
}

.inner {
  width:100%;
  max-width:var(--max-w);
}

/* ========= HEADER FISSO + MENU ========= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background: rgba(12,16,22,0.92); /* nero decode leggermente opaco */
  backdrop-filter:blur(12px);
  border-bottom:1px solid #111827;
}

.header-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap; /* può andare a capo su schermi medi */
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}

/* SOLO LOGO, SENZA GRAFICA OVALE */
.brand-logo {
  width:80px; /* 52PX*/
  height:auto;
  display:block;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none;
  overflow:visible;
}

.brand-logo img {
  width:80px; /* 52PX*/
  height:auto;
  object-fit:contain;
}

.brand-text h1 {
  font-size:1.1rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--steel);
  white-space:nowrap;
}

.subtitle {
  font-size:0.72rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-top:2px;
}

.pill-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-soft);
}

.header-right{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}

.tagline {
  padding:6px 12px;
  border-radius:var(--radius-full);
  border:1px solid rgba(249,115,22,0.55);
  background:linear-gradient(120deg,#020617,#050816);
  font-size:0.74rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.15em;
  white-space:nowrap;
}

/* NAV DESKTOP */

.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== ICONA HAMBURGER (usata solo da mobile) ===== */

.nav-toggle{
  display:none; /* mostrato nella media query */
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),#ea580c);
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  margin-left:auto !important;
}

.hamburger{
  width:20px;
  height:2px;
  background:#020617;
  border-radius:2px;
  transition:0.25s ease;
}

/* animazione in X quando il menu è aperto */
body.nav-open .hamburger:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.nav-open .hamburger:nth-child(2){
  opacity:0;
}
body.nav-open .hamburger:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.86rem;
}

/* NAV LINKS CON ICONE */

.nav-links a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  transition:background .2s, color .2s, transform .2s;
}

.nav-links svg{
  width:18px;
  height:18px;
  color:var(--steel);
}

.nav-links a:hover{
  background:rgba(15,23,42,0.9);
  color:var(--steel);
  transform:translateY(-1px);
}

.nav-links a.active{
  background:var(--accent);
  color:#020617;
  font-weight:600;
}

.nav-links a.active svg{
  color:#020617;
}

/* ========= HERO ========= */

.hero {
  margin-bottom:30px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:28px;
  align-items:center;
}

.hero-title {
  font-size:2.4rem;
  line-height:1.12;
  margin-bottom:14px;
}

.hero-title span {
  color:var(--accent);
}

.hero-lead {
  font-size:0.98rem;
  color:var(--muted);
  max-width:40rem;
  margin-bottom:20px;
}

.hero-lead strong {
  color:var(--steel);
}

.hero-badges {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.badge {
  padding:6px 12px;
  border-radius:var(--radius-full);
  border:1px solid #1f2937;
  background:#0f172aee;
  font-size:0.8rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}

.badge span {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.hero-cta {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-primary {
  padding:11px 22px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,#f97316,#ea580c);
  border:none;
  color:#020617;
  font-weight:700;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  font-size:0.9rem;
}

.btn-secondary {
  padding:10px 20px;
  border-radius:var(--radius-full);
  border:1px solid #374151;
  background:transparent;
  color:#steel;
  color:var(--steel);
  cursor:pointer;
  font-size:0.86rem;
}

.hero-card {
  background:radial-gradient(circle,#1f2937 0,#020617 70%);
  border-radius:var(--radius-lg);
  padding:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.hero-card h2 {
  font-size:0.96rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom:10px;
  color:var(--steel);
}

.hero-card p {
  font-size:0.86rem;
  color:var(--muted);
  line-height:1.6;
}

/* ========= SEZIONI ========= */

section.block {
  background:#050816;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:20px;
  margin-bottom:26px;
  box-shadow:var(--shadow-soft);
}

.section-title {
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--steel);
  margin-bottom:6px;
}

.section-sub {
  font-size:0.86rem;
  color:var(--muted);
  margin-bottom:16px;
}

/* SIGNIFICATO DECODE SYSTEM */

.decode-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:20px;
}

.decode-grid p {
  line-height:1.7;
  color:var(--muted);
}

.decode-highlight{
  font-size:1rem;
  color:var(--accent);
  font-weight:600;
}

.decode-words {
  background:var(--card);
  border-radius:16px;
  border:1px solid #1f2937;
  padding:14px;
}

.decode-words ul {
  list-style:none;
  padding:0;
  margin:0;
}

.decode-words li {
  padding:6px 0;
  display:flex;
  gap:12px;
  font-size:0.9rem;
}

.decode-words .key {
  min-width:50px;
  font-weight:700;
  color:var(--accent);
}

/* IMPRESE */

.companies {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.company {
  background:var(--card-alt);
  padding:16px;
  border-radius:16px;
  border:1px solid #1f2937;
  transition:0.25s;
}

.company:hover {
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 20px 40px rgba(0,0,0,0.8);
}

.company h3 {
  font-size:1rem;
  margin-bottom:6px;
  color:var(--steel);
}

.company .role {
  font-size:0.78rem;
  color:var(--accent);
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.company ul {
  margin-top:6px;
  margin-left:16px;
  color:var(--muted);
  line-height:1.5;
  font-size:0.85rem;
}

/* PROFESSIONISTI */

.pro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:20px;
}

.pro-grid p {
  line-height:1.7;
  color:var(--muted);
}

.tag-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag {
  padding:6px 12px;
  border-radius:var(--radius-full);
  background:#020617;
  border:1px solid #1f2937;
  font-size:0.78rem;
  color:var(--muted);
}

/* CTA & CONTATTI */

.cta-final {
  text-align:center;
  margin-bottom:16px;
}

.cta-final h2 {
  font-size:1.4rem;
  margin-bottom:6px;
}

.cta-final p {
  color:var(--muted);
  font-size:0.9rem;
  margin-bottom:18px;
}

.contacts {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.contact-card {
  flex:1 1 260px;
  background:var(--card-alt);
  border:1px solid #1f2937;
  border-radius:16px;
  padding:14px;
}

.contact-card h3 {
  color:var(--steel);
  margin-bottom:6px;
}

.contact-card p {
  color:var(--muted);
  line-height:1.5;
}

.contact-card a {
  color:var(--accent);
}

footer {
  text-align:center;
  margin-top:14px;
  font-size:0.75rem;
  color:#6b7280;
}

/* ========= RESPONSIVE ========= */

@media (max-width:1100px){
  .brand-text h1{
    font-size:1rem;
  }
}

@media (max-width:900px){

  .page{
    padding-top:88px;
  }

  .header-inner{
    padding-inline:12px;
    flex-wrap:nowrap !important;       /* una sola riga */
    justify-content:space-between;     /* logo a sx, menu a dx */
  }

  .brand-text h1{
    font-size:0.95rem;
  }

  .header-right{
    margin-left:auto;
    gap:8px;
  }

  .tagline{
    display:none !important;           /* niente pill blu su mobile */
  }

  .nav-toggle{
    display:flex;                      /* mostra il bottone arancione */
  }

  .nav-links{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:#020617f2;
    border-top:1px solid #111827;
    border-bottom:1px solid #111827;
    flex-direction:column;
    padding:10px 14px 14px;
    gap:6px;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
    z-index:50;
  }

  .nav-links a{
    justify-content:center;
    padding:12px 10px;
    font-size:1rem;
  }

  .nav-links svg{
    width:20px;
    height:20px;
  }

  body.nav-open .nav-links{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .hero {
    grid-template-columns:1fr;
  }

  .decode-grid,
  .pro-grid {
    grid-template-columns:1fr;
  }

  .companies {
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){

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

  .btn-primary,
  .btn-secondary{
    width:100%;
  }

  .hero-cta{
    flex-direction:column;
  }
}
/* FIX: Altezza header su desktop e spazio pagina */
@media (min-width: 1024px) {

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: rgba(12,16,22,0.92); /* nero decode leggermente opaco */
        backdrop-filter: blur(6px);
        padding: 14px 0;
    }

    .header-inner {
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
    }

    /* Spazio sotto l’header perché non copra i contenuti */
    .page {
        margin-top: 80px; /* REGOLA qui se vuoi più o meno spazio */
    }
}
/* ============================
   FORM CONTATTI – STILE UNIFICATO
   ============================ */

.page .block form {
  margin-top: 30px;
  max-width: 640px;        /* larghezza massima del form */
}

/* Ogni riga (etichetta + campo) */
.form-group {
  margin-bottom: 14px;
}

/* Etichette */
.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Campi di input e area di testo allineati e della stessa larghezza */
.form-group input,
.form-group textarea {
  width: 100%;               /* TUTTI stessa larghezza */
  box-sizing: border-box;
  background: rgba(5, 8, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  color: #e5e9ff;
  font: inherit;
}

/* Area messaggio un po' più alta */
.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* Effetto focus in linea con i bottoni arancioni */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 137, 29, 0.45);
}

/* ============================
   GALLERIA LAVORI – CARDS FOTO
   ============================ */

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.work-card {
  background: var(--card-alt);
  border-radius: 16px;
  border: 1px solid #1f2937;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Immagine */
.work-thumb {
  display: block;
  position: relative;
  overflow: hidden;
}

.work-thumb img {
  width: 100%;
  height: 190px;            /* regola se vuoi più alto/basso */
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

/* Effetto hover "elegante" */
.work-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.85);
}

.work-card:hover img {
  transform: scale(1.05);
  filter: saturate(1.2);
}

/* Corpo testo card */
.work-body {
  padding: 12px 14px 14px;
}

.work-body h3 {
  font-size: 0.98rem;
  color: var(--steel);
  margin-bottom: 4px;
}

.work-meta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.work-desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 900px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-thumb img {
    height: 170px;
  }
}

@media (max-width: 600px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .work-thumb img {
    height: 190px;
  }
}
/* Galleria interna alle card lavori */

.work-main {
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Striscia di miniature */
.work-thumbs {
  display:flex;
  gap:6px;
  padding:0 6px 8px;
  overflow-x:auto;
  scrollbar-width:thin;              /* Firefox */
}

.work-thumbs::-webkit-scrollbar {
  height:6px;                        /* Chrome/Edge */
}

.work-thumbs::-webkit-scrollbar-thumb {
  background:rgba(148,163,184,0.5);
  border-radius:999px;
}

.work-thumb-btn {
  border:none;
  background:transparent;
  padding:0;
  border-radius:10px;
  width:62px;
  height:46px;
  flex:0 0 auto;
  cursor:pointer;
  opacity:0.7;
  border:1px solid transparent;
  transition:opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-thumb-btn img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* Hover / attiva */
.work-thumb-btn:hover {
  opacity:1;
  transform:translateY(-1px);
}

.work-thumb-btn.is-active {
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(249,115,22,0.45);
}

/* === BLOCCO IMPRESA CON LOGO === */
.block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.block-head .titles{
  flex:1;
}

.block-head .company-logo{
  flex-shrink:0;
  max-height:70px;
  opacity:.9;
  transition:all .3s ease;
}

.block-head .company-logo img{
  max-height:70px;
  width:auto;
  display:block;
}

.block-head .company-logo:hover{
  opacity:1;
  transform:scale(1.04);
}

/* Mobile */
@media(max-width:768px){
  .block-head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .block-head .company-logo{
    max-height:60px;
  }
}


/* Certificazioni - card tecniche */

.cert-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.cert-card{
  background: var(--card-alt);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, border-color .25s ease;
}

.cert-card h3{
  color: var(--accent);
  font-size: .95rem;
  margin-bottom:6px;
  letter-spacing:.08em;
}

.cert-card p{
  font-size:.86rem;
  color: var(--muted);
  line-height:1.6;
}

.cert-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
}

@media (max-width:900px){
  .cert-grid{
    grid-template-columns:1fr;
  }
}


/* SOA - card tecniche */

.soa-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.soa-card{
  background: var(--card-alt);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, border-color .25s ease;
}

.soa-card h3{
  color: var(--steel);
  font-size: .98rem;
  margin-bottom:6px;
}

.soa-meta{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:10px;
}

.soa-list{
  margin:0;
  padding-left:18px;
  line-height:1.7;
  color: var(--muted);
  font-size:.88rem;
}

.soa-note{
  margin-top:10px;
  font-size:.82rem;
  color: var(--muted);
}

.soa-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
}

@media (max-width:900px){
  .soa-grid{
    grid-template-columns:1fr;
  }
}

.soa-desc{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  margin-top:2px;
}