/* ============================================================
   Intelligenza Sessuale — sito ufficiale (v2 — brand epico)
   Coerente con logo, copertina, setup podcast.
   Palette: nero profondo + rosso fuoco lava + oro acceso + avorio.
   Font: Cinzel (titoli marziali) + Cormorant Garamond (body)
         + Great Vibes (calligrafia firma).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Great+Vibes&display=swap');

:root {
  --color-bg:        #0a0606;
  --color-bg-soft:   #150a0a;
  --color-bg-deep:   #050202;

  --color-fire:      #d83a1f;
  --color-fire-deep: #b22214;
  --color-fire-glow: #ff5722;

  --color-gold:      #e8b94e;
  --color-gold-soft: #c9a04a;

  --color-ivory:     #f5e8cf;
  --color-ivory-mute:#bca888;

  --font-display: 'Cinzel', 'Trajan Pro', serif;
  --font-body:    'Cormorant Garamond', 'Palatino', 'Georgia', serif;
  --font-script:  'Great Vibes', cursive;

  --max-width: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-fire);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover { color: var(--color-gold); }

/* ============ Nav top ============ */

header.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 6, 6, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 58, 31, 0.25);
  padding: 1.2rem 1rem 0.8rem;
}

header.nav .inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Nav con icone alchemiche */
header.nav nav ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

header.nav nav li {
  text-align: center;
}

header.nav nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ivory-mute);
  transition: all 0.3s ease;
}

header.nav nav a .nav-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  filter: brightness(0.85);
  transition: filter 0.3s ease, transform 0.3s ease;
}

header.nav nav a:hover .nav-icon,
header.nav nav a.active .nav-icon {
  filter:
    brightness(1.15)
    drop-shadow(0 0 12px rgba(216, 58, 31, 0.6));
  transform: scale(1.06);
}

header.nav nav a:hover,
header.nav nav a.active {
  color: var(--color-fire);
}

/* Lang switch IT/ES (in stile coerente, senza icona) */
header.nav .lang {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--color-ivory-mute);
  align-self: center;
  padding-top: 1rem;
}

header.nav .lang a { margin: 0 0.4rem; color: var(--color-ivory-mute); }
header.nav .lang a.active { color: var(--color-fire); }

/* ============ Hero cinematografico ============ */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background:
    radial-gradient(ellipse at center,
      rgba(216, 58, 31, 0.15) 0%,
      rgba(10, 6, 6, 0.5) 40%,
      rgba(5, 2, 2, 0.95) 100%),
    url('brand/banner-hero.jpg') center/cover no-repeat,
    var(--color-bg-deep);
  background-blend-mode: multiply;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 6, 6, 0.4) 0%,
    transparent 30%,
    transparent 70%,
    rgba(10, 6, 6, 0.95) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero .logo-mark {
  max-width: 320px;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 30px rgba(216, 58, 31, 0.5));
}

/* ============ Logo come hero protagonista ============ */

.hero.hero-logo {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at center,
      rgba(216, 58, 31, 0.18) 0%,
      rgba(10, 6, 6, 0.65) 45%,
      rgba(5, 2, 2, 0.98) 100%),
    url('brand/banner-hero.png') center/cover no-repeat,
    var(--color-bg-deep);
}

/* ============ Banner come hero (immagine intera) ============ */

.hero.hero-banner {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(216, 58, 31, 0.12) 0%, transparent 60%),
    var(--color-bg-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 1.5rem 4rem;
}

.hero-banner .banner-hero-img {
  display: block;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 3rem;
  filter:
    drop-shadow(0 30px 70px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 60px rgba(216, 58, 31, 0.25));
  animation: bannerEnter 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  border-radius: 6px;
}

