/* L'attributo `hidden` nasconde SEMPRE, anche su elementi con un display
   esplicito. Senza questa riga un `.btn { display:block }` o un
   `.signup-check { display:flex }` VINCONO sullo stile UA di [hidden]: l'elemento
   resta a schermo e nel codice sembra nascosto. Era gia' successo quattro volte,
   ognuna curata con una regola mirata (signup-overlay, signup-card,
   signup-card-placeholder, lang-overlay); questa le sostituisce tutte.
   2026-07-19: spunta e bottone "Entra nel gestionale" restavano visibili nel
   passo carta del signup proprio per questo. */
[hidden] { display: none !important; }

:root {
  /* ══════════════════════════════════════════════════════════════
     DESIGN TOKENS — allineati al CRM (fonte di verità:
     CrankPalCRM/frontend/src/styles.css). Nomi IDENTICI al CRM.
     Le variabili storiche del sito restano come ALIAS (vedi in fondo):
     le pagine le usano ancora, ora referenziano i token canonici.
     ══════════════════════════════════════════════════════════════ */

  /* ---- Brand scale (CRM) ---- */
  --green-950: #062b21;
  --green-900: #0a3329;
  --green-800: #0f4035;
  --green-700: #155d4b;
  --teal-500: #2dc8a6;
  --teal-600: #1ea48a;
  --teal-700: #15806c;
  --teal-50:  #ecfdf5;
  --teal-100: #d1fae5;
  --teal-200: #a7f3d0;

  /* ---- Semantic (CRM) ---- */
  --bg: #f5f7f6;
  --surface: #ffffff;
  --text: #16201c;
  --text-secondary: #44514b;
  --text-muted: #6d7a74;
  --border-strong: #cbd5d0;
  --warning: #f59e0b;
  --danger: #e5484d;
  --success: #18a06a;
  --info: #3a7bd5;

  /* ---- Elevation (CRM) ---- */
  --shadow-xs: 0 1px 2px rgba(22,32,28,0.05);
  --shadow-sm: 0 1px 2px rgba(22,32,28,0.05), 0 2px 8px rgba(22,32,28,0.04);
  --shadow-md: 0 2px 4px rgba(22,32,28,0.05), 0 8px 24px rgba(22,32,28,0.08);
  --shadow-lg: 0 4px 8px rgba(10,51,41,0.06), 0 20px 48px rgba(10,51,41,0.14);

  /* ---- Shape & motion (CRM) ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 100px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Scala tipografica — 7 step (CRM) ---- */
  --fs-xs:  11px;   /* micro-meta, label maiuscoletto */
  --fs-sm:  12.5px; /* meta, celle secondarie */
  --fs-md:  14px;   /* corpo (default) */
  --fs-lg:  16px;   /* titoli card/sezione */
  --fs-xl:  20px;   /* titoli pagina */
  --fs-2xl: 26px;   /* numeri / titoli grandi */
  --fs-3xl: 34px;   /* hero/KPI */
  /* Display marketing — clamp() SOLO come token dedicati (no clamp sparsi) */
  --fs-display-1: clamp(42px, 6vw, 72px);   /* hero home officine */
  --fs-display-2: clamp(30px, 5vw, 46px);   /* hero pagina funzionalità */
  --fs-display-3: clamp(24px, 3.4vw, 34px); /* teaser funzionalità */
  --fs-display-4: clamp(22px, 3vw, 30px);   /* titoli riga funzionalità */

  /* ---- Spaziatura — scala a base 4px (CRM) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ══════════════════════════════════════════════════════════════
     TOKEN SPECIFICI DEL MARKETING (nessun equivalente nel CRM)
     ══════════════════════════════════════════════════════════════ */
  /* Palette "fun"/playful (pagina ciclisti) — tinte decorative vivaci */
  --fun-yellow: #ffd23f;
  --fun-pink:   #ff6b9d;
  --fun-sky:    #4cc9f0;
  --fun-purple: #9b5de5;
  --fun-lime:   #9ad34b;
  /* Rainbow (barra progresso scroll, pulsante "Per i ciclisti") */
  --rainbow-1: #ff6b6b;
  --rainbow-2: #f7934f;
  --rainbow-3: #ffd23f;
  --rainbow-4: #9ad34b;
  --rainbow-5: #4cc9f0;
  --rainbow-6: #9b5de5;
  --rainbow-7: #ff6b9d;
  /* Cielo pastello / hero playful */
  --sky-1: #aee2ff;  --sky-2: #d4f0ff;  --sky-3: #eaf6ff;  --sky-4: #e6f4ff;
  --peach-1: #fdf3e6; --peach-2: #fff2e6; --peach-3: #fff6ee; --peach-4: #fff4ee;
  --lavender-1: #f1ecff; --lavender-2: #f4f0ff; --lavender-3: #eef1ff; --lavender-4: #e7eeff;
  --ink-blue: #0e3a54;      /* testo su hero pastello */
  --ink-blue-soft: #2c5468; /* sottotitoli su pastello */
  --ink-blue-mute: #5a7382; /* meta su pastello */
  /* Oro CTA "più scelto" */
  --gold-1: #ffe169; --gold-2: #ffd23f; --gold-3: #f5b301; --gold-shadow: #e0ad00;
  --gold-hi: #ffe98c; --gold-lo: #f7bd1a;   /* varianti hover CTA oro */
  --star: #f5b942;                          /* stelle recensioni */
  --mint-bg: #ecfcf5;                        /* sfondo sezione menta (playful) */
  /* Coral CTA (hero/header playful) */
  --coral-1: #ff8a5b; --coral-1-h: #ff7a45; --coral-2-h: #ff5b91;
  /* Alert peach card (mockup avviso) */
  --alert-peach-bg: #fff4ee; --alert-peach-border: #fbcfba;
  /* Pastel di sezione (pagina ciclisti) — tinte decorative one-off */
  --lemon: #fffbe3; --rose: #fff0f6;
  /* Grafica hex minori del marketing (screenshot, dog wipe, ecc.) */
  --phone-black: #0a0e16;
  --wipe-dark-1: #21323b; --wipe-dark-2: #0e1a20;

  /* ══════════════════════════════════════════════════════════════
     ALIAS STORICI DEL SITO → puntano ai token canonici CRM.
     NON rimuovere: le pagine e le regole sotto li referenziano.
     ══════════════════════════════════════════════════════════════ */
  --bg-dark: var(--green-900);
  --bg-darker: var(--green-950);
  --card-dark: var(--green-800);
  --bg-light: #f0f3f1;              /* = CRM --bg-light */
  --bg-pale: #e6f4ef;              /* = CRM --bg-pale */
  --primary: var(--green-800);
  --accent: var(--teal-500);
  --accent-d: var(--teal-600);
  --orange: #f0683c;              /* = CRM --orange */
  --orange-d: #d1532a;            /* = CRM --orange-d */
  --text-mute: var(--text-muted);
  --text-light: var(--surface);
  --text-light-mute: rgba(255,255,255,0.65);
  --border: #e2e8e5;              /* = CRM --border */
  --border-dark: rgba(255,255,255,0.08);
  --muted: var(--text-muted);     /* fallback usato in .pricing-note */
  --mint: var(--bg-pale);         /* fallback usato in .lang-item:hover */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --max-w: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: white;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
img, svg { display: block; max-width: 100%; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ============== HEADER ============== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(10,51,41,0.10); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-lg); }
.logo-mark {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-lg);
}
.logo.light .logo-mark { background: var(--accent); color: var(--primary); }
.logo.light .logo-text { color: white; }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: var(--fs-md); font-weight: 500; color: var(--text);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--accent-d); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-pale); color: var(--primary);
  padding: 6px 12px; border-radius: 20px;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em;
}
.lang-switch:hover { background: var(--accent); color: white; }
.lang-globe { flex: none; }
.lang-code { line-height: 1; }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 22px; border-radius: var(--r-full);
  font-weight: 600; font-size: var(--fs-md);
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
}
.btn-sm { padding: 8px 14px; font-size: var(--fs-md); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--bg-darker); transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--primary); }
.btn-accent:hover { background: var(--accent-d); color: white; transform: translateY(-1px); }
.btn-accent-orange { background: var(--orange); color: white; padding: 14px 24px; border-radius: var(--r-md); font-weight: 600; }
.btn-accent-orange:hover { background: var(--orange-d); }
.btn-ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.section-light .btn-ghost { color: var(--primary); border-color: var(--border); }
.section-light .btn-ghost:hover { background: var(--bg-light); }
/* Pulsante "rainbow" per "Per i ciclisti": ponte dalla home officine al mondo ciclisti */
.btn-rainbow {
  color: var(--surface); border: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  background-image: linear-gradient(45deg, rgba(255,59,48,.5), rgba(255,149,0,.5), rgba(255,204,0,.5), rgba(52,199,89,.5), rgba(0,122,255,.5), rgba(88,86,214,.5), rgba(255,45,85,.5), rgba(255,59,48,.5));
  background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn-rainbow:hover { color: var(--surface); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.22); filter: saturate(1.12) brightness(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .btn-rainbow { animation: rainbowShift 11s linear infinite; }
}
@keyframes rainbowShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ============== HERO ============== */
.hero {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  color: white; padding: 80px 0 100px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,200,166,0.18) 0%, transparent 70%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 60px; align-items: center; position: relative;
}
.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 24px;
}
.hero h1 {
  font-size: var(--fs-display-1); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.03em; margin-bottom: 24px;
}
.grad {
  background: linear-gradient(92deg, var(--accent) 0%, #8fe9d2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-light-mute); margin-bottom: 32px; max-width: 520px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.pill {
  background: rgba(255,255,255,0.06); padding: 8px 16px;
  border-radius: var(--r-full); border: 1px solid rgba(45,200,166,0.4);
  font-size: var(--fs-md); color: var(--accent); font-weight: 500;
}
.hero-actions { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-disclaimer { font-size: var(--fs-sm); color: rgba(255,255,255,0.4); font-style: italic; }

/* ============== PHONE MOCKUP ============== */
.hero-phone { display: flex; justify-content: center; }
.phone-frame {
  width: 280px; background: var(--phone-black);
  border-radius: 36px; padding: 8px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
.phone-screen {
  background: white; border-radius: 28px;
  padding: 20px 16px 16px; color: var(--text);
  min-height: 540px;
}
.phone-shot {
  display: block; width: 300px; max-width: 100%; height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
}
.phone-screen.alt {
  background: var(--green-900); color: white;
}
.phone-status {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-mute); margin-bottom: 8px;
}
.alt .phone-status { color: rgba(255,255,255,0.6); }
.phone-title { font-weight: 700; font-size: var(--fs-lg); margin-bottom: 14px; }
.alt .phone-title { color: white; }

.health-card {
  background: var(--card-dark); color: white;
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px;
  border: 1px solid rgba(45,200,166,0.2);
}
.health-label { font-size: var(--fs-xs); opacity: 0.65; font-weight: 600; letter-spacing: 0.04em; }
.health-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.health-pct { font-size: var(--fs-3xl); font-weight: 800; }
.health-active { font-size: var(--fs-xs); color: var(--accent); margin-top: 2px; }
.health-ring { position: relative; width: 60px; height: 60px; }
.health-ring svg { width: 60px; height: 60px; }
.ring-grade {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: var(--fs-lg);
}

.components-label { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 6px; }
.components-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.mini { background: var(--bg-light); border-radius: var(--r-sm); padding: 8px 6px;
        display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mini b { font-size: var(--fs-md); }
.mini span:last-child { font-size: var(--fs-xs); color: var(--text-mute); }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot.ok { background: var(--accent); }
.dot.warn { background: var(--warning); }
.dot.danger { background: var(--orange); }

.alert-card {
  background: var(--alert-peach-bg); border: 1px solid var(--alert-peach-border); border-radius: var(--r-md);
  padding: 10px; display: flex; gap: 10px;
}
.alert-icon {
  background: var(--orange); color: white; width: 24px; height: 24px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;
  flex-shrink: 0;
}
.alert-icon.big { width: 40px; height: 40px; font-size: var(--fs-xl); margin-bottom: 6px; }
.alert-title { font-size: var(--fs-sm); font-weight: 600; }
.alert-sub { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 1px; }
.alert-cta { color: var(--orange); font-size: var(--fs-xs); font-weight: 700; }

.alert-big {
  background: var(--alert-peach-bg); border-radius: var(--r-md); padding: 16px; text-align: center;
  border: 1px solid var(--alert-peach-border); margin-bottom: 14px;
}
.alert-big-title { font-weight: 700; font-size: var(--fs-lg); color: var(--text); margin-top: 4px; }
.alert-big-sub { font-size: var(--fs-sm); color: var(--text-mute); margin-top: 4px; }
.alert-big-conf {
  display: inline-block; background: white; padding: 4px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-mute); margin-top: 8px;
}
.rec-label { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.04em; }
.rec-row { font-size: var(--fs-md); font-weight: 600; color: white; margin: 4px 0 10px; }
.workshop-card {
  background: rgba(255,255,255,0.06); border-radius: var(--r-md); padding: 10px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ws-icon {
  background: var(--accent); color: var(--primary); width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.workshop-card b { display: block; font-size: var(--fs-sm); color: white; }
.workshop-card span { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
.btn-accent-orange { display: block; width: 100%; }
.alt .covered { font-size: var(--fs-xs); color: var(--accent); text-align: center; margin-top: 8px; }

/* ============== SECTIONS ============== */
.section { padding: 90px 0; }
.section-light { background: var(--bg-light); }
.section-dark { background: var(--bg-dark); color: white; }
.section-download { background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-darker) 100%); color: white; }

.section-eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.18em; color: var(--primary);
  background: var(--bg-pale); padding: 6px 14px; border-radius: var(--r-full);
  margin-bottom: 18px;
}
.section-eyebrow.accent {
  background: rgba(45,200,166,0.15); color: var(--accent);
}
.section-title {
  font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 18px; line-height: 1.1;
}
.section-title.light { color: white; }
.section-lead {
  font-size: var(--fs-lg); color: var(--text-mute); max-width: 720px; margin-bottom: 48px;
}
.section-dark .section-lead { color: var(--text-light-mute); }

.sub-title {
  font-size: var(--fs-2xl); font-weight: 700; margin: 60px 0 24px; letter-spacing: -0.01em;
}
.sub-title.light { color: white; }
.form-lead { font-size: var(--fs-md); margin-bottom: 28px; color: var(--text-mute); }
.form-lead.light { color: var(--text-light-mute); }

/* ============== GRIDS ============== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ============== PROBLEM CARDS ============== */
.problem-card {
  background: white; border-radius: var(--radius); padding: 28px 22px;
  border: 1px solid var(--border);
}
.problem-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); margin-bottom: 18px;
}
.problem-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.problem-card p { color: var(--text-mute); font-size: var(--fs-md); }

