/* =====================================================
   LUP WEB
   CHI SIAMO
   CSS ESCLUSIVO DELLA PAGINA

   IMPORTANTE:
   HEADER E FOOTER NON VENGONO RIDISEGNATI QUI.
   HEADER + FOOTER ARRIVANO DAL CSS ORIGINALE.
===================================================== */

/* =====================================================
   VARIABILI
===================================================== */

.about-page {
    --lup-dark:
        #010611;
    --lup-dark-2:
        #020b18;
    --lup-blue:
        #07334f;
    --lup-cyan:
        #00e5ff;
    --lup-cyan-bright:
        #20e5ff;
    --lup-white:
        #ffffff;
}

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

.about-page .reveal {
    opacity:
        0;
    transform:
        translateY(35px);
    transition:
        opacity .75s ease,
        transform .85s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}

.about-page .reveal.visible {
    opacity:
        1;
    transform:
        translateY(0);
}

/* =====================================================
   ANIMAZIONE TITOLI
   COPIATA DAL TUO CSS ORIGINALE

   La tua home usa:
   scale(1.035)
   +
   drop-shadow blu/ciano
===================================================== */

.about-page .title-hover {
    display:
        inline-block;
    width:
        fit-content;
    transform:
        scale(1);
    transform-origin:
        left center;
    will-change:
        transform,
        filter;
    transition:

        transform
        0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        filter
        0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.about-page .title-hover:hover {
    transform:
        scale(1.035);
    filter:

        drop-shadow(
            0 0 8px
            rgba(
                0,
                225,
                255,
                0.30
            )
        )

        drop-shadow(
            0 0 20px
            rgba(
                0,
                180,
                255,
                0.16
            )
        );
}

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

.about-hero {
    position:
        relative;
    min-height:
        100vh;
    height:
        900px;
    overflow:
        hidden;
    isolation:
        isolate;
    background:
        var(--lup-dark);
}

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

   MOLTO PIÙ OPACA
===================================================== */

.about-hero-image {
    position:
        absolute;
    inset:
        -7%;
    z-index:
        -5;
    background-image:
        url("chi-siamo-hero.jpg");
    background-size:
        cover;
    background-position:
        center center;
    background-repeat:
        no-repeat;
    transform:
        scale(1.07);
    will-change:
        transform;
    filter:

        brightness(.42)

        saturate(.72)

        contrast(.92);
    transition:
        filter .6s ease;
}

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

   Sostituisce l'immagine come sfondo della hero.
   Resta SOTTO l'overlay scuro e la vignetta, quindi
   i testi mantengono lo stesso contrasto di prima.
   L'immagine (.about-hero-image) resta come base: si vede
   finché il video non parte o se il video non è disponibile.
===================================================== */

.about-hero-video {
    position:
        absolute;
    inset:
        0;
    z-index:
        -5;
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
    object-position:
        center center;
    filter:
        brightness(.65) saturate(.85) contrast(.98);
    pointer-events:
        none;
    transition:
        filter .6s ease;
}

/* 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 l'immagine di fondo. */

/* =====================================================
   OVERLAY SCURO

   Serve a separare ulteriormente il titolo
   dall'immagine.
===================================================== */

.about-hero-overlay {
    position:
        absolute;
    inset:
        0;
    z-index:
        -4;
    background:

        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%
        );
}

/* =====================================================
   VIGNETTE
===================================================== */

