Design & Comunicazione Digitale ?? by @Darkness977 - Codewith.it

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

References

rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<title>Definisce il titolo della pagina web.
hreflangConsente di dichiarare la lingua del documento collegato.
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
methodDetermina il metodo di invio dei dati di un form al server

Users

Log in to search for users

Explore

Find inspiration

Comunicare sul Web [Template CSS]

Lola Harrel CSS Styling Assignment

Pagina di Esempio

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" />
  <title>Design & Comunicazione Digitale — Studio Creativo</title>
  <meta name="description" content="Studio creativo specializzato in design e comunicazione digitale. Progetti, blog, portfolio e risorse per brand moderni e professionali." />
  <meta name="keywords" content="design, comunicazione digitale, brand, UI, UX, agency, creatività, portfolio" />
  <link rel="canonical" href="https://www.tuositoexample.com/" />
  <meta name="robots" content="index, follow" />
  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Design & Comunicazione Digitale — Studio Creativo" />
  <meta property="og:description" content="Progetti, portfolio, e risorse per design e comunicazione digitale." />
  <meta property="og:url" content="https://www.tuositoexample.com/" />
  <meta property="og:site_name" content="Studio Creativo" />
  <!-- fallback OG image (local recommended) -->
  <meta property="og:image" content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80&auto=format&fit=crop" />

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Design & Comunicazione Digitale — Studio Creativo" />
  <meta name="twitter:description" content="Progetti, portfolio, e risorse per design e comunicazione digitale." />
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80&auto=format&fit=crop" />

  <!-- Preconnect fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">

  <link rel="icon" href="/favicon.ico" />

  <!-- Structured Data JSON-LD: Organization, Website, Breadcrumbs, BlogPosting, FAQPage -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@graph":[
      {
        "@type":"Organization",
        "@id":"https://www.tuositoexample.com/#org",
        "name":"Studio Creativo",
        "url":"https://www.tuositoexample.com/",
        "logo":"https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&q=80&auto=format&fit=crop"
      },
      {
        "@type":"WebSite",
        "@id":"https://www.tuositoexample.com/#website",
        "url":"https://www.tuositoexample.com/",
        "name":"Design & Comunicazione Digitale — Studio Creativo",
        "potentialAction":{
          "@type":"SearchAction",
          "target":"https://www.tuositoexample.com/?s={search_term_string}",
          "query-input":"required name=search_term_string"
        }
      }
    ]
  }
  </script>

  <style>
    /* =============
       Design System Variables
       ============= */
    :root{
      --bg: #1a1a1a; /* grigio scuro richiesto */
      --card: rgba(255,255,255,0.04); /* card slightly lighter */
      --card-strong: rgba(255,255,255,0.06);
      --purple-900: #2b163b; /* viola scuro */
      --green-500: #00ff9c; /* verde elettrico */
      --silver-300: #c9ccd1;
      --matte-black: #0f1111;
      --muted: #aab0b8;
      --radius-lg: 16px;
      --radius-md: 10px;
      --max-width: 1200px;
      --font-sans: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      --h1: 2.25rem;
      --ease-1: cubic-bezier(.2,.9,.2,1);
      --duration-fast: 180ms;
      --duration-base: 320ms;
      --section-gap: 200px; /* large vertical spacing requested */
    }

    /* Global reset & base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font-sans);
      color:#e9eef6;
      background:linear-gradient(180deg,var(--bg), #121212 140%);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block;border-radius:8px}

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

    /* Skip link for accessibility */
    .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#111;color:white;border-radius:6px;z-index:9999}

    /* Sticky Header */
    header.site-header{
      position:sticky;top:0;z-index:999;
      padding:.9rem 1rem;
      display:flex;align-items:center;justify-content:center;
      backdrop-filter: blur(8px) saturate(115%);
      transition:background .28s ease, padding .28s ease, box-shadow .28s ease;
      background:transparent;
    }
    header.scrolled{background:rgba(20,20,20,0.6);box-shadow:0 6px 18px rgba(0,0,0,0.6);padding:.55rem 1rem}
    .nav-inner{max-width:var(--max-width);width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
    .brand{display:flex;align-items:center;gap:.6rem;color:white;font-weight:800}
    .logo-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--green-500),#7b5cff);display:grid;place-items:center;font-weight:900;color:var(--matte-black)}

    nav.main-nav{display:flex;gap:1rem;align-items:center}
    nav.main-nav a{padding:.5rem .65rem;border-radius:8px;color:rgba(255,255,255,0.88);font-weight:600;transition:transform .18s var(--ease-1),background .18s var(--ease-1)}
    nav.main-nav a:hover, nav.main-nav a:focus{transform:translateY(-4px);background:rgba(255,255,255,0.03)}

    .mobile-toggle{display:none}

    /* Buttons — enhanced hover glow */
    .btn{
      display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:12px;background:linear-gradient(90deg,var(--green-500),#7b5cff);
      color:var(--matte-black);font-weight:700;border:0;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,0.6);transition:transform var(--duration-fast) var(--ease-1),box-shadow .28s var(--ease-1),filter .28s;
      will-change:transform,box-shadow,filter;
    }
    .btn:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 48px rgba(0,255,156,0.08);filter:brightness(1.06)}
    .btn:active{transform:translateY(-2px)}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--silver-300);backdrop-filter:blur(6px)}
    .btn.ghost:hover{box-shadow:0 18px 40px rgba(123,92,255,0.06);transform:translateY(-6px)}

    /* Section spacing: increased vertical rhythm */
    section {padding-block: calc(var(--section-gap) / 2); } /* top and bottom total equals section-gap */
    main > section:first-of-type { padding-top: 80px; } /* adjust for hero proximity */

    /* Hero welcome */
    .hero-welcome{
      position:relative;
      min-height:82vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:white;
      overflow:hidden;
      isolation:isolate;
      padding:4rem 1rem;
      margin-bottom:40px; /* visual separation from following section */
    }
    .animated-gradient{
      position:absolute;inset:0;
      background:linear-gradient(120deg, rgba(43,22,59,0.85) 0%, rgba(0,255,156,0.04) 25%, rgba(18,18,18,0.65) 50%, rgba(75,35,150,0.15) 75%, rgba(15,15,15,0.92) 100%);
      z-index:0;animation:flow 14s linear infinite;filter:blur(36px) saturate(115%);
    }
    @keyframes flow{0%{transform:translate3d(-6%,-2%,0) scale(1)}50%{transform:translate3d(6%,2%,0) scale(1.03)}100%{transform:translate3d(-6%,-2%,0) scale(1)}}

    .hero-content{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:3rem 1rem}
    .eyebrow{display:inline-block;padding:.25rem .6rem;background:rgba(255,255,255,0.04);border-radius:999px;font-weight:600;font-size:.85rem;color:var(--silver-300)}
    h1{font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.02;margin:.6rem 0;font-weight:800;letter-spacing:-0.02em}
    p.lead{font-size:1.05rem;color:rgba(233,238,246,0.95);margin-bottom:1.25rem}

    /* Card styles (lighter for contrast) */
    .card{background:var(--card-strong);padding:1.2rem;border-radius:var(--radius-md);box-shadow:0 8px 30px rgba(0,0,0,0.65);transition:transform .25s var(--ease-1),box-shadow .25s var(--ease-1);color:#eef2f7}
    .card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,0.7)}

    /* Grids */
    .grid{display:grid;gap:1rem}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}

    /* Info box */
    .infobox{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;border-radius:12px;background:var(--card);border-left:4px solid var(--green-500)}
    .infobox h3{margin:0;font-size:1.05rem}

    /* Gallery mosaic */
    .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:12px}
    .gallery .item{position:relative;overflow:hidden;border-radius:10px}
    .item .meta{position:absolute;left:0;bottom:0;padding:.6rem .75rem;background:linear-gradient(0deg, rgba(0,0,0,0.6), transparent);color:white;font-weight:600;font-size:.95rem}
    .span-2{grid-column:span 2}
    .span-3{grid-column:span 3}

    @media (max-width:980px){
      .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
      .grid.cols-3{grid-template-columns:repeat(2,1fr)}
      .grid.cols-2{grid-template-columns:1fr}
      .nav-inner{gap:.5rem}
      .mobile-toggle{display:inline-flex}
      nav.main-nav{display:none}
    }
    @media (max-width:520px){
      .hero-content{padding:2rem 0}
      h1{font-size:1.8rem}
      .gallery{grid-template-columns:1fr}
    }

    /* Hero marketing & progress bars */
    .hero-marketing{display:flex;align-items:center;gap:2rem;padding:2rem;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
    .score{width:120px;height:120px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));font-weight:800;font-size:1.6rem;color:var(--green-500)}
    .progress{width:100%;height:12px;background:rgba(255,255,255,0.04);border-radius:999px;overflow:hidden}
    .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),#7b5cff);width:75%;transition:width .8s var(--ease-1)}

    /* extra progress bars added */
    .progress-list{display:grid;gap:.8rem;margin-top:1rem}
    .progress-row{display:flex;align-items:center;gap:1rem}
    .progress-label{min-width:160px;font-weight:600;color:#f2f6fb}
    .progress-value{width:60px;text-align:right;color:var(--muted);font-size:.95rem}

    /* Testimonials */
    .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    .testimonial{padding:1.2rem;border-radius:12px;background:var(--card);display:flex;gap:1rem;align-items:flex-start}
    .avatar{width:72px;height:72px;border-radius:999px;overflow:hidden;flex-shrink:0;display:inline-grid;place-items:center;background:var(--silver-300);font-weight:700;color:var(--matte-black;)}
    .testimonial .meta{color:var(--muted);font-size:.95rem}

    /* Blog post snippet */
    .post{display:flex;gap:1rem;align-items:flex-start}
    .post .thumb{width:160px;height:110px;border-radius:8px;overflow:hidden;flex-shrink:0}
    .post h4{margin:.2rem 0 0;font-size:1.05rem}

    /* Newsletter */
    .newsletter{display:flex;gap:.8rem;align-items:center}
    .newsletter input[type="email"]{flex:1;padding:.7rem 1rem;border-radius:10px;border:0;background:rgba(255,255,255,0.03);color:white;outline:none}
    .newsletter button{padding:.7rem .9rem;border-radius:10px;border:0;background:var(--green-500);font-weight:700}

    /* FAQ */
    .faq-list{max-width:var(--max-width);margin:0 auto}
    .faq-item{background:var(--card);border-radius:12px;padding:1rem;margin-bottom:.8rem;cursor:pointer;overflow:hidden;transition:transform .22s var(--ease-1),box-shadow .22s}
    .faq-item:hover{transform:translateY(-6px)}
    .faq-q{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#eef2f7}
    .faq-a{margin-top:.6rem;color:var(--muted);line-height:1.6;display:none}

    /* Footer */
    footer{padding:3rem 1rem;background:linear-gradient(180deg, rgba(16,16,16,0.6), rgba(10,10,10,0.75));color:rgba(255,255,255,0.8)}
    .socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;margin-right:.5rem;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--silver-300);transition:transform .2s,var(--ease-1),box-shadow .2s}
    .socials a:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,255,156,0.06);border-color:rgba(0,255,156,0.18);color:var(--green-500)}
    .socials a.ghostviolet:hover{box-shadow:0 12px 30px rgba(123,92,255,0.06);color:#7b5cff;border-color:rgba(123,92,255,0.18)}

    /* Utilities */
    .muted{color:var(--muted)}
    .center{text-align:center}
    .uppercase{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
    button:focus, a:focus{outline:3px solid rgba(0,255,156,0.12);outline-offset:3px}
    .sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){ .animated-gradient, .gradient-shape, .btn, .gallery .item {transition:none!important;animation:none!important} }
  </style>
</head>
<body>
  <a class="skip-link" href="#main">Vai al contenuto</a>

  <!-- HEADER -->
  <header class="site-header" id="site-header" role="banner" aria-label="Main header">
    <div class="nav-inner">
      <div class="brand" aria-hidden="false">
        <div class="logo-mark" aria-hidden="true">DC</div>
        <div>
          <div style="font-weight:800">Studio Creativo</div>
          <div style="font-size:.8rem;color:var(--silver-300);margin-top:-4px">Design & Comunicazione</div>
        </div>
      </div>

      <nav class="main-nav" role="navigation" aria-label="Main navigation">
        <a href="#progetti">Progetti</a>
        <a href="#servizi">Servizi</a>
        <a href="#blog">Blog</a>
        <a href="#contatti">Contatti</a>
      </nav>

      <div style="display:flex;align-items:center;gap:.5rem">
        <button class="btn ghost" aria-label="Contattaci">Consulenza da 30min</button>
        <button class="mobile-toggle" aria-expanded="false" aria-controls="mobile-menu">☰</button>
      </div>
    </div>
  </header>

  <!-- HERO WELCOME -->
  <section class="hero-welcome" role="region" aria-labelledby="welcome-title">
    <div class="animated-gradient" aria-hidden="true"></div>
    <div class="hero-content wrap" id="main">
      <span class="eyebrow">Studio — Branding & UX</span>
      <h1 id="welcome-title">Progettiamo esperienze digitali con impatto — <span style="color:var(--green-500)">chiaro</span>, <span style="color:#7b5cff">strategico</span>, creativo.</h1>
      <p class="lead">Un approccio integrato tra design e comunicazione digitale: brand system, UI/UX, produzione di contenuti e strategie di marketing per realtà ambiziose.</p>

      <div class="cta-row" role="group" aria-label="Call to action">
        <button class="btn" onclick="location.href='#contatti'">Lavora con noi</button>
        <button class="btn ghost" onclick="location.href='#progetti'">Scopri i progetti</button>
        <div class="rating" aria-hidden="true">
          <span class="stars">★ ★ ★ ★ ☆</span>
          <small style="opacity:.9">4.6 (valutazioni clienti)</small>
        </div>
      </div>
    </div>
  </section>

  <main class="wrap" role="main" aria-labelledby="main-heading">

    <!-- SERVICES (unchanged but more contrast) -->
    <section id="servizi" aria-label="Servizi principali">
      <div class="grid cols-3" style="align-items:start;gap:1.2rem">
        <div class="card">
          <h3>Brand System & Identity</h3>
          <p class="muted">Guide di stile, design token e librerie di componenti per una comunicazione coerente su tutti i touchpoint.</p>
        </div>
        <div class="card">
          <h3>UI / UX Design</h3>
          <p class="muted">Interfacce chiare, accessibili e ottimizzate per conversione e engagement.</p>
        </div>
        <div class="card">
          <h3>Content & Strategy</h3>
          <p class="muted">Contenuti per raccontare il valore del brand, dalla creatività al performance marketing.</p>
        </div>
      </div>
    </section>

    <!-- Info Box -->
    <section aria-label="Informazioni">
      <div class="infobox card" role="note" aria-label="Informazioni sul servizio">
        <div style="min-width:54px;">
          <!-- SVG icon -->
          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="#00FF9C"/><path d="M9 11l2 2 4-4" stroke="#081018" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div>
          <h3>Progettazione su misura</h3>
          <p class="muted">Progetti su misura con design system ben documentati, accessibili e scalabili — adatti a startup e realtà enterprise.</p>
        </div>
      </div>
    </section>

    <!-- HERO MARKETING (con progress e progress aggiuntive) -->
    <section aria-label="Strategia marketing">
      <div class="hero-marketing">
        <div style="flex:1">
          <h2 style="margin:0">Strategia digitale che converte</h2>
          <p class="muted">Dalla ricerca alle metriche, ottimizziamo funnel e UX per migliorare l'engagement e la fiducia degli utenti.</p>

          <!-- principale -->
          <div style="margin-top:1rem">
            <div class="progress" aria-hidden="true" style="margin-bottom:.6rem"><i style="width:84%"></i></div>
            <small class="muted">Soddisfazione clienti: <strong>84%</strong></small>
          </div>

          <!-- tre nuove barre di progresso orizzontali -->
          <div class="progress-list" aria-hidden="true" style="margin-top:1.1rem">
            <div class="progress-row">
              <div class="progress-label">Brand Strategy</div>
              <div style="flex:1"><div class="progress" aria-hidden="true"><i style="width:92%"></i></div></div>
              <div class="progress-value">92%</div>
            </div>
            <div class="progress-row">
              <div class="progress-label">Web Design</div>
              <div style="flex:1"><div class="progress" aria-hidden="true"><i style="width:78%"></i></div></div>
              <div class="progress-value">78%</div>
            </div>
            <div class="progress-row">
              <div class="progress-label">UX / UI</div>
              <div style="flex:1"><div class="progress" aria-hidden="true"><i style="width:86%"></i></div></div>
              <div class="progress-value">86%</div>
            </div>
          </div>

        </div>

        <div style="width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center">
          <div class="score" role="img" aria-label="Punteggio 8.4">8.4</div>
          <small class="muted" style="margin-top:.6rem">Punteggio medio progetti (2023-2025)</small>
        </div>
      </div>
    </section>

    <!-- GALLERY -->
    <section id="progetti" aria-label="Progetti selezionati">
      <h2 class="center">Progetti selezionati</h2>
      <p class="center muted">Immagini ottimizzate (locale) — tema: design, creatività e ambiente professionale</p>

      <!-- LOCAL images: salva i file in /img/ con i nomi suggeriti sotto. -->
      <!-- Suggerimenti:
           /img/hero_workspace.jpg  (unsplash photo-1498050108023-c5249f4df085)
           /img/wireframes.jpg      (unsplash photo-150922... etc)
           /img/illustration.jpg    (unsplash photo-1522202176988-66273c2fd55f)
           /img/office_plants.jpg   (unsplash photo-1519389950473-47ba0277781c)
           /img/dashboard.jpg       (unsplash photo-1496307042754-b4aa456c4a2d)
      -->
      <div class="gallery" aria-label="Galleria progetti">
        <figure class="item span-3" style="grid-row: span 2;">
          <img loading="lazy" alt="Workspace design team al lavoro" src="/img/hero_workspace.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1498050108023-c5249f4df085 -->
          <figcaption class="meta">Brand strategy — Studio</figcaption>
        </figure>

        <figure class="item">
          <img loading="lazy" alt="Sketch e wireframe UI" src="/img/wireframes.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1509228627159-645d6f71d5e9 -->
          <figcaption class="meta">UI / Wireframes</figcaption>
        </figure>

        <figure class="item">
          <img loading="lazy" alt="Designer che lavora su illustrazione digitale" src="/img/illustration.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1522202176988-66273c2fd55f -->
          <figcaption class="meta">Illustrazione & Motion</figcaption>
        </figure>

        <figure class="item">
          <img loading="lazy" alt="Fotografia ambiente ufficio moderno e piante" src="/img/office_plants.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1519389950473-47ba0277781c -->
          <figcaption class="meta">Ambiente creativo</figcaption>
        </figure>

        <figure class="item span-2">
          <img loading="lazy" alt="Display con UI colorata e tabelle" src="/img/dashboard.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d -->
          <figcaption class="meta">Dashboard & Data Viz</figcaption>
        </figure>
      </div>
    </section>

    <!-- BLOG -->
    <section id="blog" aria-label="Blog">
      <h2>Dal nostro blog</h2>
      <article class="card post" aria-labelledby="post-title-1">
        <div class="thumb" style="overflow:hidden;border-radius:8px">
          <img loading="lazy" alt="Immagine blog: processo creativo" src="/img/blog_thumb.jpg">
          <!-- Unsplash original: https://images.unsplash.com/photo-1503676260728-1c00da094a0b -->
        </div>
        <div>
          <a href="https://www.tuositoexample.com/blog/progettare-comunicazione-digitale" id="post-title-1"><h4>Come progettare una comunicazione digitale efficace</h4></a>
          <p class="muted" style="margin:.3rem 0 .6rem">Strategie, approccio e casi pratici per un design che parla al pubblico giusto.</p>
          <div class="muted" style="font-size:.9rem">10 gennaio 2025 • 6 min di lettura</div>
        </div>
      </article>
    </section>

    <!-- TESTIMONIALS (più lunghe, avatar circolari, contrast migliorato) -->
    <section aria-label="Testimonianze">
      <h2 class="center">Testimonianze</h2>
      <div class="testimonials" role="list" aria-label="Testimonianze clienti">
        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true" style="overflow:hidden;border-radius:999px">
            <img alt="Alessandra R ritratto" src="/img/testimonial_alessandra.jpg" loading="lazy" style="width:100%;height:100%;object-fit:cover">
            <!-- Unsplash: scegli un'immagine ritratto appropriata -->
          </div>
          <div>
            <strong>Alessandra Rossi — CEO, StartLab</strong>
            <p class="meta">"Abbiamo rinnovato completamente la nostra identità visiva: dalla strategia al roll-out. Il team ha curato ogni dettaglio, consegnando asset scalabili e una guida di design che ora è il nostro riferimento interno. Gli stakeholder hanno apprezzato il rigore metodologico e la creatività."</p>
          </div>
        </div>

        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true" style="overflow:hidden;border-radius:999px">
            <img alt="Marco R ritratto" src="/img/testimonial_marco.jpg" loading="lazy" style="width:100%;height:100%;object-fit:cover">
          </div>
          <div>
            <strong>Marco Rinaldi — Head of Product, FinCo</strong>
            <p class="meta">"La loro capacità di tradurre insight in design operativo è impressionante. In sei settimane abbiamo testato il nuovo flusso utente che ha portato a un aumento misurabile del tasso di conversione. Comunicazione chiara e tempi rispettati."</p>
          </div>
        </div>

        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true" style="overflow:hidden;border-radius:999px">
            <img alt="Laura V ritratto" src="/img/testimonial_laura.jpg" loading="lazy" style="width:100%;height:100%;object-fit:cover">
          </div>
          <div>
            <strong>Laura Verdi — Marketing Director, GreenCo</strong>
            <p class="meta">"Collaborazione eccellente: attività di discovery approfondita, workshop partecipativi e deliverable ben documentati. Hanno capito il nostro posizionamento e trasformato il brief in soluzioni concrete."</p>
          </div>
        </div>
      </div>
    </section>

    <!-- HERO SUCCESSI & TRAGUARDI (nuova sezione forte, prima delle FAQ) -->
    <section id="successi" aria-label="Successi e traguardi">
      <div class="card" style="display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:center">
        <div>
          <h2 style="margin:0 0 .4rem">Successi & Traguardi</h2>
          <p class="muted">I numeri parlano: progetti consegnati, clienti soddisfatti, premi e riconoscimenti. Lavoriamo per risultati misurabili e duraturi.</p>

          <div style="display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap">
            <div style="min-width:160px;">
              <div style="font-size:2.2rem;font-weight:800;color:var(--green-500)" class="counter" data-target="128">0</div>
              <div class="muted">Progetti completati</div>
            </div>
            <div style="min-width:160px;">
              <div style="font-size:2.2rem;font-weight:800;color:#7b5cff" class="counter" data-target="54">0</div>
              <div class="muted">Clienti soddisfatti</div>
            </div>
            <div style="min-width:160px;">
              <div style="font-size:2.2rem;font-weight:800;color:#ffd166" class="counter" data-target="12">0</div>
              <div class="muted">Premi & riconoscimenti</div>
            </div>
          </div>

          <ul style="margin-top:1rem;color:var(--muted);line-height:1.6">
            <li>Premi internazionali per UX e Brand Design (2022–2024)</li>
            <li>Top 10 agenzie creative per innovazione (2023)</li>
            <li>Collaborazioni con aziende tech, fintech e retail di alto profilo</li>
          </ul>
        </div>

        <div style="display:flex;flex-direction:column;align-items:center;gap:.8rem">
          <div style="width:100%;height:220px;border-radius:12px;overflow:hidden">
            <img alt="Riconoscimenti e awards" src="/img/awards.jpg" loading="lazy" style="width:100%;height:100%;object-fit:cover" />
            <!-- Unsplash fallback suggested -->
          </div>
          <a class="btn" href="#contatti">Richiedi case study</a>
          <a class="btn ghost" href="/portfolio.pdf">Scarica portfolio</a>
        </div>
      </div>
    </section>

    <!-- NEWSLETTER -->
    <section aria-label="Newsletter">
      <div class="card" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
        <div style="flex:1">
          <h3>Iscriviti alla newsletter</h3>
          <p class="muted">Ricevi risorse per design, case study e aggiornamenti esclusivi.</p>
        </div>
        <form class="newsletter" onsubmit="event.preventDefault();subscribeDemo()" aria-label="Modulo newsletter">
          <label class="sr-only" for="email">Email</label>
          <input id="email" type="email" placeholder="il tuo indirizzo email" required aria-required="true" />
          <button type="submit">Iscriviti</button>
        </form>
      </div>
    </section>

    <!-- FAQ (ultima sezione informativa) -->
    <section id="faq" aria-label="Domande frequenti">
      <h2 class="center">Domande frequenti</h2>
      <div class="faq-list" role="list">
        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Quali servizi di design offrite? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Offriamo brand system, UI/UX design, prototipazione, design token, motion design e servizi di content strategy. Personalizziamo gli scope in base alle esigenze del cliente, includendo ricerca utenti e test di usabilità.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">In cosa vi differenziate da un'agenzia tradizionale? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Abbiniamo rigore metodologico e creatività: produciamo sistemi riutilizzabili (design system) e misuriamo l'impatto con KPI reali, per garantire coerenza e scalabilità nel tempo.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Lavorate anche con clienti internazionali? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Sì — abbiamo esperienza con clienti europei e globali, supportando il roll-out multilingua e l'implementazione su CMS e piattaforme internazionali.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Quanto dura in media un progetto completo? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Dipende dalla complessità: un rebrand leggero richiede 6–8 settimane; design system e implementazione su siti complessi possono richiedere 3–6 mesi. Forniamo roadmap e milestone chiare.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Offrite anche servizi di brand identity? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Sì — sviluppiamo naming, architettura visiva, linee guida, palette, tipografia, pattern UI e asset per comunicazione online e offline.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Posso richiedere una consulenza personalizzata? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Assolutamente: offriamo sessioni di discovery e workshop; contattaci via email o usa il form per richiedere una consulenza e un preventivo iniziale.</div>
        </div>

        <div class="faq-item" role="listitem" tabindex="0">
          <div class="faq-q">Quali tecnologie e strumenti utilizzate? <span aria-hidden="true">+</span></div>
          <div class="faq-a">Utilizziamo Figma, Adobe CC, strumenti di prototipazione, sistemi di design token (Style Dictionary), e tecnologie front-end moderne (React, Next.js, HTML/CSS ottimizzato) per implementazioni scalabili.</div>
        </div>
      </div>
    </section>

    <!-- CONTACT / CTA -->
    <section id="contatti" aria-label="Contatti">
      <div class="card" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap">
        <div>
          <h3>Pronto a iniziare?</h3>
          <p class="muted">Parliamo del tuo progetto e costruiamo insieme il design system perfetto.</p>
        </div>
        <div style="display:flex;gap:.6rem">
          <a class="btn" href="mailto:hello@tuositoexample.com">Scrivici</a>
          <a class="btn ghost" href="/brief.pdf">Brief</a>
        </div>
      </div>
    </section>

  </main>

  <!-- FOOTER con icone social eleganti -->
  <footer role="contentinfo" aria-label="Footer">
    <div class="wrap" style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap">
      <div>
        <strong>Studio Creativo</strong>
        <div class="muted">Via Esempio 12, Milano • P.IVA 123456789</div>
      </div>

      <div class="center">
        <div class="muted">© <span id="year"></span> Studio Creativo — Tutti i diritti riservati</div>
      </div>

      <div style="text-align:right">
        <div class="socials" aria-label="Social links">
          <!-- Use inline SVGs or icon fonts in production; here simple letters with hover glow for demo -->
          <a href="#" aria-label="LinkedIn" title="LinkedIn">
            <!-- LinkedIn SVG -->
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4.98 3.5C4.98 4.88 3.86 6 2.48 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5v13H0zM8 8h4.78v1.82h.07c.67-1.27 2.3-2.62 4.73-2.62 5.06 0 6 3.33 6 7.66V21H18v-6.3c0-1.5-.03-3.44-2.1-3.44-2.1 0-2.42 1.64-2.42 3.34V21H8V8z" fill="currentColor"/></svg>
          </a>
          <a href="#" aria-label="Instagram" title="Instagram" class="ghostviolet">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 6a5 5 0 100 10 5 5 0 000-10zM18.5 6.5a1 1 0 11-2 0 1 1 0 012 0z" fill="currentColor"/></svg>
          </a>
          <a href="#" aria-label="Behance" title="Behance">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 7h7v2H3V7zm0 4h5v2H3v-2zm0 4h6v2H3v-2zM13 11h3.5c1.38 0 2.5 1.12 2.5 2.5S17.88 16 16.5 16H13v-5zM13 5h4.5C19 5 21 6.9 21 9s-2 4-3.5 4H13V5z" fill="currentColor"/></svg>
          </a>
          <a href="#" aria-label="Dribbble" title="Dribbble" class="ghostviolet">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 6.2c-1.2-.3-3.3-.6-5.6-.4.1.1.2.3.4.6 2.1 3.2 3.6 7.2 3.8 10.6 2.1-1.3 3.4-3.6 3.4-6.3 0-1.6-.6-3.1-1.9-4.5z" fill="currentColor"/></svg>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- SCRIPTS -->
  <script>
    // Year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Sticky header + parallax subtle
    const header = document.getElementById('site-header');
    const hero = document.querySelector('.hero-welcome');
    function onScroll(){
      const heroHeight = hero ? hero.offsetHeight : 300;
      if (window.scrollY > (heroHeight - 120)) header.classList.add('scrolled'); else header.classList.remove('scrolled');
    }
    window.addEventListener('scroll', onScroll);
    onScroll();

    // Mobile menu toggle
    document.querySelectorAll('.mobile-toggle').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        const nav = document.querySelector('nav.main-nav');
        const open = getComputedStyle(nav).display === 'none';
        nav.style.display = open ? 'flex' : 'none';
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
    });

    // Subscribe demo
    function subscribeDemo(){
      const email = document.getElementById('email').value;
      if (!email) return alert('Inserisci la tua email');
      alert('Grazie! Ti abbiamo aggiunto alla lista: ' + email);
      document.getElementById('email').value = '';
    }

    // Counters in Successi section (animate once when visible)
    const counters = document.querySelectorAll('.counter');
    if ('IntersectionObserver' in window && counters.length){
      const io = new IntersectionObserver((entries, obs)=>{
        entries.forEach(e=>{
          if (e.isIntersecting){
            const el = e.target;
            const target = +el.getAttribute('data-target') || 0;
            const duration = 1200;
            const start = performance.now();
            const initial = 0;
            function step(now){
              const t = Math.min(1, (now - start) / duration);
              const eased = t*(2-t); // simple ease-out
              el.textContent = Math.floor(initial + (target - initial) * eased);
              if (t < 1) requestAnimationFrame(step);
            }
            requestAnimationFrame(step);
            obs.unobserve(el);
          }
        });
      }, {threshold:0.4});
      counters.forEach(c => io.observe(c));
    } else {
      // fallback: set immediately
      counters.forEach(c => c.textContent = c.getAttribute('data-target'));
    }

    // FAQ accordion behavior (click or keyboard)
    document.querySelectorAll('.faq-item').forEach(item=>{
      const q = item.querySelector('.faq-q');
      const a = item.querySelector('.faq-a');
      // click toggles
      item.addEventListener('click', (e)=>{
        if (e.target.tagName.toLowerCase() === 'a') return;
        const open = a.style.display === 'block';
        // close all siblings
        document.querySelectorAll('.faq-a').forEach(x=> x.style.display = 'none');
        if (!open) a.style.display = 'block'; else a.style.display = 'none';
      });
      // keyboard support
      item.addEventListener('keydown', (ev)=>{
        if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); item.click(); }
        if (ev.key === 'Escape') { item.querySelector('.faq-a').style.display='none'; }
      });
    });

    // Intersection reveal for cards and items (progressive enhancement)
    if ('IntersectionObserver' in window){
      document.querySelectorAll('.card, .item, .testimonial').forEach(el=>{
        el.style.opacity = 0;
        el.style.transform = 'translateY(12px)';
      });
      const io2 = new IntersectionObserver((entries)=>{
        entries.forEach(entry=>{
          if (entry.isIntersecting){ entry.target.style.transition = 'opacity .9s cubic-bezier(.2,.9,.2,1), transform .6s'; entry.target.style.opacity=1; entry.target.style.transform='translateY(0)'; io2.unobserve(entry.target); }
        });
      }, {threshold:0.08});
      document.querySelectorAll('.card, .item, .testimonial').forEach(el=> io2.observe(el));
    }

    // Respect prefers-reduced-motion
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches){
      document.querySelectorAll('.animated-gradient, .btn, .gallery .item').forEach(e=> e.style.animation = 'none');
    }

  </script>

  <!-- FAQ structured data for SEO -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Quali servizi di design offrite?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Offriamo brand system, UI/UX design, prototipazione, design token, motion design e content strategy. Personalizziamo gli scope in base alle esigenze del cliente."
        }
      },
      {
        "@type":"Question",
        "name":"In cosa vi differenziate da un'agenzia tradizionale?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Abbiniamo rigore metodologico e creatività: produciamo sistemi riutilizzabili (design system) e misuriamo l'impatto con KPI reali."
        }
      },
      {
        "@type":"Question",
        "name":"Lavorate anche con clienti internazionali?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Sì — supportiamo roll-out multilingua e implementazioni su CMS e piattaforme internazionali."
        }
      },
      {
        "@type":"Question",
        "name":"Quanto dura in media un progetto completo?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Dipende dalla complessità: da 6–8 settimane per rebrand leggeri fino a 3–6 mesi per design system e implementazioni complesse."
        }
      },
      {
        "@type":"Question",
        "name":"Offrite anche servizi di brand identity?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Sì — sviluppiamo naming, architettura visiva, palette, tipografia, pattern UI e asset per comunicazione online e offline."
        }
      },
      {
        "@type":"Question",
        "name":"Posso richiedere una consulenza personalizzata?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Assolutamente: offriamo discovery e workshop; contattaci via email o usa il form per richiedere una consulenza e un preventivo."
        }
      },
      {
        "@type":"Question",
        "name":"Quali tecnologie e strumenti utilizzate?",
        "acceptedAnswer":{
          "@type":"Answer",
          "text":"Utilizziamo Figma, Adobe CC, strumenti di prototipazione, sistemi di design token e tecnologie front-end moderne come React/Next.js."
        }
      }
    ]
  }
  </script>

  <!-- Developer notes:
       - Per usare le immagini locali: scarica dagli Unsplash i file suggeriti in /img/
       - Ottimizza ulteriormente generando WebP/AVIF e servendoli via <picture> con fallback.
       - Implementa cache, HTTP/2, e CDN per migliori performance.
  -->
</body>
</html>