/* ============================================================ */
/* BISCALAB DESIGN SYSTEM — main.bundle.css                     */
/* Generato automaticamente da build.sh. NON MODIFICARE.        */
/* ============================================================ */


/* ============================================================
   DESIGN TOKENS — La fonte di verità del design system BiscaLab
   ============================================================

   Versione: tema chiaro (maggio 2026)

   Modificando le variabili in questo file, cambia tutto il sito.
   - Colori: vedi sezione COLORS
   - Font: vedi sezione TYPOGRAPHY
   - Spacing: vedi sezione SPACING
   - Layout: vedi sezione LAYOUT

   PALETTE TEMA CHIARO:
   - Sfondo pagina:   bianco caldo  #FAFAF7
   - Sfondo box/hero: cream         #EFE9DD
   - Testo principale: nero         #0E0C0A
   - Accento: gold                  #C8973A

   ECCEZIONI (gestite in 5-utilities/theme.css):
   - Nav resta scura (#0E0C0A) con testi cream
   - Statement / sessione manifesto restano scuri o gold

   Le variabili legacy (--cream, --black, --gold, ecc.) sono mantenute
   e puntano ai valori del NUOVO tema chiaro, così il CSS esistente
   che le usa continua a funzionare senza modifiche.
   ============================================================ */

:root {

  /* ====== COLORS — Nuovo tema chiaro ====== */

  /* Surfaces */
  --color-bg-page: #FAFAF7;          /* sfondo pagina (bianco caldo) */
  --color-bg-box: #EFE9DD;           /* sfondo box, hero, card */
  --color-bg-soft: #F4EFE5;          /* variante più chiara box (futuro) */
  --color-bg-dark: #0E0C0A;          /* per "isole" scure: nav, statement */

  /* Text */
  --color-text-primary: #0E0C0A;     /* testo principale (nero) */
  --color-text-soft: #1A1714;        /* testo secondario (quasi nero) */
  --color-text-muted: rgba(14, 12, 10, 0.65);  /* testo muted/grigio */
  --color-text-subtle: rgba(14, 12, 10, 0.45); /* testo molto leggero */
  --color-text-on-dark: #F7F3EC;     /* testo su sfondo scuro (nav, statement) */

  /* Accent gold */
  --color-accent: #C8973A;
  --color-accent-light: #E8B85A;
  --color-accent-dark: #A87D2C;

  /* Status */
  --color-success: #5BA663;
  --color-warning: #E8B85A;
  --color-error:   #B85A4A;

  /* Borders */
  --color-border-soft:   rgba(14, 12, 10, 0.08);  /* bordi appena visibili */
  --color-border:        rgba(14, 12, 10, 0.10);  /* bordo standard box */
  --color-border-strong: rgba(14, 12, 10, 0.18);
  --color-border-gold:   rgba(200, 151, 58, 0.30);

  /* Shadows (usate raramente — il tema chiaro è piatto di natura) */
  --color-shadow: rgba(14, 12, 10, 0.08);


  /* ====== TYPOGRAPHY ====== */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Unbounded', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Font sizes (responsive con clamp) */
  --font-size-xs:      11px;
  --font-size-sm:      12px;
  --font-size-base:    17px;
  --font-size-lg:      clamp(17px, 1.5vw, 19px);
  --font-size-xl:      clamp(19px, 1.8vw, 24px);
  --font-size-2xl:     clamp(22px, 2.4vw, 30px);
  --font-size-3xl:     clamp(34px, 4.5vw, 56px);
  --font-size-display: clamp(44px, 7vw, 96px);

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-base:  1.7;

  /* Letter spacings */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.18em;
  --tracking-wider:   0.22em;
  --tracking-widest:  0.4em;


  /* ====== SPACING SCALE ====== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;


  /* ====== LAYOUT ====== */

  --container-max-width: 1280px;
  --container-padding:   clamp(24px, 5vw, 48px);
  --section-padding-y:   clamp(60px, 10vw, 120px);


  /* ====== BORDER RADIUS ====== */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;


  /* ====== SHADOWS ====== */
  /* Nel tema chiaro le ombre sono leggere o assenti.
     Le manteniamo per casi specifici (hover sottili, modali). */

  --shadow-sm:   0 2px 8px rgba(14, 12, 10, 0.04);
  --shadow-md:   0 8px 24px rgba(14, 12, 10, 0.06);
  --shadow-lg:   0 20px 50px rgba(14, 12, 10, 0.10);
  --shadow-gold: 0 4px 16px rgba(200, 151, 58, 0.20);


  /* ====== TRANSITIONS ====== */

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;


  /* ====== Z-INDEX SCALE ====== */

  --z-base:     1;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-nav:      1000;
  --z-modal:    9999;


  /* ============================================================
     LEGACY ALIASES — retrocompatibilità con il CSS esistente
     ============================================================
     Il CSS dei componenti (nav, footer, hero, card, ecc.) usa
     ancora --cream, --black, --gold. Adottiamo la SEMANTICA
     INVERSA del design originale:

     Nel design originale (tema scuro):
       --cream era il TESTO  (cream chiaro su sfondo nero)
       --black era lo SFONDO (nero pieno)

     Ora invertiamo il tema MANTENENDO la stessa semantica:
       --cream  ora vale NERO        (testo scuro su sfondo chiaro)
       --black  ora vale BIANCO CALDO (sfondo chiaro)

     Risultato: TUTTO il CSS legacy che scrive
       color: var(--cream)        continua a fare il suo dovere
                                  (scrive il testo principale)
       background: var(--black)   continua a fare il suo dovere
                                  (mette lo sfondo principale)

     Le isole scure (nav, statement) sono gestite ESPLICITAMENTE
     in 5-utilities/theme.css con valori hardcoded perché lì
     servono colori specifici (nav scura su sito chiaro).
     ============================================================ */

  --cream:        var(--color-text-primary);    /* TESTO principale → nero */
  --cream-soft:   var(--color-text-soft);
  --black:        var(--color-bg-page);         /* SFONDO principale → bianco caldo */
  --gold:         var(--color-accent);
  --gold-light:   var(--color-accent-light);
  --warm-grey:    var(--color-text-muted);
  --dark-surface: var(--color-bg-box);          /* sfondo "elevato" → cream */
  --border:       var(--color-border);
  --shadow:       var(--shadow-md);

}
/* ============================================================
   Base & Reset
   ============================================================
   Versione: tema chiaro (maggio 2026)

   IMPORTANTE: il :root duplicato che c'era qui prima è stato
   RIMOSSO. La fonte di verità delle variabili è tokens.css.
   ============================================================ */

body {
  background: var(--color-bg-page);   /* bianco caldo #FAFAF7 */
  color: var(--color-text-primary);   /* nero #0E0C0A */
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: var(--leading-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* Selezione testo coerente con il tema */
::selection {
  background: var(--color-accent);
  color: var(--color-bg-page);
}
/* ============================================================
   Container
   3 regole CSS
   ============================================================ */

.ml-form-style-gold .ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

.ml-form-style-override .ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  max-width: 480px !important;
}

.ml-form-style-override-lead .ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   Sections
   11 regole CSS
   ============================================================ */

.section { padding: 100px 48px; }

.section-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-separator {
  padding: 30px 48px;
  text-align: center;
  background: var(--black);
}

.section-separator-line {
  max-width: 1200px;
  margin: 0 auto;
  height: 1px;
  background: var(--border);
  position: relative;
}

.section-separator-line::before {
  content: '·';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--black);
  padding: 0 20px;
  color: var(--gold);
  font-size: 24px;
  line-height: 0.5;
}

.section-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.7);
  max-width: 640px;
  margin: 24px auto 0;
}

.section-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 800px;
  margin: 0 auto;
}

.section-title em {
  font-style: italic;
  color: var(--gold);
}

/* ============================================================
   Grid systems
   17 regole CSS
   ============================================================ */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

.articles-grid.hidden-grid { display: none; }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 28px;
}

.error-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.footer-col { padding-top: 6px; }

.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 720px;
  margin-top: 16px;
}

.itinerari-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

.kit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.leadmagnet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.micro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.product-row {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  transition: border-color 0.3s, transform 0.3s;
  overflow: hidden;
}

.product-row:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.product-row:hover .product-img { transform: scale(1.04); }

.socials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
}

/* ============================================================
   Navigation
   21 regole CSS
   ============================================================ */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  max-width: 320px;
  background: var(--black);
  border-left: 1px solid var(--border);
  padding: 100px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--cream);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.3s;
}

.mobile-menu a em {
  font-style: italic;
  color: var(--gold);
}

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

.mobile-menu a:hover, .mobile-menu a.active { color: var(--gold); }

.mobile-menu.open { transform: translateX(0); }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 48px;
  background: rgba(14,12,10,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
  transition: opacity 0.3s, color 0.3s;
  padding: 6px 0;
  position: relative;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
}

.nav-links a:hover {
  opacity: 1;
  color: var(--gold);
}

.nav-links a:hover, .nav-links a.active {
  opacity: 1;
  color: var(--gold);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0;
}

.nav-logo img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  transition: opacity 0.3s;
}

.nav-logo span { color: var(--gold); }

.nav-logo:hover img { opacity: 0.85; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--cream);
  margin: 7px 0;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }

.nav-toggle.active span:nth-child(2) { opacity: 0; }

.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   Footer
   21 regole CSS
   ============================================================ */

.footer {
  padding: 32px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(200,151,58,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand { max-width: 380px; }

.footer-brand-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
}

.footer-brand-name span { color: var(--gold); }

.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--warm-grey);
  opacity: 0.6;
}

.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-grey);
  opacity: 0.7;
  transition: color 0.3s, opacity 0.3s;
}

.footer-legal a:hover {
  color: var(--gold);
  opacity: 1;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: rgba(247,243,236,0.72);
  font-size: 16px;
  transition: color 0.3s;
}

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

.footer-links li {
  padding-left: 0;
  margin-bottom: 0;
}

.footer-links li::before { content: none; }

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: rgba(247,243,236,0.7);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  border-radius: 50%;
}

.footer-social a svg {
  width: 18px;
  height: 18px;
  display: block;
}

.footer-social a:hover {
  color: var(--black);
  border-color: var(--gold);
  background: var(--gold);
}

.footer-tagline {
  font-style: italic;
  color: rgba(247,243,236,0.7);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
}

.footer-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.footer-top {
  max-width: 1200px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ============================================================
   Cookie Banner
   7 regole CSS
   ============================================================ */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(20,18,16,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  padding: 22px 26px;
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  flex-wrap: wrap;
}

.cookie-banner.visible {
  display: flex;
  animation: cookieSlideUp 0.4s ease-out;
}

.cookie-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border: none;
  cursor: pointer;
  padding: 12px 24px;
  transition: background 0.3s;
}

.cookie-btn:hover { background: var(--gold-light); }

.cookie-text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(247,243,236,0.85);
  flex: 1;
  min-width: 240px;
}

.cookie-text a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
}

.cookie-text strong {
  color: var(--cream);
  font-weight: 600;
}

