:root{
 --navy:#08142d;
 --gold:#b8893b;
 --cream:#f6f1e8;
 --paper:#fffdf8;
 --muted:#667085;
 --line:#e8dfd0
}

*{box-sizing:border-box}

body{
 margin:0;
 background:var(--cream);
 color:var(--navy);
 font-family:Inter,Segoe UI,Arial,sans-serif;
 line-height:1.6
}

a{color:inherit}

.wrap{
 max-width:1180px;
 margin:auto;
 padding:0 28px
}

header{
 position:sticky;
 top:0;
 z-index:10;
 background:rgba(246,241,232,.94);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line)
}

.head{
 min-height:86px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:24px
}

.brand{
 display:flex;
 align-items:center;
 gap:14px;
 text-decoration:none
}

.brand img{
 width:42px;
 height:42px;
 object-fit:contain
}

.brand strong{
 font-family:Georgia,serif;
 font-size:20px;
 letter-spacing:.06em;
 line-height:1.05
}

.brand span{
 display:block;
 color:var(--gold);
 font-size:12px;
 letter-spacing:.18em;
 text-transform:uppercase;
 margin-top:4px
}

nav{
 display:flex;
 gap:24px;
 align-items:center;
 font-weight:700;
 font-size:14px
}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:14px;
 padding:14px 20px;
 text-decoration:none;
 font-weight:800;
 border:1px solid var(--navy)
}

.btn.primary{
 background:var(--navy);
 color:#fff
}

.btn.gold{
 background:var(--gold);
 border-color:var(--gold);
 color:#fff
}

.hero{
 padding:82px 0 68px;
 display:grid;
 grid-template-columns:1.08fr .92fr;
 gap:54px;
 align-items:center
}

.eyebrow{
 color:var(--gold);
 font-weight:900;
 letter-spacing:.22em;
 font-size:13px;
 text-transform:uppercase
}

.hero h1{
 font-family:Georgia,serif;
 font-size:clamp(46px,6.5vw,80px);
 line-height:1;
 margin:18px 0 24px
}

.hero p{
 font-size:20px;
 max-width:670px
}

.actions{
 display:flex;
 gap:14px;
 flex-wrap:wrap;
 margin-top:30px
}

.panel{
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:30px;
 padding:34px;
 box-shadow:0 24px 80px rgba(8,20,45,.10)
}

.panel h2{
 font-family:Georgia,serif;
 font-size:35px;
 margin:0 0 10px
}

.section{
 padding:66px 0
}

.section h2{
 font-family:Georgia,serif;
 font-size:clamp(36px,5vw,50px);
 line-height:1.08;
 margin:0 0 18px
}

.intro{
 max-width:850px;
 font-size:18px
}

.muted{color:var(--muted)}

.need-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 margin-top:32px
}

.need{
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:24px;
 padding:27px
}

.need .number{
 color:var(--gold);
 font-weight:900;
 letter-spacing:.15em;
 font-size:12px
}

.need h3{
 font-family:Georgia,serif;
 font-size:27px;
 line-height:1.1;
 margin:10px 0 13px
}

.need ul{
 padding-left:20px;
 margin-bottom:0
}

.need a{
 text-decoration:none
}

.need a:hover{
 text-decoration:underline
}

.principles{
 background:var(--navy);
 color:#fff;
 padding:62px 0
}

.principles h2{
 font-family:Georgia,serif;
 font-size:clamp(36px,5vw,48px);
 line-height:1.08;
 margin:0 0 18px
}

.principles p{
 color:#d9e3f0;
 max-width:950px;
 font-size:18px
}

.principles strong{
 color:#fff
}

.steps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:16px;
 margin-top:30px;
 counter-reset:s
}

.step{
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:22px;
 padding:22px
}

.step:before{
 counter-increment:s;
 content:'0' counter(s);
 color:var(--gold);
 font-weight:900;
 letter-spacing:.18em
}

.step h3{
 font-family:Georgia,serif;
 font-size:23px;
 margin:7px 0
}

.network{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 margin-top:28px
}

.network .card{
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:24px;
 padding:26px
}

.network h3{
 font-family:Georgia,serif;
 font-size:25px;
 margin:0 0 8px
}

.network a{
 font-weight:800
}

.notice{
 background:#fff6e4;
 border:1px solid #ead5a8;
 border-radius:18px;
 padding:18px;
 margin-top:20px
}

.footer{
 background:var(--navy);
 color:#fff;
 padding:42px 0;
 margin-top:40px
}

.footer p{color:#cbd5e1}

.footer a{color:#fff}

@media(max-width:900px){
 .hero,
 .need-grid,
 .steps,
 .network{
   grid-template-columns:1fr
 }
 nav{display:none}
 .head{
   min-height:auto;
   padding:14px 0
 }
 .hero{padding-top:48px}
 .brand strong{font-size:17px}
}
/* 10G-F2D - link interni card servizi */
.need li a{
  color:inherit;
  text-decoration:none;
}
.need li a:hover{
  color:var(--gold);
  text-decoration:none;
}


/* Collaudo: ancore sotto l’intestazione e margini della home mobile. */
html{scroll-padding-top:120px}
@media(max-width:900px){.wrap.hero{padding-left:28px;padding-right:28px}}

/* Impaginazione della pagina contatti. */
main{padding:24px 0 40px}
.contact-request{scroll-margin-top:120px}
@media(max-width:900px){.head{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}nav{flex-wrap:wrap;gap:12px 18px}}
@media(max-width:620px){.brand strong{font-size:17px}nav{font-size:13px}.contact-request{margin:20px 16px;padding:24px 20px}}