/* ============================================================
   VORTIX — design tokens
   ============================================================ */
:root{
  --font-display: 'General Sans', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1180px;

  --glow-neon: rgba(0,240,200,0.9);
  --glow-neon-2: rgba(34,229,255,0.65);
}

:root[data-theme="dark"]{
  --bg: #071619;
  --bg-rgb: 7,22,25;
  --surface: #0b2529;
  --surface-2: #123640;
  --ink: #f3ede0;
  --ink-dim: #b7c2be;
  --ink-faint: #78908e;
  --lime: #22a0af;
  --lime-dim: #146068;
  --lime-ink: #071619;
  --gold: #e8dcc8;
  --gold-dim: #c2ad86;
  --hairline: rgba(243,237,224,0.09);
  --hairline-strong: rgba(243,237,224,0.16);
  --glass-bg: rgba(243,237,224,0.05);
  --glass-border: rgba(243,237,224,0.10);
  --shadow: 0 30px 80px rgba(0,0,0,0.5);
  --stage-glow: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%);
  --glow-tint: rgba(34,160,175,0.20);
  --glow-ring: rgba(34,160,175,0.6);
  --glow-ring-2: rgba(232,220,200,0.5);
}

:root[data-theme="light"]{
  --bg: #e8dcc8;
  --bg-rgb: 232,220,200;
  --surface: #ffffff;
  --surface-2: #f1e3cb;
  --ink: #0b2529;
  --ink-dim: #3e5c60;
  --ink-faint: #7c9194;
  --lime: #0e2e33;
  --lime-dim: #082024;
  --lime-ink: #e8dcc8;
  --gold: #b29b72;
  --gold-dim: #8a7656;
  --hairline: rgba(11,37,41,0.10);
  --hairline-strong: rgba(11,37,41,0.18);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(11,37,41,0.08);
  --shadow: 0 30px 70px rgba(7,22,25,0.10);
  --stage-glow: radial-gradient(circle at 50% 42%, rgba(11,37,41,0.06), rgba(11,37,41,0) 60%);
  --glow-tint: rgba(14,46,51,0.14);
  --glow-ring: rgba(14,46,51,0.55);
  --glow-ring-2: rgba(178,155,114,0.45);
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
svg{ display:block; }
.mono{ font-family: var(--font-mono); letter-spacing: -0.01em; }

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

h1{ font-size: clamp(3.4rem, 8vw, 6.6rem); font-weight:600; letter-spacing:-0.03em; line-height:0.98; }
h2{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight:600; letter-spacing:-0.025em; line-height:1.08; }
h3.big{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight:600; letter-spacing:-0.02em; line-height:1.15; }
h3{ font-size: 1.25rem; font-weight:600; letter-spacing:-0.01em; }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-dim); line-height:1.5; font-weight:400; }
p{ color: var(--ink-dim); line-height:1.6; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.section{ position: relative; padding: 128px 0; }
.section.tint{ background: var(--surface); }
.section.light{ background: var(--bg); }
.section-head{ max-width: 680px; margin: 0 auto 64px; }
#come-funziona .section-head{ max-width: 850px; }
#prezzo .section-head{ max-width: 820px; }
#faq .section-head{ max-width: 820px; }
.section-head p{ margin-top:14px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-dim); margin-bottom: 22px;
}
.eyebrow.center{ display:flex; justify-content:center; width:100%; }
.eyebrow.accent{ color: var(--lime); }
.eyebrow.glass-pill{
  background: var(--glass-bg); border:1px solid var(--glass-border);
  padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(14px);
  color: var(--ink);
}
.dot-live{ width:7px; height:7px; border-radius:50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(34,160,175,.6); animation: pulse 2.4s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,160,175,.5); }
  70%{ box-shadow: 0 0 0 7px rgba(34,160,175,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,160,175,0); }
}
.ink-accent{ color: var(--lime); }

