GoUp Fitness Il tuo percorso verso by @whoisen - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<em>Formatta il testo in corsivo/italico enfatizzato
<p>Serve a definire paragrafi di testo
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
titleIndica informazioni aggiuntive riguardo un elemento HTML
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Alice nel Paese delle Meraviglie

La prima pagina

Personal Portfolio

Supermercato no

Table HOTEL STELLA MARIS

Chiara Informatica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoUp Fitness — Il tuo percorso verso il benessere</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;800;900&family=Barlow:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
  --lime: #cde000;
  --gray: #808285;
  --offwhite: #ebf0e8;
  --dark: #1a1b1a;
  --dark2: #242523;
  --dark3: #2e2f2d;
  --lime-dim: rgba(205,224,0,0.12);
  --lime-dim2: rgba(205,224,0,0.06);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--offwhite);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: default;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  background: rgba(26,27,26,0);
  backdrop-filter: blur(0px);
  transition: background 0.4s, backdrop-filter 0.4s;
}
nav.scrolled {
  background: rgba(26,27,26,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(205,224,0,0.1);
}
.logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--offwhite);
  text-decoration: none;
}
.logo span { color: var(--lime); }
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--lime); }
.nav-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--lime);
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 48px;
  gap: 0;
}
.hero-bg-line {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.hero-bg-line svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.hero-left {
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
  z-index: 2;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
}
.hero-tag::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--lime);
}
.hero-h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--offwhite);
  opacity: 0;
  animation: fadeUp 0.8s 0.35s forwards;
}
.hero-h1 .accent { color: var(--lime); display: block; }
.hero-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.7;
  margin-top: 28px;
  max-width: 440px;
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 44px;
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
}
.btn-primary {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--lime);
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  display: inline-block;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-2px); }
.btn-ghost {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offwhite);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--lime); }
.btn-ghost .arrow {
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.2s;
}
.btn-ghost .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-ghost:hover .arrow { width: 40px; }

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  z-index: 2;
  gap: 16px;
}
.hero-stat-block {
  background: var(--dark2);
  border: 1px solid rgba(205,224,0,0.15);
  padding: 28px 36px;
  width: 280px;
  opacity: 0;
  animation: fadeLeft 0.8s forwards;
}
.hero-stat-block:nth-child(1) { animation-delay: 0.6s; }
.hero-stat-block:nth-child(2) { animation-delay: 0.75s; margin-right: 40px; }
.hero-stat-block:nth-child(3) { animation-delay: 0.9s; }
.stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── TECNOLOGIE ── */
#tecnologie {
  padding: 120px 48px;
  background: var(--dark2);
  position: relative;
  overflow: hidden;
}
.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--lime);
}
.section-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 64px;
  max-width: 560px;
}
.section-h2 em { color: var(--lime); font-style: normal; }

.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.tech-card {
  background: var(--dark3);
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.tech-card:hover { background: #333432; }
.tech-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--lime);
  transition: height 0.4s;
}
.tech-card:hover::before { height: 100%; }
.tech-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(205,224,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.tech-icon svg { width: 24px; height: 24px; }
.tech-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.tech-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.7;
  max-width: 420px;
}
.tech-tag {
  display: inline-block;
  margin-top: 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime);
  border: 1px solid rgba(205,224,0,0.3);
  padding: 5px 14px;
}

/* ── PERCORSO ── */
#percorso {
  padding: 120px 48px;
  background: var(--dark);
}
.percorso-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
.percorso-text {
  font-size: 17px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.8;
  max-width: 420px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--lime) 0%, rgba(205,224,0,0.2) 100%);
}
.step {
  padding: 0 24px 0 0;
  position: relative;
}
.step-num {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(205,224,0,0.3);
  background: var(--dark2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--lime);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  transition: background 0.3s, border-color 0.3s;
}
.step:hover .step-num {
  background: var(--lime-dim);
  border-color: var(--lime);
}
.step-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.step-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.65;
}

