:root{
  --primary: #0F53FF;
  --secondary: #41B4E6;
  --accent: #6673D4;
    --primary-gradient: linear-gradient(135deg, #41B4E6 0%, #0F53FF 100%);
}

/* gradient text for highlighted words (e.g. the word "Confidence" in the banner) */
.text--base {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* link hover uses accent color */
a:hover, a:focus {
    color: #6673D4 !important;
}

/* button backgrounds get gradient but text remains white */
.btn-primary, .bg-primary {
    background: var(--primary-gradient) !important;
    border-color: var(--primary-gradient) !important;
    color: #fff !important;
}

/* login button in header (user login) should show plain sky-blue (secondary) background via pseudo-element,
   employer button unaffected; border stays visible and hover effect only affects bg */
.login-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #fff !important; /* match employer outline style */
    color: #fff !important;
}
.login-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient) !important; /* sky -> royal gradient */
    z-index: -1;
    transition: filter .3s;
}
/* maintain text color on hover/focus and darken background only;
   also lock border so generic btn--base hover doesn't swap it out */
.login-button:hover,
.login-button:focus {
    color: #fff !important;
    border: 1px solid #fff !important;
}
.login-button:hover::before,
.login-button:focus::before {
    filter: brightness(0.9);
}

/* home banner search job button background using pseudo-element to isolate hover */
.banner-form .btn--base {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none !important;
    color: #fff !important;
}
.banner-form .btn--base::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient) !important;
    z-index: -1;
    transition: filter .3s;
}
.banner-form .btn--base:hover,
.banner-form .btn--base:focus {
    color: #fff !important;
}
.banner-form .btn--base:hover::before,
.banner-form .btn--base:focus::before {
    filter: brightness(0.9);
}
/* About section "Learn More" button gradient (home) */
.about-right__btn .btn--base {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none !important;
    color: #fff !important;
}
.about-right__btn .btn--base::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient) !important;
    z-index: -1;
    transition: filter .3s;
}
.about-right__btn .btn--base:hover,
.about-right__btn .btn--base:focus {
    color: #fff !important;
}
.about-right__btn .btn--base:hover::before,
.about-right__btn .btn--base:focus::before {
    filter: brightness(0.9);
}
/* Recruiter section "Become a Employer" CTA button gradient */
.cta-content__btn .btn--base {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none !important;
    color: #fff !important;
}
.cta-content__btn .btn--base::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient) !important;
    z-index: -1;
    transition: filter .3s;
}
.cta-content__btn .btn--base:hover,
.cta-content__btn .btn--base:focus {
    color: #fff !important;
}
.cta-content__btn .btn--base:hover::before,
.cta-content__btn .btn--base:focus::before {
    filter: brightness(0.9);
}
/* Footer subscribe button gradient */
.subscribe-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none !important;
    color: #fff !important;
}
.subscribe-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient) !important;
    z-index: -1;
    transition: filter .3s;
}
.subscribe-btn:hover,
.subscribe-btn:focus {
    color: #fff !important;
}
.subscribe-btn:hover::before,
.subscribe-btn:focus::before {
    filter: brightness(0.9);
}
/* utility gradient background */
.site-primary-gradient {
    background: var(--primary-gradient) !important;
}

/* floating back-to-top button uses theme gradient, text stays white,
   hover darkens background only */
.scroll-top {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}
.scroll-top:hover,
.scroll-top:focus {
    color: #fff !important;
}
.scroll-top:hover {
    filter: brightness(0.9);
}