/*=========================================================
People Choice 360
Coming Soon Landing Page
Part 1
Variables • Reset • Base • Layout • Utilities
=========================================================*/


/*=========================================================
Google Font
=========================================================*/

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


/*=========================================================
CSS Variables
=========================================================*/

:root{

    /* Brand Colors */

    --primary:#0361eb;
    --primary-dark:#024dbb;
    --secondary:#e3eeff;
    --black:#000000;
    --white:#ffffff;

    /* Text */

    --text:#111827;
    --text-light:#6b7280;

    /* Background */

    --bg:#f7faff;
    --glass:rgba(255,255,255,.65);

    /* Border */

    --border:rgba(3,97,235,.08);

    /* Shadow */

    --shadow-sm:0 10px 30px rgba(3,97,235,.08);
    --shadow-md:0 20px 60px rgba(3,97,235,.12);
    --shadow-lg:0 35px 80px rgba(3,97,235,.18);

    /* Radius */

    --radius:24px;

    /* Transition */

    --transition:.35s cubic-bezier(.4,0,.2,1);

    /* Container */

    --container:1320px;

}


/*=========================================================
Reset
=========================================================*/

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

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

}


/*=========================================================
HTML
=========================================================*/

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


/*=========================================================
Body
=========================================================*/

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100svh;
    min-height:100dvh;
    min-height:100vh;

    display:flex;
    flex-direction:column;

    overflow-x:hidden;

    position:relative;

    line-height:1.6;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*=========================================================
Images
=========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================================
Canvas
=========================================================*/

canvas{

    display:block;

}


/*=========================================================
Links
=========================================================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


/*=========================================================
Lists
=========================================================*/

ul,
ol{

    list-style:none;

}


/*=========================================================
Buttons
=========================================================*/

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font:inherit;

}


/*=========================================================
Inputs
=========================================================*/

input,
textarea,
select{

    font:inherit;

    outline:none;

}


/*=========================================================
Selection
=========================================================*/

::selection{

    background:var(--primary);

    color:var(--white);

}


/*=========================================================
Scrollbar
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef4ff;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--primary),
        #4a8dff
    );

    border-radius:50px;

}


/*=========================================================
Container
=========================================================*/

.container{

    width:min(100% - 2rem,var(--container));

    margin-inline:auto;

}


/*=========================================================
Main Hero
=========================================================*/

.hero{

    flex:1;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    padding-block:4rem;

    padding-inline:1rem;

}


/*=========================================================
Section Spacing
=========================================================*/

section{

    position:relative;

}


/*=========================================================
Utility Classes
=========================================================*/

.text-center{

    text-align:center;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.w-100{

    width:100%;

}


/*=========================================================
Smooth Transition
=========================================================*/

.logo,
.hero-title,
.hero-text,
.loader,
footer,
.gradient{

    transition:var(--transition);

}


/*=========================================================
Accessibility
=========================================================*/

:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

/*=========================================================
People Choice 360
Coming Soon Landing Page
Part 2
Animated Background • Aurora • Grid • Particles
=========================================================*/


/*=========================================================
Background Wrapper
=========================================================*/

.bg-wrapper{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-100;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 35%,
            #eef5ff 100%
        );

}


/*=========================================================
Animated Aurora Blobs
=========================================================*/

.gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(110px);

    opacity:.55;

    pointer-events:none;

    will-change:transform;

}


/* Left Blob */

.gradient1{

    width:42vw;
    height:42vw;

    min-width:320px;
    min-height:320px;

    max-width:700px;
    max-height:700px;

    top:-12%;

    left:-12%;

    background:#0361eb;

    animation:
        floatOne 18s ease-in-out infinite;

}


/* Right Blob */

.gradient2{

    width:38vw;
    height:38vw;

    min-width:280px;
    min-height:280px;

    max-width:620px;
    max-height:620px;

    right:-10%;

    bottom:-10%;

    background:#7eb2ff;

    animation:
        floatTwo 22s ease-in-out infinite;

}


