:root {

    --bg: #0b1020;

    --bg-soft: #11172a;

    --panel: #141c31;

    --panel-2: #0f1526;

    --text: #e8eefc;

    --muted: #9aa7c7;

    --accent: #7aa2ff;

    --accent-2: #9b8cff;

    --border: rgba(255, 255, 255, 0.08);

    --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

}



body.light {

    --bg: #f4f7fb;

    --bg-soft: #ffffff;

    --panel: #ffffff;

    --panel-2: #eef3fb;

    --text: #101828;

    --muted: #5f6b85;

    --accent: #4169e1;

    --accent-2: #6f5cff;

    --border: rgba(16, 24, 40, 0.08);

    --shadow: 0 18px 40px rgba(16, 24, 40, 0.08);

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: Inter, Arial, sans-serif;

    background:

        radial-gradient(circle at top, rgba(122, 162, 255, 0.18), transparent 35%),

        linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);

    color: var(--text);

    transition: background 0.3s ease, color 0.3s ease;

}



img {

    max-width: 100%;

    display: block;

}



.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    backdrop-filter: blur(14px);

    background: rgba(10, 15, 28, 0.72);

    border-bottom: 1px solid var(--border);



    position: sticky;

}



body.light .site-header {

    background: rgba(255, 255, 255, 0.72);

}



.header-inner {

    max-width: 1180px;

    margin: 0 auto;

    padding: 18px 24px;

    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 20px;

    position: relative;

}



.brand {

    justify-self: start;

    color: var(--text);

    text-decoration: none;

    font-weight: 800;

    letter-spacing: 0.04em;

    font-size: 1.1rem;

}



.main-nav {

    justify-self: center;

    display: flex;

    align-items: center;

    gap: 26px;

}



.main-nav a {

    color: var(--muted);

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s ease, opacity 0.2s ease;

}



.main-nav a:hover {

    color: var(--text);

}



.theme-toggle {

    justify-self: end;

    border: 1px solid var(--border);

    background: linear-gradient(135deg, rgba(122, 162, 255, 0.16), rgba(155, 140, 255, 0.16));

    color: var(--text);

    padding: 10px 14px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 700;

}



.hero {

    max-width: 1180px;

    margin: 0 auto;

    padding: 84px 24px 34px;

}



.hero-content {

    padding: 54px 36px;

    border: 1px solid var(--border);

    border-radius: 28px;

    background:

        linear-gradient(145deg, rgba(122, 162, 255, 0.12), transparent 34%),

        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);

    box-shadow: var(--shadow);

}



.eyebrow {

    margin: 0 0 14px;

    color: var(--accent);

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.hero h1 {

    margin: 0;

    font-size: clamp(2.4rem, 6vw, 4.8rem);

    line-height: 0.98;

    letter-spacing: -0.04em;

}



.hero-text {

    max-width: 640px;

    margin: 18px 0 0;

    font-size: 1.08rem;

    color: var(--muted);

    line-height: 1.7;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;

}



.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 700;

    border: 1px solid var(--border);

}



.button-primary {

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

    color: #fff;

}



.button-secondary {

    color: var(--text);

    background: rgba(255, 255, 255, 0.03);

}



.section {

    max-width: 1180px;

    margin: 0 auto;

    padding: 34px 24px;

}



.section-alt {

    padding-top: 10px;

}



.section-head {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 18px;

}



.section-head h2 {

    margin: 0;

    font-size: 1.65rem;

}



.section-head p {

    margin: 0;

    color: var(--muted);

    line-height: 1.6;

}



.cards {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.cards-small {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.card {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--panel);

    border: 1px solid var(--border);

    border-radius: 22px;

    padding: 24px;

    box-shadow: var(--shadow);

    transition: transform 0.22s ease, border-color 0.22s ease;

}



.card:hover {

    transform: translateY(-4px);

    border-color: rgba(122, 162, 255, 0.35);

}



.card-label {

    margin: 0 0 12px;

    color: var(--accent);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.card h3 {

    margin: 0 0 10px;

    font-size: 1.2rem;

}



.card p {

    margin: 0;

    color: var(--muted);

    line-height: 1.65;

}



.card-link {

    display: inline-block;

    margin-top: 16px;

    color: var(--accent);

    text-decoration: none;

    font-weight: 700;

}



.cards .card img {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 12px;

}



.hero-content img {

    width: 100%;

    max-width: 420px;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 16px;

    display: block;

    margin-bottom: 16px;

}



.compact {

    min-height: 180px;

}



.about-box {

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 28px;

    background: var(--panel-2);

    box-shadow: var(--shadow);

}



.about-box h2 {

    margin-top: 0;

}



.about-box p {

    margin-bottom: 0;

    color: var(--muted);

    line-height: 1.7;

}



.site-footer {

    margin-top: 26px;

    padding: 28px 24px 36px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), #090d18;

    border-top: 1px solid var(--border);

}



body.light .site-footer {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent), #e9eef7;

}