/* ============================================================
   Buttons & CTAs
   32 regole CSS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 32px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
  text-decoration: none;
}

.btn-back:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 22px 32px;
  background: var(--gold);
  color: var(--black);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  font-weight: 400;
}

.btn-buy-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 22px 40px;
  background: var(--black);
  color: var(--gold);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  font-weight: 400;
}

.btn-buy-dark:hover {
  background: #1a1612;
  transform: translateY(-1px);
}

.btn-buy:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-consult {
  display: inline-block;
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border: none;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
}

.btn-consult:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-contact {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border: none;
  padding: 22px 24px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 8px;
  font-weight: 400;
}

.btn-contact:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-cta {
  display: block;
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
}

.btn-cta.ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}

.btn-cta.ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-cta.primary {
  background: var(--gold);
  color: var(--black);
}

.btn-cta.primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-leadmagnet {
  display: block;
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 18px 24px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
}

.btn-leadmagnet.coming {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-leadmagnet.coming:hover { background: rgba(200,151,58,0.08); }

.btn-leadmagnet.primary {
  background: var(--green-soft);
  color: var(--black);
}

.btn-leadmagnet.primary:hover {
  background: #6fbc7a;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--gold);
  color: var(--black);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-product {
  display: block;
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
}

.btn-product.ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}

.btn-product.ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-product.primary {
  background: var(--gold);
  color: var(--black);
}

.btn-product.primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: var(--border);
}

.btn-secondary:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   Hero sections
   49 regole CSS
   ============================================================ */

.hero {
  min-height: 100vh;
  padding: 140px 48px 80px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
  position: relative;
  overflow: hidden;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(200,151,58,0.12);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 10px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-weight: 400;
}

.hero-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero-bio {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.75;
  color: rgba(247,243,236,0.82);
  font-weight: 300;
  max-width: 720px;
  margin-bottom: 28px;
}

.hero-bio em {
  color: var(--gold);
  font-style: italic;
}

.hero-bio p { margin-bottom: 20px; }

.hero-bio strong {
  color: var(--cream);
  font-weight: 500;
}

.hero-cover {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #2c2c54 0%, #1e1e3f 100%);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero-cover-icon {
  width: 80px;
  height: 80px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.hero-cover-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.hero-cover-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero-cover-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(247,243,236,0.6);
  text-transform: uppercase;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  width: 80%;
}

.hero-cover-status {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.hero-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--cream);
}

.hero-cover-title em {
  font-style: italic;
  color: var(--gold);
}

.hero-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(200,151,58,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hero-image { position: relative; }

.hero-image img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--border);
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.hero-lead {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.6;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
  max-width: 720px;
  margin-bottom: 56px;
}

.hero-lead em {
  color: var(--gold);
  font-style: italic;
}

.hero-lead strong {
  color: var(--cream);
  font-weight: 500;
}

.hero-meta {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.hero-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.hero-meta-item strong {
  color: var(--cream);
  font-weight: 500;
}

.hero-meta-item.gold { color: var(--gold); }

.hero-price {
  font-family: 'Unbounded', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.hero-price-note {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
  width: 100%;
  margin-top: 8px;
}

.hero-price-old {
  font-family: 'Unbounded', sans-serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--warm-grey);
  text-decoration: line-through;
  text-decoration-color: rgba(139,132,120,0.6);
}

.hero-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hero-promo-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: 22px;
  font-weight: 400;
}

.hero-subtitle {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-subtitle em {
  color: var(--gold);
  font-style: italic;
}

.hero-subtitle strong {
  color: var(--cream);
  font-weight: 500;
}

.hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hero-tag::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.hero-title {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 1000px;
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.page-hero {
  padding: 160px 48px 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
  position: relative;
  overflow: hidden;
}

.page-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.page-hero-subtitle {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  color: rgba(247,243,236,0.78);
  max-width: 700px;
  margin: 0 auto;
}

.page-hero-subtitle em {
  color: var(--gold);
  font-style: italic;
}

.page-hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.page-hero-tag::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.page-hero-tag::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.page-hero-title {
  font-size: clamp(44px, 6.5vw, 84px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.page-hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(200,151,58,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   CTA cards
   27 regole CSS
   ============================================================ */

.cta-card {
  position: relative;
  background: var(--gold);
  color: var(--black);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 160px;
  text-decoration: none;
  transition: background 0.3s, transform 0.25s;
  overflow: hidden;
}

.cta-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cta-card-arrow {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: 'DM Mono', monospace;
  font-size: 24px;
  font-weight: 300;
  color: var(--black);
  opacity: 0.45;
  transition: opacity 0.3s, transform 0.3s;
}

.cta-card-content {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.cta-card-desc {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
}

.cta-card-desc strong {
  color: var(--cream);
  font-weight: 500;
}

.cta-card-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cta-card-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
}

.cta-card-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}

.cta-card-ghost .cta-card-arrow {
  color: var(--gold);
  opacity: 0.6;
}

.cta-card-ghost .cta-card-sub {
  color: var(--cream);
  opacity: 0.55;
}

.cta-card-ghost .cta-card-title { color: var(--cream); }

.cta-card-ghost:hover {
  background: rgba(200,151,58,0.06);
  border-color: var(--gold);
}

.cta-card-ghost:hover .cta-card-title { color: var(--gold); }

.cta-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.cta-card-img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--black);
  position: relative;
}

.cta-card-price {
  font-family: 'Unbounded', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.cta-card-price-note {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.cta-card-price-old {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--warm-grey);
  text-decoration: line-through;
  text-decoration-color: rgba(139,132,120,0.6);
}

.cta-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cta-card-promo-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 5;
  font-weight: 400;
}

.cta-card-sub {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.7;
  font-weight: 400;
  line-height: 1.5;
}

.cta-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 6px;
  color: var(--black);
}

.cta-card-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.cta-card:hover {
  background: var(--gold-light);
  transform: translateY(-4px);
}

.cta-card:hover .cta-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.cta-card:hover .cta-card-img { transform: scale(1.04); }

/* ============================================================
   Card components
   31 regole CSS
   ============================================================ */

.leadmagnet-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leadmagnet-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 5;
}

.leadmagnet-badge.coming {
  background: rgba(200,151,58,0.15);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.leadmagnet-badge.free {
  background: var(--green-soft);
  color: var(--black);
}

.leadmagnet-body {
  padding: 32px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.leadmagnet-card {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
  overflow: hidden;
  position: relative;
}

.leadmagnet-card.active { border-color: var(--green-soft); }

.leadmagnet-card.active:hover {
  transform: translateY(-4px);
  border-color: var(--green-soft);
  box-shadow: 0 16px 40px rgba(91,166,99,0.12);
}

.leadmagnet-card.coming { opacity: 0.85; }

.leadmagnet-card.coming:hover {
  border-color: var(--gold);
  opacity: 1;
}

.leadmagnet-card:hover .leadmagnet-img { transform: scale(1.04); }

.leadmagnet-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
  margin-bottom: 22px;
  flex-grow: 1;
}

.leadmagnet-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--green-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.leadmagnet-eyebrow::before, .leadmagnet-eyebrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--green-soft);
}

.leadmagnet-header {
  text-align: center;
  margin-bottom: 50px;
}

.leadmagnet-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s;
}

.leadmagnet-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  opacity: 0.5;
}

.leadmagnet-img-placeholder-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.leadmagnet-img-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leadmagnet-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.leadmagnet-meta {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.leadmagnet-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.leadmagnet-meta-item strong {
  color: var(--cream);
  font-weight: 500;
}

.leadmagnet-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--cream);
}

.leadmagnet-name em {
  font-style: italic;
  color: var(--gold);
}

.leadmagnet-section {
  padding: 70px 48px 90px;
  background: var(--black);
}

.leadmagnet-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.leadmagnet-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.15;
  max-width: 700px;
  margin: 0 auto;
}

.leadmagnet-title em {
  font-style: italic;
  color: var(--gold);
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.product-img-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--black);
  position: relative;
}

/* ============================================================
   Forms & inputs
   33 regole CSS
   ============================================================ */

.ci-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.consent-label a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
}

.consent-label input[type="checkbox"] {
  margin-top: 5px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.consent-label span {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,243,236,0.65);
  font-weight: 300;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cred-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.error-suggestion-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 6px;
}

.form-consent { margin: 8px 0 4px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-input, .form-select, .form-textarea {
  background: rgba(247,243,236,0.03);
  border: 1px solid var(--border);
  padding: 16px 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--cream);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
  -webkit-appearance: none;
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--warm-grey);
  opacity: 0.7;
}

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); }

.form-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.form-select { cursor: pointer; }

.form-select option {
  background: var(--black);
  color: var(--cream);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}

.ml-form-style-gold .ml-form-checkboxRow .label-description, .ml-form-style-gold .ml-form-checkboxRow label, .ml-form-style-gold .ml-form-checkboxRow label p, .ml-form-style-gold .ml-form-embedPermissions p {
  color: rgba(14,12,10,0.75) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ml-form-style-gold .ml-form-checkboxRow label a, .ml-form-style-gold .ml-form-embedPermissions p a {
  color: var(--black) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(14,12,10,0.4) !important;
}

.ml-form-style-gold .ml-form-fieldRow input::placeholder {
  color: rgba(14,12,10,0.55) !important;
  opacity: 1 !important;
}

.ml-form-style-gold .ml-form-fieldRow input:focus {
  border-color: var(--black) !important;
  outline: none !important;
}

.ml-form-style-gold .ml-form-fieldRow input[type="email"], .ml-form-style-gold .ml-form-fieldRow input[type="text"] {
  background: rgba(14,12,10,0.08) !important;
  color: var(--black) !important;
  border: 1px solid rgba(14,12,10,0.3) !important;
  padding: 18px 22px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.ml-form-style-override .ml-form-checkboxRow .label-description,
.ml-form-style-override .ml-form-checkboxRow label,
.ml-form-style-override .ml-form-checkboxRow label p,
.ml-form-style-override .ml-form-embedPermissions p {
  color: rgba(247,243,236,0.7) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.ml-form-style-override .ml-form-checkboxRow .label-description, .ml-form-style-override .ml-form-checkboxRow label, .ml-form-style-override .ml-form-checkboxRow label p, .ml-form-style-override .ml-form-embedPermissions p {
  color: rgba(247,243,236,0.7) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ml-form-style-override .ml-form-checkboxRow label a,
.ml-form-style-override .ml-form-embedPermissions p a { color: var(--gold) !important; }

.ml-form-style-override .ml-form-checkboxRow label a, .ml-form-style-override .ml-form-embedPermissions p a { color: var(--gold) !important; }

.ml-form-style-override .ml-form-fieldRow input::placeholder {
  color: var(--warm-grey) !important;
  opacity: 0.7 !important;
}

.ml-form-style-override .ml-form-fieldRow input[type="email"],
.ml-form-style-override .ml-form-fieldRow input[type="text"] {
  background: rgba(247,243,236,0.05) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  padding: 16px 18px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.ml-form-style-override .ml-form-fieldRow input[type="email"], .ml-form-style-override .ml-form-fieldRow input[type="text"] {
  background: rgba(247,243,236,0.05) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.ml-form-style-override-lead .ml-form-checkboxRow .label-description, .ml-form-style-override-lead .ml-form-checkboxRow label, .ml-form-style-override-lead .ml-form-checkboxRow label p, .ml-form-style-override-lead .ml-form-embedPermissions p {
  color: rgba(247,243,236,0.7) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.ml-form-style-override-lead .ml-form-checkboxRow label a, .ml-form-style-override-lead .ml-form-embedPermissions p a { color: var(--green-soft) !important; }

.ml-form-style-override-lead .ml-form-fieldRow input::placeholder {
  color: var(--warm-grey) !important;
  opacity: 0.7 !important;
}

.ml-form-style-override-lead .ml-form-fieldRow input[type="email"], .ml-form-style-override-lead .ml-form-fieldRow input[type="text"] {
  background: rgba(247,243,236,0.05) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  padding: 14px 16px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 16px !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

/* ============================================================
   FAQ accordion
   17 regole CSS
   ============================================================ */

.faq {
  padding: 110px 48px;
  background: var(--black);
}

.faq-answer {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(247,243,236,0.78);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, margin-top 0.3s;
  font-weight: 300;
}

.faq-answer a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
}

.faq-answer em {
  color: var(--gold);
  font-style: italic;
}

.faq-answer strong {
  color: var(--cream);
  font-weight: 500;
}

.faq-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
  cursor: pointer;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  margin-top: 18px;
}

.faq-item.open .faq-question::after { transform: rotate(45deg); }

.faq-item:hover .faq-question { color: var(--gold); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.faq-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.3s;
}

.faq-question::after {
  content: '+';
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.faq-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 700px;
  margin: 0 auto;
}

.faq-title em {
  font-style: italic;
  color: var(--gold);
}

/* ============================================================
   Testimonials
   2 regole CSS
   ============================================================ */

.case-quote {
  font-size: 19px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--cream);
  margin-bottom: 24px;
}

.case-quote::before {
  content: '"';
  color: var(--gold);
  font-size: 32px;
  font-style: normal;
  line-height: 0;
  vertical-align: -8px;
  margin-right: 4px;
}

/* ============================================================
   Miscellaneous components
   300 regole CSS
   ============================================================ */

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

.articles-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.articles-section {
  padding: 60px 48px 100px;
  background: var(--black);
}

.bonus-block {
  margin-top: 50px;
  padding: 44px 40px;
  background: rgba(200,151,58,0.08);
  border: 1px solid var(--gold);
  position: relative;
}

.bonus-desc {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
}

.bonus-tag {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 5px 14px;
  font-weight: 400;
}

.bonus-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 14px;
  margin-top: 4px;
}

.bonus-title em {
  font-style: italic;
  color: var(--gold);
}

.case {
  background: var(--black);
  padding: 40px 32px;
  border-left: 2px solid var(--gold);
  position: relative;
  transition: transform 0.3s;
}

.case-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--warm-grey);
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.7;
}

.case-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.case-result {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.case:hover { transform: translateY(-4px); }

.cases {
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cases-disclaimer {
  text-align: center;
  margin-top: 40px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--warm-grey);
  text-transform: uppercase;
  opacity: 0.55;
}

.cases-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

.cases-header {
  text-align: center;
  margin-bottom: 60px;
}

.cases-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.cases-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 700px;
  margin: 0 auto;
}

.cases-title em {
  font-style: italic;
  color: var(--gold);
}

.ci-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  color: var(--cream);
  margin-bottom: 28px;
  line-height: 1.4;
}

.ci-value a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.ci-value a:hover {
  color: var(--gold);
  border-color: rgba(200,151,58,0.4);
}

.ci-value:last-child { margin-bottom: 0; }

.coming-soon {
  background: var(--dark-surface);
  border: 1px dashed var(--border);
  padding: 60px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.coming-soon-icon {
  width: 50px;
  height: 50px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.coming-soon-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.coming-soon-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(247,243,236,0.7);
  font-style: italic;
}

.consult-block li {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,243,236,0.82);
  padding-left: 22px;
  position: relative;
  font-weight: 300;
}

.consult-block li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -2px;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.consult-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consult-block-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.consult-block-title::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--gold);
}

