:root{--navy:#071b4f;--navy2:#0d2b75;--orange:#ff6b16;--orange2:#ff9d2e;--purple:#7b35c8;--purple2:#b05cff;--ink:#15213b;--muted:#66718a;--paper:#f7f8fc;--white:#fff;--line:#e7eaf2;--shadow:0 22px 60px rgba(9,27,79,.13);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--white);line-height:1.65;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.container{width:min(1160px,calc(100% - 36px));margin:auto}.topbar{background:#041338;color:#cdd8f5;font-size:12px}.topbar-inner{display:flex;justify-content:space-between;padding:8px 0}.topbar a{color:#fff}.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,27,79,.08);transition:.3s}.nav-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--navy)}.brand img{width:48px;height:48px;object-fit:contain;border-radius:9px}.brand b{color:var(--orange)}.nav-links{display:flex;align-items:center;gap:27px;font-size:14px;font-weight:700;color:#2c3852}.nav-links>a,.drop-btn{position:relative}.nav-links>a:after,.drop-btn:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--purple));transition:.25s}.nav-links>a:hover:after,.drop-btn:hover:after{width:100%}.drop-btn{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:700;padding:10px 0}.nav-dropdown{position:relative}.dropdown-menu{position:absolute;right:0;top:45px;min-width:220px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}.nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}.dropdown-menu a{display:block;padding:10px 12px;border-radius:10px}.dropdown-menu a:hover{background:#f4f1ff;color:var(--purple)}.login-btn{border:0;color:#fff;background:linear-gradient(135deg,var(--navy),var(--purple));padding:11px 20px;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(73,50,160,.2)}.menu-toggle{display:none;border:0;background:transparent;padding:8px}.menu-toggle span{display:block;width:25px;height:3px;background:var(--navy);margin:5px;border-radius:5px}
/* =========================================================
   R1TECH HERO - ANIMATED BACKGROUND IMAGE
========================================================= */

.hero{
    position:relative;
    min-height:690px;

    /* Fallback background */
    background:
        linear-gradient(
            115deg,
            #061742 0%,
            #092565 58%,
            #3e1879 100%
        );

    color:#fff;
    overflow:hidden;
    isolation:isolate;
}


/* ---------------------------------------------------------
   BACKGROUND IMAGE
   assets/Background.png
--------------------------------------------------------- */

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,15,48,.88) 0%,
            rgba(5,22,65,.70) 28%,
            rgba(10,30,75,.30) 58%,
            rgba(53,22,105,.18) 100%
        ),
        url("assets/Background.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    z-index:-3;

    transform:scale(1.04);

    animation:
        heroBackgroundMove 16s ease-in-out infinite alternate;

    will-change:transform;
}


/* ---------------------------------------------------------
   EXTRA LIGHT GLOW OVER BACKGROUND
--------------------------------------------------------- */

.hero::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(111,196,255,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 25%,
            rgba(255,157,46,.18),
            transparent 22%
        ),
        linear-gradient(
            90deg,
            rgba(3,14,42,.22),
            transparent 55%
        );

    z-index:-2;

    pointer-events:none;

    animation:heroLightPulse 7s ease-in-out infinite;
}


/* ---------------------------------------------------------
   ANIMATED BACKGROUND MOVEMENT
--------------------------------------------------------- */

@keyframes heroBackgroundMove{

    0%{
        transform:
            scale(1.04)
            translate3d(0,0,0);
        background-position:
            center center;
    }

    50%{
        transform:
            scale(1.09)
            translate3d(-10px,-5px,0);
        background-position:
            52% 48%;
    }

    100%{
        transform:
            scale(1.13)
            translate3d(10px,4px,0);
        background-position:
            48% 52%;
    }
}


/* ---------------------------------------------------------
   BACKGROUND LIGHT ANIMATION
--------------------------------------------------------- */

@keyframes heroLightPulse{

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

    50%{
        opacity:1;
        transform:scale(1.06);
    }
}.hero-grid{
    position:absolute;
    inset:0;

    opacity:.13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent
        );

    z-index:-1;

    animation:heroGridMove 18s linear infinite;
    pointer-events:none;
}


/* Moving technology grid */

@keyframes heroGridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:55px 55px;
    }
}.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(8px);
    opacity:.35;

    pointer-events:none;

    z-index:-1;

    animation:
        float 8s ease-in-out infinite,
        orbGlow 5s ease-in-out infinite;
}

@keyframes orbGlow{

    0%,100%{
        opacity:.25;
        filter:blur(8px);
    }

    50%{
        opacity:.55;
        filter:blur(15px);
    }
}.orb-one{width:420px;height:420px;right:-120px;top:40px;background:radial-gradient(circle,var(--orange2),transparent 65%)}.orb-two{width:380px;height:380px;left:-180px;bottom:-160px;background:radial-gradient(circle,var(--purple2),transparent 65%);animation-delay:-3s}.hero-layout{
    position:relative;z-index:5;min-height:690px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px;;min-height:690px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px}.eyebrow{display:inline-flex;font-size:11px;letter-spacing:2px;font-weight:900;color:#fff;opacity:.95}.eyebrow.orange{color:var(--orange)}.eyebrow.purple{color:var(--purple)}.hero h1{font-size:clamp(48px,6vw,78px);line-height:1.03;letter-spacing:-3px;max-width:760px;margin:18px 0}.hero h1 span{color:#ff8b2b}.hero-copy>p{font-size:18px;max-width:620px;color:#d6def3}.hero-actions{display:flex;gap:14px;margin:30px 0}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 23px;border-radius:14px;font-weight:900;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-3px)}.btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 14px 30px rgba(255,107,22,.25)}.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.06)}.btn-navy{background:linear-gradient(135deg,var(--navy),var(--purple));color:#fff}.full{width:100%}.trust-row{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#d9e1f4}.hero-art{height:500px;position:relative;display:grid;place-items:center}.shield{width:330px;height:390px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}.shield-shape{width:230px;height:280px;display:grid;place-items:center;font-size:80px;font-weight:900;color:#fff;background:linear-gradient(160deg,var(--orange),var(--purple));clip-path:polygon(50% 0,92% 16%,85% 68%,50% 100%,15% 68%,8% 16%);animation:pulse 3.5s ease-in-out infinite}.shield-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,157,46,.35),transparent 65%);filter:blur(15px)}.floating-card{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(15px);padding:14px 18px;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 15px 40px rgba(0,0,0,.18)}.floating-card span,.floating-card strong{font-size:25px}.floating-card small{color:#d7def1}.card-top{top:50px;right:0}.card-bottom{bottom:70px;left:0}.hero-wave{position:absolute;bottom:-1px;left:-5%;width:110%;height:70px;background:#fff;clip-path:ellipse(52% 60% at 50% 100%)}
.stats{background:#fff;box-shadow:0 8px 35px rgba(7,27,79,.08);position:relative;z-index:4}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:26px 0}.stats-grid>div{display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line)}.stats-grid>div:last-child{border:0}.stats-grid strong{font-size:24px;color:var(--orange)}.stats-grid span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.section{padding:105px 0}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.section-copy h2,.section-heading h2,.quote-copy h2,.contact-copy h2{font-size:clamp(36px,4vw,54px);line-height:1.1;letter-spacing:-2px;margin:14px 0 18px;color:var(--navy)}.section-copy p,.section-heading p,.quote-copy p,.contact-copy p{color:var(--muted);font-size:16px}.check-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0;color:#34405b;font-weight:700;font-size:14px}.about-art{height:460px;border-radius:32px;background:linear-gradient(145deg,#0a1e56,#7b35c8);position:relative;overflow:hidden;box-shadow:var(--shadow)}.about-art{
    height:460px;
    border-radius:32px;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(7,27,79,.96),
            rgba(62,24,121,.92)
        );

    box-shadow:var(--shadow);

    display:flex;
    align-items:center;
    justify-content:center;

    isolation:isolate;
}

/* Animated background glow */
.about-image-glow{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,157,46,.45) 0%,
            rgba(123,53,200,.25) 40%,
            transparent 70%
        );

    filter:blur(15px);

    animation:
        aboutGlow 4s ease-in-out infinite;

    z-index:-1;
}

/* Main Insurance Plans image */
.insurance-plans-image{
    width:82%;
    max-width:430px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 30px rgba(0,0,0,.28));

    animation:
        insuranceFloat 4.5s ease-in-out infinite;

    transition:
        transform .5s ease,
        filter .5s ease;
}

