body {
            font-family: 'Inter', sans-serif;
        }

body.softtrade-menu-open {
    overflow: hidden;
}

.softtrade-landing {
    --softtrade-blue: #0057ff;
    --softtrade-sky: #4fc3f7;
    --softtrade-ash: #f2f4f7;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    color: white;
    background: #061633;
}

.softtrade-bg,
.softtrade-bg-slide,
.softtrade-bg-overlay,
.softtrade-bg-video {
    position: absolute;
    inset: 0;
}

.softtrade-bg {
    z-index: -2;
    overflow: hidden;
    background: #041027;
}

.softtrade-bg-slide {
    opacity: 0;
    transform: scale(1.06);
    background-position: center;
    background-size: cover;
    filter: saturate(1.05) contrast(1.04);
    transition: opacity 1.2s ease, transform 7s ease, filter 1.2s ease;
}

.softtrade-bg-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.softtrade-bg-slide--video {
    background: none !important;
}

/* Slide Caption Styles */
.softtrade-slide-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    text-align: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
    width: 90%;
    max-width: 56.25rem;
    pointer-events: none;
}

.softtrade-landing.is-showing-slogan .softtrade-bg-slide.is-active .softtrade-slide-caption {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

.softtrade-slide-service {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #60a5fa; /* Tailwind blue-400 */
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.softtrade-slide-slogan {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 0 4px 16px rgba(0,0,0,0.9);
}

@media (max-width: 768px) {
    .softtrade-slide-slogan {
        font-size: 2rem;
    }
}

.softtrade-bg-video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.softtrade-bg-video {
    opacity: 0.15;
    background:
        radial-gradient(circle at 18% 18%, rgba(79, 195, 247, 0.20), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(0, 87, 255, 0.15), transparent 30%),
        linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, 0.10) 48%, transparent 56% 100%);
    mix-blend-mode: screen;
    animation: softtradeDataSweep 11s ease-in-out infinite alternate;
}

.softtrade-bg-overlay {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 11, 34, 0.60), rgba(5, 24, 62, 0.30), rgba(3, 9, 24, 0.60)),
        linear-gradient(180deg, rgba(0, 87, 255, 0.12), rgba(0, 0, 0, 0.15));
}

.softtrade-nav {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(73.75rem, calc(100% - 40px));
    min-height: 86px;
    margin: 0 auto;
}

.softtrade-brand,
.softtrade-menu-button,
.softtrade-menu-link,
.softtrade-card,
.softtrade-primary-button,
.softtrade-secondary-button {
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

.softtrade-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: white;
    text-decoration: none;
}

.softtrade-brand strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.softtrade-brand small {
    display: block;
    margin-top: 0.26rem;
    color: rgba(242, 244, 247, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.softtrade-logo,
.softtrade-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: linear-gradient(135deg, rgba(0, 87, 255, 0.92), rgba(79, 195, 247, 0.88));
    box-shadow: 0 18px 40px rgba(0, 87, 255, 0.32);
}

.softtrade-logo {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 1rem;
}

.softtrade-menu-glyph,
.softtrade-control-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.softtrade-menu-button:has(svg) .softtrade-menu-glyph,
.softtrade-carousel-control:has(svg) .softtrade-control-glyph {
    display: none;
}

.softtrade-menu-button,
.softtrade-carousel-control,
.softtrade-logo,
.softtrade-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.softtrade-menu-button svg,
.softtrade-carousel-control svg,
.softtrade-logo svg,
.softtrade-card-icon svg {
    display: block !important;
    margin: 0 !important;
    position: relative !important;
}

.softtrade-menu-glyph,
.softtrade-control-glyph {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.softtrade-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: white;
    font-weight: 700;
    backdrop-filter: none;
    box-shadow: none;
    cursor: pointer;
}

.softtrade-menu-glyph {
    font-size: 1.55rem;
    font-weight: 800;
}

.softtrade-secondary-button:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
}

.softtrade-menu-button:hover {
    transform: translateY(-2px) scale(1.12);
    color: var(--softtrade-sky);
    background: transparent;
    box-shadow: none;
}

.softtrade-content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: center;
    justify-items: center;
    width: min(67.5rem, calc(100% - 120px));
    flex: 1;
    margin: 0 auto;
    padding: 0 0 4rem;
    min-width: 0;
    transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

