body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #f8fafc;
    background: #0f172a;
}

.container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.site-header {
    background: #020617;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
}

.logo a {
    color: #d4af37;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

.main-nav a,
.language-switcher a {
    color: #f8fafc;
    text-decoration: none;
    margin-left: 18px;
    font-size: 14px;
}

.main-nav a:hover,
.language-switcher a:hover {
    color: #d4af37;
}

.hero {
    padding: 120px 0;
    text-align: center;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    max-width: 720px;
    margin: 0 auto 32px;
    color: #cbd5e1;
}

.button {
    display: inline-block;
    padding: 14px 28px;
    background: #d4af37;
    color: #020617;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
}

.site-footer {
    padding: 32px 0;
    text-align: center;
    color: #94a3b8;
    background: #020617;
}

.page-hero {
    padding: 90px 0 50px;
    text-align: center;
}

.page-hero h1 {
    font-size: 42px;
    margin-bottom: 18px;
}

.page-hero p {
    font-size: 19px;
    max-width: 820px;
    margin: 0 auto;
    color: #cbd5e1;
}

.services-section {
    padding: 40px 0 90px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.service-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    padding: 28px;
}

.service-card h2 {
    color: #d4af37;
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 22px;
}

.service-card p {
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .header-inner {
        flex-direction: column;
        gap: 18px;
        padding: 18px 0;
    }

    .main-nav {
        text-align: center;
    }

    .main-nav a,
    .language-switcher a {
        display: inline-block;
        margin: 6px 8px;
    }

    .hero h1,
    .page-hero h1 {
        font-size: 36px;
    }

    .hero p,
    .page-hero p {
        font-size: 18px;
    }
}/* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio-page {
    min-height: 100vh;
    background-color: #111a2d;
    color: #ffffff;
}


/* Intestazione della pagina */

.portfolio-header {
    padding: 50px 20px 40px;
    text-align: center;
    background-color: #111a2d;
}

.portfolio-header h1 {
    margin: 0 0 14px;
    font-size: 38px;
    line-height: 1.15;
    color: #ffffff;
}

.portfolio-header p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.5;
    color: #e3e8f1;
}


/* Contenuto */

.portfolio-content {
    padding: 20px 20px 100px;
}

.portfolio-container {
    max-width: 1100px;
}


/* Singolo progetto */

.portfolio-entry {
    padding: 20px 0 75px;
    margin-bottom: 70px;
    border-bottom: 1px solid rgba(227, 182, 45, 0.45);
}

.portfolio-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: none;
}


/* Titolo e sottotitolo */

.portfolio-entry-heading {
    margin-bottom: 35px;
    text-align: center;
}

.portfolio-entry-heading h2 {
    margin: 0 0 12px;
    font-size: 42px;
    line-height: 1.2;
    color: #e3b62d;
}

.portfolio-entry-subtitle {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    color: #ffffff;
}


/* Immagine */

.portfolio-entry-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 35px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #080d1d;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.portfolio-entry-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}


/* Testo */

.portfolio-entry-text {
    max-width: 900px;
    margin: 0 auto;
}

.portfolio-entry-text p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.75;
    color: #edf1f8;
}

.portfolio-entry-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PORTFOLIO RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

    .portfolio-header {
        padding: 40px 20px 35px;
    }

    .portfolio-header h1 {
        font-size: 32px;
    }

    .portfolio-header p {
        font-size: 16px;
    }

    .portfolio-content {
        padding-bottom: 70px;
    }

    .portfolio-entry {
        padding-bottom: 55px;
        margin-bottom: 50px;
    }

    .portfolio-entry-heading {
        margin-bottom: 28px;
    }

    .portfolio-entry-heading h2 {
        font-size: 32px;
    }

    .portfolio-entry-subtitle {
        font-size: 18px;
    }

    .portfolio-entry-image {
        margin-bottom: 28px;
    }

    .portfolio-entry-text p {
        font-size: 17px;
        line-height: 1.7;
    }
}


@media screen and (max-width: 480px) {

    .portfolio-header {
    padding: 35px 18px 30px;
}

.portfolio-header h1 {
    font-size: 28px;
}

.portfolio-header p {
    font-size: 15px;
}

    .portfolio-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .portfolio-entry {
        padding-top: 10px;
        padding-bottom: 45px;
        margin-bottom: 40px;
    }

    .portfolio-entry-heading h2 {
        font-size: 27px;
    }

    .portfolio-entry-subtitle {
        font-size: 16px;
    }

    .portfolio-entry-image {
        border-radius: 8px;
    }

    .portfolio-entry-text p {
        font-size: 16px;
        line-height: 1.65;
    }
}

/* =========================================================
   CAROSELLO PORTFOLIO HOMEPAGE
   ========================================================= */

.home-portfolio-carousel {
    padding: 45px 20px 30px;
    background-color: #111a2d;
}

.home-carousel {
    position: relative;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.home-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(227, 182, 45, 0.45);
    border-radius: 12px;
    background-color: #080d1d;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.home-carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s ease;
}

