/* ── Notera 2 Bold — designer signature font ── */
@font-face {
    font-family: 'Notera';
    src: url('../font/notera-font/Notera2PersonalUseOnlyBold-Y8eq.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: 'Chakra Petch', Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .005em
}

h1,
h2,
h3,
h4 {
    font-weight: 700
}

.gw-boxed {
    display: inline-block;
    border: 2px solid rgba(3, 217, 240, .45);
    background: rgba(3, 217, 240, .08);
    padding: 0 14px;
    border-radius: 12px;
    transform: skewX(-6deg);
    box-shadow: 0 0 20px rgba(3, 217, 240, .12);
    /* keep the badge inside the heading's line box so it can never collide with
       the line above/below on tight multi-line hero headings */
    vertical-align: baseline;
}

.dark .gw-boxed {
    border-color: #03D9F0;
    background: rgba(3, 217, 240, .1)
}

.gw-boxed>span {
    transform: skewX(6deg);
    display: inline-block
}

.gw-outline {
    -webkit-text-stroke: 1.5px #1e293b;
    color: transparent
}

.dark .gw-outline {
    -webkit-text-stroke: 1.5px #e2e8f0;
    color: transparent
}

@keyframes gwCursorBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.gw-cursor {
    animation: gwCursorBlink .8s step-end infinite
}

@keyframes heroGlowPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 18px rgba(3, 217, 240, .2)) drop-shadow(0 0 36px rgba(124, 58, 237, .1))
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(3, 217, 240, .35)) drop-shadow(0 0 50px rgba(124, 58, 237, .2))
    }
}

.gw-glow-pulse {
    animation: heroGlowPulse 4s ease-in-out infinite
}

.dark .gw-glow-pulse {
    filter: drop-shadow(0 0 20px rgba(3, 217, 240, .3)) drop-shadow(0 0 40px rgba(124, 58, 237, .15))
}

html {
    color-scheme: light
}

html.dark {
    color-scheme: dark
}

/* The page surface colour, exposed as a variable so components that need to
   blend into the background (e.g. the scroll-edge fades below) can reference
   it instead of hardcoding two hexes. */
:root {
    --gw-surface: #f8fafc;
}

html.dark {
    --gw-surface: #06111f;
}

body {
    background-color: #f8fafc;
    min-height: 100vh;
    transition: background-color .3s ease, color .3s ease
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -10;
    background-image:
        linear-gradient(180deg, rgba(248,250,252,.82) 0%, rgba(222,240,245,.52) 40%, rgba(248,250,252,.88) 100%);
    pointer-events: none
}

html.dark body {
    background-color: #06111f
}

html.dark body::before {
    background-image:
        linear-gradient(180deg, rgba(6,17,31,.86) 0%, rgba(10,36,56,.58) 40%, rgba(6,17,31,.9) 100%);
    filter: saturate(1.2) hue-rotate(-6deg) brightness(.96)
}

/* ── Auto-rotating themed backdrop ──
   Managed by the `bgRotator` engine in app.js. Two stacked cover layers
   crossfade through the images in assets/images/bg/{theme}/. Sits BEHIND the
   body::before readability scrim (z-index -11 below -10) so copy always stays
   readable while the photo still shows through. */
.gw-bg-rotator {
    position: fixed;
    inset: 0;
    z-index: -11;
    overflow: hidden;
    pointer-events: none;
    filter: saturate(1.18) hue-rotate(-8deg) brightness(1.03);
}
html.dark .gw-bg-rotator {
    filter: saturate(1.2) hue-rotate(-6deg) brightness(.96);
}
.gw-bg-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .8s ease;
    will-change: opacity;
}
.gw-bg-layer.is-on {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .gw-bg-layer { transition: none; }
}

::selection {
    background: rgba(3, 217, 240, .28);
    color: inherit
}

html.dark ::selection {
    background: rgba(3, 217, 240, .35);
    color: #eafcff
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(3, 217, 240, .30);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(3, 217, 240, .5);
    background-clip: padding-box
}

*,
*::before,
*::after {
    transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-duration: 0ms
}

a,
button,
input,
[class*="hover"] {
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1)
}

body.gw-home {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth
}

body.gw-home::-webkit-scrollbar {
    display: none
}

/* refined ocean radius — was a legacy 3px override that squared every card */
[class*=rounded]:not([class*=rounded-full]):not([class*=rounded-none]) {
    border-radius: 12px
}

.u-link {
    transition: color .2s ease
}

.u-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: #03d9f0b3
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #03D9F0;
    outline-offset: 2px;
    border-radius: 4px
}


.gw-hov {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.gw-hov:hover {
    border-color: rgba(3, 217, 240, .5);
    box-shadow: 0 4px 24px rgba(3, 217, 240, .08)
}

@keyframes gwbDrift {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1)
    }

    33% {
        transform: translate3d(6%, -4%, 0) scale(1.12)
    }

    66% {
        transform: translate3d(-5%, 5%, 0) scale(.94)
    }
}

@keyframes gwPulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(1)
    }

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

@keyframes gwBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

@keyframes gwDrift {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-8px)
    }
}

@keyframes gwSheen {
    0% {
        background-position: -140% 0
    }

    100% {
        background-position: 240% 0
    }
}

.gw-core {
    animation: gwPulse 3.4s ease-in-out infinite
}

.gw-blink {
    animation: gwBlink 1.7s ease-in-out infinite
}

.gw-drift {
    animation: gwDrift 2.4s ease-in-out infinite alternate
}

.gw-sheen {
    background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%);
    background-size: 220% 100%;
    animation: gwSheen 4.5s ease-in-out infinite
}

/* status dot pulse — pairs with inline background-color set per product */
.gw-pulse {
    animation: gwPulse 2.4s ease-in-out infinite
}

/* ambient aurora glow blob — slow drift so large blurred gradients feel alive */
.gw-aurora {
    animation: gwAurora 18s ease-in-out infinite alternate
}

@keyframes gwAurora {
    0% {
        transform: translate3d(0, 0, 0) scale(1)
    }

    50% {
        transform: translate3d(3%, -2%, 0) scale(1.08)
    }

    100% {
        transform: translate3d(-3%, 2%, 0) scale(.96)
    }
}

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

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

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

@keyframes gwPing {
    0% {
        transform: scale(.72);
        opacity: .5
    }

    100% {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes gwBarS1 {

    0%,
    3% {
        transform: scaleX(0)
    }

    22% {
        transform: scaleX(1)
    }

    84% {
        transform: scaleX(1)
    }

    92%,
    100% {
        transform: scaleX(0)
    }
}

@keyframes gwBarS2 {

    0%,
    9% {
        transform: scaleX(0)
    }

    28% {
        transform: scaleX(1)
    }

    84% {
        transform: scaleX(1)
    }

    92%,
    100% {
        transform: scaleX(0)
    }
}

@keyframes gwBarS3 {

    0%,
    15% {
        transform: scaleX(0)
    }

    34% {
        transform: scaleX(1)
    }

    84% {
        transform: scaleX(1)
    }

    92%,
    100% {
        transform: scaleX(0)
    }
}

@keyframes gwBarCore {

    0%,
    30% {
        transform: scaleX(0)
    }

    56% {
        transform: scaleX(1)
    }

    86% {
        transform: scaleX(1)
    }

    93%,
    100% {
        transform: scaleX(0)
    }
}

@keyframes gwBarOut {

    0%,
    56% {
        transform: scaleX(0)
    }

    74% {
        transform: scaleX(1)
    }

    88% {
        transform: scaleX(1)
    }

    95%,
    100% {
        transform: scaleX(0)
    }
}

.gw-bar-core {
    transform-origin: left;
    animation: gwBarCore 9s cubic-bezier(.4, 0, .3, 1) infinite
}

@keyframes gwCoreLit {

    0%,
    28% {
        box-shadow: 0 0 0 rgba(3, 217, 240, 0)
    }

    56% {
        box-shadow: 0 0 38px rgba(3, 217, 240, .40)
    }

    86% {
        box-shadow: 0 0 16px rgba(3, 217, 240, .16)
    }

    94%,
    100% {
        box-shadow: 0 0 0 rgba(3, 217, 240, 0)
    }
}

.gw-core-lit {
    animation: gwCoreLit 9s ease-in-out infinite
}

@keyframes gwLog1 {

    0%,
    2% {
        opacity: 0;
        transform: translateY(3px)
    }

    8%,
    88% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0
    }
}

@keyframes gwLog2 {

    0%,
    16% {
        opacity: 0;
        transform: translateY(3px)
    }

    22%,
    88% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0
    }
}

@keyframes gwLog3 {

    0%,
    32% {
        opacity: 0;
        transform: translateY(3px)
    }

    38%,
    88% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0
    }
}

@keyframes gwLog4 {

    0%,
    54% {
        opacity: 0;
        transform: translateY(3px)
    }

    60%,
    88% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0
    }
}

@keyframes gwLog5 {

    0%,
    74% {
        opacity: 0;
        transform: translateY(3px)
    }

    80%,
    88% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0
    }
}

@keyframes gwLog6 {

    0%,
    82% {
        opacity: 0;
        transform: translateY(3px)
    }

    88%,
    92% {
        opacity: 1;
        transform: none
    }

    96%,
    100% {
        opacity: 0
    }
}

@keyframes gwWire {
    to {
        stroke-dashoffset: -100
    }
}

.gw-wire {
    animation: gwWire 2.6s linear infinite
}

@keyframes gwWireIn {

    0%,
    2% {
        opacity: 0
    }

    8%,
    30% {
        opacity: 1
    }

    38%,
    100% {
        opacity: 0
    }
}

@keyframes gwWireOut {

    0%,
    34% {
        opacity: 0
    }

    42%,
    66% {
        opacity: 1
    }

    74%,
    100% {
        opacity: 0
    }
}

.gw-wire-in {
    animation: gwWire 2.6s linear infinite, gwWireIn 9s linear infinite
}

.gw-wire-out {
    animation: gwWire 2.6s linear infinite, gwWireOut 9s linear infinite
}

@keyframes gwCheck {
    0% {
        opacity: 0;
        transform: scale(.4)
    }

    4% {
        opacity: 1;
        transform: scale(1.18)
    }

    9%,
    84% {
        opacity: 1;
        transform: scale(1)
    }

    92%,
    100% {
        opacity: 0;
        transform: scale(.6)
    }
}

.gw-check {
    animation: gwCheck 9s ease-out infinite
}

@keyframes gwCycleBar {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

@keyframes gwGlowNode {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(3, 217, 240, 0)
    }

    50% {
        box-shadow: 0 0 20px rgba(3, 217, 240, .28)
    }
}


@media(min-width:1280px) {

}

@media(min-width:1536px) {

}

/* ═══ Fluid responsive typography (hero) ═══ */
/* Chakra Petch has a tall glyph box (large ascender + descender). A line-height
   below ~1.15 makes adjacent heading lines physically overlap, which is very
   visible on the multi-span hero h1 where "Fully" sits in a padded badge and
   "Autonomous" / "AI" wrap onto their own lines. Keep >= 1.15. */
.text-responsive-xl {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.15;
}

.text-responsive-lg {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.5;
}

/* Hero supporting copy sits directly on the whale/water hero photo, whose
   brightest highlights are near-white. The default zinc-600 / zinc-400 greys
   wash out against it, so give the text a soft dual halo to guarantee contrast
   in both themes without needing an extra scrim layer. */
.gw-hero-copy {
    text-shadow:
        0 1px 2px rgba(255, 255, 255, .85),
        0 0 10px rgba(255, 255, 255, .55);
}

.dark .gw-hero-copy {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .75),
        0 0 12px rgba(0, 0, 0, .55);
}

.text-responsive-stat {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

/* Tablet (1024–1279px): tighter hero fit */
@media (min-width: 1024px) and (max-width: 1279px) {

}

@keyframes gwStock {
    0% {
        width: 96%
    }

    45% {
        width: 12%
    }

    55% {
        width: 12%
    }

    70% {
        width: 100%
    }

    100% {
        width: 96%
    }
}

@keyframes gwRefill {

    0%,
    55% {
        opacity: 0;
        transform: translateY(4px) scale(.9)
    }

    65%,
    85% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }

    100% {
        opacity: 0;
        transform: translateY(-3px)
    }
}

@keyframes gwOrder {

    0%,
    8% {
        width: 6%
    }

    55% {
        width: 100%
    }

    100% {
        width: 100%
    }
}

@keyframes gwDone {

    0%,
    55% {
        opacity: 0;
        transform: translateX(-3px)
    }

    68%,
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes gwChip {

    0%,
    100% {
        opacity: .4;
        border-color: currentColor
    }

    50% {
        opacity: 1
    }
}

@keyframes gwCredit {

    0%,
    60% {
        opacity: 0;
        transform: translateY(4px)
    }

    72%,
    92% {
        opacity: 1;
        transform: translateY(0)
    }

    100% {
        opacity: 0
    }
}

@keyframes gwFadeCyc {

    0%,
    20% {
        opacity: 0
    }

    35%,
    80% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes gwTank {
    0% {
        transform: translateY(0)
    }

    46% {
        transform: translateY(72%)
    }

    54% {
        transform: translateY(72%)
    }

    72% {
        transform: translateY(6%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes gwSkel {
    0% {
        background-position: -180% 0
    }

    100% {
        background-position: 280% 0
    }
}

.gw-skel {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .40) 45%, rgba(255, 255, 255, .12) 90%);
    background-size: 220% 100%;
    animation: gwSkel 2.6s ease-in-out infinite
}

.gw-skel--dim {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .24) 45%, rgba(255, 255, 255, .07) 90%)
}

/* ---------------------------------------------------------------------------
 * Phone mockup frame (homepage "SEO storefront" card).
 * Built with its own class names on purpose, NOT with `rounded-*` utilities:
 * the ocean-radius rule near the top of this file flattens every
 * [class*=rounded] element to 12px, which would turn a handset bezel into a
 * button corner. None of these names contain the string "rounded", so the
 * radii below survive. Inner chrome (island, battery) is drawn in SVG for the
 * same reason — an SVG rx cannot be overridden by that selector.
 * ------------------------------------------------------------------------- */
.gw-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3px;
    border-radius: 36px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .18) 100%);
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .80), 0 0 0 1px var(--gw-phone-ring, rgba(255, 255, 255, .05))
}

.gw-phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 33px;
    background: #08080c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07)
}

/* Browser toolbar. The single strongest "this is a phone" signal after the
   island: results scroll, chrome does not. */
.gw-phone__bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 7px 18px 6px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .45)
}

/* Angled gloss so the glass reads as glass. Sits above the content but is
   pointer-transparent and far too faint to hurt text contrast. */
.gw-phone__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(168deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 38%)
}

/* Dynamic island — absolutely positioned against the screen, and narrow enough
   that the clock and the status glyphs flank it on the same row. */
.gw-phone__island {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 16px;
    border-radius: 999px;
    background: #000
}

.gw-phone__home {
    display: block;
    width: 104px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .30)
}

