:root {
    --dark: #07100c;
    --dark-2: #0d1b12;
    --green: #a9c64f;
    --green-bright: #95ff8f;
    --green-soft: rgba(169, 198, 79, 0.16);
    --text: #172016;
    --white: #ffffff;
    --muted: rgba(23, 32, 22, 0.68);
    --muted-white: rgba(255, 255, 255, 0.72);
    --line: rgba(255, 255, 255, 0.15);
    --line-dark: rgba(23, 32, 22, 0.12);
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--dark);
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: #ffffff;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

    body.is-loading {
        overflow: hidden;
    }

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

/* Loading */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 44%, rgba(149, 255, 143, 0.16), transparent 26rem), radial-gradient(circle at 35% 65%, rgba(169, 198, 79, 0.1), transparent 20rem), linear-gradient(135deg, #020503 0%, #07100c 58%, #020503 100%);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

    .loading-screen::before {
        content: "";
        position: absolute;
        inset: -30%;
        background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 54px 54px;
        opacity: 0.18;
        transform: rotate(8deg);
        animation: gridDrift 16s linear infinite;
    }

    .loading-screen::after {
        content: "";
        position: absolute;
        width: 72vw;
        height: 72vw;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(149, 255, 143, 0.09), transparent 64%);
        filter: blur(12px);
        animation: loaderPulse 2.8s ease-in-out infinite;
    }

    .loading-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.loader-scene {
    position: relative;
    z-index: 3;
    width: min(520px, calc(100vw - 42px));
    display: grid;
    justify-items: center;
    padding: 38px 32px 34px;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), rgba(7, 16, 12, 0.58);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(26px);
}

.loader-orb {
    position: relative;
    width: 190px;
    height: 190px;
    margin-bottom: 26px;
    display: grid;
    place-items: center;
}

.loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(149, 255, 143, 0.18);
}

.loader-ring-one {
    border-top-color: rgba(149, 255, 143, 0.95);
    border-right-color: rgba(169, 198, 79, 0.55);
    animation: spinLoader 2.2s linear infinite;
}

.loader-ring-two {
    inset: 18px;
    border-left-color: rgba(255, 223, 140, 0.75);
    border-bottom-color: rgba(149, 255, 143, 0.5);
    animation: spinLoaderReverse 3.1s linear infinite;
}

.loader-ring-three {
    inset: 38px;
    border-top-color: rgba(255, 255, 255, 0.5);
    animation: spinLoader 4.8s linear infinite;
}

.loader-core {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), transparent 28%), linear-gradient(135deg, rgba(149, 255, 143, 0.22), rgba(7, 16, 12, 0.86));
    border: 1px solid rgba(149, 255, 143, 0.28);
    box-shadow: 0 0 46px rgba(149, 255, 143, 0.2), inset 0 0 22px rgba(149, 255, 143, 0.08);
}

    .loader-core span {
        color: #ffffff;
        font-size: 1.45rem;
        font-weight: 950;
        letter-spacing: -0.04em;
    }

.gas-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 22px rgba(149, 255, 143, 0.9);
}

.gas-dot-one {
    top: 18px;
    left: 50%;
    animation: orbitOne 3.2s linear infinite;
}

.gas-dot-two {
    right: 18px;
    top: 50%;
    background: #d6b46c;
    animation: orbitTwo 4.1s linear infinite;
}

.gas-dot-three {
    bottom: 25px;
    left: 35%;
    width: 6px;
    height: 6px;
    animation: orbitThree 3.6s linear infinite;
}

.gas-dot-four {
    left: 20px;
    top: 55%;
    width: 7px;
    height: 7px;
    animation: orbitFour 4.6s linear infinite;
}

.loader-copy {
    text-align: center;
}

.loading-logo {
    color: var(--green-bright);
    font-size: 0.96rem;
    font-weight: 950;
    letter-spacing: 0.22em;
    margin-bottom: 12px;
}

.loading-text {
    color: rgba(255, 255, 255, 0.7);
    min-height: 24px;
    font-size: 0.98rem;
}

.loading-track {
    width: min(360px, 100%);
    height: 8px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

    .loading-track span {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #95ff8f, #d6b46c, #95ff8f);
        background-size: 220% 100%;
        animation: progressShine 1.6s linear infinite;
        transition: width 0.2s ease;
    }

.loading-status {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    .loading-status span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        min-width: 54px;
        padding: 0 12px;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.065);
        border: 1px solid rgba(255, 255, 255, 0.09);
        font-size: 0.78rem;
        font-weight: 850;
    }

.loading-error {
    margin-top: 18px;
    color: #ff9a9a;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-line;
    text-align: center;
}

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

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

@keyframes progressShine {
    to {
        background-position: -220% 0;
    }
}

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(0.96);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes gridDrift {
    to {
        transform: rotate(8deg) translate3d(54px, 54px, 0);
    }
}

@keyframes orbitOne {
    to {
        transform: rotate(360deg) translateX(84px) rotate(-360deg);
    }
}

@keyframes orbitTwo {
    to {
        transform: rotate(-360deg) translateX(72px) rotate(360deg);
    }
}

@keyframes orbitThree {
    to {
        transform: rotate(360deg) translateX(58px) rotate(-360deg);
    }
}

@keyframes orbitFour {
    to {
        transform: rotate(-360deg) translateX(66px) rotate(360deg);
    }
}

/* Navbar */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 38px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(0, 0, 0, 0.055);
    backdrop-filter: blur(18px);
    transition: box-shadow 0.25s ease, height 0.25s ease;
}

    .navbar.scrolled {
        height: 66px;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.11);
    }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.brand-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: radial-gradient(circle at 35% 35%, #ffffff, transparent 12%), linear-gradient(135deg, #2a9f4a, #a9c64f);
    font-weight: 950;
    box-shadow: 0 12px 30px rgba(42, 159, 74, 0.24);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

    .brand-text strong {
        font-size: 1.02rem;
        letter-spacing: 0.28em;
        color: #3e4b3d;
    }

    .brand-text small {
        margin-top: 7px;
        color: #6c7669;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    color: #273024;
    font-size: 0.86rem;
    font-weight: 700;
}

    .nav-links a {
        transition: color 0.2s ease;
    }

        .nav-links a:hover {
            color: var(--green);
        }

.portal-button {
    min-width: 72px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--green);
    border-radius: 2px;
    font-size: 0.82rem;
    font-weight: 800;
}

/* Scroll progress */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 3px;
}

    .scroll-progress span {
        display: block;
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #2a9f4a, var(--green));
    }

/* 3D canvas */

.model-glow {
    position: fixed;
    z-index: 6;
    right: 3vw;
    top: 18vh;
    width: min(54vw, 900px);
    height: min(54vw, 900px);
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(185, 255, 145, 0.2), rgba(185, 255, 145, 0.07) 38%, transparent 70%);
    filter: blur(22px);
    opacity: 0.78;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.25s ease;
}

body.model-on-light .model-glow {
    opacity: 0.26;
    background: radial-gradient(circle at center, rgba(169, 198, 79, 0.18), rgba(169, 198, 79, 0.055) 40%, transparent 72%);
}

body.model-hidden .model-glow {
    opacity: 0;
}

.canvas-holder {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

#webgl {
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
}

/* General layout */

main {
    position: relative;
    z-index: 5;
}

.section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 120px 8vw 90px;
}

.content {
    width: min(650px, 100%);
    position: relative;
    z-index: 12;
}

.content-right {
    margin-left: auto;
}

.content-left {
    margin-right: auto;
}

.center-content {
    width: min(1120px, 100%);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 12;
}

.section-label,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--green);
    font-size: 0.8rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

    .section-label.center {
        justify-content: center;
    }

    .eyebrow span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--green-bright);
        box-shadow: 0 0 24px rgba(149, 255, 143, 0.75);
    }

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 28px;
    font-size: clamp(4rem, 8vw, 8.8rem);
    line-height: 0.88;
    letter-spacing: -0.075em;
    font-weight: 950;
}

    h1 span {
        display: block;
        color: var(--green);
    }

    h1 strong {
        display: block;
        color: #ffffff;
    }

h2 {
    margin-bottom: 22px;
    font-size: clamp(2.4rem, 5.1vw, 5.6rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    font-weight: 950;
}

h3 {
    margin-bottom: 12px;
    font-size: 1.25rem;
}

p {
    line-height: 1.75;
}

.button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .button:hover {
        transform: translateY(-2px);
    }

    .button.primary {
        color: #07100c;
        background: linear-gradient(135deg, var(--green-bright), #dbffd6);
        box-shadow: 0 18px 50px rgba(149, 255, 143, 0.18);
    }

    .button.secondary {
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(18px);
    }

/* Hero */

.hero-section {
    min-height: 100vh;
    color: #ffffff;
    overflow: hidden;
    background: radial-gradient(circle at 72% 42%, rgba(169, 198, 79, 0.2), transparent 26rem), radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.06), transparent 18rem), linear-gradient(90deg, rgba(5, 16, 10, 0.96), rgba(5, 16, 10, 0.62), rgba(5, 16, 10, 0.9)), linear-gradient(135deg, #07100c, #162818);
}

.hero-bg {
    position: absolute;
    inset: 76px 0 0;
    z-index: 0;
    background: radial-gradient(circle at 74% 44%, rgba(255, 255, 255, 0.08), transparent 18rem), radial-gradient(circle at 72% 42%, rgba(169, 198, 79, 0.18), transparent 25rem);
}

    .hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.18;
        background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(30deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size: 80px 80px;
    }

.hero-content p {
    max-width: 590px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 8;
    height: 110px;
    pointer-events: none;
}

    .wave-divider svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .wave-divider path {
        fill: #ffffff;
    }

/* Intro */

.intro-section {
    background: radial-gradient(circle at 22% 42%, rgba(169, 198, 79, 0.13), transparent 23rem), linear-gradient(180deg, #ffffff, #fbfcf8);
}

.intro-section {
    overflow: hidden;
}

.about-story-card {
    max-width: 620px;
}

.about-connect-visual {
    position: absolute;
    left: 33.5vw;
    right: auto;
    top: 40vh;
    bottom: auto;
    width: min(500px, 36vw);
    min-width: 380px;
    height: 300px;
    z-index: 24;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(36px, 24px, 0) scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.about-connect-visual.is-active {
    opacity: 1;
}

.about-connect-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(112, 133, 53, 0.18);
    box-shadow: 0 14px 34px rgba(36, 50, 24, 0.12);
    color: #51622e;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-connect-copy {
    position: absolute;
    left: 14px;
    bottom: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(112, 133, 53, 0.14);
    box-shadow: 0 16px 42px rgba(20, 30, 18, 0.12);
    backdrop-filter: blur(12px);
}

.about-connect-copy strong {
    color: #243018;
    font-size: 0.98rem;
    line-height: 1;
}

.about-connect-copy small {
    color: rgba(36, 48, 24, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.about-connect-router {
    position: absolute;
    right: 14px;
    bottom: 58px;
    width: 158px;
    height: 94px;
    border-radius: 22px 22px 24px 24px;
    background: linear-gradient(180deg, #fefefe, #eef4e4);
    border: 1px solid rgba(103, 120, 59, 0.14);
    box-shadow: 0 26px 70px rgba(27, 36, 23, 0.24), 0 0 35px rgba(169,198,79,.10), inset 0 -10px 14px rgba(121, 150, 53, 0.08);
}

.about-connect-router::before {
    content: "";
    position: absolute;
    inset: 10px 12px auto 12px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(169,198,79,0.08), rgba(169,198,79,0.32), rgba(169,198,79,0.08));
}

.router-top-panel {
    position: absolute;
    inset: 18px 16px auto 16px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(169,198,79,0.10), rgba(255,255,255,0.94));
}

.router-antenna {
    position: absolute;
    bottom: 68px;
    width: 7px;
    height: 48px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef4e2, #bacb8d);
    box-shadow: 0 0 0 1px rgba(112,133,53,0.10);
    transform-origin: bottom center;
}

.antenna-left { left: 31px; transform: rotate(-14deg); }
.antenna-right { right: 31px; transform: rotate(14deg); }

.router-led {
    position: absolute;
    bottom: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(169,198,79,0.5);
    box-shadow: 0 0 10px rgba(169,198,79,0.24);
    animation: routerLedPulse 2s ease-in-out infinite;
}

.led-1 { left: 20px; animation-delay: 0s; }
.led-2 { left: 35px; animation-delay: .25s; }
.led-3 { left: 50px; animation-delay: .5s; }
.led-4 { left: 65px; animation-delay: .75s; }

.about-connect-link {
    position: absolute;
    left: 26px;
    right: 168px;
    top: 78px;
    height: 88px;
}

.wifi-wave {
    position: absolute;
    right: -10px;
    top: 50%;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(169,198,79,0.82);
    border-left: none;
    border-bottom-color: rgba(169,198,79,0.24);
    border-top-color: rgba(169,198,79,0.70);
    transform: translateY(-50%) scaleX(0.75);
    transform-origin: right center;
    filter: drop-shadow(0 0 12px rgba(169,198,79,0.28));
    animation: wifiWavePulse 2.3s ease-in-out infinite;
}

.wave-1 { width: 78px; animation-delay: 0s; }
.wave-2 { width: 138px; animation-delay: .22s; opacity: .84; }
.wave-3 { width: 196px; animation-delay: .44s; opacity: .68; }

.wifi-packet {
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0%, #dfffbf 55%, #a9c64f 100%);
    box-shadow: 0 0 14px rgba(169,198,79,0.52);
    animation: wifiPacketFlow 2.2s linear infinite;
}

.packet-b { animation-delay: .72s; }
.packet-c { animation-delay: 1.38s; }

@keyframes routerLedPulse {
    0%,100%{opacity:.35;transform:scale(1);}
    50%{opacity:1;transform:scale(1.18);box-shadow:0 0 16px rgba(169,198,79,0.4);}
}

@keyframes wifiWavePulse {
    0%,100%{opacity:.28;transform:translateY(-50%) scaleX(.72);}
    50%{opacity:1;transform:translateY(-50%) scaleX(1);}
}

@keyframes wifiPacketFlow {
    0%{left: 6px; opacity:0; transform:scale(.6);}
    12%{opacity:1;}
    100%{left: calc(100% - 10px); opacity:0; transform:scale(1.15);}
}

@media (max-width: 1280px) {
    .about-connect-visual {
        left: 24vw;
        width: min(370px, 34vw);
        min-width: 300px;
    }
}

@media (max-width: 980px) {
    .about-story-card {
        max-width: min(620px, 100%);
    }

    .about-connect-visual {
        display: none;
    }
}

.white-card {
    padding: clamp(26px, 4vw, 52px);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(23, 32, 22, 0.1);
    box-shadow: 0 24px 90px rgba(23, 32, 22, 0.08);
    backdrop-filter: blur(18px);
}

    .white-card h2 {
        color: #273024;
    }

    .white-card p {
        color: rgba(23, 32, 22, 0.72);
        font-size: 1.05rem;
    }

/* Products */

.products-section {
    background: radial-gradient(circle at 78% 34%, rgba(169, 198, 79, 0.12), transparent 22rem), #ffffff;
}

    .products-section h2 {
        max-width: 840px;
        color: var(--green);
        font-size: clamp(2.25rem, 4.7vw, 4.95rem);
    }

.dynamic-product-title {
    min-height: 2.05em;
}

.rotating-word {
    display: inline-block;
    color: #65733e;
    transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

    .rotating-word.is-changing {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(8px);
    }

.split-list {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}

.info-card {
    max-width: 720px;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--line-dark);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 18px 70px rgba(23, 32, 22, 0.07);
}

    .info-card span {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #ffffff;
        background: var(--green);
        font-weight: 950;
    }

    .info-card p {
        margin-bottom: 0;
        color: rgba(23, 32, 22, 0.72);
    }

/* Why */

.why-section {
    background: #ffffff;
    padding-top: 150px;
    padding-bottom: 150px;
}

    .why-section h2 {
        color: var(--green);
        font-size: clamp(2.6rem, 5vw, 5.3rem);
    }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 56px;
}

.why-card {
    padding: 34px 26px;
    border-radius: 30px;
    border: 1px solid var(--line-dark);
    background: linear-gradient(180deg, rgba(169, 198, 79, 0.06), transparent), #ffffff;
    box-shadow: 0 20px 70px rgba(23, 32, 22, 0.07);
}

.why-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border-radius: 50%;
    color: var(--green);
    border: 2px solid var(--green);
    font-size: 2rem;
    font-weight: 950;
}

.why-card h3 {
    color: #56683d;
}

.why-card p {
    max-width: 280px;
    margin: 0 auto;
    color: rgba(23, 32, 22, 0.62);
    font-size: 0.95rem;
}

/* Video */

.video-band {
    min-height: 370px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(5, 16, 10, 0.76), rgba(5, 16, 10, 0.32)), radial-gradient(circle at 18% 50%, rgba(169, 198, 79, 0.2), transparent 20rem), linear-gradient(135deg, #192916, #334428);
}

    .video-band::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.25;
        background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(20deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 54px 54px;
    }

.video-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .video-overlay h3 {
        font-size: 1.9rem;
        color: #ffffff;
        text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

.play-button {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 18px auto 0;
    border-radius: 50%;
    color: #07100c;
    background: #f0c347;
    box-shadow: 0 18px 50px rgba(240, 195, 71, 0.28);
}

/* Features */

.features-section {
    background: radial-gradient(circle at 18% 44%, rgba(169, 198, 79, 0.11), transparent 24rem), #ffffff;
    min-height: 100vh;
}

.features-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: center;
    position: relative;
    z-index: 12;
}

.feature-copy h2 {
    color: var(--green);
    font-size: clamp(2.6rem, 5vw, 5.4rem);
}

.feature-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 38px;
    margin-top: 28px;
}

.feature-column h3 {
    color: #56683d;
    margin-bottom: 18px;
}

.feature-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-column li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: rgba(23, 32, 22, 0.74);
}

    .feature-column li span {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 6px rgba(169, 198, 79, 0.12);
    }

.device-space-note {
    min-height: 420px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 26px;
    border-radius: 34px;
    border: 1px dashed rgba(23, 32, 22, 0.16);
    background: radial-gradient(circle at 50% 42%, rgba(169, 198, 79, 0.11), transparent 16rem), rgba(169, 198, 79, 0.035);
}

    .device-space-note span {
        color: var(--green);
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.75rem;
    }

    .device-space-note p {
        max-width: 300px;
        color: rgba(23, 32, 22, 0.58);
    }

/* Newsletter */

.newsletter-section {
    position: relative;
    z-index: 20;
    background: #ffffff;
    padding: 0 8vw;
    margin-bottom: -55px;
}

.newsletter-box {
    width: min(980px, 100%);
    min-height: 118px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 30px 42px;
    background: #e7efcc;
    box-shadow: 0 25px 80px rgba(23, 32, 22, 0.12);
}

    .newsletter-box h3 {
        margin-bottom: 0;
        color: #4c5844;
        font-size: 1.35rem;
        line-height: 1.35;
        font-weight: 500;
    }

    .newsletter-box form {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 12px;
    }

    .newsletter-box input {
        height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(23, 32, 22, 0.12);
        background: rgba(255, 255, 255, 0.38);
        outline: none;
    }

    .newsletter-box button {
        height: 38px;
        border: none;
        color: #ffffff;
        background: #071b36;
        font-weight: 800;
        cursor: pointer;
    }

/* Footer */

.footer {
    position: relative;
    overflow: hidden;
    padding: 150px 8vw 80px;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(6, 18, 10, 0.96), rgba(6, 18, 10, 0.86)), radial-gradient(circle at 68% 40%, rgba(169, 198, 79, 0.14), transparent 28rem), #07100c;
}

.footer-bg {
    position: absolute;
    inset: 0;
    opacity: 0.09;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 52px 52px;
}

.footer-grid {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 0.7fr;
    gap: 80px;
}

.footer-column h4 {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.footer-column p,
.footer-column a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.94rem;
    line-height: 1.75;
}

.footer-column a {
    display: block;
    margin-top: 16px;
    text-decoration: underline;
}

.footer-dot {
    width: 14px;
    height: 14px;
    margin-bottom: 28px;
    background: #009c6a;
}

/* Decoration */

.ambient {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.28;
}

.ambient-one {
    right: -12vw;
    top: 12vh;
    width: 42vw;
    height: 42vw;
    background: rgba(149, 255, 143, 0.13);
}

.ambient-two {
    left: -16vw;
    bottom: 2vh;
    width: 46vw;
    height: 46vw;
    background: rgba(214, 180, 108, 0.1);
}

.grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.045;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 74%);
}

/* Responsive */

@media (max-width: 980px) {
    .navbar {
        padding: 0 20px;
    }

    .brand-text small {
        display: none;
    }

    .brand-text strong {
        font-size: 0.82rem;
    }

    .nav-links {
        display: none;
    }

    .section {
        padding: 110px 24px 80px;
    }

    h1 {
        font-size: clamp(3.4rem, 17vw, 6rem);
    }

    h2 {
        font-size: clamp(2.4rem, 12vw, 4.5rem);
    }

    .content-right,
    .content-left {
        margin-left: 0;
        margin-right: 0;
    }

    .why-grid,
    .features-layout,
    .footer-grid,
    .newsletter-box {
        grid-template-columns: 1fr;
    }

    .device-space-note {
        min-height: 260px;
    }

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

    .model-glow {
        left: 50%;
        right: auto;
        top: 43vh;
        width: 82vw;
        height: 82vw;
        transform: translateX(-50%);
    }
}

@media (max-width: 560px) {
    .navbar {
        height: 66px;
    }

    .portal-button {
        min-width: 62px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .info-card {
        grid-template-columns: 1fr;
    }

    .newsletter-box {
        padding: 26px;
    }

        .newsletter-box form {
            grid-template-columns: 1fr;
        }

    .loader-orb {
        width: 150px;
        height: 150px;
    }

    .loader-core {
        width: 82px;
        height: 82px;
    }
}


/* v27 Professional loading screen + denser 3D atmosphere */
.loading-screen {
    background:
        radial-gradient(circle at 50% 38%, rgba(149, 255, 143, 0.20), transparent 24rem),
        radial-gradient(circle at 18% 18%, rgba(169, 198, 79, 0.18), transparent 22rem),
        radial-gradient(circle at 82% 76%, rgba(214, 180, 108, 0.14), transparent 24rem),
        linear-gradient(135deg, #020503 0%, #07120d 44%, #040805 100%) !important;
}

.loading-screen::before {
    opacity: 0.22 !important;
    background-image:
        linear-gradient(rgba(149, 255, 143, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 255, 143, 0.045) 1px, transparent 1px) !important;
    background-size: 46px 46px !important;
    animation: gridDrift 18s linear infinite !important;
}

.loading-screen::after {
    width: 88vw !important;
    height: 88vw !important;
    background:
        radial-gradient(circle, rgba(149, 255, 143, 0.105), transparent 58%),
        conic-gradient(from 120deg, transparent, rgba(169, 198, 79, 0.16), transparent, rgba(214, 180, 108, 0.12), transparent) !important;
    filter: blur(18px) !important;
    animation: loaderPulse 3.2s ease-in-out infinite !important;
}

.loader-scene {
    width: min(620px, calc(100vw - 36px)) !important;
    min-height: 470px;
    padding: 42px 42px 36px !important;
    border-radius: 42px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035)),
        radial-gradient(circle at 50% 18%, rgba(149, 255, 143, 0.12), transparent 20rem),
        rgba(7, 16, 12, 0.64) !important;
    box-shadow:
        0 46px 140px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(149, 255, 143, 0.045) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    overflow: hidden;
}

.loader-scene::before {
    content: "";
    position: absolute;
    inset: 20px;
    border-radius: 32px;
    border: 1px solid rgba(149, 255, 143, 0.10);
    background:
        linear-gradient(90deg, transparent, rgba(149, 255, 143, 0.12), transparent) 0 0 / 220% 1px no-repeat,
        radial-gradient(circle at 24% 22%, rgba(149, 255, 143, 0.10), transparent 8rem),
        radial-gradient(circle at 76% 78%, rgba(214, 180, 108, 0.08), transparent 9rem);
    animation: loaderFrameSweep 3.6s ease-in-out infinite;
    pointer-events: none;
}

.loader-scene::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 19px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(149, 255, 143, 0.48), rgba(214, 180, 108, 0.34), transparent);
    opacity: 0.74;
    pointer-events: none;
}

.loader-orb {
    width: 214px !important;
    height: 214px !important;
    margin-bottom: 24px !important;
    filter: drop-shadow(0 0 36px rgba(149, 255, 143, 0.14));
}

.loader-orb::before {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(149, 255, 143, 0.18), transparent 34%, rgba(214, 180, 108, 0.13), transparent 68%);
    mask-image: radial-gradient(circle, transparent 58%, #000 61% 64%, transparent 67%);
    -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 61% 64%, transparent 67%);
    animation: loaderOrbitAura 7s linear infinite;
}

.loader-ring {
    border-color: rgba(149, 255, 143, 0.16) !important;
}

.loader-ring-one {
    border-top-color: rgba(149, 255, 143, 1) !important;
    border-right-color: rgba(169, 198, 79, 0.72) !important;
    box-shadow: 0 0 28px rgba(149, 255, 143, 0.10);
}

.loader-ring-two {
    border-left-color: rgba(214, 180, 108, 0.86) !important;
    border-bottom-color: rgba(149, 255, 143, 0.62) !important;
}

.loader-ring-three {
    border-top-color: rgba(255, 255, 255, 0.58) !important;
    border-right-color: rgba(149, 255, 143, 0.24) !important;
}

.loader-core {
    width: 112px !important;
    height: 112px !important;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.26), transparent 27%),
        radial-gradient(circle at 50% 70%, rgba(149, 255, 143, 0.18), transparent 54%),
        linear-gradient(135deg, rgba(149, 255, 143, 0.28), rgba(7, 16, 12, 0.92)) !important;
    border: 1px solid rgba(149, 255, 143, 0.38) !important;
    box-shadow:
        0 0 60px rgba(149, 255, 143, 0.25),
        inset 0 0 26px rgba(149, 255, 143, 0.12) !important;
}

.loader-core span {
    font-size: 1.65rem !important;
    text-shadow: 0 0 22px rgba(149, 255, 143, 0.42);
}

.gas-dot {
    width: 10px !important;
    height: 10px !important;
    box-shadow: 0 0 24px rgba(149, 255, 143, 0.9), 0 0 0 5px rgba(149, 255, 143, 0.08) !important;
}

.loading-logo {
    position: relative;
    display: inline-block;
    color: #95ff8f !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.27em !important;
    text-shadow: 0 0 24px rgba(149, 255, 143, 0.26);
    overflow: hidden;
}

