/* Tema chiaro — caricare dopo page.css / home.css */

/*
 * Logo solo in homepage (main.hero). Orizzontale: max(padding, 5%) in scuro e chiaro.
 * Asse verticale ≈ bottone .back (page.css).
 */
:root {
  --site-wrap-pad-x: 1.35rem;
  --site-wrap-pad-y: 2rem;
  --site-wrap-max: 46rem;
  /* .back: border 1px + padding 0.45×2 + line-height 1.65 × font-size 0.82rem */
  --site-back-block-height: calc(2px + 0.9rem + 1.65 * 0.82rem);
}

html {
  transition: background-color 0.55s ease;
}

html[data-theme="light"] {
  color-scheme: light;
  /* Allineato allo sfondo hero tema chiaro (medusa thin-dots, ~#f9f9f7) */
  --bg: #f9f9f7;
  --bg-elevated: rgba(255, 255, 255, 0.94);
  --accent: #006a78;
  --accent-soft: rgba(0, 106, 120, 0.55);
  --accent-glow: rgba(0, 106, 120, 0.1);
  --text: #152128;
  --text-muted: rgba(21, 33, 40, 0.82);
  --border: rgba(0, 90, 105, 0.28);
  --menu-dot: #7bcec8;
  --menu-dot-ring: rgba(90, 168, 162, 0.72);
  --menu-dot-glow: rgba(123, 206, 200, 0.38);
  background-color: var(--bg) !important;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] body::before {
  opacity: 0.04;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body::after {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(0, 70, 90, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 70, 90, 0.07) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 88% 68% at 50% 16%, black 0%, transparent 72%);
}

html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] textarea:focus-visible {
  outline: 2px solid rgba(0, 106, 120, 0.85);
}

/* ─── Pagine interne (page.css) ─── */
html[data-theme="light"] .back {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 40, 60, 0.06);
}

html[data-theme="light"] .back:hover,
html[data-theme="light"] .back:focus-visible {
  border-color: rgba(0, 106, 120, 0.4);
  color: #004a54;
  box-shadow: 0 0 18px rgba(0, 106, 120, 0.12);
}

