/* POWER-IT — Site styles (editorial home)
 * Built on POWER-IT Design System v1.0
 */

/* ============ FONTS + TOKENS ============ */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600&display=swap");
@import url("https://fonts.cdnfonts.com/css/glacial-indifference");

@font-face {
  font-family: "Glacial Indifference";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Glacial Indifference");
}

:root {
  /* Champagne */
  --champagne-deep:     #3A3020;
  --champagne-umbra:    #6A583C;
  --champagne-bronze:   #9A825E;
  --champagne-core:     #C2A882;
  --champagne-light:    #DEC49A;
  --champagne-luminous: #EFD9B2;
  --champagne-flash:    #FFFCF0;

  /* Signature champagne gradient — used for hero/section titles and accent text */
  --champagne-gradient: linear-gradient(135deg,
    #8A7449 0%,
    #C2A882 22%,
    #EFD9B2 48%,
    #FFFCF0 58%,
    #DEC49A 72%,
    #9A825E 100%);
  --champagne-gradient-soft: linear-gradient(135deg,
    #9A825E 0%,
    #C2A882 35%,
    #DEC49A 65%,
    #6A583C 100%);
  --champagne-gradient-horizontal: linear-gradient(90deg,
    #8A7449 0%,
    #C2A882 20%,
    #EFD9B2 50%,
    #C2A882 80%,
    #8A7449 100%);

  /* Obsidian */
  --true-black:    #000000;
  --obsidian:      #141414;
  --obsidian-alt:  #1A1A1A;
  --obsidian-deep: #0E0E0E;

  /* Text */
  --warm-off-white:    #F2EFE8;
  --warm-off-white-62: rgba(242,239,232,0.62);
  --warm-off-white-40: rgba(242,239,232,0.40);

  /* Alpha layers */
  --surface-01:      rgba(255,255,255,0.04);
  --border-base:     rgba(255,255,255,0.09);
  --border-emphasis: rgba(255,255,255,0.20);
  --accent-glow:     rgba(194,168,130,0.14);

  /* Semantic */
  --bg:           var(--obsidian);
  --bg-alt:       var(--obsidian-alt);
  --bg-deep:      var(--obsidian-deep);
  --fg:           var(--warm-off-white);
  --fg-muted:     var(--warm-off-white-62);
  --fg-subtle:    var(--warm-off-white-40);
  --accent:       var(--champagne-core);
  --accent-hover: var(--champagne-light);
  --border:       var(--border-base);

  /* Fonts */
  --font-display: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-logo:    "Glacial Indifference", "Manrope", sans-serif;

  /* Scale */
  --fs-xxs:  0.7rem;
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-md:   clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-lg:   clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --fs-xl:   clamp(1.6rem, 1.4rem + 0.9vw, 2.2rem);
  --fs-xxl:  clamp(2rem, 1.7rem + 1.6vw, 3.2rem);
  --fs-display: clamp(2.4rem, 1.8rem + 3.2vw, 4.6rem);
  --fs-hero: clamp(2.6rem, 2rem + 3.8vw, 5.8rem);
  --fs-mega: clamp(3.4rem, 2.2rem + 6vw, 8rem);

  /* Weights */
  --fw-xlight: 200;
  --fw-light:  300;
  --fw-regular:400;
  --fw-medium: 500;
  --fw-semi:   600;

  /* Letter spacing */
  --ls-display:  -0.025em;
  --ls-heading:  -0.02em;
  --ls-body:     -0.002em;
  --ls-btn:       0.04em;
  --ls-label:     0.12em;
  --ls-label-xl:  0.42em;

  /* Spacing */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 72px;
  --sp-7: 104px;
  --sp-8: 144px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px var(--champagne-core), 0 0 24px var(--accent-glow);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;

  /* Layout */
  --container-max: 1320px;
  --container-pad: clamp(20px, 4vw, 56px);

  /* Density (modificabile via tweak) */
  --rhythm: 1;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--champagne-core); color: var(--true-black); }

/* ============ LAYOUT ============ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

section {
  padding: calc(var(--sp-8) * var(--rhythm)) 0;
  position: relative;
}
section.compact {
  padding: calc(var(--sp-7) * var(--rhythm)) 0;
}

/* ============ TYPE ============ */
.eyebrow {
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label-xl);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.eyebrow.no-rule::before { display: none; }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin: 0;
}
.display .champ { color: var(--accent); }

h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-light); }

.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
}
.section-title .champ { color: var(--accent); }

.lede {
  font-size: var(--fs-lg);
  color: var(--fg);
  line-height: 1.55;
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  max-width: 56ch;
  margin: 0 0 var(--sp-4);
}
p { color: var(--fg-muted); max-width: 64ch; margin: 0 0 var(--sp-3); }
p.tight { margin-bottom: var(--sp-2); }

.caption {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--ls-body);
}
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
}

.logo-payoff {
  font-family: var(--font-logo);
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--accent);
  font-size: var(--fs-xs);
}

/* ============ BUTTONS — POWER-IT Button System (v1 · 31 mag 2026) ============
   Doppio pulsante ufficiale: oro pieno (gradiente metallico) + scuro testo oro.
   Shine (scorrimento gradiente) + luce diagonale che passa. Niente glow.
   Effetti SEMPRE attivi anche con "Riduci movimento" (scelta brand POWER-IT). */
:root{
  --pit-gold:#C2A882;
  --pit-grad-gold:linear-gradient(100deg,#8A7449 0%,#CEB37E 14%,#F4E6C2 28%,#C2A882 42%,#9C8056 56%,#EADBB4 72%,#B5925E 88%,#8A7449 100%);
}
@keyframes pitShine{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes pitSweep{0%{left:-80%}55%{left:135%}100%{left:135%}}
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid var(--pit-gold);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; top: -30%; left: -80%; width: 55%; height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 0;
  animation: pitSweep 3.2s ease-in-out infinite;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled::after { display: none; }
.btn-solid {
  background: var(--pit-grad-gold); background-size: 220% 100%;
  color: #0a0a0a; -webkit-text-fill-color: #0a0a0a;
  animation: pitShine 7s linear infinite;
  box-shadow: 0 6px 20px rgba(0,0,0,.42);
}
.btn-solid:hover { box-shadow: 0 10px 28px rgba(194,168,130,.28); }
.btn-outline {
  background: rgba(20,20,20,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--pit-gold);
}
.btn-outline::after {
  background: linear-gradient(90deg, transparent, rgba(231,206,160,.55), transparent);
}
.btn-outline:hover { box-shadow: 0 8px 22px rgba(0,0,0,.4); background: rgba(40,34,22,.85); }
.btn-ghost {
  background: transparent; color: var(--fg-muted);
  padding: 12px 0; border-color: transparent;
  overflow: visible;
}
.btn-ghost::after { display: none; }
.btn-ghost:hover { color: var(--accent); transform: none; }
.btn-sm { padding: 11px 20px; font-size: var(--fs-xxs); }
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============ HEADER ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--sp-3) 0;
  transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(20, 20, 20, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}
.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 40px);
  min-height: 56px;
  flex-wrap: nowrap;
}
.brand-lockup {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  align-self: center;
}
.brand-logo-img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  display: block;
  vertical-align: middle;
  transition: height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .brand-logo-img {
  height: 32px;
}

.main-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.6vw, 32px);
  min-width: 0;
}
.main-nav a {
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--accent); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-out);
}
.main-nav a:hover::after { width: 100%; }

