/* ============================================================
   LUP WEB — PACKAGES
   ============================================================ */


:root {

    --packages-black: #010611;

    --packages-navy: #031b2d;

    --packages-blue: #07334f;

    --packages-cyan: #20e5ff;

    --packages-white: #ffffff;

    --packages-text:
        rgba(255, 255, 255, 0.82);

    --packages-muted:
        rgba(255, 255, 255, 0.52);

    --packages-border:
        rgba(32, 229, 255, 0.18);

    --packages-border-strong:
        rgba(32, 229, 255, 0.42);

    --packages-transition:
        0.35s cubic-bezier(.22, 1, .36, 1);

}



/* ============================================================
   BASE
============================================================ */


.packages-page {

    margin: 0;

    padding: 0;

    background:
        var(--packages-black);

    color:
        var(--packages-white);

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

    overflow-x: hidden;

}


.packages-page * {

    box-sizing: border-box;

}


.packages-page a {

    color: inherit;

    text-decoration: none;

}



/* ============================================================
   REVEAL
============================================================ */


.packages-page .reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .85s cubic-bezier(.22, 1, .36, 1);

}


.packages-page .reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* ============================================================
   TITLE
============================================================ */


.packages-page .title-hover {

    display: inline-block;

    width: fit-content;

    transform:
        scale(1);

    transform-origin:
        left center;

    will-change:
        transform,
        filter;

    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        filter .3s cubic-bezier(.22, 1, .36, 1);

}


.packages-page .title-hover:hover {

    transform:
        scale(1.035);

    filter:
        drop-shadow(
            0 0 8px
            rgba(0, 225, 255, .30)
        )
        drop-shadow(
            0 0 20px
            rgba(0, 180, 255, .16)
        );

}


.packages-page strong {

    color:
        var(--packages-cyan);

}



/* ============================================================
   EYEBROW
============================================================ */


.packages-page .section-eyebrow {

    display: block;

    color:
        var(--packages-cyan);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

}



/* ============================================================
   HERO
============================================================ */


.packages-hero {

    position: relative;

    /* contesto di impilamento: il video di sfondo (z-index negativo)
       resta sopra il fondo della sezione ma SOTTO la velatura scura
       (::before) e ai testi */
    isolation: isolate;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding:
        210px 7%
        120px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 72% 35%,
            rgba(0, 200, 255, .12),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #010611 0%,
            #031727 50%,
            #010611 100%
        );

}



/* ============================================================
   HERO — VIDEO DI SFONDO
   Sostituisce la foto: sta sopra il fondo della sezione ma sotto
   alla velatura scura (::before), alla griglia e ai testi, così
   il contrasto del titolo resta quello di prima.
============================================================ */


.packages-hero-video {

    position: absolute;

    inset: 0;

    z-index: -1;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    filter: brightness(.7) saturate(.85) contrast(.98);

    pointer-events: none;

}


/* NOTA IMPORTANTE: qui NON deve stare nessuna regola
   @media (prefers-reduced-motion) con "display: none" sul video.
   Molti sistemi (Windows con le animazioni disattivate, sessioni
   remote) dichiarano "riduci movimento": con display:none il video
   spariva del tutto e la hero mostrava solo il fondo di prima. */



/* ============================================================
   HERO — OMBREGGIATURA
   Stessa ombreggiatura della hero di "Chi siamo":
   velatura orizzontale scurissima dove sta il testo (sinistra)
   e trasparente a destra, con vignetta verticale sul fondo.
============================================================ */


.packages-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(1, 6, 17, .85) 100%
        ),

        linear-gradient(
            90deg,
            rgba(1, 6, 17, .98) 0%,
            rgba(1, 6, 17, .91) 28%,
            rgba(1, 6, 17, .63) 55%,
            rgba(1, 6, 17, .35) 100%
        );

    

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    pointer-events: none;

}


/* ============================================================
   HERO — OMBREGGIATURA SU SCHERMI STRETTI
   Stessa ombreggiatura, ma piu' coperta: qui il testo occupa
   quasi tutta la larghezza, quindi il video deve restare piu'
   indietro per non rubare leggibilita' al titolo.
============================================================ */