.consult-blocks {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.consult-desc {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
  margin-bottom: 32px;
}

.consult-desc em {
  color: var(--gold);
  font-style: italic;
}

.consult-desc strong {
  color: var(--cream);
  font-weight: 500;
}

.consult-duration {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.consult-food-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.consult-food-blocks .consult-block-full { grid-column: 1 / -1; }

.consult-food-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.consult-food-wrap {
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
}

.consult-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.consult-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--warm-grey);
  margin-bottom: 12px;
  display: block;
  text-transform: uppercase;
}

.consult-price {
  font-family: 'Unbounded', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.consult-price-custom {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}

.consult-price-note {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.consult-pricing {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.consult-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.consult-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.consult-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.consult-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.consultation {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
}

.consultation-featured {
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--dark-surface) 0%, #1a1612 100%);
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.consultation:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.consultations {
  padding: 90px 48px;
  background: var(--black);
}

.consultations-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact {
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  padding: 110px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
}

.contact-info {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.contact-left { padding-top: 8px; }

.contact-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
}

.contact-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.cover-bangkok { background: linear-gradient(135deg, #2c2c54 0%, #1e1e3f 100%); }

.cover-food { background: linear-gradient(135deg, #c0392b 0%, #a32f24 100%); }

.cover-investimenti { background: linear-gradient(135deg, #1a1612 0%, #2a2018 100%); }

.cover-trasferimento { background: linear-gradient(135deg, #C8973A 0%, #d4a44a 100%); }

.cover-viaggi { background: linear-gradient(135deg, #5BA663 0%, #4a8851 100%); }

.cred-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cred-num {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.cta-finale {
  padding: 110px 48px;
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.cta-finale h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.cta-finale h2 em {
  font-style: italic;
  color: var(--gold);
}

.cta-finale-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.8;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cta-finale-eyebrow::before, .cta-finale-eyebrow::after {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--black);
  opacity: 0.6;
}

.cta-finale-inner {
  max-width: 740px;
  margin: 0 auto;
  position: relative;
}

.cta-finale-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--black);
  opacity: 0.85;
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cta-note {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--black);
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 36px;
}

.cta-price {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
}

.cta-price-block {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cta-price-old {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  color: rgba(14,12,10,0.55);
  text-decoration: line-through;
}

.disclaimer {
  padding: 50px 48px;
  background: var(--black);
  border-top: 1px solid var(--border);
}

.disclaimer p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--warm-grey);
  font-style: italic;
  opacity: 0.7;
}

.disclaimer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.downsell {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(247,243,236,0.7);
  font-style: italic;
}

.downsell a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
  transition: border-color 0.3s;
  font-style: normal;
}

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

.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--warm-grey);
  font-size: 17px;
  font-style: italic;
  display: none;
}

.empty-state.show { display: block; }

.filter-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 22px;
  background: transparent;
  color: rgba(247,243,236,0.7);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.filter-btn.active {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

.filter-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.filters {
  padding: 30px 48px 50px;
  background: var(--black);
  border-bottom: 1px solid var(--border);
}

.filters-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.final-cta {
  padding: 110px 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
}

.final-cta-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.final-cta-text {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.78);
  margin-bottom: 36px;
}

.final-cta-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  max-width: 700px;
  margin: 0 auto 24px;
}

.final-cta-title em {
  font-style: italic;
  color: var(--gold);
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(200,151,58,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.itinerari {
  padding: 100px 48px;
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.itinerari-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.itinerario-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
}

.itinerario-item {
  background: var(--black);
  border: 1px solid var(--border);
  padding: 40px 32px;
  border-left: 3px solid var(--gold);
  transition: transform 0.3s, border-color 0.3s;
}

.itinerario-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  border-left-color: var(--gold-light);
}

.itinerario-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 14px;
}

.itinerario-name em {
  font-style: italic;
  color: var(--gold);
}

.itinerario-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
  text-transform: uppercase;
}

.micro-block {
  margin-top: 50px;
  padding: 50px 44px;
  background: var(--black);
  border: 1px dashed rgba(200,151,58,0.35);
}

.micro-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.micro-header {
  text-align: center;
  margin-bottom: 36px;
}

.micro-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.micro-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  color: var(--gold);
  line-height: 1;
  padding-top: 4px;
  font-weight: 400;
}

.micro-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,243,236,0.7);
  font-weight: 300;
  max-width: 580px;
  margin: 0 auto;
  font-style: italic;
}

.micro-text {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
}

.micro-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}

.micro-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.ml-form-style-gold .ml-embedded { background: transparent !important; }

.ml-form-style-gold .ml-form-embedBody {
  padding: 0 !important;
  background: transparent !important;
}

.ml-form-style-gold .ml-form-embedBody form { background: transparent !important; }

.ml-form-style-gold .ml-form-embedContent { display: none !important; }

.ml-form-style-gold .ml-form-embedSubmit button[type="submit"] {
  background: var(--black) !important;
  color: var(--gold) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 28px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.3s !important;
  width: 100% !important;
}

.ml-form-style-gold .ml-form-embedSubmit button[type="submit"]:hover { background: #1a1612 !important; }

.ml-form-style-gold .ml-form-successContent h4, .ml-form-style-gold .ml-form-successContent p {
  color: var(--black) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.ml-form-style-override .ml-embedded { background: transparent !important; }

.ml-form-style-override .ml-form-checkboxRow,
.ml-form-style-override .ml-form-embedPermissions { color: rgba(247,243,236,0.7) !important; }

.ml-form-style-override .ml-form-embedBody {
  padding: 0 !important;
  background: transparent !important;
}

.ml-form-style-override .ml-form-embedBody form { background: transparent !important; }

.ml-form-style-override .ml-form-embedContent { display: none !important; }

.ml-form-style-override .ml-form-embedSubmit button[type="submit"] {
  background: var(--gold) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 32px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.3s !important;
  width: 100% !important;
}

.ml-form-style-override .ml-form-embedSubmit button[type="submit"]:hover { background: var(--gold-light) !important; }

.ml-form-style-override .ml-form-successContent h4,
.ml-form-style-override .ml-form-successContent p {
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.ml-form-style-override .ml-form-successContent h4, .ml-form-style-override .ml-form-successContent p {
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.ml-form-style-override-lead .ml-embedded { background: transparent !important; }

.ml-form-style-override-lead .ml-form-embedBody {
  padding: 0 !important;
  background: transparent !important;
}

.ml-form-style-override-lead .ml-form-embedBody form { background: transparent !important; }

.ml-form-style-override-lead .ml-form-embedContent { display: none !important; }

.ml-form-style-override-lead .ml-form-embedSubmit button[type="submit"] {
  background: var(--green-soft) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 24px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.3s !important;
  width: 100% !important;
}

.ml-form-style-override-lead .ml-form-embedSubmit button[type="submit"]:hover { background: #6fbc7a !important; }

.ml-form-style-override-lead .ml-form-successContent h4, .ml-form-style-override-lead .ml-form-successContent p {
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.newsletter {
  background: linear-gradient(180deg, #1a1612 0%, var(--black) 100%);
  text-align: center;
}

.newsletter-consent {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247,243,236,0.6);
  text-align: left;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-consent a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
}

.newsletter-desc {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.78);
  margin: 24px auto 40px;
  max-width: 560px;
}

.newsletter-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

.newsletter-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.newsletter-title em {
  font-style: italic;
  color: var(--gold);
}

.newsletter-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.offer {
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
  padding: 110px 48px;
}

.offer-card {
  position: relative;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
}

.offer-card-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.offer-card-desc {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
  margin-bottom: 36px;
  flex-grow: 1;
}

.offer-card-desc em {
  color: var(--gold);
  font-style: italic;
}

.offer-card-desc strong {
  color: var(--cream);
  font-weight: 500;
}

.offer-card-ghost {
  background: var(--dark-surface);
  border: 1px solid var(--border);
}

.offer-card-ghost:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.offer-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 0.3s, border-color 0.3s;
}

.offer-card-link:hover {
  color: var(--gold);
  border-color: rgba(200,151,58,0.4);
}

.offer-card-primary {
  background: var(--dark-surface);
  border: 1px solid var(--gold);
}

.offer-card-primary:hover {
  transform: translateY(-4px);
  background: #1a1612;
}

.offer-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.offer-card-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.offer-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 28px;
}

.offer-card-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.optin {
  padding: 110px 48px;
  background: linear-gradient(135deg, var(--gold) 0%, #d4a44a 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.optin-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.optin-eyebrow::before, .optin-eyebrow::after {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--black);
  opacity: 0.6;
}

.optin-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.optin-text {
  font-size: 18px;
  line-height: 1.65;
  color: var(--black);
  opacity: 0.85;
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.optin-text strong { font-weight: 500; }

.optin-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.optin-title em { font-style: italic; }

.optin-trust {
  margin-top: 28px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(14,12,10,0.7);
  text-transform: uppercase;
}

.optin::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14,12,10,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.perchi {
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 48px;
}

.perchi-block {
  padding: 36px;
  background: var(--dark-surface);
  border: 1px solid var(--border);
}

.perchi-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.perchi-block ul li {
  font-size: 17px;
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
}

.perchi-block.no ul li::before {
  content: '−';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--warm-grey);
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.perchi-block.yes { border-color: var(--gold); }

.perchi-block.yes ul li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--gold);
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.perchi-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.photo-fallback-text {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--warm-grey);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.preview {
  padding: 100px 48px;
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.preview-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.preview-header {
  text-align: center;
  margin-bottom: 60px;
}

.preview-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.preview-item {
  background: var(--black);
  border: 1px solid var(--border);
  padding: 36px 32px;
  transition: border-color 0.3s, transform 0.3s;
}

.preview-item-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
}

.preview-item-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
  text-transform: uppercase;
}

.preview-item-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 12px;
}

.preview-item-title em {
  font-style: italic;
  color: var(--gold);
}

.preview-item:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.preview-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 300;
}

.preview-title {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.preview-title em {
  font-style: italic;
  color: var(--gold);
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.product-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-content {
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.product-desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(247,243,236,0.82);
  font-weight: 300;
  margin-bottom: 24px;
}

.product-desc em {
  color: var(--gold);
  font-style: italic;
}

.product-desc strong {
  color: var(--cream);
  font-weight: 500;
}

.product-features {
  list-style: none;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-features li {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(247,243,236,0.78);
  padding-left: 22px;
  position: relative;
  font-weight: 300;
}

.product-features li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -3px;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--cream);
  letter-spacing: -0.005em;
}

.product-name em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.product-price {
  font-family: 'Unbounded', sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.product-price-note {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.product-price-old {
  font-family: 'Unbounded', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--warm-grey);
  text-decoration: line-through;
  text-decoration-color: rgba(139,132,120,0.6);
}

.product-pricing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.product-promo-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 5;
  font-weight: 400;
}

.product-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.product-tag::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
}

.products-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.products-header {
  text-align: center;
  margin-bottom: 64px;
}

.products-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.products-section {
  padding: 80px 48px 100px;
  background: var(--black);
}

.products-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.7);
  max-width: 640px;
  margin: 0 auto;
}

.products-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  max-width: 760px;
  margin: 0 auto 22px;
  letter-spacing: -0.01em;
}

