:root{
      --brand:#ea2768;
      --accent:#e91e63;
      --ink:#111;
      --muted:#6b7280;
      --card:#fff;
      --bg:#fafafa;
      --ring:rgba(234,39,104,.2);
      --shadow:0 10px 25px rgba(17,24,39,.08);
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}

    /* ===== Header (uguale al tuo) ===== */
    header{
      position:fixed; top:0; left:0; right:0; height:75px; background:var(--brand);
      z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,.1);
      display:flex; align-items:center; justify-content:center;
    }
    .logo-text-center a{
      text-decoration:none; font-stretch:extra-condensed; font-size:40px; font-weight:700; color:#fff;
      text-shadow:2px 2px 0 #f57ca5,2px -2px 0 #f57ca5,-2px 2px 0 #f57ca5,-2px -2px 0 #f57ca5,2px 0 0 #f57ca5,0 2px 0 #f57ca5,-2px 0 0 #f57ca5,0 -2px 0 #f57ca5;
    }
    .hamburger{
      position:fixed; top:20px; left:20px; width:35px; height:25px;
      display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; z-index:1001;
    }
    .hamburger span{display:block; height:3px; background:#fff; border-radius:5px; transition:.35s}
    .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
    .hamburger.active span:nth-child(2){opacity:0}
    .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

    .side-menu{
      position:fixed; top:0; left:-100%; width:280px; height:100%;
      backdrop-filter:blur(20px) saturate(180%); background:rgba(20,20,20,.7);
      box-shadow:3px 0 20px rgba(0,0,0,.3);
      display:flex; flex-direction:column; padding:80px 25px 40px;
      transition:left .5s ease, opacity .4s; opacity:0; z-index:1000;
    }
    .side-menu.show{left:0; opacity:1}
    .side-menu .menu-header h2{color:#ff4081; margin:0 0 6px; font-size:24px}
    .side-menu .menu-header p{color:#bbb; margin:0 0 12px; font-size:13px}
    .side-menu ul{list-style:none; margin:0; padding:0}
    .side-menu a{display:block; color:#fff; text-decoration:none; font-size:17px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08)}
    .side-menu a:hover{color:#ff4081; transform:translateX(4px)}

    main{padding-top:92px}

    /* ===== Hero evidenza ===== */
    .hero{
      max-width:1200px; margin:18px auto 8px; padding:0 20px;
      display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
    }
    .hero-card{
      position:relative; border-radius:var(--radius); overflow:hidden; background:#000; color:#fff; box-shadow:var(--shadow);
      min-height:280px; display:flex; align-items:flex-end;
    }
    .hero-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.85)}
    .hero-card::after{
      content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
    }
    .hero-content{position:relative; padding:20px}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2)}
    .chip .dot{width:6px; height:6px; border-radius:999px; background:#22d3ee}
    .hero h1{margin:10px 0 6px; font-size:28px; line-height:1.15}
    .hero p{margin:0; font-size:14px; opacity:.95}
    .hero-aside{
      display:grid; gap:18px;
    }
    .aside-card{
      display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center;
      background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
    }
    .aside-card img{width:120px; height:100%; object-fit:cover}
    .aside-card h3{font-size:16px; margin:0 0 6px; color:var(--accent)}
    .aside-meta{font-size:12px; color:var(--muted)}

    /* ===== Toolbar (search + categorie) ===== */
    .toolbar{
      max-width:1200px; margin:14px auto 8px; padding:0 20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;
    }
    .search{
      flex:1 1 280px; display:flex; align-items:center; gap:10px; background:var(--card);
      border:1px solid #eee; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow);
    }
    .search input{
      flex:1; border:0; outline:0; font-size:14px; background:transparent;
    }
    .cats{display:flex; gap:10px; flex-wrap:wrap}
    .pill{
      border:1px solid #eee; background:#fff; color:#111; padding:8px 12px; border-radius:999px; font-size:13px; cursor:pointer;
      box-shadow:var(--shadow);
    }
    .pill.active{border-color:var(--accent); background:rgba(233,30,99,.08); color:var(--accent)}

    /* ===== Griglia articoli ===== */
    .grid{
      max-width:1200px; margin:12px auto 60px; padding:0 20px;
      display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px;
    }
    .card{
      background:var(--card); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow); display:block;
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .card:hover{transform:translateY(-4px); box-shadow:0 18px 35px rgba(17,24,39,.12)}
    .thumb{position:relative}
    .thumb img{width:100%; height:200px; object-fit:cover; display:block}
    .badge{
      position:absolute; left:10px; top:10px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:6px 9px; border-radius:10px;
      display:flex; align-items:center; gap:6px;
    }
    .badge .dot{width:6px; height:6px; border-radius:50%; background:#34d399}
    .card-body{padding:16px 16px 18px}
    .card h2{font-size:18px; color:var(--accent); margin:0 0 6px; line-height:1.25}
    .excerpt{font-size:14px; color:#374151; margin:0 0 10px}
    .meta{display:flex; gap:10px; font-size:12px; color:var(--muted)}
    .tags{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
    .tag{font-size:11px; padding:5px 8px; border-radius:999px; background:#f3f4f6; color:#111; border:1px solid #eee}

    /* ===== CTA / Pagination ===== */
    .actions{display:flex; justify-content:center; margin:0 auto 70px}
    .btn{
      appearance:none; border:1px solid var(--accent); color:#fff; background:var(--accent);
      padding:11px 18px; border-radius:12px; font-weight:600; box-shadow:var(--shadow); cursor:pointer;
    }
    .btn:focus{outline:3px solid var(--ring); outline-offset:2px}
    .btn.secondary{background:#fff; color:var(--accent)}

    /* ===== Footer ===== */
    footer{ text-align:center; padding:26px 10px 40px; color:#777; font-size:13px }

    /* ===== Responsive ===== */
    @media (max-width: 960px){
      .hero{grid-template-columns:1fr; gap:14px}
    }