GoUp Fitness Opz 2 by @whoisen - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
getDefinisce un metodo di invio di dati al server
<h6>Titolo di intestazione di sesto livello
application-x-www-form-urlencodedCodifica dei caratteri di un form
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Il mio primo sito(2)

5/10/24 es. 7 -parole ripetute

Review of Functions I

Lezione 4 (seconda parte)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
  --lime: #cde000;
  --lime-soft: rgba(205,224,0,0.18);
  --lime-trace: rgba(205,224,0,0.08);
  --gray: #808285;
  --offwhite: #ebf0e8;
  --offwhite2: #e0e6dc;
  --dark: #1c1e1b;
  --ink: #2a2c29;
  --mid: #3e403c;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--offwhite);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 60px;
  transition: background 0.5s, padding 0.4s;
}
nav.scrolled {
  background: rgba(235,240,232,0.94);
  backdrop-filter: blur(10px);
  padding: 18px 60px;
  border-bottom: 1px solid rgba(42,44,41,0.07);
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
}
.logo em {
  font-style: normal;
  color: var(--gray);
}
.nav-links {
  display: flex;
  gap: 44px;
  list-style: none;
}
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offwhite);
  background: var(--ink);
  padding: 12px 28px;
  text-decoration: none;
  transition: background 0.3s;
}
.nav-cta:hover { background: var(--mid); }

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.hero-left {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 64px 80px;
  position: relative;
  overflow: hidden;
}
.hero-left::before {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--lime-trace);
  filter: blur(60px);
}
.hero-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeIn 1s 0.3s forwards;
}
.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 5.5vw, 86px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--offwhite);
  opacity: 0;
  animation: fadeIn 1.1s 0.5s forwards;
}
.hero-h1 em {
  font-style: italic;
  color: var(--offwhite2);
}
.hero-h1 .lime-word {
  font-style: italic;
  color: var(--lime);
}
.hero-divider {
  width: 40px;
  height: 1px;
  background: rgba(205,224,0,0.4);
  margin: 36px 0;
  opacity: 0;
  animation: fadeIn 1s 0.8s forwards;
}
.hero-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.85;
  max-width: 380px;
  opacity: 0;
  animation: fadeIn 1s 1s forwards;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  opacity: 0;
  animation: fadeIn 1s 1.2s forwards;
}
.btn-dark {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--lime);
  padding: 16px 36px;
  text-decoration: none;
  transition: opacity 0.3s;
  display: inline-block;
}
.btn-dark:hover { opacity: 0.85; }
.link-ghost {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235,240,232,0.4);
  text-decoration: none;
  border-bottom: 1px solid rgba(235,240,232,0.15);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.link-ghost:hover { color: var(--offwhite); border-color: rgba(235,240,232,0.4); }

.hero-right {
  background: var(--offwhite2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 64px 80px;
  position: relative;
  overflow: hidden;
  gap: 0;
}
.hero-quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 380px;
  opacity: 0;
  animation: fadeIn 1s 0.9s forwards;
}
.hero-quote-attr {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 28px;
  opacity: 0;
  animation: fadeIn 1s 1.1s forwards;
}
.hero-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  margin-top: 64px;
  background: rgba(42,44,41,0.07);
  opacity: 0;
  animation: fadeIn 1s 1.3s forwards;
}
.hero-num-item {
  background: var(--offwhite2);
  padding: 28px 24px;
}
.num-val {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  color: var(--ink);
  line-height: 1;
}
.num-label {
  font-size: 11px;
  font-weight: 300;
  color: var(--gray);
  margin-top: 6px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ── INTRO STRIP ── */
.intro-strip {
  background: var(--ink);
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.strip-item + .strip-item {
  border-left: 1px solid rgba(235,240,232,0.07);
  padding-left: 40px;
}
.strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}
.strip-text {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(235,240,232,0.5);
}

/* ── SEZIONI COMUNI ── */
.section-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--gray);
}
.section-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.1;
  color: var(--ink);
}
.section-h2 em { font-style: italic; color: var(--gray); }
.section-h2-light {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.1;
  color: var(--offwhite);
}
.section-h2-light em { font-style: italic; color: rgba(235,240,232,0.45); }

