/* =============
   UPKEO – THEME (harmonisé)
   ============= */

/* =========================
   GLOBAL TOKENS (ne dépendent pas du thème)
   ========================= */
:root{
    --upk-header-offset: 40px;
    --upk-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Marque ORANGE (base) */
    --upk-orange: #FC910C;
    --upk-orange-dark: #cf4e18;

    /* Violet (bordure light) */
    --upk-violet-top: #a79bff;
    --upk-violet-bottom: #6259CA;

    --pro-gold-light: #f9e5a8;
    --pro-gold: #d3a64f;
    --pro-gold-dark: #a7702a;

    /* Contour gradient (sera override en light) */
    --upk-grad-border: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);

    /* Épaisseur du contour + rayon */
    --upk-gborder-w: 2px;
    --upk-gborder-r: 1.25rem;
}

/* Fix ancres : place réservée sous header fixed-top */
html{ scroll-padding-top: var(--upk-header-offset); }
section[id]{ scroll-margin-top: var(--upk-header-offset); }

/* =========================
   THEME VARIABLES — DARK
   ========================= */
html[data-bs-theme="dark"]{
    --upk-base-1: #26273a;
    --upk-base-2: #2e2f47;
    --upk-base-3: #343658;

    --upk-accent: #7c6cff;
    --upk-accent-2: #a79bff;
    --upk-accent-3: #a79bff;

    --upk-ink: #F5F6FF;
    --upk-ink-2: rgba(245, 246, 255, .78);
    --upk-ink-3: rgba(245, 246, 255, .58);

    --upk-border: rgba(255, 255, 255, .10);
    --upk-shadow: 0 18px 45px rgba(0, 0, 0, .45);

    --upk-nav-link: rgba(245, 246, 255, .78);
    --upk-nav-link-hover: #ffffff;
    --upk-nav-link-active: var(--upk-accent-2);

    --upk-grad-body:
            radial-gradient(circle at 18% 0%, rgba(124, 108, 255, .18) 0, transparent 58%),
            radial-gradient(circle at 100% 10%, rgba(52, 54, 88, .55) 0, transparent 55%),
            radial-gradient(circle at 0% 100%, rgba(46, 47, 71, .65) 0, transparent 55%);

    --upk-grad-navbar: linear-gradient(90deg, rgba(35, 36, 54, .92), rgba(46, 47, 71, .92));

    --upk-grad-brand: linear-gradient(0deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);
    --upk-grad-badge: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);

    --upk-grad-btn: linear-gradient(135deg, var(--upk-orange), rgba(252,145,12,.86));
    --upk-grad-btn-hover: linear-gradient(135deg, rgba(252,145,12,.95), var(--upk-orange-dark));

    --upk-soft-bg: rgba(124, 108, 255, .16);
    --upk-soft-border: rgba(124, 108, 255, .40);

    --upk-grad-icon: linear-gradient(135deg, rgba(124,108,255,.95), rgba(167,155,255,.75));
    --upk-grad-glass:
            radial-gradient(circle at 0 0, rgba(255, 255, 255, .06), transparent 55%),
            linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .22));

    --upk-grad-border: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);
}

/* =========================
   THEME VARIABLES — LIGHT
   ========================= */
html[data-bs-theme="light"]{
    --upk-base-1: #F4F6FB;
    --upk-base-2: #FFFFFF;
    --upk-base-3: #F8FAFF;

    --upk-accent: #6259CA;
    --upk-accent-2: #4f47b8;
    --upk-accent-3: #3b31b8;

    --upk-ink: #111319;
    --upk-ink-2: rgba(17, 19, 25, .78);
    --upk-ink-3: rgba(17, 19, 25, .58);

    --upk-border: rgba(17, 19, 25, .12);
    --upk-shadow: 0 18px 45px rgba(17, 19, 25, .12);

    --upk-nav-link: rgba(17, 19, 25, .78);
    --upk-nav-link-hover: #111319;
    --upk-nav-link-active: var(--upk-accent-2);

    --upk-grad-body:
            radial-gradient(circle at 18% 0%, rgba(98, 89, 202, .12) 0, transparent 58%),
            radial-gradient(circle at 100% 10%, rgba(252, 145, 12, .10) 0, transparent 55%);

    --upk-grad-navbar: linear-gradient(90deg, rgba(255,255,255,.92), rgba(244,246,251,.92));

    --upk-grad-brand: linear-gradient(180deg, var(--upk-accent) 0%, var(--upk-accent-3) 100%);
    --upk-grad-badge: linear-gradient(180deg, var(--upk-accent) 0%, var(--upk-accent-3) 100%);

    --upk-grad-btn: linear-gradient(135deg, var(--upk-orange), rgba(252,145,12,.92));
    --upk-grad-btn-hover: linear-gradient(135deg, var(--upk-orange-dark), var(--upk-orange));

    --upk-soft-bg: rgba(98, 89, 202, .10);
    --upk-soft-border: rgba(98, 89, 202, .32);

    --upk-grad-icon: linear-gradient(135deg, rgba(98,89,202,.85), rgba(252,145,12,.70));
    --upk-grad-glass:
            radial-gradient(circle at 0 0, rgba(98, 89, 202, .08), transparent 55%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86));

    --upk-grad-border: linear-gradient(180deg, var(--upk-violet-top) 0%, var(--upk-violet-bottom) 100%);
}