@keyframes bannerEnter {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero .logo-hero {
  display: block;
  max-width: min(560px, 85vw);
  width: 100%;
  margin: 0 auto 2.5rem;
  filter:
    drop-shadow(0 0 40px rgba(216, 58, 31, 0.55))
    drop-shadow(0 0 80px rgba(216, 58, 31, 0.3));
  animation: logoEnter 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
             logoGlow 4s ease-in-out infinite alternate 1.6s;
  opacity: 0;
}

@keyframes logoEnter {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    filter: drop-shadow(0 0 0 rgba(216, 58, 31, 0));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter:
      drop-shadow(0 0 40px rgba(216, 58, 31, 0.55))
      drop-shadow(0 0 80px rgba(216, 58, 31, 0.3));
  }
}

@keyframes logoGlow {
  0% {
    filter:
      drop-shadow(0 0 30px rgba(216, 58, 31, 0.45))
      drop-shadow(0 0 60px rgba(216, 58, 31, 0.2));
  }
  100% {
    filter:
      drop-shadow(0 0 50px rgba(216, 58, 31, 0.7))
      drop-shadow(0 0 100px rgba(216, 58, 31, 0.4));
  }
}

/* Fallback se il logo non c'è ancora */
.logo-fallback h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  letter-spacing: 0.04em;
  color: var(--color-ivory);
  line-height: 1;
  text-shadow:
    0 0 20px rgba(216, 58, 31, 0.4),
    0 2px 0 rgba(0,0,0,0.8);
  margin-bottom: 0.4rem;
}

.logo-fallback h1 .sexual {
  display: block;
  background: linear-gradient(180deg, var(--color-fire-glow) 0%, var(--color-fire-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(3rem, 9vw, 6rem);
}

.logo-fallback .subtitle {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  color: var(--color-fire);
  margin: 1rem 0 0.4rem;
  text-transform: uppercase;
}

.logo-fallback .signature {
  font-family: var(--font-script);
  color: var(--color-gold);
  font-size: 2rem;
  margin-top: 0.4rem;
}

/* ============ Particelle di brace che salgono ============ */

.embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.embers span {
  position: absolute;
  bottom: -20px;
  width: 4px;
  height: 4px;
  background: var(--color-fire-glow);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-fire-glow), 0 0 16px var(--color-fire);
  animation: emberRise linear infinite;
  opacity: 0;
}

.embers span:nth-child(1)  { left:  8%; animation-duration: 13s; animation-delay:  0s; width: 3px; height: 3px; }
.embers span:nth-child(2)  { left: 16%; animation-duration: 16s; animation-delay:  2s; width: 4px; height: 4px; }
.embers span:nth-child(3)  { left: 24%; animation-duration: 11s; animation-delay:  4s; width: 2px; height: 2px; }
.embers span:nth-child(4)  { left: 32%; animation-duration: 18s; animation-delay:  1s; width: 5px; height: 5px; }
.embers span:nth-child(5)  { left: 40%; animation-duration: 14s; animation-delay:  3s; width: 3px; height: 3px; }
.embers span:nth-child(6)  { left: 48%; animation-duration: 15s; animation-delay:  6s; width: 4px; height: 4px; }
.embers span:nth-child(7)  { left: 56%; animation-duration: 12s; animation-delay:  0s; width: 3px; height: 3px; }
.embers span:nth-child(8)  { left: 64%; animation-duration: 17s; animation-delay:  5s; width: 4px; height: 4px; }
.embers span:nth-child(9)  { left: 72%; animation-duration: 13s; animation-delay:  2s; width: 2px; height: 2px; }
.embers span:nth-child(10) { left: 80%; animation-duration: 19s; animation-delay:  4s; width: 5px; height: 5px; }
.embers span:nth-child(11) { left: 88%; animation-duration: 14s; animation-delay:  1s; width: 3px; height: 3px; }
.embers span:nth-child(12) { left: 12%; animation-duration: 20s; animation-delay:  7s; width: 4px; height: 4px; }
.embers span:nth-child(13) { left: 36%; animation-duration: 16s; animation-delay:  8s; width: 3px; height: 3px; }
.embers span:nth-child(14) { left: 60%; animation-duration: 11s; animation-delay:  9s; width: 5px; height: 5px; }
.embers span:nth-child(15) { left: 84%; animation-duration: 18s; animation-delay:  3s; width: 4px; height: 4px; }

@keyframes emberRise {
  0%   { transform: translateY(0)     translateX(0);    opacity: 0; }
  10%  {                                                opacity: 0.9; }
  50%  { transform: translateY(-50vh) translateX(20px); opacity: 0.7; }
  90%  {                                                opacity: 0.2; }
  100% { transform: translateY(-110vh) translateX(-15px); opacity: 0; }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  letter-spacing: 0.04em;
  color: var(--color-ivory);
  line-height: 1;
  text-shadow:
    0 0 20px rgba(216, 58, 31, 0.4),
    0 2px 0 rgba(0,0,0,0.8);
}

.hero h1 .sexual {
  display: block;
  background: linear-gradient(180deg, var(--color-fire-glow) 0%, var(--color-fire-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(3rem, 9vw, 6rem);
  margin-top: 0.1em;
  text-shadow: 0 0 40px rgba(216, 58, 31, 0.6);
}

.hero .subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  letter-spacing: 0.3em;
  color: var(--color-fire);
  margin: 1.8rem 0 0.5rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero .subtitle::before,
.hero .subtitle::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 1px;
  background: var(--color-fire);
}

.hero .signature {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--color-gold);
  margin-top: 0.6rem;
  text-shadow: 0 0 20px rgba(232, 185, 78, 0.3);
  font-weight: 400;
}

.hero .tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: 0.05em;
  color: var(--color-ivory);
  max-width: 680px;
  margin: 2rem auto 2.5rem;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero .extract-link {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ivory-mute);
  margin-top: 1.5rem;
  display: inline-block;
}