.home-carousel-slide {
    display: block;
    flex: 0 0 100%;
    min-width: 100%;
    height: 390px;
    background-color: #080d1d;
}

.home-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #080d1d;
}


/* Frecce */

.home-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(227, 182, 45, 0.7);
    border-radius: 50%;
    background-color: rgba(3, 8, 24, 0.9);
    color: #e3b62d;
    font-size: 24px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.home-carousel-arrow:hover,
.home-carousel-arrow:focus {
    border-color: #e3b62d;
    background-color: #e3b62d;
    color: #050a1b;
    outline: none;
}

.home-carousel-prev {
    left: 14px;
}

.home-carousel-next {
    right: 14px;
}


/* Pallini */

.home-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 850px;
    margin: 18px auto 0;
}

.home-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #e3b62d;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.home-carousel-dot:hover,
.home-carousel-dot:focus {
    background-color: rgba(227, 182, 45, 0.55);
    outline: none;
}

.home-carousel-dot.active {
    background-color: #e3b62d;
    transform: scale(1.25);
}


/* =========================================================
   CAROSELLO RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

    .home-portfolio-carousel {
        padding-top: 35px;
    }

    .home-carousel {
        max-width: 680px;
    }

    .home-carousel-slide {
        height: 310px;
    }

    .home-carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 21px;
        line-height: 38px;
    }

    .home-carousel-prev {
        left: 10px;
    }

    .home-carousel-next {
        right: 10px;
    }

}


@media screen and (max-width: 520px) {

    .home-portfolio-carousel {
        padding: 28px 15px 22px;
    }

    .home-carousel-viewport {
        border-radius: 8px;
    }

    .home-carousel-slide {
        height: 220px;
    }

    .home-carousel-arrow {
        width: 34px;
        height: 34px;
        font-size: 18px;
        line-height: 32px;
    }

    .home-carousel-prev {
        left: 7px;
    }

    .home-carousel-next {
        right: 7px;
    }

    .home-carousel-dots {
        gap: 7px;
        margin-top: 14px;
    }

    .home-carousel-dot {
        width: 8px;
        height: 8px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .home-carousel-track {
        transition: none;
    }

}

/* =========================================================
   SPAZIATURA HERO HOMEPAGE
   ========================================================= */

.hero {
    min-height: auto;
    padding: 45px 20px 25px;
}

.hero h1 {
    margin-top: 0;
    margin-bottom: 16px;
}

.hero p {
    margin-top: 0;
    margin-bottom: 24px;
}

.hero .button {
    margin-bottom: 0;
}


/* Riduce lo spazio tra il pulsante e il carosello */

.home-portfolio-carousel {
    padding: 20px 20px 30px;
}


/* =========================================================
   SPAZIATURA HERO RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

    .hero {
        padding: 35px 20px 20px;
    }

    .hero h1 {
        margin-bottom: 14px;
    }

    .hero p {
        margin-bottom: 20px;
    }

    .home-portfolio-carousel {
        padding: 16px 20px 25px;
    }

}


@media screen and (max-width: 520px) {

    .hero {
        padding: 28px 16px 18px;
    }

    .hero h1 {
        margin-bottom: 12px;
    }

    .hero p {
        margin-bottom: 18px;
    }

    .home-portfolio-carousel {
        padding: 14px 15px 22px;
    }

}

/* =========================================================
   HERO: DECORAZIONI GAMING INTEGRATE NELLO SFONDO
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero .container {
    position: relative;
    z-index: 3;
}


/* Pattern di esagoni e pixel */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.42;

    background-image:

        /* Esagono in alto a sinistra */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='130' viewBox='0 0 150 130'%3E%3Cpolygon points='38,5 112,5 148,65 112,125 38,125 2,65' fill='none' stroke='%23d9ad36' stroke-width='3'/%3E%3Cpolygon points='55,33 95,33 115,65 95,97 55,97 35,65' fill='none' stroke='%23d9ad36' stroke-width='2' opacity='.55'/%3E%3C/svg%3E"),

        /* Piccoli pixel in basso a destra */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='100' viewBox='0 0 110 100'%3E%3Crect x='4' y='4' width='18' height='18' fill='%23d9ad36'/%3E%3Crect x='28' y='4' width='18' height='18' fill='%23d9ad36' opacity='.8'/%3E%3Crect x='28' y='28' width='18' height='18' fill='%23d9ad36' opacity='.7'/%3E%3Crect x='52' y='28' width='18' height='18' fill='%23d9ad36' opacity='.55'/%3E%3Crect x='52' y='52' width='18' height='18' fill='%23d9ad36' opacity='.4'/%3E%3Crect x='76' y='52' width='18' height='18' fill='%23d9ad36' opacity='.25'/%3E%3C/svg%3E"),

        /* Piccoli esagoni ripetuti */
        radial-gradient(
            circle at center,
            rgba(217, 173, 54, 0.08) 0,
            rgba(217, 173, 54, 0.08) 2px,
            transparent 3px
        );

    background-repeat:
        no-repeat,
        no-repeat,
        repeat;

    background-position:
        left 4% top 28px,
        right 4% bottom 18px,
        center;

    background-size:
        120px auto,
        90px auto,
        42px 42px;
}


