/* ============================================================
   Security Center Group — One page landing
   Plain CSS, no framework. Responsive.
   ============================================================ */

/* ---- Font: Arial (file locali) ---- */
@font-face{
  font-family:'Arial';
  src:url("../ARIAL.TTF") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arial';
  src:url("../ARIALBD.TTF") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arial';
  src:url("../ARIALI.TTF") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Arial';
  src:url("../ARIALBI.TTF") format("truetype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --navy-900:#0c1c45;   /* deep header / sedi background */
  --navy-800:#102a5e;
  --navy-700:#13315f;
  --blue:#11529f;       /* Security Center accent / button */
  --blue-dark:#0e468a;
  --red:#e2202a;        /* Sorveglia */
  --red-dark:#c5121b;
  --green:#5cb615;      /* call button */
  --grey-bg:#ececec;    /* certifications box */
  --footer:#2c2c2c;
  --text:#3a3a3a;
  --text-light:#ffffff;
  --maxw:1140px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Arial',Helvetica,sans-serif;
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.section-title{
  text-align:center;
  color:var(--navy-900);
  font-size:26px;
  font-weight:700;
  margin:0 0 38px;
}
.section-title--light{color:#fff;}

strong{font-weight:700;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:url("../Sfondo_header.png") center/cover no-repeat;
  color:var(--text-light);
  text-align:center;
  overflow:hidden;
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,55,.55) 0%,rgba(10,22,55,.78) 100%);
}
.hero__inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:46px 24px 110px;
}
.hero__logo{
  width:300px;max-width:70%;
  margin:0 auto 90px;
}
.hero__title{
  font-size:54px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 22px;
}
.hero__subtitle{
  font-style:italic;
  font-weight:600;
  font-size:18px;
  color:#cdd7ec;
  margin:0;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{padding:66px 0 50px;}
.intro__inner{
  max-width:830px;
  text-align:center;
}
.intro p{margin:0 0 22px;}
.intro p:last-child{margin-bottom:0;}

/* ============================================================
   BRANDS / COMPETENZE
   ============================================================ */
.brands{padding:30px 0 70px;}

.brand-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:430px;
}
.brand-row--reverse .brand-row__media{order:2;}
.brand-row--reverse .brand-row__text{order:1;}

.brand-row__media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background-size:cover;
  background-position:center;
}
.brand-row__media img{width:62%;max-width:340px;}

.brand-row__media--sc{background-image:linear-gradient(rgba(13,40,90,.55),rgba(13,40,90,.55)),url("../Sfondo_Security_Center.png");}
.brand-row__media--sorveglia{background-image:linear-gradient(rgba(210,20,28,.55),rgba(210,20,28,.55)),url("../Sfondo_Sorveglia.png");}
.brand-row__media--sorveglia img{width:46%;max-width:260px;}
.brand-row__media--securcom{background-image:linear-gradient(rgba(20,28,46,.45),rgba(20,28,46,.45)),url("../Sfondo_SecurcoM.png");}