.link-more{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color: var(--ink); border-bottom:1px solid var(--hairline-strong); padding-bottom:2px; transition: color .3s, border-color .3s, gap .3s; }
.link-more:hover{ color: var(--lime); border-color: var(--lime); gap:10px; }
.link-more.on-dark{ color: var(--ink); }
.inline-link{ text-decoration:underline; text-underline-offset:3px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; border-radius: 999px; font-weight:600; font-size:1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
}
.btn-primary{ background: var(--lime); color: var(--lime-ink); box-shadow: 0 10px 30px -8px rgba(34,160,175,.4); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(34,160,175,.55); }
.btn-primary:disabled{ opacity:.4; box-shadow:none; cursor:not-allowed; pointer-events:none; }
.btn-sm{ padding: 10px 20px; font-size:.9rem; }
.btn-block{ width:100%; }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; padding: 15px 22px; border-radius:999px; font-weight:600; color: var(--ink-dim); transition: color .2s, background .2s; }
.btn-ghost:hover{ color: var(--ink); background: var(--surface-2); }

/* ============================================================
   Grain overlay (subtle texture, adds materiality)
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index: 999; pointer-events:none; opacity:.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Nav
   ============================================================ */
#site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 18px 0;
  background: rgba(var(--bg-rgb), 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
#site-header.scrolled{ border-color: var(--hairline); }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; }
.logo .dot{ color: var(--lime); }
.logo-disc{ width:26px; height:26px; }
.logo-disc svg{ width:100%; height:100%; }

/* Marchio Green Mind Group. Il tratto e' sottile: sotto i 34px le foglie si
   impastano, quindi qui sta piu' grande del disco che ha sostituito. Le due
   versioni sono due immagini e non un filtro: invertire avrebbe schiarito
   anche i bordi morbidi, sporcando il contorno. */
.logo-marchio{ display:block; width:34px; height:34px; flex:none; }
.logo-marchio img{ width:100%; height:100%; object-fit:contain; display:block; }
:root[data-theme="dark"] .solo-chiaro{ display:none; }
:root[data-theme="light"] .solo-scuro{ display:none; }
.disc-rim{ fill:none; stroke: var(--gold); stroke-width:2; opacity:.7; }
.disc-hub{ fill: var(--lime); }
.disc-spokes line{ stroke: var(--ink-dim); stroke-width:2; stroke-linecap:round; }
.spin{ transform-origin: 24px 24px; animation: spin 6s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.links{ display:flex; gap:34px; }
.links a{ font-size:.94rem; color: var(--ink-dim); transition: color .25s; position:relative; }
.links a:hover{ color: var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.price-pill{ font-family: var(--font-mono); font-size:.85rem; color: var(--ink-dim); border:1px solid var(--hairline-strong); padding:6px 12px; border-radius:999px; transition: color .2s, border-color .2s; }
a.price-pill:hover{ color: var(--ink); border-color: var(--lime); }

/* L'accesso dentro il menu del panino. Sta nascosto quasi sempre: serve
   solo sotto i 640px, dove il pulsante in alto non ci sta e senza questa
   voce dal telefono il back office non era raggiungibile dal sito. */
.link-accedi{ display:none; align-items:center; justify-content:center; gap:8px; margin-top:6px; padding:13px 18px; border:1px solid var(--hairline-strong); border-radius:999px; font-weight:600; color: var(--ink); }
.link-accedi:hover{ border-color: var(--lime); }

.theme-toggle{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--hairline-strong); color: var(--ink); transition: border-color .3s, background .3s; }
.theme-toggle:hover{ background: var(--surface-2); }
.theme-toggle svg{ width:18px; height:18px; }
.icon-moon{ display:none; }
:root[data-theme="dark"] .icon-sun{ display:none; }
:root[data-theme="dark"] .icon-moon{ display:block; }

.nav-burger{ display:none; flex-direction:column; gap:5px; width:22px; }
.nav-burger span{ height:2px; background: var(--ink); border-radius:2px; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; padding: 190px 0 100px; overflow:hidden; }
.aurora-canvas{
  position:absolute; inset:-20% -10% auto -10%; height:900px; width:120%; z-index:-1;
  filter: blur(34px);
  opacity: .7;
}
:root[data-theme="light"] .aurora-canvas{ opacity: .8; }
.hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:center; }
.hero h1{ margin-top:6px; }
.hero .lead{ max-width: 480px; margin-top:22px; }
.hero-ctas{ display:flex; align-items:center; gap:28px; margin-top:38px; flex-wrap:wrap; }

.hero-media{ display:flex; justify-content:center; }
.hero-stage{ position:relative; width: min(100%, 380px); }
.hero-stage::before{
  content:""; position:absolute; inset: -18% -30%; z-index:-1;
  background: radial-gradient(closest-side, rgba(34,160,175,0.20), rgba(232,220,200,0.10) 55%, transparent 75%);
  filter: blur(6px);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.06); opacity:.85; } }