.softtrade-content.is-transitioning {
    /* Container blur/fade disabled to allow cards to instantly disappear and animate back */
}

/* Instantly hide cards during background change */
.softtrade-content.cards-out .softtrade-card {
    opacity: 0 !important;
    transform: scale(0.7) translateY(50px) !important;
    transition: none !important;
    pointer-events: none !important;
}

/* Staggered entrance animation when cards return */
.softtrade-content.cards-stagger-in .softtrade-card {
    pointer-events: none; /* Disable hovering during animation */
}

.softtrade-content.cards-stagger-in .softtrade-service-grid .softtrade-card:nth-child(1) {
    animation: softtradeCardBlum 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0s;
}

.softtrade-content.cards-stagger-in .softtrade-service-grid .softtrade-card:nth-child(2) {
    animation: softtradeCardBlum 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.18s;
}

.softtrade-content.cards-stagger-in .softtrade-action-card {
    animation: softtradeCardBlum 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.36s;
}

@keyframes softtradeCardBlum {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.softtrade-hero-copy {
    max-width: 32.5rem;
}

.softtrade-eyebrow,
.softtrade-card-kicker {
    color: var(--softtrade-sky);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.softtrade-hero-copy h1 {
    margin: 0.7rem 0 1rem;
    font-size: clamp(2.4rem, 4.25vw, 4.35rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.075em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.softtrade-hero-copy p:not(.softtrade-eyebrow) {
    max-width: 44rem;
    color: rgba(242, 244, 247, 0.82);
    font-size: clamp(1rem, 1.4vw, 1.17rem);
    line-height: 1.75;
}

.softtrade-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.65rem);
    width: 100%;
}

.softtrade-card {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1.75rem;
    background: 
        linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)),
        rgba(6, 22, 51, 0.88);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(24px);
    color: white;
    text-decoration: none;
    transform-style: preserve-3d;
    will-change: transform;
}

.softtrade-service-card {
    display: flex;
    min-height: 330px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1.5rem, 2.4vw, 2.35rem);
}

.softtrade-card:hover {
    transform: perspective(900px) translateY(-10px) rotateX(4deg) rotateY(-4deg);
    border-color: rgba(79, 195, 247, 0.62);
    box-shadow: 0 34px 90px rgba(0, 87, 255, 0.25);
}

.softtrade-service-card:nth-child(2):hover {
    transform: perspective(900px) translateY(-10px) rotateX(4deg) rotateY(4deg);
}

.softtrade-card-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.4rem;
    border-radius: 1.375rem;
}

.softtrade-service-card strong {
    margin: 0.2rem 0 0.75rem;
    font-size: clamp(2rem, 3vw, 2.8rem);
    letter-spacing: -0.045em;
}

.softtrade-service-card span:not(.softtrade-card-icon):not(.softtrade-card-kicker) {
    color: rgba(242, 244, 247, 0.78);
    max-width: 26rem;
    line-height: 1.65;
}

.softtrade-service-card em {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.4rem;
    color: white;
    font-style: normal;
    font-weight: 800;
}


.softtrade-action-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    margin-top: 0.25rem;
    padding: clamp(3rem, 5.5vw, 4.8rem);
}

.softtrade-action-buttons {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
}

.softtrade-landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 250px;
    padding: 1.25rem 2.5rem;
    font-weight: 800;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    border-radius: 1.75rem;
    background: #ffffff !important;
    color: #061633 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 12px 36px rgba(0, 87, 255, 0.15);
}

.softtrade-landing-button:hover {
    background: #f8fafc !important;
    color: #0049d8 !important;
    border-color: rgba(79, 195, 247, 0.8) !important;
    box-shadow: 0 16px 48px rgba(0, 87, 255, 0.28);
}

.softtrade-landing-button:nth-child(2):hover {
    transform: perspective(900px) translateY(-10px) rotateX(4deg) rotateY(4deg);
}