.about-hero-vignette {
    position:
        absolute;
    inset:
        0;
    z-index:
        -3;
    background:

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

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

.about-hero-grid {
    position:
        absolute;
    inset:
        0;
    z-index:
        -2;
    pointer-events:
        none;
    opacity:
        .10;
    background-image:

        linear-gradient(
            rgba(
                0,
                234,
                255,
                .10
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                0,
                234,
                255,
                .10
            )
            1px,
            transparent
            1px
        );
    background-size:
        90px 90px;
}

/* =====================================================
   LUCE BLU
===================================================== */

.about-hero-light {
    position:
        absolute;
    width:
        650px;
    height:
        650px;
    right:
        -120px;
    top:
        10%;
    z-index:
        -1;
    border-radius:
        50%;
    background:

        radial-gradient(
            circle,
            rgba(
                0,
                210,
                255,
                .11
            ),
            rgba(
                0,
                140,
                255,
                .035
            )

            42%,
            transparent
            72%
        );
    filter:
        blur(35px);
    pointer-events:
        none;
}

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

.about-hero-content {
    position:
        relative;
    z-index:
        5;
    max-width:
        1400px;
    margin:
        0 auto;
    padding:
        225px 7vw 100px;
}

/* =====================================================
   HERO TITLE GROUP
===================================================== */

.about-hero-title-group {
    max-width:
        900px;
}

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

.about-page .about-eyebrow {
    display:
        inline-block;
    margin-bottom:
        25px;
    color:
        var(--lup-cyan-bright);
    font-size:
        11px;
    font-weight:
        500;
    letter-spacing:
        4px;
}

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

.about-hero h1 {
    margin:
        0;
    color:
        #ffffff;
    font-size:
        clamp(
            55px,
            6vw,
            92px
        );
    line-height:
        .95;
    letter-spacing:
        -5px;
    font-weight:
        700;
}

.about-hero h1 strong {
    color:
        #00ddff;
    text-shadow:

        0 0 15px
        rgba(
            0,
            220,
            255,
            .35
        );
}

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

.about-hero-title-group > p {
    max-width:
        560px;
    margin:
        32px 0 0;
    color:
        rgba(
            255,
            255,
            255,
            .58
        );
    font-size:
        15px;
    line-height:
        1.7;
}

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

.about-hero-button {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        45px;
    min-width:
        210px;
    margin-top:
        35px;
    padding:
        15px 18px;
    border:
        1px solid
        #00dfff;
    color:
        #ffffff;
    text-decoration:
        none;
    font-size:
        11px;
    letter-spacing:
        2px;
    transform:
        scale(1);
    transform-origin:
        left center;
    will-change:
        transform,
        box-shadow,
        filter;
    transition:

        transform
        .3s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        background-color
        .3s ease,
        box-shadow
        .3s ease,
        filter
        .3s ease;
}

.about-hero-button:hover {
    background:
        rgba(
            0,
            220,
            255,
            .08
        );
    box-shadow:

        0 0 15px
        rgba(
            0,
            220,
            255,
            .22
        ),
        0 0 35px
        rgba(
            0,
            180,
            255,
            .12
        ),
        inset 0 0 15px
        rgba(
            0,
            220,
            255,
            .06
        );
    transform:
        scale(1.08);
    filter:

        drop-shadow(
            0 0 7px
            rgba(
                0,
                225,
                255,
                .65
            )
        );
}

.about-hero-button strong {
    color:
        #00e5ff;
    font-size:
        20px;
    font-weight:
        400;
}

/* =====================================================
   SCROLL
===================================================== */

.hero-scroll {
    position:
        absolute;
    left:
        7vw;
    bottom:
        35px;
    display:
        flex;
    align-items:
        center;
    gap:
        15px;
    color:
        rgba(
            255,
            255,
            255,
            .45
        );
    font-size:
        10px;
    letter-spacing:
        .25em;
}

.hero-scroll i {
    display:
        block;
    width:
        55px;
    height:
        1px;
    background:
        rgba(
            0,
            234,
            255,
            .6
        );
    position:
        relative;
    overflow:
        hidden;
}

.hero-scroll i::after {
    content:
        "";
    position:
        absolute;
    width:
        20px;
    height:
        1px;
    left:
        -20px;
    background:
        var(--lup-cyan);
    box-shadow:
        0 0 10px
        var(--lup-cyan);
    animation:
        scrollLine 2s infinite;
}

@keyframes scrollLine {
    to {
        left:
            100%;
    }
}

/* =====================================================
   STORIA
===================================================== */

.about-story {
    position:
        relative;
    padding:
        150px 7vw;
    background:
        #ffffff;
    color:
        var(--lup-blue);
    overflow:
        hidden;
}

.story-background-glow {
    position:
        absolute;
    width:
        650px;
    height:
        650px;
    right:
        -300px;
    top:
        -100px;
    border-radius:
        50%;
    background:

        radial-gradient(
            circle,
            rgba(
                0,
                174,
                255,
                .10
            ),
            transparent
            70%
        );
    filter:
        blur(30px);
    pointer-events:
        none;
}

.story-number {
    position:
        absolute;
    right:
        6vw;
    top:
        90px;
    font-size:
        clamp(
            100px,
            17vw,
            280px
        );
    line-height:
        1;
    font-weight:
        800;
    color:
        rgba(
            7,
            51,
            79,
            .035
        );
    pointer-events:
        none;
}

.about-story-inner {
    position:
        relative;
    max-width:
        1400px;
    margin:
        0 auto;
}

/* =====================================================
   SECTION LABEL
===================================================== */

.about-section-label {
    display:
        flex;
    align-items:
        center;
    gap:
        15px;
    margin-bottom:
        65px;
    color:
        #0788bc;
    font-size:
        11px;
    font-weight:
        700;
    letter-spacing:
        4px;
}

.about-section-label i {
    width:
        45px;
    height:
        1px;
    background:
        currentColor;
    transition:
        width .4s ease;
}

.about-section-label:hover i {
    width:
        80px;
}

.about-section-label.light {
    color:
        var(--lup-cyan);
}

/* =====================================================
   STORY GRID
===================================================== */

.story-layout {
    display:
        grid;
    grid-template-columns:
        .95fr 1.05fr;
    gap:
        110px;
    align-items:
        start;
}

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

.story-heading h2 {
    margin:
        0;
    color:
        var(--lup-blue);
    font-size:
        clamp(
            52px,
            6vw,
            88px
        );
    line-height:
        .96;
    letter-spacing:
        -4px;
    font-weight:
        700;
}

.story-heading h2 strong {
    color:
        var(--lup-blue);
}

/* =====================================================
   STORY TEXT

   UNICO BLOCCO ANIMATO
===================================================== */

.story-text-group {
    max-width:
        650px;
}

/* =====================================================
   FRASE INTRODUTTIVA

   BLU DELLA HEADER
===================================================== */

.story-lead {
    margin:
        0 0 32px;
    color:
        #07334f;
    font-size:
        21px;
    line-height:
        1.65;
    font-weight:
        500;
}

/* =====================================================
   PARAGRAFI

   NON HANNO PIÙ REVEAL SEPARATI.
   ENTRANO TUTTI COME UN UNICO BLOCCO.
===================================================== */

.story-copy {
    display:
        flex;
    flex-direction:
        column;
    gap:
        26px;
}

.story-copy p {
    margin:
        0;
    color:
        rgba(
            7,
            16,
            27,
            .68
        );
    font-size:
        17px;
    line-height:
        1.8;
    transition:
        transform .35s ease,
        color .35s ease;
}

.story-copy:hover p {
    color:
        rgba(
            7,
            16,
            27,
            .82
        );
}

.story-copy p:hover {
    transform:
        translateX(8px);
}

/* =====================================================
   VALUES
===================================================== */

.about-values {
    position:
        relative;
    padding:
        150px 7vw;
    background:
        #010611;
    color:
        #ffffff;
    overflow:
        hidden;
}

.values-light {
    position:
        absolute;
    width:
        900px;
    height:
        550px;
    left:
        50%;
    top:
        15%;
    transform:
        translateX(-50%);
    background:

        radial-gradient(
            ellipse,
            rgba(
                0,
                140,
                255,
                .14
            ),
            transparent
            70%
        );
    filter:
        blur(40px);
    pointer-events:
        none;
}

.about-values-inner {
    position:
        relative;
    max-width:
        1400px;
    margin:
        0 auto;
}

/* =====================================================
   VALUES HEADING
===================================================== */

.values-heading {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        50px;
    margin-bottom:
        75px;
}

.values-heading h2 {
    margin:
        0;
    color:
        #ffffff;
    font-size:
        clamp(
            52px,
            6vw,
            88px
        );
    line-height:
        .96;
    letter-spacing:
        -4px;
    font-weight:
        700;
}

.values-heading h2 strong {
    color:
        #00ddff;
}

.values-heading > p {
    max-width:
        370px;
    margin:
        0;
    color:
        rgba(
            255,
            255,
            255,
            .55
        );
    font-size:
        15px;
    line-height:
        1.7;
}

/* =====================================================
   VALUES GRID
===================================================== */

.values-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            3,
            1fr
        );
    gap:
        18px;
}

