/*======================================================================
    VYZARA
    File : pages.css
    Version : 1.0
    Part : 01

    CONTENTS

    01. Hero Background
    02. Hero Effects
    03. Hero Content
    04. Hero Visual
======================================================================*/



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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    isolation:isolate;

    background:

        radial-gradient(
            circle at top right,
            rgba(210,166,121,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(210,166,121,.05),
            transparent 35%
        );

}



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

.hero__background{

    position:absolute;

    inset:0;

    z-index:-5;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.15),

            rgba(0,0,0,.75)

        );

}

.hero__gradient{

    position:absolute;

    inset:0;

    z-index:-4;

    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(210,166,121,.10),

            transparent 32%

        );

}

.hero__grid{

    position:absolute;

    inset:0;

    opacity:.035;

    background-image:

        linear-gradient(

            rgba(255,255,255,.06) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.06) 1px,

            transparent 1px

        );

    background-size:90px 90px;

    pointer-events:none;

}

.hero__noise{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:url("../assets/images/background/noise.png");

    background-size:300px;

    mix-blend-mode:soft-light;

}



/*======================================================================
    GLOW
======================================================================*/

.hero__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}

.hero__glow--one{

    width:520px;

    height:520px;

    top:-180px;

    right:-120px;

    background:rgba(210,166,121,.12);

}

.hero__glow--two{

    width:380px;

    height:380px;

    bottom:-140px;

    left:-80px;

    background:rgba(210,166,121,.08);

}




/*======================================================================
    PHILOSOPHY
======================================================================*/

.philosophy{

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.01)
        );

}

.philosophy::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:600px;

    height:600px;

    border-radius:50%;

    background:rgba(210,166,121,.04);

    filter:blur(160px);

    pointer-events:none;

}

.philosophy-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    padding:2.8rem;

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

    border-radius:30px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(18px);

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.philosophy-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(210,166,121,.07),

            transparent 60%

        );

    opacity:0;

    transition:.45s ease;

}

.philosophy-card::after{

    content:"";

    position:absolute;

    top:0;

    left:15%;

    width:70%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--clr-primary),

            transparent

        );

    transform:scaleX(0);

    transition:.45s ease;

}

.philosophy-card:hover{

    transform:translateY(-6px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 24px 60px rgba(0,0,0,.28),

        0 0 28px rgba(210,166,121,.06);

}

.philosophy-card:hover::before{

    opacity:1;

}

.philosophy-card:hover::after{

    transform:scaleX(1);

}
.philosophy-card h3{

    margin-bottom:1rem;

    color:var(--clr-white);

    line-height:1.3;

    transition:

        color .35s ease,

        transform .35s ease;

}

.philosophy-card:hover h3{

    color:var(--clr-primary);

    transform:translateX(4px);

}

.philosophy-card p{

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

    line-height:1.8;

}


/*======================================================================
    TRUST STRIP
======================================================================*/

.trust-strip{

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

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

    border-bottom:1px solid rgba(255,255,255,.05);

}

.trust-strip__item{

    transition:var(--transition-normal);

}

.trust-strip__item:hover{

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

    border-color:rgba(210,166,121,.20);

    transform:translateY(-6px);

}

.trust-strip__item span{

    transition:.4s ease;

}

.trust-strip__item:hover span{

    width:70px;

}



/*======================================================================
    ECOSYSTEMS
======================================================================*/

.ecosystems{

    position:relative;

}

.ecosystems::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(210,166,121,.05);

    filter:blur(150px);

}

.ecosystem-card{

    position:relative;

    isolation:isolate;

    overflow:hidden;

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

    border-radius:30px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(18px);

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.ecosystem-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        radial-gradient(

            circle at top right,

            rgba(210,166,121,.08),

            transparent 45%

        );

    opacity:0;

    transition:.45s ease;

}

.ecosystem-card:hover::after{

    opacity:1;

}

.ecosystem-card:hover{

    transform:translateY(-10px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 35px 90px rgba(0,0,0,.34),

        0 0 40px rgba(210,166,121,.08);

}

.ecosystem-card h3{

    position:relative;

    margin-bottom:1.25rem;

    color:var(--clr-white);

    transition:

        color .35s ease,

        transform .35s ease;

}

.ecosystem-card:hover h3{

    color:var(--clr-primary);

    transform:translateX(4px);

}

.ecosystem-card__list li{

    transition:.35s ease;

}

.ecosystem-card:hover .ecosystem-card__list li{

    transform:translateX(5px);

    color:var(--clr-white);

}
/*=========================================
    ECOSYSTEM NUMBER
=========================================*/

.ecosystem-card__number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    margin-bottom:2rem;

    border:1px solid rgba(210,166,121,.14);

    border-radius:50%;

    background:rgba(210,166,121,.05);

    color:var(--clr-primary);

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

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:.08em;

    transition:

        transform .45s ease,

        background .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}
