/* ============================================================
   ITELCO Broadcast — Main stylesheet
   Palette e tipografia dal design Figma (Main Page)
   ============================================================ */

:root {
    --itelco-red: #c82128;
    --itelco-navy: #0f172a;
    --itelco-navy-light: #334f90;
    --itelco-orange: #ff6b35;
    --itelco-orange-light: #ff5349;
    --itelco-card-bg: #f5f8fa;
    --itelco-grey: #808080;
    --itelco-text: #000000;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--itelco-text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* Container con padding laterale da 100px come da Figma (1440px) */
.itelco-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
}

@media (max-width: 1199px) {
    .itelco-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 767px) {
    .itelco-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   TOP BAR (gruppo Dacta)
   ============================================================ */
.topbar {
    background: linear-gradient(180deg, #334f90 0%, #0f172a 100%);
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.topbar .itelco-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.topbar-dacta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.topbar-brands {
    display: flex;
    align-items: center;
    gap: 15px;
}

.topbar-brands a {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
}

.topbar-brands a.is-active {
    color: var(--itelco-orange-light);
}

.topbar-brands .divider {
    width: 1px;
    height: 26px;
    background: #ffffff;
    display: inline-block;
}

.topbar-dacta img {
    height: 25px;
    width: auto;
}

.topbar-social {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-social a {
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px;
}

.lang-switch a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.6;
}

.lang-switch a.is-active {
    opacity: 1;
    color: var(--itelco-orange-light);
}

/* ============================================================
   NAVBAR (bianca)
   ============================================================ */
.main-nav {
    background: #ffffff;
    min-height: 100px;
    display: flex;
    align-items: center;
    padding: 20px 0;
    position: relative;
}

.main-nav .itelco-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-nav .nav-logo img {
    width: 150px;
    height: 60px;
    object-fit: contain;
}

.main-nav-links {
    display: flex;
    align-items: center;
    gap: 60px;
}

.main-nav-links > a,
.main-nav-links .nav-dropdown > a {
    color: #4e4e4e;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    transition: color 0.15s ease;
}

.main-nav-links > a:hover,
.main-nav-links .nav-dropdown:hover > a {
    color: var(--itelco-red);
}

.nav-dropdown {
    position: static;
}

.nav-dropdown > a .caret {
    display: none;
    margin-left: 6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
    vertical-align: middle;
}

/* Il triangolino compare solo quando il menu è aperto */
.nav-dropdown.is-open > .nav-dropdown-toggle .caret {
    display: inline-block;
}

/* ===== MEGA MENU ===== */
.mega-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 3px solid var(--itelco-red);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;
}

/* Apertura al click (classe gestita via JS) */
.nav-dropdown.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* "Products" diventa rosso e sottolineato quando il mega menu è aperto */
.nav-dropdown.is-open > .nav-dropdown-toggle {
    color: var(--itelco-red);
}

.mega-sidebar {
    flex: 0 0 300px;
    background: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    padding: 28px 30px 36px 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    text-align: left;
    font-size: 15px;
    line-height: 1.2;
    color: #1a1a1a;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.mega-cat i {
    font-size: 17px;
}

.mega-cat:hover,
.mega-cat.is-active {
    color: var(--itelco-red);
}

.mega-content {
    flex: 1 1 auto;
    padding: 28px 100px 36px 50px;
}

.mega-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: var(--itelco-orange);
    margin: 0 0 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--itelco-orange);
}

.mega-cols {
    display: flex;
    gap: 50px;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 0;
}

.mega-col a {
    font-size: 15px;
    line-height: 1.2;
    color: #333333;
    transition: color 0.15s ease;
}

.mega-col a:hover {
    color: var(--itelco-red);
}

/* Filtro categorie: nasconde le colonne non pertinenti */
.mega-menu[data-active="tv"] .mega-col[data-group="dab"],
.mega-menu[data-active="dab"] .mega-col[data-group="tv"] {
    display: none;
}

.nav-search {
    color: #000000;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

@media (max-width: 1250px) {
    /* TOP BAR: nascondo Elenos e Protelevision, restano "Dacta Group Company | Itelco" + logo Dacta centrato + social + lingua */
    .topbar-brands .brand-extra {
        display: none;
    }
    .topbar-brands .divider-extra {
        display: none;
    }

    /* NAVBAR: hamburger con menù a tendina */
    .nav-toggle {
        display: block;
    }
    .main-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 40px 16px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    .main-nav-links.is-open {
        display: flex;
    }
    .main-nav-links > a,
    .main-nav-links .nav-dropdown > a {
        font-size: 18px;
        display: block;
        padding: 13px 0;
    }
    .nav-dropdown {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
    }
    /* MEGA MENU su mobile: accordion, nascosto finché non clicchi la voce */
    .mega-menu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        border-top: none;
        box-shadow: none;
        margin: 0 0 14px 0;
    }
    .nav-dropdown.is-open .mega-menu {
        display: block;
    }
    .mega-sidebar {
        display: none;
    }
    .mega-content {
        padding: 0;
    }
    .mega-title {
        display: none;
    }
    .mega-cols {
        flex-direction: column;
        gap: 22px;
    }
    .mega-col a {
        font-size: 17px;
    }
    /* Su mobile mostro tutti i prodotti, niente filtro */
    .mega-menu[data-active="tv"] .mega-col[data-group="dab"],
    .mega-menu[data-active="dab"] .mega-col[data-group="tv"] {
        display: flex;
    }
}

@media (max-width: 767px) {
    .main-nav-links {
        padding: 24px 20px;
    }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
}

.hero-slider {
    position: relative;
    width: 100%;
    margin-top: 30px;
    aspect-ratio: 1240 / 481;
    overflow: hidden;
}
.hero-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
    will-change: transform;
}
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-cta {
    position: absolute;
    left: 60px;
    bottom: 52px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: var(--itelco-red);
    color: #ffffff;
    font-weight: 700;
    font-size: 17px;
    border-radius: 4px;
    text-decoration: none;
    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.hero-cta:hover {
    background: #a91b21;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(200, 33, 40, 0.3);
}
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--itelco-navy);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease;
    z-index: 3;
}
.hero-arrow:hover {
    background: #ffffff;
}
.hero-arrow--prev {
    left: 24px;
}
.hero-arrow--next {
    right: 24px;
}
.hero-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
}
.hero-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #cbd2de;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
}
.hero-dot:hover {
    background: #9aa6b8;
}
.hero-dot.is-active {
    background: var(--itelco-red);
    transform: scale(1.15);
}

.hero .itelco-container {
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .hero-banner {
        margin-top: 16px;
    }
}

/* ============================================================
   CLIENTS / PARTNER (marquee continuo)
   ============================================================ */