.loading-logo::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -40%;
    width: 30%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.78), rgba(214, 180, 108, 0.42), transparent);
    transform: skewX(-16deg);
    animation: loaderLogoShine 3.8s ease-in-out infinite;
    mix-blend-mode: screen;
}

.loading-text {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 1.04rem !important;
}

.loading-track {
    width: min(430px, 100%) !important;
    height: 10px !important;
    margin-top: 28px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 0 0 1px rgba(149, 255, 143, 0.045), 0 12px 34px rgba(0, 0, 0, 0.18) !important;
}

.loading-track span {
    background: linear-gradient(90deg, #95ff8f, #d6b46c, #95ff8f) !important;
    box-shadow: 0 0 28px rgba(149, 255, 143, 0.36);
}

.loading-status {
    gap: 12px !important;
    margin-top: 22px !important;
}

.loading-status span {
    height: 34px !important;
    min-width: 62px !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(149, 255, 143, 0.035);
}

@keyframes loaderFrameSweep {
    0%, 100% { background-position: -120% 0, center, center; opacity: 0.76; }
    50% { background-position: 120% 0, center, center; opacity: 1; }
}

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

@keyframes loaderLogoShine {
    0%, 24% { left: -42%; opacity: 0; }
    34% { opacity: 0.95; }
    62% { left: 112%; opacity: 0.95; }
    74%, 100% { left: 118%; opacity: 0; }
}

@media (max-width: 560px) {
    .loader-scene {
        min-height: 430px;
        padding: 34px 24px 30px !important;
        border-radius: 34px !important;
    }

    .loader-orb {
        width: 180px !important;
        height: 180px !important;
    }

    .loader-core {
        width: 96px !important;
        height: 96px !important;
    }
}


/* V28 Particle Matrix Loading Screen */
.loading-screen.particle-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 26%, rgba(149, 255, 143, 0.15), transparent 26rem),
        radial-gradient(circle at 76% 70%, rgba(214, 180, 108, 0.11), transparent 24rem),
        linear-gradient(135deg, #020503 0%, #07100c 46%, #020403 100%) !important;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

.loading-screen.particle-loader::before {
    content: "";
    position: absolute;
    inset: -26%;
    background-image:
        linear-gradient(rgba(149, 255, 143, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 255, 143, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.24 !important;
    transform: rotate(7deg);
    animation: particleLoaderGrid 18s linear infinite;
}

.loading-screen.particle-loader::after {
    content: "";
    position: absolute;
    width: 78vw;
    height: 78vw;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(149, 255, 143, 0.10), transparent 58%),
        conic-gradient(from 120deg, transparent, rgba(169, 198, 79, 0.13), transparent, rgba(214, 180, 108, 0.10), transparent);
    filter: blur(22px);
    opacity: 0.75;
    animation: particleLoaderAura 6.2s ease-in-out infinite;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-particle-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.loader-particle-ambient span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 999px;
    background: rgba(149, 255, 143, var(--o));
    box-shadow: 0 0 18px rgba(149, 255, 143, 0.45);
    transform: translate3d(0, 0, 0);
    animation: loaderAmbientFloat var(--t) ease-in-out infinite;
    animation-delay: var(--d);
}

.loader-particle-ambient span:nth-child(4n) {
    background: rgba(214, 180, 108, 0.55);
    box-shadow: 0 0 18px rgba(214, 180, 108, 0.34);
}

.loader-hud {
    position: relative;
    z-index: 4;
    width: min(980px, calc(100vw - 42px));
    min-height: 540px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
    padding: 22px;
    border-radius: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(7, 16, 12, 0.64);
    box-shadow:
        0 48px 145px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(149, 255, 143, 0.045);
    backdrop-filter: blur(28px) saturate(1.15);
    -webkit-backdrop-filter: blur(28px) saturate(1.15);
    overflow: hidden;
}

.loader-hud::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 32px;
    border: 1px solid rgba(149, 255, 143, 0.10);
    pointer-events: none;
}

.loader-hud::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 0;
    width: 38%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.12), rgba(214, 180, 108, 0.08), transparent);
    transform: skewX(-18deg);
    animation: loaderHudSweep 5.6s cubic-bezier(.2,.8,.2,1) infinite;
    pointer-events: none;
}

.loader-data-panel,
.loader-status-panel {
    position: relative;
    z-index: 2;
    border-radius: 30px;
    overflow: hidden;
}

.loader-data-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 34px 28px;
    background:
        radial-gradient(circle at 50% 45%, rgba(149, 255, 143, 0.12), transparent 18rem),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.loader-status-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 32px;
    background:
        radial-gradient(circle at 20% 20%, rgba(149, 255, 143, 0.10), transparent 13rem),
        rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.loader-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.loader-kicker span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #95ff8f;
    box-shadow: 0 0 24px rgba(149, 255, 143, 0.72);
    animation: loaderDotPulse 1.8s ease-in-out infinite;
}

.particle-number-shell {
    position: relative;
    width: min(420px, 100%);
    min-height: 214px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.particle-number-shell::before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(149, 255, 143, 0.14), transparent 58%),
        conic-gradient(from 0deg, transparent, rgba(149, 255, 143, 0.18), transparent, rgba(214, 180, 108, 0.14), transparent);
    filter: blur(3px);
    opacity: 0.85;
    animation: particleNumberHalo 7s linear infinite;
    z-index: 1;
}

.particle-number-grid {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 184px;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.14)) drop-shadow(0 0 28px rgba(149, 255, 143, 0.14));
}

.particle-digit {
    display: grid;
    grid-template-columns: repeat(5, 13px);
    grid-auto-rows: 13px;
    gap: 9px;
}

.particle-digit.percent-glyph {
    grid-template-columns: repeat(5, 11px);
    grid-auto-rows: 11px;
    gap: 8px;
    transform: translateY(5px) scale(0.92);
}

.matrix-dot {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.matrix-dot.is-on {
    background: radial-gradient(circle at 34% 30%, #ffffff, #95ff8f 42%, #74bf55 100%);
    border-color: rgba(149, 255, 143, 0.70);
    box-shadow: 0 0 18px rgba(149, 255, 143, 0.56), 0 0 0 5px rgba(149, 255, 143, 0.055);
    animation: matrixDotArrive 0.48s cubic-bezier(.2,.8,.2,1) both, matrixDotBreath 2.2s ease-in-out infinite;
    animation-delay: var(--delay), calc(var(--delay) + 0.55s);
}

.matrix-dot.is-gold {
    background: radial-gradient(circle at 34% 30%, #ffffff, #d6b46c 48%, #9d7c2c 100%);
    border-color: rgba(214, 180, 108, 0.65);
    box-shadow: 0 0 18px rgba(214, 180, 108, 0.46), 0 0 0 5px rgba(214, 180, 108, 0.05);
}

.particle-number-ghost {
    position: absolute;
    z-index: 2;
    inset: auto 0 -12px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.055);
    font-size: clamp(5rem, 12vw, 8rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.09em;
    pointer-events: none;
    user-select: none;
}

.loader-data-ribbon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.loader-data-ribbon span,
.loading-status span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 62px;
    padding: 0 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    font-weight: 850;
    box-shadow: inset 0 0 0 1px rgba(149, 255, 143, 0.035);
}

.loading-logo {
    position: relative;
    width: max-content;
    color: #95ff8f !important;
    font-size: 0.86rem !important;
    font-weight: 950;
    letter-spacing: 0.24em !important;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(149, 255, 143, 0.25);
    overflow: hidden;
}

.loading-logo::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -44%;
    width: 32%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.72), rgba(214, 180, 108, 0.35), transparent);
    transform: skewX(-16deg);
    animation: loaderLogoShine 3.8s ease-in-out infinite;
    mix-blend-mode: screen;
}

.loader-status-panel h2 {
    margin: 18px 0 0;
    max-width: 420px;
    color: #ffffff;
    font-size: clamp(2.15rem, 4vw, 3.85rem);
    line-height: 0.94;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.loading-text {
    margin-top: 20px;
    min-height: 26px;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 1rem !important;
    line-height: 1.55;
}

.loader-step-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 26px;
}

.loader-step-line i {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    position: relative;
}

.loader-step-line i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #95ff8f, #d6b46c);
    transform: scaleX(0.15);
    transform-origin: left center;
    animation: loaderStepFlow 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.2s);
}

.loader-step-line i:nth-child(1) { --i: 0; }
.loader-step-line i:nth-child(2) { --i: 1; }
.loader-step-line i:nth-child(3) { --i: 2; }
.loader-step-line i:nth-child(4) { --i: 3; }

.loading-track {
    width: min(430px, 100%) !important;
    height: 10px !important;
    margin-top: 28px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.075);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(149, 255, 143, 0.045), 0 12px 34px rgba(0, 0, 0, 0.18) !important;
}

.loading-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #95ff8f, #d6b46c, #95ff8f) !important;
    background-size: 220% 100%;
    animation: progressShine 1.6s linear infinite;
    box-shadow: 0 0 28px rgba(149, 255, 143, 0.36);
    transition: width 0.2s ease;
}

.loading-status {
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important;
    margin-top: 22px !important;
}

.loading-error {
    margin-top: 18px;
    color: #ff9a9a;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-line;
}

@keyframes particleLoaderGrid {
    to { transform: rotate(7deg) translate3d(44px, 44px, 0); }
}

@keyframes particleLoaderAura {
    0%, 100% { transform: scale(0.96) rotate(0deg); opacity: 0.58; }
    50% { transform: scale(1.06) rotate(12deg); opacity: 0.88; }
}

@keyframes loaderAmbientFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.86); opacity: calc(var(--o) * 0.62); }
    50% { transform: translate3d(22px, -28px, 0) scale(1.12); opacity: var(--o); }
}

@keyframes loaderHudSweep {
    0%, 18% { transform: translateX(-10%) skewX(-18deg); opacity: 0; }
    32% { opacity: 0.92; }
    68% { opacity: 0.42; }
    100% { transform: translateX(360%) skewX(-18deg); opacity: 0; }
}

@keyframes loaderDotPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.55; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

@keyframes matrixDotArrive {
    from { opacity: 0; transform: translate3d(0, 15px, 0) scale(0.35); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes matrixDotBreath {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.25); transform: scale(1.08); }
}

@keyframes loaderStepFlow {
    0%, 100% { transform: scaleX(0.15); opacity: 0.55; }
    50% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 860px) {
    .loader-hud {
        width: min(620px, calc(100vw - 34px));
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 34px;
    }

    .loader-data-panel,
    .loader-status-panel {
        border-radius: 26px;
        padding: 26px 22px;
    }

    .particle-number-shell {
        min-height: 160px;
    }

    .particle-digit {
        grid-template-columns: repeat(5, 10px);
        grid-auto-rows: 10px;
        gap: 7px;
    }

    .particle-digit.percent-glyph {
        grid-template-columns: repeat(5, 9px);
        grid-auto-rows: 9px;
        gap: 6px;
    }

    .particle-number-grid {
        gap: 10px;
    }

    .loader-status-panel h2 {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}


/* V29 Cinematic Data-Flow Loader */
.loading-screen.flow-loader {
    --load: 0%;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 16% 22%, rgba(149, 255, 143, 0.16), transparent 27rem),
        radial-gradient(circle at 82% 72%, rgba(214, 180, 108, 0.12), transparent 24rem),
        linear-gradient(135deg, #020503 0%, #07100c 46%, #020503 100%);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loading-screen.flow-loader::before {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        linear-gradient(rgba(149, 255, 143, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 255, 143, 0.032) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.42;
    transform: perspective(900px) rotateX(62deg) translateY(16%);
    transform-origin: center bottom;
    animation: flowGridMove 9s linear infinite;
}

.loading-screen.flow-loader::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22vh;
    width: 112vw;
    height: 48vh;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at center, rgba(149, 255, 143, 0.16), transparent 64%),
        linear-gradient(180deg, rgba(169, 198, 79, 0.06), transparent 74%);
    filter: blur(10px);
    opacity: 0.72;
    pointer-events: none;
}

.flow-loader-background,
.flow-loader-background > * {
    pointer-events: none;
}

.flow-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.78;
}

.flow-orb.orb-a {
    width: 260px;
    height: 260px;
    left: 12vw;
    top: 18vh;
    background: rgba(149, 255, 143, 0.12);
    animation: flowOrbFloat 8s ease-in-out infinite;
}

.flow-orb.orb-b {
    width: 310px;
    height: 310px;
    right: 12vw;
    bottom: 12vh;
    background: rgba(214, 180, 108, 0.10);
    animation: flowOrbFloat 10s ease-in-out infinite reverse;
}

.flow-orb.orb-c {
    width: 220px;
    height: 220px;
    right: 32vw;
    top: 10vh;
    background: rgba(83, 199, 255, 0.08);
    animation: flowOrbFloat 9s ease-in-out infinite 0.7s;
}

.flow-field-lines {
    position: absolute;
    left: 50%;
    bottom: 8vh;
    width: min(980px, 78vw);
    height: 210px;
    transform: translateX(-50%);
    opacity: 0.60;
}

.flow-field-lines i {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 112%;
    height: 80px;
    border-top: 1px solid rgba(149, 255, 143, 0.16);
    border-radius: 50% 50% 0 0;
    transform: translateX(-50%) scaleX(var(--scale, 1));
}

.flow-field-lines i:nth-child(1) { --scale: 0.42; bottom: 8px; }
.flow-field-lines i:nth-child(2) { --scale: 0.60; bottom: 26px; }
.flow-field-lines i:nth-child(3) { --scale: 0.78; bottom: 50px; }
.flow-field-lines i:nth-child(4) { --scale: 0.96; bottom: 78px; }
.flow-field-lines i:nth-child(5) { --scale: 1.16; bottom: 112px; }

.flow-signal-particles span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 999px;
    background: #95ff8f;
    box-shadow: 0 0 22px rgba(149, 255, 143, 0.78);
    opacity: 0;
    animation: flowParticleDrift 5.8s ease-in-out infinite;
    animation-delay: var(--d);
}

.flow-loader-shell {
    position: relative;
    z-index: 4;
    width: min(1080px, calc(100vw - 42px));
    min-height: 560px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 26px;
    padding: 30px;
    border-radius: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032)),
        rgba(4, 12, 8, 0.62);
    box-shadow:
        0 46px 150px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(28px) saturate(1.14);
    -webkit-backdrop-filter: blur(28px) saturate(1.14);
    overflow: hidden;
    isolation: isolate;
}

.flow-loader-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 32px;
    border: 1px solid rgba(149, 255, 143, 0.10);
    pointer-events: none;
    z-index: 1;
}

.flow-loader-shell::after {
    content: "";
    position: absolute;
    left: -36%;
    top: -20%;
    width: 34%;
    height: 140%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), rgba(214, 180, 108, 0.08), transparent);
    transform: skewX(-18deg);
    animation: flowShellSweep 5.8s cubic-bezier(.2,.8,.2,1) infinite;
    pointer-events: none;
    z-index: 2;
}

.flow-loader-top,
.flow-loader-map,
.flow-loader-bottom {
    position: relative;
    z-index: 3;
}

.flow-loader-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.flow-loader-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.flow-loader-brand > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #07100c;
    background:
        radial-gradient(circle at 32% 28%, #ffffff, transparent 13%),
        linear-gradient(135deg, #95ff8f, #a9c64f);
    box-shadow: 0 18px 48px rgba(149, 255, 143, 0.20);
    font-weight: 950;
}

.flow-loader-brand strong {
    display: block;
    color: #95ff8f;
    font-size: 0.92rem;
    font-weight: 950;
    letter-spacing: 0.22em;
}

.flow-loader-brand small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.82rem;
    font-weight: 700;
}

.flow-loader-percent {
    min-width: 96px;
    text-align: right;
    color: #ffffff;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
    text-shadow: 0 22px 55px rgba(149, 255, 143, 0.18);
}

.flow-loader-map {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;
    gap: 28px;
    min-height: 270px;
}

.flow-node {
    position: relative;
    min-height: 190px;
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.105);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.flow-node::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(149, 255, 143, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.09), transparent 44%);
    pointer-events: none;
}

.flow-node-icon,
.flow-node h3,
.flow-node p,
.mini-signal-bars {
    position: relative;
    z-index: 2;
}

.flow-node-icon {
    width: 58px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #a9c64f;
    color: #07100c;
    font-size: 0.95rem;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(169, 198, 79, 0.18);
}

.flow-node h3 {
    margin: 26px 0 7px;
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 950;
}

.flow-node p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.92rem;
    font-weight: 750;
}

.mini-signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 42px;
    margin-top: 22px;
}

.mini-signal-bars i {
    display: block;
    width: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #95ff8f, #a9c64f);
    box-shadow: 0 8px 18px rgba(149,255,143,.16);
    animation: signalBarRise 1.8s ease-in-out infinite;
}

.mini-signal-bars i:nth-child(1) { height: 34%; }
.mini-signal-bars i:nth-child(2) { height: 68%; animation-delay: .18s; }
.mini-signal-bars i:nth-child(3) { height: 48%; animation-delay: .32s; }

.flow-data-bridge {
    position: relative;
    min-height: 250px;
    display: grid;
    place-items: center;
}

.bridge-label {
    position: absolute;
    top: 30px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bridge-label.left { left: 6%; }
.bridge-label.right { right: 6%; }

.bridge-line {
    position: absolute;
    left: 6%;
    right: 6%;
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
}

.bridge-line::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(149, 255, 143, 0.85), rgba(214, 180, 108, 0.78), transparent);
    animation: bridgeLineFlow 2.4s cubic-bezier(.2,.8,.2,1) infinite;
}

.line-one { top: 100px; }
.line-two { top: 126px; opacity: .78; }
.line-three { top: 152px; opacity: .55; }

.line-two::after { animation-delay: .28s; }
.line-three::after { animation-delay: .56s; }

.bridge-packet {
    position: absolute;
    left: 6%;
    top: 117px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #95ff8f;
    box-shadow: 0 0 28px rgba(149, 255, 143, 0.9);
    animation: bridgePacket 2.8s linear infinite;
}

.packet-two {
    top: 143px;
    width: 10px;
    height: 10px;
    background: #d6b46c;
    box-shadow: 0 0 24px rgba(214, 180, 108, 0.72);
    animation-delay: .7s;
}

.packet-three {
    top: 91px;
    width: 9px;
    height: 9px;
    animation-delay: 1.25s;
}

.bridge-core {
    position: relative;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, rgba(149, 255, 143, 0.23), rgba(7,16,12,.88));
    border: 1px solid rgba(149, 255, 143, 0.26);
    box-shadow: 0 0 64px rgba(149, 255, 143, 0.16), inset 0 0 28px rgba(149,255,143,.07);
}

.bridge-core span {
    position: absolute;
    inset: -18px;
    border-radius: 40px;
    border: 1px solid rgba(149, 255, 143, 0.16);
    animation: bridgeCorePulse 2.1s ease-in-out infinite;
}

.bridge-core strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .14em;
}

.flow-loader-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.flow-loading-copy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.flow-loader-subtext {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: right;
}

.flow-loader .loading-text {
    color: rgba(255, 255, 255, 0.82);
    min-height: 24px;
    font-size: 0.98rem;
    font-weight: 820;
}

.flow-track {
    width: 100%;
    height: 10px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.flow-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #95ff8f 0%, #a9c64f 44%, #d6b46c 72%, #95ff8f 100%);
    background-size: 230% 100%;
    animation: progressShine 1.8s linear infinite;
    transition: width 0.22s ease;
}

.flow-status {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.flow-status span {
    height: 32px;
    min-width: 0;
    padding: 0 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.09);
    font-size: .78rem;
    font-weight: 850;
}

.flow-loader .loading-error {
    margin-top: 6px;
    color: #ff9a9a;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-line;
}

@keyframes flowGridMove {
    to { background-position: 72px 72px; }
}

@keyframes flowOrbFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(14px,-18px,0) scale(1.05); }
}

@keyframes flowParticleDrift {
    0%, 100% { transform: translate3d(0, 12px, 0) scale(.72); opacity: 0; }
    24% { opacity: .85; }
    55% { transform: translate3d(22px, -20px, 0) scale(1.05); opacity: .62; }
    100% { transform: translate3d(42px, -42px, 0) scale(.72); opacity: 0; }
}

@keyframes flowShellSweep {
    0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    18% { opacity: 1; }
    58% { opacity: .75; }
    100% { transform: translateX(410%) skewX(-18deg); opacity: 0; }
}

@keyframes signalBarRise {
    0%, 100% { transform: scaleY(.72); opacity: .65; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes bridgeLineFlow {
    0% { transform: translateX(-115%); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translateX(260%); opacity: 0; }
}

@keyframes bridgePacket {
    from { transform: translateX(0) scale(.7); opacity: 0; }
    14% { opacity: 1; }
    86% { opacity: 1; }
    to { transform: translateX(calc(min(1080px, 100vw) * .42)) scale(1); opacity: 0; }
}

@keyframes bridgeCorePulse {
    0%, 100% { transform: scale(.92); opacity: .42; }
    50% { transform: scale(1.08); opacity: .95; }
}

@media (max-width: 900px) {
    .flow-loader-shell {
        width: min(620px, calc(100vw - 32px));
        min-height: 0;
        padding: 22px;
        border-radius: 34px;
    }

    .flow-loader-map {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .flow-data-bridge {
        min-height: 130px;
        order: 2;
    }

    .flow-node-portal {
        order: 3;
    }

    .bridge-label {
        display: none;
    }

    .bridge-line {
        left: 12%;
        right: 12%;
    }

    .flow-loading-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-loader-subtext {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .flow-loader-shell {
        padding: 18px;
        border-radius: 30px;
    }

    .flow-loader-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-loader-percent {
        text-align: left;
        font-size: 3rem;
    }

    .flow-node {
        min-height: 152px;
        padding: 18px;
        border-radius: 24px;
    }

    .flow-data-bridge {
        min-height: 112px;
    }

    .bridge-core {
        width: 92px;
        height: 92px;
        border-radius: 28px;
    }
}


/* WordPress integration */
html, body.ghg-wordpress-page {
    margin: 0 !important;
    padding: 0 !important;
}
body.ghg-wordpress-page #wpadminbar {
    z-index: 1000000;
}
body.admin-bar.ghg-wordpress-page .navbar {
    top: 32px;
}
body.ghg-wordpress-page .ghg-wp-content {
    min-height: 100vh;
}
@media screen and (max-width: 782px) {
    body.admin-bar.ghg-wordpress-page .navbar {
        top: 46px;
    }
}

/* V1.4.7 Atmospheric Sensor Loader — full-screen, minimal, non-card layout */
.loading-screen.atmospheric-loader {
    --load-angle: 0deg;
    --stage-glow: rgba(169, 198, 79, 0.82);
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #f5faf6;
    background:
        radial-gradient(circle at 50% 46%, rgba(169, 198, 79, 0.10), transparent 23rem),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.045), transparent 18rem),
        radial-gradient(circle at 82% 78%, rgba(169,198,79,0.045), transparent 20rem),
        linear-gradient(145deg, #020806 0%, #06120c 52%, #020705 100%);
    transition: opacity .72s ease, visibility .72s ease;
}

.loading-screen.atmospheric-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,.11) 0 1px, transparent 1.4px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, #000 0 42%, transparent 78%);
}

.loading-screen.atmospheric-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.atmospheric-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.atmospheric-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) * -.5);
    margin-top: calc(var(--size) * -.5);
    border-radius: 999px;
    background: rgba(255,255,255,var(--alpha));
    box-shadow: 0 0 10px rgba(255,255,255,.16), 0 0 18px rgba(255,255,255,.08);
    transform:
        rotate(var(--angle))
        translateX(var(--radius))
        translateZ(0);
    animation:
        atmosphericParticleBreathe var(--duration) ease-in-out infinite,
        atmosphericParticleOrbit calc(var(--duration) * 3.2) linear infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

.atmospheric-core-wrap {
    position: relative;
    z-index: 2;
    width: min(62vw, 620px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.atmospheric-core-wrap::before,
.atmospheric-core-wrap::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(239,248,228,.92);
    box-shadow: 0 0 18px rgba(225,243,194,.42);
    animation: atmosphericNodeOrbit 9s linear infinite;
}

.atmospheric-core-wrap::before {
    top: 12%;
    left: 22%;
}

.atmospheric-core-wrap::after {
    right: 18%;
    bottom: 20%;
    width: 6px;
    height: 6px;
    opacity: .72;
    animation-duration: 12s;
    animation-direction: reverse;
}

.atmospheric-progress-ring {
    position: relative;
    width: min(31vw, 280px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(from -90deg,
            rgba(220,239,188,.95) 0deg,
            rgba(169,198,79,.88) var(--load-angle),
            rgba(255,255,255,.07) var(--load-angle),
            rgba(255,255,255,.035) 360deg);
    filter: drop-shadow(0 0 22px rgba(169,198,79,.14));
}

.atmospheric-progress-ring::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, transparent 0deg, rgba(255,255,255,.0) 302deg, rgba(255,255,255,.12) 328deg, rgba(255,255,255,.0) 360deg);
    mask: radial-gradient(circle, transparent 0 61%, #000 66% 69%, transparent 73%);
    animation: atmosphericSweep 4.6s linear infinite;
    mix-blend-mode: screen;
    opacity: .75;
}

.atmospheric-progress-ring::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8,20,13,.82) 0 52%, rgba(5,14,9,.96) 72%);
    box-shadow: inset 0 0 28px rgba(255,255,255,.025);
}

.atmospheric-progress-orbit {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    animation: atmosphericOrbit 11s linear infinite;
}

.atmospheric-progress-orbit::before,
.atmospheric-progress-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(238,248,225,.9);
    box-shadow: 0 0 18px rgba(238,248,225,.48);
}

.atmospheric-progress-orbit::before {
    left: 50%;
    top: -4px;
}

.atmospheric-progress-orbit::after {
    right: 12%;
    bottom: 8%;
    width: 5px;
    height: 5px;
    opacity: .55;
}

.atmospheric-core {
    position: relative;
    z-index: 2;
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.core-halo {
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169,198,79,.15), rgba(169,198,79,.04) 42%, transparent 69%);
    filter: blur(8px);
    animation: atmosphericHalo 3.8s ease-in-out infinite;
}

.core-symbol {
    position: relative;
    z-index: 2;
    color: rgba(249,252,249,.96);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -.05em;
    text-shadow: 0 0 25px rgba(255,255,255,.12);
}

.core-loading-percent {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 61%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: clamp(1.02rem, 2.1vw, 1.55rem);
    font-weight: 900;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(169,198,79,.75), 0 2px 4px rgba(0,0,0,.70);
    pointer-events: none;
}