@keyframes gwDraw {
    from {
        stroke-dashoffset: 260
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes gwGauge {
    from {
        stroke-dashoffset: 254
    }

    to {
        stroke-dashoffset: 7.6
    }
}

@keyframes gwRail {
    from {
        background-position: 0 0
    }

    to {
        background-position: 44px 0
    }
}

@keyframes gwMarquee {
    to {
        transform: translate3d(-50%, 0, 0)
    }
}

.nxc-root {
    --nxc-panel: rgba(255, 255, 255, .92);
    --nxc-card: rgba(255, 255, 255, .85);
    --nxc-field: rgba(15, 40, 80, .06);
    --nxc-hair: rgba(15, 40, 80, .18);
    --nxc-pill-bg: #fff;
    --nxc-pill-border: #e8e6e0;
    --nxc-pill-text: #131a2b;
    --nxc-pill-ph: #9aa0ab;
    --nxc-pill-icon: #c3c7ce;
    --nxc-pill-shadow: 0 10px 30px rgba(15, 18, 25, .12)
}

.dark .nxc-root {
    --nxc-panel: rgba(9, 18, 40, .94);
    --nxc-card: rgba(16, 32, 66, .85);
    --nxc-field: rgba(255, 255, 255, .08);
    --nxc-hair: rgba(255, 255, 255, .22);
    --nxc-pill-bg: #14171f;
    --nxc-pill-border: rgba(255, 255, 255, .14);
    --nxc-pill-text: #e7eaf0;
    --nxc-pill-ph: #7c8497;
    --nxc-pill-icon: #5c6478;
    --nxc-pill-shadow: 0 10px 34px rgba(0, 0, 0, .55)
}

@keyframes nxcIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(.985)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes nxcMsg {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes nxcDot {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: .45
    }

    40% {
        transform: translateY(-3px);
        opacity: 1
    }
}

@keyframes nxcConvsIn {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes nxcNotifyOut {

    0%,
    62% {
        opacity: 1;
        max-height: 300px
    }

    100% {
        opacity: 0;
        max-height: 0
    }
}

.nxc-panel {
    animation: nxcIn .28s cubic-bezier(.22, 1, .36, 1) both
}

.nxc-msg {
    animation: nxcMsg .3s cubic-bezier(.22, 1, .36, 1) both
}

.nxc-dot {
    animation: nxcDot 1.2s ease-in-out infinite
}

.nxc-pill {
    transition: max-width .34s cubic-bezier(.22, 1, .36, 1)
}

.nxc-convs {
    animation: nxcConvsIn .16s ease-out both
}

.nxc-notify-out {
    animation: nxcNotifyOut 2.2s ease-in forwards;
    overflow: hidden
}

.nxc-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent
}

.nxc-scroll::-webkit-scrollbar {
    width: 5px
}

.nxc-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
    border-radius: 999px
}

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

    .gwb-blob,
    .gw-aurora,
    .gw-pulse,
    .gw-core,
    .gw-blink,
    .gw-drift,
    .gw-sheen,
    .gw-orbit,
    .gw-orbit-rev,
    .gw-sweep,
    .gw-ping,
    .gw-bar-s1,
    .gw-bar-s2,
    .gw-bar-s3,
    .gw-bar-core,
    .gw-bar-out,
    .gw-core-lit,
    .gw-log-1,
    .gw-log-2,
    .gw-log-3,
    .gw-log-4,
    .gw-log-5,
    .gw-wire,
    .gw-wire-in,
    .gw-wire-out,
    .gw-check,
    .gw-cycle-bar,
    .gw-gnode,
    .gw-stock,
    .gw-refill-badge,
    .gw-order,
    .gw-done,
    .gw-chip,
    .gw-credit,
    .gw-fade-cycle,
    .gw-tank,
    .gw-skel,
    .gw-marquee,
    .nxc-panel,
    .nxc-msg,
    .nxc-dot,
    .nxc-notify-out,
    .gw-draw,
    .gw-gauge,
    .gw-rail,
    .gw-reveal,
    .gw-node-active,
    .gw-node-dimmed,
    .gw-wire-active,
    .gw-wire-done,
    .gw-tooltip,
    .gw-walk-btn,
    .gw-walk-dot,
    .gw-walk-dot-active,
    .gw-pulse-ring,
    .gw-engine-ring,
    .gw-engine-orbit,
    .gw-engine-glow,
    .gw-core-lit,
    .gw-status-pulse,
    .gw-bell-pulse,
    .gw-failed-icon,
    .gw-rejected-icon,
    .gw-retry-icon,
    .gw-enter,
    .gw-orbit-svg,
    .gw-orbit-ring,
    .gw-planet,
    .gw-rays,
    .gw-stars,
    .gw-step-pill,
    .gw-core-halo,
    .gw-core-satellite,
    .gw-core-halo-svg,
    .gw-orb-glow,
    .gw-orb-sweep,
    .gw-orb-ico--spin {
        animation: none !important;
        transition: none !important
    }

    /*
       The selector list above was previously left with no declarations at all,
       so the browser discarded the whole rule and none of those animations were
       ever switched off under prefers-reduced-motion. The declaration block now
       kills both the keyframe animations and the transitions.

       For the reveal family specifically, motion is removed but the END STATE
       is kept reachable: without this the elements would still be observed and
       could be faded back out, so a reduced-motion visitor would see content
       disappear. Forcing them visible and un-transitioned makes the reveal
       a no-op for them.
    */
    .gw-reveal,
    .gw-reveal-left,
    .gw-reveal-right,
    .gw-reveal-scale,
    .gw-enter {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }

}

.gw-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1)
}

.gw-reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.gw-reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.gw-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.gw-reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.gw-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.gw-reveal-scale {
    opacity: 0;
    transform: scale(.95);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.gw-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1)
}

/*
   The reveal callback fades content out by removing .is-visible from .gw-reveal
   elements only. The three directional variants are never re-hidden, so if one
   of them is ever used it would sit at opacity 0 forever. They are therefore
   pinned visible as a safety net, consistent with the reduced-motion rule.
   (None of them are referenced by any page today; this only removes a trap.)
*/
.gw-reveal-left,
.gw-reveal-right,
.gw-reveal-scale {
    opacity: 1;
    transform: none
}

/*
   Stagger delays are applied on the way IN (fade in + slide up),
   but zeroed on the way OUT (fade out + slide down).

   Why both halves matter:
   - On the way in, the cascade is the whole point: each sibling waits an extra
     .08s so the group arrives as a sequence instead of one slab.
   - On the way out, the element is clipped hard by the viewport, so most of its
     fade happens off screen. Keeping a .4s delay on the way out means the last
     element of a 5-item group would still be fully opaque when it is already
     gone, and would visibly "pop" rather than fade. Zero delay lets every item
     fade from the moment it is clipped, so the fade tracks the exit.
*/
.gw-stagger-1 {
    transition-delay: .08s
}

.gw-stagger-2 {
    transition-delay: .16s
}

.gw-stagger-3 {
    transition-delay: .24s
}

.gw-stagger-4 {
    transition-delay: .32s
}

.gw-stagger-5 {
    transition-delay: .4s
}

.gw-stagger-1:not(.is-visible),
.gw-stagger-2:not(.is-visible),
.gw-stagger-3:not(.is-visible),
.gw-stagger-4:not(.is-visible),
.gw-stagger-5:not(.is-visible) {
    transition-delay: 0s
}

/*
   If JavaScript is disabled, the reveal driver never runs and the elements
   would stay at opacity 0 forever. This rule forces them visible so the page
   is still fully readable without JS.
*/
.no-js .gw-reveal,
.no-js .gw-reveal-left,
.no-js .gw-reveal-right,
.no-js .gw-reveal-scale,
.no-js .gw-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
}

/* ===========================================================================
 * Entrance gestures for the #why bento: columns and cards fade in from the
 * left or right on scroll, plus a lighter horizontal drift for the cards inside
 * each column so the row arrives as a sequence of gestures rather than one slab.
 *
 * Driven by the SAME IntersectionObserver that toggles .is-visible on the
 * .gw-reveal family (assets/js/app.js) — no second observer, no second
 * scroll listener. Each variant is opacity:0 + a transform until .is-visible
 * is added, then it eases to rest.
 *
 * Names deliberately contain no "rounded" substring, so the ocean-radius
 * override near the top of this file (border-radius:12px on every
 * [class*=rounded] element) cannot flatten the bezel or any of these classes.
 * ========================================================================= */
.gw-enter {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.12, 0, .39, 0), transform .6s cubic-bezier(.12, 0, .39, 0)
}

.gw-enter.is-visible {
    opacity: 1;
    transform: none
}

/* Column gestures -------------------------------------------------------- */
.gw-enter--fade-left {
    transform: translateX(-34px)
}

.gw-enter--fade-right {
    transform: translateX(34px)
}

/* Card-level: a smaller horizontal drift so a card trails its column, not the
   other way round. */
.gw-enter--card {
    transition-duration: .55s
}

.gw-enter--card.gw-enter--fade-left {
    transform: translateX(-18px)
}

.gw-enter--card.gw-enter--fade-right {
    transform: translateX(18px)
}

/* Higher-specificity resets so the active state wins on cards too. */
.gw-enter--card.gw-enter--fade-left.is-visible {
    transform: none
}