@media (max-width: 1000px) {

    .packages-hero::before {

        background-image:

            linear-gradient(
                180deg,
                transparent 40%,
                rgba(1, 6, 17, .88) 100%
            ),

            linear-gradient(
                90deg,
                rgba(1, 6, 17, .99) 0%,
                rgba(1, 6, 17, .95) 45%,
                rgba(1, 6, 17, .86) 75%,
                rgba(1, 6, 17, .74) 100%
            );

    }

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .20;

    background-image:

        linear-gradient(
            rgba(32, 229, 255, .08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(32, 229, 255, .08) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    pointer-events: none;

}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(80px);

    pointer-events: none;

}


.hero-glow-one {

    width: 450px;

    height: 450px;

    right: 5%;

    top: 18%;

    background:
        rgba(0, 195, 255, .09);

}


.hero-glow-two {

    width: 280px;

    height: 280px;

    left: 0;

    bottom: 0;

    background:
        rgba(0, 100, 255, .08);

}


.packages-hero-content {

    position: relative;

    z-index: 2;

    max-width: 950px;

}


.packages-title {

    margin:
        22px 0 30px;

    font-size:
        clamp(58px, 8vw, 115px);

    line-height:
        .93;

    font-weight:
        700;

    letter-spacing:
        -5px;

}


.packages-hero-text {

    max-width: 680px;

    margin:
        0 0 42px;

    color:
        var(--packages-text);

    font-size:
        18px;

    line-height:
        1.75;

}


.hero-scroll-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        15px 22px;

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

    border-radius:
        9px;

    background:
        rgba(0, 10, 20, .55);

    color: white;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    transition:
        transform var(--packages-transition),
        border-color var(--packages-transition),
        background var(--packages-transition),
        box-shadow var(--packages-transition);

}


.hero-scroll-button span {

    color:
        var(--packages-cyan);

    font-size:
        18px;

    transition:
        transform var(--packages-transition);

}


.hero-scroll-button:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--packages-cyan);

    background:
        rgba(32, 229, 255, .08);

    box-shadow:
        0 0 30px
        rgba(32, 229, 255, .12);

}


.hero-scroll-button:hover span {

    transform:
        translateY(3px);

}



/* ============================================================
   INTRO
============================================================ */


.packages-intro {

    position: relative;

    padding:
        150px 7%;

    background:
        #020b15;

    border-top:
        1px solid
        rgba(32, 229, 255, .08);

    border-bottom:
        1px solid
        rgba(32, 229, 255, .08);

}


.packages-intro-inner {

    max-width:
        1000px;

}


.packages-intro h2 {

    margin:
        22px 0 25px;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:
        .98;

    letter-spacing:
        -3px;

}


.packages-intro p {

    max-width:
        760px;

    margin: 0;

    color:
        var(--packages-muted);

    font-size:
        18px;

    line-height:
        1.8;

}



/* ============================================================
   PACKAGE SECTION
============================================================ */


.package-section {

    position: relative;

    padding:
        130px 7%
        145px;

    overflow: hidden;

}


.package-essential {

    background:

        linear-gradient(
            180deg,
            #010611 0%,
            #031321 100%
        );

}


.package-professional {

    background:

        linear-gradient(
            180deg,
            #031321 0%,
            #05243a 100%
        );

}


.package-premium {

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(32, 229, 255, .08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #05243a 0%,
            #03111f 100%
        );

}


.package-section-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -250px;

    top: 15%;

    border-radius: 50%;

    background:
        rgba(32, 229, 255, .035);

    filter:
        blur(80px);

    pointer-events: none;

}



/* ============================================================
   PACKAGE HEADER
============================================================ */


.package-header {

    position: relative;

    z-index: 2;

    max-width:
        1400px;

    margin:
        0 auto 65px;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        240px;

    gap:
        45px;

    align-items:
        end;

}


.package-number {

    color:
        rgba(32, 229, 255, .25);

    font-size:
        70px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -4px;

}


.package-heading {

    min-width:
        0;

}


.package-label {

    display: block;

    margin-bottom:
        18px;

    color:
        var(--packages-cyan);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.package-heading h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(42px, 5vw, 75px);

    line-height:
        .98;

    letter-spacing:
        -3px;

}


.package-heading p {

    max-width:
        650px;

    margin: 0;

    color:
        var(--packages-muted);

    font-size:
        17px;

    line-height:
        1.7;

}


.package-price {

    text-align:
        right;

    padding-bottom:
        5px;

}


