/* ==========================================================================
   DROPMATCH PREMIUM THEME
   PART 1 — RESET • VARIABLES • NAVBAR • HERO
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root{

    --font-main:'Inter',sans-serif;
    --font-display:'Space Grotesk',sans-serif;

    /* NEW BACKGROUND SYSTEM */
    --bg:#e4f2ff;
    --bg2:#dbeafe;

    --navy:#0a0a29;
    --navy-light:#11113d;

    --card:rgba(255,255,255,.75);

    --text:#ffffff;
    --text-light:#dbeafe;
    --text-muted:#94a3b8;


    /* BRAND COLORS */
    --blue:#007BFF;
    --blue-dark:#0056b3;
    --purple:#6366f1;
    --cyan:#06b6d4;
    --green:#10b981;


    --gradient:
    linear-gradient(
        135deg,
        #007BFF 0%,
        #6366f1 100%
    );


    --gradient-brands:
    linear-gradient(
        135deg,
        #06b6d4 0%,
        #10b981 100%
    );


    --glass:
    rgba(255,255,255,.72);


    --border:
    rgba(10,10,41,.12);


    --shadow:
    0 25px 60px rgba(10,10,41,.18);


    --radius:18px;


    --transition:
    .35s cubic-bezier(.16,1,.3,1);

}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-main);

    background:var(--bg);

    color:var(--text);

    line-height:1.65;

    overflow-x:hidden;

    min-height:100vh;

    text-align: center;

}

/* background blobs */

body::before{

    content:"";

    position:fixed;

    width:700px;
    height:700px;

    top:-200px;
    right:-200px;

    background:
    radial-gradient(circle,
    rgba(168,85,247,.18),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:650px;
    height:650px;

    bottom:-250px;
    left:-250px;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.16),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

    z-index:-2;

}

a{

    color:inherit;
    text-decoration:none;

    transition:.3s;

}

img{

    display:block;
    max-width:100%;

}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#030712;

}

::-webkit-scrollbar-thumb{

    background:#1e293b;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#334155;

}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4{

    font-family:var(--font-display);

    line-height:1.05;

    letter-spacing:-.03em;

    text-align: center;

}

p{

    color:var(--text-light);
    text-align: center;

}

/* ==========================================================================
   HEADER
   ========================================================================== */

header{

    position:fixed;

    top:24px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    max-width:1250px;

    padding:16px 30px;

    background: rgba(10,10,41,.92);

    backdrop-filter:blur(18px);

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

    border:1px solid var(--border);

    border-radius:22px;

    box-shadow:var(--shadow);

    z-index:1000;

    transition:.35s;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    height:52px;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

}

.nav-menu li a{

    color:var(--text-muted);

    font-weight:500;

    position:relative;

}

.nav-menu li a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gradient);

    transition:.35s;

}

.nav-menu li:hover a{

    color:white;

}

.nav-menu li:hover a::after{

    width:100%;

}

/* buttons */

.btn,
.login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.btn{

    background:var(--gradient);

    color:white;

    box-shadow:
    0 12px 30px
    rgba(168,85,247,.25);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 18px 40px
    rgba(168,85,247,.35);

}

.login{

    background:rgba(255,255,255,.03);

    border:1px solid var(--border);

    color:white;

}

.login:hover{

    background:rgba(255,255,255,.08);

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero-promoters,
.hero-brands{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    min-height:100vh;

    overflow:hidden;

    padding:140px 24px 100px;

}

/* overlay */

.hero-promoters::before,
.hero-brands::before{

    content:"";

    position:absolute;

    inset:0;

    background:
linear-gradient(
rgba(10,10,41,.55),
rgba(10,10,41,.75)
);

    z-index:1;

}

/* subtle grid */

.hero-promoters::after,
.hero-brands::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:50px 50px;

    opacity:.25;

    z-index:1;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.2s;

}

.hero-slide.active{

    opacity:1;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}

.hero-overlay{

    position:relative;

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-promoters h1,
.hero-brands h1{

    font-size:clamp(3rem,6vw,5.3rem);

    max-width:950px;

    margin-bottom:26px;

    line-height:1;

}

.hero-promoters p,
.hero-brands p{

    max-width:760px;

    font-size:1.2rem;

    color:var(--text-light);

    margin-bottom:55px;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:999px;

    background:var(--gradient);

    color:white;

    font-weight:700;

    letter-spacing:.02em;

    box-shadow:
    0 15px 35px
    rgba(168,85,247,.28);

    transition:.35s;

}

.cta-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 50px
    rgba(168,85,247,.42);

}