.gw-enter--card.gw-enter--fade-right.is-visible {
    transform: none
}
        color: #03D9F0;
        transform: translateY(-1px) scale(1.05);
    }

    button:active:not(:disabled) {
        transform: scale(.97);
    }

    a:active {
        transform: scale(.98);
    }

    @keyframes gwBorderShimmer {
        0% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0% 50%
        }
    }

    .gw-shimmer-border {
        background-size: 200% 200%;
        animation: gwBorderShimmer 4s ease infinite;
    }

    @keyframes sheen-return {
        0% {
            transform: translate(-125%)
        }

        42% {
            transform: translate(125%)
        }

        58% {
            transform: translate(125%)
        }

        to {
            transform: translate(-125%)
        }
    }

    @keyframes icon-nudge {

        0%,
        to {
            transform: translate(0) rotate(0)
        }

        35% {
            transform: translate(1px, -1px) rotate(-4deg)
        }

        65% {
            transform: translate(-1px) rotate(3deg)
        }
    }

    [data-micro-sheen]:hover .sheen-return {
        animation: 1.05s cubic-bezier(0.33, 1, 0.68, 1) forwards sheen-return;
    }

    .gw-nav-pill {
        position: relative;
        overflow: hidden;
    }

    .gw-nav-pill::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: scale-x-0;
        transform-origin: left;
        border-radius: inherit;
        background: rgba(3, 217, 240, 0.07);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 0;
    }

    .gw-nav-pill:hover::after {
        transform: scale-x-1;
    }

    .dark .gw-nav-pill::after {
        background: rgba(255, 255, 255, 0.06);
    }

    @media(prefers-reduced-motion:reduce) {
        [data-micro-sheen]:hover .sheen-return {
            animation: none !important
        }

        .gw-nav-pill::after {
            transition: none !important
        }
    }

    /* ===== ORDER-FLOW PANEL EFFECTS ===== */

    /* 3D text depth label — 4-layer perspective shadow */
    .gw-3d-label {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, .08),
            0 2px 0 rgba(0, 0, 0, .05),
            0 3px 0 rgba(0, 0, 0, .03),
            0 4px 10px rgba(3, 217, 240, .1);
    }

    .dark .gw-3d-label {
        text-shadow:
            0 1px 0 rgba(255, 255, 255, .06),
            0 2px 0 rgba(255, 255, 255, .03),
            0 3px 0 rgba(255, 255, 255, .015),
            0 4px 12px rgba(3, 217, 240, .2);
    }

    /* Engine pulse ring */
    @keyframes gwPulseRing {

        0%,
        100% {
            opacity: 0;
            transform: scale(1);
        }

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

    .gw-pulse-ring {
        animation: gwPulseRing 3s ease-in-out infinite;
    }


    /* Node 2D layered shadows — triple layer */
    .gw-node-left,
    .gw-node-customer,
    .gw-node-engine,
    .gw-node-top,
    .gw-node-status,
    .gw-node-error,
    .gw-node-notify {
        box-shadow:
            0 8px 24px -8px rgba(0, 0, 0, .08),
            0 2px 6px rgba(0, 0, 0, .05),
            0 0 0 1px rgba(255, 255, 255, .1);
    }

    .dark .gw-node-left,
    .dark .gw-node-customer,
    .dark .gw-node-engine,
    .dark .gw-node-top,
    .dark .gw-node-status,
    .dark .gw-node-error,
    .dark .gw-node-notify {
        box-shadow:
            0 8px 24px -8px rgba(0, 0, 0, .35),
            0 2px 6px rgba(0, 0, 0, .2),
            0 0 0 1px rgba(255, 255, 255, .06);
    }

    /* Status card (Processing / In Progress / Success) */
    .gw-node-status {
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .gw-node-status:hover {
        transform: translateY(-2px);
        box-shadow:
            0 12px 30px -8px rgba(0, 0, 0, .1),
            0 4px 10px rgba(0, 0, 0, .06),
            0 0 0 1px rgba(255, 255, 255, .12);
    }

    /* Error card (Failed / Rejected / Retry) — muted styling */
    .gw-node-error {
        opacity: .75;
        transition: opacity .2s ease, transform .2s ease;
    }

    .gw-node-error:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

    /* Circular progress ring */
    .gw-progress-ring {
        transform: rotate(-90deg);
        transform-origin: center;
    }

    @keyframes gwRingDraw {
        from {
            stroke-dashoffset: var(--ring-full);
        }

        to {
            stroke-dashoffset: var(--ring-target);
        }
    }

    .gw-ring-animate circle.gw-ring-fill {
        animation: gwRingDraw 1.8s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* Engine outer ring — continuous rotation (clockwise) */
    @keyframes gwEngineRingSpin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .gw-engine-ring {
        animation: gwEngineRingSpin 6s linear infinite;
        transform-origin: center;
    }

    /* Counter-rotating outer orbit (360° reverse) */
    @keyframes gwEngineOrbitRev {
        from {
            transform: rotate(0deg);
        }

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

    .gw-engine-orbit {
        animation: gwEngineOrbitRev 10s linear infinite;
        transform-origin: var(--tw-translate-x, 50%) var(--tw-translate-y, 50%);
    }

    @keyframes gwEngineGlow {

        0%,
        100% {
            filter: drop-shadow(0 0 4px rgba(3, 217, 240, .3));
        }

        50% {
            filter: drop-shadow(0 0 12px rgba(3, 217, 240, .55));
        }
    }

    .gw-engine-glow {
        animation: gwEngineGlow 3s ease-in-out infinite;
    }

    /* Error icon animations */
    @keyframes gwShake {

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

        20% {
            transform: translateX(-2px);
        }

        40% {
            transform: translateX(2px);
        }

        60% {
            transform: translateX(-1px);
        }

        80% {
            transform: translateX(1px);
        }
    }

    @keyframes gwSpinSlow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes gwFailPulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .5;
        }
    }

    .gw-failed-icon {
        animation: gwShake 2.5s ease-in-out infinite;
    }

    .gw-rejected-icon {
        animation: gwFailPulse 2s ease-in-out infinite;
    }

    .gw-retry-icon {
        animation: gwSpinSlow 3s linear infinite;
    }

    /* Notify card — bell pulse */
    @keyframes gwBellPulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.15);
        }
    }

    .gw-bell-pulse {
        animation: gwBellPulse 2s ease-in-out infinite;
    }

    /* Status dot pulse */
    @keyframes gwStatusPulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: .5;
            transform: scale(1.3);
        }
    }

    .gw-status-pulse {
        animation: gwStatusPulse 2s ease-in-out infinite;
    }

    /* Result badge floating animation */
    @keyframes gwResultFloat {

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

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

    /* Flow wire continuous dash animation — two speeds */
    @keyframes gwFlowDash {
        to {
            stroke-dashoffset: -24;
        }
    }

    @keyframes gwFlowDashSlow {
        to {
            stroke-dashoffset: -18;
        }
    }

    .gw-wire-flow-down,
    .gw-wire-flow-left,
    .gw-wire-flow-right {
        animation: gwFlowDash 1.8s linear infinite;
    }

    .gw-wire-flow-branch {
        animation: gwFlowDashSlow 2.8s linear infinite;
    }

    /* Node entrance micro-animation */
    @keyframes gwNodeIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes gwNodeInError {
        from {
            opacity: 0;
            transform: translateY(6px) scale(0.95);
        }

        to {
            opacity: .7;
            transform: translateY(0) scale(1);
        }
    }

    /* Entrance animations use "backwards" fill (not "both"): a persisted
       final transform would override the Tailwind translate utilities
       (-translate-x-1/2) on centered cards and the .gw-node-active scale. */
    .gw-node-customer {
        animation: gwNodeIn .6s cubic-bezier(.22, 1, .36, 1) .15s backwards;
    }

    .gw-node-engine {
        animation: gwNodeIn .6s cubic-bezier(.22, 1, .36, 1) .3s backwards;
    }

    .gw-node-top {
        animation: gwNodeIn .5s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }

    .gw-node-left {
        animation: gwNodeIn .5s cubic-bezier(.22, 1, .36, 1) .45s backwards;
    }

    .gw-node-status[data-gw-pos="1"] {
        animation: gwNodeIn .45s cubic-bezier(.22, 1, .36, 1) .6s backwards;
    }

    .gw-node-status[data-gw-pos="2"] {
        animation: gwNodeIn .45s cubic-bezier(.22, 1, .36, 1) .7s backwards;
    }

    .gw-node-status[data-gw-pos="3"] {
        animation: gwNodeIn .45s cubic-bezier(.22, 1, .36, 1) .8s backwards;
    }

    .gw-node-error[data-gw-pos="1"] {
        animation: gwNodeInError .4s cubic-bezier(.22, 1, .36, 1) .9s backwards;
    }

    .gw-node-error[data-gw-pos="2"] {
        animation: gwNodeInError .4s cubic-bezier(.22, 1, .36, 1) 1s backwards;
    }

    .gw-node-error[data-gw-pos="3"] {
        animation: gwNodeInError .4s cubic-bezier(.22, 1, .36, 1) 1.1s backwards;
    }

    .gw-node-notify {
        animation: gwNodeIn .5s cubic-bezier(.22, 1, .36, 1) 1.15s backwards;
    }

    /* ═══ WALKTHROUGH HIGHLIGHT SYSTEM ═══ */

    .gw-node-active {
        border-color: rgba(3, 217, 240, 0.6) !important;
        box-shadow: 0 0 24px rgba(3, 217, 240, 0.3), 0 0 48px rgba(3, 217, 240, 0.1), 0 8px 24px -8px rgba(0, 0, 0, 0.3) !important;
        scale: 1.04;
        z-index: 30 !important;
        transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
    }

    .gw-node-dimmed {
        opacity: 0.55;
        filter: saturate(0.75);
        transition: opacity 0.4s ease, filter 0.4s ease;
    }

    .gw-wire-active {
        stroke-width: 3 !important;
        opacity: 1 !important;
        filter: drop-shadow(0 0 4px currentColor);
    }

    .gw-wire-done {
        stroke: #10b981 !important;
        opacity: 0.7 !important;
    }




    /* Walkthrough controls */
    .gw-walk-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        font-family: 'Chakra Petch', sans-serif;
        letter-spacing: 0.02em;
        border: 1px solid rgba(3, 217, 240, 0.3);
        background: rgba(3, 217, 240, 0.08);
        color: #03D9F0;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(.22, 1, .36, 1);
    }

    .gw-walk-btn:hover {
        background: rgba(3, 217, 240, 0.15);
        border-color: rgba(3, 217, 240, 0.5);
        box-shadow: 0 4px 20px rgba(3, 217, 240, 0.15);
    }

    .gw-walk-btn-primary {
        background: #03D9F0;
        color: #04252b;
        border-color: #03D9F0;
    }

    .gw-walk-btn-primary:hover {
        background: #03c0df;
        box-shadow: 0 6px 24px rgba(3, 217, 240, 0.35);
    }

    .gw-walk-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3f3f46;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .gw-walk-dot-done {
        background: #03D9F0;
        transform: scale(1);
    }

    .gw-walk-dot-active {
        background: #03D9F0;
        transform: scale(1.4);
        box-shadow: 0 0 8px rgba(3, 217, 240, 0.5);
    }

    /* Screen reader only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ═══ Flow panel container (hero right column) ═══
       Outer wrap is a responsive box; inner is a FIXED 700x920 canvas
       (same coordinate space as the SVG viewBoxes) scaled as a unit so
       orbit rings, wires and absolutely-positioned cards stay aligned. */
    .gw-wf-wrap {
        width: 700px;
        max-width: 100%;
        aspect-ratio: 700 / 920;
        margin-inline: auto;
    }

    .gsm-wf-inner {
        position: relative;
        width: 700px;
        height: 900px;
        transform-origin: top left;
        transform: scale(1);
    }

    .gw-flow-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Mobile stack arrows: hidden outside the mobile breakpoint */
    .gw-mobile-arrow {
        display: none;
    }

    /* Wire paths are stroke-only (SVG default fill:black would render
       large curves as filled blobs in light mode) */
    .gw-flow-svg path {
        fill: none;
    }

    /* Stepped scaling: wrap width = 700 x scale so there is no ghost space.
       Disjoint ranges: 1024-1199px -> 504px (0.72), 1200-1535px -> 595px
       (0.85), >=1536px -> full 700px (1.0). */
    @media (min-width: 1200px) and (max-width: 1535px) {
        .gw-wf-wrap {
            width: 595px;
        }

        .gsm-wf-inner {
            transform: scale(0.85);
        }
    }

    @media (min-width: 1024px) and (max-width: 1199px) {
        .gw-wf-wrap {
            width: 504px;
        }

        .gsm-wf-inner {
            transform: scale(0.72);
        }
    }

    @media (max-width: 1023px) and (min-width: 768px) {
        .gw-wf-wrap {
            width: 630px;
            margin-top: 3rem;
        }

        .gsm-wf-inner {
            transform: scale(0.9);
        }
    }

    @media (max-width: 767px) {


        .gw-wf-wrap {
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            aspect-ratio: auto !important;
            transform: none !important;
            border-radius: 16px;
            padding-bottom: 0;
        }

        .gw-wf-wrap .gsm-wf-inner {
            width: 100% !important;
            height: auto !important;
            transform: none !important;
        }

        .gw-wf-wrap .gw-node-top,
        .gw-wf-wrap .gw-node-customer,
        .gw-wf-wrap .gw-node-engine,
        .gw-wf-wrap .gw-node-left,
        .gw-wf-wrap .gw-node-status:not(.gw-node-orb),
        .gw-wf-wrap .gw-node-error:not(.gw-node-orb),
        .gw-wf-wrap .gw-node-notify {
            position: relative !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            transform: none !important;
            width: 100% !important;
            margin: 0 0 8px 0;
        }

        .gw-wf-wrap .gw-flow-svg,
        .gw-wf-wrap .gw-orbit-svg {
            display: none !important;
        }

        .gw-mobile-arrow {
            display: flex;
            justify-content: center;
            padding: 2px 0;
        }

        .gw-mobile-arrow svg {
            display: block !important;
            width: 16px;
            height: 16px;
            color: #03D9F0;
            opacity: 0.5;
        }

        /* ── Mobile hero left column: center badge + stack CTAs ── */
        .gw-hero-left {
            align-items: center;
            text-align: center;
        }

        .gw-hero-left .gw-reveal.gw-stagger-1 {
            display: inline-flex;
        }

        .gw-hero-left .gw-reveal.gw-stagger-1 span {
            display: inline-flex;
        }

        .gw-hero-left .gw-reveal.gw-stagger-4 {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .gw-hero-left .gw-reveal.gw-stagger-4 > a,
        .gw-hero-left .gw-reveal.gw-stagger-4 > button {
            width: 100%;
            justify-content: center;
        }

        /* Hero "Log in" ghost CTA: transparent + muted ink washes out against
           the photo hero on narrow screens. Give it a solid pill so it stays
           readable without changing the desktop tertiary-link treatment. */
        .gw-hero-left .gw-btn--ghost {
            display: none;
            padding: .875rem 1.75rem;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(4, 37, 43, .18);
            border-radius: .75rem;
            backdrop-filter: blur(8px);
            color: #3f3f46;
            text-shadow: none;
            font-weight: 600;
        }

        html.dark .gw-hero-left .gw-btn--ghost {
            background: rgba(15, 23, 42, .72);
            border-color: rgba(255, 255, 255, .22);
            color: #f4f4f5;
            text-shadow: none;
        }

        .gw-hero-left .gw-btn--ghost:hover {
            color: #0a6b78;
            background: #fff;
        }

        html.dark .gw-hero-left .gw-btn--ghost:hover {
            color: #03D9F0;
            background: rgba(255, 255, 255, .1);
        }

        .gw-hero-left .gw-reveal.gw-stagger-5 {
            justify-content: center;
            column-gap: 2rem;
            row-gap: 1rem;
        }

        .gw-hero-left .gw-reveal.gw-stagger-5 > div {
            align-items: center;
        }

        .gw-hero-left .gw-reveal.gw-stagger-5 span {
            text-align: center;
        }

        .gw-hero-left .gw-reveal.gw-stagger-5 .text-responsive-stat {
            font-size: clamp(1.5rem, 6vw, 2.25rem);
        }
    }

/* ═══ Responsive comparison tables (gw-cost-comparison) ═══ */

/* Desktop (min-width: 1024px): preserve normal table layout */
@media (min-width: 1024px) {
    #cost .gw-cost-comparison {
        min-width: 760px;
    }
}

/* Mobile/Tablet (max-width: 1023px): stacked card layout */
@media (max-width: 1023px) {
    #cost .overflow-x-auto {
        overflow-x: visible;
    }
    #cost .gw-cost-comparison {
        min-width: unset;
        width: 100%;
    }
    .gw-cost-comparison thead {
        display: none;
    }
    .gw-cost-comparison tbody {
        display: block;
    }
    .gw-cost-comparison tbody tr {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid rgba(244, 244, 245, 0.1);
        border-radius: 0.75rem;
        margin-bottom: 0.5rem;
        background: transparent;
    }
    .dark .gw-cost-comparison tbody tr {
        border-color: rgba(255, 255, 255, 0.1);
    }
    .gw-cost-comparison tbody tr:nth-child(even) {
        background: rgba(244, 244, 245, 0.3);
    }
    .dark .gw-cost-comparison tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.03);
    }
    .gw-cost-comparison tbody td {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.25rem 0;
        border: none !important;
        text-align: left;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
    .gw-cost-comparison tbody td::before {
        content: attr(data-label) ":";
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #71717a;
        flex-shrink: 0;
    }
    .dark .gw-cost-comparison tbody td::before {
        color: #a1a1aa;
    }
    .gw-cost-comparison tbody td[data-label="Features"]::before {
        color: rgb(3, 217, 240);
    }
    .dark .gw-cost-comparison tbody td[data-label="Features"]::before {
        color: rgb(3, 217, 240);
    }
    .gw-cost-comparison tbody td[colspan]::before {
        content: none;
    }
    .gw-cost-comparison tbody td[data-label="GsmWhale"] span {
        color: inherit;
    }
    .gw-cost-comparison tbody td[data-label="GsmWhale"] span[style*="rgb(3, 217, 240)"] {
        color: rgb(3, 217, 240);
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gw-cost-comparison {
        transition: none !important;
    }
}

/* ═══════════════════ PAGE LOADER (whale sonar) ═══════════════════ */
.gw-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: #060b14;
    transition: opacity .45s ease, visibility .45s ease;
}
html:not(.dark) .gw-loader {
    background: #f4f7fb;
}
.gw-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* CSS failsafe: if the JS never runs (blocked or missing bundle), auto-hide the
   loader so the page can never be permanently stuck behind it. */
.gw-loader {
    animation: gwLoaderFailsafe 0s linear 5s forwards;
}
@keyframes gwLoaderFailsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}
.gw-loader-inner {
    position: relative;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gw-loader-logo {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    object-fit: contain;
    animation: gwLoaderPop 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(3, 217, 240, .45));
}
@keyframes gwLoaderPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.gw-loader-rings {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.gw-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 2px solid rgba(3, 217, 240, .55);
    opacity: 0;
    animation: gwLoaderSonar 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}
.gw-loader-ring:nth-child(2) { animation-delay: .8s; }
.gw-loader-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes gwLoaderSonar {
    0% { transform: scale(.45); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}
.gw-loader-word {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}
.gw-loader-word span { color: rgb(3, 217, 240); }
html:not(.dark) .gw-loader-word { color: rgba(10, 16, 28, .8); }

/* page reveal after loader */
.gw-page-enter {
    animation: gwPageIn .6s ease both;
}
@keyframes gwPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .gw-loader-logo, .gw-loader-ring, .gw-page-enter { animation: none !important; }
    .gw-loader { transition: none; }
}

/* ═══ Hero media: themed background image, fades to looping video after 5s ═══ */
.gw-hero-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.gw-hero-bg,
.gw-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gw-hero-bg-dark { display: none; }
html.dark .gw-hero-bg-light { display: none; }
html.dark .gw-hero-bg-dark { display: block; }
.gw-hero-video {
    opacity: 0;
    transition: opacity 1.2s ease;
}
.gw-hero-media.is-on .gw-hero-video { opacity: 1; }

/* ── Hero readability scrim ──
   The hero headline, subtitle and stat row sit directly on the whale/water
   footage, whose brightest highlights are near-white and often land exactly
   under the text. A text-shadow halo alone cannot fix that: in dark mode the
   halo is dark while the video is bright, so it muddies rather than separates,
   and measured contrast for the headline dropped to 1.11:1 (WCAG wants 3:1 for
   large text). This layer washes the busiest part of the frame toward the page
   surface so the copy always clears the bar, while keeping the footage visible.
   Sits above the media but below the content, so pointer events are unaffected. */
.gw-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(248, 250, 252, .78) 0%,
            rgba(248, 250, 252, .42) 38%,
            rgba(248, 250, 252, .62) 68%,
            rgba(248, 250, 252, .88) 100%);
}

html.dark .gw-hero-media::after {
    background:
        linear-gradient(180deg,
            rgba(2, 8, 23, .62) 0%,
            rgba(2, 8, 23, .34) 38%,
            rgba(2, 8, 23, .58) 68%,
            rgba(2, 8, 23, .88) 100%);
}

/* On narrow screens the copy column is narrower and sits over the brightest
   part of the frame, so the scrim needs to work harder. */