.ecosystem-card:hover .ecosystem-card__number{

    transform:rotate(8deg) scale(1.08);

    background:rgba(210,166,121,.10);

    border-color:rgba(210,166,121,.30);

    box-shadow:

        0 0 30px rgba(210,166,121,.14);

}



/*======================================================================
    FEATURED EXPERIENCES
======================================================================*/

.experiences{

    position:relative;

}

.experience-card{

    position:relative;

    isolation:isolate;

    overflow:hidden;

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

    border-radius:32px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(18px);

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.experience-card__media{

    position:relative;

    overflow:hidden;

    border-radius:24px 24px 0 0;

}
.experience-card__media img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:

        transform .8s ease,

        filter .8s ease;

}

.experience-card__media::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(0,0,0,.35)

        );

    opacity:0;

    transition:.45s ease;

}

.experience-card:hover .experience-card__media::before{

    opacity:1;

}

.experience-card__content{

    position:relative;

}

.experience-card__category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1rem;

    padding:.55rem 1rem;

    border:1px solid rgba(210,166,121,.18);

    border-radius:999px;

    background:rgba(210,166,121,.06);

    color:var(--clr-primary);

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    transition:.35s ease;

}

.experience-card:hover .experience-card__category{

    background:rgba(210,166,121,.12);

    border-color:rgba(210,166,121,.30);

    box-shadow:

        0 0 18px rgba(210,166,121,.12);

}

.experience-card h3{

    transition:.35s ease;

}

.experience-card:hover h3{

    color:var(--clr-primary);

}

.experience-card:hover{

    transform:translateY(-10px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 35px 90px rgba(0,0,0,.36),

        0 0 40px rgba(210,166,121,.08);

}
.experience-card:hover .experience-card__media img{

    transform:scale(1.04);

    filter:saturate(1.05);

}

.experience-card__link{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

}

.experience-card__link::after{

    content:"→";

    transition:.35s ease;

}

.experience-card:hover .experience-card__link::after{

    transform:translateX(8px);

}
/*======================================================================
    WHY VYZARA
======================================================================*/

.why{

    position:relative;

}

.why::before{

    content:"";

    position:absolute;

    top:50%;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(210,166,121,.05);

    filter:blur(150px);

    transform:translateY(-50%);

    pointer-events:none;

}

.why__grid{

    position:relative;

    z-index:2;

}

.why-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    padding:2.6rem;

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

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    backdrop-filter:blur(18px);

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.why-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(210,166,121,.06),

            transparent 60%

        );

    opacity:0;

    transition:.45s ease;

}

.why-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--clr-primary),

        transparent

    );

    transform:scaleX(0);

    transition:.45s ease;

}
.why-card span{

    display:inline-block;

    margin-bottom:1.2rem;

    color:var(--clr-primary);

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 28px 70px rgba(0,0,0,.30),

        0 0 35px rgba(210,166,121,.08);

}

.why-card:hover::before{

    opacity:1;

}

.why-card:hover::after{

    transform:scaleX(1);

}

.why-card h3{

    margin-bottom:1rem;

    color:var(--clr-white);

    line-height:1.3;

    transition:

        color .35s ease,

        transform .35s ease;

}

.why-card:hover h3{

    color:var(--clr-primary);

    transform:translateX(4px);

}
.why-card p{

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

    line-height:1.8;

}

/*======================================================================
    METHODOLOGY
======================================================================*/

.methodology{

    position:relative;

}

.methodology__timeline{

    position:relative;

}



.methodology-step{

    position:relative;

    z-index:2;

    overflow:hidden;

}

.methodology-step::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(210,166,121,.08),

            transparent

        );

    opacity:0;

    transition:.45s ease;

}

.methodology-step:hover{

    transform:translateY(-8px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 30px 70px rgba(0,0,0,.30),

        0 0 35px rgba(210,166,121,.08);

}

.methodology-step:hover::before{

    opacity:1;

}

.methodology-step__number{

    transition:.45s ease;

}
/*=========================================
    METHODOLOGY HEADING
=========================================*/

.methodology-step h3{

    margin:2rem 0 1.4rem;

    font-size:2.2rem;

    font-weight:600;

    line-height:1.15;

    text-align:center;

    white-space:nowrap;

    word-break:normal;

    overflow-wrap:normal;

    transition:

        color .35s ease,

        transform .35s ease;

}
.methodology-step:hover h3{

    color:var(--clr-primary);

    transform:translateY(-2px);

}
.methodology-step p{

    max-width:240px;

    margin:0 auto;

    text-align:center;

    line-height:1.8;

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

}

.methodology-step:hover .methodology-step__number{

    transform:scale(1.06);

    box-shadow:

        0 0 20px rgba(210,166,121,.14);

}



/*======================================================================
    CREDIBILITY
======================================================================*/

.credibility{

    position:relative;

}

.credibility::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(210,166,121,.06);

    filter:blur(160px);

}

