/* =====================================================
   1. PASTE YOUR FULL ORIGINAL CSS FROM index.html HERE
   Copy everything inside your original <style>...</style>
   block and paste it at the top of this file.
   ===================================================== */



/* =====================================================
   2. EXTRA STYLES FOR SEPARATE PAGES
   ===================================================== */

.page-main {
  padding: 140px 0 90px;
  min-height: 72vh;
}

.page-head {
  margin-bottom: 36px;
}

.page-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 34px;
}

.legal-page .legal h6 {
  margin-top: 18px;
}

.checkout-summary .cart-row:last-child {
  border-bottom: 0;
}

.form-check-input.err,
input[type="checkbox"].err {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .page-main {
    padding: 120px 0 70px;
  }
}

    
   :root {
    --bg: #090F18;
    --bg2: #111C29;
    --panel: #182638;
    --panel2: #22354A;

    --line: rgba(157, 220, 213, .16);
    --text: #F0F8F5;
    --muted: #A2B9B7;
    --dim: #718D8C;

    --brand: #B7E445;
    --brand2: #43D6CB;
    --hot: #FFB45F;
    --danger: #FF766B;

    --shadow: 0 30px 90px rgba(0, 0, 0, .48);
    --glow: 0 0 40px rgba(183, 228, 69, .20);
    --glass: rgba(24, 38, 56, .76);
}