/* ── PERCHÉ GOUP ── */
#perche {
  padding: 120px 48px;
  background: var(--lime);
  position: relative;
  overflow: hidden;
}
#perche::before {
  content: 'GOUP';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 260px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.05);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.perche-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.perche-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--dark);
}
.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.feature-item {
  background: rgba(0,0,0,0.06);
  padding: 28px 28px;
  transition: background 0.2s;
}
.feature-item:hover { background: rgba(0,0,0,0.1); }
.feature-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.feature-icon svg { width: 28px; height: 28px; }
.feature-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.feature-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26,27,26,0.65);
  line-height: 1.6;
}

/* ── TESTIMONIALS ── */
#testimonianze {
  padding: 120px 48px;
  background: var(--dark2);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 64px;
}
.testi-card {
  background: var(--dark3);
  padding: 44px 40px;
  position: relative;
}
.testi-card::before {
  content: '"';
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 80px;
  font-weight: 900;
  color: var(--lime);
  line-height: 0.8;
  display: block;
  margin-bottom: 16px;
  opacity: 0.6;
}
.testi-text {
  font-size: 15px;
  font-weight: 300;
  color: var(--offwhite);
  line-height: 1.75;
  margin-bottom: 28px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime-dim);
  border: 1px solid rgba(205,224,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--lime);
}
.testi-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--offwhite);
  letter-spacing: 0.05em;
}
.testi-role {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray);
}

/* ── CTA FINALE ── */
#cta {
  padding: 140px 48px;
  background: var(--dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(205,224,0,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--offwhite);
  max-width: 800px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}
.cta-h2 em { color: var(--lime); font-style: normal; }
.cta-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--gray);
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.cta-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-input {
  flex: 1;
  padding: 18px 24px;
  background: var(--dark2);
  border: 1px solid rgba(205,224,0,0.2);
  border-right: none;
  color: var(--offwhite);
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
}
.cta-input::placeholder { color: var(--gray); }
.cta-input:focus { border-color: rgba(205,224,0,0.6); }
.cta-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--lime);
  padding: 18px 32px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.cta-btn:hover { opacity: 0.88; }
.cta-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray);
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