.softtrade-primary-button,
.softtrade-secondary-button,
.softtrade-menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.softtrade-primary-button {
    min-width: 200px;
    padding: 0.9rem 1.8rem;
    background: white;
    color: var(--softtrade-blue);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    letter-spacing: -0.02em;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.softtrade-primary-button:hover {
    transform: translateY(-2px);
    color: #0049d8;
}

.softtrade-secondary-button {
    padding: 1rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: white;
}

.softtrade-carousel-control {
    position: absolute;
    top: 52%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.625rem;
    height: 3.625rem;
    transform: translateY(-50%);
    border: none;
    border-radius: 0;
    background: transparent;
    color: white;
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
    transition: transform 0.28s ease, color 0.28s ease;
}

.softtrade-carousel-control:hover {
    transform: translateY(-50%) scale(1.15);
    color: var(--softtrade-sky);
    background: transparent;
    box-shadow: none;
}

.softtrade-control-glyph {
    font-size: 3rem;
    font-weight: 300;
    margin-top: -0.2rem;
}

.softtrade-carousel-control.is-prev {
    left: clamp(1rem, 3vw, 3rem);
}

.softtrade-carousel-control.is-next {
    right: clamp(1rem, 3vw, 3rem);
}

.softtrade-menu {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    background: rgba(2, 8, 23, 0.58);
    backdrop-filter: blur(0);
    transition: opacity 0.28s ease, backdrop-filter 0.28s ease;
}

.softtrade-menu.is-open {
    pointer-events: auto;
    opacity: 1;
    backdrop-filter: blur(10px);
}

.softtrade-menu-panel {
    width: min(28.75rem, 100%);
    height: 100%;
    padding: 2rem 1.4rem;
    transform: translateX(100%);
    border-left: 1px solid rgba(79, 195, 247, 0.22);
    background:
        linear-gradient(180deg, rgba(0, 87, 255, 0.20), transparent 34%),
        rgba(5, 18, 45, 0.86);
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(26px);
    transition: transform 0.34s cubic-bezier(.2,.9,.2,1);
}

.softtrade-menu.is-open .softtrade-menu-panel {
    transform: translateX(0);
}

.softtrade-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    margin: 0 0 2rem auto;
    border: 1px solid rgba(79, 195, 247, 0.40);
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, 0.12);
}

.softtrade-menu-panel h2 {
    margin: 0.65rem 0 2rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1;
}

.softtrade-menu-actions {
    display: grid;
    gap: 0.75rem;
}

.softtrade-menu-link {
    justify-content: flex-start;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    color: white;
    background: rgba(255, 255, 255, 0.10);
}

.softtrade-menu-link.is-primary,
.softtrade-menu-link:hover {
    border-color: rgba(79, 195, 247, 0.56);
    background: linear-gradient(135deg, var(--softtrade-blue), var(--softtrade-sky));
}

.softtrade-detail-page {
    --softtrade-blue: #0057ff;
    --softtrade-sky: #4fc3f7;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-y: auto;
    color: white;
    background: #061633;
}

.softtrade-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(79, 195, 247, 0.36);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: white;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(16px);
    transition: transform 0.28s ease, background 0.28s ease;
}

.softtrade-back-home:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
}

.softtrade-detail-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(55rem, calc(100% - 40px));
    min-height: calc(100vh - 96px);
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.softtrade-detail-card {
    width: 100%;
    padding: clamp(1.35rem, 3vw, 2.4rem);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2.125rem;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.dark .softtrade-detail-card,
.softtrade-detail-page .softtrade-detail-card {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #061633;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.30);
}

.softtrade-detail-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.softtrade-detail-heading h1 {
    margin: 0.2rem 0 0;
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.softtrade-detail-summary {
    max-width: 53.75rem;
    color: rgba(242, 244, 247, 0.86);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.75;
}

.softtrade-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.softtrade-detail-grid section {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.08);
}

.softtrade-detail-grid h2 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.softtrade-detail-grid ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(242, 244, 247, 0.78);
    line-height: 1.6;
}

.softtrade-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

@keyframes softtradeDataSweep {
    from {
        transform: translate3d(-4%, -2%, 0) scale(1.02);
    }
    to {
        transform: translate3d(5%, 3%, 0) scale(1.08);
    }
}

@media (min-width: 1025px) {
    .softtrade-landing {
        height: 100vh;
    }
}