/* =====================================================
   VALUE CARD
===================================================== */

.value-card {
    --mouse-x:
        50%;
    --mouse-y:
        50%;
    --rotate-x:
        0deg;
    --rotate-y:
        0deg;
    position:
        relative;
    min-height:
        500px;
    padding:
        32px;
    display:
        flex;
    flex-direction:
        column;
    overflow:
        hidden;
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );
    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .055
            ),
            rgba(
                255,
                255,
                255,
                .018
            )
        );
    transform:

        perspective(1000px)

        rotateX(
            var(--rotate-x)
        )

        rotateY(
            var(--rotate-y)
        );
    transition:

        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* =====================================================
   LUCE INTERNA
===================================================== */

.value-card::before,
.process-step::before {
    content:
        "";
    position:
        absolute;
    inset:
        0;
    background:

        radial-gradient(
            300px circle at
            var(--mouse-x)
            var(--mouse-y),
            rgba(
                0,
                234,
                255,
                .17
            ),
            transparent
            65%
        );
    opacity:
        0;
    transition:
        opacity .35s ease;
    pointer-events:
        none;
}

.value-card:hover::before,
.process-step:hover::before {
    opacity:
        1;
}

/* =====================================================
   HOVER CARD
===================================================== */

.value-card:hover {
    transform:

        perspective(1000px)

        translateY(-12px)

        scale(1.025)

        rotateX(
            var(--rotate-x)
        )

        rotateY(
            var(--rotate-y)
        );
    border-color:
        rgba(
            0,
            234,
            255,
            .55
        );
    box-shadow:

        0 15px 40px
        rgba(
            0,
            0,
            0,
            .35
        ),
        0 0 25px
        rgba(
            0,
            174,
            255,
            .14
        );
}

