/* Landing page dei prodotti di punta (templates/_landing.html) */
html,body{overflow-x:clip}
.lp-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:min(78vh,640px);display:flex;align-items:center;
  overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);margin-bottom:0}
.lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.lp-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,40,.88) 0%,rgba(8,20,40,.62) 38%,rgba(8,20,40,.08) 68%,rgba(8,20,40,0) 100%)}
.lp-hero-txt{position:relative;z-index:1;max-width:var(--wrap);width:100%;margin:0 auto;padding:56px 16px}
.lp-hero-txt>*{max-width:560px}
.lp-occhiello{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--gold);margin:0 0 .6em}
.lp-hero h1{margin:0 0 .45em;line-height:1.1}
.lp-nome{display:block;font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;opacity:.9;margin-bottom:.35em;letter-spacing:0}
.lp-claim{display:block;font-size:clamp(1.8rem,4.2vw,3rem);font-weight:800;letter-spacing:-.02em}
.lp-sotto{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.55;opacity:.92;margin-bottom:1.6em}
.lp-azioni{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-prezzo{font-size:1.5rem;font-weight:800;margin-right:6px}
.lp-prezzo small{font-size:.75rem;font-weight:500;opacity:.8}
.lp-btn-chiaro{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.55)!important;backdrop-filter:blur(4px)}
.lp-btn-chiaro:hover{background:rgba(255,255,255,.22)!important}

.lp-numeri{list-style:none;margin:0 0 8px;padding:0;width:100vw;margin-left:calc(50% - 50vw);background:var(--navy);color:#fff;
  display:flex;justify-content:center;flex-wrap:wrap}
.lp-numeri li{flex:1 1 180px;max-width:300px;padding:26px 16px;text-align:center;border-left:1px solid rgba(255,255,255,.12)}
.lp-numeri li:first-child{border-left:0}
.lp-numeri b{display:block;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--gold);line-height:1.1}
.lp-numeri span{font-size:.85rem;opacity:.85}

.lp-sez{padding:56px 0 8px}
.lp-h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.6em}
.lp-h3{font-size:1rem;margin-bottom:.6em}
.lp-vantaggi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
@media (min-width:901px){.lp-vantaggi[data-n="5"],.lp-vantaggi[data-n="6"],.lp-vantaggi[data-n="3"]{grid-template-columns:repeat(3,1fr)}}
.lp-vant{background:var(--soft);border-radius:var(--r);padding:22px}
.lp-vant h3{font-size:1.05rem;margin:.7em 0 .35em}
.lp-vant p{margin:0;color:var(--muted)}
.lp-ico{width:34px;height:34px;color:var(--accent);background:#e7eefb;border-radius:10px;padding:6px}

.lp-scena{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding:56px 0 8px}
.lp-scena figure{margin:0}
.lp-scena img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px rgba(11,27,51,.18)}
.lp-scena-inv figure{order:2}
.lp-scena .lp-occhiello{color:var(--accent)}
.lp-punti{list-style:none;padding:0;margin:0}
.lp-punti li{position:relative;padding:6px 0 6px 28px;font-weight:500}
.lp-punti li::before{content:"";position:absolute;left:0;top:10px;width:18px;height:18px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.5 16-5-5 1.4-1.4 3.6 3.6 7.1-7.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.5 16-5-5 1.4-1.4 3.6 3.6 7.1-7.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

.lp-perchi{margin-bottom:36px}
.lp-perchi ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.lp-perchi li{border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:600;font-size:.9rem;background:#fff}
.lp-motivi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.lp-motivi>div{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff}
.lp-motivi h3{font-size:1.05rem;margin:.6em 0 .35em}
.lp-motivi p{margin:0;color:var(--muted)}
.lp-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:800}

.lp-acquista-t{padding:64px 0 10px;border-top:1px solid var(--line);margin-top:56px}
.lp-buy-nome{font-size:1.3rem;font-weight:700;margin:0 0 .4em}

.lp-cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin:48px 0 8px;padding:36px;
  border-radius:20px;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%)}
.lp-cta h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:.3em}
.lp-cta p{margin:0;opacity:.9}

@media (max-width:900px){
  .lp-hero{min-height:0;flex-direction:column;align-items:stretch}
  .lp-hero-img .lp-hero-bg{position:relative;height:auto;aspect-ratio:3/2;object-position:65% center}
  .lp-hero-img::after{display:none}
  .lp-hero-img .lp-hero-txt{background:var(--navy);padding:28px 16px 32px}
  .lp-scena{grid-template-columns:1fr;gap:20px;padding-top:40px}
  .lp-scena-inv figure{order:0}
  .lp-sez{padding-top:40px}
  .lp-numeri li{flex-basis:50%;border-left:0;padding:18px 10px}
  .lp-cta{padding:26px 20px}
}

/* ---- animazioni (static/js/landing.js aggiunge .lp-anim; senza JS o con "riduci movimento" tutto resta fermo e visibile) */
@media (prefers-reduced-motion:no-preference){
  .lp-hero-img .lp-hero-bg{animation:lp-zoom 9s ease-out both}
  .lp-hero-txt>*{animation:lp-su .8s cubic-bezier(.2,.7,.2,1) both}
  .lp-hero-txt>:nth-child(2){animation-delay:.12s}.lp-hero-txt>:nth-child(3){animation-delay:.24s}.lp-hero-txt>:nth-child(4){animation-delay:.36s}
  @keyframes lp-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
  @keyframes lp-su{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  .lp-anim :is(.lp-numeri li,.lp-sez>.lp-h2,.lp-vant,.lp-scena figure,.lp-scena>div,.lp-perchi h2,.lp-perchi li,.lp-motivi>div,.lp-acquista-t,.lp-cta){
    opacity:0;transform:translateY(32px);
    transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .lp-anim .lp-scena figure{transform:translateX(-56px) scale(.96)}
  .lp-anim .lp-scena-inv figure{transform:translateX(56px) scale(.96)}
  .lp-anim .lp-scena>div{transition-delay:.15s}
  .lp-anim .lp-perchi li{transform:scale(.85)}
  .lp-anim .lp-cta{transform:translateY(32px) scale(.97)}
  .lp-anim :is(.lp-numeri li,.lp-sez>.lp-h2,.lp-vant,.lp-scena figure,.lp-scena>div,.lp-perchi h2,.lp-perchi li,.lp-motivi>div,.lp-acquista-t,.lp-cta).lp-in{opacity:1;transform:none}
  /* uscita più rapida e senza ritardo a cascata */
  .lp-anim :is(.lp-numeri li,.lp-vant,.lp-motivi>div,.lp-perchi li):not(.lp-in){transition-duration:.35s;transition-delay:0s}
  .lp-vant,.lp-motivi>div{transition-property:opacity,transform,box-shadow}
  .lp-vant:hover,.lp-motivi>div:hover{box-shadow:0 12px 28px rgba(11,27,51,.12)}
  .lp-scena img{transition:transform .6s ease}
  .lp-scena figure:hover img{transform:scale(1.02)}
}
@media print{.lp-anim *{opacity:1!important;transform:none!important}}