.hero-stage img{
  width:100%; height:auto; display:block; mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(ellipse 65% 62% at 50% 46%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 62% at 50% 46%, black 62%, transparent 100%);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.35));
}
:root[data-theme="light"] .hero-stage img{ filter: drop-shadow(0 30px 40px rgba(0,0,0,.15)); }
.rpm-tag{
  position:absolute; right:-6px; top:14%;
  display:flex; align-items:center; gap:8px;
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(14px);
  padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:600; color: var(--ink);
  box-shadow: var(--shadow);
  animation: float 5s ease-in-out infinite;
}
.rpm-tag small{ color: var(--ink-faint); font-weight:500; }
.rpm-tag-dot{ width:7px; height:7px; border-radius:50%; background: var(--lime); }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--ink-faint); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.scroll-cue svg{ width:16px; height:16px; animation: bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: var(--surface); overflow:hidden; white-space:nowrap; padding: 16px 0;
}
.marquee-track{ display:inline-flex; align-items:center; gap:14px; animation: ticker 32s linear infinite; font-size:.78rem; font-weight:600; letter-spacing:.06em; color: var(--ink-dim); }
.marquee-track .sep{ color: var(--lime); font-size:.6rem; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================================
   Storia / problema
   ============================================================ */
.narrative{ margin-bottom: 64px; }
.narrative h2{ margin-top:8px; max-width:900px; }
.narrative .lead{ max-width:640px; margin-top:20px; }

.problem-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:start; }
.problem-list li{
  display:flex; align-items:center; gap:14px; padding: 18px 0;
  border-bottom: 1px solid var(--hairline); color: var(--ink-dim); font-size:1.05rem;
}
.problem-list li svg{ width:20px; height:20px; color: var(--ink-faint); flex-shrink:0; }
.turn h3{ margin-top:8px; }
.turn p{ margin-top:16px; margin-bottom:24px; }

/* ============================================================
   Steps
   ============================================================ */
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; }
.step{ padding: 30px 26px; border-radius: var(--radius-md); background: var(--surface); transition: transform .4s var(--ease), border-color .4s; }
.step:hover{ transform: translateY(-6px); border-color: var(--hairline-strong); }
.step .num{ color: var(--lime); font-size:.85rem; font-weight:700; margin-bottom:16px; }
.step h3{ margin-bottom:10px; }
.step p{ font-size:.95rem; }

/* ============================================================
   Dark section base
   ============================================================ */