.clients-band {
    background: #fafafa;
    padding: 70px 0;
    margin-bottom: 25px;
    overflow: hidden;
}

.clients-title {
    text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: var(--itelco-red);
    text-transform: uppercase;
    margin: 0;
}

.clients-divider {
    width: 120px;
    height: 1px;
    background: #c9cdd2;
    margin: 14px auto 50px auto;
}

.clients-marquee {
    width: 100%;
    overflow: hidden;
}

.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clients-scroll 35s linear infinite;
}

/* Pausa al passaggio del mouse */
.clients-marquee:hover .clients-track {
    animation-play-state: paused;
}

.client-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin-right: 80px;
}

.client-logo img {
    max-height: 52px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.client-logo img:hover {
    opacity: 1;
}

/* Loghi larghi/sottili che risultano piccoli: ingranditi per uniformità visiva */
.client-logo img.logo-lg {
    max-height: 110px;
    max-width: 270px;
}

/* Logo ingrandito ulteriormente */
.client-logo img.logo-xl {
    max-height: 130px;
    max-width: 330px;
}

/* Logo da rimpicciolire un po' */
.client-logo img.logo-sm {
    max-height: 55px;
    max-width: 140px;
}

@keyframes clients-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .clients-title {
        font-size: 30px;
    }
    .client-logo {
        height: 90px;
        margin-right: 48px;
    }
    .client-logo img {
        max-height: 40px;
        max-width: 110px;
    }
    .client-logo img.logo-lg {
        max-height: 70px;
        max-width: 180px;
    }
    .client-logo img.logo-xl {
        max-height: 80px;
        max-width: 210px;
    }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
    padding: 90px 0;
    position: relative;
    background: url("/images/background.jpg") center/cover no-repeat;
}

.about-title {
    position: relative;
    padding-left: 18px;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--itelco-navy);
    margin: 0;
}

.about-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: var(--itelco-red);
}

.about-title .accent {
    color: var(--itelco-red);
}

.about-subtitle {
    padding-left: 18px;
    margin-top: 16px;
    font-size: 24px;
    line-height: 29px;
    color: var(--itelco-navy);
}

.why-title {
    margin-top: 60px;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--itelco-navy);
}

.why-title .accent {
    color: var(--itelco-red);
}

.why-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
}

.why-list li {
    position: relative;
    padding-left: 33px;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
}

.why-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--itelco-red);
    font-size: 20px;
    font-weight: 700;
}

.btn-brochure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    padding: 14px 30px;
    background: var(--itelco-red);
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    border: none;
    border-radius: 0;
}

.btn-brochure:hover {
    color: #ffffff;
    opacity: 0.9;
}

.about-image {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .about-image {
        height: 400px;
        margin-top: 40px;
    }
}

/* ============================================================
   WHAT DEFINES
   ============================================================ */
.defines {
    padding: 80px 0;
    border-top: 1px solid var(--itelco-grey);
    border-bottom: 1px solid var(--itelco-grey);
}

.defines-title {
    text-align: center;
    font-weight: 700;
    font-size: 64px;
    line-height: 77px;
    color: var(--itelco-navy);
    margin: 0 0 60px 0;
}

.defines-title .accent {
    color: var(--itelco-red);
}

.define-card {
    border: 1px solid var(--itelco-red);
    border-radius: 10px;
    padding: 40px 28px;
    height: 100%;
    text-align: center;
}

.define-card .icon {
    font-size: 64px;
    color: #000000;
    margin-bottom: 28px;
    display: block;
}

.define-card h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--itelco-red);
    margin: 0 0 18px 0;
}

.define-card p {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    margin: 0;
}

@media (max-width: 991px) {
    .defines-title {
        font-size: 42px;
        line-height: 1.2;
    }
    .define-card {
        margin-bottom: 24px;
    }
}

/* ============================================================
   PRODUCT LINES
   ============================================================ */
.products {
    padding: 90px 0;
}

.products-title {
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    color: #000000;
    margin: 0;
}

.products-subtitle {
    margin-top: 10px;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
}

.product-grid {
    margin-top: 50px;
}

.product-card {
    position: relative;
    background: var(--itelco-card-bg);
    border: 1px solid var(--itelco-grey);
    border-radius: 5px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card .product-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13px;
    background: var(--itelco-red);
}

.product-card .product-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-card .product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    font-size: 22px;
    line-height: 1;
    color: #000000;
    position: relative;
    top: -8px;
}

.product-card .product-label {
    font-size: 16px;
    line-height: 19px;
    color: var(--itelco-orange);
}

.product-card h3 {
    margin: 18px 0 0 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
}

.product-card p {
    margin: 16px 0 0 0;
    font-size: 20px;
    line-height: 24px;
    color: var(--itelco-grey);
    flex-grow: 1;
}

.product-card .learn-more {
    margin-top: 20px;
    margin-bottom: 13px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: var(--itelco-red);
    align-self: flex-start;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: linear-gradient(180deg, #0f172a 0%, #334f90 100%);
    color: #ffffff;
    padding-top: 50px;
}

.footer-top {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #ffffff;
}

.footer-logo img {
    height: 80px;
    width: auto;
}

.footer-logo .dacta-note {
    font-size: 12px;
    line-height: 15px;
    margin-top: 12px;
    color: #ffffff;
}

.footer-divider {
    width: 1px;
    align-self: stretch;
    background: var(--itelco-orange);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-social a {
    color: #ffffff;
    font-size: 26px;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 60px 0;
}

.footer-col h4 {
    position: relative;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: var(--itelco-orange-light);
    padding-bottom: 16px;
    margin: 0 0 24px 0;
}

.footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 3px;
    background: var(--itelco-orange);
}

.footer-col a {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 22px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 57px;
    padding: 30px 0 46px 0;
    flex-wrap: wrap;
}

.footer-bottom span,
.footer-bottom a {
    color: #ffffff;
    font-size: 12px;
    line-height: 15px;
}

@media (max-width: 991px) {
    .footer-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .footer-cols {
        grid-template-columns: 1fr;
    }
    .footer-top {
        flex-wrap: wrap;
    }
}

/* ============================================================
   OUR HISTORY PAGE
   ============================================================ */

/* HERO */
.history-hero {
    background: var(--itelco-navy);
    color: #ffffff;
    padding: 70px 0;
}

.history-hero h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 22px 0;
}

.history-hero p {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.22;
    margin: 0;
    max-width: 1030px;
}

/* Titoli di sezione con barra rossa sotto */
.section-heading {
    position: relative;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--itelco-navy);
    margin: 0 0 40px 0;
    padding-bottom: 24px;
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    height: 5px;
    background: var(--itelco-red);
}

