@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root{
  --gold:#c58a18;
  --gold-light:#e7b64d;
  --black:#111318;
  --glass:rgba(255,255,255,.78);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:#090909;
  color:var(--black);
  overflow-x:hidden;
}

.topbar{
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  right:0;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px clamp(22px,4vw,72px);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.18));
  backdrop-filter:blur(10px);
}

.logo{
  color:var(--gold);
  text-decoration:none;
  font-family:Georgia,serif;
  font-size:clamp(30px,4vw,58px);
  line-height:.82;
  letter-spacing:-.05em;
  white-space:nowrap;
}
.logo span{
  display:block;
  margin-top:10px;
  color:#111;
  font-family:Inter,sans-serif;
  font-size:11px;
  letter-spacing:.22em;
  line-height:1.45;
  text-transform:uppercase;
}

nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,34px);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}
nav a{
  color:#111;
  text-decoration:none;
  position:relative;
}
nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:.25s;
}
nav a:hover::after{width:100%}

.contact-btn,.primary,.footbar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-light),#a56c05);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:0 16px 36px rgba(130,80,0,.28);
}

.panel{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:120px clamp(28px,5vw,88px) 110px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.22),rgba(0,0,0,.12)),var(--bg);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 45%,rgba(255,255,255,.48),transparent 28%),
             linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.38));
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(790px,58vw);
}
.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(48px,6vw,104px);
  line-height:.95;
  letter-spacing:-.055em;
  text-transform:uppercase;
  margin-bottom:28px;
}
h1 strong{display:block;color:var(--gold)}
h2{
  font-size:clamp(38px,5vw,78px);
  line-height:1;
  letter-spacing:-.045em;
  margin-bottom:24px;
}
.lead,.glass p,.contact-box p{
  font-size:clamp(18px,2vw,27px);
  line-height:1.45;
  max-width:760px;
}

.metrics{
  position:absolute;
  z-index:3;
  left:clamp(24px,4vw,72px);
  right:clamp(24px,4vw,72px);
  bottom:34px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px 1px;
  border-radius:22px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.metrics article{
  padding:22px 28px;
  background:rgba(15,15,15,.56);
  color:#fff;
}
.metrics b{display:block;color:#fff;font-size:18px}
.metrics span{display:block;color:#f3d9a2;text-transform:uppercase;font-size:12px;font-weight:800;margin-top:6px}

.glass,.contact-box{
  position:relative;
  z-index:2;
  width:min(780px,90vw);
  padding:clamp(32px,5vw,70px);
  border:1px solid rgba(210,154,38,.42);
  border-radius:34px;
  background:var(--glass);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
  backdrop-filter:blur(16px);
}
.split{justify-content:flex-start}
.territory{justify-content:flex-end}

.cards,.steps{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.section-title{
  position:relative;
  z-index:2;
  max-width:960px;
  color:#fff;
  text-shadow:0 4px 28px rgba(0,0,0,.38);
}
.card-grid,.step-row{
  position:relative;
  z-index:2;
  display:grid;
  width:100%;
  gap:5px 22px;
}
.card-grid,.step-row{grid-template-columns:repeat(4,1fr)}
.card-grid article,.step-row article{
  min-height:230px;
  padding:30px;
  border-radius:28px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(197,138,24,.32);
  box-shadow:0 26px 70px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
}
.card-grid span,.step-row b{
  color:var(--gold);
  font-size:44px;
  font-weight:900;
}
.card-grid h3,.step-row h3{font-size:25px;margin:18px 0 10px}
.card-grid p,.step-row p{font-size:17px;line-height:1.45}

.contact{
  justify-content:center;
  text-align:center;
}
.contact::before{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.62))}
.contact-box{background:rgba(255,255,255,.88)}
.contact-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:30px;
}
.contact-list a{
  color:#111;
  border:1px solid rgba(197,138,24,.45);
  border-radius:999px;
  padding:14px 20px;
  text-decoration:none;
  font-weight:800;
  background:#fff;
}

.footbar{
  position:fixed;
  z-index:20;
  left:24px;
  right:24px;
  bottom:16px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:8px 10px 8px 22px;
  border-radius:18px;
  background:rgba(10,10,12,.68);
  color:#fff;
  backdrop-filter:blur(12px);
  font-size:14px;
}
.footbar a{
  min-height:38px;
  padding:0 16px;
  border-radius:12px;
  font-size:12px;
}

.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media (max-width:1000px){
  .topbar{height:auto;align-items:flex-start}
  nav{display:none}
  .contact-btn{display:none}
  .hero-content{width:100%}
  .metrics,.card-grid,.step-row{grid-template-columns:1fr 1fr}
  .panel{background-attachment:scroll}
}
@media (max-width:640px){
  .panel{padding:120px 22px 130px}
  .metrics{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;margin-top:30px}
  .card-grid,.step-row{grid-template-columns:1fr}
  .footbar{left:10px;right:10px;font-size:12px}
  .footbar span:nth-child(2){display:none}
}

.logo img{height:79.2px;width:auto;display:block}.footbar{display:none!important}


.text-box,.content-box,.hero-content,.section-content,.overlay,.caption,.text-panel{
 background:rgba(255,255,255,.08)!important;
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
 border:1px solid rgba(255,255,255,.12);
 box-shadow:2px 2px 2px rgba(0,0,0,.18)!important;
}

/* --- Modifiche richieste: text box a sinistra, trasparenti, con ombra e distanza verticale --- */
.panel,
.split,
.territory,
.contact,
.cards,
.steps{
  justify-content:flex-start!important;
  align-items:center!important;
  text-align:left!important;
}

.hero-content,
.glass,
.contact-box,
.section-title,
.card-grid article,
.step-row article,
.text-box,
.content-box,
.section-content,
.overlay,
.caption,
.text-panel{
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:2px 2px 2px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}

.hero-content,
.section-title{
  padding:clamp(26px,4vw,58px);
  border-radius:34px;
  width:min(780px,90vw)!important;
}

.glass,
.contact-box{
  width:min(780px,90vw)!important;
}

.contact-list{
  justify-content:flex-start!important;
}

.card-grid,
.step-row{
  max-width:1180px;
  margin-left:0!important;
  margin-right:auto!important;
}

.card-grid article,
.step-row article{
  color:#111;
}

@media (max-width:640px){
  .hero-content,
  .glass,
  .contact-box,
  .section-title{
    width:100%!important;
    padding:26px!important;
  }
}


/* --- Regolazioni finali richieste --- */
.logo img{height:79.2px;width:auto;}

.hero-content,
.glass,
.contact-box,
.section-title,
.card-grid article,
.step-row article,
.text-box,
.content-box,
.section-content,
.overlay,
.caption,
.text-panel{
  box-shadow:2px 2px 2px rgba(0,0,0,.18)!important;
}

.card-grid,
.step-row{
  row-gap:5px!important;
}

.metrics{
  row-gap:5px!important;
}


/* spacing between top box and lower boxes */
#vantaggi .section-title,#funziona .section-title{margin-bottom:10px!important;}

/* --- Layout uniforme come Home: box superiore + 10px + box inferiori allineati --- */
#home,
#vantaggi,
#funziona{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding-bottom:34px!important;
}