/* =====================================================
   VALUE TOP
===================================================== */

.value-top {
    position:
        relative;
    z-index:
        2;
    display:
        flex;
    justify-content:
        space-between;
}

.value-number {
    color:
        rgba(
            255,
            255,
            255,
            .35
        );
    font-size:
        12px;
    letter-spacing:
        2px;
}

.value-tag {
    color:
        var(--lup-cyan);
    font-size:
        10px;
    letter-spacing:
        2px;
}

/* =====================================================
   VALUE CONTENT
===================================================== */

.value-content {
    position:
        relative;
    z-index:
        2;
    margin-top:
        auto;
}

.value-content h3 {
    margin:
        0 0 25px;
    color:
        #ffffff;
    font-size:
        clamp(
            30px,
            3vw,
            43px
        );
    line-height:
        1.05;
    letter-spacing:
        -2px;
    font-weight:
        400;
    transition:
        transform .35s ease;
}

.value-card:hover h3 {
    transform:
        translateX(5px);
}

.value-content p {
    max-width:
        340px;
    margin:
        0;
    color:
        rgba(
            255,
            255,
            255,
            .55
        );
    line-height:
        1.7;
}

/* =====================================================
   ARROW
===================================================== */

.value-arrow {
    position:
        absolute;
    top:
        28px;
    right:
        28px;
    opacity:
        0;
    color:
        var(--lup-cyan);
    font-size:
        25px;
    transform:
        translate(
            -10px,
            10px
        );
    transition:

        opacity .35s ease,
        transform .35s ease;
}