/* hero fade */

.hero-overlay>*{

    animation:fadeUp .9s ease both;

}

.hero-overlay>*:nth-child(2){

    animation-delay:.15s;

}

.hero-overlay>*:nth-child(3){

    animation-delay:.3s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

.about{

    position:relative;

    padding:140px 8%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #09111f 100%
    );

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-300px;
    right:-200px;

    background:
    radial-gradient(circle,
    rgba(168,85,247,.10),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

.about h2{

    position:relative;

    text-align:center;

    font-size:clamp(2.5rem,5vw,4rem);

    margin-bottom:70px;

}

.about-content{

    position:relative;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

}

.about-card{

    position:relative;

    overflow:hidden;

    background:
    rgba(15,23,42,.55);

    backdrop-filter:blur(18px);

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

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

    border-radius:22px;

    padding:34px;

    transition:all .35s cubic-bezier(.16,1,.3,1);

    box-shadow:
    0 20px 40px rgba(0,0,0,.28);

}

.about-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    700px circle at var(--x,0px) var(--y,0px),
    rgba(255,255,255,.05),
    transparent 45%);

    pointer-events:none;

}

.about-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(168,85,247,.4);

    box-shadow:
    0 25px 60px rgba(168,85,247,.18);

}

.about-card img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:28px;

}

.about-card h3{

    font-size:1.6rem;

    margin-bottom:16px;

    color:white;

}

.about-card p{

    color:#cbd5e1;

    font-size:1rem;

    line-height:1.8;

}

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing{

    position:relative;

    padding:140px 8%;

    background:#050816;

    overflow:hidden;

}

.pricing::before{

    content:"";

    position:absolute;

    width:800px;
    height:800px;

    left:-300px;

    bottom:-300px;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.12),
    transparent 70%);

    filter:blur(120px);

}

.pricing h2{

    position:relative;

    text-align:center;

    font-size:clamp(2.6rem,5vw,4rem);

    margin-bottom:80px;

}

.pricing-card{

    position:relative;

    overflow:hidden;

    max-width:520px;

    margin:auto;

    padding:55px 45px;

    border-radius:24px;

    background:

    rgba(15,23,42,.55);

    backdrop-filter:blur(18px);

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

    border:

    1px solid rgba(255,255,255,.12);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

    transition:

    all .35s cubic-bezier(.16,1,.3,1);

}

.pricing-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    650px circle at var(--x,0px) var(--y,0px),

    rgba(255,255,255,.05),

    transparent 45%);

    pointer-events:none;

}

.pricing-card:hover{

    transform:

    translateY(-12px);

    border-color:

    rgba(168,85,247,.45);

    box-shadow:

    0 30px 70px rgba(168,85,247,.22);

}

.pricing-card h3{

    font-size:2rem;

    margin-bottom:16px;

}

.pricing-card p{

    color:#cbd5e1;

    margin-bottom:32px;

}

.price{

    display:block;

    font-family:"Space Grotesk",sans-serif;

    font-size:4rem;

    font-weight:700;

    line-height:1;

    background:

    linear-gradient(

    135deg,

    #60a5fa,

    #a855f7);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    margin-bottom:35px;

}

.signup-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:18px;

    border-radius:16px;

    background:

    linear-gradient(

    135deg,

    #3b82f6,

    #8b5cf6);

    color:white;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(168,85,247,.30);

}

.signup-btn:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 22px 50px rgba(168,85,247,.40);

}

/* ==========================================================================
   AUDIENCE SWITCH
   ========================================================================== */

.audience-switch{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    padding:8px;

    border-radius:999px;

    background:

    rgba(15,23,42,.65);

    backdrop-filter:blur(18px);

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

    border:

    1px solid rgba(255,255,255,.08);

    box-shadow:

    0 15px 40px rgba(0,0,0,.4);

    z-index:999;

}

.audience-switch a{

    padding:14px 28px;

    border-radius:999px;

    color:#cbd5e1;

    font-weight:600;

    transition:.35s;

}

.audience-switch a:hover{

    color:white;

    background:

    rgba(255,255,255,.05);

}