.quote-banner {
  background: var(--primary); color: white;
  padding: 22px 28px; border-radius: var(--radius);
  margin-top: 40px; font-size: var(--fs-md); line-height: 1.6;
}
.quote-banner b { color: white; }

/* ============== SOLUTION ============== */
.solution-card {
  background: white; border-radius: var(--radius); padding: 32px;
  border: 1px solid var(--border); position: relative;
}
.solution-card .num {
  position: absolute; top: 24px; right: 28px; font-size: var(--fs-3xl);
  font-weight: 800; color: var(--bg-pale);
}
.sol-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); color: white; margin-bottom: 22px;
}
.ic-brain { background: var(--accent); }
.ic-loop  { background: var(--orange); }
.ic-net   { background: var(--primary); }
.solution-card h3 { font-size: var(--fs-xl); margin-bottom: 10px; }
.solution-card p { color: var(--text-mute); font-size: var(--fs-md); }

.data-banner {
  background: var(--primary); color: white;
  padding: 22px 28px; border-radius: var(--radius); margin-top: 40px;
  font-size: var(--fs-md); line-height: 1.5;
}
.data-banner b { color: var(--accent); }

/* ============== TECH ============== */
.tech-grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr;
  gap: 30px; align-items: center; margin-top: 32px;
}
.tech-section-title {
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  letter-spacing: 0.18em; margin-bottom: 16px;
}
.tech-list { display: flex; flex-direction: column; gap: 12px; }
.tech-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md); padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.tech-item .ti-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.tech-item.out .ti-icon { background: var(--orange); color: white; }
.tech-item b { display: block; font-size: var(--fs-md); color: white; }
.tech-item span { font-size: var(--fs-sm); color: var(--text-light-mute); }

.tech-engine {
  display: flex; justify-content: center; position: relative;
}
.tech-engine::before, .tech-engine::after {
  content: '→'; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-2xl); color: var(--accent);
}
.tech-engine::before { left: -22px; }
.tech-engine::after { right: -22px; }
.engine-bubble {
  background: var(--accent); color: var(--primary);
  border-radius: 24px; padding: 28px; text-align: center;
  box-shadow: 0 20px 40px rgba(45,200,166,0.3);
}
.engine-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--primary); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); margin: 0 auto 14px;
}
.engine-bubble h3 { font-size: var(--fs-lg); margin-bottom: 8px; color: var(--primary); }
.engine-bubble p { font-size: var(--fs-md); color: var(--primary); line-height: 1.4; margin-bottom: 14px; }
.engine-tag {
  background: var(--primary); color: var(--accent);
  display: inline-block; padding: 6px 14px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ============== PRICING ============== */
/* minmax(0,1fr): colonne SEMPRE uguali, indipendenti dal min-content (parole lunghe
   come "Maßgeschneidert" non allargano più la card Enterprise). */
.pricing-grid { align-items: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-price-custom { overflow-wrap: anywhere; hyphens: auto; }
.plan-card {
  background: white; border-radius: var(--radius-lg); padding: 36px 28px;
  border: 1px solid var(--border); position: relative;
  display: flex; flex-direction: column;
}
.plan-card.featured {
  background: var(--primary); color: white;
  transform: scale(1.04); box-shadow: 0 30px 60px rgba(15,64,53,0.25);
}
.plan-badge {
  position: absolute; top: -12px; right: 24px;
  background: var(--orange); color: white;
  padding: 6px 14px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
}
.plan-name { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.12em; color: var(--text-mute); margin-bottom: 8px; }
.plan-name.accent { color: var(--accent); }
.plan-price { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; }
.plan-price-custom { font-size: var(--fs-3xl); line-height: 1.4; }
.plan-price span { font-size: var(--fs-md); font-weight: 500; color: var(--text-mute); }
.featured .plan-price span { color: var(--text-light-mute); }
.plan-price-year { font-size: var(--fs-md); font-weight: 700; margin: -18px 0 24px; }
.plan-price-year span { font-size: var(--fs-md); font-weight: 500; color: var(--text-mute); }
.featured .plan-price-year span { color: var(--text-light-mute); }
.plan-card ul { list-style: none; margin-bottom: 28px; flex: 1; }
.plan-card ul li {
  padding: 8px 0; font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
  position: relative; padding-left: 22px;
}
.plan-card ul li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.featured ul li { border-color: rgba(255,255,255,0.1); }
.plan-card .btn { width: 100%; }
.pricing-note {
  max-width: 720px; margin: 18px auto 0; text-align: center;
  font-size: var(--fs-md); line-height: 1.5; color: var(--muted, var(--text-muted));
}

.disclaimer {
  font-size: var(--fs-sm); color: var(--text-mute); font-style: italic; text-align: center; margin-top: 28px;
}

/* ============== DOWNLOAD ============== */
.download-grid {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 50px; align-items: center;
}
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.store-btn {
  background: black; color: white; border-radius: var(--r-md);
  padding: 12px 22px; display: flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn span { font-size: var(--fs-xs); opacity: 0.7; display: block; }
.store-btn b { font-size: var(--fs-lg); }

.qr-row {
  display: flex; align-items: center; gap: 16px; margin-top: 20px;
  background: rgba(255,255,255,0.06); padding: 14px; border-radius: var(--r-md);
  width: fit-content;
}
.qr-mock { background: white; padding: 8px; border-radius: var(--r-sm); }
.qr-text b { display: block; font-size: var(--fs-md); }
.qr-text span { font-size: var(--fs-sm); color: var(--text-light-mute); }
.download-phone { display: flex; justify-content: center; }

/* ============== WORKSHOPS / TIERS ============== */
.tiers .tier-card {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-lg); padding: 32px 26px;
  border: 1px solid var(--border-dark);
  border-top: 4px solid var(--accent);
}
.tier-card.t2 { border-top-color: var(--warning); }
.tier-card.t3 { border-top-color: var(--orange); }
.tier-num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; color: var(--accent); }
.tier-card.t2 .tier-num { color: var(--warning); }
.tier-card.t3 .tier-num { color: var(--orange); }
.tier-card h3 { font-size: var(--fs-xl); margin: 6px 0 10px; color: white; }
.tier-desc { font-style: italic; color: var(--text-light-mute); margin-bottom: 18px; font-size: var(--fs-md); }
.tier-card ul { list-style: none; margin-bottom: 22px; }
.tier-card ul li {
  font-size: var(--fs-md); padding: 6px 0 6px 20px; position: relative; color: white;
}
.tier-card ul li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.tier-revenue {
  background: rgba(0,0,0,0.25); border-radius: 10px;
  padding: 12px 14px; font-size: var(--fs-md); color: var(--text-light-mute);
}

/* Benefits */
.benefits .benefit {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 24px;
}
.benefit .b-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); margin-bottom: 14px;
}
.benefit h4 { font-size: var(--fs-lg); margin-bottom: 6px; color: white; }
.benefit p { font-size: var(--fs-md); color: var(--text-light-mute); line-height: 1.5; }