.core-symbol {
    transform: translateY(-12px);
}

.core-pulse,
.core-pulse::before,
.core-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.17);
    animation: atmosphericCorePulse 3.2s ease-out infinite;
}

.core-pulse::before { animation-delay: 1.05s; }
.core-pulse::after { animation-delay: 2.1s; }

.atmospheric-radar {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.055);
    pointer-events: none;
}

.radar-one { inset: 12%; }
.radar-two { inset: 3%; border-style: dashed; animation: atmosphericOrbit 18s linear reverse infinite; }
.radar-three { inset: -7%; opacity: .5; }

.atmospheric-waves {
    position: absolute;
    width: 92px;
    height: 92px;
    pointer-events: none;
}

.atmospheric-waves i {
    position: absolute;
    inset: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    animation: atmosphericWave 3.6s ease-out infinite;
}

.atmospheric-waves i:nth-child(2) { animation-delay: 1.15s; }
.atmospheric-waves i:nth-child(3) { animation-delay: 2.3s; }

.wave-air { left: 8%; top: 22%; }
.wave-sound { right: 5%; top: 38%; transform: scale(1.15); }
.wave-wifi { left: 17%; bottom: 8%; transform: scale(.86); }


.atmospheric-loader-copy {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: clamp(38px, 7vh, 76px);
    transform: translateX(-50%);
    width: min(90vw, 620px);
    text-align: center;
}

.atmospheric-loader-brand {
    color: rgba(245,250,246,.88);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-indent: .34em;
}

.atmospheric-loader-status {
    margin-top: 13px;
    color: #f7faf7;
    font-size: clamp(1rem, 2vw, 1.24rem);
    font-weight: 600;
    letter-spacing: .04em;
    transition: opacity .24s ease, transform .24s ease;
}

.atmospheric-loader .loading-text {
    margin-top: 8px;
    color: rgba(235,243,236,.55);
    font-size: .87rem;
    letter-spacing: .01em;
}

.atmospheric-signal-tags {
    margin-top: 16px;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.atmospheric-signal-tags span {
    min-width: 72px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
    color: rgba(240,246,241,.44);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.atmospheric-signal-tags span.is-active {
    color: #f7fbf2;
    background: rgba(169,198,79,.14);
    border-color: rgba(220,239,188,.42);
    box-shadow: 0 0 22px rgba(169,198,79,.14);
    transform: translateY(-1px);
}

.atmospheric-signal-tags span.is-final {
    background: rgba(255,255,255,.08);
    border-color: rgba(238,248,225,.38);
}

.atmospheric-loader-percent--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.atmospheric-loader-percent {
    margin-top: 12px;
    color: rgba(244,249,245,.76);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
}

.atmospheric-hidden-track {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.atmospheric-loader .loading-error {
    margin-top: 10px;
    color: #ffd9d9;
    font-size: .84rem;
}

.loading-screen.atmospheric-loader[data-stage="boot"] {
    --stage-glow: rgba(255,255,255,.65);
}

.loading-screen.atmospheric-loader[data-stage="signals"] {
    --stage-glow: rgba(214,236,180,.78);
}

.loading-screen.atmospheric-loader[data-stage="model"] {
    --stage-glow: rgba(169,198,79,.9);
}

.loading-screen.atmospheric-loader[data-stage="ready"] {
    --stage-glow: rgba(244,252,235,.95);
}

.loading-screen.atmospheric-loader[data-stage="ready"] .atmospheric-core-wrap {
    animation: atmosphericReadyLift .65s ease both;
}

@keyframes atmosphericParticleBreathe {
    0%,100% { opacity: calc(var(--alpha) * .38); filter: blur(.15px); }
    50% { opacity: var(--alpha); filter: blur(0); }
}

@keyframes atmosphericParticleOrbit {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

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

@keyframes atmosphericHalo {
    0%,100% { transform: scale(.92); opacity: .62; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes atmosphericCorePulse {
    0% { transform: scale(.62); opacity: .35; }
    72% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes atmosphericWave {
    0% { width: 12px; height: 12px; opacity: .38; }
    100% { width: 94px; height: 94px; opacity: 0; }
}

@keyframes atmosphericReadyLift {
    0% { transform: scale(1); filter: brightness(1); }
    55% { transform: scale(1.035); filter: brightness(1.15); }
    100% { transform: scale(1); filter: brightness(1); }
}

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

@keyframes atmosphericNodeOrbit {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
    25% { transform: translate3d(10px, -8px, 0) scale(1.08); opacity: 1; }
    50% { transform: translate3d(18px, 4px, 0) scale(.94); opacity: .72; }
    75% { transform: translate3d(6px, 14px, 0) scale(1.05); opacity: .9; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
}

@media (max-width: 760px) {
    .atmospheric-core-wrap {
        width: min(96vw, 480px);
        transform: translateY(-3vh);
    }

    .atmospheric-progress-ring {
        width: min(54vw, 220px);
    }

    .wave-air { left: 4%; top: 20%; }
    .wave-sound { right: 2%; top: 39%; }
    .wave-wifi { left: 10%; bottom: 12%; }

    .atmospheric-loader-copy {
        bottom: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atmospheric-loader *,
    .atmospheric-loader *::before,
    .atmospheric-loader *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* v2.0.0-alpha4.5: loader stays honest; user may enter site while GLB keeps downloading */
body.ghg-loader-user-opened .loading-screen.hidden {
    pointer-events: none;
}

.ghg-loader-continue {
    position: fixed;
    left: 50%;
    bottom: clamp(24px, 7vh, 72px);
    z-index: 100002;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: min(360px, calc(100vw - 36px));
    padding: 14px 22px;
    border: 1px solid rgba(169,198,79,.42);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #182411;
    box-shadow: 0 22px 70px rgba(0,0,0,.24), 0 0 0 8px rgba(169,198,79,.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 18px, 0) scale(.96);
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease, box-shadow .25s ease;
    font-family: Inter, Arial, sans-serif;
}

.ghg-loader-continue.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0) scale(1);
}

.ghg-loader-continue:hover {
    box-shadow: 0 26px 84px rgba(0,0,0,.28), 0 0 0 10px rgba(169,198,79,.16);
}

.ghg-loader-continue strong {
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .02em;
}

.ghg-loader-continue small {
    color: rgba(24,36,17,.62);
    font-size: 10px;
    font-weight: 750;
}

.ghg-3d-status {
    --model-load: 0%;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 190px;
    padding: 10px 13px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(112,133,53,.18);
    color: #354222;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    box-shadow: 0 14px 36px rgba(18,28,14,.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.ghg-3d-status::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--model-load);
    height: 3px;
    background: linear-gradient(90deg, #a9c64f, #d6f58c);
    transition: width .25s ease;
}

body.ghg-loader-user-opened.ghg-model-loading .ghg-3d-status,
body.ghg-loader-user-opened.ghg-model-unavailable .ghg-3d-status {
    display: flex;
}

body.ghg-model-ready .ghg-3d-status {
    display: none;
}

.ghg-3d-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #a9c64f;
    box-shadow: 0 0 0 5px rgba(169,198,79,.14), 0 0 14px rgba(169,198,79,.48);
    animation: routerLedPulse 1.6s ease-in-out infinite;
}

.ghg-3d-status strong {
    font-weight: 950;
}

.ghg-3d-status em {
    margin-left: auto;
    color: rgba(53,66,34,.68);
    font-style: normal;
    font-size: 10px;
}

/* alpha4.10: minimal, strict 3D model loading screen */
.loading-screen.ghg-model-only-loader {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    background: #050b07;
    color: #ffffff;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility .35s ease;
}

.loading-screen.ghg-model-only-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ghg-model-only-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(420px, 84vw);
    text-align: center;
}

.ghg-model-only-percent {
    font-size: clamp(4rem, 13vw, 9rem);
    line-height: .9;
    font-weight: 950;
    letter-spacing: -0.08em;
    color: #a9c64f;
}

.ghg-model-only-text {
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}

.ghg-model-only-track {
    width: min(360px, 78vw);
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.ghg-model-only-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a9c64f, #dfffbf);
    transition: width .18s linear;
}

.ghg-model-only-loader .loading-error {
    max-width: min(760px, 86vw);
    white-space: pre-wrap;
    color: #ffb3a6;
    font-size: .82rem;
    line-height: 1.55;
}

body.is-loading {
    overflow: hidden !important;
}


/* Alpha 4.15: minimal white particle loading screen */
.loading-screen.atmospheric-loader {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045), transparent 18rem),
        radial-gradient(circle at 52% 42%, rgba(169,198,79,0.030), transparent 23rem),
        linear-gradient(145deg, #010604 0%, #06110c 58%, #010503 100%) !important;
}

.loading-screen.atmospheric-loader::before,
.loading-screen.atmospheric-loader::after {
    display: none !important;
}

.atmospheric-radar,
.core-pulse,
.atmospheric-waves {
    display: none !important;
}

.atmospheric-core-wrap {
    width: min(72vw, 680px) !important;
    aspect-ratio: 1 !important;
    filter: none !important;
}

.atmospheric-core-wrap::before,
.atmospheric-core-wrap::after {
    width: 5px !important;
    height: 5px !important;
    background: rgba(255,255,255,0.72) !important;
    box-shadow: 0 0 16px rgba(255,255,255,0.22) !important;
}

.particle-number-shell {
    width: min(500px, 92vw) !important;
    min-height: 230px !important;
}

.particle-number-shell::before {
    background: radial-gradient(circle, rgba(255,255,255,0.055), transparent 58%) !important;
    opacity: 0.55 !important;
    filter: blur(8px) !important;
}

.particle-number-grid {
    gap: 16px !important;
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.18)) !important;
}

.particle-digit {
    grid-template-columns: repeat(5, 10px) !important;
    grid-auto-rows: 10px !important;
    gap: 10px !important;
}

.particle-digit.percent-glyph {
    grid-template-columns: repeat(5, 8px) !important;
    grid-auto-rows: 8px !important;
    gap: 8px !important;
    opacity: 0.78 !important;
}

.matrix-dot {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.035) !important;
}

.matrix-dot.is-on,
.matrix-dot.is-gold {
    background: radial-gradient(circle at 34% 30%, #ffffff, rgba(255,255,255,0.88) 46%, rgba(255,255,255,0.52) 100%) !important;
    border-color: rgba(255,255,255,0.52) !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.38), 0 0 22px rgba(255,255,255,0.12) !important;
    animation: matrixDotArrive 0.42s cubic-bezier(.2,.8,.2,1) both, matrixDotBreath 2.8s ease-in-out infinite, loaderParticleFloat 5.8s ease-in-out infinite !important;
    animation-delay: var(--delay), calc(var(--delay) + .42s), calc(var(--delay) + .2s) !important;
}

.atmospheric-particle {
    background: rgba(255,255,255,var(--alpha)) !important;
    box-shadow: 0 0 7px rgba(255,255,255,.18), 0 0 16px rgba(255,255,255,.06) !important;
}

.atmospheric-loader-brand {
    color: rgba(255,255,255,0.72) !important;
}

.atmospheric-loader-status,
.atmospheric-loader .loading-text {
    color: rgba(255,255,255,0.58) !important;
}

@keyframes loaderParticleFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .82; }
    50% { transform: translate3d(1px,-2px,0) scale(1.12); opacity: 1; }
}


/* v2.0.0-alpha4.18: right-rotated about pose + early filter dissolve */
.loading-screen.particle-morph-loader {
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,0.045), transparent 18rem),
        linear-gradient(145deg, #020806 0%, #06120c 55%, #020604 100%) !important;
    z-index: 99999;
}

.loading-screen.particle-morph-loader::before,
.loading-screen.particle-morph-loader::after {
    opacity: 0 !important;
    display: none !important;
}

.particle-morph-loader .atmospheric-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.95;
}

.particle-morph-loader .atmospheric-particle {
    background: rgba(255,255,255,var(--alpha)) !important;
    box-shadow: 0 0 5px rgba(255,255,255,.24), 0 0 12px rgba(255,255,255,.08) !important;
    filter: none !important;
}

.particle-morph-stage {
    position: relative;
    z-index: 3;
    width: min(92vw, 760px);
    min-height: 300px;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.particle-morph-loader .particle-number-shell {
    width: min(92vw, 720px);
    min-height: 280px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.particle-morph-loader .particle-number-shell::before,
.particle-morph-loader .particle-number-shell::after {
    display: none !important;
}

.particle-morph-loader .particle-number-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.4vw, 24px);
    min-height: 220px;
    filter: none !important;
}

.particle-morph-loader .particle-digit {
    display: grid;
    grid-template-columns: repeat(5, clamp(8px, 1.55vw, 14px));
    grid-auto-rows: clamp(8px, 1.55vw, 14px);
    gap: clamp(8px, 1.35vw, 15px);
}

.particle-morph-loader .particle-digit.percent-glyph {
    grid-template-columns: repeat(5, clamp(6px, 1.15vw, 11px));
    grid-auto-rows: clamp(6px, 1.15vw, 11px);
    gap: clamp(6px, 1vw, 11px);
    transform: translateY(7px) scale(.92);
}

.particle-morph-loader .matrix-dot {
    width: var(--dot-size, 2px) !important;
    height: var(--dot-size, 2px) !important;
    justify-self: center;
    align-self: center;
    border-radius: 999px;
    background: rgba(255,255,255,.14) !important;
    border: 0 !important;
    box-shadow: 0 0 4px rgba(255,255,255,.10) !important;
    opacity: .20;
    transform: translate3d(var(--float-x), var(--float-y), 0) scale(.72);
    animation: loaderDustFloat var(--float-duration, 4s) ease-in-out infinite;
    animation-delay: var(--float-phase, 0s);
}

.particle-morph-loader .matrix-dot.is-on,
.particle-morph-loader .matrix-dot.is-percent {
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 0 5px rgba(255,255,255,.38), 0 0 12px rgba(255,255,255,.14) !important;
    opacity: .95;
    animation:
        loaderParticleArrive .62s cubic-bezier(.18,.82,.22,1) both,
        loaderParticleFloat var(--float-duration, 4s) ease-in-out infinite;
    animation-delay: var(--delay), calc(var(--delay) + var(--float-phase, 0s));
}

.particle-morph-loader .particle-loader-accessibility {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.particle-morph-loader .loading-error {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: clamp(28px, 6vh, 72px);
    width: min(90vw, 680px);
    transform: translateX(-50%);
    color: rgba(255,230,230,.92);
    text-align: center;
    white-space: pre-wrap;
    font-size: .9rem;
}

@keyframes loaderParticleArrive {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--float-x) * 4), calc(var(--float-y) * 4), 0) scale(.18);
    }
    70% { opacity: .96; }
    100% {
        opacity: .95;
        transform: translate3d(var(--float-x), var(--float-y), 0) scale(1);
    }
}

@keyframes loaderParticleFloat {
    0%, 100% { transform: translate3d(var(--float-x), var(--float-y), 0) scale(1); opacity: .82; }
    50% { transform: translate3d(calc(var(--float-x) * -0.55), calc(var(--float-y) * -0.60), 0) scale(1.12); opacity: 1; }
}

@keyframes loaderDustFloat {
    0%, 100% { transform: translate3d(var(--float-x), var(--float-y), 0) scale(.68); opacity: .10; }
    50% { transform: translate3d(calc(var(--float-x) * -0.4), calc(var(--float-y) * -0.4), 0) scale(.92); opacity: .26; }
}

@media (max-width: 760px) {
    .particle-morph-stage { min-height: 230px; }
    .particle-morph-loader .particle-number-shell { min-height: 230px; }
    .particle-morph-loader .particle-number-grid { gap: 9px; min-height: 190px; }
}


/* v2.0.0-alpha4.22: larger clean industry particle illustrations only on loading background */
.particle-morph-loader .industry-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.72;
    pointer-events: none;
    filter: none;
}

.particle-morph-loader .atmospheric-field {
    display: none !important;
}

.particle-morph-loader .particle-morph-stage {
    position: absolute;
    left: 50%;
    bottom: clamp(30px, 6vh, 74px);
    transform: translateX(-50%);
    z-index: 4;
    min-height: 116px;
}

@media (max-width: 760px) {
    .particle-morph-loader .industry-particle-canvas {
        opacity: 0.42;
    }
}


/* v2.0.0-alpha4.22: keep loading percent small and below the particle illustration */
.particle-morph-loader .particle-number-shell {
    min-height: 112px !important;
}

.particle-morph-loader .particle-number-grid {
    min-height: 104px !important;
    gap: clamp(7px, 1.2vw, 14px) !important;
    opacity: .88;
}

.particle-morph-loader .particle-digit {
    grid-template-columns: repeat(5, clamp(5px, .78vw, 9px)) !important;
    grid-auto-rows: clamp(5px, .78vw, 9px) !important;
    gap: clamp(5px, .68vw, 8px) !important;
}

.particle-morph-loader .particle-digit.percent-glyph {
    grid-template-columns: repeat(5, clamp(4px, .62vw, 7px)) !important;
    grid-auto-rows: clamp(4px, .62vw, 7px) !important;
    gap: clamp(4px, .56vw, 6px) !important;
}

@media (max-width: 760px) {
    .particle-morph-loader .particle-morph-stage {
        bottom: 28px;
        min-height: 94px;
    }
    .particle-morph-loader .industry-particle-canvas {
        opacity: .62;
    }
}

/* v2.0.0-alpha4.39: editable Solutions dropdown labels */
.nav-links .nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 76px;
}

.navbar.scrolled .nav-links .nav-item {
    min-height: 66px;
}

.nav-link-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s ease;
}

.nav-link-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .72;
    transition: transform .22s ease, opacity .22s ease;
}

.nav-item-has-dropdown:hover .nav-link-trigger,
.nav-item-has-dropdown:focus-within .nav-link-trigger,
.nav-link-trigger.active {
    color: var(--green);
}

.nav-item-has-dropdown:hover .nav-link-trigger::after,
.nav-item-has-dropdown:focus-within .nav-link-trigger::after {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    min-width: 284px;
    padding: 12px;
    display: grid;
    gap: 4px;
    border-radius: 24px;
    border: 1px solid rgba(151, 171, 86, .22);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 82px rgba(23, 32, 22, .16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 12px, 0) scale(.97);
    transform-origin: 50% 0;
    transition: opacity .22s ease, visibility .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
    z-index: 120;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 1px solid rgba(151, 171, 86, .18);
    border-top: 1px solid rgba(151, 171, 86, .18);
    background: rgba(255, 255, 255, .96);
}

.nav-item-has-dropdown:hover .nav-dropdown,
.nav-item-has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
}

.nav-dropdown a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 15px;
    color: #273024;
    font-size: .84rem;
    font-weight: 850;
    letter-spacing: -.01em;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-dropdown a::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 999px;
    background: rgba(169, 198, 79, .42);
    box-shadow: 0 0 0 4px rgba(169, 198, 79, .08);
    transition: background .18s ease, box-shadow .18s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    color: #5f752a;
    background: rgba(169, 198, 79, .12);
    transform: translateX(2px);
    outline: none;
}

.nav-dropdown a:hover::before,
.nav-dropdown a:focus-visible::before {
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(169, 198, 79, .12), 0 0 14px rgba(169, 198, 79, .42);
}

.markets-section-jump-nav {
    position: sticky;
    top: 82px;
    z-index: 50;
    width: min(1120px, calc(100% - 34px));
    margin: -42px auto 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(151, 171, 86, .22);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 24px 70px rgba(23, 32, 22, .13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.markets-section-jump-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    color: #263020;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.markets-section-jump-nav a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(169, 198, 79, .15);
    color: #6f872d;
    font-size: .68rem;
    font-weight: 950;
}

.markets-section-jump-nav a:hover,
.markets-section-jump-nav a:focus-visible {
    background: #a9c64f;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(169, 198, 79, .24);
    outline: none;
}

.markets-section-jump-nav a:hover span,
.markets-section-jump-nav a:focus-visible span {
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}

@media (max-width: 980px) {
    .nav-links .nav-item,
    .navbar.scrolled .nav-links .nav-item {
        min-height: initial;
    }

    .nav-dropdown {
        display: none;
    }

    .markets-section-jump-nav {
        top: 76px;
        width: calc(100% - 20px);
        margin-top: -28px;
        justify-content: flex-start;
        overflow-x: auto;
        border-radius: 22px;
        scrollbar-width: none;
    }

    .markets-section-jump-nav::-webkit-scrollbar {
        display: none;
    }

    .markets-section-jump-nav a {
        flex: 0 0 auto;
    }
}

/* v2.0.0-alpha4.39: polished Solutions dropdown + safer hero framing */
.navbar .nav-item-has-dropdown {
    perspective: 900px;
}

.navbar .solutions-dropdown {
    min-width: 338px;
    padding: 14px;
    gap: 8px;
    border-radius: 28px;
    border: 1px solid rgba(169, 198, 79, .26);
    background:
        radial-gradient(circle at 18% 0%, rgba(169, 198, 79, .18), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(246, 250, 239, .94));
    box-shadow:
        0 32px 90px rgba(14, 24, 12, .18),
        0 0 0 1px rgba(255, 255, 255, .70) inset;
    transform: translate3d(-50%, 16px, 0) rotateX(-7deg) scale(.96);
    transition: opacity .24s ease, visibility .24s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

.navbar .solutions-dropdown::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.42) 48%, transparent 62%);
    transform: translateX(-76%) rotate(4deg);
    opacity: 0;
    pointer-events: none;
}

.navbar .nav-item-has-dropdown:hover .solutions-dropdown,
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown {
    transform: translate3d(-50%, 0, 0) rotateX(0deg) scale(1);
}

.navbar .nav-item-has-dropdown:hover .solutions-dropdown::after,
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown::after {
    animation: solutionsDropdownSheen 1.05s ease .08s both;
}

