/* =========================================================
   BYCODE THEME 2.0
   Tailwind Browser + Custom CSS
========================================================= */


/* =========================================================
   BYCODE DESIGN TOKENS
========================================================= */

@theme {
    --font-sans: "Poppins", sans-serif;

    --color-bycode-950: #082F49;
    --color-bycode-800: #075985;
    --color-bycode-500: #0EA5E9;
    --color-bycode-300: #7DD3FC;
    --color-bycode-100: #E0F2FE;

    --color-bycode-orange: #F59E0B;
    --color-bycode-orange-light: #FBBF24;

    --color-bycode-ink: #07131C;
    --color-bycode-mist: #F5F8FA;

    --shadow-by-soft:
        0 30px 100px rgba(8, 47, 73, .10);

    --shadow-by-card:
        0 40px 120px rgba(8, 47, 73, .16);

    --shadow-by-orange:
        0 20px 50px rgba(245, 158, 11, .25);
}

/* =========================================================
   BYCODE THEME SYSTEM
========================================================= */

:root {

    --by-page:
        #F7F9FA;

    --by-surface:
        rgba(255, 255, 255, .82);

    --by-surface-soft:
        #F0F7FC;

    --by-text:
        #082F49;

    --by-text-soft:
        #53657A;

    --by-border:
        rgba(8, 47, 73, .10);

    --by-nav:
        rgba(255, 255, 255, .82);

    --by-grid:
        rgba(8, 47, 73, .035);

}


/* =========================================================
   DARK
========================================================= */

html.by-dark {

    --by-page:
        #061722;

    --by-surface:
        rgba(9, 31, 45, .86);

    --by-surface-soft:
        #102F45;

    --by-text:
        #F7FBFF;

    --by-text-soft:
        rgba(255,255,255,.58);

    --by-border:
        rgba(255,255,255,.10);

    --by-nav:
        rgba(7, 27, 41, .86);

    --by-grid:
        rgba(125,211,252,.045);

}


html,
body {

    background:
        var(--by-page);

    color:
        var(--by-text);

}


body {

    transition:
        background-color .55s ease,
        color .55s ease;

}

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

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--by-page);
    font-family: "Poppins", sans-serif;
    color: var(--by-text);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
        background-color .55s ease,
        color .55s ease;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background: #0EA5E9;
    color: #fff;
}


/* =========================================================
   GENERAL
========================================================= */

.by-container {
    width: calc(100% - 36px);
    max-width: 1440px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .by-container {
        width: calc(100% - 64px);
    }
}


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

.by-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    color: #0EA5E9;
}

.by-label::before {
    content: "";

    width: 24px;
    height: 2px;

    background: currentColor;
}


/* =========================================================
   BUTTONS
========================================================= */