.network-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin: 60px 0 0; padding: 32px;
  background: rgba(45,200,166,0.08); border-radius: var(--radius-lg);
  border: 1px solid rgba(45,200,166,0.2);
}
.network-stats > div { text-align: center; }
.network-stats b {
  font-size: var(--fs-3xl); font-weight: 800; color: var(--accent);
  display: block; margin-bottom: 4px;
}
.network-stats span { font-size: var(--fs-md); color: var(--text-light-mute); }

/* Form */
.affiliation-form-wrap {
  margin-top: 60px; max-width: 720px;
}
.affiliation-form {
  background: white; color: var(--text);
  padding: 32px; border-radius: var(--radius-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-mute); margin-bottom: 6px; text-transform: uppercase;
}
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; font-size: var(--fs-md); font-family: inherit;
  background: var(--bg-light); color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,200,166,0.15);
  background: white;
}
.form-field { margin-bottom: 14px; }
.form-feedback { margin-top: 14px; font-size: var(--fs-md); font-weight: 600; }
.form-feedback.success { color: var(--accent-d); }
.form-feedback.error { color: var(--orange-d); }
.form-privacy { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 14px; line-height: 1.5; }

/* ============== FOOTER ============== */
.site-footer { background: var(--bg-darker); color: white; padding: 60px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-tag { color: var(--text-light-mute); margin-top: 12px; font-size: var(--fs-md); max-width: 320px; }
.footer-grid h4 {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 14px; text-transform: uppercase;
}
.footer-grid a {
  display: block; padding: 4px 0; color: var(--text-light-mute); font-size: var(--fs-md);
  transition: color 0.15s;
}
.footer-grid a:hover { color: white; }
.footer-bottom {
  display: flex; justify-content: space-between; padding-top: 24px;
  border-top: 1px solid var(--border-dark); font-size: var(--fs-sm); color: var(--text-light-mute);
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: white; }

/* ============== BIKE GRAPHICS ============== */

/* Hero scene as background */
.hero { position: relative; }
.hero-bg {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%; pointer-events: none; opacity: 0.55;
  mask-image: linear-gradient(to top, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
.hero-grid { position: relative; z-index: 2; }

/* SVG icons inside circles inherit fill from parent */
.problem-icon svg, .b-icon svg, .sol-icon svg, .tech-item .ti-icon svg, .engine-icon svg {
  color: white;
}

/* Replace text-based emojis with proper icon centering */
.problem-icon, .b-icon, .sol-icon, .tech-item .ti-icon, .engine-icon {
  line-height: 0;
}

/* Bike divider between sections */
.bike-divider {
  background: var(--bg-light);
  padding: 30px 0;
}
.bike-divider .container {
  display: flex; align-items: center; gap: 20px;
  justify-content: center;
}
.divider-line {
  flex: 1; max-width: 240px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
}
.divider-bike {
  width: 220px;
  filter: drop-shadow(0 6px 12px rgba(15,64,53,0.12));
  animation: bike-bounce 4s ease-in-out infinite;
}
@keyframes bike-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Workshops section: bike floating in background */
.workshops-section { position: relative; overflow: hidden; }
.workshops-bg {
  position: absolute; top: 60px; right: -40px;
  width: 360px; opacity: 0.08; pointer-events: none;
  transform: rotate(-5deg);
}
.workshops-bg img { width: 100%; }

/* Subtle background pattern in section-light */
.section-light::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(45,200,166,0.08) 0%, transparent 12%),
    radial-gradient(circle at 88% 78%, rgba(247,115,73,0.06) 0%, transparent 14%);
  pointer-events: none;
}
.section-light { position: relative; }
.section-light .container { position: relative; z-index: 1; }

/* ============== TESTIMONIALS ============== */
.testimonial {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.testimonial .stars { color: var(--star); font-size: var(--fs-md); letter-spacing: 3px; }
.testimonial blockquote { font-size: var(--fs-md); line-height: 1.65; flex: 1; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-pale); color: var(--accent-d);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-md);
}
.testimonial figcaption b { display: block; font-size: var(--fs-md); }
.testimonial figcaption div span { display: block; font-size: var(--fs-sm); color: var(--text-mute); }

/* ============== FAQ ============== */
.faq-list { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] { border-color: var(--accent); box-shadow: 0 10px 28px rgba(15,64,53,0.08); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-weight: 600; font-size: var(--fs-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: var(--fs-xl); font-weight: 400; line-height: 1;
  color: var(--accent-d); flex-shrink: 0; transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; font-size: var(--fs-md); color: var(--text-mute); line-height: 1.65; max-width: 640px; }

/* ============== MICRO-INTERACTIONS ============== */
::selection { background: var(--accent); color: var(--primary); }
.btn:focus-visible, .lang-switch:focus-visible {
  outline: 3px solid rgba(45,200,166,0.5); outline-offset: 2px;
}
.problem-card, .solution-card, .benefit, .testimonial, .tier-card, .plan-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.problem-card:hover, .solution-card:hover, .testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,64,53,0.10);
  border-color: rgba(45,200,166,0.45);
}
.benefit:hover, .tier-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.07);
}
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,64,53,0.14); }
.plan-card.featured:hover { transform: scale(1.04) translateY(-5px); }
.store-btn:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.3); }

/* ============== CTA STRIP (officine) ============== */
.cta-strip {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  color: white; padding: 56px 0;
}
.cta-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cta-strip h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; margin-bottom: 6px; }
.cta-strip p { color: var(--text-light-mute); font-size: var(--fs-md); max-width: 560px; }

/* ============== ENTRANCE & SCROLL ANIMATIONS ============== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
  .hero-copy > * { opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
  .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.15s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.25s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.35s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.45s; }
  .hero-copy > :nth-child(6) { animation-delay: 0.55s; }
  .hero-phone { opacity: 0; animation: fadeUp 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }
  .hero .phone-frame, .hero .phone-shot { animation: floaty 7s ease-in-out 1.5s infinite; }

  .reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.65s ease var(--d, 0ms), transform 0.65s cubic-bezier(0.22,1,0.36,1) var(--d, 0ms);
  }
  .reveal.in { opacity: 1; transform: none; }
}

/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
  .hero-grid, .download-grid, .tech-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4, .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .network-stats { grid-template-columns: 1fr; gap: 16px; }
  .section-title { font-size: var(--fs-3xl); }
  .nav-links { display: none; }
  .tech-engine::before, .tech-engine::after { display: none; }
  .divider-bike { width: 160px; }
  .divider-line { max-width: 100px; }
  .workshops-bg { display: none; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4, .footer-grid, .form-row { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .plan-card.featured { transform: scale(1); }
}

/* ===== Header mobile: evita la sovrapposizione tra logo e azioni =====
   Sotto i 640px le nav-links sono già nascoste (vedi @960). Le azioni
   (lingua, "Per i ciclisti", "Crea account gratis") non stanno più sulla
   stessa riga del logo, quindi le mandiamo a capo su una seconda riga a
   tutta larghezza invece di lasciarle accavallare. */
@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 16px;
  }
  .nav-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 420px) {
  .nav-actions { justify-content: center; }
  .nav-actions .btn-sm { padding: 7px 12px; font-size: var(--fs-sm); }
  .lang-switch { padding: 6px 10px; }
}

/* ===== Rete officine / map locator ===== */
.map-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.map-chip {
  padding: 8px 16px; border-radius: var(--r-full); font-size: var(--fs-md); font-weight: 600;
  background: white; color: var(--text-mute); border: 1px solid var(--border);
  transition: all .15s ease;
}
.map-chip:hover { border-color: var(--accent); color: var(--primary); }
.map-chip.active { background: var(--primary); color: var(--accent); border-color: var(--primary); }

.map-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; }
#workshopMap {
  height: 460px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); z-index: 0;
}
.map-list {
  max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding-right: 4px;
}
.map-list-head { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); padding: 2px 2px 4px; }
.map-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; transition: all .15s ease;
}
.map-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.map-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.map-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-item-body b { font-size: var(--fs-md); color: var(--text); }
.map-item-body small { font-size: var(--fs-sm); color: var(--text-mute); }
.map-item-tier { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

.map-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: var(--fs-md); color: var(--text-mute); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-verified-note { margin-top: 12px; font-size: var(--fs-sm); color: var(--text-mute); }
.dot-tier { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Marker pin */
.crankpal-pin-wrap { background: none; border: none; }
.crankpal-pin {
  display: block; width: 20px; height: 20px; background: var(--pin, #2dc8a6);
  border: 2.5px solid white; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.map-popup { display: flex; flex-direction: column; gap: 3px; font-family: inherit; }
.map-popup b { font-size: var(--fs-md); color: var(--text); }
.map-popup span { font-size: var(--fs-sm); color: var(--text-mute); }
.map-popup-tier { font-weight: 700; }
.map-popup a { font-size: var(--fs-sm); font-weight: 700; color: var(--orange) !important; margin-top: 4px; }

@media (max-width: 900px) {
  .map-grid { grid-template-columns: 1fr; }
  #workshopMap { height: 340px; }
  .map-list { max-height: 300px; }
}

/* ===== Signup modal officina (self-service Free/Pro) ===== */
/* l'attributo hidden deve vincere sul display:flex dell'overlay */
.signup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 40, 33, .65); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 16px;
}
.signup-modal {
  position: relative; background: white; border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; padding: 32px 32px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.signup-close {
  position: absolute; top: 14px; right: 16px; background: var(--bg-light);
  width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-lg); color: var(--text-mute);
}
.signup-close:hover { background: var(--bg-pale); color: var(--primary); }
.signup-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; color: var(--accent-d); margin-bottom: 8px; }
.signup-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.signup-sub { font-size: var(--fs-md); color: var(--text-mute); margin-bottom: 20px; }

.signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup-field { margin-bottom: 14px; }
.signup-field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 5px; }
.signup-field label small { color: var(--text-mute); font-weight: 500; }
.signup-field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: var(--fs-md); font-family: inherit; background: var(--bg-light);
}
.signup-field input:focus { outline: 2px solid var(--accent); border-color: transparent; background: white; }
.signup-slug { display: flex; align-items: center; gap: 0; }
.signup-slug input { border-radius: 10px 0 0 10px; }
.signup-slug-suffix {
  padding: 11px 12px; background: var(--bg-pale); border: 1px solid var(--border); border-left: none;
  border-radius: 0 10px 10px 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-mute); white-space: nowrap;
}
.signup-slug-status { font-size: var(--fs-sm); margin-top: 5px; min-height: 16px; color: var(--text-mute); }
.signup-slug-status.ok { color: var(--accent-d); font-weight: 600; }
.signup-slug-status.ko { color: var(--orange-d); font-weight: 600; }