.package-price span {

    display: block;

    margin-bottom:
        7px;

    color:
        rgba(255, 255, 255, .38);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.package-price strong {

    display: block;

    color:
        white;

    font-size:
        43px;

    line-height:
        1;

    letter-spacing:
        -2px;

}


.package-price small {

    display: block;

    margin-top:
        10px;

    color:
        var(--packages-cyan);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1px;

}



/* ============================================================
   DEMO GRID
============================================================ */


.package-videos {

    position: relative;

    z-index: 2;

    max-width:
        1400px;

    margin:
        0 auto;

    display: grid;

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

    gap:
        25px;

}



/* ============================================================
   VIDEO CONTAINER
============================================================ */


.package-video {

    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    border:
        1px solid
        rgba(32, 229, 255, .25);

    border-radius:
        14px;

    background:
        #010611;

    box-shadow:

        0 25px 70px
        rgba(0, 0, 0, .35),

        inset 0 0 40px
        rgba(32, 229, 255, .025);

    transition:

        transform var(--packages-transition),

        border-color var(--packages-transition),

        box-shadow var(--packages-transition);

}


.package-video:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(32, 229, 255, .58);

    box-shadow:

        0 30px 80px
        rgba(0, 0, 0, .48),

        0 0 35px
        rgba(32, 229, 255, .09);

}



/* ============================================================
   IFRAME
============================================================ */


.demo-site {

    cursor:
        pointer;

    isolation:
        isolate;

}


.demo-site iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        0;

    margin:
        0;

    padding:
        0;

    background:
        white;

    /*
     * Il click viene gestito dal contenitore.
     */

    pointer-events:
        none;

}



/* ============================================================
   TOP LABEL
============================================================ */


.demo-top-label {

    position:
        absolute;

    top:
        18px;

    left:
        18px;

    z-index:
        5;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(32, 229, 255, .35);

    border-radius:
        6px;

    background:
        rgba(1, 6, 17, .78);

    backdrop-filter:
        blur(8px);

    color:
        var(--packages-cyan);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

    pointer-events:
        none;

}



/* ============================================================
   BOTTOM FADE
============================================================ */


.demo-bottom-fade {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        100px;

    z-index:
        3;

    background:

        linear-gradient(
            to top,
            rgba(1, 6, 17, .65),
            transparent
        );

    pointer-events:
        none;

}



/* ============================================================
   FINISHED OVERLAY
============================================================ */


.demo-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        10;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        30px;

    background:

        radial-gradient(
            circle at center,
            rgba(1, 18, 31, .68),
            rgba(1, 6, 17, .92)
        );

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .45s ease;

}


.demo-site.is-finished .demo-overlay {

    opacity:
        1;

}


.demo-status {

    color:
        var(--packages-cyan);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-align:
        center;

}


.demo-play {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(32, 229, 255, .55);

    border-radius:
        50%;

    background:
        rgba(32, 229, 255, .07);

    color:
        var(--packages-cyan);

    font-size:
        28px;

    box-shadow:
        0 0 35px
        rgba(32, 229, 255, .10);

    transition:
        transform .3s ease,
        background .3s ease;

}


.demo-site.is-finished:hover .demo-play {

    transform:
        scale(1.10)
        rotate(-20deg);

    background:
        rgba(32, 229, 255, .13);

}


.demo-overlay small {

    color:
        rgba(255, 255, 255, .58);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}



/* ============================================================
   PLACEHOLDER PROFESSIONAL / PREMIUM
============================================================ */


.package-video-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        default;

}


.placeholder-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        15px;

    text-align:
        center;

}


.placeholder-content span {

    color:
        var(--packages-cyan);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.placeholder-content small {

    color:
        rgba(255, 255, 255, .40);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.placeholder-arrow {

    width:
        65px;

    height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(32, 229, 255, .25);

    border-radius:
        50%;

    color:
        var(--packages-cyan);

    font-size:
        25px;

    background:
        rgba(32, 229, 255, .035);

}



/* ============================================================
   DESCRIPTION
============================================================ */


.package-description {

    position:
        relative;

    z-index:
        2;

    max-width:
        1400px;

    margin:
        55px auto 0;

    padding-top:
        40px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px;

    gap:
        50px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

}


.description-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--packages-cyan);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.package-description p {

    max-width:
        800px;

    margin:
        0;

    color:
        rgba(255, 255, 255, .62);

    font-size:
        15px;

    line-height:
        1.75;

}


.description-feature {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        13px;

    text-align:
        right;

}


.description-feature span {

    color:
        var(--packages-cyan);

    font-size:
        50px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -3px;

}


.description-feature small {

    color:
        rgba(255, 255, 255, .38);

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        2px;

}



/* ============================================================
   COMPARISON
============================================================ */


.comparison-section {

    position:
        relative;

    padding:
        150px 5%
        140px;

    background:

        linear-gradient(
            180deg,
            #010611 0%,
            #020b15 100%
        );

    border-top:
        1px solid
        rgba(32, 229, 255, .10);

}


.comparison-heading {

    max-width:
        900px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


.comparison-heading .title-hover {

    margin:
        20px 0;

    font-size:
        clamp(45px, 5vw, 75px);

    line-height:
        1;

    letter-spacing:
        -3px;

}


.comparison-heading p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--packages-muted);

    font-size:
        16px;

    line-height:
        1.7;

}