@media (max-width: 767px) {
    .gw-hero-media::after {
        background:
            linear-gradient(180deg,
                rgba(248, 250, 252, .84) 0%,
                rgba(248, 250, 252, .62) 45%,
                rgba(248, 250, 252, .80) 100%);
    }

    html.dark .gw-hero-media::after {
        background:
            linear-gradient(180deg,
                rgba(2, 8, 23, .72) 0%,
                rgba(2, 8, 23, .55) 45%,
                rgba(2, 8, 23, .82) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gw-hero-video { display: none; }
}

/* ── Touch-target expansion for compact nav controls ──
   The theme toggle and the mobile hamburger are both 32 px circles. That is
   the visual size we want, but it is below the 44 px minimum recommended by
   WCAG 2.5.5 and genuinely fiddly to hit on a phone. Rather than grow the
   painted circle (which would loosen the nav layout and shift the icon
   alignment), we keep the 32 px box and extend an invisible ::after layer
   outwards by 6 px on every side — giving a 44 x 44 px hit area with zero
   visual change.

   The ::after must not swallow clicks meant for anything underneath, so it
   stays inside the button's own stacking context and the button itself
   carries position: relative. */
.gw-tap {
    position: relative;
}

.gw-tap::after {
    content: "";
    position: absolute;
    inset: -6px;
    /* purely a hit target — never paints */
    background: none;
    border-radius: inherit;
}

/* The hero sound toggle is a 38 px circle; give it the same treatment so it
   reaches 44 px without being resized. */
.gw-hero-sound::after {
    content: "";
    position: absolute;
    inset: -3px;
    background: none;
    border-radius: inherit;
}

/* ── Scroll affordance for horizontal scroll regions ──
   The mobile tab strip and the cost-comparison table scroll sideways, but at
   rest there is no cue that more content exists off-screen — the rightmost
   item simply looks like the last one. The classic fix is a pair of gradients
   pinned to the scroll container's edges.

   The trick that makes this JS-free: `background-attachment: local` makes the
   gradient scroll WITH the content, while `scroll` pins it to the viewport.
   Layering one of each means the left fade only appears once you've scrolled
   away from the start, and the right fade disappears once you reach the end —
   exactly the behaviour you'd otherwise need a scroll listener for.

   The cover layers use the page surface colour so the shadows read as a soft
   edge rather than a dusty band. */
.gw-scroll-x {
    overflow-x: auto;
    background:
        /* cover (pinned to the viewport edge) */
        linear-gradient(to right, var(--gw-surface) 30%, transparent) left / 40px 100% no-repeat local,
        linear-gradient(to left, var(--gw-surface) 30%, transparent) right / 40px 100% no-repeat local,
        /* shadow (scrolls with the content) */
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 14px 100% no-repeat scroll;
}

html.dark .gw-scroll-x {
    background:
        linear-gradient(to right, var(--gw-surface) 30%, transparent) left / 40px 100% no-repeat local,
        linear-gradient(to left, var(--gw-surface) 30%, transparent) right / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .45), transparent) left / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent) right / 14px 100% no-repeat scroll;
}

/* ═══ Hero media sound toggle (top-right, clears the fixed header) ═══ */
.gw-hero-sound {
    position: absolute;
    top: 84px;
    right: 20px;
    left: auto;
    bottom: auto;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .72);
    color: #1e293b;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
    cursor: pointer;
}
.gw-hero-sound.is-ready {
    opacity: 1;
    transform: translateY(0);
}
.gw-hero-sound.is-on {
    border-color: rgba(3, 217, 240, .45);
    background: rgba(3, 217, 240, .9);
    color: #04252b;
}
.gw-hero-sound .gw-snd-on { display: none; }
.gw-hero-sound.is-on .gw-snd-on { display: block; }
.gw-hero-sound.is-on .gw-snd-off { display: none; }
html.dark .gw-hero-sound {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #e4e4e7;
}
html.dark .gw-hero-sound.is-on {
    border-color: rgba(3, 217, 240, .55);
    background: rgba(3, 217, 240, .18);
    color: #7be9fd;
}
@media (min-width: 640px) {
    .gw-hero-sound { right: 32px; }
}
@media (min-width: 1024px) {
    .gw-hero-sound { right: 48px; }
}
@media (min-width: 1280px) {
    .gw-hero-sound { right: 64px; }
}

/* ===== BUILT FOR EVERY GSM — light-mode section bg with gentle drift ===== */

.gw-sec-built {
    position: relative;
    overflow: hidden;
}

.gw-sec-built::before {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: -10;
    background-image:
        linear-gradient(180deg, rgba(248,250,252,.9) 0%, rgba(222,240,245,.48) 40%, rgba(248,250,252,.88) 100%);
    filter: saturate(1.15) hue-rotate(-8deg);
    will-change: transform;
    animation: gwBgDrift 26s ease-in-out infinite alternate;
    pointer-events: none;
}

.dark .gw-sec-built::before {
    background-image: none;
    animation: none;
    filter: none;
}