.signup-upsell {
  background: var(--alert-peach-bg); border: 1px solid var(--alert-peach-border); border-radius: var(--r-md);
  padding: 12px 14px; font-size: var(--fs-md); line-height: 1.5; margin-bottom: 16px;
}
.signup-plans { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 12px; margin-bottom: 16px; }
.signup-plan {
  position: relative; text-align: left; background: white; border: 2px solid var(--border);
  border-radius: var(--radius); padding: 16px 14px; transition: all .15s ease;
}
.signup-plan:hover { border-color: var(--accent); }
.signup-plan.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,200,166,.18); }
.signup-plan.recommended.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,115,73,.18); }
.sp-badge {
  position: absolute; top: -10px; right: 10px; background: var(--orange); color: white;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--r-full);
}
.sp-name { display: block; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; color: var(--text-mute); }
.sp-name.accent { color: var(--orange-d); }
.sp-price { display: block; font-size: var(--fs-xl); font-weight: 800; margin: 4px 0 8px; }
.sp-price small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mute); }
.signup-plan ul { list-style: none; }
.signup-plan li { font-size: var(--fs-sm); color: var(--text-mute); padding: 3px 0 3px 16px; position: relative; }
.signup-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-d); font-weight: 700; }

.signup-cta { width: 100%; justify-content: center; font-size: var(--fs-md); }
.signup-back { display: block; margin: 10px auto 0; background: none; font-size: var(--fs-md); font-weight: 600; color: var(--text-mute); }
.signup-back:hover { color: var(--primary); }
.signup-note { font-size: var(--fs-xs); color: var(--text-mute); text-align: center; margin-top: 10px; }
.signup-feedback { font-size: var(--fs-md); min-height: 18px; margin-bottom: 8px; }
.signup-feedback.error { color: var(--orange-d); font-weight: 600; }

.signup-success { text-align: center; padding: 12px 0; }
.signup-check {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--bg-pale); color: var(--accent-d); font-size: var(--fs-2xl); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.signup-url {
  font-family: ui-monospace, monospace; font-size: var(--fs-md); font-weight: 700; color: var(--primary);
  background: var(--bg-light); border: 1px dashed var(--border); border-radius: 10px;
  padding: 10px; margin: 12px 0 16px;
}

@media (max-width: 560px) {
  .signup-row, .signup-plans { grid-template-columns: 1fr; }
  .signup-modal { padding: 24px 18px; }
}

/* ===== Signup: criteri password + conferma + carta ===== */
.signup-pwd-criteria {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px 14px; margin: -6px 0 14px; padding: 0;
}
.signup-pwd-criteria li {
  font-size: var(--fs-xs); color: var(--text-mute); padding-left: 18px; position: relative;
  transition: color .15s;
}
.signup-pwd-criteria li::before {
  content: '○'; position: absolute; left: 0; color: var(--border); font-weight: 700;
}
.signup-pwd-criteria li.ok { color: var(--accent-d); }
.signup-pwd-criteria li.ok::before { content: '✓'; color: var(--accent-d); }
.signup-pwd-match { font-size: var(--fs-xs); margin-top: 5px; min-height: 14px; }
.signup-pwd-match.ok { color: var(--accent-d); font-weight: 600; }
.signup-pwd-match.ko { color: var(--orange-d); font-weight: 600; }

.sp-highlight { font-weight: 700; color: var(--orange-d) !important; }
.signup-plan li.sp-highlight::before { color: var(--orange-d); }

.signup-card {
  background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px 10px; margin-bottom: 16px;
}
/* Le due varianti del testo (carta richiesta al signup o no) convivono nel markup:
   signup.js ne mostra una sola in base al paese. Regola difensiva, come sopra. */
.signup-card-head { font-size: var(--fs-md); font-weight: 700; margin-bottom: 12px; }
.signup-card .signup-field input { background: white; }
.signup-card-note {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text-mute);
  background: var(--bg-pale); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 6px;
}

/* Stati extra della verifica slug live */
.signup-slug-status.checking { color: var(--text-mute); font-style: italic; }
.signup-slug-status.warn { color: var(--warning); font-weight: 600; }

/* ===== Signup: step termini, privacy e consensi ===== */
.signup-legal-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-light); margin-bottom: 10px; overflow: hidden;
}
.signup-legal-box summary {
  cursor: pointer; padding: 12px 14px; font-size: var(--fs-md); font-weight: 700;
  list-style: none; user-select: none;
}
.signup-legal-box summary::-webkit-details-marker { display: none; }
.signup-legal-box summary::after { content: '▾'; float: right; color: var(--text-mute); }
.signup-legal-box[open] summary::after { content: '▴'; }
.signup-legal-text {
  max-height: 240px; overflow-y: auto; padding: 0 14px 12px;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-mute);
  border-top: 1px solid var(--border); background: white;
}
.signup-legal-text p { margin: 10px 0; }
.signup-legal-text b { color: var(--text); }

.signup-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text);
  padding: 8px 2px; cursor: pointer;
}
.signup-consent input {
  width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent-d);
}
.signup-consent.optional { color: var(--text-mute); }
.signup-cta:disabled { opacity: .45; cursor: not-allowed; }

/* ===== Signup: verifica email con codice ===== */
.signup-code-input {
  font-size: var(--fs-2xl) !important; letter-spacing: .5em; text-align: center;
  font-family: ui-monospace, monospace; font-weight: 700;
}
.signup-demo-code {
  background: #fff4e0; border: 1px dashed #e7c177; border-radius: var(--r-sm);
  padding: 8px 10px; font-size: var(--fs-sm); color: #a16207; margin-bottom: 10px; text-align: center;
}

/* Callout custom Apple Maps (MapKit JS) */
.mapkit-callout {
  background: white; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); max-width: 240px;
}

/* ===== Map locator: ricerca indirizzo + distanza ===== */
.map-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.map-search-input {
  flex: 1; min-width: 220px; padding: 10px 14px; font-size: var(--fs-md); font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--r-full); background: white;
}
.map-search-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.map-search-radius {
  padding: 10px 12px; font-size: var(--fs-md); font-weight: 600; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--r-full); background: white; color: var(--text);
}
.map-search-status { font-size: var(--fs-sm); color: var(--orange-d); font-weight: 600; }
.map-list-empty {
  background: white; border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 14px; font-size: var(--fs-md); color: var(--text-mute);
}
.crankpal-origin-pin { font-size: var(--fs-xl); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@media (max-width: 640px) { .map-search-input { min-width: 100%; } }

/* Autocomplete indirizzi del map locator */
.map-search-field { position: relative; flex: 1; min-width: 220px; }
.map-search-field .map-search-input { width: 100%; min-width: 0; }
.map-search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10,51,41,.14); overflow: hidden;
}
.map-suggest-item {
  display: block; width: 100%; text-align: left; background: white;
  padding: 10px 14px; font-size: var(--fs-md); color: var(--text);
  border-bottom: 1px solid var(--bg-light); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.map-suggest-item:last-child { border-bottom: none; }
.map-suggest-item:hover { background: var(--bg-pale); }

/* Azioni nel popup officina: prenota + portale clienti */
.map-popup-actions { display: flex; gap: 12px; margin-top: 5px; flex-wrap: wrap; }
.map-popup-actions a { font-size: var(--fs-sm); font-weight: 700; color: var(--orange) !important; margin-top: 0 !important; }
.map-popup-actions a.map-popup-portal { color: var(--accent-d) !important; }

/* ===== Banner beta TestFlight (sezione download) ===== */
.beta-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(45,200,166,0.08); border: 1px solid rgba(45,200,166,0.35);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px;
}
.beta-badge {
  background: var(--orange); color: white; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .12em; padding: 4px 10px; border-radius: var(--r-full); flex-shrink: 0;
}
.beta-copy { flex: 1; min-width: 220px; }
.beta-copy b { display: block; font-size: var(--fs-md); }
.beta-copy span { font-size: var(--fs-sm); color: var(--text-light-mute); }
.beta-soon { pointer-events: none; opacity: .75; font-size: var(--fs-md); }
.qr-mock img, .qr-mock canvas { display: block; border-radius: 4px; }

/* ===== Cassa e pagamenti (officine.html, Pro/Enterprise) ===== */
.pos-section { border-top: 1px solid rgba(10,51,41,.08); }
.pos-grid { margin-top: 36px; }
.pos-card { background: var(--surface); border: 1px solid rgba(10,51,41,.1); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: 0 6px 24px rgba(10,51,41,.05); }
.pos-card h4 { margin: 12px 0 8px; font-size: var(--fs-lg); }
.pos-card p { font-size: var(--fs-md); line-height: 1.55; color: var(--text-mute, #4a5a55); margin: 0; }
.pos-icon { width: 46px; height: 46px; border-radius: var(--r-md); background: rgba(10,51,41,.06); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); }
.pos-note { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-md); background: rgba(10,51,41,.05); font-size: var(--fs-md); }
.pos-badge { background: var(--accent, var(--warning)); color: var(--green-900); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .06em; padding: 5px 10px; border-radius: var(--r-full); white-space: nowrap; }
.pos-note .btn { margin-left: auto; }
@media (max-width: 720px) { .pos-note .btn { margin-left: 0; } }