.section-heading .accent {
    color: var(--itelco-red);
}

/* THE JOURNEY */
.journey {
    padding: 90px 0;
}

.journey-intro {
    font-size: 26px;
    line-height: 1.2;
    color: #000000;
    max-width: 1030px;
    margin: 0;
}

.journey-intro .accent {
    color: var(--itelco-red);
    font-weight: 700;
}

.timeline {
    margin: 60px 0 0 200px;
    max-width: 620px;
}

.timeline-item {
    position: relative;
    padding-left: 100px;
    padding-bottom: 80px;
    border-left: 3px solid var(--itelco-red);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -11px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--itelco-red);
}

.timeline-year {
    display: block;
    color: var(--itelco-red);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
}

.timeline-item h3 {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 12px 0;
}

.timeline-item p {
    font-size: 20px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

/* THE COMPLETE STORY */
.story {
    padding: 80px 0;
    border-top: 1px solid var(--itelco-grey);
}

.story-title::after {
    width: 715px;
}

.story-block {
    margin-bottom: 28px;
}

.story-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.story-label img {
    width: 44px;
    height: 44px;
}

.story-label span {
    color: var(--itelco-grey);
    font-size: 16px;
}

.story-block p {
    font-size: 20px;
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.story-block p .accent {
    color: var(--itelco-red);
    font-weight: 700;
}

.story-images {
    display: flex;
    gap: 40px;
    margin: 30px 0 50px 0;
}

.story-images img {
    width: 50%;
    height: 340px;
    object-fit: cover;
    border-radius: 4px;
}

.story-map {
    text-align: center;
    margin: 30px 0 50px 0;
}

.story-map img {
    max-width: 100%;
    height: auto;
}

.story-figure {
    margin: 40px 0 0 0;
    text-align: center;
}

.story-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.story-figure figcaption {
    font-size: 13px;
    color: #000000;
    margin-top: 14px;
}

@media (max-width: 991px) {
    .history-hero h1 {
        font-size: 44px;
    }
    .history-hero p {
        font-size: 24px;
    }
    .section-heading {
        font-size: 44px;
    }
    .section-heading::after,
    .story-title::after {
        width: 280px;
    }
    .timeline {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .history-hero h1 {
        font-size: 34px;
    }
    .history-hero p {
        font-size: 20px;
    }
    .section-heading {
        font-size: 32px;
    }
    .journey-intro {
        font-size: 20px;
    }
    .story-images {
        flex-direction: column;
    }
    .story-images img {
        width: 100%;
    }
}

/* ============================================================
   PAGE HERO (banda navy compatta, titolo centrato)
   usata da Downloads e Sales Conditions
   ============================================================ */
.page-hero {
    background: var(--itelco-navy);
    color: #ffffff;
    padding: 55px 0;
    text-align: center;
}

.page-hero h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* ============================================================
   DOWNLOADS
   ============================================================ */
.downloads {
    padding: 70px 0 90px 0;
}

.downloads-intro {
    text-align: center;
    font-size: 20px;
    color: #000000;
    margin: 0 0 60px 0;
}

.downloads-list {
    max-width: 820px;
    margin: 0 auto;
}

.download-item {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--itelco-grey);
}

.download-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.download-item h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 14px 0;
}

.download-item h3 i {
    font-size: 24px;
    color: #000000;
}

.download-item p {
    font-size: 20px;
    line-height: 1.2;
    color: #000000;
    margin: 0 0 14px 0;
}

.download-link {
    font-size: 20px;
    color: var(--itelco-red);
    text-decoration: none;
}

.download-link:hover {
    text-decoration: underline;
}

/* ============================================================
   SALES CONDITIONS
   ============================================================ */
.sales {
    padding: 60px 0 90px 0;
}

.sales-content {
    max-width: 1240px;
    margin: 0 auto;
}

.sales-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 34px 0 14px 0;
}

.sales-content h2:first-child {
    margin-top: 0;
}

.sales-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 14px 0;
}

@media (max-width: 767px) {
    .page-hero h1 {
        font-size: 36px;
    }
    .download-item h3 {
        font-size: 20px;
    }
    .download-item p,
    .downloads-intro,
    .download-link {
        font-size: 17px;
    }
}

/* ============================================================
   PRODUCT PAGES (base riutilizzabile)
   ============================================================ */

/* Colonna stretta interna (testo/keypoint a 205px laterali nel Figma) */
.product-narrow {
    max-width: 1030px;
    margin: 0 auto;
}

/* HERO BANNER (immagine piena larghezza container) */
.product-hero {
    padding: 40px 0 0 0;
}

.product-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile: hero a immagine intera, senza zoom/crop */
@media (max-width: 767px) {
    .product-hero-img {
        width: 100%;
        height: auto;
    }
}

/* TITOLO + INTRO */
.product-intro {
    padding: 80px 0 0 0;
}

.product-intro h1 {
    font-size: 50px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 24px 0;
}

.product-intro p {
    font-size: 18px;
    line-height: 1.3;
    color: #000000;
    margin: 0 0 14px 0;
}

.product-intro p:last-child {
    margin-bottom: 0;
}

/* FOTO INTERNA */
.product-photo {
    padding: 80px 0;
}

.product-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Due foto affiancate, metà e metà */
.product-photos-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}
.product-photos-2 img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .product-photos-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* KEYPOINTS 01-04 */
.product-features {
    padding: 40px 0 90px 0;
}

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 16px 0 24px 0;
    border-bottom: 1px solid var(--itelco-grey);
}

.feature-num {
    flex: 0 0 auto;
    min-width: 75px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--itelco-red);
}

.feature-text h3 {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
}

.feature-text p {
    font-size: 18px;
    line-height: 1.25;
    color: #000000;
    margin: 0;
}

/* ARCHITECTURE + BULLETS */
.product-architecture {
    padding: 70px 0 90px 0;
}

.arch-grid {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-wrap: wrap;
}

.arch-image {
    flex: 1 1 520px;
    min-width: 300px;
}

/* MEX II: foto + keypoints allineati in alto, con Download sotto i keypoints */
.arch-grid:has(.arch-side) {
    align-items: flex-start;
}
.arch-grid:has(.arch-side) .arch-image {
    flex: 0 1 760px;
}
.arch-side {
    flex: 1 1 300px;
    min-width: 280px;
}
.arch-side .btn-download {
    margin-top: 26px;
}

.arch-image img {
    display: block;
    width: 100%;
    height: auto;
}

.arch-bullets {
    flex: 1 1 380px;
    min-width: 280px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.arch-bullets li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.3;
    color: #333333;
}