/* Center Blob */

.gradient3{

    width:28vw;
    height:28vw;

    min-width:220px;
    min-height:220px;

    max-width:450px;
    max-height:450px;

    left:50%;

    top:40%;

    transform:translate(-50%,-50%);

    background:#0361eb;

    opacity:.18;

    animation:
        floatCenter 20s ease-in-out infinite;

}


/*=========================================================
Grid Overlay
=========================================================*/

.grid-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(3,97,235,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(3,97,235,.05) 1px,
            transparent 1px
        );

    background-size:50px 50px;

    opacity:.75;

}


/*=========================================================
Soft Radial Glow
=========================================================*/

.bg-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.65),
            transparent 70%
        );

    pointer-events:none;

}


/*=========================================================
Noise Texture
=========================================================*/

.bg-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.03;

    background-image:

        radial-gradient(
            #000 1px,
            transparent 1px
        );

    background-size:18px 18px;

    pointer-events:none;

}


/*=========================================================
Particles Canvas
=========================================================*/

#particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}


/*=========================================================
Mouse Glow
=========================================================*/

.mouse-light{

    position:fixed;

    width:320px;

    height:320px;

    border-radius:50%;

    pointer-events:none;

    z-index:5;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(3,97,235,.16),

            transparent 70%

        );

    mix-blend-mode:screen;

}


/*=========================================================
Background Animations
=========================================================*/

@keyframes floatOne{

    0%{

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

    }

    25%{

        transform:
            translate(60px,-40px)
            scale(1.08);

    }

    50%{

        transform:
            translate(-20px,50px)
            scale(.95);

    }

    75%{

        transform:
            translate(40px,25px)
            scale(1.05);

    }

    100%{

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

    }

}


@keyframes floatTwo{

    0%{

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

    }

    30%{

        transform:
            translate(-50px,-30px)
            scale(.95);

    }

    60%{

        transform:
            translate(40px,60px)
            scale(1.08);

    }

    100%{

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

    }

}


@keyframes floatCenter{

    0%{

        transform:
            translate(-50%,-50%)
            scale(1);

    }

    50%{

        transform:
            translate(-48%,-46%)
            scale(1.12);

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(1);

    }

}

/*=========================================================
People Choice 360
Coming Soon Landing Page
Part 3
Hero • Logo • Typography • Loader • Animations
=========================================================*/


/*=========================================================
Hero Content
=========================================================*/

.hero .container{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero .row{

    width:100%;

    justify-content:center;

}

.hero .col-12{

    max-width:900px;

}


/*=========================================================
Logo Wrapper
=========================================================*/

.logo-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:3rem;

    animation:fadeDown .9s ease;

}

.logo-wrapper::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255, 255, 255, 0.14),

            transparent 70%

        );

    animation:logoGlow 5s ease-in-out infinite;

}

.logo-wrapper::after{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:30px;

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

    backdrop-filter:blur(25px);

    opacity:.15;

}


/*=========================================================
Logo
=========================================================*/

.logo{

    width:min(340px,80vw);

    height:auto;

    position:relative;

    z-index:2;

    animation:

        logoFloat 6s ease-in-out infinite;

    filter:

        drop-shadow(
            0 25px 55px
            rgba(3,97,235,.18)
        );

}


/*=========================================================
Hero Title
=========================================================*/

.hero-title{

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

    font-weight:900;

    line-height:1.05;

    letter-spacing:-3px;

    margin-bottom:1.4rem;

    text-transform:uppercase;

    background:

        linear-gradient(

            90deg,

            #024dbb,

            #0361eb,

            #4d90ff,

            #0361eb,

            #024dbb

        );

    background-size:300%;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    -webkit-text-fill-color:transparent;

    animation:

        gradientText 8s linear infinite,

        fadeUp .8s ease;

}


/*=========================================================
Hero Description
=========================================================*/

