/* Relight condiviso: landing + pet lover + professionisti alla palette chiara
   dell'app (crema/ink/terracotta). Linkato DOPO lo <style> inline di ogni pagina,
   quindi vince. Reversibile: togliere il <link>. I token (--terra-*, --ink-*,
   --bg-app, --line, --slate-soft...) sono gia' definiti nel :root di ogni pagina. */

/* --ink-700 NON e' nella palette inline delle pagine (c'e' --ink-900/-600/-500/-400).
   Senza questa riga var(--ink-700) resta indefinito: barre dell'hamburger trasparenti
   (icona invisibile su fondo bianco), link del menu mobile e testi che ereditano. */
:root { --ink-700: #3E2E28; }

html { background: var(--bg-app); }

/* ── NAV: sempre visibile ovunque su fondo chiaro ── */
.nav {
  background: rgba(252, 249, 248, 0.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 16px rgba(28, 27, 27, 0.07);
}
.nav-brand, .wordmark { color: var(--ink-900); }
.nav-mark, .wordmark em, .nav-link:hover, .nav-brand .shz em { color: var(--terra-500); }
.nav-link { color: var(--ink-500); }
.nav-link.is-active { color: var(--ink-900); border-bottom: 1.5px solid var(--terra-500); padding-bottom: 2px; }
.lang-toggle { background: rgba(28, 27, 27, 0.05); }
.lang-btn { color: var(--ink-400); }
.lang-btn.is-on { background: var(--surface); color: var(--ink-900); }

/* ── HERO ── */
.hero { background-color: var(--bg-app); background-image: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(157, 58, 36, 0.08) 0%, transparent 62%); }
.hero::before { background: radial-gradient(ellipse 72% 46% at 50% 0%, rgba(224, 128, 102, 0.10) 0%, transparent 68%); }
.hero-eyebrow, .hero-h1 em { color: var(--terra-500); }
.hero-h1 { color: var(--ink-900); }
.hero-sub { color: var(--ink-500); }
.hero-scroll-label { color: rgba(28, 27, 27, 0.35); }
.hero-scroll-arrow { background: linear-gradient(to bottom, rgba(28, 27, 27, 0.16), transparent); }
.hero-scroll-arrow::after { border-right-color: rgba(28, 27, 27, 0.24); border-bottom-color: rgba(28, 27, 27, 0.24); }

/* ── PROOF STRIP (index) ── */
.proof-strip { background: var(--surface-2); border-top-color: var(--line); border-bottom-color: var(--line); }
.proof-cell { border-right-color: var(--line); }
.proof-num, .proof-label em { color: var(--terra-500); }
.proof-label { color: var(--ink-400); }

/* ── SEZIONE "NOME" + kanji (index) ── */
.nome-sec { background: var(--surface); }
.nome-eyebrow { color: var(--terra-500); }
.nome-subhead { color: var(--ink-900); }
.nome-body { color: var(--ink-500); }
.nome-body p + p { color: var(--ink-700); }
.nome-sec .shz em, .footer-credit .shz em { color: var(--terra-500); }
/* Kanji terracotta, piu' spesso: contorno dello stesso colore con join/cap
   arrotondati (paint-order stroke dietro il fill) per ingrossare i tratti senza
   bordi segmentati. Lo sfocamento originale liscia ulteriormente i contorni. */
.nome-kanji svg path { fill: var(--terra-500); stroke: var(--terra-500); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; }

/* ── BIFORCAZIONE: card Professionisti (index) ── */
.bif-card--pro { background: var(--slate-soft); }
.bif-card--pro .bif-tag { background: rgba(28, 27, 27, 0.06); color: var(--ink-500); }
.bif-card--pro .bif-h { color: var(--ink-900); }
.bif-card--pro .bif-body { color: var(--ink-600); }
.bif-card--pro .bif-cta { background: var(--terra-500); color: #fff; box-shadow: 0 4px 14px rgba(157, 58, 36, 0.20); }
.bif-card--pro .bif-cta .shz em { color: #fff; }
.bif-card--pro .bif-cta:hover { background: var(--terra-600); }

/* ── PROFESSIONISTI: card scura della griglia "assi" ── */
.assi-card--dark { background: var(--slate-soft); }
.assi-card--dark .assi-card-h { color: var(--ink-900); }
.assi-card--dark .assi-card-body { color: var(--ink-600); }
.assi-card--dark .assi-card-note { color: var(--terra-600); opacity: 1; }

/* ── PET LOVER: sezione Community ── */
.community-sec { background: var(--surface-2); color: var(--ink-800); }
.community-eyebrow { color: var(--terra-500); }
.community-h2 { color: var(--ink-900); }
.community-body { color: var(--ink-500); }
.community-col { border-right-color: var(--line); }

/* ── PET LOVER: CTA finale + form waitlist ── */
.cta-finale-sec { background-color: var(--bg-app); background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(157, 58, 36, 0.09) 0%, transparent 65%); }
.cta-finale-sec::before { background: radial-gradient(ellipse 60% 40% at 50% 40%, rgba(224, 128, 102, 0.10) 0%, transparent 65%); }
.cta-finale-h2 { color: var(--ink-900); }
.cta-finale-sub { color: var(--ink-500); }
.cta-finale-microcopy { color: var(--ink-400); }
.wl-input { border-color: var(--line); background: var(--surface); color: var(--ink-900); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), 0 2px 10px rgba(28, 27, 27, 0.05); }
.wl-input::placeholder { color: var(--ink-400); }
.wl-input:focus { border-color: var(--terra-300); background: var(--surface); box-shadow: 0 0 0 3px rgba(157, 58, 36, 0.14); }
.wl-btn { background: var(--terra-500); color: #fff; }

/* ── FOOTER ── */
.footer { background: var(--surface-2); border-top: 1px solid var(--line); }
.footer-word { color: var(--ink-500); }
.footer-word em { color: var(--terra-500); }
.footer-link { color: var(--ink-400); }

/* ── REVEAL: fallback anti "vuoto" ──────────────────────────────────────────
   Chi ha prefers-reduced-motion non deve vedere sezioni a opacity:0 se un
   ScrollTrigger non scatta: forziamo visibile (batte l'inline di gsap.from). */
@media (prefers-reduced-motion: reduce) {
  .gsap-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── NAV MOBILE: hamburger + menu a tendina (pagine statiche) ────────────────
   Sotto 900px .nav-links è display:none (media inline di pagina). Qui aggiungiamo
   un menu reale con le sezioni + CTA waitlist, così il mobile non resta bloccato. */
.nav-burger { display: none; }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  /* La CTA in barra è ridondante su mobile (è nel menu) e, restando a opacity:0
     con display:block, occupava larghezza spingendo l'hamburger fuori schermo. */
  .btn-nav-primary { display: none !important; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink-700);
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-mobile {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(252, 249, 248, 0.98);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(28, 27, 27, 0.10);
    padding: 8px 24px 18px;
  }
  .nav-mobile[hidden] { display: none; }
  .nav-mobile a {
    font: 500 16px/1 var(--font-sans); color: var(--ink-700); text-decoration: none;
    padding: 15px 4px; border-bottom: 1px solid var(--line);
  }
  .nav-mobile a:hover { color: var(--terra-500); }
  .nav-mobile .nav-mobile-cta {
    margin-top: 12px; border-bottom: none; text-align: center;
    background: var(--terra-500); color: #fff; border-radius: 999px; padding: 15px; font-weight: 700;
  }
  .nav-mobile .nav-mobile-cta:hover { color: #fff; background: var(--terra-600); }
}

/* ── FIX CONTRASTO: relight incompleto (testi rimasti "chiari" dal design scuro) ──
   1) Alcune pagine ridefiniscono --ink-400 con un grigio freddo troppo chiaro
      (#9CA1AE, ~2.5:1): lo riporto al valore del design system (WCAG AA).
   2) Testi con colore chiaro hardcoded (progettati per fondo scuro): resi scuri. */
:root { --ink-400: #6E6963; }
.hero-microcopy { color: #6E6963; }
.wl-note { color: #6E6963; }
.wl-ok { color: #46685A; }
.community-col-title { color: #1C1B1B; }
.community-col-body { color: #6E5A54; }
.professionisti-big-num { color: #BD5239; }
/* Wordmark "zu": deve essere terracotta brand #9D3A24 (terra-500), non terra-300
   (era ~2.4:1). I contesti su fondo scuro/terra restano coperti da regole piu' specifiche. */
.shz em { color: var(--terra-500); }
.libretto-footer-date, .storia-num { color: var(--terra-500); }
.cta-finale-body { color: var(--ink-500); }

/* ── Screenshot reale dell'app in "cornice telefono" ── */
.app-shot { max-width: 300px; margin: 0 auto; padding: 10px; border-radius: 42px;
  background: #1C1B1B; box-shadow: 0 30px 60px rgba(28,27,27,0.18), 0 8px 20px rgba(28,27,27,0.10); }
.app-shot img { display: block; width: 100%; height: auto; border-radius: 32px; }

/* ── Mockup "cartella condivisa" (professionisti) fedele all'app ── */
.mk-cov { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--slate-soft); }
.mk-ring { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--health);
  display: flex; align-items: center; justify-content: center; font: 400 15px/1 var(--font-display); color: var(--health); }
.mk-cov-text { display: flex; flex-direction: column; gap: 3px; }
.mk-cov-label { font: 700 10px/1.2 var(--font-sans); letter-spacing: 0.10em; text-transform: uppercase; color: var(--slate); }
.mk-cov-sub { font: 400 13px/1.35 var(--font-sans); color: var(--ink-700, #2E3038); }
.mk-rows { padding: 4px 0; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.mk-row-name { font: 400 13px/1 var(--font-sans); color: var(--ink-900); }
.mk-pill { font: 700 10px/1 var(--font-sans); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.mk-pill--ok { background: rgba(70,104,90,0.14); color: var(--health); }
.mk-admin { margin: 12px 20px 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mk-admin-head { display: flex; align-items: baseline; justify-content: space-between; }
.mk-admin-eyebrow { font: 700 9px/1 var(--font-sans); letter-spacing: 0.10em; text-transform: uppercase; color: var(--terra-600); }
.mk-admin-date { font: 400 11px/1 var(--font-sans); color: var(--ink-400); }
.mk-admin-title { font: 500 17px/1.2 var(--font-display); color: var(--ink-900); margin: 5px 0 9px; }
.mk-dots { display: flex; gap: 5px; margin-bottom: 8px; }
.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.mk-dots i.on { background: var(--terra-500); }
.mk-admin-meta { font: 400 11px/1 var(--font-sans); color: var(--ink-400); }