html[data-theme="light"] .page-kicker {
  background: linear-gradient(135deg, rgba(0, 90, 105, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: inset 0 0 12px rgba(0, 106, 120, 0.06);
}

html[data-theme="light"] .page-title {
  background: linear-gradient(120deg, #0d3d45 0%, var(--accent) 48%, #004851 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

html[data-theme="light"] .page-lead strong {
  color: rgba(15, 28, 36, 0.95);
}

html[data-theme="light"] .page-feature-list li strong {
  color: #0f2530;
}

html[data-theme="light"] .page-feature-intro {
  color: #0f2530;
}

html[data-theme="light"] .contact-details {
  background: linear-gradient(152deg, #ffffff 0%, #f8fcfd 50%, #ffffff 100%);
  border-color: rgba(0, 106, 120, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 106, 120, 0.06),
    0 10px 32px rgba(0, 70, 90, 0.09),
    0 2px 8px rgba(0, 50, 70, 0.05);
}

/* Lucido in alto a destra: evita schiarimento a sinistra sul testo */
html[data-theme="light"] .contact-details::before {
  background: linear-gradient(
    205deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(123, 206, 200, 0.16) 32%,
    transparent 58%,
    rgba(0, 106, 120, 0.06) 100%
  );
}

html[data-theme="light"] .contact-details::after {
  width: 34%;
  mix-blend-mode: normal;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(123, 206, 200, 0.35) 36%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(123, 206, 200, 0.35) 64%,
    transparent 100%
  );
  box-shadow: 0 0 28px rgba(123, 206, 200, 0.25);
}

html[data-theme="light"] .contact-details__name,
html[data-theme="light"] .contact-details__list {
  color: #0f2530;
}

html[data-theme="light"] .contact-details__list {
  color: rgba(21, 33, 40, 0.88);
}

html[data-theme="light"] .contact-details__list a {
  color: rgba(0, 106, 120, 0.95);
}

/* Tema scuro: stesso effetto lucido, toni cyan */
html:not([data-theme="light"]) .contact-details {
  background: linear-gradient(
    155deg,
    rgba(14, 32, 48, 0.96) 0%,
    rgba(5, 14, 24, 0.9) 52%,
    rgba(10, 26, 40, 0.94) 100%
  );
  border-color: rgba(0, 240, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(0, 240, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 32px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(0, 170, 230, 0.1);
}

html:not([data-theme="light"]) .contact-details::before {
  background: linear-gradient(
    205deg,
    rgba(0, 240, 255, 0.22) 0%,
    rgba(0, 240, 255, 0.08) 34%,
    transparent 58%,
    rgba(0, 120, 150, 0.1) 100%
  );
}

html:not([data-theme="light"]) .contact-details::after {
  width: 38%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0, 240, 255, 0.28) 38%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(0, 240, 255, 0.28) 62%,
    transparent 100%
  );
  mix-blend-mode: screen;
  box-shadow: 0 0 36px rgba(0, 240, 255, 0.35);
}

html[data-theme="light"] .page-intro-card {
  border-color: rgba(0, 106, 120, 0.22);
  background: linear-gradient(152deg, #ffffff 0%, #f5fbfc 52%, #ffffff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 12px 36px rgba(0, 70, 90, 0.1),
    0 0 40px rgba(123, 206, 200, 0.18);
}

html[data-theme="light"] .page-intro-card::before {
  background: linear-gradient(
    205deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(123, 206, 200, 0.14) 35%,
    transparent 58%,
    rgba(0, 106, 120, 0.05) 100%
  );
}

html[data-theme="light"] .page-intro-card::after {
  width: 30%;
  mix-blend-mode: normal;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(123, 206, 200, 0.32) 38%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(123, 206, 200, 0.32) 62%,
    transparent 100%
  );
  box-shadow: 0 0 32px rgba(123, 206, 200, 0.22);
}

html[data-theme="light"] .page-intro-card__lead {
  color: rgba(21, 33, 40, 0.86);
}

html[data-theme="light"] .page-intro-card__lead strong {
  color: #0a2833;
  text-shadow: none;
}

html:not([data-theme="light"]) .page-intro-card {
  box-shadow:
    inset 0 1px 0 rgba(0, 240, 255, 0.18),
    0 14px 42px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(0, 200, 255, 0.16);
}

html:not([data-theme="light"]) .page-intro-card::after {
  width: 36%;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
}

html[data-theme="light"] .story-card__title {
  color: #0f2530;
}

html[data-theme="light"] .story-card__problem strong,
html[data-theme="light"] .story-card__custom strong,
html[data-theme="light"] .story-card__out strong {
  color: rgba(0, 106, 120, 0.95);
}

html[data-theme="light"] .page-cta__link {
  border: 1px solid rgba(0, 106, 120, 0.35);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 16px rgba(0, 60, 80, 0.08);
}

html[data-theme="light"] .page-cta__link:hover {
  border-color: rgba(0, 106, 120, 0.55);
  color: #003d46;
  box-shadow: 0 4px 20px rgba(0, 106, 120, 0.12);
}

html[data-theme="light"] .contact-form__note {
  color: rgba(40, 70, 90, 0.75);
}

html[data-theme="light"] .contact-form__label {
  color: rgba(0, 106, 120, 0.85);
}

html[data-theme="light"] .contact-form__optional {
  color: rgba(60, 90, 110, 0.55);
}

html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
}

html[data-theme="light"] .contact-form input:hover,
html[data-theme="light"] .contact-form textarea:hover {
  border-color: rgba(0, 106, 120, 0.35);
}

html[data-theme="light"] .contact-form__submit {
  color: #fff;
  background: linear-gradient(165deg, #009aad 0%, var(--accent) 100%);
  box-shadow: 0 2px 16px rgba(0, 106, 120, 0.25);
}

html[data-theme="light"] .page-footer {
  border-top-color: rgba(0, 106, 120, 0.15);
  color: rgba(0, 90, 105, 0.45);
}

html[data-theme="light"] .page-footer a {
  color: rgba(0, 106, 120, 0.65);
}

html[data-theme="light"] .page-footer a:hover {
  color: rgba(0, 60, 70, 0.95);
}

html[data-theme="light"] .tech-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 106, 120, 0.35) 40%,
    rgba(0, 106, 120, 0.55) 50%,
    rgba(0, 106, 120, 0.35) 60%,
    transparent
  );
}

html[data-theme="light"] .tech-card:hover {
  border-color: rgba(0, 106, 120, 0.35);
  box-shadow:
    0 12px 32px rgba(0, 40, 60, 0.12),
    0 0 0 1px rgba(0, 106, 120, 0.1);
}

html[data-theme="light"] .tech-card__icon {
  filter: drop-shadow(0 0 6px rgba(0, 106, 120, 0.35));
}

html[data-theme="light"] .tech-card__title {
  color: #0f2530;
}

html[data-theme="light"] .tag {
  color: rgba(0, 90, 105, 0.95);
  border-color: rgba(0, 106, 120, 0.22);
  background: rgba(0, 106, 120, 0.08);
}

html[data-theme="light"] .timeline li::before {
  box-shadow: 0 0 8px rgba(0, 106, 120, 0.35);
}

html[data-theme="light"] .faq__q {
  color: #0f2530;
}

html[data-theme="light"] .faq__a strong {
  color: rgba(0, 106, 120, 0.95);
}

html[data-theme="light"] .legal-meta {
  color: rgba(70, 100, 120, 0.65);
}

/* ─── Home (home.css) ─── */
/* Layer chiari: immagini in home.css; qui filtri e hover sul layer --light */
html[data-theme="light"] .hero__bg-layer--light {
  filter: saturate(1.06) brightness(1.02);
}

html[data-theme="light"] .hero__fluo-layer--light {
  filter: brightness(1.25) saturate(1.65) contrast(1.04)
    drop-shadow(0 0 10px rgba(0, 200, 220, 0.4))
    drop-shadow(0 0 22px rgba(0, 160, 190, 0.28));
}

html[data-theme="light"] .hero:has(.hero__face:hover) .hero__bg-layer--light {
  filter: saturate(1.12) brightness(1.05);
}

html[data-theme="light"] .hero:has(.hero__face:hover) .hero__fluo-layer--light {
  opacity: 0.42;
  filter: brightness(1.45) saturate(1.85) contrast(1.06)
    drop-shadow(0 0 14px rgba(0, 220, 235, 0.55))
    drop-shadow(0 0 30px rgba(0, 180, 210, 0.35));
}

html[data-theme="light"] .hero:has(.hotspot:hover) .hero__bg-layer--light,
html[data-theme="light"] .hero:has(.hotspot:focus-visible) .hero__bg-layer--light {
  filter: saturate(1.22) brightness(1.07);
}

html[data-theme="light"] .hero:has(.hotspot:hover) .hero__fluo-layer--light,
html[data-theme="light"] .hero:has(.hotspot:focus-visible) .hero__fluo-layer--light {
  opacity: 0.62;
  filter: brightness(1.55) saturate(2) contrast(1.08)
    drop-shadow(0 0 18px rgba(120, 240, 255, 0.75))
    drop-shadow(0 0 40px rgba(0, 210, 230, 0.45))
    drop-shadow(0 0 64px rgba(0, 180, 210, 0.22));
}

html[data-theme="light"] .hero__grid {
  background-image:
    linear-gradient(rgba(0, 90, 105, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 90, 105, 0.045) 1px, transparent 1px);
  opacity: 0.5;
}

html[data-theme="light"] .hero__particles {
  opacity: 0.35;
}

html[data-theme="light"] .hero__veil {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.35) 22%,
    rgba(240, 248, 252, 0.28) 50%,
    rgba(230, 240, 248, 0.42) 78%,
    rgba(225, 235, 245, 0.65) 100%
  );
}