@media (max-width: 1024px) {
    .softtrade-landing {
        height: 100vh;
        overflow: hidden;
    }

    .softtrade-content {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 1rem 0 2.5rem;
    }

    .softtrade-action-card {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    html,
    body,
    #app,
    #wrapper,
    .softtrade-landing {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .softtrade-landing {
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .softtrade-nav {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        min-height: 60px;
        padding: 0;
    }

    .softtrade-content {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        flex: 1;
        gap: 0.75rem;
        padding: 0 0 1.5rem;
        min-height: 0;
    }

    .softtrade-brand small {
        display: none;
    }

    /* Keep service cards side by side in 2 columns — compact and balanced */
    .softtrade-service-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
        width: 100%;
    }

    .softtrade-hero-copy,
    .softtrade-card,
    .softtrade-service-grid,
    .softtrade-action-card {
        min-width: 0;
        max-width: 100%;
    }

    .softtrade-hero-copy h1 {
        font-size: clamp(2rem, 10.2vw, 2.55rem);
        line-height: 1;
        letter-spacing: -0.06em;
        text-wrap: wrap;
        max-width: 100%;
    }

    .softtrade-content > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Compact service cards — no excess height */
    .softtrade-service-card {
        min-height: 0;
        padding: 1.1rem 0.85rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        border-radius: 1.25rem;
    }

    .softtrade-service-card span:not(.softtrade-card-icon):not(.softtrade-card-kicker) {
        display: block;
        font-size: 0.68rem;
        line-height: 1.4;
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
    }

    .softtrade-service-card strong {
        font-size: 1.05rem;
        margin: 0;
        letter-spacing: -0.03em;
    }

    .softtrade-card-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        border-radius: 0.75rem;
    }

    .softtrade-service-card em {
        margin: 0.15rem 0 0 0;
        font-size: 0.72rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
    }

    .softtrade-service-card em svg,
    .softtrade-service-card em i {
        width: 0.7rem;
        height: 0.7rem;
    }

    /* Compact action card — horizontal buttons side by side */
    .softtrade-action-card {
        padding: 0.75rem;
        border-radius: 1.25rem;
        margin-top: 0;
    }

    .softtrade-action-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.625rem;
        align-items: stretch;
        width: 100%;
    }

    .softtrade-landing-button {
        min-width: 0;
        flex: 1;
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
        font-weight: 800;
        border-radius: 1rem;
        gap: 0.5rem;
        justify-content: center;
    }

    .softtrade-landing-button svg,
    .softtrade-landing-button i {
        width: 1.15rem;
        height: 1.15rem;
    }

    /* Carousel controls — tighter to edges */
    .softtrade-carousel-control {
        width: 2.5rem;
        height: 2.5rem;
    }

    .softtrade-carousel-control.is-prev {
        left: 0.25rem;
    }

    .softtrade-carousel-control.is-next {
        right: 0.25rem;
    }

    .softtrade-carousel-control svg,
    .softtrade-carousel-control i {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Slogan text — smaller on mobile */
    .softtrade-slide-slogan {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    .softtrade-slide-service {
        font-size: 0.7rem;
        letter-spacing: 0.25em;
        margin-bottom: 0.5rem;
    }

    .softtrade-primary-button,
    .softtrade-secondary-button {
        width: 100%;
    }

    .softtrade-menu-panel {
        width: 100%;
    }

    /* Overlay — stronger bottom gradient for readability over video */
    .softtrade-bg-overlay {
        background:
            linear-gradient(180deg,
                rgba(2, 11, 34, 0.35) 0%,
                rgba(5, 24, 62, 0.20) 40%,
                rgba(3, 9, 24, 0.75) 75%,
                rgba(2, 8, 20, 0.92) 100%),
            linear-gradient(90deg, rgba(2, 11, 34, 0.40), rgba(5, 24, 62, 0.15), rgba(3, 9, 24, 0.40));
    }
}

        .dark .nav-link.active {
           background: #5b21b6 !important; /* violet-700 */
        font-weight: 600; 
        position: relative;
        padding-left: 1.5rem !important;
        color: #f5f3ff !important; /* light text */
        }
        .nav-link.active-link:before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px; 
        height: 100%;
        width: 4px;
        background-color: #a78bfa; /* violet-400 accent */
        border-radius: 9999px;
    }
    #aside.sidebar-collapsed .nav-link.active-link:before { width: 0; }

    #aside {
        width: 16rem;
        min-width: 16rem;
        transition: width 0.32s cubic-bezier(.2,.9,.2,1), transform 0.32s ease, opacity 0.2s ease;
        will-change: width, transform;
        overflow: hidden;
    }

    /* Collapsed/hidden State: fully hide the sidebar (default UX requested) */
    #aside.sidebar-collapsed {
        width: 0 !important;
        min-width: 0 !important;
        transform: translateX(-6px);
        opacity: 0;
    }
    #aside.sidebar-collapsed .sidebar-text,
    #aside.sidebar-collapsed .sidebar-header h1 span,
    #aside.sidebar-collapsed nav,
    #aside.sidebar-collapsed .p-4 {
        opacity: 0;
        width: 0;
        max-width: 0;
        overflow: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, width 0.22s ease;
    }
    #aside.sidebar-collapsed .nav-link {
        justify-content: flex-start;
        padding-left: 0.75rem !important; 
        padding-right: 0.75rem !important; 
    }

    /* Mobile Responsive Fixes: use slide-out panel */
    @media (max-width: 768px) {
        #aside {
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            transform: translateX(-100%);
            box-shadow: 2px 0 8px rgba(0,0,0,0.35);
            transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
        }
        #aside.sidebar-open {
            transform: translateX(0);
        }
        /* When mobile open, enforce full width */
        #aside.sidebar-open {
             width: 16rem; 
             min-width: 16rem;
             opacity: 1;
        }
    }

        .nav-link.active i {
            color: #6d28d9;
        }

        .dark .nav-link.active i {
            color: #e0e7ff;
        }

        .nav-link {
            padding-left: calc(1.25rem - 3px);
        }
        
        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #a78bfa;
            border-radius: 20px;
        }

        .glass-button {
            background: rgba(238, 235, 255, 0.3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(196, 181, 253, 0.4);
            border-radius: 0.75rem;
            transition: color 0.3s;
            position: relative;
            overflow: hidden;
        }

        .dark .glass-button {
            background: rgba(49, 46, 129, 0.3);
            border: 1px solid rgba(129, 140, 248, 0.3);
        }

        .glass-button .btn-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #8b5cf6;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1;
        }

        .glass-button:hover .btn-bg {
            opacity: 1;
        }

        .glass-button:hover .button-content {
            color: white;
        }

        .glass-button .button-content {
            position: relative;
            z-index: 2;
            transition: color 0.3s;
        }

