*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --black:#0a0a0a; --dark:#1a1a1a; --mid:#2d2d2d; --grey:#888;
      --light:#f5f0e8; --white:#ffffff; --accent:#c8b89a;
    }
    html { scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:84px;
      scrollbar-width:none; -ms-overflow-style:none; }
    /* touch-action:manipulation toglie lo zoom da doppio tocco (e la pausa di
       300 ms che Safari si prende per capire se e' un doppio). Lo scorrimento
       e i caroselli continuano a funzionare. Il pizzico lo blocca js/main.js.
       Il 3D sta in un iframe e ha il suo touch-action: non e' toccato. */
    body { font-family:'Poppins',sans-serif; background:var(--white); color:var(--dark); line-height:1.65;
      touch-action:manipulation;
      overflow-x:clip; width:100%; max-width:100%; scrollbar-width:none; -ms-overflow-style:none; }
    /* Scrollbar nascosta ovunque (look più pulito/lusso) — lo scroll resta attivo */
    html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width:0; height:0; display:none; }
    img, video, table, iframe { max-width:100%; }

    .hidden { display:none !important; }
    .serif  { font-family:'Poppins',sans-serif; font-weight:600; }
    .container { max-width:1280px; margin:0 auto; padding:0 2rem; }


    /* HEADER */
    header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97);
      backdrop-filter:blur(8px); border-bottom:1px solid #e8e4dc; }
    header nav { display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem; }
    .nav-logo { display:flex; align-items:center; text-decoration:none; }
    .nav-logo img { height:48px; width:auto; }
    .nav-links { display:flex; gap:2rem; list-style:none; }
    .nav-links a { text-decoration:none; color:var(--dark); font-size:.88rem;
      letter-spacing:.06em; text-transform:uppercase; transition:color .2s; }
    .nav-links a:hover { color:var(--grey); }
    .nav-right { display:flex; align-items:center; gap:1.5rem; }

    /* LANG DROPDOWN */
    .lang-wrap { position:relative; }
    .lang-btn { display:flex; align-items:center; gap:.4rem; background:none; border:1px solid #ddd;
      border-radius:3px; padding:.4rem .8rem; font-size:.8rem; letter-spacing:.06em;
      cursor:pointer; color:var(--dark); transition:border-color .2s; }
    .lang-btn:hover { border-color:var(--dark); }
    .lang-current-flag { width:18px; height:12px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
    .lang-dropdown { display:none; position:absolute; top:calc(100% + 6px); right:0;
      background:var(--white); border:1px solid #ddd; border-radius:4px; min-width:160px;
      box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden; }
    .lang-dropdown.open { display:block; }
    .lang-opt { display:block; width:100%; padding:.7rem 1rem; background:none; border:none;
      text-align:left; font-size:.88rem; cursor:pointer; color:var(--dark); transition:background .15s; }
    .lang-opt:hover { background:var(--light); }
    .lang-opt.active { font-weight:600; background:var(--light); }
    .lang-opt-inner { display:flex; align-items:center; gap:.65rem; }
    .lang-opt-flag { width:18px; height:12px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex-shrink:0; }

    /* CART TRIGGER */
    .cart-trigger { position:relative; cursor:pointer; background:none; border:none; padding:0;
      height:29px; display:inline-flex; align-items:center; justify-content:center; color:var(--black); line-height:0; }
    .cart-icon { width:auto; height:29px; display:block; transition:transform .25s ease, opacity .2s; }
    .cart-trigger:hover .cart-icon { transform:translateY(-2px); opacity:.65; }
    .cart-badge { position:absolute; top:-7px; right:-9px; background:var(--black); color:var(--white);
      font-size:.65rem; font-weight:600; width:18px; height:18px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; }

    /* BURGER + SLIDE-IN MENU */
    .nav-burger { position:relative; width:27px; height:29px; background:none; border:none; cursor:pointer;
      padding:5px 0; display:inline-flex; flex-direction:column; justify-content:space-between; flex-shrink:0; }
    .nav-burger span { display:block; height:2px; width:100%; background:var(--dark); border-radius:2px;
      transition:width .3s ease, background .2s ease; transform-origin:center; }
    /* hover: le linee si comprimono leggermente per segnalare che è cliccabile */
    .nav-burger:hover span { background:var(--grey); }
    .nav-burger:hover span:nth-child(1) { width:65%; }
    .nav-burger:hover span:nth-child(3) { width:65%; margin-left:auto; }

    .menu-overlay { position:fixed; inset:0; background:rgba(10,10,10,.5); z-index:200;
      opacity:0; pointer-events:none; transition:opacity .35s ease; backdrop-filter:blur(2px); }
    .menu-overlay.open { opacity:1; pointer-events:auto; }
    .menu-drawer { position:fixed; top:0; right:0; height:100%; width:min(380px,86vw); background:var(--white);
      z-index:201; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
      box-shadow:-12px 0 48px rgba(0,0,0,.18); display:flex; flex-direction:column; }
    .menu-drawer.open { transform:translateX(0); }
    .menu-drawer-head { display:flex; align-items:center; gap:.6rem;
      padding:1.1rem 1.5rem; border-bottom:1px solid #e8e4dc; flex-shrink:0; }
    .menu-drawer-title { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey); }
    .menu-drawer-logo { display:flex; align-items:center; text-decoration:none; }
    .menu-drawer-logo img { height:34px; width:auto; display:block; }
    .menu-lang-select { position:relative; margin-left:auto; }
    .menu-lang-current { display:flex; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer;
      font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dark); padding:.3rem .1rem; transition:color .2s; }
    .menu-lang-current:hover { color:var(--accent); }
    .menu-lang-current .mlc-flag { width:20px; height:13px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
    .menu-lang-caret { color:var(--grey); transition:transform .25s ease; }
    .menu-lang-select.open .menu-lang-caret { transform:rotate(180deg); }
    /* nel menu il selettore lingua è discreto: solo bandierina + caret (la lingua
       segue di norma quella del browser, quindi raramente si cambia manualmente) */
    .menu-drawer-head .menu-lang-current { opacity:.6; padding:.3rem; transition:opacity .2s, color .2s; }
    .menu-drawer-head .menu-lang-current:hover,
    .menu-lang-select.open .menu-lang-current { opacity:1; }
    .menu-drawer-head .menu-lang-current #menu-lang-current-label { display:none; }
    .menu-drawer-head .menu-lang-caret { width:8px; height:5px; }
    .menu-lang-list { position:absolute; top:calc(100% + 10px); right:0; min-width:172px; background:var(--white);
      border:1px solid #e3dccd; border-radius:4px; box-shadow:0 16px 40px rgba(0,0,0,.16); overflow:hidden;
      opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:6; }
    .menu-lang-select.open .menu-lang-list { opacity:1; transform:translateY(0); pointer-events:auto; }
    .menu-lang-opt { display:flex; align-items:center; gap:.7rem; width:100%; background:none; border:none; cursor:pointer;
      padding:.7rem 1rem; font-size:.82rem; letter-spacing:.03em; color:var(--dark); text-align:left;
      transition:background .15s, color .15s; }
    .menu-lang-opt:hover { background:var(--light); color:var(--accent); }
    .menu-lang-opt.active { font-weight:600; }
    .menu-lang-opt img { width:20px; height:13px; border-radius:2px; object-fit:cover;
      box-shadow:0 0 0 1px rgba(0,0,0,.1); flex-shrink:0; }
    .menu-close { background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer;
      color:var(--dark); padding:.2rem; transition:color .2s, transform .2s; }
    .menu-close:hover { color:var(--accent); transform:rotate(90deg); }
    .menu-nav { display:flex; flex-direction:column; padding:.25rem 0; overflow-y:auto; overflow-x:hidden; }
    .menu-social { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:1.75rem;
      padding:1.25rem 1.75rem; border-top:1px solid #e8e4dc; flex-shrink:0; background:#faf8f4; }
    .menu-social a { color:var(--dark); display:inline-flex;
      transition:color .2s, transform .22s cubic-bezier(.2,.8,.2,1); }
    .menu-social a svg { width:20px; height:20px; }
    .menu-social a:hover { color:var(--accent); transform:translateY(-2px); }
    /* Assistenza nel menu — SOLO su mobile (vedi media query), dove il dock
       flottante è nascosto. Pulsantino tondo in fondo a destra (dopo i social):
       al tap apre a ventaglio verso l'alto WhatsApp + Chat online. */
    .menu-assist { position:absolute; right:1.4rem; top:50%; transform:translateY(-50%); display:none; }
    .menu-assist-trigger { position:relative; width:40px; height:40px; padding:0; border:none; border-radius:50%; cursor:pointer;
      background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 6px 16px rgba(0,0,0,.2); transition:transform .2s, box-shadow .2s; }
    .menu-assist-trigger svg { width:19px; height:19px; stroke:#fff; fill:none; }
    .menu-assist-trigger:hover { transform:scale(1.06); }
    /* stesso badge "?" del FAB desktop (.chat-fab-badge), solo scalato */
    .menu-assist-badge { position:absolute; top:-2px; right:-2px; min-width:15px; height:15px; padding:0 3px;
      border-radius:8px; background:var(--accent); color:var(--black); font-size:.56rem; font-weight:700;
      line-height:15px; text-align:center; border:2px solid var(--white); }
    .menu-assist.open .menu-assist-trigger { transform:scale(.92); box-shadow:0 4px 10px rgba(0,0,0,.18); }
    .menu-assist-choices { position:absolute; right:0; bottom:calc(100% + 12px);
      display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; }
    .menu-assist-btn { display:inline-flex; align-items:center; gap:.15rem; height:44px; padding:3px 3px 3px 1rem;
      border-radius:999px; border:none; background:var(--white); cursor:pointer; text-decoration:none;
      font-family:'Poppins',sans-serif; font-size:.85rem; font-weight:500; color:var(--black); white-space:nowrap;
      box-shadow:0 8px 22px rgba(0,0,0,.16); transform-origin:calc(100% - 19px) 50%;
      opacity:0; transform:translateY(8px) scale(.5); pointer-events:none;
      transition:transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease, box-shadow .2s; }
    .menu-assist.open .menu-assist-btn { opacity:1; transform:none; pointer-events:auto; }
    .menu-assist.open .menu-assist-wa { transition-delay:.05s; }
    .menu-assist-btn .ma-label { padding-right:.15rem; }
    .menu-assist-btn .ma-ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
      justify-content:center; flex-shrink:0; color:#fff; }
    .menu-assist-btn .ma-ic svg { width:21px; height:21px; }
    .menu-assist-wa   .ma-ic { background:#25D366; }   .menu-assist-wa .ma-ic svg { fill:currentColor; stroke:none; }
    .menu-assist-chat .ma-ic { background:var(--black); } .menu-assist-chat .ma-ic svg { stroke:#fff; fill:none; }
    @media (max-width:900px){
      .chat-dock { display:none; }          /* su mobile il dock dà fastidio: spostato nel menu */
      .menu-social { position:relative; }   /* ancora il pulsantino assistenza a destra */
      .menu-assist { display:block; }
    }
    .menu-item { display:flex; align-items:center; gap:.75rem; padding:.72rem 1.75rem; text-decoration:none;
      color:var(--dark); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
      border-bottom:1px solid #f1ece3; transition:background .2s, color .2s, transform .2s; background:none;
      border-left:none; border-right:none; border-top:none; text-align:left; cursor:pointer; width:100%; }
    a.menu-item:hover { background:var(--light); color:var(--accent); transform:translateX(6px); }
    [dir="rtl"] a.menu-item:hover { transform:translateX(-6px); }
    /* RTL (arabo): il drawer scorre da sinistra, coerente con il burger che finisce a sinistra */
    [dir="rtl"] .menu-drawer { right:auto; left:0; transform:translateX(-100%);
      box-shadow:12px 0 48px rgba(0,0,0,.18); }
    [dir="rtl"] .menu-drawer.open { transform:translateX(0); }
    [dir="rtl"] .menu-item { text-align:right; }
    .menu-item-soon { color:#c4bdb0; cursor:default; letter-spacing:.12em; }
    .menu-soon-badge { margin-left:auto; font-size:.6rem; letter-spacing:.14em; text-transform:lowercase;
      color:#cfc7b8; border:1px solid #e3dccd; border-radius:99px; padding:.15rem .5rem; white-space:nowrap; }

    @media (max-width:600px) {
      header nav { gap:.55rem; }
      .nav-logo img { height:38px; }
      .nav-right { gap:.7rem; }
      #lang-label { display:none; }
      .lang-btn { padding:.4rem .55rem; }
      .menu-drawer-head { padding:1rem 1.4rem; }
      .menu-item { padding:.7rem 1.4rem; }
    }

    /* HERO */
    .hero { background:var(--black); color:var(--white); min-height:90vh;
      display:grid; grid-template-columns:1fr 1fr; align-items:center; }
    .hero-text { padding:5rem 4rem 5rem 6rem; }
    .hero-eyebrow { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
      color:#555; margin-bottom:2rem; }
    .hero h1 { font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(2.8rem,4.5vw,5rem);
      line-height:1.1; margin-bottom:1.5rem; font-weight:700; }
    .hero h1 em { font-style:italic; color:var(--accent); }
    .hero-sub { font-size:1.05rem; color:rgba(255,255,255,.65); max-width:440px;
      margin-bottom:2.5rem; line-height:1.65; }
    .hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
    .hero-image { background:#161616; height:100%; min-height:90vh;
      display:flex; align-items:center; justify-content:center; padding:3rem; }
    .hero-image img { max-height:600px; max-width:100%; object-fit:contain;
      filter:brightness(.95) contrast(1.1); }

    /* BUTTONS */
    .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 2.2rem;
      font-size:.88rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
      cursor:pointer; border:none; border-radius:2px; transition:all .25s; text-decoration:none; }
    .btn-white { background:var(--white); color:var(--black); }
    .btn-white:hover { background:var(--light); }
    .btn-outline-white { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.4); }
    .btn-outline-white:hover { border-color:var(--white); background:rgba(255,255,255,.06); }
    .btn-black { background:var(--black); color:var(--white); }
    .btn-black:hover { background:var(--dark); }

    /* TICKER */
    .ticker-wrap { overflow:hidden; background:var(--light); padding:.9rem 0;
      border-top:1px solid #e0d9cf; border-bottom:1px solid #e0d9cf; }
    .ticker { display:flex; gap:4rem; animation:ticker 16s linear infinite; white-space:nowrap; }
    @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .ticker span { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
    .ticker span strong { color:var(--dark); }

    /* PRODUCT SECTION */
    .product-section { padding-top:6rem; padding-bottom:6rem; }
    .product-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:stretch; }
    .product-gallery { display:flex; flex-direction:column; justify-content:center; }
    .product-main-img { background:var(--light); border-radius:4px; overflow:hidden;
      aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
    .product-main-img img { width:100%; height:100%; object-fit:cover; }
    .product-thumbs { display:flex; gap:.75rem; }
    /* Il bordo chiaro c'e' sempre: la miniatura della cornice bianca e'
       bianca su bianco, senza un contorno non si capirebbe dove finisce. */
    .product-thumbs img { width:80px; height:80px; object-fit:cover; border:2px solid #e3e0d9;
      border-radius:3px; cursor:pointer; filter:brightness(.94); transition:all .2s; background:#fff; }
    .product-thumbs img:hover, .product-thumbs img.active { border-color:var(--dark); filter:brightness(1); }
    .product-tag { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; margin-bottom:.75rem; }
    .product-name { font-family:'Poppins',sans-serif; font-weight:600; font-size:2.5rem; color:var(--black); line-height:1.2; margin-bottom:.5rem; }
    .product-sub { color:var(--grey); margin-bottom:1.5rem; font-size:.95rem; }
    .product-price { font-size:2rem; font-weight:600; color:var(--black); margin-bottom:.25rem; }
    .product-price-alt { font-size:1rem; color:var(--grey); margin-bottom:.3rem; display:none; }
    .product-vat { font-size:.82rem; color:var(--grey); margin-bottom:.6rem; }
    .stripe-note { font-size:.78rem; color:var(--grey); background:#faf8f4; border-radius:3px;
      padding:.5rem .75rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; }
    .stripe-note svg { flex-shrink:0; }
    .buy-perks { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem; }
    .buy-perk { font-size:.78rem; color:var(--grey); background:#faf8f4; border-radius:3px;
      padding:.5rem .75rem; display:inline-flex; align-items:center; gap:.5rem; }
    .buy-perk svg { flex-shrink:0; }
    .product-divider { border:none; border-top:1px solid #e8e4dc; margin:2rem 0; }
    .spec-list { list-style:none; display:flex; flex-direction:column; gap:.75rem; margin-bottom:2rem; }
    .spec-list li { display:flex; align-items:flex-start; gap:.75rem; font-size:.92rem; color:var(--dark); }
    .spec-list li::before { content:'·'; color:var(--accent); flex-shrink:0; margin-top:.1rem; }
    .qty-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
    .color-row { margin-bottom:1.5rem; }
    .color-label { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grey); display:block; margin-bottom:.65rem; }
    .color-swatches { display:flex; gap:.75rem; }
    .color-swatch { width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid #ddd;
      transition:border-color .2s, transform .15s; position:relative; }
    .color-swatch:hover { transform:scale(1.08); }
    .color-swatch.selected { border-color:var(--black); box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--black); }
    .color-swatch[data-color="white"] { background:#f5f5f0; }
    .color-swatch[data-color="black"] { background:#1a1a1a; }
    .color-swatch-name { font-size:.8rem; color:var(--dark); margin-top:.5rem; }
    .qty-label { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grey); }
    .qty-input { display:flex; align-items:center; border:1px solid #ddd; border-radius:2px; overflow:hidden; }
    .qty-input button { width:38px; height:38px; background:none; border:none; font-size:1.1rem;
      cursor:pointer; color:var(--dark); transition:background .2s; }
    .qty-input button:hover { background:var(--light); }
    .qty-input input { width:52px; height:38px; border:none; border-left:1px solid #ddd;
      border-right:1px solid #ddd; text-align:center; font-size:.95rem; }
    /* Via le due freccettine che il browser mette da solo dentro i campi
       numerici: qui la quantita' si cambia col meno e col piu', e quelle
       stavano schiacciate in mezzo senza servire a niente. */
    .qty-input input[type=number] { -moz-appearance:textfield; appearance:textfield; }
    .qty-input input[type=number]::-webkit-outer-spin-button,
    .qty-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .add-cart-btn { width:100%; padding:1.1rem; background:var(--black); color:var(--white);
      border:none; border-radius:2px; font-size:.88rem; font-weight:600; letter-spacing:.12em;
      text-transform:uppercase; cursor:pointer; transition:background .25s; }
    .add-cart-btn:hover { background:#2a2a2a; }
    .product-guarantee { display:flex; flex-wrap:nowrap; gap:.9rem; margin-top:2rem; justify-content:space-between; }
    .guarantee-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; flex:1 1 0; min-width:0; }
    .guarantee-item span:first-child { line-height:0; color:var(--dark); }
    .guarantee-item span:first-child svg { width:24px; height:24px; }
    .guarantee-item span:last-child { font-size:.66rem; color:var(--grey); text-transform:uppercase; letter-spacing:.04em; line-height:1.25; }

    /* SECTION HEADERS */
    .section-header { text-align:center; margin-bottom:4rem; }
    .section-eyebrow { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; margin-bottom:1rem; }
    .bw-section .section-eyebrow, .usecases-section .section-eyebrow,
    .testimonials-section .section-eyebrow { color:rgba(255,255,255,.55); }
    .section-title { font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(2rem,3vw,3rem); color:var(--black); line-height:1.2; }
    .section-title em { font-style:italic; color:var(--accent); }

    /* MAGIC SECTION */
    .magic-section { background:var(--black); color:var(--white); padding:6rem 0; }
    .magic-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .magic-text .section-title { color:var(--white); }
    .magic-text p { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.65; margin-bottom:1.5rem; }
    .magic-image img { width:100%; border-radius:4px; }

    /* FEATURES */
    .features-section { background:var(--light); padding:6rem 0; }
    .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
      border:2px solid #e0d9cf; border-radius:4px; overflow:hidden; }
    .feat-card { background:var(--white); padding:2.5rem; border-right:2px solid #e0d9cf;
      border-bottom:2px solid #e0d9cf; transition:background .2s; }
    .feat-card:hover { background:#faf8f4; }
    .feat-icon { margin-bottom:1.25rem; display:block; color:var(--dark); line-height:0; }
    .feat-icon svg { width:36px; height:36px; }
    .feat-title { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.2rem; margin-bottom:.75rem; color:var(--black); }
    .feat-desc { font-size:.9rem; color:var(--grey); line-height:1.65; }

    /* APP SECTION */
    .app-section { padding:6rem 0; }
    .app-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .app-steps { display:flex; flex-direction:column; gap:2rem; margin-top:2rem; }
    .app-note { margin-top:2rem; font-size:.95rem; color:var(--grey); line-height:1.65; }
    .app-note strong { color:var(--dark); font-weight:600; }
    .app-step { display:flex; gap:1.5rem; align-items:flex-start; }
    .step-num { font-family:'Poppins',sans-serif; font-weight:600; font-size:2rem; color:#ddd; line-height:1; min-width:2.5rem; font-weight:700; }
    .step-content h4 { font-size:1rem; font-weight:600; margin-bottom:.4rem; color:var(--black); }
    .step-content p { font-size:.9rem; color:var(--grey); line-height:1.65; }
    .app-visual { text-align:center; }
    .app-visual img, .app-visual video { display:block; width:auto; max-width:100%; max-height:520px; margin:0 auto;
      border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.18); }
    .app-visual video { width:min(100%,500px); height:auto; max-height:none; aspect-ratio:4/5; object-fit:cover; object-position:50% 50%; }
    .app-stores { display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
    /* I marchi veri al posto delle emoji: l'emoji della mela e quella del
       robot cambiano faccia su ogni sistema (su Windows sono due disegnini
       colorati) e non c'entrano niente con App Store e Google Play. Il
       marchio Apple segue il colore del testo, quello Play tiene i suoi
       quattro colori: in bianco diventerebbe un triangolino qualsiasi e si
       perderebbe il riconoscimento. */
    .store-ico { width:1.25em; height:1.25em; flex:0 0 auto; display:block; }
    .store-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
      background:var(--dark); color:var(--white); border-radius:6px; font-size:.82rem;
      cursor:pointer; text-decoration:none; box-shadow:0 0 0 rgba(0,0,0,0);
      transition:background .25s, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
    .store-btn:hover { background:var(--black); transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.22); }
    .store-btn:active { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.2); transition-duration:.08s; }
    /* Toast avviso store sbagliato */
    .lk-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(24px);
      z-index:11000; background:#111; color:#fff; padding:.95rem 1.2rem; border-radius:14px;
      box-shadow:0 16px 44px rgba(0,0,0,.4); display:flex; align-items:center; gap:.8rem;
      font-size:.9rem; line-height:1.45; max-width:min(92vw,440px);
      opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
    .lk-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    .lk-toast .lk-toast-ico { font-size:1.5rem; flex-shrink:0; line-height:1; }
    .lk-toast b { color:var(--accent); font-weight:600; }

    /* SPECS TABLE */
    .specs-section { background:var(--light); padding:5rem 0; }
    /* Tabella a sinistra, disegno quotato a destra dentro un pannello bianco.
       align-items:stretch (default della griglia) fa sì che il pannello prenda
       ESATTAMENTE l'altezza della tabella: i due blocchi si leggono come una
       coppia allineata invece che come due elementi scollegati.
       Bordo, raggio e fondo sono gli stessi di .specs-table, per continuità.
       minmax(0,…) è necessario: senza, la colonna della tabella non si lascia
       comprimere e su schermi stretti sfonda il contenitore invece di attivare
       lo scroll di .tbl-scroll. */
    /* gap:0 + bordo e raggio spostati sul CONTENITORE: tabella e disegno
       diventano un'unica card divisa da una sola linea, invece di due
       riquadri separati. Il bordo dei figli va tolto (sotto), altrimenti
       sulla giunzione si sommerebbero due linee da 1px.
       overflow:hidden serve a far ritagliare gli angoli arrotondati anche
       alla tabella, che da sola resterebbe squadrata. */
    .specs-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      gap:0; align-items:stretch;
      background:var(--white); border:1px solid #e0d9cf;
      border-radius:8px; overflow:hidden; }
    .specs-layout .specs-table { border:none; border-radius:0; }
    .specs-figure { margin:0; background:var(--white);
      border:none; border-left:1px solid #e0d9cf; border-radius:0;
      padding:2.25rem;
      display:flex; align-items:center; justify-content:center; }
    /* max-height:100% tiene il disegno dentro il pannello: è la tabella a
       dettare l'altezza della riga, non l'immagine. Senza questo vincolo, in
       una lingua con testi più corti (tabella più bassa) l'immagine farebbe
       crescere la riga e l'allineamento salterebbe. */
    .specs-figure img { display:block; width:auto; height:auto;
      max-width:100%; max-height:100%; object-fit:contain; }

    /* Sotto i 900px le colonne si impilano e l'ordine si INVERTE: prima il
       disegno quotato, poi la tabella. In verticale la misura d'ingombro è
       la domanda che viene prima ("ci sta sulla mia parete?"), la scheda
       tecnica si legge dopo.
       Nel markup la tabella resta prima del disegno: così l'ordine del DOM
       (e quindi quello di lettura per screen reader e crawler) segue la
       gerarchia di contenuto, mentre order:-1 cambia solo la resa visiva. */
    @media (max-width:900px) {
      /* Impilate: resta un'unica card verticale. La linea di separazione
         ruota da verticale (border-left) a orizzontale (border-bottom),
         perché il disegno ora sta SOPRA la tabella. */
      .specs-layout { grid-template-columns:1fr; align-items:start; }
      .specs-figure { order:-1; padding:1.75rem;
        border-left:none; border-bottom:1px solid #e0d9cf; }
      /* Il disegno non deve stirarsi a tutta larghezza su tablet: resta
         centrato nel pannello a una misura leggibile. */
      .specs-figure img { width:100%; max-width:420px; max-height:none; }
    }
    /* Su telefono il padding si riduce: le quote del disegno ("42 cm / 16.5"")
       sono testo fine, ogni pixel sottratto al margine è leggibilità. */
    @media (max-width:600px) {
      .specs-figure { padding:1.25rem; }
      .specs-figure img { max-width:340px; }
    }
    @media (max-width:380px) {
      .specs-figure { padding:.9rem; }
    }
    .specs-table { width:100%; border-collapse:collapse; background:var(--white);
      border-radius:4px; overflow:hidden; border:1px solid #e0d9cf; }
    .specs-table tr { border-bottom:1px solid #e0d9cf; }
    .specs-table tr:last-child { border-bottom:none; }
    .specs-table td { padding:1.1rem 2rem; font-size:.92rem; }
    .specs-table td:first-child { font-weight:600; color:var(--dark); width:40%; border-right:1px solid #e0d9cf; }
    .specs-table td:last-child { color:var(--grey); }

    /* SOCIAL PROOF */
    .proof-section { padding:5rem 0; text-align:center; }
    .proof-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
      margin-top:3rem; border:1px solid #e8e4dc; border-radius:4px; overflow:hidden; }
    .proof-stat { padding:2.5rem 1.5rem; border-right:1px solid #e8e4dc; background:var(--white); }
    .proof-stat:last-child { border-right:none; }
    .stat-num { font-family:'Poppins',sans-serif; font-weight:600; font-size:3rem; font-weight:700; color:var(--black); }
    .stat-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grey); margin-top:.5rem; }

    /* TESTIMONIALS */
    .testimonials-section { background:var(--black); color:var(--white); padding:6rem 0; }
    .testimonials-section .section-title { color:var(--white); }
    .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
    .testimonial { border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:2.5rem; transition:border-color .2s; }
    .testimonial:hover { border-color:var(--accent); }
    .stars { color:var(--accent); font-size:.9rem; letter-spacing:.15em; margin-bottom:1rem; }
    .testimonial blockquote { font-family:'Poppins',sans-serif; font-weight:600; font-style:italic;
      font-size:1.05rem; color:rgba(255,255,255,.8); line-height:1.65; margin-bottom:1.5rem; }
    .testimonial-author { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
    /* Carousel recensioni (scorrimento orizzontale, stile card invariato) */
    .testimonials-grid.reviews-carousel { --rev-cols:3; --rev-gap:2rem; display:flex; overflow-x:auto; gap:var(--rev-gap);
      scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; scroll-behavior:smooth; padding-bottom:.5rem; align-items:stretch; }
    .testimonials-grid.reviews-carousel::-webkit-scrollbar { display:none; }
    .testimonials-grid.reviews-carousel.grabbing { cursor:grabbing; user-select:none; }
    .testimonials-grid.reviews-carousel .testimonial { flex:0 0 calc((100% - (var(--rev-cols) - 1) * var(--rev-gap)) / var(--rev-cols));
      scroll-snap-align:start; display:flex; flex-direction:column; }
    /* Limita l'altezza del testo così le card restano compatte e uniformi */
    .testimonials-grid.reviews-carousel .testimonial blockquote { display:-webkit-box; -webkit-line-clamp:6;
      -webkit-box-orient:vertical; overflow:hidden; flex:1 1 auto; }
    @media (max-width:900px){ .testimonials-grid.reviews-carousel { --rev-cols:2; } }
    @media (max-width:560px){ .testimonials-grid.reviews-carousel { --rev-cols:1; } }
    .reviews-nav { display:flex; justify-content:center; gap:.75rem; margin-top:2rem; }
    .reviews-nav-btn { width:40px; height:40px; border:1px solid rgba(255,255,255,.25); background:transparent;
      color:var(--white); cursor:pointer; font-size:1.1rem; border-radius:50%; display:flex; align-items:center;
      justify-content:center; transition:background .2s, border-color .2s; }
    .reviews-nav-btn:hover { background:rgba(255,255,255,.1); border-color:var(--accent); }

    /* NEWSLETTER */
    .newsletter-section { padding:6rem 0; background:var(--light); }
    .newsletter-inner { max-width:600px; margin:0 auto; text-align:center; }
    .newsletter-inner p:not([class]) { color:var(--grey); margin:1.5rem 0 2rem; line-height:1.65; }
    .newsletter-form { display:flex; border:1px solid #c8c0b0; border-radius:2px; overflow:hidden; }
    .newsletter-form input { flex:1; padding:1rem 1.25rem; border:none; font-size:.95rem; background:var(--white); outline:none; }
    .newsletter-form button { padding:1rem 2rem; background:var(--black); color:var(--white);
      border:none; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
    .newsletter-form button:hover { background:var(--dark); }
    .newsletter-form input:disabled, .newsletter-form button:disabled { opacity:.6; cursor:default; }
    .newsletter-msg { font-size:.85rem; line-height:1.5; margin:1rem 0 0 !important; min-height:1.2em; }
    .newsletter-msg.error { color:#c0392b; }
    .newsletter-msg.success { color:#1e7e34; }
    .newsletter-form input.invalid { box-shadow:inset 0 0 0 1px #c0392b; }
    .newsletter-note { font-size:.78rem; color:var(--grey); margin-top:1rem !important; }

    /* VIDEO HERO v2 — sfondo video + overlay scuro + testo e CTA */
    /* Il primo fotogramma del video sta SEMPRE sotto come sfondo: appena la pagina
       apre si vede quello (mai nero), e il video vi si dissolve sopra quando è pronto. */
    .hero-v2 { position:relative; width:100%; height:100vh; min-height:600px; overflow:hidden;
      background:#050505 url('../img/hero-poster.jpg') center/cover no-repeat; }
    .hero-v2-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
      pointer-events:none; z-index:0; opacity:0; transition:opacity .45s ease; }
    .hero-v2.loaded .hero-v2-bg { opacity:1; }
    /* iOS/Safari disegna il suo tasto ▶ nativo su qualunque <video> inline che
       non sta girando in quel preciso istante (autoplay muto ancora non partito,
       Risparmio energetico, frame di pausa quando la sezione esce/rientra). Su
       questi video puramente decorativi non deve MAI comparire: sopprimiamo i
       controlli nativi e il "start playback button" a livello di pseudo-elemento.
       Non blocca l'autoplay (parte comunque via JS su gesto/canplay), toglie
       solo la UI. Vale hero underlayer + video sezione app + gesture frame. */
    .hero-v2-bg::-webkit-media-controls-start-playback-button,
    .app-visual video::-webkit-media-controls-start-playback-button,
    .gesture-frame video::-webkit-media-controls-start-playback-button,
    .hero-v2-bg::-webkit-media-controls,
    .app-visual video::-webkit-media-controls,
    .gesture-frame video::-webkit-media-controls {
      display:none !important; -webkit-appearance:none; appearance:none; }
    .hero-v2-bg, .app-visual video, .gesture-frame video { pointer-events:none; }
    .hero-v2-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
      background:
        linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.25) 100%),
        radial-gradient(120% 120% at 30% 40%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%); }
    .hero-v2-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      align-items:flex-start; justify-content:center; color:#fff; }
    /* Occhiello/titolo/sottotitolo: stessi caratteri e dimensioni delle altre sezioni
       (.section-eyebrow / .section-title / .section-lead) */
    .hero-v2-eyebrow { position:relative; height:1.5em; margin:0 0 1rem;
      font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
      color:rgba(255,255,255,.85); }
    .hero-v2-eyebrow span { position:absolute; inset-inline-start:0; top:0; opacity:0;
      transition:opacity .5s ease; white-space:nowrap; }
    .hero-v2-eyebrow span.active { opacity:1; }
    .hero-v2-title { font-family:'Poppins',sans-serif; font-weight:600;
      font-size:clamp(2rem,3vw,3rem); line-height:1.2; margin:0 0 1.4rem; color:#fff; }
    .hero-v2-title .tm { font-size:.6em; vertical-align:super; font-weight:500;
      margin-inline-start:.08em; opacity:.9; }
    .hero-v2-sub { font-size:1.05rem; line-height:1.65; font-weight:400;
      color:rgba(255,255,255,.9); margin:0 0 2.4rem; max-width:52ch; }
    .hero-v2-cta { display:flex; flex-wrap:wrap; gap:1.1rem; margin-bottom:2.6rem; }
    .hero-v2-btn { display:inline-flex; align-items:center; justify-content:center;
      min-width:210px; padding:1.15rem 2rem; border-radius:999px; font-size:1.1rem; font-weight:500;
      font-family:'Poppins',sans-serif; cursor:pointer; text-decoration:none; text-align:center;
      transition:background .25s ease, color .25s ease, border-color .25s ease; }
    .hero-v2-btn.ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85); }
    .hero-v2-btn.ghost:hover { background:#fff; color:#0a0a0a; border-color:#fff; }
    .hero-v2-btn.solid { background:#fff; color:#0a0a0a; border:1.5px solid #fff; }
    .hero-v2-btn.solid:hover { background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
    @media (max-width:600px){
      .hero-v2 { height:100vh; min-height:560px; }
      .hero-v2-title { margin-bottom:1.1rem; }
      .hero-v2-sub { margin-bottom:1.8rem; }
      .hero-v2-cta { width:100%; gap:.8rem; margin-bottom:2rem; }
      .hero-v2-btn { flex:1; min-width:0; padding:1rem .8rem; font-size:1rem; }
    }

    /* MODALE CONTATTI — form "ricontattami" in stile Linkuadro */
    .contact-modal { position:fixed; inset:0; z-index:2100; display:none; align-items:center; justify-content:center;
      padding:clamp(1rem,4vw,3rem); background:rgba(10,10,10,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
    .contact-modal.open { display:flex; }
    .contact-card { position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
      background:var(--white); border-radius:12px; padding:clamp(1.9rem,4vw,3rem);
      box-shadow:0 40px 120px rgba(0,0,0,.5); animation:faqIn .45s cubic-bezier(.2,.8,.2,1) both;
      scrollbar-width:none; -ms-overflow-style:none; }
    .contact-card::-webkit-scrollbar { width:0; height:0; display:none; }
    .contact-close { position:absolute; top:1rem; right:1.1rem; width:38px; height:38px; border-radius:50%;
      border:1px solid #e0d9cf; background:none; color:var(--dark); font-size:1rem; line-height:1; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s, transform .3s; }
    .contact-close:hover { border-color:var(--black); color:var(--accent); transform:rotate(90deg); }
    .contact-eyebrow { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; margin-bottom:.65rem; }
    .contact-title { font-size:clamp(1.6rem,3.4vw,2.15rem); color:var(--black); line-height:1.15; margin-bottom:.6rem; }
    .contact-title em { font-style:italic; color:var(--accent); }
    .contact-sub { font-size:.95rem; color:var(--grey); line-height:1.65; margin-bottom:1.6rem; }
    .contact-form { display:flex; flex-direction:column; gap:.75rem; }
    .contact-form input, .contact-form textarea { width:100%; padding:.85rem 1rem; border:1px solid #e0d9cf; border-radius:8px;
      font-family:'Poppins',sans-serif; font-size:.95rem; color:var(--dark); background:#faf8f4;
      transition:border-color .2s, background .2s; resize:vertical; }
    .contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--black); background:#fff; }
    .contact-form input.invalid, .contact-form textarea.invalid { border-color:#c0392b; }
    .contact-submit { margin-top:.45rem; padding:.95rem 1.5rem; background:var(--black); color:#fff; border:none;
      border-radius:999px; font-family:'Poppins',sans-serif; font-size:.95rem; font-weight:500; letter-spacing:.02em;
      cursor:pointer; transition:background .25s, transform .2s; }
    .contact-submit:hover { background:#2a2a2a; transform:translateY(-1px); }
    .contact-submit:disabled { opacity:.6; cursor:default; transform:none; }
    .contact-feedback { font-size:.88rem; line-height:1.5; min-height:1.1em; margin:.2rem 0 0; }
    .contact-feedback.error { color:#c0392b; }
    .contact-feedback.success { color:#2e7d32; }

    /* VIDEO PROMO A TUTTO SCHERMO — video promo con audio + chiusura */
    .hero-modal { position:fixed; inset:0; z-index:2000; display:none;
      background:#000; align-items:center; justify-content:center; padding:0; }
    .hero-modal.open { display:flex; }
    .hero-modal-video { width:100%; height:100%; object-fit:contain; background:#000; outline:none; }
    .hero-modal-video:fullscreen, .hero-modal-video:-webkit-full-screen { width:100%; height:100%; object-fit:contain; }
    .hero-modal-close { position:absolute; top:1.4rem; right:1.6rem; z-index:2; width:48px; height:48px;
      border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.55); color:#fff;
      font-size:1.35rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      opacity:0; pointer-events:none; transition:opacity .3s ease, background .2s; }
    .hero-modal.show-controls .hero-modal-close { opacity:1; pointer-events:auto; }
    /* Su iOS il promo si apre nel player nativo: il video inline resta
       invisibile (mai la "striscia" nel modal), si vede solo nero + rotella. */
    .hero-modal.ios-native .hero-modal-video { opacity:0; }
    /* Rotella di caricamento in stile iOS: 12 tacche che sfumano in sequenza */
    .hero-modal-spinner { display:none; position:absolute; top:50%; left:50%; z-index:1;
      width:56px; height:56px; margin:-28px 0 0 -28px; pointer-events:none; }
    .hero-modal.buffering .hero-modal-spinner { display:block; }
    .hero-modal-spinner i { position:absolute; left:50%; top:50%; width:4px; height:14px;
      margin:-7px 0 0 -2px; border-radius:3px; background:#fff; opacity:.2;
      transform:rotate(var(--r)) translateY(-20px);
      animation:ios-tick 1s linear infinite; animation-delay:var(--d); }
    @keyframes ios-tick { 0% { opacity:.9; } 100% { opacity:.2; } }
    .hero-modal-close:hover { background:rgba(0,0,0,.85); }
    @media (max-width:600px){ .hero-modal-close { top:.9rem; right:1rem; width:42px; height:42px; } }

    /* INSTAGRAM CAROUSEL */
    .ig-section { padding:5rem 0; background:var(--white); }
    .ig-header { text-align:center; margin-bottom:2.5rem; }
    .ig-handle { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; margin-bottom:1rem; }
    .ig-handle a { color:inherit; text-decoration:none; }
    .ig-handle a:hover { color:var(--black); }
    .ig-carousel-wrap { position:relative; overflow:hidden; }
    .ig-carousel { --ig-gap:1rem; display:flex; gap:var(--ig-gap); overflow-x:auto; scroll-snap-type:x mandatory;
      scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.5rem; cursor:grab; scroll-behavior:smooth; }
    .ig-carousel::-webkit-scrollbar { display:none; }
    .ig-carousel.grabbing { cursor:grabbing; user-select:none; }
    /* DESKTOP: 4 card per vista · TABLET: 2 · TELEFONO: 1 alla volta */
    .ig-card { flex:0 0 calc((100% - 3 * var(--ig-gap)) / 4); scroll-snap-align:start;
      border:1px solid #e8e4dc; border-radius:4px; overflow:hidden; background:var(--white);
      display:block; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; }
    @media (max-width:900px){ .ig-card { flex-basis:calc((100% - var(--ig-gap)) / 2); } }
    @media (max-width:600px){ .ig-card { flex-basis:100%; } }
    .ig-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
    .ig-card-img { width:100%; height:300px; object-fit:cover; display:block; background:var(--light); }
    .ig-loading { flex:0 0 100%; text-align:center; color:var(--grey); font-size:.9rem; padding:2rem 0; }
    .ig-card-body { padding:1rem; }
    .ig-card-caption { font-size:.85rem; color:var(--dark); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .ig-card-tag { font-size:.75rem; color:var(--accent); margin-top:.5rem; letter-spacing:.05em; }
    .ig-nav { display:flex; justify-content:center; gap:.75rem; margin-top:1.5rem; }
    .ig-nav-btn { width:36px; height:36px; border:1px solid #e8e4dc; background:var(--white);
      cursor:pointer; font-size:1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .ig-nav-btn:hover { background:var(--light); }
    .ig-cta { text-align:center; margin-top:2rem; }
    .ig-cta a { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--black);
      text-decoration:none; border-bottom:1px solid var(--black); padding-bottom:2px; transition:color .2s; }
    .ig-cta a:hover { color:var(--grey); border-color:var(--grey); }

    /* GDPR COOKIE BANNER */
    #cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9999;
      background:#fff; border-top:1px solid #e0ddd7;
      box-shadow:0 -4px 24px rgba(0,0,0,.12);
      padding:1.25rem 2rem; display:flex; align-items:center; justify-content:space-between;
      gap:1.5rem; flex-wrap:wrap; font-size:.88rem; color:#333; }
    #cookie-banner.hidden { display:none; }
    .cookie-text { flex:1; min-width:220px; line-height:1.65; }
    .cookie-text a { color:var(--black); text-decoration:underline; }
    .cookie-btns { display:flex; gap:.75rem; flex-shrink:0; }
    .cookie-btn-accept { background:var(--black); color:#fff; border:none; border-radius:2px;
      padding:.65rem 1.6rem; font-size:.82rem; font-weight:600; letter-spacing:.08em;
      text-transform:uppercase; cursor:pointer; transition:background .2s; }
    .cookie-btn-accept:hover { background:#2a2a2a; }
    .cookie-btn-settings { background:transparent; color:var(--dark); border:1px solid #ccc;
      border-radius:2px; padding:.65rem 1.2rem; font-size:.82rem; cursor:pointer; transition:all .2s; }
    .cookie-btn-settings:hover { border-color:var(--black); }
    .cookie-settings-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000;
      display:flex; align-items:center; justify-content:center; padding:1rem; }
    .cookie-settings-overlay.hidden { display:none; }
    .cookie-settings-modal { width:min(760px,100%); max-height:90vh; overflow:auto; background:#fff;
      border-radius:4px; box-shadow:0 18px 60px rgba(0,0,0,.24); }
    .cookie-settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
      padding:1.25rem 1.4rem 1rem; border-bottom:1px solid #ece7df; }
    .cookie-settings-title { margin:0; font-size:1.15rem; }
    .cookie-settings-close { background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer; color:#666; }
    .cookie-settings-body { padding:1.2rem 1.4rem; }
    .cookie-settings-intro { margin:0 0 1rem; color:#666; line-height:1.65; }
    .cookie-setting-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
      padding:1rem 0; border-top:1px solid #f0ece6; }
    .cookie-setting-row:first-of-type { border-top:none; }
    .cookie-setting-copy h4 { margin:0 0 .25rem; font-size:.96rem; }
    .cookie-setting-copy p { margin:0; color:#666; font-size:.88rem; line-height:1.65; }
    .cookie-switch { position:relative; width:52px; height:30px; flex:0 0 auto; }
    .cookie-switch input { opacity:0; width:0; height:0; }
    .cookie-slider { position:absolute; inset:0; background:#d4cec4; border-radius:999px; cursor:pointer; transition:background .2s; }
    .cookie-slider::before { content:''; position:absolute; width:22px; height:22px; left:4px; top:4px; background:#fff;
      border-radius:50%; transition:transform .2s; box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .cookie-switch input:checked + .cookie-slider { background:#111; }
    .cookie-switch input:disabled + .cookie-slider { background:#111; cursor:not-allowed; opacity:.85; }
    .cookie-switch input:checked + .cookie-slider::before { transform:translateX(22px); }
    .cookie-settings-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
      padding:1rem 1.4rem 1.3rem; border-top:1px solid #ece7df; }
    .cookie-settings-link { color:#111; text-decoration:underline; font-size:.88rem; }
    .cookie-settings-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
    .cookie-btn-save { background:#111; color:#fff; border:none; border-radius:2px; padding:.7rem 1.25rem;
      font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
    @media(max-width:600px){
      #cookie-banner { flex-direction:column; align-items:flex-start; padding:1rem 1.25rem; }
      .cookie-btns { width:100%; }
      .cookie-btn-accept, .cookie-btn-settings { flex:1; text-align:center; }
      .cookie-settings-head, .cookie-settings-body, .cookie-settings-foot { padding-left:1rem; padding-right:1rem; }
      .cookie-setting-row { flex-direction:column; }
      .cookie-settings-actions { width:100%; }
      .cookie-settings-actions button { flex:1; }
    }

    /* FOOTER */
    footer { background:var(--black); color:rgba(255,255,255,.5); padding:3rem 0; }
    .footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
    .footer-logo { display:flex; align-items:center; text-decoration:none; }
    .footer-logo img { height:40px; width:auto; }
    .footer-links { display:flex; gap:2rem; list-style:none; }
    .footer-links a { color:rgba(255,255,255,.5); text-decoration:none; font-size:.82rem; transition:color .2s; }
    .footer-links a:hover { color:var(--white); }
    .footer-copy { font-size:.78rem; text-align:right; }
    .footer-copy a { color:rgba(255,255,255,.5); text-decoration:none; }
    .footer-copy a:hover { color:var(--white); }

    /* CART SIDEBAR */
    .cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200;
      opacity:0; pointer-events:none; transition:opacity .3s; touch-action:none; overscroll-behavior:contain; }
    .cart-overlay.open { opacity:1; pointer-events:all; }
    /* height: 100dvh segue la barra del browser su mobile, così il footer col
       pulsante di pagamento resta sempre dentro l'area visibile. */
    .cart-sidebar { position:fixed; top:0; right:0; width:420px; max-width:100%; height:100vh; height:100dvh;
      background:var(--white); z-index:201; display:flex; flex-direction:column;
      transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-4px 0 24px rgba(0,0,0,.1); }
    .cart-sidebar.open { transform:translateX(0); }
    .cart-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.75rem; border-bottom:1px solid #e8e4dc; }
    .cart-head h3 { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.3rem; }
    .cart-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--grey); line-height:1; }
    /* min-height:0 obbligatorio: senza, il body cresce con il contenuto (righe più
       alte in lingue con testi lunghi) e spinge .cart-foot fuori dalla sidebar. */
    .cart-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch; padding:1.5rem 1.75rem; }
    .cart-empty-msg { text-align:center; color:var(--grey); padding:3rem 0; font-size:.95rem; }
    .cart-item-row { display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid #e8e4dc; }
    .cart-item-img { width:80px; height:80px; object-fit:cover; border-radius:3px; background:var(--light); }
    .cart-item-detail { flex:1; }
    .cart-item-title { font-size:.92rem; font-weight:500; margin-bottom:.25rem; color:var(--black); }
    .cart-item-price { font-size:.88rem; color:var(--grey); }
    .cart-item-actions { display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }
    .cart-qty-btn { width:28px; height:28px; border:1px solid #ddd; background:none; border-radius:2px; cursor:pointer; font-size:1rem; line-height:1; color:var(--dark); }
    .cart-qty-num { min-width:28px; text-align:center; font-size:.9rem; }
    .cart-item-remove { margin-left:auto; background:none; border:none; color:var(--grey); cursor:pointer; font-size:1rem; }
    .cart-foot { flex:0 0 auto; padding:1.5rem 1.75rem calc(1.5rem + env(safe-area-inset-bottom));
      border-top:1px solid #e8e4dc; background:#faf8f4; }
    .cart-total-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
      font-weight:600; font-size:1.05rem; margin-bottom:1.25rem; }
    /* "spedizione inclusa" su riga propria sotto "Totale": resta leggibile anche
       nelle lingue con testi lunghi senza stringere la cifra. */
    .cart-total-lbl-wrap { display:flex; flex-direction:column; min-width:0; }
    .cart-total-note { font-weight:400; font-size:.78rem; color:var(--grey); margin-top:.15rem; letter-spacing:.01em; }
    #cart-total-val { white-space:nowrap; }
    .cart-checkout-btn { width:100%; padding:1.1rem 1rem; background:var(--black); color:var(--white);
      border:none; border-radius:2px; font-size:.88rem; font-weight:600; letter-spacing:.08em;
      line-height:1.3; text-transform:uppercase; cursor:pointer; transition:background .2s; }
    .cart-checkout-btn:hover:not(:disabled) { background:#2a2a2a; }
    .cart-checkout-btn:disabled { background:#ccc; cursor:not-allowed; }

    /* RESPONSIVE */
    @media (max-width:900px) {
      .hero { grid-template-columns:1fr; }
      .hero-text { padding:4rem 2rem; order:2; }
      .hero-image { min-height:50vw; order:1; }
      .product-grid { grid-template-columns:1fr; }
      .product-gallery { position:static; }
      .magic-grid, .app-grid { grid-template-columns:1fr; }
      .features-grid { grid-template-columns:1fr 1fr; }
      .testimonials-grid { grid-template-columns:1fr; }
      .proof-stats { grid-template-columns:1fr 1fr; }
      .nav-links { display:none; }
    }
    @media (max-width:600px) {
      .features-grid { grid-template-columns:1fr; }
      .footer-inner { flex-direction:column; gap:1.5rem; text-align:center; }
      .footer-copy { text-align:center; }
    }
    /* ════════════ NUOVE SEZIONI ════════════ */
    .section-lead { max-width:640px; margin:1.4rem auto 0; color:var(--grey); font-size:1.05rem; line-height:1.65; }
    .lk-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
      background:repeating-linear-gradient(45deg,#efe9df,#efe9df 12px,#e7e0d4 12px,#e7e0d4 24px);
      color:#9a9080; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-align:center;
      border-radius:8px; border:1px dashed #cfc6b6; min-height:220px; padding:1.5rem; }
    .lk-ph .ph-ico { font-size:2rem; opacity:.7; }
    .lk-ph.dark { background:repeating-linear-gradient(45deg,#161616,#161616 12px,#1d1d1d 12px,#1d1d1d 24px);
      color:#6b6457; border-color:#2c2c2c; }

    /* COMPARE vs LCD */
    .compare-section { padding:6rem 0; background:var(--white); }
    .compare-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:stretch; margin-top:1rem; }
    .compare-table { width:100%; height:100%; border-collapse:collapse; border:1px solid #e0d9cf; border-radius:8px; overflow:hidden; }
    .compare-table th, .compare-table td { padding:1.05rem 1.25rem; font-size:.92rem; text-align:left; border-bottom:1px solid #ece7df; }
    .compare-table thead th { font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; color:var(--black); background:#faf8f4; }
    .compare-table tbody td:first-child { font-weight:600; color:var(--dark); }
    .compare-table td { color:var(--grey); }
    .compare-table .col-link { background:var(--black); color:var(--white); }
    .compare-table thead th.col-link { background:var(--black); color:var(--white); }
    .compare-table td.col-link { color:var(--white); font-weight:600; }
    .compare-table tr:last-child td { border-bottom:none; }
    /* Titolo di riga (prima colonna) sempre su una riga — look pulito/luxury */
    .compare-table th:first-child, .compare-table td:first-child,
    .bw-mini-table th:first-child, .bw-mini-table td:first-child,
    .specs-table td:first-child { white-space:nowrap; }
    /* Wrapper: su schermi stretti la tabella scorre in orizzontale (swipe), senza tagli né parole spezzate */
    .tbl-scroll { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
      scrollbar-width:none; -ms-overflow-style:none; }
    .tbl-scroll::-webkit-scrollbar { width:0; height:0; display:none; }
    .compare-layout .tbl-scroll { height:100%; }
    .cmp-yes { color:#1f9d55; font-weight:700; } .cmp-no { color:#c0392b; font-weight:700; }
    .col-link .cmp-yes, .col-link .cmp-no { color:var(--accent); }
    .compare-visual { aspect-ratio:4/5; position:relative; border-radius:10px; overflow:hidden;
      background:#161616; box-shadow:0 20px 50px rgba(0,0,0,.12); user-select:none; }
    .cc-track { position:absolute; inset:0; }
    .cc-track img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
      opacity:0; transition:opacity .8s ease; pointer-events:none; }
    .cc-track img.active { opacity:1; }
    .cc-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
      width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
      background:rgba(255,255,255,.85); color:#111; font-size:1.4rem; line-height:1;
      display:flex; align-items:center; justify-content:center; opacity:0;
      transition:opacity .25s, background .2s; }
    .compare-visual:hover .cc-arrow { opacity:1; }
    .cc-arrow:hover { background:#fff; }
    .cc-prev { left:.75rem; } .cc-next { right:.75rem; }
    .cc-dots { position:absolute; bottom:.9rem; left:50%; transform:translateX(-50%); z-index:3;
      display:flex; gap:.5rem; }
    .cc-dot { width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; padding:0;
      background:rgba(255,255,255,.5); transition:background .2s, transform .2s; }
    .cc-dot.active { background:#fff; transform:scale(1.25); }
    @media (hover:none) { .cc-arrow { opacity:.9; } }

    /* PERCHÉ B&W (showpiece scuro) */
    .bw-section { padding:6rem 0; background:var(--black); color:var(--white); }
    .bw-section .section-title { color:var(--white); }
    .bw-section .section-lead { color:rgba(255,255,255,.6); }
    .ba-slider { --pos:48%; position:relative; max-width:520px; margin:3.5rem auto 0; aspect-ratio:3/4;
      border-radius:10px; overflow:hidden; user-select:none; touch-action:pan-y; box-shadow:0 30px 70px rgba(0,0,0,.5); }
    .ba-layer { position:absolute; inset:0; }
    .ba-layer img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
      /* spostamento in % (non in px): così l'inquadratura è identica a ogni
         larghezza. 2.4% mette l'asse naso-bocca esattamente sulla linea (48%). */
      transform:translateX(2.4%) scale(1.1); transform-origin:center; }
    .ba-layer .lk-ph { height:100%; border-radius:0; border:none; min-height:0; }
    .ba-top { clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
    .ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--white); transform:translateX(-1px); cursor:ew-resize; z-index:3; }
    .ba-handle::after { content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:46px; height:46px; border-radius:50%; background:var(--white); color:var(--black);
      display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.45); font-size:1rem; letter-spacing:-1px; }
    .ba-label { position:absolute; top:1rem; z-index:2; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
      padding:.4rem .8rem; border-radius:999px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
    .ba-label-l { left:1rem; color:var(--white); border:1px solid var(--accent); }
    .ba-label-r { right:1rem; color:rgba(255,255,255,.75); }
    /* su desktop testo per esteso, su mobile la sigla (vedi media query) */
    .ba-label .ba-short { display:none; }
    .bw-mini-table { width:100%; max-width:780px; margin:3rem auto 0; border-collapse:collapse; }
    .bw-mini-table th, .bw-mini-table td { padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.12); font-size:.95rem; text-align:left; }
    .bw-mini-table thead th { font-family:'Poppins',sans-serif; font-weight:600; color:var(--accent); }
    .bw-mini-table tbody td:first-child { color:rgba(255,255,255,.55); }
    .bw-mini-table .col-link { color:var(--white); font-weight:600; }
    .bw-mini-table tr:last-child td { border-bottom:none; }
    /* Accordion tecnico */
    .tech-accordion { max-width:880px; margin:3rem auto 0; text-align:center; }
    .tech-acc-toggle { display:inline-flex; align-items:center; justify-content:center;
      background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.85);
      border-radius:999px; min-width:210px; padding:1.05rem 2.2rem; cursor:pointer;
      font-family:'Poppins',sans-serif; font-weight:500; font-size:1.1rem; text-align:center;
      transition:background .25s ease, color .25s ease, border-color .25s ease; }
    .tech-acc-toggle:hover { background:#fff; color:#0a0a0a; border-color:#fff; }
    .tech-acc-body { max-height:0; overflow:hidden; transition:max-height .55s ease; }
    .tech-accordion.open .tech-acc-body { max-height:7000px; }
    .tech-acc-inner { padding:.5rem 0 2.5rem; color:rgba(255,255,255,.7); line-height:1.65; }
    .tech-acc-inner p { margin-bottom:1.2rem; }
    .tech-acc-inner h4 { color:var(--white); font-family:'Poppins',sans-serif; font-weight:600; font-size:1.12rem; margin:2rem 0 .8rem; }
    .tech-gifs { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:2rem 0; }
    .tech-gifs figure { margin:0; }
    .tech-gifs img { width:100%; border-radius:8px; display:block; background:#161616; }
    .tech-gifs figcaption { font-size:.78rem; color:rgba(255,255,255,.45); margin-top:.6rem; text-align:center; }
    .tech-big-table { width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.84rem; }
    .tech-big-table th, .tech-big-table td { padding:.7rem .9rem; border:1px solid rgba(255,255,255,.13); text-align:left; vertical-align:top; }
    .tech-big-table thead th { color:var(--accent); background:rgba(255,255,255,.04); font-family:'Poppins',sans-serif; font-weight:600; }
    .tech-big-table tbody td:first-child { color:rgba(255,255,255,.85); font-weight:500; }
    .tech-big-table .col-link { color:var(--white); background:rgba(200,184,154,.06); }

    /* DESIGN ANALOGICO / GestureSwitch */
    .analog-section { padding:6rem 0; background:var(--white); }
    .analog-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .analog-text p:not([class]) { color:var(--grey); font-size:1.05rem; line-height:1.65; margin-top:1.5rem; margin-bottom:1.25rem; }
    .analog-text strong { color:var(--black); }
    /* GESTURESWITCH */
    .gs-section { padding:6rem 0; background:var(--white); }
    .gs-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .gs-text p:not([class]) { color:var(--grey); font-size:1.05rem; line-height:1.65; margin-top:1.5rem; }
    .gs-text strong { color:var(--dark); font-weight:600; }
    .gs-visual .lk-ph { width:min(100%,500px); aspect-ratio:4/5; min-height:0; margin:0 auto; border-radius:14px; }
    .gs-visual img { display:block; width:min(100%,500px); aspect-ratio:4/5; object-fit:cover; margin:0 auto; border-radius:14px; }

    /* ════════════ QUADRO 3D ════════════ */
    /* Sostituisce la fotografia nella sezione "Sorprendi i tuoi ospiti".
       Il 3D vive dentro un iframe: cosi' three.js e le texture si scaricano
       solo quando la sezione arriva a schermo, e solo per la lingua visibile.
       Finche' non e' pronto (o se il browser non ha WebGL) resta la foto. */
    /* Il riquadro e' solo il contenitore: dentro c'e' la scena (che ritaglia)
       e sotto il suggerimento. Prima il suggerimento stava dentro la scena e
       la cornice, girando, gli finiva sopra. */
    .lk3d { position:relative; width:min(100%,580px); margin:0 auto; }
    /* Nessuno sfondo: il quadro gira sul bianco della sezione. Il raggio
       serve solo ad arrotondare l'immagine di scorta, che sta sotto. */
    .lk3d-stage { position:relative; aspect-ratio:1/1; border-radius:14px;
      overflow:hidden; cursor:grab; background:transparent; }
    .gs-visual .lk3d img.lk3d-poster { position:absolute; inset:0; width:100%; height:100%;
      aspect-ratio:auto; object-fit:contain; margin:0; border-radius:0;
      transition:opacity .6s ease; }
    .lk3d.is-ready img.lk3d-poster { opacity:0; }
    /* Se l'immagine di scorta non e' arrivata in tempo, sotto non c'e' niente
       da sfumare: mezzo secondo di dissolvenza dal bianco si nota, uno
       scambio secco no. */
    .lk3d.senza-scorta .lk3d-frame,
    .lk3d.senza-scorta img.lk3d-poster { transition:none; }
    .lk3d-frame { position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
      background:transparent; opacity:0; transition:opacity .6s ease; }
    .lk3d.is-ready .lk3d-frame { opacity:1; }
    /* Sta sotto la scena, mai sopra: la cornice girando ci finiva sopra.
       Ed e' fuori dal flusso, come quella di GestureSwitch: sparisce al primo
       gesto, e se occupasse spazio proprio lascerebbe un buco bianco che fa
       sembrare le sezioni staccate. Ci sta nel padding della sezione. */
    .lk3d-tip { position:absolute; top:calc(100% + .9rem); left:50%;
      transform:translateX(-50%); max-width:100%;
      opacity:0; transition:opacity .5s ease; }
    .lk3d.is-ready .lk3d-tip { opacity:1; }
    .lk3d.tip-gone .lk3d-tip { opacity:0; }
    /* niente WebGL: si tiene l'immagine e si toglie tutto il resto */
    .lk3d.no-3d .lk3d-stage { cursor:default; }
    .lk3d.no-3d .lk3d-frame, .lk3d.no-3d .lk3d-tip { display:none; }
    .lk3d.no-3d img.lk3d-poster { opacity:1; }

    /* finestra grande del 3D, quella del doppio clic */
    /* Il quadro in 3D si apre a TUTTO SCHERMO, su bianco pieno: deve
       sembrare un'altra pagina, non una finestrella appoggiata sopra il
       sito. Prima restava un bordo scuro attorno (il velo nero che si
       vedeva oltre il riquadro) e si capiva che era un popup. */
    .lk3d-modal { position:fixed; inset:0; z-index:2200; display:none;
      background:var(--white);
      opacity:0; transition:opacity .28s ease; }
    .lk3d-modal.open { display:block; }
    .lk3d-modal.shown { opacity:1; }
    .lk3d-modal-box { position:absolute; inset:0; border-radius:0; overflow:hidden;
      background:var(--white); }
    .lk3d-modal-box iframe { position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }
    /* la stessa ✕ delle FAQ: cerchietto chiaro che gira di 90 gradi al passaggio */
    .lk3d-modal-close { position:absolute; top:1.1rem; right:1.2rem; z-index:2;
      display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
      background:none; border:1px solid #e0d9cf; font-size:1.05rem; line-height:1;
      cursor:pointer; color:var(--dark);
      transition:border-color .2s, color .2s, transform .2s; }
    .lk3d-modal-close:hover { border-color:var(--dark); color:var(--accent); transform:rotate(90deg); }
    [dir="rtl"] .lk3d-modal-close { right:auto; left:1.2rem; }
    /* (la regola per il telefono non serve piu': adesso e' a tutto schermo
       dappertutto) */

    .analog-badges { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1.75rem 0; }
    .analog-badge { position:relative; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dark);
      border:1px solid #e0d9cf; border-radius:999px; padding:.55rem 1.1rem; background:#faf8f4;
      transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), color .35s ease, border-color .35s ease; }
    /* barra che "cancella" il badge (sono cose che Linkuadro NON ha) */
    .analog-badge::after { content:''; position:absolute; left:12%; right:12%; top:50%; height:2px; margin-top:-1px;
      background:var(--dark); border-radius:2px; transform:scaleX(0); transform-origin:left center;
      transition:transform .38s ease; pointer-events:none; }
    /* lineetta tracciata tra un badge e l'altro (inserita via JS) */
    .analog-connector { flex:0 0 auto; width:28px; height:1.5px; background:var(--accent); border-radius:2px;
      transform-origin:left center; transition:transform .45s ease; }
    /* stati animati (fallback: se il JS non gira, i badge restano visibili) */
    .analog-badges.anim-ready .analog-badge { opacity:0; transform:translateY(10px); }
    .analog-badges.anim-ready .analog-connector { transform:scaleX(0); }
    .analog-badges.anim-ready .analog-badge.show { opacity:1; transform:none; }
    .analog-badges.anim-ready .analog-connector.show { transform:scaleX(1); }
    .analog-badges.anim-ready .analog-badge.struck { color:var(--grey); border-color:#ece7df; }
    .analog-badges.anim-ready .analog-badge.struck::after { transform:scaleX(1); }
    @media (max-width:600px){ .analog-connector { display:none; } }

    /* -------------------------------------- la dicitura che cambia da sola
       Niente pillola: testo e basta, come l'occhiello sopra il video in cima
       alla pagina (.hero-v2-eyebrow). Stessa misura, stessa spaziatura,
       stessa dissolvenza, stesso tempo: le due cose devono sembrare
       parenti.

       "Zero" resta fermo e cambia solo la parola dopo. Regge in tutte e otto
       le lingue: Zero / Zero / Zero / Null / Cero / Nol' / sifr / ling - e'
       sempre la prima parola. In cinese pero' non c'e' lo spazio, e in arabo
       si legge da destra: se ne occupa il taglio in js/main.js, che se il
       perno non torna lascia le tre diciture di prima. */
    /* align-items:center e non baseline: dentro la ruota ci sono solo elementi
       in posizione assoluta, quindi non ha una linea di base da allineare e la
       parola finiva mezza riga piu' in alto di "Zero". Centrando due scatole
       alte uguali, le due linee di base tornano a coincidere. */
    .analog-rot { display:inline-flex; align-items:center; gap:.34em; line-height:1.5;
      font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; }
    /* in cinese fra "zero" e la parola non c'e' spazio: 零电缆, non 零 电缆 */
    .analog-rot.attaccato { gap:0; }
    /* flex:0 0 auto, se no in una riga stretta la parola verrebbe compressa */
    .ar-ruota { position:relative; display:inline-block; flex:0 0 auto;
      height:1.5em; line-height:1.5em;
      transition:width .5s cubic-bezier(.2,.8,.2,1); }
    .ar-parola { position:absolute; inset-inline-start:0; top:0; white-space:nowrap;
      line-height:1.5em; opacity:0; transition:opacity .5s ease; }
    .ar-parola.active { opacity:1; }
    /* comparsa quando la sezione arriva a schermo */
    .analog-badges.anim-ready .analog-rot { opacity:0; transform:translateY(8px);
      transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
    .analog-badges.anim-ready .analog-rot.show { opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce){
      .ar-ruota, .ar-parola, .analog-rot { transition:none; }
    }
    /* overflow visibile: la pillola del suggerimento sta SOTTO l'immagine e
       deve poter uscire dal riquadro. Il video e' comunque ritagliato dal
       suo .gesture-frame, che ha overflow:hidden per conto suo. */
    .gesture-visual { position:relative; aspect-ratio:4/5; border-radius:10px; overflow:visible;
      background:var(--white); display:flex; align-items:center; justify-content:center; touch-action:none; }
    .gesture-visual.active { cursor:none; }
    .gesture-frame { position:relative; width:70%; aspect-ratio:396/480; border-radius:2px; overflow:hidden;
      box-shadow:0 18px 50px rgba(0,0,0,.18); }
    .gesture-frame video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
    .gesture-frame video::-webkit-media-controls { display:none !important; }
    /* bagliore del sensore GestureSwitch quando si attiva al centro */
    .gesture-glow { position:absolute; inset:0; pointer-events:none; opacity:0;
      background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 65%); mix-blend-mode:screen; }
    .gesture-frame.flash .gesture-glow { animation:gesture-flash .7s ease-out; }
    @keyframes gesture-flash { 0%{opacity:0;} 18%{opacity:1;} 100%{opacity:0;} }
    .gesture-hand { position:absolute; left:50%; top:62%; font-size:3.4rem; z-index:5; pointer-events:none;
      transform:translate(-50%,-50%); filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
      transition:left .08s linear, top .08s linear; }
    .gesture-visual:not(.active) .gesture-hand { animation:gesture-bob 2.8s ease-in-out infinite; }
    @keyframes gesture-bob { 0%,100%{transform:translate(-50%,-50%);} 50%{transform:translate(-50%,-62%);} }
    /* Sotto l'immagine, mai sopra: sta sparendo comunque al primo gesto, non
       ha senso che copra l'animazione mentre la si guarda. */
    .gesture-hint { position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%);
      z-index:6; max-width:100%; transition:opacity .4s; }
    /* ── Pillola dei suggerimenti ─────────────────────────────────────────
       Una regola sola per il 3D e per GestureSwitch: erano due blocchi
       gemelli che avevano gia' cominciato a divergere nella spaziatura, e si
       vedeva. La spaziatura e' volutamente stretta (.09em): a .16em le
       maiuscole si sparpagliavano e la scritta sembrava piu' piccola. */
    .lk3d-tip, .gesture-hint {
      width:max-content; text-align:center; line-height:1.7;
      font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:500;
      letter-spacing:.09em; text-transform:uppercase; color:var(--grey);
      background:rgba(250,248,244,.92); border:1px solid #e0d9cf; border-radius:999px;
      padding:.55rem 1.4rem; box-shadow:0 8px 22px rgba(0,0,0,.09);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      pointer-events:none; }
    .gesture-hint em { font-style:italic; color:var(--accent); font-weight:600; }
    .gesture-visual.touched .gesture-hint { opacity:0; }

    /* SITUAZIONI DI UTILIZZO */
    .usecases-section { padding:6rem 0; background:var(--black); color:var(--white); }
    .usecases-section .section-title { color:var(--white); }
    .usecase-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3.5rem; margin:1rem auto 0; max-width:900px; }
    .usecase-card { position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#161616;
      border:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; transition:transform .3s, border-color .3s; }
    .usecase-card:hover { transform:translateY(-6px); border-color:var(--accent); }
    .usecase-card .uc-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:rgba(255,255,255,.16); }
    .usecase-card .uc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .5s ease; }
    .usecase-card:hover .uc-img { transform:scale(1.06); }
    .usecase-card .uc-label { position:relative; z-index:2; width:100%; padding:1.3rem;
      background:linear-gradient(to top, rgba(0,0,0,.8),transparent); font-family:'Poppins',sans-serif; font-weight:600; font-size:1.1rem; }

    /* Caroselli ambienti (4 quadratoni — stesso stile del carosello confronto) */
    .uc-carousel { position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:#161616;
      border:1px solid rgba(255,255,255,.08); user-select:none; transition:border-color .3s; }
    .uc-carousel:hover { border-color:var(--accent); }
    .uc-carousel .cc-track img { object-fit:cover; transition:opacity .8s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
    .uc-carousel:hover .cc-track img { transform:scale(1.08); }   /* effetto "entrare nell'immagine" */
    .uc-carousel:hover .cc-arrow { opacity:1; }
    .uc-overlay { position:absolute; top:0; left:0; right:0; z-index:2;
      padding:clamp(2.2rem,3.6vw,3.4rem) 1rem clamp(2.8rem,4.5vw,4rem); text-align:center;
      background:linear-gradient(to bottom, rgba(0,0,0,.62), transparent); pointer-events:none; }
    .uc-title { font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(1.7rem,2.8vw,2.7rem); color:#fff; line-height:1.1; text-shadow:0 2px 14px rgba(0,0,0,.5); }
    .uc-sub { font-size:clamp(.85rem,1.05vw,1.05rem); letter-spacing:.05em; color:rgba(255,255,255,.85); margin-top:.45rem; text-shadow:0 1px 10px rgba(0,0,0,.5); }

    /* APP, pilastri (no internet / wifi diretto / slideshow) */
    .app-pillars { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 4rem; margin-top:4rem; padding-top:3rem; border-top:1px solid #e8e4dc; }
    .app-pillar { text-align:center; padding:.5rem; flex:0 1 440px; max-width:470px; }
    .app-pillar .ap-ico { display:inline-flex; color:var(--dark); }
    .app-pillar .ap-ico svg { width:34px; height:34px; }
    .app-pillar h4 { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.1rem; margin:1rem 0 .5rem; color:var(--black); white-space:nowrap; }
    .app-pillar p { font-size:.9rem; color:var(--grey); line-height:1.65; }

    /* REVIEWS, video backer */
    .backer-videos { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3.5rem; }
    .backer-video { position:relative; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#161616;
      border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s; }
    .backer-video:hover { border-color:var(--accent); }
    .backer-video .bv-play { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92);
      color:var(--black); display:flex; align-items:center; justify-content:center; font-size:1.2rem; z-index:2; }
    .backer-video .bv-label { position:absolute; bottom:0; left:0; right:0; padding:1rem; z-index:2;
      background:linear-gradient(to top, rgba(0,0,0,.82),transparent); font-size:.84rem; color:var(--white); }

    /* SCEGLI IL TUO STILE (cornice nera/bianca, verticale/orizzontale) */
    .style-section { padding:6rem 0; background:var(--white); }
    .style-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .style-text p:not([class]) { color:var(--grey); font-size:1.05rem; line-height:1.65; margin-top:1.5rem; }
    .style-text strong { color:var(--dark); font-weight:600; }
    .style-visual { position:relative; width:min(100%,500px); margin:0 auto; aspect-ratio:4/5;
      border-radius:14px; overflow:hidden; background:#161616;
      box-shadow:0 20px 50px rgba(0,0,0,.18); user-select:none; }
    .style-visual:hover .cc-arrow { opacity:1; }

    @media (max-width:900px) {
      .compare-layout, .style-layout { grid-template-columns:1fr; gap:2.5rem; }
      .analog-grid, .gs-grid { grid-template-columns:1fr; gap:2.5rem; }
      .tech-gifs { grid-template-columns:1fr; }
      .usecase-grid { grid-template-columns:1fr 1fr; }
      .app-pillars { grid-template-columns:1fr; gap:2.5rem; }
      .backer-videos { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:600px) {
      .usecase-grid { grid-template-columns:1fr; }
      .backer-videos { grid-template-columns:1fr; }
      .tech-big-table { font-size:.78rem; }
      .app-pillar { flex-basis:100%; }
      .app-pillar h4 { white-space:normal; }
    }

    /* ════════════ RIFINITURA MOBILE / iPhone ════════════ */
    @media (max-width:600px) {
      .container { padding:0 1.25rem; }
      /* sezioni: meno aria verticale su mobile */
      .product-section { padding-top:3.5rem; padding-bottom:3.5rem; }
      .specs-section, .proof-section { padding:3.5rem 0; }
      .testimonials-section, .compare-section { padding:3.5rem 0; }
      /* su mobile occhiello/titolo/paragrafo a sinistra come le altre sezioni (analog/gs/style) */
      .section-header { margin-bottom:2.5rem; text-align:left; }
      .section-header .section-lead { margin-left:0; margin-right:0; }
      /* social (Instagram) e newsletter: stesso allineamento a sinistra */
      .ig-header { text-align:left; }
      .newsletter-inner { text-align:left; margin-left:0; }
      /* hero */
      .hero-text { padding:3rem 1.25rem; }
      .hero-image { padding:1.5rem; min-height:auto; }
      .hero-image img { max-height:60vh; }
      .hero-cta { width:100%; }
      .hero-cta .btn { flex:1 1 auto; justify-content:center; }
      /* statistiche */
      .proof-stats { grid-template-columns:1fr 1fr; }
      .stat-num { font-size:2.1rem; }
      .proof-stat { padding:1.8rem 1rem; }
      /* tabelle su mobile: font compatto; se non entrano si scorrono in orizzontale
         (wrapper .tbl-scroll) tenendo prima colonna su una riga e zero parole spezzate */
      .specs-table td { padding:.85rem 1rem; font-size:.88rem; }
      .compare-table th, .compare-table td { padding:.7rem .65rem; font-size:.8rem; }
      .bw-mini-table th, .bw-mini-table td { padding:.75rem .6rem; font-size:.82rem; }
      .tech-big-table th, .tech-big-table td { padding:.5rem .45rem; font-size:.72rem; }
      /* sezione acquisto: l'animazione della cornice è orizzontale (680×383, ~16:9),
         quindi il box usa lo stesso rapporto: niente ritaglio e niente bande
         del fondo sopra/sotto. Niente miniatura a tutta larghezza. */
      .product-main-img { aspect-ratio:680/383; }
      .product-main-img img { object-fit:contain; }
      .product-thumbs { gap:.5rem; }
      .product-thumbs img { flex:0 1 72px; min-width:0; width:auto; height:auto; aspect-ratio:1; }
      .product-grid { gap:2.5rem; }
      .product-name { font-size:2.1rem; }
      .product-guarantee { flex-wrap:wrap; gap:1.4rem .8rem; }
      .guarantee-item { flex:1 1 40%; }
      .guarantee-item span:last-child { font-size:.72rem; }
      /* slider before/after e gif tecniche */
      .ba-slider { margin-top:2.5rem; }
      /* etichette abbreviate: quelle per esteso si accavallavano */
      .ba-label .ba-full { display:none; }
      .ba-label .ba-short { display:inline; }
      /* sul telefono il quadro puo' essere piu' grande, e le pillole vogliono
         un filo d'aria in piu' perche' lo spazio verticale e' poco */
      .gesture-frame { width:78%; }
      .lk3d-tip { top:calc(100% + 1.1rem); }
      /* Scritta piu' piccola e stretta: a corpo pieno la riga lunga del 3D
         arrivava da bordo a bordo e sembrava tagliata. Il max-width lascia
         comunque aria ai due lati, cosi' la pillola si vede centrata. */
      .lk3d-tip, .gesture-hint { font-size:.62rem; letter-spacing:.07em;
        padding:.5rem 1.05rem; max-width:calc(100% - 1.6rem); }
      .bw-mini-table, .tech-accordion { margin-top:2rem; }
      /* ticker un filo più compatto */
      .ticker { gap:2.5rem; }
    }
    @media (max-width:380px) {
      .container { padding:0 1rem; }
      .hero h1 { font-size:2.4rem; }
      .proof-stats { grid-template-columns:1fr; }
    }

    /* NAV "ACQUISTA" BUTTON (added) */
    .nav-buy { display:inline-flex; align-items:center; height:29px; padding:0 1.15rem; line-height:1; background:transparent;
      color:var(--black); border:1.5px solid var(--black); border-radius:999px; font-size:.9rem; letter-spacing:0;
      text-transform:none; font-weight:500; text-decoration:none; transition:background .25s, color .25s, transform .2s;
      white-space:nowrap; }
    .nav-buy:hover { background:var(--black); color:var(--white); transform:translateY(-1px); }
    @media (max-width:600px){ .nav-buy { padding:.45rem 1.1rem; font-size:.82rem; } }

    /* ════════════ PAGINA FAQ (popup a schermo intero) ════════════ */
    body.faq-page { background:var(--black); min-height:100vh; height:100vh; overflow:hidden; display:flex; align-items:center;
      justify-content:center; padding:clamp(1rem,4vw,3rem); }
    .faq-backdrop { position:fixed; inset:0; background:radial-gradient(120% 120% at 50% 0%, #1d1d1d 0%, #0a0a0a 70%);
      z-index:0; cursor:default; }
    .faq-modal { position:relative; z-index:1; width:100%; max-width:860px; max-height:92vh; background:var(--white);
      border-radius:8px; box-shadow:0 40px 120px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden;
      animation:faqIn .45s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes faqIn { from{ opacity:0; transform:translateY(24px) scale(.985); } to{ opacity:1; transform:none; } }
    .faq-modal-head { display:flex; align-items:flex-start; gap:1rem; padding:2rem clamp(1.5rem,3vw,2.5rem) 1.5rem;
      border-bottom:1px solid #e8e4dc; flex-shrink:0; }
    .faq-eyebrow { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#555; margin-bottom:.6rem; }
    .faq-title { font-size:clamp(1.8rem,3vw,2.4rem); color:var(--black); line-height:1.1; }
    .faq-sub { font-size:.92rem; color:var(--grey); margin-top:.6rem; max-width:46ch; }
    .faq-head-controls { display:flex; align-items:center; gap:.85rem; margin-left:auto; flex-shrink:0; }
    .faq-head-controls .menu-lang-select { margin-left:0; }
    .faq-close { background:none; border:1px solid #e0d9cf; width:38px; height:38px; border-radius:50%;
      font-size:1.05rem; line-height:1; cursor:pointer; color:var(--dark); flex-shrink:0;
      transition:border-color .2s, color .2s, transform .2s; }
    .faq-close:hover { border-color:var(--dark); color:var(--accent); transform:rotate(90deg); }
    .faq-modal-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:.5rem clamp(1.5rem,3vw,2.5rem) 1.75rem;
      scrollbar-width:none; -ms-overflow-style:none; }
    .faq-modal-body::-webkit-scrollbar { width:0; height:0; display:none; }
    .faq-item { border-bottom:1px solid #eee6da; }
    .faq-item > summary { display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none;
      padding:1.25rem 0; font-family:'Poppins',sans-serif; font-weight:600; font-size:1.08rem; color:var(--black);
      transition:color .2s; }
    .faq-item > summary::-webkit-details-marker { display:none; }
    .faq-item > summary:hover { color:var(--accent); }
    .faq-q-ico { margin-left:auto; flex-shrink:0; width:18px; height:18px; position:relative; transition:transform .3s ease; }
    .faq-q-ico::before, .faq-q-ico::after { content:''; position:absolute; background:var(--accent); border-radius:2px; }
    .faq-q-ico::before { top:8px; left:0; width:18px; height:2px; }
    .faq-q-ico::after { left:8px; top:0; width:2px; height:18px; transition:opacity .3s ease; }
    .faq-item[open] .faq-q-ico::after { opacity:0; }
    .faq-item[open] > summary { color:var(--accent); }
    .faq-answer { padding:0 0 1.4rem; }
    .faq-answer p { color:var(--mid); font-size:.95rem; line-height:1.65; }
    .faq-answer a { color:var(--black); text-decoration:underline; text-underline-offset:2px; }
    .faq-answer a:hover { color:var(--accent); }
    @media (max-width:600px) {
      .faq-modal { max-height:96vh; border-radius:6px; }
      .faq-modal-head { flex-wrap:wrap; padding:1.5rem 1.25rem 1.1rem; }
      .faq-head-controls { order:-1; width:100%; justify-content:space-between; margin-left:0; }
      .faq-item > summary { font-size:1rem; }
    }

    /* ════════ APPROFONDIMENTO B/N (popup scuro, stile FAQ) ════════ */
    .deep-overlay { position:fixed; inset:0; z-index:300; display:none; align-items:center;
      justify-content:center; padding:clamp(1rem,4vw,3rem); overscroll-behavior:contain; }
    .deep-overlay.open { display:flex; }
    .deep-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
    .deep-modal { position:relative; z-index:1; width:100%; max-width:920px; max-height:92vh;
      background:#0d0d0d; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.08);
      border-radius:8px; box-shadow:0 40px 120px rgba(0,0,0,.6); display:flex; flex-direction:column;
      overflow:hidden; animation:faqIn .45s cubic-bezier(.2,.8,.2,1) both; }
    .deep-modal-head { display:flex; align-items:flex-start; gap:1rem;
      padding:1.75rem clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; }
    .deep-title { font-size:clamp(1.25rem,2.2vw,1.65rem); color:#fff; line-height:1.3; margin:0; }
    .deep-close { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.25); width:38px; height:38px;
      border-radius:50%; color:#fff; font-size:1rem; line-height:1; cursor:pointer; flex-shrink:0;
      transition:border-color .2s, color .2s, transform .2s; }
    .deep-close:hover { border-color:#fff; color:var(--accent); transform:rotate(90deg); }
    .deep-modal-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 clamp(1.5rem,3vw,2.5rem) 2rem;
      scrollbar-width:none; -ms-overflow-style:none; }
    .deep-modal-body::-webkit-scrollbar { width:0; height:0; display:none; }
    .deep-modal-body .tech-acc-inner { padding:1.25rem 0 .5rem; }
    @media (max-width:600px) {
      .deep-modal { max-height:96vh; border-radius:6px; }
      .deep-modal-head { padding:1.4rem 1.25rem; }
    }

    /* ════════ CHAT IN PAGINA ════════ */
    .chat-dock { position:fixed; right:22px; bottom:22px; z-index:150; width:58px; height:58px; }
    /* Il FAB apre "a ventaglio" (ad arco) due scelte etichettate: WhatsApp e Chat online */
    .chat-choice { position:absolute; right:3px; bottom:3px; height:48px; border-radius:999px; z-index:1;
      display:inline-flex; align-items:center; gap:.15rem; padding:3px; padding-left:.9rem;
      background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.18); text-decoration:none; color:var(--black);
      font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:500; white-space:nowrap; border:none; cursor:pointer;
      transform-origin:calc(100% - 24px) 50%;
      opacity:0; transform:translate(0,0) scale(.4); pointer-events:none;
      transition:transform .34s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease, box-shadow .2s; }
    .chat-choice .cc-label { padding-right:.15rem; }
    .chat-choice .cc-ic { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
    .chat-choice .cc-ic svg { width:23px; height:23px; }
    .chat-wa .cc-ic { background:#25D366; }  .chat-wa .cc-ic svg { fill:currentColor; }
    .chat-online .cc-ic { background:var(--black); }  .chat-online .cc-ic svg { stroke:#fff; fill:none; }
    .chat-choice:hover { box-shadow:0 12px 28px rgba(0,0,0,.24); }
    .chat-dock:hover .chat-wa, .chat-dock.open .chat-wa { opacity:1; pointer-events:auto; transform:translate(-14px,-66px) scale(1); }
    .chat-dock:hover .chat-online, .chat-dock.open .chat-online { opacity:1; pointer-events:auto; transform:translate(-66px,-8px) scale(1); transition-delay:.05s; }
    .chat-fab { position:absolute; right:0; bottom:0; z-index:2; width:58px; height:58px; border-radius:50%;
      background:var(--black); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
      box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
      animation:waIn .4s ease both .6s; }
    @keyframes waIn { from{ opacity:0; transform:translateY(14px) scale(.85); } to{ opacity:1; transform:none; } }
    .chat-fab svg { width:27px; height:27px; stroke:#fff; }
    .chat-fab:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 16px 38px rgba(0,0,0,.34); background:#000; }
    .chat-fab.open { transform:scale(.92); opacity:.85; }
    .chat-fab-badge { position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 5px; border-radius:11px;
      background:var(--accent); color:var(--black); font-size:.72rem; font-weight:700; line-height:21px; text-align:center;
      border:2px solid var(--white); }

    .chat-panel { position:fixed; right:22px; bottom:92px; z-index:151; width:370px; max-width:calc(100vw - 36px);
      max-height:calc(100vh - 120px); background:var(--white); border-radius:14px; overflow:hidden;
      display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.28);
      opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
      transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
    .chat-panel.open { opacity:1; transform:none; pointer-events:auto; }
    .chat-head { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--black); color:#fff; flex-shrink:0; }
    .chat-head-title { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.15rem; line-height:1.1; }
    .chat-head-sub { font-size:.78rem; color:rgba(255,255,255,.6); margin-top:.2rem; }
    .chat-close { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.7); font-size:1.1rem;
      cursor:pointer; line-height:1; padding:.2rem; transition:color .2s; }
    .chat-close:hover { color:#fff; }
    .chat-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.25rem;
      scrollbar-width:none; -ms-overflow-style:none; }
    .chat-body::-webkit-scrollbar { width:0; height:0; display:none; }

    /* form iniziale (nome + email + messaggio) */
    .chat-startform { display:flex; flex-direction:column; gap:.7rem; }
    .chat-startform input, .chat-startform textarea { width:100%; border:1px solid #e0d9cf; border-radius:8px;
      padding:.7rem .85rem; font-family:inherit; font-size:.92rem; color:var(--dark); background:#faf8f4;
      resize:none; transition:border-color .2s; }
    .chat-startform input:focus, .chat-startform textarea:focus { outline:none; border-color:var(--accent); background:#fff; }
    .chat-start-btn { margin-top:.3rem; padding:.85rem; background:var(--black); color:#fff; border:none; border-radius:8px;
      font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
    .chat-start-btn:hover { background:#2a2a2a; }
    .chat-error { color:#b23b3b; font-size:.8rem; min-height:1em; margin:0; }

    /* messaggi (area con altezza minima comoda, poi scorre) */
    .chat-messages { display:flex; flex-direction:column; gap:.55rem; min-height:280px; }
    .chat-msg { max-width:80%; padding:.6rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.5;
      word-wrap:break-word; white-space:pre-wrap; }
    .chat-msg-user { align-self:flex-end; background:var(--black); color:#fff; border-bottom-right-radius:4px; }
    .chat-msg-admin { align-self:flex-start; background:var(--light); color:var(--dark); border-bottom-left-radius:4px; }

    /* barra ticket (numero + oggetto) sopra i messaggi */
    .chat-ticketbar { flex-shrink:0; display:flex; align-items:baseline; gap:.5rem; padding:.55rem 1.25rem;
      background:#faf8f4; border-bottom:1px solid #ece6da; font-size:.8rem; }
    .chat-ticketbar .ct-num { font-weight:700; color:var(--accent); letter-spacing:.02em; flex-shrink:0; }
    .chat-ticketbar .ct-subj { color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* banner "ticket chiuso" sopra la barra di input */
    .chat-closedbanner { flex-shrink:0; padding:.7rem 1.25rem; background:#efe7e7; color:#8a5252;
      font-size:.82rem; line-height:1.4; border-top:1px solid #e4d4d4; }

    /* barra input */
    .chat-inputbar { display:flex; align-items:center; gap:.5rem; padding:.7rem .8rem; border-top:1px solid #ece6da; flex-shrink:0; }
    .chat-inputbar input { flex:1 1 auto; border:1px solid #e0d9cf; border-radius:20px; padding:.6rem .95rem;
      font-family:inherit; font-size:.92rem; color:var(--dark); transition:border-color .2s; }
    .chat-inputbar input:focus { outline:none; border-color:var(--accent); }
    .chat-inputbar button { flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none; background:var(--black);
      color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .chat-inputbar button:hover { background:#2a2a2a; }
    .chat-inputbar button svg { width:18px; height:18px; }

    @media (max-width:600px) {
      .chat-dock { right:16px; bottom:16px; }
      .chat-fab { width:54px; height:54px; }
      .chat-panel { right:10px; left:10px; bottom:80px; width:auto; max-width:none;
        max-height:calc(100vh - 100px); }
    }

    /* iOS Safari: con font sotto i 16px l'iPhone fa lo zoom automatico al focus dei campi */
    @media (max-width:600px) {
      .qty-input input, .contact-form input, .contact-form textarea,
      .chat-startform input, .chat-startform textarea, .chat-inputbar input { font-size:16px; }
    }

    /* ════════════ FASCIA ACQUISTO ════════════
       Compare due volte nella home: prima del design analogico e prima
       delle recensioni. Stesso fondo e stessi filetti del ticker sotto
       il video, così le due barre si richiamano.
       Desktop: pulsante e rassicurazioni tutti su una riga.
       Mobile: pulsante a tutta larghezza, rassicurazioni sotto. */
    .buy-cta { background:var(--light); padding:1.6rem 0;
      border-top:1px solid #e0d9cf; border-bottom:1px solid #e0d9cf; }
    .buy-cta-inner { display:flex; align-items:center; justify-content:center;
      flex-wrap:wrap; gap:clamp(1.4rem,3.5vw,3rem); }

    .buy-cta-btn {
      display:inline-flex; align-items:center; justify-content:center;
      padding:.8rem 2.6rem; border:2px solid var(--black); border-radius:10px;
      background:transparent; color:var(--black); text-decoration:none;
      font-family:'Poppins',sans-serif; font-weight:600;
      font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
      transition:background .25s ease, color .25s ease; }
    .buy-cta-btn:hover { background:var(--black); color:var(--light); }
    .buy-cta-btn:focus-visible { outline:2px solid var(--black); outline-offset:3px; }

    /* Su desktop ogni voce è icona + testo affiancati: tiene bassa la barra */
    .buy-cta-perks { display:flex; align-items:center; gap:clamp(1.1rem,2.6vw,2.2rem); }
    .buy-cta-perk { display:flex; flex-direction:row; align-items:center; gap:.5rem; }
    .buy-cta-perk svg { width:23px; height:23px; display:block; color:var(--black); flex-shrink:0; }
    .buy-cta-perk > span { font-family:'Poppins',sans-serif; font-size:.82rem; font-weight:500;
      color:var(--black); line-height:1.25; white-space:nowrap; }

    /* Pastiglia Klarna: cerchio nel rosa del marchio */
    .buy-cta-klarna { width:23px; height:23px; border-radius:50%; background:#ffb3c7;
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      font-family:'Poppins',sans-serif; font-weight:700; font-size:.64rem;
      color:var(--black); letter-spacing:-.02em; }

    /* Sotto i 900px la riga unica si stringe troppo: si torna impilati */
    @media (max-width:900px) {
      .buy-cta-inner { flex-direction:column; gap:1.15rem;
        max-width:460px; margin:0 auto; }
      .buy-cta-btn { width:100%; }
      .buy-cta-perks { width:100%; justify-content:space-between; gap:.4rem; }
      .buy-cta-perk { flex:1 1 0; min-width:0; flex-direction:column; gap:.45rem; text-align:center; }
      .buy-cta-perk > span { white-space:normal; }
    }

    @media (max-width:600px) {
      .buy-cta { padding:1.35rem 0; }
      .buy-cta-inner { gap:1rem; }
      .buy-cta-btn { padding:.8rem 1rem; letter-spacing:.13em; font-size:.9rem; }
      .buy-cta-perk svg, .buy-cta-klarna { width:21px; height:21px; }
      .buy-cta-klarna { font-size:.58rem; }
      .buy-cta-perk > span { font-size:.7rem; }
    }

    @media (prefers-reduced-motion:reduce) {
      .buy-cta-btn { transition:none; }
    }

    /* ════════════ COMPARSA ALLO SCROLL ════════════
       I blocchi salgono di poco e sfumano quando entrano nello schermo.
       Solo sulla home (body.home-page): su acquista.html deve comparire
       tutto subito.

       .reveal-on la aggiunge uno script inline nell'index PRIMA che la
       pagina si dipinga, altrimenti i blocchi lampeggerebbero visibili
       per un istante. Se JavaScript è spento quella classe non arriva
       mai e il sito resta interamente visibile: l'animazione è una
       rifinitura, non deve mai poter nascondere i contenuti. */
    .home-page.reveal-on .section-header,
    .home-page.reveal-on .analog-text,
    .home-page.reveal-on .gs-visual,
    .home-page.reveal-on .app-step,
    .home-page.reveal-on .app-pillar,
    .home-page.reveal-on .testimonial,
    .home-page.reveal-on .buy-cta-inner,
    .home-page.reveal-on .uc-carousel,
    .home-page.reveal-on .tbl-scroll {
      opacity:0; transform:translateY(28px);
      transition:opacity .75s cubic-bezier(.22,.61,.36,1),
                 transform .75s cubic-bezier(.22,.61,.36,1); }

    .home-page.reveal-on .is-revealed { opacity:1; transform:none; }

    @media (prefers-reduced-motion:reduce) {
      .home-page.reveal-on .section-header,
      .home-page.reveal-on .analog-text,
      .home-page.reveal-on .gs-visual,
      .home-page.reveal-on .app-step,
      .home-page.reveal-on .app-pillar,
      .home-page.reveal-on .testimonial,
      .home-page.reveal-on .buy-cta-inner,
      .home-page.reveal-on .uc-carousel,
      .home-page.reveal-on .tbl-scroll {
        opacity:1; transform:none; transition:none; }
    }