.by-btn {
    display: inline-flex;
    min-height: 56px;

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

    gap: 20px;

    padding: 0 28px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 600;

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

.by-btn:hover {
    transform: translateY(-4px);
}

.by-btn-orange {
    background: #F59E0B;
    color: #082F49;

    box-shadow:
        0 20px 50px rgba(245, 158, 11, .25);
}

.by-btn-orange:hover {
    background: #FBBF24;
}


/* =========================================================
   GLASS
========================================================= */

.by-glass {
    background: var(--by-nav);

    border:
        1px solid var(--by-border);

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

    transition:
        background-color .45s ease,
        border-color .45s ease;
}


/* =========================================================
   GSAP REVEALS
========================================================= */

.by-reveal {
    visibility: hidden;
}


/* =========================================================
   LENIS
========================================================= */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


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

.by-grid-background {
    background-image:
        linear-gradient(
            rgba(8, 47, 73, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 47, 73, .035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


/* =========================================================
   3D / PERSPECTIVE
========================================================= */

.by-perspective {
    perspective: 1400px;
}

.by-product-dashboard {
    transform:
        rotateX(5deg)
        rotateY(-9deg)
        rotateZ(1deg);
}

.by-phone-perspective {
    transform:
        rotateY(-6deg)
        rotateZ(5deg);
}


/* =========================================================
   PRODUCT STACK
========================================================= */

@media (min-width: 1024px) {

    .by-product-card {
        position: sticky;
        top: 115px;
    }

}


/* =========================================================
   MARQUEE
========================================================= */

.by-marquee-track {
    width: max-content;
}

@keyframes bycode-marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

.animate-marquee {
    animation:
        bycode-marquee
        35s
        linear
        infinite;
}


/* =========================================================
   FLOAT
========================================================= */

@keyframes bycode-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

}

.animate-float {
    animation:
        bycode-float
        6s
        ease-in-out
        infinite;
}


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

.by-mobile-panel {
    clip-path:
        inset(
            0
            0
            100%
            0
            round 32px
        );
}


/* =========================================================
   NOISE
========================================================= */

.by-noise::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .025;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='.4'/%3E%3C/svg%3E");
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--by-page);
}

::-webkit-scrollbar-thumb {
    background: #0EA5E9;
    border-radius: 20px;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   BYCODE V2 - EXTENDED COLOR TOKENS
========================================================= */

:root {
    --by-bg: var(--by-page);
    --by-surface-solid: #FFFFFF;
    --by-text-muted: #64748B;

    --by-shadow:
        0 18px 55px rgba(8, 47, 73, .08);
}


html.by-dark {
    color-scheme: dark;

    --by-bg: var(--by-page);
    --by-surface-solid: #0A2232;
    --by-text-muted: #9FB4C2;

    --by-shadow:
        0 20px 60px rgba(0, 0, 0, .26);
}



/* =========================================================
   NAV MODULE
========================================================= */

.by-nav-module {
    position: relative;

    background:
        var(--by-surface);

    border:
        1px solid var(--by-border);

    backdrop-filter:
        blur(22px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(150%);

    box-shadow:
        var(--by-shadow);

    transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


.by-nav-module::before {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    top: 0;

    height: 1px;

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

    opacity: .8;
}


html.by-dark
.by-nav-module::before {
    opacity: .15;
}


/* =========================================================
   NAV THEME
========================================================= */

.by-nav-module {

    background:
        var(--by-nav);

    border:
        1px solid
        var(--by-border);

    box-shadow:
        0 14px 50px
        rgba(8,47,73,.08);

    backdrop-filter:
        blur(22px);

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

    transition:
        background-color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


html.by-dark
.by-nav-module {

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

}

.by-nav-link {

    color:
        var(--by-text);

}


html.by-dark
.by-nav-link {

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

}


html.by-dark
.by-nav-link:hover {

    color:
        #FFFFFF;

}

/* =========================================================
   NAV LOGO / DARK STATE
========================================================= */

.by-nav-logo--dark {
    opacity: 0;
}

html.by-dark .by-nav-logo--light {
    opacity: 0;
}

html.by-dark .by-nav-logo--dark {
    opacity: 1;
}

/*
 * Fallback para el nav actual si todavía usa un solo logo.
 */
html.by-dark .by-nav-logo:not(.by-nav-logo--light):not(.by-nav-logo--dark) {
    filter: brightness(0) invert(1);
}


/* =========================================================
   THEME TOGGLE
========================================================= */

#by-theme-toggle {

    position:
        relative;

    z-index: 5;

    pointer-events:
        auto;

    touch-action:
        manipulation;

    cursor:
        pointer;

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

    color:
        #082F49;

    border-color:
        rgba(8,47,73,.10);

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

}


#by-theme-toggle:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(8,47,73,.10);

}


html.by-dark
#by-theme-toggle {

    background:
        rgba(125,211,252,.10);

    color:
        #7DD3FC;

    border-color:
        rgba(125,211,252,.16);

}


html.by-dark
#by-theme-toggle:hover {

    background:
        rgba(125,211,252,.16);

    box-shadow:
        0 10px 30px
        rgba(14,165,233,.12);

}


.by-theme-icon {

    pointer-events:
        none;

    will-change:
        transform,
        opacity;

}

/* =========================================================
   DARK MODE ICON
========================================================= */

html.by-dark
.by-theme-icon--sun {
    transform:
        translateY(-24px);

    opacity: 0;
}


html.by-dark
.by-theme-icon--moon {
    transform:
        translateY(0);

    opacity: 1;
}


.by-theme-icon {
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        opacity .3s ease;
}



/* =========================================================
   GLOBAL DARK MODE
========================================================= */

html.by-dark body {
    background: var(--by-page);
    color: var(--by-text);
}


/*
 * Tailwind Browser genera utilidades después de este archivo.
 * Por eso estos overrides usan !important.
 */

/* surfaces */
html.by-dark .bg-white {
    background-color: var(--by-surface-solid) !important;
}

html.by-dark .bg-white\/90,
html.by-dark .bg-white\/80,
html.by-dark .bg-white\/70,
html.by-dark .bg-white\/60,
html.by-dark .bg-white\/55 {
    background-color: rgba(10, 34, 50, .88) !important;
}

html.by-dark .bg-\[\#F7FAFC\],
html.by-dark .bg-\[\#f7f9fa\],
html.by-dark .bg-\[\#F8FBFC\],
html.by-dark .bg-\[\#F6FBFE\],
html.by-dark .bg-\[\#F5F8FA\] {
    background-color: #081D2B !important;
}

html.by-dark .bg-\[\#EEF8FF\],
html.by-dark .bg-\[\#E0F2FE\] {
    background-color: #0B293B !important;
}

html.by-dark .bg-bycode-mist {
    background-color: #061722 !important;
}

html.by-dark .bg-bycode-100 {
    background-color: #0B293B !important;
}


/* primary text */
html.by-dark .text-\[\#082F49\],
html.by-dark .text-bycode-950 {
    color: #EEF8FF !important;
}

html.by-dark .text-\[\#075985\] {
    color: #7DD3FC !important;
}


/* muted text */
html.by-dark .text-slate-600 {
    color: #AFC2CE !important;
}

html.by-dark .text-slate-500 {
    color: #8FA8B7 !important;
}

html.by-dark .text-slate-400 {
    color: #7893A3 !important;
}

html.by-dark .text-slate-300 {
    color: #7591A2 !important;
}


/* borders/dividers */
html.by-dark .border-\[\#082F49\]\/10,
html.by-dark .border-bycode-950\/10,
html.by-dark .border-slate-200 {
    border-color: rgba(125, 211, 252, .12) !important;
}

html.by-dark .divide-bycode-950\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(125, 211, 252, .12) !important;
}


/* generic light sections that use Tailwind directly */
html.by-dark section.bg-white {
    background: #061722 !important;
}

html.by-dark section.bg-\[\#F7FAFC\],
html.by-dark section.bg-\[\#f7f9fa\],
html.by-dark section.bg-\[\#F6F9FB\],
html.by-dark section.bg-\[\#F6FBFE\] {
    background: #061722 !important;
}


/* preserve intentionally dark branded sections */
html.by-dark .by-products-showcase,
html.by-dark .by-contact-v2 {
    color: #FFFFFF;
}


/* smoother theme change */
body,
section,
footer,
header,
article,
.by-nav-module,
.by-ui-window,
.by-capability-card,
.by-project-sleeve-inner {
    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}


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

html.by-dark
.by-hero-section {
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(14,165,233,.12),
            transparent 34%
        ),
        #061722 !important;
}


html.by-dark
.by-grid-background {

    background-image:
        linear-gradient(
            rgba(125,211,252,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(125,211,252,.035) 1px,
            transparent 1px
        );
}



/* =========================================================
   HERO UI WINDOWS
========================================================= */

.by-ui-window {
    transform-style:
        preserve-3d;

    will-change:
        transform;
}


html.by-dark
.by-ui-window {
    border-color:
        rgba(125,211,252,.10);

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);
}



/* =========================================================
   TRANSITIONS WHEN CHANGING THEME
========================================================= */

body,
section,
footer,
header,
.by-nav-module,
.by-ui-window {
    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease;
}

/* =========================================================
   CAPABILITIES DARK MODE
========================================================= */

html.by-dark
.by-capabilities-v2 {
    background:
        #061722 !important;
}


html.by-dark
.by-capabilities-v2
.by-capability-card {

    background:
        rgba(10, 34, 50, .78) !important;

    border-color:
        rgba(125, 211, 252, .10) !important;
}


html.by-dark
.by-capabilities-v2
.by-capability-card h3,

html.by-dark
.by-capabilities-v2
.by-capability-card
.text-\[\#082F49\] {

    color:
        #EDF8FF !important;
}


html.by-dark
.by-capabilities-v2
.by-capability-icon {

    background:
        rgba(255,255,255,.05) !important;

    color:
        #7DD3FC !important;

    border-color:
        rgba(125,211,252,.12) !important;
}


html.by-dark
.by-capabilities-v2
.by-capability-card
.bg-white\/70 {

    background:
        rgba(255,255,255,.055) !important;
}


html.by-dark
.by-capabilities-v2
.by-capability-card
.border-\[\#082F49\]\/10 {

    border-color:
        rgba(125,211,252,.10) !important;
}

/* =========================================================
   PRODUCTS SHOWCASE
========================================================= */

.by-products-showcase {
    position: relative;

    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(14, 165, 233, .10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061722 0%,
            #082F49 55%,
            #061722 100%
        );
}


.by-products-grid {
    background-image:
        linear-gradient(
            rgba(125, 211, 252, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(125, 211, 252, .04) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );
}


.by-products-wheel-wrap {
    perspective:
        1600px;
}


.by-product-main {
    transform-style:
        preserve-3d;

    will-change:
        transform,
        opacity;
}


.by-product-visual {
    transform-style:
        preserve-3d;

    will-change:
        transform;
}


.by-product-ui {
    animation:
        byProductUIIn
        .45s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes byProductUIIn {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   PRODUCT NAV
========================================================= */

.by-product-nav-item {
    cursor: pointer;
}


.by-product-nav-item strong,
.by-product-nav-item span {
    transition:
        color .3s ease;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.by-product-info {
    min-width: 0;
}


.by-product-feature {
    will-change:
        transform,
        opacity;
}


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

@media (
    max-width: 1023px
) {

    .by-products-showcase {
        padding-bottom:
            60px;
    }


    #by-products-stage {
        min-height:
            auto;
    }


    .by-products-wheel-wrap {
        min-height:
            580px;
    }


    #by-products-orbit {
        width:
            min(520px, 92vw);

        height:
            min(520px, 92vw);
    }


    #by-product-main {
        width:
            min(88%, 610px);
    }


    #by-product-visual-events,
    #by-product-visual-link {
        opacity:
            .24;

        pointer-events:
            none;
    }


    .by-product-info {
        margin-top:
            35px;

        padding:
            0 4px;
    }

}



@media (
    max-width: 640px
) {

    .by-products-showcase {
        padding-top:
            20px;
    }


    .by-products-wheel-wrap {
        min-height:
            470px;
    }


    #by-products-orbit {
        width:
            390px;

        height:
            390px;

        max-width:
            98vw;

        max-height:
            98vw;
    }


    #by-product-main {
        width:
            92%;
    }


    #by-product-main
    .by-product-ui {
        min-height:
            325px;
    }


    #by-ui-bysuite {
        grid-template-columns:
            42px 1fr;
    }


    #by-ui-bysuite aside {
        gap:
            15px;

        padding-top:
            15px;

        padding-bottom:
            15px;
    }


    #by-ui-bysuite > div {
        padding:
            12px;
    }


    #by-ui-bysuite
    .grid-cols-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #by-ui-bysuite
    .grid-cols-\[1\.45fr_\.75fr\] {
        grid-template-columns:
            1fr;
    }


    #by-ui-byevents {
        padding:
            16px;
    }


    #by-ui-byevents
    .grid-cols-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #by-ui-byevents
    .grid-cols-\[1\.25fr_\.75fr\] {
        grid-template-columns:
            1fr;
    }


    #by-ui-gobylink {
        padding:
            16px;
    }


    #by-ui-gobylink
    .grid-cols-\[\.75fr_1\.25fr\] {
        grid-template-columns:
            1fr;
    }


    #by-product-visual-events,
    #by-product-visual-link {
        display:
            none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .by-product-main,
    .by-product-visual,
    #by-products-orbit {
        transition: none !important;
        transform: none !important;
    }

}

/* =========================================================
   PROJECTS V2
========================================================= */

.by-projects-v2 {
    position: relative;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(125, 211, 252, .12),
            transparent 30%
        ),
        #F6F9FB;
}


