/* ==========================================================================
   SMARCA — pagina prodotto
   Riusa i componenti condivisi di style.css (bottoni, eyebrow, split, cta-band)
   ma li rimappa sulla palette e sulla tipografia del brand SMARCA tramite le
   stesse custom property, così restano coerenti senza duplicare le regole.
   ========================================================================== */

.smarca-page {
  --color-primary: #02979d;       /* teal SMARCA (dal logo) */
  --color-primary-dark: #026e73;
  --color-accent: #e74923;        /* arancio SMARCA (dal logo) */
  --color-accent-dark: #c23a1a;
  --font-heading: 'Open Sans', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;
}

.smarca-page h1, .smarca-page h2, .smarca-page h3, .smarca-page h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.smarca-page .btn { border-radius: 999px; }

.smarca-page .eyebrow { color: var(--color-primary); }
.smarca-page .eyebrow::before { background: var(--color-primary); }

/* ---------------- Hero ---------------- */
.smarca-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #0a2f31 0%, #0f4a4d 55%, #02979d 130%);
  color: #fff;
  padding: 195px 0 155px;
}
.smarca-hero .container { position: relative; z-index: 2; }
.smarca-hero-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
}
.smarca-hero-mark svg { position: absolute; }
.smarca-hero-mark .mark-1 { width: 480px; top: -120px; left: -100px; transform: rotate(-8deg); animation: smarcaDrift1 110s linear infinite; }
.smarca-hero-mark .mark-2 { width: 620px; bottom: -220px; right: -160px; transform: rotate(6deg); opacity: 0.7; animation: smarcaDrift2 140s linear infinite; }
@keyframes smarcaDrift1 { from { transform: rotate(-8deg); } to { transform: rotate(352deg); } }
@keyframes smarcaDrift2 { from { transform: rotate(6deg); } to { transform: rotate(366deg); } }

.smarca-hero-logo,
.smarca-hero h1,
.smarca-hero p.lead,
.smarca-hero-tag,
.smarca-hero .hero-actions {
  opacity: 0;
  animation: smarcaFadeUp 0.7s ease forwards;
}
.smarca-hero-logo { height: 104px; width: auto; margin-bottom: 28px; animation-delay: 0.05s; }
.smarca-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  max-width: 780px;
  margin-bottom: 20px;
  animation-delay: 0.15s;
}
.smarca-hero-tag {
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  animation-delay: 0.22s;
}
.smarca-hero-tag em { font-style: normal; color: #3de3ff; }
.smarca-hero p.lead {
  max-width: 480px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 34px;
  animation-delay: 0.28s;
}
.smarca-hero .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation-delay: 0.4s; }
@keyframes smarcaFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.smarca-hero .btn--outline { border-color: rgba(255,255,255,0.55); color: #fff; }
.smarca-hero .btn--outline:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }

