/* ================================================================
   TRANSUG CINEMATIC PREVIEW V003
   ================================================================ */

html,
body {
    margin: 0;
    background: #031711;
}


/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */

.tcp-page,
.tcp-page * {
    box-sizing: border-box;
}


.tcp-page {
    --green-950: #031711;
    --green-900: #06251c;

    --gold: #d9a83f;
    --gold-light: #f1d58a;

    min-height: 100vh;

    overflow: hidden;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}


.tcp-page a {
    text-decoration: none !important;
}


/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */

.tcp-hero {
    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    display: flex;
    align-items: center;

    color: #fff;

    background: var(--green-950);
}


/* ---------------------------------------------------------------
   VIDEO / IMAGE
   --------------------------------------------------------------- */

.tcp-video,
.tcp-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.tcp-video {
    z-index: 1;

    object-fit: cover;
    object-position: 62% center;
}


.tcp-photo {
    z-index: 0;

    background-image:
        url(
            "/transug_website_crm/static/src/img/transug_hero_real.jpg"
        );

    background-size: cover;
    background-position: 62% center;

    transform: scale(1.015);
}


/* ---------------------------------------------------------------
   GRADING
   --------------------------------------------------------------- */

.tcp-overlay {
    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,17,12,.96) 0%,
            rgba(2,17,12,.91) 24%,
            rgba(2,17,12,.69) 47%,
            rgba(2,17,12,.29) 72%,
            rgba(2,17,12,.10) 100%
        );
}


.tcp-vignette {
    position: absolute;

    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,15,11,.53) 0%,
            transparent 23%,
            transparent 64%,
            rgba(2,15,11,.73) 100%
        );
}


.tcp-grain {
    position: absolute;

    z-index: 4;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        radial-gradient(
            rgba(255,255,255,.34) .45px,
            transparent .55px
        );

    background-size: 4px 4px;

    mix-blend-mode: soft-light;
}


/* ---------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------- */

.tcp-nav {
    position: absolute;

    z-index: 20;

    top: 25px;
    left: 0;
    right: 0;
}


.tcp-nav-inner {
    width:
        min(
            1400px,
            calc(100% - 70px)
        );

    min-height: 68px;

    margin: 0 auto;

    padding:
        8px 9px 8px 19px;

    display: flex;
    align-items: center;

    gap: 36px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 9px;

    background:
        rgba(2,22,16,.43);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 18px 60px rgba(0,0,0,.18);
}


.tcp-logo {
    display: inline-flex;

    margin-right: auto;
}


.tcp-logo img {
    display: block;

    width: 174px;
    max-height: 50px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);

    opacity: .95;
}


.tcp-nav-links {
    display: flex;

    align-items: center;

    gap: 29px;
}


.tcp-nav-links a {
    position: relative;

    color:
        rgba(255,255,255,.75) !important;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

    transition:
        color .2s ease;
}


.tcp-nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: -8px;

    height: 1px;

    background: var(--gold);

    transition:
        right .22s ease;
}


.tcp-nav-links a:hover {
    color: #fff !important;
}


.tcp-nav-links a:hover::after {
    right: 0;
}


.tcp-nav-cta {
    min-height: 45px;

    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    color:
        #10271e !important;

    background:
        linear-gradient(
            135deg,
            #f1d37f,
            #c58a1d
        );

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .09em;

    text-transform: uppercase;

    box-shadow:
        0 16px 36px rgba(0,0,0,.19);

    transition:
        transform .2s ease;
}


.tcp-nav-cta:hover {
    transform:
        translateY(-2px);
}


/* ---------------------------------------------------------------
   CONTENT
   --------------------------------------------------------------- */

.tcp-shell {
    position: relative;

    z-index: 10;

    width:
        min(
            1400px,
            calc(100% - 70px)
        );

    margin: 0 auto;

    padding:
        145px 0 87px;
}


.tcp-content {
    width:
        min(
            810px,
            63vw
        );
}


.tcp-overline {
    margin-bottom: 25px;

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        var(--gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .195em;

    text-transform: uppercase;
}


.tcp-overline span {
    width: 46px;
    height: 1px;

    background:
        var(--gold);
}


.tcp-content h1 {
    max-width: 850px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            58px,
            6vw,
            94px
        );

    font-weight: 680;

    line-height: .95;

    letter-spacing: -.05em;

    text-shadow:
        0 18px 45px rgba(0,0,0,.23);
}


.tcp-content h1 em {
    display: block;

    margin-top: 6px;

    color:
        var(--gold-light);

    font-style: normal;

    font-weight: 760;
}


.tcp-lead {
    max-width: 690px;

    margin:
        31px 0 0;

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

    font-size:
        clamp(
            20px,
            1.55vw,
            25px
        );

    font-weight: 620;

    line-height: 1.38;
}