/* =========================================================
   PROJECTS COVERFLOW
========================================================= */

.by-projects-deck {
    position: relative;

    perspective: 1800px;

    isolation: isolate;

    overflow: visible;
}


.by-project-sleeve {
    position: absolute;

    /*
     * GSAP administra por completo transform.
     */
    transform-origin: center center;

    will-change:
        transform,
        opacity,
        filter;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;
}


/*
 * ACTIVA
 */
.by-project-sleeve.is-active {
    z-index: 100 !important;
}


.by-project-sleeve.is-active
.by-project-sleeve-inner {
    position: relative;

    z-index: 2;

    box-shadow:
        0 45px 110px
        rgba(8, 47, 73, .24);
}


/*
 * Cards laterales
 */
.by-project-sleeve:not(.is-active)
.by-project-sleeve-inner {

    box-shadow:
        0 24px 60px
        rgba(8, 47, 73, .11);
}


.by-project-sleeve-inner {
    transform-style:
        preserve-3d;

    transition:
        box-shadow .4s ease,
        border-color .4s ease;
}


.by-project-sleeve.is-active
.by-project-sleeve-inner {
    box-shadow:
        0 50px 120px
        rgba(8, 47, 73, .22);
}


.by-project-sleeve:not(.is-active) {
    cursor: pointer;
}