.audience-switch .active{

    background:

    linear-gradient(

    135deg,

    #3b82f6,

    #8b5cf6);

    color:white;

    box-shadow:

    0 8px 25px rgba(168,85,247,.35);

}

/* ==========================================================================
   PREMIUM CARD MOUSE GLOW
   ========================================================================== */

.about-card,
.pricing-card{

    --x:50%;
    --y:50%;

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {

    position: relative;

    background:
    linear-gradient(
        180deg,
        #040612 0%,
        #02040b 100%
    );

    padding: 120px 8% 60px;

    overflow: hidden;

}

footer::before {

    content: "";

    position: absolute;

    width: 1000px;
    height: 600px;

    left: 50%;
    bottom: -400px;

    transform: translateX(-50%);

    background:
    radial-gradient(
        circle,
        rgba(168,85,247,.12),
        transparent 70%
    );

    filter: blur(160px);

    pointer-events: none;

}

.footer-grid {

    position: relative;

    display: grid;

    grid-template-columns:
    1.5fr 1fr 1fr 1fr;

    gap: 60px;

    margin-bottom: 80px;

}

.footer h3 {

    font-size: 1.1rem;

    margin-bottom: 22px;

    color: white;

}

.footer p {

    color: #94a3b8;

    line-height: 1.8;

}

.footer ul {

    list-style: none;

}

.footer ul li {

    margin-bottom: 12px;

}

.footer ul li a {

    color: #94a3b8;

    transition: .3s;

}

.footer ul li a:hover {

    color: white;

    padding-left: 4px;

}

.footer-bottom {

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

    padding-top: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}

.footer-bottom p {

    color: #64748b;

    font-size: .95rem;

}

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

@keyframes float {

    0% {

        transform:
        translateY(0px);

    }

    50% {

        transform:
        translateY(-12px);

    }

    100% {

        transform:
        translateY(0px);

    }

}

.about-card:nth-child(1) {

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

}

.about-card:nth-child(2) {

    animation:
    float 7s ease-in-out infinite;

}

.about-card:nth-child(3) {

    animation:
    float 8s ease-in-out infinite;

}

/* ==========================================================================
   GLASS HOVER EFFECT
   ========================================================================== */

.about-card,
.pricing-card {

    position: relative;

}

.about-card::after,
.pricing-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.06),
        transparent 50%
    );

    opacity: 0;

    transition: .35s;

    pointer-events: none;

}

.about-card:hover::after,
.pricing-card:hover::after {

    opacity: 1;

}

/* ==========================================================================
   PREMIUM LOGO
   ========================================================================== */

.logo img {

    transition:
    transform .35s ease,
    filter .35s ease;

    filter:
    drop-shadow(
        0 0 15px rgba(168,85,247,.2)
    );

}

.logo img:hover {

    transform:
    scale(1.05);

    filter:
    drop-shadow(
        0 0 25px rgba(168,85,247,.4)
    );

}

/* ==========================================================================
   CTA IMPROVEMENTS
   ========================================================================== */

.cta-btn {

    position: relative;

    overflow: hidden;

}

.cta-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );

    transition: .7s;

}

.cta-btn:hover::before {

    left: 100%;

}

/* ==========================================================================
   HERO RESPONSIVE IMPROVEMENTS
   ========================================================================== */

@media (max-width: 1200px){

    .hero-promoters h1,
    .hero-brands h1{

        max-width:850px;

    }

}

