:root{
--bronze:#7c6247;
--taupe:#9c8973;
--sand:#d9cfc3;
--cream:#f7f3ee;
--paper:#fffdfb;
--ink:#2f2923;
--muted:#6d655d;
--gold:#b78a3f;
--line:#e5ddd4;
--shadow:0 14px 38px rgba(63,48,34,.10)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
color:var(--ink);
background:var(--paper);
line-height:1.6
}

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

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

.container{
width:min(1180px,92vw);
margin:auto
}


/* HEADER */

.topbar{
position:sticky;
top:0;
z-index:30;
background:rgba(255,253,251,.98);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
box-shadow:0 3px 18px rgba(63,48,34,.05)
}

.nav{
height:112px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}

.brand img{
width:310px;
max-height:98px;
object-fit:contain
}

.menu{
display:flex;
align-items:center;
gap:17px;
font-size:13px;
font-weight:750
}

.menu a{
padding:26px 0 22px;
border-bottom:2px solid transparent
}

.menu a:hover,
.menu a.active{
color:var(--bronze);
border-color:var(--gold)
}

.mobile-toggle{
display:none;
background:none;
border:0;
font-size:26px
}


/* ==================================================
   HERO
   ================================================== */

.hero{
min-height:585px;

background:
linear-gradient(
90deg,
rgba(255,253,251,.99) 0%,
rgba(255,253,251,.96) 27%,
rgba(255,253,251,.68) 43%,
rgba(255,253,251,.16) 61%,
rgba(255,253,251,0) 78%
),
url('hero-new.jpg') center 42% / cover no-repeat;

display:flex;
align-items:center;
border-bottom:1px solid var(--line);
position:relative;
overflow:hidden
}

.hero-copy{
max-width:610px;
padding:76px 0 82px;
position:relative;
z-index:2
}

.eyebrow{
font-size:12px;
letter-spacing:.20em;
text-transform:uppercase;
color:var(--gold);
font-weight:800
}

.hero h1{
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(38px,4.1vw,58px);
line-height:1.03;
margin:13px 0 22px;
font-weight:500;
letter-spacing:-.025em
}

.hero p{
font-size:17px;
line-height:1.65;
max-width:585px;
color:#554a40
}

.cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:30px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:13px 20px;
border-radius:6px;
border:1px solid var(--bronze);
font-weight:800;
font-size:14px;
cursor:pointer
}

.btn-primary{
background:var(--bronze);
color:#fff;
box-shadow:0 8px 20px rgba(90,65,44,.13)
}

.btn-secondary{
background:rgba(255,255,255,.90);
color:var(--ink)
}


/* ==================================================
   SEZIONI
   ================================================== */

.section{
padding:82px 0
}

.section.alt{
background:var(--cream)
}

.section.dark{
background:linear-gradient(125deg,#40362d,#251f1a);
color:white
}

.section h2{
font-family:Georgia,serif;
font-size:40px;
font-weight:500;
margin:0 0 14px
}

.lead{
color:var(--muted);
font-size:18px;
max-width:800px
}

.dark .lead{
color:#e5ddd5
}

.rule{
width:62px;
height:3px;
background:var(--gold);
margin:16px 0 24px
}


/* MISSION */

.mission-grid{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:58px;
align-items:center
}

.values{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0
}

.value{
padding:26px 16px;
text-align:center;
border-left:1px solid var(--line)
}

.value:first-child{
border-left:0
}

.icon{
font-size:31px;
color:var(--gold);
margin-bottom:8px
}

.value strong{
display:block;
font-size:13px;
text-transform:uppercase;
letter-spacing:.04em
}


/* ==================================================
   SISTEMA INTEGRATO
   ================================================== */

.system{
display:grid;
grid-template-columns:.85fr 1.65fr;
gap:50px;
align-items:center
}

.brochure-card{
background:rgba(255,255,255,.06);
padding:28px;
border:1px solid rgba(255,255,255,.12);
border-radius:12px
}

.brochure-card img{
border-radius:8px;
box-shadow:0 24px 60px rgba(0,0,0,.28)
}

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

.feature{
border-left:1px solid rgba(255,255,255,.18);
padding-left:18px
}

.feature:first-child{
border-left:0
}

.feature h3{
font-size:16px;
color:#e2b766;
margin:10px 0 6px
}

.feature p{
font-size:14px;
color:#ddd2c6
}


/* ==================================================
   CARDS
   ================================================== */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:34px
}