/* Hover effect */
.about-art:hover .insurance-plans-image{
    transform:scale(1.06) translateY(-6px);

    filter:
        drop-shadow(0 30px 40px rgba(255,157,46,.25));
}

/* Floating information card */
.about-floating-card{
    position:absolute;
    right:22px;
    bottom:22px;

    padding:16px 20px;

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.4);
    border-radius:17px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);

    display:flex;
    flex-direction:column;

    animation:
        cardFloat 4s ease-in-out infinite;
}

.about-floating-card span{
    color:var(--orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
}

.about-floating-card strong{
    color:var(--navy);
    font-size:15px;
    margin-top:2px;
}

.about-floating-card small{
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}

/* Animations */

@keyframes insuranceFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-14px) rotate(1deg);
    }
}

@keyframes aboutGlow{
    0%,100%{
        transform:scale(.95);
        opacity:.65;
    }

    50%{
        transform:scale(1.12);
        opacity:1;
    }
}

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

    50%{
        transform:translateY(-7px);
    }
}.services{background:var(--paper)}.section-heading{text-align:center;max-width:720px;margin:0 auto 55px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 12px 35px rgba(7,27,79,.06);transition:.3s}.service-card:hover{transform:translateY(-9px);box-shadow:var(--shadow)}.service-visual{height:225px;position:relative;overflow:hidden}.vehicle-visual{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            rgba(7,27,79,.94) 0%,
            rgba(7,27,79,.70) 35%,
            rgba(7,27,79,.30) 65%,
            rgba(7,27,79,.05) 100%
        ),
        url("assets/Roadvehicle.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:background-size .7s ease,
               background-position .7s ease;
}
.service-card.vehicle:hover .vehicle-visual{
    background-size:108%;
    background-position:center right;
}.travel-visual{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(70,25,125,.94) 0%,
            rgba(85,35,145,.70) 35%,
            rgba(123,53,200,.30) 65%,
            rgba(123,53,200,.05) 100%
        ),
        url("assets/Travelinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        background-size .7s ease,
        background-position .7s ease;
}