.dark-section{ background: #071619; color:#f3ede0; --glow-tint: rgba(34,160,175,0.20); --glow-ring: rgba(34,160,175,0.6); --glow-ring-2: rgba(232,220,200,0.5); }
.dark-section .ink-dim, .dark-section p{ color:#a7ab99; }
.dark-section .eyebrow{ color:#a7ab99; }
.dark-section .eyebrow.accent{ color:#22a0af; }
.dark-section .hairline-el{ border-color: rgba(243,237,224,0.09); }

/* ============================================================
   Tecnologia
   ============================================================ */
.tech-split{ display:grid; grid-template-columns: .9fr 1.1fr; gap:64px; align-items:center; margin-bottom: 120px; }
.tech-media{ border-radius: var(--radius-lg); overflow:hidden; padding: 10px; height:460px; }
.tech-media img{ border-radius: calc(var(--radius-lg) - 10px); width:100%; }
.tech-media model-viewer{
  width:100%; height:100%; border-radius: calc(var(--radius-lg) - 10px);
  --poster-color: transparent;
  background: radial-gradient(circle at 50% 45%, rgba(34,160,175,0.07), transparent 65%);
}
.tilt{ transition: transform .2s ease-out; will-change: transform; }
.dark-section h2{ margin-top:8px; }
.dark-section .lead{ margin-top:18px; margin-bottom:26px; }
.tech-list{ display:flex; flex-direction:column; gap:16px; }
.tech-list li{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; color: var(--ink); }
.tech-list li svg{ width:19px; height:19px; color: var(--lime); flex-shrink:0; margin-top:2px; }
.dark-section .tech-list li{ color:#f3ede0; }
.dark-section .tech-list li svg{ color:#22a0af; }
.tech-split .link-more{ display:inline-flex; margin-top:30px; color:#f3ede0; border-color: rgba(243,237,224,.24); }
.tech-split .link-more:hover{ color:#22a0af; border-color:#22a0af; }

.glass{ background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(16px); box-shadow: var(--shadow); }

/* ============================================================
   Sondaggio (embedded survey)
   ============================================================ */
.survey-frame{ max-width: 920px; margin: 0 auto; border-radius: var(--radius-lg); overflow:hidden; padding:0; }
.survey-frame iframe{ width:100%; height:520px; border:0; display:block; background:#fff; transition: height .35s var(--ease); }
@media (max-width: 480px){ .survey-frame{ border-radius: var(--radius-md); } }

/* ============================================================
   RPM dial section — signature
   ============================================================ */
.dial-section{ background: var(--surface); padding: 120px 0 60px; }
.dial-wrap .section-head p{ max-width:560px; }
.dial-row{ display:flex; align-items:center; justify-content:center; gap:80px; margin-top:60px; flex-wrap:wrap; }
.dial{ position:relative; width:280px; height:280px; flex-shrink:0; }
.dial-svg{ width:100%; height:100%; transform: rotate(-90deg); }
.dial-track{ fill:none; stroke: var(--hairline); stroke-width:9; }
.dial-track-inner{ stroke: var(--hairline); }
.dial-progress{ fill:none; stroke-width:9; stroke-linecap:round; transition: stroke-dashoffset 1.6s var(--ease); }
.dial-progress-outer{ stroke: var(--gold); stroke-dasharray: 653; stroke-dashoffset: 653; }
.dial-progress-inner{ stroke: var(--lime); stroke-dasharray: 540; stroke-dashoffset: 540; }
.dial.in-view .dial-progress-outer{ stroke-dashoffset: 0; }
.dial.in-view .dial-progress-inner{ stroke-dashoffset: calc(540 - (540 * 0.5)); }
.dial-readout{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dial-value{ font-size: 2.5rem; font-weight:700; letter-spacing:-0.02em; }
.dial-label{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); margin-top:8px; max-width:140px; }

.dial-legend{ display:flex; flex-direction:column; gap:18px; }
.legend-row{ display:flex; align-items:baseline; gap:10px; font-size:1.15rem; font-weight:600; }
.legend-row small{ font-size:.85rem; font-weight:400; color: var(--ink-dim); }
.swatch{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.swatch-outer{ background: var(--gold); }
.swatch-inner{ background: var(--lime); }
.stat-chips{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.chip{ display:flex; flex-direction:column; padding:14px 18px; border-radius: var(--radius-sm); background: var(--bg); border:1px solid var(--hairline); min-width:84px; }
.chip b{ font-size:1.3rem; color: var(--lime); }
.chip span{ font-size:.72rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* ============================================================
   Vantaggi
   ============================================================ */
.benefits{ display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); gap:20px; align-items:stretch; }
.benefit-card{ background: var(--bg); border-radius: var(--radius-md); padding: 28px; transition: transform .4s var(--ease), border-color .3s; display:flex; flex-direction:column; }
.benefit-card:hover{ transform: translateY(-6px); border-color: var(--lime); }
.icon-badge{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(34,160,175,0.12); color: var(--lime); margin-bottom:16px; flex-shrink:0; }
.icon-badge svg{ width:22px; height:22px; }
.benefit-card p{ font-size:.94rem; }

.benefit-card h3{ margin-bottom:8px; }
.benefit-card p{ font-size:.94rem; }

/* ============================================================
   Audience
   ============================================================ */
.audience-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; }
.audience-card{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:30px 14px; border-radius: var(--radius-md); background: var(--surface); text-align:center; font-weight:600; font-size:.92rem; transition: border-color .3s, transform .3s; }
.audience-card:hover{ transform: translateY(-4px); border-color: var(--hairline-strong); }
.audience-card svg{ width:28px; height:28px; color: var(--ink-dim); }

/* ============================================================
   Installazione
   ============================================================ */
.install-split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.install-split h2{ margin-top:8px; }
.install-split .lead{ margin-top:18px; margin-bottom:26px; }
.install-media{ border-radius: var(--radius-lg); padding:20px; }
.install-media img{ border-radius: var(--radius-sm); background:#fff; }

/* ============================================================
   Life section
   ============================================================ */
.life-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center; }
.life-media{ border-radius: var(--radius-lg); overflow:hidden; padding:10px; aspect-ratio: 1280/724; }
.life-media video{ width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius-lg) - 10px); display:block; }
.life-copy h2{ margin-top:10px; }
.life-copy .lead{ margin-top:18px; }

/* ============================================================
   Specs table
   ============================================================ */
.compare-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; max-width:900px; margin:0 auto; }
.compare-col h3{ font-family: var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--hairline-strong); }
.compare-col.before h3{ color: var(--ink-faint); }
.compare-col.after h3{ color: var(--lime); }
.compare-list{ list-style:none; }
.compare-list li{ font-size:1.15rem; font-weight:500; padding:15px 0; border-bottom:1px solid var(--hairline); color: var(--ink); }
.compare-list li:last-child{ border-bottom:none; }
.compare-col.before .compare-list li{ color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--hairline-strong); }

/* ============================================================
   Garanzia
   ============================================================ */
.guarantee{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.guarantee .card{ background: rgba(243,237,224,0.04); border-radius: var(--radius-md); padding:32px; text-align:center; }
.guarantee .card svg{ width:30px; height:30px; color:#22a0af; margin: 0 auto 18px; }
.guarantee .card h3{ color:#f3ede0; margin-bottom:8px; }
.guarantee .card p{ font-size:.92rem; }

/* ============================================================
   Prezzo
   ============================================================ */
.price-card{ max-width:460px; margin:0 auto; background: var(--surface); border-radius: var(--radius-lg); padding: 48px 40px; text-align:center; box-shadow: var(--shadow); }
.demo-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: rgba(34,160,175,0.12); color: var(--lime); margin: 0 auto 22px; }
.demo-icon svg{ width:26px; height:26px; }
.demo-lead{ font-size:.98rem; color: var(--ink-dim); line-height:1.55; margin-bottom:8px; }
.price-card ul{ margin: 24px 0 30px; display:flex; flex-direction:column; gap:14px; text-align:left; }
.price-card ul li{ display:flex; align-items:center; gap:10px; font-size:.98rem; color: var(--ink); }
.price-card ul li svg{ width:18px; height:18px; color: var(--lime); flex-shrink:0; }
.note{ font-size:.88rem; color: var(--ink-faint); }
.note.mt{ margin-top:20px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item{ background: var(--bg); border-radius: var(--radius-sm); padding: 6px 22px; }
.faq-item summary{ cursor:pointer; padding: 18px 0; font-weight:600; display:flex; justify-content:space-between; align-items:center; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.chevron{ width:11px; height:11px; border-right:2px solid var(--ink-dim); border-bottom:2px solid var(--ink-dim); transform: rotate(45deg); transition: transform .3s; flex-shrink:0; }
.faq-item[open] .chevron{ transform: rotate(-135deg); }
.faq-item .a{ padding: 0 0 20px; color: var(--ink-dim); font-size:.96rem; line-height:1.6; }

/* ============================================================
   CTA finale
   ============================================================ */
.final-cta{ padding: 100px 0 140px; }
.cta-glass{ max-width:760px; margin:0 auto; text-align:center; border-radius: var(--radius-lg); padding: 70px 50px; }
.cta-glass h2{ margin-bottom:18px; }
.cta-glass .lead{ margin: 0 auto 32px; max-width:520px; }

/* ============================================================
   Footer
   ============================================================ */
footer{ background: var(--surface); border-top:1px solid var(--hairline); padding: 70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--hairline); }
.footer-brand{ font-size:1.1rem; margin-bottom:14px; }
.footer-about{ color: var(--ink-dim); max-width:280px; font-size:.92rem; }
footer h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-faint); margin-bottom:16px; }
footer ul{ display:flex; flex-direction:column; gap:10px; }
footer ul a{ color: var(--ink-dim); font-size:.94rem; transition: color .25s; }
footer ul a:hover{ color: var(--lime); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:.82rem; color: var(--ink-faint); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color: var(--ink-faint); }
.footer-bottom a:hover{ color: var(--ink); }

/* ============================================================
   Card spotlight glow — cursor-follow, fine-pointer only
   ============================================================ */
@media (pointer: fine){
  .benefit-card, .guarantee .card, .audience-card, .price-card, .step, .faq-item{
    position: relative;
    background-image: radial-gradient(240px 240px at calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px), var(--glow-tint), transparent 68%);
    background-attachment: fixed;
    isolation: isolate;
  }
  .benefit-card::before, .guarantee .card::before, .audience-card::before, .price-card::before, .step::before, .faq-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    padding: 1.5px;
    background:
      radial-gradient(180px 180px at calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px), var(--glow-neon), transparent 70%),
      radial-gradient(240px 240px at calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px), var(--glow-neon-2), transparent 75%);
    background-attachment: fixed, fixed;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .benefit-card, .guarantee .card, .audience-card, .price-card, .step, .faq-item{ background-image:none !important; }
  .benefit-card::before, .guarantee .card::before, .audience-card::before, .price-card::before, .step::before, .faq-item::before{ display:none !important; }
}

/* ============================================================
   Booking modal (Prenota una dimostrazione)
   ============================================================ */
.booking-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.booking-overlay.open{ opacity:1; visibility:visible; transition: opacity .3s var(--ease); }
.booking-modal{
  position:relative; width:100%; max-width:560px; max-height:94vh;
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 36px 32px 28px; box-shadow: var(--shadow);
  transform: translateY(16px) scale(.98); transition: transform .35s var(--ease);
}
/* Il passo dei dati ha piu' campi: gli serve piu' larghezza per stare su due
   colonne invece di allungarsi in verticale. */
.booking-modal.wide{ max-width:700px; }

/* Ogni passo e' una colonna: il corpo si restringe se serve, i pulsanti
   restano fuori dallo scorrimento e quindi sempre visibili. */
.booking-step{ display:flex; flex-direction:column; min-height:0; flex:1; }
.booking-step[hidden]{ display:none; }
.booking-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

/* Calendario e orari affiancati: prima gli orari comparivano sotto e
   costringevano a scorrere proprio nel momento della scelta. */
.booking-panes{ display:grid; gap:18px; }
@media (min-width:520px){
  /* minmax(0,...) e' quello che impedisce alle colonne di sfondare oltre
     la larghezza disponibile quando il contenuto e' piu' largo. */
  .booking-panes{ grid-template-columns: minmax(0,1fr) minmax(0,156px); align-items:start; }
  .booking-panes .booking-times{ margin-top:0; }
  .booking-panes .booking-times-grid{ flex-direction:column; }
  .booking-panes .booking-time-chip{ width:100%; text-align:center; }
}
.booking-overlay.open .booking-modal{ transform: translateY(0) scale(1); }
.booking-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--ink-dim);
  transition: background .2s, color .2s;
}
.booking-close:hover{ background: var(--surface-2); color: var(--ink); }
.booking-close svg{ width:18px; height:18px; }

.booking-steps-indicator{ display:flex; gap:8px; margin-bottom:24px; }
.booking-dot{ width:24px; height:4px; border-radius:2px; background: var(--hairline-strong); transition: background .3s; }
.booking-dot.active{ background: var(--lime); }

.booking-step h3{ margin-top:6px; margin-bottom:8px; }
.booking-sub{ font-size:.92rem; margin-bottom:22px; }

.booking-cal{ border:1px solid var(--hairline); border-radius: var(--radius-md); padding:16px; }
.booking-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.booking-cal-title{ font-weight:600; font-size:.95rem; }
.booking-cal-nav{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink-dim); transition: background .2s; }
.booking-cal-nav:hover{ background: var(--surface-2); }
.booking-cal-nav:disabled{ opacity:.3; pointer-events:none; }
.booking-cal-nav svg{ width:16px; height:16px; }
.booking-cal-weekdays{ display:grid; grid-template-columns: repeat(7, 1fr); text-align:center; font-size:.72rem; color: var(--ink-faint); margin-bottom:6px; }
.booking-cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.booking-cal-cell{
  aspect-ratio:1; border-radius:8px; font-size:.85rem; color: var(--ink);
  display:flex; align-items:center; justify-content:center; transition: background .2s, color .2s;
}
.booking-cal-cell:not(.empty):not(.disabled):hover{ background: var(--surface-2); }
.booking-cal-cell.disabled{ color: var(--ink-faint); opacity:.35; cursor:default; }
.booking-cal-cell.today{ font-weight:700; color: var(--lime); }
.booking-cal-cell.selected{ background: var(--lime); color: var(--lime-ink); font-weight:600; }
.booking-cal-cell.empty{ pointer-events:none; }