.hero-text{

    width:min(700px,95%);

    margin:0 auto;

    font-size:clamp(1rem,2vw,1.25rem);

    line-height:1.9;

    color:var(--text-light);

    font-weight:400;

    animation:fadeUp 1s ease;

}


/*=========================================================
Animated Loader
=========================================================*/

.loader{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:3rem;

    position:relative;

}

.loader::before{

    content:"";

    position:absolute;

    width:140px;

    height:4px;

    top:-22px;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--primary),

            #4d90ff,

            transparent

        );

}


/*=========================================================
Loader Dots
=========================================================*/

.loader span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #62a2ff

        );

    box-shadow:

        0 0 18px rgba(3,97,235,.35);

    animation:bounce 1.2s infinite;

}

.loader span:nth-child(2){

    animation-delay:.18s;

}

.loader span:nth-child(3){

    animation-delay:.36s;

}


/*=========================================================
Hover Effects
=========================================================*/

.logo:hover{

    transform:scale(1.05);

    filter:

        drop-shadow(

            0 35px 70px

            rgba(3,97,235,.28)

        );

}

.hero-title:hover{

    letter-spacing:-1px;

}

.hero-text:hover{

    color:var(--text);

}


/*=========================================================
Animations
=========================================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:

            translateY(-40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(35px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes logoGlow{

    0%{

        transform:scale(1);

        opacity:.4;

    }

    50%{

        transform:scale(1.15);

        opacity:.85;

    }

    100%{

        transform:scale(1);

        opacity:.4;

    }

}

@keyframes gradientText{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

@keyframes bounce{

    0%,
    80%,
    100%{

        transform:translateY(0);

        opacity:.35;

    }

    40%{

        transform:translateY(-16px);

        opacity:1;

    }

}
/*=========================================================
People Choice 360
Coming Soon Landing Page
Part 4
Footer • Effects • Utilities • Responsive • Final Polish
=========================================================*/


/*=========================================================
Footer
=========================================================*/

footer{

    position:relative;

    width:100%;

    margin-top:auto;

    padding:1rem 0;

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

    backdrop-filter:blur(30px);

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

    border-top:1px solid rgba(3,97,235,.08);

    overflow:hidden;

    z-index:20;

}


/*=========================================================
Footer Background Glow
=========================================================*/

footer::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:700px;

    height:250px;

    transform:translateX(-50%);

    background:

        radial-gradient(

            rgba(3,97,235,.10),

            transparent 70%

        );

    pointer-events:none;

}

footer::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.25),

            transparent

        );

    opacity:.4;

    pointer-events:none;

}


/*=========================================================
Footer Divider
=========================================================*/

.footer-line{

    width:100%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(3,97,235,.18),

            rgba(3,97,235,.45),

            rgba(3,97,235,.18),

            transparent

        );

}


/*=========================================================
Footer Content
=========================================================*/

.footer-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1.5rem;

    flex-wrap:wrap;

    position:relative;

    z-index:2;

}


/*=========================================================
Footer Text
=========================================================*/

.footer-content>div{

    color:var(--text-light);

    font-size:.95rem;

    font-weight:500;

    line-height:1.6;

}

.footer-content strong{

    color:var(--primary);

    font-weight:700;

}


/*=========================================================
Footer Link
=========================================================*/

.footer-content a{

    color:var(--primary);

    font-weight:600;

    position:relative;

}

.footer-content a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .35s ease;

}

.footer-content a:hover::after{

    width:100%;

}

.footer-content a:hover{

    color:var(--primary-dark);

}


/*=========================================================
Footer Hover
=========================================================*/

footer:hover{

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

    border-top-color:rgba(3,97,235,.16);

}


/*=========================================================
Utility Classes
=========================================================*/

.glass{

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

    backdrop-filter:blur(25px);

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

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

}

.shadow{

    box-shadow:var(--shadow-md);

}

.radius{

    border-radius:var(--radius);

}