.products-title em {
  font-style: italic;
  color: var(--gold);
}

.promise {
  padding: 90px 48px;
  background: var(--black);
}

.promise-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.promise-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.promise-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: flex-start;
}

.promise-step-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  min-width: 50px;
  padding-top: 4px;
}

.promise-step-text {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
}

.promise-step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 6px;
  line-height: 1.3;
}

.promise-step-title em {
  font-style: italic;
  color: var(--gold);
}

.promise-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.promise-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 28px;
}

.promise-title em {
  font-style: italic;
  color: var(--gold);
}

.pull-quote {
  background: rgba(200,151,58,0.06);
  border-left: 3px solid var(--gold);
  padding: 28px 32px;
  margin: 40px 0;
  position: relative;
}

.pull-quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.3vw, 24px);
  line-height: 1.4;
  font-weight: 400;
  font-style: italic;
  color: var(--cream);
  margin-bottom: 0;
  padding-left: 24px;
}

.pull-quote-text strong {
  color: var(--gold);
  font-style: normal;
  font-weight: 500;
}

.pull-quote::before {
  content: '“';
  position: absolute;
  top: 4px;
  left: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  color: var(--gold);
  opacity: 0.25;
  line-height: 1;
  font-style: italic;
}

.related {
  padding: 80px 48px;
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.related-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.related-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.related-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 28px;
}

.related-title em {
  font-style: italic;
  color: var(--gold);
}

.sessione {
  padding: 100px 48px;
  background: linear-gradient(135deg, var(--gold) 0%, #d4a44a 100%);
  position: relative;
  overflow: hidden;
}

.sessione h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 300;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.sessione h2 em { font-style: italic; }

.sessione p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(14,12,10,0.85);
  font-weight: 300;
  margin-bottom: 24px;
}

.sessione-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
}

.sessione-nota {
  background: rgba(14,12,10,0.08);
  border-left: 3px solid var(--black);
  padding: 20px 24px;
  margin-top: 28px;
}

.sessione-nota p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(14,12,10,0.85);
  margin-bottom: 0;
  font-style: italic;
}

.sessione-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 12px;
}

.sessione-points li {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(14,12,10,0.92);
  padding-left: 30px;
  position: relative;
  font-weight: 400;
}

.sessione-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--black);
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
}

.sessione-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
}

.sessione-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--black);
  opacity: 0.6;
}

.sessione::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14,12,10,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.social-card {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  padding: 40px 28px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.social-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  background: linear-gradient(180deg, var(--dark-surface) 0%, #1a1612 100%);
}

.social-card:hover .social-icon {
  color: var(--black);
  background: var(--gold);
  border-color: var(--gold);
}

.social-cta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 6px;
}

.social-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247,243,236,0.65);
  font-style: italic;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  width: 100%;
  margin-top: 4px;
}

.social-handle {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}

.social-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--cream);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.social-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
}

.socials {
  padding: 110px 48px;
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.socials-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.socials-header {
  text-align: center;
  margin-bottom: 60px;
}

.socials-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.socials-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(247,243,236,0.7);
  max-width: 580px;
  margin: 0 auto;
  font-weight: 300;
}

.socials-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 700px;
  margin: 0 auto 16px;
}

.socials-title em {
  font-style: italic;
  color: var(--gold);
}

.statement {
  padding: 90px 48px;
  background: linear-gradient(135deg, var(--gold) 0%, #d4a44a 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.statement h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: var(--black);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.statement h2 em { font-style: italic; }

.statement h2 strong { font-weight: 500; }

.statement p {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: rgba(247,243,236,0.92);
  font-weight: 300;
}

.statement p strong {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.statement-divider {
  color: var(--gold);
  margin: 18px 0;
  opacity: 0.6;
}

.statement-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.storia {
  padding: 110px 48px;
  background: var(--dark-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.storia-attr {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: inline-block;
}

.storia-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.storia-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.storia-inner {
  max-width: 880px;
  margin: 0 auto;
}

.storia-quote {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.storia-quote em { color: var(--gold); }

.storia-text {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(247,243,236,0.92);
  margin-bottom: 32px;
}

.storia-text strong {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.text-center { text-align: center; }

.upsell {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(14,12,10,0.2);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  opacity: 0.85;
  font-style: italic;
}

.upsell a {
  color: var(--black);
  font-weight: 500;
  border-bottom: 1px solid rgba(14,12,10,0.5);
  transition: border-color 0.3s;
  font-style: normal;
}

.upsell a:hover { border-color: var(--black); }

0%, 100% { opacity: 1; }

50% { opacity: 0.5; }

footer {
  background: #0a0908;
  border-top: 1px solid var(--border);
  padding: 80px 48px 32px;
}

from {
  opacity: 0;
  transform: translateY(20px);
}

section { padding: 100px 48px; }

to {
  opacity: 1;
  transform: translateY(0);
}



/* === Utility classes per casi specifici === */

.preview-item-full {
  grid-column: 1 / -1;
}

.section-eyebrow-left {
  text-align: left;
}
/* ============================================================
   Home page
   16 regole CSS
   ============================================================ */

.about {
  padding: 110px 48px;
  background: linear-gradient(180deg, #1a1612 0%, var(--black) 100%);
}

.about-bio {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.75;
  color: rgba(247,243,236,0.85);
  font-weight: 300;
  max-width: 580px;
}

.about-bio em {
  color: var(--gold);
  font-style: italic;
}

.about-bio p { margin-bottom: 22px; }

.about-bio p:last-child { margin-bottom: 0; }

.about-bio strong {
  color: var(--cream);
  font-weight: 500;
}

.about-creds {
  display: flex;
  gap: 48px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--dark-surface);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}

.about-photo-caption {
  position: absolute;
  bottom: -28px;
  left: 0;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--warm-grey);
  text-transform: uppercase;
  opacity: 0.55;
}

.about-photo-wrap { position: relative; }

.about-photo.photo-fallback .photo-fallback-text { opacity: 0.5; }

.about-text-wrap { padding-top: 12px; }

.about-title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 16px 0 36px;
}

.about-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

/* ============================================================
   Product pages
   10 regole CSS
   ============================================================ */

.kit-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,243,236,0.78);
  font-weight: 300;
  font-style: italic;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.kit-item {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  padding: 40px 36px;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
}

.kit-item:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.kit-level {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--warm-grey);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.kit-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.kit-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 8px;
}

.kit-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
  text-transform: uppercase;
  font-weight: 400;
}

.kit-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit-points li {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(247,243,236,0.78);
  padding-left: 22px;
  position: relative;
  font-weight: 300;
}

.kit-points li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -3px;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

/* ============================================================
   Article (blog) pages
   57 regole CSS
   ============================================================ */

.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 48px 60px;
}

.article-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 60px 0 20px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.article-body h2 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.article-body h2:first-child {
  margin-top: 30px;
  padding-top: 0;
  border-top: none;
}

.article-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--cream);
  margin: 40px 0 18px;
}

.article-body h3 em {
  font-style: italic;
  color: var(--gold);
}

.article-body li {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247,243,236,0.88);
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
  font-weight: 300;
}

.article-body li strong {
  color: var(--cream);
  font-weight: 500;
}

.article-body li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -3px;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.article-body p {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(247,243,236,0.88);
  margin-bottom: 22px;
  font-weight: 300;
}

.article-body p em {
  color: var(--gold);
  font-style: italic;
}

.article-body p strong {
  color: var(--cream);
  font-weight: 500;
}

.article-body strong.place-name {
  color: var(--gold);
  font-weight: 500;
  font-style: normal;
}

.article-body ul {
  margin: 22px 0 26px 0;
  padding: 0;
  list-style: none;
}

.article-breadcrumb {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.article-breadcrumb a {
  color: var(--gold-light);
  transition: color 0.3s;
}

.article-breadcrumb a:hover {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}

.article-breadcrumb-current {
  color: var(--cream);
  opacity: 0.85;
}

.article-breadcrumb-sep {
  color: var(--warm-grey);
  opacity: 0.7;
}

.article-card {
  background: var(--dark-surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
  cursor: pointer;
}

.article-card-body {
  padding: 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card-category {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--black);
  text-transform: uppercase;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

.article-card-cover {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--gold) 0%, #d4a44a 100%);
  position: relative;
  overflow: hidden;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.5s;
}

.article-card-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--black);
  position: relative;
  z-index: 2;
  letter-spacing: -0.005em;
}

.article-card-cover-title em { font-style: italic; }

.article-card-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(14,12,10,0.0) 0%, rgba(14,12,10,0.25) 100%);
  pointer-events: none;
}

.article-card-cta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  transition: color 0.3s;
}

.article-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  text-transform: uppercase;
}

.article-card-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,243,236,0.75);
  font-weight: 300;
  margin-bottom: 22px;
  flex-grow: 1;
}

.article-card-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.article-card-readtime {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}

.article-card-readtime::before {
  content: '·';
  margin-right: 8px;
  color: var(--warm-grey);
}