/* =========================
   BASE
   ========================= */
* { scroll-behavior: smooth; }
body{
    font-family: var(--upk-font);
    color: var(--upk-ink);
    background: var(--upk-grad-body), var(--upk-base-1);
    background-size: 130% 130%, auto;
}
.motion-ready body{
    overflow-x: clip;
    animation: upkBodyDrift 26s ease-in-out infinite alternate;
}
.muted{ color: var(--upk-ink-2); }
.section-padding{ padding-top: 5rem; padding-bottom: 5rem; }
#hero{
    min-height: 100vh;
    display:flex;
    align-items:center;
    position: relative;
    overflow: clip;
}
#hero::before,
#hero::after{
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
    opacity: .6;
    z-index: 0;
}
#hero::before{
    top: 12%;
    right: min(8vw, 64px);
    width: min(34vw, 360px);
    height: min(34vw, 360px);
    background: radial-gradient(circle, rgba(252,145,12,.18) 0%, rgba(252,145,12,.05) 45%, transparent 72%);
}
#hero::after{
    left: -8%;
    bottom: 8%;
    width: min(28vw, 300px);
    height: min(28vw, 300px);
    background: radial-gradient(circle, rgba(124,108,255,.16) 0%, rgba(124,108,255,.05) 48%, transparent 74%);
}
#hero > .container{
    position: relative;
    z-index: 1;
}

/* =========================
   MOTION
   ========================= */