.navbar .solutions-dropdown a {
    min-height: 50px;
    padding: 0 46px 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(151, 171, 86, .12);
    box-shadow: 0 10px 28px rgba(31, 45, 24, .055);
    overflow: hidden;
    transform: translateY(8px);
    opacity: 0;
    transition:
        opacity .24s ease,
        transform .24s cubic-bezier(.2,.8,.2,1),
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

.navbar .nav-item-has-dropdown:hover .solutions-dropdown a,
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a {
    opacity: 1;
    transform: translateY(0);
}

.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(1),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(1) { transition-delay: .03s; }
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(2),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(2) { transition-delay: .06s; }
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(3),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(3) { transition-delay: .09s; }
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(4),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(4) { transition-delay: .12s; }
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(5),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(5) { transition-delay: .15s; }

.navbar .solutions-dropdown a::before {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 12px;
    background: radial-gradient(circle, #ffffff 0 22%, #a9c64f 46%, rgba(169,198,79,.36) 100%);
    box-shadow: 0 0 0 5px rgba(169,198,79,.09), 0 0 18px rgba(169,198,79,.26);
}

.navbar .solutions-dropdown a::after {
    content: "→";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(-7px, -50%);
    color: #7f9935;
    opacity: 0;
    font-weight: 950;
    transition: opacity .18s ease, transform .18s ease;
}

.navbar .solutions-dropdown a:hover,
.navbar .solutions-dropdown a:focus-visible {
    color: #42571e;
    background: rgba(169, 198, 79, .16);
    border-color: rgba(169, 198, 79, .30);
    box-shadow: 0 16px 34px rgba(68, 91, 32, .12);
    transform: translateX(4px) translateY(0);
}

.navbar .solutions-dropdown a:hover::after,
.navbar .solutions-dropdown a:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}

@keyframes solutionsDropdownSheen {
    0% { opacity: 0; transform: translateX(-82%) rotate(4deg); }
    20% { opacity: .72; }
    100% { opacity: 0; transform: translateX(72%) rotate(4deg); }
}


/* v2.0.0-alpha4.39: diagnostic loader path removes external DRACO/CDN blocking and starts model route before non-critical homepage effects. */

/* v2.0.0-alpha4.39: diagnostic no-blocking loader mode. The page must paint immediately; 3D loads after first render. */
body.ghg-no-blocking-loader,
body.ghg-no-blocking-loader.is-loading {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.ghg-no-blocking-loader .loading-screen,
.loading-screen.ghg-disabled-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.ghg-model-loading-async .canvas-holder::after {
    content: "Loading 3D model…";
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(23, 32, 22, .76);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(169, 198, 79, .28);
    box-shadow: 0 12px 34px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.ghg-model-ready .canvas-holder::after,
body.ghg-model-unavailable .canvas-holder::after {
    display: none !important;
}

/* alpha4.42: when the YouTube presentation is the first section, keep the 3D canvas fully hidden until the user reaches the model hero section. */
.canvas-holder {
    transition: opacity 0.28s ease;
}

/* 4.65.13: parsed 3D canvas must not be hidden by legacy first-section gating. */
body.model-hidden .canvas-holder {
    opacity: 1;
}

/* alpha4.43: MetronTech logo and first-screen video presentation refinements */
.brand-logo {
    display: block;
    width: clamp(150px, 11vw, 190px);
    height: auto;
    object-fit: contain;
}

.brand-text-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.footer-brand-logo {
    display: block;
    width: min(220px, 100%);
    height: auto;
    margin-bottom: 18px;
    filter: drop-shadow(0 18px 30px rgba(42, 159, 74, 0.16));
}

@media (max-width: 980px) {
    .brand-logo {
        width: 142px;
    }
}

/* Employer-selected Our Markets orbit icons */
.market-node span.has-custom-icon{padding:7px;overflow:hidden}
.market-node-custom-icon{display:block;width:100%;height:100%;object-fit:contain}

/* alpha4.50: expanded 8-item Solutions menu */
.navbar .solutions-dropdown{min-width:380px;max-width:min(410px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;}
.navbar .solutions-dropdown a{height:auto;min-height:48px;white-space:normal;line-height:1.25;padding-top:9px;padding-bottom:9px;}
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(6),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(6){transition-delay:.18s;}
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(7),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(7){transition-delay:.21s;}
.navbar .nav-item-has-dropdown:hover .solutions-dropdown a:nth-child(8),
.navbar .nav-item-has-dropdown:focus-within .solutions-dropdown a:nth-child(8){transition-delay:.24s;}


/* =========================================================
   MetronTech alpha4.51 — compact 8-solution desktop menu
   ========================================================= */
@media (min-width:981px){
  .navbar .solutions-dropdown{
    width:min(690px,calc(100vw - 44px));
    min-width:0;
    max-width:none;
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(48px,auto);
    gap:8px;
    padding:13px;
  }
  .navbar .solutions-dropdown a{
    width:100%;
    min-width:0;
    min-height:48px;
    height:auto;
    padding:10px 42px 10px 15px;
    line-height:1.22;
    white-space:normal;
    overflow:visible;
  }
}

/* =========================================================
   alpha4.52 — upgraded gateway visual + tighter home flow
   ========================================================= */
.about-connect-visual{
    width:min(540px,38vw);
    height:330px;
}
.about-connect-badge{z-index:2}
.about-connect-copy{left:6px;bottom:0;border-radius:22px;padding:13px 15px 12px;background:rgba(255,255,255,.88)}
.about-connect-router{
    right:4px;
    bottom:56px;
    width:210px;
    height:126px;
    border-radius:28px 28px 30px 30px;
    background:linear-gradient(180deg,#ffffff 0%,#f5faea 38%,#e2edc8 100%);
    border:1px solid rgba(103,120,59,.16);
    box-shadow:0 34px 84px rgba(27,36,23,.22),0 0 42px rgba(169,198,79,.14),inset 0 -14px 20px rgba(121,150,53,.10),inset 0 1px 0 rgba(255,255,255,.9);
}
.about-connect-router::before{inset:12px 16px auto 16px;height:12px;background:linear-gradient(90deg,rgba(169,198,79,.08),rgba(169,198,79,.44),rgba(169,198,79,.08));filter:blur(.2px)}
.about-connect-router::after{content:"";position:absolute;left:26px;right:26px;bottom:18px;height:18px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(117,142,52,.11));opacity:.85}
.router-aura{position:absolute;inset:-18px;border-radius:34px;background:radial-gradient(circle at 50% 42%,rgba(169,198,79,.26),transparent 68%);filter:blur(18px);opacity:.7;animation:routerAuraPulse 2.8s ease-in-out infinite}
.router-screen{position:absolute;left:24px;right:24px;top:30px;height:36px;border-radius:16px;background:linear-gradient(135deg,rgba(217,238,170,.88),rgba(255,255,255,.95));border:1px solid rgba(131,157,55,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.router-screen::before{content:"";position:absolute;left:14px;right:14px;top:9px;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(118,144,53,.08),rgba(118,144,53,.65),rgba(118,144,53,.08))}
.router-screen::after{content:"";position:absolute;left:18px;top:16px;width:54px;height:10px;border-radius:999px;background:linear-gradient(90deg,#cce687,#eff8d8)}
.router-top-panel{inset:78px 24px auto 24px;height:14px;background:linear-gradient(90deg,rgba(169,198,79,.22),rgba(255,255,255,.95))}
.router-antenna{bottom:92px;width:8px;height:64px;background:linear-gradient(180deg,#f6faef,#b7ca86);box-shadow:0 0 0 1px rgba(112,133,53,0.10),0 0 18px rgba(169,198,79,.10)}
.antenna-left{left:42px;transform:rotate(-12deg)}
.antenna-right{right:42px;transform:rotate(12deg)}
.router-port{position:absolute;bottom:34px;width:16px;height:7px;border-radius:999px;background:rgba(104,124,49,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
.port-1{left:88px}.port-2{left:108px}.port-3{left:128px}.port-4{left:148px}
.router-led{bottom:16px;width:9px;height:9px;background:rgba(169,198,79,.68);box-shadow:0 0 12px rgba(169,198,79,.32)}
.led-1{left:28px}.led-2{left:45px}.led-3{left:62px}.led-4{left:79px}
.router-base-glow{position:absolute;left:50%;bottom:-6px;width:128px;height:28px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(169,198,79,.36),rgba(169,198,79,0) 72%);filter:blur(10px);opacity:.8}
.about-connect-link{left:18px;right:210px;top:78px;height:96px}
.wifi-link-line{position:absolute;left:10px;right:16px;top:50%;height:2px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,rgba(169,198,79,.08),rgba(169,198,79,.92),rgba(169,198,79,.08));opacity:.72}
.wifi-link-line::before,.wifi-link-line::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#dff3a8;box-shadow:0 0 14px rgba(169,198,79,.45)}
.wifi-link-line::before{left:0}.wifi-link-line::after{right:0}
.wifi-wave{right:-22px;height:30px;border-width:3px;border-bottom-color:rgba(169,198,79,0.20);border-top-color:rgba(169,198,79,0.76)}
.wave-1{width:82px}.wave-2{width:148px}.wave-3{width:214px}
.wifi-packet{width:11px;height:11px;margin-top:-5.5px;background:radial-gradient(circle,#ffffff 0%,#edf9d2 48%,#a9c64f 100%)}
@keyframes routerAuraPulse{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:.95}}

/* Compact transition from sensor-label scene into IoT pipeline */
.products-section{
    min-height:76vh;
    align-items:flex-start;
    padding:58px 8vw 28px;
}
.products-section .content-left{
    max-width:min(760px,100%);
    padding-top:12px;
}
.products-section h2{max-width:900px}
.split-list{margin-top:24px}
.info-card{padding:22px 22px 20px}
#iot-platform.ghg-v2-section{padding-top:52px}

@media (max-width: 1280px){
  .about-connect-visual{width:min(420px,36vw);height:290px}
  .about-connect-router{transform:scale(.88);transform-origin:right bottom}
  .about-connect-link{right:170px}
}
@media (max-width: 980px){
  .products-section{min-height:auto;padding:56px 6vw 28px}
  #iot-platform.ghg-v2-section{padding-top:40px}
}

/* =========================================================
   alpha4.53 — professional edge gateway artwork
   ========================================================= */
.about-connect-router{
  right:-8px;
  bottom:34px;
  width:292px;
  height:228px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.about-connect-router::before,
.about-connect-router::after{display:none!important;content:none!important}
.smart-gateway-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(28,43,21,.13));
  transform:translateZ(0);
  animation:gatewayFloat 4.8s ease-in-out infinite;
}
.gateway-status-pulse{
  position:absolute;
  right:32px;
  top:104px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#b9db61;
  box-shadow:0 0 0 0 rgba(185,219,97,.42),0 0 18px rgba(185,219,97,.72);
  animation:gatewayStatusPulse 2.15s ease-out infinite;
}
.about-connect-link{left:10px;right:268px;top:96px;height:96px}
.about-connect-copy{left:0;bottom:2px}
@keyframes gatewayFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}50%{transform:translate3d(0,-7px,0) rotate(.5deg)}}
@keyframes gatewayStatusPulse{0%{box-shadow:0 0 0 0 rgba(185,219,97,.48),0 0 18px rgba(185,219,97,.72)}72%{box-shadow:0 0 0 16px rgba(185,219,97,0),0 0 24px rgba(185,219,97,.34)}100%{box-shadow:0 0 0 18px rgba(185,219,97,0),0 0 18px rgba(185,219,97,.54)}}
@media(max-width:1280px){
  .about-connect-router{width:254px;height:202px;right:-8px;bottom:42px;transform:none}
  .about-connect-link{right:228px}
}


/* =========================================================
   alpha4.56 — use provided router artwork in About section
   ========================================================= */
.about-connect-visual{width:min(650px,44vw);height:400px}
.about-connect-router{
  right:-20px;
  bottom:18px;
  width:440px;
  height:320px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.smart-gateway-art{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 32px 40px rgba(28,43,21,.14));
  animation:gatewayFloat 5.3s ease-in-out infinite;
}
.gateway-status-pulse{display:none!important}
.about-connect-link{left:6px;right:360px;top:126px;height:92px}
.about-connect-copy{left:0;bottom:10px}
@media(max-width:1280px){
  .about-connect-visual{width:min(520px,42vw);height:350px}
  .about-connect-router{width:360px;height:270px;right:-14px;bottom:24px}
  .about-connect-link{right:294px;top:118px}
}
@media(max-width:980px){
  .about-connect-visual{width:min(100%,520px);height:320px}
  .about-connect-router{width:320px;height:238px;right:-10px;bottom:26px}
  .about-connect-link{right:248px;top:108px;height:84px}
}


/* =========================================================
   alpha4.57 — clean router artwork composition
   ========================================================= */
@media (min-width:981px){
  .about-connect-visual{
    left:24vw!important;
    top:40vh!important;
    width:min(570px,37vw)!important;
    min-width:440px!important;
    height:340px!important;
  }
  .about-connect-router{
    right:0!important;
    bottom:24px!important;
    width:min(390px,29vw)!important;
    height:286px!important;
  }
  .smart-gateway-art{
    object-fit:contain!important;
    mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 76% 70% at 50% 54%,#000 0 66%,rgba(0,0,0,.98) 76%,transparent 100%);
    mask-image:radial-gradient(ellipse 76% 70% at 50% 54%,#000 0 66%,rgba(0,0,0,.98) 76%,transparent 100%);
    filter:drop-shadow(0 25px 32px rgba(28,43,21,.12))!important;
  }
  .about-connect-link{left:0!important;right:322px!important;top:126px!important;height:76px!important;z-index:1}
  .about-connect-router{z-index:2}
  .about-connect-badge{top:18px!important;right:294px!important;z-index:3}
  .about-connect-copy{left:0!important;bottom:8px!important;z-index:3}
}
@media (min-width:981px) and (max-width:1280px){
  .about-connect-visual{left:21vw!important;width:min(520px,40vw)!important;min-width:400px!important}
  .about-connect-router{width:330px!important;height:250px!important}
  .about-connect-link{right:270px!important}
  .about-connect-badge{right:246px!important}
}


/* =========================================================
   alpha4.58 — stable gateway composition + lighter artwork blend
   ========================================================= */
.about-connect-visual{
  left:38vw!important;
  top:44vh!important;
  width:min(560px,39vw)!important;
  height:320px!important;
}
.about-connect-badge{
  right:auto!important;
  left:126px!important;
  top:6px!important;
  z-index:30!important;
}
.about-connect-router{
  right:0!important;
  bottom:22px!important;
  width:300px!important;
  height:220px!important;
  overflow:hidden!important;
  isolation:isolate;
}
.smart-gateway-art{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 20px 28px rgba(28,43,21,.12))!important;
  mix-blend-mode:multiply;
}
.about-connect-link{
  left:34px!important;
  right:240px!important;
  top:118px!important;
  height:74px!important;
}
.about-connect-copy{
  left:84px!important;
  bottom:10px!important;
  z-index:30!important;
}
@media(max-width:1280px){
  .about-connect-visual{left:36vw!important;top:45vh!important;width:min(500px,40vw)!important;height:300px!important}
  .about-connect-router{width:270px!important;height:198px!important}
  .about-connect-link{right:216px!important;top:112px!important}
  .about-connect-copy{left:64px!important}
}
@media(max-width:980px){
  .about-connect-visual{left:auto!important;top:auto!important;width:min(100%,520px)!important;height:300px!important}
  .about-connect-badge{left:96px!important}
  .about-connect-copy{left:18px!important}
}

/* =========================================================
   alpha4.59 — polished first-paint loader + cleaner gateway scene
   ========================================================= */
body.is-loading{overflow:hidden!important;}
.loading-screen{opacity:1;visibility:visible;pointer-events:auto;}
.loading-screen.hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.ghg-loader-shell{
  position:relative;
  z-index:4;
  width:min(92vw,720px);
  margin:0 auto;
  padding:36px 34px 32px;
  border-radius:34px;
  border:1px solid rgba(214,240,151,.16);
  background:linear-gradient(180deg,rgba(6,14,9,.74),rgba(4,10,6,.58));
  box-shadow:0 36px 110px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
.ghg-loader-shell::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% 18%,rgba(184,255,148,.12),transparent 26%),radial-gradient(circle at 84% 22%,rgba(169,198,79,.08),transparent 24%);
  pointer-events:none;
}
.ghg-loader-brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.ghg-loader-logo{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(169,198,79,.22));}
.ghg-loader-brand-copy{display:grid;gap:4px;}
.ghg-loader-brand-copy strong{font-size:1.12rem;letter-spacing:-.02em;color:#f2f8e2;}
.ghg-loader-brand-copy span{font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.62);}
.ghg-loader-orb{position:relative;z-index:2;width:min(45vw,260px);aspect-ratio:1/1;margin:8px auto 24px;display:grid;place-items:center;}
.ghg-loader-orb-core{width:30%;height:30%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f6ffd9 0,#bede6a 34%,#7fa42d 68%,rgba(127,164,45,.12) 100%);box-shadow:0 0 0 18px rgba(169,198,79,.07),0 0 40px rgba(169,198,79,.32),0 0 90px rgba(149,255,143,.16);animation:ghgLoaderCorePulse 2.8s ease-in-out infinite;}
.ghg-loader-orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(220,244,160,.16);}
.ghg-loader-orb-ring.ring-a{inset:12%;animation:ghgLoaderSpin 10s linear infinite;}
.ghg-loader-orb-ring.ring-b{inset:3%;border-style:dashed;opacity:.6;animation:ghgLoaderSpinReverse 14s linear infinite;}
.ghg-loader-orb-ring.ring-c{inset:22%;border-color:rgba(149,255,143,.24);animation:ghgLoaderDrift 5.5s ease-in-out infinite;}
.ghg-loader-scan{position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,rgba(149,255,143,0) 0 74%,rgba(149,255,143,.26) 88%,rgba(149,255,143,0) 100%);filter:blur(1px);animation:ghgLoaderSpin 4.6s linear infinite;}
.ghg-loader-progress-track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(214,240,151,.12);margin-top:18px;}
.ghg-loader-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8bc640,#c6ed7a,#f0ffd0);box-shadow:0 0 18px rgba(169,198,79,.4);transition:width .28s ease;}
#loadingStageTitle{font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:#f4fbe3;text-align:center;}
#loadingText{margin-top:10px;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.68);text-align:center;}
#loadingPercent,.particle-morph-stage{display:none!important;}
.particle-loader-accessibility{position:relative;z-index:2;display:block;width:min(100%,520px);margin:0 auto;text-align:center;}
.ghg-loader-stage-dots{margin:15px auto 0;display:flex;justify-content:center;gap:9px;}
.ghg-loader-stage-dots i{width:9px;height:9px;border-radius:50%;background:rgba(224,244,178,.18);box-shadow:0 0 0 1px rgba(224,244,178,.08);animation:ghgLoaderDot 1.35s ease-in-out infinite;}
.ghg-loader-stage-dots i:nth-child(2){animation-delay:.16s}
.ghg-loader-stage-dots i:nth-child(3){animation-delay:.32s}
.ghg-loader-stage-dots i:nth-child(4){animation-delay:.48s}
@keyframes ghgLoaderCorePulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
@keyframes ghgLoaderSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ghgLoaderSpinReverse{to{transform:rotate(-360deg)}}
@keyframes ghgLoaderDrift{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ghgLoaderDot{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-5px);opacity:1;background:#dff29d;box-shadow:0 0 18px rgba(169,198,79,.38)}}

.about-connect-visual{
  left:30.5vw!important;
  top:45vh!important;
  width:min(430px,31vw)!important;
  height:286px!important;
}
.about-connect-badge{left:76px!important;top:8px!important;}
.about-connect-router{
  right:4px!important;
  bottom:18px!important;
  width:242px!important;
  height:176px!important;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}
.about-connect-router::before,
.about-connect-router::after{display:none!important;content:none!important;}
.smart-gateway-art{
  object-fit:contain!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 16px 28px rgba(28,43,21,.16)) drop-shadow(0 2px 22px rgba(145,173,61,.10))!important;
}
.about-connect-link{
  left:18px!important;
  right:162px!important;
  top:120px!important;
  height:58px!important;
}
.about-connect-copy{
  left:6px!important;
  bottom:0!important;
  z-index:30!important;
}
@media(max-width:1280px){
  .about-connect-visual{left:29vw!important;width:min(400px,33vw)!important;height:270px!important;}
  .about-connect-router{width:224px!important;height:164px!important;}
  .about-connect-link{right:148px!important;top:118px!important;}
  .about-connect-badge{left:64px!important;}
}
@media(max-width:980px){
  .about-connect-visual{left:auto!important;top:auto!important;width:min(100%,440px)!important;height:280px!important;}
  .about-connect-router{width:236px!important;height:170px!important;right:0!important;}
  .about-connect-link{right:160px!important;top:116px!important;}
  .about-connect-badge{left:82px!important;}
  .about-connect-copy{left:12px!important;bottom:4px!important;}
}

/* alpha4.61 refinements */
body.ghg-home-page .hero-section h1,
body.ghg-home-page .hero-section h2,
body.ghg-home-page .hero-content h1,
body.ghg-home-page .hero-content h2{
  font-size:clamp(3rem,6.2vw,5.9rem)!important;
  max-width:min(52vw,720px);
  line-height:.94!important;
}
body.ghg-home-page .hero-content{max-width:min(56vw,760px)}

.ghg-loader-shell{
  width:min(760px,calc(100vw - 36px));
  padding:34px 30px 30px;
  gap:20px;
}
.ghg-loader-shell::before{
  background:
    radial-gradient(circle at 50% 22%, rgba(179,226,85,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.ghg-loader-orb{
  position:relative;
  z-index:2;
  width:min(76vw,700px);
  max-width:700px;
  height:320px;
  margin:4px auto 8px;
  display:block;
}
.ghg-loader-network-scene{
  position:relative;
  width:100%;
  height:100%;
  border-radius:34px;
  border:1px solid rgba(221,243,168,.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(169,198,79,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 28px 90px rgba(0,0,0,.28);
  overflow:hidden;
}
.ghg-loader-network-scene::before,
.ghg-loader-network-scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ghg-loader-network-scene::before{
  background-image:
    linear-gradient(rgba(223,244,178,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223,244,178,.08) 1px, transparent 1px);
  background-size:52px 52px;
  opacity:.36;
  mask-image: radial-gradient(circle at center, #000 40%, transparent 92%);
}
.ghg-loader-network-scene::after{
  background: radial-gradient(circle at 50% 50%, rgba(169,198,79,.16), transparent 36%);
  animation: ghgLoaderScenePulse 4.8s ease-in-out infinite;
}
.ghg-loader-network-core{
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-54%);
  width:min(62%,360px);
  padding:24px 22px;
  border-radius:26px;
  background:rgba(6,17,11,.78);
  border:1px solid rgba(214,239,149,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 22px 50px rgba(0,0,0,.34);
  text-align:center;
}
.ghg-loader-network-core small{
  display:block;
  color:#b6cf6a;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-weight:900;
}
.ghg-loader-network-core strong{
  display:block;
  font-size:clamp(1.1rem,2vw,1.45rem);
  line-height:1.35;
  color:#fff;
  letter-spacing:-.02em;
}
.ghg-loader-core-tags{
  margin-top:15px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.ghg-loader-core-tags span,
.ghg-loader-markets span,
.ghg-loader-node{
  backdrop-filter: blur(12px);
}
.ghg-loader-core-tags span,
.ghg-loader-markets span{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(214,239,149,.14);
  background:rgba(255,255,255,.05);
  color:#eef8d7;
  font-size:.72rem;
  font-weight:700;
}
.ghg-loader-node{
  position:absolute;
  min-width:170px;
  max-width:220px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(214,239,149,.14);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.ghg-loader-node::before{
  content:"";
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:#b6cf6a;
  box-shadow:0 0 0 7px rgba(182,207,106,.12), 0 0 18px rgba(182,207,106,.36);
}
.node-gases{left:26px; top:34px; animation:ghgLoaderFloat 4.4s ease-in-out infinite;}
.node-gases::before{right:-32px; top:50%; transform:translateY(-50%)}
.node-weather{right:26px; top:42px; animation:ghgLoaderFloat 4.8s ease-in-out -.9s infinite;}
.node-weather::before{left:-32px; top:50%; transform:translateY(-50%)}
.node-cloud{right:34px; bottom:88px; animation:ghgLoaderFloat 5.1s ease-in-out -.45s infinite;}
.node-cloud::before{left:-32px; top:50%; transform:translateY(-50%)}
.node-field{left:34px; bottom:96px; animation:ghgLoaderFloat 4.7s ease-in-out -1.1s infinite;}
.node-field::before{right:-32px; top:50%; transform:translateY(-50%)}
.ghg-loader-node b{display:block; color:#fff; font-size:.95rem; line-height:1.25; margin-bottom:4px}
.ghg-loader-node span{display:block; color:rgba(255,255,255,.7); font-size:.76rem; line-height:1.45}
.ghg-loader-markets{
  position:absolute; left:20px; right:20px; bottom:18px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.ghg-loader-network-core::before,
.ghg-loader-network-core::after,
.node-gases::after,.node-weather::after,.node-cloud::after,.node-field::after{
  content:""; position:absolute; border-radius:999px; border:1px dashed rgba(182,207,106,.24); pointer-events:none;
}
.ghg-loader-network-core::before{left:-158px; top:50%; width:144px; transform:translateY(-50%)}
.ghg-loader-network-core::after{right:-158px; top:50%; width:144px; transform:translateY(-50%)}
.node-field::after{right:-152px; top:22px; width:138px}
.node-cloud::after{left:-152px; top:22px; width:138px}
@keyframes ghgLoaderScenePulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes ghgLoaderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width: 900px){
  .ghg-loader-orb{height:420px}
  .ghg-loader-network-core{width:min(84%,360px); top:48%}
  .ghg-loader-network-core::before,.ghg-loader-network-core::after,.node-field::after,.node-cloud::after{display:none}
  .ghg-loader-node{min-width:0;max-width:none;width:calc(50% - 26px)}
  .node-gases{left:18px;top:26px}.node-weather{right:18px;top:26px}.node-field{left:18px;bottom:104px}.node-cloud{right:18px;bottom:104px}
}
@media (max-width: 640px){
  .ghg-loader-shell{padding:28px 18px 22px}
  .ghg-loader-orb{height:500px}
  .ghg-loader-node{width:calc(100% - 32px); left:16px!important; right:16px!important}
  .node-gases{top:18px}.node-weather{top:108px}.node-field{bottom:142px}.node-cloud{bottom:52px}
  .ghg-loader-network-core{width:calc(100% - 32px); top:54%}
}

/* =========================================================
   alpha4.62 — intentionally minimal loading experience
   ========================================================= */
.ghg-loader-shell{
  width:min(92vw,590px)!important;
  padding:34px 34px 30px!important;
  border-radius:30px!important;
  background:rgba(5,14,9,.76)!important;
  border:1px solid rgba(215,239,155,.13)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.ghg-loader-shell::before{
  background:radial-gradient(circle at 50% 44%,rgba(169,198,79,.10),transparent 46%)!important;
}
.ghg-loader-brand{justify-content:center!important;margin-bottom:22px!important;}
.ghg-loader-brand-copy{display:none!important;}
.ghg-loader-logo{width:58px!important;height:58px!important;}
.ghg-loader-orb{
  width:100%!important;
  height:170px!important;
  margin:0 auto 12px!important;
  display:grid!important;
  place-items:center!important;
}
.ghg-loader-minimal-mark{
  position:relative;
  width:min(100%,420px);
  height:88px;
  margin:0 auto;
}
.ghg-loader-device-dot{
  position:absolute;
  left:50%;top:14px;
  width:20px;height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#b7d65f;
  box-shadow:0 0 0 10px rgba(183,214,95,.08),0 0 28px rgba(183,214,95,.34);
  animation:ghgMinimalPulse 2.1s ease-in-out infinite;
}
.ghg-loader-path{
  position:absolute;top:23px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,214,95,.52),transparent);
}
.ghg-loader-path.path-left{right:50%;width:36%;}
.ghg-loader-path.path-right{left:50%;width:36%;}
.ghg-loader-step{
  position:absolute;top:55px;
  display:grid;gap:7px;justify-items:center;
  font-style:normal;
  color:rgba(238,248,216,.66);
}
.ghg-loader-step b{width:7px;height:7px;border-radius:50%;background:#9fbe49;box-shadow:0 0 12px rgba(159,190,73,.30);}
.ghg-loader-step small{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.ghg-loader-step.step-sense{left:9%;}
.ghg-loader-step.step-connect{left:50%;transform:translateX(-50%);}
.ghg-loader-step.step-monitor{right:7%;}
.ghg-loader-simple-copy{text-align:center;margin-top:6px;}
.ghg-loader-simple-copy strong{display:block;color:#f4f9e8;font-size:1.16rem;letter-spacing:-.02em;}
.ghg-loader-simple-copy span{display:block;margin-top:8px;color:rgba(255,255,255,.53);font-size:.76rem;line-height:1.5;}
.particle-loader-accessibility{margin-top:18px!important;}
#loadingStageTitle{font-size:.78rem!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.13em;color:rgba(220,238,174,.76)!important;}
#loadingText{font-size:.78rem!important;color:rgba(255,255,255,.48)!important;margin-top:7px!important;}
.ghg-loader-progress-track{height:4px!important;max-width:340px;margin:16px auto 0!important;background:rgba(255,255,255,.07)!important;border:0!important;}
.ghg-loader-stage-dots{display:none!important;}
.ghg-loader-network-scene,.ghg-loader-network-core,.ghg-loader-node,.ghg-loader-markets{display:none!important;}
@keyframes ghgMinimalPulse{0%,100%{transform:translateX(-50%) scale(.92);opacity:.78}50%{transform:translateX(-50%) scale(1.08);opacity:1}}

/* smaller opening hero headline so it no longer competes with the 3D model */
body.ghg-home-page .hero-section h1,
body.ghg-home-page .hero-content h1{
  font-size:clamp(2.75rem,4.7vw,4.65rem)!important;
  line-height:.96!important;
  max-width:min(48vw,650px)!important;
}
@media(max-width:980px){
  body.ghg-home-page .hero-section h1,
  body.ghg-home-page .hero-content h1{font-size:clamp(2.6rem,10vw,4rem)!important;max-width:100%!important;}
}

/* New horizontal MetronTech logo: keep loader mark proportional. */
.ghg-loader-logo{
  width:min(210px,62vw)!important;
  height:auto!important;
  max-height:62px!important;
  object-fit:contain!important;
}

/* =========================================================
   alpha4.65 sync refresh — keep router callout synced with 3D model
   ========================================================= */
.about-connect-visual{
  will-change: transform, opacity;
}
.about-connect-visual.is-pinned{
  position: fixed !important;
}

/* Content refresh: lightweight Why MetronTech intro copy */
.why-section-description{
    max-width:760px;
    margin:18px auto 0;
    color:rgba(23,32,22,.64);
    font-size:clamp(.98rem,1.25vw,1.12rem);
    line-height:1.7;
}

/* 4.66.2: Legacy Monitoring Platform / product-animation scene is PRESERVED in home.html
   and its cover/circuit/sensor code remains in main.js. Keep it dormant until the
   hero + first scroll transition are approved, then restore it deliberately. */
.products-section#products { display:flex !important; }


/* METRON 4.65.14 safe-render diagnostic: parsed model canvas must be visible. */
body.ghg-home-page .canvas-holder{display:block!important;visibility:visible!important;opacity:1!important;z-index:50!important;}
body.ghg-home-page #webgl{display:block!important;visibility:visible!important;opacity:1!important;width:100vw!important;height:100vh!important;max-width:none!important;}


/* METRON 4.66.6 — antenna-centered telemetry waves.
   Lightweight CSS only: no canvas, images, JS particles or extra network requests. */
.about-signal-field{
  position:absolute!important;
  left:27.2%!important;
  top:21%!important;
  width:min(31vw,470px)!important;
  height:min(31vw,470px)!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  overflow:visible!important;
  z-index:3!important;
  opacity:0;
  will-change:opacity,transform;
}
.about-signal-field .signal-node{display:none!important;}
.about-signal-field .signal-orbit{
  position:absolute!important;left:50%!important;top:50%!important;aspect-ratio:1!important;
  border-radius:50%!important;transform:translate(-50%,-50%);box-sizing:border-box!important;
}
.about-signal-field .signal-orbit-a{
  width:34%!important;border:2px solid rgba(137,171,57,.60)!important;
  box-shadow:0 0 18px rgba(154,190,64,.15)!important;animation:metronSignalPulse 2.8s ease-in-out infinite!important;
}
.about-signal-field .signal-orbit-b{
  width:59%!important;border:1.5px solid rgba(137,171,57,.42)!important;
  box-shadow:0 0 26px rgba(154,190,64,.10)!important;animation:metronSignalPulseB 2.8s .22s ease-in-out infinite!important;
}
.about-signal-field .signal-orbit-c{
  width:86%!important;border:1px solid rgba(137,171,57,.25)!important;
  box-shadow:0 0 34px rgba(154,190,64,.07)!important;animation:metronSignalPulseC 2.8s .44s ease-in-out infinite!important;
}
.about-signal-field .signal-core{
  position:absolute!important;left:50%!important;top:50%!important;width:22%!important;aspect-ratio:1!important;
  transform:translate(-50%,-50%);border-radius:50%!important;
  background:radial-gradient(circle,rgba(160,196,67,.30) 0%,rgba(160,196,67,.10) 40%,rgba(160,196,67,0) 74%)!important;
  filter:blur(5px)!important;
}
@keyframes metronSignalPulse{0%,100%{opacity:.50;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}
@keyframes metronSignalPulseB{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.76;transform:translate(-50%,-50%) scale(1.035)}}
@keyframes metronSignalPulseC{0%,100%{opacity:.22;transform:translate(-50%,-50%) scale(.90)}50%{opacity:.55;transform:translate(-50%,-50%) scale(1.04)}}
@media(max-width:980px){
 .about-signal-field{left:29%!important;top:23%!important;width:min(62vw,390px)!important;height:min(62vw,390px)!important;}
}



/* METRON 4.66.7 — restored Monitoring Platform scene only.
   The later sensor-callout scene remains dormant until separately approved. */
.products-section#products{
  display:flex!important;
  position:relative;
  background:radial-gradient(circle at 79% 32%,rgba(169,198,79,.10),transparent 24rem),#fff;
}
.products-section#products .content-left{position:relative;z-index:4;}


/* =========================================================
   METRON 4.66.12 — Act With Confident environmental scan field
   Inspired by the approved warehouse hero scan: a restrained blue telemetry
   sweep occupies ONLY the empty left visual field. 3D choreography and the
   right copy card are intentionally untouched.
   ========================================================= */
.intro-section#about{position:relative;overflow:hidden;isolation:isolate;}
.intro-section#about::before{
  content:"";position:absolute;left:-7%;top:0;width:65%;height:100%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 35% 50%,rgba(19,147,224,.10) 0%,rgba(44,180,244,.035) 38%,transparent 70%);
}
.intro-section#about .about-story-card{position:relative;z-index:6;}
.about-signal-field,.about-signal-field.is-pinned{
  position:absolute!important;left:0!important;top:0!important;width:61%!important;height:100%!important;
  min-width:0!important;max-width:none!important;transform-origin:45% 50%!important;pointer-events:none!important;
  overflow:hidden!important;z-index:2!important;border-radius:0!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%);
}
.about-signal-field .signal-orbit,.about-signal-field .signal-core,.about-signal-field .signal-node{display:none!important;}
.spatial-scan-haze{position:absolute;inset:8% 3% 8% 0;background:radial-gradient(ellipse at 40% 50%,rgba(16,147,224,.12),rgba(55,187,244,.025) 45%,transparent 72%);filter:blur(14px);}
.spatial-contours{position:absolute;border:1px solid rgba(22,142,209,.23);border-radius:50%;opacity:.7;transform:translate(-50%,-50%);}
.spatial-contours::before,.spatial-contours::after{content:"";position:absolute;border:1px solid rgba(31,157,222,.15);border-radius:50%;inset:14%;}
.spatial-contours::after{inset:31%;border-color:rgba(38,173,232,.20);}
.spatial-contours-a{left:32%;top:51%;width:47%;aspect-ratio:1.35;animation:spatialContourBreath 5.4s ease-in-out infinite;}
.spatial-contours-b{left:38%;top:47%;width:27%;aspect-ratio:1.18;opacity:.45;animation:spatialContourBreath 5.4s .7s ease-in-out infinite reverse;}
.spatial-scan-trail{position:absolute;top:8%;bottom:8%;left:-22%;width:31%;opacity:0;background:linear-gradient(90deg,transparent,rgba(16,150,230,.025) 25%,rgba(39,181,244,.12) 70%,rgba(108,215,255,.24));filter:blur(5px);transform:skewX(-5deg);}
.spatial-scan-plane{position:absolute;top:6%;bottom:6%;left:-12%;width:4px;opacity:0;background:linear-gradient(180deg,transparent 0%,rgba(87,210,255,.95) 18%,#25aeea 50%,rgba(87,210,255,.95) 82%,transparent 100%);box-shadow:0 0 8px rgba(20,158,226,.78),0 0 24px rgba(40,183,241,.52),-28px 0 60px rgba(35,174,237,.12);}
.spatial-scan-plane span{position:absolute;left:-7px;top:50%;width:18px;height:18px;border:1px solid rgba(102,214,255,.72);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 16px rgba(48,187,244,.6);}
.about-signal-field.is-active .spatial-scan-plane{animation:spatialScanPlane 4.8s cubic-bezier(.45,0,.2,1) infinite;}
.about-signal-field.is-active .spatial-scan-trail{animation:spatialScanTrail 4.8s cubic-bezier(.45,0,.2,1) infinite;}
.spatial-data-stream{position:absolute;height:1px;left:17%;transform-origin:left center;background:linear-gradient(90deg,rgba(22,151,220,.05),rgba(25,161,228,.55),rgba(77,202,249,.08));opacity:.45;}
.stream-a{top:32%;width:38%;transform:rotate(12deg)}.stream-b{top:52%;width:45%;transform:rotate(-6deg)}.stream-c{top:68%;width:32%;transform:rotate(-18deg)}
.spatial-pulse{position:absolute;width:8px;height:8px;border-radius:50%;background:#52c9f5;box-shadow:0 0 0 5px rgba(43,175,233,.09),0 0 17px rgba(27,160,225,.62);animation:spatialPulse 2.6s ease-in-out infinite;}
.pulse-a{left:25%;top:35%}.pulse-b{left:47%;top:53%;animation-delay:.6s}.pulse-c{left:35%;top:69%;animation-delay:1.2s}
@keyframes spatialScanPlane{0%{left:-12%;opacity:0}7%{opacity:.9}72%{opacity:.9}84%,100%{left:82%;opacity:0}}
@keyframes spatialScanTrail{0%{left:-35%;opacity:0}9%{opacity:.72}72%{opacity:.62}88%,100%{left:55%;opacity:0}}
@keyframes spatialContourBreath{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.035)}}
@keyframes spatialPulse{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:980px){.about-signal-field,.about-signal-field.is-pinned{left:0!important;top:0!important;width:100%!important;height:56%!important;opacity:.48!important}.intro-section#about::before{width:100%;height:62%}}
@media(prefers-reduced-motion:reduce){.spatial-scan-plane,.spatial-scan-trail,.spatial-contours,.spatial-pulse{animation:none!important}.spatial-scan-plane{left:44%;opacity:.55}.spatial-scan-trail{left:17%;opacity:.35}}

/* 4.66.14 — device-origin spatial scan: four directional sweeps + antenna telemetry */
.about-signal-field{--scan-x:38%;--scan-y:48%;--wifi-x:38%;--wifi-y:23%;}
.about-signal-field .spatial-scan-plane,.about-signal-field .spatial-scan-trail,.about-signal-field .spatial-contours,.about-signal-field .spatial-data-stream{display:none!important;}
.device-scan-origin{position:absolute;left:var(--scan-x);top:var(--scan-y);width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(67,192,245,.72);box-shadow:0 0 0 8px rgba(45,174,231,.06),0 0 26px rgba(27,161,224,.52);opacity:0;}
.about-signal-field.is-active .device-scan-origin{animation:scanOriginPulse 3.2s ease-in-out infinite;}
.device-scan-ray{position:absolute;left:var(--scan-x);top:var(--scan-y);height:2px;width:46%;transform-origin:0 50%;opacity:0;overflow:visible;background:linear-gradient(90deg,rgba(55,195,250,.92),rgba(48,180,237,.30) 52%,transparent 100%);filter:drop-shadow(0 0 5px rgba(39,178,237,.52));}
.device-scan-ray::before{content:"";position:absolute;left:0;top:-24px;width:34%;height:50px;background:linear-gradient(90deg,rgba(49,188,244,.12),transparent);filter:blur(8px);}
.device-scan-ray i{position:absolute;right:5%;top:-3px;width:8px;height:8px;border-radius:50%;background:#8be1ff;box-shadow:0 0 14px rgba(57,193,246,.92);}
.ray-right{transform:rotate(0deg)}.ray-left{transform:rotate(180deg);width:39%}.ray-up{transform:rotate(-90deg);width:45%}.ray-down{transform:rotate(90deg);width:48%}
.about-signal-field.is-active .ray-right{animation:deviceRay 4.6s .00s ease-in-out infinite}.about-signal-field.is-active .ray-left{animation:deviceRay 4.6s .55s ease-in-out infinite}.about-signal-field.is-active .ray-up{animation:deviceRay 4.6s 1.10s ease-in-out infinite}.about-signal-field.is-active .ray-down{animation:deviceRay 4.6s 1.65s ease-in-out infinite}
.device-wifi{position:absolute;left:var(--wifi-x);top:var(--wifi-y);width:112px;height:88px;transform:translate(-50%,-50%);opacity:0;}
.device-wifi i{position:absolute;left:50%;bottom:10px;border:2px solid rgba(39,175,235,.76);border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-radius:50% 50% 0 0;transform:translateX(-50%);filter:drop-shadow(0 0 4px rgba(34,168,230,.35));}
.device-wifi i:nth-child(1){width:32px;height:24px}.device-wifi i:nth-child(2){width:60px;height:43px;opacity:.72}.device-wifi i:nth-child(3){width:92px;height:65px;opacity:.45}.device-wifi b{position:absolute;left:50%;bottom:8px;width:7px;height:7px;border-radius:50%;background:#48bdec;transform:translateX(-50%);box-shadow:0 0 12px rgba(44,182,237,.8)}
.about-signal-field.is-active .device-wifi{animation:wifiTelemetry 3.2s .35s ease-in-out infinite}
@keyframes deviceRay{0%,7%{opacity:0;clip-path:inset(0 100% 0 0)}18%{opacity:.88}55%{opacity:.72;clip-path:inset(0 0 0 0)}76%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes scanOriginPulse{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.76)}42%{opacity:.92;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes wifiTelemetry{0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.94)}45%{opacity:.88;transform:translate(-50%,-50%) scale(1.03)}}
@media(max-width:980px){.about-signal-field{--scan-x:42%;--scan-y:54%;--wifi-x:42%;--wifi-y:25%}.device-scan-ray{width:55%}.ray-left{width:42%}.device-wifi{transform:translate(-50%,-50%) scale(.78)}}
@media(prefers-reduced-motion:reduce){.device-scan-ray,.device-scan-origin,.device-wifi{animation:none!important;opacity:.5!important}.device-scan-ray{clip-path:none!important}}

.scan-sweep{left:45%;opacity:.35}}


/* =========================================================
   METRON 4.66.15 — readable device finish + visible sensing field
   The scan story is now a deliberate dark technical environment behind the
   device, so cyan beams read immediately against the otherwise white section.
   ========================================================= */
.intro-section#about::after{
  content:"";position:absolute;left:0;top:0;width:61%;height:100%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 43% 48%,rgba(38,190,246,.16) 0 2px,transparent 3px),
    radial-gradient(ellipse at 42% 50%,rgba(10,117,167,.24),transparent 42%),
    linear-gradient(115deg,#071821 0%,#09242f 52%,#0a1c24 100%);
  clip-path:polygon(0 0,94% 0,100% 12%,96% 88%,88% 100%,0 100%);
}
.intro-section#about::before{
  left:0;top:0;width:61%;height:100%;z-index:1;opacity:.88;
  background-image:
    linear-gradient(rgba(88,194,228,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,194,228,.055) 1px,transparent 1px),
    radial-gradient(ellipse at 42% 50%,rgba(52,194,240,.14),transparent 57%);
  background-size:44px 44px,44px 44px,100% 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 76%,transparent 100%);
}
.about-signal-field,.about-signal-field.is-pinned{
  width:61%!important;z-index:3!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%)!important;
}
.about-signal-field{--scan-x:43%;--scan-y:49%;--wifi-x:43%;--wifi-y:23%;}
.spatial-scan-haze{inset:0;background:radial-gradient(circle at var(--scan-x) var(--scan-y),rgba(67,205,255,.22),rgba(20,145,199,.08) 28%,transparent 60%);filter:blur(10px)}
.device-scan-origin{width:20px;height:20px;border:2px solid rgba(129,228,255,.95);box-shadow:0 0 0 10px rgba(51,191,239,.09),0 0 34px rgba(59,202,250,.95);}
.device-scan-ray{height:3px;background:linear-gradient(90deg,#a6ecff 0%,#43c9f7 18%,rgba(38,179,232,.66) 58%,rgba(38,179,232,0) 100%);filter:drop-shadow(0 0 7px rgba(73,207,250,.92));}
.device-scan-ray::before{top:-36px;width:42%;height:74px;background:linear-gradient(90deg,rgba(61,203,250,.20),rgba(45,177,228,.03),transparent);filter:blur(10px)}
.device-scan-ray i{width:10px;height:10px;top:-4px;background:#d3f7ff;box-shadow:0 0 8px #6cdbff,0 0 22px rgba(65,202,249,.95)}
.ray-right{width:55%}.ray-left{width:43%}.ray-up{width:49%}.ray-down{width:52%}
.about-signal-field.is-active .ray-right{animation:deviceRayStrong 3.9s 0s ease-in-out infinite}.about-signal-field.is-active .ray-left{animation:deviceRayStrong 3.9s .45s ease-in-out infinite}.about-signal-field.is-active .ray-up{animation:deviceRayStrong 3.9s .90s ease-in-out infinite}.about-signal-field.is-active .ray-down{animation:deviceRayStrong 3.9s 1.35s ease-in-out infinite}
@keyframes deviceRayStrong{0%,5%{opacity:0;clip-path:inset(0 100% 0 0)}14%{opacity:1}58%{opacity:.94;clip-path:inset(0 0 0 0)}78%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
.device-wifi{width:132px;height:102px;filter:drop-shadow(0 0 10px rgba(50,193,242,.34))}
.device-wifi i{border-width:3px;border-top-color:rgba(122,226,255,.98)}
.device-wifi b{width:9px;height:9px;background:#a8efff;box-shadow:0 0 18px rgba(73,207,249,1)}
.about-signal-field.is-active .device-wifi{animation:wifiTelemetryStrong 2.65s .2s ease-in-out infinite}
@keyframes wifiTelemetryStrong{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.92)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.spatial-pulse{background:#9aeaff;box-shadow:0 0 0 5px rgba(66,203,249,.10),0 0 20px rgba(60,202,249,.82)}
@media(max-width:980px){.intro-section#about::after,.intro-section#about::before{width:100%;height:58%}.about-signal-field,.about-signal-field.is-pinned{width:100%!important;height:58%!important}.about-signal-field{--scan-x:42%;--scan-y:54%;--wifi-x:42%;--wifi-y:23%}}


/* =========================================================
   METRON 4.66.17 — full-section sensing environment
   ========================================================= */
.intro-section#about{
  background:
    radial-gradient(circle at 25% 48%,rgba(39,184,235,.18) 0 1px,transparent 2px),
    radial-gradient(ellipse at 29% 50%,rgba(25,151,202,.24) 0%,rgba(8,67,91,.18) 34%,transparent 62%),
    linear-gradient(112deg,#071923 0%,#092a38 52%,#0b3140 72%,#0a2631 100%)!important;
}
.intro-section#about::after{
  content:""!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0!important;pointer-events:none!important;
  background:
    radial-gradient(ellipse at 30% 50%,rgba(68,207,250,.13),transparent 46%),
    linear-gradient(90deg,rgba(255,255,255,.015),transparent 58%)!important;
  clip-path:none!important;
}
.intro-section#about::before{
  content:""!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;opacity:.78!important;pointer-events:none!important;
  background-image:
    linear-gradient(rgba(93,205,238,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(93,205,238,.075) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  -webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 0%,rgba(0,0,0,.86) 44%,transparent 82%)!important;
  mask-image:radial-gradient(ellipse at 30% 50%,#000 0%,rgba(0,0,0,.86) 44%,transparent 82%)!important;
}
.intro-section#about .about-story-card{z-index:7!important;background:rgba(255,255,255,.97)!important;box-shadow:0 28px 80px rgba(0,10,15,.24)!important;}
.about-signal-field,.about-signal-field.is-pinned{
  width:61%!important;height:100%!important;z-index:5!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.about-signal-field{--scan-x:43%;--scan-y:49%;--wifi-x:43%;--wifi-y:22%;}
.spatial-scan-haze{inset:0!important;background:radial-gradient(circle at var(--scan-x) var(--scan-y),rgba(76,218,255,.25),rgba(27,158,211,.08) 31%,transparent 62%)!important;}
.device-scan-origin{width:22px!important;height:22px!important;border:2px solid #d8f8ff!important;background:rgba(105,224,255,.10)!important;box-shadow:0 0 0 12px rgba(72,210,250,.12),0 0 42px rgba(77,219,255,.95)!important;}
.device-scan-ray{height:4px!important;background:linear-gradient(90deg,#effcff 0%,#8ae8ff 12%,#35c8f7 36%,rgba(34,177,229,.72) 70%,transparent 100%)!important;filter:drop-shadow(0 0 5px #a9efff) drop-shadow(0 0 15px rgba(44,198,246,.95))!important;}
.device-scan-ray::before{top:-44px!important;height:92px!important;width:50%!important;background:linear-gradient(90deg,rgba(90,220,255,.30),rgba(39,181,232,.06),transparent)!important;}
.device-scan-ray i{background:#f2fdff!important;box-shadow:0 0 8px #8ae8ff,0 0 24px rgba(72,215,255,1)!important;}
.ray-right{width:58%!important}.ray-left{width:44%!important}.ray-up{width:50%!important}.ray-down{width:53%!important}
.device-wifi{width:142px!important;height:110px!important;filter:drop-shadow(0 0 8px #79e2ff) drop-shadow(0 0 20px rgba(45,193,241,.82))!important;}
.device-wifi i{border-width:3px!important;border-top-color:#d6f8ff!important;}
.device-wifi b{background:#dffaff!important;box-shadow:0 0 20px rgba(83,220,255,1)!important;}
@media(max-width:980px){.about-signal-field,.about-signal-field.is-pinned{width:100%!important;height:58%!important}.intro-section#about{background:linear-gradient(180deg,#071923 0%,#0b3140 58%,#f8faf8 58%,#f8faf8 100%)!important;}}

/* =========================================================
   METRON 4.66.18 — contextual warehouse sensing stage
   The previous abstract grid did not communicate scanning. This version uses
   a lightweight still context image plus unmistakable device-origin sweeps.
   ========================================================= */
.intro-section#about{
  background:#071923!important;
}
.intro-section#about::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(3,18,26,.18) 0%,rgba(4,24,34,.22) 48%,rgba(7,25,35,.82) 67%,#071923 78%),
    linear-gradient(180deg,rgba(2,14,21,.12),rgba(2,17,24,.38)),
    url("../images/warehouse-scan-stage.webp") left center/68% 100% no-repeat!important;
  filter:saturate(.88) contrast(1.04)!important;
  opacity:1!important;clip-path:none!important;
}
.intro-section#about::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:
    radial-gradient(ellipse at 27% 50%,rgba(43,199,255,.16),transparent 37%),
    linear-gradient(90deg,transparent 0 59%,rgba(7,25,35,.58) 69%,rgba(7,25,35,.96) 78%)!important;
  opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important;
}
.intro-section#about .about-story-card{position:relative;z-index:8!important;background:rgba(255,255,255,.975)!important;box-shadow:0 30px 90px rgba(0,9,14,.32)!important;}
.about-signal-field,.about-signal-field.is-pinned{width:61%!important;height:100%!important;z-index:6!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;}
.about-signal-field{--scan-x:43%;--scan-y:49%;--wifi-x:43%;--wifi-y:22%;}
.spatial-scan-haze{inset:0!important;background:radial-gradient(circle at var(--scan-x) var(--scan-y),rgba(66,216,255,.24),rgba(26,154,207,.08) 28%,transparent 55%)!important;}
.device-scan-origin{opacity:.78!important;width:18px!important;height:18px!important;border:2px solid #c8f5ff!important;background:#4bd1fb!important;box-shadow:0 0 0 10px rgba(61,207,250,.13),0 0 34px rgba(67,216,255,.95)!important;}
/* A persistent faint rail means the scan remains readable between animation beats. */
.device-scan-ray{opacity:.34!important;height:3px!important;overflow:visible!important;background:linear-gradient(90deg,#dffaff 0%,#57d8ff 14%,rgba(37,190,239,.72) 48%,rgba(37,190,239,.16) 82%,transparent 100%)!important;filter:drop-shadow(0 0 6px rgba(88,220,255,.95)) drop-shadow(0 0 18px rgba(45,194,242,.70))!important;}
.device-scan-ray::before{content:""!important;position:absolute!important;left:0!important;top:-54px!important;width:56%!important;height:110px!important;background:linear-gradient(90deg,rgba(68,211,255,.28),rgba(45,190,239,.08),transparent)!important;filter:blur(9px)!important;}
.device-scan-ray i{right:3%!important;width:11px!important;height:11px!important;top:-4px!important;background:#ecfcff!important;box-shadow:0 0 8px #9deeff,0 0 28px #45d2ff!important;}
.ray-right{width:58%!important}.ray-left{width:43%!important}.ray-up{width:49%!important}.ray-down{width:52%!important}
.about-signal-field.is-active .ray-right{animation:metronWarehouseRay 3.4s 0s ease-in-out infinite!important}.about-signal-field.is-active .ray-left{animation:metronWarehouseRay 3.4s .42s ease-in-out infinite!important}.about-signal-field.is-active .ray-up{animation:metronWarehouseRay 3.4s .84s ease-in-out infinite!important}.about-signal-field.is-active .ray-down{animation:metronWarehouseRay 3.4s 1.26s ease-in-out infinite!important}
@keyframes metronWarehouseRay{0%,100%{opacity:.30;clip-path:inset(0 78% 0 0)}18%{opacity:1;clip-path:inset(0 46% 0 0)}52%{opacity:.95;clip-path:inset(0 0 0 0)}76%{opacity:.44;clip-path:inset(0 0 0 0)}}
.device-wifi{opacity:.58!important;width:150px!important;height:116px!important;filter:drop-shadow(0 0 9px rgba(86,222,255,.9))!important;}
.device-wifi i{border-width:3px!important;border-top-color:#c9f5ff!important;}
.device-wifi b{width:10px!important;height:10px!important;background:#e9fcff!important;box-shadow:0 0 22px #54d9ff!important;}
.about-signal-field.is-active .device-wifi{animation:metronWifiBroadcast 2.4s ease-in-out infinite!important}
@keyframes metronWifiBroadcast{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.91)}48%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.spatial-pulse{display:none!important;}
@media(max-width:980px){.intro-section#about::after{background:linear-gradient(180deg,rgba(4,22,31,.18),rgba(7,25,35,.76) 54%,#f8faf8 58%),url("../images/warehouse-scan-stage.webp") center top/100% 58% no-repeat!important}.intro-section#about{background:linear-gradient(180deg,#071923 0 58%,#f8faf8 58% 100%)!important}.about-signal-field,.about-signal-field.is-pinned{width:100%!important;height:58%!important}}

/* =========================================================
   METRON 4.66.21 — reference Protection Zone stage
   Background artwork intentionally contains NO device and NO text card.
   The existing WebGL device and existing right-side content remain untouched.
   ========================================================= */
.intro-section#about{
  background:#eef8fd!important;
  isolation:isolate;
}
.intro-section#about::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:url("../images/protection-zone-stage.webp") center center/cover no-repeat!important;
  filter:none!important;
  opacity:1!important;
  clip-path:none!important;
}
.intro-section#about::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(238,248,253,0) 0 55%,rgba(246,250,250,.42) 63%,rgba(248,250,248,.88) 74%,rgba(248,250,248,.98) 100%)!important;
  opacity:1!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.intro-section#about .about-story-card{
  position:relative!important;
  z-index:8!important;
  background:rgba(255,255,255,.965)!important;
  box-shadow:0 26px 75px rgba(49,83,101,.13)!important;
  backdrop-filter:blur(3px)!important;
}
.about-signal-field,.about-signal-field.is-pinned{
  width:61%!important;height:100%!important;z-index:6!important;
  overflow:visible!important;background:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
/* Retire all previous warehouse/beam/wifi experiments for this scene. */
.about-signal-field .spatial-scan-haze,
.about-signal-field .device-scan-origin,
.about-signal-field .device-scan-ray,
.about-signal-field .device-wifi,
.about-signal-field .spatial-pulse{display:none!important;animation:none!important;}
.protection-gas{
  position:absolute;z-index:7;width:82px;height:82px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(226,241,249,.58);
  box-shadow:inset 0 0 28px rgba(255,255,255,.68),0 10px 34px rgba(61,128,164,.08);
  backdrop-filter:blur(5px);
  color:#25495c;opacity:.92;
  animation:metronProtectionFloat 6.8s ease-in-out infinite;
}
.protection-gas strong{font-size:21px;line-height:1;font-weight:650;letter-spacing:-.03em;}
.gas-co2{left:11%;top:27%;animation-delay:-1.2s}.gas-h2s{left:8%;top:53%;animation-delay:-3.8s}
.gas-ch4{left:38%;top:17%;animation-delay:-2.4s}.gas-voc{left:49%;top:35%;animation-delay:-5.1s}.gas-pm{left:52%;top:58%;animation-delay:-.6s}
@keyframes metronProtectionFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@media(max-width:980px){
  .intro-section#about{background:#eef8fd!important;}
  .intro-section#about::after{background:url("../images/protection-zone-stage.webp") 38% top/auto 60% no-repeat!important;}
  .intro-section#about::before{background:linear-gradient(180deg,rgba(238,248,253,0) 0 51%,rgba(248,250,248,.95) 59%,#f8faf8 70%)!important;}
  .about-signal-field,.about-signal-field.is-pinned{width:100%!important;height:58%!important;}
  .protection-gas{transform:scale(.82);transform-origin:center;}
}
@media(prefers-reduced-motion:reduce){.protection-gas{animation:none!important;}}


/* =========================================================
   METRON 4.66.22 — Sensing -> Connected World scroll chapter
   Device materials are intentionally untouched in this release.
   ========================================================= */
.intro-section#about{background:linear-gradient(180deg,#f8fcfd 0%,#f4fafb 46%,#071922 72%,#06141c 100%)!important;isolation:isolate;overflow:hidden!important;}
.intro-section#about::before,.intro-section#about::after{content:none!important;display:none!important;background:none!important;}
.intro-section#about .about-story-card{position:sticky!important;top:10vh!important;align-self:flex-start!important;z-index:12!important;background:rgba(255,255,255,.965)!important;box-shadow:0 28px 80px rgba(34,61,69,.12)!important;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .55s ease!important;}
.intro-section#about.world-phase .about-story-card{opacity:0!important;transform:translate3d(70px,-20px,0) scale(.97)!important;filter:blur(7px)!important;pointer-events:none!important;}
.about-signal-field,.about-signal-field.is-pinned{display:block!important;position:fixed!important;left:0!important;top:0!important;width:61vw!important;height:100vh!important;z-index:6!important;overflow:visible!important;background:none!important;transition:opacity .5s ease,filter .5s ease!important;}
.intro-section#about.world-phase .about-signal-field{opacity:0!important;filter:blur(8px)!important;}
.sense-halo{position:absolute;left:42%;top:50%;width:19vw;aspect-ratio:1;border:1px solid rgba(59,199,231,.26);border-radius:50%;transform:translate(-50%,-50%) scale(.45);opacity:0;box-shadow:0 0 34px rgba(50,194,225,.055),inset 0 0 30px rgba(64,209,236,.035);}
.sense-halo::after{content:"";position:absolute;inset:8%;border:1px solid rgba(101,216,239,.14);border-radius:50%;}
.about-signal-field.is-active .halo-a{animation:metronSenseWave 3.8s 0s ease-out infinite}.about-signal-field.is-active .halo-b{animation:metronSenseWave 3.8s 1.25s ease-out infinite}.about-signal-field.is-active .halo-c{animation:metronSenseWave 3.8s 2.5s ease-out infinite}
@keyframes metronSenseWave{0%{opacity:0;transform:translate(-50%,-50%) scale(.38)}12%{opacity:.68}72%{opacity:.16}100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}}
.sense-node{position:absolute;width:7px;height:7px;border-radius:50%;background:#c9f7ff;box-shadow:0 0 0 5px rgba(58,199,230,.08),0 0 18px rgba(40,191,226,.7);opacity:.5;animation:metronSenseNode 2.8s ease-in-out infinite}.node-a{left:17%;top:37%}.node-b{left:23%;top:67%;animation-delay:-.7s}.node-c{left:56%;top:27%;animation-delay:-1.4s}.node-d{left:62%;top:63%;animation-delay:-2.1s}@keyframes metronSenseNode{50%{opacity:1;transform:scale(1.55)}}
.sense-return{position:absolute;left:18%;top:67%;width:24%;height:1px;transform-origin:right center;transform:rotate(-17deg);background:linear-gradient(90deg,transparent,rgba(60,200,232,.28),rgba(116,226,246,.75));filter:drop-shadow(0 0 5px rgba(57,202,233,.55));opacity:.42;}
.connected-world{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transform:scale(1.035);transition:opacity .75s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);overflow:hidden;background:radial-gradient(circle at 50% 56%,rgba(44,124,143,.28),transparent 31%),linear-gradient(180deg,#0a2632 0%,#071b25 55%,#06141c 100%);}
.intro-section#about.world-phase .connected-world{opacity:1;transform:scale(1)}
.connected-world-atmosphere{position:absolute;inset:0;background:radial-gradient(circle at 14% 68%,rgba(87,169,81,.19),transparent 19%),radial-gradient(circle at 34% 49%,rgba(193,146,68,.12),transparent 17%),radial-gradient(circle at 63% 42%,rgba(81,138,155,.20),transparent 22%),radial-gradient(circle at 84% 63%,rgba(111,91,60,.18),transparent 20%);}
.connected-world-grid{position:absolute;inset:45% -10% -15%;transform:perspective(600px) rotateX(63deg);transform-origin:center top;background-image:linear-gradient(rgba(72,200,226,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(72,200,226,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,black 24%,black 70%,transparent);}
.world-kicker{position:absolute;left:7.5%;top:14%;font-size:13px;font-weight:800;letter-spacing:.18em;color:#a9c64f}.world-title{position:absolute;left:7.5%;top:18%;font-size:clamp(38px,4.6vw,76px);line-height:.94;letter-spacing:-.055em;font-weight:850;color:#f7fbf7;text-shadow:0 10px 35px rgba(0,0,0,.25)}
.world-network{position:absolute;inset:0}.world-node{position:absolute;display:flex;align-items:center;gap:10px;color:#eaf8fb;font-size:13px;font-weight:700;letter-spacing:.01em;opacity:.2;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}.world-node i{width:11px;height:11px;border:2px solid #a9efff;border-radius:50%;background:#55d5f1;box-shadow:0 0 0 8px rgba(71,204,234,.08),0 0 26px rgba(68,208,238,.72)}
.world-agri{left:12%;top:67%}.world-food{left:33%;top:57%}.world-build{left:39%;top:36%}.world-oil{left:70%;top:32%}.world-store{left:69%;top:59%}.world-env{left:82%;top:72%}
.intro-section#about.world-phase .world-node{opacity:1;transform:none}.intro-section#about.world-phase .world-food{transition-delay:.16s}.intro-section#about.world-phase .world-build{transition-delay:.32s}.intro-section#about.world-phase .world-oil{transition-delay:.48s}.intro-section#about.world-phase .world-store{transition-delay:.64s}.intro-section#about.world-phase .world-env{transition-delay:.8s}
.world-link{position:absolute;height:1px;background:linear-gradient(90deg,rgba(81,215,243,.18),rgba(125,230,249,.82),rgba(81,215,243,.18));transform-origin:left center;opacity:.16;filter:drop-shadow(0 0 5px rgba(65,210,239,.55))}.link-1{left:13%;top:67%;width:23%;transform:rotate(-24deg)}.link-2{left:34%;top:57%;width:15%;transform:rotate(-49deg)}.link-3{left:40%;top:36%;width:31%;transform:rotate(-3deg)}.link-4{left:71%;top:33%;width:27%;transform:rotate(58deg)}.link-5{left:70%;top:59%;width:16%;transform:rotate(28deg)}
.intro-section#about.world-phase .world-link{animation:metronNetworkFlow 2.8s ease-in-out infinite}@keyframes metronNetworkFlow{50%{opacity:.88;filter:drop-shadow(0 0 9px rgba(73,217,245,.9))}}
@media(max-width:980px){.intro-section#about .about-story-card{position:relative!important;top:auto!important}.about-signal-field,.about-signal-field.is-pinned{position:absolute!important;width:100%!important;height:58vh!important}.sense-halo{left:50%;top:44%;width:44vw}.connected-world{top:54%;}.world-title{font-size:36px}.world-node{font-size:10px}.world-env{left:68%}}
@media(prefers-reduced-motion:reduce){.sense-halo,.sense-node,.world-link{animation:none!important}.connected-world,.world-node,.about-story-card{transition:none!important}}


/* =========================================================
   METRON 4.66.24 — production sensing + Connected World
   ========================================================= */
.intro-section#about{min-height:215vh!important;background:linear-gradient(180deg,#f7fbfc 0%,#f3f9fa 49%,#071a22 51%,#071a22 100%)!important;overflow:hidden!important}
.about-signal-field{z-index:8!important;opacity:1;pointer-events:none}
.sense-halo{border-color:rgba(37,174,216,.48)!important;box-shadow:0 0 42px rgba(32,177,216,.13),inset 0 0 35px rgba(55,196,226,.08)!important}
.sense-orbit{position:absolute;left:34%;top:50%;border:1.5px solid rgba(39,173,214,.34);border-radius:50%;transform:translate(-50%,-50%) rotate(-9deg);opacity:.92;filter:drop-shadow(0 0 7px rgba(55,193,224,.22))}
.orbit-a{width:44vw;height:29vw}.orbit-b{width:33vw;height:21vw;transform:translate(-50%,-50%) rotate(17deg);border-style:dashed;opacity:.58}
.sense-chip{position:absolute;display:flex;flex-direction:column;min-width:88px;padding:10px 13px;border:1px solid rgba(43,156,188,.28);border-radius:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(37,94,108,.11),0 0 0 5px rgba(78,199,225,.035);color:#28414a;opacity:1;animation:metronChipFloat 4.8s ease-in-out infinite}
.sense-chip b{font-size:18px;line-height:1;font-weight:800}.sense-chip span{margin-top:5px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#76909a;font-weight:700}.chip-ch4{left:10%;top:27%}.chip-co2{left:8%;top:59%;animation-delay:-1.2s}.chip-nh3{left:50%;top:24%;animation-delay:-2.4s}.chip-env{left:53%;top:67%;animation-delay:-3.6s}
@keyframes metronChipFloat{50%{transform:translateY(-7px);box-shadow:0 16px 34px rgba(37,94,108,.14),0 0 0 7px rgba(78,199,225,.045)}}
.sense-wifi{position:absolute;left:43%;top:17%;width:66px;height:48px;opacity:.9;filter:drop-shadow(0 0 8px rgba(45,181,220,.3))}
.sense-wifi i{position:absolute;left:50%;bottom:5px;border:2px solid rgba(34,161,205,.78);border-color:rgba(34,161,205,.78) transparent transparent transparent;border-radius:50%;transform:translateX(-50%);animation:metronWifiPulse 2.4s ease-out infinite}.sense-wifi i:nth-child(1){width:22px;height:22px}.sense-wifi i:nth-child(2){width:40px;height:40px;animation-delay:.22s}.sense-wifi i:nth-child(3){width:58px;height:58px;animation-delay:.44s}.sense-wifi b{position:absolute;left:50%;bottom:4px;width:6px;height:6px;border-radius:50%;background:#28a9d2;transform:translateX(-50%);box-shadow:0 0 10px rgba(40,169,210,.75)}
@keyframes metronWifiPulse{0%,100%{opacity:.25}45%{opacity:1}}

.connected-world{z-index:10!important;background:#071a22 url("../images/connected-world-panorama-v5.webp") center center/cover no-repeat!important}
.connected-world::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,20,27,.78) 0%,rgba(3,20,27,.44) 34%,rgba(3,20,27,.24) 63%,rgba(3,20,27,.38) 100%),linear-gradient(180deg,rgba(4,22,29,.18),rgba(4,22,29,.50));pointer-events:none}
.world-industry-stage{display:none!important}
.connected-world-atmosphere{z-index:2!important;background:radial-gradient(circle at 48% 54%,rgba(42,191,220,.13),transparent 40%)!important}
.connected-world-grid{z-index:3!important;opacity:.20!important}
.world-kicker,.world-title,.world-network{z-index:6!important}
.world-kicker{top:9%!important;color:#d0e96f!important;text-shadow:0 2px 12px rgba(0,0,0,.72)}
.world-title{top:13%!important;max-width:580px;font-size:clamp(42px,4.3vw,72px)!important;text-shadow:0 8px 30px rgba(0,0,0,.72)!important}
.world-node{padding:8px 11px;border-radius:999px;background:rgba(4,24,31,.68);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.24);text-shadow:0 2px 8px rgba(0,0,0,.75)}
.world-link{height:2px!important;opacity:.34!important}

@media(max-width:980px){
  .intro-section#about{min-height:190vh!important}
  .intro-section#about .about-story-card{position:absolute!important;left:5%!important;right:5%!important;top:5vh!important;width:auto!important;max-width:none!important;padding:26px 24px!important;z-index:12!important}
  .about-signal-field,.about-signal-field.is-pinned{position:absolute!important;inset:0!important;width:100%!important;height:100vh!important;z-index:8!important}
  .sense-halo{left:50%!important;top:60%!important;width:52vw!important}
  .sense-orbit{left:50%!important;top:60%!important}.orbit-a{width:88vw;height:62vw}.orbit-b{width:68vw;height:48vw}
  .sense-wifi{left:calc(50% - 33px)!important;top:39%!important}
  .sense-chip{display:flex!important;min-width:0!important;width:112px!important;padding:8px 10px!important;border-radius:14px!important}.sense-chip b{font-size:15px!important}.sense-chip span{font-size:8px!important}
  .chip-ch4{left:5%!important;top:48%!important}.chip-co2{left:5%!important;top:68%!important}.chip-nh3{left:auto!important;right:5%!important;top:48%!important}.chip-env{left:auto!important;right:5%!important;top:68%!important}
  .connected-world{top:50%!important;background-position:center center!important}
  .connected-world::before{background:linear-gradient(180deg,rgba(3,20,27,.56),rgba(3,20,27,.30) 42%,rgba(3,20,27,.55))}
  .world-kicker{left:6%!important;top:6%!important}.world-title{left:6%!important;top:10%!important;font-size:clamp(30px,8vw,44px)!important;max-width:88vw!important}
  .world-network{inset:0!important}.world-node{font-size:10px!important;padding:6px 8px!important}.world-node i{width:8px!important;height:8px!important}
  .world-agri{left:5%!important;top:54%!important}.world-food{left:5%!important;top:65%!important}.world-build{left:5%!important;top:76%!important}.world-oil{left:auto!important;right:5%!important;top:54%!important}.world-store{left:auto!important;right:5%!important;top:65%!important}.world-env{left:auto!important;right:5%!important;top:76%!important}
  .world-link{display:none!important}.connected-world-grid{opacity:.10!important}
}
@media(max-width:560px){
  .intro-section#about .about-story-card h2{font-size:clamp(34px,10vw,52px)!important;line-height:.92!important}
  .intro-section#about .about-story-card p{font-size:14px!important;line-height:1.55!important}
  .sense-chip{width:100px!important}.chip-ch4,.chip-co2{left:4%!important}.chip-nh3,.chip-env{right:4%!important}
  .connected-world{background-position:58% center!important}
}
@media(prefers-reduced-motion:reduce){.sense-chip,.sense-wifi i{animation:none!important}}


/* =========================================================
   METRON 4.66.25 — sensing completeness + seamless world handoff
   Material code is deliberately untouched in this patch.
   ========================================================= */
/* Remove the hard 49/51% color seam. The dark world itself now crossfades
   over the light sensing chapter, so there is never a visible section line. */
.intro-section#about{
  background:linear-gradient(180deg,#f7fbfc 0%,#f4fafb 42%,#eef6f7 50%,#dcebed 57%,#9fb8bb 64%,#34525a 72%,#0a2028 82%,#071a22 100%)!important;
}

/* The sensing field must read as a complete composition, not one orphan T/RH chip. */
.intro-section#about:not(.world-phase) .about-signal-field{
  opacity:1!important;filter:none!important;visibility:visible!important;
}
.intro-section#about:not(.world-phase) .sense-halo,
.intro-section#about:not(.world-phase) .sense-node,
.intro-section#about:not(.world-phase) .sense-orbit,
.intro-section#about:not(.world-phase) .sense-wifi,
.intro-section#about:not(.world-phase) .sense-chip{visibility:visible!important;opacity:1!important;}
.intro-section#about:not(.world-phase) .sense-chip{display:flex!important;z-index:14!important;}
.intro-section#about:not(.world-phase) .chip-ch4{left:8%!important;right:auto!important;top:25%!important;}
.intro-section#about:not(.world-phase) .chip-co2{left:7%!important;right:auto!important;top:61%!important;}
.intro-section#about:not(.world-phase) .chip-nh3{left:48%!important;right:auto!important;top:23%!important;}
.intro-section#about:not(.world-phase) .chip-env{left:49%!important;right:auto!important;top:66%!important;}
.intro-section#about:not(.world-phase) .sense-wifi{left:40%!important;top:16%!important;}

/* Connected World is a viewport scene, not a 215vh background canvas.
   Keeping it fixed while active prevents background-size:cover from zooming
   the panorama to the height of the entire scroll chapter. */
.connected-world{
  position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
  background-image:url("../images/connected-world-panorama-v5.webp")!important;
  background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important;
  opacity:0!important;transform:scale(1.012)!important;
  transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform 1.35s cubic-bezier(.2,.8,.2,1)!important;
}
.intro-section#about.world-phase .connected-world{opacity:1!important;transform:scale(1)!important;}
/* soften both top and bottom edges of the full-viewport scene */
.connected-world::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(247,251,252,.30) 0%,rgba(247,251,252,0) 12%,rgba(7,26,34,0) 88%,rgba(7,26,34,.18) 100%);}

@media(max-width:980px){
  .intro-section#about{min-height:205vh!important;background:linear-gradient(180deg,#f7fbfc 0%,#f2f8f9 44%,#dcebed 56%,#547079 69%,#0b222b 82%,#071a22 100%)!important;}
  .intro-section#about:not(.world-phase) .about-signal-field{height:100vh!important;}
  .intro-section#about:not(.world-phase) .sense-halo{left:50%!important;top:61%!important;width:58vw!important;}
  .intro-section#about:not(.world-phase) .sense-orbit{left:50%!important;top:61%!important;}
  .intro-section#about:not(.world-phase) .sense-wifi{left:calc(50% - 33px)!important;top:40%!important;}
  .intro-section#about:not(.world-phase) .chip-ch4{left:4%!important;top:49%!important;}
  .intro-section#about:not(.world-phase) .chip-co2{left:4%!important;top:70%!important;}
  .intro-section#about:not(.world-phase) .chip-nh3{left:auto!important;right:4%!important;top:49%!important;}
  .intro-section#about:not(.world-phase) .chip-env{left:auto!important;right:4%!important;top:70%!important;}
  .connected-world{top:0!important;background-size:cover!important;background-position:52% center!important;}
}
@media(max-width:560px){.connected-world{background-position:54% center!important;}}


/* =========================================================
   METRON 4.66.26 — resolved sensing chapter + world/platform dissolve
   ========================================================= */
/* The sensing UI is fixed for choreography, so it must be explicitly gated.
   This prevents T/RH (and every other chip) leaking into Hero/previous sections. */
.intro-section#about .about-signal-field,
.intro-section#about:not(.world-phase) .about-signal-field{
  opacity:0!important;visibility:hidden!important;filter:blur(8px)!important;
  transition:opacity .55s ease,filter .7s ease,visibility 0s linear .55s!important;
}
.intro-section#about.sensing-active .about-signal-field{
  opacity:1!important;visibility:visible!important;filter:none!important;
  transition:opacity .65s ease,filter .75s ease,visibility 0s!important;
}
.intro-section#about.sensing-active .sense-halo,
.intro-section#about.sensing-active .sense-node,
.intro-section#about.sensing-active .sense-orbit,
.intro-section#about.sensing-active .sense-wifi,
.intro-section#about.sensing-active .sense-chip{visibility:visible!important;}

/* Act With Confident is a complete sensing composition: a quiet technical
   protection field behind the physical unit, with four balanced measurement
   chips rather than one orphan label. */
.intro-section#about.sensing-active{
  background:
    radial-gradient(circle at 27% 47%,rgba(61,199,229,.12),transparent 18%),
    radial-gradient(circle at 27% 47%,rgba(61,199,229,.07),transparent 34%),
    linear-gradient(115deg,#f8fcfd 0%,#f2f9fa 54%,#eef6f7 100%)!important;
}
.intro-section#about.sensing-active::after{
  content:""!important;display:block!important;position:fixed!important;left:3vw!important;top:8vh!important;
  width:55vw!important;height:84vh!important;z-index:2!important;pointer-events:none!important;
  border:1px solid rgba(43,177,210,.10)!important;border-radius:50%!important;
  background:radial-gradient(circle at 50% 52%,rgba(65,200,230,.075),transparent 54%)!important;
  box-shadow:inset 0 0 80px rgba(72,196,221,.04),0 0 80px rgba(72,196,221,.025)!important;
}
.intro-section#about.sensing-active::before{
  content:""!important;display:block!important;position:fixed!important;left:5vw!important;top:11vh!important;
  width:51vw!important;height:78vh!important;z-index:2!important;pointer-events:none!important;
  border:1px dashed rgba(45,173,205,.12)!important;border-radius:50%!important;background:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;opacity:1!important;
}
.intro-section#about.sensing-active .chip-ch4{left:7%!important;top:30%!important;}
.intro-section#about.sensing-active .chip-co2{left:8%!important;top:68%!important;}
.intro-section#about.sensing-active .chip-nh3{left:47%!important;top:27%!important;}
.intro-section#about.sensing-active .chip-env{left:48%!important;top:68%!important;}
.intro-section#about.sensing-active .sense-wifi{left:39%!important;top:18%!important;}

/* Connected World enters and exits by opacity, never by a hard section cut. */
.connected-world,
.intro-section#about.world-phase .connected-world{
  opacity:calc(var(--world-in,0) * (1 - var(--world-exit,0)))!important;
  transform:scale(calc(1.012 - (var(--world-in,0) * .012)))!important;
  transition:none!important;
}
/* A light veil grows over the world while Monitoring Platform approaches.
   It creates the same layered dissolve used at the Act -> World handoff. */
.intro-section#about .connected-world::after{
  background:
    linear-gradient(180deg,rgba(247,251,252,.18) 0%,rgba(247,251,252,0) 13%,rgba(255,255,255,0) 72%,rgba(255,255,255,calc(var(--world-exit,0) * .96)) 100%)!important;
}
.products-section#products{
  position:relative!important;z-index:11!important;
  background:
    radial-gradient(circle at 78% 34%,rgba(169,198,79,.12),transparent 22rem),
    rgba(255,255,255,.985)!important;
  box-shadow:0 -45px 90px rgba(255,255,255,.72)!important;
}
.products-section#products::before{
  content:"";position:absolute;left:0;right:0;top:-18vh;height:18vh;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.98));
}

@media(max-width:980px){
  .intro-section#about.sensing-active::after{left:4vw!important;top:35vh!important;width:92vw!important;height:50vh!important;}
  .intro-section#about.sensing-active::before{left:8vw!important;top:38vh!important;width:84vw!important;height:44vh!important;}
  .intro-section#about.sensing-active .chip-ch4{left:4%!important;top:49%!important;}
  .intro-section#about.sensing-active .chip-co2{left:4%!important;top:70%!important;}
  .intro-section#about.sensing-active .chip-nh3{left:auto!important;right:4%!important;top:49%!important;}
  .intro-section#about.sensing-active .chip-env{left:auto!important;right:4%!important;top:70%!important;}
  .intro-section#about.sensing-active .sense-wifi{left:calc(50% - 33px)!important;top:40%!important;}
}


/* =========================================================
   METRON 4.66.27 — Act sensing composition visibility lock
   ========================================================= */
/* Hard reset legacy positioning while this chapter is active. The field owns
   the LEFT visual half of the viewport; nothing can be clipped by old offsets. */
.intro-section#about.sensing-active .about-signal-field,
.intro-section#about.sensing-active .about-signal-field.is-active{
  display:block!important;position:fixed!important;inset:0 auto 0 0!important;
  left:0!important;top:0!important;width:60vw!important;height:100vh!important;
  opacity:1!important;visibility:visible!important;filter:none!important;
  transform:none!important;overflow:visible!important;z-index:8!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.intro-section#about.sensing-active .sense-halo{left:45%!important;top:50%!important;width:25vw!important;opacity:.62!important;visibility:visible!important;}
.intro-section#about.sensing-active .halo-a{transform:translate(-50%,-50%) scale(.72)!important}
.intro-section#about.sensing-active .halo-b{transform:translate(-50%,-50%) scale(1.02)!important}
.intro-section#about.sensing-active .halo-c{transform:translate(-50%,-50%) scale(1.34)!important}
.intro-section#about.sensing-active .sense-node{display:block!important;opacity:.85!important;visibility:visible!important;}
.intro-section#about.sensing-active .sense-orbit{display:block!important;opacity:.58!important;visibility:visible!important;}
.intro-section#about.sensing-active .sense-chip{
  display:flex!important;position:absolute!important;width:112px!important;min-width:112px!important;
  opacity:1!important;visibility:visible!important;transform:none!important;z-index:16!important;
  background:rgba(255,255,255,.94)!important;border-color:rgba(42,167,201,.34)!important;
  box-shadow:0 12px 32px rgba(30,91,108,.12),0 0 0 5px rgba(70,196,226,.035)!important;
}
/* Four clean satellites around the product — deliberately away from the card. */
.intro-section#about.sensing-active .chip-ch4{left:8%!important;right:auto!important;top:28%!important;}
.intro-section#about.sensing-active .chip-co2{left:9%!important;right:auto!important;top:66%!important;}
.intro-section#about.sensing-active .chip-nh3{left:73%!important;right:auto!important;top:25%!important;}
.intro-section#about.sensing-active .chip-env{left:75%!important;right:auto!important;top:68%!important;}
.intro-section#about.sensing-active .sense-wifi{display:block!important;left:45%!important;top:15%!important;opacity:.9!important;visibility:visible!important;z-index:15!important;}
/* Fine technical crosshair gives the chapter a designed center without a photo. */
.intro-section#about.sensing-active .about-signal-field::before,
.intro-section#about.sensing-active .about-signal-field::after{content:"";position:absolute;pointer-events:none;z-index:3;opacity:.34}
.intro-section#about.sensing-active .about-signal-field::before{left:45%;top:17%;bottom:15%;width:1px;background:linear-gradient(transparent,rgba(58,183,215,.32),transparent)}
.intro-section#about.sensing-active .about-signal-field::after{top:50%;left:10%;right:6%;height:1px;background:linear-gradient(90deg,transparent,rgba(58,183,215,.28),transparent)}
@media(max-width:980px){
 .intro-section#about.sensing-active .about-signal-field,.intro-section#about.sensing-active .about-signal-field.is-active{position:absolute!important;inset:0!important;width:100%!important;height:100vh!important;}
 .intro-section#about.sensing-active .sense-halo{left:50%!important;top:57%!important;width:52vw!important;}
 .intro-section#about.sensing-active .chip-ch4{left:4%!important;top:43%!important}.intro-section#about.sensing-active .chip-co2{left:4%!important;top:67%!important}
 .intro-section#about.sensing-active .chip-nh3{left:auto!important;right:4%!important;top:43%!important}.intro-section#about.sensing-active .chip-env{left:auto!important;right:4%!important;top:67%!important}
 .intro-section#about.sensing-active .sense-wifi{left:50%!important;top:36%!important}
 .intro-section#about.sensing-active .about-signal-field::before{left:50%}.intro-section#about.sensing-active .about-signal-field::after{left:3%;right:3%;top:57%}
}
\n\n/* =========================================================\n   METRON 4.66.29 — calibrated Act -> Connected World handoff\n   ========================================================= */\n/* Wi-Fi originates at the real lower antenna tip, not the air inlet/filter. */\n.intro-section#about:not(.world-phase) .sense-wifi{left:36%!important;top:72%!important;}\n/* Make the chapter reveal scroll-proportional so the sensing layers do not vanish in one jump. */\n.intro-section#about.world-phase .connected-world{opacity:var(--world-in,0)!important;transform:scale(calc(1.035 - (var(--world-in,0) * .035)))!important;}\n.intro-section#about.world-phase .about-signal-field{opacity:calc(1 - var(--world-in,0))!important;filter:blur(calc(var(--world-in,0) * 5px))!important;}\n.intro-section#about.world-phase .about-story-card{opacity:calc(1 - var(--world-in,0))!important;transform:translate3d(calc(var(--world-in,0) * 46px),calc(var(--world-in,0) * -12px),0) scale(calc(1 - (var(--world-in,0) * .02)))!important;filter:blur(calc(var(--world-in,0) * 4px))!important;}\n@media(max-width:980px){\n  /* Mobile stays composition-first: no desktop left-edge push and Wi-Fi stays near the lower device zone. */\n  .intro-section#about:not(.world-phase) .sense-wifi{left:61%!important;top:74%!important;transform:translate(-50%,-50%) scale(.78)!important;}\n  .intro-section#about.world-phase .about-story-card{transform:none!important;filter:none!important;}\n}\n

/* =========================================================
   METRON 4.66.30 — long world chapter + true lower-antenna Wi-Fi
   ========================================================= */
@media(min-width:981px){
  /* More physical scroll distance: slower Act dissolve + a real Connected World hold. */
  .intro-section#about{min-height:285vh!important;}
  /* Highest-specificity anchor: the radio glyph belongs at the LOWER antenna tip. */
  #about.sensing-active:not(.world-phase) #aboutConnectVisual .sense-wifi{
    left:36.5%!important;top:76%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%) scale(.88)!important;
  }
}
@media(max-width:980px){
  .intro-section#about{min-height:235vh!important;}
  #about.sensing-active:not(.world-phase) #aboutConnectVisual .sense-wifi{
    left:64%!important;top:73%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%) scale(.72)!important;
  }
}


/* =========================================================
   METRON 4.66.31 — calibrated cover + antenna scan + long cinematic world
   ========================================================= */
@media(min-width:981px){
  /* Give both the layered Act→World dissolve and the World hold real scroll distance. */
  .intro-section#about{min-height:390vh!important;}
  /* Anchor the radio glyph at the actual lower antenna tip (user-marked location). */
  #about.sensing-active:not(.world-phase) .about-signal-field#aboutConnectVisual > .sense-wifi{
    left:61.5%!important;top:77%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%) scale(.78)!important;
  }
  /* Scanning field: slow breathing rings + phase-shifted orbit movement, never a static target. */
  #about.sensing-active .about-signal-field#aboutConnectVisual > .sense-halo{transform-origin:center center!important;will-change:transform,opacity;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-a{animation:metronScanBreathA 4.8s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-b{animation:metronScanBreathB 5.8s  -.9s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-c{animation:metronScanBreathC 7.2s -1.7s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .orbit-a{animation:metronOrbitDriftA 13s linear infinite!important;transform-origin:center center!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .orbit-b{animation:metronOrbitDriftB 17s linear infinite!important;transform-origin:center center!important;}
}
@keyframes metronScanBreathA{0%,100%{transform:translate(-50%,-50%) scale(.70);opacity:.34}50%{transform:translate(-50%,-50%) scale(.82);opacity:.72}}
@keyframes metronScanBreathB{0%,100%{transform:translate(-50%,-50%) scale(.98);opacity:.24}50%{transform:translate(-50%,-50%) scale(1.10);opacity:.58}}
@keyframes metronScanBreathC{0%,100%{transform:translate(-50%,-50%) scale(1.28);opacity:.18}50%{transform:translate(-50%,-50%) scale(1.42);opacity:.46}}
@keyframes metronOrbitDriftA{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes metronOrbitDriftB{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@media(max-width:980px){
  .intro-section#about{min-height:285vh!important;}
  #about.sensing-active:not(.world-phase) .about-signal-field#aboutConnectVisual > .sense-wifi{
    left:63%!important;top:73%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%) scale(.66)!important;
  }
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-a{animation:metronScanBreathA 5.4s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-b{animation:metronScanBreathB 6.4s -.8s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-c{animation:metronScanBreathC 7.6s -1.4s ease-in-out infinite!important;}
}
@media(prefers-reduced-motion:reduce){
  #about.sensing-active .sense-halo,#about.sensing-active .sense-orbit{animation:none!important;}
}

/* =========================================================
   METRON 4.66.32 — layered sensing/world weave + animated scan nodes
   ========================================================= */
@media(min-width:981px){
  /* Keep the Act visual alive while the panorama grows through it. */
  #about.world-phase .about-signal-field#aboutConnectVisual{
    opacity:calc(1 - (var(--world-in,0) * .88))!important;
    filter:blur(calc(var(--world-in,0) * 2.2px))!important;
  }
  #about.world-phase .about-story-card{
    opacity:calc(1 - (var(--world-in,0) * 1.04))!important;
    transform:translate3d(calc(var(--world-in,0) * 32px),calc(var(--world-in,0) * -8px),0) scale(calc(1 - (var(--world-in,0) * .012)))!important;
    filter:blur(calc(var(--world-in,0) * 2.4px))!important;
  }
  /* Three translucent atmospheric layers make the handoff read as interwoven
     planes instead of a conventional cross-fade. */
  #about.world-phase .connected-world{
    -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.18) 0%,#000 22%,#000 100%)!important;
    mask-image:linear-gradient(105deg,rgba(0,0,0,.18) 0%,#000 22%,#000 100%)!important;
  }
  #about.world-phase .connected-world-atmosphere::before,
  #about.world-phase .connected-world-atmosphere::after{
    content:"";position:absolute;inset:-8%;pointer-events:none;
    border-radius:45%;mix-blend-mode:screen;will-change:transform,opacity;
  }
  #about.world-phase .connected-world-atmosphere::before{
    background:radial-gradient(ellipse at 27% 49%,rgba(126,224,239,.18),rgba(91,183,210,.07) 34%,transparent 67%);
    opacity:calc((1 - var(--world-in,0)) * .72);animation:metronWorldVeilA 8.5s ease-in-out infinite;
  }
  #about.world-phase .connected-world-atmosphere::after{
    background:radial-gradient(ellipse at 46% 53%,rgba(220,245,248,.15),rgba(89,191,216,.05) 38%,transparent 69%);
    opacity:calc((1 - var(--world-in,0)) * .58);animation:metronWorldVeilB 10.5s ease-in-out infinite;
  }
  /* The three small scan nodes are active telemetry points, not static dots. */
  #about.sensing-active .sense-node{will-change:transform,opacity,box-shadow;animation:metronTelemetryNode 2.9s ease-in-out infinite!important;}
  #about.sensing-active .node-b{animation-delay:-.72s!important}
  #about.sensing-active .node-c{animation-delay:-1.44s!important}
  #about.sensing-active .node-d{animation-delay:-2.16s!important}
}
@keyframes metronTelemetryNode{
  0%,100%{opacity:.42;transform:scale(.72);box-shadow:0 0 0 3px rgba(58,199,230,.05),0 0 10px rgba(40,191,226,.32)}
  45%{opacity:1;transform:scale(1.42);box-shadow:0 0 0 10px rgba(58,199,230,.08),0 0 25px rgba(40,191,226,.78)}
  62%{opacity:.72;transform:scale(.96);box-shadow:0 0 0 16px rgba(58,199,230,0),0 0 16px rgba(40,191,226,.48)}
}
@keyframes metronWorldVeilA{0%,100%{transform:translate3d(-2%,0,0) scale(.96)}50%{transform:translate3d(4%,-2%,0) scale(1.04)}}
@keyframes metronWorldVeilB{0%,100%{transform:translate3d(3%,1%,0) scale(1.03)}50%{transform:translate3d(-3%,2%,0) scale(.97)}}
@media(prefers-reduced-motion:reduce){
  #about.sensing-active .sense-node,#about.world-phase .connected-world-atmosphere::before,#about.world-phase .connected-world-atmosphere::after{animation:none!important;}
}

/* =========================================================
   METRON 4.66.33 — restore 4.66.25 seamless chapter seams
   Only transition geometry/timing is borrowed from 4.66.25.
   Current model, materials, sensing layout and positioning remain intact.
   ========================================================= */
@media(min-width:981px){
  /* Give Connected World a real dwell chapter rather than a short plateau. */
  .intro-section#about{min-height:360vh!important;
    background:linear-gradient(180deg,#f7fbfc 0%,#f4fafb 42%,#eef6f7 50%,#dcebed 57%,#9fb8bb 64%,#34525a 72%,#0a2028 82%,#071a22 100%)!important;}

  /* 4.66.25 seam: the panorama is a fixed viewport plane with soft edges.
     Do not wash the entire world in white with scroll-proportional opacity. */
  #about .connected-world{
    position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
    background-image:url("../images/connected-world-panorama-v5.webp")!important;
    background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important;
    opacity:0!important;transform:scale(1.012)!important;
    transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform 1.35s cubic-bezier(.2,.8,.2,1)!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  #about.world-phase:not(.platform-handoff) .connected-world{opacity:1!important;transform:scale(1)!important;}

  /* Sensing layers retreat as separate planes, reproducing the layered 4.66.25 handoff. */
  #about .about-signal-field#aboutConnectVisual{transition:opacity .92s cubic-bezier(.2,.7,.2,1),filter 1.05s ease!important;}
  #about.world-phase .about-signal-field#aboutConnectVisual{opacity:0!important;filter:blur(8px)!important;}
  #about .about-story-card{transition:opacity .85s ease,transform 1.05s cubic-bezier(.2,.8,.2,1),filter .95s ease!important;}
  #about.world-phase .about-story-card{opacity:0!important;transform:translate3d(70px,-20px,0) scale(.97)!important;filter:blur(7px)!important;}

  /* Soft edge, not a full-screen white veil. */
  #about .connected-world::after{content:""!important;position:absolute!important;inset:0!important;z-index:5!important;pointer-events:none!important;
    background:linear-gradient(180deg,rgba(247,251,252,.30) 0%,rgba(247,251,252,0) 12%,rgba(7,26,34,0) 88%,rgba(7,26,34,.18) 100%)!important;}

  /* Use the same layered vocabulary on the World -> Monitoring Platform seam. */
  #about.platform-handoff .connected-world{opacity:0!important;transform:scale(.992)!important;transition:opacity 1.05s cubic-bezier(.2,.7,.2,1),transform 1.25s cubic-bezier(.2,.8,.2,1)!important;}
  .products-section#products::before{top:-26vh!important;height:26vh!important;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(247,250,247,.18) 32%,rgba(255,255,255,.72) 72%,rgba(255,255,255,.985) 100%)!important;}

  /* Telemetry nodes: visible pulse ring + core pulse. This does not rely on
     subtle 7px scale changes, so the motion is readable at normal viewing size. */
  #about.sensing-active .sense-node{width:9px!important;height:9px!important;opacity:.92!important;animation:metronTelemetryCore 2.45s ease-in-out infinite!important;overflow:visible!important;}
  #about.sensing-active .sense-node::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:1.5px solid rgba(44,185,220,.72);border-radius:50%;transform:translate(-50%,-50%) scale(.8);opacity:.8;animation:metronTelemetryWave 2.45s ease-out infinite!important;}
  #about.sensing-active .node-b,#about.sensing-active .node-b::after{animation-delay:-.61s!important;}
  #about.sensing-active .node-c,#about.sensing-active .node-c::after{animation-delay:-1.22s!important;}
  #about.sensing-active .node-d,#about.sensing-active .node-d::after{animation-delay:-1.83s!important;}
}
@keyframes metronTelemetryCore{0%,100%{opacity:.58;box-shadow:0 0 0 4px rgba(58,199,230,.06),0 0 10px rgba(40,191,226,.35)}45%{opacity:1;box-shadow:0 0 0 7px rgba(58,199,230,.12),0 0 25px rgba(40,191,226,.92)}65%{opacity:.76;box-shadow:0 0 0 5px rgba(58,199,230,.07),0 0 15px rgba(40,191,226,.55)}}
@keyframes metronTelemetryWave{0%{transform:translate(-50%,-50%) scale(.75);opacity:.85}72%,100%{transform:translate(-50%,-50%) scale(4.6);opacity:0}}
@media(max-width:980px){
  /* Mobile keeps a longer, orderly chapter but avoids desktop fixed-layer choreography. */
  .intro-section#about{min-height:255vh!important;}
}
@media(prefers-reduced-motion:reduce){#about.sensing-active .sense-node,#about.sensing-active .sense-node::after{animation:none!important;}}


/* =========================================================
   METRON 4.66.34 — zero-effect Act -> Connected World boundary
   Per request: no fade, veil, mask, blur, weave or transitional overlay.
   Model choreography is intentionally untouched.
   ========================================================= */
@media(min-width:981px){
  #about .connected-world{
    transition:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  #about:not(.world-phase) .connected-world{opacity:0!important;transform:none!important;}
  #about.world-phase:not(.platform-handoff) .connected-world{opacity:1!important;transform:none!important;}
  #about .about-signal-field#aboutConnectVisual,
  #about .about-story-card{transition:none!important;filter:none!important;}
  #about.world-phase .about-signal-field#aboutConnectVisual{opacity:0!important;filter:none!important;}
  #about.world-phase .about-story-card{opacity:0!important;transform:none!important;filter:none!important;}
  #about.world-phase .connected-world-atmosphere::before,
  #about.world-phase .connected-world-atmosphere::after{display:none!important;content:none!important;animation:none!important;}
  #about .connected-world::after{display:none!important;content:none!important;background:none!important;}
}


/* =========================================================
   METRON 4.66.35 — physical scroll seam + readable graphite cover
   ========================================================= */
@media(min-width:981px){
  /* Connected World is now a real 100vh panel inside the document chapter.
     Its top edge physically scrolls into view; there is no fade/crossfade. */
  #about.intro-section{min-height:390vh!important;overflow:hidden!important;}
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase:not(.platform-handoff) .connected-world,
  #about.platform-handoff .connected-world{
    position:absolute!important;
    left:0!important;right:0!important;top:268vh!important;bottom:auto!important;
    width:100%!important;height:100vh!important;
    opacity:1!important;transform:none!important;transition:none!important;
    background-size:cover!important;background-position:center center!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  #about .connected-world::after{display:none!important;content:none!important;}

  /* Act layers stay intact until the panorama's physical top edge arrives. */
  #about .about-signal-field#aboutConnectVisual,
  #about .about-story-card{transition:none!important;filter:none!important;}

  /* The three concentric scan rings must visibly breathe, not read as artwork. */
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-a{
    animation:metronRingPulseA 3.4s ease-in-out infinite!important;
  }
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-b{
    animation:metronRingPulseB 4.2s -.85s ease-in-out infinite!important;
  }
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-c{
    animation:metronRingPulseC 5.1s -1.7s ease-in-out infinite!important;
  }
}
@keyframes metronRingPulseA{0%,100%{transform:translate(-50%,-50%) scale(.68);opacity:.36}50%{transform:translate(-50%,-50%) scale(.86);opacity:.78}}
@keyframes metronRingPulseB{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.26}50%{transform:translate(-50%,-50%) scale(1.14);opacity:.66}}
@keyframes metronRingPulseC{0%,100%{transform:translate(-50%,-50%) scale(1.22);opacity:.18}50%{transform:translate(-50%,-50%) scale(1.48);opacity:.52}}

@media(max-width:980px){
  /* Mobile: keep content orderly and use a normal in-document world panel too. */
  #about.intro-section{min-height:285vh!important;}
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase .connected-world{
    position:absolute!important;left:0!important;right:0!important;top:178vh!important;
    width:100%!important;height:100vh!important;opacity:1!important;transform:none!important;transition:none!important;
    background-size:cover!important;background-position:54% center!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #about.sensing-active .about-signal-field#aboutConnectVisual > .sense-halo{animation:none!important;}
}


/* =========================================================
   METRON 4.66.36 — soft physical world seam + stronger scan breathing
   ========================================================= */
@media(min-width:981px){
  /* Only soften the PHYSICAL TOP EDGE of Connected World. The panorama itself
     remains an in-document panel and never fades in as a whole. */
  #about .connected-world::before{
    content:""!important;display:block!important;position:absolute!important;
    left:0!important;right:0!important;top:-112px!important;height:156px!important;
    z-index:8!important;pointer-events:none!important;
    background:
      radial-gradient(72% 64px at 18% 100%,rgba(255,255,255,.98) 0 44%,rgba(255,255,255,.62) 60%,transparent 78%),
      radial-gradient(76% 72px at 62% 100%,rgba(255,255,255,.94) 0 42%,rgba(255,255,255,.52) 61%,transparent 80%),
      radial-gradient(58% 58px at 94% 100%,rgba(255,255,255,.90) 0 40%,rgba(255,255,255,.42) 62%,transparent 82%),
      linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 35%,rgba(255,255,255,.78) 68%,rgba(255,255,255,0) 100%)!important;
    opacity:1!important;
  }

  /* Deliberately stronger amplitude so the three circular scan fronts are
     unmistakably alive even behind the product. */
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-a{animation:metronRingPulseA36 2.75s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-b{animation:metronRingPulseB36 3.45s -.72s ease-in-out infinite!important;}
  #about.sensing-active .about-signal-field#aboutConnectVisual > .halo-c{animation:metronRingPulseC36 4.15s -1.38s ease-in-out infinite!important;}
}
@keyframes metronRingPulseA36{0%,100%{transform:translate(-50%,-50%) scale(.58);opacity:.28}50%{transform:translate(-50%,-50%) scale(.98);opacity:.92}}
@keyframes metronRingPulseB36{0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.20}50%{transform:translate(-50%,-50%) scale(1.28);opacity:.82}}
@keyframes metronRingPulseC36{0%,100%{transform:translate(-50%,-50%) scale(1.06);opacity:.14}50%{transform:translate(-50%,-50%) scale(1.62);opacity:.70}}

@media(max-width:980px){
  /* Mobile gets a compact seam without introducing horizontal overflow. */
  #about .connected-world::before{
    content:""!important;display:block!important;position:absolute!important;
    left:0!important;right:0!important;top:-58px!important;height:84px!important;z-index:8!important;pointer-events:none!important;
    background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.72) 62%,rgba(255,255,255,0))!important;
  }
}


/* =========================================================
   METRON 4.66.38 — v36-safe cover tone + v25-inspired physical world blend
   IMPORTANT: model choreography is untouched. The cover keeps every 4.66.36
   base color; only its emissive contribution is reduced by 5% in main.js.
   ========================================================= */
@media(min-width:981px){
  /* Remove the 4.66.36 white cloud/strip sitting on top of the panorama. */
  #about .connected-world::before{content:none!important;display:none!important;background:none!important;}

  /* Adapt the successful 4.66.25 tonal bridge to the newer PHYSICAL panel.
     The page behind the panorama approaches the sky tone before the image
     arrives, then approaches the next section's neutral gray after it leaves. */
  #about.intro-section{
    background:linear-gradient(to bottom,
      #f8fcfd 0,
      #f4fafb 242vh,
      #edf6f7 252vh,
      #d9e9ec 258vh,
      #bfd8df 263vh,
      #a9cbd7 268vh,
      #a9cbd7 274vh,
      #eef2f1 360vh,
      #f4f5f3 374vh,
      #f7f7f5 390vh
    )!important;
  }

  /* Blend only the physical picture edges. No opacity animation, no scene fade.
     The panorama remains fully present; its first/last pixels become transparent
     over a short feather so the matching background bridge can show through. */
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase:not(.platform-handoff) .connected-world,
  #about.platform-handoff .connected-world{
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0,
      rgba(0,0,0,.18) 2.2%,
      rgba(0,0,0,.62) 5.5%,
      #000 10.5%,
      #000 89.5%,
      rgba(0,0,0,.62) 94.5%,
      rgba(0,0,0,.18) 97.8%,
      transparent 100%)!important;
    mask-image:linear-gradient(to bottom,
      transparent 0,
      rgba(0,0,0,.18) 2.2%,
      rgba(0,0,0,.62) 5.5%,
      #000 10.5%,
      #000 89.5%,
      rgba(0,0,0,.62) 94.5%,
      rgba(0,0,0,.18) 97.8%,
      transparent 100%)!important;
    -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
    -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  }
}
@media(max-width:980px){
  #about .connected-world::before{content:none!important;display:none!important;background:none!important;}
  #about.intro-section{
    background:linear-gradient(to bottom,#f8fcfd 0%,#f4fafb 55%,#dbeaec 61%,#abcbd5 64%,#eef2f1 94%,#f7f7f5 100%)!important;
  }
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase .connected-world{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
    -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
  }
}

/* =========================================================
   METRON 4.66.39 — restrained world grade + compact Act gap
   The approved 4.66.38 top/bottom feather masks are intentionally untouched.
   ========================================================= */
@media(min-width:981px){
  /* Tone ONLY the panorama background artwork toward the site's soft neutral
     palette. background-blend-mode does not wash the labels/content above it. */
  #about .connected-world{
    background-image:
      linear-gradient(rgba(226,232,229,.20),rgba(219,226,224,.20)),
      url("../images/connected-world-panorama-v5.webp")!important;
    background-blend-mode:saturation,normal!important;
    /* Bring the physical panorama upward to remove the long empty white travel
       after the Act copy. No opacity/crossfade and no mask edits. */
    top:218vh!important;
  }
}
@media(max-width:980px){
  #about .connected-world{
    background-image:
      linear-gradient(rgba(226,232,229,.16),rgba(219,226,224,.16)),
      url("../images/connected-world-panorama-v5.webp")!important;
    background-blend-mode:saturation,normal!important;
    top:154vh!important;
  }
}