/* ── TECNOLOGIE ── */
#tecnologie {
  padding: 120px 60px;
  background: var(--offwhite);
}
.tech-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 100px;
  align-items: start;
  margin-top: 72px;
}
.tech-intro-text {
  font-size: 16px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.85;
  position: sticky;
  top: 120px;
}
.tech-cards {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(42,44,41,0.07);
}
.tech-card {
  background: var(--offwhite);
  padding: 52px 48px;
  transition: background 0.4s;
  position: relative;
}
.tech-card:hover { background: #dfe9dc; }
.tech-card-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gray);
  margin-bottom: 28px;
}
.tech-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
.tech-card-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.8;
  max-width: 480px;
}
.tech-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.tech-card-tag::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--lime);
}

/* ── PERCORSO ── */
#percorso {
  background: var(--dark);
  padding: 120px 60px;
}
.percorso-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 100px;
}
.percorso-intro-text {
  font-size: 17px;
  font-weight: 300;
  color: rgba(235,240,232,0.45);
  line-height: 1.85;
}
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(235,240,232,0.07);
}
.step-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  align-items: start;
  gap: 48px;
  padding: 52px 0;
  border-bottom: 1px solid rgba(235,240,232,0.07);
  transition: background 0.3s;
}
.step-row:hover {
  background: rgba(235,240,232,0.02);
}
.step-index {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(235,240,232,0.25);
  padding-top: 4px;
}
.step-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--offwhite);
  line-height: 1.2;
}
.step-desc-text {
  font-size: 14px;
  font-weight: 300;
  color: rgba(235,240,232,0.45);
  line-height: 1.8;
}
.step-lime-accent {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--lime);
  margin-top: 12px;
  opacity: 0.7;
}

/* ── FILOSOFIA ── */
#filosofia {
  background: var(--offwhite2);
  padding: 140px 60px;
}
.filosofia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
}
.filosofia-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.55;
  color: var(--ink);
}
.filosofia-text strong {
  font-weight: 500;
  font-style: italic;
}
.filosofia-right {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.filosofia-item {
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 28px;
  align-items: start;
}
.filosofia-line {
  width: 1px;
  height: 100%;
  background: rgba(205,224,0,0.35);
  min-height: 60px;
}
.filosofia-item-title {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.filosofia-item-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.8;
}

/* ── TESTIMONIANZE ── */
#testimonianze {
  background: var(--dark);
  padding: 120px 60px;
}
.testi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(235,240,232,0.06);
}
.testi-card {
  background: var(--dark);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  transition: background 0.4s;
}
.testi-card:hover { background: #212320; }
.testi-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  color: rgba(235,240,232,0.7);
  line-height: 1.65;
  flex: 1;
}
.testi-bottom {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testi-author-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--offwhite);
}
.testi-author-role {
  font-size: 11px;
  font-weight: 300;
  color: var(--gray);
  margin-top: 3px;
  letter-spacing: 0.06em;
}
.testi-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--lime);
  line-height: 1;
  opacity: 0.4;
}

/* ── CTA ── */
#cta {
  background: var(--lime);
  padding: 120px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cta-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(44px, 4.5vw, 72px);
  line-height: 1.08;
  color: var(--dark);
}
.cta-h2 em { font-style: italic; color: var(--mid); }
.cta-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cta-desc {
  font-size: 16px;
  font-weight: 300;
  color: rgba(28,30,27,0.65);
  line-height: 1.8;
}
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-input {
  padding: 18px 24px;
  background: rgba(28,30,27,0.08);
  border: 1px solid rgba(28,30,27,0.15);
  color: var(--dark);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
  letter-spacing: 0.04em;
}
.cta-input::placeholder { color: rgba(28,30,27,0.35); }
.cta-input:focus { border-color: rgba(28,30,27,0.4); }
.cta-btn {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite);
  background: var(--dark);
  padding: 18px 36px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  align-self: flex-start;
}
.cta-btn:hover { background: var(--mid); }
.cta-note {
  font-size: 11px;
  font-weight: 300;
  color: rgba(28,30,27,0.45);
  letter-spacing: 0.06em;
}

