@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: #ffffff;
            color: #111827;
            overflow-x: hidden;
        }

        .mobile-menu {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateY(-8px);
            transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
        }

        .mobile-menu.open {
            max-height: 360px;
            opacity: 1;
            transform: translateY(0);
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f3f4f6;
        }

        ::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

        .earth-stage {
            position: absolute;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            width: 50%;
            height: 100%;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            background: transparent;
            transition: opacity 240ms linear;
        }

        .earth-stage canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        .earth-stage::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: none;
        }

        .hero-media {
            position: absolute;
            top: 0;
            right: 0;
            left: auto;
            width: 50%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            opacity: 0.9;
            backface-visibility: hidden;
            transform: translateZ(0);
            will-change: opacity, transform;
        }

        .hero-media-vignette {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            background:
                linear-gradient(0deg, #f9fafb 0%, rgba(249, 250, 251, 0.78) 9%, rgba(249, 250, 251, 0) 28%),
                linear-gradient(90deg, #f9fafb 0%, rgba(249, 250, 251, 0.68) 8%, rgba(249, 250, 251, 0) 22%),
                linear-gradient(270deg, #f9fafb 0%, rgba(249, 250, 251, 0.54) 8%, rgba(249, 250, 251, 0) 20%),
                linear-gradient(180deg, #f9fafb 0%, rgba(249, 250, 251, 0.5) 9%, rgba(249, 250, 251, 0) 22%),
                linear-gradient(0deg, #f9fafb 0%, rgba(249, 250, 251, 0.58) 10%, rgba(249, 250, 251, 0) 24%);
        }

        .notifications-container {
            position: absolute;
            right: 5.5%;
            bottom: 18%;
            z-index: 25;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            pointer-events: none;
        }

        .monitor-notification {
            width: min(320px, 32vw);
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 16px;
            border: 1px solid rgba(17, 24, 39, 0.08);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.86);
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.06);
            opacity: 0;
            transform: translateX(28px) translateY(10px) scale(0.98);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            transition: opacity 460ms ease, transform 520ms cubic-bezier(0.2, 0.82, 0.2, 1);
        }

        .monitor-notification.show {
            opacity: 1;
            transform: translateX(0) translateY(0) scale(1);
        }

        .monitor-notification.hide {
            opacity: 0;
            transform: translateX(18px) translateY(16px) scale(0.98);
            transition: opacity 320ms ease, transform 360ms ease;
        }

        .notif-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border-radius: 10px;
            color: #ffffff;
            background: linear-gradient(135deg, #2563eb, #0f4fb8);
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
        }

        .notif-content {
            flex: 1;
            min-width: 0;
        }

        .notif-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 3px;
        }

        .notif-app-name {
            color: #6b7280;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.05em;
        }

        .notif-time {
            color: #9ca3af;
            font-size: 0.68rem;
            white-space: nowrap;
        }

        .notif-title {
            margin-bottom: 2px;
            color: #111827;
            font-size: 0.94rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .notif-message {
            color: #4b5563;
            font-size: 0.88rem;
            line-height: 1.35;
        }

        @keyframes floatRobot {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            33% { transform: translateY(-5px) rotate(-3deg); }
            66% { transform: translateY(-3px) rotate(2deg); }
        }

        .animate-float-robot {
            animation: floatRobot 4s ease-in-out infinite;
            transform-origin: center center;
        }

        @keyframes blinkEyes {
            0%, 92%, 100% { transform: scaleY(1); }
            95% { transform: scaleY(0.1); }
        }

        .robot-eye {
            transform-origin: center;
            animation: blinkEyes 4.5s infinite;
        }

        @keyframes pulseAntenna {
            0%, 100% {
                opacity: 0.4;
                transform: scale(1);
                filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
                filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
            }
        }

        .robot-antenna-dot {
            animation: pulseAntenna 2s ease-in-out infinite;
        }

        @keyframes floatLock {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-6px) rotate(-1.5deg); }
        }

        .animate-float-lock {
            animation: floatLock 4.5s ease-in-out infinite;
            transform-origin: center center;
        }

        @keyframes spinSlow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .animate-spin-slow {
            animation: spinSlow 15s linear infinite;
            transform-origin: center;
            transform-box: fill-box;
        }

        @keyframes laserScan {
            0% { transform: translateY(-2px); opacity: 0; }
            15% { opacity: 0.8; }
            85% { opacity: 0.8; }
            100% { transform: translateY(11px); opacity: 0; }
        }

        .scanner-line {
            transform-origin: center;
            transform-box: fill-box;
            animation: laserScan 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        .lock-shackle {
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .group:hover .lock-shackle {
            transform: translateY(2px);
        }

        @keyframes pulseKeyhole {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.8)); }
        }

        .lock-keyhole {
            animation: pulseKeyhole 2s ease-in-out infinite;
        }

        @keyframes floatLaptop {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-4px) rotate(0.5deg); }
        }

        .animate-float-laptop {
            animation: floatLaptop 6s ease-in-out infinite;
            transform-origin: bottom center;
        }

        @keyframes pulseNode {
            0%, 100% { transform: scale(0.8); opacity: 0.3; }
            50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.8)); }
        }

        .node-1 { animation: pulseNode 3s infinite 0s; }
        .node-2 { animation: pulseNode 3s infinite 0.7s; }
        .node-3 { animation: pulseNode 3s infinite 1.5s; }
        .node-4 { animation: pulseNode 3s infinite 2.2s; }

        @keyframes typeCode {
            0% { stroke-dasharray: 0 20; opacity: 0; }
            20%, 100% { stroke-dasharray: 20 0; opacity: 1; }
        }

        .group:hover .screen-line-1 { animation: typeCode 2s ease-out forwards; }
        .group:hover .screen-line-2 { animation: typeCode 2s ease-out 0.3s forwards; }
        .group:hover .screen-line-3 { animation: typeCode 2s ease-out 0.6s forwards; }

        @keyframes userMsgAnim {
            0%, 9% { opacity: 0; transform: translateY(10px); }
            14%, 85% { opacity: 1; transform: translateY(0); }
            90%, 100% { opacity: 0; transform: translateY(-10px); }
        }

        .ai-chat-section {
            --chat-user-opacity: 0;
            --chat-user-y: 12px;
            --chat-typing-opacity: 0;
            --chat-typing-y: 12px;
            --chat-ai-opacity: 0;
            --chat-ai-y: 12px;
            --chat-cpu-width: 0%;
            --chat-gpu-width: 0%;
        }

        .ai-chat-sticky {
            min-height: 0;
        }

        .anim-user {
            animation: none;
            opacity: var(--chat-user-opacity);
            transform: translateY(var(--chat-user-y));
            will-change: opacity, transform;
        }

        @keyframes typingMsgAnim {
            0%, 24% { opacity: 0; transform: translateY(10px); }
            29%, 41% { opacity: 1; transform: translateY(0); }
            44%, 100% { opacity: 0; transform: translateY(-10px); }
        }

        .anim-typing {
            animation: none;
            opacity: var(--chat-typing-opacity);
            transform: translateY(var(--chat-typing-y));
            will-change: opacity, transform;
        }

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

        .anim-dot-1 { animation: typingBounce 1s infinite 0s; }
        .anim-dot-2 { animation: typingBounce 1s infinite 0.2s; }
        .anim-dot-3 { animation: typingBounce 1s infinite 0.4s; }

        @keyframes aiMsgAnim {
            0%, 44% { opacity: 0; transform: translateY(10px); pointer-events: none; }
            49%, 85% { opacity: 1; transform: translateY(0); pointer-events: auto; }
            90%, 100% { opacity: 0; transform: translateY(-10px); pointer-events: none; }
        }

        .anim-ai {
            animation: none;
            opacity: var(--chat-ai-opacity);
            transform: translateY(var(--chat-ai-y));
            pointer-events: none;
            will-change: opacity, transform;
        }

        @keyframes fillBar92 {
            0%, 48% { width: 0%; }
            54%, 100% { width: 92%; }
        }

        @keyframes fillBar85 {
            0%, 48% { width: 0%; }
            54%, 100% { width: 85%; }
        }

        .bar-cpu {
            animation: none;
            width: var(--chat-cpu-width);
        }

        .bar-gpu {
            animation: none;
            width: var(--chat-gpu-width);
        }

        .time-text::after {
            content: var(--rules-time-label, "17:59");
            color: var(--rules-time-color, #94a3b8);
            display: inline-block;
            transform: scale(var(--rules-time-scale, 1));
            animation: none;
        }

        @keyframes timeLoop {
            0%, 35% { content: "17:59"; color: #94a3b8; }
            36%, 38% { content: "18:00"; color: #3b82f6; transform: scale(1.1); }
            39%, 95% { content: "18:00"; color: #3b82f6; transform: scale(1); }
            96%, 100% { content: "17:59"; color: #94a3b8; }
        }

        .status-badge::after {
            content: var(--rules-badge-label, "Horário Livre");
            animation: none;
        }

        .status-badge {
            background-color: var(--rules-badge-bg, rgba(16, 185, 129, 0.1));
            color: var(--rules-badge-color, #34d399);
            border-color: var(--rules-badge-border, rgba(16, 185, 129, 0.2));
        }

        @keyframes badgeLoop {
            0%, 35% { content: "Horário Livre"; background-color: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.2); }
            36%, 95% { content: "Horário de Estudo"; background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; border-color: rgba(59, 130, 246, 0.2); }
            96%, 100% { content: "Horário Livre"; background-color: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.2); }
        }

        @keyframes autoToggleBg {
            0%, 35% { background-color: #10b981; }
            38%, 95% { background-color: #ef4444; }
            98%, 100% { background-color: #10b981; }
        }

        .rules-section {
            --rules-time-label: "17:59";
            --rules-time-color: #94a3b8;
            --rules-time-scale: 1;
            --rules-badge-label: "Horário Livre";
            --rules-badge-bg: rgba(16, 185, 129, 0.1);
            --rules-badge-color: #34d399;
            --rules-badge-border: rgba(16, 185, 129, 0.2);
            --rules-toggle-bg-1: #10b981;
            --rules-toggle-bg-2: #10b981;
            --rules-toggle-knob-1: translateX(20px);
            --rules-toggle-knob-2: translateX(20px);
            --rules-allow-1-opacity: 1;
            --rules-allow-2-opacity: 1;
            --rules-block-1-opacity: 0;
            --rules-block-2-opacity: 0;
            --rules-lock-1-opacity: 0;
            --rules-lock-2-opacity: 0;
            --rules-lock-1-scale: 0.6;
            --rules-lock-2-scale: 0.6;
            --rules-card-1-opacity: 1;
            --rules-card-2-opacity: 1;
            --rules-card-1-border: rgba(255, 255, 255, 0.05);
            --rules-card-2-border: rgba(255, 255, 255, 0.05);
            --rules-card-1-bg: rgba(30, 41, 59, 1);
            --rules-card-2-bg: rgba(30, 41, 59, 1);
        }

        .rules-sticky {
            min-height: 0;
        }

        .anim-toggle-bg-1 {
            animation: none;
            background-color: var(--rules-toggle-bg-1);
        }

        .anim-toggle-bg-2 {
            animation: none;
            background-color: var(--rules-toggle-bg-2);
        }

        @keyframes autoToggleKnob {
            0%, 35% { transform: translateX(20px); }
            38%, 95% { transform: translateX(2px); }
            98%, 100% { transform: translateX(20px); }
        }

        .anim-toggle-knob-1 {
            animation: none;
            transform: var(--rules-toggle-knob-1);
        }

        .anim-toggle-knob-2 {
            animation: none;
            transform: var(--rules-toggle-knob-2);
        }

        @keyframes fadeOutStatus {
            0%, 35% { opacity: 1; transform: translateY(0); }
            38%, 95% { opacity: 0; transform: translateY(5px); }
            98%, 100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInStatus {
            0%, 35% { opacity: 0; transform: translateY(-5px); }
            38%, 95% { opacity: 1; transform: translateY(0); }
            98%, 100% { opacity: 0; transform: translateY(-5px); }
        }

        .anim-text-allow-1 {
            animation: none;
            opacity: var(--rules-allow-1-opacity);
            transform: translateY(calc((1 - var(--rules-allow-1-opacity)) * 5px));
        }

        .anim-text-block-1 {
            animation: none;
            opacity: var(--rules-block-1-opacity);
            transform: translateY(calc((1 - var(--rules-block-1-opacity)) * -5px));
        }

        .anim-text-allow-2 {
            animation: none;
            opacity: var(--rules-allow-2-opacity);
            transform: translateY(calc((1 - var(--rules-allow-2-opacity)) * 5px));
        }

        .anim-text-block-2 {
            animation: none;
            opacity: var(--rules-block-2-opacity);
            transform: translateY(calc((1 - var(--rules-block-2-opacity)) * -5px));
        }

        .rule-status-text {
            display: block;
            max-width: 8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @keyframes autoLockPop {
            0%, 35% { transform: scale(0.5); opacity: 0; }
            38%, 42% { transform: scale(1.2); opacity: 1; }
            43%, 95% { transform: scale(1); opacity: 1; }
            98%, 100% { transform: scale(0.5); opacity: 0; }
        }

        .anim-lock-pop-1 {
            animation: none;
            opacity: var(--rules-lock-1-opacity);
            transform: scale(var(--rules-lock-1-scale));
        }

        .anim-lock-pop-2 {
            animation: none;
            opacity: var(--rules-lock-2-opacity);
            transform: scale(var(--rules-lock-2-scale));
        }

        @keyframes autoCardDim {
            0%, 35% { border-color: rgba(255,255,255,0.05); background-color: rgba(30,41,59,1); opacity: 1; }
            38%, 95% { border-color: rgba(239,68,68,0.2); background-color: rgba(30,41,59,0.5); opacity: 0.8; }
            98%, 100% { border-color: rgba(255,255,255,0.05); background-color: rgba(30,41,59,1); opacity: 1; }
        }

        .anim-card-dim-1 {
            animation: none;
            opacity: var(--rules-card-1-opacity);
            border-color: var(--rules-card-1-border);
            background-color: var(--rules-card-1-bg);
        }

        .anim-card-dim-2 {
            animation: none;
            opacity: var(--rules-card-2-opacity);
            border-color: var(--rules-card-2-border);
            background-color: var(--rules-card-2-bg);
        }

        @keyframes scrollInventory {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }

        .anim-scroll-list {
            animation: scrollInventory 20s linear infinite;
        }

        .anim-scroll-list:hover {
            animation-play-state: paused;
        }

        @keyframes liveBarLoad {
            0%, 100% { width: 30%; }
            50% { width: 65%; }
        }

        @keyframes liveBarHeavy {
            0%, 100% { width: 85%; background-color: #f97316; }
            50% { width: 95%; background-color: #ef4444; }
        }

        .anim-bar-normal { animation: liveBarLoad 4s ease-in-out infinite; }
        .anim-bar-heavy { animation: liveBarHeavy 3s ease-in-out infinite; }

        @keyframes pulseDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .anim-status-dot { animation: pulseDot 2s infinite; }

        @keyframes fillGauge {
            0% { stroke-dashoffset: 226; }
            100% { stroke-dashoffset: 13.5; }
        }

        .anim-gauge-ring {
            stroke-dasharray: 226;
            stroke-dashoffset: 226;
            animation: fillGauge 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s;
        }

        @keyframes fillBar {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        .anim-bar {
            transform-origin: left;
            transform: scaleX(0);
            animation: fillBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 1s;
        }

        @keyframes autoScrollMobile {
            0%, 15% { transform: translateY(0); }
            45%, 65% { transform: translateY(-180px); }
            85%, 100% { transform: translateY(0); }
        }

        .anim-mobile-scroll {
            animation: autoScrollMobile 12s ease-in-out infinite;
        }

        @keyframes pulseStatus {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.8); }
        }

        .anim-status-pulse {
            animation: pulseStatus 2s infinite;
        }

        @keyframes drawRouteLine {
            0% { stroke-dasharray: 0 1000; opacity: 0; }
            10% { opacity: 1; }
            80%, 90% { stroke-dasharray: 1000 0; opacity: 1; }
            100% { stroke-dasharray: 1000 0; opacity: 0; }
        }

        .anim-route-draw {
            stroke-dasharray: 1000;
            animation: drawRouteLine 8s ease-out infinite;
        }

        @keyframes pinPulse {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(3.5); opacity: 0; }
        }

        .anim-pin-ripple {
            animation: pinPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

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

        .anim-float-gps-card {
            animation: floatGpsCard 4s ease-in-out infinite;
        }

        @keyframes geofencePulse {
            0%, 100% {
                stroke: rgba(59, 130, 246, 0.4);
                fill: rgba(59, 130, 246, 0.05);
            }

            50% {
                stroke: rgba(59, 130, 246, 0.8);
                fill: rgba(59, 130, 246, 0.1);
            }
        }

        .anim-geofence {
            animation: geofencePulse 4s ease-in-out infinite;
        }

        .scroll-cue {
            cursor: pointer;
            text-decoration: none;
        }

        .scroll-cue:hover,
        .scroll-cue:focus-visible {
            color: #2563eb;
        }

        @media (max-width: 768px) {
            #video-sequence > .sticky {
                min-height: 100svh;
            }

            #ai-chat-section {
                height: auto;
                padding-top: 84px;
                padding-bottom: 64px;
            }

            #ai-chat-section .ai-chat-sticky {
                align-items: center;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
            }

            #ai-chat-section .flex.flex-col.lg\:flex-row {
                gap: 24px;
            }

            #ai-chat-section h2 {
                font-size: clamp(2.15rem, 10vw, 3rem);
                line-height: 1;
                margin-bottom: 12px;
            }

            #ai-chat-section p {
                font-size: 0.98rem;
                line-height: 1.45;
                margin-bottom: 0;
            }

            #ai-chat-section ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                margin-top: 10px;
            }

            #ai-chat-section ul li {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 6px;
            }

            #ai-chat-section ul li > div:first-child {
                width: 32px;
                height: 32px;
                min-width: 32px;
            }

            #ai-chat-section ul li > div:first-child svg {
                width: 16px;
                height: 16px;
            }

            #ai-chat-section ul li p {
                display: none;
            }

            #ai-chat-section ul li h4 {
                font-size: 0.7rem;
                line-height: 1.3;
                margin-bottom: 0;
            }

            #ai-chat-section .h-\[450px\] {
                height: min(390px, 54svh);
            }

            #ai-chat-section .section-cta {
                margin-top: 24px;
                margin-bottom: 18px;
            }

            #ai-chat-section .section-cta a {
                width: 100%;
            }

            #rules-section {
                height: auto;
                padding-top: 84px;
                padding-bottom: 64px;
            }

            #rules-section .rules-sticky {
                align-items: center;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
            }

            #rules-section .flex.flex-col.lg\:flex-row {
                gap: 24px;
            }

            #rules-section .inline-flex {
                margin-bottom: 14px;
            }

            #rules-section h2 {
                font-size: clamp(2.1rem, 9.5vw, 3rem);
                line-height: 1;
                margin-bottom: 12px;
            }

            #rules-section p {
                font-size: 0.98rem;
                line-height: 1.45;
                margin-bottom: 0;
            }

            #rules-section ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                margin-top: 10px;
            }

            #rules-section ul li {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 6px;
            }

            #rules-section ul li > div:first-child {
                width: 32px;
                height: 32px;
                min-width: 32px;
            }

            #rules-section ul li > div:first-child svg {
                width: 16px;
                height: 16px;
            }

            #rules-section ul li p {
                display: none;
            }

            #rules-section ul li h4 {
                font-size: 0.7rem;
                line-height: 1.3;
                margin-bottom: 0;
            }

            #rules-section .section-cta {
                margin-top: 24px;
                margin-bottom: 18px;
            }

            #rules-section .section-cta a {
                width: 100%;
            }

            #inventory-section .section-cta,
            #hardware-diagnostics-section .section-cta,
            #gps-section .section-cta {
                margin-top: 18px;
            }

            #inventory-section .section-cta a,
            #hardware-diagnostics-section .section-cta a,
            #gps-section .section-cta a {
                width: 100%;
            }

            #hardware-diagnostics-section h2 {
                font-size: clamp(2.1rem, 9.5vw, 3rem);
                line-height: 1;
                margin-bottom: 12px;
            }

            #hardware-diagnostics-section p {
                font-size: 0.98rem;
                line-height: 1.45;
            }

            #hardware-diagnostics-section ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                margin-top: 10px;
            }

            #hardware-diagnostics-section ul li {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 6px;
            }

            #hardware-diagnostics-section ul li > div:first-child {
                display: none;
            }

            #hardware-diagnostics-section ul li p {
                display: none;
            }

            #hardware-diagnostics-section ul li h4 {
                font-size: 0.7rem;
                line-height: 1.3;
                margin-bottom: 0;
            }

            #rules-section .rule-status-text {
                max-width: 5.6rem;
                font-size: 0.65rem;
            }

            .earth-stage,
            .hero-media,
            .hero-media-vignette {
                top: 40%;
                right: 0;
                left: 0;
                width: 100%;
                height: 46%;
            }

            .hero-media {
                object-position: center center;
            }

            .hero-media-vignette {
                background:
                    linear-gradient(0deg, #f9fafb 0%, rgba(249, 250, 251, 0.9) 12%, rgba(249, 250, 251, 0) 34%),
                    linear-gradient(180deg, #f9fafb 0%, rgba(249, 250, 251, 0.82) 9%, rgba(249, 250, 251, 0) 26%),
                    linear-gradient(0deg, #f9fafb 0%, rgba(249, 250, 251, 0.5) 10%, rgba(249, 250, 251, 0) 24%),
                    linear-gradient(90deg, #f9fafb 0%, rgba(249, 250, 251, 0.42) 8%, rgba(249, 250, 251, 0) 22%),
                    linear-gradient(270deg, #f9fafb 0%, rgba(249, 250, 251, 0.42) 8%, rgba(249, 250, 251, 0) 22%);
            }

            #hero-copy {
                align-items: flex-start;
                justify-content: flex-start;
                padding-top: 96px;
                padding-left: 22px;
                padding-right: 22px;
            }

            #hero-copy .max-w-2xl {
                max-width: 100%;
                width: 100%;
            }

            #hero-copy .relative.h-\[240px\] {
                height: 180px;
            }

            #hero-copy h1 {
                max-width: 11ch;
                font-size: clamp(2.25rem, 10.5vw, 3.35rem);
                line-height: 1;
                margin-bottom: 12px;
            }

            #hero-copy p {
                max-width: 22rem;
                font-size: clamp(0.98rem, 3.9vw, 1.14rem);
                line-height: 1.42;
            }

            #hero-copy .flex.flex-col {
                position: absolute;
                left: 22px;
                right: 22px;
                bottom: 64px;
                width: auto;
                margin-top: 0;
                z-index: 30;
            }

            #hero-copy a {
                width: 100%;
                min-height: 54px;
                padding-left: 20px;
                padding-right: 20px;
                font-size: 1rem;
            }

            #scroll-indicator {
                left: 50%;
                right: auto;
                bottom: 8px;
                display: flex;
                width: max-content;
                max-width: calc(100% - 36px);
                color: #6b7280;
                font-size: 0.68rem;
                animation: none;
            }

            .notifications-container {
                right: 18px;
                bottom: calc(14% + 18px);
                gap: 10px;
            }

            .monitor-notification {
                width: min(300px, calc(100vw - 36px));
                padding: 12px 14px;
                border-radius: 18px;
            }

            .notif-message {
                font-size: 0.82rem;
            }
        }

        @media (max-width: 420px) {
            .earth-stage,
            .hero-media,
            .hero-media-vignette {
                top: 42%;
                height: 44%;
            }

            #hero-copy {
                padding-left: 18px;
                padding-right: 18px;
                padding-top: 86px;
            }

            #hero-copy .relative.h-\[240px\] {
                height: 184px;
            }

            #hero-copy h1 {
                font-size: clamp(2rem, 10.2vw, 2.72rem);
            }

            #hero-copy p {
                max-width: 20rem;
                font-size: 0.96rem;
            }

            #hero-copy .flex.flex-col {
                left: 18px;
                right: 18px;
                bottom: 58px;
            }

            #scroll-indicator {
                bottom: 6px;
            }

            .notifications-container {
                right: 14px;
                bottom: calc(14% + 14px);
            }

            .monitor-notification {
                width: min(286px, calc(100vw - 28px));
            }
        }

        /* --- Scroll to top --- */
        #scroll-top-btn {
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity 300ms ease, transform 300ms ease;
        }

        #scroll-top-btn.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* --- Pricing cards --- */
        .pricing-card {
            transition: transform 400ms cubic-bezier(0.2, 0, 0, 1), box-shadow 400ms ease;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
        }

        .pricing-card-featured {
            transition: transform 400ms cubic-bezier(0.2, 0, 0, 1), box-shadow 400ms ease;
        }

        .pricing-card-featured:hover {
            transform: translateY(-7px);
            box-shadow: 0 32px 56px rgba(37, 99, 235, 0.35);
        }

        /* --- Brand assets --- */
        .brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            overflow: hidden;
            flex-shrink: 0;
            background: transparent;
        }

        .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform: scale(1.35);
        }

        /* --- Form validation --- */
        input[aria-invalid="true"] {
            border-color: #ef4444 !important;
            background-color: #fef2f2 !important;
            color: #991b1b !important;
        }

        /* --- Login split layout --- */
        .login-panel-left {
            background:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
            background-size: 32px 32px, 32px 32px, 100% 100%;
            background-blend-mode: overlay, overlay, normal;
        }

        @keyframes authFadeSlideUp {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

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

        .auth-view-active {
            animation: authFadeSlideUp 0.5s ease-out forwards;
        }

        .auth-delay-100 {
            opacity: 0;
            animation: authFadeSlideUp 0.5s ease-out 100ms forwards;
        }

        .auth-delay-200 {
            opacity: 0;
            animation: authFadeSlideUp 0.5s ease-out 200ms forwards;
        }

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

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

        .auth-float {
            animation: authFloatSlow 6s ease-in-out infinite;
        }