.value-card:hover
.value-arrow {
    opacity:
        1;
    transform:
        translate(
            0,
            0
        );
}

/* =====================================================
   PROCESS
===================================================== */

.about-process {
    position:
        relative;
    padding:
        150px 7vw;
    background:
        #ffffff;
    color:
        #07101b;
    overflow:
        hidden;
}

.process-orb {
    position:
        absolute;
    width:
        550px;
    height:
        550px;
    right:
        -280px;
    top:
        20%;
    border-radius:
        50%;
    background:

        radial-gradient(
            circle,
            rgba(
                0,
                174,
                255,
                .12
            ),
            transparent
            70%
        );
    filter:
        blur(25px);
}

/* =====================================================
   PROCESS HEADING
===================================================== */

.process-heading {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        50px;
    margin-bottom:
        100px;
}

.process-heading h2 {
    margin:
        0;
    color:
        #07334f;
    font-size:
        clamp(
            52px,
            6vw,
            88px
        );
    line-height:
        .96;
    letter-spacing:
        -4px;
    font-weight:
        700;
}

.process-heading h2 strong {
    color:
        #07334f;
}

.process-heading > p {
    max-width:
        360px;
    margin:
        0;
    color:
        rgba(
            7,
            16,
            27,
            .58
        );
    font-size:
        15px;
    line-height:
        1.7;
}

/* =====================================================
   PROCESS LINE
===================================================== */

.process-line {
    position:
        absolute;
    left:
        7vw;
    right:
        7vw;
    height:
        1px;
    margin-top:
        25px;
    background:
        rgba(
            0,
            140,
            255,
            .18
        );
}

/* =====================================================
   PROCESS STEPS
===================================================== */

.process-steps {
    position:
        relative;
    display:
        grid;
    grid-template-columns:
        repeat(
            4,
            1fr
        );
    gap:
        0;
}

/* =====================================================
   PROCESS STEP
===================================================== */

.process-step {
    --mouse-x:
        50%;
    --mouse-y:
        50%;
    position:
        relative;
    min-height:
        320px;
    padding:
        0 30px 30px;
    border-left:
        1px solid
        rgba(
            0,
            140,
            255,
            .15
        );
    overflow:
        hidden;
    transition:

        transform .35s ease,
        border-color .35s ease;
}

.process-step:first-child {
    border-left:
        none;
}

.process-step:hover {
    transform:
        translateY(-12px)
        scale(1.025);
    border-color:
        rgba(
            0,
            174,
            255,
            .5
        );
}

/* =====================================================
   PROCESS NUMBER
===================================================== */

.process-number {
    position:
        relative;
    z-index:
        2;
    display:
        flex;
    align-items:
        center;
    height:
        52px;
    margin-bottom:
        60px;
    color:
        #008dcc;
    font-size:
        13px;
    font-weight:
        700;
}

.process-number::after {
    content:
        "";
    position:
        absolute;
    left:
        0;
    bottom:
        0;
    width:
        7px;
    height:
        7px;
    border-radius:
        50%;
    background:
        #00eaff;
    box-shadow:
        0 0 12px
        rgba(
            0,
            234,
            255,
            .8
        );
}

/* =====================================================
   PROCESS ICON
===================================================== */

.process-icon {
    position:
        absolute;
    top:
        65px;
    right:
        25px;
    width:
        45px;
    height:
        45px;
    display:
        grid;
    place-items:
        center;
    color:
        #008dcc;
    border:
        1px solid
        rgba(
            0,
            140,
            255,
            .25
        );
    transition:

        transform .4s ease,
        box-shadow .4s ease;
}