/* Marcatore a triangolo rosso, stile logo Itelco */
.arch-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 0;
    height: 0;
    border-left: 9px solid var(--itelco-red);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* CTA */
.product-cta {
    padding: 40px 0 100px 0;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--itelco-red);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.btn-download:hover {
    opacity: 0.9;
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #ffffff;
    color: var(--itelco-red);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--itelco-red);
    border-radius: 4px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.btn-contact:hover {
    background: var(--itelco-red);
    color: #ffffff;
}

@media (max-width: 767px) {
    .product-intro h1 {
        font-size: 38px;
    }
    .product-intro p {
        font-size: 19px;
    }
    .feature-num {
        font-size: 36px;
        min-width: 55px;
    }
    .feature-row {
        gap: 20px;
    }
    .feature-text h3 {
        font-size: 20px;
    }
    .cta-buttons {
        flex-direction: column;
    }
    .btn-download,
    .btn-contact {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   PRODUCT — ARCHITECTURE colonna con titolo (es. ALPAN)
   ============================================================ */
.arch-content {
    flex: 1 1 auto;
    min-width: 280px;
}

.arch-heading {
    font-size: 36px;
    font-weight: 400;
    color: var(--itelco-grey);
    margin: 0 0 18px 0;
}

.arch-content .arch-bullets {
    flex: none;
    min-width: 0;
}

/* ALPAN: immagine + bullet come gruppo compatto, centrato nella pagina */
.arch-grid:has(.arch-content) {
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
}

.arch-grid:has(.arch-content) .arch-image {
    flex: 0 1 360px;
    min-width: 0;
}

/* THALNA: rack un filo più largo (solo questa pagina) */
.arch-grid--rack:has(.arch-content) .arch-image {
    flex-basis: 380px;
}

/* Bullet architecture leggermente più grandi (ALPAN, THALNA) */
.arch-grid:has(.arch-content) .arch-bullets li {
    font-size: 21px;
}

.arch-grid:has(.arch-content) .arch-content {
    flex: 0 1 auto;
    min-width: 0;
}

/* ============================================================
   PRODUCT ARCHITECTURE — fascia TABLET (768–991px)
   Immagine rack ridotta così i keypoint restano di fianco
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .arch-grid:has(.arch-content) {
        gap: 30px;
        flex-wrap: nowrap;
    }
    .arch-grid:has(.arch-content) .arch-image,
    .arch-grid--rack:has(.arch-content) .arch-image {
        flex: 0 0 240px;
    }
    .arch-grid:has(.arch-content) .arch-bullets {
        flex: 1 1 auto;
    }
    .arch-grid:has(.arch-content) .arch-bullets li {
        font-size: 18px;
    }
}

/* ============================================================
   PRODUCT — POWER CONFIGURATIONS (tabella)
   ============================================================ */
.power-config {
    padding: 40px 0 70px 0;
}

.power-config-title {
    font-size: 30px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 30px 0;
}

.power-table-wrap {
    border: 2px solid var(--itelco-red);
    border-radius: 14px;
    overflow: hidden;
}

.power-table {
    width: 100%;
    border-collapse: collapse;
}

.power-table thead th {
    background: var(--itelco-red);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    padding: 20px 24px;
}

.power-table tbody td {
    font-size: 18px;
    color: #333333;
    padding: 18px 24px;
    border-top: 1px solid #e5e5e5;
}

.power-table tbody tr:nth-child(even) {
    background: #f7f8fa;
}

@media (max-width: 767px) {
    .power-config-title {
        font-size: 28px;
    }
    .power-table-wrap {
        overflow-x: auto;
    }
    .power-table {
        min-width: 580px;
    }
    .power-table thead th {
        font-size: 14px;
        padding: 14px 16px;
    }
    .power-table tbody td {
        font-size: 16px;
        padding: 14px 16px;
    }
    .arch-heading {
        font-size: 28px;
    }
}

/* ============================================================
   PRODUCT — POWER TABLE variante blu (es. THALNA)
   ============================================================ */
.power-table-wrap--blue {
    border-color: #0052a3;
}

.power-table--blue thead th {
    background: #0052a3;
}

/* ============================================================
   PRODUCT — POWER TABLE varianti colore (NORTHIA)
   ============================================================ */
.power-table-wrap--green {
    border-color: #1fa055;
}
.power-table--green thead th {
    background: #1fa055;
}

.power-table-wrap--orange {
    border-color: #e8742c;
}
.power-table--orange thead th {
    background: #e8742c;
}

/* ============================================================
   PRODUCT — VIDEO (NORTHIA)
   ============================================================ */
.product-video {
    padding: 40px 0;
}

.product-video video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
    border-radius: 4px;
}

/* ============================================================
   PRODUCT — ETICHETTA ROSSA sopra il titolo (I.O.T.)
   ============================================================ */
.product-label {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--itelco-red);
    margin: 0 0 16px;
}

/* Etichetta variante blu (IEC UHF) */
.product-label--blue {
    color: #009de0;
}

/* ============================================================
   PAGINA CONTATTI (3 form a tab)
   ============================================================ */

/* Hero */
.contact-hero {
    background: var(--itelco-navy);
    padding: 60px 0;
    text-align: center;
}
.contact-hero h1 {
    font-size: 50px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px;
}
.contact-hero p {
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    margin: 0 auto;
    max-width: 900px;
}

/* Sezione form */
.contact-section {
    padding: 60px 0 80px;
}

/* Alert successo */
.contact-alert {
    padding: 16px 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    font-size: 16px;
}
.contact-alert--success {
    background: #e6f4ea;
    border: 1px solid #1fa055;
    color: #14692f;
}
.contact-alert--error {
    background: #fbeaea;
    border: 1px solid #c82128;
    color: #8e1419;
}

/* Tab switcher */
.contact-tabs {
    display: flex;
    margin-bottom: 50px;
}
.contact-tab {
    flex: 1;
    padding: 12px 20px;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.contact-tab:first-child {
    border-radius: 5px 0 0 5px;
}
.contact-tab:last-child {
    border-radius: 0 5px 5px 0;
}
.contact-tab:not(:first-child) {
    border-left: none;
}
.contact-tab.is-active {
    background: var(--itelco-red);
    color: #ffffff;
    border-color: var(--itelco-red);
}

/* Form (nascosti tranne attivo) */
.contact-form {
    display: none;
}
.contact-form.is-active {
    display: block;
}

/* Righe a due colonne */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 18px;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 5px;
    box-sizing: border-box;
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: #808080;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--itelco-red);
}
.form-textarea {
    min-height: 190px;
    resize: vertical;
}
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
    padding-right: 50px;
}

/* Errori */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--itelco-red);
}
.field-error {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--itelco-red);
}

