/* =========================================================
   PREMIUM THEME — loaded last. Fixed photo behind the whole site,
   dark glass panels scrolling over it, copper-gold accent.
   255,
   ========================================================= */
:root,
[data-theme="dark"] {
    --primary: #0c1320;
    --primary-2: #16253c;
    --primary-3: #05080e;
    --accent: #d9a45b;
    --accent-2: #f0cf94;
    --cyan: #4cc3d0;
    --bg: #070a10;
    --bg-alt: rgba(255, 255, 255, 0.06);
    --card: rgba(14, 21, 34, 0.62);
    --text: #e9eef6;
    --muted: #a6b3c7;
    --border: rgba(255, 255, 255, 0.1);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
    --font-head: "Sora", "Inter", system-ui, sans-serif;
    color-scheme: dark;
}
body {
    background: #05080e;
}
#themeBtn {
    display: none;
}

/* ---------- The fixed background photo (stays put while content scrolls) ---------- */
.bg-fixed {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: #05080e url("../img/hero-escalator.webp") center center/cover
        no-repeat;
    transform: translateZ(0);
}
.bg-fixed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(4, 7, 12, 0.5),
        rgba(4, 7, 12, 0.18) 45%,
        rgba(4, 7, 12, 0.55)
    );
}

/* ---------- Sections become translucent glass over the photo ---------- */
section {
    padding: 120px 0;
    background: rgba(6, 9, 14, 0.74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
section.alt {
    background: rgba(9, 14, 23, 0.86);
}
.hero,
.band,
.cta,
.page-banner {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.preloader {
    background: #05080e;
}

/* typography */
.section-title {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}
.section-title span {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.eyebrow {
    letter-spacing: 0.24em;
}

/* header / top bar */
.topbar {
    background: rgba(3, 5, 9, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.site-header {
    background: rgba(6, 9, 15, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
header.site-header.scrolled {
    background: rgba(6, 9, 15, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
}
.dropdown,
.dropdown .sub {
    background: rgba(11, 17, 28, 0.97);
    border-color: rgba(255, 255, 255, 0.12);
}
.logo,
[data-theme="dark"] .logo {
    color: #fff;
}
nav.main-nav {
    background: #070a10;
}
.btn-dark {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-dark:hover {
    background: var(--accent);
    color: #1b1300;
    border-color: var(--accent);
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 12px 28px rgba(217, 164, 91, 0.35);
}

/* ---------- Hero: the photo shows through, text sits on a left gradient ---------- */
.hero {
    height: min(100vh, 880px);
    min-height: 640px;
}
.hero::before {
    background: linear-gradient(
        100deg,
        rgba(4, 7, 12, 0.84) 0%,
        rgba(4, 7, 12, 0.46) 52%,
        rgba(4, 7, 12, 0.08) 100%
    );
}
.hero::after {
    height: 180px;
    background: linear-gradient(to top, rgba(6, 9, 14, 0.74), transparent);
}
.slide h1 {
    font-weight: 600;
    letter-spacing: -0.03em;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    line-height: 1.04;
}
.slide p {
    font-size: 1.15rem;
}
.hero-arrows button,
.float-card,
.shaft {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Animated lift in the hero (desktop) ---------- */
.hero-lift {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
}
.hero-side {
    display: none;
    position: relative;
    justify-content: center;
    align-items: center;
}
@media (min-width: 1025px) {
    .hero-side {
        display: flex;
    }
}
.lift-widget {
    position: relative;
    width: 250px;
    height: 420px;
}

.shaft {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0 31px,
            rgba(255, 255, 255, 0.045) 31px 32px
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.03)
        );
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}
/* hoist cable (behind the cabin) and guide rails (both sides) */
.shaft::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(90deg, #5b6678, #d5dce8 50%, #5b6678);
    opacity: 0.5;
}
.shaft::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background:
        linear-gradient(90deg, #4a5566, #b9c4d4 50%, #4a5566) left 16px top
            0/5px 100% no-repeat,
        linear-gradient(90deg, #4a5566, #b9c4d4 50%, #4a5566) right 16px top
            0/5px 100% no-repeat;
}
/* cabin: gold frame, warm lit interior */
.cab {
    --travel: 222px;
    position: absolute;
    left: 50%;
    width: 118px;
    height: 150px;
    margin-left: -59px;
    bottom: 14px;
    border-radius: 14px;
    border: 5px solid transparent;
    overflow: hidden;
    will-change: transform;
    animation: ride 20s cubic-bezier(0.5, 0, 0.25, 1) infinite;
    background:
        linear-gradient(180deg, transparent 84%, rgba(0, 0, 0, 0.55) 84%)
            padding-box,
        url(../img/logo-full.png) 50% 44% / auto 62px no-repeat padding-box,
        repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.035) 0 1px,
                transparent 1px 27px
            )
            padding-box,
        radial-gradient(
                ellipse 70% 55% at 50% 42%,
                rgba(217, 164, 91, 0.28),
                transparent 70%
            )
            padding-box,
        radial-gradient(
                ellipse at 50% 12%,
                #34415e 0,
                #141c2e 55%,
                #0a0f1a 100%
            )
            padding-box,
        linear-gradient(145deg, #ffe6a8, #c8892f 40%, #fff0c4 55%, #9a6a22)
            border-box;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(245, 165, 36, 0.25);
}
/* glossy steel doors */
.cab::before,
.cab::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: calc(50% - 9px);
    border-radius: 2px;
    will-change: transform;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 10px rgba(0, 0, 0, 0.4);
}
.cab::before {
    left: 8px;
    animation: doorsL 20s cubic-bezier(0.65, 0, 0.3, 1) infinite;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.14) 16%,
            rgba(255, 255, 255, 0) 32%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.38),
            rgba(255, 255, 255, 0) 40%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.07) 0 1px,
            transparent 1px 4px
        ),
        linear-gradient(
            180deg,
            #d8e1ee 0%,
            #9fb1c8 46%,
            #5e7391 50%,
            #8ea2bd 78%,
            #b9c7da 100%
        );
}
.cab::after {
    right: 8px;
    animation: doorsR 20s cubic-bezier(0.65, 0, 0.3, 1) infinite;
    background:
        linear-gradient(
            260deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.14) 16%,
            rgba(255, 255, 255, 0) 32%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.38),
            rgba(255, 255, 255, 0) 40%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.07) 0 1px,
            transparent 1px 4px
        ),
        linear-gradient(
            180deg,
            #d8e1ee 0%,
            #9fb1c8 46%,
            #5e7391 50%,
            #8ea2bd 78%,
            #b9c7da 100%
        );
}
/* one 20s cycle: doors open at the ground floor, close, lift rises, doors open at the top, close, lift returns */
@keyframes ride {
    0%,
    10% {
        transform: translateY(0);
    }
    42%,
    63% {
        transform: translateY(calc(var(--travel) * -1));
    }
    93%,
    100% {
        transform: translateY(0);
    }
}
@keyframes doorsL {
    0%,
    4%,
    49%,
    56%,
    100% {
        transform: translateX(-100%);
    }
    10%,
    43%,
    62%,
    94% {
        transform: translateX(0);
    }
}
@keyframes doorsR {
    0%,
    4%,
    49%,
    56%,
    100% {
        transform: translateX(100%);
    }
    10%,
    43%,
    62%,
    94% {
        transform: translateX(0);
    }
}
/* floor display: rolling number reel + direction arrow */
.floor-display {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 104px;
    padding: 7px 16px;
    border-radius: 14px;
    font-family: "Poppins", monospace;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--accent);
    text-shadow: 0 0 12px rgba(245, 165, 36, 0.75);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0) 45%
        ),
        linear-gradient(180deg, #0b1424, #05080f);
    border: 1px solid rgba(245, 185, 74, 0.7);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.06),
        0 10px 26px rgba(0, 0, 0, 0.5),
        0 0 26px rgba(245, 165, 36, 0.35),
        inset 0 0 14px rgba(0, 0, 0, 0.8);
}
.fd-win {
    display: block;
    height: 1.4em;
    line-height: 1.4em;
    overflow: hidden;
    min-width: 1.7em;
    text-align: center;
}
.fd-reel {
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}
.fd-reel b {
    display: block;
    height: 1.4em;
    font-weight: 600;
}
.fd-dir {
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -0.3em;
    width: 0;
    height: 0;
    border-left: 0.38em solid transparent;
    border-right: 0.38em solid transparent;
    border-bottom: 0.6em solid var(--accent);
    opacity: 0;
    transition:
        opacity 0.3s,
        transform 0.3s;
    filter: drop-shadow(0 0 5px rgba(245, 165, 36, 0.8));
}
.fd-dir.up {
    opacity: 1;
}
.fd-dir.down {
    opacity: 1;
    transform: rotate(180deg);
}