.process-step:hover
.process-icon {
    transform:
        rotate(12deg)
        scale(1.15);
    box-shadow:
        0 0 25px
        rgba(
            0,
            174,
            255,
            .2
        );
}

.process-step h3 {
    position:
        relative;
    z-index:
        2;
    margin:
        0 0 17px;
    color:
        #07101b;
    font-size:
        30px;
    font-weight:
        500;
}

.process-step p {
    position:
        relative;
    z-index:
        2;
    max-width:
        250px;
    margin:
        0;
    color:
        rgba(
            7,
            16,
            27,
            .55
        );
    line-height:
        1.7;
}

/* =====================================================
   WOW
===================================================== */

.about-wow {
    position:
        relative;
    height:
        720px;
    overflow:
        hidden;
    background:
        #010611;
    isolation:
        isolate;
    cursor:
        crosshair;
}

/* =====================================================
   WOW IMAGE
===================================================== */

.wow-image {
    position:
        absolute;
    inset:
        0;
    overflow:
        hidden;
}

.wow-image img {
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
    object-position:
        center;
    transform:
        scale(1.01);
    filter:

        saturate(.82)

        contrast(1.08)

        brightness(.76);
    transition:

        transform
        1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        filter .7s ease;
}

.about-wow:hover
.wow-image img {
    filter:

        saturate(1)

        contrast(1.08)

        brightness(.82);
}

/* =====================================================
   WOW OVERLAY
===================================================== */

.wow-overlay {
    position:
        absolute;
    inset:
        0;
    z-index:
        2;
    background:

        linear-gradient(
            90deg,
            rgba(
                1,
                6,
                17,
                .93
            ),
            rgba(
                1,
                6,
                17,
                .58
            )

            50%,
            rgba(
                1,
                6,
                17,
                .30
            )
        );
}

/* =====================================================
   WOW LUCE
===================================================== */

.wow-blue-light {
    position:
        absolute;
    z-index:
        3;
    width:
        700px;
    height:
        700px;
    right:
        -200px;
    top:
        -100px;
    border-radius:
        50%;
    background:

        radial-gradient(
            circle,
            rgba(
                0,
                234,
                255,
                .15
            ),
            transparent
            68%
        );
    filter:
        blur(35px);
    transition:
        transform .8s ease;
    pointer-events:
        none;
}

.about-wow:hover
.wow-blue-light {
    transform:
        scale(1.15);
}

/* =====================================================
   WOW CONTENT
===================================================== */

.wow-content {
    position:
        relative;
    z-index:
        5;
    max-width:
        1400px;
    height:
        100%;
    margin:
        0 auto;
    padding:
        100px 7vw;
    display:
        flex;
    align-items:
        center;
}

.wow-content .title-hover {
    max-width:
        900px;
}

.wow-content .title-hover > span {
    display:
        block;
    margin-bottom:
        25px;
    color:
        var(--lup-cyan);
    font-size:
        11px;
    font-weight:
        700;
    letter-spacing:
        4px;
}

.wow-content h2 {
    margin:
        0;
    color:
        #ffffff;
    font-size:
        clamp(
            52px,
            6vw,
            90px
        );
    line-height:
        .96;
    letter-spacing:
        -4px;
    font-weight:
        700;
}

.wow-content h2 strong {
    color:
        #00ddff;
    text-shadow:

        0 0 15px
        rgba(
            0,
            220,
            255,
            .35
        );
}

.wow-content p {
    max-width:
        560px;
    margin:
        30px 0 0;
    color:
        rgba(
            255,
            255,
            255,
            .63
        );
    font-size:
        15px;
    line-height:
        1.7;
}

/* =====================================================
   CTA
===================================================== */

.about-cta {
    position:
        relative;
    min-height:
        600px;
    display:
        grid;
    place-items:
        center;
    overflow:
        hidden;
    background:
        #010611;
}

