:root{
      --bg:#f6f7f5;
      --surface:#ffffff;
      --ink:#0b1b13;
      --muted:#6b7a6f;
      --brand:#015f2d;
      --brand-2:#a5d6b1;
      --accent:#e5f3ea;
      --warning:#f7f1e3;
      --radius:14px;
      --radius-lg:24px;
      --shadow:0 10px 30px rgba(18,37,27,.08);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(100%, var(--container)); margin-inline:auto; padding-inline:24px}
    .btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.3rem; border-radius:999px; font-weight:700; border:1px solid transparent; transition:.25s ease}
    .btn-primary{background:var(--brand); color:white; box-shadow:0 8px 18px rgba(31,138,84,.25)}
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(31,138,84,.28)}
    .btn-ghost{background:transparent; border-color:#c9d7cd; color:var(--ink)}
    .badge{display:inline-block; padding:.35rem .7rem; border-radius:999px; font-size:.78rem; background:var(--accent); color:var(--brand); font-weight:700}
    .shadow{box-shadow:var(--shadow)}
    .card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow)}
    .kicker{letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--brand); font-size:.78rem}
    .eyebrow{font-family:"Playfair Display",serif; font-weight:700; line-height:1.2}
    .rounded{border-radius:var(--radius)}
    /* Header */
    .topbar{background:var(--ink); color:white; font-size:.875rem}
    .topbar .container{display:flex; justify-content:center; padding:.4rem 24px}
    header.site{position:sticky; top:0; z-index:30; backdrop-filter:saturate(1.2) blur(8px)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:.7rem}
    .brand .logo{width:160px; aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2));}
    .brand b{font-family:"Playfair Display",serif; font-size:1.25rem}
    .nav .links{display:none; gap:20px}
    .nav .actions{display:flex; align-items:center; gap:10px}
    .hamb{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid #dfe7e2; background:white}

    /* Hero */
    .hero{position:relative; isolation:isolate; padding:64px 0 40px; background-image: url(img/bg-fatticonamore.png)!important;}

    .hero-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
    .hero h1{font-size:clamp(2rem, 4.5vw, 3.4rem); margin:.5rem 0 1rem; font-family:"Playfair Display",serif}
    .hero p{color:var(--muted); font-size:1.05rem}
    .hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .pill{display:flex; align-items:center; gap:.6rem; background:white; border:1px solid #e3eee7; padding:.6rem .75rem; border-radius:999px; font-size:.9rem}
    .rating{display:flex; align-items:center; gap:8px; margin-top:10px; color:#355545; font-weight:700}

    .hero-visual{position:relative}
    .product-card{position:relative; padding:0; border-radius:var(--radius-lg); background:#ffffff; box-shadow:var(--shadow)}
    .product-card .photo{width:100%; aspect-ratio:4/3; border-radius:16px; background:#eaf3ed url("img/Sezione-1.jpg") center/cover no-repeat}
    .product-meta{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
    .price{font-weight:800; font-size:1.15rem}
    .floating{position:absolute; right:-10px; bottom:-14px; transform:rotate(-6deg)}
    .floating img{width:110px; height:110px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); border:6px solid #fff}

    /* Logos */
    .logos{padding:26px 0 10px}
    .logos-row{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:center; filter:grayscale(100%) contrast(0.5) opacity(.8)}
    .logos .logo{height:88px;}

    /* Features */
    .features{padding:60px 0; background: #fff;}
    .feature-grid{display:grid; grid-template-columns:1fr; gap:16px}
    .feature{padding:18px; border-radius:16px; background:var(--surface); border:1px solid #e4ebe6}
    .feature img {border-radius: 13px;}    
    .icon{width:44px; height:44px; border-radius:12px; background:var(--accent); display:grid; place-items:center; font-weight:800; color:var(--brand)}

    /* Collections / Products */
    #shop {background: #F2F7F1;}
    .section{padding:70px 0}
    .section h2{font-family:"Playfair Display",serif; font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0 0 10px}
    .serif {font-family:"Playfair Display",serif}
    .muted{color:var(--muted)}
    .tabs{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 28px}
    .tab{padding:.6rem 1rem; border:1px solid #dfe7e2; background:white; border-radius:999px; font-weight:700}
    .tab.is-active{background:var(--ink); color:white; border-color:var(--ink)}
    .products{display:grid; grid-template-columns:1fr; gap:18px}
    .prod{padding:14px; border:1px solid #e4ebe6; border-radius:16px; background:var(--surface)}
    .prod .thumb{aspect-ratio:1; border-radius:12px; background:#eaf3ed url("https://picsum.photos/600/600?random=2") center/cover no-repeat}
    .prod h5{margin:.6rem 0 .2rem; font-size:1.05rem}
    .stars{font-size:.9rem; color:#2f684a}

    /* About + Benefit */
    .about{display:grid; grid-template-columns:1fr; gap:26px; align-items:end;}
    .about .visual{aspect-ratio:4/3; border-radius:20px; background:#eaf3ed url("https://picsum.photos/900/700?random=3") center/cover no-repeat}
    .check{display:flex; align-items:flex-start; gap:.6rem}
    .check i{width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--brand); font-weight:900; display:grid; place-items:center; margin-top:3px}

    /* Steps */
    .grid-benefits {display:grid; grid-template-columns:1fr; gap:26px}
    .grid-benefits .image img {border-radius: 20px;}
    .steps{display:grid; grid-template-columns:1fr; gap:16px; counter-reset:step}
    .step{padding:18px; border:1px solid #e4ebe6; border-radius:16px; background:var(--surface); position:relative}
    .step::before{counter-increment:step; content:counter(step); position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--brand); font-weight:800}

    .fatti-con-amore {background-color: #8aba2423; background-image: url(img/bg-fatticonamore.png); background-size: cover; background-position: center;}
    .grid-fatti-con-amore {display:grid; grid-template-columns:1fr; gap:26px; margin-top:40px;}
    .fatti-con-amore hr {opacity: .3;}
    /* Testimonials */
    .testi{display:grid; grid-template-columns:1fr; gap:18px}
    .quote{padding:18px; border-radius:16px; background:var(--surface); border:1px solid #e4ebe6}
    .person{display:flex; align-items:center; gap:.8rem; margin-top:12px}
    .avatar{width:44px; height:44px; border-radius:50%; background:#eaeaea url("https://picsum.photos/200/200?random=4") center/cover no-repeat}

    /* FAQ */
    .faq{max-width:900px; margin-inline:auto}
    details{border:1px solid #e4ebe6; border-radius:14px; padding:14px 16px; background:var(--surface)}
    details+details{margin-top:12px}
    summary{cursor:pointer; font-weight:700}

    /* Newsletter */
    .newsletter{padding:40px; border-radius:24px; background:linear-gradient(180deg,#eaf3ed, #ffffff)}
    .newsletter form{display:flex; gap:10px; flex-wrap:wrap}
    .newsletter input{flex:1; min-width:220px; padding:12px 14px; border-radius:999px; border:1px solid #cfe0d6; outline:0}

    /* Footer */
    footer{padding:56px 0 30px; background:var(--surface); border-top:1px solid #e6eee8}
    .foot-grid{display:grid; grid-template-columns:1fr; gap:24px}
    .foot-col h6{margin:.2rem 0 .6rem; font-size:1rem}
    .foot-col ul{list-style:none; padding:0; margin:0}
    .foot-col li+li{margin-top:.4rem}
    .copyright{margin-top:26px; padding-top:16px; border-top:1px solid #006d1b; color:#fff; font-size:.9rem}

    .hero {
        padding-bottom: 40px;
        background: #fff;
    }
    .hero .container {
        position: relative;
        overflow: visible;
    }

    .altri-prodotti {margin-top: 40px;}
    .altri-prodotti .step::before {
        display: none;
    }
    video {
        max-width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }
    .video-parent {background: #fff;}

    .center {text-align: center;}
    .fatti-con-amore .right {text-align: left;}
    .our-story {background: #fff;}
    .footer {
        background: var(--brand);
        color: white;
    }
    .footer .logo img {
        max-width: 200px;
        margin: 0 auto;
    }
    .footer i {
        font-size: 24px;
        margin: 0 15px;
    }
    header .btn {margin-right: 10px;}
    /* Responsive */
    @media (min-width: 760px){
      .nav .links{display:flex}
      .hamb{display:none}
      .hero{padding-top: 60px;}
      .hero-grid{grid-template-columns:1fr 2fr}
      .logos-row{grid-template-columns:repeat(5,1fr)}
      .feature-grid{grid-template-columns:repeat(3,1fr)}
      .products{grid-template-columns:repeat(3,1fr)}
      .about{grid-template-columns:1fr}
       .grid-benefits {grid-template-columns:1fr 1fr; gap:48px}
       .grid-fatti-con-amore {grid-template-columns:1fr 1fr 1fr; gap:48px;}
       .fatti-con-amore .right {text-align: right;}
      .testi{grid-template-columns:repeat(3,1fr)}
      .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}
       .hero {
        padding-bottom: 300px;
        background: #fff;
    }
      .hero .text {
        position: absolute;
        bottom: -300px;
        left: 0;
        background: #fff;
        border-radius:var(--radius-lg);
        max-width:70%;
        padding: 24px 32px;
        z-index: 100;
    }
    .hero .product-card {
        max-width: 75%;
        margin-left: 25%;
    }
    }
    @media (min-width: 1100px){
      .products{grid-template-columns:repeat(3,1fr)}
    }