/* iOSS homepage — below-the-fold section styles, deferred for LCP.
   Extracted verbatim from the inline <style> in Page id=3 body_content.
   Loaded non-blocking via media=print onload in the homepage <head>. */
            .feature-card {
                height: 100%;
                padding: 3px;
                background-color: var(--color-bg);
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-md);
                transition: box-shadow 0.2s ease, transform 0.2s ease;
            }

            .feature-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
            }

            .feature-card-img {
                border-radius: var(--radius-sm);
                overflow: hidden;
                aspect-ratio: 11 / 10;
            }

            .feature-card-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .feature-card-title {
                font-family: var(--font-body);
                font-size: 18px;
                font-weight: 600;
                letter-spacing: -0.3px;
                line-height: 1.4em;
                margin: 20px 10px 8px;
            }

            .feature-card-text {
                color: var(--color-text-muted);
                font-size: 14px;
                line-height: 1.7em;
                margin: 0 10px 10px;
            }

            .feature-card-mock-card .feature-card-title {
                margin: 18px 10px 8px;
            }

            .feature-mock {
                position: relative;
                aspect-ratio: 11 / 10;
                border-radius: var(--radius-sm);
                overflow: hidden;
                padding: 16px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                transition: transform 0.3s ease;
            }

            .feature-card-mock-card:hover .feature-mock {
                transform: translateY(-2px);
            }

            .feature-mock-code {
                background: linear-gradient(150deg, rgba(70, 108, 243, 0.12), rgba(70, 108, 243, 0.03));
            }

            .feature-mock-strategy {
                background: linear-gradient(150deg, rgba(248, 61, 105, 0.1), rgba(248, 61, 105, 0.03));
            }

            .feature-mock-chat {
                background: linear-gradient(150deg, rgba(33, 204, 238, 0.12), rgba(33, 204, 238, 0.03));
                gap: 8px;
            }

            .feature-mock-analytics {
                background: linear-gradient(150deg, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0.03));
            }

            .bar {
                display: block;
                height: 7px;
                border-radius: 4px;
                background: rgba(24, 24, 24, 0.14);
            }

            .w-20 {
                width: 20%;
            }

            .w-24 {
                width: 24%;
            }

            .w-28 {
                width: 28%;
            }

            .w-32 {
                width: 32%;
            }

            .w-36 {
                width: 36%;
            }

            .w-40 {
                width: 40%;
            }

            .w-44 {
                width: 44%;
            }

            .w-50 {
                width: 50%;
            }

            .w-52 {
                width: 52%;
            }

            .w-60 {
                width: 60%;
            }

            .w-70 {
                width: 70%;
            }

            .w-85 {
                width: 85%;
            }

            .mock-window {
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 10px 26px rgba(24, 24, 24, 0.1);
                overflow: hidden;
            }

            .mock-window-bar {
                display: flex;
                align-items: center;
                gap: 5px;
                padding: 8px 10px;
                border-bottom: 1px solid var(--color-border-soft);
            }

            .mock-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
            }

            .mock-dot-red {
                background: #ff5f57;
            }

            .mock-dot-yellow {
                background: #febc2e;
            }

            .mock-dot-green {
                background: #28c840;
            }

            .mock-window-title {
                margin-left: 6px;
                font-size: 9px;
                color: var(--color-text-muted);
                font-family: var(--font-body);
            }

            .mock-code-body {
                padding: 10px 11px 12px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                font-family: "SFMono-Regular", "Geist Mono", Consolas, "Courier New", monospace;
                font-size: 10px;
                line-height: 1.5;
            }

            .code-line {
                display: flex;
                align-items: baseline;
                gap: 8px;
                white-space: nowrap;
            }

            .code-line .ln {
                font-size: 9px;
                color: rgba(24, 24, 24, 0.28);
                width: 8px;
                text-align: right;
                flex-shrink: 0;
            }

            .code-line code {
                color: var(--color-text);
            }

            .code-line code.ind {
                padding-left: 14px;
            }

            .c-key {
                color: #a855f7;
            }

            .c-mod {
                color: var(--color-accent);
            }

            .c-fn {
                color: #1470ef;
            }

            .c-var {
                color: #e0792b;
            }

            .c-arg {
                color: var(--color-pink);
            }

            .c-num {
                color: #16a34a;
            }

            .cursor {
                display: inline-block;
                width: 5px;
                height: 11px;
                margin-left: 1px;
                transform: translateY(1px);
                background: var(--color-accent);
                animation: mockBlink 1.1s step-end infinite;
            }

            @keyframes mockBlink {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }
            }

            .mock-panel {
                background: #fff;
                border-radius: 12px;
                padding: 12px 14px;
                box-shadow: 0 10px 26px rgba(24, 24, 24, 0.08);
            }

            .mock-panel-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;
            }

            .mock-panel-title {
                font-size: 11px;
                font-weight: 600;
                font-family: var(--font-body);
                color: var(--color-text);
            }

            .mock-tag {
                font-size: 9px;
                font-weight: 600;
                padding: 2px 7px;
                border-radius: var(--radius-pill);
            }

            .mock-tag-pink {
                color: var(--color-pink);
                background: rgba(248, 61, 105, 0.12);
            }

            .mock-steps {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .mock-step {
                display: flex;
                align-items: center;
                gap: 9px;
                position: relative;
            }

            .mock-step:not(:last-child)::before {
                content: "";
                position: absolute;
                left: 4px;
                top: 13px;
                width: 1.5px;
                height: 18px;
                background: var(--color-border);
            }

            .step-node {
                width: 9px;
                height: 9px;
                border-radius: 50%;
                border: 2px solid var(--color-border);
                background: #fff;
                flex-shrink: 0;
                z-index: 1;
            }

            .mock-step.done .step-node {
                border-color: var(--color-pink);
                background: var(--color-pink);
            }

            .mock-step.active .step-node {
                border-color: var(--color-pink);
                box-shadow: 0 0 0 3px rgba(248, 61, 105, 0.16);
            }

            .step-label {
                font-size: 10px;
                font-weight: 500;
                font-family: var(--font-body);
                color: var(--color-text);
                flex: 1;
            }

            .mock-step:not(.done):not(.active) .step-label {
                color: var(--color-text-muted);
            }

            .step-meta {
                font-size: 8.5px;
                font-weight: 600;
                color: var(--color-text-muted);
                opacity: 0.7;
            }

            .mock-step.done .step-meta {
                color: var(--color-pink);
                opacity: 1;
            }

            .step-meta-active {
                color: var(--color-pink);
                background: rgba(248, 61, 105, 0.12);
                padding: 1px 6px;
                border-radius: var(--radius-pill);
                opacity: 1;
            }

            .chat-bubble {
                max-width: 82%;
                padding: 8px 11px;
                border-radius: 14px;
                box-shadow: 0 6px 16px rgba(24, 24, 24, 0.06);
                font-family: var(--font-body);
                font-size: 10.5px;
                line-height: 1.4;
            }

            .chat-in {
                align-self: flex-start;
                background: #fff;
                color: var(--color-text);
                border-bottom-left-radius: 4px;
            }

            .chat-out {
                align-self: flex-end;
                background: var(--color-cyan);
                color: #06363f;
                border-bottom-right-radius: 4px;
            }

            .chat-chips {
                display: flex;
                gap: 4px;
                margin-top: 6px;
            }

            .chat-chip {
                font-size: 8px;
                font-weight: 600;
                padding: 2px 6px;
                border-radius: var(--radius-pill);
            }

            .chat-chip-pos {
                background: rgba(255, 255, 255, 0.85);
                color: #0a7d2e;
            }

            .chat-typing {
                display: flex;
                flex-direction: row;
                gap: 4px;
                padding: 11px;
            }

            .typing-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: rgba(24, 24, 24, 0.3);
                animation: typingBounce 1.2s infinite ease-in-out;
            }

            .typing-dot:nth-child(2) {
                animation-delay: 0.2s;
            }

            .typing-dot:nth-child(3) {
                animation-delay: 0.4s;
            }

            @keyframes typingBounce {

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

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

            .mock-panel-head-col {
                flex-direction: column;
                align-items: flex-start;
                gap: 3px;
                margin-bottom: 10px;
            }

            .mock-eyebrow {
                font-size: 9px;
                font-weight: 500;
                font-family: var(--font-body);
                color: var(--color-text-muted);
            }

            .mock-stat-row {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .feature-mock-analytics .mock-stat {
                font-size: 17px;
                font-weight: 700;
                font-family: var(--font-head);
                letter-spacing: -0.5px;
                color: var(--color-text);
            }

            .mock-trend {
                font-size: 9px;
                font-weight: 600;
                color: #16a34a;
                background: rgba(40, 200, 100, 0.12);
                padding: 2px 7px;
                border-radius: var(--radius-pill);
            }

            .mock-chart {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 6px;
                height: 54px;
                margin-top: 4px;
            }

            .mock-chart-axis {
                display: flex;
                justify-content: space-between;
                gap: 6px;
                margin-top: 6px;
            }

            .mock-chart-axis span {
                flex: 1;
                text-align: center;
                font-size: 7.5px;
                font-family: var(--font-body);
                color: var(--color-text-muted);
                opacity: 0.7;
            }

            .chart-bar {
                flex: 1;
                border-radius: 4px 4px 2px 2px;
                background: rgba(124, 92, 255, 0.28);
                transition: height 0.3s ease;
            }

            .chart-bar-hi {
                background: #7c5cff;
                box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4);
            }

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

                .blink,
                .typing-dot {
                    animation: none;
                }
            }

            #power-pack {
                background: var(--bg-1);
            }

            /* ABOUT iOSS — dark curved panel (white + red on black) */
            .about-section {
                position: relative;
                z-index: 2;
            }

            .about-panel {
                position: relative;
                padding: 0 30px;
                overflow: hidden;
            }

            .about-bg {
                position: absolute;
                inset: 0 24px;
                background: var(--color-text);
                border-radius: 32px;
                overflow: hidden;
                z-index: 0;
            }

            .about-inner {
                position: relative;
                z-index: 2;
                padding: 66px 0;
            }

            /* The About panel is a plain in-flow block — the former scroll-driven
                       video takeover (sticky pin + shrink/fade of the content) has been
                       removed. */
            .about-pin {
                position: relative;
                display: block;
            }

            .about-content {
                position: relative;
                z-index: 1;
                width: 100%;
            }

            .about-layout {
                display: flex;
                /* DOM order is .about-main (copy) then .about-visual (the value
                   bento); row-reverse puts the value box on the LEFT and the copy
                   on the RIGHT without touching the markup or the reveal order.
                   The <=991px column-reverse below still stacks bento-then-copy. */
                flex-direction: row-reverse;
                align-items: stretch;
                gap: 56px;
            }

            .about-main {
                flex: 1.1 1 0;
                min-width: 0;
            }

            .about-main .section-title {
                font-size: 40px;
                margin-bottom: 16px;
                color: #fff;
            }

            .about-main .section-title .primary-text {
                color: var(--color-accent-2);
            }

            .about-main .section-subtitle {
                margin-bottom: 28px;
                color: rgba(255, 255, 255, 0.72);
            }

            .about-visual {
                flex: 0.95 1 0;
                min-width: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 12px;
            }

            /* Modern glass bento — frosted tiles, gradient numbers, one accent hero tile.
               Rows share the column height equally so the grid ends level with the
               copy beside it instead of running past the section. */
            /* 10 tiles = 5 rows. The old `minmax(104px, 1fr)` + `flex: 1 1 auto` let
               every row STRETCH to match the (very tall) copy column beside it, so
               the bento ran well past one screen. Rows are now capped AND the grid
               takes only its content height (`flex: 0 0 auto`), which lets the
               parent `.about-visual { justify-content: center }` sit it on the
               vertical middle of the copy column instead of the top. */
            .about-bento {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-auto-rows: minmax(0, 116px);
                align-content: center;
                gap: 13px;
                flex: 0 0 auto;
                min-height: 0;
            }

            .about-tile {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-height: 0;
                padding: 18px 20px;
                border-radius: 18px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.045);
                border: 1px solid rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(16px) saturate(140%);
                -webkit-backdrop-filter: blur(16px) saturate(140%);
                box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
                transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
            }

            /* Corner accent glow removed per request — stat tiles are flat now. */
            .about-tile:not(.about-tile--img):not(.about-tile--pink)::before {
                content: none;
            }

            .about-tile:hover {
                transform: translateY(-4px);
                border-color: rgba(225, 70, 70, 0.35);
                box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09);
            }

            .about-tile .t-num {
                position: relative;
                font-family: var(--font-head);
                font-size: clamp(28px, 2.3vw, 36px);
                font-weight: 700;
                letter-spacing: -1.4px;
                line-height: 1;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .about-tile .t-lbl {
                position: relative;
                margin-top: 7px;
                font-size: 12.5px;
                font-weight: 500;
                letter-spacing: 0.2px;
                line-height: 1.4;
                color: rgba(255, 255, 255, 0.6);
            }

            /* Hero accent tile — gradient fill instead of the old flat pink block */
            .about-tile--pink {
                background: linear-gradient(150deg, var(--color-accent-2), var(--color-accent));
                border-color: transparent;
                box-shadow: 0 12px 34px rgba(225, 70, 70, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
            }

            .about-tile--pink::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.28), transparent 58%);
                pointer-events: none;
            }

            .about-tile--pink .t-num {
                background: none;
                -webkit-text-fill-color: #fff;
                color: #fff;
            }

            .about-tile--pink .t-lbl {
                color: rgba(255, 255, 255, 0.92);
            }

            /* Secondary accent tile — tinted glass, closes the bento without
               competing with the solid gradient hero tile at the top. */
            .about-tile--accent {
                background: rgba(225, 70, 70, 0.1);
                border-color: rgba(225, 70, 70, 0.28);
            }

            .about-tile--accent .t-lbl {
                color: rgba(255, 255, 255, 0.78);
            }

            /* former "light"/"dark" tiles now share the unified glass look */
            .about-tile--img {
                padding: 0;
                border-color: rgba(255, 255, 255, 0.1);
            }

            .about-tile--img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .about-tile--img:hover img {
                transform: scale(1.06);
            }

            .about-tile--img::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(14, 14, 16, 0) 40%, rgba(14, 14, 16, 0.45));
                pointer-events: none;
            }

            .about-badges {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .about-badge {
                display: flex;
                align-items: center;
                gap: 13px;
                padding: 16px;
                background: rgba(255, 255, 255, 0.04);
                border: 1.5px solid rgba(255, 255, 255, 0.12);
                border-radius: var(--radius-md);
                transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            }

            .about-badge:hover {
                transform: translateY(-3px);
                box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
                border-color: rgba(225, 70, 70, 0.4);
            }

            .about-badge-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                flex-shrink: 0;
                border-radius: 12px;
                font-size: 17px;
                color: #fff;
                background: linear-gradient(140deg, var(--color-accent-2), var(--color-accent));
                box-shadow: 0 6px 14px rgba(225, 70, 70, 0.3);
            }

            .about-badge span {
                font-size: 13.5px;
                font-weight: 600;
                line-height: 1.3;
                color: #fff;
            }

            @media (max-width: 1199.98px) {
                .about-bg {
                    inset: 0 10px;
                    border-radius: 20px;
                }
            }

            @media (max-width: 991.98px) {
                .about-inner {
                    padding: 52px 0;
                }

                .about-layout {
                    flex-direction: column-reverse;
                    gap: 36px;
                    align-items: stretch;
                }

                .about-main {
                    text-align: center;
                }

                /* The heading carries .text-start (text-align:left !important);
                   re-center it on mobile so it matches the centered body copy. */
                .about-main .section-title.text-start {
                    text-align: center !important;
                }

                .about-main .key-tools-heading,
                .about-main .pill-badge {
                    justify-content: center;
                }
            }

            @media (max-width: 767.98px) {
                .about-panel {
                    padding: 0 20px;
                }

                .about-bg {
                    inset: 0 5px;
                    border-radius: 0;
                }
            }

            @media (max-width: 575.98px) {
                .about-bento {
                    grid-auto-rows: minmax(0, 92px);
                    gap: 11px;
                }

                .about-tile {
                    padding: 15px 16px;
                }

                .about-tile .t-num {
                    /* scale the figure to the narrow tile so the trailing "+" is
                       never clipped by the tile's overflow:hidden on small phones */
                    font-size: clamp(24px, 7.4vw, 32px);
                    letter-spacing: -1px;
                    white-space: nowrap;
                }

                .about-tile .t-lbl {
                    font-size: 11.5px;
                    margin-top: 5px;
                }

                .about-badges {
                    grid-template-columns: 1fr;
                }
            }

            /* ===== History scrubber (horizontal year timeline) ===== */
            .th-scrubber {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 14px;
                max-width: 880px;
                margin: 0 auto;
            }

            .th-arrow {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                border: 1.5px solid var(--color-border);
                background: var(--color-bg);
                color: var(--color-accent);
                cursor: pointer;
                box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
                transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
                z-index: 3;
            }

            .th-arrow:hover:not(:disabled) {
                background: var(--color-accent);
                color: #fff;
                transform: translateY(-2px);
            }

            .th-arrow:disabled {
                cursor: default;
                opacity: 0.3;
                color: var(--color-text-muted);
                border-color: var(--color-border-soft);
                box-shadow: none;
            }

            .th-stage {
                flex: 1 1 auto;
                min-width: 0;
                text-align: center;
            }

            /* --- top: year badge --- */
            .th-head {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                margin-bottom: 18px;
            }

            .th-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 96px;
                font-family: var(--font-head);
                font-size: 19px;
                font-weight: 700;
                letter-spacing: 0.4px;
                color: #fff;
                background: var(--color-accent);
                border-radius: var(--radius-pill);
                padding: 8px 22px;
                box-shadow: 0 10px 26px rgba(187, 45, 59, 0.28);
                transition: transform 0.3s ease;
            }

            .th-eyebrow {
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: var(--color-text-muted);
            }

            /* --- ruler --- */
            .th-ruler {
                position: relative;
                width: 100%;
                height: 116px;
                overflow: hidden;
                -webkit-user-select: none;
                user-select: none;
                cursor: grab;
                touch-action: pan-y;
            }

            .th-ruler.is-dragging {
                cursor: grabbing;
            }

            /* center highlight capsule */
            .th-cursor {
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 92px;
                height: 100px;
                border-radius: 22px;
                background: var(--color-bg);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                border: 1.5px solid var(--color-border-soft);
                z-index: 1;
                pointer-events: none;
            }


            .th-track {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                display: flex;
                align-items: flex-start;
                z-index: 2;
                will-change: transform;
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .th-ruler.is-dragging .th-track {
                transition: none;
            }

            .th-stop {
                position: relative;
                flex: 0 0 auto;
                width: 92px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 22px;
                pointer-events: none;
            }

            .th-stop-year {
                font-family: var(--font-head);
                font-size: 17px;
                font-weight: 600;
                color: var(--color-text-muted);
                opacity: 0.4;
                transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, font-size 0.3s ease;
            }

            .th-stop.is-active .th-stop-year {
                color: var(--color-text);
                opacity: 1;
                font-size: 24px;
                transform: translateY(-2px);
                font-weight: 700;
            }

            .th-stop-tick {
                margin-top: 16px;
                width: 2px;
                height: 22px;
                border-radius: 2px;
                background: var(--color-border);
                transition: height 0.3s ease, background 0.3s ease;
            }

            .th-stop.is-active .th-stop-tick {
                height: 40px;
                background: var(--color-accent);
            }

            /* edge fades */
            .th-ruler-fade {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 90px;
                z-index: 3;
                pointer-events: none;
            }

            .th-ruler-fade-l {
                left: 0;
                background: linear-gradient(90deg, var(--color-bg) 10%, transparent);
            }

            .th-ruler-fade-r {
                right: 0;
                background: linear-gradient(270deg, var(--color-bg) 10%, transparent);
            }

            /* --- bottom: content --- */
            .th-content {
                max-width: 560px;
                margin: 18px auto 0;
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .th-content.is-switching {
                opacity: 0;
                transform: translateY(8px);
            }

            .th-content-title {
                font-family: var(--font-body);
                font-size: 20px;
                font-weight: 600;
                letter-spacing: -0.3px;
                line-height: 1.3;
                margin: 0 0 8px;
            }

            .th-content-text {
                line-height: 1.65;
                color: var(--color-text-muted);
                margin: 0;
            }

            @media (max-width: 767.98px) {
                .th-scrubber {
                    gap: 6px;
                }

                .th-arrow {
                    width: 40px;
                    height: 40px;
                }

                .th-ruler {
                    height: 104px;
                }

                .th-cursor {
                    width: 78px;
                    height: 92px;
                }

                .th-stop {
                    width: 78px;
                }

                .th-ruler-fade {
                    width: 50px;
                }

                .th-content-title {
                    font-size: 18px;
                }
            }

            hr {
                border: none;
                height: 2px;
                margin: 0;
                background-color: rgb(108 111 118 / 22%);
            }

            .enterprise-layout {
                display: flex;
                align-items: stretch;
                gap: 28px;
            }

            .enterprise-main {
                flex: 1.15 1 0;
                min-width: 0;
            }

            .enterprise-main .section-title {
                font-size: 30px;
                margin-bottom: 14px;
            }

            .enterprise-main .section-subtitle {
                font-size: 15px;
            }

            .enterprise-eyebrow {
                display: block;
                margin: 26px 0 16px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: var(--color-text-muted);
                position: relative;
                padding-bottom: 14px;
            }

            .enterprise-eyebrow::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background: var(--color-border-soft);
            }

            .enterprise-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .ent-box {
                display: flex;
                align-items: flex-start;
                gap: 14px;
                padding: 16px 16px;
                background: var(--color-surface);
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-md);
                transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            }

            .ent-box-wide {
                grid-column: 1 / -1;
            }

            .ent-box:hover {
                transform: translateY(-3px);
                box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
                border-color: rgba(225, 70, 70, 0.25);
                background: var(--color-bg);
            }

            .ent-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                flex-shrink: 0;
                border-radius: 11px;
                color: var(--color-accent-2);
                background: linear-gradient(140deg, rgba(225, 70, 70, 0.13), rgba(225, 70, 70, 0.04));
                box-shadow: inset 0 0 0 1px rgba(225, 70, 70, 0.12);
                transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
            }

            .ent-box:hover .ent-icon {
                color: #fff;
                background: linear-gradient(140deg, var(--color-accent-2), var(--color-accent));
                box-shadow: 0 8px 18px rgba(225, 70, 70, 0.3);
            }

            .ent-title {
                font-family: var(--font-body);
                font-size: 14.5px;
                font-weight: 600;
                letter-spacing: -0.2px;
                line-height: 1.3;
                margin: 0 0 3px;
            }

            .ent-text {
                color: var(--color-text-muted);
                font-size: 12.5px;
                line-height: 1.55;
                margin: 0;
            }

            .key-tools-section {
                background: var(--color-surface);
            }

            .enterprise-visual {
                position: relative;
                flex: 0.95 1 0;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--color-surface);
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-lg);
                padding: 32px;
                overflow: hidden;
            }

            .enterprise-blob {
                position: absolute;
                top: -60px;
                left: -40px;
                width: 320px;
                height: 220px;
                border-radius: 50%;
                background: radial-gradient(ellipse at center, rgb(255 227 227), rgba(70, 108, 243, 0) 70%);
                filter: blur(20px);
                pointer-events: none;
            }

            .enterprise-photo {
                position: relative;
                width: 100%;
                max-width: 360px;
                aspect-ratio: 1 / 1;
                border-radius: var(--radius-lg);
                overflow: hidden;
                background: linear-gradient(150deg, #e9ecf2, #dfe3ea);
                box-shadow: 0 20px 50px rgba(14, 14, 16, 0.12);
            }

            .enterprise-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            @media (max-width: 991.98px) {
                .enterprise-layout {
                    flex-direction: column;
                }

                .enterprise-visual {
                    min-height: 300px;
                }
            }

            @media (max-width: 575.98px) {
                .enterprise-grid {
                    grid-template-columns: 1fr;
                }

                .ent-box-wide {
                    grid-column: auto;
                }

                .enterprise-main {
                    padding: 28px 22px;
                }
            }

            .why-layout {
                display: flex;
                align-items: flex-start;
                gap: 56px;
            }

            .why-intro {
                position: sticky;
                top: 110px;
                flex: 1 1 0;
                max-width: 380px;
            }

            .why-intro .section-title {
                margin-top: 4px;
            }

            .why-list {
                flex: 1.3 1 0;
                display: flex;
                flex-direction: column;
            }

            .why-item {
                position: relative;
                display: flex;
                align-items: flex-start;
                gap: 24px;
                padding: 26px 22px;
                border-top: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-lg);
                transition: background 0.3s ease, transform 0.3s ease;
            }

            .why-item:first-child {
                border-top: none;
            }

            .why-item::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: 3px;
                height: 0;
                border-radius: 3px;
                background: var(--color-accent);
                transform: translateY(-50%);
                transition: height 0.35s var(--ease);
            }

            .why-item:hover {
                background: var(--color-surface);
                transform: translateX(4px);
            }

            .why-item:hover::before {
                height: 60%;
            }

            .why-num {
                font-family: var(--font-head);
                font-size: 34px;
                font-weight: 700;
                line-height: 1;
                letter-spacing: -1.5px;
                color: var(--color-accent);
                min-width: 52px;
                transition: transform 0.3s ease;
            }

            .why-item:hover .why-num {
                transform: scale(1.08);
            }

            .why-body {
                flex: 1;
            }

            .why-title {
                font-family: var(--font-body);
                font-size: 19px;
                font-weight: 600;
                letter-spacing: -0.3px;
                margin: 0 0 8px;
            }

            .why-text {
                color: var(--color-text-muted);
                font-size: 14px;
                line-height: 1.7;
                margin: 0;
            }

            @media (max-width: 991.98px) {
                .why-layout {
                    flex-direction: column;
                    gap: 36px;
                }

                .why-intro {
                    position: static;
                    max-width: 620px;
                }

                .why-list {
                    width: 100%;
                }
            }

            .key-tools-layout {
                display: flex;
                flex-flow: row;
                align-items: flex-start;
                gap: 44px;
                max-width: 1200px;
                margin: 0 auto;
            }

            .key-tools-intro {
                position: sticky;
                top: 110px;
                flex: 1 0 0;
                max-width: 400px;
                display: flex;
                flex-direction: column;
                gap: 56px;
            }

            .key-tools-heading {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .key-tools-heading .section-title {
                font-size: clamp(1.8rem, 3.4vw, 1.8rem);
                margin: 0;
            }

            .text-start {
                text-align: left !important;
            }

            .key-tools-nav {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding-left: 22px;
            }

            .kt-progress {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 2px;
                /* background-color: var(--color-border); */
                border-radius: 6px;
                overflow: hidden;
            }

            .kt-progress-fill {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 33.33%;
                background-color: var(--color-accent);
                border-radius: 6px;
                transition: transform 0.45s cubic-bezier(0.44, 0, 0.18, 1);
            }

            .kt-link {
                font-family: var(--font-body);
                font-size: 20px;
                font-weight: 500;
                line-height: 1.7em;
                color: var(--color-text-muted);
                text-decoration: none;
                transition: color 0.3s ease, opacity 0.3s ease;
                opacity: 0.55;
            }

            .kt-link:hover {
                color: var(--color-text);
            }

            .kt-link.active {
                color: var(--color-accent);
                opacity: 1;
            }

            .key-tools-cards {
                flex: none;
                width: 100%;
                max-width: 639px;
                display: flex;
                flex-direction: column;
                gap: 40px;
                padding-top: 24px;
            }

            .kt-card {
                display: flex;
                flex-direction: column;
                gap: 28px;
                padding-bottom: 48px;
                border-bottom: 1.5px solid var(--color-border-soft);
                scroll-margin-top: 120px;
            }

            .kt-card:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .kt-card-text {
                max-width: 472px;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .kt-card-text h4 {
                font-size: 24px;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4em;
                margin: 0;
            }

            .kt-card-text p {
                color: var(--color-text-muted);
                font-size: 16px;
                line-height: 1.7em;
                margin: 0;
            }

            .kt-card-media {
                position: relative;
                aspect-ratio: 1.40132;
                background-color: var(--color-surface);
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-md);
                overflow: hidden;
                padding: 40px 0 0 40px;
            }

            .kt-card-media img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: left top;
                border: 1px solid var(--color-border);
                border-radius: 8px;
            }

            .kt-media-diagram {
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(150deg, #fbfbfd, #f3f4f8);
            }

            .pm {
                width: 100%;
                height: 100%;
                padding: 26px 30px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 16px;
                font-family: var(--font-body);
            }

            .pm b {
                font-weight: 700;
            }

            .pm-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 7px;
                justify-content: center;
            }

            .pm-chip {
                font-size: 11px;
                font-weight: 600;
                padding: 4px 12px;
                border-radius: var(--radius-pill);
                background: #fff;
                color: var(--color-text-muted);
                border: 1.5px solid var(--color-border);
            }

            .pm-chip.is-on {
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                border-color: transparent;
                box-shadow: 0 6px 14px rgba(225, 70, 70, 0.3);
            }

            .pm-tree {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 22px;
                padding: 6px 0;
            }

            .tree-row {
                display: flex;
                justify-content: center;
                gap: 14%;
                position: relative;
            }

            .tree-row-3 {
                gap: 6%;
            }

            .tree-node {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: #fff;
                border: 2px solid var(--color-border);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                font-weight: 700;
                color: var(--color-text-muted);
                z-index: 1;
            }

            .tree-node.tree-root {
                width: 44px;
                height: 44px;
                font-size: 12px;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                border-color: transparent;
                box-shadow: 0 8px 18px rgba(225, 70, 70, 0.3);
            }

            .tree-row::before {
                content: "";
                position: absolute;
                left: 25%;
                right: 25%;
                top: -16px;
                height: 16px;
                border: 2px solid var(--color-border);
                border-bottom: none;
                border-radius: 8px 8px 0 0;
            }

            .tree-row-1::before {
                display: none;
            }

            .pm-foot {
                display: flex;
                justify-content: center;
                gap: 10px;
                flex-wrap: wrap;
            }

            .pm-foot-stat {
                font-size: 11px;
                color: var(--color-text-muted);
                background: #fff;
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-pill);
                padding: 4px 12px;
            }

            .pm-foot-stat b {
                color: var(--color-text);
            }

            .pm-foot-pay b {
                color: #16a34a;
            }

            .pm-time {
                flex-direction: row;
                align-items: stretch;
                gap: 18px;
            }

            .pm-eyebrow {
                font-size: 11px;
                font-weight: 500;
                color: var(--color-text-muted);
            }

            .pm-time-main {
                flex: 1;
                background: #fff;
                border-radius: var(--radius-md);
                padding: 18px;
                box-shadow: 0 10px 24px rgba(24, 24, 24, 0.06);
                display: flex;
                flex-direction: column;
                gap: 6px;
                justify-content: center;
            }

            .pm-timer {
                font-family: var(--font-head);
                font-size: 38px;
                font-weight: 700;
                letter-spacing: -1px;
                line-height: 1;
                color: var(--color-text);
                display: inline-flex;
                align-items: center;
                gap: 10px;
            }

            .pm-timer-rec {
                width: 11px;
                height: 11px;
                border-radius: 50%;
                background: var(--color-accent-2);
                animation: pmPulse 1.5s ease-in-out infinite;
            }

            .pm-time-task {
                font-size: 12px;
                color: var(--color-text-muted);
            }

            .pm-time-side {
                flex: 1;
                background: #fff;
                border-radius: var(--radius-md);
                padding: 16px 18px;
                box-shadow: 0 10px 24px rgba(24, 24, 24, 0.06);
                display: flex;
                flex-direction: column;
                gap: 5px;
                justify-content: center;
            }

            .pm-prod-row {
                display: flex;
                justify-content: space-between;
                font-size: 11px;
                color: var(--color-text-muted);
            }

            .pm-prod-row b {
                color: var(--color-text);
            }

            .pm-meter {
                height: 6px;
                border-radius: 4px;
                background: var(--color-border);
                overflow: hidden;
                margin-bottom: 8px;
            }

            .pm-meter span {
                display: block;
                height: 100%;
                border-radius: 4px;
                background: #16a34a;
            }

            .pm-meter-amber span {
                background: #f0a020;
            }

            .pm-meter-grey span {
                background: var(--color-text-muted);
            }

            .pm-browser {
                width: 100%;
                background: #fff;
                border-radius: var(--radius-md);
                overflow: hidden;
                box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08);
            }

            .pm-browser-bar {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 9px 12px;
                background: var(--color-surface);
                border-bottom: 1px solid var(--color-border-soft);
            }

            .pm-url {
                margin-left: 8px;
                font-size: 10px;
                color: var(--color-text-muted);
                background: #fff;
                border: 1px solid var(--color-border-soft);
                border-radius: var(--radius-pill);
                padding: 2px 10px;
            }

            .pm-blog-body {
                padding: 16px 18px 20px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .pm-ai-badge {
                align-self: flex-start;
                font-size: 10px;
                font-weight: 600;
                color: var(--color-accent);
                background: rgba(225, 70, 70, 0.1);
                border-radius: var(--radius-pill);
                padding: 4px 11px;
            }

            .pm-blog-h {
                display: block;
                height: 12px;
                width: 65%;
                border-radius: 5px;
                background: var(--color-text);
                opacity: 0.85;
            }

            .pm-blog-cols {
                display: flex;
                gap: 14px;
            }

            .pm-blog-img {
                width: 38%;
                border-radius: 8px;
                background: linear-gradient(135deg, rgba(225, 70, 70, 0.18), rgba(20, 112, 239, 0.16));
                min-height: 56px;
            }

            .pm-blog-lines {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 8px;
                justify-content: center;
            }

            .pm-blog-lines i {
                display: block;
                height: 7px;
                border-radius: 4px;
                background: var(--color-border);
            }

            .pm-blog-lines i.sh {
                width: 70%;
            }

            .pm-bot {
                width: 100%;
                max-width: 380px;
                margin: 0 auto;
                background: #fff;
                border-radius: var(--radius-md);
                box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08);
                overflow: hidden;
            }

            .pm-bot-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                color: #fff;
            }

            .pm-bot-avatar {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                font-weight: 700;
            }

            .pm-bot-name {
                display: block;
                font-size: 13px;
                font-weight: 600;
            }

            .pm-bot-status {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 10px;
                opacity: 0.9;
            }

            .pm-bot-status i {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #44e08a;
            }

            .pm-bot-body {
                padding: 14px;
                display: flex;
                flex-direction: column;
                gap: 9px;
                background: var(--color-surface);
            }

            .pm-msg {
                max-width: 80%;
                padding: 9px 12px;
                border-radius: 14px;
                font-size: 12px;
                line-height: 1.4;
            }

            .pm-msg-in {
                align-self: flex-start;
                background: #fff;
                color: var(--color-text);
                border-bottom-left-radius: 4px;
                box-shadow: 0 4px 12px rgba(24, 24, 24, 0.05);
            }

            .pm-msg-out {
                align-self: flex-end;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                color: #fff;
                border-bottom-right-radius: 4px;
            }

            .pm-msg-typing {
                display: flex;
                gap: 4px;
                padding: 12px;
            }

            .pm-msg-typing span {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: rgba(24, 24, 24, 0.3);
                animation: typingBounce 1.2s infinite ease-in-out;
            }

            .pm-msg-typing span:nth-child(2) {
                animation-delay: 0.2s;
            }

            .pm-msg-typing span:nth-child(3) {
                animation-delay: 0.4s;
            }

            .pm-lms {
                gap: 14px;
            }

            .pm-course {
                display: flex;
                align-items: center;
                gap: 14px;
                background: #fff;
                border-radius: var(--radius-md);
                padding: 14px 16px;
                box-shadow: 0 8px 20px rgba(24, 24, 24, 0.05);
            }

            .pm-course-thumb {
                width: 48px;
                height: 48px;
                flex-shrink: 0;
                border-radius: 10px;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
            }

            .pm-course-thumb-2 {
                background: linear-gradient(135deg, #1470ef, #6927da);
            }

            .pm-course-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .pm-course-title {
                font-size: 13px;
                font-weight: 600;
                color: var(--color-text);
            }

            .pm-progress {
                height: 6px;
                border-radius: 4px;
                background: var(--color-border);
                overflow: hidden;
            }

            .pm-progress span {
                display: block;
                height: 100%;
                border-radius: 4px;
                background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent));
            }

            .pm-course-meta {
                font-size: 10.5px;
                color: var(--color-text-muted);
            }

            .pm-taxi {
                gap: 0;
            }

            .pm-map {
                position: relative;
                height: 130px;
                border-radius: var(--radius-md) var(--radius-md) 0 0;
                background: linear-gradient(0deg, rgba(33, 204, 238, 0.06), rgba(33, 204, 238, 0.06)), repeating-linear-gradient(0deg, transparent 0 22px, rgba(108, 111, 118, 0.07) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(108, 111, 118, 0.07) 22px 23px), #fff;
                border: 1.5px solid var(--color-border-soft);
                border-bottom: none;
                overflow: hidden;
            }

            .pm-route {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                color: var(--color-accent-2);
            }

            .pm-pin {
                position: absolute;
                width: 22px;
                height: 22px;
                border-radius: 50% 50% 50% 0;
                transform: rotate(-45deg);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            }

            .pm-pin b {
                transform: rotate(45deg);
                font-size: 10px;
                font-weight: 700;
                line-height: 1;
            }

            .pm-pin-a {
                left: 6%;
                bottom: 12%;
                background: #1470ef;
            }

            .pm-pin-b {
                right: 6%;
                top: 8%;
                background: var(--color-accent-2);
            }

            .pm-car {
                position: absolute;
                left: 46%;
                top: 30%;
                font-size: 20px;
                transform: rotate(-12deg);
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
            }

            .pm-ride {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                border: 1.5px solid var(--color-border-soft);
                border-radius: 0 0 var(--radius-md) var(--radius-md);
                padding: 12px 16px;
            }

            .pm-ride-eta {
                font-size: 12px;
                color: var(--color-text-muted);
            }

            .pm-ride-eta b {
                color: var(--color-text);
            }

            .pm-ride-fare {
                font-family: var(--font-head);
                font-size: 18px;
                font-weight: 700;
                color: var(--color-text);
            }

            .pm-flight {
                background: #fff;
                border-radius: var(--radius-md);
                box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08);
                padding: 20px;
                gap: 16px;
            }

            .pm-flight-route {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .pm-airport {
                text-align: center;
            }

            .pm-airport b {
                display: block;
                font-family: var(--font-head);
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -0.5px;
                color: var(--color-text);
            }

            .pm-airport span {
                font-size: 10px;
                color: var(--color-text-muted);
            }

            .pm-airport-r {
                text-align: center;
            }

            .pm-flight-path {
                flex: 1;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
            }

            .pm-flight-line {
                width: 100%;
                height: 2px;
                background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 11px);
                position: relative;
            }

            .pm-plane {
                color: var(--color-accent-2);
                font-size: 15px;
                transform: rotate(45deg);
            }

            .pm-flight-dur {
                font-size: 10px;
                color: var(--color-text-muted);
            }

            .pm-flight-foot {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid var(--color-border-soft);
                padding-top: 14px;
            }

            .pm-airline {
                display: flex;
                align-items: center;
                gap: 7px;
                font-size: 12px;
                color: var(--color-text-muted);
            }

            .pm-airline i {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--color-accent-2);
            }

            .pm-flight-price {
                font-family: var(--font-head);
                font-size: 20px;
                font-weight: 700;
                color: #16a34a;
            }

            .pm-shop {
                gap: 14px;
            }

            .pm-shop-grid {
                display: flex;
                gap: 12px;
            }

            .pm-product {
                flex: 1;
                background: #fff;
                border-radius: var(--radius-md);
                padding: 8px;
                box-shadow: 0 8px 18px rgba(24, 24, 24, 0.05);
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .pm-product-img {
                height: 52px;
                border-radius: 8px;
                background: linear-gradient(135deg, rgba(225, 70, 70, 0.2), rgba(225, 70, 70, 0.08));
            }

            .pm-product-img-2 {
                background: linear-gradient(135deg, rgba(20, 112, 239, 0.2), rgba(20, 112, 239, 0.08));
            }

            .pm-product-img-3 {
                background: linear-gradient(135deg, rgba(105, 39, 218, 0.2), rgba(105, 39, 218, 0.08));
            }

            .pm-product-price {
                font-size: 12px;
                font-weight: 700;
                color: var(--color-text);
                text-align: center;
            }

            .pm-cart {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                background: #fff;
                border-radius: var(--radius-md);
                padding: 12px 16px;
                box-shadow: 0 8px 18px rgba(24, 24, 24, 0.05);
            }

            .pm-cart-label {
                font-size: 12px;
                font-weight: 600;
                color: var(--color-text);
            }

            .pm-cart-total {
                font-size: 12px;
                color: var(--color-text-muted);
            }

            .pm-cart-total b {
                color: var(--color-text);
            }

            .pm-cart-btn {
                font-size: 12px;
                font-weight: 600;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                border-radius: var(--radius-pill);
                padding: 7px 16px;
                box-shadow: 0 6px 14px rgba(225, 70, 70, 0.3);
            }

            @keyframes pmPulse {

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

                50% {
                    opacity: 0.4;
                    transform: scale(0.8);
                }
            }

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

                .pm-timer-rec,
                .pm-msg-typing span {
                    animation: none;
                }
            }

            @media (max-width: 575.98px) {
                .pm {
                    padding: 18px;
                }

                .pm-time {
                    flex-direction: column;
                }

                .pm-timer {
                    font-size: 30px;
                }
            }

            .kt-media-diagram {
                background: radial-gradient(120% 120% at 0% 0%, rgba(225, 70, 70, 0.06), transparent 45%), radial-gradient(120% 120% at 100% 100%, rgba(20, 112, 239, 0.06), transparent 45%), linear-gradient(150deg, #fbfbfd, #eef0f5);
            }

            .pm {
                justify-content: center;
                gap: 14px;
            }

            .pm-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .pm-bar-title {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                font-weight: 700;
                color: var(--color-text);
            }

            .pm-bar-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                box-shadow: 0 0 0 3px rgba(225, 70, 70, 0.14);
            }

            .pm-bar-date,
            .pm-streak,
            .pm-flight-q {
                font-size: 10.5px;
                font-weight: 600;
                color: var(--color-text-muted);
                background: #fff;
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-pill);
                padding: 4px 11px;
            }

            .pm-mlm-body {
                display: flex;
                align-items: center;
                gap: 18px;
            }

            .pm-tree {
                flex: 1.25;
                gap: 18px;
            }

            .tree-row {
                gap: 12%;
            }

            .tree-row-3 {
                gap: 5%;
            }

            .tree-node {
                position: relative;
                background: linear-gradient(135deg, #f3f4f8, #e8eaf0);
                color: var(--color-text);
                box-shadow: 0 4px 10px rgba(24, 24, 24, 0.07);
            }

            .tree-node.n-blue {
                background: linear-gradient(135deg, #4d8bff, #1470ef);
                color: #fff;
                border-color: transparent;
            }

            .tree-node.n-violet {
                background: linear-gradient(135deg, #8b6bff, #6927da);
                color: #fff;
                border-color: transparent;
            }

            .tree-node.n-sm {
                width: 26px;
                height: 26px;
                font-size: 9px;
            }

            .tree-node.n-add {
                background: #fff;
                color: var(--color-text-muted);
                border-style: dashed;
                font-size: 14px;
                box-shadow: none;
            }

            .node-dot {
                position: absolute;
                right: -1px;
                top: -1px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #44e08a;
                border: 1.5px solid #fff;
            }

            .pm-mlm-side {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .pm-bv {
                background: #fff;
                border-radius: var(--radius-md);
                padding: 12px 14px;
                box-shadow: 0 8px 20px rgba(24, 24, 24, 0.06);
            }

            .pm-bv-row {
                display: flex;
                justify-content: space-between;
                font-size: 10.5px;
                color: var(--color-text-muted);
            }

            .pm-bv-row b {
                color: var(--color-text);
            }

            .pm-bv-bar {
                display: flex;
                height: 7px;
                border-radius: 4px;
                overflow: hidden;
                margin: 6px 0;
                gap: 2px;
            }

            .pm-bv-bar .bv-l {
                width: 58%;
                background: linear-gradient(90deg, #4d8bff, #1470ef);
                border-radius: 4px;
            }

            .pm-bv-bar .bv-r {
                width: 42%;
                background: linear-gradient(90deg, #8b6bff, #6927da);
                border-radius: 4px;
            }

            .pm-rankcard {
                background: linear-gradient(135deg, rgba(225, 70, 70, 0.1), rgba(225, 70, 70, 0.03));
                border: 1.5px solid rgba(225, 70, 70, 0.18);
                border-radius: var(--radius-md);
                padding: 10px 14px;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .pm-rank-label {
                font-size: 9.5px;
                color: var(--color-text-muted);
            }

            .pm-rank-name {
                font-size: 14px;
                font-weight: 700;
                color: var(--color-accent);
            }

            .pm-foot-stat .dot-up {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #44e08a;
                margin-right: 5px;
                display: inline-block;
            }

            .pm-time {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }

            .pm-time-grid {
                display: flex;
                align-items: stretch;
                gap: 14px;
            }

            .pm-time-main,
            .pm-time-side {
                flex: 1;
            }

            .pm-time-task {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .pm-time-task i {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--color-accent-2);
            }

            .pm-week {
                display: flex;
                align-items: flex-end;
                gap: 5px;
                height: 46px;
                margin-top: 12px;
            }

            .pm-week span {
                flex: 1;
                border-radius: 3px;
                background: rgba(20, 112, 239, 0.22);
            }

            .pm-week span.hi {
                background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent));
            }

            .pm-tasklist {
                list-style: none;
                margin: 10px 0 0;
                padding: 10px 0 0;
                border-top: 1px solid var(--color-border-soft);
                display: flex;
                flex-direction: column;
                gap: 7px;
            }

            .pm-tasklist li {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 11px;
                color: var(--color-text-muted);
            }

            .pm-tasklist li i {
                width: 13px;
                height: 13px;
                border-radius: 4px;
                border: 1.5px solid var(--color-border);
                flex-shrink: 0;
            }

            .pm-tasklist li.done i {
                background: #16a34a;
                border-color: #16a34a;
                position: relative;
            }

            .pm-tasklist li.done i::after {
                content: "\2713";
                position: absolute;
                inset: 0;
                color: #fff;
                font-size: 9px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .pm-tasklist li.done {
                text-decoration: line-through;
                opacity: 0.7;
            }

            .pm-wp-badge {
                margin-left: auto;
                font-size: 9px;
                font-weight: 700;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                border-radius: var(--radius-pill);
                padding: 3px 9px;
            }

            .pm-blog-transform {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 16px;
            }

            .pm-blog-raw {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 7px;
                padding: 12px;
                border-radius: 10px;
                background: var(--color-surface);
                border: 1px dashed var(--color-border);
                opacity: 0.85;
            }

            .pm-raw-label {
                font-size: 8.5px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--color-text-muted);
            }

            .pm-blog-raw i {
                display: block;
                height: 5px;
                border-radius: 3px;
                background: var(--color-border);
            }

            .pm-blog-raw i.sh {
                width: 60%;
            }

            .pm-blog-arrow {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                color: var(--color-accent);
                flex-shrink: 0;
            }

            .pm-blog-out {
                flex: 1.1;
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 12px;
                border-radius: 10px;
                background: #fff;
                border: 1.5px solid rgba(225, 70, 70, 0.18);
                box-shadow: 0 8px 20px rgba(225, 70, 70, 0.1);
            }

            .pm-blog-out .pm-blog-h {
                width: 80%;
                height: 9px;
            }

            .pm-blog-out .pm-blog-img {
                width: 100%;
                min-height: 34px;
            }

            .pm-blog-out .pm-blog-lines i {
                height: 5px;
            }

            .pm-blog-foot {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 11px 16px;
                border-top: 1px solid var(--color-border-soft);
                background: var(--color-surface);
            }

            .pm-seo {
                font-size: 11px;
                font-weight: 600;
                color: var(--color-text-muted);
            }

            .pm-seo b {
                color: #16a34a;
                font-size: 13px;
                margin-left: 3px;
            }

            .pm-blog-meta {
                font-size: 10px;
                color: var(--color-text-muted);
            }

            .pm-bot-meta {
                display: flex;
                flex-direction: column;
            }

            .pm-bot-intent {
                margin-left: auto;
                font-size: 9px;
                font-weight: 600;
                color: #fff;
                background: rgba(255, 255, 255, 0.22);
                border-radius: var(--radius-pill);
                padding: 3px 9px;
            }

            .pm-quick {
                display: flex;
                gap: 6px;
                margin-top: 8px;
            }

            .pm-qchip {
                font-size: 10px;
                font-weight: 600;
                color: var(--color-accent);
                background: rgba(225, 70, 70, 0.08);
                border: 1px solid rgba(225, 70, 70, 0.2);
                border-radius: var(--radius-pill);
                padding: 3px 9px;
            }

            .pm-bot-foot {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                background: #fff;
                border-top: 1px solid var(--color-border-soft);
            }

            .pm-bot-input {
                flex: 1;
                font-size: 11px;
                color: var(--color-text-muted);
                background: var(--color-surface);
                border-radius: var(--radius-pill);
                padding: 7px 12px;
            }

            .pm-bot-send {
                width: 28px;
                height: 28px;
                flex-shrink: 0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
            }

            .pm-lms-stats {
                display: flex;
                gap: 10px;
            }

            .pm-stat {
                flex: 1;
                background: #fff;
                border-radius: var(--radius-sm);
                padding: 10px;
                text-align: center;
                box-shadow: 0 6px 16px rgba(24, 24, 24, 0.05);
            }

            .pm-stat b {
                display: block;
                font-family: var(--font-head);
                font-size: 18px;
                font-weight: 700;
                color: var(--color-text);
                line-height: 1;
            }

            .pm-stat span {
                font-size: 9.5px;
                color: var(--color-text-muted);
            }

            .pm-course-thumb {
                font-size: 20px;
            }

            .pm-course-cta {
                font-size: 10px;
                font-weight: 600;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
                border-radius: var(--radius-pill);
                padding: 6px 12px;
                flex-shrink: 0;
            }

            .pm-course-badge {
                font-size: 10px;
                font-weight: 600;
                color: var(--color-accent);
                background: rgba(225, 70, 70, 0.1);
                border-radius: var(--radius-pill);
                padding: 5px 11px;
                flex-shrink: 0;
            }

            .pm-map {
                height: 150px;
                background: linear-gradient(160deg, #eef3ee, #e6efe9);
            }

            .pm-roads {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
            }

            .pm-live {
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 9.5px;
                font-weight: 600;
                color: var(--color-text);
                background: rgba(255, 255, 255, 0.92);
                border-radius: var(--radius-pill);
                padding: 4px 9px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            }

            .pm-live i {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #44e08a;
                animation: pmPulse 1.5s ease-in-out infinite;
            }

            .pm-car {
                left: 44%;
                top: 36%;
            }

            .pm-ride {
                gap: 12px;
                align-items: center;
            }

            .pm-driver-avatar {
                width: 38px;
                height: 38px;
                flex-shrink: 0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 700;
                color: #fff;
                background: linear-gradient(135deg, #4d8bff, #1470ef);
            }

            .pm-driver-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .pm-driver-name {
                font-size: 12.5px;
                font-weight: 700;
                color: var(--color-text);
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .pm-driver-rating {
                font-size: 10px;
                font-weight: 600;
                color: #f0a020;
            }

            .pm-driver-car {
                font-size: 10px;
                color: var(--color-text-muted);
            }

            .pm-ride-right {
                text-align: right;
                display: flex;
                flex-direction: column;
            }

            .pm-ride-right .pm-ride-eta {
                font-size: 10px;
            }

            .pm-flight {
                background: transparent;
                box-shadow: none;
                padding: 26px 30px;
                gap: 12px;
            }

            .pm-flight-card {
                background: #fff;
                border-radius: var(--radius-md);
                box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08);
                padding: 18px 20px;
                display: flex;
                flex-direction: column;
                gap: 14px;
            }

            .pm-airport b {
                font-size: 24px;
            }

            .pm-airport span {
                font-size: 12px;
                font-weight: 600;
                color: var(--color-text);
            }

            .pm-flight-path {
                gap: 4px;
            }

            .pm-flight-line {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: none;
                height: auto;
                position: relative;
            }

            .pm-flight-line::before,
            .pm-flight-line::after {
                content: "";
                flex: 1;
                height: 2px;
                background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 11px);
            }

            .pm-flight-line .pm-plane {
                margin: 0 6px;
            }

            .pm-flight-cls {
                font-size: 9.5px;
                color: var(--color-text-muted);
            }

            .pm-airline-logo {
                width: 22px;
                height: 22px;
                border-radius: 7px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 9px;
                font-weight: 700;
                color: #fff;
                background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
            }

            .pm-flight-pricewrap {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .pm-best {
                font-size: 9px;
                font-weight: 700;
                color: #16a34a;
                background: rgba(40, 200, 100, 0.12);
                border-radius: var(--radius-pill);
                padding: 3px 8px;
            }

            .pm-fare-list {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .pm-fare {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 10.5px;
                color: var(--color-text-muted);
                background: #fff;
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-pill);
                padding: 5px 11px;
            }

            .pm-fare b {
                color: var(--color-text);
            }

            .pm-fare i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #1470ef;
            }

            .pm-fare i.f2 {
                background: #6927da;
            }

            .pm-duffel {
                margin-left: auto;
                font-size: 9.5px;
                font-weight: 600;
                color: var(--color-accent);
            }

            .pm-shop-bar {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .pm-shop-logo {
                font-size: 13px;
                font-weight: 700;
                color: var(--color-accent);
            }

            .pm-shop-search {
                flex: 1;
                font-size: 10.5px;
                color: var(--color-text-muted);
                background: #fff;
                border: 1.5px solid var(--color-border-soft);
                border-radius: var(--radius-pill);
                padding: 6px 12px;
            }

            .pm-shop-cart {
                position: relative;
                font-size: 15px;
            }

            .pm-shop-cart i {
                position: absolute;
                top: -4px;
                right: -6px;
                font-size: 8px;
                font-weight: 700;
                font-style: normal;
                color: #fff;
                background: var(--color-accent-2);
                border-radius: 50%;
                width: 13px;
                height: 13px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .pm-product {
                gap: 6px;
            }

            .pm-product-img {
                position: relative;
                height: 46px;
            }

            .pm-prod-tag {
                position: absolute;
                top: 5px;
                left: 5px;
                font-size: 8px;
                font-weight: 700;
                font-style: normal;
                color: #fff;
                background: var(--color-accent-2);
                border-radius: var(--radius-pill);
                padding: 2px 6px;
            }

            .pm-product-name {
                font-size: 10.5px;
                font-weight: 600;
                color: var(--color-text);
            }

            .pm-product-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .pm-product-price {
                text-align: left;
                font-size: 12px;
            }

            .pm-stars {
                font-size: 8px;
                color: #f0a020;
                letter-spacing: -1px;
            }

            .pm-cart-sales {
                font-size: 11px;
                color: var(--color-text-muted);
            }

            .pm-cart-sales b {
                display: block;
                color: #16a34a;
                font-size: 13px;
            }

            .kt-progress {
                width: 3px;
            }

            .kt-progress-fill {
                display: none;
            }

            .kt-link {
                position: relative;
            }

            .kt-link::before {
                content: "";
                position: absolute;
                left: -22px;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 1.8em;
                border-radius: 3px;
                background: transparent;
                transition: background 0.3s ease;
            }

            .kt-link.active {
                font-weight: 600;
            }

            .kt-link.active::before {
                background: var(--color-accent);
            }

            .pm-ico {
                width: 14px;
                height: 14px;
                flex-shrink: 0;
            }

            .pm-ico-xs {
                width: 11px;
                height: 11px;
                flex-shrink: 0;
            }

            .pm-rank-name,
            .pm-streak,
            .pm-bar-date,
            .pm-flight-q,
            .pm-url,
            .pm-ai-badge,
            .pm-duffel,
            .pm-shop-logo,
            .pm-shop-search {
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .kt-media-diagram {
                background: radial-gradient(130% 120% at 0% 0%, rgba(187, 45, 59, 0.05), transparent 50%), linear-gradient(160deg, #fcfcfd, #eceef2);
                border-color: var(--color-border);
            }

            .pm {
                justify-content: flex-start;
                gap: 12px;
            }

            .pm-mlm-body {
                flex: 1;
            }

            .tree-node {
                background: #eef0f4;
                color: #3a3d44;
                border-color: rgba(108, 111, 118, 0.18);
                box-shadow: 0 3px 8px rgba(24, 24, 24, 0.06);
            }

            .tree-node.tree-root {
                background: var(--color-accent);
                box-shadow: 0 6px 14px rgba(187, 45, 59, 0.25);
            }

            .tree-node.n-blue {
                background: #465069;
                border-color: transparent;
            }

            .tree-node.n-violet {
                background: #5d5470;
                border-color: transparent;
            }

            .pm-bv-bar .bv-l {
                background: #465069;
            }

            .pm-bv-bar .bv-r {
                background: #c2c5cd;
            }

            .pm-rankcard {
                background: linear-gradient(135deg, rgba(187, 45, 59, 0.08), rgba(187, 45, 59, 0.02));
                border-color: rgba(187, 45, 59, 0.16);
            }

            .pm-rank-name {
                color: var(--color-accent);
            }

            .pm-time-grid {
                flex: 1;
            }

            .pm-week span {
                background: rgba(70, 80, 105, 0.22);
            }

            .pm-week span.hi {
                background: var(--color-accent);
            }

            .pm-browser {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .pm-blog-transform {
                flex: 1;
                align-items: stretch;
            }

            .pm-blog-raw,
            .pm-blog-out {
                justify-content: center;
            }

            .pm-blog-img,
            .pm-blog-out .pm-blog-img {
                background: linear-gradient(135deg, #e9ecf2, #dde2ea);
            }

            .pm-blog-out {
                border-color: rgba(187, 45, 59, 0.16);
                box-shadow: 0 8px 20px rgba(187, 45, 59, 0.07);
            }

            .pm-ai-badge {
                color: var(--color-accent);
                background: rgba(187, 45, 59, 0.08);
            }

            .pm-wp-badge {
                background: var(--color-accent);
            }

            .pm-bot {
                max-width: none;
                width: 100%;
                height: 100%;
                padding: 0;
                border-radius: 0;
                box-shadow: none;
                display: flex;
                flex-direction: column;
            }

            .pm-bot-head {
                background: var(--color-accent);
            }

            .pm-bot-body {
                flex: 1;
            }

            .pm-msg-out {
                background: var(--color-accent);
            }

            .pm-msg-in {
                border: 1px solid var(--color-border-soft);
            }

            .pm-qchip {
                color: var(--color-accent);
                background: rgba(187, 45, 59, 0.07);
                border-color: rgba(187, 45, 59, 0.18);
            }

            .pm-bot-send {
                background: var(--color-accent);
            }

            .pm-lms .pm-course {
                flex: 1;
            }

            .pm-course-thumb {
                background: #eef0f4;
                color: #465069;
            }

            .pm-course-thumb-2 {
                background: #eef0f4;
                color: #5d5470;
            }

            .pm-progress span {
                background: var(--color-accent);
            }

            .pm-course-cta {
                background: var(--color-accent);
            }

            .pm-course-badge {
                color: var(--color-accent);
                background: rgba(187, 45, 59, 0.08);
            }

            .pm-map {
                flex: 1;
                height: auto;
                min-height: 150px;
                background: linear-gradient(160deg, #eef1ee, #e6ebe7);
            }

            .pm-route {
                color: var(--color-accent);
            }

            .pm-pin-a {
                background: #465069;
            }

            .pm-pin-b {
                background: var(--color-accent);
            }

            .pm-car {
                color: #f4b400;
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
                line-height: 0;
            }

            .pm-driver-avatar {
                background: #465069;
            }

            .pm-driver-rating {
                color: #e0922b;
            }

            .pm-flight-card {
                flex: 1;
                justify-content: center;
            }

            .pm-airline-logo {
                background: var(--color-accent);
            }

            .pm-plane {
                color: var(--color-accent);
                line-height: 0;
            }

            .pm-flight-price {
                color: var(--color-text);
            }

            .pm-best {
                color: var(--color-accent);
                background: rgba(187, 45, 59, 0.09);
            }

            .pm-duffel {
                color: var(--color-accent);
            }

            .pm-shop {
                gap: 12px;
            }

            .pm-shop-logo {
                color: var(--color-accent);
            }

            .pm-shop-grid {
                flex: 1;
            }

            .pm-product {
                justify-content: flex-start;
            }

            .pm-product-img {
                flex: 1;
                min-height: 56px;
                background: linear-gradient(135deg, #edeff3, #e1e4ea);
            }

            .pm-product-img-2 {
                background: linear-gradient(135deg, #eaedf2, #dfe3ea);
            }

            .pm-product-img-3 {
                background: linear-gradient(135deg, #eeedf3, #e3e2ec);
            }

            .pm-prod-tag {
                background: var(--color-accent);
            }

            .pm-stars {
                color: #e0922b;
            }

            .pm-shop-cart i {
                background: var(--color-accent);
            }

            .pm-cart-btn {
                background: var(--color-accent);
                box-shadow: 0 6px 14px rgba(187, 45, 59, 0.22);
            }

            .pm-cart-sales b {
                color: #16a34a;
            }

/* KEY TOOLS — mobile (<=767.98px): the sticky "deck" (cards pile up as you
   scroll) is the intended behaviour and is defined in the home body's inline
   mobile CSS. A previous override here flattened the cards to normal flow
   (position:static) which killed the stacking — removed per request to bring
   the sticky cards back. */



/* ============================================================================
   SERVICE CARD MOCKS  (home → "AI Solutions" grid, second row)
   The four cards in the first row carry a .feature-mock illustration; the six
   .nx-card services below them shipped with only a static icon. These give
   each of those six its own small animated diagram, built to the same rules as
   the rest of the page: flat surfaces (no gradients), brand red as the single
   accent, motion slow enough to read as ambient rather than decorative.
   ========================================================================== */
/* They ride on .feature-mock so the shell, proportion, radius and hover lift
   are literally the same as the first row — these cards sit 4-up too. */
.feature-mock.svc-mock {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* Flat tints drawn from the same four hues the first row already uses. */
.feature-mock.svc-mock-agent { background: rgba(70, 108, 243, 0.1); }
.feature-mock.svc-mock-ml    { background: rgba(124, 92, 255, 0.1); }
.feature-mock.svc-mock-gen   { background: rgba(248, 61, 105, 0.09); }
.feature-mock.svc-mock-cv    { background: rgba(33, 204, 238, 0.1); }
.feature-mock.svc-mock-auto  { background: rgba(70, 108, 243, 0.1); }
.feature-mock.svc-mock-ent   { background: rgba(124, 92, 255, 0.1); }

/* shared bits */
.svc-mock .sm-chip {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 8px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    transition: color .3s ease, border-color .3s ease;
}
.svc-mock .sm-arw {
    width: 14px;
    height: 1px;
    flex: none;
    background: var(--color-border);
}
.svc-mock .sm-svg { width: 100%; height: 100%; overflow: visible; }
.svc-mock .sm-ax { stroke: var(--color-border); stroke-width: 1; }

/* 1 — AI Agent Development: the Plan → Act → Resolve loop lights up in turn */
@keyframes smChip {
    0%, 22%   { color: #fff; background: #e14646; border-color: #e14646; }
    33%, 100% { color: var(--color-text-muted); background: var(--color-bg); border-color: var(--color-border-soft); }
}
/* stacked so the Plan → Act → Resolve loop reads top-to-bottom in the square panel */
.feature-mock.svc-mock-agent { flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.svc-mock-agent .sm-arw { width: 1px; height: 12px; }
.svc-mock-agent .sm-chip { min-width: 78px; text-align: center; animation: smChip 4.2s ease-in-out infinite; }
.svc-mock-agent .sm-chip:nth-of-type(2) { animation-delay: 1.4s; }
.svc-mock-agent .sm-chip:nth-of-type(3) { animation-delay: 2.8s; }

/* 2 — Machine Learning: the trend line draws itself, over and over */
@keyframes smDraw { 0% { stroke-dashoffset: 260; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes smDot  { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
.svc-mock-ml .sm-line {
    fill: none; stroke: #e14646; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 260; animation: smDraw 4.6s ease-in-out infinite;
}
.svc-mock-ml .sm-pt { fill: #e14646; animation: smDot 4.6s ease-in-out infinite; }

/* 3 — Generative AI: a prompt types, then three output lines fill in */
@keyframes smCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes smFill  { 0%, 10% { width: 0; } 45%, 100% { width: var(--w, 70%); } }
.feature-mock.svc-mock-gen { flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; }
.svc-mock-gen .sm-prompt {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 500; color: var(--color-text);
}
.svc-mock-gen .sm-caret { width: 1.5px; height: 11px; background: #e14646; animation: smCaret 1s steps(1) infinite; }
.svc-mock-gen .sm-out { display: flex; flex-direction: column; gap: 5px; }
.svc-mock-gen .sm-out i { display: block; height: 5px; border-radius: 3px; background: rgba(225, 70, 70, .55); animation: smFill 4s ease-in-out infinite; }
.svc-mock-gen .sm-out i:nth-child(1) { --w: 88%; }
.svc-mock-gen .sm-out i:nth-child(2) { --w: 64%; animation-delay: .25s; }
.svc-mock-gen .sm-out i:nth-child(3) { --w: 76%; animation-delay: .5s; }

/* 4 — Computer Vision: a scan line sweeps the frame, the detection box holds */
@keyframes smScan { 0%, 100% { top: 12%; } 50% { top: 82%; } }
.svc-mock-cv .sm-frame {
    position: relative; width: 74%; height: 84%;
    border: 1px solid var(--color-border); border-radius: 8px;
}
.svc-mock-cv .sm-box {
    position: absolute; left: 16%; top: 22%; width: 42%; height: 48%;
    border: 1.5px solid #e14646; border-radius: 4px;
}
.svc-mock-cv .sm-box span {
    position: absolute; top: -9px; left: -1px;
    font-size: 8px; font-weight: 700; line-height: 1;
    padding: 2px 4px; border-radius: 3px; background: #e14646; color: #fff;
}
.svc-mock-cv .sm-scan {
    position: absolute; left: 4px; right: 4px; height: 1.5px; top: 12%;
    background: rgba(225, 70, 70, .8); animation: smScan 3.4s ease-in-out infinite;
}

/* 5 — AI Automation: two gears turning against each other, work flowing past */
@keyframes smSpin  { to { transform: rotate(360deg); } }
@keyframes smPulse { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.svc-mock-auto .sm-gear { color: #e14646; font-size: 34px; animation: smSpin 9s linear infinite; }
.svc-mock-auto .sm-gear-b { color: var(--color-text-muted); font-size: 22px; margin: 16px 0 0 -6px; animation-duration: 9s; animation-direction: reverse; }
.svc-mock-auto .sm-flow { display: flex; gap: 6px; margin-left: 14px; }
.svc-mock-auto .sm-flow i { width: 6px; height: 6px; border-radius: 50%; background: #e14646; animation: smPulse 1.8s ease-in-out infinite; }
.svc-mock-auto .sm-flow i:nth-child(2) { animation-delay: .3s; }
.svc-mock-auto .sm-flow i:nth-child(3) { animation-delay: .6s; }

/* 6 — Enterprise AI: the stack breathes apart so the three tiers read */
@keyframes smShift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--x, 6px)); } }
.feature-mock.svc-mock-ent { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.svc-mock-ent .sm-layer {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 600; line-height: 1;
    padding: 6px 9px; border-radius: 6px;
    color: var(--color-text-muted);
    background: var(--color-bg); border: 1px solid var(--color-border-soft);
    animation: smShift 5s ease-in-out infinite;
}
.svc-mock-ent .sm-layer:nth-child(1) { --x: -7px; color: var(--color-text); border-color: rgba(225, 70, 70, .4); }
.svc-mock-ent .sm-layer:nth-child(2) { --x: 7px;  animation-delay: .2s; }
.svc-mock-ent .sm-layer:nth-child(3) { --x: -7px; animation-delay: .4s; }
.svc-mock-ent .sm-layer i { color: #e14646; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
    .svc-mock *, .svc-mock { animation: none !important; }
}

/* Services grid — clipped + faded, with "All Services" as the way out.
   Ten cards at four-up is three rows and a long scroll for a home page, so the
   grid is cut just past the middle of the second row and masked away. Same
   technique as the testimonial wall (.tm-marquee). */
#power-pack .svc-clip {
    position: relative;
    max-height: 760px;
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
            mask: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
}

/* "All Services" pressed — the mask and the cap come off and the remaining
   cards show in place. */
#power-pack .svc-clip.is-open {
    max-height: none;
    -webkit-mask: none;
            mask: none;
}

#power-pack .svc-cta {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: -14px;
}

/* .btn-gradient was written for <a>; this one is a real <button> */
#power-pack .svc-cta .btn-gradient {
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 1199.98px) { #power-pack .svc-clip { max-height: 700px; } }
@media (max-width: 991.98px)  { #power-pack .svc-clip { max-height: 640px; } }
@media (max-width: 575.98px)  { #power-pack .svc-clip { max-height: 560px; } }
