:root{

  --petrol:#2F5D5B;

  --cta:#C0392B;

  --bg:#F8F9FA;

  --text:#212529;

  --white:#FFFFFF;

  --muted:#6C757D;

  --border:rgba(47,93,91,.18);

  --shadow:0 10px 30px rgba(0,0,0,.08);

  --radius:16px;

}



*{box-sizing:border-box}

html,body{height:100%}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

}



img{max-width:100%;height:auto}

a{color:inherit;text-decoration:none}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{

  outline:3px solid rgba(192,57,43,.35);

  outline-offset:2px;

  border-radius:10px;

}



.container{

  width:100%;

  max-width:1200px;

  margin:0 auto;

  padding:0 18px;

}



.skip-link{

  position:absolute;

  left:-999px;

  top:auto;

  width:1px;

  height:1px;

  overflow:hidden;

}

.skip-link:focus{

  left:18px;

  top:18px;

  width:auto;

  height:auto;

  background:var(--white);

  padding:10px 14px;

  border:1px solid var(--border);

  z-index:9999;

}



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:12px 18px;

  border-radius:999px;

  border:1px solid transparent;

  font-weight:700;

  letter-spacing:.2px;

  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;

  cursor:pointer;

  user-select:none;

  white-space:nowrap;

}

.btn:active{transform:translateY(1px)}

.btn-primary{

  background:var(--cta);

  color:var(--white);

  box-shadow:0 12px 30px rgba(192,57,43,.22);

}

.btn-primary:hover{

  background:#b4322a;

  transform:translateY(-1px);

  box-shadow:0 18px 44px rgba(192,57,43,.28);

}

.btn-secondary{

  background:var(--white);

  color:var(--petrol);

  border-color:var(--border);

  box-shadow:0 10px 28px rgba(47,93,91,.06);

}

.btn-secondary:hover{

  border-color:rgba(47,93,91,.35);

  box-shadow:0 14px 34px rgba(47,93,91,.10);

  transform:translateY(-1px);

}



.pill{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:9px 14px;

  border-radius:999px;

  border:1px solid var(--border);

  background:rgba(47,93,91,.06);

  color:var(--petrol);

  font-weight:700;

}



/* Header */

.site-header{

  position:fixed;

  top:0;

  left:0;

  right:0;

  z-index:1000;

  background:rgba(248,249,250,.78);

  backdrop-filter:saturate(140%) blur(12px);

  border-bottom:1px solid rgba(47,93,91,.10);

}

.site-header.is-scrolled{

  background:rgba(248,249,250,.92);

  box-shadow:0 10px 26px rgba(0,0,0,.06);

}

.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:16px 0;

}

.brand{

  display:flex;

  align-items:center;

  gap:12px;

}

.brand-mark{

  width:40px;

  height:40px;

  border-radius:12px;

  background:linear-gradient(135deg, rgba(47,93,91,.18), rgba(47,93,91,.02));

  border:1px solid rgba(47,93,91,.25);

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--petrol);

  font-weight:900;

}

.brand-text{

  display:flex;

  flex-direction:column;

  line-height:1.1;

}



.brand-logo{

  display:block;

  height:50px;

  width:auto;

  object-fit:contain;

  mix-blend-mode:multiply;

}

.brand-logo-mobile{

  display:none;

  height:40px;

  width:auto;

  object-fit:contain;

  mix-blend-mode:multiply;

}

.brand-logo-desktop{

  display:block;

}

.brand-name{

  font-size:14px;

  font-weight:900;

  letter-spacing:.4px;

  text-transform:uppercase;

}

.brand-tag{

  font-size:12px;

  color:var(--muted);

}



nav.primary-nav{

  display:flex;

  align-items:center;

  gap:18px;

}

.nav-links{

  display:flex;

  gap:14px;

  align-items:center;

  padding:0;

  margin:0;

  list-style:none;

}

.nav-links a{

  display:inline-flex;

  align-items:center;

  padding:10px 12px;

  border-radius:999px;

  border:1px solid transparent;

  color:var(--text);

  font-weight:700;

  font-size:14px;

  transition:background-color .18s ease, color .18s ease, transform .18s ease;

}

.nav-links a:hover{

  background:rgba(47,93,91,.10);

  color:var(--petrol);

  border-color:rgba(47,93,91,.18);

  transform:translateY(-1px);

}