.article-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--cream);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.article-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.article-card:hover .article-card-cover { transform: scale(1.02); }

.article-card:hover .article-card-cta { color: var(--gold-light); }

.article-category {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-bottom: 32px;
  font-weight: 400;
}

.article-cover {
  padding: 140px 48px 100px;
  background: linear-gradient(135deg, #2c2c54 0%, #1e1e3f 100%);
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}

.article-cover-inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.article-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 30%, rgba(200,151,58,0.12) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(91,69,150,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.article-cta {
  padding: 80px 48px 100px;
  background: var(--black);
}

.article-cta-inner {
  max-width: 880px;
  margin: 0 auto;
}

.article-intro {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(247,243,236,0.92);
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.article-intro em {
  color: var(--gold);
  font-style: italic;
}

.article-intro strong {
  color: var(--cream);
  font-weight: 500;
}

.article-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(200,151,58,0.25);
}

.article-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(247,243,236,0.75);
  text-transform: uppercase;
}

.article-meta-item strong {
  color: var(--cream);
  font-weight: 500;
}

.article-meta-item.gold { color: var(--gold-light); }

.article-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 28px;
  max-width: 850px;
}

.article-title em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}

.cover-bangkok .article-card-category { color: var(--gold-light); }

.cover-bangkok .article-card-category, .cover-bangkok .article-card-cover-title { color: var(--cream); }

.cover-food .article-card-category, .cover-food .article-card-cover-title { color: var(--cream); }

.cover-investimenti .article-card-category { color: var(--gold); }

.cover-investimenti .article-card-category, .cover-investimenti .article-card-cover-title { color: var(--cream); }

.cover-viaggi .article-card-category, .cover-viaggi .article-card-cover-title { color: var(--cream); }

/* ===== CHIUSURA ARTICOLO (outro + social) ===== */
.article-outro {
  padding: 64px 48px 72px;
  background: var(--color-bg-page);
}

.article-outro-inner {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.article-outro-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

.article-outro-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin-bottom: 22px;
}

.article-outro-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.article-outro-text a {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transition: color 0.3s;
}

.article-outro-text a:hover { color: var(--color-accent-dark); }

/* Icone social: centrate, grandi, scure su sfondo chiaro */
.article-outro-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 36px 0 28px;
}

.article-outro-social a {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-primary);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.article-outro-social a svg {
  width: 28px;
  height: 28px;
  display: block;
}

.article-outro-social a:hover {
  color: var(--color-bg-page);
  border-color: var(--color-accent);
  background: var(--color-accent);
}

@media (max-width: 880px) {
  .article-outro { padding: 48px 24px 56px; }
  .article-outro-social a { width: 54px; height: 54px; }
  .article-outro-social a svg { width: 25px; height: 25px; }
}

/* ============================================================
   Legal pages (privacy, cookie)
   19 regole CSS
   ============================================================ */

.legal-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 48px 120px;
}

.legal-content a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,151,58,0.4);
  transition: border-color 0.3s;
}

.legal-content a:hover { border-color: var(--gold); }

.legal-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  margin: 60px 0 22px;
  letter-spacing: -0.005em;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.legal-content h2 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.legal-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content li {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(247,243,236,0.85);
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
}

.legal-content li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -3px;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.legal-content p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247,243,236,0.85);
  margin-bottom: 18px;
}

.legal-content strong {
  color: var(--cream);
  font-weight: 500;
}

.legal-content ul {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
}

.legal-footer-note {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: rgba(247,243,236,0.6);
}

.legal-hero {
  padding: 160px 0 60px;
  background: linear-gradient(180deg, var(--black) 0%, #1a1612 100%);
}

.legal-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 48px;
}

.legal-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warm-grey);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-transform: uppercase;
}

.legal-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.legal-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.legal-title {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.legal-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

/* ============================================================
   Error pages (404)
   14 regole CSS
   ============================================================ */

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-code {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(80px, 16vw, 180px);
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 16px;
}

.error-inner {
  max-width: 680px;
  text-align: center;
}

.error-suggestion {
  padding: 20px;
  border: 1px solid var(--border);
  transition: border-color 0.3s;
}

.error-suggestion-desc {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(247,243,236,0.6);
}

.error-suggestion:hover { border-color: var(--gold); }

.error-suggestions {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.error-suggestions-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--warm-grey);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.error-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.error-tag::before, .error-tag::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.error-text {
  font-size: clamp(16px, 1.4vw, 18px);
  color: rgba(247,243,236,0.78);
  margin-bottom: 48px;
}

.error-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.error-title em {
  font-style: italic;
  color: var(--gold);
}

.error-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
}

/* ============================================================
   Responsive @media queries
   45 blocchi @media
   ============================================================ */

@media (max-width: 720px) {
  .nav { padding: 16px 24px; }
  .error-wrap { padding: 48px 24px; }
}

@media (max-width: 880px) { .nav { padding: 16px 24px; } .nav-links { display: none; } .nav-toggle { display: block; } }

@media (max-width: 980px) {
  .hero { padding: 120px 24px 70px; }
  .hero-inner { grid-template-columns: 1fr; gap: 50px; }
  .hero-cover { max-width: 320px; margin: 0 auto; aspect-ratio: 1/1; }
}

@media (max-width: 880px) {
  .preview { padding: 70px 24px; }
  .preview-grid { grid-template-columns: 1fr; gap: 20px; }
  .preview-item { padding: 28px 24px; }
}

@media (max-width: 880px) {
  .bonus-block { padding: 36px 26px; margin-top: 36px; }
  .bonus-tag { left: 22px; }
  .micro-block { padding: 36px 24px; margin-top: 36px; }
  .micro-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 880px) { .optin { padding: 70px 24px; } }

@media (max-width: 880px) { .promise { padding: 60px 24px; } }