.fade {
  animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}







/* ==== Sidebar Base ==== */
#aside {
    width: 16.25rem;
    min-width: 16.25rem;
    transition: width 0.3s ease, left 0.3s ease, background 0.3s ease;
    height: 78vh;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 15px rgba(70, 76, 156, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==== Collapsed Sidebar ==== */
.sidebar-collapsed {
    width: 5rem !important;
    min-width: 5rem !important;

}

.sidebar-collapsed .nav-link {
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 0 !important;
    margin: 10px 0;
    width: 100%;
    text-align: center;
}

.sidebar-collapsed .nav-link i {
    margin: 0 !important;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sidebar-collapsed .nav-link:hover {
    transform: scale(1.1);
}



/* ==== Text + Hideable Sections ==== */
.sidebar-collapsed .sidebar-text,
.sidebar-collapsed .sidebar-hideable {
    display: none !important;
}

/* ==== Icon & Nav Styling ==== */
.nav-link {
    position: relative;
    /* display: flex; */
    /* align-items: center; */
    gap: 12px;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 10px 18px;
    margin: 3px 10px;
    transition: all 0.3s ease;
}





/* Icons */
.nav-link i {
    
    transition: color 0.3s ease, transform 0.3s ease;
}
.nav-link:hover i {
    transform: scale(1.1);
}

/* ==== Collapsed State ==== */
.sidebar-collapsed .nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 8px 0;
}
.sidebar-collapsed .nav-link i {
    margin: 0 !important;
    font-size: 1.3rem;
}

/* ==== Sidebar Header ==== */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header h1 {
    font-size: 1.8rem;
    font-weight: 800;
   justify-content: center;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.sidebar-collapsed .sidebar-header h1 {
    opacity: 0;
}




/* ==== Bottom Section (Mobile App Box) ==== */
#aside .mt-6 {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    transition: background 0.3s ease;
}
#aside .mt-6:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* ==== Scrollbar ==== */
#aside::-webkit-scrollbar {
    width: 5px;
}
#aside::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.5);
    border-radius: 0.25rem;
}