/* Bottone invio */
.btn-send {
    width: 100%;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 5px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.btn-send:hover {
    background: var(--itelco-red);
    color: #ffffff;
    border-color: var(--itelco-red);
}

/* Divisore */
.contact-divider {
    border: none;
    border-top: 1px solid #808080;
    margin: 60px 0 50px;
}

/* Info contatti */
.contact-info {
    display: flex;
    justify-content: center;
    gap: 90px;
    flex-wrap: wrap;
}
.contact-info-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.contact-info-head i {
    font-size: 26px;
    color: var(--itelco-navy);
}
.contact-info-head span {
    font-size: 24px;
    font-weight: 700;
    color: var(--itelco-red);
    text-transform: uppercase;
}
.contact-info-item p {
    font-size: 20px;
    color: #000000;
    margin: 0;
}
.contact-info-item a {
    color: #000000;
    text-decoration: none;
}
.contact-info-item a:hover {
    color: var(--itelco-red);
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact-tab {
        font-size: 16px;
        padding: 10px 8px;
    }
    .contact-info {
        gap: 40px;
    }
}

/* ============================================================
   NAV DROPDOWN SEMPLICE (menu Company/Azienda)
   ============================================================ */
.nav-dropdown--simple {
    position: relative;
}

.nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border-top: 3px solid var(--itelco-red);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    padding: 12px 0;
}

.nav-dropdown--simple.is-open .nav-submenu {
    display: block;
}

.nav-submenu a {
    display: block;
    padding: 10px 24px;
    font-size: 15px;
    color: var(--itelco-navy);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.15s,
        color 0.15s;
}

.nav-submenu a:hover {
    background: #f4f6fa;
    color: var(--itelco-red);
}

/* ============================================================
   MEGA MENU — variante COMPANY (sidebar colorata + icone)
   ============================================================ */
.mega-sidebar--company {
    background: var(--itelco-navy);
    border-right: none;
    justify-content: center;
    align-items: flex-start;
}
.mega-company-label {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mega-col--company {
    gap: 20px;
}
.mega-col--company a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 500;
    color: var(--itelco-navy);
}
.mega-col--company a i {
    font-size: 20px;
    color: var(--itelco-red);
}
.mega-col--company a:hover {
    color: var(--itelco-red);
}

/* ============================================================
   RICERCA NAVBAR (pannello client-side)
   ============================================================ */
.search-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 3px solid var(--itelco-red);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    padding: 28px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;
}
.search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
/* Annulla il flex della navbar dentro il pannello: input e risultati impilati */
.search-panel .itelco-container {
    display: block;
}
.search-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 18px;
    font-family: inherit;
    color: var(--itelco-navy);
    border: 1px solid #d0d5dd;
    border-radius: 6px;
}
.search-input:focus {
    outline: none;
    border-color: var(--itelco-red);
    box-shadow: 0 0 0 3px rgba(200, 33, 40, 0.12);
}
.search-results {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.search-result {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--itelco-navy);
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s,
        transform 0.15s;
}
.search-result.is-match {
    display: flex;
}
.search-result::before {
    content: "\F138"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    font-size: 14px;
    color: var(--itelco-red);
}
.search-result:hover {
    background: #fff1f1;
    color: var(--itelco-red);
    border-left-color: var(--itelco-red);
    transform: translateX(4px);
}
.search-empty {
    display: none;
    padding: 14px 18px;
    color: #667085;
    margin: 0;
}

/* ============================================================
   PAGINA TURN-KEY PROJECT
   ============================================================ */
.turnkey-hero {
    padding: 40px 0 0 0;
}

.turnkey-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

.turnkey {
    padding: 70px 0 90px 0;
}

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

.turnkey-illustration-img {
    display: block;
    width: 100%;
    height: auto;
}

.turnkey-heading {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 24px 0;
}

.turnkey-heading--orange {
    color: var(--itelco-orange);
}

.turnkey-heading--red {
    color: var(--itelco-red);
    margin-top: 44px;
}

.turnkey-text p {
    font-size: 17px;
    line-height: 1.7;
    color: #333333;
    margin: 0 0 18px 0;
}

.turnkey-text p strong {
    color: #000000;
}

/* Placeholder immagini (hero + illustrazione) */
.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #f4f6fa;
    border: 2px dashed #c9d2e3;
    border-radius: 12px;
    color: #8a94a6;
    text-align: center;
}

.media-placeholder i {
    font-size: 48px;
}

.media-placeholder span {
    font-size: 15px;
}

.media-placeholder--hero {
    width: 100%;
    height: 340px;
}

.media-placeholder--illustration {
    width: 100%;
    min-height: 460px;
    height: 100%;
}

@media (max-width: 992px) {
    .turnkey-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .media-placeholder--illustration {
        min-height: 300px;
    }
    .turnkey-heading {
        font-size: 30px;
    }
}

/* ============================================================
   PAGINA SCIENTIFIC & SPECIAL SOLUTIONS
   ============================================================ */
/* --- Hero (placeholder finché non c'è l'immagine LHC) --- */
.sci-hero {
    width: 100%;
}
.sci-hero-img {
    display: block;
    width: 100%;
    height: auto;
}
.sci-hero-overlay {
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(8, 20, 30, 0.35);
}
.sci-hero-overlay .itelco-container {
    width: 100%;
}
.sci-hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
}
.sci-hero-icon {
    font-size: 56px;
    color: #ffffff;
}
.sci-hero h1 {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}
.sci-hero-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    color: #ffffff;
    font-size: 15px;
}
.sci-hero-share a {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}
.sci-hero-share a:hover {
    color: var(--itelco-red);
}

/* --- Sezioni --- */
.sci-section {
    padding: 70px 0;
}
.sci-narrow {
    max-width: 860px;
}
.sci-title {
    font-size: 46px;
    font-weight: 400;
    color: var(--itelco-navy);
    text-align: left;
    margin: 0 0 28px 0;
}
.sci-download {
    display: block;
    text-align: left;
    color: var(--itelco-red);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 32px;
}
.sci-download:hover {
    text-decoration: underline;
}

.sci-text {
    text-align: left;
}
.sci-text p {
    font-size: 17px;
    line-height: 1.7;
    color: #555555;
    margin: 0 0 20px 0;
}
.sci-text p strong {
    color: #000000;
}

/* --- Link referenze (blu) --- */
.sci-reflinks {
    text-align: left;
    margin-top: 28px;
}
.sci-reflink {
    display: block;
    color: #2f7bb0;
    text-decoration: none;
    line-height: 1.5;
    font-size: 16px;
    cursor: default;
}
.sci-reflink--strong {
    font-weight: 600;
}
.sci-reflink--mt {
    margin-top: 18px;
}