@media (max-width: 880px) { footer { padding: 50px 24px 24px; } .footer-top { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

@media (max-width: 600px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; gap: 14px; } .cookie-btn { width: 100%; padding: 14px; } }

@media (max-width: 880px) {
  .hero { padding: 120px 24px 70px; }
  .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-image { order: -1; max-width: 360px; margin: 0 auto; width: 100%; }
}

@media (max-width: 880px) { .statement { padding: 60px 24px; } }

@media (max-width: 980px) {
  .section { padding: 70px 24px; }
  .kit-grid { grid-template-columns: 1fr; gap: 20px; }
  .kit-item { padding: 32px 28px; }
}

@media (max-width: 980px) {
  .itinerari { padding: 70px 24px; }
  .itinerari-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 880px) {
  .perchi { padding: 70px 24px; }
  .perchi-inner { grid-template-columns: 1fr; gap: 24px; }
  .perchi-block { padding: 28px; }
}

@media (max-width: 880px) { .storia { padding: 70px 24px; } }

@media (max-width: 880px) { .cta-finale { padding: 70px 24px; } }

@media (max-width: 880px) { .disclaimer { padding: 40px 24px; } }

@media (max-width: 880px) { .page-hero { padding: 130px 24px 50px; } }

@media (max-width: 880px) { .filters { padding: 20px 16px 40px; } .filters-inner { gap: 8px; } .filter-btn { padding: 10px 14px; font-size: 10px; } }

@media (max-width: 880px) {
  .articles-section { padding: 40px 24px 80px; }
  .articles-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 880px) { .newsletter { padding: 70px 24px; } }

@media (max-width: 880px) { .page-hero { padding: 130px 24px 70px; } }

@media (max-width: 980px) {
  .consultations { padding: 70px 24px; }
  .consultation { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
  .consult-pricing { margin-bottom: 22px; }
  .consult-food-wrap { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
  .consult-food-blocks { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 880px) { .cases { padding: 70px 24px; } }

@media (max-width: 880px) { .final-cta { padding: 70px 24px; } }

@media (max-width: 880px) { .page-hero { padding: 130px 24px 60px; } }

@media (max-width: 880px) {
  .contact {
    grid-template-columns: 1fr;
    padding: 70px 24px;
    gap: 50px;
  }
  .contact-info { margin-top: 40px; padding-top: 24px; }
}

@media (max-width: 980px) {
  .socials { padding: 70px 24px; }
  .socials-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .social-card { padding: 32px 20px; }
}

@media (max-width: 540px) {
  .socials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) { .faq { padding: 70px 24px; } }

@media (max-width: 880px) {
  .legal-hero { padding: 130px 0 50px; }
  .legal-hero-inner { padding: 0 24px; }
  .legal-content { padding: 40px 24px 80px; }
}

@media (max-width: 880px) {
  .hero { padding: 120px 24px 60px; min-height: auto; }
  .hero-lead { font-size: 18px; margin-bottom: 40px; }
  .hero-cta-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cta-card {
    min-height: 140px;
    padding: 28px 24px 24px;
  }
  .cta-card-arrow { top: 20px; right: 22px; font-size: 22px; }
  .cta-card-title { font-size: 26px; }
}

@media (max-width: 880px) {
  section { padding: 70px 24px; }
  .section-header { margin-bottom: 44px; }
}

@media (max-width: 880px) {
  .about { padding: 70px 24px; }
  .about-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .about-photo-wrap { max-width: 380px; margin: 0 auto; width: 100%; }
  .about-text-wrap { padding-top: 0; }
  .about-creds { gap: 32px; margin-top: 32px; padding-top: 24px; }
}

@media (max-width: 880px) {
  .offer { padding: 70px 24px; }
  .offer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .offer-card {
    padding: 40px 32px;
    min-height: auto;
  }
  .offer-card-title { margin-bottom: 22px; }
  .offer-card-desc { margin-bottom: 28px; }
}

@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; gap: 14px; }
  .cookie-text { font-size: 14px; }
  .cookie-btn { width: 100%; padding: 14px; }
}

@media (max-width: 880px) {
  .sessione { padding: 70px 24px; }
  .sessione-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 880px) { .statement { padding: 50px 24px; } }

@media (max-width: 880px) {
  .section { padding: 70px 24px; }
  .kit-grid { grid-template-columns: 1fr; gap: 20px; }
  .kit-item { padding: 32px 28px; }
}

@media (max-width: 880px) {
  .leadmagnet-section { padding: 50px 24px 70px; }
  .leadmagnet-grid { grid-template-columns: 1fr; gap: 20px; }
  .leadmagnet-body { padding: 26px 24px; }
}

@media (max-width: 880px) {
  .products-section { padding: 60px 24px 80px; }
  .product-row { grid-template-columns: 1fr; }
  .product-img-wrap { aspect-ratio: 16/10; }
  .product-content { padding: 32px 28px; }
  .product-actions { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 880px) {
  .article-cover { padding: 110px 24px 70px; min-height: 420px; }
  .article-meta { gap: 14px; }
}

@media (max-width: 880px) {
  .article-body { padding: 60px 24px 40px; }
  .pull-quote { padding: 22px 22px 22px 24px; margin: 30px 0; }
  .pull-quote-text { padding-left: 12px; }
}

@media (max-width: 880px) {
  .article-cta { padding: 60px 24px 80px; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-card-img-wrap { aspect-ratio: 16/10; }
  .cta-card-content { padding: 32px 28px; }
  .cta-card-actions { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 880px) { .related { padding: 60px 24px; } }

/* ============================================================
   MOBILE TYPOGRAPHY — leggibilità su schermi piccoli
   Aggiunto: maggio 2026
   ============================================================ */

@media (max-width: 880px) {

  /* Body base — Cormorant Garamond ha tratti sottili,
     su mobile ha bisogno di più dimensione e respiro */
  body {
    font-size: 19px;
    line-height: 1.85;
  }

  /* Testi descrittivi nelle card e sezioni */
  .kit-desc {
    font-size: 17px;
    line-height: 1.8;
  }

  .offer-card-desc {
    font-size: 18px;
    line-height: 1.8;
  }

  .product-desc {
    font-size: 18px;
    line-height: 1.8;
  }

  .consult-desc {
    font-size: 18px;
    line-height: 1.8;
  }

  .section-subtitle {
    font-size: 19px;
    line-height: 1.8;
  }

  /* Label DM Mono — erano quasi illeggibili a 10px */
  .cred-label {
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  /* Credenziali (50 Top / 3+ / 13K+) — forzo riga unica */
  .about-creds {
    flex-wrap: nowrap;
    gap: 24px;
  }

  .cred-num {
    font-size: 22px;
  }

  /* Storia e testi lunghi */
  .storia-text {
    font-size: 19px;
    line-height: 1.8;
  }

}
/* ============================================================
   THEME — Applicazione del tema chiaro ai componenti
   ============================================================
   Versione: maggio 2026

   Questo file è L'UNICO posto dove vengono dichiarate le regole
   di colore specifiche per il tema chiaro. Tutti gli override
   "!important" sparsi nel bundle precedente sono stati eliminati
   e riunificati qui in modo ordinato.

   ARCHITETTURA:
   1. ISOLE SCURE     → nav, statement, sessione (sfondo nero/gold)
   2. PAGINA          → sfondo bianco caldo, testo nero
   3. BOX             → sfondo cream, bordo sottile, divisori interni
   4. TIPOGRAFIA      → titoli centrati, no max-width che forza capi
   5. ELEMENTI SPEC   → bottoni, form, link, FAQ, articoli

   ORDINE: dal generico al specifico. Le regole successive
   sovrascrivono le precedenti dove necessario.

   PRINCIPIO: niente !important salvo dove strettamente necessario
   per vincere su regole legacy che non possiamo modificare.
   ============================================================ */


/* ============================================================
   1. ISOLE SCURE — nav, statement, sessione manifesto
   ============================================================
   Queste sezioni RESTANO scure o gold per fare contrasto
   con il resto del sito chiaro. Sono "isole" di forte impatto.

   IMPORTANTE: qui usiamo valori ESPLICITI o le variabili
   --color-bg-dark / --color-text-on-dark. Non possiamo usare
   --black o --cream perché ora questi significano "nero" e
   "cream" (semantica standard), non più "sfondo scuro" e
   "testo cream".
   ============================================================ */

/* --- NAV in alto: sfondo scuro, testi cream, logo gold --- */
.nav {
  background: rgba(14, 12, 10, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-gold);
}

.nav-links a {
  color: var(--color-text-on-dark);
  opacity: 0.75;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent);
  opacity: 1;
}

.nav-links a.active::after {
  background: var(--color-accent);
}

.nav-logo span {
  color: var(--color-accent);
}

/* Hamburger mobile — linee cream su nav scura */
.nav-toggle span {
  background: var(--color-text-on-dark);
}

/* Menu mobile aperto: sfondo scuro come la nav */
.mobile-menu,
.nav-drawer {
  background: var(--color-bg-dark);
  border-left: 1px solid var(--color-border-gold);
}

.mobile-menu a,
.nav-mobile-link,
.nav-drawer a {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-border-gold);
}

.mobile-menu a:hover,
.mobile-menu a.active,
.nav-mobile-link:hover,
.nav-drawer a:hover {
  color: var(--color-accent);
}

.mobile-menu a em {
  color: var(--color-accent);
}


/* --- STATEMENT / SESSIONE: blocchi gold pieno --- */
.statement,
.sessione {
  background: linear-gradient(135deg, var(--color-accent) 0%, #D4A44A 100%);
}

.statement h2,
.statement p,
.statement p strong,
.statement-divider,
.sessione,
.sessione *,
.sessione h2,
.sessione p,
.sessione h2 em {
  color: var(--color-text-primary);
}


/* ============================================================
   2. PAGINA — sfondo bianco caldo, testi neri
   ============================================================ */

/* Sezioni generiche: trasparenti, ereditano lo sfondo pagina */
section,
.section {
  background: transparent;
  color: var(--color-text-primary);
}

/* Separatori tra sezioni: linea sottile gold tenue */
.section-separator {
  background: var(--color-bg-page);
}

.section-separator-line {
  background: var(--color-border);
}

.section-separator-line::before {
  background: var(--color-bg-page);
  color: var(--color-accent);
}


/* ============================================================
   3. BOX — sfondo cream, bordo sottile esterno, divisori interni
   ============================================================
   Stile unificato per tutte le card del sito:
   consulenze, prodotti, lead magnet, casi studio, offer,
   social, articoli blog, FAQ.
   ============================================================ */

.consultation,
.consultation-featured,
.product-row,
.leadmagnet-card,
.case-card,
.cases,
.offer-card,
.social-card,
.kit-item,
.preview-item,
.perchi-block,
.bonus-block,
.micro-block,
.cta-card {
  background: var(--color-bg-box);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

/* Hover discreto: il bordo si tinge di gold */
.consultation:hover,
.product-row:hover,
.leadmagnet-card:hover,
.case-card:hover,
.offer-card:hover,
.cta-card:hover {
  border-color: var(--color-accent);
}

/* Featured (consulenze in evidenza): bordo già gold */
.consultation-featured {
  border-color: var(--color-accent);
}


/* --- Testo dentro le box: nero, gold solo per accenti --- */

.consult-title,
.consult-desc,
.consult-num,
.product-title,
.product-desc,
.leadmagnet-title,
.leadmagnet-desc,
.case-title,
.case-num,
.case-desc,
.offer-card-title,
.offer-card-desc {
  color: var(--color-text-primary);
}

/* Italic dorato dentro i titoli */
.consult-title em,
.product-title em,
.offer-card-title em,
.section-title em,
.hero-title em,
.page-hero-title em {
  color: var(--color-accent);
  font-style: italic;
}

/* Eyebrow (etichette piccole sopra i titoli) */
.consult-tag,
.product-eyebrow,
.offer-card-eyebrow,
.case-tag,
.section-eyebrow,
.page-hero-eyebrow {
  color: var(--color-accent);
}

.consult-tag::before {
  background: var(--color-accent);
}

/* Prezzi e CTA testuali → gold */
.consult-price,
.product-price,
.consult-price-custom,
.case-result {
  color: var(--color-accent);
}

/* Prezzo vecchio (barrato) → grigio chiaro */
.product-price-old {
  color: var(--color-text-subtle);
  text-decoration-color: var(--color-text-subtle);
}

/* Note prezzo e durata: testo muted */
.consult-price-note,
.consult-duration,
.product-price-note {
  color: var(--color-text-subtle);
}


/* --- Divisori interni alle box --- */

.consult-pricing,
.product-divider,
.case-divider {
  border-top: 1px solid var(--color-border);
}


/* --- Liste dentro le box --- */

.consult-block li,
.product-row li {
  color: var(--color-text-muted);
}

.consult-block li::before,
.product-row li::before {
  color: var(--color-text-subtle);
}

.consult-block-title {
  color: var(--color-text-muted);
}

.consult-block-title::before {
  background: var(--color-text-subtle);
}


/* --- Badge promo: sfondo gold, testo nero --- */
.product-promo-badge {
  background: var(--color-accent);
  color: var(--color-text-primary);
}


/* --- CTA card su sfondo gold pieno: testo nero esplicito.
   La cta-card di default ha background: var(--gold) e usa
   color: var(--black) che ora vale bianco caldo. Forziamo nero. --- */
.cta-card:not(.cta-card-ghost) {
  color: var(--color-text-primary);
}

.cta-card:not(.cta-card-ghost) .cta-card-title,
.cta-card:not(.cta-card-ghost) .cta-card-sub,
.cta-card:not(.cta-card-ghost) .cta-card-arrow {
  color: var(--color-text-primary);
}


/* ============================================================
   4. HERO — sfondo cream come le box, testo nero, italic gold
   ============================================================
   Hero della home e page-hero delle pagine interne.
   Specifica esplicita dell'utente: "le hero, sfondo crema,
   testo nero e oro".
   ============================================================ */

.hero,
.page-hero,
.article-cover {
  background: var(--color-bg-box);
  border-bottom: 1px solid var(--color-border);
}

.hero-title,
.hero-subtitle,
.hero-lead,
.page-hero-title,
.page-hero-subtitle,
.article-cover * {
  color: var(--color-text-primary);
}

/* Eyebrow hero in gold */
.page-hero-eyebrow {
  color: var(--color-accent);
}

/* Pattern decorativo dietro la hero (se presente): più tenue */
.hero::before {
  opacity: 0.04;
}


/* ============================================================
   5. FOOTER — chiaro come la pagina
   ============================================================ */

footer,
.footer {
  background: var(--color-bg-page);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.footer-title,
.footer-brand-name {
  color: var(--color-text-primary);
}

.footer-brand-name span {
  color: var(--color-accent);
}

.footer-desc,
.footer-copy,
.footer-legal {
  color: var(--color-text-muted);
}

.footer-col-title {
  color: var(--color-accent);
}

.footer-links a {
  color: var(--color-text-muted);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  border-top-color: var(--color-border);
}

/* Social icon nel footer: bordo sottile gold sottile */
.footer-social-link {
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}

.footer-social-link:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-page);
}


/* ============================================================
   6. COOKIE BANNER — chiaro
   ============================================================ */

.cookie-banner {
  background: var(--color-bg-box);
  border: 1px solid var(--color-border-gold);
  color: var(--color-text-primary);
}

.cookie-text {
  color: var(--color-text-primary);
}


/* ============================================================
   7. NEWSLETTER — chiara
   ============================================================ */

.newsletter {
  background: var(--color-bg-box);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.newsletter .section-title,
.newsletter h2 {
  color: var(--color-text-primary);
}

.newsletter .section-title em {
  color: var(--color-accent);
}

.newsletter .section-subtitle {
  color: var(--color-text-muted);
}


/* ============================================================
   8. FAQ — su sfondo pagina, righe separate da bordo sottile
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}

.faq-question {
  color: var(--color-text-primary);
}

.faq-answer {
  color: var(--color-text-muted);
}


/* ============================================================
   9. ARTICOLO BLOG
   ============================================================ */

.article-body {
  background: var(--color-bg-page);
}

.article-body h2,
.article-body h3,
.article-body p,
.article-body li {
  color: var(--color-text-primary);
}

.article-body p em {
  color: var(--color-accent);
}

.pull-quote {
  background: var(--color-bg-box);
  border-left: 4px solid var(--color-accent);
}

.pull-quote-text {
  color: var(--color-text-primary);
}


/* ============================================================
   10. FILTRI BLOG
   ============================================================ */

.filter-btn {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  background: transparent;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}


/* ============================================================
   11. FORM INPUT
   ============================================================ */

input,
textarea,
select {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
}


/* ============================================================
   12. BOTTONI GHOST / OUTLINE — visibili sul chiaro
   ============================================================ */

.btn-ghost,
.btn-outline {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  background: transparent;
}

.btn-ghost:hover,
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ============================================================
   13. TIPOGRAFIA — titoli adattati alla riga, centrati
   ============================================================
   Specifica esplicita dell'utente:
   "i titoli e sottotitoli devono essere adattati sviluppando
    in linea e non andare a capo a caso, impostandoli partendo
    dal centro (impostazione centrale)"

   APPROCCIO:
   1. Rimuoviamo max-width vincolanti dai titoli
   2. Su schermi DESKTOP (≥ 1280px) forziamo i titoli a stare
      su UNA SOLA RIGA (white-space: nowrap)
   3. Su mobile/tablet permettiamo il ritorno a capo automatico
      perché altrimenti il testo esce dallo schermo
   ============================================================ */

/* Nessun max-width che forzi a capo inutili.
   !important necessario per sovrascrivere hero.css/home.css
   che dichiarano max-width espliciti ai titoli. */
.section-title,
.hero-title,
.page-hero-title,
.page-title,
.consult-title,
.product-title,
.offer-card-title,
.leadmagnet-title,
.case-title,
.storia-title,
.about-title,
.cta-card-title,
.consulenza-card-title,
.itinerario-card-title,
.product-card-title,
.cta-finale h2,
.cta-finale h1,
.contact h2,
.contact h1,
.hero h1,
.hero h2,
.page-hero h1,
.page-hero h2,
.about h2,
.about h1,
.newsletter h2,
.newsletter h1,
section > h1,
section > h2,
section > div > h1,
section > div > h2,
h1,
h2 {
  max-width: none !important;
  width: auto !important;
  white-space: normal;
  text-wrap: balance;
}

/* Titoli sezione: centrati, scalano sulla larghezza */
.section-title {
  font-size: clamp(32px, 5vw, 64px);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Sottotitoli sezione: centrati, larghezza più generosa */
.section-subtitle,
.section-lead,
.page-lead,
.hero-lead {
  text-align: center;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: pretty;
}

/* Hero principale: titolo grande */
.hero-title,
.page-title,
.hero h1 {
  font-size: clamp(40px, 7vw, 96px) !important;
}

/* Page hero (pagine interne) */
.page-hero-title,
.page-hero h1 {
  font-size: clamp(40px, 6vw, 84px) !important;
}

/* Sottotitolo page-hero più largo */
.page-hero-subtitle {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Titoli card più grandi: scalano ma stanno in una riga il più possibile */
.consult-title {
  font-size: clamp(28px, 3.5vw, 44px);
}

.product-title {
  font-size: clamp(26px, 3vw, 40px);
}

/* ============================================================
   TITOLI SU DESKTOP — più larghezza, meno spezzature
   ============================================================
   Su schermi ≥ 1280px allarghiamo TUTTI i contenitori del sito
   per dare spazio ai titoli di stare in una riga.

   NOTA: questi override hanno !important perché devono vincere
   sui max-width dichiarati nei file componenti (hero.css,
   section.css, home.css, ecc.). È l'unico modo per garantire
   la specifica utente "una sola riga dove possibile".
   ============================================================ */

@media (min-width: 1280px) {

  /* Allarghiamo TUTTI i contenitori principali */
  .hero-inner,
  .page-hero-inner,
  .section-inner,
  .about-inner,
  .newsletter-inner,
  .cta-finale-inner,
  .contact-inner {
    max-width: 1500px !important;
  }

  /* Padding ridotto sui contenitori esterni per recuperare spazio */
  .hero,
  .page-hero,
  .section,
  section,
  .about,
  .newsletter,
  .cta-finale,
  .contact {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Su schermi MOLTO grandi (≥ 1600px), ancora più spazio */
@media (min-width: 1600px) {
  .hero-inner,
  .page-hero-inner,
  .section-inner,
  .about-inner,
  .newsletter-inner,
  .cta-finale-inner,
  .contact-inner {
    max-width: 1700px !important;
  }
}


/* ============================================================
   14. MOBILE — leggibilità su schermi piccoli
   ============================================================
   (Le media query strutturali stanno in 5-utilities/responsive.css.
    Qui solo gli aggiustamenti tipografici del tema chiaro.)
   ============================================================ */

@media (max-width: 880px) {

  body {
    font-size: 19px;
    line-height: 1.85;
  }

  .kit-desc,
  .offer-card-desc,
  .product-desc,
  .consult-desc,
  .section-subtitle {
    font-size: 18px;
    line-height: 1.8;
  }

  .cred-label {
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  .about-creds {
    flex-wrap: nowrap;
    gap: 24px;
  }

  .cred-num {
    font-size: 22px;
  }

  .storia-text {
    font-size: 19px;
    line-height: 1.8;
  }
}


/* ============================================================
   15. FOTO E IMMAGINI — stile coerente per tutte le immagini
   ============================================================
   Aggiunto: maggio 2026

   Regole per le foto inserite nelle varie sezioni del sito.
   Stile uniforme: bordo sottile, angoli leggermente arrotondati,
   nessuna ombra (coerente con il design piatto/editoriale),
   hover discreto.

   USO:
   - .photo-block         → contenitore generico per foto inline
   - .photo-block-hero    → foto grande sotto hero (quadrata)
   - .photo-block-banner  → foto wide/orizzontale
   - .photo-block-contact → foto verticale sezione contatti
   - .case-photo          → foto header dentro le card caso studio
   - .offer-card-photo    → foto header dentro le offer card
   - .about-photo         → foto principale della sezione Chi sono
                            (regole già esistenti, integrate qui)
   ============================================================ */

/* --- Contenitore generico foto inline --- */
.photo-block {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-box);
}

.photo-block img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.photo-block:hover img {
  transform: scale(1.02);
}

/* --- Variante hero: foto quadrata centrata, max 500px --- */
.photo-block-hero {
  aspect-ratio: 1 / 1;
}

.photo-block-hero img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
}

/* --- Variante banner: foto wide orizzontale --- */
.photo-block-banner {
  aspect-ratio: 16 / 9;
}

.photo-block-banner img {
  width: 100%;
  height: 100%;
  object-position: center;
}

/* --- Variante contatti: foto verticale, allineata a sinistra --- */
.photo-block-contact {
  aspect-ratio: 4 / 5;
  max-width: 480px;
}

.photo-block-contact img {
  width: 100%;
  height: 100%;
}


/* ============================================================
   FOTO DENTRO LE CARD CASO STUDIO
   ============================================================ */
.case-photo {
  width: 100%;
  margin: 0 0 24px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-page);
}

.case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.case:hover .case-photo img {
  transform: scale(1.03);
}


/* ============================================================
   FOTO DENTRO LE OFFER CARD (Lavoriamo / Guide e kit)
   ============================================================ */
.offer-card-photo {
  width: 100%;
  margin: 0 0 28px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-page);
}

.offer-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.offer-card:hover .offer-card-photo img {
  transform: scale(1.03);
}


/* ============================================================
   FOTO SEZIONE "CHI SONO" — stile coerente col resto
   ============================================================
   La sezione .about-photo aveva regole pre-esistenti. Le
   completiamo per essere coerenti col nuovo set foto.
   ============================================================ */

.about-photo {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-box);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.about-photo:hover img {
  transform: scale(1.02);
}

/* Nasconde il fallback "Foto in arrivo" quando l'immagine c'è */
.about-photo .photo-fallback-text {
  display: none;
}


/* ============================================================
   FIGURE: reset margini di default del browser
   ============================================================
   I tag <figure> hanno margini di default che rompono
   l'allineamento. Li azzeriamo.
   ============================================================ */

figure.photo-block,
figure.case-photo,
figure.offer-card-photo {
  margin-top: 0;
  margin-bottom: 0;
}

figure.photo-block {
  margin-bottom: 0;
}


/* ============================================================
   RESPONSIVE — foto su mobile
   ============================================================ */

@media (max-width: 880px) {

  .photo-block-hero {
    max-width: 100% !important;
  }

  .photo-block-banner {
    aspect-ratio: 4 / 3;
  }

  .photo-block-contact {
    max-width: 100% !important;
    aspect-ratio: 4 / 3;
    margin-left: auto;
    margin-right: auto;
  }

  .case-photo,
  .offer-card-photo {
    aspect-ratio: 16 / 9;
  }
}


/* ============================================================
   16. HERO CON SFONDO FOTO + VELO
   ============================================================
   Aggiunto: maggio 2026

   Variante hero "cinematografica": foto a tutta larghezza come
   sfondo, velo cream traslucido al 55% sopra per garantire
   leggibilità del testo nero.

   STRUTTURA HTML attesa:
   <section class="hero hero-with-bg">
     <div class="hero-bg-image"><img src="..." aria-hidden="true"></div>
     <div class="hero-bg-overlay"></div>
     <div class="hero-inner">...contenuto...</div>
   </section>
   ============================================================ */

.hero-with-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Annulliamo eventuali sfondi o bordi del .hero base */
  background: transparent !important;
}

/* Immagine di sfondo: copre tutta la sezione */
.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Velo cream traslucido sopra la foto (55% di copertura) */
.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(250, 250, 247, 0.55);
  /* gradient leggero per dare profondità: più coprente in basso
     dove ci sono i bottoni, leggermente meno in alto */
  background: linear-gradient(
    180deg,
    rgba(250, 250, 247, 0.50) 0%,
    rgba(250, 250, 247, 0.58) 50%,
    rgba(250, 250, 247, 0.62) 100%
  );
}

/* Contenuto sopra il velo */
.hero-with-bg .hero-inner {
  position: relative;
  z-index: 2;
}

/* I bottoni dentro l'hero con sfondo: aggiungiamo un velo
   leggero al loro background per migliorare il contrasto */
.hero-with-bg .cta-card {
  background: rgba(239, 233, 221, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-with-bg .cta-card:hover {
  background: rgba(239, 233, 221, 0.95);
}

.hero-with-bg .cta-card.cta-card-ghost {
  background: rgba(250, 250, 247, 0.65);
}

.hero-with-bg .cta-card.cta-card-ghost:hover {
  background: rgba(250, 250, 247, 0.85);
}

/* Mobile: velo leggermente più coprente per leggibilità */
@media (max-width: 880px) {
  .hero-bg-overlay {
    background: linear-gradient(
      180deg,
      rgba(250, 250, 247, 0.62) 0%,
      rgba(250, 250, 247, 0.68) 100%
    );
  }
}


/* ============================================================
   17. HERO LETTERBOX — blocco cream sopra foto piena
   ============================================================
   Aggiunto: maggio 2026

   Variante hero: foto a piena forza come sfondo (nessun velo
   coprente), con un "blocco cream" centrato sopra che contiene
   titolo, sottotitolo, bottoni. Il blocco è l'isola di
   leggibilità; la foto è il contesto cinematografico.

   STRUTTURA HTML:
   <section class="hero hero-with-bg hero-letterbox">
     <div class="hero-bg-image"><img></div>
     <div class="hero-inner">
       <div class="hero-content-box">
         ...titolo, sottotitolo, bottoni...
       </div>
     </div>
   </section>
   ============================================================ */

/* Velo cream leggero sopra la foto (22% di copertura).
   Funzione: uniformare la foto al tono cream del sito senza
   sacrificare la sua visibilità. Il blocco-letterbox sopra
   resta comunque ben staccato grazie all'ombra e al bordo. */
.hero-letterbox .hero-bg-overlay {
  display: block;
  background: rgba(239, 233, 221, 0.22);
}

/* La foto va a piena saturazione */
.hero-letterbox .hero-bg-image img {
  filter: brightness(0.95) contrast(1.02);
}

/* Inner: centrato, con padding per non far toccare il blocco
   ai bordi dello schermo */
.hero-letterbox .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
  min-height: 100vh;
  margin: 0;
}

/* IL BLOCCO CREAM — l'isola di testo che galleggia sopra la foto */
.hero-content-box {
  background: var(--color-bg-box);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px);
  max-width: 900px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(14, 12, 10, 0.25);
}

/* Tutti gli elementi interni centrati e con margini coerenti */
.hero-content-box .hero-tag {
  display: block;
  text-align: center;
  margin-bottom: 24px;
}

.hero-content-box .hero-title {
  text-align: center;
  margin-bottom: 32px;
}

.hero-content-box .hero-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.hero-content-box .hero-cta-grid {
  margin: 0 auto;
}

/* Mobile: blocco a quasi tutta larghezza, padding ridotto */
@media (max-width: 880px) {
  .hero-letterbox .hero-inner {
    padding: 24px 16px;
  }

  .hero-content-box {
    padding: 40px 24px;
    max-width: 100%;
  }

  .hero-content-box .hero-lead {
    margin-bottom: 36px;
  }
}

/* Su schermi molto piccoli, il blocco si "stacca" un po' meno */
@media (max-width: 480px) {
  .hero-letterbox .hero-inner {
    padding: 16px 12px;
  }

  .hero-content-box {
    padding: 32px 20px;
  }
}


/* ============================================================
   18. LEAD-MAGNET ORIZZONTALI (variante .product-row.is-free)
   ============================================================
   Aggiunto: maggio 2026

   I lead-magnet gratuiti adottano lo stesso layout dei prodotti
   a pagamento (.product-row) ma con due differenze:
   - Nastro diagonale "GRATIS" verde acceso in alto a sx
   - Niente prezzo, al suo posto un'etichetta "Scaricala gratis"
     e il form MailerLite invece dei bottoni Stripe
   ============================================================ */

/* Il container deve essere position:relative per posizionare
   il nastro in modo assoluto, e overflow:hidden per "tagliare"
   le code del nastro fuori dalla card */
.product-row.is-free {
  position: relative;
  overflow: hidden;
}

/* --- NASTRO "GRATIS" inclinato 45° in alto a sinistra --- */
.ribbon-free {
  position: absolute;
  top: 24px;
  left: -48px;
  z-index: 5;

  /* Forma e rotazione */
  transform: rotate(-45deg);
  transform-origin: center;
  width: 180px;
  padding: 8px 0;

  /* Colori: verde acceso (#4CAF50) con testo bianco */
  background: #4CAF50;
  color: #FFFFFF;

  /* Tipografia: DM Mono maiuscolo, stesso stile dei badge */
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;

  /* Ombra leggera per staccare il nastro dalla card */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  /* Niente bordi/decorazioni extra */
  border: none;
  pointer-events: none;
}

/* --- Prezzo "FREE": testo gold grande al posto del prezzo --- */
.product-pricing-free {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-price-free {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1.1;
}

/* --- Wrapper actions form MailerLite: occupa tutta la larghezza --- */
.product-actions-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-actions-form .ml-form-style-override-lead {
  width: 100%;
}


/* ============================================================
   RESPONSIVE LEAD-MAGNET
   ============================================================ */

@media (max-width: 880px) {
  /* Su mobile il nastro è più piccolo per non invadere */
  .ribbon-free {
    top: 18px;
    left: -52px;
    width: 160px;
    font-size: 11px;
    padding: 6px 0;
  }
}


/* ============================================================
   19. LEAD-MAGNET STACKED — cover sopra full-width + testo sotto
   ============================================================
   Aggiunto: maggio 2026

   Variante per i lead-magnet gratuiti: layout verticale con
   - Cover in 16:9 a tutta larghezza della card in alto
   - Testo + form sotto, centrati
   - Card larga come i prodotti a pagamento (.product-row)
   - Una card sotto l'altra

   STRUTTURA HTML:
   <article class="lead-magnet-stacked is-free">
     <span class="ribbon-free">Gratis</span>
     <div class="lead-magnet-cover"><img></div>
     <div class="lead-magnet-body">
       ...tag, titolo, desc, features, cta+form...
     </div>
   </article>
   ============================================================ */

/* Container card: stesso "look" di .product-row (cream, bordo,
   angoli arrotondati) ma con position relative per il nastro */
.lead-magnet-stacked {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-box);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  transition: border-color var(--transition-base);
}

.lead-magnet-stacked:hover {
  border-color: var(--color-accent);
}

/* COVER in alto, full-width, aspect ratio 16:9 */
.lead-magnet-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
}

.lead-magnet-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-slow);
}

.lead-magnet-stacked:hover .lead-magnet-cover img {
  transform: scale(1.02);
}

/* BODY sotto la cover: padding generoso, contenuti centrati */
.lead-magnet-body {
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tag categoria: gold mono maiuscolo */
.lead-magnet-body .product-tag {
  margin-bottom: var(--space-4);
}

/* Titolo */
.lead-magnet-body .product-name {
  margin-bottom: var(--space-4);
  text-align: center;
  max-width: 800px;
}

/* Descrizione */
.lead-magnet-body .product-desc {
  margin-bottom: var(--space-6);
  max-width: 700px;
  text-align: center;
}

/* Lista features: centrata, max-width contenuto */
.lead-magnet-body .product-features {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-8);
  max-width: 600px;
  text-align: left;
  width: fit-content;
}

.lead-magnet-body .product-features li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--color-text-muted);
}