@keyframes upkBodyDrift{
    0%{ background-position: 0% 0%, center; }
    100%{ background-position: 100% 100%, center; }
}
@keyframes upkHeroGlow{
    0%{ transform: translate3d(0, 0, 0) scale(1); opacity: .48; }
    100%{ transform: translate3d(18px, -10px, 0) scale(1.08); opacity: .74; }
}
@keyframes upkHeroGlowAlt{
    0%{ transform: translate3d(0, 0, 0) scale(1); opacity: .38; }
    100%{ transform: translate3d(-14px, 12px, 0) scale(1.05); opacity: .58; }
}
@keyframes upkFloatCard{
    0%{ transform: translate3d(0, 0, 0); }
    50%{ transform: translate3d(0, -7px, 0); }
    100%{ transform: translate3d(0, 0, 0); }
}
@keyframes upkCtaGlow{
    0%{ box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 rgba(252,145,12,0); }
    100%{ box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 24px rgba(252,145,12,.22); }
}
.motion-reveal{
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .72s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.motion-reveal.is-visible{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.motion-reveal[data-motion="fade"]{
    transform: none;
}
.motion-reveal[data-motion="fade"].is-visible{
    transform: none;
}
.motion-reveal[data-motion="scale"]{
    transform: translate3d(0, 28px, 0) scale(.985);
}
.motion-reveal[data-motion="scale"].is-visible{
    transform: translate3d(0, 0, 0) scale(1);
}
.motion-reveal[data-motion-delay="1"]{ transition-delay: .06s; }
.motion-reveal[data-motion-delay="2"]{ transition-delay: .12s; }
.motion-reveal[data-motion-delay="3"]{ transition-delay: .18s; }
.motion-reveal[data-motion-delay="4"]{ transition-delay: .24s; }
.motion-reveal[data-motion-delay="5"]{ transition-delay: .30s; }
.motion-reveal[data-motion-delay="6"]{ transition-delay: .36s; }

@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior: auto; }
    .motion-ready body,
    #hero::before,
    #hero::after,
    #hero .glass-card,
    #hero .btn-upkeo{
        animation: none !important;
    }
    .motion-reveal,
    .motion-reveal.is-visible,
    .motion-reveal[data-motion="scale"],
    .motion-reveal[data-motion="scale"].is-visible{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================
   FAQ + SCREENSHOTS
   ========================= */
.upk-faq-block{
    margin-top: 1.35rem;
    padding-top: .2rem;
}
.upk-faq-head{ margin-bottom: .85rem; }
.upk-faq-icon{ display: none; }
.upk-faq-card{
    padding: .8rem .95rem;
    border-left: 2px solid var(--upk-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.upk-faq-question{
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--upk-ink-2);
}
.upk-faq-answer{
    line-height: 1.55;
    color: var(--upk-ink-3);
}
.upk-shot-card{
    overflow: hidden;
    border: 1px solid var(--upk-border);
    border-radius: 1.35rem;
    background: var(--upk-base-2);
    box-shadow: var(--upk-shadow);
}
.upk-shot-media{
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        var(--upk-base-3);
    border-bottom: 1px solid var(--upk-border);
}
.upk-shot-media img{
    display: block;
    width: 100%;
    height: auto;
}
.upk-shot-copy{
    padding: 1.15rem 1.15rem 1.2rem;
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
    background: var(--upk-grad-navbar);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--upk-border);
}
.navbar .nav-link{
    color: var(--upk-nav-link) !important;
    font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color: var(--upk-nav-link-hover) !important;
}
.navbar .nav-link.active{
    color: var(--upk-nav-link-active) !important;
}
.navbar .nav-link i{ opacity: .92; }

.upk-navbar-logo{
    width: 140px;
    display: block;
    margin-bottom: 10px;
}

/* =========================
   GRADIENT BORDER
   ========================= */
.upk-gborder{
    position: relative;
    border-radius: var(--upk-gborder-r);
    z-index: 0;
}
.upk-gborder::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding: var(--upk-gborder-w);
    background: var(--upk-grad-border);
    z-index:-1;

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

    filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
html[data-bs-theme="dark"] .upk-gborder::before{
    filter: drop-shadow(0 10px 22px rgba(252,145,12,.18));
}
html[data-bs-theme="light"] .upk-gborder::before{
    filter: drop-shadow(0 10px 22px rgba(98,89,202,.16));
}

/* =========================
   BRAND / BADGES
   ========================= */
.brand-gradient{
    background: var(--upk-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
html[data-bs-theme="light"] .brand-gradient{
    text-shadow: 0 6px 18px rgba(17,19,25,.10);
}

.badge-upkeo{
    background: var(--upk-grad-badge);
    color: #e9f0ff;
    font-weight: 800;
    box-shadow: rgba(0,0,0,.35) 0 6px 10px -6px inset;
    border: var(--upk-soft-bg) 2px solid;
}
html[data-bs-theme="light"] .badge-upkeo{
    color: #fff;
    box-shadow: rgba(0,0,0,.08) 0 6px 10px -6px inset;
}

.badge-upkeo.badge-outline{
    background: rgba(0,0,0,.12);
    color: var(--upk-ink);
    border: 0 !important;
    position: relative;
    z-index: 0;
    border-radius: 999px;
    padding: .35rem .6rem;
}
html[data-bs-theme="light"] .badge-upkeo.badge-outline{
    background: rgba(17,19,25,.04);
}
.badge-upkeo.badge-outline::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding: 1px;
    background: var(--upk-grad-border);
    z-index:-1;

    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* =========================
   BUTTONS
   ========================= */
.btn-upkeo{
    color: #111319 !important;
    border: 0 !important;
    background-image: var(--upk-grad-btn) !important;
    background-color: transparent !important;
    background-size: 200% 200%;
    background-position: 0% 50%;
    transition: background-position .25s ease, transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
#hero .btn-upkeo{
    position: relative;
    animation: upkCtaGlow 2.6s ease-in-out infinite alternate;
}
.btn-upkeo:hover,
.btn-upkeo:focus{
    background-image: var(--upk-grad-btn-hover) !important;
    background-position: 100% 50%;
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.btn-upkeo:active{
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-bs-theme="dark"] .btn-upkeo,
html[data-bs-theme="dark"] .btn-upkeo:hover,
html[data-bs-theme="dark"] .btn-upkeo:focus,
html[data-bs-theme="dark"] .btn-upkeo:active{
    color: #ffffff !important;
}

.btn-upkeo-soft{
    color: var(--upk-ink) !important;
    background: var(--upk-soft-bg) !important;
    border: 1px solid var(--upk-soft-border) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-bs-theme="dark"] .btn-upkeo-soft:hover,
html[data-bs-theme="dark"] .btn-upkeo-soft:focus{
    background: rgba(124,108,255,.22) !important;
    border-color: rgba(124,108,255,.55) !important;
}
html[data-bs-theme="light"] .btn-upkeo-soft:hover,
html[data-bs-theme="light"] .btn-upkeo-soft:focus{
    background: rgba(98,89,202,.16) !important;
    border-color: rgba(98,89,202,.45) !important;
}

.theme-toggle{
    border: 1px solid var(--upk-border);
    background: rgba(255,255,255,.06);
    color: var(--upk-ink);
}
html[data-bs-theme="light"] .theme-toggle{
    background: rgba(17,19,25,.04);
}

/* =========================
   CARDS
   ========================= */
.glass-card{
    background: var(--upk-grad-glass);
    border: 0 !important;
    box-shadow: var(--upk-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}
#hero .glass-card{
    animation: upkFloatCard 6.8s ease-in-out infinite;
}

.feature-card{
    background: linear-gradient(145deg, rgba(52, 54, 88, .92), rgba(46, 47, 71, .92));
    border-radius: 1.25rem;
    border: 0 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .35);
    height: 100%;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
html[data-bs-theme="light"] .feature-card{
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    box-shadow: 0 14px 35px rgba(17, 19, 25, .10);
}
.feature-card .icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--upk-grad-icon);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.feature-card .icon i{
    color:#111319;
    font-size:1.35rem;
}

.module-card{
    background:
            radial-gradient(circle at top left, rgba(0, 16, 236, 0.15), transparent 55%),
            radial-gradient(circle at top right, rgba(124,108,255,.14), transparent 55%),
            rgba(46,47,71,.78);
    border: 0 !important;
    border-radius: 1.2rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
html[data-bs-theme="light"] .module-card{
    background:
            radial-gradient(circle at top left, rgba(252,145,12,.08), transparent 55%),
            radial-gradient(circle at top right, rgba(98,89,202,.10), transparent 55%),
            rgba(255,255,255,.98);
}
.module-card .badge{ font-size:.68rem; }

.upk-home-modules .module-card{
    position: relative;
    overflow: clip;
    transition:
        transform .16s ease-out,
        box-shadow .16s ease-out,
        background .16s ease-out,
        filter .16s ease-out;
}
.upk-home-modules .module-card::before{
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.82), rgba(210,218,255,.72), rgba(255,255,255,0));
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .14s ease-out, transform .14s ease-out;
}

/* =========================
   USECASES / STEPS
   ========================= */
.usecase-step{
    border: 1px solid var(--upk-border);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
html[data-bs-theme="light"] .usecase-step{
    background: rgba(17,19,25,.02);
}
.usecase-bullet{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--upk-grad-icon);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 46px;
}
.usecase-bullet i{
    color: #111319;
    font-size: 1.25rem;
}
.usecase-meta{
    font-size: .85rem;
    color: var(--upk-ink-3);
}
.usecase-modules .badge{
    border: 1px solid var(--upk-border);
    background: rgba(255,255,255,.05);
    color: var(--upk-ink);
}
html[data-bs-theme="light"] .usecase-modules .badge{
    background: rgba(17,19,25,.03);
}

@media (hover: hover) and (pointer: fine){
    .glass-card:hover,
    .feature-card:hover,
    .module-card:hover,
    .usecase-step:hover{
        transform: translateY(-4px);
    }
    html[data-bs-theme="dark"] .glass-card:hover{
        box-shadow: 0 22px 48px rgba(0,0,0,.42);
    }
    html[data-bs-theme="dark"] .feature-card:hover{
        box-shadow: 0 18px 40px rgba(0,0,0,.40);
    }
    html[data-bs-theme="dark"] .module-card:hover{
        box-shadow: 0 16px 34px rgba(0,0,0,.30);
    }
    html[data-bs-theme="dark"] .usecase-step:hover{
        box-shadow: 0 16px 34px rgba(0,0,0,.28);
        border-color: rgba(255,255,255,.16);
    }
    html[data-bs-theme="light"] .glass-card:hover,
    html[data-bs-theme="light"] .feature-card:hover,
    html[data-bs-theme="light"] .module-card:hover,
    html[data-bs-theme="light"] .usecase-step:hover{
        box-shadow: 0 18px 40px rgba(17,19,25,.12);
    }
    .upk-home-modules .module-card:hover{
        transform: translateY(-5px) scale(1.012);
        filter: saturate(1.04);
    }
    .upk-home-modules .module-card:hover::before{
        opacity: 1;
        transform: translateY(0);
    }
    html[data-bs-theme="dark"] .upk-home-modules .module-card:hover{
        background:
            radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 50%),
            radial-gradient(circle at top right, rgba(210,218,255,.10), transparent 52%),
            rgba(52,54,83,.90);
        box-shadow: 0 18px 36px rgba(0,0,0,.34);
    }
    html[data-bs-theme="light"] .upk-home-modules .module-card:hover{
        background:
            radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 52%),
            radial-gradient(circle at top right, rgba(210,218,255,.18), transparent 54%),
            rgba(255,255,255,.995);
        box-shadow: 0 16px 34px rgba(17,19,25,.14);
    }
}