html[data-theme="light"] .hero__veil::after {
  opacity: 0.06;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .hero:has(.hero__face:hover) .hero__veil,
html[data-theme="light"] .hero:has(.hotspot:hover) .hero__veil,
html[data-theme="light"] .hero:has(.hotspot:focus-visible) .hero__veil {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(250, 252, 255, 0.22) 50%,
    rgba(230, 240, 248, 0.5) 100%
  );
}

/*
 * Tema chiaro + colonna: in home.css le pill hanno opacity:0 fino a hover sul volto/hotspot.
 * Qui servono sempre visibili, altrimenti non si legge nulla.
 */
html[data-theme="light"] .hero .hotspot .hotspot__label {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}

html[data-theme="light"] .hero .hotspot .hotspot__label-title {
  color: #0f2530;
  text-shadow: none;
  letter-spacing: 0.06em;
}

html[data-theme="light"] .hero .hotspot .hotspot__label-sub {
  color: rgba(30, 55, 70, 0.9);
  text-shadow: none;
}

/* Piccolo “tasto” sul punto hit (altrimenti è solo spazio vuoto a sinistra) */
@keyframes light-hotspot-dot-trail {
  0% {
    background-position: 115% 115%;
  }
  100% {
    background-position: -15% -15%;
  }
}