/* --- Griglie immagini --- */
.sci-grid {
    display: grid;
    gap: 4px;
}
.sci-grid--2x2 {
    grid-template-columns: 1fr 1fr;
    max-width: 860px;
    margin: 0 auto 50px auto;
}

/* Gallery CERN: immagine grande + thumbnail cliccabili */
.sci-gallery {
    max-width: 1000px;
    margin: 0 auto 50px auto;
}
.gallery-main {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
}
.gallery-main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.gallery-desc {
    margin: 18px 0 6px 0;
    font-size: 16px;
    line-height: 1.7;
    color: #555555;
    text-align: left;
}
.gallery-thumb {
    display: block;
    padding: 0;
    background: none;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition:
        border-color 0.15s,
        transform 0.15s;
}
.gallery-thumb:hover {
    transform: translateY(-2px);
}
.gallery-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gallery-thumb.is-active {
    border-color: var(--itelco-red);
}
.sci-cern-logo {
    display: block;
    width: 110px;
    height: auto;
    margin: 8px 0 10px;
}
.sci-wide-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.sci-grid-img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 10px;
}
/* Sezione reliability: frase centrata come ultimo elemento */
.sci-reliability {
    padding-top: 0;
    padding-bottom: 62px;
}
.sci-reliability .sci-narrow {
    margin-left: auto;
    margin-right: auto;
}
.sci-reliability .sci-statement {
    margin: 0;
}
.sci-reliability-img {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}
.sci-grid--2 {
    grid-template-columns: 1fr 1fr;
    margin-top: 4px;
}

/* --- Loghi università --- */
.sci-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 50px;
}
.sci-uni-logo {
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
}
.sci-uni-logo img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
}
/* Logo bianco (versione footer) ricolorato in scuro per sfondo chiaro */
.sci-logo-dark {
    filter: brightness(0);
}
.sci-logos .sci-uni-logo:first-child {
    border-right: 1px solid #e2e6ee;
}
.sci-logo-single {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.sci-logo-single .media-placeholder--logo {
    width: 200px;
}

/* --- Statement reliability --- */
.sci-statement {
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5;
    color: #555555;
}
.sci-statement strong {
    color: #000000;
    font-weight: 600;
}

/* --- Barra rossa --- */
.sci-redbar {
    height: 8px;
    background: var(--itelco-red);
    width: 100%;
}

/* --- Placeholder: misure aggiuntive --- */
.media-placeholder--grid {
    width: 100%;
    aspect-ratio: 16 / 10;
}
.sci-grid--2 .media-placeholder--grid {
    aspect-ratio: auto;
    height: 460px;
}
.media-placeholder--wide {
    width: 100%;
    height: 460px;
}
.media-placeholder--logo {
    height: 150px;
}

@media (max-width: 992px) {
    .sci-hero h1 {
        font-size: 36px;
    }
    .sci-hero-icon {
        font-size: 40px;
    }
    .sci-title {
        font-size: 34px;
    }
    .sci-statement {
        font-size: 21px;
    }
    .sci-grid--2x2,
    .sci-grid--2 {
        grid-template-columns: 1fr;
    }
    .sci-logos {
        flex-direction: column;
        gap: 4px;
    }
    .sci-logos .sci-uni-logo:first-child {
        border-right: none;
        border-bottom: 1px solid #e2e6ee;
    }
    .media-placeholder--wide {
        height: 280px;
    }
    .sci-grid--2 .media-placeholder--grid {
        height: 280px;
    }
}

/* ============================================================
   PAGINA GAP FILLER
   ============================================================ */
.gap-hero {
    /* Sostituire con: background: url('../images/NOMEFILE.jpg') center/cover no-repeat; */
    background: linear-gradient(120deg, #0b2a3a 0%, #0f172a 60%, #123a4d 100%);
    min-height: 380px;
    display: flex;
}
.gap-hero-overlay {
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(8, 20, 30, 0.35);
    text-align: center;
}
.gap-hero-overlay .itelco-container {
    width: 100%;
}
.gap-hero h1 {
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 14px 0;
}
.gap-hero p {
    font-size: 20px;
    color: #e2e8f0;
    max-width: 720px;
    margin: 0 auto;
}

/* Sezioni alternate a sfondo chiaro */
.gap-alt {
    background: #f7f9fc;
}
.sci-section--top {
    padding-top: 60px;
}
.gap-title-mt {
    margin-top: 60px;
}
.gap-scheme-img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

/* Tabella modelli */
.gap-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 36px;
    margin-bottom: 60px;
    font-size: 16px;
}
.gap-table th {
    background: var(--itelco-navy);
    color: #ffffff;
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
}
.gap-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e6ee;
    color: #333333;
}
.gap-table tbody tr:nth-child(even) {
    background: #f4f6fa;
}

/* Lista 8 motivi */
.gap-reasons {
    max-width: 820px;
    margin: 10px auto 0 auto;
    padding-left: 0;
    list-style: none;
    counter-reset: gap-counter;
}
.gap-reasons li {
    counter-increment: gap-counter;
    position: relative;
    padding: 16px 0 16px 54px;
    border-bottom: 1px solid #e2e6ee;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}
.gap-reasons li::before {
    content: counter(gap-counter);
    position: absolute;
    left: 0;
    top: 14px;
    width: 34px;
    height: 34px;
    background: var(--itelco-red);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}
.gap-reasons li strong {
    color: #000000;
}

/* CTA */
.gap-cta {
    text-align: center;
}
.gap-cta-btn {
    display: inline-block;
    margin-top: 26px;
    background: var(--itelco-red);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 14px 40px;
    border-radius: 6px;
    transition: background 0.15s;
}

/* Due bottoni CTA affiancati (Contattaci + Brochure) */
.gap-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}
.gap-cta-buttons .gap-cta-btn {
    margin-top: 0;
}
.gap-cta-btn--outline {
    background: #ffffff;
    color: var(--itelco-red);
    border: 2px solid var(--itelco-red);
    padding: 12px 38px;
}
.gap-cta-btn--outline:hover {
    background: var(--itelco-red);
    color: #ffffff;
}
.gap-cta-btn:hover {
    background: #a91b21;
}

@media (max-width: 992px) {
    .gap-hero h1 {
        font-size: 36px;
    }
    .gap-hero p {
        font-size: 17px;
    }
}

/* ============================================================
   FADE-IN AL SCROLL
   (lo stato nascosto è applicato via JS con .reveal-ready,
    così senza JS il contenuto resta sempre visibile)
   ============================================================ */
.reveal-ready {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    will-change: opacity, transform;
}
.reveal-ready.is-visible {
    opacity: 1;
    transform: none;
}