/* ============================================================
   TABLE
============================================================ */


.comparison-wrapper {

    max-width:
        1500px;

    margin:
        0 auto;

}


.comparison-table-container {

    overflow-x:
        auto;

    border:
        1px solid
        rgba(32, 229, 255, .15);

    border-radius:
        14px;

    background:
        rgba(2, 14, 25, .75);

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .38);

}


.comparison-table {

    width:
        100%;

    min-width:
        850px;

    border-collapse:
        collapse;

    table-layout:
        fixed;

}


.comparison-table th,
.comparison-table td {

    padding:
        18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);

    text-align:
        center;

    vertical-align:
        middle;

}


.comparison-table th:first-child,
.comparison-table td:first-child {

    width:
        31%;

    text-align:
        left;

}


.comparison-table th {

    padding-top:
        25px;

    padding-bottom:
        25px;

    background:
        #031522;

    color:
        white;

    font-size:
        11px;

    letter-spacing:
        2px;

}


.comparison-table th.essential-column {

    color:
        rgba(255, 255, 255, .70);

}


.comparison-table th.professional-column {

    background:

        linear-gradient(
            180deg,
            rgba(32, 229, 255, .09),
            #031522
        );

}


.comparison-table th.premium-column {

    color:
        var(--packages-cyan);

    background:

        linear-gradient(
            180deg,
            rgba(32, 229, 255, .14),
            #031522
        );

}


.comparison-table td {

    color:
        rgba(255, 255, 255, .67);

    font-size:
        13px;

    line-height:
        1.4;

}


.comparison-table td:first-child {

    color:
        rgba(255, 255, 255, .88);

    font-weight:
        600;

}


.comparison-table tbody tr {

    transition:
        background .25s ease;

}


.comparison-table tbody tr:hover {

    background:
        rgba(32, 229, 255, .035);

}


.comparison-table tbody tr:last-child td {

    border-bottom:
        0;

}


.comparison-table td:nth-child(4) {

    color:
        var(--packages-cyan);

    font-weight:
        600;

}


.comparison-table .price-row td {

    color:
        white;

    font-weight:
        700;

    background:
        rgba(32, 229, 255, .025);

}


.comparison-table .price-row td:nth-child(4) {

    color:
        var(--packages-cyan);

}



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


.packages-page .site-footer {

    width:
        100%;

    padding:
        85px 7%
        25px;

    background:
        #07334f;

    color:
        white;

    border-top:
        1px solid
        rgba(0, 225, 255, .18);

    box-shadow:
        0 -15px 50px
        rgba(0, 0, 0, .25);

}


.packages-page .footer-content {

    max-width:
        1400px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.2fr 1fr 1fr;

    gap:
        80px;

    padding-bottom:
        70px;

}


.packages-page .footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

}


.packages-page .footer-label {

    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--packages-cyan);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.packages-page .footer-column a,
.packages-page .footer-column p {

    margin:
        0;

    color:
        rgba(255, 255, 255, .80);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.5;

}


.packages-page .footer-column a {

    transition:
        color .25s ease,
        transform .25s ease;

}


.packages-page .footer-column a:hover {

    color:
        var(--packages-cyan);

    transform:
        translateX(4px);

}