#home .hero-content,
#vantaggi .section-title,
#funziona .section-title{
  flex:0 0 auto!important;
  margin:0!important;
  width:min(780px,90vw)!important;
}

#home .metrics,
#vantaggi .card-grid,
#funziona .step-row{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:5px 1px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.18)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

#home .metrics article,
#vantaggi .card-grid article,
#funziona .step-row article{
  min-height:0!important;
  border-radius:0!important;
  margin:0!important;
  padding:22px 28px!important;
  background:rgba(15,15,15,.56)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#vantaggi .card-grid span,
#funziona .step-row b{
  display:block!important;
  color:#f3d9a2!important;
  font-size:18px!important;
  line-height:1.1!important;
}

#vantaggi .card-grid h3,
#funziona .step-row h3{
  color:#fff!important;
  font-size:18px!important;
  margin:8px 0 6px!important;
}

#vantaggi .card-grid p,
#funziona .step-row p{
  color:#f3d9a2!important;
  text-transform:none!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.35!important;
  margin:0!important;
}

@media (max-width:1000px){
  #home .metrics,
  #vantaggi .card-grid,
  #funziona .step-row{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media (max-width:640px){
  #home,
  #vantaggi,
  #funziona{
    justify-content:flex-start!important;
    padding-bottom:130px!important;
  }
  #home .metrics,
  #vantaggi .card-grid,
  #funziona .step-row{
    grid-template-columns:1fr!important;
  }
}


/* --- Icone esplicative nei riquadri inferiori --- */
#home .metrics article.feature-card,
#vantaggi .card-grid article.feature-card,
#funziona .step-row article.feature-card{
  position:relative!important;
  min-height:132px!important;
  padding-right:104px!important;
}

.feature-icon{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.96;
  color:var(--gold-light);
  pointer-events:none;
}

.feature-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(2px 2px 2px rgba(0,0,0,.25));
}

#home .metrics article.feature-card b,
#home .metrics article.feature-card span,
#vantaggi .card-grid article.feature-card span,
#vantaggi .card-grid article.feature-card h3,
#vantaggi .card-grid article.feature-card p,
#funziona .step-row article.feature-card b,
#funziona .step-row article.feature-card h3,
#funziona .step-row article.feature-card p{
  max-width:calc(100% - 12px);
}

@media (max-width:640px){
  #home .metrics article.feature-card,
  #vantaggi .card-grid article.feature-card,
  #funziona .step-row article.feature-card{
    padding-right:88px!important;
  }
  .feature-icon{
    right:22px;
    width:48px;
    height:48px;
  }
}