.header-actions {
  display: flex; align-items: center; gap: var(--sp-3);
}
.lang-switch {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.lang-switch a {
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
  padding: 4px;
}
.lang-switch a.active { color: var(--accent); }
.lang-switch .sep { color: var(--fg-subtle); opacity: 0.5; }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  filter: contrast(1.06) saturate(0.95) brightness(0.98);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 0%, rgba(20,20,20,0.35) 55%, rgba(20,20,20,0.78) 100%),
    linear-gradient(180deg, rgba(20,20,20,0.50) 0%, transparent 30%, transparent 65%, rgba(20,20,20,0.88) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding: 160px var(--container-pad) 110px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.hero-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.hero-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
}
.hero-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-logo {
  max-width: min(580px, 74vw);
  margin: 4px 0 -4px -10px;
}
.hero-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
  display: block;
}
.hero-logo-split {
  max-width: min(440px, 58vw);
  margin: 8px 0 4px -8px;
}
.hero-payoff {
  font-family: var(--font-logo);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 0.75rem + 0.6vw, 1.3rem);
  margin: 0 0 var(--sp-3);
  /* Apply champagne gradient like other section titles */
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  background-size: 200% 200%;
  animation: champagneShimmer 11s ease-in-out infinite;
}
.hero-statement {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: var(--sp-4) 0 0;
  max-width: 18ch;
}
.hero-statement .champ { color: var(--accent); }
.hero-ctas {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.hero-bottom {
  position: absolute;
  bottom: var(--sp-4);
  left: 0; right: 0;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: var(--sp-4);
}
.hero-bottom-left {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  max-width: 22ch;
  line-height: 1.6;
}
.hero-bottom-right {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.scroll-cue {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Hero variant: typographic (no video) */
.hero.is-type .hero-video,
.hero.is-type .hero-vignette { display: none; }
.hero.is-type {
  background: var(--obsidian);
}
.hero.is-type .hero-statement {
  font-size: var(--fs-mega);
  line-height: 0.95;
  max-width: 14ch;
}
.hero.is-type .hero-inner {
  padding-top: 200px;
}

/* Hero variant: split */
.hero.is-split .hero-inner {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-6);
}
.hero.is-split .hero-side {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hero.is-split .hero-side img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}
.hero.is-split .hero-video,
.hero.is-split .hero-vignette { display: none; }
.hero.is-split {
  background: var(--obsidian);
}
@media (max-width: 820px) {
  .hero.is-split .hero-inner { grid-template-columns: 1fr; }
  .hero.is-split .hero-side { aspect-ratio: 4 / 3; }
}

/* ============ SECTION-HEAD ============ */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  max-width: 880px;
}
.section-head .eyebrow { margin-bottom: var(--sp-1); }
.section-head.center {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.section-head.center .eyebrow {
  justify-content: center;
}

/* ============ MANIFESTO ============ */
.manifesto {
  background: var(--obsidian);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.manifesto-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-5);
  max-width: 22ch;
  text-wrap: pretty;
}
.manifesto-quote .champ { color: var(--accent); }
.manifesto-body {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  max-width: 56ch;
  line-height: 1.6;
  margin: 0;
}
.manifesto-layout {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 760px) {
  .manifesto-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ============ NETWORK / FOR WHOM ============ */
.network-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-deep);
}
.net-cell {
  padding: var(--sp-5) var(--sp-4);
  border-right: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
}
.net-cell:hover { background: rgba(194, 168, 130, 0.04); }
.net-cell:nth-child(3n) { border-right: none; }
.net-cell:nth-last-child(-n+3) { border-bottom: none; }
/* Network cell text: align with rest of site (subtle muted body, champagne sub-labels) */
.net-cell .num {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--fs-xxs);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
.net-cell p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.65;
  background: none !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  color: var(--fg-muted) !important;
  animation: none !important;
}
.net-cell .targets {
  margin-top: var(--sp-3);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.net-cell h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--fg);
}
.net-cell p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.65;
}
.net-cell .targets {
  margin-top: var(--sp-3);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-medium);
}
@media (max-width: 920px) {
  .network-grid { grid-template-columns: repeat(2, 1fr); }
  .net-cell { border-right: 0.5px solid var(--border) !important; border-bottom: 0.5px solid var(--border) !important; }
  .net-cell:nth-child(2n) { border-right: none !important; }
  .net-cell:last-child { border-bottom: none !important; }
}
@media (max-width: 560px) {
  .network-grid { grid-template-columns: 1fr; }
  .net-cell { border-right: none !important; }
}

/* ============ VENUES CAROUSEL ============ */
.venues {
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--obsidian-alt) 100%);
  position: relative;
  overflow: hidden;
}
.venues-head {
  max-width: 880px;
  margin-bottom: var(--sp-5);
}