/* ── FOOTER ── */
footer {
  background: var(--ink);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid rgba(235,240,232,0.05);
}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--offwhite);
  text-decoration: none;
}
.footer-logo em { font-style: normal; color: var(--gray); }
.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  justify-content: center;
}
.footer-links a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235,240,232,0.3);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--offwhite); }
.footer-copy {
  font-size: 10px;
  font-weight: 300;
  color: rgba(235,240,232,0.2);
  letter-spacing: 0.06em;
  text-align: right;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  nav { padding: 20px 24px; }
  nav.scrolled { padding: 14px 24px; }
  .nav-links { display: none; }
  #hero { grid-template-columns: 1fr; }
  .hero-left { padding: 100px 32px 64px; min-height: 70vh; }
  .hero-right { padding: 64px 32px; }
  .intro-strip { padding: 32px 24px; flex-direction: column; gap: 20px; }
  .strip-item + .strip-item { border-left: none; border-top: 1px solid rgba(235,240,232,0.07); padding-left: 0; padding-top: 20px; }
  #tecnologie, #percorso, #filosofia, #testimonianze { padding: 80px 24px; }
  #cta { padding: 80px 24px; grid-template-columns: 1fr; gap: 48px; }
  .tech-layout { grid-template-columns: 1fr; gap: 48px; }
  .tech-intro-text { position: static; }
  .percorso-header { grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
  .step-row { grid-template-columns: 40px 1fr; gap: 24px; }
  .step-desc-text { display: none; }
  .filosofia-inner { grid-template-columns: 1fr; gap: 60px; }
  .testi-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px; }
  .footer-copy, .footer-links { text-align: left; justify-content: flex-start; }
}
</style>
</head>
<body>

<!-- NAV -->
<nav id="navbar">
  <a href="#" class="logo">GoUp<em> Fitness</em></a>
  <ul class="nav-links">
    <li><a href="#tecnologie">Metodo</a></li>
    <li><a href="#percorso">Percorso</a></li>
    <li><a href="#filosofia">Filosofia</a></li>
    <li><a href="#testimonianze">Risultati</a></li>
  </ul>
  <a href="#cta" class="nav-cta">Consulenza gratuita</a>
</nav>

<!-- HERO -->
<section id="hero">
  <div class="hero-left">
    <div class="hero-eyebrow">EMS · Vacuum · Benessere integrato</div>
    <h1 class="hero-h1">
      Il tuo corpo<br>
      merita <em>cura</em>,<br>
      non <span class="lime-word">fretta</span>
    </h1>
    <div class="hero-divider"></div>
    <p class="hero-sub">Un percorso pensato su di te, accompagnato da chi sa ascoltare. Tecnologia avanzata al servizio del benessere reale — non di quello promesso.</p>
    <div class="hero-cta-row">
      <a href="#cta" class="btn-dark">Inizia il tuo percorso</a>
      <a href="#percorso" class="link-ghost">Come funziona</a>
    </div>
  </div>
  <div class="hero-right">
    <p class="hero-quote">"Ogni persona ha un percorso diverso. Il nostro lavoro è trovarlo insieme a te — e camminarlo."</p>
    <p class="hero-quote-attr">Marco Botti · Fondatore GoUp Fitness</p>
    <div class="hero-numbers">
      <div class="hero-num-item">
        <div class="num-val">20'</div>
        <div class="num-label">per una sessione EMS completa</div>
      </div>
      <div class="hero-num-item">
        <div class="num-val">100%</div>
        <div class="num-label">programmi personalizzati</div>
      </div>
      <div class="hero-num-item">
        <div class="num-val">A → Z</div>
        <div class="num-label">ti seguiamo ogni passo</div>
      </div>
      <div class="hero-num-item">
        <div class="num-val">1</div>
        <div class="num-label">persona dedicata a te</div>
      </div>
    </div>
  </div>
</section>

<!-- STRIP -->
<div class="intro-strip">
  <div class="strip-item">
    <div class="strip-dot"></div>
    <span class="strip-text">Elettrostimolazione muscolare EMS</span>
  </div>
  <div class="strip-item">
    <div class="strip-dot"></div>
    <span class="strip-text">Vacuum therapy rimodellante</span>
  </div>
  <div class="strip-item">
    <div class="strip-dot"></div>
    <span class="strip-text">Consulenza e monitoraggio continuo</span>
  </div>
  <div class="strip-item">
    <div class="strip-dot"></div>
    <span class="strip-text">Percorso su misura dalla prima sessione</span>
  </div>
</div>