.nav-toggle{

  display:none;

  width:44px;

  height:44px;

  border-radius:12px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.7);

  cursor:pointer;

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;

}

.nav-toggle span{

  display:block;

  width:18px;

  height:2px;

  background:var(--petrol);

  margin:4px auto;

  border-radius:2px;

}



.nav-toggle:hover{

  transform:translateY(-1px);

  border-color:rgba(47,93,91,.32);

  background:rgba(255,255,255,.88);

  box-shadow:0 14px 30px rgba(0,0,0,.07);

}



.mobile-panel{

  display:none;

  border-top:1px solid rgba(47,93,91,.10);

  padding:12px 0 18px;

}



.mobile-panel.is-open{

  animation:panelFade .20s ease-out both;

}

.mobile-links{

  list-style:none;

  padding:0;

  margin:0;

  display:flex;

  flex-direction:column;

  gap:8px;

}

.mobile-links a{

  display:flex;

  padding:12px 14px;

  border-radius:14px;

  border:1px solid rgba(47,93,91,.12);

  background:rgba(255,255,255,.65);

  font-weight:800;

  transition:background-color .18s ease, border-color .18s ease;

}

.mobile-links a:hover{

  background:rgba(47,93,91,.08);

  border-color:rgba(47,93,91,.24);

}



/* Layout offset for fixed header */

.page{

  padding-top:92px;

}



/* Hero */

.hero{

  padding:64px 0 28px;

  position:relative;

  overflow:hidden;

}



.hero::before{

  content:"";

  position:absolute;

  inset:-120px -80px auto -80px;

  height:320px;

  background:

    radial-gradient(closest-side, rgba(47,93,91,.18), rgba(47,93,91,0)),

    radial-gradient(closest-side, rgba(192,57,43,.12), rgba(192,57,43,0));

  pointer-events:none;

}

.hero > .container{

  position:relative;

  z-index:1;

}

.hero-grid{

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:26px;

  align-items:center;

}

.hero-title{

  font-size:46px;

  margin:10px 0 10px;

  line-height:1.15;

  letter-spacing:-.6px;

}

.hero-subtitle{

  font-size:18px;

  color:var(--muted);

  margin:0 0 24px;

}

.hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  align-items:center;

}

.hero-card{

  border-radius:calc(var(--radius) + 2px);

  background:

    radial-gradient(120% 120% at 10% 0%, rgba(47,93,91,.20), rgba(47,93,91,0) 50%),

    linear-gradient(180deg, rgba(47,93,91,.14), rgba(47,93,91,.04));

  border:1px solid rgba(47,93,91,.24);

  padding:18px;

  box-shadow:

    var(--shadow),

    inset 0 0 0 1px rgba(47,93,91,.10);

  position:relative;

  overflow:hidden;

  backdrop-filter: blur(10px);

  isolation:isolate;

}



/* Glass layers for hero panel */

.hero-card::before{

  content:"";

  position:absolute;

  inset:-2px;

  background:linear-gradient(120deg,

    rgba(47,93,91,0) 18%,

    rgba(47,93,91,.24) 44%,

    rgba(192,57,43,.12) 63%,

    rgba(47,93,91,0) 85%);

  opacity:.0;

  transition:opacity .18s ease;

  pointer-events:none;

}

.hero-card::after{

  content:"";

  position:absolute;

  inset:0;

  background:radial-gradient(600px circle at 18% 0%,

    rgba(47,93,91,.22),

    rgba(47,93,91,0) 55%);

  opacity:.18;

  pointer-events:none;

}

.hero-card:hover::before{

  opacity:.28;

}

.hero-card h3{

  margin:0 0 12px;

  font-size:16px;

}

.hero-points{

  margin:0;

  padding:0;

  list-style:none;

  display:grid;

  gap:10px;

}

.hero-points li{

  display:flex;

  gap:10px;

  align-items:flex-start;

  color:var(--text);

  font-weight:700;

  font-size:14px;

}

.check{

  width:22px;

  height:22px;

  border-radius:8px;

  background:rgba(192,57,43,.10);

  border:1px solid rgba(192,57,43,.22);

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--cta);

  flex:0 0 auto;

  margin-top:1px;

}



/* Sections */

.section{

  padding:64px 0;

}

