/********** Template CSS **********/
/* Global Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Evitar desbordamiento horizontal (la página se "encogía" en móvil) */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Botón flotante de WhatsApp: oculto hasta bajar 10% */
.wa__btn_popup {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.wa__btn_popup.wa-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

:root {
    --primary: #FD5D14;
    --secondary: #FDBE33;
    --light: #F4F6F8;
    --dark: #040F28;
}

.pt-6 {
    padding-top: 90px;
}

.pb-6 {
    padding-bottom: 90px;
}

/* Content sections lateral spacing (10% on each side) */
#about,
#services,
#contact {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

@media (max-width: 991.98px) {

    #about,
    #services,
    #contact {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

.py-6 {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* Enhanced Button */
.btn {
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
    border-radius: 10px;
    overflow: hidden;
}

.btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 5px;
    bottom: -1px;
    left: 50%;
    background: var(--primary);
    transition: .5s;
}

.btn.btn-primary::after {
    background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
    width: 50%;
    left: 25%;
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 15px rgba(253, 93, 20, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(45deg, var(--secondary), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(253, 93, 20, 0.6);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -22px;
    border-radius: 0;
    z-index: 99;
    display: none;
    opacity: 0.5
}

.bg-dark-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

.bg-light-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

/* --- ELEGANT SIDEBAR MENU --- */
.sidebar {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 65px;
    background: linear-gradient(135deg, rgba(15, 25, 50, 0.9) 0%, rgba(5, 10, 30, 0.95) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1000;
    border-radius: 36px;
    padding: 25px 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sidebar:hover {
    width: 200px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(253, 93, 20, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(253, 93, 20, 0.2);
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sidebar ul li {
    position: relative;
    width: 100%;
}

.sidebar ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
}

/* Elegant hover indicator */
.sidebar ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 24px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 0 3px 3px 0;
    transition: transform 0.3s ease;
}

.sidebar ul li a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.sidebar:hover ul li a {
    justify-content: flex-start;
    padding-left: 24px;
}

.sidebar ul li a i {
    font-size: 23px;
    color: var(--primary);
    transition: all 0.3s ease;
    opacity: 0.9;
    width: 65px;
    min-width: 65px;
    text-align: center;
}

.sidebar ul li a:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(253, 93, 20, 0.1) 0%, transparent 100%);
}

.sidebar ul li a:hover i {
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(253, 93, 20, 0.6));
}

.sidebar ul li a .link-text {
    margin-left: 0;
    /* Reset margin when collapsed */
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
}

.sidebar:hover ul li a .link-text {
    margin-left: 10px;
    /* Add margin only when expanded */
    opacity: 1;
    max-width: 150px;
}

/* Subtle separator lines */
.sidebar ul li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.sidebar:hover ul li:not(:last-child)::after {
    width: 80%;
}

.sidebar ul li:nth-child(4) a {
    transition-delay: 0.09s;
}

.sidebar ul li:nth-child(5) a {
    transition-delay: 0.12s;
}

/* --- MOBILE MENU OVERLAY --- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(4, 15, 40, 0.98);
        backdrop-filter: blur(20px);
        z-index: 2000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 60px;
        padding-top: 80px;
        /* Animation properties */
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.4s ease-out, opacity 0.3s ease-out;
        display: flex;
        /* Always flex, visibility controlled by transform */
    }

    .navbar-collapse.show {
        transform: translateY(0);
        opacity: 1;
    }

    .navbar-collapse:not(.show):not(.collapsing) {
        visibility: hidden;
        /* Fully hide when closed */
    }

    .navbar-nav {
        text-align: center;
        width: 100%;
    }

    .navbar-nav .nav-link {
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff !important;
        padding: 18px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: color 0.3s, transform 0.3s;
        display: block;
    }

    .navbar-nav .nav-link i {
        color: var(--primary);
        margin-right: 12px;
        font-size: 23px;
    }

    .navbar-nav .nav-link:hover {
        color: var(--primary) !important;
        transform: scale(1.05);
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* --- TOGGLER: hamburguesa <-> X --- */
.navbar-toggler {
    z-index: 2002;
    border: none;
    outline: none;
    padding: 0;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(253, 93, 20, 0.15);
    border: 1px solid rgba(253, 93, 20, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler .toggler-icon-open,
.navbar-toggler .toggler-icon-close {
    color: #fff;
    font-size: 20px;
    transition: all 0.3s ease;
}

/* Por defecto (menú cerrado): mostrar hamburguesa, ocultar X */
.navbar-toggler .toggler-icon-close {
    display: none;
}

/* Menú abierto (Bootstrap quita .collapsed): mostrar X, ocultar hamburguesa */
.navbar-toggler:not(.collapsed) {
    background: var(--primary);
    border-color: var(--primary);
}

.navbar-toggler:not(.collapsed) .toggler-icon-open {
    display: none;
}

.navbar-toggler:not(.collapsed) .toggler-icon-close {
    display: inline-block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- TOP NAVBAR REDESIGN --- */
.navbar {
    transition: all 0.4s ease;
    background: rgba(4, 15, 40, 0.85) !important;
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar-brand h2 {
    font-weight: 700;
    letter-spacing: 1px;
}

.navbar-dark .navbar-nav .nav-link {
    /* Hide top links on larger screens as we have sidebar */
    padding: 25px 15px;
    font-size: 16px;
    font-weight: 600;
}

@media (min-width: 992px) {
    /* Hide main navigation in top bar if we move it to sidebar, 
       BUT user wants "redesign top menu". Let's keep distinct items.
       Let's hide standard nav links in Topbar but keep Action buttons like Login */
}

/* Carousel — descontamos navbar (~70px) y stats bar (~110px) */
.carousel,
.carousel-inner,
.carousel-item {
    height: calc(100vh - 70px);
}

.carousel-item img {
    height: calc(100vh - 70px);
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    background: rgba(4, 15, 40, .6);
    top: 0;
    bottom: 110px; /* espacio para stats overlay */
    left: 0;
    right: 0;
    z-index: 1;
}

/* Service Item */
.service-item {
    transition: all 0.3s ease-in-out;
    border-radius: 15px;
    overflow: hidden;
    border-bottom: 3px solid transparent;
}

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: var(--primary);
}

/* Image wrapper: fixed height, icon centered at bottom edge */
.service-img-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-img-wrap img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.service-item .service-icon {
    position: relative;
    margin-top: -44px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
    z-index: 1;
}

.service-item:hover .service-icon {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(253, 93, 20, 0.35);
}

.service-item .service-icon i {
    transition: all 0.25s ease;
}

.service-item:hover .service-icon i {
    color: #fff !important;
}

/* Portfolio Hover */
.portfolio-item {
    margin-bottom: 60px;
}

.portfolio-title {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    padding: 0 30px;
    right: 30px;
    left: 30px;
    bottom: -60px;
    background: #FFFFFF;
    z-index: 3;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.portfolio-btn {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    font-size: 120px;
    line-height: 0;
    transition: .1s;
    transition-delay: .3s;
    z-index: 2;
    opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    transition: .5s;
    z-index: 1;
    background: rgba(4, 15, 40, .7);
}

.portfolio-box::before {
    left: 0;
}

.portfolio-box::after {
    right: 0;
}

.portfolio-item:hover .portfolio-box::before,
.portfolio-item:hover .portfolio-box::after {
    width: 50%;
}

/* ========== CONTACT SECTION ========== */
.contact-info-panel {
    background: linear-gradient(145deg, var(--dark) 0%, #0b1f50 100%);
    position: relative;
    overflow: hidden;
}

.contact-info-panel::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(253,93,20,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.contact-info-panel::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(253,190,51,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ls-wide {
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(253,93,20,0.12);
    border: 1px solid rgba(253,93,20,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
    background: rgba(253,93,20,0.25);
    border-color: var(--primary);
}

.contact-form-panel {
    background: #fff;
}

@media (min-width: 992px) {
    .contact-form-panel {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }
}

.contact-field {
    margin-bottom: 4px;
}

.contact-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
    margin-bottom: 6px;
    display: block;
}

.contact-input {
    border: none;
    border-bottom: 2px solid #e9ecef;
    border-radius: 0;
    padding: 12px 0;
    background: transparent;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.contact-input:focus {
    box-shadow: none;
    border-bottom-color: var(--primary);
    background: transparent;
}

.contact-input::placeholder {
    color: #bbb;
    font-size: 0.9rem;
}

textarea.contact-input {
    resize: none;
    padding-top: 10px;
}

@media (min-width: 992px) {
    body {
        padding-left: 0;
    }

    .testimonial,
    .contact-form {
        margin-left: -90px;
        box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .footer::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        background: var(--primary)
    }
}

.footer-shape::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 100%;
    top: 0;
    left: -40px;
    background: var(--primary);
    transform: skew(40deg);
}

.whatsapp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    display: none;
    box-shadow: 2px 2px 3px #999;
    transition: transform 0.3s;
}

.whatsapp:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
    margin-top: 13px;
}

/* ========== STATS OVERLAY (bottom of hero) ========== */
#home {
    position: relative;
}

.stats-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(4, 15, 40, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 2px solid rgba(253, 93, 20, 0.5);
    padding: 22px 0;
    height: 110px;
    display: flex;
    align-items: center;
}

.stats-overlay .row {
    width: 100%;
}

.stats-item {
    position: relative;
    padding: 6px 24px;
}

.stats-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.col-lg-3:last-child .stats-item::after {
    display: none;
}

.stats-overlay .counter-value {
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -1px;
}

.stats-overlay .small {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

@media (max-width: 767px) {
    /* Stats siguen superpuestos en la parte baja de la imagen */
    .stats-overlay {
        height: auto;
        padding: 12px 0;
    }
    .stats-overlay .row > div {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .stats-item {
        padding: 4px 8px;
    }
    .col-6:nth-child(2) .stats-item::after {
        display: none;
    }
    .stats-overlay .counter-value {
        font-size: 1.6rem;
    }
    .stats-overlay .small {
        font-size: 0.62rem;
        letter-spacing: 0.3px;
    }
    /* Dejar espacio para los 2 renglones de stats */
    .carousel-caption {
        bottom: 135px;
    }
}

/* ========== ABOUT SECTION ========== */
.about-img-wrap {
    position: relative;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(4, 15, 40, 0.18);
    max-width: 560px;
    margin: 0 auto;
}

.about-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid var(--primary);
    border-radius: 14px;
    transform: translate(14px, 14px);
    z-index: -1;
    opacity: 0.5;
}

.about-img-wrap img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.about-img-wrap:hover img {
    transform: scale(1.04);
}

/* ========== HOW IT WORKS + INDUSTRIES (split layout) ========== */
.how-panel {
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.06);
}

.industries-panel {
    background: var(--light);
}

.how-step-item {
    align-items: flex-start;
}

.how-connector {
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, var(--primary), rgba(253,93,20,0.15));
    margin-left: 30px;
    margin-bottom: 0;
    border-radius: 2px;
}

.how-icon {
    position: relative;
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, rgba(253,93,20,0.08), rgba(253,190,51,0.08));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(253,93,20,0.15);
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.how-icon-active,
.how-step-item:hover .how-icon {
    background: linear-gradient(135deg, rgba(253,93,20,0.15), rgba(253,190,51,0.15));
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(253,93,20,0.2);
}

.how-step {
    position: absolute;
    top: -7px;
    right: -7px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .how-panel {
        padding-left: 95px !important;
        padding-right: 60px !important;
    }
    .industries-panel {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

@media (max-width: 991.98px) {
    .how-panel {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
}

/* ========== INDUSTRIES ========== */
.industry-item {
    background: #fff;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    cursor: default;
}

.industry-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(253, 93, 20, 0.15);
}

.industry-item i {
    transition: transform 0.3s ease;
}

.industry-item:hover i {
    transform: scale(1.15);
}

/* ========== TESTIMONIALS ========== */
.testimonial-item {
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

.testimonial-item:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.owl-dots {
    text-align: center;
    margin-top: 25px;
}

.owl-dot span {
    width: 10px;
    height: 10px;
    background: #ddd !important;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    transition: background 0.3s;
}

.owl-dot.active span {
    background: var(--primary) !important;
}

/* ========== CTA BANNER ========== */
.cta-banner {
    background: linear-gradient(135deg, var(--dark) 0%, #0a1f55 50%, var(--dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(253,93,20,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(253,190,51,0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* ========== FAQ ========== */
.faq-item {
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.faq-button {
    font-weight: 600;
    color: var(--dark);
    background: #fff;
    border: none;
    font-size: 15px;
    padding: 18px 20px;
}

.faq-button:not(.collapsed) {
    color: var(--primary);
    background: #fff;
    box-shadow: none;
}

.faq-button::after {
    background: none;
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: var(--primary);
    width: auto;
    height: auto;
    transition: transform 0.3s;
}

.faq-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* ========== COOKIE CONSENT ========== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(4, 15, 40, 0.97);
    backdrop-filter: blur(10px);
    padding: 16px 30px;
    z-index: 9999;
    border-top: 1px solid rgba(253, 93, 20, 0.3);
    display: none;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}