<!-- TECNOLOGIE -->
<section id="tecnologie">
  <div class="section-eyebrow">Il nostro metodo</div>
  <h2 class="section-h2">Tecnologie che<br>lavorano <em>per te</em></h2>
  <div class="tech-layout">
    <p class="tech-intro-text reveal">Non siamo una palestra. Siamo un percorso. Le tecnologie che utilizziamo sono strumenti precisi, scelti per ogni persona in base alla propria storia e ai propri obiettivi.</p>
    <div class="tech-cards">
      <div class="tech-card reveal">
        <div class="tech-card-num">01 / EMS</div>
        <div class="tech-card-title">Elettrostimolazione<br>Muscolare</div>
        <p class="tech-card-desc">L'EMS attiva fino al 90% delle fibre muscolari in una sola sessione, riducendo drasticamente il tempo necessario per ottenere risultati concreti. Perfetto per chi vuole efficacia senza rinunciare al resto della propria vita.</p>
        <span class="tech-card-tag">20 minuti · Alta efficacia · Zero impatto articolare</span>
      </div>
      <div class="tech-card reveal reveal-delay-1">
        <div class="tech-card-num">02 / Vacuum</div>
        <div class="tech-card-title">Vacuum Therapy<br>Rimodellante</div>
        <p class="tech-card-desc">La terapia sottovuoto agisce in profondità sui tessuti, stimola la microcircolazione e aiuta a rimodellare il corpo in modo naturale. Un trattamento che va dove l'allenamento tradizionale non riesce ad arrivare.</p>
        <span class="tech-card-tag">Rimodellamento · Drenaggio · Benessere profondo</span>
      </div>
      <div class="tech-card reveal reveal-delay-2">
        <div class="tech-card-num">03 / Integrato</div>
        <div class="tech-card-title">Protocollo<br>Personalizzato</div>
        <p class="tech-card-desc">EMS e Vacuum non sono trattamenti separati da scegliere — da noi diventano un unico protocollo sinergico, costruito intorno a te e calibrato sessione dopo sessione in base ai tuoi progressi reali.</p>
        <span class="tech-card-tag">Sinergia · Adattamento continuo · Risultati misurabili</span>
      </div>
    </div>
  </div>
</section>

<!-- PERCORSO -->
<section id="percorso">
  <div class="percorso-header">
    <div>
      <div class="section-eyebrow" style="color:rgba(235,240,232,0.3)">Come funziona</div>
      <h2 class="section-h2-light reveal">Il percorso<br><em>dalla A alla Z</em></h2>
    </div>
    <p class="percorso-intro-text reveal reveal-delay-1">Non vediamo clienti. Vediamo persone. Ogni percorso parte da un ascolto autentico e si costruisce giorno dopo giorno, con la pazienza e la precisione che meriti.</p>
  </div>
  <div class="steps-list">
    <div class="step-row reveal">
      <div class="step-index">01</div>
      <div class="step-name">Ascolto<br>e analisi</div>
      <div class="step-desc-text">
        Una consulenza gratuita senza fretta. Parliamo della tua storia, del tuo corpo, dei tuoi obiettivi — e di tutto quello che non ha funzionato finora.
        <span class="step-lime-accent">Il primo passo non costa nulla. Conta tutto.</span>
      </div>
    </div>
    <div class="step-row reveal reveal-delay-1">
      <div class="step-index">02</div>
      <div class="step-name">Percorso<br>su misura</div>
      <div class="step-desc-text">
        Progettiamo insieme un programma che rispetta la tua vita, i tuoi tempi e i tuoi limiti. Nessuno schema standard — solo il tuo.
        <span class="step-lime-accent">Costruito su di te, non su qualcun altro.</span>
      </div>
    </div>
    <div class="step-row reveal reveal-delay-2">
      <div class="step-index">03</div>
      <div class="step-name">Sessioni<br>guidate</div>
      <div class="step-desc-text">
        Ogni sessione è accompagnata da un professionista che conosce il tuo percorso. Nessun automatismo — ogni dettaglio viene monitorato e adattato.
        <span class="step-lime-accent">Con qualcuno che sa chi sei.</span>
      </div>
    </div>
    <div class="step-row reveal reveal-delay-3">
      <div class="step-index">04</div>
      <div class="step-name">Crescita<br>continua</div>
      <div class="step-desc-text">
        I risultati si misurano, si celebrano e si consolidano. Il percorso evolve con te — non si ferma a un obiettivo raggiunto, ma ti porta sempre un passo più in là.
        <span class="step-lime-accent">Perché il benessere non ha un traguardo finale.</span>
      </div>
    </div>
  </div>
</section>