@keyframes gwBgDrift {
    0% {
        transform: translate3d(-1.6%, -1%, 0) scale(1.03);
    }
    50% {
        transform: translate3d(1.2%, 1.4%, 0) scale(1.08);
    }
    100% {
        transform: translate3d(-1.2%, .6%, 0) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gw-sec-built::before {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOLAR-SYSTEM ORBIT SCENE — hero right column ("GSMWHALE ORDER FLOW")
   A self-contained scene layered inside .gsm-wf-inner: deep gradient
   backdrop, tilted elliptical orbit rings around a glowing engine core,
   numbered step pills on the wire layer. Ambient motion is subtle and
   fully disabled under prefers-reduced-motion (see the list above).
   ═══════════════════════════════════════════════════════════════════════ */

/* Caption above the panel */
.gw-wf-caption-eyebrow {
    text-shadow: 0 0 18px rgba(3, 217, 240, .25);
}

.gw-wf-caption-title {
    letter-spacing: .16em;
}

/* Scene surface: fully transparent (site backdrop shows through the canvas) */
.gw-orbit-scene {
    border-radius: 24px;
    overflow: hidden;
    background: transparent;
}

.dark .gw-orbit-scene {
    background: transparent;
}

.gw-orbit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Star twinkle */
@keyframes gwStarTwinkle {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: .2;
    }
}

.gw-stars circle {
    animation: gwStarTwinkle 5.5s ease-in-out infinite;
}

.gw-stars circle:nth-child(3n) {
    animation-delay: -1.8s;
}

.gw-stars circle:nth-child(3n+1) {
    animation-delay: -3.6s;
}

/* Orbit ring drift — a slow stroke-dash crawl instead of rotating the
   whole ellipse group (cheap, and it does not move the cards). */
@keyframes gwRingDrift {
    to {
        stroke-dashoffset: -240;
    }
}

.gw-orbit-ring {
    animation: gwRingDrift 60s linear infinite;
}

/* Planet travel is handled by SVG <animateMotion>; stagger it */
.gw-planet {
    animation: gwStarTwinkle 7s ease-in-out infinite;
}

.gw-planet:nth-of-type(2) {
    animation-delay: -3.5s;
}

/* Light rays shimmer */
@keyframes gwRayShimmer {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: .9;
    }
}

.gw-rays polygon {
    animation: gwRayShimmer 9s ease-in-out infinite;
}

.gw-rays polygon:nth-child(2) {
    animation-delay: -3s;
}

.gw-rays polygon:nth-child(3) {
    animation-delay: -6s;
}

/* ── Engine core: solar-system halo + orbiting satellite dots ── */
.gw-orbit-core {
    border-radius: 20px;
    overflow: visible;
}

.dark .gw-orbit-core {
    border-color: rgba(125, 211, 252, .22) !important;
    box-shadow:
        0 24px 70px -18px rgba(34, 130, 255, .35),
        0 0 46px -6px rgba(3, 217, 240, .28),
        0 0 0 1px rgba(125, 211, 252, .12),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

html:not(.dark) .gw-orbit-core {
    box-shadow:
        0 24px 60px -22px rgba(34, 130, 255, .45),
        0 0 34px -8px rgba(3, 217, 240, .30),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

@keyframes gwCoreHaloPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

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

.gw-core-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    border-radius: 9999px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle,
            rgba(3, 217, 240, .22) 0%,
            rgba(37, 99, 235, .16) 34%,
            rgba(37, 99, 235, .05) 58%,
            transparent 72%);
    animation: gwCoreHaloPulse 5s ease-in-out infinite;
}

@keyframes gwSatOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.gw-core-satellite {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.gw-core-satellite svg {
    display: block;
}

.gw-core-satellite--a {
    animation: gwSatOrbit 16s linear infinite;
}

.gw-core-satellite--a svg {
    transform: translate(96px, -5px);
}

.gw-core-satellite--b {
    animation: gwSatOrbit 11s linear infinite reverse;
}

.gw-core-satellite--b svg {
    transform: translate(66px, -4px);
}

/* ── Numbered step pills on the wire layer ── */
@keyframes gwPillGlow {

    0%,
    100% {
        opacity: .85;
    }

    50% {
        opacity: 1;
    }
}

.gw-step-pill rect {
    animation: gwPillGlow 3.2s ease-in-out infinite;
}

/* ═══ Mobile: scene keeps a soft gradient behind the stacked cards ═══ */
@media (max-width: 767px) {
    .gw-orbit-scene {
        border-radius: 16px;
    }

    .gw-core-halo,
    .gw-core-satellite {
        display: none;
    }
}

/* ═══ Reduced motion: the walker list above already targets every orbit
   class; also pin the SVG <animateMotion>/<animate> elements off via SMIL
   pause and stop dash crawls so nothing drifts for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {

    .gw-orbit-ring,
    .gw-stars circle,
    .gw-rays polygon,
    .gw-planet,
    .gw-step-pill rect {
        animation: none !important;
    }

    .gw-core-halo,
    .gw-core-satellite {
        animation: none !important;
        opacity: .6;
    }

    .gw-wf-wrap .gw-orbit-svg .gw-planet {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   POSTER MATCH — "GSMWHALE ORDER FLOW" solar system, 100% reference build
   Deep-space backdrop + 6 tilted rings + shaded traveling planets (SVG),
   poster glass cards with floating icon bubbles, glowing circular neon
   status/outcome nodes. Motion stays reduced-motion safe; walkthrough
   classes (gw-node-active / gw-node-dimmed) keep working unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* Scene backdrop: opaque canvas slab behind the orbit only — the hero
   photo/video still shows everywhere else around it. */
html.dark .gw-orbit-scene {
    background:
        radial-gradient(circle at 50% 28%, #0a1d33 0%, #06111f 55%, #040b16 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 30px 70px -30px rgba(0, 0, 0, .7);
}

html:not(.dark) .gw-orbit-scene {
    background:
        radial-gradient(circle at 50% 28%, #ffffff 0%, #f2f7fd 58%, #e3edfa 100%);
    box-shadow:
        0 0 0 1px rgba(30, 80, 160, .10),
        0 30px 60px -30px rgba(30, 80, 160, .35);
}

/* Cards: WHITE backgrounds with bright blue glowing border (reference match) */
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) {
    background-color: #ffffff !important;
    border: 2px solid rgba(56, 130, 246, .45) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 0 18px rgba(56, 130, 246, .25),
        0 0 40px rgba(56, 130, 246, .12),
        0 12px 34px -12px rgba(0, 0, 0, .6);
    color: #1e293b !important;
}

/* Force dark text inside white cards */
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-3d-label,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) span {
    color: #1e293b !important;
}

html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-card-divider {
    background: linear-gradient(90deg, rgba(56, 130, 246, .08), rgba(56, 130, 246, .3), rgba(56, 130, 246, .08));
}

/* White card status dots remain green in dark mode */
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-status-pulse,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .bg-emerald-500 {
    background-color: #10b981 !important;
}

/* White card status text */
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-500,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-300,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-700 {
    color: #059669 !important;
}

html:not(.dark) div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) {
    background-color: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(56, 130, 246, .22) !important;
    box-shadow:
        0 12px 30px -14px rgba(30, 80, 160, .28),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

html.dark .gw-node-wrap.gw-poster-card.gw-node-active {
    border-color: rgba(3, 217, 240, .55) !important;
}

/* Orbs dim by tint shift, not by background swap (their identity is the glow) */
.gw-node-orb.gw-node-dimmed {
    filter: saturate(.55) brightness(.8) !important;
}

/* Floating circular icon bubble on the card's top edge */
.gw-icon-bubble {
    position: absolute;
    top: 0;
    left: 18px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

html.dark .gw-icon-bubble {
    background: #f0f4ff;
    box-shadow:
        0 0 0 1px rgba(56, 130, 246, .25),
        0 4px 14px rgba(56, 130, 246, .15);
}

html:not(.dark) .gw-icon-bubble {
    background: #f6faff;
    box-shadow:
        0 0 0 1px rgba(56, 130, 246, .25),
        0 4px 12px rgba(30, 80, 160, .18);
}

.gw-icon-bubble--violet { left: 18px; }
.gw-icon-bubble--green { left: 18px; }
.gw-icon-bubble--cyan { left: 18px; }

.gw-core-logo-bubble { left: auto; }

/* Neon status text on poster cards */
.gw-poster-card .gw-status-pulse + span,
.gw-poster-card .text-\[9px\].font-semibold {
    text-shadow: 0 0 10px rgba(3, 217, 240, .25);
}

/* ── Glowing circular neon nodes (status + outcomes) ── */
.gw-node-orb {
    position: absolute;
    border-radius: 9999px;
    transition: scale .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, filter .35s ease;
}

.gw-orb-in {
    position: relative;
    z-index: 1;
    gap: 1px;
}

.gw-orb-glow {
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    pointer-events: none;
    opacity: .8;
    background: radial-gradient(circle, var(--orb-glow, rgba(3, 217, 240, .35)) 0%, transparent 66%);
    animation: gwOrbBreathe 3.6s ease-in-out infinite;
}

@keyframes gwOrbBreathe {

    0%,
    100% {
        opacity: .55;
        transform: scale(.97);
    }

    50% {
        opacity: .95;
        transform: scale(1.04);
    }
}

.gw-orb-sweep {
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    pointer-events: none;
    opacity: .5;
    border: 1px dashed var(--orb-edge, rgba(3, 217, 240, .5));
    animation: gwOrbSpin 14s linear infinite;
}

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

.gw-node-orb.gw-node-active {
    scale: 1.08;
}

.gw-node-orb.gw-node-active .gw-orb-sweep {
    opacity: 1;
    animation-duration: 6s;
}

/* Per-colour orbs: ring + text + glow in one palette */
.gw-orb-amber {
    border: 1.5px solid rgba(245, 158, 11, .85);
    background:
        radial-gradient(circle at 32% 26%, rgba(245, 158, 11, .22), rgba(10, 14, 28, .96) 62%);
    color: #fbbf24;
    --orb-glow: rgba(245, 158, 11, .30);
    --orb-edge: rgba(245, 158, 11, .55);
}

.gw-orb-amber .gw-orb-num { color: #fbbf24; text-shadow: 0 0 12px rgba(245, 158, 11, .5); }
.gw-orb-amber .gw-orb-label { color: #fff; }
.gw-orb-amber .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-cyan {
    border: 1.5px solid rgba(34, 211, 238, .85);
    background:
        radial-gradient(circle at 32% 26%, rgba(34, 211, 238, .22), rgba(6, 16, 34, .96) 62%);
    color: #22d3ee;
    --orb-glow: rgba(34, 211, 238, .30);
    --orb-edge: rgba(34, 211, 238, .55);
}

.gw-orb-cyan .gw-orb-num { color: #22d3ee; text-shadow: 0 0 12px rgba(34, 211, 238, .5); }
.gw-orb-cyan .gw-orb-label { color: #fff; }
.gw-orb-cyan .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-green {
    border: 1.5px solid rgba(52, 211, 153, .85);
    background:
        radial-gradient(circle at 32% 26%, rgba(52, 211, 153, .22), rgba(5, 20, 16, .96) 62%);
    color: #34d399;
    --orb-glow: rgba(52, 211, 153, .30);
    --orb-edge: rgba(52, 211, 153, .55);
}

.gw-orb-green .gw-orb-num { color: #34d399; text-shadow: 0 0 12px rgba(52, 211, 153, .5); }
.gw-orb-green .gw-orb-label { color: #fff; }
.gw-orb-green .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-red {
    border: 1.5px solid rgba(248, 113, 113, .85);
    background:
        radial-gradient(circle at 32% 26%, rgba(239, 68, 68, .24), rgba(24, 8, 10, .96) 62%);
    color: #f87171;
    --orb-glow: rgba(239, 68, 68, .30);
    --orb-edge: rgba(239, 68, 68, .55);
}

.gw-orb-red .gw-orb-num { color: #fca5a5; text-shadow: 0 0 10px rgba(239, 68, 68, .5); }
.gw-orb-red .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-amber2 {
    border: 1.5px solid rgba(251, 191, 36, .9);
    background:
        radial-gradient(circle at 32% 26%, rgba(249, 115, 22, .24), rgba(22, 12, 4, .96) 62%);
    color: #fbbf24;
    --orb-glow: rgba(249, 115, 22, .32);
    --orb-edge: rgba(251, 191, 36, .6);
}

.gw-orb-amber2 .gw-orb-num { color: #fbbf24; text-shadow: 0 0 10px rgba(249, 115, 22, .5); }
.gw-orb-amber2 .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-violet {
    border: 1.5px solid rgba(167, 139, 250, .9);
    background:
        radial-gradient(circle at 32% 26%, rgba(139, 92, 246, .24), rgba(14, 10, 28, .96) 62%);
    color: #c4b5fd;
    --orb-glow: rgba(139, 92, 246, .32);
    --orb-edge: rgba(167, 139, 250, .6);
}

.gw-orb-violet .gw-orb-num { color: #d8ccfe; text-shadow: 0 0 10px rgba(139, 92, 246, .5); }
.gw-orb-violet .gw-orb-sub { color: rgba(255, 255, 255, .62); }

.gw-orb-num {
    display: block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: .02em;
}

.gw-orb-num--sm {
    font-size: 9.5px;
    letter-spacing: .12em;
}

.gw-orb-label {
    display: block;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.15;
}

.gw-orb-sub {
    display: block;
    font-weight: 500;
    font-size: 8px;
    line-height: 1.2;
}

.gw-orb-ico {
    margin-bottom: 2px;
}

.gw-orb-ico--spin {
    animation: gwOrbSpin 6s linear infinite;
}

/* Divider line inside bottom cards */
.gw-card-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 211, 252, .05), rgba(125, 211, 252, .35), rgba(125, 211, 252, .05));
}

html:not(.dark) .gw-card-divider {
    background: linear-gradient(90deg, rgba(56, 130, 246, .05), rgba(56, 130, 246, .3), rgba(56, 130, 246, .05));
}
/* ── Fit-to-screen: never let the scaled canvas exceed the viewport height ── */
@media (min-width: 1024px) {

    @media (max-height: 949px) {
        .gw-wf-wrap {
            width: 504px;
        }

        .gsm-wf-inner {
            transform: scale(0.72);
        }
    }

    @media (min-height: 950px) and (max-height: 1109px) {
        .gw-wf-wrap {
            width: 595px;
        }

        .gsm-wf-inner {
            transform: scale(0.85);
        }
    }
}

/* ── Poster-mode reduced-motion gates ── */
@media (prefers-reduced-motion: reduce) {

    .gw-orb-glow,
    .gw-orb-sweep,
    .gw-orb-ico--spin {
        animation: none !important;
    }

    .gw-node-orb .gw-orb-glow {
        opacity: .55;
    }
}

/* ═══ Mobile: orbs center themselves; bubbles/dividers stay poster-styled ═══ */
@media (max-width: 767px) {

    .gw-node-orb {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto 8px;
    }

    .gw-icon-bubble {
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    .gw-poster-card .pl-6 {
        padding-left: 0 !important;
        text-align: center;
    }

    .gw-poster-card .gw-card-divider + div {
        justify-content: center;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   SOLAR-SYSTEM SPECTRA — spec build: central sphere core, poster branding,
   underwater bubbles, lower-orbit nodes, flowing connectors.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Central engine: large earth-like glowing sphere at the orbit centre ── */
.gw-orbit-core.gw-engine-sphere {
    border-radius: 9999px !important;
    overflow: visible;
}

html.dark .gw-engine-sphere {
    background-image:
        radial-gradient(circle at 32% 26%, rgba(56, 160, 255, .45), rgba(7, 18, 48, .97) 58%),
        radial-gradient(circle at 50% 118%, rgba(3, 217, 240, .30), transparent 55%);
    border-color: rgba(96, 200, 255, .55) !important;
}

html:not(.dark) .gw-engine-sphere {
    background-image:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .96), rgba(216, 237, 255, .98) 46%, rgba(170, 212, 248, .98));
    border-color: rgba(22, 139, 255, .5) !important;
}

/* Orchestrator line reads brand-cyan inside the sphere (poster) */
html.dark .gw-engine-sphere .gw-label-text {
    color: #7dd3fc;
}

html:not(.dark) .gw-engine-sphere .gw-label-text {
    color: #0369a1;
}

/* Energy core behind the whale logo */
.gw-core-logo {
    animation: gwEngineGlow 3s ease-in-out infinite;
}

/* ── Poster branding corners ── */
.gw-brand-mark {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    line-height: 1.5;
    pointer-events: none;
    white-space: nowrap;
    color: rgba(165, 215, 255, .72);
    text-shadow: 0 0 10px rgba(3, 217, 240, .35);
}

html:not(.dark) .gw-brand-mark {
    color: rgba(8, 60, 110, .78);
    text-shadow: none;
}

.gw-brand-name {
    font-size: 13px;
    letter-spacing: .3em;
    color: #e8fbff;
    text-shadow: 0 0 14px rgba(3, 217, 240, .6);
}

html:not(.dark) .gw-brand-name {
    color: #0c4a6e;
    text-shadow: none;
}

.gw-brand-tl {
    top: 12px;
    left: 16px;
}

.gw-brand-tr {
    top: 12px;
    right: 16px;
    text-align: right;
    align-items: flex-end;
}

.gw-brand-b {
    bottom: 16px;
    right: 22px;
    left: auto;
    transform: rotate(-3deg);
    transform-origin: right bottom;
    text-align: right;
    align-items: flex-end;
    gap: 1px;
}

/* Bottom-left brand line (spec: GSMWHALE + ONE ENGINE quote) */
.gw-brand-a {
    bottom: 16px;
    left: 22px;
    right: auto;
    text-align: left;
    align-items: flex-start;
    gap: 2px;
}

.gw-brand-quote {
    font-size: 6.5px;
    letter-spacing: .18em;
    opacity: .92;
}

/* ── Notera Bold signature — brand name ── */
.gw-brand-name-sig {
    font-family: 'Notera', cursive;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.1;
    background: linear-gradient(135deg, #03D9F0 0%, #2563eb 40%, #a78bfa 80%, #03D9F0 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(3, 217, 240, .5)) drop-shadow(0 0 16px rgba(3, 217, 240, .25));
    animation: gwSigShimmer 6s ease-in-out infinite;
}

@keyframes gwSigShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ── Signature underline ── */
.gw-brand-sig-line {
    display: block;
    width: 80%;
    height: 1px;
    margin-left: auto;
    background: linear-gradient(90deg, transparent, rgba(3, 217, 240, .5), rgba(167, 139, 250, .35), transparent);
    filter: drop-shadow(0 0 4px rgba(3, 217, 240, .3));
}

/* ── Tagline ── */
.gw-brand-tagline {
    display: block;
    font-family: 'Notera', cursive;
    font-size: 10px;
    letter-spacing: .06em;
    opacity: .4;
    color: rgba(165, 215, 255, .65);
}

html:not(.dark) .gw-brand-name-sig {
    background: linear-gradient(135deg, #0369a1 0%, #2563eb 40%, #7c3aed 80%, #0369a1 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px rgba(56, 130, 246, .2));
    animation: gwSigShimmer 6s ease-in-out infinite;
}

html:not(.dark) .gw-brand-sig-line {
    background: linear-gradient(90deg, transparent, rgba(56, 130, 246, .3), rgba(124, 58, 237, .2), transparent);
    filter: none;
}

html:not(.dark) .gw-brand-tagline {
    opacity: .45;
    color: #64748b;
}

/* ── Underwater bubbles + micro-particles (rising, staggered) ── */
.gw-bubbles circle {
    fill: rgba(125, 211, 252, .06);
    stroke: rgba(125, 211, 252, .45);
    stroke-width: 1;
    opacity: .45;
    animation: gwBubbleRise 13s ease-in-out infinite;
}

.gw-bubbles .gw-bubble-dot {
    fill: rgba(190, 240, 255, .55);
    stroke: none;
    animation-duration: 9s;
}

.gw-bubbles circle:nth-child(2n) {
    animation-delay: -4s;
}

.gw-bubbles circle:nth-child(3n) {
    animation-delay: -8s;
    animation-duration: 16s;
}

.gw-bubbles circle:nth-child(5n) {
    animation-delay: -12s;
    animation-duration: 11s;
}

@keyframes gwBubbleRise {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    12% {
        opacity: .8;
    }

    88% {
        opacity: .5;
    }

    100% {
        transform: translateY(-170px);
        opacity: 0;
    }
}

/* ── Glowing nodes resting on the lower orbits ── */
.gw-arc-node {
    animation: gwStarTwinkle 4.5s ease-in-out infinite;
}

.gw-arc-node:nth-of-type(2) {
    animation-delay: -1.5s;
}

.gw-arc-node:nth-of-type(3) {
    animation-delay: -3s;
}

/* ── notify → result glowing arrow (always visible, pulses brighter) ── */
.gw-notify-link {
    filter: drop-shadow(0 0 4px rgba(3, 217, 240, .8));
}

/* ── Order Processing: spinning gear + luminous poster bar ── */
.gw-gear-chip svg {
    animation: gwEngineRingSpin 8s linear infinite;
}

.gw-bar-poster {
    position: relative;
    overflow: hidden;
    animation: gwBarPulse 4s ease-in-out infinite;
}

/* Sweeping energy highlight across the bar */
.gw-bar-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .35) 52%, transparent 70%);
    animation: gwBarShine 3.5s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes gwBarPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(124, 58, 237, .4), 0 0 3px rgba(3, 217, 240, .5); }
    50%      { box-shadow: 0 0 16px rgba(124, 58, 237, .7), 0 0 6px rgba(3, 217, 240, .85); }
}

@keyframes gwBarShine {
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

/* ── Mobile: hide poster corners, keep the sphere a centred circle ── */
@media (max-width: 767px) {

    .gw-brand-mark {
        display: none;
    }

    .gw-wf-wrap .gw-node-engine.gw-engine-sphere {
        width: 200px !important;
        height: 200px !important;
        left: auto !important;
        margin: 0 auto 8px;
    }
}

/* ── Reduced motion: freeze the new ambient layers ── */
@media (prefers-reduced-motion: reduce) {

    .gw-bubbles circle,
    .gw-arc-node,
    .gw-notify-link,
    .gw-gear-chip svg,
    .gw-core-logo,
    .gw-bar-poster,
    .gw-bar-poster::after {
        animation: none !important;
    }

    .gw-bar-poster {
        box-shadow: 0 0 10px rgba(124, 58, 237, .55), 0 0 4px rgba(3, 217, 240, .6);
    }

    .gw-bubbles circle {
        opacity: .45;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   100% REFERENCE MATCH v2 — pure black bg, white cards, neon everything
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Engine: much brighter outer glow ring ── */
.gw-engine-ring-outer {
    position: absolute;
    inset: -10px;
    border-radius: 9999px;
    border: 3px solid rgba(3, 217, 240, .85);
    box-shadow:
        0 0 20px rgba(3, 217, 240, .7),
        0 0 50px rgba(3, 217, 240, .4),
        0 0 100px rgba(3, 217, 240, .2),
        inset 0 0 20px rgba(3, 217, 240, .25);
    pointer-events: none;
    animation: gwEngineRingPulse 4s ease-in-out infinite;
}

@keyframes gwEngineRingPulse {
    0%, 100% { opacity: .85; box-shadow: 0 0 20px rgba(3,217,240,.7), 0 0 50px rgba(3,217,240,.4), 0 0 100px rgba(3,217,240,.2); }
    50%      { opacity: 1;   box-shadow: 0 0 30px rgba(3,217,240,.9), 0 0 70px rgba(3,217,240,.5), 0 0 140px rgba(3,217,240,.3); }
}

.gw-core-logo {
    animation: gwEngineGlow 3s ease-in-out infinite;
}

@keyframes gwEngineGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(3,217,240,.6)); }
    50%      { filter: drop-shadow(0 0 24px rgba(3,217,240,.85)); }
}

/* ── Status orbs: larger size, bigger glow, bigger text ── */
.gw-node-status.gw-node-orb {
    width: 120px !important;
    height: 120px !important;
}

.gw-orb-glow {
    inset: -28px !important;
}

.gw-orb-num {
    font-size: 24px !important;
    line-height: 1.05;
    font-weight: 700;
}

.gw-orb-sweep {
    border-width: 2px !important;
    opacity: .8 !important;
    box-shadow:
        0 0 12px var(--orb-glow, rgba(3, 217, 240, .4)),
        inset 0 0 12px var(--orb-glow, rgba(3, 217, 240, .2));
}

/* Body glow on all orbs — MUCH brighter */
.gw-orb-amber  { box-shadow: 0 0 30px rgba(245, 158, 11, .45), 0 0 60px rgba(245, 158, 11, .2), 0 0 90px rgba(245, 158, 11, .1); }
.gw-orb-cyan   { box-shadow: 0 0 30px rgba(34, 211, 238, .45), 0 0 60px rgba(34, 211, 238, .2), 0 0 90px rgba(34, 211, 238, .1); }
.gw-orb-green  { box-shadow: 0 0 30px rgba(52, 211, 153, .45), 0 0 60px rgba(52, 211, 153, .2), 0 0 90px rgba(52, 211, 153, .1); }
.gw-orb-red    { box-shadow: 0 0 24px rgba(239, 68, 68, .45), 0 0 50px rgba(239, 68, 68, .2), 0 0 80px rgba(239, 68, 68, .1); }
.gw-orb-amber2 { box-shadow: 0 0 24px rgba(249, 115, 22, .45), 0 0 50px rgba(249, 115, 22, .2), 0 0 80px rgba(249, 115, 22, .1); }
.gw-orb-violet { box-shadow: 0 0 24px rgba(139, 92, 246, .45), 0 0 50px rgba(139, 92, 246, .2), 0 0 80px rgba(139, 92, 246, .1); }

.gw-node-error.gw-node-orb .gw-orb-glow {
    inset: -16px !important;
}

.gw-node-status.gw-node-orb {
    animation: gwOrbBounce 3s ease-in-out infinite;
}

.gw-node-status.gw-node-orb:nth-child(2) { animation-delay: -.8s; }
.gw-node-status.gw-node-orb:nth-child(3) { animation-delay: -1.6s; }

@keyframes gwOrbBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.gw-node-error.gw-node-orb {
    animation: gwOrbBounceSmall 2.5s ease-in-out infinite;
}

.gw-node-error.gw-node-orb:nth-child(2) { animation-delay: -.6s; }
.gw-node-error.gw-node-orb:nth-child(3) { animation-delay: -1.2s; }

@keyframes gwOrbBounceSmall {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ── Wire neon glow on ALL wires — MUCH brighter ── */
.gw-orbit-svg .gw-wire {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

.gw-orbit-svg .gw-arrow {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

/* ── Orbit ring neon glow — MUCH brighter ── */
.gw-orbit-svg .gw-orbit-ring {
    filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
}

/* ── Step pill glow — MUCH brighter ── */
.gw-step-pill {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

/* ── Planet glow pulse instead of opacity fade ── */
.gw-orbit-svg .gw-planet {
    animation: gwPlanetGlow 4s ease-in-out infinite;
}

@keyframes gwPlanetGlow {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor); opacity: .9; }
    50%      { filter: drop-shadow(0 0 6px currentColor); opacity: 1; }
}

.gw-orbit-svg .gw-planet:nth-of-type(2) { animation-delay: -1.5s; }
.gw-orbit-svg .gw-planet:nth-of-type(3) { animation-delay: -3s; }

/* ── Notify→Result arrow glow — MUCH brighter ── */
.gw-notify-link {
    filter: drop-shadow(0 0 8px rgba(3, 217, 240, 1)) drop-shadow(0 0 18px rgba(3, 217, 240, .5)) drop-shadow(0 0 30px rgba(3, 217, 240, .25));
}

/* ── Mobile: hide brand marks, keep sphere centered ── */
@media (max-width: 767px) {
    .gw-engine-ring-outer {
        display: none;
    }
}

/* ── Reduced motion: freeze new layers ── */
@media (prefers-reduced-motion: reduce) {
    .gw-engine-ring-outer,
    .gw-orbit-svg .gw-planet {
        animation: none !important;
    }

    .gw-node-status.gw-node-orb,
    .gw-node-error.gw-node-orb {
        animation: none !important;
    }

    .gw-engine-ring-outer {
        opacity: .9;
    }

    .gw-orbit-svg .gw-planet {
        opacity: .9;
        filter: none;
    }

    .gw-orbit-svg .gw-wire,
    .gw-orbit-svg .gw-arrow,
    .gw-orbit-svg .gw-orbit-ring,
    .gw-step-pill,
    .gw-notify-link {
        filter: none !important;
    }

    .gw-brand-name-sig {
        animation: none !important;
    }
}

/* ================================================================
   3D REFERENCE MATCH v2 - metallic gold-rimmed glass cards,
   glass-sphere status orbs, tube orbits, travelling packets.
   Appended last so it wins the cascade over the flat-poster block.
   ================================================================ */

/* -- Metallic gold-rimmed navy-glass cards (dark) -- */
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) {
    border: 2px solid transparent !important;
    background:
        linear-gradient(160deg, rgba(16,32,66,.94) 0%, rgba(9,18,40,.96) 55%, rgba(12,24,52,.96) 100%) padding-box,
        linear-gradient(135deg, #ffe9ad 0%, #d4a73f 16%, #8a5a13 38%, #5c3a0e 50%, #c99b45 66%, #ffe9ad 84%, #d4a73f 100%) border-box !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.55),
        0 10px 26px -10px rgba(0,0,0,.75),
        0 0 20px rgba(212,167,63,.18),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-3d-label,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) span {
    color: #eaf3ff !important;
}

html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-500,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-300,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .text-emerald-700,
html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-status-pulse + span {
    color: #34d399 !important;
}

html.dark div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) .gw-card-divider {
    background: linear-gradient(90deg, transparent, rgba(212,167,63,.55), transparent);
}

html.dark .gw-icon-bubble {
    background: rgba(14,28,58,.92);
    box-shadow:
        0 0 0 1.5px rgba(212,167,63,.65),
        0 0 12px rgba(3,217,240,.35),
        0 4px 14px rgba(0,0,0,.5);
}

html:not(.dark) div.gw-node-wrap.gw-poster-card:not(.gw-node-orb) {
    border: 1.6px solid transparent !important;
    background:
        linear-gradient(165deg, rgba(255,255,255,.97) 0%, rgba(238,246,255,.97) 60%, rgba(224,238,252,.97) 100%) padding-box,
        linear-gradient(135deg, #f2d489 0%, #c9973b 30%, #f7e6b0 55%, #a9761f 80%, #e8c470 100%) border-box !important;
    box-shadow:
        0 12px 28px -14px rgba(30,80,160,.35),
        0 0 14px rgba(201,151,59,.18),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* -- Glass-sphere status/outcome orbs (dark) -- */
html.dark .gw-node-orb { border-color: transparent !important; }

html.dark .gw-orb-amber {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.5) 0%, rgba(255,224,138,.28) 12%, rgba(251,191,36,.16) 30%, rgba(30,22,6,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.28),
        inset 0 -14px 22px rgba(245,158,11,.4),
        inset 0 0 0 1.5px rgba(253,230,138,.55),
        0 0 22px rgba(245,158,11,.5),
        0 0 48px rgba(245,158,11,.22) !important;
}

html.dark .gw-orb-cyan {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.5) 0%, rgba(165,243,252,.28) 12%, rgba(34,211,238,.16) 30%, rgba(4,18,34,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.28),
        inset 0 -14px 22px rgba(34,211,238,.4),
        inset 0 0 0 1.5px rgba(165,243,252,.55),
        0 0 22px rgba(34,211,238,.5),
        0 0 48px rgba(34,211,238,.22) !important;
}

html.dark .gw-orb-green {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.5) 0%, rgba(167,243,208,.28) 12%, rgba(52,211,153,.16) 30%, rgba(3,22,14,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.28),
        inset 0 -14px 22px rgba(52,211,153,.4),
        inset 0 0 0 1.5px rgba(167,243,208,.55),
        0 0 22px rgba(52,211,153,.5),
        0 0 48px rgba(52,211,153,.22) !important;
}

html.dark .gw-orb-red {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.45) 0%, rgba(252,165,165,.26) 12%, rgba(239,68,68,.16) 30%, rgba(28,6,8,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.25),
        inset 0 -14px 22px rgba(239,68,68,.42),
        inset 0 0 0 1.5px rgba(252,165,165,.55),
        0 0 22px rgba(239,68,68,.5),
        0 0 48px rgba(239,68,68,.22) !important;
}

html.dark .gw-orb-violet {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.45) 0%, rgba(216,180,254,.26) 12%, rgba(139,92,246,.16) 30%, rgba(16,8,30,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.25),
        inset 0 -14px 22px rgba(139,92,246,.42),
        inset 0 0 0 1.5px rgba(216,180,254,.55),
        0 0 22px rgba(139,92,246,.5),
        0 0 48px rgba(139,92,246,.22) !important;
}

/* -- 3D tube orbits + heavier step pills (dark) -- */
html.dark .gw-orbit-svg .gw-orbit-ring {
    stroke-width: 3.4 !important;
    filter:
        drop-shadow(0 0 3px rgba(3,217,240,.35))
        drop-shadow(0 1px 2px rgba(0,0,0,.8))
        drop-shadow(0 3px 8px rgba(0,0,0,.55));
}

html:not(.dark) .gw-orbit-svg .gw-orbit-ring {
    stroke-width: 2.6 !important;
    filter:
        drop-shadow(0 1px 1px rgba(255,255,255,.8))
        drop-shadow(0 2px 6px rgba(30,80,160,.25));
}

html.dark .gw-orbit-svg .gw-planet {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(3,217,240,.25));
}

html.dark .gw-orbit-svg .gw-step-pill rect {
    stroke-width: 1.3;
}

html.dark .gw-orbit-svg .gw-step-pill text {
    paint-order: stroke;
}

/* Progress bar: cyan -> blue -> violet -> magenta (reference) */
.gw-bar-core.gw-bar-poster {
    background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #8b5cf6 70%, #d946ef 100%) !important;
}

/* Engine title: bigger, whiter, luminous */
html.dark .gw-engine-sphere .gw-3d-label {
    font-size: 19px;
    letter-spacing: .02em;
    text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 18px rgba(3,217,240,.45);
}

/* -- Travelling data packets -- */
.gw-packets { pointer-events: none; }
.gw-packet  { fill: #eaffff; }
.gw-packet--cyan   { fill: #7ff3ff; filter: drop-shadow(0 0 4px #03D9F0) drop-shadow(0 0 8px rgba(3,217,240,.6)); }
.gw-packet--violet { fill: #d8b4fe; filter: drop-shadow(0 0 4px #A855F7) drop-shadow(0 0 8px rgba(168,85,247,.6)); }
.gw-packet--green  { fill: #6ee7b7; filter: drop-shadow(0 0 4px #10b981) drop-shadow(0 0 8px rgba(16,185,129,.6)); }
.gw-packet--amber  { fill: #fcd34d; filter: drop-shadow(0 0 4px #f59e0b) drop-shadow(0 0 8px rgba(245,158,11,.6)); }

/* Reduced motion: hide packets, drop tube filters */
@media (prefers-reduced-motion: reduce) {
    .gw-packet { display: none; }
    html.dark .gw-orbit-svg .gw-orbit-ring,
    html:not(.dark) .gw-orbit-svg .gw-orbit-ring { filter: none; }
}

/* -- Final polish: junction beads, chunky arrows, hotter core -- */
.gw-bead {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 5px rgba(255,255,255,.35));
    animation: gwBeadPulse 2.2s ease-in-out infinite;
}

@keyframes gwBeadPulse {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}

html.dark .gw-orbit-svg .gw-arrow,
html:not(.dark) .gw-orbit-svg .gw-arrow {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.28);
}

html.dark .gw-engine-sphere {
    box-shadow:
        0 0 60px 20px rgba(3, 217, 240, .75),
        0 0 140px 50px rgba(37, 99, 235, .5),
        0 0 240px 90px rgba(3, 217, 240, .2),
        inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

@media (prefers-reduced-motion: reduce) {
    .gw-bead { animation: none !important; opacity: .9; }
}

/* ── Chat pill input: rounded inner field + cyan focus ring ── */
.nxc-pill input {
    height: 40px;
    align-self: center;
    flex: 1 1 0%;
    min-width: 0;
    border: none;
    border-radius: 9999px;
    padding: 0 14px;
    background: transparent;
    caret-color: #03D9F0;
    box-shadow: none;
    transition: background-color .2s ease;
}

.nxc-pill input::placeholder {
    color: var(--nxc-pill-ph);
    transition: color .2s ease;
}

.nxc-pill input:hover {
    background: transparent;
}

.nxc-pill input:hover::placeholder {
    color: var(--nxc-pill-text);
}

.nxc-pill input:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.nxc-pill input::selection {
    background: rgba(3, 217, 240, .3);
}

/* Email field in the chat panel: same focus ring for consistency */
.nxc-panel input[type="email"]:focus {
    outline: none;
    border-color: rgba(3, 217, 240, .7) !important;
    box-shadow: 0 0 0 3px rgba(3, 217, 240, .16);
}

/* ── Unread badge: pop-in, ping ring, wiggle; pill glow while unread ── */
.nxc-badge {
    z-index: 2;
    box-shadow:
        0 0 0 2px var(--nxc-pill-bg),
        0 4px 12px rgba(3, 217, 240, .45);
    animation: nxcBadgePop .45s cubic-bezier(.34, 1.56, .64, 1) both;
    transform-origin: 30% 70%;
}

/* expanding sonar ring behind the badge */
.nxc-badge::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 2px solid rgba(3, 217, 240, .55);
    animation: nxcBadgePing 2.4s cubic-bezier(0, 0, .2, 1) infinite;
    pointer-events: none;
}

@keyframes nxcBadgePop {
    0%   { opacity: 0; transform: scale(.3); }
    70%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes nxcBadgePing {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* gentle attention wiggle every few seconds */
.nxc-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    pointer-events: none;
    animation: nxcBadgeWiggle 5s ease-in-out infinite;
}

@keyframes nxcBadgeWiggle {

    0%, 78%, 100% { box-shadow: none; }
    82% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
    86% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
    90% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
}

/* pill breathes cyan while there are unread replies */
.nxc-pill.has-unread {
    border-color: rgba(3, 217, 240, .55) !important;
    animation: nxcPillGlow 2.8s ease-in-out infinite;
}

@keyframes nxcPillGlow {

    0%, 100% {
        box-shadow: var(--nxc-pill-shadow), 0 0 0 0 rgba(3, 217, 240, 0);
    }

    50% {
        box-shadow: var(--nxc-pill-shadow), 0 0 18px rgba(3, 217, 240, .35);
    }
}

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

    .nxc-badge,
    .nxc-badge::before,
    .nxc-badge::after,
    .nxc-pill.has-unread {
        animation: none !important;
    }

    .nxc-badge::before {
        display: none;
    }

    .nxc-pill.has-unread {
        border-color: rgba(3, 217, 240, .55) !important;
        box-shadow: var(--nxc-pill-shadow), 0 0 14px rgba(3, 217, 240, .3);
    }
}

/* ── STATUS / ERROR ORB COLOR SYSTEM — both themes ──
   Dark: saturated tinted glass with colored under-glow.
   Light: white-lit glass spheres with deep-color ink. */

/* ── DARK: richer glass + missing amber2 variant ── */
html.dark .gw-orb-amber2 {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.48) 0%, rgba(253,230,138,.26) 12%, rgba(249,115,22,.18) 30%, rgba(26,12,4,.94) 66%) !important;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.26),
        inset 0 -14px 22px rgba(249,115,22,.42),
        inset 0 0 0 1.5px rgba(253,230,138,.55),
        0 0 22px rgba(249,115,22,.5),
        0 0 48px rgba(249,115,22,.22) !important;
}

html.dark .gw-orb-amber,
html.dark .gw-orb-cyan,
html.dark .gw-orb-green,
html.dark .gw-orb-red,
html.dark .gw-orb-amber2,
html.dark .gw-orb-violet {
    border-color: rgba(255,255,255,.18) !important;
}

/* ── LIGHT: white-lit glass spheres, deep-color ink ── */
html:not(.dark) .gw-node-orb {
    border-color: transparent !important;
}

html:not(.dark) .gw-orb-amber {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.95) 0%, rgba(255,243,214,.6) 14%, rgba(251,191,36,.34) 40%, rgba(180,83,9,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.85),
        inset 0 -12px 20px rgba(217,119,6,.38),
        inset 0 0 0 1.5px rgba(217,119,6,.35),
        0 10px 24px -8px rgba(180,83,9,.45),
        0 0 18px rgba(245,158,11,.25) !important;
}

html:not(.dark) .gw-orb-cyan {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.95) 0%, rgba(207,250,254,.6) 14%, rgba(34,211,238,.30) 40%, rgba(14,74,110,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.85),
        inset 0 -12px 20px rgba(8,145,178,.36),
        inset 0 0 0 1.5px rgba(8,145,178,.32),
        0 10px 24px -8px rgba(14,74,110,.45),
        0 0 18px rgba(34,211,238,.25) !important;
}

html:not(.dark) .gw-orb-green {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.95) 0%, rgba(209,250,229,.6) 14%, rgba(52,211,153,.30) 40%, rgba(6,78,59,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.85),
        inset 0 -12px 20px rgba(5,150,105,.36),
        inset 0 0 0 1.5px rgba(5,150,105,.32),
        0 10px 24px -8px rgba(6,78,59,.45),
        0 0 18px rgba(52,211,153,.25) !important;
}

html:not(.dark) .gw-orb-red {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.92) 0%, rgba(254,226,226,.58) 14%, rgba(239,68,68,.30) 40%, rgba(127,29,29,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.8),
        inset 0 -12px 20px rgba(220,38,38,.36),
        inset 0 0 0 1.5px rgba(220,38,38,.32),
        0 10px 24px -8px rgba(127,29,29,.45),
        0 0 18px rgba(239,68,68,.25) !important;
}

html:not(.dark) .gw-orb-amber2 {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.92) 0%, rgba(255,237,213,.58) 14%, rgba(249,115,22,.30) 40%, rgba(124,45,18,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.8),
        inset 0 -12px 20px rgba(234,88,12,.36),
        inset 0 0 0 1.5px rgba(234,88,12,.32),
        0 10px 24px -8px rgba(124,45,18,.45),
        0 0 18px rgba(249,115,22,.25) !important;
}

