/* =========================================================
   BEETECH
   POWER YOUR TECH
========================================================= */

:root {

    --theme: #ffd400;
    --theme-rgb: 255, 212, 0;

    --bg: #020303;
    --text: #ffffff;
    --muted: rgba(255,255,255,.68);

    --transition-speed: .8s;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: auto;
}


body {
    background: #020303;
    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;

    min-height: 100vh;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   THEMES
========================================================= */

body.theme-home {
    --theme: #ffd400;
    --theme-rgb: 255, 212, 0;
}


body.theme-services {
    --theme: #168cff;
    --theme-rgb: 22, 140, 255;
}


body.theme-about {
    --theme: #a855f7;
    --theme-rgb: 168, 85, 247;
}

body.theme-clients {
    --theme: #00d9ff;
    --theme-rgb: 0, 217, 255;
}


body.theme-contact {
    --theme: #F97316;
    --theme-rgb: 249, 115, 22;
}


/* =========================================================
   BACKGROUND
========================================================= */

#background-layer {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;

    background: #010202;

    pointer-events: none;
}


#background-image {
    position: absolute;
    inset: -8%;

    background-image:
        url("images/beetech-world.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter:
        blur(1px)
        brightness(.82)
        contrast(1.15)
        saturate(1.2);

    transform: scale(1.08);

    opacity: .78;

    animation:
        backgroundMove 18s ease-in-out infinite alternate;
}


#background-glow {
    position: absolute;
    inset: -12%;

    background:
        url("images/beetech-world.png")
        center / cover no-repeat;

    filter:
        blur(38px)
        brightness(1.5)
        saturate(1.8);

    opacity: .27;

    mix-blend-mode: screen;

    animation:
        backgroundGlow 7s ease-in-out infinite alternate;
}


#background-bloom {
    position: absolute;
    inset: -20%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(var(--theme-rgb), .30),
            transparent 45%
        );

    filter: blur(45px);

    opacity: .45;

    transition:
        background 800ms ease,
        opacity 800ms ease;

    animation:
        bloomMove 9s ease-in-out infinite alternate;
}


#background-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(var(--theme-rgb), .12),
            transparent 52%
        );

    mix-blend-mode: screen;

    transition:
        background 800ms ease;
}


#background-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0,0,0,.48) 100%
        );
}


/* =========================================================
   BACKGROUND ANIMATION
========================================================= */

@keyframes backgroundMove {

    0% {
        transform: scale(1.08) translate3d(-1%, -1%, 0);
    }

    50% {
        transform: scale(1.1) translate3d(1%, .5%, 0);
    }

    100% {
        transform: scale(1.08) translate3d(-.5%, 1%, 0);
    }
}


@keyframes backgroundGlow {

    from {
        opacity: .20;
        transform: scale(1);
    }

    to {
        opacity: .34;
        transform: scale(1.035);
    }
}


@keyframes bloomMove {

    from {
        transform: translate3d(-2%, -1%, 0);
    }

    to {
        transform: translate3d(2%, 1%, 0);
    }
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 10000;

    padding: 22px 4vw;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.65),
            transparent
        );

    pointer-events: auto;
}


.nav-container {
    max-width: 1450px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.logo {
    display: flex;
    align-items: center;

    position: relative;

    z-index: 10001;
}


.logo img {
    width: 105px;
    height: auto;

    display: block;

    filter:
        drop-shadow(
            0 0 12px
            rgba(var(--theme-rgb), .45)
        );

    transition:
        filter .7s ease;
}


.menu {
    display: flex;
    align-items: center;
    gap: 34px;
}


.menu a {
    position: relative;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

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

    padding: 8px 0;

    transition:
        color .3s ease;
}


.menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--theme);

    box-shadow:
        0 0 10px var(--theme);

    transition:
        width .3s ease;
}


.menu a:hover {
    color: #fff;
}

/* Staff Portal is an external page but shares the primary navigation style. */
.menu a.staff-portal-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.menu a.staff-portal-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--theme);
    box-shadow: 0 0 10px var(--theme);
    transition: width .3s ease;
}
.menu a.staff-portal-link:hover::after,
.menu a.staff-portal-link:focus-visible::after {
    width: 100%;
}


.menu a:hover::after {
    width: 100%;
}