<!-- FILOSOFIA -->
<section id="filosofia">
  <div class="filosofia-inner">
    <div>
      <div class="section-eyebrow">La nostra filosofia</div>
      <p class="filosofia-text reveal">
        Crediamo che il benessere non sia una destinazione da raggiungere in fretta.<br><br>
        È un <strong>percorso che si vive</strong>, con la giusta guida, al ritmo che ti appartiene.
      </p>
    </div>
    <div class="filosofia-right">
      <div class="filosofia-item reveal">
        <div class="filosofia-line"></div>
        <div>
          <div class="filosofia-item-title">Personalizzazione totale</div>
          <p class="filosofia-item-desc">Non esistono programmi standard da GoUp. Ogni persona riceve un percorso costruito da zero sulla propria storia, fisica e personale.</p>
        </div>
      </div>
      <div class="filosofia-item reveal reveal-delay-1">
        <div class="filosofia-line"></div>
        <div>
          <div class="filosofia-item-title">Rispetto del tuo tempo</div>
          <p class="filosofia-item-desc">Sappiamo che il tempo è prezioso. Le nostre sessioni sono progettate per essere efficaci in poco tempo — senza mai sacrificare la qualità dell'esperienza.</p>
        </div>
      </div>
      <div class="filosofia-item reveal reveal-delay-2">
        <div class="filosofia-line"></div>
        <div>
          <div class="filosofia-item-title">Accompagnamento reale</div>
          <p class="filosofia-item-desc">Non sei un numero. Hai una persona che ti segue, ti ascolta tra una sessione e l'altra, e si prende cura del tuo percorso con la stessa attenzione che dedicheresti a te stesso.</p>
        </div>
      </div>
      <div class="filosofia-item reveal reveal-delay-3">
        <div class="filosofia-line"></div>
        <div>
          <div class="filosofia-item-title">Tecnologia al servizio dell'umano</div>
          <p class="filosofia-item-desc">EMS e Vacuum sono strumenti straordinari — ma sono strumenti. Il centro di tutto è sempre la persona che si siede davanti a noi il primo giorno.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIANZE -->
<section id="testimonianze">
  <div class="testi-header">
    <div>
      <div class="section-eyebrow" style="color:rgba(235,240,232,0.3)">Chi ci ha scelto</div>
      <h2 class="section-h2-light reveal">Le loro<br><em>parole</em></h2>
    </div>
  </div>
  <div class="testi-grid">
    <div class="testi-card reveal">
      <p class="testi-text">Non avevo mai trovato un posto dove mi sentissi davvero seguita. Da GoUp ogni sessione sembra pensata apposta per quel giorno, per come mi sento.</p>
      <div class="testi-bottom">
        <div>
          <div class="testi-author-name">Laura M.</div>
          <div class="testi-author-role">Manager, 44 anni</div>
        </div>
        <div class="testi-mark">"</div>
      </div>
    </div>
    <div class="testi-card reveal reveal-delay-1">
      <p class="testi-text">Dopo due operazioni alle ginocchia pensavo che il mio rapporto con il movimento fosse finito. Marco ha costruito qualcosa che rispetta i miei limiti e li sposta piano piano.</p>
      <div class="testi-bottom">
        <div>
          <div class="testi-author-name">Giorgio R.</div>
          <div class="testi-author-role">Imprenditore, 58 anni</div>
        </div>
        <div class="testi-mark">"</div>
      </div>
    </div>
    <div class="testi-card reveal reveal-delay-2">
      <p class="testi-text">In poche settimane ho ritrovato un'energia che non ricordavo di avere. Non solo fisicamente — cambia anche il modo in cui ti percepisci.</p>
      <div class="testi-bottom">
        <div>
          <div class="testi-author-name">Silvia F.</div>
          <div class="testi-author-role">Libera professionista, 38 anni</div>
        </div>
        <div class="testi-mark">"</div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section id="cta">
  <h2 class="cta-h2">Inizia<br>con una<br><em>conversazione</em></h2>
  <div class="cta-right">
    <p class="cta-desc">Una consulenza gratuita, senza impegno. Parliamo di te, di dove sei e dove vorresti arrivare. Il resto viene da sé.</p>
    <div class="cta-form">
      <input type="text" class="cta-input" placeholder="Il tuo nome">
      <input type="email" class="cta-input" placeholder="La tua email">
      <button class="cta-btn">Prenota la consulenza</button>
    </div>
    <p class="cta-note">Risposta garantita entro 24 ore · Nessun automatismo, solo persone.</p>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <a href="#" class="footer-logo">GoUp<em> Fitness</em></a>
  <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>
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 50);
});

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.1 });
reveals.forEach(r => obs.observe(r));
</script>
</body>
</html>