/* ── FOOTER ── */
footer {
  padding: 48px;
  background: #111211;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(205,224,0,0.08);
}
.footer-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--offwhite);
}
.footer-logo span { color: var(--lime); }
.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.footer-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--lime); }
.footer-copy {
  font-size: 12px;
  font-weight: 300;
  color: #444;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 18px 24px; }
  .nav-links { display: none; }
  #hero { grid-template-columns: 1fr; padding: 0 24px; }
  .hero-right { display: none; }
  #tecnologie, #percorso, #perche, #testimonianze, #cta { padding: 80px 24px; }
  .tech-grid, .testi-grid { grid-template-columns: 1fr; }
  .percorso-intro { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .perche-inner { grid-template-columns: 1fr; gap: 40px; }
  .features-list { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 24px; text-align: center; padding: 36px 24px; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .cta-form { flex-direction: column; }
  .cta-input { border-right: 1px solid rgba(205,224,0,0.2); border-bottom: none; }
}
</style>
</head>
<body>

<!-- NAV -->
<nav id="navbar">
  <a href="#" class="logo">Go<span>Up</span> Fitness</a>
  <ul class="nav-links">
    <li><a href="#tecnologie">Tecnologie</a></li>
    <li><a href="#percorso">Il Percorso</a></li>
    <li><a href="#perche">Chi Siamo</a></li>
    <li><a href="#testimonianze">Risultati</a></li>
  </ul>
  <a href="#cta" class="nav-cta">Inizia ora</a>
</nav>

<!-- HERO -->
<section id="hero">
  <div class="hero-bg-line">
    <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M-100 700 Q 200 400 500 500 Q 800 600 1100 200 Q 1300 50 1600 100" stroke="rgba(205,224,0,0.07)" stroke-width="1.5" fill="none"/>
      <path d="M-100 750 Q 250 450 520 540 Q 800 640 1150 240 Q 1350 90 1600 140" stroke="rgba(205,224,0,0.04)" stroke-width="1" fill="none"/>
      <circle cx="1200" cy="200" r="180" fill="rgba(205,224,0,0.03)"/>
      <circle cx="1200" cy="200" r="100" fill="rgba(205,224,0,0.04)"/>
    </svg>
  </div>
  <div class="hero-left">
    <div class="hero-tag">Fast Fitness · EMS · Vacuum</div>
    <h1 class="hero-h1">
      Il tuo<br>percorso<br>
      <span class="accent">inizia qui</span>
    </h1>
    <p class="hero-sub">Tecnologia avanzata, cura umana. Un programma costruito su di te — non sugli altri. Risultati reali in meno tempo.</p>
    <div class="hero-actions">
      <a href="#cta" class="btn-primary">Prenota la tua consulenza</a>
      <a href="#percorso" class="btn-ghost">
        <span class="arrow"></span>
        Scopri come funziona
      </a>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-stat-block">
      <div class="stat-num">20'</div>
      <div class="stat-label">Una sessione EMS equivale a ore di allenamento tradizionale</div>
    </div>
    <div class="hero-stat-block">
      <div class="stat-num">100%</div>
      <div class="stat-label">Percorso personalizzato, costruito intorno alla tua vita</div>
    </div>
    <div class="hero-stat-block">
      <div class="stat-num">A→Z</div>
      <div class="stat-label">Ti seguiamo dalla prima sessione ai tuoi obiettivi finali</div>
    </div>
  </div>
</section>

<!-- TECNOLOGIE -->
<section id="tecnologie">
  <div class="section-label">Le nostre tecnologie</div>
  <h2 class="section-h2">Strumenti<br>di <em>nuova</em><br>generazione</h2>
  <div class="tech-grid">
    <div class="tech-card reveal">
      <div class="tech-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="#cde000" stroke-width="1.5">
          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
        </svg>
      </div>
      <div class="tech-title">EMS Training</div>
      <p class="tech-desc">L'Elettrostimolazione Muscolare attiva fino al 90% delle fibre muscolari simultaneamente. In 20 minuti ottieni risultati che richiederebbero ore in palestra. Indolore, preciso, straordinariamente efficace.</p>
      <span class="tech-tag">Elettrostimolazione</span>
    </div>
    <div class="tech-card reveal reveal-delay-1">
      <div class="tech-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="#cde000" stroke-width="1.5">
          <circle cx="12" cy="12" r="10"/>
          <path d="M12 6v6l4 2"/>
        </svg>
      </div>
      <div class="tech-title">Vacuum Therapy</div>
      <p class="tech-desc">La terapia sottovuoto stimola la circolazione, riduce la cellulite e rimodella i tessuti in profondità. Un trattamento body-shaping che lavora dove gli allenamenti tradizionali non arrivano.</p>
      <span class="tech-tag">Rimodellamento corporeo</span>
    </div>
    <div class="tech-card reveal reveal-delay-2" style="grid-column: 1 / -1; padding: 40px 48px; display: flex; gap: 60px; align-items: center;">
      <div style="flex:1">
        <div class="tech-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="#cde000" stroke-width="1.5">
            <path d="M12 2a10 10 0 1 1 0 20A10 10 0 0 1 12 2z"/>
            <path d="M12 8v4l3 3"/>
          </svg>
        </div>
        <div class="tech-title">Protocollo Integrato</div>
        <p class="tech-desc">EMS e Vacuum non sono trattamenti separati — da noi diventano un unico percorso sinergico, calibrato sui tuoi obiettivi e monitorato sessione dopo sessione.</p>
      </div>
      <div style="flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
        <div style="padding:20px; background:rgba(205,224,0,0.06); border:1px solid rgba(205,224,0,0.12);">
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--lime)">-40%</div>
          <div style="font-size:12px;color:var(--gray);margin-top:4px;line-height:1.5">tempo rispetto all'allenamento classico</div>
        </div>
        <div style="padding:20px; background:rgba(205,224,0,0.06); border:1px solid rgba(205,224,0,0.12);">
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--lime)">+90%</div>
          <div style="font-size:12px;color:var(--gray);margin-top:4px;line-height:1.5">fibre muscolari attivate per sessione</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PERCORSO -->