.cta-glow {
    position:
        absolute;
    width:
        850px;
    height:
        550px;
    left:
        50%;
    top:
        50%;
    transform:
        translate(
            -50%,
            -50%
        );
    background:

        radial-gradient(
            ellipse,
            rgba(
                0,
                174,
                255,
                .18
            ),
            transparent
            70%
        );
    filter:
        blur(30px);
}

.cta-grid {
    position:
        absolute;
    inset:
        0;
    opacity:
        .12;
    background-image:

        linear-gradient(
            rgba(
                0,
                234,
                255,
                .12
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                0,
                234,
                255,
                .12
            )
            1px,
            transparent
            1px
        );
    background-size:
        75px 75px;
}

/* =====================================================
   CTA CONTENT
===================================================== */

.cta-inner {
    position:
        relative;
    z-index:
        2;
    text-align:
        center;
    padding:
        100px 25px;
}

.cta-inner .title-hover {
    display:
        inline-block;
}

.cta-inner > .title-hover > span {
    display:
        block;
    color:
        var(--lup-cyan);
    font-size:
        11px;
    font-weight:
        700;
    letter-spacing:
        4px;
}

.cta-inner h2 {
    margin:
        25px 0;
    color:
        #ffffff;
    font-size:
        clamp(
            60px,
            9vw,
            130px
        );
    line-height:
        .90;
    letter-spacing:
        -6px;
    font-weight:
        700;
}

.cta-inner h2 strong {
    display:
        block;
    color:
        #00ddff;
    text-shadow:

        0 0 15px
        rgba(
            0,
            220,
            255,
            .35
        ),
        0 0 50px
        rgba(
            0,
            140,
            255,
            .18
        );
}

.cta-inner p {
    margin:
        0 auto 35px;
    color:
        rgba(
            255,
            255,
            255,
            .58
        );
    font-size:
        15px;
}

/* =====================================================
   CTA BUTTON
===================================================== */

