:root {
    --green: #55b637;
    --green-dark: #3d8f28;
    --orange: #f36f00;
    --black: #070907;
    --dark: #0d100e;
    --white: #ffffff;
    --light: #f3f4f1;
    --gray: #a8ada7;
    --container: 1420px;
}

/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

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

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

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

/* Header */

.header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 96px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 9, 8, 0.95);
    backdrop-filter: blur(14px);
}

.header-container {
    display: flex;
    height: 96px;
    align-items: center;
    gap: 34px;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    width: 230px;
    height: auto;
}

.main-menu {
    margin-left: auto;
}

.main-menu ul {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.main-menu a {
    position: relative;
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.main-menu a::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--green);
    content: "";
    transition: width 180ms ease;
}

.main-menu a:hover {
    color: var(--green);
}

.main-menu a:hover::after {
    width: 100%;
}

.header-button {
    display: inline-flex;
    min-height: 50px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    background: var(--orange);
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:
        background 180ms ease,
        transform 180ms ease;
}

.header-button:hover {
    background: var(--green);
    transform: translateY(-2px);
}

/* Hero */

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 96px;
    background:
        radial-gradient(
            circle at 77% 54%,
            rgba(255, 115, 0, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 42%,
            rgba(85, 182, 55, 0.08),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #050706 0%,
            #0b0e0b 55%,
            #16110d 100%
        );
}

.hero::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
    content: "";
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    right: 4%;
    bottom: -26%;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: rgba(239, 100, 0, 0.13);
    filter: blur(100px);
}

/* Struttura corretta a due colonne */

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: calc(100vh - 96px);
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    align-items: center;
    gap: 60px;
}

.hero-content {
    min-width: 0;
    padding: 70px 0;
}

.subtitle {
    margin-bottom: 24px;
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(58px, 5.8vw, 102px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.93;
    text-transform: uppercase;
}

.hero h1 span {
    display: block;
    color: var(--green);
}

.hero-description {
    max-width: 650px;
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 18px;
    line-height: 1.75;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}

.btn-green,
.btn-outline {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.btn-green {
    background: var(--green);
    color: var(--white);
}

.btn-green:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.72);
    color: var(--white);
}

.btn-outline:hover {
    border-color: var(--white);
    background: var(--white);
    color: var(--black);
    transform: translateY(-2px);
}

/* Immagine stufa */

.hero-product {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: calc(100vh - 96px);
    align-items: flex-end;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 35px;
}

.hero-product::before {
    position: absolute;
    right: 4%;
    bottom: 4%;
    width: 500px;
    max-width: 90%;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.82);
    content: "";
    filter: blur(32px);
}

.hero-product-glow {
    position: absolute;
    right: 3%;
    bottom: 13%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 140, 0, 0.30),
            rgba(255, 80, 0, 0.06) 45%,
            transparent 70%
        );
    filter: blur(10px);
}

.hero-product img {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 155px);
    object-fit: contain;
    object-position: center bottom;
    filter:
        drop-shadow(0 38px 48px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 42px rgba(255, 103, 0, 0.11));
    animation: product-entry 800ms ease-out both;
}