.quote-button {
    padding: 12px 19px;

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

    color: var(--theme);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

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


.quote-button:hover {
    color: #000;

    background: var(--theme);

    box-shadow:
        0 0 25px
        rgba(var(--theme-rgb), .35);
}


/* =========================================================
   MAIN / PAGES
========================================================= */

main {
    position: relative;

    width: 100%;
    height: 100vh;
}


.page {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(18px);

    transition:
        opacity .45s ease,
        transform .65s ease,
        visibility .45s ease;
}


.page.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.page-content {
    position: relative;

    z-index: 100;

    width: min(1200px, 90%);

    min-height: 100%;

    margin: auto;

    padding:
        145px 0
        120px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.small-title {
    color: var(--theme);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;

    margin-bottom: 25px;

    transition:
        color .8s ease;
}


h1,
h2 {
    margin: 0;

    font-size: clamp(58px, 9vw, 145px);

    line-height: .86;

    font-weight: 950;

    letter-spacing: -5px;

    max-width: 900px;
}


h2 {
    font-size: clamp(55px, 8vw, 120px);
}


h1 span,
h2 span {
    display: block;

    color: var(--theme);

    transition:
        color .8s ease,

        text-shadow .8s ease;

    text-shadow:
        0 0 35px
        rgba(var(--theme-rgb), .18);
}


.page-content > p {
    max-width: 650px;

    margin-top: 35px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.75;
}


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

.buttons,
.contact-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 40px;
}


.button,
.main-button,
.outline-button {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 25px;

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

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.8px;

    cursor: pointer;

    position: relative;

    z-index: 200;

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


.button:hover,
.main-button:hover,
.outline-button:hover {
    transform: translateY(-3px);
}


.button.primary,
.main-button {
    color: #000;

    background: var(--theme);

    box-shadow:
        0 0 25px
        rgba(var(--theme-rgb), .15);
}


.button.primary:hover,
.main-button:hover {
    box-shadow:
        0 0 35px
        rgba(var(--theme-rgb), .40);
}


.button.secondary,
.outline-button {
    color: var(--theme);

    background: rgba(0,0,0,.20);

    backdrop-filter: blur(8px);
}


.button.secondary:hover,
.outline-button:hover {
    color: #000;

    background: var(--theme);
}


/* =========================================================
   STATS
========================================================= */

.stats {
    display: flex;

    gap: 55px;

    margin-top: 70px;
}


.stat {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.stat strong {
    color: var(--theme);

    font-size: 25px;

    transition:
        color .8s ease;
}


.stat span {
    color: rgba(255,255,255,.55);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 35px;

    width: 100%;
}


.service-card {
    min-height: 165px;

    padding: 5px;

    border:
        1px solid
        rgba(var(--theme-rgb), .20);

    background:
        rgba(0,0,0,.28);

    backdrop-filter: blur(10px);

    position: relative;

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


.service-card:hover {
    transform: translateY(-7px);

    border-color: var(--theme);

    box-shadow:
        0 0 30px
        rgba(var(--theme-rgb), .12);
}


.service-card strong {
    color: var(--theme);

    font-size: 12px;

    letter-spacing: 2px;
}


.service-card h3 {
    margin-top: 25px;

    font-size: 15px;

    letter-spacing: 1px;
}


.service-card p {
    margin-top: 12px;

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

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   ABOUT
========================================================= */

.about-intro {
    max-width: 720px !important;
}


.about-points {
    display: flex;

    gap: 15px;

    margin-top: 40px;
}


.about-point {
    min-width: 180px;

    padding: 20px;

    border-left:
        2px solid
        var(--theme);

    background:
        rgba(0,0,0,.20);
}


.about-point strong {
    display: block;

    color: var(--theme);

    font-size: 11px;

    letter-spacing: 2px;
}


.about-point span {
    display: block;

    margin-top: 8px;

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

    font-size: 11px;
}


/* =========================================================
   FOUNDER
========================================================= */

.founder-section {
    display: grid;

    grid-template-columns:
        330px 1fr;

    align-items: center;

    gap: 55px;

    margin-top: 65px;

    padding-top: 40px;

    border-top:
        1px solid
        rgba(var(--theme-rgb), .15);
}


.founder-image-box {
    display: flex;

    justify-content: center;

    align-items: flex-end;
}


.founder-frame {
    width: 260px;
    height: 330px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    border:
        1px solid
        rgba(var(--theme-rgb), .55);

    box-shadow:
        0 0 35px
        rgba(var(--theme-rgb), .16);

    background:
        radial-gradient(
            circle at 50% 80%,
            rgba(var(--theme-rgb), .18),
            transparent 60%
        );

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


.founder-frame::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: -16px;

    height: 25px;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.8),
            transparent 70%
        );

    filter: blur(7px);
}


.founder-frame img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 15px 20px
            rgba(0,0,0,.75)
        );
}


.founder-label {
    color: var(--theme);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.founder-text h3 {
    margin-top: 15px;

    font-size: clamp(32px, 4vw, 55px);

    line-height: .95;

    letter-spacing: -2px;
}


.founder-text h3 span {
    display: block;

    color: var(--theme);

    transition:
        color .8s ease;
}


.founder-role {
    margin-top: 15px;

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

    font-size: 12px;

    letter-spacing: 1px;
}


.founder-text p {
    max-width: 620px;

    margin-top: 20px;

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

    font-size: 13px;

    line-height: 1.7;
}


.founder-signature {
    margin-top: 25px;

    color: var(--theme);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 5px;
}


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

.contact-content {
    align-items: flex-start;
}


.contact-content > p {
    max-width: 600px;
}


.contact-info {
    display: flex;

    flex-wrap: wrap;

    gap: 45px;

    margin-top: 45px;
}


.contact-info div {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-info span {
    color: var(--theme);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


.contact-info strong {
    font-size: 14px;

    font-weight: 600;

    color: rgba(255,255,255,.78);
}


/* =========================================================
   PAGE NUMBER
========================================================= */

.page-number {
    position: fixed;

    left: 18px;
    top: 15%;
    transform: translateY(-50%);

    z-index: 9000;

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

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;

    pointer-events: none;

    white-space: nowrap;

    transition:
        color .8s ease;
}


.page-number span {
    color: var(--theme);

    transition:
        color .8s ease;
}


/* =========================================================
   BEE
========================================================= */

#bee {
    position: fixed;

    width: 250px;
    height: 250px;

    right: 50%;
    bottom: 31%;

    transform:
        translate(50%, 50%);

    z-index: 99999;

    pointer-events: auto;
cursor: pointer;

    transition:
        width .8s cubic-bezier(.22,1,.36,1),
        height .8s cubic-bezier(.22,1,.36,1),
        right .9s cubic-bezier(.22,1,.36,1),
        bottom .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1);

    animation:
        beeNatural 4.5s ease-in-out infinite;
}


#bee.small {
    width: 105px;
    height: 105px;
}


#bee img {
    position: absolute;

    width: 225px;
    height: auto;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    object-fit: contain;

    z-index: 3;

    transition:
        width .8s ease,
        filter .8s ease;
}


#bee.small img {
    width: 80px;
}


/* =========================================================
   BEE THEME COLORS
========================================================= */

/* HOME - YELLOW */

body.theme-home #beeImage {
    filter:
        brightness(1.08)
        saturate(1.25)
        hue-rotate(0deg)
        drop-shadow(
            0 0 15px rgba(255,212,0,.55)
        )
        drop-shadow(
            0 0 35px rgba(255,212,0,.28)
        );
}


/* SERVICES - BLUE */

body.theme-services #beeImage {
    filter:
        brightness(1.05)
        saturate(2)
        hue-rotate(155deg)
        drop-shadow(
            0 0 15px rgba(22,140,255,.65)
        )
        drop-shadow(
            0 0 35px rgba(22,140,255,.35)
        );
}