.hero .extract-link a {
  color: var(--color-ivory-mute);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 58, 31, 0.4);
  padding-bottom: 0.15rem;
  transition: all 0.3s ease;
}

.hero .extract-link a:hover {
  color: var(--color-fire);
  border-bottom-color: var(--color-fire);
}

/* ============ CTA buttons ============ */

.cta-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--color-fire);
  color: var(--color-ivory);
  background: rgba(10, 6, 6, 0.5);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.cta:hover {
  background: var(--color-fire);
  color: var(--color-ivory);
  box-shadow: 0 0 30px rgba(216, 58, 31, 0.6);
  transform: translateY(-2px);
}

.cta.primary {
  background: linear-gradient(135deg, var(--color-fire) 0%, var(--color-fire-deep) 100%);
  color: var(--color-ivory);
  border-color: var(--color-fire);
  box-shadow: 0 0 25px rgba(216, 58, 31, 0.4);
}

.cta.primary:hover {
  background: linear-gradient(135deg, var(--color-fire-glow) 0%, var(--color-fire) 100%);
  box-shadow: 0 0 40px rgba(216, 58, 31, 0.7);
}

/* ============ Containers ============ */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============ Sections ============ */

section { padding: 5rem 1.5rem; position: relative; }

section.dark-deep {
  background: var(--color-bg-deep);
}

section.with-glow {
  background:
    radial-gradient(ellipse at top, rgba(216, 58, 31, 0.08) 0%, transparent 60%),
    var(--color-bg);
}

section.with-texture {
  background:
    linear-gradient(rgba(10, 6, 6, 0.88), rgba(10, 6, 6, 0.92)),
    url('brand/setup-podcast.jpg') center/cover no-repeat;
}

section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: 0.15em;
  color: var(--color-ivory);
  text-align: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

section h2 .accent {
  color: var(--color-fire);
}

section h2 + .h2-subtitle {
  font-family: var(--font-script);
  color: var(--color-gold);
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 2.5rem;
  line-height: 1;
}

section h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-fire), transparent);
  margin: 1.2rem auto 0;
}

section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--color-fire);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

section p {
  margin-bottom: 1.3rem;
  text-align: justify;
}

/* Drop cap, prima lettera dei paragrafi narrativi */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  color: var(--color-fire);
  margin: 0.05em 0.1em -0.1em 0;
  text-shadow: 0 0 15px rgba(216, 58, 31, 0.4);
}