.brand-row__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:50px 9%;
}
.brand-row__text p{margin:0 0 20px;}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:13px 34px;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease,transform .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn--blue{background:var(--blue);}
.btn--blue:hover{background:var(--blue-dark);}
.btn--red{background:var(--red);}
.btn--red:hover{background:var(--red-dark);}
.btn--navy{background:var(--navy-900);}
.btn--navy:hover{background:#091534;}
.btn--text-mt{margin-top:6px;}

/* ============================================================
   CERTIFICAZIONI
   ============================================================ */
.certs{padding:20px 0 80px;}
.certs__box{
  background:url("../Box_certificazioni.png") center/cover no-repeat;
  aspect-ratio:3279 / 898;       /* stesso rapporto della PNG: forma fedele, niente crop/stretch */
  padding:48px 56px;
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.certs__intro{flex:1 1 300px;}
.certs__intro h2{
  color:var(--navy-900);
  font-size:23px;
  font-weight:700;
  margin:0 0 14px;
}
.certs__intro p{margin:0;font-size:14px;color:#555;}

.certs__badges{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  flex:2 1 480px;
  flex-wrap:wrap;
}
.certs__badges img{height:84px;width:auto;}

/* ============================================================
   SEDI / CONTATTI
   ============================================================ */
.sedi{
  position:relative;
  background:url("../Sfondo_form.png") center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.sedi__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,28,69,.86),rgba(9,22,55,.92));
}
.sedi__inner{position:relative;padding:64px 24px 76px;}

/* Tabs */
.tabs{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.tab{
  font-family:inherit;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  padding:11px 26px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.tab:hover{border-color:#fff;}
.tab.is-active{background:var(--blue);border-color:var(--blue);}

/* Grid: address + form */
.sedi__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}

.sede-panel{display:none;}
.sede-panel.is-active{display:block;}
.sede-panel h3{
  font-style:italic;
  font-weight:700;
  font-size:21px;
  margin:0 0 26px;
}
.sede-contact{list-style:none;margin:0 0 24px;padding:0;}
.sede-contact li{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
  font-size:14px;
}
.sede-web{
  color:#fff;
  font-style:italic;
  font-weight:700;
  text-decoration:none;
}
.sede-web:hover{text-decoration:underline;}

/* Simple round icons */
.ico{
  flex:0 0 auto;
  width:30px;height:30px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:15px;
}
.ico--pin{background-image:url("../pin.png");}
.ico--phone{background-image:url("../telefono.png");}
.ico--mail{background-image:url("../email.png");}

/* Contact form */
.contact-form{display:flex;flex-direction:column;gap:14px;}
.contact-form > input,
.contact-form textarea{
  font-family:inherit;
  font-size:14px;
  background:#fff;
  border:none;
  padding:14px 18px;
  color:#333;
  width:100%;
  resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#9a9a9a;}
.contact-form input:focus,
.contact-form textarea:focus{outline:2px solid var(--blue);}

.checkbox{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  line-height:1.5;
  color:#c7d0e4;
}
.checkbox input{margin-top:2px;flex:0 0 auto;}

.btn--submit{
  align-self:center;
  background:#fff;
  color:var(--navy-900);
  margin-top:10px;
  min-width:200px;
  padding:14px 40px;
}
.btn--submit:hover{background:#e9e9e9;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--footer);
  color:#cfcfcf;
  text-align:center;
  padding:34px 24px 28px;
}
.footer__logo{width:230px;max-width:60%;margin:0 auto 16px;}
.footer__address{margin:0 0 4px;font-size:12px;}
.footer__links{margin:0;font-size:12px;}
.footer__links a{color:#cfcfcf;text-decoration:none;}
.footer__links a:hover{text-decoration:underline;}

/* ============================================================
   FLOATING CALL BUTTON
   ============================================================ */
.call-fab{
  position:fixed;
  right:26px;
  bottom:26px;
  width:62px;height:62px;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index:50;
  transition:transform .2s ease;
}
.call-fab img{width:100%;height:100%;border-radius:50%;}
.call-fab:hover{transform:scale(1.06);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .hero__title{font-size:38px;}
  .hero__logo{margin-bottom:60px;}
  .brand-row,
  .brand-row--reverse{grid-template-columns:1fr;min-height:0;}
  .brand-row--reverse .brand-row__media{order:1;}
  .brand-row--reverse .brand-row__text{order:2;}
  .brand-row__media{padding:60px 40px;}
  .brand-row__text{padding:46px 28px;}
  /* Sotto 880px la PNG verrebbe stirata: torniamo al box CSS */
  .certs__box{
    background:var(--grey-bg);
    border-radius:34px;
    aspect-ratio:auto;
    padding:40px 32px;
    text-align:center;
  }
  .certs__intro{flex-basis:100%;}
  .sedi__grid{grid-template-columns:1fr;gap:42px;}
}

@media (max-width:560px){
  .hero__title{font-size:30px;}
  .hero__subtitle{font-size:15px;}
  .section-title{font-size:22px;}
  .certs__badges{gap:22px;}
  .certs__badges img{height:64px;}
  .tabs{gap:8px;}
  .tab{padding:10px 16px;font-size:11px;}
  .call-fab{width:54px;height:54px;right:18px;bottom:18px;}
}