/* ABOUT - PURPLE */

body.theme-about #beeImage {
    filter:
        brightness(1.04)
        saturate(2)
        hue-rotate(205deg)
        drop-shadow(
            0 0 15px rgba(168,85,247,.65)
        )
        drop-shadow(
            0 0 35px rgba(168,85,247,.35)
        );
}


/* CONTACT - TEAL */

body.theme-contact #beeImage {
    filter:
        brightness(1.05)
        saturate(1.9)
        hue-rotate(130deg)
        drop-shadow(
            0 0 15px rgba(25,211,177,.65)
        )
        drop-shadow(
            0 0 35px rgba(25,211,177,.35)
        );
}


/* =========================================================
   BEE GLOW
========================================================= */

.bee-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--theme-rgb), .42),
            rgba(var(--theme-rgb), .16) 35%,
            transparent 70%
        );

    filter: blur(22px);

    z-index: 1;

    opacity: .75;

    transition:
        background .8s ease;
}


/* =========================================================
   BEE MOTION
========================================================= */

@keyframes beeNatural {

    0% {
        margin-top: 0;
        margin-left: 0;
    }

    25% {
        margin-top: -7px;
        margin-left: 4px;
    }

    50% {
        margin-top: 3px;
        margin-left: -5px;
    }

    75% {
        margin-top: -4px;
        margin-left: 3px;
    }

    100% {
        margin-top: 0;
        margin-left: 0;
    }
}


/* =========================================================
   FLIGHT
========================================================= */

#bee.flying {
    animation:
        beeFlight .75s ease-in-out infinite alternate;
}


@keyframes beeFlight {

    from {
        margin-left: -8px;
        margin-top: -5px;
        rotate: -2deg;
    }

    to {
        margin-left: 10px;
        margin-top: 8px;
        rotate: 3deg;
    }
}


/* =========================================================
   TRANSITION
========================================================= */

#transition {
    position: fixed;

    inset: 0;

    z-index: 5000;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(var(--theme-rgb), .42),
            rgba(0,0,0,.92) 58%,
            #000 100%
        );

    backdrop-filter:
        blur(8px);

    transform:
        scale(1.15);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .9s cubic-bezier(.22,1,.36,1),
        background .8s ease;
}


#transition.active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1);
}


.transition-light {
    position: absolute;

    width: 260px;
    height: 260px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            rgba(var(--theme-rgb), .35) 25%,
            transparent 70%
        );

    filter: blur(20px);

    opacity: .65;

    animation:
        transitionPulse .8s ease-in-out infinite alternate;
}


@keyframes transitionPulse {

    from {
        transform:
            translate(-50%, -50%)
            scale(.8);

        opacity: .35;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.35);

        opacity: .8;
    }
}


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

@media (max-width: 900px) {

    .menu {
        gap: 15px;
    }

    .menu a {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .quote-button {
        display: none;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .founder-section {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .founder-image-box {
        justify-content: flex-start;
    }

}


@media (max-width: 600px) {

    body {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100vh;
    }

    .navbar {
        padding: 15px 5vw;
    }

    .logo img {
        width: 82px;
    }

    .menu {
        gap: 10px;
    }

    .menu a {
        font-size: 7px;
        letter-spacing: .8px;
    }

    .page-content {
        width: 88%;

        padding:
            120px 0
            100px;
    }

    h1,
    h2 {
        font-size: 55px;

        letter-spacing: -3px;
    }

    .page-content > p {
        font-size: 14px;
    }

    .buttons,
    .contact-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .button,
    .main-button,
    .outline-button {
        width: 100%;
        max-width: 280px;
    }

    .stats {
        gap: 25px;
    }

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

    .about-points {
        flex-direction: column;
    }

    .about-point {
        width: 100%;
    }

    .founder-frame {
        width: 220px;
        height: 280px;
    }

    .contact-info {
        flex-direction: column;

        gap: 20px;
    }

    #bee {
        width: 190px;
        height: 190px;

        right: 50%;
        bottom: 30%;
    }

    #bee.small {
        width: 85px;
        height: 85px;
    }

    #bee img {
        width: 175px;
    }

    #bee.small img {
        width: 65px;
    }

}
/* ================================
   BEETECH AI ASSISTANT
================================ */

.bee-ai {
    position: fixed;
    right: 30px;
    bottom: 110px;
    width: 360px;
    max-width: calc(100vw - 30px);
    height: 500px;

    background: rgba(8, 12, 20, 0.92);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 22px;

    box-shadow:
        0 25px 80px rgba(0,0,0,0.6),
        0 0 40px rgba(255,200,0,0.15);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(.95);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s;
    
    z-index: 99998;
}

.bee-ai.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}


/* HEADER */

.bee-ai-header {
    padding: 18px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;

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

.bee-ai-header strong {
    display: block;
    color: white;
    font-size: 17px;
}

.bee-ai-header span {
    font-size: 11px;
    color: #42ff88;
}

#bee-ai-close {
    border: none;
    background: transparent;
    color: white;
    font-size: 26px;
    cursor: pointer;
}


/* MESSAGES */

.bee-ai-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.ai-message,
.user-message {
    max-width: 85%;
    padding: 12px 15px;
    margin-bottom: 12px;

    border-radius: 15px;

    font-size: 14px;
    line-height: 1.5;
}

.ai-message {
    background: rgba(255,255,255,.08);
    color: white;
}

.user-message {
    margin-left: auto;
    background: rgba(255,200,0,.18);
    color: white;
}


/* QUICK BUTTONS */