.service-card.travel:hover .travel-visual{
    background-size:108%;
    background-position:center right;
}.health-visual{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,82,91,.94) 0%,
            rgba(8,92,104,.70) 35%,
            rgba(20,165,142,.30) 65%,
            rgba(20,165,142,.05) 100%
        ),
        url("assets/Healthinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        background-size .7s ease,
        background-position .7s ease;
}.service-card.health:hover .health-visual{
    background-size:108%;
    background-position:center right;
}.bubble{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:7px 11px;border-radius:999px;font-size:10px;font-weight:900;color:#fff;letter-spacing:1px}.road{position:absolute;bottom:-60px;left:-10%;width:120%;height:150px;background:#172039;transform:rotate(-4deg)}.car{position:absolute;font-size:82px;left:50%;top:55%;transform:translate(-50%,-50%);filter:drop-shadow(0 15px 10px rgba(0,0,0,.25));animation:float 4s ease-in-out infinite}.plane{position:absolute;font-size:95px;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-12deg);animation:fly 4.5s ease-in-out infinite}.cloud{position:absolute;color:#fff;opacity:.5;font-size:70px}.c1{left:5%;top:20px}.c2{right:4%;bottom:5px}.pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:120px;color:#fff;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));animation:pulse 2s infinite}.health-orbit{position:absolute;inset:35px;border:2px dashed rgba(255,255,255,.35);border-radius:50%;animation:spin 14s linear infinite}.service-body{padding:26px}.tag{font-size:10px;font-weight:1000;letter-spacing:1.5px;color:var(--purple)}.service-body h3{font-size:26px;margin:7px 0;color:var(--navy)}.service-body p{font-size:14px;color:var(--muted);min-height:68px}.service-body ul{list-style:none;padding:0;margin:18px 0;color:#45516b;font-size:13px}.service-body li{margin:8px 0}.text-btn{border:0;background:none;padding:0;color:var(--orange);font-weight:900;cursor:pointer}.quote-section{padding:100px 0;background:linear-gradient(120deg,#06183f,#182e78 55%,#6421a2);color:#fff}.quote-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.quote-copy h2{color:#fff}.quote-copy p{color:#cdd6ed}.quote-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.quote-points span{padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);font-size:12px}.quote-card{background:#fff;color:var(--ink);padding:30px;border-radius:26px;box-shadow:0 25px 60px rgba(0,0,0,.2)}label{display:block;font-size:12px;font-weight:900;color:#35415b;margin-bottom:15px}input,select,textarea{width:100%;margin-top:7px;border:1px solid #dce1ec;background:#fbfcff;border-radius:12px;padding:13px 14px;outline:none;transition:.2s;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(123,53,200,.1)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-note{display:block;color:#7a8397;margin-top:13px;font-size:10px;line-height:1.5}.progress{height:5px;background:#edf0f7;border-radius:99px;margin-bottom:22px}.progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--orange),var(--purple));border-radius:99px}
.process{background:#fff}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.process-item{padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fafaff)}.process-item>b{color:var(--orange);font-size:38px}.process-item h3{color:var(--navy);font-size:22px;margin:5px 0}.process-item p{color:var(--muted);font-size:14px}.gallery{background:var(--paper)}.gallery-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:230px 230px;gap:18px}.gallery-tile{border-radius:25px;overflow:hidden;padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:end;position:relative;isolation:isolate;box-shadow:0 12px 30px rgba(7,27,79,.1)}.gallery-tile:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.28),transparent 25%),linear-gradient(135deg,#0a1f5c,#7b35c8)}.gallery-tile:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-40px;top:-40px;border:1px solid rgba(255,255,255,.25);z-index:-1}.gallery-tile span{font-size:10px;letter-spacing:2px;font-weight:900;opacity:.85}.gallery-tile b{font-size:23px;max-width:280px;line-height:1.2}.g1{grid-row:span 2}/* =========================================
   VISUAL GALLERY - INSURANCE IMAGES
========================================= */

.gallery-tile{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

/* Vehicle */
.vehicle-gallery{
    background-image:
        linear-gradient(
            90deg,
            rgba(7,27,79,.88),
            rgba(7,27,79,.35)
        ),
        url("assets/Vehicleinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        transform .5s ease,
        background-size .8s ease,
        background-position .8s ease;
}

/* Travel */
.travel-gallery{
    background-image:
        linear-gradient(
            90deg,
            rgba(91,37,155,.88),
            rgba(123,53,200,.28)
        ),
        url("assets/Travelinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        transform .5s ease,
        background-size .8s ease,
        background-position .8s ease;
}

/* Health */
.health-gallery{
    background-image:
        linear-gradient(
            90deg,
            rgba(7,92,101,.88),
            rgba(20,165,142,.25)
        ),
        url("assets/Healthinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        transform .5s ease,
        background-size .8s ease,
        background-position .8s ease;
}

/* Dark gradient for readable text */
.gallery-overlay{
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(
            to top,
            rgba(4,15,42,.88) 0%,
            rgba(4,15,42,.35) 45%,
            transparent 75%
        );
}

/* Text stays above image */
.gallery-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:4px;
}

/* Gallery text */
.gallery-content span{
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:#fff;
}

.gallery-content b{
    font-size:23px;
    max-width:300px;
    line-height:1.2;
    color:#fff;
}

/* Hover animations */
.vehicle-gallery:hover,
.travel-gallery:hover,
.health-gallery:hover{
    transform:translateY(-6px);
    background-size:108%;
}

/* Different image positioning if required */
.vehicle-gallery:hover{
    background-position:center right;
}

.travel-gallery:hover{
    background-position:center right;
}

.health-gallery:hover{
    background-position:center right;
}

/* Animated glow */
.vehicle-gallery::after,
.travel-gallery::after,
.health-gallery::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-70px;
    top:-70px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    filter:blur(10px);
    z-index:0;
    animation:galleryGlow 4s ease-in-out infinite;
    pointer-events:none;
}

@keyframes galleryGlow{
    0%,100%{
        transform:scale(.9);
        opacity:.45;
    }

    50%{
        transform:scale(1.25);
        opacity:.8;
    }
}.services{background:var(--paper)}.section-heading{text-align:center;max-width:720px;margin:0 auto 55px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 12px 35px rgba(7,27,79,.06);transition:.3s}.service-card:hover{transform:translateY(-9px);box-shadow:var(--shadow)}.service-visual{height:225px;position:relative;overflow:hidden}.vehicle-visual{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            rgba(7,27,79,.94) 0%,
            rgba(7,27,79,.70) 35%,
            rgba(7,27,79,.30) 65%,
            rgba(7,27,79,.05) 100%
        ),
        url("assets/Roadvehicle.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:background-size .7s ease,
               background-position .7s ease;
}
.service-card.vehicle:hover .vehicle-visual{
    background-size:108%;
    background-position:center right;
}.travel-visual{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(70,25,125,.94) 0%,
            rgba(85,35,145,.70) 35%,
            rgba(123,53,200,.30) 65%,
            rgba(123,53,200,.05) 100%
        ),
        url("assets/Travelinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        background-size .7s ease,
        background-position .7s ease;
}

.service-card.travel:hover .travel-visual{
    background-size:108%;
    background-position:center right;
}.health-visual{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,82,91,.94) 0%,
            rgba(8,92,104,.70) 35%,
            rgba(20,165,142,.30) 65%,
            rgba(20,165,142,.05) 100%
        ),
        url("assets/Healthinsurance.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        background-size .7s ease,
        background-position .7s ease;
}.service-card.health:hover .health-visual{
    background-size:108%;
    background-position:center right;
}.bubble{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:7px 11px;border-radius:999px;font-size:10px;font-weight:900;color:#fff;letter-spacing:1px}.road{position:absolute;bottom:-60px;left:-10%;width:120%;height:150px;background:#172039;transform:rotate(-4deg)}.car{position:absolute;font-size:82px;left:50%;top:55%;transform:translate(-50%,-50%);filter:drop-shadow(0 15px 10px rgba(0,0,0,.25));animation:float 4s ease-in-out infinite}.plane{position:absolute;font-size:95px;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-12deg);animation:fly 4.5s ease-in-out infinite}.cloud{position:absolute;color:#fff;opacity:.5;font-size:70px}.c1{left:5%;top:20px}.c2{right:4%;bottom:5px}.pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:120px;color:#fff;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));animation:pulse 2s infinite}.health-orbit{position:absolute;inset:35px;border:2px dashed rgba(255,255,255,.35);border-radius:50%;animation:spin 14s linear infinite}.service-body{padding:26px}.tag{font-size:10px;font-weight:1000;letter-spacing:1.5px;color:var(--purple)}.service-body h3{font-size:26px;margin:7px 0;color:var(--navy)}.service-body p{font-size:14px;color:var(--muted);min-height:68px}.service-body ul{list-style:none;padding:0;margin:18px 0;color:#45516b;font-size:13px}.service-body li{margin:8px 0}.text-btn{border:0;background:none;padding:0;color:var(--orange);font-weight:900;cursor:pointer}.quote-section{padding:100px 0;background:linear-gradient(120deg,#06183f,#182e78 55%,#6421a2);color:#fff}.quote-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.quote-copy h2{color:#fff}.quote-copy p{color:#cdd6ed}.quote-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.quote-points span{padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);font-size:12px}.quote-card{background:#fff;color:var(--ink);padding:30px;border-radius:26px;box-shadow:0 25px 60px rgba(0,0,0,.2)}label{display:block;font-size:12px;font-weight:900;color:#35415b;margin-bottom:15px}input,select,textarea{width:100%;margin-top:7px;border:1px solid #dce1ec;background:#fbfcff;border-radius:12px;padding:13px 14px;outline:none;transition:.2s;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(123,53,200,.1)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-note{display:block;color:#7a8397;margin-top:13px;font-size:10px;line-height:1.5}.progress{height:5px;background:#edf0f7;border-radius:99px;margin-bottom:22px}.progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--orange),var(--purple));border-radius:99px}
.process{background:#fff}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.process-item{padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fafaff)}.process-item>b{color:var(--orange);font-size:38px}.process-item h3{color:var(--navy);font-size:22px;margin:5px 0}.process-item p{color:var(--muted);font-size:14px} .gallery{background:var(--paper);}
.gallery-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:230px 230px;gap:18px;}
.gallery-tile{border-radius:25px;overflow:hidden;padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:end;position:relative;isolation:isolate;box-shadow:0 12px 30px rgba(7,27,79,.10);background:#071b4f;transition:transform .45s ease,box-shadow .45s ease;}
.gallery-tile:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(7,27,79,.18);}
.gallery-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease;}
.gallery-image-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,15,42,.92) 0%,rgba(4,15,42,.50) 48%,rgba(4,15,42,.08) 100%);pointer-events:none;}
.gallery-content{position:relative;z-index:4;display:flex;flex-direction:column;gap:4px;}
.gallery-tile span{font-size:10px;letter-spacing:2px;font-weight:900;opacity:.92;}
.gallery-tile b{font-size:23px;max-width:280px;line-height:1.2;}
.g1{grid-row:span 2;}
.g4{background:linear-gradient(145deg,#ff5e13,#7b35c8);}
.gallery-tile:hover .gallery-image{transform:scale(1.10);filter:saturate(1.12) contrast(1.05);}
.gallery-tile::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none;}
.gallery-tile:hover::before{transform:translateX(120%);}
.g1::after,.g2::after,.g3::after{content:"";position:absolute;width:170px;height:170px;right:-70px;top:-70px;border-radius:50%;border:1px solid rgba(255,255,255,.20);box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.02);z-index:3;pointer-events:none;animation:galleryOrbit 5s ease-in-out infinite;}
.g2::after{animation-delay:-1.6s;}
.g3::after{animation-delay:-3.2s;}
@keyframes galleryOrbit{0%,100%{transform:translate(0,0) scale(.92);opacity:.45;}50%{transform:translate(-14px,12px) scale(1.08);opacity:.9;}}
.faq{background:#fff}.narrow{max-width:900px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:900;color:var(--navy);font-size:16px}details p{color:var(--muted);font-size:14px;max-width:780px}.legal{background:#f1f3f9;padding:80px 0}.legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.legal-grid article{background:#fff;border:1px solid var(--line);padding:28px;border-radius:20px}.legal-grid article:first-child{grid-column:1/-1;background:linear-gradient(135deg,#071b4f,#432083);color:#fff}.legal-grid article:first-child h2{color:#fff}.legal-grid h2,.legal-grid h3{margin-top:5px;color:var(--navy)}.legal-grid p{font-size:13px;color:var(--muted)}.legal-grid article:first-child p{color:#dce4f6}.contact-section{padding:100px 0;background:#fff}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:28px}.contact-cards a{padding:18px;border-radius:17px;background:#f6f7fb;border:1px solid var(--line)}.contact-cards b,.contact-cards span{display:block}.contact-cards b{color:var(--purple);font-size:11px;text-transform:uppercase;letter-spacing:1px}.contact-cards span{font-weight:800;margin-top:4px}.contact-form{padding:30px;background:#fff;border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow)}.footer{background:#041338;color:#c9d2e8;padding:55px 0 0}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px;padding-bottom:45px}.footer-brand{color:#fff}.footer h4{color:#ff8b2b;margin:0 0 10px}.footer p{font-size:12px;line-height:1.8}.footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:11px;color:#8997b6}
.modal{position:fixed;inset:0;background:rgba(2,8,25,.72);backdrop-filter:blur(8px);z-index:100;display:none;place-items:center;padding:20px}.modal.show{display:grid}.modal-box{background:#fff;width:min(430px,100%);padding:32px;border-radius:25px;box-shadow:0 30px 100px rgba(0,0,0,.35);position:relative}.modal-box h2{font-size:34px;color:var(--navy);margin:10px 0 2px}.modal-sub{color:var(--muted);margin-top:0}.modal-close{position:absolute;right:15px;top:10px;border:0;background:#f1f3f8;width:34px;height:34px;border-radius:50%;font-size:24px;cursor:pointer}.login-status{min-height:20px;font-size:12px;font-weight:800}.toast{position:fixed;right:20px;bottom:20px;z-index:120;background:#071b4f;color:#fff;padding:14px 18px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s;max-width:360px;font-size:13px}.toast.show{opacity:1;transform:none}.back-top{position:fixed;right:18px;bottom:18px;z-index:40;width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--purple));color:#fff;font-weight:900;cursor:pointer;opacity:0;transform:translateY(10px);transition:.3s}.back-top.show{opacity:1;transform:none}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fly{0%,100%{transform:translate(-50%,-50%) rotate(-12deg)}50%{transform:translate(-45%,-62%) rotate(-8deg)}}
@media(max-width:900px){.nav-links{gap:15px}.hero-layout,.split,.quote-layout,.contact-layout{grid-template-columns:1fr;gap:40px}.hero{min-height:auto}.hero-layout{padding:80px 0 120px}.hero-art{height:380px}.service-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 260px}.g1{grid-row:auto;grid-column:span 2}.footer-grid{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr;gap:18px}.stats-grid>div:nth-child(2){border-right:0}.nav-links{font-size:12px}}
@media(max-width:700px){.topbar-inner{display:none}.nav-inner{min-height:70px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;padding:20px;box-shadow:0 15px 30px rgba(0,0,0,.12);flex-direction:column;align-items:stretch;gap:7px}.nav-links.open{display:flex}.nav-links>a,.drop-btn{padding:11px 8px}.nav-dropdown .dropdown-menu{position:static;box-shadow:none;display:none;opacity:1;visibility:visible;transform:none;margin:0}.nav-dropdown.open .dropdown-menu{display:block}.hero h1{font-size:47px;letter-spacing:-2px}.hero-copy>p{font-size:16px}.hero-actions{flex-direction:column}.btn{width:100%}.hero-art{height:330px}.shield{transform:scale(.75)}.card-top{right:5px;top:0}.card-bottom{left:5px;bottom:0}.stats-grid{grid-template-columns:1fr 1fr}.section{padding:75px 0}.check-list,.form-grid,.contact-cards,.legal-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr;grid-template-rows:220px}.g1{grid-column:auto}.g1,.g2,.g3,.g4{grid-row:auto}.footer-grid{grid-template-columns:1fr}.footer-brand{margin-bottom:8px}}

