/* Root variables - Vodafone Brand */
    :root{
      --vodafone-red:#e60000;
      --vodafone-dark:#4a4a4a;
      --vodafone-light:#f4f4f4;
      --vodafone-dark-red:#cc0000;
      --vodafone-white:#ffffff;
      --vodafone-black:#000000;
      --silver-gray:#f8fafc;
      --dark-gray:#1e293b;
      --medium-gray:#475569;
      --light-gray:#e2e8f0;
      --card-radius:20px;
      --card-bd:#e2e8f0;
      --ink:#1e293b;
      --muted:#475569;
      --ring:#ffe0e0;
      --brand:#e60000;
      --brand-dark:#b30000;
    }

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

    html, body { 
      overflow-x: hidden; 
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: var(--vodafone-dark);
      background: var(--vodafone-white);
    }

    /* ✅ ACCESSIBILITY: Skip Link */
    .skip-link{
      position:absolute;
      top:-40px;
      left:8px;
      background:#e60000;
      color:#fff;
      padding:10px 16px;
      border-radius:4px;
      text-decoration:none;
      font-weight:600;
      z-index:9999;
      transition:top 0.3s;
    }
    .skip-link:focus{
      top:8px;
      outline:3px solid #ffeb3b;
    }

    /* ✅ ACCESSIBILITY: Focus Visible */
    :focus-visible{
      outline:3px solid rgba(230,0,0,.55);
      outline-offset:3px;
      border-radius:12px;
    }

    /* ✅ MOBILE UX: Tap Targets 48px */
    .btn,.nav-link,.card-cta,.mobile-menu-btn,.whatsapp-btn{
      min-width:48px;
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    /* ✅ MOBILE UX: Font Size 16px */
    @media (max-width:768px){
      body,p,li,.card p,.plan ul li{
        font-size:16px!important;
        line-height:1.6;
      }
      .btn,.cta-primary{
        font-size:16px!important;
      }
    }

    /* ✅ ACCESSIBILITY: WCAG AA Contrast */
    .stat-label,.muted,.card p{
      color:#475569;
    }

    /* Badge Ufficiale Vodafone */
    .badge-ufficiale {
      background: var(--vodafone-red);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 12px rgba(230,0,0,.2);
    }
    
    .badge-ufficiale svg{
      width:20px;
      height:20px;
      color:white;
    }

    /* CTA Primary com design pulito e puntini */
    .cta-primary {
      background:#fff;
      color:#e60000;
      padding:14px 28px;
      border:2px solid #e60000;
      border-radius:25px;
      font-weight:700;
      cursor:pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:0.75rem;
      font-size:1.1rem;
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:0 4px 16px rgba(230,0,0,.15);
      position:relative;
      overflow:hidden;
    }
    
    .cta-primary::before{
      content:"";
      position:absolute;
      top:0;
      right:0;
      width:60px;
      height:100%;
      background:
        radial-gradient(circle at 15px 15px, rgba(230,0,0,.15) 2px, transparent 3px),
        radial-gradient(circle at 35px 20px, rgba(230,0,0,.10) 1.5px, transparent 2.5px),
        radial-gradient(circle at 25px 35px, rgba(230,0,0,.12) 2px, transparent 3px),
        radial-gradient(circle at 45px 30px, rgba(230,0,0,.08) 1px, transparent 2px);
      background-size:50px 50px;
      opacity:0;
      transition:opacity .3s ease;
      pointer-events:none;
    }

    .cta-primary:hover {
      background:#e60000;
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 8px 25px rgba(230,0,0,.25);
    }
    
    .cta-primary:hover::before{
      opacity:0.6;
    }

    .cta-primary:active {
      transform:translateY(0);
      box-shadow:0 4px 12px rgba(230,0,0,.2);
    }

    /* Card base - Bordo gradient/subtle */
    .card{
      position:relative;
      border:1px solid rgba(226,232,240,.9);
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(135deg, rgba(230,0,0,.25), rgba(230,0,0,0)) border-box;
      border-radius:var(--card-radius);
      padding:28px;
      box-shadow:0 6px 24px rgba(0,0,0,.06);
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow:hidden;
      isolation:isolate;
    }

    /* Hover pulito e tech */
    .card:hover{
      outline:0;
      transform: translateY(-6px);
      box-shadow:0 18px 46px rgba(230,0,0,.16);
    }

    /* Icon ring con icone SVG semplici */
    .icon-ring{
      width:72px;
      height:72px;
      border-radius:20px;
      display:grid;
      place-items:center;
      background:#e60000;
      border:2px solid #e60000;
      box-shadow:
        0 0 15px rgba(230,0,0,.4),
        0 0 30px rgba(230,0,0,.2),
        0 4px 16px rgba(230,0,0,.25);
      font-size:24px;
      color:#fff;
      margin:0 auto 18px;
      transition:all .3s ease;
      position:relative;
      overflow:visible;
    }
    
    /* Icone SVG semplici */
    .icon-ring svg{
      width:28px;
      height:28px;
      stroke:#fff;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    
    /* Effetto neon più intenso al hover */
    .card:hover .icon-ring{
      background:#ff1a1a;
      border-color:#ff1a1a;
      transform:scale(1.05);
      box-shadow:
        0 0 20px rgba(255,26,26,.6),
        0 0 40px rgba(255,26,26,.3),
        0 0 60px rgba(255,26,26,.15),
        0 8px 24px rgba(230,0,0,.4);
    }
    
    /* Puntini piccoli e marcati intorno al cerchio */
    .icon-ring::before{
      content:"";
      position:absolute;
      inset:-10px;
      background:
        radial-gradient(circle at 10px 20px, rgba(230,0,0,.8) 1.5px, transparent 2px),
        radial-gradient(circle at 30px 8px, rgba(230,0,0,.6) 1px, transparent 1.5px),
        radial-gradient(circle at 50px 15px, rgba(230,0,0,.9) 2px, transparent 2.5px),
        radial-gradient(circle at 70px 30px, rgba(230,0,0,.5) 1px, transparent 1.5px),
        radial-gradient(circle at 80px 50px, rgba(230,0,0,.7) 1.5px, transparent 2px),
        radial-gradient(circle at 70px 70px, rgba(230,0,0,.6) 1px, transparent 1.5px),
        radial-gradient(circle at 50px 80px, rgba(230,0,0,.8) 2px, transparent 2.5px),
        radial-gradient(circle at 30px 75px, rgba(230,0,0,.5) 1px, transparent 1.5px),
        radial-gradient(circle at 10px 60px, rgba(230,0,0,.7) 1.5px, transparent 2px),
        radial-gradient(circle at 5px 40px, rgba(230,0,0,.6) 1px, transparent 1.5px);
      background-size:90px 90px;
      opacity:0;
      transition:opacity .3s ease;
      border-radius:24px;
      pointer-events:none;
    }
    
    .card:hover .icon-ring::before{
      opacity:1;
    }

    /* Titoli/para coerenti */
    .card h3{
      font-size:1.25rem;
      color:var(--ink);
      margin:8px 0 6px;
    }
    
    .card p{
      color:var(--muted);
      line-height:1.7;
    }

    /* Azione */
    .card .card-cta{
      margin-top:16px;
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-weight:700;
      color:#e60000;
      text-decoration:none;
    }
    
    .card .card-cta:hover{
      text-decoration:underline;
    }

    /* Badge angolo - Scritta rossa neon, sfondo bianco, contorno rosso */
    .card .ribbon{
      position:absolute;
      top:16px;
      right:16px;
      font-size:.75rem;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.05em;
      padding:8px 14px;
      border-radius:20px;
      color:#e60000;
      background:#fff;
      border:2px solid #e60000;
      box-shadow:
        0 0 8px rgba(230,0,0,.3),
        0 4px 12px rgba(230,0,0,.15);
      text-shadow:0 0 4px rgba(230,0,0,.4);
    }

    /* Section divider */
    .section-divider{
      max-width:1200px;
      margin:28px auto 0;
      height:1px;
      background:linear-gradient(90deg,transparent, rgba(230,0,0,.25), transparent);
    }

    /* Grid generica */
    .grid{
      display:grid;
      gap:22px;
      grid-template-columns: repeat(12, minmax(0,1fr));
    }
    
    .grid-3 > *{
      grid-column: span 4;
    }
    
    .grid-4 > *{
      grid-column: span 3;
    }
    
    @media (max-width:1024px){
      .grid-3 > *, .grid-4 > *{
        grid-column: span 6;
      }
    }
    
    @media (max-width:640px){
      .grid-3 > *, .grid-4 > *{
        grid-column: span 12;
      }
    }

    /* Deal/piano */
    .plan{
      border-radius:24px;
      padding:32px;
      background:#fff;
      border:1px solid var(--card-bd);
      box-shadow:0 10px 30px rgba(0,0,0,.06);
      transition:.25s ease;
      position:relative;
      min-height:420px;
      display:flex;
      flex-direction:column;
    }
    
    .plan::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(230,0,0,.15), transparent 50%);
      opacity:0;
      transition:opacity .3s ease;
      pointer-events:none;
      z-index:-1;
    }
    
    .plan:hover{
      transform:translateY(-5px);
      box-shadow:0 16px 44px rgba(230,0,0,.16);
      border-color:rgba(230,0,0,.25);
    }
    
    .plan:hover::before{
      opacity:1;
    }
    
    .plan h3{
      display:flex;
      align-items:center;
      gap:.5rem;
      font-size:1.5rem;
      margin-bottom:1rem;
    }
    
    /* Deal/piano variations */
    .plan.plan-recommended h3::after{
      content:"Consigliato";
      background:#e60000;
      color:#fff;
      font-size:.7rem;
      padding:4px 8px;
      border-radius:12px;
    }
    
    .plan.plan-popular h3::after{
      content:"Più venduto";
      background:linear-gradient(135deg,#ff6b00,#ff8800);
      color:#fff;
      font-size:.7rem;
      padding:4px 8px;
      border-radius:12px;
    }
    
    .plan:not(.plan-recommended):not(.plan-popular) h3::after{
      display:none;
    }
    
    .plan + .plan{
      position:relative;
    }
    
    .plan + .plan::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-9px;
      height:1px;
      background:linear-gradient(90deg, transparent, #e2e8f0, transparent);
    }
    
    .plan .price{
      font-size:2.5rem;
      font-weight:800;
      color:#e60000;
      margin-bottom:1.5rem;
    }
    
    .plan ul{
      margin:0 0 auto 0;
      padding:0;
      list-style:none;
      color:var(--muted);
      flex-grow:1;
    }
    
    .plan ul li{
      margin:12px 0;
      position:relative;
      padding-left:24px;
      font-size:1rem;
      line-height:1.6;
    }

    .plan ul li::before{
      content:"✓";
      position:absolute;
      left:0;
      color:#e60000;
      font-weight:bold;
    }
    
    .plan .btn{
      margin-top:24px;
      align-self:stretch;
      justify-content:center;
      padding:16px 24px;
      font-size:1.1rem;
    }

    /* Navigation */
    .brand-ribbon{
      position:fixed;
      inset:0 0 auto 0;
      height:6px;
      z-index:1200;
      background: linear-gradient(90deg,#e60000 0%, #ff3b30 35%, #e60000 70%, #b30000 100%);
      box-shadow:0 6px 20px rgba(230,0,0,.25);
    }
    
    .navbar{
      position:fixed;
      top:6px;
      width:100%;
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(20px);
      z-index:1000;
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-bottom:1px solid var(--card-bd);
    }
    
    .navbar.scrolled{
      background:rgba(255,255,255,.98);
      box-shadow:0 8px 24px rgba(0,0,0,.06);
    }

    .nav-container{
      max-width:1200px;
      margin-inline:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0.8rem 24px;
      gap:2rem;
    }

    .logo{
      font-size:1.8rem;
      font-weight:700;
      background:linear-gradient(135deg, #e60000, #ff3333);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      text-decoration:none;
      display:flex;
      align-items:center;
      gap:0.5rem;
      filter:drop-shadow(0 2px 8px rgba(230,0,0,.3));
      transition:all 0.3s ease;
      flex-shrink:0;
    }

    .nav-menu{
      display:flex;
      list-style:none;
      gap:0.8rem;
      align-items:center;
      margin:0;
      padding:0;
      flex-wrap:nowrap;
      white-space:nowrap;
    }

    /* Desktop tightening to keep menu on a single line */
    @media (min-width:1025px){
      .nav-menu{ gap:0.6rem; }
      .nav-link{ font-size:0.85rem; padding:0.5rem 0.6rem; }
    }

    .nav-link{
      text-decoration:none;
      color:#1e293b;
      font-weight:600;
      position:relative;
      transition:all 0.3s ease;
      padding:0.6rem 0.8rem;
      border-radius:8px;
      font-size:0.9rem;
      white-space:nowrap;
      background-image: linear-gradient(#e60000,#e60000);
      background-repeat: no-repeat;
      background-size: 0% 2px;
      background-position: 50% 100%;
    }

    .nav-link:hover{
      color:#e60000;
      transform:translateY(-1px);
      background-size: 80% 2px;
      background-color:rgba(230,0,0,0.05);
    }

    /* Mobile menu */
    .mobile-menu-btn{
      display:none;
      flex-direction:column;
      cursor:pointer;
      padding:0.5rem;
      z-index:1001;
      background:transparent;
      border:none;
    }

    .hamburger-line{
      width:25px;
      height:3px;
      background:var(--vodafone-red);
      margin:3px 0;
      transition:all 0.3s ease;
      border-radius:3px;
    }

    .mobile-menu{
      display:none;
      position:fixed;
      top:80px;
      left:0;
      right:0;
      max-height:calc(100vh - 80px);
      background:rgba(255,255,255,.98);
      backdrop-filter:blur(20px);
      border-top:1px solid var(--card-bd);
      padding:2rem;
      z-index:999;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }

    .mobile-menu.active{
      display:block;
    }

    .mobile-nav-links{
      display:flex;
      flex-direction:column;
      gap:0.75rem;
      max-width:400px;
      margin:0 auto;
    }

    .mobile-nav-links .nav-link{
      padding:1rem;
      text-align:center;
      border:1px solid var(--card-bd);
      border-radius:12px;
      background:#fff;
      color:#1e293b;
      font-weight:600;
    }

    .mobile-nav-links .nav-link:hover{
      background:#fef2f2;
      border-color:#e60000;
      color:#e60000;
    }

    /* Hero with Fibonacci circles */
    .mesh-bg{
      position:fixed;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(60% 40% at 70% 30%, rgba(230,0,0,.12), transparent 60%),
        conic-gradient(from 210deg at 70% 35%, rgba(230,0,0,.15), transparent 45% 75%, rgba(230,0,0,.10));
    }

    .mesh-bg::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .02'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity:.7;
      mix-blend-mode:soft-light;
    }

    .fibonacci-circles{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
    }

    .fib-circle{
      position:absolute;
      border-radius:50%;
      background:radial-gradient(circle, rgba(230,0,0,.08), rgba(230,0,0,.02));
      animation:fibFloat 8s ease-in-out infinite;
      filter:blur(0.5px);
    }

    .fib-circle:nth-child(odd){
      animation-direction:reverse;
      animation-duration:12s;
    }

    .fib-circle:nth-child(3n){
      animation-delay:-2s;
    }

    .fib-circle:nth-child(5n){
      animation-delay:-4s;
      background:radial-gradient(circle, rgba(230,0,0,.06), rgba(230,0,0,.01));
    }

    @keyframes fibFloat{
      0%,100%{ transform:translate(0,0) scale(1); }
      25%{ transform:translate(5px,-8px) scale(1.05); }
      50%{ transform:translate(-3px,12px) scale(0.95); }
      75%{ transform:translate(8px,-5px) scale(1.02); }
    }

    .hero{
      min-height:100dvh;
      display:grid;
      place-items:center;
      padding:96px 24px 48px;
    }

    .hero-inner{
      max-width:1200px;
      display:grid;
      grid-template-columns:1fr 0.8fr;
      gap:64px;
      align-items:center;
    }

    .hero h1{
      font-size:clamp(36px,7vw,72px);
      line-height:1.05;
      margin:.9rem 0;
      font-weight:800;
    }
    
    .hero-subtitle{
      font-size:clamp(18px,2.5vw,24px);
      color:#475569;
      margin-bottom:2rem;
      font-weight:500;
    }
    
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.5rem;
      margin:2rem 0;
    }
    
    .stat-box{
      text-align:center;
      padding:1.8rem 1.2rem;
      background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.9));
      border:1px solid #e2e8f0;
      border-radius:20px;
      box-shadow:0 8px 20px rgba(0,0,0,.08);
      transition:all 0.3s ease;
      position:relative;
      overflow:hidden;
    }

    .stat-box::before{
      content:"";
      position:absolute;
      top:0;
      right:0;
      width:60px;
      height:60px;
      background:
        radial-gradient(circle at 12px 12px, rgba(230,0,0,.08) 2px, transparent 3px),
        radial-gradient(circle at 28px 16px, rgba(230,0,0,.05) 1.5px, transparent 2.5px),
        radial-gradient(circle at 20px 28px, rgba(230,0,0,.10) 2px, transparent 3px),
        radial-gradient(circle at 36px 24px, rgba(230,0,0,.06) 1px, transparent 2px);
      background-size:40px 40px;
      opacity:0;
      transition:opacity 0.4s ease;
      pointer-events:none;
    }

    .stat-box:hover{
      transform:translateY(-4px);
      box-shadow:0 12px 32px rgba(230,0,0,.12);
      border-color:#e60000;
    }

    .stat-box:hover::before{
      opacity:1;
    }
    
    .stat-number{
      display:block;
      font-size:2rem;
      font-weight:800;
      color:#e60000;
      margin-bottom:0.5rem;
      filter:drop-shadow(0 2px 4px rgba(230,0,0,.2));
    }
    
    .stat-label{
      display:block;
      font-size:0.95rem;
      color:#475569;
      text-transform:uppercase;
      letter-spacing:0.05em;
      font-weight:600;
      line-height:1.4;
    }

    .hero p{
      font-size:clamp(16px,2.3vw,20px);
      color:var(--muted);
      max-width:52ch;
    }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:28px;
    }

    /* Buttons con design pulito moderno */
    .btn{
      border-radius:25px;
      padding:14px 24px;
      font-weight:700;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative;
      overflow:hidden;
    }

    .btn-primary{
      position:relative;
      overflow:hidden;
      background:#e60000;
      color:#fff;
      border:0;
      box-shadow:0 4px 16px rgba(230,0,0,.15);
    }
    
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:-100% -60%;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
      transform:translateX(-20%);
    }
    
    .btn-primary:hover::after{
      animation:shine .9s ease;
    }
    
    @keyframes shine{
      to{ transform:translateX(120%); }
    }
    
    .btn-primary:active{
      transform: translateY(-1px);
      box-shadow:0 4px 12px rgba(230,0,0,.2);
    }

    .btn-ghost{
      background:#fff;
      border:2px solid #f1f5f9;
      color:#64748b;
      box-shadow:0 4px 16px rgba(0,0,0,.08);
    }

    .btn-ghost:hover{
      border-color:#e60000;
      color:#e60000;
      transform:translateY(-2px);
      box-shadow:0 8px 20px rgba(230,0,0,.15);
    }
    
    .btn-ghost:active{
      transform: translateY(-1px);
      box-shadow:0 4px 12px rgba(0,0,0,.1);
    }

    /* Phone mockup */
    .mock{
      position:relative;
      transform:perspective(1200px) rotateY(-10deg) rotateX(4deg);
      will-change:transform;
    }

    .phone{
      width:min(320px, 75vw);
      aspect-ratio:9/19;
      border-radius:32px;
      padding:14px;
      background:linear-gradient(180deg,#121826,#2a3346);
      box-shadow:0 25px 70px rgba(0,0,0,.25);
    }

    .screen{
      border-radius:24px;
      overflow:hidden;
      background:#fff;
      height:100%;
      background-image: linear-gradient(45deg, #f8fafc, #e2e8f0);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      font-size: 14px;
      text-align: center;
      padding: 20px;
    }

    .glass-card{
      position:absolute;
      inset:auto auto -24px -24px;
      background:rgba(255,255,255,0.9);
      backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,.25);
      border-radius:18px;
      padding:10px 14px;
      font-weight:700;
      color:#111;
      font-size:0.9rem;
    }

    /* Why Local Section */
    .why-local{
      background:linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
      padding:4rem 2rem;
      position:relative;
      border-top:1px solid rgba(230,0,0,.1);
      border-bottom:1px solid rgba(230,0,0,.1);
    }
    
    .why-local::before{
      content:"";
      position:absolute;
      inset:-40px -5vw auto -5vw;
      height:80px;
      background:radial-gradient(60% 50% at 50% 100%, rgba(230,0,0,.03), transparent);
      pointer-events:none;
    }
    
    .why-local-container{
      max-width:1200px;
      margin:0 auto;
    }
    
    .why-local h2{
      font-size:clamp(28px,4vw,42px);
      text-align:center;
      margin-bottom:3rem;
      font-weight:800;
      color:#1e293b;
    }
    
    .benefits-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
      gap:2rem;
    }
    
    .benefit-card{
      background:#fff;
      padding:2rem;
      border-radius:20px;
      border:2px solid transparent;
      box-shadow:0 8px 24px rgba(0,0,0,.06);
      transition:all .3s ease;
      text-align:center;
    }
    
    .benefit-card:hover{
      border-color:#e60000;
      transform:translateY(-4px);
      box-shadow:0 12px 32px rgba(230,0,0,.12);
    }
    
    /* Benefit icon - Rosso neon */
    .benefit-icon{
      font-size:3rem;
      margin-bottom:1rem;
      display:block;
    }
    
    .benefit-icon svg{
      width:48px;
      height:48px;
      stroke:#e60000;
      filter:drop-shadow(0 0 4px rgba(230,0,0,.3));
    }
    
    .benefit-card strong{
      display:block;
      font-size:1.25rem;
      color:#1e293b;
      margin-bottom:0.75rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0.02em;
    }
    
    .benefit-card p{
      color:#475569;
      font-size:1.05rem;
      line-height:1.6;
    }

    /* Offerta Locale Esclusiva */
    .offerta-locale{
      background:linear-gradient(135deg, #fff 0%, #fef2f2 100%);
      border:3px solid #e60000;
      border-radius:24px;
      padding:3rem;
      max-width:800px;
      margin:0 auto 3rem;
      text-align:center;
      position:relative;
      box-shadow:0 20px 60px rgba(230,0,0,.2);
      overflow:hidden;
    }
    
    .offerta-locale::before{
      content:"";
      position:absolute;
      top:-50%;
      right:-50%;
      width:200%;
      height:200%;
      background:radial-gradient(circle, rgba(230,0,0,.05) 0%, transparent 70%);
      animation:rotate 20s linear infinite;
      pointer-events:none;
    }
    
    .badge-esclusivo{
      display:inline-block;
      background:linear-gradient(135deg, #e60000, #b30000);
      color:#fff;
      padding:0.5rem 1.5rem;
      border-radius:999px;
      font-weight:800;
      font-size:0.85rem;
      letter-spacing:0.1em;
      margin-bottom:1.5rem;
      box-shadow:0 8px 20px rgba(230,0,0,.3);
      animation:pulseBadge 2s ease-in-out infinite;
    }
    
    @keyframes pulseBadge{
      0%,100%{transform:scale(1);}
      50%{transform:scale(1.05);}
    }
    
    .offerta-locale h3{
      font-size:clamp(24px,3vw,32px);
      font-weight:800;
      color:#1e293b;
      margin-bottom:1.5rem;
    }
    
    .prezzo{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:1.5rem;
      margin-bottom:1rem;
    }
    
    .strike{
      font-size:1.2rem;
      color:#94a3b8;
      text-decoration:line-through;
      opacity:0.8;
    }
    
    .actual{
      font-size:3rem;
      font-weight:800;
      color:#e60000;
      position:relative;
    }
    
    .actual small{
      font-size:1rem;
      font-weight:600;
      color:#64748b;
    }
    
    .extra-deal{
      font-size:1.1rem;
      color:#059669;
      font-weight:600;
      margin-bottom:2rem;
      padding:0.5rem;
      background:rgba(5,150,105,.08);
      border-radius:8px;
      display:inline-block;
    }
    
    .cta-wrapper{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:1rem;
    }
    
    .urgency-text{
      font-size:0.9rem;
      color:#64748b;
      font-weight:500;
    }

    /* Section enhancements */
    .section-header::after{
      content:"";
      display:block;
      height:1px;
      margin:22px auto 0;
      width:min(60%,520px);
      background:linear-gradient(90deg, transparent, rgba(230,0,0,.35), transparent);
      filter:blur(.2px);
    }
    
    .services{
      padding:6rem 2rem;
      background:#fff;
      position:relative;
    }
    
    .services::before{
      content:"";
      position:absolute;
      inset:-60px -10vw auto -10vw;
      height:160px;
      pointer-events:none;
      background:radial-gradient(40% 60% at 50% 0%, rgba(230,0,0,.06), transparent 70%);
    }

    .services-container{
      max-width:1200px;
      margin:0 auto;
    }

    .section-header{
      text-align:center;
      margin-bottom:4rem;
    }

    .section-tag{
      font-size:0.9rem;
      font-weight:600;
      color:var(--vodafone-red);
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:1rem;
    }

    .section-title{
      font-size:clamp(2rem,5vw,3.5rem);
      font-weight:700;
      margin-bottom:1.5rem;
      color:var(--ink);
    }

    .section-subtitle{
      font-size:1.2rem;
      color:#475569;
      max-width:600px;
      margin:0 auto;
    }

    /* Page Stats */
    .page-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1.5rem;
      margin-top: 2.5rem;
      max-width: 600px;
    }

    .stat-item {
      text-align: center;
      padding: 1.5rem 1rem;
      background: rgba(255,255,255,0.8);
      border: 1px solid var(--light-gray);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
      transition: all 0.3s ease;
    }

    .stat-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(230,0,0,.12);
      border-color: rgba(230,0,0,.3);
    }

    .stat-number {
      display: block;
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--brand);
      margin-bottom: 0.5rem;
    }

    .stat-label {
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Marquee */
    .marquee{
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }

    .marquee::-webkit-scrollbar{
      display:none;
    }

    /* CTA Section aggiornata */
    .cta-section{
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      padding:5rem 2rem;
      position:relative;
      overflow:hidden;
    }

    .cta-section::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(230,0,0,.3), transparent);
    }

    .cta-container{
      max-width:800px;
      margin:0 auto;
      text-align:center;
    }

    .cta-title{
      font-size:clamp(28px,4vw,42px);
      font-weight:800;
      color:#1e293b;
      margin-bottom:1.5rem;
    }

    .cta-subtitle{
      font-size:1.2rem;
      color:#64748b;
      margin-bottom:3rem;
      line-height:1.7;
    }

    .cta-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      justify-content:center;
    }

    .btn-white{
      background:#fff;
      border:2px solid #e2e8f0;
      color:#1e293b;
      padding:1rem 2rem;
      border-radius:25px;
      text-decoration:none;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      transition:all .3s ease;
      box-shadow:0 4px 12px rgba(0,0,0,.08);
    }

    .btn-white:hover{
      border-color:#e60000;
      color:#e60000;
      transform:translateY(-2px);
      box-shadow:0 8px 20px rgba(230,0,0,.15);
    }

    /* ===== FOOTER CLEAN v3 (Ispirato OttimoPiano) ===== */
    .site-footer{
      position:relative;
      background: linear-gradient(135deg, #1a1a1a 0%, #2d1616 40%, #4a1c1c 70%, #661a1a 100%);
      color:#fff;
      padding:60px 24px 24px;
      overflow:hidden;
    }

    /* Gradiente sottile top */
    .site-footer::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(230,0,0,.4), transparent);
    }

    .footer-inner{ 
      max-width:1200px; 
      margin:0 auto; 
      position:relative; 
      z-index:3; 
    }

    /* Header pulito */
    .footer-head{
      display:flex; 
      gap:18px; 
      align-items:center; 
      justify-content:space-between; 
      flex-wrap:wrap;
      padding-bottom:32px; 
      margin-bottom:40px;
      border-bottom:1px solid rgba(255,255,255,.1);
    }

    .brand-lockup{ 
      display:flex; 
      gap:12px; 
      align-items:center; 
    }

    .brand-dot{
      width:12px; 
      height:12px; 
      border-radius:50%;
      background:#e60000;
      box-shadow:0 0 0 4px rgba(230,0,0,.2);
    }

    .brand-title{ 
      font-size:1.4rem;
      font-weight:700; 
      color:#fff;
    }

    .brand-sub{ 
      color:rgba(255,255,255,.7); 
      font-size:.9rem; 
    }

    /* CTA buttons clean */
    .footer-cta{ 
      display:flex; 
      gap:12px; 
      flex-wrap:wrap; 
    }

    .footer-cta .btn{
      border-radius:25px; 
      padding:10px 20px; 
      font-weight:600; 
      font-size:0.9rem;
      text-decoration:none;
      display:inline-flex; 
      align-items:center; 
      gap:.6rem; 
      transition:.3s;
      border: 2px solid transparent;
    }

    .footer-cta .btn-primary{
      background:#e60000; 
      color:#fff;
    }

    .footer-cta .btn-primary:hover{ 
      background:#b30000;
      transform:translateY(-2px); 
    }

    .footer-cta .btn-ghost{
      background:transparent; 
      border:2px solid rgba(255,255,255,.3); 
      color:#fff;
    }

    .footer-cta .btn-ghost:hover{ 
      border-color:#e60000;
      background:rgba(230,0,0,.1);
    }

    /* Grid semplice e pulita */
    .footer-grid{
      display:grid; 
      gap:40px;
      grid-template-columns: 2fr 2fr 2fr 1.5fr;
      margin-bottom:40px;
    }

    @media (max-width:1024px){ 
      .footer-grid{
        grid-template-columns: 1fr 1fr;
        gap:32px;
      }
    }
    
    @media (max-width:640px){ 
      .footer-grid{
        grid-template-columns: 1fr;
        gap:28px;
        text-align:center;
      }
    }

    /* Colonne clean */
    .ft-block{
      position:relative;
    }

    .ft-block h4{
      font-size:1.1rem; 
      margin-bottom:20px; 
      font-weight:700; 
      color:#fff;
      position:relative;
      padding-bottom:8px;
    }

    .ft-block h4::after{
      content:"";
      position:absolute;
      bottom:0;
      left:0;
      width:30px;
      height:2px;
      background:#e60000;
      border-radius:1px;
    }

    /* Link lista pulita */
    .ft-links{ 
      list-style:none; 
      margin:0; 
      padding:0; 
    }

    .ft-links li{ 
      margin:12px 0; 
    }

    .ft-links a{
      color:rgba(255,255,255,.8); 
      text-decoration:none; 
      transition:.3s;
      font-size:0.95rem;
    }

    .ft-links a:hover{ 
      color:#e60000;
      transform:translateX(4px);
    }

    /* Store location clean */
    .store{
      display:flex;
      gap:12px; 
      align-items:flex-start;
      padding:16px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:.3s;
    }

    .store:last-child{
      border-bottom:none;
    }

    .store:hover{ 
      transform:translateX(4px);
    }

    .store svg{
      width:18px;
      height:18px;
      color:#e60000;
      flex-shrink:0;
      margin-top:2px;
    }

    .store strong{
      color:#fff;
      font-size:0.95rem;
      display:block;
      margin-bottom:4px;
    }

    .store .chip{
      display:inline-block;
      font-size:.7rem; 
      font-weight:600; 
      color:#e60000; 
      background:rgba(230,0,0,.15);
      padding:2px 8px; 
      border-radius:12px; 
      margin-left:8px;
    }

    .store small{
      color:rgba(255,255,255,.6);
      font-size:0.85rem;
      display:block;
      margin-bottom:4px;
    }

    .store a{
      color:#e60000;
      text-decoration:none;
      font-size:0.85rem;
      font-weight:500;
    }

    .store a:hover{
      text-decoration:underline;
    }

    .open-badge{
      display:inline-block; 
      margin-left:8px; 
      font-size:.7rem; 
      font-weight:600;
      padding:2px 8px; 
      border-radius:12px; 
      color:#fff; 
      background:#22c55e;
    }

    .open-badge.closed{ 
      background:#ef4444;
    }

    /* Contatti clean */
    .contact-row{ 
      display:flex; 
      flex-direction:column; 
      gap:16px; 
    }

    .contact-item{ 
      display:flex; 
      gap:12px; 
      align-items:center; 
      transition:.3s; 
    }

    .contact-item:hover{ 
      transform:translateX(4px);
    }

    .contact-item svg{
      width:18px;
      height:18px;
      color:#e60000;
      flex-shrink:0;
    }

    .contact-item a, .contact-item address{ 
      color:rgba(255,255,255,.8); 
      text-decoration:none; 
      transition:.3s;
      font-size:0.95rem;
    }

    .contact-item:hover a, .contact-item:hover address{
      color:#fff;
    }

    /* Social minimal */
    .socials{ 
      display:flex; 
      gap:12px; 
      margin-top:20px; 
    }

    .socials a{
      width:40px; 
      height:40px; 
      display:flex; 
      align-items:center;
      justify-content:center;
      border-radius:50%; 
      color:rgba(255,255,255,.7); 
      text-decoration:none;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      transition:.3s;
    }

    .socials a:hover{ 
      background:#e60000;
      border-color:#e60000;
      color:#fff;
      transform:translateY(-2px);
    }

    .socials a svg{
      width:18px;
      height:18px;
    }

    /* Bottom bar minimal */
    .footer-bottom{
      padding-top:24px;
      border-top:1px solid rgba(255,255,255,.1);
      display:flex; 
      gap:12px; 
      align-items:center; 
      justify-content:space-between; 
      flex-wrap:wrap;
      color:rgba(255,255,255,.6); 
      font-size:.9rem;
    }

    .legal{ 
      display:flex; 
      gap:16px; 
      align-items:center; 
    }

    .legal a{ 
      color:rgba(255,255,255,.6); 
      text-decoration:none; 
      transition:.3s; 
    }

    .legal a:hover{ 
      color:#e60000;
    }

    /* Back to top button */
    .back-top{
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 999;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: none;
      place-items: center;
      color: #e60000;
      text-decoration: none;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20px);
      border: 2px solid rgba(255,255,255,.6);
      box-shadow: 
        0 8px 25px rgba(0,0,0,.2),
        0 0 40px rgba(255,255,255,.3);
      transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .back-top.show{
      display: grid;
    }

    .back-top:hover{
      transform: translateY(-4px) scale(1.1);
      background: #ffffff;
      box-shadow: 
        0 15px 40px rgba(0,0,0,.3),
        0 0 60px rgba(255,255,255,.5);
      color: #e60000;
    }
    
    .back-top svg{
      width: 24px;
      height: 24px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
    }

    /* WhatsApp Button */
    .whatsapp-btn{
      position:fixed;
      bottom:30px;
      right:30px;
      width:65px;
      height:65px;
      background:#25d366;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      text-decoration:none;
      font-size:1.8rem;
      box-shadow:0 8px 25px rgba(37,211,102,0.4);
      z-index:1000;
      transition:all 0.3s ease;
    }

    .whatsapp-btn:hover{
      transform:scale(1.15);
      box-shadow:0 15px 45px rgba(37,211,102,0.8);
      color:white;
    }

    /* Animations */
    @media (prefers-reduced-motion: no-preference){
      .mock{
        animation:float 6s ease-in-out infinite;
      }
      .whatsapp-btn{
        animation:whatsappPulse 3s ease-in-out infinite;
      }
    }
    
    @keyframes float{
      0%,100%{transform:translateY(0) perspective(1200px) rotateY(-10deg) rotateX(4deg)}
      50%{transform:translateY(-14px) perspective(1200px) rotateY(-6deg) rotateX(2deg)}
    }
    
    @keyframes whatsappPulse{
      0%,100%{
        transform:scale(1);
        box-shadow:0 8px 25px rgba(37,211,102,0.4);
      }
      50%{
        transform:scale(1.05);
        box-shadow:0 12px 35px rgba(37,211,102,0.6);
      }
    }

    @keyframes floatSlow{
      0%,100%{transform:translate(0,0) scale(1)}
      25%{transform:translate(10px,-10px) scale(1.05)}
      50%{transform:translate(-5px,15px) scale(0.95)}
      75%{transform:translate(15px,-5px) scale(1.02)}
    }

    @keyframes rotate{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }

    @keyframes shimmer{
      to{background-position:-200% 0}
    }

    /* Responsive hero layout */
    @media (max-width:900px){
      .hero-inner{
        grid-template-columns:1fr;
        text-align:center;
        gap:32px;
      }
      .mock{
        transform:none;
        max-width:280px;
        margin:0 auto !important;
      }
      .phone{
        width:280px;
      }
    }

    @media (max-width:640px){
      .mock{
        max-width:250px;
      }
      .phone{
        width:250px;
      }
      .glass-card{
        font-size:0.8rem;
        padding:8px 12px;
        inset:auto auto -20px -20px;
      }
    }

    /* Mobile menu - responsive */
    @media (max-width:1200px){
      .nav-menu{
        gap:0.5rem;
      }
      .nav-link{
        font-size:0.85rem;
        padding:0.5rem 0.6rem;
      }
    }

    @media (max-width:1024px){
      .nav-menu{
        display:none;
      }
      .mobile-menu-btn{
        display:flex;
      }
    }
    
    /* Mobile optimizations */
    @media (max-width:768px){
      .nav-container{
        padding:0.8rem 16px;
        gap:1rem;
      }

      .page-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }

      .stat-item {
        padding: 1.2rem 0.8rem;
      }

      .stat-number {
        font-size: 1.4rem;
      }
      .logo{
        font-size:1.5rem;
      }
      
      .badge-ufficiale{
        margin-top:1.5rem;
        margin-bottom:2rem;
      }
      
      /* Hero mobile improvements */
      .hero{
        padding:80px 16px 32px;
        min-height:90vh;
      }
      
      .hero-stats{
        grid-template-columns:repeat(3,1fr);
        gap:0.75rem;
        margin:1.5rem 0;
      }
      
      .stat-box{
        padding:1.2rem 0.8rem;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:0.5rem;
        min-height:100px;
      }
      
      .stat-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
      }
      
      .stat-number{
        font-size:1.4rem;
        margin-bottom:0.25rem;
        font-weight:800;
        line-height:1.1;
      }
      
      .stat-label{
        font-size:0.75rem;
        line-height:1.3;
        font-weight:600;
      }
      
      /* Card e stat-box coerenti sul telefono */
      .stat-box, .card, .plan { 
        text-align: center; 
      }
      
      .cta-row{
        flex-direction:column;
        gap:1rem;
        align-items:stretch;
      }
      
      .btn{
        justify-content:center;
        padding:16px 24px;
        font-size:1rem;
      }
      
      /* Card improvements */
      .card{
        padding:24px 20px;
        margin-bottom:1rem;
      }
      
      .card h3{
        font-size:1.3rem;
        margin-bottom:1rem;
      }
      
      .card p{
        font-size:1rem;
        line-height:1.6;
        margin-bottom:1.5rem;
      }
      
      .card-cta{
        font-size:1.1rem;
        padding:12px 0;
      }
      
      /* Services section mobile */
      .services{
        padding:4rem 1rem;
      }
      
      .section-title{
        font-size:clamp(1.8rem,6vw,2.5rem);
      }
      
      /* Plans mobile optimization */
      .marquee{
        display:flex !important;
        flex-direction:column;
        gap:1.5rem;
      }
      
      .plan{
        min-height:auto;
        padding:24px 20px;
        margin-bottom:0;
      }
      
      .plan h3{
        font-size:1.4rem;
        margin-bottom:1rem;
        justify-content:space-between;
        }
      
      .plan .price{
        font-size:2.2rem;
        margin-bottom:1.25rem;
      }
      
      .plan ul{
        margin-bottom:1.5rem;
      }
      
      .plan ul li{
        font-size:1rem;
        margin:10px 0;
        padding-left:20px;
      }
      
      .plan .btn{
        margin-top:1rem;
        padding:14px 20px;
        font-size:1.1rem;
      }
      
      /* Footer mobile */
      .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:2rem;
      }
      
      .store{
        text-align:left;
        padding:12px 0;
      }
      
      /* WhatsApp button mobile */
      .whatsapp-btn{
        width:60px;
        height:60px;
        font-size:1.6rem;
        bottom:20px;
        right:20px;
      }
      
      /* Mobile menu improvements */
      .mobile-menu-btn.active .hamburger-line:nth-child(1){
        transform:rotate(-45deg) translate(-5px,6px);
      }
      .mobile-menu-btn.active .hamburger-line:nth-child(2){
        opacity:0;
      }
      .mobile-menu-btn.active .hamburger-line:nth-child(3){
        transform:rotate(45deg) translate(-5px,-6px);
      }
      
      .mobile-nav-links .nav-link{
        padding:1rem;
        font-size:1rem;
        margin-bottom:0;
        border-radius:12px;
        display:block;
        text-decoration:none;
        transition:all 0.3s ease;
        text-align:center;
        font-weight:600;
      }
      
      .cta-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:1.5rem;
      }
    }

    @media (max-width:480px){
      .hero-stats{
        grid-template-columns:repeat(3,1fr);
        gap:0.5rem;
        margin:1.25rem 0;
      }
      
      .stat-box{
        padding:1rem 0.6rem;
        min-height:90px;
      }
      
      .stat-number{
        font-size:1.2rem;
        font-weight:800;
      }
      
      .stat-label{
        font-size:0.7rem;
        line-height:1.2;
      }
    }

    /* CSS per Hover Effects Recensioni */
    .review-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(230,0,0,0.12) !important;
      border-color: rgba(230,0,0,0.2) !important;
    }
    
    /* Mobile responsive */
    @media (max-width: 768px) {
      .reviews-section {
        padding: 3rem 16px !important;
      }
    }

