/* =====================================================================
   STILI GENERALI
   ===================================================================== */

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #05070a;
    color: #f9fafb;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Per avere un buon offset quando si cliccano link tipo #services */
section {
    scroll-margin-top: 80px;
}

/* =====================================================================
   NAVBAR / LOGO
   ===================================================================== */

.navbar {
    backdrop-filter: blur(12px);
    background-color: rgba(15, 23, 42, 0.98) !important;
}

/* Logo più grande: sovrascrive lo stile bootstrap .navbar-brand img */
.navbar-brand .navbar-logo {
    height: 72px !important;   /* puoi aumentare/diminuire solo questo valore */
    width: auto;
    display: block;
}

/* impedisce il click diretto sul file immagine */
.navbar-logo {
    pointer-events: none;
}

/* =====================================================================
   HERO & SLIDER
   ===================================================================== */

.hero-section {
  text-align: center;
  padding: 60px 20px 80px; /* aumenta lo spazio sopra e sotto il testo */
}

.hero-section h1 {
  color: #ffffff;
  font-size: 2.6rem;
  margin-bottom: 16px;
}

.hero-section .hero-subtitle {
  color: rgba(255, 255, 255, 0.8); /* un po' più chiaro, leggibile ma non "sparato" */
  max-width: 720px;
  margin: 0 auto 28px;
  line-height: 1.5;
  font-size: 1rem;
}

}

.hero-carousel {
    max-height: 460px;
}

/* Contenitore slide */
.hero-slide {
    width: 100%;
    max-height: 460px;
    background: #05070a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Immagine dentro la slide: si adatta automaticamente */
.hero-slide-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    display: block;
}

/* Placeholder se non ci sono immagini */
.hero-slide-placeholder {
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.01) 10px,
        rgba(255,255,255,0.01) 20px
    );
}

.hero-text h1 {
    letter-spacing: 0.03em;
}

/* Mobile */
@media (max-width: 767.98px) {
    .hero-slide {
        max-height: 280px;
    }
    .hero-slide-img {
        max-height: 280px;
    }
    .hero-section {
        padding-top: 80px;
    }
}

/* =====================================================================
   KIRA INLINE SOTTO AL TESTO HERO
   ===================================================================== */

/* Riga con mini Kira sotto il bottone */

.kira-inline {
    display: flex !important;      /* sovrascrive d-inline-flex di Bootstrap */
    justify-content: center;       /* centra avatar + testo sotto al bottone */
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;            /* distanza dal pulsante */
    width: 100%;                   /* prende tutta la larghezza, non solo quella del contenuto */
}

.kira-inline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;   /* tiene il viso leggermente verso l’alto */
    flex-shrink: 0;                /* evita che si schiacci */
}

    border: 2px solid rgba(148, 163, 184, 0.7);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* evita click diretto sulla foto */
}


/* SEZIONE "I NOSTRI SERVIZI" - più leggibile */

/* Sfondo sezione */
.bg-gradient-dark {
    background: radial-gradient(circle at top left, #334155, #020617);
    /* niente color qui, lasciamo ereditare i colori standard */
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.8);
}

/* Card dentro la sezione */
.bg-gradient-dark .card {
    background-color: #ffffff;
    color: #111827;          /* testo principale scuro */
    border: 0;
}

/* Titoli delle card */
.bg-gradient-dark .card-title {
    color: #111827;
    font-weight: 600;
}

/* Testo descrittivo */
.bg-gradient-dark .card-text {
    color: #4b5563;
}



/* =====================================================================
   SEZIONE "I NOSTRI PRODOTTI"
   (usa le card standard Bootstrap, niente di speciale qui)
   ===================================================================== */

/* puoi aggiungere personalizzazioni se vuoi,
   per ora lasciamo le card bianche standard */

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    border-top: 1px solid rgba(148,163,184,0.25);
    background-color: #020617;
    padding: 24px 0 96px;   /* sopra 24px, sotto 96px per lasciare spazio a Kira */
    color: #e5e7eb;         /* testo chiaro nel footer */
}

/* centra i paragrafi nel footer */
.footer p {
    text-align: center;
    margin-bottom: 0.25rem;
}

/* forza al centro eventuali classi Bootstrap tipo text-end */
.footer .text-end,
.footer .text-md-end {
    text-align: center !important;
}

/* =====================================================================
   BOTTONE "PARLA CON KIRA" IN BASSO A DESTRA
   ===================================================================== */

.kira-chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080;
}

.kira-chat-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #f9fafb;
    font-size: 0.9rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.8);
}

.kira-chat-button:hover {
    opacity: 0.95;
}

.kira-chat-avatar {
    width: 55px;                            /* leggermente più piccola e proporzionata */
    height: 55px;
    border-radius: 90%;                     /* cerchio perfetto */
    border: 2px solid rgba(248, 250, 252, 0.7);
    object-fit: cover;                      /* non deforma, ritaglia */
    object-position: center top;            /* tiene il viso verso l’alto */
    display: block;
    pointer-events: none;                   /* evita click diretto sulla foto */
}

    width: 50%;
    height: 50%;
    object-fit: cover;           /* riempie il cerchio */
    object-position: center top; /* tiene il viso più in alto e centrato */
}
/* Nasconde la sezione "I nostri prodotti" nella home */
#prodotti {
    display: none;
}

.kira-chat-label {
    white-space: nowrap;
}