:root{
            --bg: #f6f8fb;
            --text: #0b1220;
            --muted: rgba(11,18,32,.7);
            --card: rgba(255,255,255,.9);
            --shadow: 0 18px 60px rgba(2, 6, 23, .10);
            --shadow2: 0 10px 30px rgba(2, 6, 23, .08);
            --radius: 18px;
        }

        html { scroll-behavior: smooth; }
        body { background: var(--bg); color: var(--text); }

        /* Subtle noise-like gradient background */
        .page-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            background: radial-gradient(1200px 600px at 18% 12%, rgb(13 110 253 / 16%), transparent 60%), radial-gradient(900px 520px at 82% 25%, rgb(8 162 167 / 16%), #ffffffde 55%), radial-gradient(900px 520px at 55% 90%, rgba(111, 66, 193, .12), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f6f8fb 60%);
        }

        /* =========================
           PRELOADER
           ========================= */
        #preloader{
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: grid;
            place-items: center;
            background:
                radial-gradient(1200px 600px at 18% 12%, rgba(13,110,253,.22), transparent 60%),
                radial-gradient(900px 520px at 82% 25%, rgba(25,135,84,.18), transparent 55%),
                radial-gradient(900px 520px at 55% 90%, rgba(111,66,193,.14), transparent 55%),
                linear-gradient(180deg, #ffffff 0%, #f6f8fb 60%);
            transition: opacity .35s ease, visibility .35s ease;
        }
        #preloader.hide{
            opacity: 0;
            visibility: hidden;
        }
        .preloader-card{
            width: min(520px, 92vw);
            background: rgba(255,255,255,.88);
            border: 1px solid rgba(0,0,0,.06);
            box-shadow: 0 18px 60px rgba(2, 6, 23, .10);
            border-radius: 20px;
            padding: 26px 22px;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        .preloader-logo{
            width: 150px;
            height: auto;
            border-radius: 10px;
        }
        .preloader-title{
            margin-top: 12px;
            font-weight: 800;
            letter-spacing: -.3px;
        }
        .preloader-sub{
            color: rgba(11,18,32,.65);
            font-size: 14px;
            margin-top: 6px;
        }
        .loader-ring{
            width: 44px;
            height: 44px;
            border-radius: 999px;
            border: 4px solid rgba(13,110,253,.18);
            border-top-color: rgba(13,110,253,1);
            margin: 18px auto 0;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* NAV */
        .navbar-blur { backdrop-filter: blur(14px); background: rgba(255,255,255,.78); }
        .nav-link { color: rgba(11,18,32,.75) !important; font-weight: 600; }
        .nav-link:hover { color: rgba(11,18,32,1) !important; }

        /* HERO */
        .hero { padding: 80px 0 40px; }
        .hero-badge{
            background: rgba(13,110,253,.10);
            border: 1px solid rgba(13,110,253,.18);
            color: #0d6efd;
            font-weight: 700;
        }
        .hero-title{ letter-spacing: -.6px; line-height: 1.08; }
        .hero-lead{ color: var(--muted); }

        .btn-pill{
            border-radius: 999px;
            padding-left: 18px;
            padding-right: 18px;
            margin: 10px 0px;
        }
        .btn-glow{ box-shadow: 0 12px 35px rgba(13,110,253,.22); }

        .trust-row span{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.7);
            border: 1px solid rgba(0,0,0,.06);
            padding: 8px 12px;
            border-radius: 999px;
            font-weight: 600;
            color: rgba(11,18,32,.75);
        }

        /* Cards */
        .card-soft {
            border: 1px solid rgba(0,0,0,.06);
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow2);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .card-soft:hover{
            transform: translateY(-4px);
            box-shadow: 0 18px 60px rgba(2, 6, 23, .12);
        }

        /* Feature icon bubble */
        .icon-bubble{
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(13,110,253,.10);
            border: 1px solid rgba(13,110,253,.15);
            color: #0d6efd;
            font-size: 20px;
        }

        /* Plans */
        .plan {
            border: 1px solid rgba(0,0,0,.07);
            border-radius: var(--radius);
            background: rgba(255,255,255,.92);
            box-shadow: var(--shadow2);
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .plan:hover{
            transform: translateY(-4px);
            box-shadow: 0 18px 60px rgba(2, 6, 23, .12);
        }
        .plan .plan-top{
            padding: 18px 20px;
            border-bottom: 1px solid rgba(0,0,0,.06);
            background: rgba(255,255,255,.9);
        }
        .plan.featured{
            border: 2px solid rgba(13,110,253,.30);
            box-shadow: 0 18px 60px rgba(13,110,253,.12);
        }
        .price{ letter-spacing: -.8px; }

        .py-5{ padding: 100px 0px !important }

        /* Section headings */
        .section-title{ letter-spacing: -.3px; }
        .section-sub{ color: var(--muted); }

        /* FAQ video */
        .faq-video{
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid rgba(0,0,0,.08);
            box-shadow: var(--shadow2);
            background: #000;
        }

        /* Accordion polish */
        .accordion-item{
            border: 1px solid rgba(0,0,0,.06) !important;
            border-radius: 14px !important;
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: 0 8px 20px rgba(2, 6, 23, .06);
        }
        .accordion-button{ font-weight: 700; }

        /* CONTACT */
        .contact-card{
            border-radius: var(--radius);
            background: rgba(255,255,255,.92);
            border: 1px solid rgba(0,0,0,.06);
            box-shadow: var(--shadow2);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .contact-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 18px 60px rgba(2, 6, 23, .12);
        }

        /* FOOTER */
        .footer {
            background: #0273ac;
            color: rgba(255, 255, 255, .86);
        }
        .footer h5, .footer h6 { color: #fff; }
        .footer .footer-link {
            color: rgba(255,255,255,.72);
            text-decoration: none;
        }
        .footer .footer-link:hover {
            color: #fff;
            text-decoration: underline;
        }
        .footer hr { border-color: rgba(255,255,255,.14); }

        .soft-divider{
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
        }

        @media (max-width: 991px){
            .hero { padding: 52px 0 24px; }
        }

        /* =========================
           ANIMATIONS
           ========================= */
        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        }

        /* Hero entrance */
        .anim-hero-badge { opacity: 0; transform: translateY(10px); animation: fadeUp .7s ease forwards; }
        .anim-hero-title { opacity: 0; transform: translateY(14px); animation: fadeUp .8s ease forwards; animation-delay: .08s; }
        .anim-hero-lead  { opacity: 0; transform: translateY(14px); animation: fadeUp .85s ease forwards; animation-delay: .16s; }
        .anim-hero-btns  { opacity: 0; transform: translateY(14px); animation: fadeUp .9s ease forwards; animation-delay: .24s; }
        .anim-hero-trust { opacity: 0; transform: translateY(14px); animation: fadeUp .95s ease forwards; animation-delay: .32s; }
        .anim-hero-card  { opacity: 0; transform: translateY(18px) scale(.98); animation: fadeUp .9s ease forwards; animation-delay: .18s; }

        @media (min-width: 992px){
            .float-soft { animation: floatSoft 6s ease-in-out infinite; }
        }

        /* Scroll reveal base */
        .reveal {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .65s ease, transform .65s ease;
            will-change: opacity, transform;
        }
        .reveal.show {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal { transition-delay: var(--d, 0ms); }

        /* Button micro */
        .btn-pill { transition: transform .18s ease, box-shadow .18s ease; }
        .btn-pill:hover { transform: translateY(-1px); }


        /* Login shell */
        .login-shell{
            border: 1px solid rgba(0,0,0,.06);
            background: rgba(255,255,255,.92);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow2);
        }

        /* Left video panel (desktop) */
        .video-panel{
            position: relative;
            overflow: hidden;
            min-height: 520px;
            background: #000;
        }
        .video-panel video{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(rgb(0 156 161 / 41%), rgb(11 110 253 / 68%));
            display: flex;
            align-items: flex-end;
            padding: 24px;
        }
        .video-overlay h3{
            color: #fff;
            font-weight: 800;
            margin: 0;
        }
        .video-overlay p{
            color: rgba(255,255,255,.85);
            margin: 6px 0 0;
        }

        /* Mobile banner (to make it look like homepage) */
        .mobile-hero{
            height: 190px;
            background: url("<?= BASE_URL ?>/assets/img/multidms_logo.png") center/120px no-repeat,
                        radial-gradient(1200px 600px at 20% 10%, rgba(13,110,253,.25), transparent 60%),
                        radial-gradient(900px 520px at 80% 30%, rgba(25,135,84,.20), transparent 55%),
                        linear-gradient(180deg, #ffffff 0%, #f6f8fb 70%);
            border-bottom: 1px solid rgba(0,0,0,.06);
            display: none;
        }

        /* Form */
        .brand{
            font-weight: 800;
            letter-spacing: .5px;
        }
        .form-label{
            font-weight: 600;
            color: rgba(11,18,32,.8);
        }

        .loginContainer{
            margin: 120px auto;
        }
        /* Responsive tweaks */
        @media (max-width: 991px){
            .loginContainer{
            margin: 60px 10px;
        }
            .video-panel { display: none; }
            .mobile-hero { display: block; }
            .login-shell { border-radius: 16px; }
            .login-card-body { padding: 26px !important; }
            .form-control-lg{
                font-size: 1.05rem;
                padding: 14px 14px;
            }
            .btn.btn-lg{
                padding: 14px 16px;
                font-size: 1.05rem;
            }
        }
        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
        @keyframes floatSoft {
            0%,100% { transform: translateY(0); }
            50%     { transform: translateY(-8px); }
        }
     @media print{
            .no-print{ display:none !important; }
            body{ background:#fff !important; }
            .card-soft{ box-shadow:none !important; border:none !important; }
            .navbar, .footer{ display:none !important; }
            a[href]:after{ content:"" !important; }
        }