/* Extra polish: subtle entrance and hover motion */
.service-card{will-change:transform;}
.service-card:hover{transform:translateY(-10px) scale(1.008);}
.service-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none;}
.service-card:hover .service-visual::after{transform:translateX(120%);}
.about-art{transition:transform .5s ease,box-shadow .5s ease;}
.about-art:hover{transform:translateY(-5px);box-shadow:0 30px 70px rgba(9,27,79,.20);}
/* =========================================================
   R1TECH CUSTOM SECTION BACKGROUNDS
   Uses the supplied assets: safe.png and 3verticals.png
   ========================================================= */
.about{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background-image:
        linear-gradient(90deg,rgba(5,18,48,.18),rgba(5,18,48,.38)),
        url("assets/safe.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.about::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(4,15,42,.05) 0%,rgba(4,15,42,.08) 45%,rgba(4,15,42,.46) 100%);
    pointer-events:none;
}
.about .container{position:relative;z-index:2;}
.about .section-copy h2{color:#fff;}
.about .section-copy p{color:rgba(255,255,255,.90);}
.about .check-list{color:#fff;}
.about .eyebrow.purple{color:#d2b4ff;}
.about .btn-navy{background:linear-gradient(135deg,var(--navy),var(--purple));color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25);}

.services{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background-image:
        linear-gradient(90deg,rgba(4,15,42,.22),rgba(4,15,42,.08) 50%,rgba(4,15,42,.22)),
        url("assets/3verticals.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.services::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(4,15,42,.16),rgba(4,15,42,.28));
    pointer-events:none;
}
.services .container{position:relative;z-index:2;}
.services .section-heading h2{color:#fff;}
.services .section-heading p{color:rgba(255,255,255,.88);}
.services .eyebrow.orange{color:#ffb06d;}

/* Glass cards so the supplied 3-vertical background remains visible */
.services .service-card{
    background:rgba(10,24,55,.42);
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 20px 55px rgba(0,0,0,.22);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}
.services .service-body{background:linear-gradient(180deg,rgba(8,20,47,.42),rgba(8,20,47,.68));}
.services .service-body h3{color:#fff;}
.services .service-body p,
.services .service-body ul{color:rgba(255,255,255,.86);}
.services .service-body li{color:rgba(255,255,255,.88);}
.services .service-body .tag{color:#ffad68;}
.services .text-btn{color:#ffae68;}

@media(max-width:900px){
    .about,.services{background-position:center center;}
}
@media(max-width:700px){
    .about{background-position:58% center;}
    .services{background-position:center center;}
}


/* =========================================================
   R1TECH — FULL-PAGE ANIMATED INSURANCE BACKGROUND
   Uses the supplied Safe / 3Verticals / Vehicle / Travel /
   Health / Insurance Plans artwork throughout the page.
   ========================================================= */
body{
    background:#061536;
}

.site-background{
    position:fixed;
    inset:0;
    z-index:-20;
    overflow:hidden;
    pointer-events:none;
    background:#061536;
    isolation:isolate;
}

.site-bg-image{
    position:absolute;
    inset:-6%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    transform:scale(1.08);
    will-change:transform,opacity,background-position;
}

/* Your 3-vertical artwork becomes the main full-page visual. */
.site-bg-main{
    background-image:
      linear-gradient(180deg,rgba(3,13,39,.64),rgba(3,13,39,.78)),
      url("assets/3verticals.png");
    opacity:.38;
    animation:fullBgDrift 24s ease-in-out infinite alternate;
}

/* Safe/family artwork cross-fades through the page. */
.site-bg-safe{
    background-image:
      linear-gradient(180deg,rgba(4,14,43,.72),rgba(8,17,48,.88)),
      url("assets/safe.png");
    opacity:.20;
    mix-blend-mode:screen;
    animation:fullBgCrossfade 18s ease-in-out infinite;
}

.site-bg-glow{
    position:absolute;
    width:42vw;
    height:42vw;
    min-width:280px;
    min-height:280px;
    border-radius:50%;
    filter:blur(65px);
    opacity:.18;
    will-change:transform;
}
.glow-a{left:-12vw;top:8vh;background:rgba(255,107,22,.75);animation:glowFloatA 14s ease-in-out infinite;}
.glow-b{right:-12vw;top:34vh;background:rgba(123,53,200,.72);animation:glowFloatB 17s ease-in-out infinite;}
.glow-c{left:30vw;bottom:-20vw;background:rgba(38,125,255,.58);animation:glowFloatC 20s ease-in-out infinite;}

.insurance-float{
    position:absolute;
    border-radius:26px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.055);
    box-shadow:0 25px 70px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    opacity:.11;
    will-change:transform;
}
.insurance-float img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.12) contrast(1.05);
}
.insurance-float-vehicle{width:260px;height:190px;left:-55px;top:18%;transform:rotate(-7deg);animation:floatVehicle 13s ease-in-out infinite;}
.insurance-float-travel{width:310px;height:190px;right:-90px;top:38%;transform:rotate(7deg);animation:floatTravel 16s ease-in-out infinite;}
.insurance-float-health{width:240px;height:205px;left:7%;bottom:10%;transform:rotate(5deg);animation:floatHealth 15s ease-in-out infinite;}
.insurance-float-plans{width:300px;height:195px;right:6%;bottom:6%;transform:rotate(-5deg);animation:floatPlans 18s ease-in-out infinite;}

.site-bg-vignette{
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 50% 15%,transparent 0,rgba(2,9,28,.10) 38%,rgba(2,9,28,.62) 100%),
      linear-gradient(180deg,rgba(3,12,35,.10),rgba(3,12,35,.34));
}

/* Keep the actual page content readable while letting the animated art show through. */
main > section,
.stats,
.footer{
    position:relative;
}
.stats{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(14px);}
.about,
.services,
.quote-section,
.process,
.gallery,
.faq,
.legal,
.contact-section{
    background-color:rgba(247,248,252,.78)!important;
    background-image:none!important;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.about{background:linear-gradient(90deg,rgba(5,18,48,.22),rgba(5,18,48,.50))!important;}
.services{background:linear-gradient(180deg,rgba(4,15,42,.30),rgba(4,15,42,.46))!important;}
.quote-section,.process,.gallery,.faq,.contact-section{background-color:rgba(247,248,252,.84)!important;}
.legal{background-color:rgba(241,243,249,.88)!important;}

/* Animated section separators make the long page feel like one designed experience. */
main > section:not(.hero)::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px,80%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(255,107,22,.30),rgba(123,53,200,.34),transparent);
    animation:separatorPulse 5s ease-in-out infinite;
    pointer-events:none;
}

/* Headings, cards and controls get a subtle insurance-dashboard motion language. */
.section-heading h2,
.section-copy h2,
.quote-copy h2,
.contact-copy h2,
.legal-grid h2,
.legal-grid h3{
    position:relative;
}
.section-heading h2::after,
.section-copy h2::after,
.quote-copy h2::after,
.contact-copy h2::after{
    content:"";
    display:block;
    width:58px;
    height:4px;
    border-radius:99px;
    margin-top:13px;
    background:linear-gradient(90deg,var(--orange),var(--purple));
    transform-origin:left;
    animation:titleLine 3.2s ease-in-out infinite;
}

.service-card,
.quote-card,
.process-item,
.contact-form,
.contact-cards a,
.faq-list details,
.legal-grid article,
.gallery-tile{
    will-change:transform;
}
.service-card:hover,
.process-item:hover,
.contact-cards a:hover,
.legal-grid article:hover{
    transform:translateY(-8px);
}

.gallery-tile{
    overflow:hidden;
}
.gallery-tile::after{
    animation:galleryAura 7s ease-in-out infinite!important;
}

/* A moving light sweep across major content blocks. */
.service-card::before,
.quote-card::before,
.process-item::before,
.contact-form::before,
.legal-grid article::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:30%;
    left:-45%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
    transform:skewX(-18deg);
    animation:contentSweep 8s ease-in-out infinite;
    pointer-events:none;
    z-index:5;
}
.service-card,.quote-card,.process-item,.contact-form,.legal-grid article{position:relative;overflow:hidden;}

@keyframes fullBgDrift{
  0%{transform:scale(1.08) translate3d(-1%,0,0);background-position:48% 50%;}
  50%{transform:scale(1.13) translate3d(1%, -1%,0);background-position:53% 47%;}
  100%{transform:scale(1.09) translate3d(-.5%,1%,0);background-position:46% 53%;}
}
@keyframes fullBgCrossfade{
  0%,100%{opacity:.10;transform:scale(1.08) translateX(0);}
  35%{opacity:.27;transform:scale(1.12) translateX(1.5%);}
  70%{opacity:.16;transform:scale(1.10) translateX(-1.5%);}
}
@keyframes glowFloatA{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(16vw,12vh) scale(1.2)}}
@keyframes glowFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vw,-10vh) scale(.78)}}
@keyframes glowFloatC{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(8vw,-15vh) scale(1.18)}}
@keyframes floatVehicle{0%,100%{margin-top:0}50%{margin-top:55px;transform:rotate(-3deg) translateX(25px)}}
@keyframes floatTravel{0%,100%{margin-top:0}50%{margin-top:-70px;transform:rotate(4deg) translateX(-25px)}}
@keyframes floatHealth{0%,100%{margin-bottom:0}50%{margin-bottom:45px;transform:rotate(1deg) translateX(30px)}}
@keyframes floatPlans{0%,100%{margin-bottom:0}50%{margin-bottom:-45px;transform:rotate(-2deg) translateX(-20px)}}
@keyframes separatorPulse{0%,100%{opacity:.45;transform:translateX(-50%) scaleX(.72)}50%{opacity:1;transform:translateX(-50%) scaleX(1)}}
@keyframes titleLine{0%,100%{transform:scaleX(.72);opacity:.72}50%{transform:scaleX(1.18);opacity:1}}
@keyframes contentSweep{0%,62%,100%{left:-45%;opacity:0}68%{opacity:1}82%{left:120%;opacity:0}}
@keyframes galleryAura{0%,100%{transform:translate(0,0) scale(.92);opacity:.45}50%{transform:translate(-14px,12px) scale(1.10);opacity:.95}}