/* screenshot nelle card cassa/pagamenti */
.pos-card { padding-top: 0; overflow: hidden; }
.pos-shot { margin: 0 -24px 18px; border-bottom: 1px solid rgba(10,51,41,.08); background: #eef3f1; }
.pos-shot img { display: block; width: 100%; height: auto; }

/* ============== SCROLL PROGRESS BAR ============== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--gold-2), var(--fun-lime), var(--fun-sky), var(--fun-purple), var(--fun-pink));
  background-size: 100vw 100%; background-repeat: no-repeat;
  z-index: 1000; pointer-events: none; transition: width .1s linear;
}

/* ============== PLAYFUL — solo pagina ciclisti (body.playful) ============== */
/* Tono grafico più scanzonato: tag-sticker, gradienti vivaci, hover "molla".
   Scoped a body.playful così officine.html resta professionale. */
body.playful .section-eyebrow {
  display: inline-block;
  background: rgba(247,115,73,.14);
  color: var(--orange-d);
  padding: 5px 14px; border-radius: var(--r-full);
  transform: rotate(-2deg);
}
body.playful .grad {
  background: linear-gradient(90deg, var(--accent), var(--orange), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.playful .pill {
  border-radius: var(--r-full);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .2s;
}
body.playful .pill:hover { transform: translateY(-2px) rotate(-3deg); }

body.playful .problem-card,
body.playful .solution-card,
body.playful .tier-card,
body.playful .plan-card,
body.playful .testimonial,
body.playful .tech-item {
  border-radius: var(--radius-lg);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
body.playful .problem-card:hover,
body.playful .solution-card:hover,
body.playful .tier-card:hover,
body.playful .plan-card:hover,
body.playful .testimonial:hover,
body.playful .tech-item:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 18px 40px rgba(247,115,73,.18);
}

body.playful .btn-accent {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .2s;
}
body.playful .btn-accent:hover { transform: translateY(-2px) rotate(-2deg) scale(1.03); }

@media (prefers-reduced-motion: no-preference) {
  body.playful .grad { animation: gradShift 6s ease infinite; }
  @keyframes gradShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
  body.playful .logo-mark { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  body.playful .logo-mark:hover { transform: rotate(-12deg) scale(1.12); }
}

/* ---- BOLD: colori vivaci + doodle (solo body.playful) ----
   ⚠️ MAI ridichiarare qui una custom property come `--x: var(--x)`: in CSS è un
   CICLO che rende la variabile INVALIDA su body e discendenti (non "eredita da
   :root") — gradienti trasparenti, icone e CTA header invisibili (incidente
   pagina ciclisti 2026-07-13). --fun-pink/sky/purple/lime vivono già in :root. */
body.playful {
  --fun-yellow: var(--gold-2);
}
/* Sezioni chiare a tinte pastello alternate */
body.playful .section-light { position: relative; overflow: hidden; }
body.playful #problema      { background: var(--peach-3); }  /* pesca */
body.playful #prodotto      { background: var(--mint-bg); }  /* menta */
body.playful #abbonamenti   { background: var(--lavender-2); }  /* lavanda */
body.playful #testimonianze { background: var(--lemon); }  /* limone */
body.playful #rete          { background: var(--sky-3); }  /* cielo */
body.playful #faq           { background: var(--rose); }  /* rosa */
body.playful .section-light .container { position: relative; z-index: 1; }

/* Blob colorati sfumati dietro le sezioni chiare */
body.playful .section-light::before {
  content: ""; position: absolute; top: -140px; right: -100px;
  width: 460px; height: 460px; border-radius: 50%; z-index: 0; pointer-events: none;
  opacity: .22; filter: blur(8px);
  background: radial-gradient(circle at 35% 35%, var(--fun-pink), transparent 68%);
}
body.playful #prodotto::before    { background: radial-gradient(circle, var(--fun-sky), transparent 68%); }
body.playful #abbonamenti::before { background: radial-gradient(circle, var(--fun-purple), transparent 68%); }
body.playful #testimonianze::before { background: radial-gradient(circle, var(--fun-yellow), transparent 68%); }
body.playful #rete::before        { background: radial-gradient(circle, var(--fun-sky), transparent 68%); left: -120px; right: auto; }
body.playful #faq::before         { background: radial-gradient(circle, var(--fun-pink), transparent 68%); }

/* Squiggle colorato sotto i titoli di sezione */
body.playful .section-title::after {
  content: ""; display: block; width: 92px; height: 12px; margin: 12px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='12'%3E%3Cpath d='M2 7 Q14 1 26 7 T50 7 T74 7 T90 7' fill='none' stroke='%23f77349' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Card colorate: bordo superiore a rotazione di colore */
body.playful .grid-4 > :nth-child(4n+1) { border-top: 4px solid var(--fun-pink); }
body.playful .grid-4 > :nth-child(4n+2) { border-top: 4px solid var(--fun-sky); }
body.playful .grid-4 > :nth-child(4n+3) { border-top: 4px solid var(--fun-yellow); }
body.playful .grid-4 > :nth-child(4n)   { border-top: 4px solid var(--fun-purple); }
body.playful .grid-3 > :nth-child(3n+1) { border-top: 4px solid var(--accent); }
body.playful .grid-3 > :nth-child(3n+2) { border-top: 4px solid var(--orange); }
body.playful .grid-3 > :nth-child(3n)   { border-top: 4px solid var(--fun-purple); }

/* Hero: le feature diventano "tag" (forma rettangolare, peso leggero) così
   non competono con i bottoni CTA a pillola e la gerarchia resta chiara. */
body.playful .hero-pills .pill {
  border-radius: 9px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(14,58,84,.12);
  color: var(--ink-blue); font-weight: 600; font-size: var(--fs-sm);
  padding: 7px 12px 7px 28px; position: relative;
}
body.playful .hero-pills .pill::before {
  content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
}
body.playful .hero-pills .pill:hover { transform: translateY(-1px); }
body.playful .hero-pills .pill:nth-child(1)::before { background: var(--fun-pink); }
body.playful .hero-pills .pill:nth-child(2)::before { background: var(--fun-sky); }
body.playful .hero-pills .pill:nth-child(3)::before { background: var(--fun-yellow); }
body.playful .hero-pills .pill:nth-child(4)::before { background: var(--fun-purple); }

/* Scintille doodle nell'hero */
body.playful .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0c1 7 6 12 14 14-8 2-13 7-14 14-1-7-6-12-14-14C8 12 13 7 14 0z' fill='%23ffd23f'/%3E%3C/svg%3E") 12% 30%/26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0c.7 5 4 8 10 10-6 1-9 5-10 10-.7-5-4-8-10-10C6 8 9 5 10 0z' fill='%23ff6b9d'/%3E%3C/svg%3E") 88% 22%/18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 0c.6 4.5 3.5 7 9 9-5.5 1-8.4 4.5-9 9-.6-4.5-3.5-7-9-9C5.5 7 8.4 4.5 9 0z' fill='%234cc9f0'/%3E%3C/svg%3E") 78% 72%/16px no-repeat;
}
body.playful .hero .container { position: relative; z-index: 1; }

/* ============== CIELO PASTELLO + SOLE ANTROPOMORFO (solo body.playful) ============== */
/* Sostituisce il verde scuro dominante con un cielo azzurro pastello e tinte
   tenui. Tutto scoped a body.playful → officine.html resta verde/professionale. */

/* ---- HERO: da verde scuro a cielo azzurro ---- */
body.playful .hero {
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--peach-1) 100%);
  color: #103a52;
}
body.playful .hero::before { display: none; }        /* via il glow verde acqua */
body.playful .hero .eyebrow { color: var(--orange-d); }
body.playful .hero h1 { color: var(--ink-blue); }
body.playful .hero-sub { color: var(--ink-blue-soft); }
body.playful .hero-disclaimer { color: rgba(14,58,84,.55); }
body.playful .hero .btn-ghost { color: var(--ink-blue); border-color: rgba(14,58,84,.28); }
body.playful .hero .btn-ghost:hover { background: rgba(14,58,84,.06); border-color: rgba(14,58,84,.45); }
/* la scena ciclista a fondo hero resta come "terra", ma più tenue sul cielo */
body.playful .hero-bg { opacity: .42; }

/* Decoro cielo: sole simpaticone + nuvolette */
body.playful .sky-decor {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
body.playful .sky-decor .sun {
  position: absolute; top: 34px; right: 5%;
  width: clamp(96px, 11vw, 150px); height: auto;
  filter: drop-shadow(0 8px 16px rgba(255,170,0,.32));
}
body.playful .sky-decor .cloud { position: absolute; will-change: transform; }
body.playful .sky-decor .cloud-1 { top: 86px;  left: 7%;  width: 130px; opacity: .95; }
body.playful .sky-decor .cloud-2 { top: 150px; left: 55%; width: 96px;  opacity: .82; }
body.playful .sky-decor .cloud-3 { top: 250px; left: 24%; width: 74px;  opacity: .7; }
body.playful .hero-grid { position: relative; z-index: 2; }

/* ---- SEZIONI SCURE → pastello (tecnologia + download) ---- */
body.playful .section-dark {
  background: linear-gradient(180deg, var(--sky-3) 0%, var(--lavender-1) 100%);
  color: var(--text);
}
body.playful .section-download {
  background: linear-gradient(160deg, var(--peach-2) 0%, #ffe9f1 100%);
  color: var(--text);
}
body.playful .section-dark .section-title.light,
body.playful .section-download .section-title.light,
body.playful .section-dark .sub-title.light,
body.playful .section-download .sub-title.light { color: var(--primary); }
body.playful .section-dark .section-lead,
body.playful .section-download .section-lead { color: var(--ink-blue-soft); }
body.playful .section-dark .section-eyebrow.accent,
body.playful .section-download .section-eyebrow.accent {
  background: rgba(247,115,73,.14); color: var(--orange-d);
}

/* Tecnologia: card e testi leggibili su fondo chiaro */
body.playful .section-dark .tech-section-title { color: var(--orange-d); }
body.playful .section-dark .tech-item {
  background: var(--surface); border-color: rgba(14,58,84,.1);
  box-shadow: 0 6px 16px rgba(14,58,84,.06);
}
body.playful .section-dark .tech-item b { color: var(--primary); }
body.playful .section-dark .tech-item span { color: var(--ink-blue-mute); }
body.playful .section-dark .tech-engine::before,
body.playful .section-dark .tech-engine::after { color: var(--accent-d); }

/* Download: banner beta e QR su fondo chiaro */
body.playful .section-download .beta-copy span { color: var(--ink-blue-mute); }
body.playful .section-download .qr-row { background: var(--surface); box-shadow: 0 6px 16px rgba(14,58,84,.06); }
body.playful .section-download .qr-text span { color: var(--ink-blue-mute); }

/* ---- CTA strip → pastello ---- */
body.playful .cta-strip {
  background: linear-gradient(135deg, var(--lavender-1) 0%, var(--sky-4) 100%);
  color: var(--text);
}
body.playful .cta-strip h2 { color: var(--primary); }
body.playful .cta-strip p { color: var(--ink-blue-soft); }

/* ---- Footer → pastello tenue (niente blocco verde scuro a fine pagina) ---- */
body.playful .site-footer {
  background: linear-gradient(180deg, var(--lavender-3) 0%, var(--lavender-4) 100%);
  color: var(--text);
}
body.playful .site-footer .footer-tag { color: var(--ink-blue-mute); }
body.playful .site-footer .footer-grid h4 { color: var(--orange-d); }
body.playful .site-footer .footer-grid a { color: var(--ink-blue-mute); }
body.playful .site-footer .footer-grid a:hover { color: var(--primary); }
body.playful .site-footer .footer-bottom { color: var(--ink-blue-mute); border-top-color: rgba(14,58,84,.12); }
body.playful .site-footer .footer-bottom a:hover { color: var(--primary); }

/* ---- Animazioni sole/nuvole (rispettano prefers-reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  body.playful .sun { animation: sunBob 5.5s ease-in-out infinite; }
  body.playful .sun .sun-rays {
    transform-box: fill-box; transform-origin: center;
    animation: sunSpin 46s linear infinite;
  }
  body.playful .sun .sun-eye { animation: sunBlink 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  body.playful .cloud-1 { animation: cloudDrift 40s linear infinite; }
  body.playful .cloud-2 { animation: cloudDrift 56s linear infinite; }
  body.playful .cloud-3 { animation: cloudDrift 70s linear infinite; }
  @keyframes sunBob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes sunSpin  { to { transform: rotate(360deg); } }
  @keyframes sunBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
  @keyframes cloudDrift { from { transform: translateX(-24px); } to { transform: translateX(44px); } }
}

/* ============== MOTORE AI = SUPEREROE (solo body.playful, #tecnologia) ============== */
/* Bolla vivace + eroe animato + icone dati arcobaleno. */
body.playful #tecnologia .engine-bubble {
  background: linear-gradient(150deg, var(--teal-500) 0%, #36d0bf 45%, var(--fun-sky) 100%);
  color: var(--primary);
  border-radius: 28px;
  box-shadow: 0 22px 46px rgba(76,201,240,.32), 0 8px 20px rgba(155,93,229,.18);
  position: relative; overflow: visible;
}
/* Scintille comic intorno alla bolla */
body.playful #tecnologia .engine-bubble::before {
  content: ""; position: absolute; inset: -18px; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 0c1 6.5 5.5 11 13 13-7.5 2-12 6.5-13 13-1-6.5-5.5-11-13-13C7.5 11 12 6.5 13 0z' fill='%23ffd23f'/%3E%3C/svg%3E") -6px 8%/24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0c.7 5 4 8 10 10-6 1-9 5-10 10-.7-5-4-8-10-10C6 8 9 5 10 0z' fill='%23ff6b9d'/%3E%3C/svg%3E") 102% 24%/18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 0c.6 4.5 3.5 7 9 9-5.5 1-8.4 4.5-9 9-.6-4.5-3.5-7-9-9C5.5 7 8.4 4.5 9 0z' fill='%239b5de5'/%3E%3C/svg%3E") 98% 92%/16px no-repeat;
}
body.playful #tecnologia .engine-bubble > * { position: relative; z-index: 1; }
body.playful #tecnologia .engine-bubble h3,
body.playful #tecnologia .engine-bubble p { color: #06332a; }
body.playful #tecnologia .engine-hero {
  width: 124px; margin: 0 auto 10px;
}
body.playful #tecnologia .engine-hero svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 14px rgba(6,40,31,.22)); }
body.playful #tecnologia .engine-tag {
  background: var(--fun-yellow); color: #5b3b00; font-weight: 700;
  box-shadow: 0 4px 0 var(--gold-shadow); transform: rotate(-2deg);
}