[data-theme="light"] {
    --bg: #F0F5EF;
    --bg2: #E4EDE5;
    --panel: #FBFFF9;
    --panel2: #EAF2E9;

    --line: rgba(34, 73, 65, .14);
    --text: #172D2A;
    --muted: #59736D;
    --dim: #829A91;

    --brand: #648D16;
    --brand2: #087F79;
    --hot: #B87525;
    --danger: #C34C42;

    --shadow: 0 28px 80px rgba(23, 45, 42, .12);
    --glow: 0 0 32px rgba(100, 141, 22, .14);
    --glass: rgba(251, 255, 249, .84);
}

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 88px
        }

        body {
            margin: 0;
            background: radial-gradient(circle at 18% 8%, rgba(124, 255, 212, .09), transparent 28%), radial-gradient(circle at 80% 0, rgba(157, 124, 255, .11), transparent 30%), var(--bg);
            color: var(--text);
            font-family: "Space Grotesk", sans-serif;
            overflow-x: hidden
        }

        body:before {
            content: "";
            position: fixed;
            inset: 0;
            background-image: linear-gradient(rgba(124, 255, 212, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 255, 212, .035) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 80%);
            pointer-events: none;
            z-index: -1
        }

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

        button,
        input,
        select,
        textarea {
            font-family: inherit
        }

        .mono {
            font-family: "IBM Plex Mono", monospace
        }

        .section {
            padding: 110px 0
        }

        .eyebrow {
            font-family: "IBM Plex Mono", monospace;
            text-transform: uppercase;
            letter-spacing: .18em;
            color: var(--brand);
            font-size: .72rem;
            font-weight: 700
        }

        .title {
            font-size: clamp(2rem, 4vw, 4.4rem);
            line-height: .95;
            font-weight: 700;
            letter-spacing: -.055em
        }

        .sub {
            color: var(--muted);
            line-height: 1.65
        }

        .btn-core {
            border: 1px solid var(--line);
            background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand2) 44%, var(--brand)));
            color: #001613;
            border-radius: 4px;
            padding: 13px 20px;
            font-weight: 700;
            display: inline-flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            box-shadow: var(--glow);
            transition: .25s
        }

        .btn-core:hover {
            transform: translateY(-3px);
            color: #001613;
            filter: saturate(1.2)
        }

        .btn-line {
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .03);
            color: var(--text);
            border-radius: 4px;
            padding: 13px 20px;
            font-weight: 700;
            display: inline-flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            transition: .25s
        }

        .btn-line:hover {
            border-color: var(--brand);
            color: var(--brand);
            transform: translateY(-3px)
        }

        .formx {
            width: 100%;
            border: 1px solid var(--line);
            background: var(--panel2);
            color: var(--text);
            border-radius: 4px;
            padding: 12px 14px
        }

        .formx:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent)
        }

        .formx.err {
            border-color: var(--danger)
        }

        .nav-shell {
            position: fixed;
            top: 16px;
            left: 0;
            right: 0;
            z-index: 1030;
            pointer-events: none
        }

        .nav-rig {
            pointer-events: auto;
            background: rgba(6, 16, 18, .72);
            backdrop-filter: blur(18px);
            border: 1px solid var(--line);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
            border-radius: 6px;
            padding: 10px 12px
        }

        [data-theme="light"] .nav-rig {
            background: rgba(255, 255, 255, .76)
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            letter-spacing: .16em
        }

        .brand-mark {
            width: 34px;
            height: 34px;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, var(--brand), var(--brand2));
            color: #001613;
            font-weight: 900
        }

        .navlink {
            font-family: "IBM Plex Mono", monospace;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--muted);
            padding: 8px 9px
        }

        .navlink:hover,
        .navlink.active {
            color: var(--brand)
        }

        .icon-btn {
            width: 39px;
            height: 39px;
            border: 1px solid var(--line);
            background: transparent;
            color: var(--text);
            display: grid;
            place-items: center;
            border-radius: 4px;
            position: relative
        }

        .icon-btn:hover {
            border-color: var(--brand);
            color: var(--brand)
        }

        .badge-count {
            position: absolute;
            top: -7px;
            right: -7px;
            min-width: 18px;
            height: 18px;
            border-radius: 2px;
            background: var(--danger);
            color: white;
            font-size: 10px;
            display: none;
            place-items: center;
            font-weight: 800
        }

        .badge-count.show {
            display: grid
        }

        .search-drop {
            position: absolute;
            right: 0;
            top: 52px;
            width: min(360px, calc(100vw - 32px));
            background: var(--panel);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            padding: 12px;
            display: none
        }

        .search-drop.open {
            display: block;
            animation: drop .25s ease
        }

        @keyframes drop {
            from {
                opacity: 0;
                transform: translateY(-8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .wheel-hero {
            position: relative
        }

        .wheel-zone {
            position: relative
        }

        .wheel-pin {
            position: sticky;
            top: 0;
            height: 100vh;
            min-height: 720px;
            display: grid;
            align-items: center;
            overflow: hidden;
            background: radial-gradient(circle at 38% 52%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 28%), linear-gradient(135deg, var(--bg), var(--bg2));
            border-bottom: 1px solid var(--line)
        }

        .wheel-pin:before {
            content: "";
            position: absolute;
            inset: 8%;
            border: 1px solid var(--line);
            border-radius: 50%;
            opacity: .25
        }

        .hero-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0px, 0fr) minmax(420px, 680px) minmax(270px, 360px);
            gap: 34px;
            align-items: center
        }

        .hero-copy {
            align-self: end;
            padding-bottom: 40px
        }

        .hero-copy h1 {
            font-size: clamp(2.2rem, 5vw, 5.4rem);
            line-height: .9;
            font-weight: 800;
            letter-spacing: -.075em;
            margin: 16px 0
        }

        .hero-copy em {
            font-style: normal;
            color: var(--brand)
        }

        .scroll-signal {
            margin-top: 28px;
            font-family: "IBM Plex Mono", monospace;
            color: var(--muted);
            font-size: .78rem;
            display: flex;
            gap: 9px;
            align-items: center
        }

        .scroll-signal i {
            color: var(--brand);
            animation: bob 1.6s infinite
        }

        @keyframes bob {
            50% {
                transform: translateY(7px)
            }
        }

        .wheel-stage {
            position: relative;
            aspect-ratio: 1/1;
            perspective: 1200px;
            margin-left: 100px;


        }

        .wheel-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid var(--line);
            box-shadow: inset 0 0 50px rgba(124, 255, 212, .08), var(--glow)
        }

        .wheel-ring:before,
        .wheel-ring:after {
            content: "";
            position: absolute;
            inset: 12%;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent)
        }

        .wheel-ring:after {
            inset: 27%;
            background: radial-gradient(circle, rgba(124, 255, 212, .08), transparent 64%)
        }

        .wheel-node {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 104px;
            height: 104px;
            will-change: transform, opacity;
            transform-style: preserve-3d;
            transition: filter .2s
        }

        .wheel-node img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid var(--line);
            box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
            background: var(--panel)
        }

        .wheel-node.front img {
            border-color: var(--brand);
            box-shadow: 0 0 0 1px var(--brand), 0 34px 90px rgba(0, 0, 0, .45), 0 0 60px color-mix(in srgb, var(--brand) 32%, transparent)
        }

        .wheel-center {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 240px;
            height: 240px;
            transform: translate(-50%, -50%);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 36px 100px rgba(0, 0, 0, .5);
            border: 1px solid var(--brand);
            background: var(--panel);
            z-index: 200
        }

        .wheel-center img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .morph-in {
            animation: morphIn .65s ease both
        }

        .morph-out {
            animation: morphOut .65s ease both
        }

        @keyframes morphIn {
            from {
                opacity: 0;
                filter: blur(14px) hue-rotate(80deg);
                transform: scale(.82) rotate(8deg);
                clip-path: circle(8% at 50% 50%)
            }

            to {
                opacity: 1;
                filter: none;
                transform: none;
                clip-path: circle(78% at 50% 50%)
            }
        }

        @keyframes morphOut {
            to {
                opacity: 0;
                filter: blur(16px) hue-rotate(-80deg);
                transform: scale(1.12) rotate(-8deg);
                clip-path: circle(8% at 50% 50%)
            }
        }

        .hero-card {
            background: linear-gradient(180deg, var(--glass), color-mix(in srgb, var(--panel) 90%, transparent));
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            padding: 28px;
            border-radius: 6px;
            min-height: 390px;
            position: relative;
            overflow: hidden
        }

        .hero-card:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(124, 255, 212, .08), transparent);
            transform: translateX(-120%);
            animation: scan 4s infinite
        }

        @keyframes scan {

            60%,
            100% {
                transform: translateX(120%)
            }
        }

        .info-slot {
            overflow: hidden;
            position: relative
        }

        .info-roller {
            transition: transform .55s cubic-bezier(.24, .9, .25, 1), opacity .45s;
            display: block
        }

        .roll-enter {
            transform: translateY(110%);
            opacity: 0
        }

        .roll-enter.go {
            transform: translateY(0);
            opacity: 1
        }

        .roll-exit.go {
            transform: translateY(-110%);
            opacity: 0
        }

        .product-title {
            font-size: 1.6rem;
            font-weight: 800;
            line-height: 1.1
        }

        .hero-price {
            font-size: 2rem;
            color: var(--brand);
            font-weight: 800;
            margin-bottom: 28px;
        }

        .hero-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 24px
        }

        .qty {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--line);
            height: 43px
        }

        .qty button {
            height: 41px;
            width: 38px;
            border: 0;
            background: transparent;
            color: var(--text)
        }

        .qty span {
            min-width: 32px;
            text-align: center;
            font-weight: 800
        }

        .hero-dots {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px
        }

        .hero-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--dim);
            border: 0
        }

        .hero-dot.active {
            width: 34px;
            border-radius: 8px;
            background: var(--brand)
        }

        .mission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px
        }

        .mission-panel {
            border: 1px solid var(--line);
            background: var(--panel);
            box-shadow: var(--shadow);
            padding: 34px;
            border-radius: 6px
        }

        .metric-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 26px
        }

        .metric {
            border: 1px solid var(--line);
            padding: 16px
        }

        .metric b {
            font-size: 1.8rem;
            color: var(--brand)
        }

        .orb-frame {
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
            position: relative;
            overflow: hidden
        }

        .orb-frame img {
            width: 70%;
            height: 70%;
            object-fit: cover;
            border-radius: 22px;
            box-shadow: var(--shadow)
        }

        .orb-frame:after {
            content: "";
            position: absolute;
            inset: 12%;
            border: 1px dashed var(--line);
            border-radius: 50%;
            animation: spin 24s linear infinite
        }

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

        .cat-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px
        }

        .cat-tile {
            border: 1px solid var(--line);
            background: var(--panel);
            padding: 22px;
            border-radius: 6px;
            min-height: 170px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: .3s;
            position: relative;
            overflow: hidden
        }

        .cat-tile:before {
            content: "";
            position: absolute;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--brand) 12%, transparent);
            right: -60px;
            top: -60px
        }

        .cat-tile:hover {
            transform: translateY(-8px);
            border-color: var(--brand);
            box-shadow: var(--glow)
        }

        .cat-emoji {
            font-size: 2.1rem
        }

        .cat-name {
            font-weight: 800;
            font-size: 1.05rem
        }

        .cat-count {
            color: var(--muted);
            font-family: "IBM Plex Mono", monospace;
            font-size: .78rem
        }

        .feature-rail {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 8px 0 18px
        }

        .feature-rail::-webkit-scrollbar {
            height: 5px
        }

        .feature-rail::-webkit-scrollbar-thumb {
            background: var(--brand)
        }

        .feature-card {
            scroll-snap-align: start;
            flex: 0 0 260px;
            border: 1px solid var(--line);
            background: var(--panel);
            border-radius: 6px;
            padding: 12px;
            position: relative
        }

        .feature-card img {
            height: 170px;
            width: 100%;
            object-fit: cover;
            border-radius: 4px
        }

        .feature-card:hover {
            box-shadow: var(--glow);
            transform: translateY(-6px)
        }

        .product-zone {
            position: relative;
            background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 55%, transparent), transparent)
        }

        .control-deck {
            border: 1px solid var(--line);
            background: var(--panel);
            padding: 16px;
            border-radius: 6px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            margin-bottom: 18px
        }

        .category-orbit {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 8px 0 18px
        }

        .category-orbit::-webkit-scrollbar {
            display: none
        }

        .cat-switch {
            border: 1px solid var(--line);
            background: transparent;
            color: var(--muted);
            border-radius: 999px;
            padding: 10px 14px;
            font-size: .78rem;
            font-family: "IBM Plex Mono", monospace;
            white-space: nowrap
        }

        .cat-switch.active {
            background: var(--brand);
            color: #001613;
            border-color: var(--brand)
        }

        .catalog {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px
        }

        .data-card {
            border: 1px solid var(--line);
            background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel2) 84%, transparent));
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            animation: rise .6s both;
            animation-delay: var(--delay)
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(28px) skewY(2deg)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .data-card:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 0 70%, rgba(124, 255, 212, .08) 70% 100%);
            pointer-events: none
        }

        .data-img {
            height: 290px;
            width: 100%;
            object-fit: cover;
            filter: saturate(.92);
            transition: .35s
        }

        .data-card:hover .data-img {
            transform: scale(1.06);
            filter: saturate(1.1)
        }

        .data-body {
            padding: 16px
        }

        .data-cat {
            font-family: "IBM Plex Mono", monospace;
            color: var(--brand);
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .1em
        }

        .data-name {
            font-weight: 800;
            min-height: 44px
        }

        .data-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px
        }

        .data-actions {
            display: flex;
            gap: 6px
        }

        .mini-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--line);
            background: transparent;
            color: var(--text);
            display: grid;
            place-items: center;
            border-radius: 4px
        }

        .mini-btn:hover,
        .mini-btn.on {
            border-color: var(--brand);
            color: var(--brand)
        }

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

        .why-box {
            border: 1px solid var(--line);
            background: var(--panel);
            padding: 26px;
            border-radius: 6px;
            position: relative;
            overflow: hidden
        }

        .why-box:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            background: var(--brand);
            transition: .35s
        }

        .why-box:hover:after {
            width: 100%
        }

        .why-box i {
            font-size: 2rem;
            color: var(--brand)
        }

        .faq .accordion-item {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 6px !important;
            margin-bottom: 10px;
            overflow: hidden
        }

        .faq .accordion-button {
            background: transparent;
            color: var(--text);
            box-shadow: none
        }

        .faq .accordion-button:not(.collapsed) {
            background: var(--brand);
            color: #001613
        }

        .faq .accordion-body {
            color: var(--muted)
        }

        .newsletter,
        .contact-card {
            border: 1px solid var(--line);
            background: var(--panel);
            box-shadow: var(--shadow);
            border-radius: 6px;
            padding: 34px
        }

        .footer {
            background: #02090a;
            border-top: 1px solid var(--line);
            padding-top: 46px;
            color: var(--muted)
        }

        .footer h6 {
            color: var(--text);
            font-weight: 800
        }

        .footer button,
        .footer a {
            color: var(--muted);
            background: none;
            border: 0;
            padding: 4px 0
        }

        .footer button:hover,
        .footer a:hover {
            color: var(--brand)
        }

        .offcanvas,
        .modal-content {
            background: var(--panel);
            color: var(--text);
            border-color: var(--line)
        }

        .cart-row {
            display: grid;
            grid-template-columns: 62px 1fr auto;
            gap: 12px;
            align-items: center;
            border-bottom: 1px solid var(--line);
            padding: 14px 0
        }

        .cart-row img {
            width: 62px;
            height: 62px;
            object-fit: cover;
            border-radius: 4px
        }

        .cart-row b {
            font-size: .9rem
        }

        .cart-row small {
            color: var(--muted)
        }

        .sum {
            display: flex;
            justify-content: space-between;
            color: var(--muted);
            padding: 5px 0
        }

        .sum.total {
            font-size: 1.25rem;
            color: var(--text);
            font-weight: 800;
            border-top: 1px solid var(--line);
            margin-top: 8px;
            padding-top: 12px
        }

        .legal h6 {
            color: var(--brand);
            margin-top: 16px
        }

        .legal p {
            color: var(--muted);
            line-height: 1.6;
            font-size: .92rem
        }

        .rel-card {
            border: 1px solid var(--line);
            background: var(--panel2);
            border-radius: 4px;
            padding: 7px;
            flex: 1
        }

        .rel-card img {
            height: 54px;
            width: 100%;
            object-fit: cover;
            border-radius: 3px
        }

        .map {
            height: 300px;
            border: 1px solid var(--line);
            border-radius: 6px;
            overflow: hidden
        }

        .map iframe {
            width: 100%;
            height: 100%;
            border: 0;
            filter: grayscale(.85) invert(.9)
        }

        [data-theme="light"] .map iframe {
            filter: grayscale(.4)
        }

        .toast-hub {
            position: fixed;
            right: 18px;
            top: 92px;
            z-index: 2200;
            display: grid;
            gap: 12px;
            max-width: min(380px, calc(100vw - 36px))
        }

        .signal-toast {
            border: 1px solid var(--line);
            background: var(--panel);
            box-shadow: var(--shadow);
            border-radius: 6px;
            display: grid;
            grid-template-columns: 5px 42px 1fr auto;
            gap: 12px;
            align-items: start;
            padding: 14px;
            position: relative;
            overflow: hidden;
            animation: toastIn .45s cubic-bezier(.25, 1.2, .3, 1)
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(60px) rotate(2deg)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .signal-toast.out {
            animation: toastOut .3s forwards
        }

        @keyframes toastOut {
            to {
                opacity: 0;
                transform: translateX(60px)
            }
        }

        .signal-toast:before {
            content: "";
            background: var(--brand);
            grid-row: 1/span 2;
            height: 100%;
            border-radius: 4px
        }

        .signal-toast .ico {
            width: 42px;
            height: 42px;
            background: color-mix(in srgb, var(--brand) 16%, transparent);
            display: grid;
            place-items: center;
            color: var(--brand);
            border-radius: 4px
        }

        .signal-toast b {
            color: var(--text)
        }

        .signal-toast p {
            color: var(--muted);
            margin: 2px 0 0;
            font-size: .82rem
        }

        .signal-toast .bar {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            background: var(--brand);
            animation: bar 4.5s linear forwards
        }

        @keyframes bar {
            from {
                width: 100%
            }

            to {
                width: 0
            }
        }

        .backtop {
            position: fixed;
            right: 22px;
            bottom: 22px;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            background: var(--panel);
            color: var(--brand);
            display: none;
            place-items: center;
            z-index: 900
        }

        .backtop.show {
            display: grid
        }

        @media(max-width:991px) {
            .section {
                padding: 78px 0
            }

            .hero-grid {
                grid-template-columns: 1fr
            }

            .wheel-pin {
                height: auto;
                min-height: 100vh;
                padding: 110px 0 50px
            }

            .hero-card {
                min-height: auto
            }

            .mission-grid,
            .why-grid {
                grid-template-columns: 1fr
            }

            .cat-board {
                grid-template-columns: repeat(2, 1fr)
            }

            .control-deck {
                grid-template-columns: 1fr
            }

            .wheel-stage {
                max-width: 560px;
                margin: auto
            }

            .wheel-zone {
                height: auto !important
            }

            .nav-rig .collapse {
                margin-top: 10px
            }
        }

        @media(max-width:575px) {
            .cat-board {
                grid-template-columns: 1fr
            }

            .catalog {
                grid-template-columns: 1fr
            }

            .wheel-center {
                width: 190px;
                height: 190px
            }

            .wheel-node {
                width: 74px;
                height: 74px
            }

            .hero-copy h1 {
                font-size: 2.5rem
            }
        }