.venues-stage {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 0.5px solid rgba(194,168,130,0.18);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 35%),
    linear-gradient(180deg, #15110d 0%, #0c0907 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(239,217,178,0.03);
  isolation: isolate;
}
.venues-stage::before {
  /* Top glossy highlight — same 'specchio champagne' as hardware cards */
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg,
    rgba(239,217,178,0.10) 0%,
    rgba(194,168,130,0.04) 35%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  opacity: 0.7;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.venues-stage::after {
  /* Diagonal sheen that sweeps continuously across the carousel */
  content: "";
  position: absolute;
  top: -120%; left: -40%;
  width: 60%; height: 320%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(239,217,178,0.10) 48%,
    rgba(255,252,240,0.22) 50%,
    rgba(239,217,178,0.10) 52%,
    transparent 70%);
  transform: rotate(8deg) translateX(-30%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  animation: venueSheen 8s ease-in-out infinite;
}
@keyframes venueSheen {
  0%, 100% { opacity: 0; transform: rotate(8deg) translateX(-30%); }
  40% { opacity: 0.6; }
  60% { opacity: 0.6; }
  90% { opacity: 0; transform: rotate(8deg) translateX(380%); }
}
.venues-stage:hover::before { opacity: 1; }
.venues-track {
  display: flex;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition: -webkit-transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.venue-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
}
.venue-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.venue-img-wrap::after {
  /* Glass reflection sweep on each slide image */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(239,217,178,0.06) 45%,
    rgba(255,252,240,0.14) 50%,
    rgba(239,217,178,0.06) 55%,
    transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.venue-slide.is-on .venue-img-wrap::after { opacity: 1; }
.venue-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) contrast(1.04) saturate(0.96);
  transform: scale(1.01);
  transition: transform 8000ms ease-out, filter var(--dur-slow) var(--ease-out);
}
.venue-slide.is-on .venue-img-wrap img {
  transform: scale(1.06);
}
.venue-frame {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(14,11,7,0.85) 100%),
    linear-gradient(120deg, rgba(194,168,130,0.06) 0%, transparent 35%);
  pointer-events: none;
}
.venue-caption {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(14,11,7,0.85) 0%, rgba(14,11,7,1) 100%);
  border-top: 0.5px solid rgba(194,168,130,0.12);
}
.venue-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
}
.venue-meta .venue-kind {
  background: var(--champagne-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.venue-meta .venue-sep { opacity: 0.4; }
.venue-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 4px 0 0;
  line-height: 1.18;
  padding-bottom: 0.08em;
  background: var(--champagne-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 200% 200%;
  animation: champagneShimmer 12s ease-in-out infinite;
}

.venues-arrow {
  position: absolute;
  top: 0; height: 0;
  z-index: 4;
  width: 52px; height: 52px;
  background: rgba(20, 16, 11, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(194,168,130,0.45);
  border-radius: 50%;
  color: var(--champagne-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.venues-arrow svg { display: block; }
.venues-arrow:hover {
  border-color: var(--champagne-core);
  background: rgba(194, 168, 130, 0.18);
  color: var(--champagne-flash);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 0 1px var(--champagne-core), 0 12px 32px rgba(194,168,130,0.28);
}
.venues-arrow {
  top: 50%;
  transform: translateY(-50%);
}
.venues-arrow--prev { left: var(--sp-3); }
.venues-arrow--next { right: var(--sp-3); }
@media (max-width: 760px) {
  .venues-arrow { width: 40px; height: 40px; }
}

.venues-dots {
  display: flex; justify-content: center; gap: 8px;
  margin: var(--sp-4) 0 var(--sp-3);
}
.venue-dot {
  width: 28px; height: 2px;
  background: rgba(194,168,130,0.2);
  border-radius: 2px;
  border: 0; padding: 0;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.venue-dot:hover { background: rgba(194,168,130,0.5); }
.venue-dot.is-on {
  background: var(--champagne-core);
  width: 44px;
  box-shadow: 0 0 8px rgba(194,168,130,0.5);
}

.venues-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 0.5px solid var(--border);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .venue-img-wrap { aspect-ratio: 4 / 3; }
}
.hw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}
.hw-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 35%),
    linear-gradient(180deg, #1a1612 0%, #0e0b07 55%, #060503 100%);
  border: 0.5px solid rgba(194,168,130,0.18);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
  cursor: pointer;
  isolation: isolate;
}
.hw-card::before {
  /* Top glossy highlight — 'specchio champagne' reflection */
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg,
    rgba(239,217,178,0.10) 0%,
    rgba(194,168,130,0.04) 35%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  opacity: 0.85;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hw-card::after {
  /* Diagonal sheen that sweeps on hover */
  content: "";
  position: absolute;
  top: -120%; left: -40%;
  width: 60%; height: 320%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(239,217,178,0.18) 48%,
    rgba(255,252,240,0.32) 50%,
    rgba(239,217,178,0.18) 52%,
    transparent 70%);
  transform: rotate(8deg) translateX(-30%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: transform 1500ms cubic-bezier(0.16,1,0.3,1), opacity 600ms ease-out;
  mix-blend-mode: screen;
}
.hw-card:hover {
  transform: translateY(-6px);
  border-color: rgba(194,168,130,0.4);
  box-shadow:
    0 32px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(194,168,130,0.18),
    0 0 60px rgba(194,168,130,0.08);
}
.hw-card:hover::after {
  opacity: 1;
  transform: rotate(8deg) translateX(380%);
}
.hw-card:hover::before {
  opacity: 1;
}
@media (max-width: 1080px) { .hw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hw-grid { grid-template-columns: 1fr; } }
.hw-card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,252,240,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #161210 0%, #0B0907 55%, #050404 100%);
  overflow: hidden;
  border-bottom: 0.5px solid rgba(194,168,130,0.10);
  z-index: 0;
}
.hw-card-image::before {
  /* Soft champagne floor light */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: radial-gradient(ellipse at 50% 100%, rgba(194,168,130,0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hw-card-image::after {
  /* Glass-like reflection sweep across the product photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(239,217,178,0.06) 45%,
    rgba(255,252,240,0.12) 50%,
    rgba(239,217,178,0.06) 55%,
    transparent 70%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hw-card:hover .hw-card-image::after { opacity: 1; }
.hw-3d {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
  cursor: grab;
}
.hw-3d:active { cursor: grabbing; }
.hw-3d-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(1) contrast(1.05) saturate(1);
  transition: opacity 700ms cubic-bezier(0.25, 1, 0.5, 1), filter 600ms ease-out, transform 800ms cubic-bezier(0.25,1,0.5,1);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
}
.hw-3d-frame.is-on {
  opacity: 1;
  transform: scale(1);
}
.hw-card:hover .hw-3d-frame.is-on {
  filter: brightness(1.1) contrast(1.06) saturate(1);
}
.hw-3d::after {
  /* Ground reflection / shadow stage */
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: 4%;
  height: 14%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, transparent 65%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}
.hw-card:hover .hw-3d img {
  filter: brightness(1.12) contrast(1.08) saturate(1);
}

/* 3D viewer controls */
.hw-3d-controls {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(8px);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-pill);
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hw-card:hover .hw-3d-controls,
.hw-card.is-active .hw-3d-controls {
  opacity: 1;
  transform: translate(-50%, -4px);
}
.hw-3d-controls button {
  position: relative;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 4px 2px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.hw-3d-controls button:hover { color: var(--fg); }
.hw-3d-controls button.is-on { color: var(--accent); }
.hw-3d-controls button.is-on::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
}
.hw-3d-controls .sep {
  width: 1px; height: 10px;
  background: var(--border);
}

/* Floor light glow under each card */
.hw-card::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: 18%;
  height: 30%;
  background: radial-gradient(ellipse at center, rgba(194, 168, 130, 0.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.hw-card:hover::before, .hw-card.is-active::before { opacity: 1; }
.hw-card-tag {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 14px;
  border: 0.5px solid rgba(194, 168, 130, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
}
.hw-card-body {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hw-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0;
  line-height: 1.1;
}
.hw-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.hw-card-spec {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--fs-xxs);
  color: var(--accent);
  letter-spacing: 0.12em;
  margin: 4px 0 var(--sp-2);
  text-transform: uppercase;
}
.hw-card-desc {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-3);
}
.hw-card-meta {
  display: flex; justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 0.5px solid var(--border);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.hw-card-meta .val { color: var(--fg); font-weight: var(--fw-medium); }

@media (max-width: 920px) { .hw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hw-grid { grid-template-columns: 1fr; } }

/* ============ APP SECTION ============ */
.app-section {
  background: var(--obsidian);
  position: relative;
  overflow: hidden;
}
.app-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.app-text { max-width: 60ch; }
.app-features {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.app-features li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding-top: var(--sp-3);
  border-top: 0.5px solid var(--border);
}
.app-features li:first-child { padding-top: 0; border-top: none; }
.app-feat-num {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--fs-xxs);
  letter-spacing: 0.14em;
  color: var(--champagne-core);
  font-weight: var(--fw-medium);
}
.app-features h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0 0 4px;
  color: var(--fg);
}
.app-features p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}

.app-stores {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.store-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 0.5px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--dur-base) var(--ease-out);
}
.store-pill:hover {
  border-color: var(--champagne-core);
  background: rgba(194, 168, 130, 0.06);
  box-shadow: 0 0 0 1px rgba(194,168,130,0.25);
}
.store-pill .store-mono {
  font-size: 18px;
  color: var(--champagne-core);
}
.store-pill span:last-child {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.store-pill small {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
}
.app-soon {
  margin-top: var(--sp-3);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
}
.app-icon-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}
.app-icon {
  width: 78%;
  height: auto;
  border-radius: 22%;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 0.5px rgba(194,168,130,0.18),
    inset 0 0 0 1px rgba(255,252,240,0.04);
  transition: transform var(--dur-slow) var(--ease-out);
  position: relative;
  z-index: 1;
}
.app-icon:hover { transform: translateY(-6px) scale(1.02); }
.app-icon-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,196,80,0.22) 0%, rgba(194,168,130,0.08) 35%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: champagneShimmer 6s ease-in-out infinite;
}
@media (max-width: 880px) {
  .app-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .app-icon-stage { max-width: 280px; }
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 36px; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-emphasis) 20%, var(--border-emphasis) 80%, transparent);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bg);
  border: 0.5px solid var(--border-emphasis);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-light);
  color: var(--accent);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.02em;
}
.step h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.step p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .steps::before { display: none; }
}