/* Icone dati: ognuna un colore (sorgenti) */
body.playful #tecnologia .tech-item:not(.out):nth-of-type(1) .ti-icon { background: var(--fun-sky);    color: #06281f; }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(2) .ti-icon { background: var(--fun-purple); color: var(--surface); }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(3) .ti-icon { background: var(--fun-yellow); color: #5b3b00; }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(4) .ti-icon { background: var(--fun-pink);   color: var(--surface); }
/* Icone output: toni caldi differenziati */
body.playful #tecnologia .tech-item.out:nth-of-type(1) .ti-icon { background: var(--orange); color: var(--surface); }
body.playful #tecnologia .tech-item.out:nth-of-type(2) .ti-icon { background: #e24b4a;       color: var(--surface); }
body.playful #tecnologia .tech-item.out:nth-of-type(3) .ti-icon { background: var(--fun-pink); color: var(--surface); }
/* Card dati: bordo superiore intonato */
body.playful #tecnologia .tech-item:not(.out):nth-of-type(1) { border-top: 4px solid var(--fun-sky); }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(2) { border-top: 4px solid var(--fun-purple); }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(3) { border-top: 4px solid var(--fun-yellow); }
body.playful #tecnologia .tech-item:not(.out):nth-of-type(4) { border-top: 4px solid var(--fun-pink); }
body.playful #tecnologia .tech-item.out:nth-of-type(1) { border-top: 4px solid var(--orange); }
body.playful #tecnologia .tech-item.out:nth-of-type(2) { border-top: 4px solid #e24b4a; }
body.playful #tecnologia .tech-item.out:nth-of-type(3) { border-top: 4px solid var(--fun-pink); }

@media (prefers-reduced-motion: no-preference) {
  body.playful #tecnologia .engine-hero svg { animation: heroFloat 4s ease-in-out infinite; }
  body.playful #tecnologia .hero-cape {
    transform-box: fill-box; transform-origin: 50% 4%;
    animation: capeWave 3s ease-in-out infinite;
  }
  body.playful #tecnologia .hero-ant {
    transform-box: fill-box; transform-origin: center;
    animation: antPulse 1.8s ease-in-out infinite;
  }
  @keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes capeWave  { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
  @keyframes antPulse  { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .65; } }
}

/* ============== SCREENSHOT IN-APP (mockup telefono) — stile playful ============== */
/* Telaio con alone colorato invece dell'ombra nera neutra */
body.playful .phone-frame {
  background: var(--wipe-dark-1);
  box-shadow: 0 28px 56px rgba(76,201,240,.30), 0 12px 28px rgba(155,93,229,.18), 0 0 0 1px rgba(255,255,255,.08);
}

/* — Hero: card "salute bici" da verde scuro a gradiente teal→cielo — */
body.playful .hero-phone .health-card {
  background: linear-gradient(140deg, var(--teal-500) 0%, var(--fun-sky) 100%);
  border: none;
  box-shadow: 0 10px 22px rgba(45,200,166,.28);
}
body.playful .hero-phone .health-active { color: rgba(255,255,255,.92); }
body.playful .hero-phone .health-ring svg circle:first-of-type { stroke: rgba(255,255,255,.28); }
body.playful .hero-phone .health-ring svg circle:last-of-type  { stroke: var(--surface); }
body.playful .hero-phone .ring-grade { color: var(--surface); }
/* Mini-card componenti su sfondo pastello + pallini più vivaci */
body.playful .hero-phone .mini { background: #f3f7ff; border-radius: 10px; }
body.playful .hero-phone .dot { width: 7px; height: 7px; }
body.playful .hero-phone .dot.ok    { background: var(--accent); }
body.playful .hero-phone .dot.warn  { background: var(--fun-yellow); }
body.playful .hero-phone .dot.danger{ background: var(--fun-pink); }
/* Card alert: icona "pow" rosa-arancio */
body.playful .hero-phone .alert-card { background: #fff3f7; border-color: #ffd0e0; }
body.playful .hero-phone .alert-icon { background: var(--fun-pink); }
body.playful .hero-phone .alert-cta  { color: var(--orange-d); }

/* — Download: schermata alert da verde scuro a pastello pesca/rosa — */
body.playful .section-download .phone-screen.alt {
  background: linear-gradient(165deg, var(--peach-3) 0%, #ffe9f2 100%);
  color: var(--text);
}
body.playful .section-download .alt .phone-status { color: #8a7a72; }
body.playful .section-download .alt .phone-title { color: var(--primary); }
body.playful .section-download .alert-big {
  background: var(--surface); border-color: #ffd7c4;
  box-shadow: 0 8px 20px rgba(247,115,73,.14);
}
body.playful .section-download .alert-icon.big { background: var(--orange); }
body.playful .section-download .alert-big-conf { background: #fff3ec; color: var(--orange-d); }
body.playful .section-download .rec-label { color: #9b8a82; }
body.playful .section-download .rec-row { color: var(--primary); }
body.playful .section-download .workshop-card {
  background: var(--surface); border: 1px solid rgba(14,58,84,.1);
  box-shadow: 0 6px 16px rgba(14,58,84,.06);
}
body.playful .section-download .workshop-card b { color: var(--primary); }
body.playful .section-download .workshop-card span { color: var(--ink-blue-mute); }
body.playful .section-download .ws-icon { background: var(--fun-sky); color: #06281f; }
body.playful .section-download .alt .covered { color: var(--accent-d); }

/* ============== PIANO "PIÙ SCELTO" — festoso con coriandoli (body.playful) ============== */
body.playful .plan-card.featured {
  background: linear-gradient(150deg, var(--fun-purple) 0%, var(--fun-sky) 52%, var(--teal-500) 100%);
  box-shadow: 0 26px 54px rgba(155,93,229,.30), 0 10px 24px rgba(76,201,240,.22);
}
body.playful .plan-card.featured::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: .4;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect x='12' y='18' width='12' height='6' rx='2' fill='%23ffd23f' transform='rotate(25 18 21)'/%3E%3Ccircle cx='46' cy='104' r='4.5' fill='%23ff6b9d'/%3E%3Crect x='92' y='12' width='9' height='9' rx='2' fill='%234cc9f0' transform='rotate(-18 96 16)'/%3E%3Crect x='116' y='92' width='12' height='6' rx='2' fill='%23f77349' transform='rotate(42 122 95)'/%3E%3Ccircle cx='74' cy='52' r='3.5' fill='%239ad34b'/%3E%3Cpath d='M18 72 q6 -6 12 0 t12 0' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Crect x='60' y='118' width='8' height='8' rx='2' fill='%23ffd23f' transform='rotate(15 64 122)'/%3E%3Ccircle cx='122' cy='40' r='3.5' fill='%23ff6b9d'/%3E%3C/svg%3E") repeat;
  background-size: 150px 150px;
}
body.playful .plan-card.featured > *:not(.plan-badge) { position: relative; z-index: 1; }
body.playful .plan-card.featured .plan-badge { z-index: 2; }
/* "PLUS" come badge ben evidente */
body.playful .plan-card.featured .plan-name.accent {
  display: inline-block; color: var(--primary);
  font-size: var(--fs-md); font-weight: 800; letter-spacing: .14em;
  background: var(--gold-2); padding: 6px 16px; border-radius: var(--r-full);
  box-shadow: 0 4px 0 var(--gold-shadow); margin-bottom: 14px;
}
/* Elenco funzionalità più leggibile sui coriandoli */
body.playful .plan-card.featured ul li {
  font-size: var(--fs-md); color: var(--surface); font-weight: 500;
  border-bottom-color: rgba(255,255,255,.28);
  text-shadow: 0 1px 3px rgba(8,40,55,.35);
}
body.playful .plan-card.featured ul li::before { color: var(--gold-1); font-weight: 800; text-shadow: none; }
/* CTA dorata e animata per invogliare al clic */
body.playful .plan-card.featured .btn-accent {
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  color: var(--primary); font-weight: 800;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 22px rgba(245,179,1,.45);
}
body.playful .plan-card.featured .btn-accent:hover {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold-2) 45%, var(--gold-lo) 100%);
  transform: translateY(-2px) scale(1.04);
}
/* Riflesso che attraversa il bottone */
body.playful .plan-card.featured .btn-accent::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg);
}
@media (prefers-reduced-motion: no-preference) {
  body.playful .plan-card.featured .btn-accent { animation: goldPulse 2.2s ease-in-out infinite; }
  body.playful .plan-card.featured .btn-accent::after { animation: goldShine 2.8s ease-in-out infinite; }
  @keyframes goldPulse {
    0%, 100% { transform: translateY(0) scale(1);     box-shadow: 0 8px 22px rgba(245,179,1,.45); }
    50%      { transform: translateY(-1px) scale(1.03); box-shadow: 0 13px 30px rgba(245,179,1,.62); }
  }
  @keyframes goldShine {
    0%       { left: -60%; }
    55%,100% { left: 130%; }
  }
}

/* ============== BANNER (quote / dati) — stile playful ============== */
/* Banner "problema": caldo coral→rosa, sticker con bordo tratteggiato + doodle nervosi */
body.playful .quote-banner {
  background: linear-gradient(135deg, var(--coral-1) 0%, var(--fun-pink) 100%);
  color: var(--surface); border-radius: var(--radius-lg);
  border: 2px dashed rgba(255,255,255,.5);
  box-shadow: 0 14px 30px rgba(255,107,157,.25);
  position: relative; z-index: 0; overflow: hidden; transform: rotate(-.5deg);
}
body.playful .quote-banner b { color: var(--surface); }
body.playful .quote-banner::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); width: 90px; height: 70px;
  z-index: -1; opacity: .4; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M20 12 L11 28'/%3E%3Cpath d='M45 8 L41 30'/%3E%3Cpath d='M70 12 L79 28'/%3E%3Cpath d='M16 46 q12 -10 24 0 t24 0'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* Banner "dati": teal→cielo con scintille e parte in grassetto gialla */
body.playful .data-banner {
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--fun-sky) 100%);
  color: var(--surface); border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px rgba(76,201,240,.22);
  position: relative; z-index: 0; overflow: hidden;
}
body.playful .data-banner b { color: #fff3bf; }
body.playful .data-banner::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); width: 96px; height: 70px;
  z-index: -1; opacity: .5; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 0c1 7 6 12 14 14-8 2-13 7-14 14-1-7-6-12-14-14C9 12 14 7 15 0z' fill='%23ffffff'/%3E%3C/svg%3E") 78% 18%/26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0c.7 5 4 8 10 10-6 1-9 5-10 10-.7-5-4-8-10-10C6 8 9 5 10 0z' fill='%23fff3bf'/%3E%3C/svg%3E") 100% 78%/18px no-repeat;
}