.hero-product-label {
    position: absolute;
    z-index: 3;
    right: 2%;
    bottom: 4%;
    max-width: 280px;
    padding: 13px 18px;
    border-left: 3px solid var(--green);
    background: rgba(11, 14, 12, 0.84);
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

@keyframes product-entry {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Sezione introduttiva prodotti */

.products-intro {
    padding: 110px 0;
    background: var(--light);
    color: #181b18;
}

.section-label {
    margin-bottom: 18px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.products-intro h2 {
    max-width: 940px;
    margin: 0;
    font-size: clamp(44px, 5vw, 76px);
    letter-spacing: -0.05em;
    line-height: 1;
}

.products-intro h2 span {
    color: var(--green-dark);
}

.products-intro > .container > p:last-child {
    max-width: 650px;
    margin-top: 28px;
    color: #646963;
    font-size: 18px;
    line-height: 1.75;
}

/* Footer provvisorio */

footer {
    padding: 35px 0;
    background: #050605;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

/* Tablet */

@media (max-width: 1180px) {
    .main-menu ul {
        gap: 22px;
    }

    .main-menu a {
        font-size: 11px;
    }

    .header-button {
        padding: 0 18px;
        font-size: 10px;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
        gap: 35px;
    }

    .hero h1 {
        font-size: clamp(54px, 6vw, 82px);
    }

    .hero-product-label {
        right: 0;
    }
}

/* Tablet verticale */

@media (max-width: 980px) {
    .main-menu {
        display: none;
    }

    .header-button {
        margin-left: auto;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
        gap: 20px;
    }

    .hero h1 {
        font-size: clamp(50px, 7vw, 72px);
    }

    .hero-description {
        font-size: 16px;
    }
}

/* Smartphone e tablet piccoli */

@media (max-width: 760px) {
    .header,
    .header-container {
        height: 82px;
    }

    .logo img {
        width: 185px;
    }

    .header-button {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 82px;
    }

    .hero-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 60px;
    }

    .hero-content {
        padding: 20px 0 10px;
    }

    .hero h1 {
        font-size: clamp(46px, 12vw, 65px);
    }

    .hero-product {
        min-height: 620px;
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .hero-product img {
        max-width: 90%;
        max-height: 590px;
    }

    .hero-product-glow {
        right: 50%;
        bottom: 12%;
        width: 440px;
        height: 440px;
        transform: translateX(50%);
    }

    .hero-product::before {
        right: 50%;
        bottom: 7%;
        width: 390px;
        transform: translateX(50%);
    }

    .hero-product-label {
        right: 50%;
        bottom: 3%;
        transform: translateX(50%);
        white-space: nowrap;
    }
}

/* Smartphone */

@media (max-width: 520px) {
    .container {
        width: min(90%, var(--container));
    }

    .logo img {
        width: 165px;
    }

    .subtitle {
        font-size: 11px;
    }

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

    .hero-description {
        margin-top: 25px;
        font-size: 16px;
    }

    .buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-green,
    .btn-outline {
        width: 100%;
    }

    .hero-product {
        min-height: 520px;
    }

    .hero-product img {
        max-width: 100%;
        max-height: 500px;
    }

    .hero-product-label {
        display: none;
    }

    .products-intro {
        padding: 80px 0;
    }
}/* Titoli comuni */

.section-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 70px;
    margin-bottom: 55px;
}

.section-heading h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(44px, 5vw, 76px);
    letter-spacing: -0.05em;
    line-height: 1;
}

.section-heading h2 span {
    display: block;
    color: var(--green);
}

.section-description {
    max-width: 560px;
    margin: 0;
    color: #737872;
    font-size: 18px;
    line-height: 1.75;
}

/* Perché BIOECOTERMO */

.why-us {
    padding: 120px 0;
    background: #f3f4f1;
    color: #171a17;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.why-card {
    min-height: 330px;
    padding: 42px;
    border: 1px solid #dfe2dc;
    background: #ffffff;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(25, 35, 25, 0.12);
}

.why-card-number {
    margin-bottom: 70px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.why-card h3 {
    margin-bottom: 18px;
    font-size: 22px;
    text-transform: uppercase;
}

.why-card p {
    color: #686d67;
    font-size: 16px;
    line-height: 1.7;
}

/* Categorie prodotti */

.product-categories {
    padding: 120px 0;
    background: #0b0d0b;
    color: #ffffff;
}

.product-categories .section-description {
    color: rgba(255, 255, 255, 0.65);
}

.product-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.product-category {
    position: relative;
    display: grid;
    min-height: 470px;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: #171a17;
    transition: transform 220ms ease;
}

.product-category:hover {
    transform: translateY(-7px);
}

.product-category-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle,
            rgba(243, 111, 0, 0.18),
            transparent 60%
        );
}

.product-category-image img {
    max-width: 90%;
    max-height: 430px;
    object-fit: contain;
    transition: transform 350ms ease;
}

.product-category:hover img {
    transform: scale(1.04);
}

.product-category-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle,
            rgba(85, 182, 55, 0.18),
            transparent 60%
        );
    color: rgba(255, 255, 255, 0.12);
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.product-category-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 42px;
}

.product-category-content p {
    margin-bottom: auto;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.product-category-content h3 {
    margin-bottom: 20px;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1;
    text-transform: uppercase;
}

.product-category-content span {
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Responsive sezioni */

@media (max-width: 900px) {
    .section-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        min-height: auto;
    }

    .why-card-number {
        margin-bottom: 35px;
    }

    .product-categories-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .why-us,
    .product-categories {
        padding: 80px 0;
    }

    .why-card {
        padding: 32px;
    }

    .product-category {
        min-height: 620px;
        grid-template-columns: 1fr;
        grid-template-rows: 1.3fr 0.7fr;
    }

    .product-category-content {
        padding: 30px;
    }
}/* ==========================================================
   WHY US
========================================================== */

.why-us{
    background:#f7f7f3;
    padding:140px 0;
}

.why-us .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 40px;
}