.by-project-sleeve:not(.is-active)
.by-project-sleeve-inner::after {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 50;

    background:
        rgba(8, 47, 73, .045);

    pointer-events: none;
}


/* =========================================================
   ACTIVE HOVER
========================================================= */

@media (
    hover: hover
) and (
    pointer: fine
) {

    .by-project-sleeve.is-active
    .by-project-sleeve-inner {

        transition:
            transform .45s cubic-bezier(.2,.8,.2,1),
            box-shadow .45s ease;
    }


    .by-project-sleeve.is-active:hover
    .by-project-sleeve-inner {

        transform:
            translateY(-8px)
            rotateX(2deg);

        box-shadow:
            0 60px 140px
            rgba(8, 47, 73, .26);
    }

}


/* =========================================================
   PROJECT DETAIL
========================================================= */

.by-project-details {
    min-width: 0;
}


.by-project-service-pill {
    animation:
        byProjectPillIn
        .4s
        ease both;
}


.by-project-service-pill:nth-child(2) {
    animation-delay: .03s;
}

.by-project-service-pill:nth-child(3) {
    animation-delay: .06s;
}

.by-project-service-pill:nth-child(4) {
    animation-delay: .09s;
}

.by-project-service-pill:nth-child(5) {
    animation-delay: .12s;
}