@media(max-width:900px){
    .insurance-float-vehicle{left:-100px;opacity:.07;}
    .insurance-float-travel{right:-130px;opacity:.07;}
    .insurance-float-health{left:-70px;opacity:.07;}
    .insurance-float-plans{right:-90px;opacity:.07;}
    .site-bg-main{opacity:.28;}
    .site-bg-safe{opacity:.13;}
}
@media(max-width:700px){
    .site-background{position:fixed;}
    .site-bg-main{background-size:auto 100%;background-position:center top;opacity:.22;}
    .site-bg-safe{background-size:auto 100%;background-position:center top;opacity:.10;}
    .insurance-float{opacity:.045;filter:blur(.2px);}
    .insurance-float-vehicle{width:190px;height:130px;}
    .insurance-float-travel{width:210px;height:130px;}
    .insurance-float-health{width:180px;height:145px;}
    .insurance-float-plans{width:210px;height:135px;}
}
@media(prefers-reduced-motion:reduce){
    .site-bg-image,.site-bg-glow,.insurance-float,.section-heading h2::after,.section-copy h2::after,.quote-copy h2::after,.contact-copy h2::after,main > section:not(.hero)::before,.service-card::before,.quote-card::before,.process-item::before,.contact-form::before,.legal-grid article::before{animation:none!important;}
    html{scroll-behavior:auto;}
}

.site-bg-main{transform:translate3d(var(--r1-mouse-x,0px),calc(var(--r1-scroll-y,0px) + var(--r1-mouse-y,0px))) scale(1.08);}
.site-bg-safe{transform:translate3d(calc(var(--r1-mouse-x,0px) * -0.65),calc(var(--r1-scroll-y,0px) * .55)) scale(1.08);}

/* =========================================================
   R1TECH CINEMATIC FULL-PAGE BACKGROUND SYSTEM v2
   Every major page topic gets its own asset and transitions
   smoothly as the visitor scrolls through the long page.
========================================================= */
:root{
  --bg-dark:#06142f;
  --bg-blue:#0b2d70;
  --bg-orange:#ff6b16;
  --bg-purple:#7b35c8;
}

body{background:#071b4f;}
.site-background{
  position:fixed;
  inset:0;
  z-index:-10;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(57,133,255,.20),transparent 30%),
    radial-gradient(circle at 82% 25%,rgba(255,107,22,.16),transparent 28%),
    linear-gradient(135deg,#06142f,#0b2257 55%,#35136c);
  pointer-events:none;
  isolation:isolate;
}
.site-bg-image{
  position:absolute;
  inset:-7%;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.08);
  filter:saturate(.92) contrast(1.02);
  transition:opacity 1.25s ease, filter 1.2s ease;
  will-change:transform,opacity;
}
.site-bg-image.active{opacity:.72;animation:bgCinematicDrift 16s ease-in-out infinite alternate;}
.site-bg-image.previous{opacity:.18;}
.site-bg-main{--bg-image:url("assets/Background.png");}
.site-bg-safe{--bg-image:url("assets/safe.png");}
.site-bg-verticals{--bg-image:url("assets/3verticals.png");}
.site-bg-protection{--bg-image:url("assets/Protection.png");}
.site-bg-gallery{--bg-image:url("assets/Gemini_Generated_Image_svx2qvsvx2qvsvx2.png");}
.site-bg-faq{--bg-image:url("assets/Faq.png");}
.site-bg-legal{--bg-image:url("assets/Refunds.png");}
.site-bg-contact{--bg-image:url("assets/Assistance.png");}