.tcp-copy {
    max-width: 610px;

    margin:
        13px 0 0;

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

    font-size: 15px;

    line-height: 1.68;
}


/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */

.tcp-actions {
    margin-top: 31px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.tcp-btn {
    min-height: 53px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .105em;

    text-transform: uppercase;

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


.tcp-btn:hover {
    transform:
        translateY(-2px);
}


.tcp-primary {
    color:
        #10271e !important;

    background:
        linear-gradient(
            135deg,
            #f3d88e,
            #c98b1d
        );

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);
}


.tcp-secondary {
    color: #fff !important;

    border:
        1px solid rgba(255,255,255,.45);

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(8px);
}


/* ---------------------------------------------------------------
   PROOF STRIP
   --------------------------------------------------------------- */

.tcp-proof {
    max-width: 790px;

    margin-top: 45px;

    padding-top: 23px;

    display: grid;

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

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


.tcp-proof article {
    min-height: 68px;

    padding:
        0 20px;

    border-right:
        1px solid rgba(255,255,255,.13);
}


.tcp-proof article:first-child {
    padding-left: 0;
}


.tcp-proof article:last-child {
    border-right: 0;
}


.tcp-proof strong {
    display: block;

    margin-bottom: 6px;

    color:
        var(--gold-light);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.tcp-proof span {
    display: block;

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

    font-size: 11px;

    line-height: 1.48;
}


/* ---------------------------------------------------------------
   SIDE BRAND
   --------------------------------------------------------------- */

.tcp-side-mark {
    position: absolute;

    z-index: 11;

    right: 38px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin:
        center;

    display: flex;

    align-items: center;

    gap: 14px;

    opacity: .58;
}


.tcp-side-mark span {
    color:
        var(--gold-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .30em;
}


.tcp-side-mark strong {
    color:
        rgba(255,255,255,.78);

    font-size: 8px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------------
   BOTTOM
   --------------------------------------------------------------- */

.tcp-bottom {
    position: absolute;

    z-index: 12;

    left: 35px;
    right: 35px;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 13px;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .20em;
}


.tcp-bottom i {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.15),
            transparent
        );
}


/* ---------------------------------------------------------------
   TABLET
   --------------------------------------------------------------- */

@media (max-width: 1050px) {

    .tcp-nav-links {
        display: none;
    }


    .tcp-content {
        width: 78vw;
    }


    .tcp-side-mark {
        display: none;
    }

}


/* ---------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------- */

@media (max-width: 700px) {

    .tcp-nav {
        top: 10px;
    }


    .tcp-nav-inner {
        width:
            calc(100% - 22px);

        min-height: 59px;

        padding:
            6px 6px 6px 13px;
    }


    .tcp-logo img {
        width: 122px;
    }


    .tcp-nav-cta {
        min-height: 39px;

        padding:
            0 11px;

        font-size: 8px;
    }


    .tcp-shell {
        width:
            calc(100% - 34px);

        padding:
            105px 0 64px;
    }


    .tcp-content {
        width: 100%;
    }


    .tcp-overline {
        font-size: 8px;

        line-height: 1.5;
    }


    .tcp-content h1 {
        font-size:
            clamp(
                46px,
                13vw,
                62px
            );
    }


    .tcp-lead {
        font-size: 18px;
    }


    .tcp-copy {
        font-size: 14px;
    }


    .tcp-actions {
        display: grid;
    }


    .tcp-btn {
        width: 100%;
    }


    .tcp-proof {
        margin-top: 30px;

        grid-template-columns:
            1fr;
    }


    .tcp-proof article {
        min-height: auto;

        padding:
            12px 0;

        border-right: 0;

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


    .tcp-bottom {
        display: none;
    }


    .tcp-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,17,12,.92),
                rgba(2,17,12,.62)
            );
    }


    .tcp-photo,
    .tcp-video {
        object-position: 67% center;

        background-position:
            67% center;
    }

}


/* ---------------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------------- */


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

    .tcp-video {
        
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

    }


    .tcp-btn,
    .tcp-nav-cta {
        transition: none;
    }

}


/* V004B · visual clarity tuning */
.tcp-video {
    filter: brightness(1.16) contrast(1.08) saturate(1.05) !important;
    transform: scale(1.012) !important;
}

.tcp-photo {
    filter: brightness(1.10) contrast(1.05) saturate(1.02) !important;
}

.tcp-hero::before {
    background:
        linear-gradient(
            90deg,
            rgba(2,17,12,.78) 0%,
            rgba(2,17,12,.48) 42%,
            rgba(2,17,12,.20) 100%
        ) !important;
}

.tcp-hero::after {
    opacity: .18 !important;
}



/* ===============================================================
   V005 · MOBILE + PERFORMANCE + PREMIUM NAV
   Desktop visual baseline remains unchanged.
   =============================================================== */