.booking-times{ margin-top:20px; }
.booking-times-label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:10px; }
.booking-times-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.booking-time-chip{
  padding:9px 14px; border-radius:999px; border:1px solid var(--hairline-strong); font-size:.85rem;
  font-family: var(--font-mono); color: var(--ink); transition: border-color .2s, background .2s, color .2s;
}
.booking-time-chip:hover{ border-color: var(--lime); }
.booking-time-chip.selected{ background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.booking-time-chip.disabled{ color: var(--ink-faint); border-color: var(--hairline); opacity:.55; cursor:not-allowed; text-decoration: line-through; }

.booking-nav{ flex-shrink:0; }
.booking-recap{ background: var(--bg); border:1px solid var(--hairline); border-radius: var(--radius-sm); padding:12px 16px; font-size:.85rem; color: var(--lime); margin-bottom:20px; }

.booking-form{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.bk-form-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width:560px){
  .bk-form-grid{ grid-template-columns: repeat(6, 1fr); }
  .bk-field[data-span="1"]{ grid-column: span 1; }
  .bk-field[data-span="2"]{ grid-column: span 2; }
  .bk-field[data-span="3"]{ grid-column: span 3; }
  .bk-field[data-span="6"]{ grid-column: span 6; }
}
.bk-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.bk-field > span{ font-size:.78rem; color: var(--ink-dim); font-weight:500; }
.bk-field > span em{ color: var(--ink-faint); font-style:normal; font-weight:400; }
.booking-form select{
  width:100%; height:46px; padding:0 14px; border-radius:10px; border:1px solid var(--hairline-strong);
  background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size:.95rem;
  transition: border-color .2s;
}
.booking-form select:focus{ outline:none; border-color: var(--lime); }
.booking-form select:disabled{ opacity:.5; cursor:not-allowed; }

/* Il rosso compare solo dopo che il campo e' stato lasciato: segnare un
   errore mentre uno sta ancora scrivendo e' solo fastidioso. */
.booking-form .invalid input,
.booking-form input.invalid,
.booking-form select.invalid{ border-color:#c0392b; }
.booking-form .invalid input:focus,
.booking-form input.invalid:focus,
.booking-form select.invalid:focus{ border-color:#c0392b; }
.bk-hint{ font-size:.74rem; color:#c0392b; font-style:normal; min-height:0; }
.booking-form .consent{ font-size:.78rem; line-height:1.45; }
/* Sul passo dei dati il titolo e il riquadro del riepilogo si stringono:
   sono gli unici pixel rimasti da recuperare per non far scorrere nulla. */
.booking-step[data-step="2"] h3{ font-size:1.5rem; margin-bottom:10px; }
.booking-step[data-step="2"] .booking-recap{ padding:9px 14px; margin-bottom:14px; }
.booking-form textarea{ min-height:44px; }
.bk-hint:empty{ display:none; }
.booking-form input, .booking-form textarea{
  width:100%; height:46px; padding:0 15px; border-radius:10px; border:1px solid var(--hairline-strong);
  background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size:.95rem;
  transition: border-color .2s;
}
/* L'area delle note non ha altezza fissa: e' l'unico campo che cresce. */
.booking-form textarea{ height:auto; padding:12px 15px; }
.booking-form input::placeholder, .booking-form textarea::placeholder{ color: var(--ink-faint); }
.booking-form input:focus, .booking-form textarea:focus{ outline:none; border-color: var(--lime); }
.booking-form textarea{ resize:vertical; font-family:inherit; }
.booking-form .consent{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color: var(--ink-dim); line-height:1.5; cursor:pointer; }
.booking-form .consent input{ width:auto; margin-top:3px; accent-color: var(--lime); flex-shrink:0; }

.booking-error{
  font-size:.85rem; color:#c0392b; background: rgba(192,57,43,0.08);
  border:1px solid rgba(192,57,43,0.25); border-radius:10px; padding:11px 14px; margin-top:16px;
}
.booking-times-loading{ font-size:.85rem; color: var(--ink-faint); padding: 4px 0; }

.booking-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }

.booking-step-final{ text-align:center; padding-top:12px; }
.booking-check{
  width:64px; height:64px; border-radius:50%; background: rgba(34,160,175,0.14); color: var(--lime);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;
}
.booking-check svg{ width:30px; height:30px; }
.booking-step-final .btn{ margin-top:4px; }

@media (max-width: 480px){
  .booking-modal{ padding: 32px 20px 24px; }
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .links{ display:none; }
  .nav-burger{ display:flex; }
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero .lead{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .hero-media{ margin-top:20px; }
  .problem-grid, .tech-split, .install-split, .life-split, .compare-grid{ grid-template-columns: 1fr; gap:40px; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .benefits{ grid-template-columns: repeat(2, 1fr); }
  .audience-grid{ grid-template-columns: repeat(3, 1fr); }
  .guarantee{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .wrap{ padding: 0 22px; }
  .section{ padding: 90px 0; }
  .steps{ grid-template-columns: 1fr; }
  .benefits{ grid-template-columns: 1fr; }
  .audience-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; gap:30px; }
  .dial-row{ gap:40px; }
  .dial{ width:230px; height:230px; }
  .price-card{ padding: 40px 26px; }
  /* In 375px non stanno insieme simbolo, tema, accesso e demo: il
     pulsante in alto si toglie e l'accesso ricompare nel menu del panino,
     dove c'e' spazio per un dito. */
  .nav-cta .price-pill{ display:none; }
  .links .link-accedi{ display:inline-flex; }

  /* "VORTIX" era una parola sola e ci stava; "Green Mind Group" sono tre e
     andavano a capo, gonfiando l'intestazione e schiacciando il pulsante che
     serve davvero. Sotto i 640px resta il solo simbolo: e' esattamente il
     mestiere di un simbolo. */
  .logo{ font-size:0; gap:0; }
  .logo-marchio{ width:30px; height:30px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration: .001ms !important; }
}