@keyframes light-hotspot-dot-trail-end {
  0%,
  75% {
    background-color: #ffffff;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 10px rgba(255, 255, 255, 0.45),
      0 2px 10px rgba(0, 40, 60, 0.08);
  }
  100% {
    background-color: var(--menu-dot);
    box-shadow:
      0 0 0 2px var(--menu-dot-ring),
      0 0 18px var(--menu-dot-glow),
      0 4px 14px rgba(0, 40, 60, 0.12);
  }
}

html[data-theme="light"] .hero .hotspot {
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .hero .hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: var(--menu-dot);
  box-shadow:
    0 0 0 2px var(--menu-dot-ring),
    0 0 12px var(--menu-dot-glow),
    0 2px 10px rgba(0, 40, 60, 0.1);
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

html[data-theme="light"] .hero .hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(50% at 50% 50%);
  background: linear-gradient(
    135deg,
    var(--menu-dot) 0%,
    var(--menu-dot) 38%,
    #ffffff 49%,
    #ffffff 51%,
    var(--menu-dot) 62%,
    var(--menu-dot) 100%
  );
  background-size: 250% 250%;
  background-position: 115% 115%;
}

html[data-theme="light"] .hero .hotspot:hover::before,
html[data-theme="light"] .hero .hotspot:focus-visible::before {
  animation: light-hotspot-dot-trail-end 0.7s cubic-bezier(0.33, 1, 0.45, 1) forwards;
}

html[data-theme="light"] .hero .hotspot:hover::after,
html[data-theme="light"] .hero .hotspot:focus-visible::after {
  opacity: 1;
  animation: light-hotspot-dot-trail 0.7s cubic-bezier(0.33, 1, 0.45, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .hero .hotspot:hover::before,
  html[data-theme="light"] .hero .hotspot:focus-visible::before {
    animation: none;
    background: var(--menu-dot);
    box-shadow:
      0 0 0 2px var(--menu-dot-ring),
      0 0 16px var(--menu-dot-glow),
      0 4px 14px rgba(0, 40, 60, 0.12);
  }

  html[data-theme="light"] .hero .hotspot:hover::after,
  html[data-theme="light"] .hero .hotspot:focus-visible::after {
    animation: none;
    opacity: 0;
  }
}

/* Nessun alone pulsante ciano (home.css) — su pill chiara sporca il contrasto */
html[data-theme="light"] .hero .hotspot:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot__label:hover {
  animation: none;
}

html[data-theme="light"] .hero .hotspot .hotspot__label::before {
  opacity: 0 !important;
  animation: none !important;
}

/* Colonna sinistra: etichette sempre a destra del punto (override tip-top/left/right/bottom) */
html[data-theme="light"] .hero .hotspot.hotspot--tip-top .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-bottom .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-left .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-right .hotspot__label {
  left: calc(100% + 0.65rem);
  right: auto;
  top: 50%;
  bottom: auto;
  text-align: left;
  transform: translate(-0.35rem, -50%);
}

html[data-theme="light"] .hero .hotspot:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot:focus-visible .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-top:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-bottom:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-left:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-right:hover .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-top:focus-visible .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-bottom:focus-visible .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-left:focus-visible .hotspot__label,
html[data-theme="light"] .hero .hotspot.hotspot--tip-right:focus-visible .hotspot__label,
html[data-theme="light"] .hero:has(.hero__face:hover) .hotspot:hover .hotspot__label,
html[data-theme="light"] .hero:has(.hotspot:hover) .hotspot__label:hover,
html[data-theme="light"] .hero.hero--labels-unlocked .hotspot__label:hover {
  transform: translate(0, -50%);
}

html[data-theme="light"] .hotspot__label {
  color: var(--text);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 255, 0.96) 100%);
  border: 1px solid rgba(0, 106, 120, 0.35);
  box-shadow: 0 8px 28px rgba(0, 40, 60, 0.15);
}

