/* ===========================================================
   NIOSTELE — style.css
   Identità industriale: acciaio, rame, taglio laser diagonale
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --carbonio:#10161D;
  --acciaio:#2E4A5E;
  --acciaio-2:#3E6178;
  --rame:#C4571E;
  --rame-dark:#9E4517;
  --platino:#EDEEF0;
  --bianco:#FFFFFF;
  --grafite:#4B535A;
  --linea: rgba(16,22,29,0.14);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--platino); color:var(--carbonio);
  font-family:'Inter', system-ui, sans-serif; font-size:17px; line-height:1.6;
}
h1,h2,h3,.display{
  font-family:'Oswald', sans-serif; font-weight:600; text-transform:none;
  color:var(--carbonio); line-height:1.15; margin:0 0 .45em; letter-spacing:.2px;
}
h1{font-size:clamp(2.1rem,4.6vw,3.2rem);}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em; max-width:66ch;}
a{color:var(--rame-dark);}
img{max-width:100%; display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}

/* ---------- Header ---------- */
header.site{background:var(--bianco); border-bottom:3px solid var(--carbonio); position:sticky; top:0; z-index:50;}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:16px 26px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--carbonio);}
.brand .mark{font-family:'Oswald'; font-weight:700; font-size:1.5rem; letter-spacing:.5px;}
.brand .sub{font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--grafite);}
nav.main{display:flex; gap:24px; flex-wrap:wrap;}
nav.main a{color:var(--carbonio); text-decoration:none; font-weight:500; font-size:.95rem; padding:4px 0; border-bottom:2px solid transparent;}
nav.main a:hover, nav.main a.active{border-bottom-color:var(--rame);}
.nav-toggle{display:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-block; padding:13px 26px; font-weight:600; text-decoration:none; font-size:.98rem; border:2px solid transparent;}
.btn-primary{background:var(--rame); color:#fff;}
.btn-primary:hover{background:var(--rame-dark);}
.btn-outline{background:transparent; border-color:var(--carbonio); color:var(--carbonio);}
.btn-outline:hover{background:var(--carbonio); color:#fff;}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.5); color:#fff;}
.btn-outline-light:hover{border-color:#fff;}

/* ---------- Hero (taglio diagonale) ---------- */
.hero{
  background:var(--carbonio); color:#fff; position:relative; overflow:hidden;
  padding:70px 0 90px;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.hero .wrap{position:relative; z-index:2;}
.hero .kicker{font-family:'IBM Plex Mono'; font-size:.82rem; color:var(--rame); display:block; margin-bottom:14px;}
.hero h1{color:#fff; max-width:14ch;}
.hero p.lede{color:#C7CDD3; font-size:1.12rem; max-width:56ch;}
.hero .cut{position:absolute; right:-6%; top:-10%; width:60%; height:130%; background:linear-gradient(120deg, transparent 40%, rgba(196,87,30,0.14) 41%, rgba(196,87,30,0.14) 43%, transparent 44%); z-index:1;}

.page-hero{background:var(--carbonio); color:#fff; padding:56px 0 64px; clip-path: polygon(0 0,100% 0,100% 100%,0 92%);}
.page-hero .kicker{font-family:'IBM Plex Mono'; font-size:.8rem; color:var(--rame); display:block; margin-bottom:10px;}
.page-hero h1{color:#fff;}
.page-hero p{color:#C7CDD3; max-width:60ch;}

/* ---------- Sections ---------- */
section{padding:52px 0;}
section.alt{background:var(--bianco); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);}
.section-head{max-width:680px; margin-bottom:30px;}

/* ---------- Blocchi con bordo sinistro (non card con ombra) ---------- */
.blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea);}
.blocks.two{grid-template-columns:repeat(2,1fr);}
.block{background:var(--bianco); padding:24px 26px; border-left:3px solid var(--acciaio);}
.block.rame{border-left-color:var(--rame);}
.block h3{margin-bottom:.35em; font-size:1.05rem;}
.block p{color:var(--grafite); font-size:.95rem; margin:0;}

/* ---------- Processo numerato (sequenza reale) ---------- */
.process{list-style:none; margin:0; padding:0; counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.process li{counter-increment:step; padding:20px 20px 20px 0; border-top:3px solid var(--carbonio); position:relative;}
.process li::before{
  content:counter(step,decimal-leading-zero); font-family:'IBM Plex Mono'; font-size:.85rem; color:var(--rame);
  display:block; margin-bottom:8px;
}
.process li h4{font-family:'Oswald'; font-size:1.02rem; margin:0 0 6px; font-weight:600;}
.process li p{font-size:.9rem; color:var(--grafite); margin:0;}

/* ---------- Tabelle tecniche ---------- */
table.spec{width:100%; border-collapse:collapse; background:var(--bianco);}
table.spec th, table.spec td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--linea); font-size:.95rem;}
table.spec th{font-family:'IBM Plex Mono'; font-size:.78rem; color:var(--grafite); font-weight:600; border-bottom:2px solid var(--carbonio);}
table.spec td.mono{font-family:'IBM Plex Mono'; font-size:.88rem;}

/* ---------- Pill tags ---------- */
.tags{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0;}
.tags span{background:var(--carbonio); color:#fff; padding:8px 16px; font-size:.86rem; font-weight:500;}

/* ---------- Settori grid ---------- */
.settori-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea);}
.settore{background:var(--bianco); padding:22px 24px;}
.settore h3{font-size:1rem; margin-bottom:.3em;}
.settore p{font-size:.9rem; color:var(--grafite); margin:0;}

/* ---------- News list ---------- */
.news-list{display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea);}
.news-row{background:var(--bianco); padding:22px 26px; display:grid; grid-template-columns:140px 1fr; gap:22px; text-decoration:none; color:var(--carbonio);}
.news-row:hover{background:#F7F8F9;}
.news-row .tag{font-family:'IBM Plex Mono'; font-size:.76rem; color:var(--rame-dark); align-self:start;}
.news-row h3{margin:0 0 6px; font-size:1.08rem;}
.news-row p{margin:0; color:var(--grafite); font-size:.92rem;}

/* ---------- Article ---------- */
.article-body{max-width:720px;}
.article-body h2{margin-top:1.4em; font-size:1.4rem;}
.article-body ul{padding-left:1.2em;}
.article-cta{background:var(--carbonio); color:#fff; padding:26px 30px; margin-top:36px; max-width:720px;}
.article-cta a{color:var(--rame); font-weight:600;}

/* ---------- Info box contatti ---------- */
.infobox{background:var(--bianco); border-left:3px solid var(--rame); padding:22px 26px; display:grid; gap:8px;}
.infobox strong{font-family:'IBM Plex Mono'; font-size:.8rem; color:var(--grafite); display:block; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}

/* ---------- Form ---------- */
form.contact{display:grid; gap:16px; max-width:560px;}
form.contact label{font-weight:600; font-size:.9rem; display:block; margin-bottom:5px;}
form.contact input, form.contact select, form.contact textarea{
  width:100%; padding:12px 14px; border:1px solid var(--linea); background:var(--bianco);
  font-family:inherit; font-size:1rem;
}
form.contact input:focus, form.contact textarea:focus{outline:2px solid var(--rame); border-color:var(--rame);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--carbonio); color:#fff; padding:38px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:#fff; margin:0;}
.cta-band p{color:#C7CDD3; margin:6px 0 0;}

/* ---------- Footer ---------- */
footer.site{background:var(--carbonio); color:#C7CDD3; padding:44px 0 24px; margin-top:0;}
footer.site a{color:#C7CDD3; text-decoration:none;}
footer.site a:hover{color:#fff;}
footer.site .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px;}
footer.site h4{font-family:'Oswald'; color:#fff; font-weight:600; margin:0 0 12px; font-size:1rem;}
footer.site ul{list-style:none; margin:0; padding:0;}
footer.site li{margin-bottom:7px; font-size:.92rem;}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:16px; font-size:.82rem; opacity:.75;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .blocks, .blocks.two, .settori-grid, .process{grid-template-columns:1fr;}
  footer.site .cols{grid-template-columns:1fr; gap:20px;}
  .news-row{grid-template-columns:1fr;}
  nav.main{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:16px 26px; border-bottom:3px solid var(--carbonio);}
  nav.main.open{display:flex;}
  .nav-toggle{display:inline-block; background:none; border:none; font-size:1.6rem; cursor:pointer;}
  .cta-band{flex-direction:column; text-align:left;}
}