<section id="percorso">
  <div class="percorso-intro">
    <div>
      <div class="section-label">Come funziona</div>
      <h2 class="section-h2 reveal">Il tuo<br><em>percorso</em><br>da A a Z</h2>
    </div>
    <p class="percorso-text reveal reveal-delay-1">Non vendi sessioni. Non vendi abbonamenti. Costruiamo insieme un percorso che parte da dove sei adesso e ti porta dove vuoi arrivare — con qualcuno accanto ad ogni passo.</p>
  </div>
  <div class="steps">
    <div class="step reveal">
      <div class="step-num">01</div>
      <div class="step-title">Analisi iniziale</div>
      <p class="step-desc">Una consulenza gratuita per capire la tua storia, i tuoi obiettivi e il tuo punto di partenza. Nessun giudizio, solo ascolto.</p>
    </div>
    <div class="step reveal reveal-delay-1">
      <div class="step-num">02</div>
      <div class="step-title">Percorso su misura</div>
      <p class="step-desc">Progettiamo un programma personalizzato che si adatta ai tuoi tempi, al tuo corpo e ai tuoi obiettivi reali.</p>
    </div>
    <div class="step reveal reveal-delay-2">
      <div class="step-num">03</div>
      <div class="step-title">Sessioni guidate</div>
      <p class="step-desc">EMS, Vacuum o entrambi — ogni sessione è guidata da un professionista che conosce il tuo percorso.</p>
    </div>
    <div class="step reveal reveal-delay-3">
      <div class="step-num">04</div>
      <div class="step-title">Risultati e crescita</div>
      <p class="step-desc">Monitoriamo i progressi, aggiustiamo il tiro e celebriamo ogni traguardo. Il percorso evolve con te.</p>
    </div>
  </div>
</section>

<!-- PERCHÉ GOUP -->
<section id="perche">
  <div class="perche-inner">
    <h2 class="perche-h2 reveal">Perché<br>scegliere<br>GoUp</h2>
    <div class="features-list">
      <div class="feature-item reveal">
        <div class="feature-icon">
          <svg viewBox="0 0 28 28" fill="none" stroke="rgba(26,27,26,0.7)" stroke-width="1.5">
            <path d="M14 2l3.5 7 7.5 1-5.5 5.3 1.3 7.7L14 20l-6.8 3 1.3-7.7L3 10l7.5-1z"/>
          </svg>
        </div>
        <div class="feature-title">Personalizzazione totale</div>
        <p class="feature-desc">Nessun programma standard. Ogni cliente ha il proprio percorso, costruito da zero sulla sua storia.</p>
      </div>
      <div class="feature-item reveal reveal-delay-1">
        <div class="feature-icon">
          <svg viewBox="0 0 28 28" fill="none" stroke="rgba(26,27,26,0.7)" stroke-width="1.5">
            <circle cx="14" cy="14" r="12"/>
            <path d="M9 14l3.5 3.5L19 10"/>
          </svg>
        </div>
        <div class="feature-title">Efficacia certificata</div>
        <p class="feature-desc">Tecnologie EMS e Vacuum con risultati documentati, usate da professionisti della salute in tutto il mondo.</p>
      </div>
      <div class="feature-item reveal reveal-delay-2">
        <div class="feature-icon">
          <svg viewBox="0 0 28 28" fill="none" stroke="rgba(26,27,26,0.7)" stroke-width="1.5">
            <path d="M14 3C8 3 3 8 3 14s5 11 11 11 11-5 11-11S20 3 14 3z"/>
            <path d="M14 8v6l4 4"/>
          </svg>
        </div>
        <div class="feature-title">Rispetta il tuo tempo</div>
        <p class="feature-desc">Sessioni da 20-45 minuti, pensate per chi ha poco tempo ma non vuole rinunciare ai risultati.</p>
      </div>
      <div class="feature-item reveal reveal-delay-3">
        <div class="feature-icon">
          <svg viewBox="0 0 28 28" fill="none" stroke="rgba(26,27,26,0.7)" stroke-width="1.5">
            <path d="M14 2C7 2 2 7 2 14c0 4 1.8 7.5 4.6 9.8L14 26l7.4-2.2C24.2 21.5 26 18 26 14 26 7 21 2 14 2z"/>
          </svg>
        </div>
        <div class="feature-title">Accompagnamento reale</div>
        <p class="feature-desc">Non sei un numero. Hai una persona dedicata che ti segue, ti ascolta e si prende cura del tuo percorso.</p>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIANZE -->