/*=========================================================
Smooth Hover Effects
=========================================================*/

.logo,
.hero-title,
.hero-text,
.footer-content a{

    transition:all .35s ease;

}

.logo:hover{

    transform:translateY(-6px);

}

.hero-title:hover{

    transform:translateY(-2px);

}

.hero-text:hover{

    color:var(--text);

}


/*=========================================================
Selection Disable
=========================================================*/

.logo,
.hero-title,
.hero-text,
.footer-content{

    user-select:none;

}
/*=========================================================
People Choice 360
Coming Soon Landing Page
Part 5
Advanced Responsive • Safe Areas • Performance
=========================================================*/


/*=========================================================
Fluid Spacing
=========================================================*/

.hero{

    padding-inline:clamp(1rem,3vw,3rem);

    padding-block:clamp(3rem,8vh,6rem);

}

.logo-wrapper{

    margin-bottom:clamp(2rem,5vw,4rem);

}

.hero-title{

    margin-bottom:clamp(1rem,2vw,2rem);

}

.hero-text{

    margin-inline:auto;

}

.loader{

    margin-top:clamp(2rem,4vw,3rem);

}


/*=========================================================
Desktop
=========================================================*/

@media (min-width:1200px){

    .hero .container{

        max-width:1100px;

    }

    .hero-title{

        max-width:900px;

        margin-inline:auto;

    }

    .hero-text{

        max-width:700px;

    }

}


/*=========================================================
Large Desktop
=========================================================*/

@media (min-width:1400px){

    .hero-title{

        font-size:6.2rem;

    }

    .hero-text{

        font-size:1.25rem;

    }

}


/*=========================================================
Ultra Wide
=========================================================*/

@media (min-width:1800px){

    .hero{

        padding-block:7rem;

    }

    .hero-title{

        font-size:7rem;

    }

    .hero-text{

        max-width:760px;

        font-size:1.35rem;

    }

}


/*=========================================================
Laptop
=========================================================*/

@media (max-width:1199px){

    .hero{

        padding-top:5rem;

        padding-bottom:4rem;

    }

}


/*=========================================================
Tablet Landscape
=========================================================*/

@media (max-width:991px){

    .hero{

        min-height:auto;

    }

    .hero-title{

        letter-spacing:-2px;

    }

}


/*=========================================================
Tablet Portrait
=========================================================*/

@media (max-width:768px){

    .hero{

        padding-top:4rem;

        padding-bottom:3rem;

    }

    .hero-title{

        max-width:100%;

    }

    .hero-text{

        width:100%;

    }

}


/*=========================================================
Mobile
=========================================================*/

@media (max-width:576px){

    .hero{

        padding-top:3rem;

        padding-bottom:2.5rem;

    }

    .logo{

        width:min(180px,70vw);

    }

    .hero-title{

        line-height:1.1;

    }

    .hero-text{

        padding-inline:.5rem;

    }

}


/*=========================================================
Small Mobile
=========================================================*/

@media (max-width:400px){

    .hero{

        padding-inline:1rem;

    }

    .logo{

        width:150px;

    }

    .hero-title{

        font-size:1.8rem;

    }

    .hero-text{

        font-size:.9rem;

        line-height:1.6;

    }

    .loader{

        gap:10px;

    }

}


/*=========================================================
Landscape Phones
=========================================================*/

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding-block:2rem;

    }

    .logo{

        width:140px;

    }

    .hero-title{

        font-size:2rem;

        margin-bottom:.75rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .loader{

        margin-top:1.5rem;

    }

}


/*=========================================================
iPhone Safe Area
=========================================================*/

@supports (padding:max(0px)){

    footer{

        padding-bottom:max(1rem,env(safe-area-inset-bottom));

    }

}


/*=========================================================
Touch Devices
=========================================================*/

@media (hover:none){

    .logo:hover,

    .hero-title:hover,

    .hero-text:hover,

    footer:hover{

        transform:none;

    }

}