.why-us-header{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:100px;
    align-items:center;
    margin-bottom:90px;
}

.section-tag{
    display:inline-block;
    color:#57c43b;
    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:30px;
}

.why-us-title h2{
    margin:0;
    font-size:72px;
    line-height:.95;
    font-weight:800;
    color:#111;
}

.why-us-title h2 span{
    color:#57c43b;
}

.why-us-text p{
    margin:0;
    font-size:24px;
    line-height:1.8;
    color:#666;
}

.why-us-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.why-card{
    background:#fff;
    padding:60px 45px;
    border:1px solid #ececec;
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.why-card .number{
    display:block;
    color:#57c43b;
    font-size:18px;
    font-weight:700;
    margin-bottom:25px;
}

.why-card h3{
    margin:0 0 25px;
    font-size:34px;
    font-weight:800;
    color:#111;
    text-transform:uppercase;
}

.why-card p{
    margin:0;
    font-size:18px;
    line-height:1.8;
    color:#666;
}

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

@media (max-width:1024px){

    .why-us{
        padding:100px 0;
    }

    .why-us-header{
        grid-template-columns:1fr;
        gap:40px;
    }

    .why-us-title h2{
        font-size:58px;
    }

    .why-us-text p{
        font-size:20px;
    }

    .why-us-grid{
        grid-template-columns:1fr;
    }

}

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

@media (max-width:768px){

    .why-us .container{
        padding:0 24px;
    }

    .why-us-title h2{
        font-size:44px;
    }

    .why-us-text p{
        font-size:18px;
    }

    .why-card{
        padding:40px 30px;
    }

    .why-card h3{
        font-size:28px;
    }

}/* ==========================================================
   HOME CTA
========================================================== */

.home-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255, 255, 255, 0.13),
            transparent 32%
        ),
        #55b637;
    color: #ffffff;
}

.home-cta::before {
    position: absolute;
    top: -180px;
    right: -100px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    content: "";
}

.home-cta::after {
    position: absolute;
    right: 180px;
    bottom: -260px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.home-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    align-items: center;
    gap: 80px;
}

.home-cta__label {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-cta h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(44px, 5vw, 78px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-transform: uppercase;
}

.home-cta h2 span {
    display: block;
    color: #123a0c;
}

.home-cta__description {
    max-width: 720px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.75;
}

.home-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-cta__button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.home-cta__button:hover {
    transform: translateY(-3px);
}

.home-cta__button--primary {
    background: #ffffff;
    color: #151815;
}

.home-cta__button--primary:hover {
    background: #151815;
    color: #ffffff;
}

.home-cta__button--outline {
    border-color: rgba(255, 255, 255, 0.78);
    color: #ffffff;
}

.home-cta__button--outline:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #151815;
}

@media (max-width: 850px) {
    .home-cta {
        padding: 85px 0;
    }

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

    .home-cta__actions {
        max-width: 430px;
    }
}

@media (max-width: 520px) {
    .home-cta h2 {
        font-size: 42px;
    }

    .home-cta__description {
        font-size: 16px;
    }

    .home-cta__actions,
    .home-cta__button {
        width: 100%;
    }
}
/* ==========================================================
   HOME — VETRINA GAMMA PRODOTTI
========================================================== */

.home-range {
    position: relative;
    padding: 120px 0;
    background: #090d09;
    color: #fff;
    overflow: hidden;
}

.home-range .container {
    position: relative;
}


/* HEADER */

.home-range__header {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}

