/*==================================================
COMING SOON
AWAKEN YOUR INNER COMPASS
==================================================*/


/*==================================================
PAGE
==================================================*/

.coming-hero{

    padding:7rem 0;
    background:linear-gradient(
        180deg,
        #faf8f4 0%,
        #f3ede4 100%
    );

    overflow:hidden;

}

/*==================================================
PROGRESS SECTION
==================================================*/

.coming-progress{

    padding:6rem 0;

    background:#ffffff;

}

.coming-progress h2{

    text-align:center;

    color:var(--green);

    margin-bottom:1rem;

}

.coming-progress p{

    max-width:650px;

    margin:0 auto 4rem;

    text-align:center;

    color:#666;

    line-height:1.8;

}


/*==================================================
TIMELINE
==================================================*/

.progress-wrapper{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:2rem;

    max-width:1100px;

    margin:auto;

}

.progress-line{

    position:absolute;

    left:10%;

    right:10%;

    top:38px;

    height:4px;

    background:#ece7df;

    border-radius:50px;

    z-index:1;

}

.progress-line::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:58%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        var(--gold),

        #d9b16d

    );

}


/*==================================================
ITEM
==================================================*/

.progress-item{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}

.progress-item h5{

    margin-top:1.2rem;

    color:var(--green);

    font-size:1.05rem;

}

.progress-item span{

    display:block;

    margin-top:.5rem;

    color:#888;

    font-size:.9rem;

}


/*==================================================
ICON
==================================================*/

.progress-icon{

    width:76px;

    height:76px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border:3px solid #ece7df;

    font-size:1.25rem;

    color:#999;

    transition:.35s;

    box-shadow:

        0 12px 28px rgba(0,0,0,.08);

}


/*==================================================
COMPLETE
==================================================*/

.progress-item.complete .progress-icon{

    background:var(--green);

    border-color:var(--green);

    color:white;

}


/*==================================================
ACTIVE
==================================================*/

.progress-item.active .progress-icon{

    background:var(--gold);

    border-color:var(--gold);

    color:white;

    animation:pulseGold 2.5s infinite;

}


@keyframes pulseGold{

0%{

box-shadow:

0 0 0 0 rgba(200,161,90,.45);

}

70%{

box-shadow:

0 0 0 18px rgba(200,161,90,0);

}

100%{

box-shadow:

0 0 0 0 rgba(200,161,90,0);

}

}


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

.progress-item:hover .progress-icon{

    transform:translateY(-8px);

}


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

@media(max-width:900px){

.progress-wrapper{

display:block;

max-width:600px;

}

.progress-line{

left:38px;

top:0;

bottom:0;

width:4px;

height:auto;

right:auto;

}

.progress-line::after{

width:100%;

height:55%;

}

.progress-item{

display:flex;

align-items:center;

text-align:left;

margin-bottom:3rem;

}

.progress-icon{

margin:0;

margin-right:2rem;

flex-shrink:0;

}

.progress-item h5{

margin-top:0;

}

}




/*==================================================
GRID
==================================================*/

.coming-grid{

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:5rem;
    align-items:center;

}


/*==================================================
CONTENT
==================================================*/

.coming-content{

    max-width:620px;

}


.coming-brand{

    width:220px;
    margin-bottom:2rem;

}

.coming-brand img{

    width:100%;
    display:block;

}

/*==================================================
NEWSLETTER
==================================================*/

.coming-newsletter{

    padding:7rem 0;

    background:#f6f2eb;

}

.newsletter-card{

    position:relative;

    max-width:760px;

    margin:auto;

    padding:4rem;

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

    backdrop-filter:blur(16px);

    border:1px solid rgba(200,161,90,.18);

    border-radius:28px;

    text-align:center;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

}


/*==================================================
WATERMARK
==================================================*/

.newsletter-card::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-90px;
    top:-90px;

    background:radial-gradient(
        rgba(200,161,90,.12),
        transparent 70%
    );

    border-radius:50%;

}

.newsletter-card::after{

    content:"🪶";

    position:absolute;

    right:40px;
    bottom:25px;

    font-size:5rem;

    opacity:.05;

}


/*==================================================
ICON
==================================================*/

.newsletter-icon{

    width:90px;
    height:90px;

    margin:0 auto 2rem;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--gold),
        #d9b16d
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:2rem;

    box-shadow:
        0 15px 30px rgba(200,161,90,.25);

}


/*==================================================
TEXT
==================================================*/

.newsletter-card h2{

    color:var(--green);

    margin-bottom:1rem;

}

.newsletter-card p{

    max-width:520px;

    margin:0 auto 2.5rem;

    color:#666;

    line-height:1.9;

}


/*==================================================
FORM
==================================================*/

.newsletter-form{

    display:flex;

    gap:1rem;

    justify-content:center;

    flex-wrap:wrap;

}