.site-bg-image::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,12,34,.90),rgba(5,19,52,.62) 38%,rgba(6,20,48,.42) 68%,rgba(44,13,79,.66)),
    linear-gradient(180deg,rgba(2,10,28,.28),rgba(3,12,35,.68));
}
.site-bg-glow{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;pointer-events:none;opacity:.22;}
.glow-a{width:45vw;height:45vw;left:-16vw;top:8vh;background:#1678ff;animation:bgGlowA 12s ease-in-out infinite alternate;}
.glow-b{width:38vw;height:38vw;right:-12vw;top:28vh;background:#ff6b16;animation:bgGlowB 14s ease-in-out infinite alternate;}
.glow-c{width:34vw;height:34vw;left:35vw;bottom:-20vh;background:#8a3cff;animation:bgGlowC 11s ease-in-out infinite alternate;}
.site-bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 28%,rgba(2,8,25,.52) 100%);z-index:4;}
.bg-scanline{position:absolute;inset:0;z-index:5;opacity:.10;background:repeating-linear-gradient(180deg,transparent 0,transparent 5px,rgba(255,255,255,.035) 6px);mix-blend-mode:overlay;animation:scanMove 10s linear infinite;}
.bg-particles{position:absolute;inset:0;z-index:6;overflow:hidden;opacity:.55;}
.bg-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);animation:particleFloat 9s ease-in-out infinite;}
.bg-particles i:nth-child(1){left:8%;top:68%;animation-delay:-2s}.bg-particles i:nth-child(2){left:22%;top:32%;animation-delay:-5s}.bg-particles i:nth-child(3){left:41%;top:78%;animation-delay:-1s}.bg-particles i:nth-child(4){left:58%;top:20%;animation-delay:-7s}.bg-particles i:nth-child(5){left:73%;top:64%;animation-delay:-4s}.bg-particles i:nth-child(6){left:86%;top:38%;animation-delay:-6s}.bg-particles i:nth-child(7){left:94%;top:82%;animation-delay:-3s}.bg-particles i:nth-child(8){left:49%;top:48%;animation-delay:-8s}

/* Transparent page canvas: the fixed cinematic background remains visible. */
main > section:not(.hero), footer, .stats{position:relative;z-index:1;}
.stats{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(12px);}
.about,.services,.quote-section,.process,.gallery,.faq,.legal,.contact-section{background:transparent!important;}
.about::before,.services::before{background:linear-gradient(90deg,rgba(3,14,39,.80),rgba(4,18,48,.58),rgba(31,9,58,.72))!important;}
.about .container,.services .container,.quote-section .container,.process .container,.gallery .container,.faq .container,.legal .container,.contact-section .container{position:relative;z-index:8;}
.section-copy h2,.section-heading h2,.quote-copy h2,.contact-copy h2,.legal-grid h2,.legal-grid h3{color:#fff!important;text-shadow:0 3px 22px rgba(0,0,0,.32);}
.section-copy p,.section-heading p,.quote-copy p,.contact-copy p{color:rgba(245,249,255,.90)!important;text-shadow:0 2px 12px rgba(0,0,0,.24);}
.check-list{color:#fff!important;}
.process-item,.faq-list details,.legal-grid article{background:rgba(5,18,45,.62)!important;border-color:rgba(255,255,255,.16)!important;color:#fff;backdrop-filter:blur(16px);box-shadow:0 18px 55px rgba(0,0,0,.18);}
.process-item h3,.process-item p,.faq-list summary,.faq-list p,.legal-grid h3,.legal-grid p{color:#fff!important;}
.quote-card,.contact-form{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px);}
.gallery-grid{position:relative;z-index:2;}
.gallery-tile{box-shadow:0 20px 60px rgba(0,0,0,.24);}
.legal{background:transparent!important;}
.legal-grid{position:relative;z-index:8;}
.footer{position:relative;z-index:8;background:rgba(2,10,29,.93)!important;backdrop-filter:blur(16px);}

/* Animated section color accents */
main > section:not(.hero)::after{content:"";position:absolute;left:50%;bottom:0;width:min(420px,55vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,107,22,.75),rgba(176,92,255,.8),transparent);box-shadow:0 0 22px rgba(255,107,22,.25);animation:sectionLine 4s ease-in-out infinite;pointer-events:none;}

/* Make the three insurance cards feel like moving image windows. */
.service-card{background:rgba(3,14,38,.72)!important;border-color:rgba(255,255,255,.18)!important;backdrop-filter:blur(15px);}
.service-visual::after,.about-art::after,.gallery-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%);animation:imageSweep 7s ease-in-out infinite;pointer-events:none;z-index:5;}
.service-card:hover .service-visual img,.gallery-tile:hover .gallery-image{transform:scale(1.13);}

@keyframes bgCinematicDrift{0%{transform:scale(1.08) translate3d(-1.2%,0,0);background-position:48% 50%;}50%{transform:scale(1.14) translate3d(1%, -1%,0);background-position:53% 46%;}100%{transform:scale(1.10) translate3d(-.5%,1.2%,0);background-position:47% 54%;}}
@keyframes bgGlowA{to{transform:translate(18vw,8vh) scale(1.25);opacity:.34;}}
@keyframes bgGlowB{to{transform:translate(-16vw,-10vh) scale(.78);opacity:.34;}}
@keyframes bgGlowC{to{transform:translate(10vw,-16vh) scale(1.2);opacity:.30;}}
@keyframes scanMove{to{transform:translateY(24px);}}
@keyframes particleFloat{0%,100%{transform:translate3d(0,0,0) scale(.6);opacity:.25;}50%{transform:translate3d(20px,-55px,0) scale(1.3);opacity:1;}}
@keyframes sectionLine{0%,100%{opacity:.35;transform:translateX(-50%) scaleX(.65)}50%{opacity:1;transform:translateX(-50%) scaleX(1.1)}}
@keyframes imageSweep{0%,55%,100%{transform:translateX(-130%);opacity:0}62%{opacity:1}78%{transform:translateX(130%);opacity:0}}

@media(max-width:700px){
  .site-bg-image{inset:-12%;background-position:center;}
  .site-bg-image.active{opacity:.52;}
  .site-bg-image::after{background:linear-gradient(90deg,rgba(3,12,34,.88),rgba(5,19,52,.64)),linear-gradient(180deg,rgba(2,10,28,.24),rgba(3,12,35,.78));}
  .bg-particles{opacity:.3;}
}
@media(prefers-reduced-motion:reduce){
  .site-bg-image.active,.site-bg-glow,.bg-scanline,.bg-particles i,main > section:not(.hero)::after,.service-visual::after,.about-art::after,.gallery-tile::after{animation:none!important;}
}

/* Content motion: headings and topic blocks gently come alive after entering viewport. */
.section-heading,.section-copy,.quote-copy,.contact-copy{animation:topicBreath 7s ease-in-out infinite;}
.service-card,.process-item,.gallery-tile,.faq-list details,.legal-grid article,.contact-cards a{transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease,background .45s ease;}
.service-card:nth-child(2),.process-item:nth-child(2){animation-delay:-1.5s}.service-card:nth-child(3),.process-item:nth-child(3){animation-delay:-3s}
@keyframes topicBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(255,107,22,0));}50%{filter:drop-shadow(0 10px 28px rgba(72,121,255,.08));}}

/* =========================================================
   R1TECH — ANIMATED INSURANCE STATS / TOP JOURNEY BAR
   ADD-ON ONLY — DOES NOT REMOVE EXISTING SETTINGS
   ========================================================= */

.stats {
    position: relative !important;
    overflow: hidden;
    background: rgba(5, 18, 48, 0.72) !important;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Moving background glow inside the bar */
.stats::before {
    content: "";
    position: absolute;
    inset: -100%;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(255,107,22,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(42,121,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(123,53,200,.18),
            transparent 25%
        );
    animation: statsBackgroundMove 14s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Fine animated light line */
.stats::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transform: skewX(-20deg);
    animation: statsLightSweep 7s ease-in-out infinite;
    pointer-events: none;
}

.stats-grid {
    position: relative;
    z-index: 2;
}

/* Individual stat item */
.stats-grid > div {
    position: relative;
    min-height: 70px;
    padding: 10px 20px;
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        background .45s ease,
        box-shadow .45s ease;
    overflow: hidden;
}

/* Moving separator */
.stats-grid > div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    width: 1px;
    height: 60%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    animation: statsSeparator 3s ease-in-out infinite;
}

/* Animated number */
.stats-grid strong {
    position: relative;
    display: inline-block;
    font-size: 25px;
    letter-spacing: 1px;
    transform: translateY(0);
    animation: statsNumberFloat 3.5s ease-in-out infinite;
    text-shadow: 0 0 18px rgba(255,107,22,.30);
}

/* Animated text */
.stats-grid span {
    position: relative;
    display: inline-block;
    margin-top: 3px;
    color: rgba(255,255,255,.88) !important;
    transition:
        letter-spacing .4s ease,
        transform .4s ease;
}

/* Individual insurance colors */
.stats-grid > div:nth-child(1) strong {
    color: #ff7b24;
    text-shadow: 0 0 22px rgba(255,123,36,.45);
}

.stats-grid > div:nth-child(2) strong {
    color: #45a9ff;
    text-shadow: 0 0 22px rgba(69,169,255,.45);
}

.stats-grid > div:nth-child(3) strong {
    color: #b36cff;
    text-shadow: 0 0 22px rgba(179,108,255,.45);
}

.stats-grid > div:nth-child(4) strong {
    color: #ff9d2e;
    text-shadow: 0 0 22px rgba(255,157,46,.45);
}

/* Vehicle */
.stats-grid > div:nth-child(1) {
    animation: vehicleStat 5s ease-in-out infinite;
}

/* Travel */
.stats-grid > div:nth-child(2) {
    animation: travelStat 5s ease-in-out infinite;
    animation-delay: .7s;
}

/* Health */
.stats-grid > div:nth-child(3) {
    animation: healthStat 5s ease-in-out infinite;
    animation-delay: 1.4s;
}

/* Digital */
.stats-grid > div:nth-child(4) {
    animation: digitalStat 5s ease-in-out infinite;
    animation-delay: 2.1s;
}


/* Hover interaction */
.stats-grid > div:hover {
    transform: translateY(-5px) scale(1.03);
    background: rgba(255,255,255,.075);
    border-radius: 16px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.18),
        inset 0 0 25px rgba(255,255,255,.04);
}