/* Accessibilità: niente animazioni per chi le ha disattivate */
@media (prefers-reduced-motion: reduce) {
    .reveal-ready {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   EFFETTI EXTRA (solo CSS)
   ============================================================ */

/* Smooth scroll globale */
html {
    scroll-behavior: smooth;
}

/* --- Underline animato sui link della navbar --- */
.main-nav-links > a,
.main-nav-links .nav-dropdown > a {
    position: relative;
}
.main-nav-links > a::after,
.main-nav-links .nav-dropdown > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--itelco-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.main-nav-links > a:hover::after,
.main-nav-links .nav-dropdown:hover > a::after,
.nav-dropdown.is-open > .nav-dropdown-toggle::after {
    transform: scaleX(1);
}

/* --- Hover curato sulle card prodotto --- */
.product-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    border-color: #d7dbe3;
}
.product-card .product-bar {
    transition: height 0.25s ease;
}
.product-card:hover .product-bar {
    height: 20px;
}

/* --- Bottoni: leggero sollevamento all'hover --- */
.gap-cta-btn,
.sci-download {
    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.gap-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(200, 33, 40, 0.28);
}

/* ============================================================
   PAGINA 404
   ============================================================ */
.error-page {
    padding: 120px 0 140px 0;
    text-align: center;
}
.error-page .error-code {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: var(--itelco-red);
    margin: 0;
}
.error-page .error-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--itelco-navy);
    margin: 12px 0 10px 0;
}
.error-page .error-text {
    font-size: 18px;
    color: #555555;
    margin: 0 0 32px 0;
}
.error-page .error-home-btn {
    display: inline-block;
    background: var(--itelco-red);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 6px;
    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.error-page .error-home-btn:hover {
    background: #a91b21;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(200, 33, 40, 0.28);
}

/* ============================================================
   TOP BAR — mobile sotto i 600px
   Solo "Itelco" a sinistra; logo Dacta resta centrato in assoluto.
   ============================================================ */
@media (max-width: 600px) {
    .topbar-brands a:not(.is-active) {
        display: none;
    }
    .topbar-brands .divider {
        display: none;
    }
    .topbar-social {
        display: none;
    }
}

/* ============================================================
   BOTTONI — responsive (scalano su tablet e mobile)
   ============================================================ */
@media (max-width: 1250px) {
    .hero-cta {
        left: 40px;
        bottom: 40px;
        padding: 11px 22px;
        font-size: 16px;
    }
}
@media (max-width: 991px) {
    .hero-cta {
        left: 28px;
        bottom: 26px;
        padding: 9px 18px;
        font-size: 14px;
    }
    .btn-download,
    .btn-contact,
    .gap-cta-btn,
    .gap-cta-btn--outline,
    .error-home-btn {
        padding: 12px 24px;
        font-size: 16px;
    }
}
@media (max-width: 600px) {
    .hero-cta {
        left: 10px;
        bottom: 10px;
        padding: 4px 9px;
        font-size: 9px;
        gap: 3px;
        border-radius: 3px;
    }
    /* Frecce laterali troppo grandi sulla slide piccola: restano solo i pallini */
    .hero-arrow {
        display: none;
    }
    .btn-download,
    .btn-contact,
    .gap-cta-btn,
    .gap-cta-btn--outline,
    .error-home-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .error-page .error-code {
        font-size: 88px;
    }
    .error-page .error-title {
        font-size: 26px;
    }
}

/* ============================================================
   HERO — bottone in basso a DESTRA per IEC 300W e IEC UHF
   (su queste immagini il testo è centrato: a sinistra lo copriva)
   ============================================================ */
.hero-slide--iecdab .hero-cta,
.hero-slide--iecuhf .hero-cta {
    left: auto;
    right: 60px;
}
@media (max-width: 1250px) {
    .hero-slide--iecdab .hero-cta,
    .hero-slide--iecuhf .hero-cta {
        right: 40px;
    }
}
@media (max-width: 991px) {
    .hero-slide--iecdab .hero-cta,
    .hero-slide--iecuhf .hero-cta {
        right: 28px;
    }
}
@media (max-width: 600px) {
    .hero-slide--iecdab .hero-cta,
    .hero-slide--iecuhf .hero-cta {
        right: 14px;
    }
}

/* ============================================================
   MOBILE — scalatura tipografica (titoli troppo grandi su telefono)
   ============================================================ */
@media (max-width: 600px) {
    /* Titoli pagina (H1): stessa misura su tutte le pagine */
    .page-hero h1,
    .history-hero h1,
    .contact-hero h1,
    .sci-hero h1,
    .gap-hero h1,
    .product-intro h1 {
        font-size: 28px;
    }

    /* Titoli sezione (H2): stessa misura su tutte le pagine */
    .products-title,
    .defines-title,
    .section-heading,
    .clients-title,
    .about-title,
    .sci-title,
    .turnkey-heading,
    .arch-heading,
    .power-config-title {
        font-size: 24px;
    }

    /* Sottotitoli / testo introduttivo: stessa misura ovunque */
    .products-subtitle,
    .history-hero p,
    .contact-hero p,
    .product-intro p {
        font-size: 16px;
    }

    /* Elementi specifici */
    .product-label {
        font-size: 20px;
    }
    .sci-statement {
        font-size: 20px;
    }
    .feature-text h3 {
        font-size: 18px;
    }
    .feature-num {
        font-size: 32px;
    }
    .define-card .icon {
        font-size: 44px;
    }
}

/* Hero CTA ancora più piccolo su telefoni molto stretti */
@media (max-width: 400px) {
    .hero-cta {
        padding: 3px 7px;
        font-size: 8px;
        left: 8px;
        bottom: 8px;
    }
}

/* Loghi Itelco ridotti solo su mobile (navbar + footer) */
@media (max-width: 600px) {
    .main-nav .nav-logo img {
        width: 120px;
        height: 48px;
    }
    .footer-logo img {
        height: 58px;
    }
}

/* Contatti: sede, telefono, email allineati a sinistra su mobile */
@media (max-width: 600px) {
    .contact-info {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .contact-info-item {
        width: 100%;
        text-align: left;
    }
}

/* Our History: timeline più compatta su mobile (testo vicino alla linea) */
@media (max-width: 600px) {
    .timeline-item {
        padding-left: 28px;
        padding-bottom: 56px;
    }
}

/* ============================================================
   TABELLE PRODOTTO — collassabili su mobile
   Desktop: bottone nascosto, tabella sempre visibile.
   Mobile: tabella chiusa dietro il bottone "Specifiche tecniche".
   ============================================================ */
.spec-toggle {
    display: none;
}

@media (max-width: 600px) {
    .spec-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        margin: 8px 0 0;
        padding: 13px 18px;
        background: var(--itelco-red);
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
    }
    .spec-caret {
        transition: transform 0.2s ease;
    }
    .spec-toggle.is-open .spec-caret {
        transform: rotate(180deg);
    }

    .spec-toggle + .power-table-wrap,
    .spec-toggle + .gap-table {
        display: none;
        margin-top: 12px;
    }
    .spec-toggle.is-open + .power-table-wrap {
        display: block;
    }
    .spec-toggle.is-open + .gap-table {
        display: table;
    }
}

/* ============================================================
   SCIENTIFIC & SPECIAL SOLUTIONS — centra tutto solo in questa pagina
   ============================================================ */
.sci-hero,
.sci-title,
.sci-download,
.sci-text,
.sci-reflinks,
.sci-grid,
.sci-placeholder,
.sci-block,
.sci-statement {
    text-align: center;
}

.sci-download,
.sci-reflinks {
    justify-content: center;
}

.sci-grid {
    justify-items: center;
}

.sci-placeholder,
.sci-block {
    margin-left: auto;
    margin-right: auto;
}

.sci-text p,
.sci-statement p,
.sci-reflinks a {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   SCIENTIFIC & SPECIAL SOLUTIONS — centra tutto solo in questa pagina
   ============================================================ */
.sci-hero,
.sci-title,
.sci-download,
.sci-text,
.sci-reflinks,
.sci-grid,
.sci-placeholder,
.sci-block,
.sci-statement {
    text-align: center;
}

.sci-download,
.sci-reflinks {
    justify-content: center;
}

.sci-grid {
    justify-items: center;
}

.sci-placeholder,
.sci-block {
    margin-left: auto;
    margin-right: auto;
}

.sci-text p,
.sci-statement p,
.sci-reflinks a {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   SCIENTIFIC & SPECIAL SOLUTIONS — centra i blocchi nella pagina
   (non solo il testo, ma anche la posizione dei contenitori)
   ============================================================ */
.sci-section .sci-narrow,
.sci-section .sci-grid,
.sci-section .sci-gallery,
.sci-section .sci-reliability-img,
.sci-section .sci-logos,
.sci-section .sci-download,
.sci-section .sci-reflinks,
.sci-section .sci-title,
.sci-section .sci-text,
.sci-section .sci-statement {
    margin-left: auto;
    margin-right: auto;
}

.sci-section .sci-narrow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sci-section .sci-text,
.sci-section .sci-reflinks,
.sci-section .sci-download,
.sci-section .sci-title,
.sci-section .sci-statement {
    width: 100%;
    max-width: 860px;
}

.gallery-desc {
    text-align: center;
}

/* CERN logo — centratura nella pagina Scientific */
.sci-logos,
.sci-logos img,
.sci-logos .cern-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* CERN logo — centratura reale del blocco singolo */
.sci-logo-single {
    justify-content: center !important;
}

.sci-logo-single .media-placeholder--logo,
.sci-logo-single .sci-cern-logo {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   FIX scientific logos:
   - ripristina il layout corretto dei loghi università
   - centra davvero solo il blocco CERN
   ============================================================ */

/* ripristino loghi università */
.sci-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto;
    margin-right: auto;
    text-align: initial;
}

.sci-uni-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* centra solo il blocco CERN come elemento nella pagina */
.sci-logo-single {
    display: flex;
    justify-content: center !important;
    width: 100%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.sci-logo-single .media-placeholder--logo {
    width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sci-cern-logo {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   MEX II — FIX MOBILE architecture + bullets
   ============================================================ */

/* Desktop / tablet */
.product-architecture--mexii {
    padding-top: 40px;
}

.product-architecture--mexii .arch-grid {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.product-architecture--mexii .arch-image--mexii {
    flex: 0 1 760px;
    min-width: 0;
}

.product-architecture--mexii .arch-image--mexii img {
    display: block;
    width: 100%;
    height: auto;
}

.product-architecture--mexii .arch-side {
    flex: 0 1 340px;
    min-width: 0;
}

.product-architecture--mexii .arch-bullets {
    margin: 0;
    padding: 0;
}

.product-architecture--mexii .arch-bullets li:last-child {
    margin-bottom: 0;
}

/* ===================== MOBILE ===================== */
@media (max-width: 767px) {
    .product-architecture.product-architecture--mexii {
        padding: 24px 0 40px 0;
    }

    .product-architecture--mexii .arch-grid {
        display: block; /* niente flex-column con gap enorme */
        gap: 0;
    }

    .product-architecture--mexii .arch-image--mexii,
    .product-architecture--mexii .arch-image {
        width: 100%;
        margin: 0 0 12px 0; /* spazio piccolo tra immagine e bullet */
        flex: none;
    }

    .product-architecture--mexii .arch-image--mexii img,
    .product-architecture--mexii .arch-image img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .product-architecture--mexii .arch-side {
        width: 100%;
        margin: 0;
        padding: 0;
        flex: none;
    }

    .product-architecture--mexii .arch-bullets {
        margin: 0;
        padding: 0;
    }

    .product-architecture--mexii .arch-bullets li {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.35;
    }

    .product-architecture--mexii .arch-side .btn-download {
        margin-top: 18px;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   SCIENTIFIC — FIX loghi università su mobile
   uppsala.svg non ha dimensioni intrinseche: in colonna (≤992px)
   il contenitore collassava e il logo spariva. Qui do ai loghi
   un box con larghezza reale + object-fit contain, così anche
   l'SVG "senza misure" viene disegnato. Aspetto uniforme fra i due.
   ============================================================ */
@media (max-width: 992px) {
    .sci-uni-logo {
        width: 100%;
        max-width: 260px;
        padding: 18px 20px;
    }
    .sci-uni-logo img {
        width: 100%;
        height: auto;
        max-width: 220px;
        max-height: 90px;
        object-fit: contain;
    }
}

/* ============================================================
   ALPAN — immagine architecture troppo grande su mobile
   Rimpicciolita e centrata. Solo ALPAN (esclude THALNA --rack).
   Regola il max-width (240px) se serve più piccola/grande.
   ============================================================ */
@media (max-width: 767px) {
    .arch-grid:has(.arch-content):not(.arch-grid--rack) .arch-image {
        flex: 1 1 100%;
        max-width: 240px;
        margin: 0 auto;
    }
}

/* ============================================================
   HOME — bottone brochure troppo grande su mobile
   Allineato alla scala degli altri bottoni (telefono ≤600px).
   ============================================================ */
@media (max-width: 600px) {
    .btn-brochure {
        margin-top: 28px;
        padding: 10px 20px;
        font-size: 14px;
        line-height: 1.4;
    }
}