.lead-magnet-body .product-features li::before {
  content: "·";
  position: absolute;
  left: 8px;
  top: 0;
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1.4em;
  line-height: 1;
}

/* Blocco CTA: prezzo "Scaricala gratis" + form */
.lead-magnet-cta {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lead-magnet-cta .product-price-free {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 4px;
}

.lead-magnet-cta .product-price-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}

/* Wrapper del form MailerLite: occupa tutta la larghezza della CTA */
.lead-magnet-cta .ml-form-style-override-lead {
  width: 100%;
}

.lead-magnet-cta .ml-embedded {
  width: 100%;
}


/* ============================================================
   RESPONSIVE LEAD-MAGNET STACKED
   ============================================================ */

@media (max-width: 880px) {
  .lead-magnet-body {
    padding: 28px 20px;
  }

  .lead-magnet-body .product-features {
    max-width: 100%;
  }
}


/* ============================================================
   20. PAID-PRODUCT STACKED — prodotti a pagamento, layout stacked
   ============================================================
   Aggiunto: maggio 2026

   Stesso layout dei lead-magnet-stacked, ma:
   - Niente nastro verde "GRATIS"
   - Badge promo angolato in alto a sinistra (gold)
   - CTA con prezzo + bottoni Stripe (no form)
   ============================================================ */