.section-head{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:16px;

  margin-bottom:22px;

}

.section-title{

  margin:0;

  font-size:30px;

  letter-spacing:-.35px;

  font-weight:900;

}

.section-lead{

  margin:8px 0 0;

  color:var(--muted);

  font-size:16px;

  max-width:720px;

}

.section-body{

  margin-top:18px;

}



.grid-3{

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:18px;

}

.grid-2{

  display:grid;

  grid-template-columns:repeat(2, 1fr);

  gap:18px;

}



/* Pannelli tecnologici corporate: glass effect sobrio + stratificazione */

.card{

  background:

    linear-gradient(180deg, rgba(47,93,91,.035), rgba(47,93,91,0) 34%),

    rgba(255,255,255,.86);

  border:1px solid rgba(47,93,91,.18);

  border-radius:calc(var(--radius) + 2px);

  padding:20px;

  box-shadow:

    0 14px 36px rgba(0,0,0,.05),

    inset 0 0 0 1px rgba(47,93,91,.10);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  position:relative;

  overflow:hidden;

  backdrop-filter: blur(10px);

  isolation:isolate; /* rende i layer pseudo-element coerenti */

}

.card:hover{

  transform:translateY(-2px);

  box-shadow:0 22px 58px rgba(0,0,0,.09);

  border-color:rgba(47,93,91,.36);

}



/* Effetto lucido tecnologico (hover) */

.card::before{

  content:"";

  position:absolute;

  inset:-2px;

  background:linear-gradient(110deg,

    rgba(47,93,91,0) 20%,

    rgba(47,93,91,.22) 45%,

    rgba(192,57,43,.12) 62%,

    rgba(47,93,91,0) 82%);

  opacity:.16;

  transform:translateX(-50%) rotate(8deg);

  pointer-events:none;

  transition:opacity .18s ease, transform .7s ease;

}

.card::after{

  content:"";

  position:absolute;

  inset:0;

  background:radial-gradient(700px circle at 12% 0%,

    rgba(47,93,91,.22),

    rgba(47,93,91,0) 55%);

  opacity:.18;

  pointer-events:none;

  transition:opacity .18s ease;

}

.card:hover::before{

  opacity:.62;

  transform:translateX(65%) rotate(8deg);

}

.card:hover::after{

  opacity:.30;

}

.card h3{

  margin:0 0 10px;

  font-size:16px;

  font-weight:900;

  letter-spacing:-.15px;

}

.card p{

  margin:0;

  color:var(--muted);

  font-size:15px;

  line-height:1.65;

}



/* Testi legali e liste: reset per coerenza su mobile */

.card h2{

  margin:14px 0 8px;

  font-size:16px;

  font-weight:900;

  letter-spacing:-.15px;

  color:var(--text);

}

.card ul{

  margin:10px 0 0;

  padding-left:18px;

}

.card li{

  margin:7px 0;

  color:var(--muted);

  font-size:15px;

  line-height:1.65;

}



/* Placeholder visivi neutri (sostituire con immagini reali quando disponibili) */

.media-placeholder{

  width:100%;

  height:260px;

  border-radius:calc(var(--radius) + 2px);

  border:1px solid rgba(47,93,91,.22);

  background:

    repeating-linear-gradient(

      135deg,

      rgba(47,93,91,.10) 0px,

      rgba(47,93,91,.10) 10px,

      rgba(47,93,91,0) 10px,

      rgba(47,93,91,0) 24px

    ),

    radial-gradient(120% 120% at 10% 0%, rgba(47,93,91,.22), rgba(47,93,91,0) 52%),

    linear-gradient(180deg, rgba(192,57,43,.10), rgba(255,255,255,0));

  position:relative;

  overflow:hidden;

  box-shadow:

    0 14px 36px rgba(0,0,0,.04),

    inset 0 0 0 1px rgba(47,93,91,.08);

  backdrop-filter: blur(10px);

}

.media-placeholder::after{

  content:"";

  position:absolute;

  inset:-30%;

  background:

    radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);

  transform:translate(10%, 10%);

  pointer-events:none;

}

.hero-visual{

  height:300px;

  width:100%;

  background:none;

  position:static;

  left:auto;

  transform:none;

}