/* ==== Animation ==== */
.animate-fadeIn {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== New layout polish ===== */
header#header {
/* Toggle styles removed (no internal sidebar toggle button) */

/* Card wrapper for page sections (use in page templates) */
.page-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06);
    padding: 18px;
}

.dark .page-card {
    background: linear-gradient(180deg, rgba(17,24,39,0.6), rgba(15,23,42,0.55));
}

/* Footer content spacing */
#footer .mt-2, #footer .space-x-4 { gap: 1rem }

/* Make header injection area look crisp if components replace header entirely */
#header { padding: 0.6rem 0; }

/* Small responsiveness improvements for header */
@media (max-width: 640px) {
    #header .max-w-7xl { padding-left: 0.75rem; padding-right: 0.75rem }
}

/* Brand mark styles */
.brand-mark { background: linear-gradient(135deg,#7c3aed,#10b981); }
.brand-mark i { transform: translateY(1px); }

@media (max-width: 640px) {
    .brand-mark { width: 2.5rem; height: 2.5rem }
    #header .hidden.sm\:block { display: none !important }
}

/* Header toggle button styling */
#header .p-2.rounded-md {
    border-radius: 0.5rem;
}

/* Reduce header vertical padding and tighten layout */
header#header .max-w-7xl { padding-top: 6px; padding-bottom: 6px }
header#header .h-16 { min-height: 56px }

/* Align brand to far right and make it crisp */
.brand-mark { background: linear-gradient(135deg,#7c3aed,#06b6d4); box-shadow: 0 6px 18px rgba(99,102,241,0.12); }

/* Profile area spacing */
.group .w-10.h-10 { border: 1px solid rgba(0,0,0,0.04) }

}

/* ============================
   Service Selection Cards
   ============================ */

.st-service-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1.75rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)), rgba(6,22,51,0.88);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    text-decoration: none;
    color: white;
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.st-service-select-card:hover {
    transform: translateY(-6px);
    border-color: rgba(79,195,247,0.5);
    box-shadow: 0 32px 80px rgba(0,87,255,0.2);
}

.st-service-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.375rem;
}

.st-service-select-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--softtrade-blue), var(--softtrade-sky));
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.st-service-select-card:hover .st-service-select-cta {
    transform: scale(1.05);
}

/* ============================
   Form Wizard — Progress Bar
   ============================ */

.st-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dark .st-progress-bar,
.softtrade-detail-page .st-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.st-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--softtrade-blue), var(--softtrade-sky));
    transition: width 0.45s cubic-bezier(.4, 0, .2, 1);
}

/* ============================
   Form Wizard — Step Nav Dots
   ============================ */

.st-step-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.st-step-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
    transition: all 0.28s ease;
}

.dark .st-step-dot,
.softtrade-detail-page .st-step-dot {
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
}

.st-step-dot.is-done {
    border-color: rgba(13, 148, 136, 0.3);
    color: rgba(13, 148, 136, 0.8);
    cursor: pointer;
}

.dark .st-step-dot.is-done,
.softtrade-detail-page .st-step-dot.is-done {
    border-color: rgba(79, 195, 247, 0.3);
    color: rgba(79, 195, 247, 0.7);
}

.st-step-dot.is-active {
    border-color: rgba(0, 87, 255, 0.5);
    background: linear-gradient(135deg, rgba(0, 87, 255, 0.1), rgba(79, 195, 247, 0.08));
    color: rgba(0, 87, 255, 1);
}

.dark .st-step-dot.is-active,
.softtrade-detail-page .st-step-dot.is-active {
    border-color: rgba(79, 195, 247, 0.6);
    background: linear-gradient(135deg, rgba(0, 87, 255, 0.25), rgba(79, 195, 247, 0.15));
    color: white;
}

.st-step-label {
    display: none;
}

.st-step-dot.is-active .st-step-label {
    display: inline;
}