/* Container: identico a .lead-magnet-stacked */
.paid-product-stacked {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-box);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  transition: border-color var(--transition-base);
}

.paid-product-stacked:hover {
  border-color: var(--color-accent);
}

/* La cover e il body usano le stesse regole .lead-magnet-cover
   e .lead-magnet-body già definite — riusiamo quelle nell'HTML.
   Qui aggiungiamo solo gli stili specifici per CTA e badge angolato. */

/* Hover effetto zoom sulla cover */
.paid-product-stacked:hover .lead-magnet-cover img {
  transform: scale(1.02);
}

/* Badge promo angolato in alto a sinistra (variante gold) */
.product-promo-badge-corner {
  position: absolute;
  top: 24px;
  left: -48px;
  z-index: 5;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 180px;
  padding: 8px 0;
  background: var(--color-accent);
  color: var(--color-bg-page);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: none;
  pointer-events: none;
}

/* CTA del prodotto a pagamento */
.paid-product-cta {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Prezzi: lascio i font/colori originali (.product-price ecc.),
   aggiungo SOLO l'allineamento centrato della colonna */
.paid-product-pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Bottoni azione: 2 colonne su desktop, 1 su mobile */
.paid-product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .paid-product-actions {
    grid-template-columns: 1fr;
  }

  .product-promo-badge-corner {
    top: 18px;
    left: -52px;
    width: 160px;
    font-size: 11px;
    padding: 6px 0;
  }
}


/* ============================================================
   19. HERO BAND — home: foto come sfondo + titolo in banda piena
   ============================================================
   La home tiene la foto a tutto schermo, ma il titolo non sta
   più nel box centrato (letterbox): vive in una FASCIA scura
   full-width che attraversa la foto, nello stile delle .page-hero
   delle altre pagine. Coerenza visiva con il resto del sito.

   STRUTTURA HTML:
   <section class="hero hero-with-bg hero-band">
     <div class="hero-bg-image"><img></div>
     <div class="hero-bg-overlay"></div>
     <div class="hero-band-strip">      ← la fascia full-width
       <div class="hero-inner">         ← contenuto centrato
         ...titolo, lead, bottoni...
       </div>
     </div>
   </section>
   ============================================================ */

.hero-band {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: transparent !important;
}

/* Velo leggero sulla foto: resta ben visibile sopra/sotto la fascia */
.hero-band .hero-bg-overlay {
  display: block;
  background: rgba(239, 233, 221, 0.18);
}

.hero-band .hero-bg-image img {
  filter: brightness(0.92) contrast(1.02);
}

/* LA FASCIA — full-width, scura, attraversa tutta la pagina */
.hero-band-strip {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(14, 12, 10, 0.80) 0%,
    rgba(14, 12, 10, 0.72) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top: 1px solid var(--color-border-gold);
  border-bottom: 1px solid var(--color-border-gold);
  box-shadow: 0 20px 60px rgba(14, 12, 10, 0.22);
  padding: clamp(48px, 7vw, 92px) 0;
}

/* Contenuto interno: centrato e leggibile */
.hero-band .hero-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  text-align: center;
}

/* Testo chiaro sulla fascia scura (come le page-hero band) */
.hero-band .hero-tag {
  display: block;
  text-align: center;
  margin-bottom: 24px;
  color: var(--color-accent);
}

.hero-band .hero-tag::before {
  background: var(--color-accent);
}

.hero-band .hero-title {
  text-align: center;
  margin-bottom: 28px;
  color: var(--color-text-on-dark);
}

.hero-band .hero-title em {
  color: var(--color-accent);
}

.hero-band .hero-lead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  color: rgba(247, 243, 236, 0.85);
}

.hero-band .hero-lead strong {
  color: var(--color-text-on-dark);
}

.hero-band .hero-cta-grid {
  margin: 0 auto;
  justify-content: center;
}

@media (max-width: 880px) {
  .hero-band-strip {
    padding: 44px 0;
  }
  .hero-band .hero-inner {
    padding: 0 20px;
  }
}


/* ============================================================
   20. CORPO DEL TESTO — paragrafi a peso medium (500)
   ============================================================
   I paragrafi/corpo testo erano a font-weight 300 (light) e
   risultavano poco leggibili, soprattutto sui blocchi chiari.
   Li portiamo a 500 (medium) per migliorare la leggibilità
   mantenendo l'eleganza del serif.

   NOTA: NON tocchiamo titoli, eyebrow, tag o citazioni
   display — quelli restano leggeri di proposito. Questo blocco
   sta in fondo a theme.css (caricato per ultimo) così vince
   sulle dichiarazioni font-weight:300 dei file componenti a
   parità di specificità.
   ============================================================ */

p,
.hero-lead,
.hero-bio,
.hero-subtitle,
.about-bio,
.section-subtitle,
.section-lead,
.page-lead,
.page-hero-subtitle,
.product-desc,
.consult-desc,
.kit-desc,
.storia-text,
.itinerario-desc,
.offer-card-desc,
.social-desc,
.socials-subtitle,
.products-subtitle,
.newsletter-subtitle,
.newsletter-desc,
.cta-finale-text,
.final-cta-text,
.micro-subtitle,
.article-intro,
.article-card-excerpt,
.article-body p,
.legal-body p {
  font-weight: 500;
}


/* Liste dentro le caselle (consulenze + prodotti) → peso medium e
   dimensione più leggibile (solo peso e font-size) */
.consult-block li,
.product-features li,
.kit-points li {
  font-weight: 500;
  font-size: 17px;
}

/* Descrizioni delle schede prodotto un filo più grandi */
.kit-desc {
  font-size: 18px;
}