/* ============== LOGO: marchio immagine (sostituisce il segnaposto "V") ============== */
.logo img.logo-mark,
.logo.light img.logo-mark {
  background: none; border-radius: 7px; padding: 0;
  object-fit: contain; display: block;
}

/* ============== LOGO: più grande, si rimpicciolisce allo scroll ============== */
.logo { gap: 10px; }
.logo-text { transition: font-size .25s ease; }
.logo img.logo-mark {
  width: 46px; height: 46px;
  transition: width .25s ease, height .25s ease, box-shadow .25s ease;
}
.site-header.scrolled .logo img.logo-mark { width: 34px; height: 34px; }
.site-header.scrolled .logo-text { font-size: var(--fs-lg); }
/* Tocco giocoso solo sulla pagina ciclisti: leggero "pop" al passaggio */
body.playful .logo img.logo-mark:hover { transform: rotate(-6deg) scale(1.08); }

/* ============== CTA hero più visibili (solo pagina ciclisti) ============== */
body.playful .hero-actions .btn { padding: 15px 30px; font-size: var(--fs-lg); font-weight: 700; }
body.playful .hero .btn-accent {
  background: linear-gradient(135deg, var(--coral-1) 0%, var(--fun-pink) 100%);
  color: var(--surface);
  box-shadow: 0 12px 26px rgba(255,107,157,.38);
}
body.playful .hero .btn-accent:hover {
  background: linear-gradient(135deg, var(--coral-1-h) 0%, var(--coral-2-h) 100%);
  color: var(--surface); transform: translateY(-2px) scale(1.03);
}
body.playful .hero .btn-ghost {
  background: var(--surface); color: var(--ink-blue);
  border: 2px solid var(--surface);
  box-shadow: 0 8px 20px rgba(14,58,84,.16);
}
body.playful .hero .btn-ghost:hover {
  background: var(--surface); color: var(--ink-blue); border-color: var(--ink-blue);
  transform: translateY(-2px);
}

/* ============== Transizione "in tre atti" verso la pagina officine ============== */
.page-wipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }

/* Atto 1 — strisce playful che cadono: la pagina ciclisti si scompone */
.page-wipe .pw-strips { position: absolute; inset: 0; display: flex; }
.page-wipe .pw-strips span { flex: 1; transform: translateY(-110%); }
.page-wipe.in .pw-strips span {
  animation: pwStripDrop .42s cubic-bezier(.3,1.2,.5,1) forwards;
  animation-delay: calc(var(--i) * .05s);
}
@keyframes pwStripDrop { to { transform: translateY(0); } }

/* Atto 1bis — coriandoli che schizzano via dal centro */
.page-wipe .pw-confetti { position: absolute; inset: 0; }
.page-wipe .pw-confetti i {
  position: absolute; left: 50%; top: 42%; width: 12px; height: 12px;
  border-radius: 3px; opacity: 0;
}
.page-wipe.in .pw-confetti i { animation: pwBurst .6s ease-out forwards; }
@keyframes pwBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}

/* Atto 2 — pannello scuro che sale: cambio di tono, si fa sul serio */
.page-wipe .pw-serious {
  position: absolute; inset: 0; transform: translateY(100%);
  background: linear-gradient(160deg, var(--wipe-dark-1) 0%, var(--wipe-dark-2) 100%);
}
.page-wipe.in .pw-serious { animation: pwRise .5s cubic-bezier(.22,1,.36,1) .5s forwards; }
@keyframes pwRise { to { transform: translateY(0); } }

/* Atto 3 — scena: cane meccanico + messaggio */
.page-wipe .pw-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; opacity: 0;
}
.page-wipe.in .pw-stage { animation: pwStage .45s cubic-bezier(.34,1.56,.64,1) .9s forwards; }
@keyframes pwStage { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
.page-wipe .pw-dog { width: 184px; height: auto; animation: dogBob 1.1s ease-in-out infinite; }
.page-wipe .pw-text { color: #eaf1f3; text-align: center; font-size: var(--fs-md); letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.page-wipe .pw-text b { display: block; font-size: var(--fs-xl); letter-spacing: 0; text-transform: none; margin-top: 4px; }

/* Animazioni del cane meccanico */
.page-wipe .pw-dog .dog-tail   { transform-box: fill-box; transform-origin: 18% 26%;   animation: dogWag .4s ease-in-out infinite; }
.page-wipe .pw-dog .dog-wrench { transform-box: fill-box; transform-origin: center bottom; animation: wrenchTurn .7s ease-in-out infinite; }
.page-wipe .pw-dog .dog-ear-l,
.page-wipe .pw-dog .dog-ear-r  { transform-box: fill-box; transform-origin: top center; animation: earSway 1.1s ease-in-out infinite; }
@keyframes dogBob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dogWag    { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(16deg); } }
@keyframes wrenchTurn{ 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(12deg); } }
@keyframes earSway   { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

/* ============== Header CTA: stesso stile del CTA hero (solo pagina ciclisti) ============== */
body.playful .site-header .btn-primary {
  background: linear-gradient(135deg, var(--coral-1) 0%, var(--fun-pink) 100%);
  color: var(--surface);
  box-shadow: 0 6px 16px rgba(255,107,157,.32);
}
body.playful .site-header .btn-primary:hover {
  background: linear-gradient(135deg, var(--coral-1-h) 0%, var(--coral-2-h) 100%);
  transform: translateY(-1px);
}

/* ============== Mascotte: cane meccanico che spunta dal bottone "Sei un'officina?" ============== */
.ws-cta-wrap { position: relative; display: inline-flex; }
.ws-dog {
  position: absolute; left: 50%; bottom: calc(100% - 14px);
  width: 86px; height: auto; z-index: -1; pointer-events: none;
  opacity: 0; transform: translate(-50%, 30px) scale(.82);
  transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
  filter: drop-shadow(0 6px 10px rgba(14,58,84,.22));
}
.ws-cta-wrap:hover .ws-dog,
.ws-cta-wrap a.btn-ghost:focus-visible ~ .ws-dog {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
.ws-dog .wsd-wrench { transform-box: fill-box; transform-origin: center bottom; }
.ws-dog .wsd-ear-l, .ws-dog .wsd-ear-r { transform-box: fill-box; transform-origin: top center; }
@media (prefers-reduced-motion: no-preference) {
  .ws-cta-wrap:hover .wsd-wrench { animation: wrenchTurn .7s ease-in-out infinite; }
  .ws-cta-wrap:hover .wsd-ear-l,
  .ws-cta-wrap:hover .wsd-ear-r { animation: earSway 1.1s ease-in-out infinite; }
}

/* Nota sotto i livelli di visibilità (sezione officine) */
.tiers-note { color: var(--text-light-mute); font-size: var(--fs-md); text-align: center; margin-top: 22px; font-style: italic; }

/* ============== Hero officine: screenshot del gestionale (al posto del telefono) ============== */
.hero-shot { display: flex; justify-content: center; }
/* Senza cornice: lo screenshot ha già la sua finestra browser. Un po' più grande. */
.hero-shot img { width: 100%; max-width: 760px; height: auto; }
/* Hero officine: da tablet/desktop testo a sinistra (testa sopra, corpo sotto)
   e screenshot a destra a tutta altezza; sotto i 960px impila in colonna unica
   nell'ordine testa → screenshot → corpo (lo screenshot finisce subito sotto
   "meno tempo in burocrazia"). L'ordine mobile è dato dal DOM. */
@media (min-width: 961px) {
  .hero-grid:has(.hero-shot) {
    grid-template-columns: 1fr 1.25fr;
    grid-template-areas: "head shot" "body shot";
    gap: 0 60px;
    align-items: start;
  }
  .hero-grid:has(.hero-shot) .hero-head { grid-area: head; }
  .hero-grid:has(.hero-shot) .hero-body { grid-area: body; }
  .hero-grid:has(.hero-shot) .hero-shot { grid-area: shot; align-self: center; }
}

/* ============== CrankPal B2B — diagramma di flusso nell'hero ============== */
.hero-flow { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.flow-node {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md); padding: 16px 18px;
}
.flow-node.accent { background: var(--accent); color: var(--primary); border-color: transparent; }
.flow-node .flow-ic {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.12); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.flow-node.accent .flow-ic { background: var(--primary); color: var(--accent); }
.flow-node b { display: block; font-size: var(--fs-md); }
.flow-node span { font-size: var(--fs-sm); opacity: .82; }
.flow-arrow { text-align: center; color: var(--accent); font-size: var(--fs-xl); line-height: 1; }

/* ============== Card .benefit su sfondo chiaro (es. CrankPal B2B) ============== */
.section-light .benefit { background: var(--surface); border: 1px solid var(--border); }
.section-light .benefit h4 { color: var(--primary); }
.section-light .benefit p { color: var(--text-mute); }

/* ===== Modale "Avvisami quando esce" (waitlist app) ===== */
.notify-modal { max-width: 480px; }
.notify-consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-md); color: var(--text-mute); margin-bottom: 18px; cursor: pointer;
}
.notify-consent input { margin-top: 2px; flex: none; }
.notify-submit { width: 100%; }
.notify-feedback { font-size: var(--fs-md); margin-bottom: 12px; }
.notify-feedback.ko { color: var(--orange-d); font-weight: 600; }
.notify-done-head { text-align: center; }
.notify-done-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 4px auto 14px;
  background: var(--accent); color: var(--surface); font-size: var(--fs-2xl); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.notify-divider { height: 1px; background: var(--border); margin: 22px 0 18px; }