/* Controller, D8 e D20 come filigrane */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background-image:

        /* Controller */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cpath d='M45 42 C55 26 72 22 90 22 C108 22 125 26 135 42 C147 60 148 88 134 96 C123 102 116 89 108 82 C102 76 98 74 90 74 C82 74 78 76 72 82 C64 89 57 102 46 96 C32 88 33 60 45 42 Z' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cpath d='M58 51 V69 M49 60 H67' stroke='%23d9ad36' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='117' cy='53' r='4' fill='%23d9ad36'/%3E%3Ccircle cx='128' cy='64' r='4' fill='%23d9ad36'/%3E%3C/svg%3E"),

        /* D8 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cpolygon points='60,8 102,44 82,92 38,92 18,44' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cpolygon points='38,92 82,92 60,132' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cline x1='60' y1='8' x2='60' y2='132' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='18' y1='44' x2='60' y2='92' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='102' y1='44' x2='60' y2='92' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='38' y1='92' x2='60' y2='44' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='82' y1='92' x2='60' y2='44' stroke='%23d9ad36' stroke-width='2.5'/%3E%3C/svg%3E"),

        /* Dado poliedrico */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125' height='125' viewBox='0 0 125 125'%3E%3Cpolygon points='62,5 112,39 94,102 30,102 12,39' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cpath d='M62 5 L30 102 M62 5 L94 102 M12 39 H112 M12 39 L62 76 L112 39 M30 102 L62 76 L94 102' fill='none' stroke='%23d9ad36' stroke-width='2.5'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        right 5% top 30px,
        left 8% bottom 10px,
        right 23% bottom -20px;

    background-size:
        145px auto,
        105px auto,
        105px auto;

    opacity: 0.12;
}


/* Leggero alone centrale per mantenere leggibile il testo */

.hero .container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(760px, 95vw);
    height: 115%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(17, 26, 45, 0.96) 0%,
        rgba(17, 26, 45, 0.83) 48%,
        rgba(17, 26, 45, 0) 78%
    );
    pointer-events: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

    .hero::before {
        background-position:
            left -25px top 20px,
            right -10px bottom 12px,
            center;

        background-size:
            95px auto,
            70px auto,
            38px 38px;
    }

.hero::after {
    background-position:
        right -32px top 32px,
        left -14px bottom -6px,
        right 18% bottom -26px;

    background-size:
        115px auto,
        78px auto,
        88px auto;

    opacity: 0.10;
}

}


@media screen and (max-width: 520px) {

    .hero::before {
        opacity: 0.3;

        background-position:
            left -40px top 18px,
            right -20px bottom 8px,
            center;

        background-size:
            85px auto,
            62px auto,
            36px 36px;
    }

    .hero::after {
        background-image:

            /* Controller */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cpath d='M45 42 C55 26 72 22 90 22 C108 22 125 26 135 42 C147 60 148 88 134 96 C123 102 116 89 108 82 C102 76 98 74 90 74 C82 74 78 76 72 82 C64 89 57 102 46 96 C32 88 33 60 45 42 Z' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cpath d='M58 51 V69 M49 60 H67' stroke='%23d9ad36' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='117' cy='53' r='4' fill='%23d9ad36'/%3E%3Ccircle cx='128' cy='64' r='4' fill='%23d9ad36'/%3E%3C/svg%3E"),

           /* D8 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cpolygon points='60,8 102,44 82,92 38,92 18,44' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cpolygon points='38,92 82,92 60,132' fill='none' stroke='%23d9ad36' stroke-width='4'/%3E%3Cline x1='60' y1='8' x2='60' y2='132' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='18' y1='44' x2='60' y2='92' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='102' y1='44' x2='60' y2='92' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='38' y1='92' x2='60' y2='44' stroke='%23d9ad36' stroke-width='2.5'/%3E%3Cline x1='82' y1='92' x2='60' y2='44' stroke='%23d9ad36' stroke-width='2.5'/%3E%3C/svg%3E"),

        background-position:
            right -45px top 24px,
            left -18px bottom 4px;

        background-size:
            105px auto,
            70px auto;

        opacity: 0.08;
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

    .hero::before {
        width: 88px;
        height: 76px;
        top: 24px;
        left: 3%;
    }

    .hero::after {
        width: 60px;
        height: 60px;
        right: 4%;
        bottom: 22px;
    }

    .hero-game-icons {
        gap: 12px;
        margin-top: 22px;
    }

    .hero-game-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .hero-game-icon svg {
        width: 24px;
        height: 24px;
    }

}

@media screen and (max-width: 520px) {

    .hero::before {
        display: none;
    }

    .hero::after {
        display: none;
    }

    .hero-game-icons {
        gap: 10px;
        margin-top: 18px;
    }

    .hero-game-icon {
        width: 46px;
        height: 46px;
        border-radius: 10px;
    }

    .hero-game-icon svg {
        width: 21px;
        height: 21px;
    }

}

/* Nome e sottotitolo del sito */

.site-name {
    display: block;
}

.site-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.72);
}