/* =========================================================
   METRON 4.66.40 — compact Act travel + neutral world grade + sensor clarity
   Approved 4.66.38 physical top/bottom masks are intentionally untouched.
   ========================================================= */
@media(min-width:981px){
  /* Same physical panorama, simply arrives sooner after the Act copy. */
  #about .connected-world{top:195vh!important;
    background-image:linear-gradient(rgba(220,226,224,.27),rgba(214,222,220,.27)),url("../images/connected-world-panorama-v5.webp")!important;
    background-blend-mode:saturation,normal!important;
  }
  /* Move only the tonal bridge with the physical edge; feather/mask unchanged. */
  #about.intro-section{background:linear-gradient(to bottom,
    #f8fcfd 0,#f4fafb 219vh,#edf6f7 229vh,#d9e9ec 235vh,#bfd8df 240vh,#a9cbd7 245vh,#a9cbd7 251vh,
    #eef2f1 337vh,#f4f5f3 351vh,#f7f7f5 367vh)!important;}
}
@media(max-width:980px){
  #about .connected-world{top:145vh!important;
    background-image:linear-gradient(rgba(220,226,224,.22),rgba(214,222,220,.22)),url("../images/connected-world-panorama-v5.webp")!important;
    background-blend-mode:saturation,normal!important;}
}