.stats-grid > div:hover strong {
    transform: scale(1.12);
}

.stats-grid > div:hover span {
    letter-spacing: 1.8px;
    transform: translateY(-1px);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes statsBackgroundMove {

    0% {
        transform:
            translate3d(-4%,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(5%,2%,0)
            scale(1.08);
    }

    100% {
        transform:
            translate3d(-2%,-2%,0)
            scale(1.15);
    }
}


@keyframes statsLightSweep {

    0% {
        left: -40%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        left: 110%;
        opacity: .8;
    }

    65% {
        opacity: 0;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}


@keyframes statsSeparator {

    0%,100% {
        opacity: .25;
        transform: scaleY(.7);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}


@keyframes statsNumberFloat {

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

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


@keyframes vehicleStat {

    0%,100% {
        filter: drop-shadow(0 0 0 rgba(255,107,22,0));
    }

    50% {
        filter: drop-shadow(
            0 0 14px rgba(255,107,22,.18)
        );
    }
}


@keyframes travelStat {

    0%,100% {
        filter: drop-shadow(0 0 0 rgba(69,169,255,0));
    }

    50% {
        filter: drop-shadow(
            0 0 14px rgba(69,169,255,.18)
        );
    }
}


@keyframes healthStat {

    0%,100% {
        filter: drop-shadow(0 0 0 rgba(179,108,255,0));
    }

    50% {
        filter: drop-shadow(
            0 0 14px rgba(179,108,255,.18)
        );
    }
}


@keyframes digitalStat {

    0%,100% {
        filter: drop-shadow(0 0 0 rgba(255,157,46,0));
    }

    50% {
        filter: drop-shadow(
            0 0 16px rgba(255,157,46,.22)
        );
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 15px 10px !important;
        gap: 4px;
    }

    .stats-grid > div {
        min-height: 65px;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .stats-grid > div:nth-child(3),
    .stats-grid > div:nth-child(4) {
        border-bottom: 0;
    }

    .stats-grid strong {
        font-size: 20px;
    }

    .stats-grid span {
        font-size: 10px;
        letter-spacing: .8px;
        text-align: center;
    }

    .stats-grid > div::after {
        display: none;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .stats::before,
    .stats::after,
    .stats-grid > div,
    .stats-grid strong,
    .stats-grid > div::after {
        animation: none !important;
    }

    .stats-grid > div {
        transform: none !important;
    }
}
.stats-grid > div.stats-active {
    transform: translateY(-7px) scale(1.04);
    background: rgba(255,255,255,.09);
    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        inset 0 0 30px rgba(255,255,255,.04);
}

.stats-grid > div.stats-active strong {
    animation:
        statsActiveNumber .8s ease-in-out infinite alternate;
}

@keyframes statsActiveNumber {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.14);
    }
}

/* =========================================================
   R1TECH — NAVIGATION + LOGIN
   FULL ANIMATED INSURANCE BACKGROUND ADD-ON
   DO NOT REMOVE EXISTING CSS
   ========================================================= */

/* ---------------------------------------------------------
   NAVBAR — SAME ANIMATED INSURANCE BACKGROUND
   --------------------------------------------------------- */

.navbar {
    position: sticky !important;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(4, 19, 56, .92),
            rgba(7, 27, 79, .78),
            rgba(32, 18, 73, .88)
        ) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 8px 35px rgba(0,0,0,.16);
}

/* Animated insurance background */
.navbar::before {
    content: "";
    position: absolute;
    inset: -80%;
    z-index: -2;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,107,22,.24),
            transparent 22%
        ),
        radial-gradient(
            circle at 50% 40%,
            rgba(43,128,255,.20),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 55%,
            rgba(123,53,200,.25),
            transparent 22%
        );

    animation:
        navInsuranceGlow 15s ease-in-out infinite alternate;
}

/* Moving light sweep */
.navbar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 28%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.13),
        transparent
    );

    transform: skewX(-22deg);
    animation: navLightSweep 8s ease-in-out infinite;

    pointer-events: none;
}

.nav-inner {
    position: relative;
    z-index: 5;
}


/* ---------------------------------------------------------
   LOGO / BRAND
   --------------------------------------------------------- */

.navbar .brand {
    color: #fff !important;
    position: relative;
    transition:
        transform .4s ease,
        filter .4s ease;
}

.navbar .brand img {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.20),
        0 0 25px rgba(255,107,22,.20);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.navbar .brand:hover {
    transform: translateY(-2px);
}

.navbar .brand:hover img {
    transform: rotate(-3deg) scale(1.06);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.35),
        0 0 35px rgba(255,107,22,.40);
}

.navbar .brand b {
    color: #ff7b24 !important;
}


/* ---------------------------------------------------------
   NAVIGATION LINKS
   --------------------------------------------------------- */

.navbar .nav-links {
    color: rgba(255,255,255,.88) !important;
}

.navbar .nav-links > a,
.navbar .drop-btn {
    color: rgba(255,255,255,.90) !important;
    transition:
        color .3s ease,
        transform .3s ease,
        text-shadow .3s ease;
}

.navbar .nav-links > a:hover,
.navbar .drop-btn:hover {
    color: #fff !important;
    transform: translateY(-2px);

    text-shadow:
        0 0 15px rgba(255,255,255,.35);
}


/* Animated underline */
.navbar .nav-links > a::after,
.navbar .drop-btn::after {
    background:
        linear-gradient(
            90deg,
            #ff6b16,
            #ff9d2e,
            #7b35c8
        ) !important;

    box-shadow:
        0 0 12px rgba(255,107,22,.45);

    height: 3px !important;
}


/* ---------------------------------------------------------
   PAGES DROPDOWN
   --------------------------------------------------------- */

.navbar .dropdown-menu {
    background:
        linear-gradient(
            145deg,
            rgba(5,19,53,.96),
            rgba(19,27,72,.94),
            rgba(47,22,78,.95)
        ) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        0 0 35px rgba(69,61,180,.15);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    overflow: hidden;
}

.navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.06),
            transparent 80%
        );

    transform: translateX(-100%);
    animation: dropdownShine 5s ease-in-out infinite;

    pointer-events: none;
}

.navbar .dropdown-menu a {
    position: relative;
    color: rgba(255,255,255,.86) !important;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        padding-left .3s ease;
}

.navbar .dropdown-menu a:hover {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,107,22,.18),
            rgba(123,53,200,.18)
        ) !important;

    padding-left: 18px;
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   LOGIN BUTTON
   --------------------------------------------------------- */

.navbar .login-btn {
    position: relative;
    overflow: hidden;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #071b4f,
            #4a268d,
            #ff6b16
        ) !important;

    border:
        1px solid rgba(255,255,255,.20);

    box-shadow:
        0 8px 28px rgba(65,35,140,.30),
        0 0 18px rgba(255,107,22,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.navbar .login-btn::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-20deg);

    animation: loginButtonSweep 4s ease-in-out infinite;
}

.navbar .login-btn:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 15px 38px rgba(65,35,140,.38),
        0 0 28px rgba(255,107,22,.25);
}


/* ---------------------------------------------------------
   MOBILE MENU
   --------------------------------------------------------- */