.portfolio-media-placeholder{

  height:120px;

  margin-bottom:14px;

  border-radius:calc(var(--radius) + 2px);

  border:1px solid rgba(47,93,91,.20);

  background:

    radial-gradient(100% 100% at 10% 0%, rgba(47,93,91,.18), rgba(47,93,91,0) 55%),

    linear-gradient(135deg, rgba(192,57,43,.12), rgba(255,255,255,0));

  box-shadow:

    0 12px 28px rgba(0,0,0,.03),

    inset 0 0 0 1px rgba(47,93,91,.06);

  position:relative;

  overflow:hidden;

  backdrop-filter: blur(10px);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}

.portfolio-media-placeholder::after{

  content:"";

  position:absolute;

  inset:-35%;

  background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);

  transform:translate(10%, 10%);

  pointer-events:none;

  opacity:.25;

}



.portfolio-media-placeholder:hover{

  transform:translateY(-1px);

  border-color:rgba(47,93,91,.28);

  box-shadow:

    0 16px 34px rgba(0,0,0,.04),

    inset 0 0 0 1px rgba(47,93,91,.09);

}

.portfolio-media-placeholder:hover::after{

  opacity:.55;

}



.badge-row{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:14px;

}

.badge{

  display:inline-flex;

  align-items:center;

  padding:8px 12px;

  border-radius:999px;

  border:1px solid rgba(47,93,91,.18);

  background:rgba(47,93,91,.06);

  font-weight:800;

  font-size:13px;

  color:var(--petrol);

}



/* Steps */

.steps{

  display:grid;

  grid-template-columns:repeat(4, 1fr);

  gap:18px;

}

.step{

  position:relative;

  padding:18px;

  border-radius:var(--radius);

  border:1px solid var(--border);

  background:linear-gradient(180deg, rgba(47,93,91,.12), rgba(255,255,255,.6));

  box-shadow:0 14px 32px rgba(0,0,0,.05);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  overflow:hidden;

}

.step:hover{

  transform:translateY(-2px);

  border-color:rgba(47,93,91,.30);

  box-shadow:0 22px 58px rgba(0,0,0,.08);

}

.step::before{

  content:"";

  position:absolute;

  inset:-3px;

  background:linear-gradient(110deg,

    rgba(47,93,91,0) 18%,

    rgba(47,93,91,.24) 44%,

    rgba(192,57,43,.14) 64%,

    rgba(47,93,91,0) 86%);

  opacity:0;

  transform:translateX(-65%) rotate(8deg);

  pointer-events:none;

  transition:opacity .18s ease, transform .7s ease;

}

.step:hover::before{

  opacity:1;

  transform:translateX(65%) rotate(8deg);

}

.step-num{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:38px;

  height:38px;

  border-radius:14px;

  background:rgba(47,93,91,.12);

  border:1px solid rgba(47,93,91,.25);

  color:var(--petrol);

  font-weight:900;

}

.step h3{

  margin:12px 0 10px;

  font-size:16px;

  font-weight:900;

}

.step p{

  margin:0;

  color:var(--muted);

  font-size:14.5px;

}



/* CTA band */

.cta-band{

  padding:46px 0;

}

.cta-box{

  background:

    linear-gradient(135deg, rgba(47,93,91,.12), rgba(47,93,91,.02)),

    rgba(255,255,255,.78);

  border:1px solid rgba(47,93,91,.18);

  border-radius:calc(var(--radius) + 6px);

  padding:24px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  position:relative;

  overflow:hidden;

  backdrop-filter: blur(10px);

  box-shadow:

    0 14px 36px rgba(0,0,0,.05),

    inset 0 0 0 1px rgba(47,93,91,.08);

}

.cta-box:hover{

  border-color:rgba(47,93,91,.30);

}

.cta-box::before{

  content:"";

  position:absolute;

  inset:-2px;

  background:linear-gradient(110deg,

    rgba(47,93,91,0) 22%,

    rgba(47,93,91,.22) 46%,

    rgba(192,57,43,.14) 63%,

    rgba(47,93,91,0) 84%);

  opacity:0;

  transform:translateX(-65%) rotate(8deg);

  pointer-events:none;

  transition:opacity .18s ease, transform .7s ease;

}

.cta-box:hover::before{

  opacity:.75;

  transform:translateX(65%) rotate(8deg);

}

.cta-box h2{

  margin:0 0 6px;

  font-size:24px;

  letter-spacing:-.25px;

  font-weight:950;

}