/* ---------------------------------------------------------------
   PREMIUM NAV PANEL
   --------------------------------------------------------------- */

.tcp-panel-overlay {
    position: fixed;

    inset: 0;

    z-index: 9998;

    display: flex;

    justify-content: flex-end;

    background:
        rgba(
            1,
            12,
            9,
            .58
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


.tcp-panel-overlay.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.tcp-panel-open {
    overflow: hidden !important;
}


.tcp-panel {
    position: relative;

    width:
        min(
            520px,
            92vw
        );

    height: 100%;

    padding:
        clamp(
            36px,
            6vw,
            78px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            155deg,
            rgba(3,34,25,.985),
            rgba(1,18,13,.99)
        );

    border-left:
        1px solid
        rgba(
            220,
            178,
            65,
            .28
        );

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

    transform:
        translateX(
            100%
        );

    transition:
        transform .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


.tcp-panel-overlay.is-open
.tcp-panel {
    transform:
        translateX(
            0
        );
}


.tcp-panel-close {
    position: absolute;

    top: 26px;
    right: 28px;

    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #fff;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;
}


.tcp-panel-eyebrow {
    margin-bottom: 18px;

    color: #e9b93e;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .18em;
}


.tcp-panel-title {
    margin:
        0 0 20px;

    color: #fff;

    font-size:
        clamp(
            34px,
            4vw,
            56px
        );

    line-height: .98;

    letter-spacing:
        -.045em;
}


.tcp-panel-text {
    max-width: 430px;

    margin:
        0 0 30px;

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

    font-size: 16px;

    line-height: 1.65;
}


.tcp-panel-items {
    margin-bottom: 34px;

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


.tcp-panel-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        17px 0;

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

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

    font-size: 14px;
}


.tcp-panel-dot {
    width: 7px;
    height: 7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        #e9b93e;

    box-shadow:
        0 0 0 6px
        rgba(
            233,
            185,
            62,
            .08
        );
}


.tcp-panel-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


.tcp-panel-primary,
.tcp-panel-secondary {
    min-height: 48px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        .06em;

    text-decoration: none;

    cursor: pointer;
}


.tcp-panel-primary {
    border:
        1px solid
        #e9b93e;

    background:
        #e9b93e;

    color:
        #07150f;
}


.tcp-panel-secondary {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .24
        );

    background:
        transparent;

    color: #fff;
}


/* ---------------------------------------------------------------
   TABLET
   --------------------------------------------------------------- */

@media (
    max-width: 991px
) {

    .tcp-video,
    .tcp-photo {
        object-position:
            68% center
            !important;

        background-position:
            68% center
            !important;
    }

}


/* ---------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------- */

@media (
    max-width: 767px
) {

    .tcp-hero {
        min-height:
            100svh;
    }


    .tcp-nav {
        left: 14px !important;

        right: 14px !important;

        width: auto !important;

        max-width: none !important;
    }


    .tcp-nav-links {
        display:
            none
            !important;
    }


    .tcp-nav-cta {
        min-height:
            38px !important;

        padding:
            0 14px
            !important;

        font-size:
            9px
            !important;
    }


    .tcp-title {
        max-width:
            92vw;

        font-size:
            clamp(
                42px,
                12vw,
                64px
            ) !important;

        line-height:
            .94 !important;
    }


    .tcp-lead {
        max-width:
            88vw;

        font-size:
            17px !important;

        line-height:
            1.3 !important;
    }


    .tcp-copy {
        max-width:
            88vw !important;
    }


    .tcp-actions {
        width:
            min(
                100%,
                360px
            );

        display: flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            10px;
    }


    .tcp-actions
    .tcp-btn {
        width: 100%;

        justify-content:
            center;
    }


    .tcp-side-mark {
        display:
            none
            !important;
    }


    .tcp-video,
    .tcp-photo {
        object-position:
            72% center
            !important;

        background-position:
            72% center
            !important;
    }


    .tcp-panel {
        width: 100vw;

        padding:
            74px 26px 32px;

        border-left: 0;
    }


    .tcp-panel-title {
        font-size:
            clamp(
                34px,
                10vw,
                48px
            );
    }


    .tcp-panel-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .tcp-panel-primary,
    .tcp-panel-secondary {
        width: 100%;
    }


    .urigon-wa-float {
        right:
            12px
            !important;

        bottom:
            12px
            !important;

        transform:
            scale(.90);

        transform-origin:
            right bottom;
    }

}


/* ---------------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------------- */

@media (
    max-width: 420px
) {

    .tcp-video,
    .tcp-photo {
        object-position:
            74% center
            !important;

        background-position:
            74% center
            !important;
    }


    .tcp-panel {
        padding-left:
            20px;

        padding-right:
            20px;
    }

}