/* ============ Frasi-lama (blade) ============ */

.blade {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  color: var(--color-ivory);
  margin: 4rem auto;
  max-width: 640px;
  padding: 0 1rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.blade::before,
.blade::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-fire), transparent);
  margin: 1.8rem auto;
}

/* ============ Divider * * * ============ */

.divider {
  text-align: center;
  margin: 4rem 0;
  color: var(--color-fire);
  letter-spacing: 0.8em;
  font-size: 1.3rem;
  text-shadow: 0 0 15px rgba(216, 58, 31, 0.4);
}

/* ============ Immagini editoriali nel blog ============ */

.blog-figure {
  margin: 3.5rem auto;
  max-width: 330px;
  text-align: center;
}

.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 55px rgba(216, 58, 31, 0.12);
}

.blog-figure figcaption {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-ivory-mute);
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 1.3rem auto 0;
  max-width: 320px;
}

.blog-figure figcaption::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-fire), transparent);
  margin: 0 auto 0.9rem;
}

.blog-figure .fig-title {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-fire);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

@media (max-width: 760px) {
  .blog-figure { margin: 2.5rem auto; }
  .blog-figure figcaption { font-size: 1.15rem; }
}

/* ============ Cards libro/autore ============ */

.card-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
  margin: 3rem auto;
  max-width: 1000px;
}

.card-row img {
  max-width: 100%;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.7),
    0 0 60px rgba(216, 58, 31, 0.2);
  border-radius: 4px;
}

