/* ============================================================
     Design system Gruppo Excellence — estratto da gruppoexcellence.com
     ============================================================ */
  :root {
    --exdark:      #00141e;                 /* bg-exdark */
    --exdark-60:   #00141e99;               /* bg-exdark/60 */
    --exdark-80:   #00141ecc;               /* bg-exdark/80 */
    --exgreen:     #39b54a;                 /* bg-exgreen */
    --green-600:   #16a34a;                 /* hover:bg-green-600 */
    --exblue:      #005580;                 /* blu logo Excellence */
    --gray-200:    #e5e7eb;                 /* header bg-gray-200 */
    --gray-500:    #6b7280;
    --gray-600:    #4b5563;
    --gray-900:    #111827;
    --white:       #ffffff;
    --container:   1280px;                  /* ex-container */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    color: var(--gray-900);
    background: var(--white);
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  .ex-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

  h1, h2, h3 { line-height: 1.25; font-weight: 700; }

  /* ---------- Bottone Excellence (bg-exgreen … rounded) ---------- */
  .btn-ex {
    display: inline-block;
    background: var(--exgreen);
    color: var(--white);
    font-weight: 600;                 /* font-semibold */
    padding: 0.75rem 1.5rem;          /* px-6 py-3 */
    border-radius: 0.25rem;           /* rounded */
    transition: background-color .2s; /* transition-colors duration-200 */
    border: none; cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
  }
  .btn-ex:hover { background: var(--green-600); }
  .btn-ex-outline {
    display: inline-block;
    background: transparent;
    color: var(--white);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--white);
    transition: background-color .2s, color .2s;
    font-size: 1rem;
  }
  .btn-ex-outline:hover { background: var(--white); color: var(--exdark); }

  /* ---------- Header (fixed, shadow-md, bg-gray-200) ---------- */
  header {
    position: fixed; top: 0; z-index: 50; width: 100%;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    background: var(--gray-200);
  }
  header nav {
    display: flex; justify-content: space-between; align-items: center;
    max-width: var(--container); margin: 0 auto; padding: 0.9rem 1rem;
  }
  .logo-wm { width: 15rem; height: auto; transition: all .3s; }  /* w-60 */
  .nav-links { display: flex; align-items: center; gap: 2rem; }
  .nav-links a {
    font-size: 0.95rem; font-weight: 600; color: var(--gray-900);
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--exblue); }
  .nav-lang { font-size: 0.875rem; color: var(--gray-500); font-weight: 600; }
  .nav-lang b { color: var(--gray-900); }
  .menu-toggle { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--gray-900); }

  /* ---------- Hero (immagine + overlay exdark, h1 text-6xl/7xl) ---------- */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    background: url('hero.jpg') center/cover no-repeat, var(--exdark);
  }
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background: var(--exdark-60);
  }
  .hero .ex-container { position: relative; z-index: 10; padding-top: 7rem; padding-bottom: 4rem; }
  .hero-kicker {
    color: var(--exgreen); font-weight: 700; font-size: 1rem;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.25rem;
  }
  .hero h1 {
    font-size: 3.75rem;               /* text-6xl */
    line-height: 1.25;                /* leading-tight */
    color: var(--white);
    max-width: 56rem;
    margin-bottom: 1.5rem;
  }
  .hero p {
    color: var(--white); font-size: 1.125rem;  /* text-lg */
    max-width: 42rem; margin-bottom: 2.25rem; opacity: .92;
  }
  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

  /* ---------- Sezioni ---------- */
  section { padding: 5rem 0; }
  .kicker {
    color: var(--exgreen); font-weight: 700; font-size: 0.875rem;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 0.75rem;
  }
  .section-title { font-size: 2.25rem; color: var(--gray-900); margin-bottom: 1.25rem; }
  .section-lead  { font-size: 1.125rem; color: var(--gray-600); max-width: 46rem; }

  /* ---------- Intro a due colonne ---------- */
  .intro-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  }
  .intro-text p { color: var(--gray-600); font-size: 1.125rem; margin-bottom: 1.25rem; }
  .badge-julia {
    display: inline-block; margin-bottom: 1.5rem;
    font-size: 0.875rem; font-weight: 600; color: var(--exblue);
    background: var(--gray-200); padding: 0.4rem 1rem; border-radius: 0.25rem;
  }
  .intro-visual {
    border-radius: 0.375rem;          /* rounded-md */
    overflow: hidden;
    background: var(--exdark);
    min-height: 550px;                /* lg:min-h-[550px] */
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: 2.5rem; gap: 1rem;
  }
  .bubble {
    max-width: 82%; padding: 0.9rem 1.15rem; border-radius: 0.375rem;
    font-size: 0.9rem; line-height: 1.55; color: var(--white);
    opacity: 0; transform: translateY(12px);
  }
  .bubble .who {
    display: block; font-size: 0.65rem; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem; opacity: .65;
  }
  .bubble.client { align-self: flex-start; background: var(--exdark-80); border: 1px solid rgb(255 255 255 / .15); }
  .bubble.banker { align-self: flex-end; background: var(--exgreen); }
  .in-view .bubble { animation: rise .55s ease forwards; }
  .in-view .bubble:nth-child(1){ animation-delay: .1s; }
  .in-view .bubble:nth-child(2){ animation-delay: .5s; }
  .in-view .bubble:nth-child(3){ animation-delay: .9s; }
  .in-view .bubble:nth-child(4){ animation-delay: 1.3s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  /* ---------- Card (rounded-md, hover:scale-105) ---------- */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
  .card {
    border-radius: 0.375rem; overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 2rem;
    transition: transform .3s;
  }
  .card:hover { transform: scale(1.05); }
  .card .ico {
    height: 4rem; width: 4rem; border-radius: 9999px;   /* h-16 w-16 rounded-full */
    background: var(--exgreen); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1.5rem;
  }
  .card h3 { font-size: 1.25rem; color: var(--gray-900); margin-bottom: 0.6rem; }
  .card p { color: var(--gray-600); font-size: 1rem; }

  /* ---------- Come funziona (bg-exdark) ---------- */
  .how { background: var(--exdark); color: var(--white); }
  .how .section-title { color: var(--white); }
  .how .section-lead { color: rgb(255 255 255 / .75); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
  .step { border-top: 2px solid var(--exgreen); padding-top: 1.5rem; }
  .step .n { color: var(--exgreen); font-weight: 800; font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 0.9rem; }
  .step h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--white); }
  .step p { font-size: 0.95rem; color: rgb(255 255 255 / .75); }

  /* ---------- Benefici ---------- */
  .ben-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .ben-list { list-style: none; margin-top: 2rem; }
  .ben-list li { display: flex; gap: 1.1rem; padding: 1.25rem 0; border-top: 1px solid var(--gray-200); }
  .ben-list .mk {
    flex: none; height: 2rem; width: 2rem; border-radius: 9999px;
    background: var(--exgreen); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700;
    margin-top: 0.15rem;
  }
  .ben-list h3 { font-size: 1.1rem; color: var(--gray-900); margin-bottom: 0.25rem; }
  .ben-list p { color: var(--gray-600); font-size: 0.95rem; }
  .ben-visual {
    background: var(--exdark); border-radius: 0.375rem;
    color: var(--white); padding: 3rem 2.5rem;
  }
  .ben-visual .cap { font-size: 1rem; color: rgb(255 255 255 / .8); margin: 0.75rem 0 2.25rem; }
  .ben-visual .row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 1rem 0; border-top: 1px solid rgb(255 255 255 / .15); font-size: 0.95rem;
  }
  .ben-visual .row span:last-child { color: var(--exgreen); font-weight: 700; }

  /* ---------- Tecnologia ---------- */
  .tech { background: #f3f4f6; }
  .tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
  .tech-box { background: var(--white); border-radius: 0.375rem; padding: 2.5rem; border: 1px solid var(--gray-200); }
  .tech-box .tag { color: var(--exgreen); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; }
  .tech-box h3 { font-size: 1.5rem; color: var(--gray-900); margin: 0.9rem 0 0.75rem; }
  .tech-box p { color: var(--gray-600); font-size: 1rem; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
  .chip {
    font-size: 0.8rem; font-weight: 600; color: var(--exblue);
    background: var(--gray-200); padding: 0.35rem 0.9rem; border-radius: 0.25rem;
  }

  /* ---------- CTA finale (exdark overlay su immagine) ---------- */
  .cta {
    position: relative; text-align: center; color: var(--white);
    background: url('hero.jpg') center/cover no-repeat, var(--exdark);
    padding: 7rem 0;
  }
  .cta::before { content: ''; position: absolute; inset: 0; background: var(--exdark-80); }
  .cta .ex-container { position: relative; z-index: 10; }
  .cta h2 { font-size: 2.5rem; margin-bottom: 1.25rem; max-width: 52rem; margin-inline: auto; }
  .cta p { font-size: 1.125rem; opacity: .9; max-width: 38rem; margin: 0 auto 2.25rem; }
  .cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

  /* ---------- Footer (bg-exdark, come gruppoexcellence.com) ---------- */
  footer { background: var(--exdark); color: var(--white); }
  .foot-inner {
    max-width: var(--container); margin: 0 auto;
    padding: 4rem 1rem;               /* py-16 */
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
    gap: 2.5rem; flex-wrap: wrap;
  }
  .foot-left img { width: 6rem; margin-top: 0.5rem; }   /* w-24 */
  .foot-left .addr { font-size: 0.875rem; margin-top: 1rem; font-weight: 700; line-height: 1.625; }
  .foot-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / .6); margin-bottom: 1rem; }
  .foot-col a { display: block; font-size: 0.9rem; padding: 0.3rem 0; color: rgb(255 255 255 / .85); transition: color .2s; }
  .foot-col a:hover { color: var(--exgreen); }

  /* ---------- Reveal on scroll ---------- */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in-view { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .1s; }
  .reveal.d2 { transition-delay: .2s; }
  .reveal.d3 { transition-delay: .3s; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .hero h1 { font-size: 3rem; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .menu-toggle { display: block; }
    .logo-wm { width: 11rem; }
    .hero h1 { font-size: 2.25rem; }
    .intro-grid, .ben-grid, .tech-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .intro-visual { min-height: 420px; }
    .grid-3 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .section-title { font-size: 1.875rem; }
    .cta h2 { font-size: 2rem; }
    .foot-inner { flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  }