/* ==================================================

   SOFTING NEXT

   STILE SPECIFICO PAGINA

================================================== */





/* ==================================================

   IMPORTAZIONE STYLE GENERALE AETOS

================================================== */



@import url("../../style.css");





/* ==================================================

   PAGINA

================================================== */



.softing-page{

  width:100%;

  padding-top:104px;

  overflow:hidden;

}





/* ==================================================

   VOCE SOFTING ATTIVA NEL MENU

================================================== */



.main-nav .current-link{

  color:#8fd3ff;

}





/* ==================================================

   LOGO SOFTING SUPERIORE

================================================== */



.softing-top{

  padding:45px 8%;



  background:#ffffff;



  border-bottom:1px solid #e2e8f0;

}





.softing-top-inner{

  width:100%;

  max-width:1300px;



  margin:0 auto;



  display:flex;



  align-items:center;

  justify-content:space-between;



  gap:35px;

}





.softing-logo-link{

  display:block;



  min-width:0;

}





.softing-main-logo{

  display:block;



  width:auto;

  max-width:420px;



  max-height:110px;



  object-fit:contain;

}





/* ==================================================

   HERO SOFTING

================================================== */



.softing-hero{

  position:relative;



  min-height:72vh;



  display:flex;



  align-items:center;



  padding:100px 8%;



  color:#ffffff;



  background:

    linear-gradient(

      135deg,

      #07182f 0%,

      #092d4d 55%,

      #075f8f 100%

    );



  overflow:hidden;

}





.softing-hero::before{

  content:"";



  position:absolute;



  width:520px;

  height:520px;



  right:-170px;

  top:-180px;



  border-radius:50%;



  background:rgba(143,211,255,.08);

}





.softing-hero::after{

  content:"";



  position:absolute;



  width:370px;

  height:370px;



  right:150px;

  bottom:-220px;



  border-radius:50%;



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

}





.softing-hero-overlay{

  position:absolute;



  inset:0;



  z-index:1;



  background:linear-gradient(

    90deg,

    rgba(6,24,49,.20),

    rgba(6,24,49,.02)

  );

}





.softing-hero-content{

  position:relative;



  z-index:2;



  width:100%;

  max-width:1100px;



  margin:0 auto;

}





.softing-hero h1{

  margin-bottom:26px;



  color:#ffffff;



  font-size:clamp(48px,6vw,78px);



  line-height:1.03;

}





.softing-hero-description{

  max-width:900px;



  margin-bottom:0;



  color:#dfeaf3;



  font-size:21px;



  line-height:1.75;

}





.softing-buttons{

  display:flex;



  flex-wrap:wrap;



  align-items:center;



  gap:18px;



  margin-top:34px;

}





/* ==================================================

   NUMERI

================================================== */



.softing-numbers{

  display:grid;



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



  gap:20px;



  padding:42px 8%;



  background:#f4f7fb;

}





.softing-numbers article{

  min-width:0;



  padding:32px 24px;



  background:#ffffff;



  border-radius:14px;



  text-align:center;



  box-shadow:0 12px 35px rgba(6,24,49,.08);



  transition:

    transform .30s ease,

    box-shadow .30s ease;

}





.softing-numbers article:hover{

  transform:translateY(-6px);



  box-shadow:0 17px 38px rgba(6,24,49,.13);

}





.softing-numbers strong{

  display:block;



  margin-bottom:8px;



  color:#075f8f;



  font-size:38px;



  line-height:1.1;

}





.softing-numbers span{

  color:#5b667a;



  font-weight:700;

}





/* ==================================================

   SEZIONI SOFTING

================================================== */



.softing-section{

  padding:95px 8%;

}





.softing-section h2{

  max-width:1100px;



  margin-bottom:28px;



  color:#061831;



  font-size:clamp(36px,4vw,50px);



  line-height:1.12;

}





.softing-section > p:not(.label){

  max-width:1050px;



  margin-bottom:18px;



  color:#5b667a;



  font-size:18px;

}





/* ==================================================

   SEZIONI SCURE

================================================== */



.softing-dark{

  background:#061831;



  color:#ffffff;

}





.softing-dark h2{

  color:#ffffff;

}





.softing-dark > p:not(.label){

  color:#d8e3ef;

}





/* ==================================================

   ATTIVITÀ

================================================== */



.activity-grid{

  display:grid;



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



  gap:25px;



  margin-top:40px;

}





.activity-grid article{

  min-width:0;



  padding:31px;



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



  border:1px solid rgba(255,255,255,.15);

  border-radius:14px;

}





.activity-number{

  display:block;



  margin-bottom:12px;



  color:#8fd3ff;



  font-size:27px;



  font-weight:900;

}





.activity-grid h3{

  margin-bottom:12px;



  color:#ffffff;



  font-size:24px;

}





.activity-grid p{

  color:#d8e3ef;



  font-size:17px;

}





/* ==================================================

   SOFTWARE

================================================== */



.software-grid{

  display:grid;



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



  gap:24px;



  margin-top:40px;

}





.software-grid article{

  min-width:0;



  padding:28px;



  background:#f4f7fb;



  border-left:5px solid #075f8f;

  border-radius:11px;



  transition:

    transform .3s ease,

    box-shadow .3s ease;

}





.software-grid article:hover{

  transform:translateY(-6px);



  box-shadow:0 14px 30px rgba(6,24,49,.12);

}





.software-grid h3{

  margin-bottom:10px;



  color:#061831;



  font-size:23px;

}





.software-grid p{

  color:#5b667a;



  font-size:17px;

}





/* ==================================================

   CASO APPLICATIVO

================================================== */



.case-study{

  display:grid;



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



  gap:65px;



  align-items:center;



  background:#edf3f8;

}





