/* ═══ LANDING · stile «alla Apple» e scene ferme (2026-10-05) ═══
   Carica SOLO index.html. Le regole con !important scavalcano gli stili inline della landing, che stanno nel body.
   Due scene ferme: quella di apertura (hero → «Pianta ── Render» → la pianta → il volo → il render) e il catalogo.
   La logica e' in landing-scena.js; se lo script non parte, le scene restano sezioni normali. */
/* ── la sezione «Da pianta a render» ── */
#pianta-intro { background:#0d0e16; padding:96px 0 104px; position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.05); }
#pianta-intro::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 0%, rgba(201,168,76,.10), transparent 70%);
}
#pianta-intro .ls-wrap { position:relative; }
.pi-eyebrow { display:inline-flex; align-items:center; gap:10px; }
  font-family:'Inter',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#000; background:var(--gold-gradient); padding:3px 9px; border-radius:20px;
}
#pianta-intro .ls-lead { max-width:620px; margin:0 auto; color:#b0b0cc; }

/* trittico */
.pi-flow {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch;
  gap:0; margin-top:56px;
}
.pi-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:20px;
  padding:14px 14px 22px; display:flex; flex-direction:column; transition:all .22s; min-width:0;
}
.pi-card:hover { border-color:rgba(201,168,76,.22); background:rgba(201,168,76,.04); transform:translateY(-4px); }
.pi-card.pi-final { border-color:rgba(201,168,76,.32); background:rgba(201,168,76,.05); box-shadow:0 0 40px rgba(201,168,76,.08); }
.pi-media {
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:#fff;
}
.pi-media img { width:100%; height:100%; object-fit:cover; display:block; }
.pi-media.pi-plan img { object-fit:contain; background:#fff; }
.pi-media svg { position:absolute; inset:0; width:100%; height:100%; }
.pi-cone { fill:rgba(201,168,76,.32); stroke:var(--gold); stroke-width:3; transform-origin:179px 242px; animation:piSweep 5s ease-in-out infinite; }
.pi-cam { fill:#111; }
.pi-cam-ring { fill:none; stroke:var(--gold); stroke-width:3; transform-origin:179px 242px; animation:piPulse 2.2s ease-out infinite; }
@keyframes piSweep { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@keyframes piPulse { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(2.6); opacity:0; } }
.pi-card-head { display:flex; align-items:center; gap:12px; margin:20px 8px 8px; }
.pi-num {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  background:rgba(201,168,76,.08); border:2px solid rgba(201,168,76,.3);
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:900; color:var(--gold);
}
.pi-final .pi-num { background:var(--gold-gradient); color:#000; border-color:transparent; }
.pi-card-title { font-family:'Inter',sans-serif; font-size:16px; font-weight:700; color:#fff; }
.pi-card-desc { font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.55); margin:0 8px; }
.pi-arrow { display:flex; align-items:center; justify-content:center; width:56px; color:var(--gold); }
.pi-arrow svg { width:28px; height:28px; filter:drop-shadow(0 0 8px rgba(201,168,76,.35)); }

/* dove la trovi */
.pi-where {
  margin:52px auto 0; max-width:880px; text-align:center;
  border:1px dashed rgba(201,168,76,.28); border-radius:18px; padding:26px 24px 28px;
  background:rgba(255,255,255,.02);
}
.pi-where-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:16px; }
.pi-path { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.pi-chip {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; color:#e8e6df;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:9px 15px; border-radius:10px; white-space:nowrap;
}
.pi-chip svg { width:15px; height:15px; color:var(--gold); }
.pi-chip.pi-on { background:rgba(201,168,76,.14); border:2px solid var(--gold); color:var(--gold-bright); box-shadow:0 0 22px rgba(201,168,76,.18); }
.pi-sep { color:rgba(201,168,76,.7); font-size:18px; font-weight:700; }
.pi-cta-row { text-align:center; margin-top:40px; }

@media (max-width:900px) {
  .pi-flow { grid-template-columns:1fr; }
  .pi-arrow { width:auto; height:44px; }
  .pi-arrow svg { transform:rotate(90deg); }
  .pi-card { max-width:520px; width:100%; margin:0 auto; }
}
@media (max-width:600px) {
  #pianta-intro { padding:56px 0 64px; }
  .pi-flow { margin-top:36px; }
  .pi-where { padding:20px 14px 22px; }
  .pi-chip { font-size:12.5px; padding:8px 11px; }
  .pi-sep { font-size:15px; }
}
.pi-video {
  max-width:980px; margin:48px auto 0; border-radius:20px; overflow:hidden;
  border:1px solid rgba(201,168,76,.32); background:#000;
  box-shadow:0 0 60px rgba(201,168,76,.10), 0 30px 80px rgba(0,0,0,.5);
}
.pi-video video { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.pi-chip.pi-pc { border-color:rgba(201,168,76,.4); }
.pi-where-note { font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); margin:18px auto 0; max-width:620px; }
.pi-where-note b { color:var(--gold-bright); font-weight:700; }
.pi-mobile { display:none; }
@media (max-width:900px) {
  .pi-cta-row { display:none; }
  .pi-mobile {
    display:flex; gap:14px; align-items:flex-start; text-align:left;
    margin:28px auto 0; max-width:520px; padding:18px;
    border-radius:16px; background:rgba(201,168,76,.10); border:2px solid var(--gold);
  }
  .pi-mobile svg { width:30px; height:30px; flex-shrink:0; color:var(--gold); margin-top:2px; }
  .pi-mobile-title { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#fff; margin-bottom:4px; }
  .pi-mobile-text { font-family:'Inter',sans-serif; font-size:14px; line-height:1.55; color:rgba(255,255,255,.8); }
  .pi-mobile-text b { color:var(--gold-bright); }
  .pi-video { margin-top:32px; border-radius:14px; }
}
@media (prefers-reduced-motion: reduce) { .pi-cone, .pi-cam-ring { animation:none; } }

/* lo `position:sticky` non funziona se un antenato ha overflow:hidden — `clip` taglia uguale ma non crea un contenitore */
html, body { overflow-x:clip !important; overflow-y:visible !important; background:#0b0c12 !important; }

/* ── 1 · STILE «APPLE» (apple.com/iphone-18-pro) — solo estetica, contenuti invariati ──
   Titoli enormi in grassetto stretto, etichetta colorata sopra, testi grandi che si accendono parola per parola,
   card a blocchi con angoli molto arrotondati, numeri grandi, pulsanti a pillola, media che si allargano entrando. */
:root { --ap-bg:#0b0c12; --ap-bg2:#101119; --ap-card:#161721; --ap-card2:#1c1d29; --ap-line:#24263a; --ap-txt:#f5f5f7; --ap-muto:#86868b; --ap-r:30px; }

.ls-section, #cat-marquee-wrap, #pianta-intro, .ls-cta-section { background:var(--ap-bg) !important; border:0 !important; }
.ls-features-bg, .ls-tools-bg { background:var(--ap-bg2) !important; }
#pianta-intro::before, .ls-divider { display:none !important; }
.ls-wrap { max-width:1180px !important; }
.ls-pad, #pianta-intro { padding:130px 0 !important; }
#cat-marquee-wrap { padding:130px 0 110px !important; }
.ls-cta-section { padding:160px 24px 170px !important;
  background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(201,168,76,.16), transparent 70%), var(--ap-bg) !important; }

/* tipografia */
.ls-eyebrow, .cat-head .ls-eyebrow, .pi-eyebrow {
  font-size:clamp(17px, 1.5vw, 21px) !important; font-weight:600 !important; letter-spacing:-.01em !important;
  text-transform:none !important; color:var(--gold) !important; margin-bottom:14px !important; justify-content:center;
}
.ls-h2, .cat-title, .ls-cta-section .ls-h2, #pianta-intro .ls-h2 {
  font-size:clamp(40px, 6.2vw, 84px) !important; font-weight:700 !important; letter-spacing:-.04em !important;
  line-height:1.04 !important; color:var(--ap-txt) !important; text-align:center; margin:0 auto 26px !important; max-width:1000px;
}
.ls-cta-section .ls-h2 { font-size:clamp(46px, 7.4vw, 104px) !important; }
h3.ls-h2 { font-size:clamp(30px, 4vw, 52px) !important; }
.ls-lead, .cat-lead, .ls-cta-section .ls-lead, #pianta-intro .ls-lead {
  font-size:clamp(19px, 1.75vw, 25px) !important; font-weight:600 !important; line-height:1.38 !important; letter-spacing:-.015em;
  color:var(--ap-muto) !important; max-width:780px !important; margin:0 auto !important; text-align:center;
}
/* le parole che si accendono scorrendo (vedi lo script) */
.ap-w { color:#3d3f4d; transition:color .35s ease; }
.ap-w.on { color:var(--ap-txt); }

/* pulsanti a pillola */
.ls-cta-btn, .pi-cta-row .ls-cta-btn, .ls-plan-btn {
  border-radius:980px !important; font-size:17px !important; font-weight:600 !important; letter-spacing:-.01em;
}
.ls-cta-btn { padding:18px 34px !important; }
.ls-cta-btn:hover { transform:scale(1.03) !important; opacity:1 !important; }
.ls-plan-btn { padding:13px 0 !important; }
.ls-cta-sub { font-size:14px !important; color:var(--ap-muto) !important; margin-top:20px !important; }

/* ── card a blocchi ── */
.ls-feat-card, .pi-card, .ls-plan, .ls-topup, .pi-where, .ls-step {
  background:var(--ap-card) !important; border:0 !important; border-radius:var(--ap-r) !important; box-shadow:none !important;
}
.ls-feat-grid { gap:20px !important; margin-top:64px !important; }
.ls-feat-card { padding:44px 38px 40px !important; position:relative; overflow:hidden; min-height:340px; display:flex; flex-direction:column; }
.ls-feat-card::before { content:''; position:absolute; inset:0 0 auto 0; height:180px; pointer-events:none;
  background:radial-gradient(ellipse 80% 100% at 30% 0, rgba(201,168,76,.14), transparent 70%); }
.ls-feat-card:nth-child(2)::before { background:radial-gradient(ellipse 80% 100% at 30% 0, rgba(99,102,241,.18), transparent 70%); }
.ls-feat-card:nth-child(3)::before { background:radial-gradient(ellipse 80% 100% at 30% 0, rgba(16,185,129,.15), transparent 70%); }
.ls-feat-card:hover { transform:none !important; background:var(--ap-card2) !important; }
.ls-feat-icon { width:60px !important; height:60px !important; border-radius:18px !important; margin-bottom:30px !important; position:relative; }
.ls-feat-icon svg { width:28px; height:28px; }
.ls-feat-title { font-size:clamp(24px, 2.2vw, 30px) !important; font-weight:700 !important; letter-spacing:-.03em; margin-bottom:12px !important; }
.ls-feat-desc { font-size:17px !important; line-height:1.5 !important; color:var(--ap-muto) !important; flex:1; }
.ls-feat-link { font-size:17px !important; font-weight:600 !important; margin-top:26px !important; letter-spacing:-.01em !important; }

/* la striscia dei render: immagini grandi e arrotondate */
#img-marquee { padding:30px 0 !important; background:var(--ap-bg) !important; }
#img-marquee .marquee-img { height:clamp(200px, 26vw, 340px) !important; width:auto !important; border-radius:24px !important; margin-right:18px !important; opacity:1 !important; }

/* come funziona: tre blocchi con il numero grande */
.ls-steps { gap:20px !important; margin-top:64px !important; }
.ls-steps::before { display:none !important; }
.ls-step { padding:40px 34px 42px !important; align-items:flex-start !important; text-align:left !important; }
.ls-step-num { width:auto !important; height:auto !important; border:0 !important; background:none !important; margin-bottom:22px !important;
  font-size:clamp(56px, 6vw, 84px) !important; font-weight:800 !important; letter-spacing:-.05em; line-height:1 !important;
  background:var(--gold-gradient) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.ls-step-title { font-size:clamp(21px, 1.9vw, 26px) !important; font-weight:700 !important; letter-spacing:-.025em; margin-bottom:12px !important; }
.ls-step-desc { font-size:17px !important; line-height:1.5 !important; color:var(--ap-muto) !important; }

/* strumenti: card alte con la foto piena */
.ls-tools-grid { gap:20px !important; margin-top:64px !important; }
.ls-tool-card { height:clamp(320px, 34vw, 460px) !important; border-radius:var(--ap-r) !important; }
.ls-tool-card img { opacity:.85 !important; transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s !important; }
.ls-tool-card:hover { transform:none !important; }
.ls-tool-card:hover img { transform:scale(1.06); opacity:1 !important; }
.ls-tool-label { padding:60px 26px 26px !important; background:linear-gradient(to top, rgba(8,8,12,.92), rgba(8,8,12,0)) !important; }
.ls-tool-name { font-size:clamp(20px, 1.8vw, 26px) !important; font-weight:700 !important; letter-spacing:-.025em; margin-bottom:6px !important; }
.ls-tool-sub { font-size:15px !important; color:rgba(255,255,255,.72) !important; }
.ls-tool-arr { width:38px !important; height:38px !important; background:rgba(255,255,255,.14) !important; backdrop-filter:blur(8px); }

/* prezzi */
.ls-res-bar { gap:14px !important; margin-top:48px !important; flex-wrap:wrap; }
.ls-res-item { border:0 !important; border-radius:22px !important; background:var(--ap-card) !important; padding:22px 34px !important; }
.ls-res-label { font-size:13px !important; color:var(--ap-muto) !important; text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important; }
.ls-res-cost { font-size:20px !important; font-weight:700 !important; letter-spacing:-.02em; }
.ls-res-note, .ls-iva-note { font-size:14px !important; color:var(--ap-muto) !important; }
.ls-pricing-grid { gap:16px !important; margin-top:60px !important; }
.ls-plan { padding:34px 26px 28px !important; }
.ls-plan.featured, .ls-plan.custom { box-shadow:0 0 0 2px var(--gold) inset !important; background:linear-gradient(180deg, rgba(201,168,76,.10), transparent 45%), var(--ap-card) !important; }
.ls-plan-badge { border-radius:980px !important; font-size:12px !important; padding:5px 14px !important; text-transform:none !important; letter-spacing:0 !important; }
.ls-plan-tier { font-size:15px !important; text-transform:none !important; letter-spacing:-.01em !important; font-weight:700 !important; }
.ls-plan-price { font-size:clamp(40px, 3.4vw, 50px) !important; font-weight:800 !important; letter-spacing:-.045em !important; }
.ls-plan-feats li { font-size:15px !important; border-bottom-color:rgba(255,255,255,.06) !important; }
.ls-plan-feats li.renders { font-size:16px !important; }
.ls-topup-grid { gap:16px !important; }
.ls-topup { padding:34px 24px !important; }
.ls-topup.featured { box-shadow:0 0 0 2px var(--gold) inset !important; }
.ls-topup-credits { font-size:15px !important; color:var(--ap-muto) !important; font-weight:700 !important; }
.ls-topup-price { font-size:clamp(36px, 3vw, 46px) !important; font-weight:800 !important; letter-spacing:-.04em; margin:6px 0 2px; }

/* la sezione della pianta e il catalogo */
/* il video esce dalla colonna del testo: quasi tutta la larghezza dello schermo */
#pianta-intro .pi-video { border-radius:var(--ap-r) !important; border:0 !important; box-shadow:0 40px 120px rgba(0,0,0,.55) !important; margin-top:64px !important;
  position:relative; width:min(1480px, 94vw) !important; max-width:none !important; left:50%; margin-left:calc(min(1480px, 94vw) / -2) !important; }
.pi-flow { margin-top:56px !important; }
.pi-card { padding:16px 16px 26px !important; }
.pi-media { border-radius:20px !important; }
.pi-card-title { font-size:21px !important; font-weight:700 !important; letter-spacing:-.02em; }
.pi-card-desc { font-size:16px !important; color:var(--ap-muto) !important; }
.pi-where { margin-top:44px !important; padding:30px 24px !important; }
.pi-where-label { font-size:15px !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ap-muto) !important; }
.pi-chip { border-radius:980px !important; font-size:15px !important; padding:10px 18px !important; background:var(--ap-card2) !important; border:0 !important; }
.pi-chip.pi-on { box-shadow:0 0 0 2px var(--gold) inset !important; background:rgba(201,168,76,.12) !important; }
.pi-where-note { font-size:16px !important; color:var(--ap-muto) !important; }
.cat-count { gap:44px !important; margin-top:40px !important; }
.cat-count span { font-size:15px !important; color:var(--ap-muto) !important; flex-direction:column; gap:4px !important; font-weight:600; }
.cat-count i { font-style:normal; font-size:clamp(40px, 4vw, 56px); font-weight:800; letter-spacing:-.04em; line-height:1;
  background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mat-tile { border-radius:18px !important; }

@media (max-width:900px) {
  .ls-feat-card { min-height:0; }
}
@media (max-width:600px) {
  .ls-pad, #pianta-intro { padding:84px 0 !important; }
  #cat-marquee-wrap { padding:84px 0 70px !important; }
  .ls-cta-section { padding:110px 20px 120px !important; }
  .ls-feat-card, .ls-step { padding:32px 26px !important; }
  .cat-count { gap:26px !important; }
}

/* entrate: salgono e compaiono */
.rv { opacity:0; transform:translateY(46px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
/* i media che si allargano entrando nello schermo (scala decisa dallo script) */
.ap-cresce { will-change:transform; transform-origin:50% 0; }


/* il fondo pagina: titolo su due righe pulite, spazio fra testo e pulsante */
.ls-cta-section .ls-h2 { font-size:clamp(40px, 5.6vw, 82px) !important; max-width:1240px !important; }
.ls-cta-section .ls-lead { margin:0 auto 44px !important; max-width:620px !important; }

/* ── il catalogo come scena ferma ── */
#cat-marquee-wrap { padding:0 !important; overflow:visible !important; }
.cs-scena { position:relative; height:380vh; }
.cs-fermo { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ap-bg); }
.cs-muro { position:absolute; left:50%; top:50%; display:flex; flex-direction:column; gap:16px; will-change:transform; transform-origin:50% 50%; backface-visibility:hidden; contain:layout paint; }
.cs-riga { display:flex; gap:16px; will-change:transform; backface-visibility:hidden; }
.cs-riga .mat-tile { width:clamp(150px, 15vw, 230px) !important; height:clamp(110px, 11vw, 170px) !important; border-radius:20px !important;
  border:0 !important; filter:none !important; flex:none; }
.cs-riga .mat-tile .mt-cat { opacity:1 !important; }
.cs-velo { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11,12,18,.94), rgba(11,12,18,.55) 70%, rgba(11,12,18,.25)); pointer-events:none; will-change:opacity; }
.cs-testa { position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px, 92vw); margin:0 !important; z-index:3; will-change:opacity, transform; }
.cs-testa .cat-lead { color:#c7c7cc !important; }
.cs-conta { position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; opacity:0; margin:0 !important; will-change:opacity, transform;
  display:flex !important; flex-wrap:nowrap !important; gap:clamp(22px, 6vw, 90px) !important; white-space:nowrap; }
.cs-conta span { color:#c7c7cc !important; font-size:17px !important; }
.cs-conta i { font-size:clamp(44px, 7vw, 104px) !important; }
@media (max-width:600px) { .cs-muro, .cs-riga { gap:10px; } .cs-riga .mat-tile { border-radius:14px !important; } }

/* ── 2 · la scena ferma ── */
#pianta-finale { position:relative; height:740vh; background:#0b0c12; z-index:1; }
.sc-fermo { position:sticky; top:0; height:100vh; overflow:hidden; background:#0b0c12; }
.sc-hero { position:absolute; inset:0; z-index:1; will-change:opacity; }
.sc-hero #landing-hero { position:absolute !important; inset:0; min-height:0 !important; height:100% !important; overflow:hidden; }
.sc-velo { position:absolute; inset:0; background:#0b0c12; opacity:0; z-index:15; will-change:opacity; pointer-events:none; }
.cornice { position:absolute; inset:0; pointer-events:none; box-shadow:0 0 0 150vmax #0b0c12; will-change:transform; transform:translateZ(0); }
#sc-cornice-hero { z-index:2; }
#sc-cv { position:absolute; inset:0; width:100%; height:100%; z-index:3; display:block; pointer-events:none; }
#sc-cornice-render { z-index:4; }
.sc-oro { color:var(--gold-bright); }
.sc-parole {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-.03em; font-size:clamp(40px, 7vw, 104px); line-height:1;
}
.sc-parole span { display:block; opacity:0; will-change:transform, opacity; }
.sc-parole .p1 { color:#f5f5f7; }
.sc-parole .p2 { color:var(--gold-bright); }
.sc-filo { display:block; height:2px; width:0; background:var(--gold-gradient); border-radius:2px; margin:0 .22em; will-change:width; flex:none; }
.sc-dida { position:absolute; left:0; right:0; top:50%; height:0; z-index:5; pointer-events:none; }
.sc-dida p {
  position:absolute; left:0; right:0; top:0; margin:0; padding:0 24px; opacity:0; text-align:center; will-change:opacity, transform;
  font-family:'Inter',sans-serif; font-size:clamp(28px, 4vw, 56px); font-weight:700; letter-spacing:-.03em; line-height:1.08; color:#f5f5f7;
  text-shadow:0 2px 24px rgba(0,0,0,.85);
}

/* <picture> delle versioni leggere da telefono (index.html): per il layout l'<img> resta figlio diretto, come prima */
picture.pic-leggera { display:contents; }