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

  :root {
    --green: #00558B;
    --green-dark: #00558B;
    --green-light: #4a90d9;
    --green-mid: #FD1325;
    --text-dark: #1a1a2e;
    --text-gray: #555;
    --white: #fff;
    --bg-light: #f5f9f6;
  }

  body {
    font-family: 'Nunito', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ─── TOP BAR ─── */ 
  .topbar {
    background: #4a90d9;
    padding: 8px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
  }
  .topbar-left { display: flex; gap: 28px; }
  .topbar-left a { color: #1a1a2e; text-decoration: none; display: flex; align-items: center; gap: 6px; }
  .topbar-right { display: flex; gap: 16px; }
  .topbar-right a { color: #1a1a2e; font-size: 18px; }

  /* ─── NAVBAR ─── */
  nav {
    background: #fff;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .logo {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: var(--green);
    text-decoration: none;
    line-height: 1;
    min-width: 130px;
  }
  .logo span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: #888; text-transform: uppercase; }
  .logo-dot { color: var(--green-dark); }

  .nav-links {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
  }
  .nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
  }
  .nav-links a:hover { background: var(--green-light); }
  .nav-links a i { font-size: 11px; }

  .btn-preventivo {
    background: var(--green-dark);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .btn-preventivo:hover { background: var(--green); }

  .btn-preventivo2 {
    background: var(--green-dark);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .btn-preventivo2:hover { background: var(--green); }

  /* ─── HERO ─── */
  .hero {
    background: #f7fbf8;
    padding: 70px 80px 60px;
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 520px;
  }
  .hero-text { flex: 1; }
  .badge-pill {
    display: inline-block;
    border: 2px solid var(--green-dark);
    color: var(--green-dark);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }
  .hero h1 {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.15;
    color: #1a1a2e;
    margin-bottom: 14px;
  }
  .hero-typed {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
  }
  .hero-typed .check-box {
    background: var(--green);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .hero-typed .typed-word {
    font-size: 40px;
    font-weight: 900;
    color: var(--green);
    letter-spacing: 1px;
  }
  .hero p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.75;
    max-width: 520px;
  }
  .hero p strong { color: #1a1a2e; }


  /* MIO*/
  .word-wrapper {
  display: inline-block;
  overflow: hidden;         /* nasconde la parola durante lo slide */
  vertical-align: bottom;
  perspective: 600px;       /* necessario solo per l'effetto flip */
}

#typed-word {
  display: inline-block;
  will-change: transform, opacity;
  white-space: nowrap;
}

@keyframes wordEnter {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes wordExit {
  from { opacity: 1; transform: scale(1);    }
  to   { opacity: 0; transform: scale(1.05); }
}


  /* Hero illustration */
  .hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .hero-visual svg { width: 100%; max-width: 480px; }

  /* ─── SERVICES ─── */
  .services-section {
    background: var(--bg-light);
    padding: 70px 60px;
    text-align: center;
  }
  .section-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 50px;
    color: #1a1a2e;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 20px;
  }
  .service-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
  .service-card .icon { font-size: 36px; margin-bottom: 6px; }
  .service-card p { font-size: 13px; font-weight: 800; color: #1a1a2e; text-align: center; line-height: 1.3; }
  .service-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    margin-top: 4px;
    transition: transform 0.2s;
  }
  .service-btn:hover { transform: scale(1.1); }

  /* Colors per card */
  .card-blue .icon { color: #4a90d9; }
  .card-blue .service-btn { background: #4a90d9; }
  .card-green .icon { color: #028B47; }
  .card-green .service-btn { background: #028B47; }
  .card-pink .icon { color: #ffb8c6; }
  .card-pink .service-btn { background: #ffb8c6; }
  .card-purple .icon { color: #9471dc; }
  .card-purple .service-btn { background: #9471dc; }
  .card-orange .icon { color: #f5a623; }
  .card-orange .service-btn { background: #f5a623; }
  .card-red .icon { color: #e85e6a; }
  .card-red .service-btn { background: #e85e6a; }
  .card-greenlight .icon { color: #8ED973; }
  .card-greenlight .service-btn { background: #8ED973; }
  .card-orangedark .icon { color: #E97132; }
  .card-orangedark .service-btn { background: #E97132; }
  .card-azzurro .icon { color: #61CBF4; }
  .card-azzurro .service-btn { background: #61CBF4; }
  .card-viola .icon { color: #c774cc; }
  .card-viola .service-btn { background: #c774cc; }
  .card-oro .icon { color: #BFD800; }
  .card-oro .service-btn { background: #BFD800; }
  .card-blu .icon { color: #00558B; }
  .card-blu .service-btn { background: #00558B; }
  .card-vino .icon { color: #924e7d; }
  .card-vino .service-btn { background: #924e7d; }
  .card-oliva .icon { color: #6b8e23; }
  .card-oliva .service-btn { background: #6b8e23; }


  /* ─── SERVICE CARD EXPANDED OVERLAY ─── */
.services-grid-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 20px;
}

.service-expanded {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 0;
  z-index: 10;
  border-radius: 20px;
  padding: 36px 40px 32px;
  color: white;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  animation: expandIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 180px;
}

.service-expanded.is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes expandIn {
  from { opacity: 0; transform: scaleY(0.7); }
  to   { opacity: 1; transform: scaleY(1); }
}

.service-expanded .close-btn {
  position: absolute;
  top: 14px; right: 18px;
  background: rgba(255,255,255,0.25);
  border: none;
  color: white;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.service-expanded .close-btn:hover { background: rgba(255,255,255,0.45); }

.service-expanded .exp-icon { font-size: 38px; margin-bottom: 10px; }
.service-expanded h3 { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.service-expanded p  { font-size: 14px; line-height: 1.65; opacity: 0.92; max-width: 680px; }

/* Colori di sfondo per l'espansione */
.exp-blue   { background: #4a90d9; }
.exp-red    { background: #e85e6a; }
.exp-orange { background: #f5a623; }
.exp-green  { background: #028B47; }
.exp-pink   { background: #ffb8c6; }
.exp-purple { background: #9471dc; }
.exp-greenlight { background: #8ED973; }
.exp-orangedark { background: #E97132; }
.exp-azzurro { background: #61CBF4; }
.exp-viola { background: #c774cc; }
.exp-oro { background: #BFD800; }
.exp-blu { background: #00558B; }
.exp-vino { background: #924e7d; }
.exp-oliva { background: #6b8e23; }

/* Attenua le card quando una è espansa */
.services-grid.is-dimmed .service-card {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.25s;
}

  /* ─── WHY US ─── */
  .why-section {
    background: linear-gradient(135deg, #9EE5F2 0%, #66A4C4 40%, #61CBF4 100%);
    padding: 80px 80px;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    overflow: hidden;
  }
  /* cloud decoration */
  .cloud { position: absolute; top: 20px; right: 60px; opacity: 0.5; }
  .cloud2 { position: absolute; top: 40px; right: 200px; opacity: 0.3; }

  .why-visual { flex: 1; }
  .why-visual svg { width: 100%; max-width: 420px; }
  .why-text { flex: 1; }
  .why-text .badge-pill { border-color: var(--green-dark); color: var(--green-dark); background: rgba(255,255,255,0.5); margin-bottom: 28px; }
  .why-text p { font-size: 16px; line-height: 1.75; margin-bottom: 18px; color: #1a1a2e; }
  .why-text p strong { font-weight: 900; }

  .why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .why-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 15px;
    color: #1a1a2e;
  }
  .why-feature i { color: var(--green-dark); font-size: 18px; }

  /* ─── CTA CONTACT ─── */
  .cta-section {
    padding: 80px 60px;
    text-align: center;
    background: #fff;
  }
  .cta-section h2 { font-size: 34px; font-weight: 900; margin-bottom: 50px; }
  .cta-section h2 span { color: var(--green); }
  .cta-cards {
    display: flex;
    gap: 30px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
  }
  .cta-card {
    flex: 1;
    background: #fff;
    border-radius: 24px;
    padding: 50px 36px 36px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cta-card .cta-img { width: 200px; margin-bottom: 28px; }
  .cta-card h3 { font-size: 24px; font-weight: 900; margin-bottom: 14px; }
  .cta-card p { font-size: 15px; color: var(--text-gray); line-height: 1.7; }

  /* ─── FOOTER ─── */
  /* ─── FOOTER ─── */
.footer-city {
  width: 100%;
  background: #f5f9f6;
  overflow: hidden;
  line-height: 0;
}
.footer-city svg { width: 100%; display: block; }

footer {
  background: var(--green);
  color: white;
  padding: 50px 60px 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 60px;
  margin-bottom: 40px;
  align-items: start;
}

/* Info Utili */
.footer-info h4 { font-size: 16px; font-weight: 900; margin-bottom: 18px; }
.footer-info ul { list-style: none; margin-bottom: 20px; }
.footer-info li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  margin-bottom: 12px;
  opacity: 0.92;
}
.footer-info li i { font-size: 16px; }
.footer-info li a { color: white; text-decoration: none; }
.footer-info li a:hover { text-decoration: underline; }

.footer-social { display: flex; gap: 14px; margin-top: 4px; }
.footer-social a {
  width: 44px; height: 44px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 18px;
  transition: background 0.2s;
}
.footer-social a:hover { background: rgba(255,255,255,0.2); }

/* Form */
.footer-form-wrap h4 {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 18px;
  line-height: 1.5;
}
.footer-form-wrap h4 span {
  font-weight: 400;
  font-size: 14px;
  opacity: 0.85;
}
.footer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-group { display: flex; flex-direction: column; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.footer-form input {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  padding: 10px 14px;
  color: white;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border 0.2s, background 0.2s;
}
.footer-form input::placeholder { color: rgba(255,255,255,0.65); }
.footer-form input:focus {
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.2);
}
.footer-form input.error {
  border-color: #ff6b6b;
  background: rgba(255,107,107,0.12);
}
.btn-invia {
  margin-top: 6px;
  background: white;
  color: var(--green);
  border: none;
  border-radius: 6px;
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s;
}
.btn-invia:hover { opacity: 0.88; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: 0.85;
}
.footer-bottom a { color: white; font-weight: 800; }

.form-message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.form-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

  /* ─── WHATSAPP BUBBLE ─── */
  .whatsapp-bubble {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .whatsapp-label {
    background: white;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    text-align: right;
    line-height: 1.4;
  }
  .whatsapp-label span { display: block; color: var(--green-dark); font-weight: 900; }
  .wa-btn {
    width: 56px; height: 56px;
    background: var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 20px rgba(45,158,78,0.5);
    animation: pulse 2s infinite;
    cursor: pointer;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(45,158,78,0.5); }
    50% { box-shadow: 0 4px 32px rgba(45,158,78,0.9); }
  }

  /* ─── TYPED ANIMATION ─── */
  .typed-cursor { animation: blink 0.8s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* ─── CITY SVG BUILDINGS ─── */
  .city-svg { fill: none; stroke: var(--green); stroke-width: 1.5; }

  /* ─── HAMBURGER MENU ─── */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    background: none;
    border: none;
  }
  .hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 3px;
    transition: all 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ─── RESPONSIVE ─── */

  /* Tablet: 768px – 1024px */
  @media (max-width: 1024px) {
    .topbar { padding: 8px 20px; font-size: 12px; }
    .topbar-left { gap: 14px; }

    nav { padding: 12px 20px; gap: 16px; }
    .nav-links a { font-size: 13px; padding: 6px 10px; }
    .btn-preventivo { padding: 10px 16px; font-size: 13px; }

    .hero { padding: 50px 40px; gap: 30px; }
    .hero h1 { font-size: 38px; }
    .hero-typed .typed-word { font-size: 30px; }

    .services-section { padding: 50px 30px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    .why-section { padding: 60px 40px; gap: 40px; }
    .cta-section { padding: 60px 30px; }
    footer { padding: 40px 30px 24px; }
  .footer-grid { gap: 36px; }
  }

  /* Mobile: ≤ 768px */
  @media (max-width: 768px) {
    /* Topbar: solo icone social, nessun testo extra */
    .topbar { padding: 8px 16px; flex-wrap: wrap; gap: 6px; }
    .topbar-left { gap: 10px; font-size: 12px; }
    .topbar-left a span { display: none; }

    /* Navbar hamburger */
    nav { padding: 12px 16px; flex-wrap: wrap; gap: 0; }
    .logo { min-width: unset; }
    .hamburger { display: flex; }
    .btn-preventivo { display: none; }
    .nav-links {
      display: none;
      width: 100%;
      flex-direction: column;
      gap: 2px;
      padding: 10px 0;
      order: 3;
    }
    .nav-links.open { display: flex; }
    .nav-links a { font-size: 15px; padding: 10px 12px; justify-content: flex-start; }

    /* Hero: stack verticale, nascondi immagine SVG */
    .hero {
      flex-direction: column;
      padding: 40px 20px 30px;
      gap: 24px;
      min-height: unset;
      text-align: center;
    }
    .hero-text { display: flex; flex-direction: column; align-items: center; }
    .hero h1 { font-size: 28px; }
    .hero-typed .typed-word { font-size: 26px; }
    .hero-typed .check-box { width: 32px; height: 32px; font-size: 16px; }
    .hero p { font-size: 14px; max-width: 100%; }
    .hero-visual { display: none; } /* Nasconde Customer relationship management-amico.svg */

    /* Services */
    .services-section { padding: 40px 16px; }
    .section-title { font-size: 24px; margin-bottom: 30px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .service-card { padding: 20px 12px 16px; }
    .service-card .icon { font-size: 28px; }

    /* Why / Chi siamo: stack verticale, nascondi immagine SVG */
    .why-section {
      flex-direction: column;
      padding: 40px 20px;
      gap: 24px;
    }
    .why-visual { display: none; } /* Nasconde Shared workspace-amico.svg */
    .why-text p { font-size: 14px; }
    .why-features { grid-template-columns: 1fr; }

    /* Quotazioni iframe */
    .widget-container { width: 100%; overflow: hidden; }
    .tradingview-widget-container iframe { height: 300px; }

    /* CTA contact */
    .cta-section { padding: 40px 16px; }
    .cta-section h2 { font-size: 24px; margin-bottom: 30px; }
    .cta-cards { flex-direction: column; gap: 20px; }
    .cta-card { padding: 30px 20px 24px; }
    .cta-card h3 { font-size: 20px; }
    .cta-card p { font-size: 14px; }

    /* Footer */
    footer { padding: 36px 20px 20px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }

    /* WhatsApp bubble */
    .whatsapp-bubble { bottom: 16px; right: 16px; }
    .whatsapp-label { display: none; }

    /* Cloud decorations */
    .cloud, .cloud2 { display: none; }

    /* Expanded service panel */
    .service-expanded { padding: 24px 20px 20px; }
    .service-expanded h3 { font-size: 16px; }
    .service-expanded p { font-size: 13px; }
  }

  /* Small mobile: ≤ 400px */
  @media (max-width: 400px) {
    .hero h1 { font-size: 23px; }
    .services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .section-title { font-size: 20px; }
    .cta-section h2 { font-size: 20px; }
  }