/*=========================================================
High Resolution Screens
=========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

    .logo{

        image-rendering:auto;

    }

}


/*=========================================================
Print
=========================================================*/

@media print{

    .bg-wrapper,

    .mouse-light,

    .loader,

    #particles{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

    .hero{

        min-height:auto;

        padding:2rem;

    }

    footer{

        position:relative;

        background:#ffffff;

        border:none;

    }

}


/*=========================================================
Performance
=========================================================*/

.gradient,

.logo,

.hero-title,

.loader span{

    will-change:transform;

}


/*=========================================================
Accessibility
=========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================================
End of File
=========================================================*/

/*=========================================================
Responsive
=========================================================*/

@media (max-width:991px){

    footer{

        padding:1.75rem 0;

    }

    .footer-content{

        justify-content:center;

        text-align:center;

    }

}

@media (max-width:767px){

    footer{

        padding:1.5rem 0;

    }

    .footer-content{

        flex-direction:column;

        gap:.75rem;

    }

    .footer-content>div{

        font-size:.9rem;

    }

}

@media (max-width:575px){

    footer{

        padding:1.25rem 0;

    }

    .footer-line{

        margin:.75rem 0;

    }

    .footer-content>div{

        font-size:.85rem;

        line-height:1.5;

    }

}

@media (max-width:400px){

    .footer-content>div{

        font-size:.8rem;

    }

}


/*=========================================================
Large Screens
=========================================================*/

@media (min-width:1600px){

    .footer-content>div{

        font-size:1rem;

    }

}


/*=========================================================
Reduce Motion
=========================================================*/

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

    footer,
    .footer-content a,
    .logo,
    .hero-title{

        transition:none !important;

    }

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:991px){

    .logo{

        width:280px;

    }

    .logo-wrapper{

        margin-bottom:2.5rem;

    }

}

@media(max-width:767px){

    .logo{

        width:220px;

    }

    .hero-title{

        letter-spacing:-2px;

    }

    .hero-text{

        line-height:1.7;

    }

    .loader{

        margin-top:2.2rem;

    }

}

@media(max-width:575px){

    .logo{

        width:180px;

    }

    .logo-wrapper::before{

        width:160px;

        height:160px;

    }

    .loader span{

        width:10px;

        height:10px;

    }

    .loader::before{

        width:90px;

    }

}

@media(max-width:360px){

    .logo{

        width:160px;

    }

    .hero-title{

        font-size:1.9rem;

    }

    .hero-text{

        font-size:.9rem;

    }

}
/*=========================================================
Responsive Background
=========================================================*/

@media(max-width:991px){

    .grid-overlay{

        background-size:40px 40px;

    }

    .mouse-light{

        display:none;

    }

}


@media(max-width:767px){

    .gradient1{

        width:300px;
        height:300px;

        left:-120px;
        top:-120px;

    }

    .gradient2{

        width:260px;
        height:260px;

        right:-100px;
        bottom:-100px;

    }

    .gradient3{

        width:180px;
        height:180px;

    }

    .grid-overlay{

        background-size:30px 30px;

    }

}


@media(max-width:480px){

    .gradient1{

        width:240px;
        height:240px;

    }

    .gradient2{

        width:220px;
        height:220px;

    }

    .gradient3{

        width:150px;
        height:150px;

    }

    .grid-overlay{

        background-size:24px 24px;

    }

}
/*=========================================================
Reduce Motion
=========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================================
Responsive Container
=========================================================*/

@media (min-width:576px){

    .container{

        width:min(540px,100% - 2rem);

    }

}

@media (min-width:768px){

    .container{

        width:min(720px,100% - 3rem);

    }

}

@media (min-width:992px){

    .container{

        width:min(960px,100% - 4rem);

    }

}

@media (min-width:1200px){

    .container{

        width:min(1140px,100% - 4rem);

    }

}

@media (min-width:1400px){

    .container{

        width:min(1320px,100% - 5rem);

    }

}