.packages-page .footer-social-button {

    width:
        180px;

    padding:
        12px 16px;

    border:
        1px solid
        rgba(0, 225, 255, .65);

    border-radius:
        8px;

    background:
        rgba(1, 6, 17, .20);

    text-align:
        center;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.packages-page .footer-social-button:hover {

    background:
        rgba(32, 229, 255, .10);

    transform:
        translateY(-3px);

    box-shadow:
        0 0 25px
        rgba(32, 229, 255, .13);

}


.packages-page .footer-bottom {

    max-width:
        1400px;

    margin:
        0 auto;

    padding-top:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);

    color:
        rgba(255, 255, 255, .45);

    font-size:
        12px;

}


.packages-page .footer-legal {

    display:
        flex;

    gap:
        25px;

}


.packages-page .footer-legal a {

    color:
        rgba(255, 255, 255, .45);

    font-size:
        12px;

}


.packages-page .footer-legal a:hover {

    color:
        var(--packages-cyan);

}



/* ============================================================
   TABLET
============================================================ */


@media (max-width: 1000px) {


    .packages-hero {

        padding:
            190px 6%
            100px;

    }


    .package-section {

        padding:
            110px 5%
            120px;

    }


    .package-header {

        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap:
            30px;

    }


    .package-price {

        grid-column:
            2;

        text-align:
            left;

        margin-top:
            10px;

    }


    .package-videos {

        gap:
            18px;

    }


    .package-video {

        height:
            420px;

    }


    .comparison-section {

        padding-left:
            4%;

        padding-right:
            4%;

    }


    .packages-page .footer-content {

        gap:
            45px;

    }

}



/* ============================================================
   MOBILE
============================================================ */


