/* styles.css — SYNEDO
   Foglio di stile del sito, separato da template.html.
   Va caricato nella STESSA cartella di index.html (o del template.html),
   perché quest'ultimo lo richiama con un percorso relativo:
     <link rel="stylesheet" href="styles.css">

   Nota: le regole Tailwind con @apply/@layer restano invece dentro
   template.html, nel tag <style type="text/tailwindcss">: il compilatore
   Tailwind via CDN le legge solo se sono nel documento HTML, non se sono
   in un file esterno. Questo file contiene tutto il resto del CSS
   "normale" (animazioni, componenti custom come i tab, i chip, le card
   della dashboard, ecc.). */

/* ─── Scroll fluido ─────────────────────────────────────────────
   Abilita lo scroll morbido quando un link interno porta a una
   sezione della pagina, ad esempio la freccia dell'hero verso
   #piattaforma.
   scroll-margin-top evita che la sezione venga nascosta sotto
   un'eventuale navbar fissa.
   ─────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
#piattaforma {
  scroll-margin-top: 80px;
}

/* ─── Raggi degli angoli (rounded): centralizzati qui e ridotti
   rispetto ai valori originali di Tailwind/tema, per un look più
   contenuto. rounded-full resta invariato: non è un "raggio" da
   ridurre, è la forma pillola/cerchio. ─── */
.rounded-lg {
  border-radius: 0.5rem !important;   /* era 0.75rem */
}
.rounded-xl {
  border-radius: 0.625rem !important; /* era 1rem */
}
.rounded-2xl {
  border-radius: 1rem !important;     /* era 1.5rem */
}
.rounded-\[2rem\] {
  border-radius: 1.25rem !important;  /* era 2rem */
}
.rounded-\[2\.5rem\] {
  border-radius: 1.5rem !important;   /* era 2.5rem */
}
.rounded-l-\[4rem\] {
  border-radius: 2rem 0 0 2rem !important; /* era 4rem, angoli sinistri (alto+basso) */
}

/* Tab panel animation */
  .tab-panel {
    display: none;
    animation: fadeSlideIn 0.35s ease forwards;
  }
  .tab-panel.active {
    display: grid;
  }
  @keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Tab button active state */
  .tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: white;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .tab-btn:hover:not(.active) {
    border-color: #064E3B;
    color: #064E3B;
  }
  .tab-btn.active {
    background: #1F2937;
    border-color: #1F2937;
    color: white;
  }
  .tab-btn .tab-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.5;
  }
  .tab-btn.active .tab-num {
    color: #F97316;
    opacity: 1;
  }

  /* Feature chip */
  .feature-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s;
  }
  .feature-chip:hover {
    background: #064E3B;
    border-color: #064E3B;
    color: white;
  }
  .feature-chip:hover .chip-icon {
    color: white;
  }
  .chip-icon {
    font-size: 16px;
    color: #064E3B;
    transition: color 0.2s;
  }

  /* Big bg number */
  .bg-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 1;
    color: #f1f5f9;
    user-select: none;
    letter-spacing: -0.04em;
  }
  .bg-number-dark {
    color: rgba(255,255,255,0.06);
  }

  /* Primary buttons: pieno, non a gradiente — usa il verde smeraldo già in palette */
  .btn-gradient {
    background: #064E3B;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
  }
  .btn-gradient:hover {
    background: #053f2f;
    transform: translateY(-1px);
  }

  /* Mobile menu */
  #mobile-menu {
    display: none;
  }
  #mobile-menu.open {
    display: block;
    animation: menuSlideIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes menuSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #mobile-menu .menu-link {
    opacity: 0;
    transform: translateX(-8px);
    animation: linkFadeIn 0.25s ease forwards;
  }
  #mobile-menu.open .menu-link:nth-child(1) { animation-delay: 0.05s; }
  #mobile-menu.open .menu-link:nth-child(2) { animation-delay: 0.10s; }
  #mobile-menu.open .menu-link:nth-child(3) { animation-delay: 0.15s; }
  #mobile-menu.open .menu-link:nth-child(4) { animation-delay: 0.20s; }
  @keyframes linkFadeIn {
    to { opacity: 1; transform: translateX(0); }
  }
  .menu-cta { opacity: 0; animation: linkFadeIn 0.25s ease 0.25s forwards; }
  /* Hamburger icon animation */
  .ham-line { transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; }
  .ham-open .ham-top    { transform: translateY(6px) rotate(45deg); }
  .ham-open .ham-mid    { opacity: 0; transform: scaleX(0); }
  .ham-open .ham-bot    { transform: translateY(-6px) rotate(-45deg); }

  /* Status badge (Alpha roadmap) */
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .status-live {
    background: #dcfce7;
    color: #166534;
  }
  .status-soon {
    background: #fef3c7;
    color: #92400e;
  }

  /* ─── Dashboard widgets (sezione Esempio) ─── */
  .dash-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: background 0.2s ease;
  }
  .dash-card:hover {
    background: rgba(255,255,255,0.08);
  }
  .dash-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
  }
  .dash-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dash-card-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
  }
  /* Anello di completamento, guidato da --pct (0-100) e --ring-color */
  .dash-ring {
    --pct: 0;
    --ring-color: #F97316;
    width: 92px;
    height: 92px;
    border-radius: 9999px;
    background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dash-ring-inner {
    width: 70px;
    height: 70px;
    border-radius: 9999px;
    background: #1F2937;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: white;
  }
  .dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    flex-shrink: 0;
  }
  .dash-dot-amber { background: #f59e0b; }
  .dash-dot-red { background: #f87171; }
  .dash-gauge-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
  }