.cta-box p{

  margin:0;

  color:var(--muted);

  font-size:14.5px;

  max-width:650px;

}



/* Portfolio */

.portfolio-meta{

  margin-top:12px;

  display:grid;

  gap:10px;

}



/* Layer panel portfolio (glass molto sobrio) */

.meta-item{

  border:1px solid rgba(47,93,91,.18);

  border-radius:14px;

  padding:12px;

  background:

    linear-gradient(180deg, rgba(47,93,91,.05), rgba(47,93,91,0) 55%),

    rgba(255,255,255,.78);

  box-shadow:

    0 10px 26px rgba(0,0,0,.03),

    inset 0 0 0 1px rgba(47,93,91,.08);

  position:relative;

  overflow:hidden;

  backdrop-filter: blur(10px);

  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;

}

.meta-item::before{

  content:"";

  position:absolute;

  top:-40%;

  left:-20%;

  width:140%;

  height:90%;

  background:radial-gradient(closest-side, rgba(47,93,91,.18), rgba(47,93,91,0));

  opacity:.25;

  pointer-events:none;

}

.meta-item::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 35%);

  opacity:.10;

  pointer-events:none;

}

.meta-item:hover{

  transform:translateY(-1px);

  border-color:rgba(47,93,91,.28);

  box-shadow:

    0 16px 34px rgba(0,0,0,.05),

    inset 0 0 0 1px rgba(47,93,91,.10);

}

.meta-item:hover::before{

  opacity:.45;

}

.meta-item:hover::after{

  opacity:.18;

}

.meta-item strong{

  display:block;

  font-size:13px;

  color:var(--petrol);

  margin-bottom:6px;

}

.meta-item span{

  font-size:14.5px;

  color:var(--muted);

}



/* Contact */

.contact-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;

  align-items:start;

}

form .field{

  display:flex;

  flex-direction:column;

  gap:8px;

  margin-bottom:14px;

}

label{

  font-weight:900;

  font-size:13px;

  color:var(--petrol);

}

input[type="text"],input[type="email"],input[type="tel"],textarea{

  padding:12px 14px;

  border-radius:14px;

  border:1px solid rgba(47,93,91,.18);

  background:rgba(255,255,255,.7);

  color:var(--text);

  font-family:inherit;

}

textarea{min-height:140px;resize:vertical}



/* Look uniforme anche per la select contatti */

form select{

  padding:12px 38px 12px 14px;

  border-radius:14px;

  border:1px solid rgba(47,93,91,.18);

  background:rgba(255,255,255,.7);

  color:var(--text);

  font-family:inherit;

  -webkit-appearance:none;

  appearance:none;

  background-image:

    linear-gradient(45deg, transparent 50%, rgba(192,57,43,.95) 50%),

    linear-gradient(135deg, rgba(192,57,43,.95) 50%, transparent 50%),

    linear-gradient(to right, rgba(47,93,91,.0), rgba(47,93,91,.0));

  background-position:

    calc(100% - 16px) calc(50% - 3px),

    calc(100% - 11px) calc(50% - 3px),

    0 0;

  background-size:

    5px 5px,

    5px 5px,

    100% 100%;

  background-repeat:no-repeat;

}



#formError.success{

  color:rgba(15,122,57,.95);

  font-weight:900;

}

#formError.error{

  color:rgba(192,57,43,.95);

  font-weight:900;

}

.checkbox-row{

  display:flex;

  gap:12px;

  align-items:flex-start;

  margin:16px 0 14px;

}

.checkbox-row input{

  margin-top:4px;

}

.form-note{

  color:var(--muted);

  font-size:13.5px;

  margin:0;

}



/* Footer */

footer{

  padding:36px 0;

  border-top:1px solid rgba(47,93,91,.12);

  background:rgba(255,255,255,.55);

}

.footer-grid{

  display:grid;

  grid-template-columns:1.2fr 1fr 1fr;

  gap:18px;

}



/* Primo blocco footer: logo a sinistra e contatti a destra (senza comprimere testo) */

.footer-grid > div:first-child{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:0;

}

.footer-grid > div:first-child .footer-logo-desktop,

.footer-grid > div:first-child .footer-logo-mobile{

  grid-column:1;

  grid-row:1;

  margin:0;

  align-self:start;

}

