/* DS Enterprise Training — Brand Palette */
:root {
    --ds-navy:       #122A43;
    --ds-navy-deep:  #0E253D;
    --ds-petrol:     #1A405E;
    --ds-blue:       #1F78AA;
    --ds-blue-soft:  #307FA9;
    --ds-cyan:       #35B4D6;
    --ds-cyan-alt:   #34B3D6;
    --ds-cyan-light: #4EB9D6;
    --ds-bg:         #F7FAFB;
    --ds-white:      #FFFFFF;

    /* Alias per compatibilità con le classi esistenti */
    --ink:        var(--ds-navy);
    --ink-2:      var(--ds-navy-deep);
    --azure:      var(--ds-cyan);
    --azure-deep: var(--ds-blue);
    --sky:        var(--ds-cyan-light);
    --sky-soft:   #BFE5F2;
    --body:       var(--ds-petrol);
    --muted:      var(--ds-blue-soft);
    --cloud:      var(--ds-bg);
    --mist:       #EEF6FB;
    --white:      var(--ds-white);
    --line:       #C8E2EF;
}

/* Font logo — Montserrat */
.logo-main {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.eyebrow {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ds-blue);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Glassmorphism card */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Hero title — fix mobile overflow ─────────────────────────────────────── */
/*
   Problema: clamp(2.8rem, 8vw, 5.6rem) su iPhone SE (375px) restituisce il
   valore minimo 2.8rem ≈ 45px, troppo largo per "DS ENTERPRISE" uppercase.
   Soluzione: abbassare il minimo a 1.8rem; a 375px il valore vw (7vw ≈ 26px)
   supera comunque il minimo → font dinamico che si adatta alla viewport.
*/
.hero-title-main {
    display: block;
    font-size: clamp(2.2rem, 7vw, 5.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hero-title-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    font-size: clamp(0.75rem, 2.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.45em;
    color: #0D2237;
    margin-top: 0.25em;
}

.hero-title-line {
    display: block;
    height: 1px;
    background: #1D4B6E;
    width: clamp(40px, 6vw, 120px);
    opacity: 0.6;
}

/* Previene scroll orizzontale causato da overflow del titolo */
body {
    overflow-x: hidden;
}

/* ── Hero mobile harmony ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Sottotitolo più piccolo per non competere col titolo */
    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1.75rem;
    }

    /* Bottoni più compatti verticalmente */
    .hero-buttons a {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}