.card-row .signature-author {
  font-family: var(--font-script);
  color: var(--color-gold);
  font-size: 2rem;
  margin-top: 0.6rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .card-row { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============ Quote / pull-quote ============ */

.pull-quote {
  border-left: 2px solid var(--color-fire);
  padding: 0.5rem 1.5rem;
  margin: 2.5rem 0;
  font-style: italic;
  color: var(--color-ivory-mute);
  font-size: 1.05em;
}

.pull-quote cite {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-fire-deep);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ============ Newsletter form ============ */

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  max-width: 520px;
  margin: 2rem auto;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input[type=email] {
  flex: 1;
  min-width: 260px;
  padding: 1rem 1.3rem;
  background: rgba(5, 2, 2, 0.7);
  border: 1px solid rgba(216, 58, 31, 0.3);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 1.05rem;
  outline: none;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.newsletter-form input[type=email]:focus {
  border-color: var(--color-fire);
  box-shadow: 0 0 20px rgba(216, 58, 31, 0.3);
}

.newsletter-form input[type=email]::placeholder {
  color: var(--color-ivory-mute);
  font-style: italic;
}

.newsletter-form button {
  padding: 1rem 1.8rem;
  background: linear-gradient(135deg, var(--color-fire) 0%, var(--color-fire-deep) 100%);
  color: var(--color-ivory);
  border: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(216, 58, 31, 0.3);
}

.newsletter-form button:hover {
  background: linear-gradient(135deg, var(--color-fire-glow) 0%, var(--color-fire) 100%);
  box-shadow: 0 0 30px rgba(216, 58, 31, 0.5);
}

/* ============ MailerLite form (tema fiamma) ============ */
.ml-form-embedContainer { max-width: 520px; margin: 2rem auto; }
.ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: none !important;
  width: 100%;
  max-width: 520px;
}
.ml-form-embedContainer .ml-form-embedBody { padding: 0 !important; }
.ml-form-embedContainer .ml-form-embedContent { display: none !important; }

.ml-form-embedContainer form.ml-block-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0;
}
.ml-form-embedContainer .ml-form-formContent { flex: 1 1 260px; margin: 0 !important; }
.ml-form-embedContainer .ml-form-fieldRow { margin: 0 !important; }
.ml-form-embedContainer .ml-form-embedSubmit { flex: 0 0 auto; width: auto !important; float: none !important; margin: 0 !important; }

.ml-form-embedContainer .ml-form-fieldRow input[type=email] {
  padding: 1rem 1.3rem !important;
  background: rgba(5, 2, 2, 0.7) !important;
  border: 1px solid rgba(216, 58, 31, 0.3) !important;
  color: var(--color-ivory) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  border-radius: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ml-form-embedContainer .ml-form-fieldRow input[type=email]::placeholder { color: var(--color-ivory-mute) !important; font-style: italic; }
.ml-form-embedContainer .ml-form-fieldRow input[type=email]:focus {
  border-color: var(--color-fire) !important;
  box-shadow: 0 0 20px rgba(216, 58, 31, 0.3) !important;
}

.ml-form-embedContainer .ml-form-embedSubmit button {
  padding: 1rem 1.8rem !important;
  background: linear-gradient(135deg, var(--color-fire) 0%, var(--color-fire-deep) 100%) !important;
  color: var(--color-ivory) !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  width: auto !important;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(216, 58, 31, 0.3) !important;
}
.ml-form-embedContainer .ml-form-embedSubmit button:hover {
  background: linear-gradient(135deg, var(--color-fire-glow) 0%, var(--color-fire) 100%) !important;
}

.ml-form-embedContainer .ml-form-successBody { padding: 1rem 0 0 0 !important; text-align: center; }
.ml-form-embedContainer .ml-form-successContent h4 { color: var(--color-fire) !important; font-family: var(--font-display) !important; margin: 0 0 0.5rem 0; }
.ml-form-embedContainer .ml-form-successContent p { color: var(--color-ivory) !important; font-family: var(--font-body) !important; }

.ml-form-embedSubmitLoad { display:inline-block; width:20px; height:20px; }
.ml-form-embedSubmitLoad:after { content:" "; display:block; width:11px; height:11px; margin:1px; border-radius:50%; border:4px solid #fff; border-color:#fff #fff #fff transparent; animation: ml-form-embedSubmitLoad 1.2s linear infinite; }
@keyframes ml-form-embedSubmitLoad { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ============ Footer ============ */

footer {
  border-top: 1px solid rgba(216, 58, 31, 0.2);
  padding: 4rem 1.5rem 2rem;
  margin-top: 5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ivory-mute);
  background: var(--color-bg-deep);
}

footer .signature {
  font-family: var(--font-script);
  color: var(--color-gold);
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(232, 185, 78, 0.3);
}

footer .footer-signature {
  display: block;
  max-width: 380px;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 20px rgba(232, 185, 78, 0.15));
}

footer .symbol {
  margin: 1.5rem auto;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-fire), transparent);
}

footer a { color: var(--color-ivory-mute); margin: 0 0.8rem; }
footer a:hover { color: var(--color-fire); }

/* ============ Indice capitoli ============ */

.toc {
  list-style: none;
  max-width: 680px;
  margin: 2rem auto;
}

.toc li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px dotted rgba(216, 58, 31, 0.2);
  font-size: 1.05rem;
  transition: background 0.2s ease;
}

.toc li:hover {
  background: rgba(216, 58, 31, 0.05);
}

.toc li .num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-fire);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  width: 80px;
  flex-shrink: 0;
}

.toc li .title {
  flex: 1;
  font-style: italic;
  color: var(--color-ivory);
}

/* ============ Animations on scroll ============ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Responsive ============ */

@media (max-width: 760px) {
  body { font-size: 25px; line-height: 1.7; }
  header.nav { padding: 0.8rem 1rem; }
  header.nav .inner { flex-direction: column; gap: 0.8rem; }
  header.nav nav ul { gap: 1.4rem; font-size: 0.7rem; }
  header.nav .logo { font-size: 0.9rem; }
  section { padding: 3.5rem 1.2rem; }
  section p { text-align: left; }
  .hero { min-height: 80vh; padding: 3rem 1rem; }
  .hero .logo-mark { max-width: 240px; }
  .blade { font-size: 1.2rem; margin: 3rem auto; }
  .divider { letter-spacing: 0.5em; }
}