/* Hero + product cards per la home repositioned FlowForge-first.
     Stili minimi inline per non aggiungere file CSS extra. */
  /* Gutter orizzontale UNIFORME per TUTTI i contenitori della pagina.
     Single source of truth: cambia qui, propaga ovunque. */
  :root {
    --page-gutter: clamp(1rem, 3vw, 2rem);  /* 16px mobile → 32px desktop large */
    --page-max: 76rem;                       /* width comune di tutti i contenitori */
  }
  /* HERO full-width per il background gradient + contenuto interno centrato. */
  .pivot-hero {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, transparent 100%);
  }
  .pivot-hero__inner {
    max-width: var(--page-max); margin: 0 auto;
    padding-inline: var(--page-gutter);
  }
  .pivot-hero__eyebrow {
    font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #818cf8; font-weight: 600; margin-bottom: 0.75rem;
  }
  .pivot-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.15;
    margin: 0 0 1rem; letter-spacing: -0.02em;
  }
  .pivot-hero h1 span { color: #818cf8; }
  .pivot-hero p.lede {
    max-width: 48rem; margin: 0 auto 1.5rem;
    color: rgba(255,255,255,0.7); line-height: 1.55; font-size: 1.05rem;
  }
  .pivot-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
  .pivot-hero__chips span {
    padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.85rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
  }
  .pivot-products {
    max-width: var(--page-max); margin: 0 auto;
    padding: 2rem var(--page-gutter);
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }
  .pivot-card {
    padding: 1.5rem; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color .2s ease, transform .2s ease;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    /* FIX mobile 2026-05-31 (user-segnalato): grid item ha default min-width:auto
       (= min-content). Parole lunghe ("flowforge.automazionezeli.com", "Falkenstein")
       forzavano la card piu\` larga della grid track → card "vinceva" visivamente
       vs hero/chips su mobile. Soluzione: min-width:0 + overflow-wrap. */
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
    width: 100%;
  }
  .pivot-card:hover { border-color: rgba(129,140,248,0.4); transform: translateY(-2px); }
  .pivot-card__tag {
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #818cf8; font-weight: 600; margin-bottom: 0.5rem;
  }
  .pivot-card h2 {
    margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3;
  }
  .pivot-card p {
    margin: 0 0 1rem; color: rgba(255,255,255,0.7); line-height: 1.55; font-size: 0.92rem; flex: 1;
  }
  .pivot-card__cta {
    color: #818cf8; font-size: 0.9rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.3rem;
  }
  .pivot-card__cta::after { content: "→"; transition: transform .2s ease; }
  .pivot-card:hover .pivot-card__cta::after { transform: translateX(3px); }
  .pivot-divider {
    max-width: var(--page-max); margin: 1rem auto;
    padding: 0 var(--page-gutter);
    color: rgba(255,255,255,0.5); font-size: 0.85rem; text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem;
  }
  .pivot-divider strong { color: rgba(255,255,255,0.85); }
  .legacy-cta {
    max-width: var(--page-max); margin: 1.5rem auto 3rem;
    padding: 1.5rem var(--page-gutter);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    box-sizing: border-box;
  }
  .legacy-cta__text { flex: 1; min-width: 16rem; }
  .legacy-cta__text strong { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }
  .legacy-cta__text span { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.5; }
  .legacy-cta__btn {
    padding: 0.7rem 1.3rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
    background: #818cf8; color: #0b0b0d; text-decoration: none;
    transition: background .2s ease;
  }
  .legacy-cta__btn:hover { background: #a5b4fc; }

  /* Hero SPLIT layout — fix Lighthouse NO_LCP 2026-06-03.
     Vercel/Stripe pattern: testo a sinistra, screenshot prodotto a destra.
     Su mobile: stack verticale (testo sopra, immagine sotto). */
  .pivot-hero--split { text-align: left; }
  .pivot-hero__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .pivot-hero__text { min-width: 0; }
  .pivot-hero--split .pivot-hero__chips {
    justify-content: flex-start;
    margin-top: 1.25rem;
  }
  .pivot-hero__media {
    position: relative;
    width: 100%;
  }
  .pivot-hero__screenshot {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 24px 60px -20px rgba(99,102,241,0.35), 0 8px 24px rgba(0,0,0,0.25);
  }
  /* Mobile: stack + immagine sotto h1 (sopra-la-piega su small screen).
     Loading=eager + fetchpriority=high garantiscono che Lighthouse la veda. */
  @media (max-width: 880px) {
    .pivot-hero--split { text-align: center; }
    .pivot-hero__inner--split {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .pivot-hero--split .pivot-hero__chips { justify-content: center; }
    .pivot-hero__screenshot {
      margin: 0 auto;
      max-width: 560px;
    }
  }