.footer-grid > div:first-child .footer-title{

  grid-column:2;

  grid-row:1;

  margin:0;

}

.footer-grid > div:first-child .section-lead{

  grid-column:2;

  grid-row:2;

}

.footer-grid > div:first-child .section-lead{

  margin:0;

}

.footer-grid > div:first-child .badge-row{

  grid-column:2;

  grid-row:3;

}

.footer-title{

  font-weight:900;

  margin:0 0 10px;

  font-size:14px;

  color:var(--petrol);

}



.footer-logo-desktop{

  display:block;

  height:210px;

  width:auto;

  object-fit:contain;

  margin:0 0 12px;

  mix-blend-mode:normal;

}

.footer-logo-mobile{

  display:none;

  height:162px;

  width:auto;

  object-fit:contain;

  margin:0 0 12px;

  mix-blend-mode:normal;

}

.footer-links{

  list-style:none;

  padding:0;

  margin:0;

  display:grid;

  gap:8px;

}

.footer-links a{

  color:var(--muted);

  font-weight:700;

  font-size:14px;

  transition:color .18s ease;

}

.footer-links a:hover{

  color:var(--petrol);

  text-decoration:underline;

  text-underline-offset:3px;

}

.footer-bottom{

  margin-top:18px;

  color:var(--muted);

  font-size:13.5px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  justify-content:center;

  text-align:center;

}



/* Subtle reveal */

.reveal{

  opacity:0;

  transform:translateY(10px);

  transition:opacity .6s ease, transform .6s ease;

}

.reveal.is-visible{

  opacity:1;

  transform:translateY(0);

}



@keyframes panelFade{

  from{opacity:.65; transform:translateY(-6px);}

  to{opacity:1; transform:translateY(0);}

}



@media (max-width: 980px){

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

  .hero-title{font-size:36px}

  .steps{grid-template-columns:repeat(2, 1fr)}

  .grid-3{grid-template-columns:1fr}

  .grid-2{grid-template-columns:1fr}

  .contact-grid{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr}

  .cta-box{flex-direction:column;align-items:flex-start}

  .hero-visual{height:240px}

  /* Reset: su 1 colonna, evita overflow da inline style (es. grid-column: span 2) */

  .grid-3 > *{grid-column:auto !important}

  .grid-2 > *{grid-column:auto !important}

}



@media (max-width: 768px){

  nav.primary-nav{gap:10px}

  .nav-links{display:none}

  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}

  .mobile-panel{display:none}

  .mobile-panel.is-open{display:block}

  .mobile-panel{padding-left:0;padding-right:0}

  .page{padding-top:86px}

  .header-inner{padding:12px 0}



  /* Sezioni: titolo/testo sopra, bottone sotto */

  .section-head{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

  }

  .section-head > div:last-child{

    width:100%;

  }



  .brand-logo-desktop{display:none}

  .brand-logo-mobile{display:block}



  .footer-logo-desktop{display:none}

  .footer-logo-mobile{display:block}



  /* Footer: impaginazione pulita e centrata */

  .footer-grid{

    grid-template-columns:1fr;

    gap:20px;

    text-align:center;

  }

  .footer-grid > div{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

  }

  .footer-title{

    text-align:center;

  }

  .footer-links{

    justify-content:center;

  }

  .footer-logo-mobile{

    height:120px;

    margin:0 auto 10px;

  }

  .footer-links{

    margin-bottom:6px;

  }

  .footer-bottom{

    margin-top:26px;

  }

  

  /* Tech cards: tuning per mobile (meno ingombro, più leggibilità) */

  .tech-card--compact{padding:18px 14px}

  .tech-card::before{inset:-1px;filter:blur(5px);opacity:.55}

  .tech-card::after{padding:1px}

  .tech-card .portfolio-media-placeholder{height:90px;margin-bottom:12px}



  /* CTA: pulsante sotto al paragrafo (non affiancato) */

  .cta-band .badge-row{

    flex-direction:column;

    align-items:stretch;

    width:100%;

  }

  .cta-band .badge-row .btn{

    width:100%;

    white-space:normal; /* evita testo tagliato su mobile */

    text-align:left;

    word-break:break-word;

  }



  .tech-card--horizontal{

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:12px;

  }

  .tech-card--horizontal > div:last-child{

    width:100%;

  }



  /* Portfolio meta: riduci gap/padding su mobile */

  .portfolio-meta{gap:8px}

  .meta-item{padding:10px}

  .meta-item span{font-size:14px}

  .meta-item strong{font-size:12.5px}

  /* Override: evita align-self:start che sposta il logo a sinistra */

  .footer-grid > div:first-child .footer-logo-desktop,

  .footer-grid > div:first-child .footer-logo-mobile{

    align-self:center;

    margin-left:auto;

    margin-right:auto;

  }



  .footer-grid > div:first-child{

    display:flex;

    flex-direction:column;

    gap:0;

    align-items:center;

  }

}