@media (max-width: 700px) {


    .packages-hero {

        min-height:
            90vh;

        padding:
            165px 7%
            90px;

    }


    .packages-title {

        font-size:
            clamp(50px, 14vw, 78px);

        letter-spacing:
            -3px;

    }


    .packages-hero-text {

        font-size:
            15px;

        line-height:
            1.65;

    }


    .packages-intro {

        padding:
            100px 7%;

    }


    .packages-intro h2 {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }


    .packages-intro p {

        font-size:
            15px;

    }


    .package-section {

        padding:
            90px 6%
            100px;

    }


    .package-header {

        display:
            block;

        margin-bottom:
            45px;

    }


    .package-number {

        margin-bottom:
            25px;

        font-size:
            50px;

    }


    .package-heading h2 {

        font-size:
            44px;

        letter-spacing:
            -2px;

    }


    .package-heading p {

        font-size:
            15px;

    }


    .package-price {

        margin-top:
            35px;

        text-align:
            left;

    }


    .package-price strong {

        font-size:
            38px;

    }


    .package-videos {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .package-video {

        height:
            360px;

        border-radius:
            11px;

    }


    .package-description {

        display:
            block;

        margin-top:
            45px;

    }


    .description-feature {

        justify-content:
            flex-start;

        margin-top:
            30px;

        text-align:
            left;

    }


    .comparison-section {

        padding:
            100px 4%
            90px;

    }


    .comparison-heading {

        margin-bottom:
            45px;

    }


    .comparison-heading .title-hover {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }


    .comparison-heading p {

        font-size:
            14px;

    }


    .comparison-table-container {

        border-radius:
            10px;

    }


    .comparison-table th,
    .comparison-table td {

        padding:
            14px 12px;

        font-size:
            12px;

    }


    .packages-page .site-footer {

        padding:
            65px 7%
            25px;

    }


    .packages-page .footer-content {

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding-bottom:
            50px;

    }


    .packages-page .footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .packages-page .footer-legal {

        flex-direction:
            column;

        gap:
            10px;

    }

}



/* ============================================================
   SMALL MOBILE
============================================================ */


@media (max-width: 430px) {


    .packages-title {

        font-size:
            48px;

    }


    .package-heading h2 {

        font-size:
            38px;

    }


    .package-video {

        height:
            330px;

    }


    .demo-top-label {

        top:
            12px;

        left:
            12px;

        padding:
            7px 9px;

        font-size:
            8px;

    }


    .demo-play {

        width:
            60px;

        height:
            60px;

        font-size:
            23px;

    }

}



/* ============================================================
   BOTTONE DI REPLAY DEMO
   ogni demo Essential ha il SUO bottone di riavvio
============================================================ */


.demo-site {

    cursor:
        default;

}


.demo-replay {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;

    pointer-events:
        auto;

}


.demo-replay small {

    margin:
        0;

}


.demo-replay:hover .demo-play {

    transform:
        scale(1.10)
        rotate(-20deg);

    background:
        rgba(32, 229, 255, 0.13);

}


/* ============================================================
   TABELLA DI CONFRONTO — 3 COLONNE (2 SOTTO I 700px) E FRECCE
   La tabella non si stringe piu' tutta nello schermo: sotto i
   1000px mostra la colonna delle funzionalita' + DUE pacchetti
   (3 colonne), sotto i 700px le funzionalita' + UN pacchetto
   (2 colonne). Gli altri pacchetti restano fuori a destra e ci si
   arriva con le due frecce in alto, un pacchetto alla volta
   (.comparison-controls, script in packages.html).
   La colonna delle funzionalita' e' la prima e resta SEMPRE ferma
   a sinistra (sticky): le altre le scorrono sotto.
   Le larghezze sono in percentuale della TABELLA (table-layout:
   fixed): con la tabella al 130% [funzionalita' 40% + pacchetti
   30% l'uno] se ne vedono 40 + 30 + 30 = 100%; con la tabella al
   200% [50% + 50% l'uno] se ne vedono 100%.
============================================================ */


.comparison-controls {

    display:
        none;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-bottom:
        22px;

}


.comparison-controls-label {

    color:
        rgba(255, 255, 255, .55);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.comparison-arrow {

    width:
        54px;

    height:
        54px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    background:
        rgba(7, 15, 30, .85);

    border:
        1px solid rgba(100, 185, 255, .75);

    color:
        #ffffff;

    font-size:
        25px;

    line-height:
        1;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        opacity .25s ease;

}


.comparison-arrow:hover:not(:disabled) {

    background:
        rgba(35, 110, 190, .35);

    border-color:
        rgba(100, 200, 255, 1);

    box-shadow:
        0 0 28px rgba(60, 170, 255, .5);

}


.comparison-arrow:active:not(:disabled) {

    transform:
        scale(.94);

}


/* freccia spenta a inizio e fine elenco (lo decide lo script) */
.comparison-arrow:disabled {

    opacity:
        .3;

    cursor:
        default;

}


/* ---------- sotto i 1000px: 3 colonne visibili + frecce ---------- */
@media (max-width: 1000px) {

    .comparison-controls {

        display:
            flex;

    }

    /* lo scorrimento si ferma sempre su una colonna intera: lo
       snapport (la zona in cui atterrano le colonne) parte DOPO la
       colonna delle funzionalita', che resta ferma a sinistra */
    .comparison-table-container {

        scroll-padding-left:
            40%;

        scroll-snap-type:
            x mandatory;

        scroll-behavior:
            smooth;

    }

    .comparison-table {

        width:
            130%;

        min-width:
            0;

        /* le celle sticky non gradiscono i bordi collassati: con
           separate il disegno resta lo stesso (qui ci sono solo
           bordi inferiori) */
        border-collapse:
            separate;

        border-spacing:
            0;

    }

    /* ogni PACCHETTO: 30% della schermata (23,08% di 130%) e una
       tacca di scatto del carosello */
    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {

        width:
            23.08%;

        scroll-snap-align:
            start;

    }

    /* FUNZIONALITA': 40% della schermata (30,77% di 130%), ferma
       a sinistra */
    .comparison-table th:first-child,
    .comparison-table td:first-child {

        width:
            30.77%;

        position:
            sticky;

        left:
            0;

        z-index:
            1;

    }

    /* sfondo pieno: sotto la colonna ferma scorrono le altre
       (stessi colori di prima, ma senza trasparenza) */
    .comparison-table td:first-child {

        background:
            #020c17;

    }

    .comparison-table .price-row td:first-child {

        background:
            #03111d;

    }

    .comparison-table tbody tr:hover td:first-child {

        background:
            #04141f;

    }

}


/* ---------- sotto i 700px: 2 colonne visibili ---------- */
@media (max-width: 700px) {

    .comparison-controls {

        gap:
            12px;

    }

    .comparison-arrow {

        width:
            46px;

        height:
            46px;

        font-size:
            21px;

    }

    .comparison-controls-label {

        font-size:
            10px;

        letter-spacing:
            1px;

    }

    .comparison-table-container {

        scroll-padding-left:
            50%;

    }

    .comparison-table {

        width:
            200%;

    }

    /* FUNZIONALITA' 50% + un pacchetto 50% alla volta */
    .comparison-table th:first-child,
    .comparison-table td:first-child {

        width:
            25%;

    }

    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {

        width:
            25%;

    }

}