.card{
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:26px;
box-shadow:var(--shadow);
transition:transform .2s ease,box-shadow .2s ease
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 18px 44px rgba(63,48,34,.13)
}

.card h3{
margin:10px 0 8px
}

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

.process-img{
margin-top:32px;
background:#fff;
padding:18px;
border:1px solid var(--line);
border-radius:14px;
box-shadow:var(--shadow)
}


/* ==================================================
   CLIENTI
   ================================================== */

.clients{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:16px;
margin-top:30px
}

.client{
min-height:96px;
display:flex;
align-items:center;
justify-content:center;
padding:16px 12px;
border:1px solid #e8dfd6;
background:linear-gradient(180deg,#fff,#fdfaf7);
border-radius:14px;
font-weight:800;
font-size:18px;
text-align:center;
box-shadow:0 8px 24px rgba(63,48,34,.055);
white-space:nowrap
}

.client .corp{
font-size:.78em;
font-weight:700;
margin-left:4px;
letter-spacing:.01em
}

.client.italgas{color:#1a67a5}
.client.soigea{color:#17669a}
.client.openfiber{color:#e91f78}
.client.fibercop{color:#1e46a8}
.client.edis{color:#407fc6}
.client.eagle{color:#6f5c44}


/* ==================================================
   CONTATTI
   ================================================== */

.contact-wrap{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:34px
}

.form{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px
}

.form .full{
grid-column:1/-1
}

.form input,
.form textarea{
width:100%;
padding:14px;
border:1px solid #cfc2b6;
border-radius:7px;
background:#fff;
font:inherit
}

.form textarea{
min-height:130px;
resize:vertical
}

.legal{
font-size:12px;
color:var(--muted)
}

.contact-card{
background:var(--cream);
padding:28px;
border-radius:12px;
border:1px solid var(--line)
}

.contact-card strong{
display:block;
margin-top:18px
}

.contact-card p{
margin:6px 0
}


/* CHECKBOX PRIVACY */

.form label.legal{
display:flex;
align-items:flex-start;
gap:12px;
line-height:1.45
}

.form label.legal input[type="checkbox"]{
appearance:auto;
-webkit-appearance:checkbox;
width:26px;
height:26px;
min-width:26px;
min-height:26px;
margin:0 2px 0 0;
cursor:pointer;
accent-color:var(--bronze)
}


/* ==================================================
   FOOTER
   ================================================== */

.footer{
background:#25211e;
color:#efe8e1;
padding:38px 0 22px
}

.footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1.3fr;
gap:28px
}

.footer h4{
margin:0 0 12px;
color:#d9bc83
}

.footer p,
.footer a{
font-size:13px;
color:#d6cec5
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
margin-top:26px;
padding-top:18px;
display:flex;
justify-content:space-between;
gap:15px;
font-size:12px
}


/* ==================================================
   PAGINE INTERNE
   ================================================== */

.page-hero{
padding:90px 0 70px;
background:linear-gradient(135deg,#f7f3ee,#e8ddd2)
}

.page-hero h1{
font-family:Georgia,serif;
font-size:52px;
font-weight:500;
margin:0 0 15px
}

.prose{
max-width:900px
}

.prose h2{
font-family:Georgia,serif;
font-size:34px;
font-weight:500;
margin-top:42px
}

.tag-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px
}

.tag{
padding:8px 12px;
border:1px solid var(--line);
background:#fff;
border-radius:999px;
font-size:13px
}


/* ==================================================
   ASSISTENTE AI
   ================================================== */

.chat-launch{
position:fixed;
right:26px;
bottom:26px;
width:64px;
height:64px;
border:1px solid rgba(255,255,255,.38);
border-radius:50%;
background:linear-gradient(145deg,#c39954,var(--gold));
color:#fff;
font-size:26px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 14px 38px rgba(69,48,27,.28),
inset 0 1px 0 rgba(255,255,255,.28);
cursor:pointer;
z-index:45;
transition:transform .2s ease,box-shadow .2s ease
}

.chat-launch:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 18px 46px rgba(69,48,27,.34)
}

.chatbox{
display:none;
position:fixed;
right:26px;
bottom:104px;
width:min(410px,calc(100vw - 32px));
height:min(610px,calc(100vh - 135px));
background:#fff;
border:1px solid rgba(124,98,71,.18);
border-radius:20px;
box-shadow:0 28px 80px rgba(39,30,22,.28);
z-index:46;
overflow:hidden
}

.chatbox.open{
display:flex;
flex-direction:column;
animation:chatOpen .2s ease-out
}

@keyframes chatOpen{
from{
opacity:0;
transform:translateY(12px) scale(.985)
}
to{
opacity:1;
transform:translateY(0) scale(1)
}
}


/* HEADER CHAT */

.chathead{
min-height:78px;
padding:15px 18px;
background:linear-gradient(
135deg,
#493c31 0%,
#66503d 55%,
#7c6247 100%
);
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border-bottom:0
}

.chathead strong{
font-family:Georgia,'Times New Roman',serif;
font-size:18px;
font-weight:500;
letter-spacing:.01em
}

.chathead small{
display:block;
margin-top:2px;
font-family:Inter,system-ui,sans-serif;
font-size:11px;
font-weight:500;
color:rgba(255,255,255,.72);
letter-spacing:.02em
}

.chathead button{
width:34px;
height:34px;
padding:0;
border:1px solid rgba(255,255,255,.20);
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
font-size:20px;
cursor:pointer;
transition:background .2s ease
}

.chathead button:hover{
background:rgba(255,255,255,.18)
}


/* AREA MESSAGGI */

.chatlog{
flex:1;
padding:20px 17px;
overflow-y:auto;
overflow-x:hidden;
background:linear-gradient(180deg,#fff 0%,#fdfbf9 100%);
scroll-behavior:smooth
}

.chatlog::-webkit-scrollbar{
width:6px
}

.chatlog::-webkit-scrollbar-thumb{
background:#d7cdc2;
border-radius:20px
}

.msg{
max-width:86%;
padding:11px 14px;
border-radius:15px;
margin:9px 0;
font-size:14px;
line-height:1.5;
word-wrap:break-word;
white-space:pre-wrap
}

.msg.bot{
background:#f5f0ea;
border:1px solid #e8ded4;
border-bottom-left-radius:5px;
color:#3c332c;
box-shadow:0 3px 10px rgba(80,60,42,.04)
}

.msg.user{
background:linear-gradient(135deg,#80664d,#6d543e);
color:#fff;
margin-left:auto;
border-bottom-right-radius:5px;
box-shadow:0 5px 15px rgba(80,58,39,.15)
}


/* INPUT CHAT */

.chatinput{
display:flex;
align-items:center;
gap:9px;
padding:13px 14px 14px;
border-top:1px solid var(--line);
background:#fff
}

.chatinput input{
flex:1;
height:46px;
padding:0 15px;
border:1px solid #d8cec5;
border-radius:23px;
background:#fbfaf8;
font:inherit;
font-size:14px;
color:var(--ink);
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

.chatinput input:focus{
background:#fff;
border-color:#aa8a68;
box-shadow:0 0 0 3px rgba(183,138,63,.11)
}

.chatinput input::placeholder{
color:#92877c
}

.chatinput button{
width:46px;
height:46px;
min-width:46px;
border:0;
border-radius:50%;
background:var(--bronze);
color:#fff;
font-size:16px;
font-weight:700;
padding:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 5px 14px rgba(76,54,36,.18);
transition:transform .15s ease,background .2s ease
}

.chatinput button:hover{
background:#684f3a;
transform:translateY(-1px)
}

.chatinput button:active{
transform:scale(.96)
}


/* AVVISI */

.notice{
padding:12px 14px;
background:#fff7e5;
border:1px solid #ead09d;
border-radius:8px;
font-size:13px;
margin-top:18px
}


/* ==================================================
   TABLET
   ================================================== */

@media(max-width:900px){

.menu{
display:none;
position:absolute;
top:104px;
left:0;
right:0;
background:#fff;
padding:20px;
flex-direction:column;
align-items:flex-start
}

.menu.open{
display:flex
}

.mobile-toggle{
display:block
}

.mission-grid,
.system,
.contact-wrap{
grid-template-columns:1fr
}

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

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

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

.clients{
grid-template-columns:repeat(3,1fr)
}

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

.nav{
height:104px
}

.hero{
min-height:620px;
background:
linear-gradient(
90deg,
rgba(255,253,251,.98) 0%,
rgba(255,253,251,.91) 46%,
rgba(255,253,251,.34) 72%
),
url('hero-new.jpg') 58% center/cover no-repeat
}

.hero-copy{
max-width:72%;
padding:72px 0
}

.hero h1{
font-size:44px
}

}


/* ==================================================
   MOBILE
   ================================================== */

@media(max-width:600px){

.brand img{
width:240px
}

.nav{
height:94px
}

.menu{
top:94px
}

.hero{
min-height:650px;
background:
linear-gradient(
180deg,
rgba(255,253,251,.99) 0%,
rgba(255,253,251,.94) 50%,
rgba(255,253,251,.52) 73%,
rgba(255,253,251,.18) 100%
),
url('hero-new.jpg') 66% center/cover no-repeat;
align-items:flex-start
}

.hero-copy{
max-width:100%;
padding:50px 0 220px
}

.hero h1{
font-size:38px
}

.hero p{
font-size:15px;
max-width:94%
}

.cta-row{
gap:9px
}

.btn{
font-size:13px;
padding:12px 15px
}

.section{
padding:60px 0
}

.section h2{
font-size:32px
}

.features,
.cards,
.clients,
.footer-grid{
grid-template-columns:1fr
}

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

.form .full{
grid-column:auto
}

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

.footer-bottom{
flex-direction:column
}

.form label.legal input[type="checkbox"]{
width:28px;
height:28px;
min-width:28px;
min-height:28px
}


/* CHAT MOBILE */

.chat-launch{
right:18px;
bottom:18px;
width:60px;
height:60px
}

.chatbox{
right:10px;
bottom:88px;
width:calc(100vw - 20px);
height:min(650px,calc(100vh - 105px));
border-radius:18px
}

.chathead{
min-height:72px;
padding:13px 15px
}

.chatlog{
padding:16px 13px
}

.msg{
max-width:90%;
font-size:14px
}

.chatinput{
padding:11px
}

.chatinput input{
height:44px
}

.chatinput button{
width:44px;
height:44px;
min-width:44px
}

} /* ===== HERO DESKTOP - INQUADRATURA DEFINITIVA ===== */
@media (min-width:901px){
  .hero{
    min-height:585px;
    background:
      linear-gradient(
        90deg,
        rgba(255,253,251,.99) 0%,
        rgba(255,253,251,.96) 27%,
        rgba(255,253,251,.68) 43%,
        rgba(255,253,251,.16) 61%,
        rgba(255,253,251,0) 78%
      ),
      url('hero-new.jpg') right center / auto 155% no-repeat;
    background-color:#fffdfb;
  }
}