/* Media Profit — replica fedele del design attuale (Elementor) migliorata */
:root {
  --red: #ff0033;          /* rosso CTA e accenti (dal sito live) */
  --red-dark: #850000;     /* bordo input */
  --input-bg: #31312f;     /* sfondo input */
  --text: #333333;         /* testo body */
  --black: #0a0a0a;        /* sezioni scure */
  --card-gray: #f2f2f2;    /* card form */
  --white: #ffffff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background: var(--white);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 980px; }

/* Tipografia titoli — Fjalla One come il sito attuale */
h1, h2, .display {
  font-family: "Fjalla One", "Arial Narrow", sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-align: center;
}
h1 { font-size: clamp(1.9rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h1 .red, h2 .red { color: var(--red); }
.yt-badge { display: inline-block; height: 0.82em; vertical-align: baseline; transform: translateY(0.06em); }

/* Hero */
.hero { padding: 44px 0 10px; }
.subline {
  margin: 22px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
}
.audience {
  margin: 18px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}
.audience u { text-underline-offset: 2px; }

/* Form card (stile attuale: card grigia, input scuri, bordo rosso scuro) */
.optin-card {
  background: var(--card-gray);
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  padding: 26px 24px;
  max-width: 720px;
  margin: 34px auto 0;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; color: #000; font-size: 0.95rem; margin-bottom: 7px; }
.field label .req { color: var(--red); }
.field input {
  width: 100%;
  padding: 13px 14px;
  background: var(--input-bg);
  color: #fff;
  border: 2px solid var(--red-dark);
  border-radius: 8px;
  font-size: 1rem;
}
.field input::placeholder { color: #b9b9b9; }
.field input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 0.8rem; color: #555; margin: 6px 0 14px; }
.consent input { margin-top: 3px; accent-color: var(--red); }
.consent a { color: #555; }

/* Bottone rosso (radius 20, come il live) */
.btn {
  display: block;
  width: 100%;
  background: var(--red);
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 16px 28px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.btn.inline { display: inline-block; width: auto; min-width: 320px; max-width: 100%; }
.caption { text-align: center; font-style: italic; font-size: 0.95rem; color: #444; margin: 20px auto 0; max-width: 640px; }

/* Media card con bordo rosso (foto/video come il live) */
.media-card {
  border: 4px solid var(--red);
  border-radius: 18px;
  overflow: hidden;
  margin: 30px auto 0;
  max-width: 760px;
  background: #000;
  line-height: 0;
}
.media-card img { width: 100%; height: auto; display: block; }
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sezione nera con numeri rossi */
.dark { background: var(--black); color: #fff; padding: 56px 0 60px; margin-top: 48px; }
.dark h2 { color: #fff; margin-bottom: 34px; }
.dark h2 .red { color: var(--red); }
.num-list { list-style: none; max-width: 640px; margin: 0 auto; }
.num-list li { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; font-size: 1.05rem; }
.num-list .n {
  flex: 0 0 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  border-radius: 50%;
  font-family: "Fjalla One", sans-serif;
  font-size: 1.25rem;
}
.dark .closing { max-width: 660px; margin: 10px auto 26px; text-align: left; font-size: 1.02rem; }
.dark .btn.inline { margin: 8px auto 0; }
.center { text-align: center; }

/* Sezioni bianche generiche */
.section { padding: 52px 0 8px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.section-head p { margin-top: 10px; color: #555; }

/* Card testimonianze */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; max-width: 640px; } }
.tcard { background: var(--card-gray); border: 1px solid #e2e2e2; border-radius: 14px; padding: 22px; }
.tcard .who { font-weight: 800; color: #000; }
.tcard .role { font-size: 0.82rem; color: #777; margin-bottom: 10px; }
.tcard p { font-size: 0.93rem; color: #444; }
.tcard .metric { color: var(--red); font-weight: 700; }

/* Per chi è / non è */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.pcard { background: var(--card-gray); border-radius: 14px; padding: 22px; }
.pcard strong { color: #000; }
.pcard ul { list-style: none; margin-top: 12px; }
.pcard li { padding-left: 28px; position: relative; margin-bottom: 10px; font-size: 0.95rem; color: #444; }
.pcard.yes li::before { content: "✓"; position: absolute; left: 0; color: #1da84f; font-weight: 800; }
.pcard.no li::before { content: "✕"; position: absolute; left: 0; color: var(--red); font-weight: 800; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.faq details { background: var(--card-gray); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.faq summary { font-weight: 700; color: #000; cursor: pointer; }
.faq details p { margin-top: 10px; font-size: 0.95rem; color: #444; }

/* Widget prenotazione (Squadd) */
.booking-embed { max-width: 900px; margin: 26px auto 0; background: #fff; border-radius: 14px; overflow: hidden; }
.booking-embed iframe { width: 100%; border: 0; min-height: 760px; }

/* Steps TYP */
.steps { max-width: 660px; margin: 0 auto; }

/* Footer come il live: bianco, centrato, piccolo */
.site-footer { padding: 40px 20px 34px; text-align: center; font-size: 0.9rem; color: #333; }
.site-footer a { color: #333; }