.float-card {
    position: absolute;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: floaty 5s ease-in-out infinite;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    color: #e8eef7;
    white-space: nowrap;
}
.float-card b {
    display: block;
    font-family: "Sora", sans-serif;
    font-size: 1.3rem;
    color: #f0cf94;
    line-height: 1.1;
}
.float-card.c1 {
    left: -90px;
    top: 60px;
}
.float-card.c2 {
    right: -80px;
    bottom: 50px;
    animation-delay: -2.5s;
}
@keyframes floaty {
    50% {
        transform: translateY(-14px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cab,
    .cab::before,
    .cab::after,
    .float-card {
        animation: none;
    }
}

/* ---------- Ticker ---------- */
.ticker {
    background: rgba(5, 8, 14, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--accent-2);
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    font-weight: 500;
    letter-spacing: 0.14em;
}
.ticker span::before {
    color: var(--accent);
    opacity: 1;
}

/* ---------- Glass cards ---------- */
.p-card,
.why-item,
.t-card,
.mv,
.part,
.info,
.form-card,
.side-card,
.faq,
.tm,
.client,
.step .num,
.filters button {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.1);
}
.filters button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #1b1300;
}
.modal-box {
    background: #0d1522;
}
.form-card {
    background: rgba(12, 19, 31, 0.72);
}
.faq.open {
    border-color: var(--accent);
}
.about-media .img-sub {
    border-color: #0a0f18;
}
.t-card::before {
    background: linear-gradient(135deg, #0c1320, #1d3354);
}

/* ---------- Bento product grid ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 18px;
}
.bt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    background-color: #14243c;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition:
        transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.5s,
        border-color 0.5s;
}
.bt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(4, 7, 12, 0.94),
        rgba(4, 7, 12, 0.4) 62%,
        rgba(4, 7, 12, 0.12)
    );
    transition: 0.5s;
}
.bt:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}
.bt:hover::before {
    background: linear-gradient(
        to top,
        rgba(4, 7, 12, 0.96),
        rgba(217, 164, 91, 0.16)
    );
}
.bt-ic {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.bt-go {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: grid;
    place-items: center;
    transition: 0.4s;
}
.bt:hover .bt-go {
    background: var(--accent);
    border-color: var(--accent);
    color: #1b1300;
    transform: rotate(-45deg);
}
.bt h3 {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.bt p {
    color: #cfdbec;
    font-size: 0.92rem;
    max-width: 420px;
}
.bt:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
.bt:nth-child(1) h3 {
    font-size: 2.1rem;
}
.bt:nth-child(4),
.bt:nth-child(5),
.bt:nth-child(6) {
    grid-column: span 2;
}

@media (min-width: 1025px) {
    .bt:nth-child(4),
    .bt:nth-child(5) {
        grid-column: span 1;
    }
    .bt:nth-child(6),
    .bt:nth-child(7) {
        grid-column: span 2;
    }
}

/* ---------- Statement / numbers band (photo clearly visible) ---------- */
.band {
    padding: 170px 0;
    background: linear-gradient(
        180deg,
        rgba(4, 7, 12, 0.4),
        rgba(4, 7, 12, 0.58)
    ) !important;
}
.band-head {
    max-width: 820px;
    margin-bottom: 80px;
}
.band-head h2 {
    font-family: var(--font-head);
    font-size: clamp(2.3rem, 5.6vw, 4.6rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #fff;
}
.band-head h2 em {
    font-style: normal;
    color: var(--accent);
}
.stats-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 44px;
}
.stat {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    text-align: left;
    padding: 6px 24px;
}
.stat:first-child {
    padding-left: 0;
}
.stat .si {
    display: none;
}
.stat b {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    color: #fff;
}
.stat span {
    color: var(--accent-2);
}

/* ---------- CTA band ---------- */
.cta {
    background: linear-gradient(
        120deg,
        rgba(217, 164, 91, 0.96),
        rgba(240, 207, 148, 0.96)
    );
    color: #140d02;
    padding: 90px 0;
}
.cta::before {
    display: none;
}
.cta h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
}
.cta .btn-primary {
    background: #0b111c;
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Inner page banner (photo shows through) ---------- */
.page-banner {
    padding: 150px 0 100px;
    background: linear-gradient(
        100deg,
        rgba(4, 7, 12, 0.88),
        rgba(4, 7, 12, 0.3)
    );
}
.page-banner h1 {
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* ---------- Footer ---------- */
footer {
    background: rgba(4, 7, 12, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.copy {
    background: rgba(0, 0, 0, 0.25);
}

@media (max-width: 1024px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }
    .bt:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }
    .bt:nth-child(1) {
        grid-column: span 2;
    }
    .stat {
        border: 0;
        padding: 6px 10px;
    }
}
@media (max-width: 640px) {
    section {
        padding: 84px 0;
    }
    .band {
        padding: 110px 0;
    }
    .bento {
        grid-template-columns: 1fr;
    }
    .bt:nth-child(1) {
        grid-column: auto;
    }
    .slide h1 {
        font-size: 2.5rem;
    }
}

/* ---------- Logo (image lockup: mark + wordmark) ---------- */
.logo {
    gap: 14px;
}
.logo img {
    display: block;
    width: auto;
}
.logo-mark-img {
    height: 46px;
}
.logo-word-img {
    height: 42px;
}
footer .logo-mark-img {
    height: 58px;
}
footer .logo-word-img {
    height: 52px;
}
@media (max-width: 380px) {
    .logo-word-img {
        display: none;
    }
}

/* ---------- Preloader (home page, first time only): glass lift opens, logo appears ---------- */
.preloader {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(
        ellipse at 50% 40%,
        #142036 0%,
        #080d16 58%,
        #03050a 100%
    );
    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}
.preloader.hide {
    opacity: 0;
    visibility: hidden;
}
.lift {
    position: relative;
    font-size: min(16px, 3.9vw, 2.7vh);
    width: 22em;
    padding: 1.3em 1.3em 0;
    border-radius: 0.5em 0.5em 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0) 40%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 0 1px,
            transparent 1px 3.2em
        ),
        linear-gradient(180deg, #121b2b, #0c121d);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 0;
    box-shadow:
        0 3em 7em rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    transition:
        transform 1s cubic-bezier(0.5, 0, 0.2, 1),
        opacity 0.8s ease;
}
.preloader.hide .lift {
    transform: scale(1.14);
    opacity: 0;
}
/* floor indicator above the doors */
.lift-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    width: 9em;
    height: 2.5em;
    margin: 0 auto 1.1em;
    border-radius: 0.4em;
    background: linear-gradient(180deg, #06090f, #0e1522);
    border: 1px solid rgba(217, 164, 91, 0.55);
    box-shadow:
        inset 0 0 1em rgba(0, 0, 0, 0.8),
        0 0 0 0.22em #29323f,
        0 0.4em 1em rgba(0, 0, 0, 0.5);
    animation: plDing 0.7s ease 1.2s both;
}
.ls-arrow {
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.8em solid #f5b94a;
    filter: drop-shadow(0 0 0.35em rgba(245, 185, 74, 0.8));
    animation:
        plBlink 0.5s steps(1) 0s 3,
        plArrowOff 0.01s linear 1.5s forwards;
}
.ls-floor {
    height: 1.7em;
    overflow: hidden;
    font: 600 1.45em/1.7em var(--font-head);
    color: #f5b94a;
    text-shadow: 0 0 0.6em rgba(245, 185, 74, 0.7);
    width: 1em;
    text-align: center;
}
.ls-strip {
    animation: plCount 1s steps(2, end) 0.2s forwards;
}
.ls-strip b {
    display: block;
    height: 1.7em;
    font-weight: 600;
}
@keyframes plCount {
    to {
        transform: translateY(-3.4em);
    }
}
@keyframes plBlink {
    50% {
        opacity: 0.25;
    }
}
@keyframes plArrowOff {
    to {
        opacity: 0.35;
        filter: none;
    }
}
@keyframes plDing {
    0%,
    100% {
        box-shadow:
            inset 0 0 1em rgba(0, 0, 0, 0.8),
            0 0 0 0.22em #29323f,
            0 0.4em 1em rgba(0, 0, 0, 0.5);
    }
    40% {
        box-shadow:
            inset 0 0 1em rgba(0, 0, 0, 0.8),
            0 0 0 0.22em #29323f,
            0 0 2em rgba(245, 185, 74, 0.55);
    }
}
/* steel door frame (jambs + header) */
.lift-frame {
    padding: 0.85em 0.85em 0;
    border-radius: 0.3em 0.3em 0 0;
    background: linear-gradient(
        100deg,
        #6f7886 0%,
        #c3cad4 14%,
        #566070 30%,
        #2f3745 50%,
        #5d6776 70%,
        #c7ced8 86%,
        #6a7381 100%
    );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        0 0.6em 1.6em rgba(0, 0, 0, 0.5);
}
.lift-shaft {
    position: relative;
    aspect-ratio: 17.9/23;
    overflow: hidden;
    background: #05070b;
    box-shadow:
        inset 0 0 0 0.14em #d9a45b,
        inset 0 0 1.6em rgba(0, 0, 0, 0.9);
}
/* cabin interior */
.cabin {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45),
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.45)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 0 1px,
            transparent 1px 4.4em
        ),
        linear-gradient(180deg, #232c3d, #0d121c);
}
.cb-light {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22%;
    background: radial-gradient(
        ellipse 60% 100% at 50% 0,
        rgba(255, 226, 170, 0.55),
        rgba(217, 164, 91, 0.12) 55%,
        transparent 80%
    );
    opacity: 0;
    animation: plFade 1.2s ease 1.3s forwards;
}
.cb-rail {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 79%;
    height: 0.45em;
    border-radius: 0.3em;
    background: linear-gradient(180deg, #f0cf93, #a8782f 60%, #6d4c1a);
    box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.5);
}
.cb-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 13%;
    background: linear-gradient(180deg, #0a0e16, #1d2535 60%, #2a3347);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-logo {
    position: relative;
    z-index: 1;
    width: 48%;
    aspect-ratio: 303/418;
    margin-top: -6%;
    animation: plGlow 1.2s ease 2.7s both;
}
.pl-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    will-change: transform, opacity;
    animation: plJoin 0.85s cubic-bezier(0.2, 0.85, 0.25, 1.04)
        calc(1.85s + var(--d, 0s) * 0.35) both;
}
@keyframes plJoin {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--x) * 0.28), calc(var(--y) * 0.28), 0)
            rotate(calc(var(--r) * 0.5)) scale(0.6);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes plGlow {
    from {
        filter: drop-shadow(0 0 0 rgba(217, 164, 91, 0));
    }
    to {
        filter: drop-shadow(0 0.4em 1.2em rgba(217, 164, 91, 0.45));
    }
}
@keyframes plFade {
    to {
        opacity: 1;
    }
}
/* glass doors */
.gdoor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.2%;
    will-change: transform;
    backface-visibility: hidden;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.04) 26%,
            rgba(255, 255, 255, 0) 34%,
            rgba(255, 255, 255, 0.09) 48%,
            rgba(255, 255, 255, 0) 56%,
            rgba(150, 190, 230, 0.12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(120, 160, 205, 0.22),
            rgba(30, 50, 80, 0.34) 60%,
            rgba(10, 20, 35, 0.5)
        );
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow:
        inset 0 0 0 0.3em #8f98a6,
        inset 0 0 0 0.38em rgba(0, 0, 0, 0.45),
        inset 0 0 1.4em rgba(180, 215, 255, 0.18);
}
.gdoor::before {
    content: "";
    position: absolute;
    left: 0.3em;
    right: 0.3em;
    top: 46%;
    height: 9%;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.gdoor::after {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 0.32em;
    border-radius: 0.2em;
    background: linear-gradient(90deg, #e8c27f, #9b6f2b);
}
.gdoor.l {
    left: 0;
    animation: plDoorL 1.7s cubic-bezier(0.7, 0, 0.2, 1) 1.35s both;
}
.gdoor.r {
    right: 0;
    animation: plDoorR 1.7s cubic-bezier(0.7, 0, 0.2, 1) 1.35s both;
}
.gdoor.l::after {
    right: 0.55em;
}
.gdoor.r::after {
    left: 0.55em;
}
@keyframes plDoorL {
    to {
        transform: translate3d(-101%, 0, 0);
    }
}
@keyframes plDoorR {
    to {
        transform: translate3d(101%, 0, 0);
    }
}
/* threshold sill */
.lift-sill {
    height: 1.2em;
    margin: 0 -1.3em;
    background: linear-gradient(180deg, #d4dae3, #8e97a5 45%, #4a5362);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.55);
    position: relative;
}
.lift-sill::after {
    content: "";
    position: absolute;
    left: 1.3em;
    right: 1.3em;
    top: 0.35em;
    height: 0.5em;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.45) 0 0.12em,
        transparent 0.12em 0.4em
    );
    opacity: 0.7;
}
/* call button plate */
.lift-call {
    position: absolute;
    left: calc(100% + 1.1em);
    top: 52%;
    display: grid;
    gap: 0.7em;
    justify-items: center;
    padding: 0.8em 0.6em;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #c8cfd9, #6c7584);
    box-shadow:
        0 0.3em 0.8em rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.lift-call span {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a5160, #1a1f29);
    box-shadow: inset 0 0 0 0.14em #2c3340;
}
.lift-call .up {
    animation: plBtn 0.4s ease 0.1s forwards;
}
@keyframes plBtn {
    to {
        background: radial-gradient(circle at 35% 30%, #ffe3a6, #f5a524);
        box-shadow:
            inset 0 0 0 0.14em #ffd37a,
            0 0 1em rgba(245, 165, 36, 0.9);
    }
}
@media (max-width: 640px) {
    .lift-call {
        display: none;
    }
}
/* lean preloader (every other page, and repeat visits to home): logo on a soft glass glow */
.pl-lean {
    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}
.pl-mark {
    position: relative;
    font-size: min(16px, 4vw);
    width: min(150px, 40vw);
    animation: plMarkIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pl-mark img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 0.9em rgba(217, 164, 91, 0.4));
    animation: plImgGlow 2.6s ease-in-out 0.9s infinite;
}
/* soft frosted-glass plate that hugs the logo */
.pl-mark::before {
    content: "";
    position: absolute;
    inset: -13% -24%;
    border-radius: 1.6em;
    pointer-events: none;
    background: linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.13),
        rgba(255, 255, 255, 0.025) 45%,
        rgba(217, 164, 91, 0.09)
    );
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
        0 0 2.6em rgba(217, 164, 91, 0.22),
        inset 0 0 1.8em rgba(217, 164, 91, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation:
        plGlowIn 0.9s ease both,
        plPlate 2.6s ease-in-out 0.9s infinite;
}
@keyframes plPlate {
    50% {
        box-shadow:
            0 0 3.4em rgba(217, 164, 91, 0.32),
            inset 0 0 2.2em rgba(217, 164, 91, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}
@keyframes plImgGlow {
    50% {
        filter: drop-shadow(0 0 1.3em rgba(217, 164, 91, 0.6));
    }
}
@keyframes plMarkIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes plGlowIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pl-mark,
    .pl-mark::before,
    .pl-mark img {
        animation: none;
    }
}
/* safety net if scripts fail */
.preloader {
    animation: plAuto 0.6s ease 8.5s forwards;
}
@keyframes plAuto {
    to {
        opacity: 0;
        visibility: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gdoor {
        display: none;
    }
    .preloader *,
    .lift-sign {
        animation: none !important;
    }
    .ls-strip {
        transform: translateY(-10.2em);
    }
    .pl-logo img,
    .cb-light {
        opacity: 1;
        transform: none;
    }
}

/* ---------- About page: concerns, vision/mission, strengths ---------- */
.concerns {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.concern {
    grid-column: span 2;
    position: relative;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 34px 28px 30px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: 0.45s;
    overflow: hidden;
}
.concern:nth-child(n + 4) {
    grid-column: span 3;
}
.concern:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}
.concern .cn {
    position: absolute;
    right: 22px;
    top: 12px;
    font-family: var(--font-head);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.07);
    transition: 0.4s;
}
.concern:hover .cn {
    color: rgba(217, 164, 91, 0.28);
}
.concern .ic {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
    box-shadow: 0 10px 22px rgba(217, 164, 91, 0.3);
}
.concern h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.concern p {
    color: var(--muted);
    font-size: 0.94rem;
}
.overview {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: start;
}
.vm-grid {
    display: grid;
    gap: 22px;
}
.vm-card {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 30px 30px 26px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.vm-card h3 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-card h3::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.vm-card > p {
    color: var(--muted);
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.feat.one {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 8px 0 0;
}
.feat.one li {
    font-weight: 400;
    color: #d6e0ee;
}
.str-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.str-grid .mv {
    grid-column: span 2;
}
.str-grid .mv:nth-child(n + 4) {
    grid-column: span 3;
}
@media (max-width: 1024px) {
    .concerns,
    .str-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .concern,
    .concern:nth-child(n + 4),
    .str-grid .mv,
    .str-grid .mv:nth-child(n + 4) {
        grid-column: auto;
    }
    .overview {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 640px) {
    .concerns,
    .str-grid {
        grid-template-columns: 1fr;
    }
}
/* ---------- Smooth page-to-page transition (no preloader needed) ---------- */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: plPageOut 0.28s ease both;
}
::view-transition-new(root) {
    animation: plPageIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#header {
    view-transition-name: site-header;
}
::view-transition-group(site-header) {
    animation-duration: 0s;
}
@keyframes plPageOut {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}
@keyframes plPageIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* browsers without cross-page transitions: simple fade instead */
@supports not (view-transition-name: none) {
    body {
        animation: plPageIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    html.pl-leaving body {
        opacity: 0;
        transition: opacity 0.25s ease;
    }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
    body {
        animation: none !important;
    }
}

/* =========================================================
   CONCERNS (cards are links, 3 per row) + GALLERY FOLDERS
   ========================================================= */
.concerns .concern{grid-column:span 2;display:block;color:inherit;text-decoration:none}
.concerns .concern:nth-child(n + 4){grid-column:span 2}
.concern .ic{color:#1b1300}

.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.folder{position:relative;display:block;padding-top:26px;color:inherit;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.folder:hover{transform:translateY(-8px)}
.f-tab{position:absolute;left:0;top:0;width:44%;height:34px;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#f0cf94,#d9a45b);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.f-tab::after{content:"";position:absolute;right:-18px;bottom:0;width:36px;height:100%;background:#d9a45b;transform:skewX(32deg);border-radius:0 10px 0 0}
.f-back{position:relative;height:300px;border-radius:0 22px 22px 22px;background:linear-gradient(165deg,#d9a45b,#a97a35);box-shadow:0 26px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden}
.f-photos{position:absolute;left:0;right:0;top:20px;height:190px}
.f-photos i{position:absolute;top:0;width:46%;height:170px;border-radius:12px;background:#0d1522 center/cover no-repeat;border:4px solid #fff;box-shadow:0 12px 26px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.f-photos i:nth-child(1){left:6%;transform:rotate(-7deg)}
.f-photos i:nth-child(2){left:27%;z-index:2;transform:translateY(-4px)}
.f-photos i:nth-child(3){right:6%;transform:rotate(7deg)}
.folder:hover .f-photos i:nth-child(1){transform:translate(-8px,-14px) rotate(-11deg)}
.folder:hover .f-photos i:nth-child(2){transform:translateY(-20px)}
.folder:hover .f-photos i:nth-child(3){transform:translate(8px,-14px) rotate(11deg)}
.f-front{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;background:linear-gradient(180deg,#f0cf94,#d9a45b);border-radius:0 0 22px 22px;box-shadow:0 -10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6);color:#1b1300}
.f-front h3{font-family:var(--font-head);font-size:1.2rem;font-weight:700;line-height:1.2;margin-bottom:2px}
.f-front span{font-size:.85rem;opacity:.75}
.f-front b{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#1b1300;color:#f0cf94;font-size:1.1rem;transition:.35s}
.folder:hover .f-front b{transform:translateX(4px) scale(1.08)}

@media (max-width:1024px){
  .concerns .concern,.concerns .concern:nth-child(n + 4){grid-column:auto}
  .folders{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .folders{grid-template-columns:1fr}
}
/* =========================================================
   CONCERNS (cards are links, 3 per row) + GALLERY FOLDERS
   ========================================================= */
.concerns .concern{grid-column:span 2;display:block;color:inherit;text-decoration:none}
.concerns .concern:nth-child(n + 4){grid-column:span 2}
.concern .ic{color:#1b1300}

.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.folder{position:relative;display:block;padding-top:26px;color:inherit;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.folder:hover{transform:translateY(-8px)}
.f-tab{position:absolute;left:0;top:0;width:44%;height:34px;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#f0cf94,#d9a45b);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.f-tab::after{content:"";position:absolute;right:-18px;bottom:0;width:36px;height:100%;background:#d9a45b;transform:skewX(32deg);border-radius:0 10px 0 0}
.f-back{position:relative;height:300px;border-radius:0 22px 22px 22px;background:linear-gradient(165deg,#d9a45b,#a97a35);box-shadow:0 26px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden}
.f-photos{position:absolute;left:0;right:0;top:20px;height:190px}
.f-photos i{position:absolute;top:0;width:46%;height:170px;border-radius:12px;background:#0d1522 center/cover no-repeat;border:4px solid #fff;box-shadow:0 12px 26px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.f-photos i:nth-child(1){left:6%;transform:rotate(-7deg)}
.f-photos i:nth-child(2){left:27%;z-index:2;transform:translateY(-4px)}
.f-photos i:nth-child(3){right:6%;transform:rotate(7deg)}
.folder:hover .f-photos i:nth-child(1){transform:translate(-8px,-14px) rotate(-11deg)}
.folder:hover .f-photos i:nth-child(2){transform:translateY(-20px)}
.folder:hover .f-photos i:nth-child(3){transform:translate(8px,-14px) rotate(11deg)}
.f-front{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;background:linear-gradient(180deg,#f0cf94,#d9a45b);border-radius:0 0 22px 22px;box-shadow:0 -10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6);color:#1b1300}
.f-front h3{font-family:var(--font-head);font-size:1.2rem;font-weight:700;line-height:1.2;margin-bottom:2px}
.f-front span{font-size:.85rem;opacity:.75}
.f-front b{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#1b1300;color:#f0cf94;font-size:1.1rem;transition:.35s}
.folder:hover .f-front b{transform:translateX(4px) scale(1.08)}

@media (max-width:1024px){
  .concerns .concern,.concerns .concern:nth-child(n + 4){grid-column:auto}
  .folders{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .folders{grid-template-columns:1fr}
}
/* WhatsApp & WeChat: pulse ring + blink */
#wa {
    animation: whatsapp-ring 2.4s infinite, chat-blink 1.2s ease-in-out infinite;
}
#wc {
    animation: wechat-ring 2.4s infinite, chat-blink 1.2s ease-in-out infinite;
    animation-delay: 0s, 0.6s; /* WeChat ektu pore blink kore, duto ek shathe jole na */
}
@keyframes chat-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.92); }
}
/* hover korle blink thame, pura bright */
#wa:hover,
#wc:hover {
    animation-play-state: paused;
    opacity: 1;
    transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
    #wa, #wc { animation: none; }
}
/* Clients: golden hover */
.client {
    position: relative;
    overflow: hidden;
}
.client img {
    max-height: 44px;
    max-width: 150px;
    object-fit: contain;
    transition: transform .35s ease;
}
.client:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(245,165,36,.14), rgba(255,203,107,.06)), var(--card);
    box-shadow: 0 14px 34px rgba(245,165,36,.28), 0 0 0 1px rgba(245,165,36,.35) inset;
    transform: translateY(-5px);
}
.client:hover img {
    transform: scale(1.06);
}

/* =========================================================
   Header dropdown (Concerns menu): premium look
   ========================================================= */
@media (min-width: 901px) {
    .dropdown {
        top: calc(100% + 8px);
        min-width: 276px;
        padding: 12px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(20, 29, 46, 0.98), rgba(8, 12, 21, 0.98));
        border: 1px solid rgba(245, 165, 36, 0.28);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
    /* little arrow on top */
    .menu > li > .dropdown::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 34px;
        width: 13px;
        height: 13px;
        background: #141d2e;
        border-left: 1px solid rgba(245, 165, 36, 0.4);
        border-top: 1px solid rgba(245, 165, 36, 0.4);
        transform: rotate(45deg);
    }
    /* invisible bridge so the menu does not close while the mouse crosses the gap */
    .menu > li > .dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }
    .dropdown .sub {
        left: calc(100% + 10px);
        top: -12px;
        min-width: 250px;
        padding: 12px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(20, 29, 46, 0.98), rgba(8, 12, 21, 0.98));
        border: 1px solid rgba(245, 165, 36, 0.28);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
    .dropdown .sub::before {
        content: "";
        position: absolute;
        left: -14px;
        top: 0;
        width: 14px;
        height: 100%;
    }

    .dropdown a {
        position: relative;
        padding: 12px 16px 12px 20px;
        border-radius: 12px;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.86);
        letter-spacing: 0.01em;
    }
    .dropdown a::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 3px;
        background: linear-gradient(180deg, #ffcb6b, #f5a524);
        transform: translateY(-50%);
        transition: height 0.25s;
    }
    .dropdown a:hover,
    .dropdown li:hover > a,
    .dropdown a.active {
        background: linear-gradient(90deg, rgba(245, 165, 36, 0.18), rgba(245, 165, 36, 0));
        color: #ffcb6b;
        padding-left: 24px;
    }
    .dropdown a:hover::before,
    .dropdown li:hover > a::before,
    .dropdown a.active::before {
        height: 20px;
    }
    .dropdown li + li {
        margin-top: 2px;
    }
    .dropdown li.has-sub > a::after {
        content: "\203A";
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(245, 165, 36, 0.14);
        color: #f5a524;
        font-size: 1.05rem;
        line-height: 1;
        transition: 0.25s;
    }
    .dropdown li.has-sub:hover > a::after {
        background: #f5a524;
        color: #1b1300;
        transform: translateX(3px);
    }

    /* items slide in one after another */
    .menu > li:hover > .dropdown > li,
    .dropdown li.has-sub:hover > .sub > li {
        animation: ddIn 0.35s both;
    }
    .dropdown > li:nth-child(1), .sub > li:nth-child(1) { animation-delay: 0.02s !important; }
    .dropdown > li:nth-child(2), .sub > li:nth-child(2) { animation-delay: 0.06s !important; }
    .dropdown > li:nth-child(3), .sub > li:nth-child(3) { animation-delay: 0.10s !important; }
    .dropdown > li:nth-child(4), .sub > li:nth-child(4) { animation-delay: 0.14s !important; }
    .dropdown > li:nth-child(5), .sub > li:nth-child(5) { animation-delay: 0.18s !important; }
    .dropdown > li:nth-child(6), .sub > li:nth-child(6) { animation-delay: 0.22s !important; }
}
@keyframes ddIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* phone menu: gold line on the left of the sub menus */
@media (max-width: 900px) {
    .dropdown,
    .dropdown .sub {
        margin-left: 14px;
        padding-left: 12px;
        border-left: 2px solid rgba(245, 165, 36, 0.35);
    }
    .dropdown a.active { color: #ffcb6b; }
}
/* Header: menu starts right after the logo, transparent background */
@media (min-width: 901px) {
    .nav-wrap {
        justify-content: flex-start;
        gap: 48px;
    }
    nav.main-nav {
        background: transparent;
        margin-right: auto;
    }
    .nav-actions {
        margin-left: 0;
    }
}
/* phone: the slide-in menu keeps a solid background */
@media (max-width: 900px) {
    nav.main-nav {
        background: #070a10;
    }
}
/* ---------- Mobile menu fix ----------
   The blurred header is the containing block of the fixed menu, so a menu parked at
   translateX(100%) made the page 2x wider (phones zoomed out) and the open menu was squashed.
   Now the menu hangs right under the header and is revealed with a clip-path wipe instead. */
html{overflow-x:hidden}
body{max-width:100%}
@media (max-width:900px){
  nav.main-nav{
    position:absolute;
    top:100%;left:0;right:0;bottom:auto;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    transform:none;
    clip-path:inset(0 0 0 100%);
    visibility:hidden;
    transition:clip-path .4s cubic-bezier(.3,.7,.2,1),visibility 0s linear .4s;
  }
  nav.main-nav.open{
    clip-path:inset(0);
    visibility:visible;
    transition:clip-path .4s cubic-bezier(.3,.7,.2,1),visibility 0s;
  }
}

/* Hero text had no side gap: .hero-inner{width:100%} overrode .container's width */
.container.hero-inner{width:min(1240px,92%)}