/* ========================================= */
/* SMARTPHONE PAGE SPECIFIC STYLES */
/* ========================================= */

/* Phone Card */
.phone-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid var(--light-gray);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.phone-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(230,0,0,.15);
  border-color: rgba(230,0,0,.2);
}

.phone-image-wrapper {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 2rem;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-image {
  width: 180px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.1));
  transition: transform 0.3s ease;
}

.phone-card:hover .phone-image {
  transform: scale(1.05);
}

.phone-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.phone-badge.new {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.phone-badge.promo {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.phone-badge.hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.phone-details {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.phone-brand {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.phone-model {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.phone-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.spec-badge {
  background: var(--silver-gray);
  color: var(--muted);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.phone-pricing {
  margin-bottom: 1.5rem;
  flex: 1;
}

.price-original {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 0.25rem;
}

.price-current {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.price-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--vodafone-red);
}

.price-period {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
}

.price-info {
  font-size: 0.85rem;
  color: var(--muted);
}

.phone-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

/* Filter Section */
.filter-section {
  background: white;
  padding: 2rem 0;
  border-bottom: 1px solid var(--light-gray);
  position: sticky;
  top: 80px;
  z-index: 100;
}

.filter-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.filter-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--light-gray);
  background: white;
  color: var(--muted);
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--vodafone-red);
  background: var(--vodafone-red);
  color: white;
}

  
  .phone-card {
    max-width: 100%;
  }
  
  .phone-image {
    width: 140px;
  }
  
  .phone-model {
    font-size: 1.1rem;
  }
  
  .filter-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

/* ============================================ */
/* BLOG PAGE STYLES - Estratti da blog.html */
/* ============================================ */

/* Root variables - Vodafone Brand (IDENTICHE ALLA HOME) */
:root{
  --vodafone-red:#e60000;
  --vodafone-dark:#4a4a4a;
  --vodafone-light:#f4f4f4;
  --vodafone-dark-red:#cc0000;
  --vodafone-white:#ffffff;
  --vodafone-black:#000000;
  --silver-gray:#f8fafc;
  --dark-gray:#1e293b;
  --medium-gray:#64748b;
  --light-gray:#e2e8f0;
  --card-radius:20px;
  --card-bd:#e2e8f0;
  --ink:#1e293b;
  --muted:#64748b;
  --ring:#ffe0e0;
  --brand:#e60000;
  --brand-dark:#b30000;
}

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

html, body { 
  overflow-x: hidden; 
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--vodafone-dark);
  background: var(--vodafone-white);
}

/* Breadcrumb (IDENTICO ALLE ALTRE PAGINE) */
.breadcrumb {
  background: var(--silver-gray);
  padding: 1rem 0;
  border-bottom: 1px solid var(--light-gray);
}

.breadcrumb-container {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 24px;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.breadcrumb-nav a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
  color: var(--brand-dark);
}

.breadcrumb-separator {
  color: var(--muted);
  font-weight: 400;
}

/* Badge Ufficiale Vodafone (IDENTICO) */
.badge-ufficiale {
  background: var(--vodafone-red);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(230,0,0,.2);
}

.badge-ufficiale svg{
  width:20px;
  height:20px;
  color:white;
}

/* CTA Primary (IDENTICO ALLA HOME) */
.cta-primary, .btn-primary {
  background:#fff;
  color:#e60000;
  padding:14px 28px;
  border:2px solid #e60000;
  border-radius:25px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  font-size:1.1rem;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 16px rgba(230,0,0,.15);
  position:relative;
  overflow:hidden;
}

.cta-primary::before, .btn-primary::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:100%;
  background:
    radial-gradient(circle at 15px 15px, rgba(230,0,0,.15) 2px, transparent 3px),
    radial-gradient(circle at 35px 20px, rgba(230,0,0,.10) 1.5px, transparent 2.5px),
    radial-gradient(circle at 25px 35px, rgba(230,0,0,.12) 2px, transparent 3px),
    radial-gradient(circle at 45px 30px, rgba(230,0,0,.08) 1px, transparent 2px);
  background-size:50px 50px;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.cta-primary:hover, .btn-primary:hover {
  background:#e60000;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(230,0,0,.25);
}

.cta-primary:hover::before, .btn-primary:hover::before{
  opacity:0.6;
}

.cta-primary:active, .btn-primary:active {
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(230,0,0,.2);
}

/* Buttons (IDENTICI) */
.btn{
  border-radius:25px;
  padding:14px 24px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  font-size: 1rem;
}

.btn-ghost{
  background:#fff;
  border:2px solid #f1f5f9;
  color:#64748b;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.btn-ghost:hover{
  border-color:#e60000;
  color:#e60000;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(230,0,0,.15);
}

.btn-ghost:active{
  transform: translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Card base (IDENTICA ALLA HOME) */
.card{
  position:relative;
  border:1px solid rgba(226,232,240,.9);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(230,0,0,.25), rgba(230,0,0,0)) border-box;
  border-radius:18px;
  padding:24px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:hidden;
  isolation:isolate;
  max-width:100%;
}

.card:hover{
  outline:0;
  transform: translateY(-6px);
  box-shadow:0 18px 46px rgba(230,0,0,.16);
}

/* Icon ring (IDENTICO) */
.icon-ring{
  width:64px;
  height:64px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#e60000;
  border:2px solid #e60000;
  box-shadow:
    0 0 12px rgba(230,0,0,.4),
    0 0 24px rgba(230,0,0,.2),
    0 4px 12px rgba(230,0,0,.25);
  font-size:20px;
  color:#fff;
  margin:0 auto 16px;
  transition:all .3s ease;
  position:relative;
  overflow:visible;
}

.icon-ring svg{
  width:24px;
  height:24px;
  stroke:#fff;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card:hover .icon-ring{
  background:#ff1a1a;
  border-color:#ff1a1a;
  transform:scale(1.05);
  box-shadow:
    0 0 20px rgba(255,26,26,.6),
    0 0 40px rgba(255,26,26,.3),
    0 0 60px rgba(255,26,26,.15),
    0 8px 24px rgba(230,0,0,.4);
}

.icon-ring::before{
  content:"";
  position:absolute;
  inset:-10px;
  background:
    radial-gradient(circle at 10px 20px, rgba(230,0,0,.8) 1.5px, transparent 2px),
    radial-gradient(circle at 30px 8px, rgba(230,0,0,.6) 1px, transparent 1.5px),
    radial-gradient(circle at 50px 15px, rgba(230,0,0,.9) 2px, transparent 2.5px),
    radial-gradient(circle at 70px 30px, rgba(230,0,0,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 80px 50px, rgba(230,0,0,.7) 1.5px, transparent 2px),
    radial-gradient(circle at 70px 70px, rgba(230,0,0,.6) 1px, transparent 1.5px),
    radial-gradient(circle at 50px 80px, rgba(230,0,0,.8) 2px, transparent 2.5px),
    radial-gradient(circle at 30px 75px, rgba(230,0,0,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 10px 60px, rgba(230,0,0,.7) 1.5px, transparent 2px),
    radial-gradient(circle at 5px 40px, rgba(230,0,0,.6) 1px, transparent 1.5px);
  background-size:90px 90px;
  opacity:0;
  transition:opacity .3s ease;
  border-radius:24px;
  pointer-events:none;
}

.card:hover .icon-ring::before{
  opacity:1;
}

.card h3{
  font-size:1.2rem;
  color:var(--ink);
  margin:6px 0 8px;
  line-height:1.3;
}

.card p{
  color:var(--muted);
  line-height:1.6;
  font-size:0.95rem;
}

.card .card-cta{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  color:#e60000;
  text-decoration:none;
}

.card .card-cta:hover{
  text-decoration:underline;
}

/* Badge angolo (IDENTICO) */
.card .ribbon{
  position:absolute;
  top:16px;
  right:16px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:8px 14px;
  border-radius:20px;
  color:#e60000;
  background:#fff;
  border:2px solid #e60000;
  box-shadow:
    0 0 8px rgba(230,0,0,.3),
    0 4px 12px rgba(230,0,0,.15);
  text-shadow:0 0 4px rgba(230,0,0,.4);
}

/* Navigation (IDENTICA) */
.brand-ribbon{
  position:fixed;
  inset:0 0 auto 0;
  height:6px;
  z-index:1200;
  background: linear-gradient(90deg,#e60000 0%, #ff3b30 35%, #e60000 70%, #b30000 100%);
  box-shadow:0 6px 20px rgba(230,0,0,.25);
}

.navbar{
  position:fixed;
  top:6px;
  width:100%;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  z-index:1000;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom:1px solid var(--card-bd);
}

.navbar.scrolled{
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.nav-container{
  max-width:1200px;
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.8rem 24px;
  gap:2rem;
}

.logo{
  font-size:1.8rem;
  font-weight:700;
  background:linear-gradient(135deg, #e60000, #ff3333);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.5rem;
  filter:drop-shadow(0 2px 8px rgba(230,0,0,.3));
  transition:all 0.3s ease;
  flex-shrink:0;
}

.nav-menu{
  display:flex;
  list-style:none;
  gap:0.8rem;
  align-items:center;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.nav-link{
  text-decoration:none;
  color:#1e293b;
  font-weight:600;
  position:relative;
  transition:all 0.3s ease;
  padding:0.6rem 0.8rem;
  border-radius:8px;
  font-size:0.9rem;
  white-space:nowrap;
  background-image: linear-gradient(#e60000,#e60000);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 50% 100%;
}

.nav-link:hover{
  color:#e60000;
  transform:translateY(-1px);
  background-size: 80% 2px;
  background-color:rgba(230,0,0,0.05);
}

.nav-link.active {
  color:#e60000;
  background-size: 80% 2px;
  background-color:rgba(230,0,0,0.1);
}

/* Mobile menu (IDENTICO) */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  cursor:pointer;
  padding:0.5rem;
  z-index:1001;
}

.hamburger-line{
  width:25px;
  height:3px;
  background:var(--vodafone-red);
  margin:3px 0;
  transition:all 0.3s ease;
  border-radius:3px;
}

.mobile-menu{
  display:none;
  position:fixed;
  top:80px;
  left:0;
  right:0;
  max-height:calc(100vh - 80px);
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--card-bd);
  padding:2rem;
  z-index:999;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}

.mobile-menu.active{
  display:block;
}

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  max-width:400px;
  margin:0 auto;
}

.mobile-nav-links .nav-link{
  padding:1rem;
  font-size:1rem;
  margin-bottom:0;
  border-radius:12px;
  display:block;
  text-decoration:none;
  transition:all 0.3s ease;
  text-align:center;
  font-weight:600;
  border:1px solid var(--card-bd);
  background:#fff;
  color:#1e293b;
}

.mobile-nav-links .nav-link:hover{
  background:#fef2f2;
  border-color:#e60000;
  color:#e60000;
}

.mobile-nav-links .nav-link.active{
  background:#fef2f2;
  border-color:#e60000;
  color:#e60000;
}

/* Page Header (STESSO STILE DELLE ALTRE PAGINE) */
.page-header {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 120px 24px 60px;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(60% 40% at 30% 70%, rgba(230,0,0,.08), transparent 60%),
    conic-gradient(from 45deg at 80% 20%, rgba(230,0,0,.12), transparent 45% 75%, rgba(230,0,0,.06));
  pointer-events: none;
}

.page-header-container {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.page-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 60ch;
}

.page-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  max-width: 600px;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(230,0,0,.12);
  border-color: rgba(230,0,0,.3);
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section styles (IDENTICI) */
.section {
  padding: 5rem 24px;
}

.section-container {
  max-width: 1200px;
  margin-inline: auto;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-tag {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vodafone-red);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

.section-subtitle {
  font-size: 1.2rem;
  color: #475569;
  max-width: 600px;
  margin: 0 auto;
}

/* Grid (IDENTICA) */
.grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(12, minmax(0,1fr));
  justify-items:center;
  max-width:100%;
}

.grid-3 > *{
  grid-column: span 4;
  width:100%;
  max-width:350px;
}

@media (max-width:1024px){
  .grid-3 > *{
    grid-column: span 6;
    max-width:380px;
  }
}

@media (max-width:640px){
  .grid{
    gap:1.25rem;
  }
  .grid-3 > *{
    grid-column: span 12;
    max-width:100%;
    width:100%;
  }
}

/* CTA Section (IDENTICA) */
.cta-section{
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding:5rem 24px;
  position:relative;
  overflow:hidden;
}

.cta-section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,0,0,.3), transparent);
}

.cta-container{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}

.cta-title{
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  color:#1e293b;
  margin-bottom:1.5rem;
}

.cta-subtitle{
  font-size:1.2rem;
  color:#64748b;
  margin-bottom:3rem;
  line-height:1.7;
}

.cta-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

/* WhatsApp CTA Variant */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  border: none;
  box-shadow: 0 8px 20px rgba(37,211,102,.3);
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #128c7e, #25d366);
  box-shadow: 0 10px 25px rgba(37,211,102,.4);
  color: white;
}

/* WhatsApp Button (IDENTICO) */
.whatsapp-btn{
  position:fixed;
  bottom:30px;
  right:30px;
  width:65px;
  height:65px;
  background:#25d366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  text-decoration:none;
  font-size:1.8rem;
  box-shadow:0 8px 25px rgba(37,211,102,0.4);
  z-index:1000;
  transition:all 0.3s ease;
}

.whatsapp-btn:hover{
  transform:scale(1.15);
  box-shadow:0 15px 45px rgba(37,211,102,0.8);
  color: white;
}

/* Mobile optimizations */
@media (max-width:768px){
  .nav-container{
    padding:0.8rem 16px;
    gap:1rem;
  }
  .logo{
    font-size:1.5rem;
  }

  .nav-menu{
    display:none;
  }
  .mobile-menu-btn{
    display:flex;
  }

  .page-header {
    padding: 100px 16px 40px;
  }

  .page-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .stat-item {
    padding: 1.2rem 0.8rem;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .section {
    padding: 3rem 16px;
  }

  .card {
    padding: 20px;
    margin: 0 auto;
    max-width: 100% !important;
  }

  .stat-item, .card { 
    text-align: center; 
  }

  .whatsapp-btn{
    width:60px;
    height:60px;
    font-size:1.6rem;
    bottom:20px;
    right:20px;
  }

  .mobile-menu-btn.active .hamburger-line:nth-child(1){
    transform:rotate(-45deg) translate(-5px,6px);
  }
  .mobile-menu-btn.active .hamburger-line:nth-child(2){
    opacity:0;
  }
  .mobile-menu-btn.active .hamburger-line:nth-child(3){
    transform:rotate(45deg) translate(-5px,-6px);
  }

  .mobile-nav-links .nav-link{
    padding:1.2rem;
    font-size:1.1rem;
    margin-bottom:0.5rem;
  }

  .cta-buttons{
    flex-direction:column;
    align-items:stretch;
    gap:1.5rem;
  }
}

@media (max-width:480px){
  .page-stats{
    grid-template-columns:repeat(3,1fr);
    gap:0.5rem;
  }
  
  .stat-item{
    padding:1rem 0.6rem;
  }
  
  .stat-number{
    font-size:1.2rem;
    font-weight:800;
  }
  
  .stat-label{
    font-size:0.7rem;
    line-height:1.2;
  }
}

/* Skip link accessibility */
.skip-link:focus{
  position:absolute;
  left:12px;
  top:12px;
  background:#fff;
  border:2px solid #e60000;
  padding:8px 12px;
  border-radius:10px;
  z-index:2000;
  text-decoration:none;
  color:#e60000;
  font-weight:600;
}

/* Focus styles accessibili */
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid rgba(230,0,0,.55);
  outline-offset:3px;
  border-radius:12px;
}

/* Animations */
@media (prefers-reduced-motion: no-preference){
  .whatsapp-btn{
    animation:whatsappPulse 3s ease-in-out infinite;
  }
}

@keyframes whatsappPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 8px 25px rgba(37,211,102,0.4);
  }
  50%{
    transform:scale(1.05);
    box-shadow:0 12px 35px rgba(37,211,102,0.6);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}