:root{--dark:#0c1219;--steel:#2b3946;--light:#f3f5f6;--accent:#f28c28;--text:#1a2530;--muted:#66727d;--white:#fff;--max:1180px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.6}

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

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

.container{width:min(92%,var(--max));margin:auto}

.section{padding:88px 0}

.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}

.section h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:.4rem 0 1rem}

.lead{font-size:1.12rem;color:var(--muted);max-width:760px}

.btn{display:inline-block;padding:14px 22px;border-radius:4px;font-weight:700;transition:.2s}

.btn-primary{background:var(--accent);color:#111}

.btn-primary:hover{transform:translateY(-2px)}

.btn-outline{border:1px solid rgba(255,255,255,.55);color:#fff;margin-left:10px}

.site-header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(8,13,19,.86);backdrop-filter:blur(10px);color:#fff}

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

.brand{font-size:1.35rem;font-weight:800;letter-spacing:.08em}

.brand span{color:var(--accent)}

.menu{display:flex;gap:26px;align-items:center}

.menu a{font-size:.95rem}

.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem}

.hero{min-height:92vh;background:linear-gradient(90deg,rgba(4,8,12,.88),rgba(4,8,12,.32)),url('../img/hero-metal.svg') center/cover;display:grid;align-items:center;color:#fff;padding-top:78px}

.hero-content{max-width:830px}

.hero h1{font-size:18px;line-height:.98;margin:.5rem 0 1.2rem}

.hero p{font-size:1.2rem;max-width:680px;color:#d4dbe1}

.hero-actions{margin-top:30px}

.stats{background:var(--dark);color:#fff}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#34404a}

.stat{background:var(--dark);padding:34px;text-align:center}

.stat strong{display:block;font-size:2rem;color:var(--accent)}

.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}

.about-card{background:linear-gradient(145deg,#f5f7f8,#dce2e6);padding:50px;border-left:6px solid var(--accent)}

.services{background:var(--light)}

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

.card{background:#fff;box-shadow:0 14px 40px rgba(23,34,44,.08);overflow:hidden}

.card img{width:100%;height:230px;object-fit:cover}

.card-body{padding:26px}

.card h3{margin:0 0 8px;font-size:1.35rem}

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

.project{position:relative;overflow:hidden;background:#111}

.project img{aspect-ratio:4/3;object-fit:cover;transition:.35s}

.project:hover img{transform:scale(1.04)}

.project span{position:absolute;left:18px;bottom:18px;color:#fff;background:rgba(10,15,20,.82);padding:8px 12px;font-weight:700}

.cta{background:linear-gradient(120deg,#111a23,#31404d);color:#fff}

.cta-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px}

.contact-list{list-style:none;padding:0}

.contact-list li{margin:12px 0;color:var(--muted)}

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

input,textarea{width:100%;padding:14px;border:1px solid #cfd6dc;border-radius:3px;font:inherit}

textarea{min-height:150px;grid-column:1/-1}

form .btn{border:0;cursor:pointer;justify-self:start}

.footer{background:#080d12;color:#c4ccd3;padding:38px 0}

.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:center}

.small{font-size:.86rem;color:#8e9aa5}


@media(max-width:860px){

.menu-toggle{display:block}

.menu{position:absolute;top:78px;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;background:#0b1117;padding:22px 4%}

.menu.open{display:flex}

.about-grid,.contact-grid,.cta-grid{grid-template-columns:1fr}

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

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

.cta-grid .btn{justify-self:start}

}


@media(max-width:560px){

.section{padding:65px 0}

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

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

.stat{padding:22px 12px}

.btn-outline{margin-left:0;margin-top:10px}

.hero h1{font-size:26px}

form{grid-template-columns:1fr}

.footer-grid{display:block}

}


.page-hero{padding:150px 0 75px;background:linear-gradient(120deg,#0c1219,#31404d);color:#fff}

.page-hero h1{font-size:18px;line-height:1;margin:.5rem 0 1rem}

.page-hero p{max-width:760px;color:#d9e0e5;font-size:1.15rem}

.breadcrumbs{display:flex;gap:10px;padding-top:20px;color:var(--muted);font-size:.9rem}

.content-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:55px}

.side-card{background:var(--light);padding:26px;align-self:start}

.side-card img{margin-bottom:22px}

.check-list{padding-left:1.2rem}

.check-list li{margin:.7rem 0}

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

.category-cards .card{min-height:210px}

.text-link,.card a{font-weight:700}

.dropdown{position:relative}

.dropdown-menu{display:none;position:absolute;top:100%;left:-18px;min-width:260px;background:#0b1117;padding:12px;box-shadow:0 16px 35px rgba(0,0,0,.25)}

.dropdown-menu a{display:block;padding:9px 10px}

.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}

.mail-form label{display:grid;gap:6px;font-weight:700}

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

.form-note{font-weight:400;color:var(--muted);font-size:.88rem}


@media(max-width:860px){

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

.dropdown{width:100%}

.dropdown-menu{position:static;display:block;background:transparent;box-shadow:none;padding:5px 0 0 15px}

.dropdown-menu a{font-size:.88rem}

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

}


.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:40px;
}

.gallery-item{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.gallery-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.gallery-item img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
}

.gallery-item h3{
    margin:20px 20px 10px;
}

.gallery-item p{
    margin:0 20px 25px;
    color:#666;
    line-height:1.6;
}
.footer-logo {
    width: 180px;
    height: auto;
    display: block;
    margin-bottom: 12px;
}
.hero {
    padding: 130px 0 80px;
    background: #0c1219;
    color: #fff;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


/* TESTO */

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    color: #f28c28;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: 58px;
    line-height: 1.05;
    margin: 0 0 25px;
    max-width: 600px;
}

.hero-lead {
    font-size: 20px;
    line-height: 1.6;
    max-width: 600px;
    color: #d7dde2;
}

.hero-area {
    margin-top: 20px;
    font-size: 15px;
    letter-spacing: 1px;
    color: #aeb8c2;
}


/* BOTTONI */

.hero-actions {
    display: flex;
    gap: 15px;
    margin-top: 35px;
}


/* PUNTI DI FORZA */

.hero-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.hero-points strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.hero-points span {
    display: block;
    font-size: 13px;
    color: #9ba6af;
    line-height: 1.4;
}


/* IMMAGINI */

.hero-images {
    position: relative;
    min-height: 520px;
}

.hero-img {
    object-fit: cover;
    border-radius: 4px;
}

.hero-img-main {
    width: 88%;
    height: 470px;
    display: block;
    margin-left: auto;
}

.hero-img-small {
    position: absolute;
    width: 48%;
    height: 220px;
    left: 0;
    bottom: 0;
    border: 8px solid #0c1219;
}


/* MOBILE */

@media (max-width: 900px) {

    .hero {
        padding: 110px 0 60px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-images {
        min-height: 420px;
    }

    .hero-img-main {
        height: 380px;
    }

    .hero-img-small {
        height: 180px;
    }

    .hero-points {
        grid-template-columns: 1fr;
        gap: 15px;
    }

}

@media (max-width: 600px) {

    .hero h1 {
        font-size: 36px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-images {
        min-height: auto;
    }

    .hero-img-main {
        width: 100%;
        height: 300px;
    }

    .hero-img-small {
        display: none;
    }

}
/* PORTFOLIO */

.portfolio-hero {
    background: #0c1219;
    color: #fff;
    padding: 140px 0 70px;
}

.portfolio-hero h1 {
    font-size: 52px;
    margin: 10px 0 20px;
}

.portfolio-hero p {
    max-width: 720px;
    font-size: 19px;
    line-height: 1.6;
    color: #c8d0d7;
}


.portfolio-section {
    padding: 70px 0 100px;
}


/* FILTRI */

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    border: 1px solid #ccd2d7;
    background: #fff;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    transition: .25s;
}

.filter-btn:hover,
.filter-btn.active {
    background: #0c1219;
    color: #fff;
    border-color: #0c1219;
}


/* GALLERY */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 290px;
    gap: 18px;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.portfolio-large {
    grid-column: span 2;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}


/* OVERLAY */

.portfolio-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 55px 25px 22px;

    color: #fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.85)
        );
}

.portfolio-overlay span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #f28c28;
}

.portfolio-overlay h2 {
    margin: 7px 0 0;
    font-size: 20px;
}


/* TABLET */

@media (max-width: 900px) {

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

}


/* MOBILE */

@media (max-width: 600px) {

    .portfolio-hero h1 {
        font-size: 36px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 270px;
    }

    .portfolio-large {
        grid-column: span 1;
    }

}