.newsletter-form input{

    flex:1;

    min-width:280px;

    padding:1rem 1.4rem;

    border-radius:999px;

    border:1px solid rgba(47,79,70,.15);

    background:white;

    font-size:1rem;

    outline:none;

    transition:.3s;

}

.newsletter-form input:focus{

    border-color:var(--gold);

    box-shadow:
        0 0 0 4px rgba(200,161,90,.12);

}

.newsletter-form .btn{

    padding:1rem 2.6rem;

}


/*==================================================
SMALL NOTE
==================================================*/

.newsletter-note{

    margin-top:1.75rem;

    font-size:.9rem;

    color:#8b8b8b;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.newsletter-card{

padding:2.5rem;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

min-width:100%;

}

.newsletter-form .btn{

width:100%;

}

}

/*==================================================
LABEL
==================================================*/

.coming-label{

    display:inline-block;

    padding:.45rem 1rem;

    border-radius:999px;

    background:rgba(200,161,90,.12);

    color:var(--gold);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:1.75rem;

}


/*==================================================
TITLE
==================================================*/

.coming-content h1{

    font-size:clamp(3.2rem,6vw,5.4rem);

    line-height:1.05;

    color:var(--green);

    margin-bottom:2rem;

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

}

.coming-content h1 span{

    display:block;

    color:var(--gold);

    margin-top:.5rem;

}


/*==================================================
TEXT
==================================================*/

.coming-content p{

    font-size:1.08rem;

    line-height:1.9;

    color:#5b5b5b;

    margin-bottom:1.5rem;

}


.coming-thanks{

    margin-top:2rem;

    font-style:italic;

    color:var(--green);

    font-weight:500;

}


/*==================================================
IMAGE
==================================================*/

.coming-image{

    position:relative;

}


.coming-image img{

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:
        0 35px 70px rgba(0,0,0,.16);

}


/*==================================================
DECORATION
==================================================*/

.coming-image::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(200,161,90,.08);

    left:-60px;
    top:-60px;

    z-index:-1;

}

.coming-image::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(47,79,70,.05);

    right:-45px;
    bottom:-45px;

    z-index:-1;

}


/*==================================================
FLOAT
==================================================*/

.coming-image{

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

}

@keyframes comingFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
QUOTE
==================================================*/

.coming-quote{

    position:relative;

    padding:8rem 0;

    background:linear-gradient(
        180deg,
        #faf8f4,
        #ffffff
    );

    text-align:center;

    overflow:hidden;

}


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

.coming-quote::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:radial-gradient(

        rgba(200,161,90,.08),

        transparent 70%

    );

}


/*==================================================
FEATHER
==================================================*/

.quote-feather{

    width:90px;

    margin:0 auto 2.5rem;

    display:block;

    opacity:.85;

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

}

@keyframes quoteFloat{

0%{

transform:translateY(0px) rotate(-3deg);

}

50%{

transform:translateY(-12px) rotate(3deg);

}

100%{

transform:translateY(0px) rotate(-3deg);

}

}


/*==================================================
QUOTE
==================================================*/

.coming-quote blockquote{

    max-width:860px;

    margin:auto;

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

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.55;

    color:var(--green);

    font-style:italic;

}


/*==================================================
AUTHOR
==================================================*/

.quote-author{

    display:block;

    margin-top:2rem;

    font-size:1rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--gold);

    font-weight:600;

}


/*==================================================
DIVIDER
==================================================*/

.quote-divider{

    width:120px;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    margin:2.5rem auto;

}


/*==================================================
FINAL MESSAGE
==================================================*/

.quote-message{

    max-width:650px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:1.05rem;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.coming-quote{

padding:6rem 0;

}

.quote-feather{

width:70px;

}

.coming-quote blockquote{

font-size:2rem;

}

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.coming-grid{

grid-template-columns:1fr;

gap:4rem;

}

.coming-content{

max-width:100%;
text-align:center;

}

.coming-brand{

margin:0 auto 2rem;

}

.coming-image{

max-width:520px;

margin:auto;

}

}

@media(max-width:768px){

.coming-hero{

padding:5rem 0;

}

.coming-content h1{

font-size:3rem;

}

.coming-content p{

font-size:1rem;

}

.coming-brand{

width:180px;

}

}

/*==================================================
GLOBAL INTERACTIONS
==================================================*/

.coming-content,
.progress-item,
.newsletter-card,
.coming-quote{

    transition:.4s ease;

}

.progress-item:hover{

    transform:translateY(-6px);

}

.newsletter-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 30px 60px rgba(0,0,0,.12);

}

.coming-image img{

    transition:.45s ease;

}

.coming-image:hover img{

    transform:scale(1.02);

}

.coming-content .btn{

    margin-top:2rem;

}