.notify-extra-title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.notify-extra-sub { font-size: var(--fs-md); color: var(--text-mute); margin-bottom: 16px; }
.notify-modal select.signup-field, .signup-field select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: var(--fs-md); font-family: inherit; background: var(--bg-light); color: var(--text);
}
.signup-field select:focus { outline: 2px solid var(--accent); border-color: transparent; background: var(--surface); }
.notify-extra-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.notify-extra-actions .btn-accent { flex: 1; }
.notify-extra-thanks { font-size: var(--fs-md); font-weight: 600; color: var(--accent-d); margin-bottom: 14px; }
#notifyExtraDone { text-align: center; }

/* ===== Selettore lingua (globe + modale) ===== */
.lang-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(6, 40, 33, .6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lang-modal {
  position: relative; background: var(--surface); border-radius: 18px;
  width: 100%; max-width: 460px; padding: 26px 26px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.lang-modal-close {
  position: absolute; top: 12px; right: 14px; border: none; cursor: pointer;
  background: var(--bg-light, #f1f5f3); width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--fs-lg); color: var(--text-mute, var(--ink-blue-mute));
}
.lang-modal-close:hover { background: var(--bg-pale, #e6efeb); color: var(--primary, #0a3329); }
.lang-modal-title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; color: var(--primary, #0a3329); }
.lang-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lang-item {
  display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  padding: 11px 12px; border: 1px solid var(--border, var(--border)); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-md); font-weight: 600; color: var(--primary, #0a3329); cursor: pointer;
}
.lang-item:hover:not(:disabled) { border-color: var(--accent, #2dc8a6); background: var(--mint, #ecfcf5); }
.lang-item.current { border-color: var(--accent, #2dc8a6); box-shadow: 0 0 0 2px rgba(45,200,166,.2); }
.lang-item.soon { opacity: .6; cursor: default; }
.lang-flag { font-size: var(--fs-xl); line-height: 1; flex: none; }
.lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-item { min-width: 0; }
.lang-check { color: var(--accent-d, #1ea48a); font-weight: 800; }
.lang-soon {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; flex: none;
  background: var(--bg-pale, #eef4f1); color: var(--text-mute, var(--ink-blue-mute)); padding: 3px 7px; border-radius: var(--r-full);
}
.lang-modal-note { font-size: var(--fs-sm); color: var(--text-mute, var(--ink-blue-mute)); margin-top: 16px; text-align: center; }
@media (max-width: 460px) { .lang-grid { grid-template-columns: 1fr; } }

/* ============== PAGINA FUNZIONALITÀ ============== */
.nav-links a.active { color: var(--primary); font-weight: 700; }

.feat-hero { padding: 64px 0 8px; text-align: center; }
.feat-hero-title {
  font-size: var(--fs-display-2); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.08; margin: 10px auto 0; max-width: 16ch;
}
.feat-hero-sub {
  font-size: var(--fs-lg); color: var(--text-mute, var(--ink-blue-mute)); line-height: 1.55;
  max-width: 60ch; margin: 16px auto 0;
}

.feat-rows .container { display: flex; flex-direction: column; gap: 72px; }
.feat-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
/* Righe "reverse" (immagine a destra): la colonna LARGA va a destra, così lo
   screenshot resta grande quanto quello delle righe normali. */
.feat-row.reverse { grid-template-columns: 1fr 1.4fr; }
.feat-row.reverse .feat-shot { order: 2; }

/* Niente "pill" verde attorno allo screenshot: lo screenshot (PNG con cornice
   browser e margini trasparenti) viene mostrato pulito, senza sfondo né bordo. */
.feat-shot { line-height: 0; }
.feat-shot img { width: 100%; height: auto; display: block; }

.feat-eyebrow {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-d, #1ea48a); margin-bottom: 10px;
}
.feat-body h2 {
  font-size: var(--fs-display-4); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0 0 12px; color: var(--text, var(--text));
}
.feat-body > p { font-size: var(--fs-md); line-height: 1.6; color: var(--text-mute, var(--ink-blue-mute)); margin: 0 0 18px; }

.feat-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feat-points li { position: relative; padding-left: 30px; font-size: var(--fs-md); color: var(--text, var(--text)); line-height: 1.4; }
.feat-points li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #2dc8a6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.feat-cta { text-align: center; }
/* il paragrafo lead ha max-width 720px: senza margini auto resta ancorato a
   sinistra e appare scentrato rispetto a titolo e pulsanti → lo centriamo. */
.feat-cta .section-lead { margin-left: auto; margin-right: auto; }
.feat-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 860px) {
  .feat-row,
  .feat-row.reverse { grid-template-columns: 1fr; gap: 22px; }
  .feat-row.reverse .feat-shot { order: 0; }
  .feat-rows .container { gap: 56px; }
}

/* ---- Rimando alla pagina Funzionalità (banda invitante) ---- */
.feat-teaser-section { padding-top: 8px; }
.feat-teaser {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 40px 44px; border-radius: 24px; text-decoration: none;
  background: linear-gradient(135deg, var(--green-900) 0%, #145a47 55%, var(--teal-600) 130%);
  color: var(--surface); box-shadow: 0 24px 60px -28px rgba(10, 51, 41, 0.7);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
.feat-teaser:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -26px rgba(10, 51, 41, 0.8); }
/* alone luminoso decorativo */
.feat-teaser-glow {
  position: absolute; right: -80px; top: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(45,200,166,.55) 0%, rgba(45,200,166,0) 70%);
  pointer-events: none;
}
.feat-teaser-main { position: relative; max-width: 640px; }
.feat-teaser-eyebrow {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7df0d3; margin-bottom: 8px;
}
.feat-teaser-title {
  font-size: var(--fs-display-3); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1; margin: 0 0 10px; color: var(--surface);
}
.feat-teaser-sub { font-size: var(--fs-md); line-height: 1.55; color: rgba(255,255,255,.82); margin: 0; }
.feat-teaser-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.feat-teaser-chips span {
  font-size: var(--fs-sm); font-weight: 600; color: #eafff8;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  padding: 5px 11px; border-radius: var(--r-full); backdrop-filter: blur(4px);
}
.feat-teaser-cta {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--green-900); font-weight: 800; font-size: var(--fs-md);
  padding: 14px 22px; border-radius: var(--r-full); white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
}
.feat-teaser-arrow { transition: transform .2s var(--ease, ease); }
.feat-teaser:hover .feat-teaser-arrow { transform: translateX(5px); }

@media (max-width: 760px) {
  .feat-teaser { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 26px; }
  .feat-teaser-cta { width: 100%; justify-content: center; }
}

/* ============== SCROLL CUE: freccia cerchiata "c'è altro sotto" ==============
   Usata nelle hero (index, officine). Mostrata via JS solo se la sezione
   successiva non è già visibile; svanisce al primo scroll; clic = scroll
   morbido. Markup: <button class="scroll-cue"> con .scroll-cue-ring + svg. */
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:92px;height:92px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;cursor:pointer;color:var(--accent);opacity:0;transition:opacity .4s var(--ease);z-index:6;}
.scroll-cue.is-visible{opacity:.9;}
.scroll-cue.is-hidden{opacity:0!important;pointer-events:none;}
.scroll-cue-ring{position:absolute;inset:0;border-radius:var(--r-full);border:2px solid currentColor;opacity:.5;animation:scrollCuePulse 1.8s ease-out infinite;}
.scroll-cue-arrow{position:relative;animation:scrollCueBob 1.8s ease-in-out infinite;}
@keyframes scrollCuePulse{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
@keyframes scrollCueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion: reduce){.scroll-cue-ring,.scroll-cue-arrow{animation:none}.scroll-cue{transition:none}}