.home-range .section-label {
    margin: 0 0 16px;
    color: #4cc12f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.home-range__heading h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 5.4vw, 84px);
    line-height: .91;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.home-range__heading h2 span {
    display: block;
    color: #4cc12f;
}

.home-range__intro {
    max-width: 430px;
    padding-bottom: 5px;
}

.home-range__intro p {
    margin: 0 0 28px;
    color: rgba(255,255,255,.66);
    font-size: 15px;
    line-height: 1.7;
}


/* PULSANTE */

.home-range__button {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 17px 21px;
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s ease;
}

.home-range__button span {
    color: #4cc12f;
    font-size: 18px;
}

.home-range__button:hover {
    background: #4cc12f;
    border-color: #4cc12f;
    color: #071007;
}

.home-range__button:hover span {
    color: #071007;
}


/* GRANDE VETRINA */

.home-range__showcase {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 570px;
    border: 1px solid rgba(255,255,255,.11);
    background:
        radial-gradient(
            circle at 50% 58%,
            rgba(76,193,47,.09),
            transparent 32%
        ),
        #111611;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}


/* TRE ALIMENTAZIONI */

.home-range__fuel {
    position: relative;
    z-index: 4;
    padding: 28px 30px;
    border-right: 1px solid rgba(255,255,255,.09);
}

.home-range__fuel--mixed {
    border-right: 0;
}

.home-range__fuel span {
    display: block;
    margin-bottom: 5px;
    color: #4cc12f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.home-range__fuel strong {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}


/* PRODOTTI */

.home-range__products {
    position: absolute;
    inset: 70px 0 35px;
    z-index: 2;
    pointer-events: none;
}

.home-range__product {
    position: absolute;
    bottom: 0;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 30px 35px rgba(0,0,0,.55));
    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        opacity .4s ease;
}

.home-range__product--left {
    left: 10%;
    width: 25%;
    height: 77%;
    opacity: .78;
    transform: translateX(-4%) scale(.91);
}

.home-range__product--center {
    left: 50%;
    width: 29%;
    height: 91%;
    transform: translateX(-50%);
    z-index: 3;
}

.home-range__product--right {
    right: 9%;
    width: 25%;
    height: 77%;
    opacity: .78;
    transform: translateX(4%) scale(.91);
}


/* CTA IN BASSO */

.home-range__discover {
    position: absolute;
    z-index: 5;
    right: 30px;
    bottom: 25px;
    left: 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.16);

    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-range__discover strong {
    color: #4cc12f;
    font-size: 22px;
}


/* HOVER */

.home-range__showcase:hover .home-range__product--center {
    transform: translateX(-50%) translateY(-10px) scale(1.025);
}

.home-range__showcase:hover .home-range__product--left {
    transform: translateX(-4%) translateY(-5px) scale(.94);
}

.home-range__showcase:hover .home-range__product--right {
    transform: translateX(4%) translateY(-5px) scale(.94);
}


/* TABLET */

@media (max-width: 900px) {

    .home-range {
        padding: 85px 0;
    }

    .home-range__header {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-range__intro {
        max-width: 600px;
    }

    .home-range__showcase {
        min-height: 500px;
    }

    .home-range__product--left {
        left: 4%;
        width: 30%;
    }

    .home-range__product--center {
        width: 36%;
    }

    .home-range__product--right {
        right: 4%;
        width: 30%;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .home-range {
        padding: 65px 0;
    }

    .home-range__heading h2 {
        font-size: 46px;
    }

    .home-range__showcase {
        grid-template-columns: 1fr;
        min-height: 600px;
    }

    .home-range__fuel {
        padding: 18px 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .home-range__products {
        inset: 155px 0 55px;
    }

    .home-range__product--left {
        left: -4%;
        width: 42%;
        height: 65%;
    }

    .home-range__product--center {
        width: 54%;
        height: 82%;
    }

    .home-range__product--right {
        right: -4%;
        width: 42%;
        height: 65%;
    }

    .home-range__discover {
        right: 20px;
        bottom: 18px;
        left: 20px;
    }
}/* ==========================================================
   HOME - GAMMA PRODOTTI / TRE ALIMENTAZIONI
========================================================== */

.home-range__header {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 58px;
}

.home-range__heading h2 {
    max-width: 850px;
}

.home-range__fuels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.13);
    border-left: 1px solid rgba(255,255,255,.13);
}

.home-range__fuel-card {
    position: relative;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    padding: 30px;
    overflow: hidden;

    border-right: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.13);

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(76,193,47,.07),
            transparent 34%
        ),
        #111611;

    color: #fff;
    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease;
}

.home-range__fuel-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: #4cc12f;
    content: "";
    transition: width .35s ease;
}

.home-range__fuel-card:hover::before {
    width: 100%;
}

.home-range__fuel-card:hover {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(76,193,47,.15),
            transparent 38%
        ),
        #151b15;

    transform: translateY(-4px);
}


/* NUMERO */