@media (prefers-reduced-motion: reduce){

  html{scroll-behavior:auto}

  .btn,.card,.reveal,.step,.nav-toggle{transition:none}

  .card::before,.step::before,.cta-box::before{transition:none; transform:none; opacity:.10}

  .card::after{transition:none; transform:none; opacity:.14}

  .tech-card::before,.tech-card::after{transition:none; transform:none}

  .tech-card,.tech-card:hover{transition:none; transform:none}

}



/* Tech-card component (estrazione dalla demo) */

.tech-card{

  /* Palette “demo” incapsulata nel componente */

  --tech-bg-1:#081116;

  --tech-bg-2:#0d1d22;

  --tech-bg-3:#132c31;



  --card-bg-1:#0f2024;

  --card-bg-2:#15343a;

  --card-bg-3:#21474d;



  --glow-teal:#66e6e0;

  --glow-red:#ff4d5a;



  position:relative;

  border-radius:calc(var(--radius) + 8px);

  padding:24px;

  color:#fff;

  border:1px solid transparent;

  overflow:hidden;

  isolation:isolate;

  /* Centro neutro (leggibilità) + bordo neon (effetto concentrato) */

  background:

    /* Centro più sfumato e neutro (meno contrasto per la lettura) */

    radial-gradient(110% 90% at 22% 6%, rgba(102,230,224,0.12), rgba(102,230,224,0) 52%) padding-box,

    radial-gradient(120% 100% at 86% 78%, rgba(255,20,20,0.07), rgba(255,20,20,0) 58%) padding-box,

    linear-gradient(145deg, rgba(15,32,36,.86) 0%, rgba(8,16,18,.92) 100%) padding-box,

    /* Bordo neon */

    linear-gradient(135deg, rgba(102,230,224,0.95), rgba(255,77,90,0.95)) border-box;

  background-origin:border-box;

  background-clip: padding-box, padding-box, padding-box, border-box;



  box-shadow:

    0 24px 60px rgba(0,0,0,0.45),

    inset 0 1px 0 rgba(255,255,255,0.10),

    inset 0 -1px 0 rgba(255,255,255,0.04),

    inset 0 0 0 1px rgba(180,255,251,0.10),

    0 0 18px rgba(102,230,224,0.04),

    0 0 36px rgba(255,20,20,0.22),

    0 0 60px rgba(255,255,255,0.10);



  backdrop-filter: blur(10px);



  transition:

    transform 0.35s ease,

    filter 0.35s ease,

    box-shadow 0.35s ease;

}



.tech-card > *{

  position:relative;

  z-index:1;

}



/* Glow esterno multicolore */

.tech-card::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:inherit;

  transform:none;

  background:

    linear-gradient(125deg,

      rgba(102, 230, 224, 0.70) 0%,

      rgba(102, 230, 224, 0.38) 28%,

      rgba(255, 20, 20, 0.92) 64%,

      rgba(255, 255, 255, 0.92) 100%);

  z-index:0;

  filter: blur(6px);

  opacity:0.62;

  pointer-events:none;

  transition: opacity 0.35s ease, filter 0.35s ease;

}



/* Layer interno: angoli + riflesso lucido */

.tech-card::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  z-index:0;

  pointer-events:none;

  transform:none;



  /* Secondo bordo neon (borde doppio) */

  padding:2px;

  background:linear-gradient(90deg,

    rgba(102,230,224,0.28) 0%,

    rgba(255,20,20,0.84) 42%,

    rgba(255,60,60,0.96) 70%,

    rgba(255,255,255,0.96) 100%

  );



  /* Mostra solo il bordo, tagliando il centro */

  -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  mask-composite:exclude;



  opacity:1;

  transition: opacity 0.35s ease;

}