.credibility-card{

    position:relative;

    overflow:hidden;

    padding:2.6rem;

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

    border-radius:30px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(18px);

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.credibility-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(210,166,121,.08),

            transparent 55%

        );

    opacity:0;

    transition:.45s ease;

}

.credibility-card:hover{

    transform:translateY(-8px);

    border-color:rgba(210,166,121,.16);

    box-shadow:

        0 28px 70px rgba(0,0,0,.30),

        0 0 35px rgba(210,166,121,.08);

}

.credibility-card:hover::before{

    opacity:1;

}
.credibility-card h3{

    margin-bottom:1rem;

    color:var(--clr-white);

    line-height:1.3;

    transition:

        color .35s ease,

        transform .35s ease;

}

.credibility-card:hover h3{

    color:var(--clr-primary);

    transform:translateX(4px);

}

.credibility-card p{

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

    line-height:1.8;

}


/*======================================================================
    FOUNDER
======================================================================*/

.founder{

    position:relative;

}

.founder__image{

    position:relative;

    overflow:hidden;

    border-radius:36px;

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

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.04),

            rgba(255,255,255,.015)

        );

    box-shadow:

        0 40px 100px rgba(0,0,0,.38),

        0 0 60px rgba(210,166,121,.08);

}

.founder__image img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .8s ease,

        filter .8s ease;

}

.founder__image:hover img{

    transform:scale(1.04);

    filter:

        brightness(1.03)

        saturate(1.04);

}

.founder__image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(210,166,121,.12);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.06);

    pointer-events:none;

}

.founder__quote{

    position:relative;

    margin-top:2.5rem;

    padding:2rem 2rem 2rem 2.5rem;

    border-radius:24px;

    border:1px solid rgba(210,166,121,.10);

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    overflow:hidden;

}

.founder__quote::before{

    content:"";

    position:absolute;

    left:0;

    top:24px;

    bottom:24px;

    width:4px;

    border-radius:999px;

    background:

        linear-gradient(

            var(--clr-primary),

            rgba(210,166,121,.35)

        );

}



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

.cta{

    position:relative;

}

.cta__wrapper{

    position:relative;

    overflow:hidden;

    padding:6rem 4rem;

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

    border-radius:40px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    backdrop-filter:blur(22px);

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

    box-shadow:

        0 40px 100px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.05);

    text-align:center;

}
.cta__wrapper::after{

    content:"";

    position:absolute;

    inset:auto;

    top:-220px;

    left:50%;

    transform:translateX(-50%);

    width:480px;

    height:480px;

    border-radius:50%;

    background:rgba(210,166,121,.06);

    filter:blur(150px);

    opacity:.85;

    pointer-events:none;

}

.cta__actions{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1.4rem;

    flex-wrap:wrap;

    margin-top:3rem;

}
.cta .section-title{

    margin-bottom:1.5rem;

}
.cta .section-description{

    max-width:760px;

    margin-inline:auto;

}



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

.footer{

    position:relative;

    padding:7rem 0 2.5rem;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.01),

            rgba(255,255,255,.03)

        );

    overflow:hidden;

}
.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:88%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(210,166,121,.22),

            transparent

        );

}
.footer__logo{

    display:inline-flex;

    transition:

        transform .45s ease,

        filter .45s ease;

}

.footer__logo:hover{

    transform:scale(1.02);

    filter:

        drop-shadow(

            0 0 18px rgba(210,166,121,.16)

        );

}

.footer__column a{

    position:relative;

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

    transition:

        color .35s ease;

}

.footer__column a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:1px;

    background:var(--clr-primary);

    transition:.35s ease;

}

.footer__column a:hover{

    color:var(--clr-primary);

}

.footer__column a:hover::after{

    width:100%;

}

.footer__bottom{

    position:relative;

    margin-top:4rem;

    padding-top:2rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    flex-wrap:wrap;

}

.footer__bottom::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.06),

            transparent

        );

}
.footer__description{

    max-width:360px;

    margin-top:1.5rem;

    line-height:1.8;

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

}
.footer__column h3{

    margin-bottom:1.4rem;

    color:var(--clr-white);

}
.footer__column ul{

    display:flex;

    flex-direction:column;

    gap:.9rem;

}

.footer__column li{

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

}