/* =========================================================
   RetaQR — GLOBAL theme layer (loads on every page)
   Dark/light chrome + toggle + generic inner-page theming.
   Home-only design lives in home-x.css.
   ========================================================= */

/* ---------- base body ---------- */
html.rx-dark body{background:#05060b;}

/* ---------- sticky header (dark) ---------- */
html.rx-dark .site-header{
    background:rgba(8,10,18,.55)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
}
html.rx-dark .site-header.scrolled{
    background:rgba(8,10,18,.82)!important;box-shadow:0 14px 34px -16px rgba(0,0,0,.8)!important;
}
html.rx-dark .site-header .nav-link,
html.rx-dark .navbar-expand-lg .navbar-nav a{color:#dce3f2!important;}
html.rx-dark .site-header .nav-link:hover,
html.rx-dark .navbar-expand-lg .navbar-nav a:hover{color:#7ee7ff!important;}

/* ---------- logo swap (real light asset, no filter hack) ---------- */
.navbar-brand .logo-light{display:none;}
html.rx-dark .navbar-brand .logo-default{display:none;}
html.rx-dark .navbar-brand .logo-light{display:inline-block;}

/* ---------- footer ---------- */
html.rx-dark footer{background:#070912;border-top:1px solid rgba(255,255,255,.06);}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;
    background:linear-gradient(90deg,#00aeef,#0782b4);box-shadow:0 0 12px rgba(0,174,239,.7);
    transition:width .1s linear;
}
html.rx-dark .scroll-progress{background:linear-gradient(90deg,#22d3ee,#8b5cf6,#ec4899);box-shadow:0 0 16px rgba(139,92,246,.8);}

/* ---------- light/dark SWITCH (header on desktop, floating on mobile) ---------- */
.rx-switch{display:inline-flex;align-items:center;border:0;background:none;padding:0;margin:0;cursor:pointer;
    vertical-align:middle;-webkit-tap-highlight-color:transparent;}
.rx-switch-track{position:relative;display:inline-flex;align-items:center;justify-content:space-between;
    width:62px;height:30px;border-radius:999px;padding:0 8px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,border-color .3s;}
.rx-switch-ic{width:14px;height:14px;flex:none;position:relative;z-index:1;}
.rx-switch-ic.sun{color:#ffce5c;}
.rx-switch-ic.moon{color:#9fb2d6;}
.rx-switch-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,#5ee7ff,#8b5cf6);box-shadow:0 4px 12px rgba(0,0,0,.45);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.rx-switch[data-theme="light"] .rx-switch-thumb{transform:translateX(32px);}
.rx-switch:hover .rx-switch-track{border-color:#7ee7ff;}
.rx-switch:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px;border-radius:999px;}
html.rx-light .rx-switch-track{background:rgba(16,28,54,.06);border-color:rgba(16,28,54,.16);}
/* floating variant for small screens */
.rx-switch--float{position:fixed;left:16px;bottom:16px;z-index:2500;}
.rx-switch--float .rx-switch-track{box-shadow:0 16px 36px -16px rgba(0,0,0,.6);}
@media (min-width:1200px){.rx-switch--float{display:none;}}

/* =========================================================
   GENERIC INNER-PAGE THEMING (dark only; light = original)
   Scoped to body:not(.home) so the home design is untouched.
   ========================================================= */
html.rx-dark body:not(.home){background:#05060b;color:#e8ecf6;}
html.rx-dark body:not(.home) :is(h1,h2,h3,h4,h5,h6){color:#eef1f8;}
html.rx-dark body:not(.home) p,
html.rx-dark body:not(.home) li,
html.rx-dark body:not(.home) td,
html.rx-dark body:not(.home) .card-text{color:#9aa6bf;}
html.rx-dark body:not(.home) a:not(.btn):not(.nav-link):not(.navbar-brand):not(.rx-btn):not(.rx-post-link){color:#7dd3fc;}
html.rx-dark body:not(.home) .bg-grey-light{background:#080a12!important;}
html.rx-dark body:not(.home) .card{
    background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;
    color:#e8ecf6;border-radius:18px;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html.rx-dark body:not(.home) .card:hover{background:rgba(255,255,255,.08)!important;}
html.rx-dark body:not(.home) .form-control{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#e8ecf6;
}
html.rx-dark body:not(.home) .form-control::placeholder{color:#9aa6bf;}
html.rx-dark body:not(.home) .form-control:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.25);}
html.rx-dark body:not(.home) .btn-white{background:rgba(255,255,255,.08);color:#e8ecf6;border-color:rgba(255,255,255,.2);}
html.rx-dark body:not(.home) mark{background:#22d3ee;color:#04121a;}
html.rx-dark body:not(.home) hr{border-color:rgba(255,255,255,.12);}

/* =========================================================
   FOOTER CONTACT FORM (.cta) — themed on every page
   ========================================================= */
.cta{position:relative;overflow:hidden;}
.cta .form{border-radius:18px!important;overflow:hidden;box-shadow:0 40px 90px -45px rgba(0,0,0,.55);}
.cta .form-control{
    border-radius:12px!important;padding:14px 16px!important;margin-bottom:12px;box-shadow:none!important;
    transition:border-color .3s ease,box-shadow .3s ease,background .3s;
}
.cta textarea.form-control{min-height:120px;}
.cta .form button,.cta button[type="submit"],.cta button{
    width:100%;border-radius:14px!important;height:auto!important;padding:16px!important;
    font-weight:800;letter-spacing:.4px;text-transform:uppercase;border:0!important;color:#04121a!important;
    background:linear-gradient(120deg,#5ee7ff,#22d3ee 42%,#7c9bff)!important;
    box-shadow:0 18px 40px -16px rgba(34,211,238,.7);transition:transform .3s ease,box-shadow .3s ease;
}
.cta .form button:hover,.cta button[type="submit"]:hover,.cta button:hover{transform:translateY(-2px);box-shadow:0 26px 50px -18px rgba(34,211,238,.9);}

html.rx-dark .cta.bg-primary{background:linear-gradient(120deg,#0b2a4a,#241652 55%,#3a1240)!important;}
html.rx-dark .cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(45% 70% at 85% 0,rgba(34,211,238,.28),transparent 55%),
    radial-gradient(45% 70% at 10% 100%,rgba(236,72,153,.22),transparent 55%);}
html.rx-dark .cta>*{position:relative;z-index:1;}
html.rx-dark .cta :is(h2,h3,p,label){color:#eef1f8!important;}
html.rx-dark .cta .form{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);}
html.rx-dark .cta .form-control{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.16)!important;color:#eef1f8!important;}
html.rx-dark .cta ::placeholder{color:#9aa6bf!important;}
html.rx-dark .cta .form-control:focus{border-color:#22d3ee!important;background:rgba(255,255,255,.07)!important;box-shadow:0 0 0 3px rgba(34,211,238,.25)!important;}

html.rx-light .cta.bg-primary{background:linear-gradient(120deg,#e9f6ff,#efeaff 55%,#fdeef6)!important;}
html.rx-light .cta :is(h2,h3,p,label){color:#0e1626!important;}
html.rx-light .cta .form{background:rgba(255,255,255,.82)!important;border:1px solid rgba(16,28,54,.1)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
html.rx-light .cta .form-control{background:#fff!important;border:1px solid rgba(16,28,54,.14)!important;color:#0e1626!important;}
html.rx-light .cta ::placeholder{color:#7a869e!important;}
html.rx-light .cta .form-control:focus{border-color:#1bb6da!important;box-shadow:0 0 0 3px rgba(34,160,200,.2)!important;}

/* =========================================================
   INNER-PAGE DARK FIXES (cyan bands, client logos, mobile nav)
   ========================================================= */
/* flat cyan content bands -> deep prismatic in dark */
html.rx-dark body:not(.home) .bg-primary{
    background:linear-gradient(120deg,#0b2a4a,#241652 55%,#3a1240)!important;
}
html.rx-dark body:not(.home) .color-primary{color:#7ee7ff!important;}

/* client logo carousel: put logos on white chips so they stay visible */
html.rx-dark .clients .slide img,
html.rx-dark .clients .owl-carousel img{
    background:#fff;border-radius:12px;padding:14px;box-shadow:0 12px 30px -16px rgba(0,0,0,.6);
}

/* mobile expanded menu gets a legible dark panel */
@media (max-width:991.98px){
    html.rx-dark .navbar-collapse{
        background:rgba(8,10,18,.92);border:1px solid rgba(255,255,255,.08);border-radius:16px;
        padding:14px;margin-top:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    }
}

/* =========================================================
   404 PAGE (themed, self-contained — theme-x loads everywhere)
   ========================================================= */
.rx-404{min-height:62vh;display:grid;place-items:center;padding:6rem 0;}
.rx-404-card{max-width:640px;width:100%;text-align:center;padding:3.2rem 2rem;border-radius:28px;}
.rx-404-code{font-size:clamp(4.5rem,13vw,8.5rem);font-weight:900;line-height:1;letter-spacing:-4px;
    background:linear-gradient(120deg,#22d3ee,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;}
.rx-404 h1{margin:.2rem 0 .7rem;font-size:clamp(1.6rem,3vw,2.3rem);}
.rx-404 p{max-width:48ch;margin:0 auto 1.7rem;font-size:1.08rem;}
.rx-404-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.rx-404-btn{display:inline-flex;align-items:center;padding:13px 26px;border-radius:13px;font-weight:700;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;}
.rx-404-btn:hover{transform:translateY(-2px);}
.rx-404-btn.primary{color:#04121a;background:linear-gradient(120deg,#5ee7ff,#22d3ee 42%,#7c9bff);box-shadow:0 18px 40px -16px rgba(34,211,238,.7);}
.rx-404-btn.primary:hover{box-shadow:0 26px 50px -18px rgba(34,211,238,.9);color:#04121a;}
html.rx-dark .rx-404-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
html.rx-dark .rx-404-btn.ghost{color:#e8ecf6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);}
html.rx-light .rx-404-card{background:rgba(255,255,255,.72);border:1px solid rgba(16,28,54,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 70px -45px rgba(40,70,130,.3);}
html.rx-light .rx-404-btn.ghost{color:#0e1626;background:rgba(16,28,54,.05);border:1px solid rgba(16,28,54,.15);}

/* =========================================================
   ✨ GLOBAL "SEXY" UPGRADES — applies to every inner page
   (home is excluded via :not(.home); it has its own .rx design)
   ========================================================= */

/* ---- holographic accent on heading <span>s, both themes ---- */
body:not(.home) :is(h1,h2,h3,h4) span:not(.color-primary):not(.color-secondary):not(.text-white){
    background:linear-gradient(100deg,#22d3ee,#8b5cf6,#ec4899);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- page hero bands (.bg-primary) become prismatic in dark ---- */
html.rx-dark body:not(.home) .bg-primary{
    position:relative;overflow:hidden;
    background:linear-gradient(120deg,#0b2a4a,#241652 55%,#3a1240)!important;
}
html.rx-dark body:not(.home) .bg-primary::before{
    content:"";position:absolute;inset:0;pointer-events:none;background:
        radial-gradient(50% 85% at 85% 0,rgba(34,211,238,.32),transparent 55%),
        radial-gradient(50% 85% at 8% 100%,rgba(236,72,153,.26),transparent 55%);
}
html.rx-dark body:not(.home) .bg-primary > *{position:relative;z-index:1;}
html.rx-dark body:not(.home) .bg-primary :is(h1,h2,h3,p){color:#eef1f8;}

/* ---- white / grey content bands go dark ---- */
html.rx-dark body:not(.home) .bg-white{background:#0a0c16!important;}
html.rx-dark body:not(.home) .bg-grey-light{background:#07090f!important;}

/* ---- generic Bootstrap cards become glass + lift (dark) ---- */
html.rx-dark body:not(.home) .card{
    background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;
    border-radius:20px;overflow:hidden;
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:0 34px 80px -50px rgba(0,0,0,.95);
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s;
}
html.rx-dark body:not(.home) .card:hover{
    transform:translateY(-8px);border-color:rgba(34,211,238,.42)!important;
    box-shadow:0 50px 100px -42px rgba(0,0,0,1);
}
html.rx-dark body:not(.home) .card-title a{color:#7ee7ff!important;}
body:not(.home) .card-img-top{border-radius:14px;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
body:not(.home) .card:hover .card-img-top{transform:scale(1.05);}

/* subtle lift for light-mode cards too */
html.rx-light body:not(.home) .card{
    border-radius:20px;transition:transform .4s,box-shadow .4s;
    box-shadow:0 22px 55px -34px rgba(40,70,130,.28);
}
html.rx-light body:not(.home) .card:hover{transform:translateY(-6px);box-shadow:0 32px 65px -30px rgba(40,70,130,.4);}

/* ---- primary buttons get the prismatic gradient in dark ---- */
html.rx-dark .btn-primary{
    background:linear-gradient(120deg,#5ee7ff,#22d3ee 42%,#7c9bff)!important;color:#04121a!important;border:0!important;
    box-shadow:0 16px 36px -16px rgba(34,211,238,.7);transition:transform .3s,box-shadow .3s,background .3s;
}
html.rx-dark .btn-primary:hover{background:#fff!important;color:#07283a!important;transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(34,211,238,.9);}
html.rx-dark .btn-primary a{color:#04121a!important;}

/* ---- blue accent boxes (how-it-works) get a prismatic edge ---- */
html.rx-dark .b-1{border-color:#22d3ee!important;box-shadow:0 0 0 1px rgba(139,92,246,.4),0 30px 70px -40px rgba(34,120,255,.6);}
html.rx-dark .blue-background{background:linear-gradient(135deg,#22d3ee,#8b5cf6)!important;}

/* =========================================================
   ✨ SEXIER FOOTER (shared on every page)
   ========================================================= */
footer{position:relative;}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,#ec4899,transparent);opacity:.75;}
footer .navbar-brand img{filter:brightness(1.7) saturate(1.05);}      /* footer is dark in both themes */
html.rx-dark footer a:hover,html.rx-dark footer .footer-menu a:hover{color:#7ee7ff!important;}
html.rx-dark footer .border-bottom{border-color:rgba(255,255,255,.1)!important;}
footer .list-unstyled a{transition:color .25s,transform .25s;display:inline-block;}
footer .list-unstyled a:hover{transform:translateX(3px);}

/* client logo carousel — chips that lift on hover */
.clients .slide img,.clients .owl-carousel img{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.clients .slide img:hover,.clients .owl-carousel img:hover{transform:translateY(-5px);}
html.rx-dark .clients h2,html.rx-dark .cta h2{letter-spacing:-.5px;}

/* =========================================================
   ✨ FINISH — font smoothing + custom themed scrollbar
   ========================================================= */
html.rx-dark body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
html.rx-dark{scrollbar-width:thin;scrollbar-color:#3a3f63 #070912;}
html.rx-dark ::-webkit-scrollbar{width:12px;height:12px;}
html.rx-dark ::-webkit-scrollbar-track{background:#070912;}
html.rx-dark ::-webkit-scrollbar-thumb{background:linear-gradient(#22d3ee,#8b5cf6);border-radius:10px;border:3px solid #070912;}
html.rx-dark ::-webkit-scrollbar-thumb:hover{background:linear-gradient(#5ee7ff,#a78bfa);}
html.rx-light{scrollbar-width:thin;scrollbar-color:#c3cde0 #eef2fb;}
html.rx-light ::-webkit-scrollbar{width:12px;height:12px;}
html.rx-light ::-webkit-scrollbar-track{background:#eef2fb;}
html.rx-light ::-webkit-scrollbar-thumb{background:#c3cde0;border-radius:10px;border:3px solid #eef2fb;}
html.rx-light ::-webkit-scrollbar-thumb:hover{background:#aab7d0;}

/* =========================================================
   ✨ SEXIER HEADER — flag dropdown, contact CTA, nav, hairline
   ========================================================= */
/* prismatic hairline under the header */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),rgba(139,92,246,.55),transparent);}

/* nav links: gradient underline wipe on hover */
.site-header .nav-link{position:relative;}
.site-header .nav-link::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:1px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,#22d3ee,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.site-header .nav-link:hover::after{transform:scaleX(1);}

/* language switcher — trigger becomes a glass coin */
.language-switcher > button{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;padding:0!important;
    background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.22)!important;overflow:hidden;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s,border-color .3s,box-shadow .3s;
}
html.rx-light .language-switcher > button{background:rgba(16,28,54,.05)!important;border-color:rgba(16,28,54,.16)!important;}
.language-switcher > button:hover{transform:translateY(-2px);border-color:#7ee7ff!important;box-shadow:0 12px 26px -12px rgba(34,211,238,.7);}
.language-switcher > button img{width:30px!important;height:30px!important;border-radius:50%;object-fit:cover;}

/* language switcher — dropdown becomes a glass panel of flag chips */
.language-switcher .dropdown-menu{
    min-width:0!important;width:auto!important;padding:12px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.12)!important;
    background:rgba(10,12,20,.92)!important;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 34px 80px -34px rgba(0,0,0,.9)!important;margin-top:10px!important;
}
html.rx-light .language-switcher .dropdown-menu{background:rgba(255,255,255,.94)!important;border-color:rgba(16,28,54,.1)!important;box-shadow:0 30px 70px -34px rgba(40,70,130,.35)!important;}
.language-switcher .dropdown-menu .container{padding:0!important;}
.language-switcher .dropdown-menu .row{margin:0!important;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.language-switcher .dropdown-menu .col-3{width:auto!important;flex:0 0 auto!important;padding:0!important;}
.language-switcher .dropdown-menu li{list-style:none;}
.language-switcher .dropdown-item{padding:5px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:transparent!important;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;}
.language-switcher .dropdown-item:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 24px -10px rgba(34,211,238,.7);}
.language-switcher .dropdown-item img{width:36px!important;height:36px!important;border-radius:50%;object-fit:cover;display:block;
    box-shadow:0 4px 12px -4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18);}

/* kill stray link underlines in the header (the Contact button's <a> wrapper) */
.site-header a{text-decoration:none!important;}

/* Contact CTA in the header — clean gradient pill, no shouty caps/underline */
.site-header .btn-primary{
    position:relative;overflow:hidden;border-radius:999px!important;padding:9px 24px!important;
    font-weight:600!important;letter-spacing:.2px!important;text-transform:none!important;font-size:.96rem!important;line-height:1.1!important;
    background:linear-gradient(120deg,#3ddaf2,#1f97da)!important;color:#04131c!important;border:0!important;
    box-shadow:0 10px 24px -10px rgba(31,151,218,.6)!important;transition:transform .3s,box-shadow .3s;
}
.site-header .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(31,151,218,.9)!important;color:#04131c!important;}
.site-header .btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s cubic-bezier(.2,.7,.2,1);}
.site-header .btn-primary:hover::after{left:165%;}

/* mobile hamburger — glassy gradient */
.site-header .navbar-toggler{border-radius:12px!important;border:1px solid rgba(255,255,255,.18)!important;
    background:linear-gradient(120deg,#22d3ee,#8b5cf6)!important;box-shadow:0 10px 24px -12px rgba(34,211,238,.7);}

@media (prefers-reduced-motion:reduce){
    .rx-switch-thumb{transition:none;}
    .scroll-progress{transition:none;}
}