.motion-ready #hero::before{
    animation: upkHeroGlow 9s ease-in-out infinite alternate;
}
.motion-ready #hero::after{
    animation: upkHeroGlowAlt 11s ease-in-out infinite alternate;
}

/* =========================
   FORMS (inclut select/options)
   ========================= */
.upk-required{
    color: var(--upk-orange);
    font-weight: 700;
}

.form-control,
.form-select,
textarea.form-control{
    background-color: rgba(0,0,0,.16);
    border-color: rgba(255,255,255,.14);
    color: var(--upk-ink);
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] textarea.form-control{
    background-color: rgba(255,255,255,.92);
    border-color: rgba(17,19,25,.14);
    color: var(--upk-ink);
    box-shadow: 0 10px 24px rgba(17,19,25,.06);
}
html[data-bs-theme="light"] .form-control::placeholder,
html[data-bs-theme="light"] textarea.form-control::placeholder{
    color: rgba(17,19,25,.45);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    border-color: var(--upk-orange);
    box-shadow: 0 0 0 .25rem rgba(252,145,12,.20);
}

/* Checkbox/radio */
.form-check-input{
    border-color: rgba(124,108,255,.55) !important;
    background-color: rgba(0,0,0,.12);
}
html[data-bs-theme="light"] .form-check-input{
    border-color: rgba(98,89,202,.45) !important;
    background-color: rgba(17,19,25,.02);
}
.form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgba(124,108,255,.18);
    border-color: rgba(124,108,255,.75) !important;
}
html[data-bs-theme="light"] .form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgba(98,89,202,.16);
    border-color: rgba(98,89,202,.65) !important;
}
.form-check-input:checked{
    background-color: var(--upk-accent) !important;
    border-color: var(--upk-accent) !important;
}