@media(max-width:700px) {

    .navbar .nav-links {
        background:
            linear-gradient(
                145deg,
                rgba(4,19,56,.97),
                rgba(12,33,82,.96),
                rgba(48,22,80,.96)
            ) !important;

        border-top:
            1px solid rgba(255,255,255,.12);

        box-shadow:
            0 25px 55px rgba(0,0,0,.35);

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .navbar .nav-links > a,
    .navbar .drop-btn {
        color: rgba(255,255,255,.92) !important;
        border-radius: 12px;
    }

    .navbar .nav-links > a:hover,
    .navbar .drop-btn:hover {
        background:
            rgba(255,255,255,.07);

        padding-left: 15px;
    }

    .navbar .menu-toggle span {
        background: #fff !important;
        box-shadow:
            0 0 8px rgba(255,255,255,.15);
    }

    .navbar .dropdown-menu {
        background:
            rgba(255,255,255,.055) !important;

        border:
            1px solid rgba(255,255,255,.08) !important;
    }
}


/* =========================================================
   LOGIN MODAL — SAME INSURANCE BACKGROUND
   ========================================================= */

.modal {
    background:
        linear-gradient(
            135deg,
            rgba(2,8,25,.86),
            rgba(5,19,55,.80),
            rgba(39,15,67,.82)
        ) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    overflow: hidden;
}


/* Animated modal background */
.modal::before {
    content: "";

    position: absolute;
    inset: -30%;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255,107,22,.22),
            transparent 22%
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(45,132,255,.20),
            transparent 25%
        ),
        radial-gradient(
            circle at 55% 85%,
            rgba(123,53,200,.25),
            transparent 22%
        );

    animation:
        modalBackgroundMove 13s ease-in-out infinite alternate;

    pointer-events: none;
}


/* Floating insurance glow */
.modal::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,107,22,.14),
            transparent 65%
        );

    filter: blur(10px);

    animation:
        modalOrbFloat 8s ease-in-out infinite alternate;

    pointer-events: none;
}


/* ---------------------------------------------------------
   LOGIN BOX
   --------------------------------------------------------- */

.modal-box {
    position: relative;
    z-index: 5;

    color: #fff !important;

    background:
        linear-gradient(
            145deg,
            rgba(7,27,79,.94),
            rgba(12,34,83,.91),
            rgba(55,25,88,.93)
        ) !important;

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        0 35px 100px rgba(0,0,0,.45),
        0 0 55px rgba(79,48,166,.20);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    overflow: hidden;

    animation:
        loginBoxEntrance .55s cubic-bezier(.2,.8,.2,1);
}


/* Animated border */
.modal-box::before {
    content: "";

    position: absolute;
    inset: 0;

    padding: 1px;
    border-radius: 25px;

    background:
        linear-gradient(
            120deg,
            rgba(255,107,22,.65),
            transparent 35%,
            rgba(75,144,255,.55),
            transparent 70%,
            rgba(176,92,255,.60)
        );

    /* Active navigation glow */
.navbar .nav-item-active {
    text-shadow:
        0 0 18px rgba(255,107,22,.45);

    transform:
        translateY(-2px);
}


/* Scrolled navigation becomes slightly deeper */
.navbar.nav-scrolled {
    background:
        linear-gradient(
            90deg,
            rgba(3,15,45,.96),
            rgba(7,27,79,.91),
            rgba(35,17,68,.95)
        ) !important;

    box-shadow:
        0 12px 40px rgba(0,0,0,.25);
}


/* Login modal active state */
.modal.insurance-login-active .modal-box {
    animation:
        loginBoxEntrance .55s cubic-bezier(.2,.8,.2,1),
        loginBoxGlow 2.5s ease-in-out .55s infinite alternate;
}


@keyframes loginBoxGlow {

    from {
        box-shadow:
            0 35px 100px rgba(0,0,0,.45),
            0 0 35px rgba(79,48,166,.15);
    }

    to {
        box-shadow:
            0 35px 100px rgba(0,0,0,.48),
            0 0 60px rgba(255,107,22,.18),
            0 0 90px rgba(123,53,200,.12);
    }
}

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation:
        loginBorderMove 7s linear infinite;

    pointer-events: none;
}


/* Moving light inside login card */
.modal-box::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -100%;

    width: 70%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.07),
            transparent
        );

    transform: rotate(15deg);

    animation:
        loginCardSweep 6s ease-in-out infinite;

    pointer-events: none;
}


/* ---------------------------------------------------------
   LOGIN CONTENT
   --------------------------------------------------------- */

.modal-box h2 {
    position: relative;
    z-index: 3;

    color: #fff !important;

    text-shadow:
        0 0 22px rgba(255,255,255,.12);
}

.modal-box .modal-sub {
    position: relative;
    z-index: 3;

    color: rgba(255,255,255,.70) !important;
}

.modal-box label {
    position: relative;
    z-index: 3;

    color: rgba(255,255,255,.90) !important;
}


/* Login inputs */
.modal-box input {
    position: relative;
    z-index: 3;

    color: #fff !important;

    background:
        rgba(255,255,255,.075) !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.08);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        transform .3s ease;
}

.modal-box input::placeholder {
    color: rgba(255,255,255,.48) !important;
}

.modal-box input:focus {
    outline: none;

    background:
        rgba(255,255,255,.11) !important;

    border-color:
        rgba(255,157,46,.75) !important;

    box-shadow:
        0 0 0 3px rgba(255,107,22,.12),
        0 0 25px rgba(255,107,22,.12);

    transform: translateY(-1px);
}


/* Login submit button */
.modal-box .btn-navy {
    position: relative;
    z-index: 3;
    overflow: hidden;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #071b4f,
            #3e278c,
            #ff6b16
        ) !important;

    border:
        1px solid rgba(255,255,255,.16);

    box-shadow:
        0 12px 30px rgba(40,30,120,.30);
}

.modal-box .btn-navy::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        modalButtonSweep 4s ease-in-out infinite;
}

.modal-box .btn-navy:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px rgba(40,30,120,.42),
        0 0 25px rgba(255,107,22,.18);
}


/* Close button */
.modal-box .modal-close {
    z-index: 10;

    color: #fff !important;

    background:
        rgba(255,255,255,.10) !important;

    border:
        1px solid rgba(255,255,255,.13);

    transition:
        transform .3s ease,
        background .3s ease;
}

.modal-box .modal-close:hover {
    background:
        rgba(255,107,22,.30) !important;

    transform:
        rotate(90deg)
        scale(1.08);
}


/* Security note */
.modal-box small {
    position: relative;
    z-index: 3;

    color:
        rgba(255,255,255,.52) !important;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes navInsuranceGlow {

    0% {
        transform:
            translate3d(-3%,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(4%,2%,0)
            scale(1.08);
    }

    100% {
        transform:
            translate3d(-2%,-2%,0)
            scale(1.14);
    }
}


@keyframes navLightSweep {

    0% {
        left: -35%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    55% {
        left: 120%;
        opacity: .8;
    }

    70%,100% {
        left: 120%;
        opacity: 0;
    }
}


@keyframes dropdownShine {

    0% {
        transform: translateX(-120%);
    }

    45%,100% {
        transform: translateX(150%);
    }
}


@keyframes loginButtonSweep {

    0%,25% {
        left: -120%;
    }

    65% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


@keyframes modalBackgroundMove {

    0% {
        transform:
            translate(-3%,-2%)
            scale(1);
    }

    50% {
        transform:
            translate(4%,3%)
            scale(1.08);
    }

    100% {
        transform:
            translate(-2%,2%)
            scale(1.15);
    }
}


@keyframes modalOrbFloat {

    0% {
        transform:
            translate(-25%,-15%);
    }

    50% {
        transform:
            translate(25%,15%);
    }

    100% {
        transform:
            translate(5%,35%);
    }
}


@keyframes loginBoxEntrance {

    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.94);
    }

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


@keyframes loginBorderMove {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes loginCardSweep {

    0%,20% {
        left: -100%;
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    70%,100% {
        left: 150%;
        opacity: 0;
    }
}


@keyframes modalButtonSweep {

    0%,25% {
        left: -120%;
    }

    65% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .navbar::before,
    .navbar::after,
    .dropdown-menu::before,
    .login-btn::before,
    .modal::before,
    .modal::after,
    .modal-box,
    .modal-box::before,
    .modal-box::after,
    .modal-box .btn-navy::before {
        animation: none !important;
    }
}