.bee-ai-options {
    padding: 10px 15px;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bee-ai-options button {
    border: 1px solid rgba(255,255,255,.12);

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

    color: white;

    padding: 8px 10px;
    border-radius: 20px;

    font-size: 11px;

    cursor: pointer;

    transition: .2s;
}

.bee-ai-options button:hover {
    background: rgba(255,200,0,.18);
    transform: translateY(-2px);
}


/* INPUT */

.bee-ai-input {
    display: flex;
    gap: 8px;

    padding: 15px;

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

.bee-ai-input input {
    flex: 1;

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

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

    outline: none;

    color: white;

    padding: 12px 14px;

    border-radius: 14px;
}

.bee-ai-input input::placeholder {
    color: rgba(255,255,255,.45);
}

.bee-ai-input button {
    width: 45px;

    border: none;
    border-radius: 14px;

    background: #ffd000;

    color: #111;

    cursor: pointer;

    font-size: 18px;

    transition: .2s;
}

.bee-ai-input button:hover {
    transform: scale(1.05);
}


/* MOBILE */

@media (max-width: 600px) {

    .bee-ai {
        right: 15px;
        bottom: 90px;

        width: calc(100vw - 30px);
        height: 70vh;
    }

}

@media (max-width: 600px) {

    .page-number {
        left: 10px;
        top: auto;
        bottom: 18px;
        transform: none;

        font-size: 8px;
        letter-spacing: 1.5px;
    }

}

/* =========================================================
   CLIENT NETWORK THEME
========================================================= */

body.theme-clients {
    --theme: #00d9ff;
    --theme-rgb: 0, 217, 255;
}


/* =========================================================
   CLIENT NETWORK BEE
========================================================= */

body.theme-clients #beeImage {
    filter:
        brightness(1.05)
        saturate(1.9)
        hue-rotate(165deg)
        drop-shadow(
            0 0 15px rgba(0,217,255,.65)
        )
        drop-shadow(
            0 0 35px rgba(0,217,255,.35)
        );
}


/* =========================================================
   CLIENT NETWORK PAGE
========================================================= */

.clients-content {
    align-items: flex-start;
}


.clients-content > p {
    max-width: 700px;
}


.clients-intro {
    max-width: 680px;

    margin-top: 10px;

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

    line-height: 1.8;
}


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

.client-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 50px;
}


/* =========================================================
   CLIENT CARD
========================================================= */

.client-card {
    position: relative;

    min-height: 340px;

    padding: 32px;

    overflow: hidden;

    border:
        1px solid
        rgba(var(--theme-rgb), .28);

    background:
        linear-gradient(
            145deg,
            rgba(var(--theme-rgb), .08),
            rgba(0,0,0,.48)
        );

    backdrop-filter: blur(15px);

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


/* TOP ACCENT */

.client-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 90px;
    height: 2px;

    background: var(--theme);

    box-shadow:
        0 0 20px
        rgba(var(--theme-rgb), .7);
}


/* BACKGROUND GLOW */

.client-card::after {
    content: "";

    position: absolute;

    right: -50px;
    bottom: -50px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        rgba(var(--theme-rgb), .08);

    filter: blur(30px);

    pointer-events: none;
}


/* HOVER */

.client-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(var(--theme-rgb), .75);

    box-shadow:
        0 0 35px
        rgba(var(--theme-rgb), .14);
}


/* =========================================================
   CLIENT TOP
========================================================= */