@media (max-width: 992px){

    .hero-promoters,
    .hero-brands{

        padding:
        160px 25px
        90px;

    }

    .hero-promoters h1,
    .hero-brands h1{

        font-size:
        clamp(
        2.8rem,
        7vw,
        4.5rem);

    }

    .hero-promoters p,
    .hero-brands p{

        font-size:1.1rem;

        max-width:650px;

    }

}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 768px){

    header{

        padding:18px 20px;

        width:95%;

    }

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    .nav-menu{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .logo img{

        height:42px;

    }

    .hero-promoters,
    .hero-brands{

        min-height:100svh;

    }

    .hero-promoters h1,
    .hero-brands h1{

        font-size:
        clamp(
        2.4rem,
        9vw,
        4rem);

    }

    .hero-promoters p,
    .hero-brands p{

        font-size:1rem;

        margin-bottom:40px;

    }

    .cta-btn{

        width:100%;

        max-width:340px;

    }

    .about{

        padding:100px 24px;

    }

    .pricing{

        padding:100px 24px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}

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

@media (max-width: 480px){

    .hero-promoters h1,
    .hero-brands h1{

        font-size:2.2rem;

    }

    .hero-promoters p,
    .hero-brands p{

        font-size:.95rem;

    }

    .about-card{

        padding:26px;

    }

    .pricing-card{

        padding:35px 25px;

    }

    .price{

        font-size:3rem;

    }

    .audience-switch{

        bottom:18px;

        width:92%;

        justify-content:center;

    }

    .audience-switch a{

        flex:1;

        text-align:center;

        padding:12px 16px;

    }

}

/* ==========================================================================
   SECTION REVEAL ANIMATIONS
   ========================================================================== */

.about,
.pricing,
footer{

    animation:
    sectionFade
    1s ease;

}

@keyframes sectionFade{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* ==========================================================================
   HOVER POLISH
   ========================================================================== */

.nav-menu li a,
.footer a,
.signup-btn,
.cta-btn,
.btn,
.login{

    will-change:
    transform;

}

.about-card:hover img{

    transform:
    scale(1.03);

}

.about-card img{

    transition:
    transform .5s ease;

}

/* ==========================================================================
   PREMIUM SELECTION COLOR
   ========================================================================== */

::selection{

    background:
    rgba(168,85,247,.35);

    color:white;

}

/* ==========================================================================
   SOFT DIVIDERS
   ========================================================================== */

.about,
.pricing{

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

}

/* ==========================================================================
   DEPTH SYSTEM
   ========================================================================== */

.about-card,
.pricing-card,
.audience-switch,
header{

    backdrop-filter:
    blur(18px);

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

}

/* ==========================================================================
   FINAL SAAS POLISH
   ========================================================================== */

.hero-promoters h1,
.hero-brands h1,
.about h2,
.pricing h2{

    letter-spacing:
    -0.04em;

}

.about-card,
.pricing-card{

    transform-style:
    preserve-3d;

}

.about-card:hover,
.pricing-card:hover{

    transform:
    translateY(-10px)
    translateZ(0);

}

body{

    background:
    linear-gradient(
        180deg,
        #050816 0%,
        #030712 100%
    );

}

/* ==========================================================================
   END OF STYLESHEET
   ========================================================================== */

/* ==========================================================================
   DROP MATCH BLUE THEME OVERRIDES
   ========================================================================== */


/* GLOBAL BACKGROUND */
body{

    background:
    linear-gradient(
        180deg,
        #e4f2ff 0%,
        #ffffff 45%,
        #e4f2ff 100%
    );

}


/* REMOVE DARK PURPLE BODY GLOWS */
body::before{

    background:
    radial-gradient(
        circle,
        rgba(0,123,255,.18),
        transparent 70%
    );

}


body::after{

    background:
    radial-gradient(
        circle,
        rgba(99,102,241,.12),
        transparent 70%
    );

}



/* NAVBAR */
header{

    background:
    rgba(10,10,41,.95);

}



/* HERO DARK BLUE OVERLAY */
.hero-promoters::before,
.hero-brands::before{

    background:
    linear-gradient(
        rgba(10,10,41,.45),
        rgba(10,10,41,.75)
    );

}



/* ABOUT SECTION */

.about{

    background:#0a0a29;

}


.about-card{

    background:#f5f3f3;

    border-color:
    rgba(0,0,0,.08);

}


.about-card h3{

    color:#0a0a29;

}


.about-card p{

    color:#555;

}



/* PRICING */

.pricing{

    background:#0a0a29;

}


.pricing-card{

    background:#1A1953;

}



/* BUTTON COLORS */

.btn,
.cta-btn,
.signup-btn,
.audience-switch .active{

    background:
    linear-gradient(
        135deg,
        #007BFF,
        #0056b3
    );

}



/* REMOVE FINAL DARK OVERRIDE */
body{

    color:white;

}

.hero-slide img{
    display:none;
}

.hero-slide{

    background:
    linear-gradient(
        135deg,
        #0a0a29 0%,
        #1e3a8a 45%,
        #007BFF 100%
    );

    opacity:0;

}


.hero-slide.active{

    opacity:1;

}

/* ==========================================================================
   FIX: REMOVE SECTION WAVE LINES + ADD CLEAN PURPLE BLUE ANIMATION
   ========================================================================== */


/* Disable the extra section waves I added */
.hero-promoters::after,
.hero-brands::after,
.about::after,
.pricing::after,
footer::after {

    content:none !important;

}


/* Animated purple-blue background */

body {

    background:
    linear-gradient(
        120deg,
        #2e1065,
        #7c3aed,
        #2563eb,
        #06b6d4
    ) !important;

    background-size:
    400% 400% !important;

    animation:
    gradientMove 14s ease infinite !important;

}



@keyframes gradientMove {

    0% {

        background-position:
        0% 50%;

    }


    50% {

        background-position:
        100% 50%;

    }


    100% {

        background-position:
        0% 50%;

    }

}


/* Keep only one smooth wave */

body::before {

    content:"";

    position:fixed;

    left:-20%;

    bottom:-300px;

    width:140%;

    height:500px;


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


    border-radius:
    50%;


    filter:
    blur(40px);


    animation:
    softWave 12s ease-in-out infinite;


    z-index:-1;

}



@keyframes softWave {

    0% {

        transform:
        translateX(-5%)
        translateY(0);

    }


    50% {

        transform:
        translateX(5%)
        translateY(-50px);

    }


    100% {

        transform:
        translateX(-5%)
        translateY(0);

    }

}

/* ==========================================================================
   ULTRA PURPLE BLUE LIQUID BACKGROUND
   ========================================================================== */


/* Stronger animated gradient */

body {

    background:
    linear-gradient(
        120deg,
        #1e1b4b,
        #581c87,
        #7c3aed,
        #2563eb,
        #0284c7,
        #312e81
    ) !important;


    background-size:
    600% 600% !important;


    animation:
    extremeGradient 10s ease infinite !important;

}



@keyframes extremeGradient {

    0% {

        background-position:
        0% 50%;

    }


    25% {

        background-position:
        100% 20%;

    }


    50% {

        background-position:
        100% 100%;

    }


    75% {

        background-position:
        0% 80%;

    }


    100% {

        background-position:
        0% 50%;

    }

}



/* BIG PURPLE ENERGY GLOW */

body::before {

    content:"";

    position:fixed;

    width:900px;

    height:900px;

    top:-350px;

    left:-250px;


    background:

    radial-gradient(
        circle,
        rgba(168,85,247,.85),
        rgba(124,58,237,.45),
        transparent 70%
    );


    filter:
    blur(80px);


    animation:
    purpleOrb 8s ease-in-out infinite;


    z-index:-1;

}



@keyframes purpleOrb {

    0% {

        transform:
        translate(0,0)
        scale(1);

    }


    50% {

        transform:
        translate(250px,150px)
        scale(1.35);

    }


    100% {

        transform:
        translate(0,0)
        scale(1);

    }

}



/* BIG BLUE ENERGY GLOW */

body::after {

    content:"";

    position:fixed;

    width:1000px;

    height:1000px;

    right:-350px;

    bottom:-350px;


    background:

    radial-gradient(
        circle,
        rgba(14,165,233,.9),
        rgba(37,99,235,.5),
        transparent 70%
    );


    filter:
    blur(90px);


    animation:
    blueOrb 10s ease-in-out infinite;


    z-index:-2;

}



@keyframes blueOrb {

    0% {

        transform:
        translate(0,0)
        scale(1);

    }


    50% {

        transform:
        translate(-250px,-150px)
        scale(1.4);

    }


    100% {

        transform:
        translate(0,0)
        scale(1);

    }

}

.hero-promoters,
.hero-brands {

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */

.auth-card{

    width:100%;

    max-width:650px;

}

.auth-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.auth-form input,
.auth-form select{

    width:100%;
    height:56px;

    padding:0 22px;

    border:none;
    outline:none;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:16px;

    transition:all .3s ease;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        0 8px 20px rgba(0,0,0,.18);

}

.auth-form input:focus,
.auth-form select:focus{

    background:rgba(255,255,255,.16);

    box-shadow:
        inset 0 0 0 2px #3b82f6,
        0 0 20px rgba(59,130,246,.35);

    transform:translateY(-2px);

}

.auth-form input::placeholder{

    color:
    rgba(255,255,255,.6);

}

.auth-form select option{

    color:black;

}


.auth-footer{

    margin-top:24px;

    text-align:center;

    color:#cbd5e1;

}

.auth-footer a{

    color:#60a5fa;

    font-weight:600;

}

.auth-error{

    margin-bottom:20px;

    padding:14px;

    border-radius:14px;

    background:
    rgba(239,68,68,.15);

    border:
    1px solid rgba(239,68,68,.25);

    color:#fecaca;

}

.auth-success{

    margin-bottom:20px;

    padding:14px;

    border-radius:14px;

    background:
    rgba(34,197,94,.15);

    border:
    1px solid rgba(34,197,94,.25);

    color:#bbf7d0;

}

.form-group{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.form-group label{

    color:#fff;

    font-weight:600;

    margin-left:10px;

}