/* ---------------- Positioning statement ---------------- */
.smarca-statement {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.smarca-statement .quote {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.4;
}
.smarca-statement .quote span { color: var(--color-primary); }

/* ---------------- 5 pillars ---------------- */
.smarca-pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.smarca-pillar {
  background: var(--color-light);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
}
.smarca-pillar .num {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.smarca-pillar h3 { font-size: 1.05rem; margin-bottom: 8px; }
.smarca-pillar p { font-size: 1.05rem; color: #555; margin: 0; }
.smarca-pillar { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal].is-visible .smarca-pillar { opacity: 1; transform: translateY(0); }
.smarca-pillar:nth-child(1) { transition-delay: 0.05s; }
.smarca-pillar:nth-child(2) { transition-delay: 0.12s; }
.smarca-pillar:nth-child(3) { transition-delay: 0.19s; }
.smarca-pillar:nth-child(4) { transition-delay: 0.26s; }
.smarca-pillar:nth-child(5) { transition-delay: 0.33s; }

/* ---------------- Module cards ---------------- */
.smarca-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.smarca-module {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  opacity: 0;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity 0.5s ease;
}
.smarca-module:hover {
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px -18px rgba(2, 151, 157, 0.35);
  transform: translateY(-3px);
}
.smarca-module .ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(2, 151, 157, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.smarca-module .ic svg { width: 24px; height: 24px; }
.smarca-module h3 { font-size: 1.05rem; margin-bottom: 6px; }
.smarca-module p { font-size: 1.05rem; color: #555; margin: 0; }
[data-reveal].is-visible .smarca-module { opacity: 1; }
.smarca-module:nth-child(1) { transition-delay: 0s, 0s, 0s, 0.04s; }
.smarca-module:nth-child(2) { transition-delay: 0s, 0s, 0s, 0.08s; }
.smarca-module:nth-child(3) { transition-delay: 0s, 0s, 0s, 0.12s; }
.smarca-module:nth-child(4) { transition-delay: 0s, 0s, 0s, 0.16s; }
.smarca-module:nth-child(5) { transition-delay: 0s, 0s, 0s, 0.2s; }
.smarca-module:nth-child(6) { transition-delay: 0s, 0s, 0s, 0.24s; }
.smarca-module:nth-child(7) { transition-delay: 0s, 0s, 0s, 0.28s; }
.smarca-module:nth-child(8) { transition-delay: 0s, 0s, 0s, 0.32s; }
.smarca-module:nth-child(9) { transition-delay: 0s, 0s, 0s, 0.36s; }
.smarca-module:nth-child(10) { transition-delay: 0s, 0s, 0s, 0.4s; }

/* ---------------- Stats band ---------------- */
.smarca-stats-band {
  background: var(--color-primary-dark);
  color: #fff;
  padding: 60px 0;
}
.smarca-stats-band .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.smarca-stats-band .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 6px;
}
.smarca-stats-band .stat-label {
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.8);
}
.smarca-stats-band .stats-grid > div { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.smarca-stats-band.is-visible .stats-grid > div { opacity: 1; transform: translateY(0); }
.smarca-stats-band .stats-grid > div:nth-child(1) { transition-delay: 0.05s; }
.smarca-stats-band .stats-grid > div:nth-child(2) { transition-delay: 0.12s; }
.smarca-stats-band .stats-grid > div:nth-child(3) { transition-delay: 0.19s; }
.smarca-stats-band .stats-grid > div:nth-child(4) { transition-delay: 0.26s; }

/* ---------------- Video split (reuse .split, keep local override for radius) ---------------- */
.smarca-page .split-media--video { border-radius: 20px; overflow: hidden; }
/* The shared .split-media--video rule uses object-fit: cover, which crops
   unpredictably here because the panel stretches to match the text column's
   height (grid align-items: stretch) — fine for the looser LSG scenes, but it
   was cropping into the centered SMARCA logo lockup. contain guarantees the
   full mark is always visible, with the dark brand background filling any
   letterboxed edge instead of a hard crop. */
.smarca-page .split-media--video video { object-fit: contain; background: #0a1f20; }

/* ---------------- CTA band override ---------------- */
.smarca-page .cta-band { background: var(--color-primary-dark); }

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
  .smarca-pillars { grid-template-columns: repeat(2, 1fr); }
  .smarca-modules { grid-template-columns: 1fr 1fr; }
  .smarca-stats-band .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 620px) {
  .smarca-pillars { grid-template-columns: 1fr; }
  .smarca-modules { grid-template-columns: 1fr; }
  .smarca-hero { padding: 130px 0 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .smarca-hero-mark .mark-1, .smarca-hero-mark .mark-2 { animation: none; }
  .smarca-hero-logo, .smarca-hero h1, .smarca-hero p.lead, .smarca-hero .hero-actions {
    animation: none; opacity: 1;
  }
  .smarca-pillar, .smarca-module, .smarca-stats-band .stats-grid > div {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* Gru con il logo LSG e il QR code di SMARCA: a destra nell'hero, appoggiata al bordo inferiore */
.smarca-hero-crane {
  position: absolute;
  right: 3%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 56%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: smarcaCrane 1s 0.35s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes smarcaCrane { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@media (max-width: 992px) {
  .smarca-hero-crane { height: 62%; right: -4%; opacity: 0.35 !important; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .smarca-hero-crane { animation: none; opacity: 1; }
}