<section id="testimonianze">
  <div class="section-label">Chi ci ha scelto</div>
  <h2 class="section-h2 reveal">I loro<br><em>risultati</em></h2>
  <div class="testi-grid">
    <div class="testi-card reveal">
      <p class="testi-text">Non credevo fosse possibile vedere differenze così rapide. In 6 settimane ho recuperato una forma che non avevo da anni — e senza stravolgere la mia giornata.</p>
      <div class="testi-author">
        <div class="testi-avatar">LM</div>
        <div>
          <div class="testi-name">Laura M.</div>
          <div class="testi-role">Manager, 44 anni</div>
        </div>
      </div>
    </div>
    <div class="testi-card reveal reveal-delay-1">
      <p class="testi-text">Dopo due ginocchia operate pensavo che il fitness fosse finito per me. Marco ha costruito un percorso che rispetta i miei limiti e mi ha fatto superare quelli che credevo invalicabili.</p>
      <div class="testi-author">
        <div class="testi-avatar">GR</div>
        <div>
          <div class="testi-name">Giorgio R.</div>
          <div class="testi-role">Imprenditore, 58 anni</div>
        </div>
      </div>
    </div>
    <div class="testi-card reveal reveal-delay-2">
      <p class="testi-text">Finalmente un posto dove non mi sento una cliente tra le tante. Ogni sessione è pensata per me, e si vede. Ho ritrovato energia e fiducia in me stessa.</p>
      <div class="testi-author">
        <div class="testi-avatar">SF</div>
        <div>
          <div class="testi-name">Silvia F.</div>
          <div class="testi-role">Libera professionista, 37 anni</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section id="cta">
  <h2 class="cta-h2">Pronto a<br><em>salire?</em></h2>
  <p class="cta-sub">Prenota una consulenza gratuita. Nessun impegno — solo una conversazione per capire da dove partire insieme.</p>
  <div class="cta-form">
    <input type="email" class="cta-input" placeholder="La tua email">
    <button class="cta-btn">Prenota ora</button>
  </div>
  <p class="cta-note">Oppure chiamaci direttamente — risposta garantita entro 24 ore.</p>
</section>

<!-- FOOTER -->
<footer>
  <div class="footer-logo">Go<span>Up</span> Fitness</div>
  <ul class="footer-links">
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Cookie</a></li>
    <li><a href="#">Contatti</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
  <div class="footer-copy">© 2025 GoUp Fitness. Tutti i diritti riservati.</div>
</footer>

<script>
// Nav scroll
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 40);
});

// Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      obs.unobserve(e.target);
    }
  });
}, { threshold: 0.12 });
reveals.forEach(r => obs.observe(r));
</script>
</body>
</html>