/**
 * Impronta Studio — Landing pubblica
 * Usa container/home-section (app.css, app-responsive.css) + classi .stl-*
 * definite qui. Font e colori coerenti con .story-* (about.css): serif
 * Cormorant Garamond per i titoli, mono per gli eyebrow, gold come accento.
 */

.stl{ overflow-x:hidden; }

/* ══ Eyebrow / H2 riusati in tutta la pagina ═════════════════════════════ */
.stl-eyebrow{
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); opacity:.75; margin-bottom:14px;
}
.stl-h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(24px,3.4vw,36px); font-weight:400; line-height:1.2;
  color:var(--ink); margin:0 0 18px;
}
.stl-h2 em{ font-style:italic; color:var(--gold); }
.stl-body{ font-size:15px; line-height:var(--lh-loose); color:var(--ink60); max-width:560px; }
.stl-body p{ margin:0 0 14px; }
.stl-body p:last-child{ margin-bottom:0; }
.stl-body strong{ color:var(--ink); font-weight:600; }

/* ══ HERO ══════════════════════════════════════════════════════════════ */
.stl-hero{
  position:relative; min-height:560px;
  display:flex; align-items:center;
  overflow:hidden;
}
.stl-hero__bg{ position:absolute; inset:0; z-index:0; }
.stl-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.stl-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.72) 45%, rgba(10,8,6,.35) 100%);
}
.stl-hero__inner{ position:relative; z-index:1; padding:100px 28px; }
.stl-hero__title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(36px,6vw,58px); font-weight:400; line-height:1.1;
  color:#F4F0E6; margin:0 0 20px; letter-spacing:.01em;
}
.stl-hero__title em{ font-style:italic; color:var(--gold); }
.stl-hero__lead{
  font-size:16.5px; line-height:1.75; color:rgba(244,240,230,.72);
  max-width:460px; margin:0 0 30px; font-weight:300;
}
.stl-hero__cta{ font-size:15px; padding:13px 30px; }

/* ══ SEZIONI GRID (8 card) ════════════════════════════════════════════════ */
.stl-sections-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-top:40px;
}
.stl-sec-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--rL);
  padding:26px 20px; text-align:center;
  transition:border-color .2s, transform .2s;
}
.stl-sec-card:hover{ border-color:rgba(var(--gold-rgb),.35); transform:translateY(-2px); }
.stl-sec-card__icon{
  width:46px; height:46px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); background:rgba(var(--gold-rgb),.10); border-radius:12px;
}
.stl-sec-card__title{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.stl-sec-card__desc{ font-size:12.5px; line-height:1.55; color:var(--ink50); }

/* ══ SPLIT (testo + immagine, alternabile) ═══════════════════════════════ */
.stl-split{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.stl-split--reverse .stl-split__text{ order:2; }
.stl-split--reverse .stl-split__media{ order:1; }
.stl-split__media{ position:relative; }

/* ══ Screenshot cliccabile → lightbox ═════════════════════════════════════ */
.stl-shot{
  display:block; width:100%; padding:0; margin:0; border:none; cursor:zoom-in;
  background:var(--card); border:1px solid var(--border); border-radius:var(--rL);
  overflow:hidden; position:relative;
}
.stl-shot img{ display:block; width:100%; height:auto; }
.stl-shot__hint{
  position:absolute; bottom:10px; right:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.85); background:rgba(0,0,0,.55);
  padding:4px 9px; border-radius:100px;
  opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.stl-shot:hover .stl-shot__hint,
.stl-shot:focus-visible .stl-shot__hint{ opacity:1; }

/* ══ PDF BOX — feature in evidenza ════════════════════════════════════════ */
.stl-pdf-section{ padding-top:0; }
.stl-pdf-box{
  display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center;
  background:linear-gradient(135deg, rgba(212,176,104,.05) 0%, rgba(212,176,104,.02) 100%);
  border:1px solid rgba(var(--gold-rgb),.20);
  border-radius:20px; padding:44px;
}
.stl-badge{
  display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 10px;
  border-radius:100px; margin-bottom:14px;
}
.stl-badge--pro{ color:var(--gold); background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.30); }
.stl-shot--pdf{ box-shadow:0 12px 40px rgba(0,0,0,.35); }

/* ══ STRUMENTI (riga di 5) ════════════════════════════════════════════════ */
.stl-tools-row{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-top:40px;
}
.stl-tool-card{ text-align:center; padding:8px; }
.stl-tool-card__icon{
  width:40px; height:40px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); background:rgba(var(--gold-rgb),.09); border-radius:10px;
}
.stl-tool-card__title{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.stl-tool-card__desc{ font-size:12px; line-height:1.5; color:var(--ink50); }

/* ══ FREE vs PRO ══════════════════════════════════════════════════════════ */
.stl-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.stl-compare__col{
  background:var(--card); border:1px solid var(--border); border-radius:var(--rL);
  padding:28px 26px;
}
.stl-compare__col--pro{ border-color:rgba(var(--gold-rgb),.30); background:rgba(var(--gold-rgb),.03); }
.stl-compare__title{ font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink); margin-bottom:16px; }
.stl-compare__title--pro{ color:var(--gold); }
.stl-compare__list{ list-style:none; padding:0; margin:0; }
.stl-compare__list li{
  font-size:13.5px; color:var(--ink60); line-height:1.5; padding:7px 0 7px 22px;
  position:relative; border-bottom:1px solid var(--ln);
}
.stl-compare__list li:last-child{ border-bottom:none; }
.stl-compare__list li::before{
  content:'✓'; position:absolute; left:0; top:7px; color:var(--gold); font-size:12px;
}

/* ══ CTA FINALE ═══════════════════════════════════════════════════════════ */
.stl-final{ text-align:center; }
.stl-final__lead{ font-size:15px; color:var(--ink50); margin:0 0 26px; }
.stl-final__cta{ font-size:15px; padding:14px 34px; }

/* ══ LIGHTBOX ═════════════════════════════════════════════════════════════ */
.stl-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(6,4,3,.94);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.stl-lightbox.open{ display:flex; }
.stl-lightbox__img{
  max-width:94vw; max-height:90vh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  touch-action:pinch-zoom;
}
.stl-lightbox__close{
  position:absolute; top:18px; right:22px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.stl-lightbox__close:hover{ background:rgba(255,255,255,.16); }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .stl-sections-grid{ grid-template-columns:repeat(2, 1fr); }
  .stl-tools-row{ grid-template-columns:repeat(2, 1fr); }
  .stl-split{ grid-template-columns:1fr; gap:28px; }
  .stl-split--reverse .stl-split__text,
  .stl-split--reverse .stl-split__media{ order:initial; }
  .stl-pdf-box{ grid-template-columns:1fr; padding:28px; }
  .stl-compare{ grid-template-columns:1fr; }
  .stl-hero{ min-height:480px; }
  .stl-hero__inner{ padding:70px 20px; }
}
@media (max-width:560px){
  .stl-sections-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .stl-sec-card{ padding:18px 12px; }
  .stl-tools-row{ grid-template-columns:1fr; gap:12px; }
  .stl-hero__title{ font-size:32px; }
  .stl-hero__lead{ font-size:15px; }
  /* Su mobile lo hint "tocca per ingrandire" resta sempre visibile: non c'e'
     hover, quindi l'utente deve capire subito che l'immagine e' zoomabile. */
  .stl-shot__hint{ opacity:1; }
}