html[data-theme="light"] .hotspot__label-sub {
  color: rgba(40, 70, 85, 0.88);
}

html[data-theme="light"] .hotspot:hover .hotspot__label-title,
html[data-theme="light"] .hotspot__label:hover .hotspot__label-title,
html[data-theme="light"] .hotspot:focus-visible .hotspot__label-title {
  color: #004851;
  text-shadow: 0 0 12px rgba(0, 106, 120, 0.25);
}

/* Stesso peso delle regole ciano in home.css (volto/hover) — forza testo scuro su pill chiara */
html[data-theme="light"] .hero .hotspot:hover .hotspot__label-title,
html[data-theme="light"] .hero .hotspot__label:hover .hotspot__label-title,
html[data-theme="light"] .hero .hotspot:focus-visible .hotspot__label-title,
html[data-theme="light"] .hero:has(.hero__face:hover) .hotspot:hover .hotspot__label-title,
html[data-theme="light"] .hero:has(.hotspot:hover) .hotspot__label:hover .hotspot__label-title,
html[data-theme="light"] .hero.hero--labels-unlocked .hotspot__label:hover .hotspot__label-title {
  color: #004851;
  letter-spacing: 0.08em;
  background-size: 100% 2px;
  text-shadow: 0 0 10px rgba(0, 106, 120, 0.2);
}

html[data-theme="light"] .hotspot:hover .hotspot__label-sub,
html[data-theme="light"] .hotspot__label:hover .hotspot__label-sub {
  color: rgba(0, 80, 95, 0.9);
  text-shadow: none;
}

html[data-theme="light"] .hero .hotspot:hover .hotspot__label-sub,
html[data-theme="light"] .hero .hotspot__label:hover .hotspot__label-sub,
html[data-theme="light"] .hero .hotspot:focus-visible .hotspot__label-sub,
html[data-theme="light"] .hero:has(.hero__face:hover) .hotspot:hover .hotspot__label-sub,
html[data-theme="light"] .hero:has(.hotspot:hover) .hotspot__label:hover .hotspot__label-sub,
html[data-theme="light"] .hero.hero--labels-unlocked .hotspot__label:hover .hotspot__label-sub {
  color: rgba(0, 75, 90, 0.92);
  text-shadow: none;
}

html[data-theme="light"] .hotspot:focus-visible {
  outline: 2px solid rgba(0, 106, 120, 0.85);
}

html[data-theme="light"] .site-footer {
  color: rgba(0, 90, 105, 0.55);
  border-top-color: rgba(0, 106, 120, 0.15);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.88) 45%, rgba(249, 249, 247, 0.96) 100%);
  text-shadow: none;
}

html[data-theme="light"] .site-footer__nav a {
  color: rgba(0, 106, 120, 0.8);
}

html[data-theme="light"] .site-footer__nav a:hover {
  color: #003d46;
}

html[data-theme="light"] .site-footer__sep {
  color: rgba(0, 106, 120, 0.35);
}

@keyframes site-footer-pulse-light {
  0%,
  100% {
    color: rgba(0, 90, 105, 0.5);
  }
  50% {
    color: rgba(0, 106, 120, 0.75);
  }
}

html[data-theme="light"] .site-footer {
  animation: site-footer-pulse-light 5s ease-in-out infinite;
}