.footer-inner {

    max-width: 1180px;

    margin: 0 auto;

    text-align: center;

    color: var(--muted);

    line-height: 1.6;

}



.footer-inner p {

    margin: 4px 0;

}



@media (max-width: 920px) {

    .header-inner {

        grid-template-columns: 1fr auto;

        grid-template-areas:

            "brand controls"

            "nav nav";

    }



    .brand {

        grid-area: brand;

    }



    .mobile-controls {

        grid-area: controls;

        display: flex;

        align-items: center;

        gap: 12px;

    }



    .main-nav {

        grid-area: nav;

        justify-self: center;

        flex-wrap: wrap;

        gap: 16px;

    }







    .cards,

    .cards-small {

        grid-template-columns: 1fr;

    }



    .hero-content {

        padding: 34px 22px;

    }

}



@media (max-width: 560px) {

    .header-inner {

        padding: 14px 18px;

        gap: 12px;

    }



    .hero {

        padding-top: 44px;

    }



    .hero h1 {

        font-size: 2.35rem;

    }



    .button {

        width: 100%;

    }

}



/* HAMBURGER */

.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

}



.hamburger span {

    width: 25px;

    height: 3px;

    background: var(--text);

    border-radius: 2px;

}



/* MOBILE */

/* MOBILE HAMBURGER */

@media (max-width: 920px) {

    .header-inner {

        display: grid;

        grid-template-columns: 1fr auto;

        /* brand a sinistra, resto a destra */

        align-items: center;

        gap: 12px;

    }



    .brand {

        justify-self: start;

    }



    .main-nav {

        position: fixed;

        /* fisso sopra la pagina */

        top: 0;

        left: 0;

        width: 100%;

        height: 100vh;

        /* copre tutto lo schermo */

        padding-top: 80px;

        /* spazio per header */

        overflow-y: auto;

        /* scroll verticale se necessario */

        background: var(--panel);

        flex-direction: column;

        align-items: center;

        gap: 20px;

        opacity: 0;

        transform: translateX(-100%);

        pointer-events: none;

        transition: all 0.25s ease;

        z-index: 150;

    }



    .main-nav.active {

        opacity: 1;

        transform: translateX(0);

        pointer-events: auto;

    }



    .hamburger {

        display: flex;

        cursor: pointer;

        z-index: 200;

    }



    .hamburger span {

        width: 25px;

        height: 3px;

        background: var(--text);

        border-radius: 2px;

        transition: 0.3s;

    }



    /* Animazione hamburger X */

    .hamburger.active span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 5px);

    }



    .hamburger.active span:nth-child(2) {

        opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

        transform: rotate(-45deg) translate(6px, -6px);

    }



    #overlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.5);

        opacity: 0;

        pointer-events: none;

        transition: opacity 0.3s ease;

        z-index: 100;

    }



    #overlay.active {

        opacity: 1;

        pointer-events: auto;

    }

}



/* Contenuto articolo */

.article-body p {

    line-height: 1.7;

    margin: 12px 0;

}



.article-body pre {

    background: rgba(255, 255, 255, 0.03);

    /* leggermente più scuro del riquadro principale */

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 14px;

    overflow-x: auto;

    font-family: "Fira Code", monospace;

    font-size: 0.95rem;

    margin: 18px 0;

}



/* per inline code */

.article-body code {

    font-family: "Fira Code", monospace;

    padding: 2px 6px;

    border-radius: 4px;

}



.article-body a {

    color: var(--accent);

    text-decoration: underline;

}



.article-body img {

    max-width: 100%;

    border-radius: 12px;

    margin: 12px 0;

}



pre code {

    display: block;

    background: var(--panel-2);

    /* usa colore leggermente diverso */

    padding: 12px;

    border-radius: 12px;

    overflow-x: auto;

    font-family: "Fira Code", monospace;

    font-size: 0.95rem;

    color: #c8c8c8;

    /* colore testo codice */

}



/* Impedisce lo scroll orizzontale sui dispositivi piccoli */

body {

    overflow-x: hidden;

}