/* =========================================================
   METRON 4.66.41 — compact Act travel + sage header
   Approved Connected World top/bottom feather masks untouched.
   ========================================================= */
@media(min-width:981px){
  #about .connected-world{top:165vh!important;}
  #about.intro-section{min-height:330vh!important;}
}
@media(max-width:980px){
  #about .connected-world{top:132vh!important;}
  #about.intro-section{min-height:245vh!important;}
}
/* Header: site-palette surface instead of pure white. */
.navbar{
  background:rgba(242,246,236,.94)!important;
  border-bottom:1px solid rgba(99,125,61,.16)!important;
  box-shadow:0 8px 30px rgba(48,67,38,.045)!important;
}
.navbar.scrolled{background:rgba(238,244,231,.97)!important;box-shadow:0 16px 46px rgba(42,58,34,.10)!important;}


/* =========================================================
   METRON 4.66.42 — Act-only trim; preserve Connected World hold + v40 labels
   ========================================================= */
@media(min-width:981px){
  /* Reduce only the empty Act travel. Keep the section's full 390vh runway so
     Connected World itself is NOT shortened. Approved edge masks remain untouched. */
  #about .connected-world{top:150vh!important;}
  #about.intro-section{min-height:390vh!important;}
}
@media(max-width:980px){
  #about .connected-world{top:126vh!important;}
  #about.intro-section{min-height:285vh!important;}
}
/* Header: neutral mineral surface from the site's white/graphite/green system. */
.navbar{background:rgba(235,238,231,.96)!important;border-bottom:1px solid rgba(39,55,36,.13)!important;box-shadow:0 8px 28px rgba(31,44,29,.06)!important;}
.navbar.scrolled{background:rgba(229,233,225,.98)!important;box-shadow:0 14px 40px rgba(31,44,29,.10)!important;}
\n\n/* =========================================================\n   METRON 4.66.43 — shorter Act chapter + clean sensor anchors\n   IMPORTANT: approved Connected World feather/masks are untouched.\n   ========================================================= */\n@media(min-width:981px){\n  /* Bring the physical panorama edge forward. Keep the overall about runway\n     long enough for the Connected World chapter and its platform handoff. */\n  #about .connected-world{top:125vh!important;}\n  #about.intro-section{min-height:330vh!important;}\n}\n@media(max-width:980px){\n  #about .connected-world{top:112vh!important;}\n  #about.intro-section{min-height:245vh!important;}\n}\n/* Endpoint is now a precise luminous anchor, not a numbered badge. */\n.component-marker{\n  width:12px!important;height:12px!important;line-height:12px!important;font-size:0!important;\n  background:#a9c64f!important;border:2px solid rgba(255,255,255,.98)!important;\n  box-shadow:0 0 0 5px rgba(169,198,79,.14),0 0 18px rgba(132,166,42,.48)!important;\n}\n.component-marker::after{inset:-6px!important;opacity:.72!important;}\n.component-label-number{display:none!important;}\n
/* =========================================================
   METRON 4.66.44 — remove the empty Act runway + remove sensor dots
   Approved Connected World top/bottom feather masks are untouched.
   ========================================================= */
@media(min-width:981px){
  /* The Act composition is viewport-sized. Start the physical panorama while
     its final copy is leaving instead of reserving another ~43vh of blank page. */
  #about .connected-world{top:82vh!important;}
  /* Preserve the long Connected World runway / platform handoff. */
  #about.intro-section{min-height:330vh!important;}
}
@media(max-width:980px){
  #about .connected-world{top:92vh!important;}
  #about.intro-section{min-height:245vh!important;}
}
/* User requested no endpoint circles/badges in the sensor callout scene. */
.component-marker,.component-marker::after{display:none!important;content:none!important;}


/* =========================================================
   METRON 4.66.45 — synchronize Act exit with the physical World edge
   IMPORTANT: approved Connected World top/bottom feather masks are untouched.
   The prior blank runway was not only the element top: JS kept the Act phase
   alive until 36% of a 330vh chapter. main.js now switches at the physical edge.
   ========================================================= */
@media(min-width:981px){
  #about .connected-world{top:82vh!important;}
  #about.intro-section{min-height:330vh!important;}
}
@media(max-width:980px){
  #about .connected-world{top:92vh!important;}
  #about.intro-section{min-height:245vh!important;}
}


/* =========================================================
   METRON 4.66.46 — structural Act/World fix
   IMPORTANT: NO Connected World mask/feather rule is changed here.
   Root cause: on desktop .connected-world inherited inset:0. After assigning
   top, bottom:0 remained active, stretching the panorama through the remaining
   ~250vh. That produced the apparent giant blank sky/white runway.
   ========================================================= */
@media(min-width:981px){
  #about.intro-section{min-height:205vh!important;}
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase:not(.platform-handoff) .connected-world,
  #about.platform-handoff .connected-world{
    top:88vh!important;
    bottom:auto!important;
    height:108vh!important;
    min-height:0!important;
  }
}
@media(max-width:980px){
  #about.intro-section{min-height:215vh!important;}
  #about .connected-world,
  #about:not(.world-phase) .connected-world,
  #about.world-phase .connected-world{
    top:100vh!important;
    bottom:auto!important;
    height:108vh!important;
  }
}