.by-project-service-pill:nth-child(6) {
    animation-delay: .15s;
}


@keyframes byProjectPillIn {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   DARK MODE
========================================================= */

html.by-dark
.by-projects-v2 {

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(14, 165, 233, .11),
            transparent 30%
        ),
        #061722 !important;
}


html.by-dark
.by-projects-v2 h2,

html.by-dark
.by-projects-v2
#by-project-detail-title {

    color:
        #EDF8FF !important;
}


html.by-dark
.by-projects-v2
.by-project-details
.bg-white,

html.by-dark
.by-projects-v2
#by-project-detail-services
.bg-white,

html.by-dark
.by-projects-v2
.by-projects-footer
.bg-white {

    background:
        #0A2232 !important;
}


html.by-dark
.by-projects-v2
.by-project-service-pill {

    background:
        rgba(255, 255, 255, .05) !important;

    border-color:
        rgba(125, 211, 252, .12) !important;

    color:
        #7DD3FC !important;
}



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

@media (
    max-width: 1023px
) {

    .by-projects-stage {
        min-height:
            auto;
    }


    .by-projects-deck {
        min-height:
            580px;
    }


    .by-project-details {
        max-width:
            720px;

        margin-inline:
            auto;
    }

}



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

@media (
    max-width: 640px
) {

    .by-projects-deck {
        min-height:
            455px;
    }


    .by-project-sleeve {
        width:
            78%;
    }


    .by-project-sleeve:nth-child(n) {
        max-width:
            340px;
    }


    .by-projects-stage {
        margin-top:
            45px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .by-project-sleeve,
    .by-project-sleeve-inner {
        transition:
            none !important;
    }

}

/* =========================================================
   CONTACT V2
========================================================= */

.by-contact-v2 {
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(14,165,233,.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061722,
            #082F49 60%,
            #061722
        );
}


.by-contact-grid {
    background-image:
        linear-gradient(
            rgba(125,211,252,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(125,211,252,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;
}


.by-contact-whatsapp {
    perspective:
        1200px;
}


.by-chat-message {
    will-change:
        transform,
        opacity;
}


.by-qr-placeholder {
    box-shadow:
        0 18px 50px
        rgba(0,0,0,.20);
}



/* =========================================================
   CONTACT QR PANEL
========================================================= */

#by-contact-qr {
    height: 0;
    margin-top: 0;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    transform: translateY(16px);

    pointer-events: none;
}



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

@media (
    max-width: 640px
) {

    .by-contact-v2
    .by-contact-whatsapp {

        margin-top:
            10px;

    }

}

/* =========================================================
   FINAL DARK MODE SAFETY OVERRIDES
   These rules intentionally sit last in the file.
========================================================= */

html.by-dark .by-hero-section {
    color: #EEF8FF;
}

html.by-dark .by-hero-section h1,
html.by-dark .by-capabilities-v2 h2,
html.by-dark .by-capabilities-v2 h3,
html.by-dark .by-projects-v2 h2,
html.by-dark .by-projects-v2 h3 {
    color: #EEF8FF !important;
}

html.by-dark .by-capabilities-v2 {
    background: #061722 !important;
}

html.by-dark .by-capability-card {
    background: rgba(10, 34, 50, .80) !important;
    border-color: rgba(125, 211, 252, .10) !important;
}

html.by-dark .by-projects-v2 {
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(14, 165, 233, .11),
            transparent 30%
        ),
        #061722 !important;
}

html.by-dark .by-projects-v2 .by-project-details .bg-white,
html.by-dark .by-projects-v2 #by-project-detail-services .bg-white,
html.by-dark .by-projects-v2 .by-projects-footer .bg-white {
    background: #0A2232 !important;
}

html.by-dark #by-theme-toggle {
    background: rgba(125, 211, 252, .10) !important;
    color: #7DD3FC !important;
    border-color: rgba(125, 211, 252, .16) !important;
}

html.by-dark #by-theme-toggle:hover {
    background: rgba(125, 211, 252, .17) !important;
}

/* sol / luna */
html.by-dark .by-theme-icon--sun {
    transform: translateY(-24px);
    opacity: 0;
}

html.by-dark .by-theme-icon--moon {
    transform: translateY(0);
    opacity: 1;
}

/* The product and WhatsApp/contact areas are designed dark in both modes. */
.by-products-showcase,
.by-contact-v2 {
    color-scheme: dark;
}