.cta-button {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        45px;
    min-width:
        230px;
    padding:
        15px 18px;
    color:
        #ffffff;
    text-decoration:
        none;
    border:
        1px solid
        #00dfff;
    font-size:
        11px;
    letter-spacing:
        2px;
    transform:
        scale(1);
    transition:

        transform .3s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        background-color .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

.cta-button:hover {
    background:
        rgba(
            0,
            220,
            255,
            .08
        );
    box-shadow:

        0 0 15px
        rgba(
            0,
            220,
            255,
            .22
        ),
        0 0 35px
        rgba(
            0,
            180,
            255,
            .12
        ),
        inset 0 0 15px
        rgba(
            0,
            220,
            255,
            .06
        );
    transform:
        scale(1.08);
    filter:

        drop-shadow(
            0 0 7px
            rgba(
                0,
                225,
                255,
                .65
            )
        );
}

.cta-button strong {
    color:
        #00e5ff;
    font-size:
        20px;
}

/* =====================================================
   CURSOR GLOW
===================================================== */

.about-page .cursor-glow {
    position:
        fixed;
    z-index:
        9999;
    width:
        180px;
    height:
        180px;
    pointer-events:
        none;
    transform:
        translate(
            -50%,
            -50%
        );
    border-radius:
        50%;
    background:

        radial-gradient(
            circle,
            rgba(
                0,
                234,
                255,
                .07
            ),
            transparent
            68%
        );
    filter:
        blur(8px);
    mix-blend-mode:
        screen;
}

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

@media (max-width: 900px) {
    .about-hero {
        min-height:
            850px;
        height:
            850px;
    }

    .about-hero-content {
        padding:
            190px 25px 80px;
    }

    .about-hero-image {
        background-position:
            60% center;
    }

    .story-layout {
        grid-template-columns:
            1fr;
        gap:
            55px;
    }

    .values-heading,
    .process-heading {
        display:
            block;
    }

    .values-heading > p,
    .process-heading > p {
        margin-top:
            30px;
    }

    .values-grid {
        grid-template-columns:
            1fr;
    }

    .value-card {
        min-height:
            430px;
    }

    .process-steps {
        grid-template-columns:
            1fr 1fr;
        gap:
            25px;
    }

    .process-line {
        display:
            none;
    }

    .process-step {
        border:
            1px solid
            rgba(
                0,
                140,
                255,
                .15
            );
        padding:
            25px;
    }

    .process-step:first-child {
        border:
            1px solid
            rgba(
                0,
                140,
                255,
                .15
            );
    }

    .process-number {
        margin-bottom:
            45px;
    }

    .about-wow {
        height:
            650px;
    }

    .wow-content {
        padding:
            70px 25px;
    }

    .wow-image img {
        object-position:
            55% center;
    }

    .cursor-glow {
        display:
            none;
    }
}

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

@media (max-width: 600px) {
    .about-hero-content {
        padding:
            170px 20px 70px;
    }

    .about-hero h1 {
        font-size:
            clamp(
                43px,
                13vw,
                65px
            );
        letter-spacing:
            -3px;
    }

    .about-hero-title-group > p {
        font-size:
            15px;
    }

    .about-story,
    .about-values,
    .about-process {
        padding:
            100px 20px;
    }

    .story-number {
        right:
            10px;
        top:
            60px;
        font-size:
            120px;
    }

    .story-heading h2 {
        font-size:
            45px;
        letter-spacing:
            -3px;
    }

    .story-lead {
        font-size:
            19px;
    }

    .story-copy p {
        font-size:
            16px;
    }

    .values-heading h2,
    .process-heading h2 {
        font-size:
            48px;
        letter-spacing:
            -3px;
    }

    .process-steps {
        grid-template-columns:
            1fr;
    }

    .about-wow {
        height:
            620px;
    }

    .wow-content h2 {
        font-size:
            48px;
        letter-spacing:
            -3px;
    }

    .cta-inner h2 {
        font-size:
            65px;
        letter-spacing:
            -4px;
    }
}

/* =====================================================
   CTA FINALE
===================================================== */

.contact-final {
    position: relative;
    min-height: 650px;
    padding: 145px 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ffffff;
    color: #07334f;
    overflow: hidden;
}

.contact-final .section-eyebrow {
    color: #07334f;
}

.contact-final h2 {
    position: relative;
    z-index: 2;
    margin: 24px 0 18px;
    color: #07334f;
    font-size: clamp(52px, 7vw, 100px);
    line-height: 0.93;
    letter-spacing: -5px;
}

.contact-final h2 strong {
    color: #07334f;
}

.contact-final > p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(7, 51, 79, 0.58);
    font-size: 16px;
}

.final-contact-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 65px;
    min-width: 255px;
    margin-top: 40px;
    padding: 17px 20px;
    border: 1px solid #07334f;
    color: #07334f;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.final-contact-button strong {
    font-size: 21px;
    font-weight: 400;
}

.final-contact-button:hover {
    transform: translateY(-3px);
    background: #07334f;
    color: #ffffff;
    box-shadow:
        0 15px 40px rgba(7, 51, 79, 0.20);
}

.contact-final-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0, 220, 255, 0.10),
            transparent 68%
        );
    filter: blur(25px);
    pointer-events: none;
}

/* =====================================================
   ANIMAZIONE TITOLO CTA FINALE
   stessa animazione title-hover di Chi siamo
===================================================== */

.contact-final h2 {
    position: relative;
    z-index: 2;
    margin: 24px 0 18px;
    color: #07334f;
    font-size: clamp(52px, 7vw, 100px);
    line-height: 0.93;
    letter-spacing: -5px;
    display: inline-block;
    width: fit-content;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform, filter;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-final h2:hover {
    transform: scale(1.035);
    filter:
        drop-shadow(0 0 8px rgba(0, 225, 255, 0.30))
        drop-shadow(0 0 20px rgba(0, 180, 255, 0.16));
}

.contact-final h2 strong {
    color: #07334f;
}