/* =========================================================
   METRON 4.66.47 — final Act/World breathing room
   Only geometry spacing changes here. Approved Connected World
   top/bottom feather and mask rules are intentionally untouched.
   ========================================================= */
@media(min-width:981px){
  #about.intro-section{min-height:213vh!important;}
  #about .connected-world,#about:not(.world-phase) .connected-world,#about.world-phase:not(.platform-handoff) .connected-world,#about.platform-handoff .connected-world{top:96vh!important;bottom:auto!important;height:108vh!important;}
}
@media(max-width:980px){
  #about.intro-section{min-height:221vh!important;}
  #about .connected-world,#about:not(.world-phase) .connected-world,#about.world-phase .connected-world{top:106vh!important;bottom:auto!important;height:108vh!important;}
}


/* =========================================================
   METRON 4.66.48 — Act/World breathing room only
   Approved Connected World top/bottom feather/mask rules remain untouched.
   ========================================================= */
@media(min-width:981px){
  #about.intro-section{min-height:229vh!important;}
  #about .connected-world,#about:not(.world-phase) .connected-world,#about.world-phase:not(.platform-handoff) .connected-world,#about.platform-handoff .connected-world{top:112vh!important;bottom:auto!important;height:108vh!important;}
}
@media(max-width:980px){
  #about.intro-section{min-height:229vh!important;}
  #about .connected-world,#about:not(.world-phase) .connected-world,#about.world-phase .connected-world{top:114vh!important;bottom:auto!important;height:108vh!important;}
}