html[data-theme="light"] .hero-intro {
  border-color: rgba(0, 106, 120, 0.28);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(248, 252, 253, 0.92) 100%
  );
  box-shadow:
    0 8px 24px rgba(0, 70, 90, 0.1),
    0 0 0 1px rgba(0, 106, 120, 0.08);
}

html[data-theme="light"] .hero-intro__kicker {
  color: rgba(0, 106, 120, 0.82);
}

html[data-theme="light"] .hero-intro__title {
  color: #0d2833;
}

html[data-theme="light"] .hero-intro__text {
  color: rgba(20, 55, 70, 0.86);
}

html[data-theme="light"] .hero-intro__text a {
  color: #006a78;
  border-bottom-color: rgba(0, 106, 120, 0.35);
}

html[data-theme="light"] .hero-intro__text a:hover {
  color: #004851;
  border-bottom-color: rgba(0, 106, 120, 0.65);
}

@media (max-width: 768px) {
  html[data-theme="light"] .hero-mobile-nav__toggle {
    border-color: rgba(0, 106, 120, 0.35);
    background: rgba(255, 255, 255, 0.96);
    color: #0d2833;
    box-shadow: 0 6px 20px rgba(0, 70, 90, 0.12);
  }

  html[data-theme="light"] .hero-mobile-nav__panel {
    border-left-color: rgba(0, 106, 120, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 249, 247, 0.99) 100%);
  }

  html[data-theme="light"] .hero-mobile-nav__list a {
    border-color: rgba(0, 106, 120, 0.2);
    background: rgba(255, 255, 255, 0.92);
  }

  html[data-theme="light"] .hero-mobile-nav__label {
    color: #0d2833;
  }

  html[data-theme="light"] .hero-mobile-nav__sub {
    color: rgba(20, 55, 70, 0.78);
  }

  html[data-theme="light"] .hero-mobile-nav__backdrop {
    background: rgba(249, 249, 247, 0.55);
  }

  body:has(> main.hero) .site-logo img {
    max-width: min(calc(100vw - 4.5rem), 16rem);
  }
}

/* Logo brand — solo homepage (vedi index.html) */
body:has(> main.hero) .site-logo {
  position: fixed;
  top: max(
    0.25rem,
    calc(
      var(--site-wrap-pad-y) + var(--site-back-block-height) / 2 - clamp(2.25rem, 8vw, 4.75rem)
    )
  );
  /* Stessa orizzontale in tema scuro e chiaro: allineata alla colonna hotspot (~5%, v. positionsLightColumn) */
  left: max(var(--site-wrap-pad-x), 5%);
  right: auto;
  z-index: 10050;
  display: block;
  line-height: 0;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: transform 0.2s ease;
}

body:has(> main.hero) .site-logo img {
  display: block;
  height: clamp(4.5rem, 16vw, 9.5rem);
  width: auto;
  max-width: min(92vw, 36rem);
  background: transparent;
}

body:has(> main.hero) .site-logo:hover {
  transform: scale(1.04);
}

body:has(> main.hero) .site-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