.tech-card h2,

.tech-card h3{

  color:#ffffff;

}

.tech-card p{

  color:rgba(255,255,255,0.88);

}

.tech-card strong{

  color:#ffffff;

}



/* Hover sobrio ma “neon” visibile */

.tech-card:hover{

  transform: translateY(-6px);

  box-shadow:

    0 30px 80px rgba(0, 0, 0, 0.52),

    0 0 28px rgba(102, 230, 224, 0.14),

    0 0 40px rgba(255, 10, 10, 0.40),

    0 0 70px rgba(255, 255, 255, 0.30),

    inset 0 1px 0 rgba(255,255,255,0.16),

    inset 0 -1px 0 rgba(255,255,255,0.06);

}

.tech-card:hover::before{

  filter: blur(10px);

  opacity:0.85;

  transform:none;

}

.tech-card:hover::after{

  opacity:1;

}



/* Variante compact: per card verticali */

.tech-card--compact{

  padding:20px 18px;

}

.tech-card--compact:hover{

  transform: translateY(-4px);

}



/* Variante orizzontale: per CTA speciali */

.tech-card--horizontal{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

}

.tech-card--horizontal:hover{

  transform: translateY(-4px);

}

.tech-card--horizontal h2{

  margin:0 0 6px;

}

.tech-card--horizontal p{

  margin:0;

}

.tech-card--horizontal > div:last-child{

  flex:0 0 auto;

}



/* Portfolio (box interno meta + placeholder immagine) */

.tech-card .portfolio-media-placeholder{

  background:

    radial-gradient(120% 120% at 10% 0%, rgba(102,230,224,0.30), rgba(102,230,224,0) 46%),

    linear-gradient(135deg, rgba(255,77,90,0.22), rgba(255,255,255,0));

  border:1px solid rgba(180,255,251,0.22);

  box-shadow:

    0 18px 44px rgba(0,0,0,0.22),

    inset 0 0 0 1px rgba(255,255,255,0.08);

}

.tech-card .portfolio-media-placeholder::after{

  opacity:0.6;

}



.tech-card .meta-item{

  border:1px solid rgba(180,255,251,0.18);

  background:

    linear-gradient(180deg, rgba(47,93,91,.18), rgba(47,93,91,0) 55%),

    rgba(6,12,14,.40);

  box-shadow:

    0 16px 34px rgba(0,0,0,.20),

    inset 0 0 0 1px rgba(180,255,251,0.10);

}

.tech-card .meta-item::before{

  opacity:0.28;

}

.tech-card .meta-item::after{

  opacity:0.14;

}

.tech-card .meta-item strong{

  color:#ffffff;

}

.tech-card .meta-item span{

  color:rgba(255,255,255,0.82);

}



/* Blog article: testo più “premium” (si usa con .tech-card) */

.blog-card p{

  margin:0 0 10px;

  font-size:14.5px;

  line-height:1.6;

  color:var(--muted);

}

.blog-card h2{

  margin:14px 0 8px;

  font-size:17px;

  font-weight:900;

  letter-spacing:-.14px;

  color:var(--text);

}

.blog-card h3{

  margin:12px 0 7px;

  font-size:15.5px;

  font-weight:900;

  letter-spacing:-.12px;

  color:var(--text);

}

.blog-card ul{

  margin:6px 0 14px;

  padding-left:18px;

}

.blog-card li{

  margin:6px 0;

  font-size:14.5px;

  line-height:1.6;

  color:var(--muted);

}

.blog-card li::marker{

  color:var(--muted);

}



/* Blog: lettura ordinata (una colonna), con spaziatura tra sezioni */

.blog-section{

  min-width:0;

}

.blog-section + .blog-section{

  margin-top:18px;

}

@media (min-width: 981px){

  .blog-card{

    display:block;

  }

}



/* Stratificazione: card più sovrapposte (desktop soltanto) */

@media (min-width: 981px){

  /* 3 colonne: seconda riga inizia da 4 */

  .grid-3 > .tech-card--compact:nth-child(n+4){

    margin-top:-12px;

    z-index:2;

  }

  /* 2 colonne: seconda riga inizia da 3 */

  .grid-2 > .tech-card--compact:nth-child(n+3){

    margin-top:-12px;

    z-index:2;

  }

}