/* ============ ROADMAP ============ */
.roadmap {
  background: var(--obsidian);
  position: relative;
  overflow: hidden;
}
.roadmap-layout {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 0.5px solid var(--border);
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .when {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--fs-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.timeline-item .what h5 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--sp-1);
  line-height: 1.1;
}
.timeline-item .what p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  max-width: 52ch;
}
.timeline-item.is-now .when { color: var(--accent); }
.timeline-item.is-now .when::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (max-width: 760px) {
  .roadmap-layout { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ============ CTA SECTION ============ */
.cta-final {
  background: var(--obsidian);
  border-top: 0.5px solid var(--border);
  padding: calc(var(--sp-8) * var(--rhythm)) 0 calc(var(--sp-7) * var(--rhythm));
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(194, 168, 130, 0.06), transparent 60%);
  pointer-events: none;
}
.cta-final .inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--container-pad);
}
.cta-final h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  margin: var(--sp-3) 0 var(--sp-4);
}
.cta-final h2 .champ { color: var(--accent); }
.cta-final p {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  max-width: 52ch;
  margin: 0 auto var(--sp-5);
}
.cta-twin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: 760px;
  margin: var(--sp-5) auto 0;
  text-align: left;
}
.cta-card {
  border: 0.5px solid var(--border);
  background: var(--bg-deep);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.cta-card:hover { border-color: var(--border-emphasis); }
.cta-card .eyebrow { margin-bottom: var(--sp-2); }
.cta-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  margin: 0;
  line-height: 1.1;
}
.cta-card p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
  flex: 1;
}
@media (max-width: 700px) { .cta-twin { grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--bg-deep);
  border-top: 0.5px solid var(--border);
  padding: var(--sp-7) 0 var(--sp-4);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.footer-brand img { height: 44px; width: auto; margin-bottom: var(--sp-3); display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.footer-brand p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-width: 32ch;
  margin: 0;
}
.footer-col h5 {
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label-xl);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 var(--sp-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.footer-col a:hover { color: var(--accent); }

.footer-legal {
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  border-top: 0.5px solid var(--border);
  font-size: var(--fs-xxs);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
  opacity: 0.85;
}
.footer-legal + .footer-bottom { border-top: 0; padding-top: var(--sp-3); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 0.5px solid var(--border);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
  flex-wrap: wrap;
}
.footer-bottom .designed { color: var(--accent); opacity: 0.7; }
.social-row { display: flex; gap: var(--sp-2); }
.social-row a {
  width: 32px; height: 32px;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: all var(--dur-base) var(--ease-out);
}
.social-row a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 920px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============ MOBILE NAV ============ */
@media (max-width: 1180px) {
  .main-nav { gap: clamp(8px, 1.2vw, 20px); }
  .main-nav a { font-size: clamp(10px, 0.85vw, 12px); }
}
@media (max-width: 1100px) {
  .main-nav { display: none; }
}
@media (max-width: 620px) {
  .header-actions .menu-cta { display: none; }
}

/* Hamburger button — only visible below 1100px */
.hamburger {
  display: none;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hamburger:hover { border-color: var(--champagne-core); }
.hamburger span {
  position: absolute;
  left: 50%;
  width: 16px; height: 1px;
  background: var(--champagne-core);
  transform: translateX(-50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.hamburger span:nth-child(1) { top: 10px; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 20px; }
.hamburger.is-open span:nth-child(1) { top: 15px; transform: translateX(-50%) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 15px; transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 1100px) {
  .hamburger { display: block; }
}
/* Switch adattivo a prova di resize: sopra il breakpoint vince SEMPRE la nav
   orizzontale — il drawer verticale e l'hamburger non possono mai mostrarsi,
   anche se lo stato JS è ancora "aperto". Sotto, vince il drawer. */
@media (min-width: 1101px) {
  .mobile-drawer { display: none !important; }
  .hamburger { display: none !important; }
  .main-nav { display: flex !important; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(14, 11, 7, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 0.5px solid var(--border);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  padding-top: 88px;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-drawer.is-open { transform: translateY(0); }
.mobile-drawer-inner {
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--container-pad);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px) + 24px);
  gap: var(--sp-4);
  min-height: min-content;
}
.mobile-nav {
  display: flex; flex-direction: column;
  gap: 4px;
}
.mobile-nav a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  color: var(--fg);
  border-bottom: 0.5px solid var(--border);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.mobile-nav a:hover { color: var(--champagne-core); padding-left: 8px; }
.mobile-drawer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
}
.mobile-drawer-foot .lang-switch { font-size: var(--fs-sm); }
body.menu-open { overflow: hidden; }

/* ============ REVEAL ANIMATIONS ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ DIVIDERS ============ */
.rule {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ============ STATS STRIP ============ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  margin: var(--sp-6) 0 0;
}
.stat .v {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  font-weight: var(--fw-xlight);
  color: var(--accent);
  letter-spacing: var(--ls-display);
  line-height: 1;
  margin: 0;
}
.stat .l {
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: var(--sp-2);
  font-weight: var(--fw-medium);
}
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ============ DENSITY VARIATIONS ============ */
body.is-airy { --rhythm: 1.25; }
body.is-compact { --rhythm: 0.72; }

/* ============ CHAMPAGNE GRADIENT UTILITY ============ */
/* Any element with .champ-grad gets the gradient as its text fill.
   We add padding-bottom to prevent descender clipping (g, p, y, j tails are
   cut by background-clip:text when line-height is tight). */
.champ-grad,
.champ {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  background-size: 200% 200%;
  animation: champagneShimmer 9s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
  padding-bottom: 0.12em;
  line-height: 1.18;
}
@keyframes champagneShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Apply gradient to all primary headings and accent text by default.
   padding-bottom + extra line-height fix descender clipping on G/Q/g/p/y/j. */
.section-title,
.section-title .champ,
.hero-statement,
.manifesto-quote,
.cta-final h2,
.eyebrow,
.hero-tagline,
.hero-payoff,
.logo-payoff,
h3.hw-card-name,
.stat .v,
.timeline-item .what h5,
.net-cell h4,
.step h4,
.cta-card h3,
.hw-card-spec,
.hw-card-tag,
.hw-3d-controls button.is-on {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  background-size: 200% 200%;
  animation: champagneShimmer 12s ease-in-out infinite;
  padding-bottom: 0.10em;
}
.section-title, .hero-statement, .manifesto-quote, .cta-final h2 {
  line-height: 1.12;
  padding-bottom: 0.14em;
}
.step h4, .timeline-item .what h5, .net-cell h4, .cta-card h3, h3.hw-card-name {
  line-height: 1.22;
  padding-bottom: 0.12em;
}

/* Eyebrow rule (the small line before the label) needs explicit color back */
.eyebrow::before {
  background: var(--champagne-core);
}

/* Main nav links — gold gradient on hover */
.main-nav a:hover {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Lang switch active */
.lang-switch a.active {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Footer designed-in-silence */
.footer-bottom .designed {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  opacity: 1;
}

/* Subtle gradient on hero meta dot pulse + champagne accents on cards */
.cta-card .eyebrow.no-rule {
  background: var(--champagne-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent !important;
}

/* Buttons: definizioni precedenti SUPERATE dal POWER-IT Button System (v. sezione BUTTONS in alto). */

/* ============ VENUE MODAL ============ */
.vm-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: vmFadeIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 3, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.vm-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 35%),
    linear-gradient(180deg, #15110d 0%, #0c0907 100%);
  border: 0.5px solid rgba(194,168,130,0.32);
  border-radius: 24px;
  box-shadow:
    0 40px 90px rgba(0,0,0,0.65),
    0 0 0 1px rgba(194,168,130,0.08),
    inset 0 0 0 1px rgba(239,217,178,0.04);
  animation: vmSlideUp 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vm-step-3 { max-width: 920px; }
@keyframes vmSlideUp {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.vm-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20, 16, 11, 0.7);
  border: 0.5px solid rgba(255,255,255,0.12);
  color: var(--fg-muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.vm-close:hover {
  color: var(--champagne-luminous);
  border-color: var(--champagne-core);
  background: rgba(194,168,130,0.1);
}
.vm-head { padding: 32px 36px 16px; }
.vm-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  letter-spacing: var(--ls-heading);
  line-height: 1.15;
  margin: 8px 0 8px;
  background: var(--champagne-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
}
.vm-sub {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  max-width: 56ch;
  margin: 0 0 12px;
  line-height: 1.6;
}
.vm-progress { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.vm-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  color: var(--fg-subtle);
  font: 500 11px/1 ui-monospace, monospace;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.vm-dot.is-on {
  background: var(--champagne-core);
  color: #000;
  border-color: var(--champagne-core);
  box-shadow: 0 0 12px rgba(194,168,130,0.4);
}
.vm-dot-line { width: 28px; height: 1px; background: rgba(255,255,255,0.12); }
.vm-body { padding: 8px 36px 28px; overflow-y: auto; flex: 1; }
.vm-step-label {
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--champagne-core);
  font-weight: var(--fw-medium);
  margin: 20px 0 16px;
}
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vm-field { display: flex; flex-direction: column; gap: 6px; }
.vm-field-full { grid-column: 1 / -1; }
.vm-field > span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
}
.vm-field input, .vm-field select, .vm-field textarea {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--fg);
  font: 400 14px/1.4 var(--font-body);
  outline: none;
  transition: all var(--dur-base) var(--ease-out);
}
.vm-field textarea { resize: vertical; min-height: 80px; }
.vm-field input:focus, .vm-field select:focus, .vm-field textarea:focus {
  border-color: var(--champagne-core);
  background: rgba(194,168,130,0.05);
  box-shadow: 0 0 0 1px rgba(194,168,130,0.3);
}
.vm-field select { cursor: pointer; }
.vm-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px;
  padding: 14px;
  border: 0.5px dashed rgba(194,168,130,0.2);
  border-radius: 10px;
  cursor: pointer;
}
.vm-check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--champagne-core);
  cursor: pointer;
}
.vm-check span {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: 1.55;
}
.vm-foot {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 24px; flex-wrap: wrap;
}
.vm-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; -webkit-text-fill-color: rgba(0,0,0,0.5); }
.vm-foot-agreement {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent 0%, #0c0907 30%);
  padding-top: 18px; margin-top: 18px;
}
.vm-agreement-body { padding: 8px 28px 18px; }

/* Generated Agreement document */
.agreement {
  background: #fbf6ec;
  color: #1a1410;
  padding: 56px 56px 48px;
  border-radius: 14px;
  font-family: "Manrope", -apple-system, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.04);
  letter-spacing: -0.005em;
}
.agreement * { color: inherit; }
.agreement-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid #c2a882;
  margin-bottom: 24px;
}
.agreement-brand {
  font-family: "Glacial Indifference", "Manrope", sans-serif;
  font-size: 26px; font-weight: 400;
  letter-spacing: 0.04em; color: #6a583c;
}
.agreement-payoff {
  font-family: "Glacial Indifference", "Manrope", sans-serif;
  font-size: 9px; letter-spacing: 0.36em;
  text-transform: uppercase; color: #9a825e; margin-top: 4px;
}
.agreement-meta {
  text-align: right; font-size: 10px;
  letter-spacing: 0.06em; color: #6a583c; line-height: 1.6;
}
.agreement-meta .mono { color: #6a583c; font-family: ui-monospace, "SF Mono", monospace; }
.agreement-title {
  font-family: "Manrope", sans-serif;
  font-size: 22px; font-weight: 300;
  line-height: 1.2; letter-spacing: -0.02em;
  color: #1a1410; margin: 0 0 14px;
}
.agreement-intro {
  font-size: 13px; color: #3a3020;
  margin: 0 0 26px; max-width: 64ch;
}
.agreement section { margin-bottom: 22px; page-break-inside: avoid; }
.agreement section h3 {
  font-family: "Manrope", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a583c; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 0.5px solid #d4c5a8;
}
.agreement section p { color: #2a2218; margin: 0; max-width: 70ch; }
.agreement-dl {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 6px 18px; margin: 0;
}
.agreement-dl dt {
  font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6a583c; font-weight: 500;
}
.agreement-dl dd { margin: 0; color: #1a1410; font-weight: 400; }
.agreement-notes {
  background: rgba(194,168,130,0.12);
  padding: 14px 16px;
  border-left: 2px solid #c2a882;
  border-radius: 4px;
}
.agreement-signatures {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; margin: 36px 0 24px;
}
.agreement-sigline { height: 28px; border-bottom: 1px solid #1a1410; margin-bottom: 6px; }
.agreement-signatures .caption {
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6a583c; font-weight: 500; margin: 0 0 4px;
}
.agreement-signatures .mono {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px; color: #3a3020; margin: 0;
}
.agreement-foot {
  display: flex; justify-content: space-between;
  padding-top: 18px; border-top: 0.5px solid #d4c5a8;
  font-size: 9px; letter-spacing: 0.06em;
  color: #6a583c; margin-top: 24px;
}
.vm-success { padding: 48px 36px 36px; text-align: center; }
.vm-success-icon {
  width: 80px; height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(194,168,130,0.1);
  border: 1px solid rgba(194,168,130,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--champagne-core);
  box-shadow: 0 0 0 6px rgba(194,168,130,0.06);
}

@media print {
  body.printing-agreement * { visibility: hidden; }
  body.printing-agreement .agreement, body.printing-agreement .agreement * { visibility: visible; }
  body.printing-agreement .vm-root { position: static; padding: 0; }
  body.printing-agreement .vm-backdrop, body.printing-agreement .vm-close,
  body.printing-agreement .vm-foot-agreement, body.printing-agreement .vm-head { display: none !important; }
  body.printing-agreement .vm-shell { background: white; box-shadow: none; border: none; max-width: none; max-height: none; border-radius: 0; }
  body.printing-agreement .vm-body { padding: 0; overflow: visible; }
  body.printing-agreement .agreement { box-shadow: none; border-radius: 0; padding: 32px; }
}

@media (max-width: 700px) {
  .vm-root { padding: 12px; }
  .vm-shell { max-height: calc(100vh - 24px); }
  .vm-head { padding: 28px 24px 12px; }
  .vm-body { padding: 8px 24px 24px; }
  .vm-grid { grid-template-columns: 1fr; }
  .agreement { padding: 28px 22px; font-size: 12px; }
  .agreement-dl { grid-template-columns: 1fr; gap: 2px 0; margin-bottom: 10px; }
  .agreement-dl dd { margin-bottom: 8px; }
  .agreement-signatures { grid-template-columns: 1fr; gap: 24px; }
  .vm-foot { flex-direction: column-reverse; }
  .vm-foot .btn { width: 100%; }
  .vm-foot-agreement > div { width: 100%; flex-direction: column; }
}

/* Footer non-link items (dati societari) — aggiunto in fase di unificazione */
.site-footer .footer-col li .footer-static{ color:var(--muted,#9a948a); opacity:.85; cursor:default; }

/* Venue modal — selettore giorni a pillole (aggiunto fase candidature) */
.vm-daypills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.vm-daypills .vm-pill{
  appearance:none; cursor:pointer; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line,#2a2a2a); background:transparent;
  color:var(--cream,#F2EFE8); font:inherit; font-size:13px; letter-spacing:.02em;
  transition:all .15s ease;
}
.vm-daypills .vm-pill:hover{ border-color:var(--champagne-core,#C2A882); }
.vm-daypills .vm-pill.is-on{
  background:var(--champagne-core,#C2A882); border-color:var(--champagne-core,#C2A882);
  color:#1a1409; font-weight:600;
}

/* Signup modal small + sub-sedi (fase candidature) */
.vm-shell.vm-shell-sm{ max-width:520px; }
.vm-subsite{ margin-top:4px; }
.vm-subsite-row{ display:flex; gap:10px; }
.vm-subsite-row input{ flex:1 1 0; min-width:0; }
@media(max-width:560px){ .vm-subsite-row{ flex-direction:column; } }

/* Hero video — controlli volume + sottotitoli (fase candidature) */
.hero-video-ctrl{
  position:absolute; z-index:5; right:24px; bottom:24px;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background:rgba(20,20,20,.45); backdrop-filter:blur(8px);
  border:1px solid rgba(242,239,232,.18);
}
.hero-video-ctrl .hvc-btn,
.hero-video-ctrl .hvc-cc{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#F2EFE8; padding:0;
}
.hero-video-ctrl .hvc-btn{ width:22px; height:22px; }
.hero-video-ctrl .hvc-cc{
  font-size:11px; font-weight:700; letter-spacing:.08em; line-height:1;
  border:1px solid rgba(242,239,232,.4); border-radius:5px; padding:3px 6px; opacity:.7;
}
.hero-video-ctrl .hvc-cc.is-on{ background:var(--champagne-core,#C2A882); border-color:var(--champagne-core,#C2A882); color:#1a1409; opacity:1; }
.hero-video-ctrl .hvc-vol{ width:84px; height:3px; accent-color:var(--champagne-core,#C2A882); cursor:pointer; }
@media(max-width:560px){ .hero-video-ctrl{ right:14px; bottom:14px; gap:8px; } .hero-video-ctrl .hvc-vol{ width:60px; } }
/* Sottotitoli hero */
.hero-video::cue{ background:rgba(20,20,20,.6); color:#F2EFE8; font-family:'Manrope',sans-serif; font-weight:400; }

/* Sezioni Partner Program & Career (fase candidature) */
.section.partner-program, .section.career{ padding:96px 0; border-top:1px solid var(--line,#2a2a2a); }
.section .section-lede{ color:#cfc9bd; font-size:17px; line-height:1.65; margin-top:14px; }
.career-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:820px){ .career-grid{ grid-template-columns:1fr; } }
.career-card{ border:1px solid var(--line,#2a2a2a); border-radius:14px; padding:22px; background:var(--bg-2,#1b1b1b); }
.career-card h4{ margin:0 0 8px; font-size:16px; font-weight:500; color:var(--cream,#F2EFE8); }
.career-card p{ margin:0 0 16px; font-size:14px; color:#9a948a; line-height:1.55; }

/* Scelta stazioni venue: flag + quantità (task 1.1) */
.vm-stations{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.vm-station-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line,#2a2a2a); border-radius:9px; padding:9px 12px; background:var(--bg-2,#1b1b1b); }
.vm-station-row.is-on{ border-color:var(--champagne-core,#C2A882); }
.vm-station-check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--cream,#F2EFE8); margin:0; }
.vm-station-check input{ width:auto; }
.vm-station-qty{ width:72px; background:#161513; border:1px solid var(--line,#2a2a2a); border-radius:7px; color:var(--cream,#F2EFE8); font:inherit; font-size:14px; padding:6px 8px; }

/* Tooltip "i" tipologia partner (task 3.2) */
.vm-info{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px;
  border:1px solid var(--champagne-core,#C2A882); color:var(--champagne-core,#C2A882); border-radius:50%; font-size:10px; font-style:italic; font-weight:700; cursor:help; vertical-align:middle; }
.vm-info .vm-info-pop{ position:absolute; bottom:140%; left:50%; transform:translateX(-50%) translateY(4px);
  width:240px; max-width:70vw; background:#0f0f0f; border:1px solid var(--line,#2a2a2a); border-radius:9px; padding:10px 12px;
  font-size:12px; font-style:normal; font-weight:400; line-height:1.5; color:#d8d2c7; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; z-index:20; box-shadow:0 12px 28px rgba(0,0,0,.5); pointer-events:none; }
.vm-info:hover .vm-info-pop, .vm-info:focus .vm-info-pop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* Selettore lingua del form candidatura (task 1.2) */
.vm-formlang{ display:flex; gap:6px; justify-content:flex-end; margin-bottom:6px; }
.vm-formlang .vm-flag{ appearance:none; cursor:pointer; border:1px solid var(--line,#2a2a2a); background:transparent; color:var(--muted,#9a948a); font:inherit; font-size:11px; letter-spacing:.04em; padding:4px 9px; border-radius:999px; transition:all .15s; }
.vm-formlang .vm-flag:hover{ color:var(--cream,#F2EFE8); border-color:var(--champagne-core,#C2A882); }
.vm-formlang .vm-flag.is-on{ background:var(--champagne-core,#C2A882); border-color:var(--champagne-core,#C2A882); color:#1a1409; font-weight:600; }

/* ═════════════════════════════════════════════════════════════════════════════
   GOLD SATIN — ogni TESTO champagne riceve un gradiente satinato/spazzolato.
   Riguarda SOLO il colore del testo: bottoni con background champagne, pillole,
   border e linee restano champagne solid (sono shape, non testo).
   Usa background-clip:text + text-fill-color:transparent; fallback su solid color.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gradiente "satin" — orizzontale, con highlight luminoso al centro per simulare la riflessione su metallo spazzolato.
     Versione SCHIARITA (26 mag): rimossi i bronzi scuri agli estremi per una luminosità più uniforme. */
  --gold-satin: linear-gradient(100deg,
    #A88B5C 0%,
    #C2A882 18%,
    #DEC49A 32%,
    #EFD9B2 46%,
    #FFFCF0 52%,
    #EFD9B2 58%,
    #DEC49A 70%,
    #C2A882 82%,
    #A88B5C 100%);
  /* Variante più tenue per testi piccoli/labels */
  --gold-satin-soft: linear-gradient(100deg,
    #B89770 0%,
    #DEC49A 35%,
    #FFFCF0 55%,
    #DEC49A 75%,
    #B89770 100%);
}

/* Utility class — usabile ovunque per trasformare un testo in satin */
.gold-satin,
.gold-satin-text {
  background-image: var(--gold-satin);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gold-satin-soft {
  background-image: var(--gold-satin-soft);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Promozione automatica del colore champagne a satin gradient sui testi noti.
   I selettori sono solo dove --accent è applicato come COLOR del testo. */
.eyebrow,
.kicker,
.section-title .champ,
.display .champ,
.hero-statement .champ,
.manifesto-quote .champ,
.cta-final h2 .champ,
.timeline-item.is-now .when,
.footer-bottom .designed,
.lang-switch a.active,
.hw-3d-controls button.is-on,
.designed {
  background-image: var(--gold-satin);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Sui :hover di link/nav usiamo il gradiente "soft" per non strillare troppo */
.main-nav a:hover,
.footer-col a:hover,
.btn-ghost:hover,
.mobile-nav a:hover {
  background-image: var(--gold-satin-soft);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* .btn-outline:hover — testo gradient RIMOSSO: il Button System ufficiale tiene il testo oro pieno. */

/* Fallback per browser senza supporto background-clip:text (vecchi Edge/IE/UC):
   se text-fill-color:transparent non è supportato, il color:transparent farebbe
   sparire il testo — questo media query lo riattiva. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-satin, .gold-satin-text, .gold-satin-soft,
  .eyebrow, .kicker,
  .section-title .champ, .display .champ, .hero-statement .champ,
  .manifesto-quote .champ, .cta-final h2 .champ,
  .timeline-item.is-now .when, .footer-bottom .designed,
  .lang-switch a.active, .hw-3d-controls button.is-on, .designed,
  .main-nav a:hover, .footer-col a:hover, .btn-ghost:hover,
  .mobile-nav a:hover {
    background-image: none;
    color: var(--champagne-core);
    -webkit-text-fill-color: var(--champagne-core);
  }
}

/* ════════════════════════════════════════════════════════════════
   EXPLAINER KIT — schede tecniche (dtable), KPI ricarica, barre di
   carica animate, split Hidonix, prodrow. Portato 1:1 dal Company
   Overview (DEPLOY_FINALE) sul sito. 4 giu 2026.
   ════════════════════════════════════════════════════════════════ */
:root{--xg-grad:linear-gradient(100deg,#8A7449,#CEB37E,#F4E6C2,#C2A882,#9C8056,#EADBB4,#B5925E,#8A7449);
      --xg-bd:rgba(255,255,255,.10);--xg-bd2:rgba(194,168,130,.4);--xg-off:#F4F1EA;--xg-sec:rgba(244,241,234,.66);--xg-champ:#CEB37E;}
@keyframes xgShine{to{background-position:200% center;}}
@keyframes xgGrow{0%{width:0;}38%{width:var(--w);}100%{width:var(--w);}}

/* — Tabella schede tecniche — */
.dtable{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px;}
.dtable th,.dtable td{border:1px solid var(--xg-bd);padding:8px 10px;text-align:left;vertical-align:top;color:var(--xg-sec);}
.dtable th{background:rgba(194,168,130,.14);color:var(--xg-off);font-weight:600;}
.dtable td:first-child{color:var(--xg-champ);font-weight:500;background:rgba(255,255,255,.02);white-space:nowrap;}
@media(max-width:560px){.dtable{font-size:12px}.dtable th,.dtable td{padding:6px 7px}.dtable td:first-child{white-space:normal}}

/* — Render prodotti — */
.prodrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0;}
.prod{border:1px solid var(--xg-bd);border-radius:14px;overflow:hidden;background:#0d0d0d;box-shadow:0 14px 30px rgba(0,0,0,.5);}
.prod img{width:100%;height:280px;display:block;background:#0d0d0d;object-fit:cover;}
.prod.pb img{object-fit:contain;object-position:center;transform:scale(1.6);transform-origin:center;}
.prod .cap{padding:9px 10px;font-size:12.5px;color:var(--xg-champ);font-weight:600;text-align:center;border-top:1px solid var(--xg-bd);}

/* — Nota / titoletto oro — */
.gnote{margin-top:26px;margin-bottom:6px;font-weight:700;font-size:15px;background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite;}

/* — KPI ricarica — */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 6px;max-width:660px;}
@media(max-width:480px){.kpis{grid-template-columns:repeat(2,1fr);}}
.kpi{border:1px solid var(--xg-bd2);border-radius:12px;padding:14px 10px;background:linear-gradient(160deg,#1b1b1b,#0c0c0c);text-align:center;}
.kpi .n{font-size:clamp(21px,3.2vw,29px);font-weight:800;line-height:1.05;background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite;}
.kpi .l{font-size:11px;color:var(--xg-sec);margin-top:6px;letter-spacing:.03em;line-height:1.3;}

/* — Barre di carica animate — */
.charge{display:flex;flex-direction:column;gap:12px;margin-top:10px;max-width:660px;}
.chargecard{border:1px solid var(--xg-bd);border-radius:12px;padding:13px 16px;background:linear-gradient(160deg,#181818,#0c0c0c);}
.cdev{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:14px;gap:10px;}
.cdev b{background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite;}
.cdev span{color:var(--xg-sec);font-size:12.5px;}
.ctrack{height:18px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--xg-bd);}
.cfill{height:100%;width:0;border-radius:999px;background:var(--xg-grad);background-size:200% auto;animation:xgGrow 8s ease-out infinite,xgShine 6s linear infinite;}

/* — Split Hidonix (immagine + testo) — */
.xsplit{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;}
@media(max-width:820px){.xsplit{grid-template-columns:1fr;}}
.xframe{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--xg-bd);box-shadow:0 16px 36px rgba(0,0,0,.55);}
.xframe img{width:100%;height:100%;object-fit:cover;display:block;}
.tagimg{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);}
.xsplit .xtxt h3{font-weight:600;font-size:22px;margin-bottom:8px;background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite;}
.xsplit .xtxt p{color:var(--xg-sec);font-weight:300;}
.xsplit .xtxt p b{color:var(--xg-off);font-weight:600;}

/* — Galleria DOOH (3 circuiti) — */
.xdooh{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
@media(max-width:820px){.xdooh{grid-template-columns:1fr;}}
.xdooh .c{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--xg-bd);aspect-ratio:16/10;box-shadow:0 14px 30px rgba(0,0,0,.5);}
.xdooh .c img{width:100%;height:100%;object-fit:cover;display:block;}
.xdooh .c span{position:absolute;left:10px;bottom:10px;font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px);z-index:4;}

/* — Menu W-only: al rollover la W si apre nella parola — */
.wnav{display:inline-flex;align-items:baseline;overflow:hidden}
.wnav .wl{display:inline-block;max-width:1.4em;opacity:1;transition:max-width .3s ease,opacity .2s ease}
.wnav .wf{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .38s ease,opacity .28s ease}
.wnav:hover .wl,.wnav:focus-visible .wl{max-width:0;opacity:0}
.wnav:hover .wf,.wnav:focus-visible .wf{max-width:170px;opacity:1}

/* — CTA flottanti che seguono lo scroll (stile presentazione cinese) — */
.float-ctas{position:fixed;bottom:20px;right:20px;z-index:998;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.float-ctas .btn{box-shadow:0 12px 28px rgba(0,0,0,.45)}
@media(max-width:560px){.float-ctas{left:16px;right:16px;align-items:stretch}.float-ctas .btn{width:100%}}
@media print{.float-ctas{display:none}}

/* ════ WHERE — scroll fluido a card con snap (niente frecce) ════ */
.vstrip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:10px max(calc((100vw - 1140px)/2),20px) 22px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain;}
.vstrip::-webkit-scrollbar{display:none}
.vstrip.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.vcard{flex:0 0 min(540px,86vw);scroll-snap-align:center;scroll-snap-stop:always;
  border:1px solid var(--xg-bd);border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#151515,#0c0c0c);
  box-shadow:0 16px 36px rgba(0,0,0,.45);opacity:.55;transform:scale(.97);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;}
.vcard.is-on{opacity:1;transform:scale(1);border-color:rgba(194,168,130,.45)}
.vcard-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.vcard-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vcard-body{padding:18px 20px 20px}
.vcard-h{font-weight:600;font-size:20px;background:var(--xg-grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite}
.vcard-c{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--xg-sec);margin:4px 0 12px}
.vfeat{list-style:none;margin:0;padding:0}
.vfeat li{position:relative;padding-left:18px;margin-bottom:8px;font-size:13.5px;font-weight:300;color:var(--xg-sec);line-height:1.5}
.vfeat li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--pit-gold,#C2A882)}
.vquote{margin-top:12px;padding-top:12px;border-top:1px solid var(--xg-bd);font-size:14px;font-weight:500;font-style:italic;color:#EFD9B2}
@media(max-width:560px){.vcard{flex-basis:88vw}.vcard-body{padding:14px 16px 16px}}

/* ════ Sottotitoli hero — eleganti e leggibili ════ */
video::cue{background:rgba(8,8,8,.5);color:#F2EFE8;font-family:'Manrope',-apple-system,sans-serif;
  font-weight:500;font-size:clamp(15px,2.2vw,22px);line-height:1.5;letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
.hero-video::cue{background:rgba(8,8,8,.5)}

/* ════ Rifiniture mobile verticale ════ */
@media(max-width:560px){
  .prodrow{grid-template-columns:1fr 1fr}
  .prod img{height:190px}
  .xsplit{gap:16px}
  .gnote{font-size:14px}
  .charge{max-width:100%}
  .kpis{max-width:100%}
  .float-ctas .btn{padding:13px 18px;font-size:13px}
}

/* ════ W più grandi nel menu ════ */
.wnav .wl{font-size:19px;font-weight:700;line-height:1}
.wnav .wf{font-size:15px}

/* ════ CTA gemelle "magnetiche" (hero ↔ flottanti ↔ card Win) ════ */
.fly-size{width:300px;justify-content:center}
@media(max-width:560px){.fly-size{width:min(300px,86vw)}}
.dock{display:inline-block;position:relative}
.dock-ghost{visibility:hidden;pointer-events:none}
.fly-cta{position:fixed;left:0;top:0;z-index:998;will-change:transform;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.fly-cta.fly-anim{transition:transform .55s cubic-bezier(.22,.9,.32,1)}

/* ════ Carosello: zone bordo auto-scroll + glide ════ */
.vwrap{position:relative}
.vedge{position:absolute;top:0;bottom:0;width:84px;z-index:5;display:flex;align-items:center;cursor:pointer;opacity:0;transition:opacity .25s ease}
.vwrap:hover .vedge{opacity:1}
.vedge span{font-size:34px;color:#CEB37E;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.vedge-l{left:0;justify-content:flex-start;padding-left:14px;background:linear-gradient(90deg,rgba(10,10,10,.65),transparent)}
.vedge-r{right:0;justify-content:flex-end;padding-right:14px;background:linear-gradient(270deg,rgba(10,10,10,.65),transparent)}
.vstrip{scroll-snap-type:x proximity;scroll-behavior:auto}
.vstrip.is-glide{scroll-snap-type:none}
@media(hover:none){.vedge{display:none}}

/* ════ Energy & Hidonix: immagini overlay, niente cornice "adesivo" ════ */
.xsplit.overlay{align-items:center}
.xsplit.overlay .xframe{border:0;border-radius:0;box-shadow:none;overflow:visible;position:relative}
.xsplit.overlay .xframe::before{content:"";position:absolute;inset:-6% -3%;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(194,168,130,.16),transparent 75%)}
.xsplit.overlay .xframe img{position:relative;z-index:1;width:100%;max-width:100%;margin:0;border-radius:22px;
  -webkit-mask-image:radial-gradient(115% 100% at 50% 50%,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%);
  mask-image:radial-gradient(115% 100% at 50% 50%,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.xsplit.overlay .tagimg{z-index:2;left:6px;bottom:4px}
/* (rimosso sbordo 104%) */

/* ════ Sfondo decorativo blocco Energy Switch ════ */
.energy-brokerage{position:relative;overflow:hidden}
.energy-brokerage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 18% 50%,rgba(194,168,130,.10),transparent 60%),
             radial-gradient(50% 70% at 88% 20%,rgba(206,179,126,.07),transparent 65%)}
.energy-brokerage .container{position:relative;z-index:1}

/* ════ FIX carosello + overlay (4 giu) ════ */
/* lo strip non cattura il pan verticale: la pagina scorre normalmente */
.vstrip{touch-action:pan-x pan-y}
/* grid blowout: le colonne non si allargano mai oltre il contenitore */
.xsplit>*{min-width:0}
.xsplit .xframe{min-width:0;max-width:100%}
/* su schermi stretti: immagini overlay a colonna piena, niente sbordi */
@media(max-width:820px){
  .xsplit.overlay .xframe img{width:100%;margin-left:0;
    -webkit-mask-image:radial-gradient(140% 110% at 50% 50%,#000 70%,rgba(0,0,0,.4) 90%,transparent 100%);
    mask-image:radial-gradient(140% 110% at 50% 50%,#000 70%,rgba(0,0,0,.4) 90%,transparent 100%)}
  .xsplit.overlay .xframe::before{inset:-6% -4%}
}

/* ════ FIX definitivo sovrapposizioni mobile (4 giu, v2) ════ */
@media(max-width:820px){
  .xsplit,.xsplit.overlay{grid-template-columns:1fr !important}
  .xsplit.overlay .xframe img{width:100% !important;max-width:100% !important;margin:0 !important}
  .xsplit.overlay .xframe::before{inset:-6% -4% !important}
}
.xsplit .xtxt{position:relative;z-index:2}

/* ════ Footer compatto + social in Contatti ════ */
.footer-col ul{gap:4px !important}
.footer-col li{line-height:1.45}
.site-footer{padding-top:var(--sp-6)}
.footer-top{row-gap:var(--sp-4)}
.footer-legal{line-height:1.5}
.footer-bottom{padding-top:10px;padding-bottom:14px}
.footer-social{display:flex;gap:12px;margin-top:12px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(194,168,130,.45);color:#CEB37E;transition:all .2s ease}
.footer-social a:hover{background:rgba(194,168,130,.14);color:#F4E6C2;border-color:#C2A882}

/* ════ WHERE full-page: card grandi, immagine a tutta card, testo overlay ════ */
.vcard{flex:0 0 min(1180px,92vw);height:min(78vh,740px);position:relative;border-radius:20px}
.vcard-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit;overflow:hidden}
.vcard-img img{width:100%;height:100%;object-fit:cover}
.vcard-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.04) 0%,rgba(8,8,8,.18) 42%,rgba(8,8,8,.84) 76%,rgba(8,8,8,.95) 100%)}
.vcard .tagimg{top:16px;bottom:auto;left:16px;z-index:3}
.vcard-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 30px 26px;background:none}
.vcard-h{font-size:clamp(22px,2.6vw,30px)}
.vcard-c{margin:4px 0 10px}
.vfeat{max-width:760px}
.vfeat li{font-size:clamp(13px,1.5vw,15px);margin-bottom:7px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.vquote{border-top-color:rgba(255,255,255,.18);font-size:clamp(14px,1.6vw,17px)}
@media(max-width:560px){
  .vcard{flex-basis:92vw;height:min(82vh,620px)}
  .vcard-body{padding:16px 18px 18px}
  .vfeat li{margin-bottom:6px}
}

/* ════ Footer: W oro grandi, allineate, spaziatura uniforme ════ */
.wlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px !important}
.wlist li{margin:0;line-height:1.1}
.wlist a{display:inline-flex;align-items:baseline;text-decoration:none}
.wlist .fw{font-size:24px;font-weight:800;line-height:1;
  background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite}
.wlist .fwl{font-size:15px;color:var(--fg-muted,rgba(242,239,232,.7))}
.wlist a:hover .fwl{color:#CEB37E}

/* ════ WHERE: altezza naturale, nessun taglio (larghezza com'era) ════ */
.vcard{height:auto}
.vcard-img{position:relative;inset:auto}
.vcard-img img{width:100%;height:auto;object-fit:unset;display:block}
/* su schermi stretti il testo va SOTTO l'immagine, non sopra */
@media(max-width:820px){
  .vcard-body{position:static;padding:16px 18px 18px;background:linear-gradient(160deg,#141414,#0b0b0b)}
  .vcard-img::after{background:linear-gradient(180deg,transparent 70%,rgba(8,8,8,.45) 100%)}
  .vfeat li{text-shadow:none}
}

/* ════ Menu WWWWW unito in oro: al rollover si apre rivelando la parola ════ */
.main-nav.wnav-bar{gap:0 !important}
.wnav{padding:6px 1px}
.wnav .wl{max-width:none !important;opacity:1 !important;font-size:21px;font-weight:800;line-height:1;
  background:var(--xg-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xgShine 7s linear infinite}
.wnav:hover .wl,.wnav:focus-visible .wl{max-width:none;opacity:1}
.wnav .wf{font-size:16px;font-weight:500;color:#EFD9B2;align-self:baseline;
  max-width:0;opacity:0;transition:max-width .42s cubic-bezier(.22,.9,.32,1),opacity .3s ease,padding .42s ease}
.wnav:hover .wf,.wnav:focus-visible .wf{max-width:120px;opacity:1;padding-right:10px}