@media (min-width: 768px) {
    .st-step-label { display: inline; }
}

/* ============================
   Form Wizard — Steps & Fields
   ============================ */

.st-form-step {
    display: none;
}

.st-form-step.is-active {
    display: block;
    animation: stFadeIn 0.35s ease;
}

@keyframes stFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.st-form-step-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .st-form-step-title,
.softtrade-detail-page .st-form-step-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.st-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.st-form-grid .col-span-2 {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .st-form-grid { grid-template-columns: 1fr; }
    .st-form-grid .col-span-2 { grid-column: span 1; }
}

.st-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.st-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dark .st-field label,
.softtrade-detail-page .st-field label {
    color: rgba(255, 255, 255, 0.7);
}

.st-req {
    color: #f87171;
}

.st-field input,
.st-field select,
.st-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.875rem;
    background: white;
    color: #0f172a;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dark .st-field input,
.dark .st-field select,
.dark .st-field textarea,
.softtrade-detail-page .st-field input,
.softtrade-detail-page .st-field select,
.softtrade-detail-page .st-field textarea {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #030d22;
    color: white;
}

.st-field input:focus,
.st-field select:focus,
.st-field textarea:focus {
    border-color: rgba(0, 87, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.1);
}

.dark .st-field input:focus,
.dark .st-field select:focus,
.dark .st-field textarea:focus,
.softtrade-detail-page .st-field input:focus,
.softtrade-detail-page .st-field select:focus,
.softtrade-detail-page .st-field textarea:focus {
    border-color: rgba(79, 195, 247, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.15);
}

.st-field input::placeholder,
.st-field textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.dark .st-field input::placeholder,
.dark .st-field textarea::placeholder,
.softtrade-detail-page .st-field input::placeholder,
.softtrade-detail-page .st-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.st-field select option {
    background: white;
    color: #0f172a;
}

.dark .st-field select option,
.softtrade-detail-page .st-field select option {
    background: #0a1e3d;
    color: white;
}

.st-field-error {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
}

.st-error-msg {
    font-size: 0.72rem;
    color: #f87171;
    margin-top: 0.15rem;
}

.st-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.dark .st-check-row,
.softtrade-detail-page .st-check-row {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.st-check-row:hover {
    border-color: rgba(0, 87, 255, 0.35);
}

.dark .st-check-row:hover,
.softtrade-detail-page .st-check-row:hover {
    border-color: rgba(79, 195, 247, 0.35);
}

/* ============================
   Form Wizard — Navigation
   ============================ */

.st-form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    gap: 1rem;
}

.dark .st-form-nav,
.softtrade-detail-page .st-form-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.st-form-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.st-form-nav-btn:hover {
    transform: translateY(-2px);
}

.st-form-nav-btn.is-primary {
    background: linear-gradient(135deg, var(--softtrade-blue), var(--softtrade-sky));
    color: white;
    box-shadow: 0 8px 24px rgba(0,87,255,0.25);
}

.st-form-nav-btn.is-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: #334155;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark .st-form-nav-btn.is-secondary,
.softtrade-detail-page .st-form-nav-btn.is-secondary {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}

.st-form-nav-btn.is-submit {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 8px 24px rgba(16,185,129,0.25);
}

/* ============================
   Identity Verification Components
   ============================ */

.st-verify-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
}

.st-verify-input-group input {
    flex: 1;
    margin-bottom: 0 !important;
}

.st-verify-btn {
    padding: 0 1.25rem;
    border-radius: 0.75rem;
    background: rgba(79, 195, 247, 0.12);
    border: 1px solid rgba(79, 195, 247, 0.3);
    color: #4fc3f7;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}

.st-verify-btn:hover:not(:disabled) {
    background: rgba(79, 195, 247, 0.22);
    border-color: rgba(79, 195, 247, 0.5);
    transform: translateY(-1px);
}

.st-verify-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.st-verify-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    margin-top: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    animation: stFadeIn 0.25s ease-out both;
}

.st-verify-status.is-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
}

.st-verify-status.is-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
}

.st-verify-status.is-pending {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}

.st-verify-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: stSpin 0.6s linear infinite;
    display: inline-block;
}

@keyframes stFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 1600px) {
    html {
        font-size: 1vw;
    }
}