html[data-theme="light"] body:has(> main.hero) .site-logo:focus-visible {
  outline-color: rgba(0, 106, 120, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  body:has(> main.hero) .site-logo {
    transition: none;
  }

  body:has(> main.hero) .site-logo:hover {
    transform: none;
  }
}

/* Fuori dalla home non deve comparire il logo */
body:not(:has(> main.hero)) .site-logo {
  display: none !important;
}

/* Pagine interne: immagine hero grande in watermark (alto destra) */
.page-bg-art {
  --page-bg-prox: 0;
  --page-bg-shift-x: 0px;
  --page-bg-shift-y: 0px;
  position: fixed;
  z-index: 0;
  pointer-events: none;
  top: -6%;
  right: -12%;
  width: clamp(26rem, 68vw, 58rem);
  height: clamp(18rem, 58vh, 40rem);
  overflow: hidden;
  transform: translate3d(var(--page-bg-shift-x), var(--page-bg-shift-y), 0) scale(1.02);
  will-change: transform, opacity;
  transition: opacity 0.5s ease, transform 0.38s ease-out;
  -webkit-mask-image: radial-gradient(ellipse 96% 94% at 80% 18%, #000 32%, transparent 88%);
  mask-image: radial-gradient(ellipse 96% 94% at 80% 18%, #000 32%, transparent 88%);
}

.page-bg-art__layer,
.page-bg-art__fluo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 38%;
}

.page-bg-art__layer {
  transition: opacity 0.55s ease, filter 0.5s ease;
}

.page-bg-art__fluo {
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-bg-art__layer--dark {
  background-image: url("/images/hero-bg.png");
  opacity: 0;
}

.page-bg-art__layer--light {
  background-image: url("/images/hero-bg-light.png?v=3");
  opacity: 0;
}

.page-bg-art__fluo--dark {
  background-image: url("/images/hero-bg.png");
  filter: brightness(1.65) saturate(2.15) contrast(1.1)
    drop-shadow(0 0 14px rgba(100, 255, 255, 0.75));
}

.page-bg-art__fluo--light {
  background-image: url("/images/hero-bg-light.png?v=3");
  filter: brightness(1.45) saturate(1.85) contrast(1.06)
    drop-shadow(0 0 14px rgba(0, 220, 235, 0.55));
}

/* Tema scuro: hero-bg.png */
html:not([data-theme="light"]) .page-bg-art {
  opacity: calc(0.72 + var(--page-bg-prox) * 0.2);
}

html:not([data-theme="light"]) .page-bg-art__layer--dark {
  opacity: 1;
  filter: saturate(calc(1.35 + var(--page-bg-prox) * 0.4))
    brightness(calc(1.48 + var(--page-bg-prox) * 0.28));
}

html:not([data-theme="light"]) .page-bg-art__layer--light {
  opacity: 0;
}

html:not([data-theme="light"]) .page-bg-art__fluo--dark {
  opacity: calc(0.2 + var(--page-bg-prox) * 0.62);
}

html:not([data-theme="light"]) .page-bg-art__fluo--light {
  opacity: 0;
}

/* Tema chiaro: hero-bg-light.png */
html[data-theme="light"] .page-bg-art {
  opacity: calc(0.24 + var(--page-bg-prox) * 0.14);
}

html[data-theme="light"] .page-bg-art__layer--dark {
  opacity: 0;
  filter: none;
}

html[data-theme="light"] .page-bg-art__layer--light {
  opacity: 1;
  filter: saturate(calc(1.06 + var(--page-bg-prox) * 0.2))
    brightness(calc(1.02 + var(--page-bg-prox) * 0.1));
}

html[data-theme="light"] .page-bg-art__fluo--dark {
  opacity: 0;
}

html[data-theme="light"] .page-bg-art__fluo--light {
  opacity: calc(var(--page-bg-prox) * 0.5);
}

@media (max-width: 640px) {
  .page-bg-art {
    top: -4%;
    right: -18%;
    width: clamp(18rem, 88vw, 28rem);
    height: clamp(14rem, 42vh, 22rem);
  }

  html:not([data-theme="light"]) .page-bg-art {
    opacity: calc(0.64 + var(--page-bg-prox) * 0.18);
  }

  html[data-theme="light"] .page-bg-art {
    opacity: calc(0.2 + var(--page-bg-prox) * 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-bg-art {
    transform: none !important;
    transition: none;
  }

  .page-bg-art__layer,
  .page-bg-art__fluo {
    transition: none;
  }
}

/* Pulsante tema */
.theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 10000;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: 0 4px 24px rgba(0, 30, 50, 0.12);
  backdrop-filter: blur(8px);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.theme-toggle:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 6px 28px rgba(0, 200, 255, 0.15);
}

html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(0, 106, 120, 0.45);
  box-shadow: 0 6px 24px rgba(0, 60, 80, 0.15);
}

.theme-toggle:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.9);
  outline-offset: 3px;
}

html[data-theme="light"] .theme-toggle:focus-visible {
  outline-color: rgba(0, 106, 120, 0.85);
}

@media (max-width: 480px) {
  .theme-toggle {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .site-footer {
    animation: none;
  }
}