body {
            background-color: #f8fafc;
        }

        .navbar-scrolled {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        .feature-card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .feature-card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px -12px rgba(33, 67, 149, 0.2);
            border-color: #214395;
        }

        .btn-ut {
            background: linear-gradient(135deg, #214395 0%, #1a367a 100%);
            transition: all 0.3s ease;
        }

        .btn-ut:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -5px rgba(33, 67, 149, 0.4);
        }

        .url-shimmer {
            font-weight: 600;
            letter-spacing: 0.02em;
            background: linear-gradient(90deg, #94a3b8 0%, #94a3b8 38%, #214395 48%, #3f7be8 52%, #94a3b8 62%, #94a3b8 100%);
            background-size: 240% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: urlShimmer 3.4s ease-in-out infinite;
        }

        @keyframes urlShimmer {
            0% { background-position: 130% 0; }
            100% { background-position: -30% 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .url-shimmer { animation: none; -webkit-text-fill-color: #64748b; color: #64748b; }
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.55;
            background-image:
                radial-gradient(circle, rgba(33, 67, 149, 0.18) 1.3px, transparent 1.7px),
                linear-gradient(rgba(33, 67, 149, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(33, 67, 149, 0.06) 1px, transparent 1px);
            background-size: 46px 46px, 46px 46px, 46px 46px;
            -webkit-mask-image: radial-gradient(ellipse 60% 65% at 55% 42%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 60% 65% at 55% 42%, #000 20%, transparent 80%);
            animation: gridDrift 24s linear infinite;
        }

        @keyframes gridDrift {
            from { background-position: 0 0, 0 0; }
            to { background-position: 46px 46px, 46px 46px; }
        }

        .hero-sash {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, #000 72%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 40%, #000 72%, #000 100%);
        }

        .hero-sash::before,
        .hero-sash::after {
            content: "";
            position: absolute;
            left: -8%;
            right: -8%;
            height: 220px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }

        .hero-sash::before {
            top: 20%;
            opacity: 0.6;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'><path d='M0,80 C240,12 480,148 720,80 S1200,148 1440,80' fill='none' stroke='%23214395' stroke-width='38' stroke-linecap='round' stroke-opacity='0.26'/></svg>");
            animation: sashDrift 20s ease-in-out infinite;
        }

        .hero-sash::after {
            top: 44%;
            opacity: 0.7;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'><path d='M0,80 C240,148 480,12 720,80 S1200,12 1440,80' fill='none' stroke='%23fddd04' stroke-width='30' stroke-linecap='round' stroke-opacity='0.5'/></svg>");
            animation: sashDrift 26s ease-in-out infinite reverse;
        }

        @keyframes sashDrift {
            0%, 100% { transform: translateX(-3.5%); }
            50% { transform: translateX(3.5%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-grid, .hero-sash::before, .hero-sash::after { animation: none; }
        }

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

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

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.swal2-confirm{background-color:#214395 !important}
.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(33,67,149,.4) !important}
.swal2-popup{border-radius:1rem !important;font-family:"Plus Jakarta Sans",sans-serif !important}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.34s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mlxPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@supports not (view-transition-name: none) {
    body {
        animation: mlxPageIn 0.3s ease both;
    }
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

html {
    scrollbar-gutter: stable;
}