/* ═══════════════════════════════════════════════════════════════════
   LANDING (index.html) — layout a sezioni con screenshot reali dell'app.
   Usa i token di base.css; prefisso lp- per non toccare le altre pagine.
═══════════════════════════════════════════════════════════════════ */

.lp-section { padding:6.5rem 0; position:relative; }
.lp-section.alt { background:linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(17,24,39,.75) 18%, rgba(17,24,39,.75) 82%, rgba(17,24,39,0) 100%); }
.lp-eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem; }
.lp-h2 { font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; text-wrap:balance; }
.lp-lead { color:var(--text-muted); font-size:1.0625rem; line-height:1.7; max-width:620px; }
.lp-head { text-align:center; margin:0 auto 3.5rem; max-width:760px; }
.lp-head .lp-lead { margin:1rem auto 0; }

/* ─── Hero ─────────────────────────────────────────────────────────── */
.lp-hero { padding:8.5rem 0 4.5rem; position:relative; overflow:hidden; }
.lp-hero::before {
  content:''; position:absolute; inset:-20% -10% auto; height:780px; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 30% 30%, rgba(139,92,246,.22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 78% 20%, rgba(59,130,246,.16), transparent 70%);
}
.lp-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:3.5rem; align-items:center; }
.lp-hero h1 { font-size:clamp(2.4rem, 5vw, 3.9rem); font-weight:800; line-height:1.05; letter-spacing:-.035em; margin:1.25rem 0 1.25rem; text-wrap:balance; }
.lp-hero .lp-lead { font-size:1.15rem; }
.lp-hero .lp-lead strong { color:var(--text); }
.lp-cta { display:flex; gap:.875rem; flex-wrap:wrap; margin-top:2rem; }
.lp-trust { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:1.5rem; color:var(--text-dim); font-size:.875rem; }
.lp-trust span { display:inline-flex; align-items:center; gap:.45rem; }
.lp-trust svg { color:var(--success); flex:none; }