/* --- Modifiche finali: icone Home allineate al testo e ombra mini box contatti --- */
#home .metrics article.feature-card .feature-icon{
  top:22px!important;
  transform:none!important;
}

.contact-list a{
  background:#fff!important;
  box-shadow:2px 2px 2px rgba(0,0,0,.18)!important;
}

@media (max-width:640px){
  #home .metrics article.feature-card .feature-icon{
    top:22px!important;
  }
}


/* --- Effetto onmouseover mini box Contatti: tasto premuto --- */
.contact-list a{
  transition: box-shadow .20s ease, transform .20s ease, background-color .20s ease, filter .20s ease;
  cursor:pointer;
}

.contact-list a:hover{
  transform:translate(1px,1px);
  background:rgba(255,255,255,.92)!important;
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.28),
    inset -1px -1px 2px rgba(255,255,255,.45)!important;
  filter:brightness(1.03);
}

/* --- Pagina Territorio: cartina verticale a sinistra del testo --- */
#territorio.territory{
  justify-content:flex-start!important;
  align-items:center!important;
}

.territory-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(260px,360px) minmax(420px,760px);
  gap:28px;
  align-items:stretch;
  width:min(1160px,94vw);
  margin-left:0!important;
  margin-right:auto!important;
}

.map-box{
  position:relative;
  min-height:560px;
  padding:14px;
  border-radius:34px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:2px 2px 2px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow:hidden;
}

.map-title{
  position:absolute;
  z-index:2;
  left:28px;
  top:26px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,15,15,.58);
  color:#f3d9a2;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:2px 2px 2px rgba(0,0,0,.18);
}

.territory-map{
  width:100%;
  height:100%;
  min-height:532px;
  display:block;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  overflow:hidden;
}

.map-coast,
.map-route{
  fill:none;
  stroke:#0474bf;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.map-coast{stroke:#063b66;stroke-width:2.2;opacity:.45}
.map-route{filter:url(#softShadow)}
.map-road{fill:none;stroke:#f0c15c;stroke-width:7;stroke-linecap:round;opacity:.9}
.map-border{fill:rgba(120,170,92,.16);stroke:#557b43;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 5}
.map-hills{filter:url(#softShadow)}
.map-place circle{fill:#1597df;stroke:#063b66;stroke-width:2;filter:url(#softShadow)}
.map-place text,
.map-label text{
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:900;
  fill:#06255a;
  font-size:16px;
  paint-order:stroke;
  stroke:rgba(255,255,255,.75);
  stroke-width:4px;
  stroke-linejoin:round;
}
.map-place.inland text{fill:#25651f;font-size:18px}
.map-label.sea text{fill:#1676bb;font-size:18px}
.map-small text{
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  fill:#fff;
  font-size:13px;
  font-weight:900;
  paint-order:stroke;
  stroke:#1c7f31;
  stroke-width:8px;
  stroke-linejoin:round;
}
.compass path{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.compass path:first-child{fill:rgba(255,255,255,.42)}
.compass text{font-family:Inter,sans-serif;font-size:16px;font-weight:900;fill:#111}

#territorio .territory-text{
  width:auto!important;
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

@media (max-width:1000px){
  .territory-layout{
    grid-template-columns:1fr;
    width:min(780px,94vw);
  }
  .map-box{min-height:520px;max-width:430px;width:100%;}
  #territorio .territory-text{min-height:auto;}
}

@media (max-width:640px){
  .territory-layout{gap:10px;width:100%;}
  .map-box{min-height:500px;padding:10px;border-radius:28px;}
  .territory-map{min-height:480px;border-radius:20px;}
  .map-title{left:20px;top:20px;font-size:11px;}
  .map-place text,.map-label text{font-size:13px;}
  .map-place.inland text{font-size:15px;}
}


/* --- Territorio: box mappa con sola immagine caricata --- */
.map-box{
  padding:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.map-box .map-title,
.map-box .territory-map{
  display:none!important;
}

.territory-map-img{
  width:100%;
  height:100%;
  min-height:532px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}

@media (max-width:640px){
  .territory-map-img{
    min-height:480px;
    border-radius:20px;
  }
}

/* --- Home page: video di sfondo al posto dell'immagine --- */
#home.video-panel{
  background-image:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.22),rgba(0,0,0,.12)),var(--bg);
  background-color:#090909;
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
}

#home.video-panel::before{
  z-index:1;
  background:radial-gradient(circle at 15% 45%,rgba(255,255,255,.48),transparent 28%),
             linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.18),rgba(0,0,0,.32)),
             linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.38));
}

#home.video-panel .hero-content,
#home.video-panel .metrics{
  z-index:2;
}

@media (max-width:640px){
  .hero-bg-video{
    object-position:center;
  }
}