html:not(.dark) .gw-orb-violet {
    background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.92) 0%, rgba(237,233,254,.58) 14%, rgba(139,92,246,.30) 40%, rgba(76,29,149,.9) 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.8),
        inset 0 -12px 20px rgba(124,58,237,.36),
        inset 0 0 0 1.5px rgba(124,58,237,.32),
        0 10px 24px -8px rgba(76,29,149,.45),
        0 0 18px rgba(139,92,246,.25) !important;
}

/* ── Ink colors: deep, AA-safe on light glass ── */
html:not(.dark) .gw-orb-amber  .gw-orb-num,
html:not(.dark) .gw-orb-amber2 .gw-orb-num { color: #92400e !important; text-shadow: none; }
html:not(.dark) .gw-orb-cyan   .gw-orb-num { color: #155e75 !important; text-shadow: none; }
html:not(.dark) .gw-orb-green  .gw-orb-num { color: #065f46 !important; text-shadow: none; }
html:not(.dark) .gw-orb-red    .gw-orb-num { color: #991b1b !important; text-shadow: none; }
html:not(.dark) .gw-orb-violet .gw-orb-num { color: #5b21b6 !important; text-shadow: none; }

html:not(.dark) .gw-orb-amber .gw-orb-label,
html:not(.dark) .gw-orb-cyan .gw-orb-label,
html:not(.dark) .gw-orb-green .gw-orb-label,
html:not(.dark) .gw-orb-red .gw-orb-label,
html:not(.dark) .gw-orb-amber2 .gw-orb-label,
html:not(.dark) .gw-orb-violet .gw-orb-label {
    color: #1c1917 !important;
}

html:not(.dark) .gw-orb-amber .gw-orb-sub,
html:not(.dark) .gw-orb-cyan .gw-orb-sub,
html:not(.dark) .gw-orb-green .gw-orb-sub,
html:not(.dark) .gw-orb-red .gw-orb-sub,
html:not(.dark) .gw-orb-amber2 .gw-orb-sub,
html:not(.dark) .gw-orb-violet .gw-orb-sub {
    color: rgba(41, 37, 36, .72) !important;
}

/* icons restroke for light glass (CSS beats the inline presentation attr) */
html:not(.dark) .gw-orb-amber  .gw-orb-ico { stroke: #b45309; }
html:not(.dark) .gw-orb-amber2 .gw-orb-ico { stroke: #c2410c; }
html:not(.dark) .gw-orb-cyan   .gw-orb-ico { stroke: #0e7490; }
html:not(.dark) .gw-orb-green  .gw-orb-ico { stroke: #047857; }
html:not(.dark) .gw-orb-red    .gw-orb-ico { stroke: #dc2626; }
html:not(.dark) .gw-orb-violet .gw-orb-ico { stroke: #7c3aed; }

/* dark icons on the glass spheres get a light halo so they read */
html:not(.dark) .gw-orb-red .gw-orb-ico,
html:not(.dark) .gw-orb-amber2 .gw-orb-ico,
html:not(.dark) .gw-orb-violet .gw-orb-ico {
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.65));
}

/* ── Whale AI panel: theme-match (gold-rim glass both themes) ── */
html.dark .nxc-root .nxc-panel {
    border: 1px solid rgba(212, 167, 63, .35) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html:not(.dark) .nxc-root .nxc-panel {
    border: 1px solid rgba(201, 151, 59, .4) !important;
    box-shadow:
        0 24px 60px rgba(30, 80, 160, .22),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* Light theme: map the white-text utilities to dark ink */
html:not(.dark) .nxc-root .nxc-panel [class*="text-white/90"],
html:not(.dark) .nxc-root .nxc-panel [class*="text-white/75"],
html:not(.dark) .nxc-root .nxc-panel [class*="text-white"] {
    color: #1c1917 !important;
}

html:not(.dark) .nxc-root .nxc-panel [class*="text-white/60"] {
    color: #57534e !important;
}

html:not(.dark) .nxc-root .nxc-panel [class*="text-white/45"] {
    color: #a8a29e !important;
}

/* Bubbles use inline styles — restyle per theme via attribute hooks */
html:not(.dark) .nxc-root .nxc-panel div[style*="20,23,31"] {
    background: rgba(15, 40, 80, .08) !important;
}

html:not(.dark) .nxc-root .nxc-panel div[style*="255,255,255,.18"] {
    background: rgba(3, 180, 220, .14) !important;
}

html:not(.dark) .nxc-root .nxc-panel input[type="email"] {
    border: 1px solid rgba(15, 40, 80, .18) !important;
    color: #1c1917 !important;
}

html:not(.dark) .nxc-root .nxc-panel .nxc-scroll button:hover {
    background: rgba(15, 40, 80, .06) !important;
}
/* ════════════════════════════════════════════════════════════════════
   GsmWhale Order Workflow — 500×600 animated hero visual (gwe)
   Transparent floating glass/UI: the hero media provides the backdrop.
   One Alpine state machine drives the root class gwe--<stage> which
   gates every CSS animation (order→dropping→processing→provider→
   completed→notification). Only transform/opacity/offset-path are
   animated (GPU friendly).
   ════════════════════════════════════════════════════════════════════ */
.gwe-wrap {
    width: 500px;
    max-width: 100%;
    aspect-ratio: 5 / 6;
    margin-inline: auto;
    container-type: inline-size;
    --gbrand: #00D9F0;
    --gblue: #008CFF;
    --gdeep: #04101f;
}

.gwe-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1.25;
    color: #dff7ff;
    /* engine / ambient palette (dark theme defaults, light overrides below) */
    --g-core-fill: #04101f;
    --g-core-stroke: #2fd9ff;
    --g-core-shine: rgba(191, 240, 255, .55);
    --g-ring-o: rgba(3, 217, 240, .5);
    --g-ring-i: rgba(59, 130, 246, .45);
    --g-kp: #8ff0ff;
    --g-kp-2: #67ecff;
    --g-kp-3: #7dbbff;
    --g-vortex-a: rgba(3, 217, 240, .4);
    --g-vortex-b: rgba(0, 140, 255, .32);
    --g-vortex-c: rgba(3, 217, 240, .3);
    --g-pcon: rgba(3, 217, 240, .3);
    --g-bubble: rgba(159, 232, 255, .55);
    --g-swirl: rgba(3, 217, 240, .22);
    --g-dpath: rgba(3, 217, 240, .22);
    --g-engine-label: #9ff0ff;
    --g-engine-label-sub: #6df0b0;
    --g-w2-stroke: #8ff4ff;
}

.gwe-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.gwe-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* ── brand header ── */
.gwe-head {
    position: absolute;
    top: 1.1%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
    animation: gwe-fade-in .6s ease both;
}
.gwe-logo { width: 1.7em; height: auto; filter: drop-shadow(0 0 6px rgba(3,217,240,.55)); }
.gwe-head-tx { display: flex; flex-direction: column; line-height: 1.15; }
.gwe-head-tx b { font-family: inherit; font-weight: 800; font-size: 1em; letter-spacing: .02em;
    color: #eaffff; text-shadow: 0 0 12px rgba(3,217,240,.55); }
.gwe-head-tx i { font-style: normal; font-size: .56em; font-weight: 500; letter-spacing: .24em;
    color: rgba(159,235,255,.78); }

/* ── glass base (dark theme default) ── */
.gwe-svg text, .gwe-svg path, .gwe-svg circle {
    shape-rendering: geometricPrecision;
}
.gwe-card, .gwe-mod, .gwe-tag, .gwe-chip, .gwe-ni, .gwe-api {
    position: absolute;
    z-index: 4;
    border-radius: 0.95em;
    border: 1px solid rgba(120, 200, 255, .22);
    background: linear-gradient(160deg, rgba(10, 30, 52, .6), rgba(3, 14, 27, .66));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .045);
    color: #dff7ff;
}

/* ── ① ORDER card ── */
.gwe-order {
    left: 3.5%;
    top: 19%;
    width: 33%;
    padding: 0.62em 0.62em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.42em;
    cursor: pointer;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.gwe-order:hover { border-color: rgba(0,217,240,.5); box-shadow: 0 12px 30px -14px rgba(0,217,240,.4); }
.gwe-order-h { font-size: .72em; font-weight: 800; letter-spacing: .08em; color: #9ff0ff; padding-bottom: .2em;
    border-bottom: 1px dashed rgba(120,200,255,.18); }
.gwe-order-row { display: flex; justify-content: space-between; align-items: center; gap: .4em; font-size: .56em; }
.gwe-order-row span { color: rgba(159,220,245,.66); font-weight: 600; }
.gwe-order-row i { font-style: normal; color: #eafcff; font-weight: 700;
    background: rgba(3,217,240,.09); border: 1px solid rgba(3,217,240,.18);
    padding: .14em .45em; border-radius: .45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.gwe-order-imei { letter-spacing: 1px; font-family: ui-monospace, monospace; }
.gwe-order-btn { margin-top: .18em; display: flex; align-items: center; justify-content: center; gap: .45em;
    font-size: .62em; font-weight: 800; letter-spacing: .05em; color: #03222e;
    background: linear-gradient(180deg, #67ecff, #03D9F0); border-radius: .55em; padding: .42em .3em;
    border: 1px solid rgba(255,255,255,.4); box-shadow: 0 3px 12px -3px rgba(3,217,240,.6); }
.gwe-order-btn b { font-size: .9em; }
.gwe--order .gwe-order-btn { animation: gwe-btn-pulse 1.7s ease-in-out .85s infinite; }

/* order package icon popping out of the card */
.gwe-pkg-1 {
    position: absolute;
    right: -14%;
    bottom: 26%;
    width: 1.4em;
    height: 1.4em;
    z-index: 6;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(3,217,240,.8));
}
.gwe--order .gwe-pkg-1 { animation: gwe-pkg-pop .45s ease 1.05s both; }
.gwe--dropping .gwe-pkg-1 { opacity: 1; transition: opacity .3s; }

/* ── ② WHALE DROPPING tag ── */
.gwe-tag--drop {
    left: 22%;
    top: 40.5%;
    padding: .3em .6em;
    font-size: .56em;
    font-weight: 700;
    letter-spacing: .14em;
    color: #bfeeff;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    white-space: nowrap;
}
.gwe-tag--drop i { font-style: normal; color: #03D9F0; }
.gwe--dropping .gwe-tag--drop, .gwe--processing .gwe-tag--drop { animation: gwe-fade-in .45s ease both; }

/* ── ③ processing modules ── */
.gwe-mod {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .5em .6em;
    cursor: pointer;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .35s ease, transform .35s ease, border-color .3s ease, box-shadow .3s ease;
}
.gwe-mod:hover { border-color: rgba(0,217,240,.5); box-shadow: 0 10px 26px -12px rgba(0,217,240,.5); }
.gwe-mod > svg { width: 1.25em; height: 1.25em; flex: none; color: var(--gbrand); filter: drop-shadow(0 0 4px rgba(3,217,240,.7)); }
.gwe-mod-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gwe-mod-tx b { font-size: .6em; font-weight: 800; letter-spacing: .05em; color: #eafcff; white-space: nowrap; }
.gwe-mod-tx i { font-style: normal; font-size: .5em; font-weight: 600; letter-spacing: .12em;
    color: rgba(159,220,245,.62); white-space: nowrap; }

.gwe-mod--mp { left: 1.5%; top: 46%; width: 22%; }
.gwe-mod--sc { left: 41.5%; top: 29.5%; width: 21%; }
.gwe-mod--pr { left: 15%; top: 58.5%; width: 20%; }
.gwe-mod--sr { left: 66.5%; top: 57%; width: 21.5%; }

.gwe-mod-p { display: flex; gap: .35em; align-items: center; }
.gwe-mod-p em { font-style: normal; font-size: .6em; font-weight: 800; color: rgba(159,220,245,.45);
    border: 1px solid rgba(120,200,255,.2); border-radius: .35em; padding: .08em .3em; opacity: .5; }
.gwe--processing .gwe-mod-p em:nth-child(1) { animation: gwe-pdot .5s ease .15s both; }
.gwe--processing .gwe-mod-p em:nth-child(2) { animation: gwe-pdot .5s ease .4s both; }
.gwe--processing .gwe-mod-p em:nth-child(3) { animation: gwe-pdot .5s ease .65s both; }
.gwe--provider .gwe-mod-p em, .gwe--completed .gwe-mod-p em, .gwe--notification .gwe-mod-p em { opacity: 1;
    color: #6df0b0; border-color: rgba(74,222,128,.4); transition: opacity .3s; }

.gwe--processing .gwe-mod--mp { animation: gwe-mod-act .45s ease .1s both; }
.gwe--processing .gwe-mod--sc { animation: gwe-mod-act .45s ease .4s both; }
.gwe--processing .gwe-mod--pr { animation: gwe-mod-act .45s ease .8s both; }
.gwe--processing .gwe-mod--sr { animation: gwe-mod-act .45s ease 1.2s both; }
.gwe--provider .gwe-mod, .gwe--completed .gwe-mod, .gwe--notification .gwe-mod { opacity: 1; transform: none; }

/* smart retry spinner only while the retry lane is active */
.gwe--processing .gwe-mod--sr .gwe-sr-spin { animation: gwe-spin 1s linear infinite; }
.gwe--provider .gwe-mod--sr .gwe-sr-spin { animation: gwe-spin .8s linear infinite; }

/* ── ④ COMPLETED chip ── */
.gwe-completed {
    left: 70.5%;
    top: 29%;
    width: 26%;
    padding: .55em .6em;
    display: flex;
    align-items: center;
    gap: .5em;
    opacity: 0;
    transform: scale(.8);
    cursor: pointer;
}
.gwe-completed:hover { border-color: rgba(74,222,128,.55); box-shadow: 0 10px 26px -12px rgba(74,222,128,.5); }
.gwe-chip-num { font-size: .85em; color: #b8ffe0; text-shadow: 0 0 8px rgba(74,222,128,.8); }
.gwe-chip-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gwe-chip-tx b { font-size: .62em; font-weight: 800; letter-spacing: .1em; color: #dcffe9; white-space: nowrap; }
.gwe-chip-tx i { font-style: normal; font-size: .52em; font-weight: 700; letter-spacing: .2em; color: #6df0b0; }
.gwe-check { margin-left: auto; display: grid; place-items: center; width: 1.55em; height: 1.55em; flex: none;
    border-radius: 50%; color: #07150c; background: linear-gradient(180deg, #86f7c0, #22c55e);
    box-shadow: 0 0 14px rgba(74,222,128,.75); opacity: 0; }
.gwe-check svg { width: .85em; height: .85em; }
.gwe--completed .gwe-completed, .gwe--notification .gwe-completed { animation: gwe-pop-in .5s ease .1s both; }
.gwe--completed .gwe-check { animation: gwe-check .55s ease .8s both; }
.gwe--notification .gwe-check { opacity: 1; transition: opacity .3s; }

/* ── ⑤ NOTIFICATION ── */
.gwe-notif {
    position: absolute;
    left: 40%;
    top: 59%;
    width: 22%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45em;
    opacity: 0;
    cursor: pointer;
}
.gwe-bell { position: relative; width: 2em; height: 2em; display: grid; place-items: center;
    color: #bdf3ff; filter: drop-shadow(0 0 8px rgba(3,217,240,.7)); }
.gwe-bell > svg { width: 100%; height: 100%; }
.gwe-bell-badge { position: absolute; top: -0.35em; right: -0.45em; font-style: normal; font-size: .62em;
    font-weight: 800; color: #fff; background: linear-gradient(180deg, #f87171, #ef4444);
    border-radius: 99px; padding: .08em .32em; box-shadow: 0 0 10px rgba(239,68,68,.8); opacity: 0; }
.gwe-ni { position: relative; width: 100%; padding: .55em .6em .6em; display: flex; flex-direction: column; gap: .22em; }
.gwe-ni-h { display: flex; justify-content: space-between; align-items: baseline; font-size: .52em; }
.gwe-ni-h b { color: #9ff0ff; letter-spacing: .04em; }
.gwe-ni-h span { color: rgba(159,220,245,.5); }
.gwe-ni-t { font-size: .64em; font-weight: 800; color: #eafcff; }
.gwe-ni-b { display: flex; gap: .3em; font-size: .5em; color: rgba(159,220,245,.72); font-weight: 600; }
.gwe-ni-b em { font-style: normal; color: #6df0b0; }
.gwe-ni-btn { margin-top: .18em; text-align: center; font-size: .56em; font-weight: 800; letter-spacing: .05em;
    color: #03222e; background: linear-gradient(180deg, #67ecff, #03D9F0); border-radius: .5em; padding: .4em .2em;
    box-shadow: 0 3px 12px -4px rgba(3,217,240,.6); }
.gwe-chans { display: flex; gap: .35em; }
.gwe-chan { width: 1.35em; height: 1.35em; display: grid; place-items: center; padding: 0;
    color: rgba(191,238,255,.6); background: rgba(3,217,240,.08); border: 1px solid rgba(120,200,255,.2);
    border-radius: .4em; cursor: pointer; }
.gwe-chan svg { width: 70%; height: 70%; }
.gwe-chan:hover { color: #dff7ff; border-color: rgba(0,217,240,.6); }

.gwe--notification .gwe-notif { animation: gwe-slide .6s ease .1s both; }
.gwe--notification .gwe-bell { animation: gwe-shake .62s ease .4s both; transform-origin: 50% 0; }
.gwe--notification .gwe-bell-badge { animation: gwe-badge .42s ease .55s both; }
.gwe--notification .gwe-ni-btn { animation: gwe-btn-pulse 1.4s ease-in-out .85s infinite; }
.gwe--notification .gwe-chan:nth-child(1) { animation: gwe-chan-pulse .45s ease .9s both; }
.gwe--notification .gwe-chan:nth-child(2) { animation: gwe-chan-pulse .45s ease 1.05s both; }
.gwe--notification .gwe-chan:nth-child(3) { animation: gwe-chan-pulse .45s ease 1.2s both; }
.gwe--notification .gwe-chan:nth-child(4) { animation: gwe-chan-pulse .45s ease 1.35s both; }
.gwe--notification .gwe-chan:nth-child(5) { animation: gwe-chan-pulse .45s ease 1.5s both; }

/* ── floating API metadata ── */
.gwe-api {
    z-index: 2;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .45em;
    letter-spacing: .04em;
    color: rgba(159,220,245,.62);
    padding: .25em .5em;
    border-radius: .6em;
    border-color: rgba(120,200,255,.14);
    opacity: .75;
    animation: gwe-drift 9s ease-in-out infinite;
}
.gwe-api--1 { left: 15.5%; top: 40.5%; animation-delay: 0s; }
.gwe-api--2 { left: 60.5%; top: 36%; animation-delay: 1.4s; }
.gwe-api--3 { left: 77.5%; top: 53%; animation-delay: 2.8s; }

/* ── live walkthrough status ── */
.gwe-status {
    position: absolute;
    left: 2.5%;
    right: 2.5%;
    bottom: 1.2%;
    z-index: 8;
    text-align: center;
    font-size: .52em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(159,220,245,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    white-space: nowrap;
}
.gwe-status-dot { width: .55em; height: .55em; border-radius: 99px; flex: none;
    background: var(--gbrand); box-shadow: 0 0 8px rgba(3,217,240,.9); animation: gwe-blink 1.6s ease-in-out infinite; }

/* ═══ SVG layers ═══ */

/* ambient: bubbles + faint swirls */
.gwe-ambient .gwe-bb { fill: var(--g-bubble); animation: gwe-bubble var(--gwe-dur, 7s) ease-in infinite; opacity: 0; }
.gwe-ambient .gwe-bb--1 { --gwe-dur: 6.4s; }
.gwe-ambient .gwe-bb--2 { --gwe-dur: 8.2s; }
.gwe-ambient .gwe-bb--3 { --gwe-dur: 7s;   }
.gwe-ambient .gwe-bb--4 { --gwe-dur: 9s;   }
.gwe-ambient .gwe-bb--5 { --gwe-dur: 6.8s; }
.gwe-ambient .gwe-bb--6 { --gwe-dur: 8.8s; }
.gwe-ambient .gwe-bb--7 { --gwe-dur: 7.6s; }
.gwe-ambient .gwe-bb--8 { --gwe-dur: 9.4s; }
.gwe-swirl { fill: none; stroke: var(--g-swirl); stroke-width: 1.1; stroke-dasharray: 3 7;
    stroke-linecap: round; animation: gwe-swirl-drift 18s linear infinite; }
.gwe-swirl--2 { animation-delay: -6s; }

/* order-flow circuit trail (one closed round loop) */
.gwe-dpath { fill: none; stroke: var(--g-dpath); stroke-width: 1.4; stroke-dasharray: 2 6;
    stroke-linecap: round; }

/* ── engine ── */
.gwe-glow--big { fill: url(#gweCoreGlow); opacity: .3; animation: gwe-breathe 7s ease-in-out infinite; }
.gwe-glow--core { fill: url(#gweCoreGlow); opacity: .4; animation: gwe-breathe 4.5s ease-in-out infinite; }
.gwe-ring { fill: none; stroke-width: 1.4; }
.gwe-ring--o { stroke: var(--g-ring-o); stroke-dasharray: 4 7; }
.gwe-ring--i { stroke: var(--g-ring-i); stroke-dasharray: 2 5; }
.gwe-orbit { transform-box: fill-box; transform-origin: center; }
.gwe-orbit--outer { animation: gwe-spin 12s linear infinite; }
.gwe-orbit--inner { animation: gwe-spin-rev 8s linear infinite; }
.gwe-kp { fill: var(--g-kp); filter: drop-shadow(0 0 4px rgba(3,217,240,.8)); }
.gwe-kp--2 { fill: var(--g-kp-2); }
.gwe-kp--3 { fill: var(--g-kp-3); }
.gwe-vortex-a { fill: none; stroke: var(--g-vortex-a); stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 40 60; animation: gwe-swirl-drift 6s linear infinite; }
.gwe-vortex-b { stroke: var(--g-vortex-b); }
.gwe-vortex-c { stroke: var(--g-vortex-c); stroke-dasharray: 20 40; animation-duration: 4s; }
.gwe-core { fill: var(--g-core-fill); stroke: var(--g-core-stroke); transition: filter .5s ease; }
.gwe-core-shine { fill: none; stroke: var(--g-core-shine); stroke-width: 3; stroke-linecap: round; opacity: .8; }
.gwe--processing .gwe-core { filter: drop-shadow(0 0 12px rgba(0,217,240,.85)); }
.gwe-core-whale { animation: gwe-bob 5s ease-in-out infinite; }
.gwe-core-logo { shape-rendering: geometricPrecision; }
.gwe--processing .gwe-core-whale { animation-duration: 2.2s; filter: drop-shadow(0 0 6px rgba(3,217,240,.8)); }
.gwe-engine-label { font-size: 7.5px; font-weight: 800; letter-spacing: .34em; fill: var(--g-engine-label); opacity: .9; }
.gwe-engine-label--sub { fill: var(--g-engine-label-sub); letter-spacing: .6em; }
.gwe-pcon { fill: none; stroke: var(--g-pcon); stroke-width: 1.3; stroke-dasharray: 3 5; opacity: .6;
    transition: opacity .3s; }
.gwe--processing .gwe-pcon { stroke: #22d3ee; opacity: 1; animation: gwe-pcon-lit 1.6s linear infinite; }
.gwe--provider .gwe-pcon { stroke: #6df0b0; opacity: .9; }

/* ── order-flow runner whale: rides the closed circuit trail ── */
.gwe-runner { fill: url(#gweWbody); stroke: var(--g-w2-stroke); stroke-width: 1.1;
    offset-path: path('M96 258 C135 236 172 262 200 296 C224 258 288 254 318 286 C352 262 374 250 402 244 C418 268 421 332 412 366 C405 396 388 418 380 438 C354 488 262 502 190 476 C114 454 62 374 96 258 Z');
    offset-rotate: auto;
    animation: gwe-drive 9s linear infinite;
    filter: drop-shadow(0 0 6px rgba(3, 217, 240, .7)); }
.gwe--processing .gwe-runner { animation-duration: 5s; filter: drop-shadow(0 0 9px rgba(3, 217, 240, .95)); }
.gwe-runner-fin { fill: none; stroke: var(--g-w2-stroke); stroke-width: 1.1; opacity: .9; }

/* ═══ light theme: hero backdrop is bright, glass flips to light ═══ */
html:not(.dark) .gwe-canvas {
    color: #083b5c;
    --g-core-fill: rgba(226, 242, 253, .62);
    --g-core-stroke: #0ea5e9;
    --g-core-shine: rgba(255, 255, 255, .85);
    --g-ring-o: rgba(0, 140, 255, .6);
    --g-ring-i: rgba(29, 111, 199, .5);
    --g-kp: #0b7ab8;
    --g-kp-2: #0a8cbf;
    --g-kp-3: #2f7ec0;
    --g-vortex-a: rgba(11, 122, 184, .45);
    --g-vortex-b: rgba(0, 120, 220, .4);
    --g-vortex-c: rgba(11, 122, 184, .38);
    --g-pcon: rgba(11, 122, 184, .55);
    --g-bubble: rgba(11, 122, 184, .5);
    --g-swirl: rgba(0, 140, 190, .3);
    --g-dpath: rgba(0, 140, 190, .3);
    --g-engine-label: #0a6e9d;
    --g-engine-label-sub: #12855a;
    --g-w2-stroke: #0ea5e9;
}
html:not(.dark) .gwe-glow--big { opacity: .18; }
html:not(.dark) .gwe-glow--core { opacity: .22; }
html:not(.dark) .gwe-head-tx b { color: #083b5c; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
html:not(.dark) .gwe-head-tx i { color: rgba(8,59,92,.72); }
html:not(.dark) .gwe-card, html:not(.dark) .gwe-mod, html:not(.dark) .gwe-tag,
html:not(.dark) .gwe-chip, html:not(.dark) .gwe-ni, html:not(.dark) .gwe-api {
    border-color: rgba(8, 59, 92, .18);
    background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(235,247,255,.72));
    box-shadow: 0 10px 24px -16px rgba(2,32,55,.35), inset 0 0 0 1px rgba(255,255,255,.6);
    color: #083b5c;
}
html:not(.dark) .gwe-order-row span { color: rgba(8,59,92,.6); }
html:not(.dark) .gwe-order-row i { color: #083b5c; background: rgba(3,217,240,.1); border-color: rgba(3,140,190,.25); }
html:not(.dark) .gwe-order-h { color: #0a6e9d; border-bottom-color: rgba(8,59,92,.16); }
html:not(.dark) .gwe-order-btn { color: #04283a; border-color: rgba(255,255,255,.8);
    box-shadow: 0 3px 12px -4px rgba(0,140,255,.45); }
html:not(.dark) .gwe-mod-tx b { color: #083b5c; }
html:not(.dark) .gwe-mod-tx i { color: rgba(8,59,92,.6); }
html:not(.dark) .gwe-chip-tx b { color: #084c2f; }
html:not(.dark) .gwe-chip-tx i { color: #12855a; }
html:not(.dark) .gwe-ni-t { color: #083b5c; }
html:not(.dark) .gwe-ni-b { color: rgba(8,59,92,.66); }
html:not(.dark) .gwe-ni-h span { color: rgba(8,59,92,.45); }
html:not(.dark) .gwe-ni-h b { color: #0a6e9d; }
html:not(.dark) .gwe-ni-btn { color: #04283a; box-shadow: 0 3px 12px -4px rgba(0,140,255,.45); }
html:not(.dark) .gwe-api { color: rgba(8,59,92,.66); border-color: rgba(8,59,92,.14); }
html:not(.dark) .gwe-status { color: rgba(8,59,92,.7); }
html:not(.dark) .gwe-tag--drop { color: rgba(8,59,92,.85); }

/* ═══ responsive scaling (progressive enhancement via container queries) ═══ */
@media (min-width: 768px) and (max-width: 1023px) {
    .gwe-wrap { width: 440px; }
}
@container (max-width: 430px) {
    .gwe-canvas { font-size: 13px; }
    .gwe-mod { padding: .42em .5em; gap: .38em; }
    .gwe-order { padding: .5em .5em .42em; }
}
@container (max-width: 340px) {
    .gwe-canvas { font-size: 11px; }
    .gwe-api { display: none; }
}
@container (max-width: 300px) {
    .gwe-canvas { font-size: 9.6px; }
    .gwe-api { display: none; }
    .gwe-mod-tx i { display: none; }
}

/* ═══ keyframes ═══ */
@keyframes gwe-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gwe-pop-in {
    0%   { opacity: 0; transform: scale(.78); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes gwe-mod-act {
    0%   { opacity: 0; transform: scale(.85); filter: brightness(1); }
    60%  { opacity: 1; transform: scale(1.06); filter: brightness(1.35); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes gwe-pkg-pop {
    0%   { opacity: 0; transform: translateY(6px) scale(.5); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gwe-btn-pulse {
    0%, 100% { box-shadow: 0 3px 12px -3px rgba(3,217,240,.6), 0 0 0 0 rgba(3,217,240,.45); }
    50%      { box-shadow: 0 3px 14px -2px rgba(3,217,240,.85), 0 0 0 .34em rgba(3,217,240,0); }
}
@keyframes gwe-check {
    0%   { opacity: 0; transform: scale(.5); }
    55%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes gwe-badge {
    0%   { opacity: 0; transform: scale(.4); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes gwe-slide {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes gwe-shake {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-14deg); }
    40%      { transform: rotate(12deg); }
    60%      { transform: rotate(-8deg); }
    80%      { transform: rotate(5deg); }
}
@keyframes gwe-chan-pulse {
    0%   { opacity: .45; transform: scale(.85); box-shadow: 0 0 0 0 rgba(3,217,240,.5); color: rgba(191,238,255,.6); }
    55%  { opacity: 1; transform: scale(1.12); box-shadow: 0 0 12px 2px rgba(3,217,240,.6); color: #fff; }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px 0 rgba(3,217,240,.0); color: #dff7ff; }
}
@keyframes gwe-pdot {
    0%   { opacity: .4; color: rgba(159,220,245,.45); border-color: rgba(120,200,255,.2); }
    60%  { opacity: 1; color: #6df0b0; border-color: rgba(74,222,128,.6); box-shadow: 0 0 8px rgba(74,222,128,.5); }
    100% { opacity: 1; color: #6df0b0; border-color: rgba(74,222,128,.4); }
}
@keyframes gwe-drift { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-4px); opacity: .9; } }
@keyframes gwe-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gwe-spin { to { transform: rotate(360deg); } }
@keyframes gwe-spin-rev { to { transform: rotate(-360deg); } }
@keyframes gwe-breathe { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
@keyframes gwe-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3.5px) rotate(1deg); } }
@keyframes gwe-swirl-drift { to { stroke-dashoffset: -100; } }
@keyframes gwe-pcon-lit { to { stroke-dashoffset: -24; } }
@keyframes gwe-drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes gwe-bubble {
    0%   { transform: translateY(130px); opacity: 0; }
    15%  { opacity: .55; }
    70%  { opacity: .35; }
100% { transform: translateY(-90px); opacity: 0; }
 }

/* ═══ reduced motion: freeze to a complete, static composition ═══ */
@media (prefers-reduced-motion: reduce) {
    .gwe-wrap * { animation: none !important; transition: none !important; }
    .gwe-wrap .gwe-pkg-1, .gwe-wrap .gwe-tag--drop, .gwe-wrap .gwe-mod,
    .gwe-wrap .gwe-completed, .gwe-wrap .gwe-check, .gwe-wrap .gwe-notif,
    .gwe-wrap .gwe-bell-badge {
        opacity: 1 !important;
        transform: none !important;
    }
    .gwe-wrap .gwe-runner { opacity: .55 !important; offset-distance: 0 !important; }
    .gwe-wrap .gwe-mod-p em { opacity: 1; color: #6df0b0; border-color: rgba(74,222,128,.4); }
}