.client-top {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.client-number {
    color:
        var(--theme);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.client-status {
    color:
        rgba(255,255,255,.42);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


/* =========================================================
   CLIENT BODY
========================================================= */

.client-body {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    margin-top:
        55px;
}


/* =========================================================
   CLIENT LOGO AREA
========================================================= */

.client-logo-area {
    width:
        115px;

    height:
        115px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(var(--theme-rgb), .3);

    background:
        rgba(0,0,0,.35);

    box-shadow:
        inset 0 0 25px
        rgba(var(--theme-rgb), .06);
}
.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TEMPORARY LOGO */

.client-logo-placeholder {
    color:
        var(--theme);

    font-size:
        34px;

    font-weight:
        900;

    letter-spacing:
        -2px;

    text-shadow:
        0 0 20px
        rgba(var(--theme-rgb), .45);
}


/* REAL LOGO */

.client-logo-area img {
    max-width:
        80%;

    max-height:
        80%;

    object-fit:
        contain;

    display:
        block;
}


/* =========================================================
   CLIENT INFORMATION
========================================================= */

.client-information {
    flex:
        1;
}


.client-information h3 {
    margin:
        0;

    font-size:
        clamp(25px, 3vw, 42px);

    line-height:
        .95;

    letter-spacing:
        -1px;
}


.client-information h3 span {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--theme);

    font-size:
        .48em;

    letter-spacing:
        2px;

    transition:
        color .8s ease;
}


.client-information p {
    margin-top:
        18px;

    max-width:
        400px;

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

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   CLIENT LINE
========================================================= */

.client-line {
    width:
        100%;

    height:
        1px;

    margin-top:
        40px;

    background:
        linear-gradient(
            90deg,
            rgba(var(--theme-rgb), .55),
            transparent
        );
}


/* =========================================================
   CLIENT FOOTER
========================================================= */

.client-footer {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        18px;
}


.client-footer span {
    color:
        rgba(255,255,255,.38);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.client-footer strong {
    color:
        var(--theme);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


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

@media (max-width: 700px) {

    .client-grid {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    .client-card {
        min-height:
            300px;

        padding:
            24px;
    }


    .client-body {
        gap:
            20px;

        margin-top:
            40px;
    }


    .client-logo-area {
        width:
            85px;

        height:
            85px;
    }


    .client-logo-placeholder {
        font-size:
            25px;
    }


    .client-information h3 {
        font-size:
            25px;
    }

}


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

@media (max-width: 450px) {

    .client-body {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .client-logo-area {
        width:
            80px;

        height:
            80px;
    }

}


/* FLY LANKA CLIENT FEATURE IMAGE */
.client-card {
    background:
        linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 40%, rgba(0,0,0,.38) 100%),
        url("images/fly-lanka.jpg") center 48% / cover no-repeat;
}

.client-card .client-body,
.client-card .client-top,
.client-card .client-line,
.client-card .client-footer {
    position: relative;
    z-index: 2;
}

.client-logo.fly-lanka-logo {
    flex-direction: column;
    gap: 5px;
    background: rgba(0, 10, 15, .78);
    border-color: rgba(var(--theme-rgb), .55);
    box-shadow: inset 0 0 25px rgba(var(--theme-rgb), .08);
}

.client-logo.fly-lanka-logo span {
    color: var(--theme);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(var(--theme-rgb), .45);
}

.client-logo.fly-lanka-logo small {
    color: rgba(255,255,255,.78);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

/* FLY LANKA CLIENT PHOTO */
.client-logo-area .client-logo {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.client-logo-area .client-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}


/* FLY LANKA - EXACT CLIENT PHOTOS */
.client-card {
    background:
        linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.64) 43%, rgba(0,0,0,.20) 100%),
        url("images/fly-lanka.jpg") center top / cover no-repeat;
}

.client-logo.fly-lanka-logo {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-color: rgba(var(--theme-rgb), .55);
}

.client-logo.fly-lanka-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   CLIENT FEEDBACK
========================================================= */
.feedback-content { align-items: flex-start; }
.feedback-intro { max-width: 680px !important; }
.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    width: 100%;
    margin-top: 35px;
}
.feedback-card, .feedback-form-card {
    border: 1px solid rgba(var(--theme-rgb), .28);
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(12px);
    padding: 25px;
}
.feedback-card { min-height: 190px; }
.feedback-stars { color: var(--theme); letter-spacing: 3px; font-size: 13px; }
.feedback-card p { margin-top: 20px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; }
.feedback-card strong { display:block; margin-top:20px; color:#fff; font-size:12px; letter-spacing:1px; }
.feedback-card span { display:block; margin-top:6px; color:rgba(255,255,255,.42); font-size:10px; letter-spacing:1px; }
.feedback-form-card { width:100%; margin-top:20px; }
.feedback-form-title { color:var(--theme); font-size:11px; font-weight:900; letter-spacing:2px; margin-bottom:18px; }
.feedback-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feedback-form-card input, .feedback-form-card textarea {
    width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.35);
    color:#fff; padding:13px; outline:none; font:inherit; font-size:12px;
}
.feedback-form-card textarea { min-height:110px; margin-top:12px; resize:vertical; }
.feedback-rating { display:flex; align-items:center; gap:5px; margin-top:15px; }
.feedback-rating span { margin-right:8px; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:1px; }
.feedback-rating button { border:0; background:transparent; color:rgba(255,255,255,.22); cursor:pointer; font-size:18px; padding:0 2px; }
.feedback-rating button.selected { color:var(--theme); }
.feedback-form-card .main-button { margin-top:15px; }
.feedback-note { margin-top:12px; color:rgba(255,255,255,.42); font-size:10px; }
.theme-feedback { --theme:#00e5ff; --theme-rgb:0,229,255; }
@media (max-width:800px) {
    .feedback-grid, .feedback-fields { grid-template-columns:1fr; }
}

/* FEEDBACK PAGE LAYOUT */
.feedback-content {
    justify-content: flex-start;
    padding-top: 150px;
    padding-bottom: 120px;
}
.feedback-form-card {
    box-sizing: border-box;
}

/* ACCOUNT / MODERATION ADDITIONS */
.external-link{cursor:pointer}
.feedback-empty{min-height:180px;padding:40px;border:1px dashed rgba(var(--theme-rgb),.25);color:var(--theme);font-size:11px;font-weight:900;letter-spacing:2px;line-height:1.8;text-align:center}
.feedback-empty span{color:rgba(255,255,255,.4);font-size:10px;font-weight:500;letter-spacing:0}
.feedback-auth-status{margin-bottom:15px;padding:11px 13px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:rgba(255,255,255,.5);font-size:9px;line-height:1.6;letter-spacing:.5px}
.feedback-auth-status.logged-in{border-color:rgba(var(--theme-rgb),.25);color:rgba(255,255,255,.65)}

.staff-main-page{overflow-y:auto}.staff-embedded-content{width:min(100%,1100px);margin:0 auto;padding:158px 28px 16px;text-align:center}.staff-embedded-content h2{font-size:clamp(30px,5vw,60px);margin:12px 0}.staff-embedded-content h2 span{color:#e9b900}.staff-embedded-content p{margin:0 0 18px}.staff-portal-frame{display:block;width:100%;height:650px;border:0;background:transparent}@media(max-width:700px){.staff-embedded-content{padding:145px 12px 12px}.staff-portal-frame{height:750px}}



/* BeeTech Staff Portal: single, predictable scrolling model */
body.theme-staff { overflow: hidden !important; }
body.theme-staff #staff.staff-main-page.page,
body.theme-staff #staff.staff-main-page.page.active {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  -webkit-overflow-scrolling: touch !important;
}
#staff.staff-main-page .staff-embedded-content {
  display:block !important;
  width:100% !important;
  max-width:1600px !important;
  margin:0 auto !important;
  padding:158px 20px 12px !important;
  box-sizing:border-box !important;
  text-align:left !important;
}
#staff.staff-main-page .staff-portal-frame {
  display:block !important;
  width:100% !important;
  height:260px;
  min-height:0 !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:#070808 !important;
  overflow:hidden !important;
}
/* Physical-register tables are intentionally wide and scroll horizontally instead of crushing columns. */
#book-records { width:100% !important; max-width:100% !important; overflow-x:auto !important; overflow-y:visible !important; }
#book-records table { width:max-content !important; min-width:2200px !important; table-layout:auto !important; }
#book-records th, #book-records td { min-width:120px !important; max-width:280px !important; padding:12px 14px !important; white-space:normal !important; overflow-wrap:break-word !important; word-break:normal !important; line-height:1.45 !important; }
#book-records th:first-child, #book-records td:first-child { min-width:170px !important; }
.table-wrap { display:block; width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; }
.table-wrap table { width:max-content; min-width:900px; table-layout:auto; }
.table-wrap th, .table-wrap td { overflow-wrap:break-word; word-break:normal; }
body.theme-staff header, body.theme-staff nav { z-index:1000; }
@media(max-width:850px){
 #staff.staff-main-page .staff-embedded-content { padding:145px 8px 10px !important; }
 #staff.staff-main-page .staff-portal-frame { min-height:0 !important; height:260px; }
 #book-records table { min-width:2000px !important; }
}

/* Asset-specific service history timeline */
.asset-summary,.asset-history{margin-bottom:18px}.asset-history h2{display:flex;align-items:center;gap:10px;margin:6px 0}.history-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:rgba(255,204,0,.14);color:#ffcc00;font-size:13px}.history-list{display:flex;flex-direction:column;gap:0;margin-top:20px}.history-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:0 0 22px;position:relative}.history-item:not(:last-child):before{content:"";position:absolute;left:16px;top:32px;bottom:0;width:1px;background:#343434}.history-marker{z-index:1;width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2a240b;border:1px solid #665400;color:#ffd000;font-weight:700;font-size:12px}.history-content{min-width:0;border:1px solid #303030;border-radius:12px;padding:16px 18px;background:#0e0f0f}.history-topline,.history-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.history-topline{justify-content:space-between;color:#aaa;font-size:12px}.history-type{color:#ffd000;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.history-content h3{font-size:17px;margin:9px 0 14px;overflow-wrap:anywhere}.history-field{margin:10px 0}.history-field span{display:block;color:#aaa;font-size:12px;margin-bottom:4px}.history-field p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}.history-bottom{border-top:1px solid #292929;margin-top:14px;padding-top:12px;color:#aaa;font-size:12px}.history-status{border-radius:999px;padding:4px 9px;background:rgba(255,204,0,.1);color:#ffd000}.history-source{margin-left:auto;opacity:.7}.history-warnings{margin-top:14px;color:#aaa;font-size:12px}.history-warnings summary{cursor:pointer}.asset-history .small{line-height:1.5}
@media(max-width:640px){.history-content{padding:13px}.history-item{grid-template-columns:28px minmax(0,1fr);gap:10px}.history-marker{width:28px;height:28px}.history-item:not(:last-child):before{left:13px}.history-source{margin-left:0}}

/* Generated BeeTech identifiers are visible but never manually editable. */
.generated-id,
input[readonly].generated-id {
  cursor: not-allowed !important;
  opacity: 0.9;
  border-color: rgba(255, 204, 0, .55) !important;
  background: rgba(255, 204, 0, .06) !important;
  color: #ffd21a !important;
  font-weight: 700;
  user-select: text;
}

/* Related service tasks nested under their parent job */
.history-children{margin-top:16px;padding:12px;border-left:2px solid #5c4a00;background:#0a0b0b;border-radius:0 8px 8px 0}.history-child{padding:12px 0;border-bottom:1px solid #292929}.history-child:last-child{border-bottom:0}.history-child h4{font-size:14px;margin:8px 0}.history-children>.small{color:#ffd000;font-weight:700;margin-bottom:6px}

/* BeeTech responsive UI repair — desktop, tablet and mobile */
html { scroll-behavior:smooth; }
body { max-width:100%; }
img, video, canvas, iframe { max-width:100%; }
input, select, textarea, button { max-width:100%; }
#staff.staff-main-page .staff-embedded-content { padding: clamp(92px, 12vh, 150px) clamp(10px, 2.5vw, 28px) 24px !important; }
#staff.staff-main-page .staff-portal-frame { height: 1000px; min-height:1000px !important; width:100% !important; display:block; }
/* Keep the public-site navigation from overlapping staff portal content. */
body.theme-staff header, body.theme-staff nav { z-index:1000; }
@media (max-width: 900px) {
  #staff.staff-main-page .staff-embedded-content { padding: 88px 12px 18px !important; }
  #staff.staff-main-page .staff-portal-frame { height: 1150px; min-height:1150px !important; }
}
@media (max-width: 600px) {
  html, body { width:100%; overflow-x:hidden; }
  .container, .section, .page, .content, .staff-embedded-content { max-width:100% !important; }
  #staff.staff-main-page .staff-embedded-content { padding: 78px 8px 14px !important; }
  #staff.staff-main-page .staff-portal-frame { height: 1350px; min-height:1350px !important; }
  header, .site-header, nav, .navbar { max-width:100vw; }
  .feedback-grid, .feedback-fields, .grid, .form-grid { grid-template-columns:minmax(0,1fr) !important; }
  .table-wrap, #book-records { max-width:100%; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  button, .btn, input, select, textarea { font-size:16px; }
}

/* Verified staff portal layout correction: reserve space for the fixed public header. */
body.theme-staff { overflow-x:hidden !important; overflow-y:auto !important; background:#02070d !important; }
body.theme-staff #staff.staff-main-page.page,
body.theme-staff #staff.staff-main-page.page.active {
  position:relative !important; inset:auto !important; top:auto !important;
  width:100% !important; height:auto !important; min-height:0 !important;
  max-height:none !important; overflow:visible !important;
  padding:0 !important; margin:0 !important; z-index:1 !important;
  background:#02070d !important; transform:none !important;
}
body.theme-staff header, body.theme-staff nav, body.theme-staff .navbar {
  position:relative !important; top:auto !important; left:auto !important; right:auto !important;
  z-index:1000 !important; width:100% !important; box-sizing:border-box !important;
}
#staff.staff-main-page .staff-embedded-content {
  display:block !important; width:100% !important; max-width:1600px !important;
  margin:0 auto !important; padding:28px clamp(12px,2vw,28px) 36px !important;
  text-align:left !important; box-sizing:border-box !important; background:#02070d !important;
}
#staff.staff-main-page .staff-portal-frame {
  display:block !important; width:100% !important; height:1000px !important;
  min-height:1000px !important; max-height:none !important; margin:0 !important;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  outline:0 !important; box-shadow:none !important; background:#02070d !important;
  vertical-align:top !important;
}
@media(max-width:850px) {
  body.theme-staff header, body.theme-staff nav, body.theme-staff .navbar { position:relative !important; }
  #staff.staff-main-page .staff-embedded-content { padding:18px 12px 28px !important; }
  #staff.staff-main-page .staff-portal-frame { height:1200px !important; min-height:1200px !important; }
}
@media(max-width:600px) {
  #staff.staff-main-page .staff-embedded-content { padding:14px 8px 24px !important; }
  #staff.staff-main-page .staff-portal-frame { height:1400px !important; min-height:1400px !important; }
}


/* BeeTech branded animated intro; respects reduced-motion settings */
#beetech-intro{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:#050505;opacity:1;visibility:visible;transition:opacity .75s ease,visibility .75s ease}
#beetech-intro.intro-hidden{opacity:0;visibility:hidden;pointer-events:none}
#beetech-intro .intro-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center;animation:beetechIntroRise 1.15s cubic-bezier(.2,.75,.25,1) both}
#beetech-intro .intro-logo{display:block;width:min(66vw,390px);max-height:48vh;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,196,0,.24));animation:beetechLogoGlow 1.8s ease-in-out infinite alternate}
#beetech-intro .intro-line{width:min(250px,55vw);height:3px;background:#ffc400;transform-origin:left;animation:beetechLine 1.3s ease both}
#beetech-intro p{margin:0;color:#ffc400;font-size:11px;letter-spacing:.35em;font-weight:800}
@keyframes beetechIntroRise{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes beetechLogoGlow{from{filter:drop-shadow(0 0 5px rgba(255,196,0,.18))}to{filter:drop-shadow(0 0 22px rgba(255,196,0,.48))}}
@keyframes beetechLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){#beetech-intro .intro-logo-wrap,#beetech-intro .intro-logo,#beetech-intro .intro-line{animation:none}}
@media(max-width:600px){#beetech-intro .intro-logo{width:min(78vw,330px)}#beetech-intro p{font-size:9px;letter-spacing:.25em}}


/* BeeTech light glassmorphism + mobile usability refresh. Additive overrides only; preserves existing page logic and features. */
:root{--bt-ink:#1b2b43;--bt-muted:#60718a;--bt-line:rgba(148,169,198,.34);--bt-glass:rgba(255,255,255,.72);--bt-glass-strong:rgba(255,255,255,.88);--bt-blue:#4c78b9;--bt-gold:#e9ad25;}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.app-body{color:var(--bt-ink)!important;background:radial-gradient(ellipse at 8% 0%,rgba(174,210,255,.58),transparent 36%),radial-gradient(ellipse at 94% 8%,rgba(255,226,169,.45),transparent 30%),linear-gradient(145deg,#f4f8ff 0%,#edf3fb 48%,#f9fbff 100%)!important;background-attachment:fixed!important}
.app-shell{min-height:100vh}
.sidebar{background:rgba(255,255,255,.68)!important;border-right:1px solid var(--bt-line)!important;box-shadow:8px 0 34px rgba(42,70,110,.07);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.brand{border-bottom-color:var(--bt-line)!important}.brand strong,.top-title{color:#20324d!important}.brand small,.sidebar-bottom,.top-user,.muted,.stat-label,.footer-note{color:var(--bt-muted)!important}
.nav-item{color:#4b5f79!important;border:1px solid transparent!important;background:rgba(255,255,255,.36)!important;border-radius:13px!important;min-height:44px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.nav-item:hover,.nav-item.active{color:#20324d!important;background:rgba(255,255,255,.9)!important;border-color:rgba(117,153,201,.4)!important;box-shadow:0 8px 22px rgba(65,98,145,.09)!important}.nav-item.active{box-shadow:inset 3px 0 var(--bt-gold),0 8px 22px rgba(65,98,145,.09)!important}
.nav-item .ico,.eyebrow{color:#b47c08!important}
.topbar{background:rgba(255,255,255,.68)!important;border-bottom:1px solid var(--bt-line)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 5px 25px rgba(44,72,111,.04)}
.btn{background:rgba(255,255,255,.76)!important;color:#263a56!important;border-color:rgba(135,157,189,.42)!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(44,72,111,.05);min-height:42px}.btn:hover{border-color:#8baedb!important;background:#fff!important}.btn.gold{background:linear-gradient(135deg,#ffdc77,#f4bd3c)!important;border-color:#e9b63f!important;color:#3c2c08!important}.btn.danger{color:#a83343!important;border-color:#e7b8bf!important}
.avatar{background:linear-gradient(135deg,#e5efff,#fff0c7)!important;color:#6e560f!important;border:1px solid var(--bt-line)}
.stat-card,.panel,.modal,.track-event-card,.track-map-card,.track-hero{background:var(--bt-glass)!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:0 16px 42px rgba(43,70,109,.10),inset 0 1px 0 rgba(255,255,255,.8)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:var(--bt-ink)!important}
.stat-card,.panel{border-radius:20px!important}.stat-value,.panel-title,.page-title,.modal h1,.modal h2,.modal h3{color:#1d304b!important}.status{background:#e8eef8!important;color:#425876!important}.status.paid,.status.approved,.status.completed{background:#d9f5e9!important;color:#176a4b!important}.status.pending,.status.partially_paid,.status.in_progress{background:#fff0c9!important;color:#855d08!important}.status.rejected,.status.overdue,.status.cancelled{background:#ffe1e4!important;color:#a12e40!important}
.field label,.report-builder label{color:#435873!important}.field input,.field select,.field textarea,.search,input,select,textarea{color:#243751!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(133,157,190,.45)!important;border-radius:12px!important;box-shadow:inset 0 1px 2px rgba(42,70,110,.025)}.field input::placeholder,.field textarea::placeholder,.search::placeholder,input::placeholder,textarea::placeholder{color:#8291a7!important;opacity:1}.field input:focus,.field select:focus,.field textarea:focus,.search:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:#83a9dc!important;box-shadow:0 0 0 4px rgba(107,153,214,.16)!important}.field select option,select option{background:#fff;color:#243751}.field textarea{min-height:104px}.notice{background:rgba(255,246,219,.88)!important;border-color:#f0d797!important;color:#76520c!important}
.table-wrap{border-color:var(--bt-line)!important;border-radius:15px!important;background:rgba(255,255,255,.48)!important}table{background:transparent!important}th{background:rgba(227,237,250,.92)!important;color:#526782!important}td{color:#344963!important;border-bottom-color:rgba(148,169,198,.24)!important}tr:hover td{background:rgba(232,241,253,.5)}
.modal-backdrop{background:rgba(31,48,74,.32)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)}.modal{background:rgba(249,252,255,.94)!important;border-color:rgba(255,255,255,.95)!important;border-radius:22px!important;color:var(--bt-ink)!important}.modal-head{gap:12px}.toast{background:rgba(255,255,255,.94)!important;color:#20324d!important;border-color:var(--bt-line)!important;box-shadow:0 18px 48px rgba(43,70,109,.18)!important}.empty{color:var(--bt-muted)!important}.skeleton{background:linear-gradient(90deg,#e5edf8,#f8fbff,#e5edf8)!important;background-size:200%}
.track-hero{background:linear-gradient(135deg,rgba(232,242,255,.96),rgba(255,249,232,.9))!important}.track-kicker,.track-location-copy span,.track-eta-row p,.track-event-by,.track-event-head time,.track-event-note{color:#61738b!important}.track-progress-step small{color:#596d87!important}.track-location-row,.track-eta-row,.track-event-card,.track-event-note{border-color:var(--bt-line)!important}.track-eta-row{background:rgba(234,242,252,.7)!important}.track-event-card{background:rgba(255,255,255,.78)!important}.track-event-note{background:rgba(238,244,252,.86)!important}.track-empty{color:#334965!important;border-color:#b9cbe3!important}
body.portal-body{background:radial-gradient(ellipse at 15% 0%,rgba(174,210,255,.55),transparent 40%),linear-gradient(145deg,#f4f8ff,#eef4fc 60%,#fff9ed)!important;color:#20324d!important}
body.portal-body .portal-wrap{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.92)!important;border-radius:26px!important;box-shadow:0 24px 70px rgba(48,75,114,.14),inset 0 1px 0 #fff!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body.portal-body .portal-wrap h1{color:#20324d!important}body.portal-body .portal-wrap p,body.portal-body .portal-wrap label{color:#596d87!important}
@media(max-width:720px){
 body.app-body{background-attachment:scroll!important}.sidebar{background:rgba(247,250,255,.96)!important;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);padding:18px 12px;box-shadow:18px 0 55px rgba(35,59,94,.18)}
 .topbar{height:auto;min-height:62px;padding:10px 12px!important;gap:8px}.top-title{font-size:13px!important;line-height:1.35}.top-user{gap:6px}.top-user .avatar{flex:0 0 32px}.top-user #signOut{padding:8px 10px;font-size:12px;min-height:38px}
 .content{padding:14px 10px!important}.welcome-row{gap:12px;margin-bottom:17px}.page-title{font-size:clamp(24px,7vw,32px)!important}.eyebrow{font-size:10px;letter-spacing:.13em}.stats{gap:9px}.stat-card,.panel{padding:13px!important;border-radius:16px!important}.stat-value{font-size:clamp(20px,5.5vw,26px)}.panel-head{align-items:flex-start;gap:10px}.toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.toolbar .btn{width:100%}
 .form-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}.field{margin-bottom:13px}.field label{font-size:12px;line-height:1.4}.field input,.field select,.field textarea,.search{padding:13px!important;min-height:46px}.field textarea{min-height:100px}.modal-backdrop{padding:7px!important;align-items:end!important}.modal{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 14px)!important;padding:16px 13px!important;border-radius:22px 22px 16px 16px!important;overflow-y:auto!important;overscroll-behavior:contain}.modal-head{position:sticky;top:-16px;z-index:2;padding:8px 0 12px;background:rgba(249,252,255,.95);backdrop-filter:blur(12px);margin-bottom:12px!important}.modal .actions,.modal .form-actions{display:flex;flex-wrap:wrap;gap:8px}.modal .actions .btn,.modal .form-actions .btn{flex:1 1 120px}.table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:640px}.track-modal{max-height:calc(100dvh - 14px)!important}.track-hero{border-radius:17px!important}.track-section-heading{margin-top:17px}
}
@media(max-width:380px){.topbar{padding:8px!important}.top-title{font-size:12px!important}.top-user{gap:4px}.top-user #signOut{font-size:11px;padding:7px}.content{padding:11px 8px!important}.stat-card,.panel{padding:10px!important}.modal{padding:13px 10px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* Targeted homepage hero visibility repair — no other page settings changed. */
#home.page.active {
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#home.page.active .home-content {
  display: flex !important;
  position: relative !important;
  z-index: 21 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
}
#home.page.active .home-content > .small-title,
#home.page.active .home-content > h1,
#home.page.active .home-content > p,
#home.page.active .home-content > .buttons,
#home.page.active .home-content > .stats {
  opacity: 1 !important;
  visibility: visible !important;
}
#home.page.active .home-content > h1 { color: #f5f5f5 !important; }
#home.page.active .home-content > p { color: rgba(255,255,255,.82) !important; }

/* Shared animated BeeTech world background across all public website pages. */
body:not(.theme-staff):not(.app-body):not(.portal-body) {
  background: #010202 !important;
  isolation: isolate;
}
body:not(.theme-staff):not(.app-body):not(.portal-body) #background-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body:not(.theme-staff):not(.app-body):not(.portal-body) #background-image {
  background-image: url("images/beetech-world.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .78 !important;
  animation: backgroundMove 18s ease-in-out infinite alternate !important;
}
body:not(.theme-staff):not(.app-body):not(.portal-body) main {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
body:not(.theme-staff):not(.app-body):not(.portal-body) main > .page {
  background: transparent !important;
}
body:not(.theme-staff):not(.app-body):not(.portal-body) main > .page.active {
  background: transparent !important;
}