<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- PERSONALIZZA: titolo della pagina -->
  <title>Studio Capelli — Parrucchiere a Padova</title>
  <!-- PERSONALIZZA: meta description -->
  <meta name="description" content="Parrucchiere a Padova, in centro storico. Precisione, cura e stile in ogni taglio. Prenota il tuo appuntamento.">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HairSalon",
    <!-- PERSONALIZZA: nome, indirizzo, telefono, url -->
    "name": "Studio Capelli Padova",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Via Roma 12",
      "addressLocality": "Padova",
      "addressRegion": "PD",
      "postalCode": "35122",
      "addressCountry": "IT"
    },
    "telephone": "+39 049 000 0000",
    "url": "https://www.studiocapellipadova.it",
    "openingHours": ["Mo-Sa 09:00-19:00"]
  }
  </script>
  <!-- GA4: <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> -->
  <!-- Meta Pixel: fbq('init', 'XXXXXXXXXXXXXXXX'); -->
</head>
<body>

  <!-- ========================
       HERO — full-bleed, testo centrato su overlay
  ========================= -->
  <section class="hero">
    <div class="hero__bg">
      <img
        src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1920&q=80&auto=format&fit=crop"
        alt="Parrucchiere Padova — precisione e stile"
        loading="eager"
        width="1920"
        height="1080"
        fetchpriority="high"
      >
    </div>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <!-- PERSONALIZZA: quartiere e città -->
      <span class="hero__eyebrow">Padova · Centro Storico</span>
      <h1 class="hero__title">
        Scienza<br>
        <em>del bello</em>
      </h1>
      <!-- PERSONALIZZA: tagline del salone -->
      <p class="hero__tagline">Dove la precisione incontra l'estetica. Il tuo parrucchiere di fiducia a Padova dal 2012.</p>
      <div class="hero__actions">
        <!-- PERSONALIZZA: numero di telefono -->
        <a href="tel:+390490000000" class="btn btn--copper">Prenota ora</a>
        <a href="#servizi" class="btn btn--ghost">Scopri di più</a>
      </div>
    </div>
  </section>

  <!-- Divisore sottile -->
  <div class="divider-rule">
    <span class="rule-line"></span>
    <!-- PERSONALIZZA: nome del salone -->
    <span class="rule-text">Studio Capelli</span>
    <span class="rule-line"></span>
  </div>

  <!-- ========================
       SEZIONE 1 — SERVIZI
  ========================= -->
  <section class="services" id="servizi">
    <div class="services__header">
      <span class="section-eyebrow">Cosa offriamo</span>
      <h2 class="section-title">I nostri servizi</h2>
    </div>

    <div class="services__list">
      <div class="services__row">
        <span class="row__num">01</span>
        <div class="row__body">
          <!-- PERSONALIZZA: nome e descrizione servizio -->
          <h3 class="row__title">Taglio &amp; Styling</h3>
          <p class="row__desc">Taglio personalizzato sulla struttura del viso e sulla routine quotidiana. Nessun taglio uguale all'altro. Consulenza inclusa.</p>
        </div>
        <!-- PERSONALIZZA: prezzo -->
        <span class="row__price">da 35 €</span>
      </div>
      <div class="services__row">
        <span class="row__num">02</span>
        <div class="row__body">
          <h3 class="row__title">Colorazione</h3>
          <p class="row__desc">Tinte, highlights, balayage. Colori eseguiti con prodotti professionali selezionati, rispettando la salute del capello.</p>
        </div>
        <span class="row__price">da 50 €</span>
      </div>
      <div class="services__row">
        <span class="row__num">03</span>
        <div class="row__body">
          <h3 class="row__title">Trattamenti</h3>
          <p class="row__desc">Cheratina, idratazione profonda, ristrutturazione. Protocolli su misura pensati per il tuo tipo di capello specifico.</p>
        </div>
        <span class="row__price">da 45 €</span>
      </div>
      <div class="services__row">
        <span class="row__num">04</span>
        <div class="row__body">
          <h3 class="row__title">Acconciature &amp; Cerimonie</h3>
          <p class="row__desc">Per ogni occasione speciale: matrimoni, lauree, eventi. Prova inclusa, prenotazione anticipata consigliata.</p>
        </div>
        <span class="row__price">su preventivo</span>
      </div>
    </div>
  </section>

  <!-- ========================
       SEZIONE 2 — MANIFESTO
  ========================= -->
  <section class="manifesto" id="chi-siamo">
    <div class="manifesto__inner">
      <div class="manifesto__initial" aria-hidden="true">B</div>
      <div class="manifesto__text">
        <!-- PERSONALIZZA: testo manifesto del salone -->
        <p class="manifesto__lead">Bello non è sinonimo di costoso. È sinonimo di cura, attenzione, ascolto.</p>
        <p class="manifesto__body">Lavoriamo a Padova dal 2012 portando avanti una filosofia semplice: ogni capello ha la sua storia, ogni cliente merita il suo tempo. Non esistono trattamenti standard, esistono persone. Vieni a trovarci.</p>
        <!-- PERSONALIZZA: nome del titolare -->
        <span class="manifesto__firma">— Giulia Marchi</span>
      </div>
    </div>
  </section>

  <!-- ========================
       SEZIONE 3 — GALLERIA
  ========================= -->
  <section class="gallery-section" id="galleria">
    <span class="section-eyebrow">Il nostro lavoro</span>
    <div class="gallery">
      <div class="gallery__item gallery__item--tall">
        <img src="https://images.unsplash.com/photo-1593980966860-3b2382e54a29?w=800&q=80&auto=format&fit=crop" alt="Taglio preciso — Padova" loading="lazy" width="600" height="700">
      </div>
      <div class="gallery__item">
        <img src="https://images.unsplash.com/photo-1599620132037-082363f7ce91?w=800&q=80&auto=format&fit=crop" alt="Il salone — Padova" loading="lazy" width="600" height="340">
      </div>
      <div class="gallery__item">
        <img src="https://images.unsplash.com/photo-1648157963892-fa90a04e278b?w=800&q=80&auto=format&fit=crop" alt="Colorazione — Padova" loading="lazy" width="600" height="340">
      </div>
    </div>
  </section>

  <!-- ========================
       SEZIONE 4 — SPLIT (stats sinistra, immagine destra)
  ========================= -->
  <section class="split-section" id="approccio">
    <div class="split-section__content">
      <span class="section-eyebrow">Perché sceglierci</span>
      <h2 class="split-title">Numeri che<br>parlano da soli</h2>
      <div class="stats-grid">
        <div class="stat-block">
          <!-- PERSONALIZZA: anni di attività -->
          <span class="stat-block__num">12</span>
          <span class="stat-block__label">anni di attività</span>
        </div>
        <div class="stat-block">
          <!-- PERSONALIZZA: clienti seguiti -->
          <span class="stat-block__num">800+</span>
          <span class="stat-block__label">clienti seguiti</span>
        </div>
        <div class="stat-block">
          <span class="stat-block__num">100%</span>
          <span class="stat-block__label">su appuntamento</span>
        </div>
        <div class="stat-block">
          <span class="stat-block__num">0</span>
          <span class="stat-block__label">trattamenti standard</span>
        </div>
      </div>
      <a href="#contatti" class="btn btn--plum">Prenota ora</a>
    </div>
    <div class="split-section__img">
      <img
        src="https://images.unsplash.com/photo-1672642150228-3fcd5826ec26?w=1200&q=80&auto=format&fit=crop"
        alt="Cura e precisione — parrucchiere Padova"
        loading="lazy"
        width="800"
        height="600"
      >
    </div>
  </section>

  <!-- ========================
       SEZIONE 5 — RECENSIONI
  ========================= -->
  <section class="reviews" id="recensioni">
    <span class="section-eyebrow">Recensioni</span>
    <h2 class="section-title">Cosa dicono<br>i nostri clienti</h2>
    <div class="reviews__grid">
      <div class="review__card">
        <!-- PERSONALIZZA: testo recensione e nome -->
        <p class="review__text">"Professionalità rara. Il taglio che cercavo da anni: finalmente qualcuno che capisce davvero cosa vuol dire ascoltare."</p>
        <div class="review__author">
          <span class="review__name">A. M., Padova</span>
          <span class="review__stars">★★★★★</span>
        </div>
      </div>
      <div class="review__card">
        <p class="review__text">"Ambiente curato, personale preciso e sempre puntuale. Il colore perfetto al primo tentativo, senza sorprese."</p>
        <div class="review__author">
          <span class="review__name">C. B., Rubano</span>
          <span class="review__stars">★★★★★</span>
        </div>
      </div>
      <div class="review__card">
        <p class="review__text">"Ci vado da tre anni. Non ho mai avuto motivo per cambiare. Qualità, serietà e prezzi onesti ogni volta."</p>
        <div class="review__author">
          <span class="review__name">S. R., Padova</span>
          <span class="review__stars">★★★★★</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ========================
       CTA FINALE
  ========================= -->
  <section class="cta-finale" id="contatti">
    <div class="cta-finale__inner">
      <h2 class="cta-title">Pronto per<br>il tuo <em>taglio perfetto</em>?</h2>
      <!-- PERSONALIZZA: indirizzo e orari -->
      <p class="cta-sub">Via Roma 12, Padova · Centro Storico<br>Su appuntamento · Lun–Sab</p>
      <div class="cta-actions">
        <!-- PERSONALIZZA: numero di telefono e WhatsApp -->
        <a href="tel:+390490000000" class="btn btn--copper">Chiama ora</a>
        <a href="https://wa.me/390490000000" class="btn btn--ghost-plum">WhatsApp</a>
      </div>
      <p class="cta-orari">Lun–Sab · 9:00–19:00</p>
    </div>
  </section>

  <footer class="site-footer">
    <!-- PERSONALIZZA: ragione sociale, P.IVA, indirizzo -->
    <p>© 2025 Studio Capelli Padova · P.IVA 00000000000 · Via Roma 12, Padova</p>
    <p><a href="#">Privacy Policy</a> · <a href="#">Cookie Policy</a></p>
  </footer>


  <!-- POPUP — DOMINIO IN VENDITA -->
  <div id="domain-popup" role="dialog" aria-modal="true" aria-labelledby="popup-title" style="display:none">
    <div id="domain-backdrop"></div>
    <div id="domain-modal">
      <button id="domain-close" aria-label="Chiudi">✕</button>
      <div id="domain-ornament" aria-hidden="true">◉</div>
      <p id="domain-eyebrow">Opportunità</p>
      <h2 id="popup-title">Questo dominio<br><em>è in vendita</em></h2>
      <p id="domain-body">Stai visitando una landing page creata su questo dominio.<br>
      Se gestisci un salone nel centro storico di Padova,<br>potresti acquisire questo indirizzo web.</p>
      <div id="domain-divider" aria-hidden="true"><span></span><span>◉</span><span></span></div>
      <a id="domain-cta" href="mailto:mtessarotto@gmail.com?subject=Interesse%20per%20il%20dominio%20%E2%80%94%20Parrucchiere%20Padova&body=Buongiorno%2C%20ho%20visitato%20la%20landing%20page%20e%20sono%20interessato%2Fa%20al%20dominio.%20Potete%20contattarmi%3F%0A%0AGrazie" target="_blank" rel="noopener">Richiedi informazioni →</a>
      <p id="domain-note">Risposta entro 24 ore · Nessun impegno</p>
    </div>
  </div>
  <style>
    #domain-popup{position:fixed;inset:0;z-index:9999;animation:dp-fadein .35s ease both}
    @keyframes dp-fadein{from{opacity:0}to{opacity:1}}
    #domain-backdrop{position:absolute;inset:0;background:rgba(25,8,35,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}
    #domain-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#FAF7F2;border-top:4px solid #4E1F5E;border-bottom:1px solid rgba(78,31,94,.15);padding:3rem 3rem 2.4rem;width:min(500px,calc(100vw - 2rem));text-align:center;box-shadow:0 28px 70px rgba(25,8,35,.28);animation:dp-slidein .42s cubic-bezier(.22,.68,0,1.15) both}
    @keyframes dp-slidein{from{transform:translate(-50%,-44%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
    #domain-close{position:absolute;top:.9rem;right:1rem;background:none;border:none;cursor:pointer;font-size:1rem;color:rgba(51,20,62,.3);padding:.3rem .5rem;line-height:1;transition:color .2s}
    #domain-close:hover{color:#B07030}
    #domain-ornament{font-size:1.2rem;color:#B07030;margin-bottom:1.1rem;letter-spacing:.1em}
    #domain-eyebrow{font-family:'Inter',system-ui,sans-serif;font-size:.67rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#B07030;margin-bottom:.75rem}
    #popup-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;line-height:1.15;color:#33143E;margin-bottom:1.2rem}
    #popup-title em{font-style:italic;color:#B07030}
    #domain-body{font-family:'Inter',system-ui,sans-serif;font-size:.9rem;line-height:1.72;color:#555;margin-bottom:1.5rem}
    #domain-divider{display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
    #domain-divider span:first-child,#domain-divider span:last-child{flex:1;height:1px;background:rgba(176,112,48,.22)}
    #domain-divider span:nth-child(2){color:#B07030;font-size:.78rem}
    #domain-cta{display:inline-block;background:#4E1F5E;color:#FAF7F2;font-family:'Inter',system-ui,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.9rem 2.2rem;border:2px solid transparent;text-decoration:none;transition:background .22s,color .22s,border-color .22s;margin-bottom:1rem}
    #domain-cta:hover{background:transparent;color:#4E1F5E;border-color:#4E1F5E}
    #domain-note{font-family:'Inter',system-ui,sans-serif;font-size:.72rem;color:rgba(51,20,62,.32);letter-spacing:.06em}
    @media(max-width:540px){#domain-modal{padding:2.2rem 1.5rem 1.8rem}#domain-body br{display:none}}
  </style>
  <script>
    (function(){
      if(sessionStorage.getItem('domainPopupSeen'))return;
      var p=document.getElementById('domain-popup'),c=document.getElementById('domain-close'),b=document.getElementById('domain-backdrop');
      function show(){p.style.display='block';document.body.style.overflow='hidden';sessionStorage.setItem('domainPopupSeen','1')}
      function hide(){p.style.animation='dp-fadein .25s ease reverse both';setTimeout(function(){p.style.display='none';document.body.style.overflow=''},230)}
      setTimeout(show,4000);
      c.addEventListener('click',hide);b.addEventListener('click',hide);
      document.addEventListener('keydown',function(e){if(e.key==='Escape'&&p.style.display!=='none')hide()});
    })();
  </script>
</body>
</html>