/* =========================================================
   METRON 4.66.50 — lightweight signal-flow preloader
   Reference: cyan environmental sensing trail -> Metron mark.
   SVG/CSS only; no video, GIF, canvas particles, or external loader asset.
   ========================================================= */
.loading-screen.metron-signal-loader{
  --metron-cyan:#48d8ff; --metron-ice:#c8f7ff; --metron-navy:#031326;
  position:fixed!important; inset:0!important; z-index:99999!important;
  display:block!important; overflow:hidden!important;
  background:
    radial-gradient(circle at 58% 42%,rgba(15,89,156,.30),transparent 28%),
    radial-gradient(circle at 26% 0%,rgba(24,91,153,.18),transparent 34%),
    linear-gradient(115deg,#020c18 0%,#061a31 47%,#020a14 100%)!important;
  opacity:1; visibility:visible; transition:opacity .72s cubic-bezier(.2,.7,.2,1),visibility .72s!important;
}
.loading-screen.metron-signal-loader::before,.loading-screen.metron-signal-loader::after{content:none!important;display:none!important;}
.loading-screen.metron-signal-loader.hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.metron-loader-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(46,176,255,.055),transparent 34%);animation:metronAmbient 3s ease-in-out infinite;}
.metron-loader-orbit{position:absolute;border:1px solid rgba(63,166,239,.24);border-radius:50%;pointer-events:none;}
.metron-loader-orbit.orbit-a{width:min(58vw,760px);aspect-ratio:1;left:-18vw;top:-39vw;box-shadow:inset -1px -1px 22px rgba(36,132,211,.05);}
.metron-loader-orbit.orbit-b{width:min(48vw,620px);aspect-ratio:1;right:-18vw;bottom:-34vw;border-color:rgba(43,126,211,.18);}
.metron-loader-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.metron-scan-path{fill:none;stroke-linecap:round;stroke-width:1.25;vector-effect:non-scaling-stroke;}
.metron-scan-path-dim{stroke:#2a86c7;opacity:.18;}
.metron-scan-path-live{stroke:url(#metronTrailGradient);filter:drop-shadow(0 0 4px rgba(54,203,255,.6));stroke-dasharray:1900;stroke-dashoffset:1900;animation:metronTrace 2.75s cubic-bezier(.28,.02,.22,1) .12s forwards;}
.metron-scan-dot{fill:#8af2ff;stroke:#e8fdff;stroke-width:1.4;animation:metronDotTravel 2.75s cubic-bezier(.28,.02,.22,1) .12s forwards,metronDotPulse .9s ease-in-out infinite;}
.metron-signal-event{opacity:0;color:#73e7ff;filter:drop-shadow(0 0 6px rgba(44,204,255,.42));}
.metron-signal-event circle{fill:rgba(30,180,255,.06);stroke:currentColor;stroke-width:1.2;}
.metron-signal-event path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.metron-signal-event text{fill:#b8f4ff;font:400 24px/1 Inter,Arial,sans-serif;letter-spacing:.02em;}
.event-ch4{animation:metronEvent .7s ease .78s both}.event-co2{animation:metronEvent .7s ease 1.15s both}.event-wifi{animation:metronEvent .62s ease 1.55s both}.event-cloud{animation:metronEvent .62s ease 1.82s both}.event-chart{animation:metronEvent .62s ease 2.08s both}
.metron-loader-brand{position:absolute;left:64%;top:49%;transform:translate(-50%,-50%) scale(.94);width:min(360px,54vw);text-align:center;opacity:0;animation:metronBrandIn .82s cubic-bezier(.16,.8,.2,1) 2.28s forwards;}
.metron-loader-m{width:132px;max-width:42vw;height:auto;overflow:visible;filter:drop-shadow(0 0 13px rgba(56,215,255,.42));}
.metron-loader-m path{fill:none;stroke:#66e7ff;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;}
.metron-loader-word{margin-top:8px;color:#eefbff;font-size:clamp(1.65rem,3vw,2.65rem);font-weight:500;letter-spacing:.34em;text-indent:.34em;text-shadow:0 0 18px rgba(105,213,255,.14);}
.metron-loader-tagline{margin-top:13px;color:rgba(218,239,255,.76);font-size:clamp(.72rem,1.15vw,.94rem);letter-spacing:.28em;}
.metron-loader-progress{position:absolute;left:50%;bottom:9.5vh;transform:translateX(-50%);width:min(310px,66vw);text-align:center;color:rgba(190,225,247,.58);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;}
.metron-loader-progress-line{display:block;height:1px;background:rgba(77,183,241,.22);margin-bottom:14px;overflow:visible;position:relative;}
.metron-loader-progress-line i{display:block;width:0;height:1px;background:#54dfff;box-shadow:0 0 8px rgba(65,218,255,.9);transition:width .2s linear;position:relative;}
.metron-loader-progress-line i::after{content:"";position:absolute;right:-3px;top:-2px;width:5px;height:5px;border-radius:50%;background:#c9fbff;box-shadow:0 0 10px #43d8ff;}
.metron-loader-percent{display:none!important}.metron-loader-hidden-stage{display:none!important}.metron-signal-loader .loading-error{display:block;margin-top:9px;color:#ffb7b7;font-size:.65rem;letter-spacing:.08em;text-transform:none;}
@keyframes metronTrace{to{stroke-dashoffset:0}}
@keyframes metronDotPulse{50%{r:8;opacity:.82}}
@keyframes metronDotTravel{0%{cx:-60;cy:235}18%{cx:250;cy:205}36%{cx:510;cy:315}52%{cx:720;cy:400}68%{cx:960;cy:445}84%{cx:1220;cy:395}100%{cx:1500;cy:400}}
@keyframes metronEvent{0%{opacity:0;transform:scale(.72)}30%,68%{opacity:1;transform:scale(1)}100%{opacity:.16;transform:scale(.94)}}
@keyframes metronBrandIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.88);filter:blur(8px)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@keyframes metronAmbient{50%{opacity:.72}}
@media(max-width:760px){
  .metron-loader-svg{transform:scale(1.12) translateX(-10%)}
  .metron-loader-brand{left:50%;top:48%;width:78vw;animation-delay:2.05s}
  .metron-loader-word{font-size:1.65rem}.metron-loader-tagline{letter-spacing:.18em}
  .metron-loader-orbit.orbit-a{width:92vw;left:-44vw;top:-50vw}.metron-loader-orbit.orbit-b{width:82vw;right:-45vw;bottom:-38vw}
  .metron-loader-progress{bottom:7vh}
}
@media(prefers-reduced-motion:reduce){
  .metron-scan-path-live{animation:none;stroke-dashoffset:0}.metron-scan-dot{animation:none;cx:1500;cy:400}
  .metron-signal-event{animation:none;opacity:.15}.metron-loader-brand{animation:none;opacity:1;transform:translate(-50%,-50%)}.metron-loader-ambient{animation:none}
}


/* =========================================================
   METRON 4.66.51 — refined living-signal preloader
   Multi-trail sensing -> environmental events -> dotted Metron M.
   ========================================================= */
.loading-screen.metron-signal-loader{background:radial-gradient(circle at 58% 43%,rgba(12,86,154,.28),transparent 31%),radial-gradient(circle at 22% 0%,rgba(23,91,157,.15),transparent 34%),linear-gradient(118deg,#020b16 0%,#061a31 48%,#020914 100%)!important}
.metron-loader-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}.metron-loader-atmosphere i{position:absolute;border:1px solid rgba(61,162,232,.16);border-radius:50%;box-shadow:0 0 60px rgba(30,132,216,.035)}.metron-loader-atmosphere i:nth-child(1){width:720px;height:720px;left:-250px;top:-500px}.metron-loader-atmosphere i:nth-child(2){width:520px;height:520px;right:-230px;bottom:-330px}.metron-loader-atmosphere i:nth-child(3){width:900px;height:420px;left:16%;top:23%;border-color:rgba(50,143,218,.045);filter:blur(1px);animation:metronAtmosFloat 7s ease-in-out infinite}
.metron-data-trails path{fill:none;stroke:#2daee8;stroke-width:.8;opacity:0;stroke-dasharray:12 20;filter:drop-shadow(0 0 3px rgba(48,190,255,.24));animation:metronSecondaryTrail 2.35s ease-in-out .45s both}.metron-data-trails .trail-b{animation-delay:.72s;opacity:0}.metron-data-trails .trail-c{animation-delay:.95s;opacity:0}
.metron-scan-path-live{stroke-width:1.35;stroke-dasharray:2050;stroke-dashoffset:2050;animation:metronTrace 2.55s cubic-bezier(.24,.04,.19,1) .10s forwards}
.metron-scan-dot{animation:metronDotTravel 2.55s cubic-bezier(.24,.04,.19,1) .10s forwards,metronDotPulse .72s ease-in-out infinite}.metron-scan-ring{fill:none;stroke:#72eaff;stroke-width:1;opacity:.22;transform-box:fill-box;transform-origin:center;animation:metronRingTravel 2.55s cubic-bezier(.24,.04,.19,1) .10s forwards,metronRingPulse .9s ease-out infinite}
.event-ch4{animation:metronEventAlive .82s ease .70s both}.event-co2{animation:metronEventAlive .82s ease 1.03s both}.event-wifi{animation:metronEventAlive .78s ease 1.38s both}.event-cloud{animation:metronEventAlive .78s ease 1.66s both}.event-chart{animation:metronEventAlive .78s ease 1.92s both}
.metron-loader-brand{left:69%;top:48%;width:min(350px,48vw);animation:metronBrandIn .68s cubic-bezier(.16,.8,.2,1) 2.30s forwards}.metron-loader-m{width:148px;max-width:44vw}.metron-m-dots circle{fill:#63e8ff;opacity:0;filter:drop-shadow(0 0 5px rgba(64,220,255,.7));animation:metronDotBuild .48s ease forwards}.metron-m-dots circle:nth-child(3n+1){animation-delay:2.20s}.metron-m-dots circle:nth-child(3n+2){animation-delay:2.29s}.metron-m-dots circle:nth-child(3n){animation-delay:2.38s}.metron-loader-word{margin-top:-2px;font-weight:520;letter-spacing:.38em}.metron-loader-tagline{margin-top:10px;letter-spacing:.25em}.metron-loader-progress{bottom:8vh}.metron-loader-progress-line{opacity:.72}.metron-loader-progress{font-size:.58rem;color:rgba(183,220,244,.48)}
@keyframes metronSecondaryTrail{0%{opacity:0;stroke-dashoffset:120}35%{opacity:.20}70%{opacity:.36}100%{opacity:.06;stroke-dashoffset:-120}}
@keyframes metronEventAlive{0%{opacity:0;transform:scale(.72)}28%{opacity:1;transform:scale(1.04)}62%{opacity:.82;transform:scale(1)}100%{opacity:.10;transform:scale(.92)}}
@keyframes metronDotBuild{0%{opacity:0;transform:scale(.15)}100%{opacity:1;transform:scale(1)}}
@keyframes metronRingPulse{0%{r:10;opacity:.48}100%{r:28;opacity:0}}
@keyframes metronAtmosFloat{50%{transform:translate3d(35px,-16px,0) scale(1.04)}}
@keyframes metronRingTravel{0%{cx:-70;cy:255}18%{cx:245;cy:205}36%{cx:510;cy:315}52%{cx:720;cy:400}68%{cx:960;cy:442}84%{cx:1220;cy:388}100%{cx:1455;cy:400}}
@keyframes metronDotTravel{0%{cx:-70;cy:255}18%{cx:245;cy:205}36%{cx:510;cy:315}52%{cx:720;cy:400}68%{cx:960;cy:442}84%{cx:1220;cy:388}100%{cx:1455;cy:400}}
@media(max-width:760px){.metron-loader-brand{left:50%;top:51%;width:80vw;animation-delay:2.22s}.metron-loader-svg{transform:scale(1.18) translate(-8%,-8%)}.metron-loader-progress{bottom:6vh}.metron-loader-atmosphere i:nth-child(1){width:520px;height:520px;left:-300px;top:-290px}}
@media(prefers-reduced-motion:reduce){.metron-data-trails path,.metron-scan-ring,.metron-m-dots circle{animation:none!important}.metron-m-dots circle{opacity:1}.metron-loader-brand{opacity:1;transform:translate(-50%,-50%)}}
\n\n/* =========================================================\n   METRON 4.66.52 — loading performance + persistent signal life\n   ========================================================= */\n/* Do not let the 4 MB legacy PNG compete with the critical GLB. The optimized\n   WebP is requested only as Connected World approaches the viewport. */\n#about .connected-world{background-image:none!important;}\n#about .connected-world.world-image-ready{background-image:linear-gradient(rgba(220,226,224,.27),rgba(214,222,220,.27)),url("../images/connected-world-panorama-v5.webp")!important;background-blend-mode:saturation,normal!important;}\n#about .connected-world.world-image-ready::before{background-image:none!important;}\n\n/* Once the opening scan completes, secondary data streams keep breathing for\n   however long the real assets need. This avoids a frozen-looking loader. */\n.metron-data-trails path{animation:metronSecondaryTrailIntro 2.5s ease-in-out .35s both,metronSecondaryTrailLoop 3.6s linear 2.85s infinite!important;}\n.metron-data-trails .trail-b{animation-delay:.55s,3.05s!important;}\n.metron-data-trails .trail-c{animation-delay:.75s,3.25s!important;}\n.metron-scan-path-live{animation:metronTrace 2.55s cubic-bezier(.24,.04,.19,1) .10s forwards,metronTrailBreathe 2.8s ease-in-out 2.7s infinite!important;}\n.metron-signal-event .metron-event-label{font-size:11px!important;font-weight:600!important;letter-spacing:.18em!important;fill:rgba(188,241,255,.78)!important;}\n.event-ch4 text,.event-co2 text{filter:drop-shadow(0 0 5px rgba(70,216,255,.45));}\n@keyframes metronSecondaryTrailIntro{0%{opacity:0;stroke-dashoffset:120}40%{opacity:.26}75%{opacity:.38}100%{opacity:.13;stroke-dashoffset:-120}}\n@keyframes metronSecondaryTrailLoop{0%{opacity:.08;stroke-dashoffset:0}45%{opacity:.34}100%{opacity:.08;stroke-dashoffset:-180}}\n@keyframes metronTrailBreathe{0%,100%{opacity:.62}50%{opacity:1}}\n
/* =========================================================
   METRON 4.66.57 — client-approved brand + static-right product choreography
   Desktop composition only unless a rule explicitly includes mobile.
   ========================================================= */
/* New lightweight brand asset. */
.brand-logo{width:auto!important;height:34px!important;max-width:180px!important;object-fit:contain!important;}
.footer-brand-logo{width:auto!important;height:42px!important;max-width:220px!important;object-fit:contain!important;}

/* Act With Confidence: copy is now the LEFT column; product remains on RIGHT. */
@media(min-width:981px){
  #about .about-story-card{
    left:5.5%!important;right:auto!important;width:min(42vw,620px)!important;
    margin-left:0!important;margin-right:auto!important;
  }
  #about .about-signal-field,#about .about-signal-field.is-pinned{left:auto!important;right:0!important;width:55vw!important;}
  #about .sense-halo{left:67%!important;}
  #about .sense-return{left:52%!important;}
  #about .sense-node.node-a{left:53%!important}.node-b{left:58%!important}.node-c{left:78%!important}.node-d{left:83%!important}
  #about:not(.world-phase) .sense-wifi{left:72%!important;}
}
/* Rings / telemetry now use the MetronTech green family instead of cyan. */
#about .sense-halo{border-color:rgba(67,148,54,.48)!important;box-shadow:0 0 42px rgba(67,148,54,.13),inset 0 0 35px rgba(122,188,57,.07)!important;}
#about .sense-halo::after{border-color:rgba(119,183,54,.28)!important;}
#about .sense-node{background:#d8f2a7!important;box-shadow:0 0 0 5px rgba(67,148,54,.10),0 0 18px rgba(67,148,54,.72)!important;}
#about .sense-return{background:linear-gradient(90deg,transparent,rgba(67,148,54,.34),rgba(137,197,58,.84))!important;filter:drop-shadow(0 0 5px rgba(67,148,54,.55))!important;}

/* Connected World: exact replacement image, same cover geometry / positioning. */
#about .connected-world.world-image-ready{background-image:url("../images/connected-world-panorama-v5.webp")!important;}
@media(min-width:981px){#about .connected-world{background-image:url("../images/connected-world-panorama-v5.webp")!important;}}

/* Industry labels become interactive information chips. */
.world-node{pointer-events:auto!important;cursor:default!important;z-index:12!important;outline:none!important;}
.world-node em{
  position:absolute;left:50%;bottom:calc(100% + 12px);width:220px;padding:13px 14px;
  border:1px solid rgba(191,229,168,.34);border-radius:14px;
  background:rgba(8,27,20,.92);color:rgba(244,250,241,.88);font-style:normal;font-size:11px;font-weight:500;line-height:1.45;letter-spacing:0;
  box-shadow:0 16px 44px rgba(0,0,0,.28);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.96);transform-origin:50% 100%;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s ease;pointer-events:none;
}
.world-node em::after{content:"";position:absolute;left:50%;top:100%;width:9px;height:9px;background:rgba(8,27,20,.92);border-right:1px solid rgba(191,229,168,.28);border-bottom:1px solid rgba(191,229,168,.28);transform:translate(-50%,-5px) rotate(45deg);}
.world-node:hover em,.world-node:focus em,.world-node:focus-visible em{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
.world-node:hover{background:rgba(18,58,31,.86)!important;box-shadow:0 10px 32px rgba(0,0,0,.28),0 0 0 1px rgba(137,197,58,.22)!important;}
@media(max-width:980px){
  .brand-logo{height:29px!important;max-width:150px!important}.footer-brand-logo{height:36px!important;max-width:190px!important}
  .world-node em{width:min(210px,68vw);font-size:10px;padding:11px 12px;}
}
/* 4.66.57 loader — new MetronTech identity, lightweight image + green signal language. */
.metron-signal-loader{background:radial-gradient(circle at 50% 46%,rgba(74,153,53,.10),transparent 34%),#07120b!important;}
.metron-loader-brand-v2{width:min(560px,76vw)!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:18px!important;}
.metron-loader-logo-shell{position:relative;width:min(520px,72vw);display:flex;align-items:center;justify-content:center;isolation:isolate;}
.metron-loader-logo-shell img{display:block;width:100%;height:auto;position:relative;z-index:2;filter:drop-shadow(0 12px 34px rgba(68,151,50,.18));animation:metronBrandBreathe 2.8s ease-in-out infinite;}
.metron-loader-logo-pulse{position:absolute;left:6%;width:19%;aspect-ratio:1;border:1px solid rgba(116,188,60,.28);border-radius:50%;z-index:1;animation:metronLogoPulse 2.5s ease-out infinite;}
.metron-loader-tagline{color:rgba(218,236,210,.72)!important;letter-spacing:.19em!important;}
.metron-data-trails path,.metron-scan-path-live{stroke:#6db83d!important;}
.metron-scan-dot{fill:#8dcc49!important;filter:drop-shadow(0 0 8px rgba(109,184,61,.9))!important;}
.metron-scan-ring{stroke:#78bf42!important;}
.metron-signal-event{color:#78bf42!important;}
.metron-signal-event circle,.metron-signal-event path{stroke:#78bf42!important;}
.metron-signal-event text,.metron-signal-event .metron-event-label{fill:rgba(205,236,188,.82)!important;}
.metron-loader-progress-line i{background:linear-gradient(90deg,#2f8437,#8bc63f)!important;box-shadow:0 0 16px rgba(110,185,61,.45)!important;}
@keyframes metronLogoPulse{0%{transform:scale(.62);opacity:.62}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes metronBrandBreathe{0%,100%{transform:scale(.992);opacity:.92}50%{transform:scale(1);opacity:1}}
@media(max-width:640px){.metron-loader-brand-v2{width:82vw!important}.metron-loader-logo-shell{width:80vw}.metron-loader-tagline{font-size:10px!important;letter-spacing:.13em!important}}


/* =========================================================
   METRON 4.66.58 — corrected Act composition + exact Connected World artwork
   ========================================================= */
@media(min-width:981px){
  /* Higher-specificity correction: legacy sensing-active rules used to win the cascade.
     The complete telemetry composition now lives behind the right-side product. */
  #about.intro-section.sensing-active .about-signal-field#aboutConnectVisual,
  #about.intro-section:not(.world-phase) .about-signal-field#aboutConnectVisual{
    position:fixed!important;left:auto!important;right:0!important;top:0!important;
    width:55vw!important;height:100vh!important;transform:none!important;
  }
  #about.intro-section.sensing-active .sense-halo,
  #about.intro-section:not(.world-phase) .sense-halo{left:58%!important;top:50%!important;width:24vw!important;}
  #about.intro-section.sensing-active .sense-return{left:34%!important;width:47%!important;}
  #about.intro-section.sensing-active .sense-node.node-a{left:34%!important;}
  #about.intro-section.sensing-active .sense-node.node-b{left:43%!important;}
  #about.intro-section.sensing-active .sense-node.node-c{left:72%!important;}
  #about.intro-section.sensing-active .sense-node.node-d{left:82%!important;}
  #about.intro-section.sensing-active .sense-chip.chip-ch4{left:8%!important;top:27%!important;}
  #about.intro-section.sensing-active .sense-chip.chip-co2{left:9%!important;top:63%!important;}
  #about.intro-section.sensing-active .sense-chip.chip-nh3{left:73%!important;top:23%!important;}
  #about.intro-section.sensing-active .sense-chip.chip-env{left:75%!important;top:67%!important;}
  #about.intro-section.sensing-active .sense-wifi{left:58%!important;top:14%!important;}
}

/* Use the user-supplied 1916×821 panorama itself — no dark grade, tint or competing
   pseudo-image. The existing world labels retain their original percentage anchors. */
#about .connected-world,
#about .connected-world.world-image-ready{
  background-image:url("../images/connected-world-panorama-v5.webp")!important;
  background-size:cover!important;background-position:center center!important;
  background-repeat:no-repeat!important;background-blend-mode:normal!important;filter:none!important;
}
#about .connected-world::before{content:none!important;display:none!important;background:none!important;}
#about .connected-world::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:5!important;
  pointer-events:none!important;background:linear-gradient(90deg,rgba(4,18,13,.38) 0%,rgba(4,18,13,.12) 27%,rgba(4,18,13,0) 48%)!important;
}
#about .connected-world-atmosphere{background:none!important;filter:none!important;}
#about .connected-world-atmosphere::before,#about .connected-world-atmosphere::after{content:none!important;display:none!important;}