.case-content{

  min-width:0;

}





.case-content .btn{

  margin-top:20px;

}





.case-panel{

  display:grid;



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



  gap:18px;

}





.case-panel article{

  padding:28px 18px;



  background:#ffffff;



  border-radius:14px;



  text-align:center;



  box-shadow:0 10px 30px rgba(6,24,49,.09);

}





.case-panel strong{

  display:block;



  margin-bottom:8px;



  color:#075f8f;



  font-size:32px;



  line-height:1.1;

}





.case-panel span{

  color:#5b667a;



  font-weight:700;



  font-size:14px;

}





/* ==================================================

   METODOLOGIE

================================================== */



.method-list{

  max-width:1100px;



  margin-top:40px;

}





.method-list article{

  display:grid;



  grid-template-columns:65px 1fr;



  gap:20px;



  padding:25px 0;



  border-bottom:1px solid rgba(255,255,255,.16);

}





.method-list > article > span{

  color:#8fd3ff;



  font-size:27px;



  font-weight:900;

}





.method-list h3{

  margin-bottom:6px;



  color:#ffffff;



  font-size:22px;

}





.method-list p{

  color:#d8e3ef;



  font-size:17px;

}





/* ==================================================

   FORMAZIONE

================================================== */



.training-grid{

  display:grid;



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



  gap:24px;



  margin-top:40px;

}





.training-grid article{

  min-width:0;



  padding:30px;



  background:#f4f7fb;



  border-radius:14px;

}





.training-grid h3{

  margin-bottom:10px;



  color:#061831;



  font-size:23px;

}





.training-grid p{

  color:#5b667a;



  font-size:17px;

}





/* ==================================================

   DOCUMENTI

================================================== */



.documents{

  background:#edf3f8;

}





.document-buttons{

  display:flex;



  flex-wrap:wrap;



  align-items:center;



  gap:16px;



  margin-top:30px;

}





.document-outline{

  display:inline-block;



  min-width:190px;



  padding:16px 30px;



  border:2px solid #075f8f;

  border-radius:8px;



  color:#075f8f;



  text-align:center;



  font-weight:800;



  text-decoration:none;



  transition:

    background .3s ease,

    color .3s ease;

}





.document-outline:hover{

  background:#075f8f;



  color:#ffffff;

}





/* ==================================================

   TORNA AI LAVORI

================================================== */



.softing-back{

  padding:45px 8%;



  border-top:1px solid #dce3eb;



  background:#ffffff;

}





.softing-back a{

  color:#075f8f;



  text-decoration:none;



  font-weight:900;

}





/* ==================================================

   ANIMAZIONI

================================================== */



.reveal{

  opacity:0;



  transform:translateY(30px);



  transition:

    opacity .75s ease,

    transform .75s ease;

}





.reveal.visible{

  opacity:1;



  transform:none;

}





/* ==================================================

   NOTEBOOK

================================================== */



@media(max-width:1200px){



  .softing-top,

  .softing-section,

  .softing-back{

    padding-left:6%;

    padding-right:6%;

  }





  .softing-hero{

    padding-left:6%;

    padding-right:6%;

  }





  .softing-numbers{

    padding-left:6%;

    padding-right:6%;

  }



}





/* ==================================================

   TABLET

================================================== */



@media(max-width:900px){



  .softing-page{

    padding-top:148px;

  }





  .softing-top{

    padding-top:35px;

    padding-bottom:35px;

  }





  .softing-top-inner{

    flex-direction:column;



    align-items:flex-start;

  }





  .softing-main-logo{

    max-width:340px;

  }





  .softing-hero{

    min-height:620px;



    padding-top:80px;

    padding-bottom:70px;

  }





  .softing-numbers{

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

  }





  .software-grid{

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

  }





  .case-study{

    grid-template-columns:1fr;



    gap:40px;

  }



}





/* ==================================================

   SMARTPHONE

================================================== */



@media(max-width:600px){



  .softing-page{

    padding-top:155px;

  }





  .softing-top{

    padding:30px 5%;

  }





  .softing-top-inner{

    gap:24px;

  }





  .softing-main-logo{

    width:100%;

    max-width:290px;

  }





  .softing-top .btn{

    width:100%;

  }





  .softing-hero{

    min-height:620px;



    padding:70px 5% 60px;

  }





  .softing-hero h1{

    font-size:42px;

  }





  .softing-hero-description{

    font-size:18px;

  }





  .softing-buttons{

    flex-direction:column;



    align-items:stretch;



    width:100%;

  }





  .softing-buttons .btn{

    width:100%;

  }





  .softing-numbers{

    grid-template-columns:1fr;



    padding:35px 5%;

  }





  .softing-section{

    padding:70px 5%;

  }





  .softing-section h2{

    font-size:35px;

  }





  .activity-grid,

  .software-grid,

  .training-grid{

    grid-template-columns:1fr;

  }





  .case-study{

    padding:70px 5%;

  }





  .case-panel{

    grid-template-columns:1fr;

  }





  .method-list article{

    grid-template-columns:48px 1fr;



    gap:13px;

  }





  .document-buttons{

    flex-direction:column;



    align-items:stretch;

  }





  .document-buttons .btn,

  .document-outline{

    width:100%;

  }





  .softing-back{

    padding:40px 5%;

  }



}





/* ==================================================

   TELEFONI PICCOLI

================================================== */



@media(max-width:390px){



  .softing-page{

    padding-top:165px;

  }





  .softing-hero h1{

    font-size:36px;

  }





  .softing-section h2{

    font-size:31px;

  }



}





/* ==================================================

   RIDUZIONE ANIMAZIONI

================================================== */



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



  .reveal{

    opacity:1;



    transform:none;



    transition:none;

  }



}