/* Cornice "browser" per gli screenshot */
.lp-shot { position:relative; border-radius:14px; background:#0b1020; border:1px solid rgba(139,92,246,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px rgba(139,92,246,.12); overflow:hidden; }
.lp-shot-bar { display:flex; align-items:center; gap:.45rem; padding:.7rem .9rem; background:#111827; border-bottom:1px solid rgba(255,255,255,.06); }
.lp-shot-bar i { width:10px; height:10px; border-radius:50%; background:#374151; display:block; }
.lp-shot-bar i:nth-child(1) { background:#ef4444; } .lp-shot-bar i:nth-child(2) { background:#eab308; } .lp-shot-bar i:nth-child(3) { background:#22c55e; }
.lp-shot-bar span { margin-left:.6rem; flex:1; max-width:340px; padding:.25rem .75rem; border-radius:6px; background:#0b1020; color:var(--text-dim); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-shot img { width:100%; height:auto; display:block; }
.lp-hero .lp-shot { transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin:left center; }
.lp-shot-caption { margin-top:.75rem; font-size:.8rem; color:var(--text-dim); text-align:center; }

/* ─── Striscia portali ─────────────────────────────────────────────── */
.lp-portals { border-top:1px solid var(--border-dim); border-bottom:1px solid var(--border-dim); background:rgba(17,24,39,.6); padding:1.75rem 0; }
.lp-portals-inner { display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center; justify-content:center; }
.lp-portals-label { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.lp-country { display:inline-flex; align-items:baseline; gap:.5rem; color:var(--text-muted); font-size:.9rem; }
.lp-country b { color:var(--text); font-weight:600; }

/* ─── Problemi ─────────────────────────────────────────────────────── */
.lp-pains { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
.lp-pain { padding:1.75rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-dim); }
.lp-pain .lp-pain-q { font-size:1.0625rem; font-weight:700; margin-bottom:.6rem; line-height:1.35; }
.lp-pain p { color:var(--text-muted); font-size:.9375rem; line-height:1.65; }
.lp-pain .lp-pain-a { margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--border-dim); color:var(--text); font-size:.9rem; }
.lp-pain .lp-pain-a strong { color:var(--accent); font-weight:700; }

/* ─── Funzioni a zig-zag ───────────────────────────────────────────── */
.lp-feature { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:4rem; align-items:center; }
.lp-feature + .lp-feature { margin-top:6rem; }
.lp-feature.flip { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.lp-feature.flip .lp-feature-text { order:2; }
.lp-feature h3 { font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:800; line-height:1.15; letter-spacing:-.015em; margin-bottom:1rem; text-wrap:balance; }
.lp-points { list-style:none; margin-top:1.5rem; display:grid; gap:.85rem; }
.lp-points li { display:grid; grid-template-columns:22px 1fr; gap:.75rem; color:var(--text-muted); font-size:.975rem; line-height:1.55; }
.lp-points li strong { color:var(--text); font-weight:600; }
.lp-points svg { margin-top:.2rem; color:var(--accent); }

/* ─── Griglia funzioni secondarie ──────────────────────────────────── */
.lp-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
.lp-tile { padding:1.6rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-dim); transition:border-color var(--transition), transform var(--transition); }
.lp-tile:hover { border-color:rgba(139,92,246,.45); transform:translateY(-3px); }
.lp-tile-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(139,92,246,.14); color:var(--accent); margin-bottom:1rem; }
.lp-tile h4 { font-size:1.0625rem; font-weight:700; margin-bottom:.45rem; }
.lp-tile p { color:var(--text-muted); font-size:.925rem; line-height:1.6; }

/* ─── Passi ────────────────────────────────────────────────────────── */
.lp-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; counter-reset:step; }
.lp-step { position:relative; padding:2rem 1.75rem 1.75rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-dim); }
.lp-step::before { counter-increment:step; content:counter(step); position:absolute; top:-18px; left:1.75rem; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 6px 18px var(--accent-glow); }
.lp-step h3 { font-size:1.125rem; font-weight:700; margin:.5rem 0 .5rem; }
.lp-step p { color:var(--text-muted); font-size:.95rem; line-height:1.65; }

/* ─── Programma pilota ─────────────────────────────────────────────── */
.lp-pilot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; align-items:stretch; max-width:980px; margin:0 auto; }
.lp-pilot-card { padding:2.25rem; border-radius:20px; border:1px solid var(--accent);
  background:linear-gradient(160deg, rgba(139,92,246,.14) 0%, var(--surface) 65%); box-shadow:0 0 50px rgba(139,92,246,.15); display:flex; flex-direction:column; }
.lp-pilot-card .lp-price { font-size:3rem; font-weight:800; line-height:1; margin:.75rem 0 .25rem; }
.lp-pilot-card .lp-price small { font-size:1rem; font-weight:500; color:var(--text-muted); margin-left:.4rem; }
.lp-pilot-card .lp-points { margin:1.5rem 0 2rem; flex:1; }
.lp-pilot-card .lp-points svg { color:var(--success); }
.lp-pilot-ask { padding:2.25rem; border-radius:20px; background:var(--surface); border:1px solid var(--border-dim); }
.lp-pilot-ask h3, .lp-pilot-card h3 { font-size:1.25rem; font-weight:800; }

/* ─── Per chi è ────────────────────────────────────────────────────── */
.lp-who { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
.lp-who > div { padding:1.75rem; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; }
.lp-who h3 { font-size:1.0625rem; font-weight:700; margin-bottom:.5rem; }
.lp-who p { color:var(--text-muted); font-size:.95rem; line-height:1.65; }

/* ─── Risorse (blog/guide) ─────────────────────────────────────────── */
.lp-res { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
.lp-res a { display:flex; flex-direction:column; gap:.5rem; padding:1.5rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-dim); transition:border-color var(--transition), transform var(--transition); }
.lp-res a:hover { border-color:rgba(139,92,246,.45); transform:translateY(-3px); }
.lp-res .lp-res-tag { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.lp-res strong { font-size:1.0625rem; line-height:1.35; }
.lp-res span:last-child { color:var(--text-muted); font-size:.9rem; line-height:1.55; }
.lp-res-more { text-align:center; margin-top:2rem; }
.lp-res-more a { color:var(--accent); font-weight:600; }

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .lp-hero-grid, .lp-feature, .lp-feature.flip { grid-template-columns:1fr; gap:2.5rem; }
  .lp-feature.flip .lp-feature-text { order:0; }
  .lp-hero .lp-shot { transform:none; }
  .lp-pains, .lp-grid, .lp-steps, .lp-who, .lp-res { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lp-pilot { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .lp-section { padding:4.5rem 0; }
  .lp-hero { padding:7rem 0 3rem; }
  .lp-pains, .lp-grid, .lp-steps, .lp-who, .lp-res { grid-template-columns:1fr; }
  .lp-steps { gap:2rem; }
  .lp-cta .btn { width:100%; justify-content:center; }
  .lp-feature + .lp-feature { margin-top:4rem; }
  .lp-portals-inner { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .lp-tile, .lp-res a { transition:none; }
  .lp-tile:hover, .lp-res a:hover { transform:none; }
}