.home-range__fuel-number {
    color: #4cc12f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}


/* CONTENUTO */

.home-range__fuel-content {
    margin: auto 0;
}

.home-range__fuel-content p {
    margin: 0 0 10px;
    color: #4cc12f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home-range__fuel-content h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 4vw, 66px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .9;
    text-transform: uppercase;
}

.home-range__fuel-content > span {
    display: block;
    max-width: 300px;
    margin-top: 22px;
    color: rgba(255,255,255,.56);
    font-size: 13px;
    line-height: 1.6;
}


/* PARTE INFERIORE */

.home-range__fuel-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);

    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-range__fuel-bottom strong {
    color: #4cc12f;
    font-size: 23px;
    font-weight: 400;

    transition: transform .25s ease;
}

.home-range__fuel-card:hover
.home-range__fuel-bottom strong {
    transform: translateX(8px);
}


/* ELIMINA VECCHIA VETRINA IMMAGINI */

.home-range__showcase,
.home-range__products,
.home-range__product,
.home-range__discover {
    display: none !important;
}


/* TABLET */

@media (max-width: 900px) {

    .home-range__header {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-range__fuels {
        grid-template-columns: 1fr;
    }

    .home-range__fuel-card {
        min-height: 300px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .home-range__fuel-card {
        min-height: 270px;
        padding: 24px;
    }

    .home-range__fuel-content h3 {
        font-size: 45px;
    }

}

/* ==========================================================
   BARRA "BIOECOTERMO SI RINNOVA" - FIX DEFINITIVO
   La barra resta sopra all'header fisso senza essere coperta.
========================================================== */

:root {
    --site-update-bar-height: 36px;
}

/* Spazio reale riservato alla barra superiore */
body {
    padding-top: var(--site-update-bar-height);
}

/* Barra superiore sempre visibile */
.site-update-bar {
    position: fixed;
    z-index: 10001;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--site-update-bar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: #202620;
    color: #ffffff;
}

.site-update-bar__inner {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 14px;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
}

.site-update-bar__inner strong {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-update-bar__inner span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    text-overflow: ellipsis;
}

/*
 * L'header era fixed con top:0.
 * Ora parte immediatamente sotto la barra.
 */
.header {
    top: var(--site-update-bar-height);
}


/* ==========================================================
   TABLET / MOBILE - BARRA AGGIORNAMENTO
========================================================== */

@media (max-width: 900px) {

    :root {
        --site-update-bar-height: 50px;
    }

    .site-update-bar__inner {
        flex-direction: column;
        gap: 2px;
        padding: 6px 18px;
        white-space: normal;
    }

    .site-update-bar__inner span {
        overflow: visible;
        font-size: 10px;
        text-overflow: clip;
    }

}


@media (max-width: 600px) {

    :root {
        --site-update-bar-height: 62px;
    }

    .site-update-bar__inner {
        padding: 6px 12px;
    }

    .site-update-bar__inner strong {
        font-size: 10px;
    }

    .site-update-bar__inner span {
        font-size: 9px;
        line-height: 1.25;
    }

}
/* ==========================================================
   FIX BARRA WORDPRESS ADMIN
========================================================== */

/* Quando NON siamo loggati */
.site-update-bar {
    top: 0;
}

.header {
    top: var(--site-update-bar-height);
}

/* Quando siamo loggati in WordPress */
body.admin-bar .site-update-bar {
    top: 32px;
}

body.admin-bar .header {
    top: calc(32px + var(--site-update-bar-height));
}

/* WordPress usa una admin bar più alta sugli schermi piccoli */
@media screen and (max-width: 782px) {

    body.admin-bar .site-update-bar {
        top: 46px;
    }

    body.admin-bar .header {
        top: calc(46px + var(--site-update-bar-height));
    }
}
/* ==========================================================
   BARRA AGGIORNAMENTO - VERSIONE PIÙ VISIBILE
========================================================== */

:root {
    --site-update-bar-height: 52px;
}

.site-update-bar {
    height: var(--site-update-bar-height);
    background: #171c17;
    border-bottom: 3px solid var(--orange);
}

.site-update-bar__inner {
    gap: 18px;
    padding: 0 20px;
}

.site-update-bar__inner strong {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--green);
}

.site-update-bar__inner span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
    :root {
        --site-update-bar-height: 66px;
    }

    .site-update-bar__inner strong {
        font-size: 12px;
    }

    .site-update-bar__inner span {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    :root {
        --site-update-bar-height: 78px;
    }

    .site-update-bar__inner {
        gap: 4px;
        padding: 8px 14px;
    }

    .site-update-bar__inner strong {
        font-size: 11px;
    }

    .site-update-bar__inner span {
        font-size: 10px;
    }
}