/* Honeypot */
.hp-field{
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
}

/* Select/options */
html[data-bs-theme="dark"] select.form-select,
html[data-bs-theme="dark"] .form-select{ color-scheme: dark; }
html[data-bs-theme="dark"] select.form-select option,
html[data-bs-theme="dark"] .form-select option{
    background-color: rgba(10, 11, 18, .98);
    color: var(--upk-ink);
}
html[data-bs-theme="dark"] select.form-select optgroup,
html[data-bs-theme="dark"] .form-select optgroup{
    background-color: rgba(10, 11, 18, .98);
    color: var(--upk-ink-2);
}
html[data-bs-theme="light"] select.form-select,
html[data-bs-theme="light"] .form-select{ color-scheme: light; }
html[data-bs-theme="light"] select.form-select option,
html[data-bs-theme="light"] .form-select option{
    background-color: #ffffff;
    color: var(--upk-ink);
}

/* =========================
   FOOTER
   ========================= */
.upk-site-footer{
    margin-top: 4rem !important;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--upk-border);
    background: var(--upk-grad-navbar);
    backdrop-filter: blur(12px);
    box-shadow: 0 -14px 40px rgba(0,0,0,.18);
}
html[data-bs-theme="light"] .upk-site-footer{
    background: var(--upk-grad-navbar);
    border-top-color: var(--upk-border);
}
.upk-site-footer-inner{
    position: relative;
    padding-top: .65rem;
}
.upk-site-footer-title{
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin-bottom: .55rem;
}
html[data-bs-theme="light"] .upk-site-footer-title{
    color: #7c5d28;
}
.upk-site-footer-label{
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.56);
    margin-bottom: .55rem;
}
html[data-bs-theme="light"] .upk-site-footer-label{
    color: #8d6d39;
}
.upk-site-footer-lead{
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: .45rem;
}
.upk-site-footer-text{
    color: rgba(255,255,255,.82);
    font-size: .98rem;
    line-height: 1.65;
}
html[data-bs-theme="light"] .upk-site-footer-lead{
    color: #2c2216;
}
html[data-bs-theme="light"] .upk-site-footer-text{
    color: #594730;
}
.upk-footer-link{
    text-decoration: none;
    margin-left: 0;
}
a.text-upkeo{ color: var(--upk-orange); text-decoration:none; }
a.text-upkeo:hover{ color: var(--upk-orange-dark); }

/* Pastille or */
.bg-gold-pill {
    background: linear-gradient(135deg, var(--pro-gold-dark), var(--pro-gold-light));
    color: #111319;
    padding: .5em .8em;
}