/*==========================================
    PURPOSEUP WEBSITE
    style.css
===========================================*/

:root{

    --primary:#FF8A00;
    --primary-light:#FFA733;
    --secondary:#9BEA3A;

    --black:#080808;
    --dark:#111111;
    --card:#1A1A1A;

    --white:#FFFFFF;
    --gray:#C8C8C8;

    --shadow:0 15px 40px rgba(0,0,0,.35);

    --radius:18px;

    --transition:.35s ease;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.7;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

}

::-webkit-scrollbar-track{

    background:#111;

}

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

.container{

    width:90%;

    max-width:1250px;

    margin:auto;

}

/*==============================
Progress Bar
==============================*/

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:2px;

    background:var(--secondary);

    z-index:9999;

}


/*==============================
Navigation
==============================*/

/*
#navbar{

    /* position:fixed;

   top:0;

    width:100%;

     z-index:999; 

    transition:.4s;

    padding:8px 0;
border: 2px solid orange;
}

.nav-container{

    display:flex;
		flex-direction : row ;
		flex-wrap : wrap ;   justify-content:space-between;

    align-items:center;

}

.scrolled{

    background:rgba(8,8,8,.96);

    backdrop-filter:blur(12px);

    box-shadow:0 5px 20px rgba(0,0,0,.4);

}

.logo img{

    width:170px;

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:var(--primary);

}

.feedback-btn{

    background:var(--primary);

    color:white;

    border:none;

    padding:12px 28px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

.feedback-btn:hover{

    background:var(--secondary);

    color:black;

}

#hamburger{

    display:none;

    flex-direction:column;

    cursor:pointer;

}

#hamburger span{

    width:28px;

    height:3px;

    margin:4px;

    background:white;

}

*/

/*============================== HEADER ==============================*/ #navbar { width: 100%; padding: 8px 0; } 

/*============================== HEADER CONTAINER ==============================*/ 
.nav-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;} 

/*============================== 
LOGO 
==============================*/
 .logo { flex-shrink: 0; margin-bottom: -50px;} 
 .logo img { width: 170px; display: block;  } 
 
 /*============================== NAVIGATION ==============================*/ 
 .main-nav { flex: 1; min-width: 0; } 
 
 .menu { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 30px; margin: 0; padding: 0; list-style: none; } 
 
 .menu li { display: block; flex-shrink: 0; } 
 .menu li a { display: block; color: #fff; text-decoration: none; font-weight: 500; white-space: nowrap; padding: 5px 0; transition: .3s; } 
 .menu li a:hover { color: var(--primary); } 
 
 /*============================== FEEDBACK BUTTON ==============================*/ 
 .feedback-btn { flex-shrink: 0; background: var(--primary); color: #fff; border: none; padding: 12px 28px; border-radius: 50px; cursor: pointer; transition: .3s; } .feedback-btn:hover { background: var(--secondary); color: #000; } 

/*============================== SCROLLED ==============================*/ 
.scrolled { background: rgba(8,8,8,.96); backdrop-filter: blur(12px); box-shadow: 0 5px 20px rgba(0,0,0,.4); } 

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

.hero{

    position:relative;

    overflow:hidden;
    
		 min-height:-100vh;
    display:flex;
    align-items:center;
    background:url("../assets/images/hero.jpg") center center/cover;
    flex-direction: column ;
    
    
    background:
    radial-gradient(circle at top left,
    rgba(255,138,0,.18),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(155,234,58,.12),
    transparent 35%),

    linear-gradient(
    135deg,
    #050505,
    #111,
    #050505);

}

.hero::before{

content:"";

position:absolute;

inset:0;

background-image:

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

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

background-size:70px 70px;

animation:gridMove 25s linear infinite;

opacity:.3;

}

@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(70px);

}

}

.hero-right{
//text-align:center;
position:relative;

}

.hero-right::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(

rgba(255,138,0,.35),

transparent 70%

);

filter:blur(40px);

left:50%;

top:50%;

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

z-index:-1;

}

.hero-right img{

    width:85%;

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

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.78),

        rgba(0,0,0,.82)

    );

}

.hero-content{

    position:relative;

    z-index:5;

    display:grid;

   grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.tag{

    display:inline-block;

    padding:8px 20px;

    background:rgba(255,138,0,.15);

    color:var(--primary);

    border:1px solid rgba(255,138,0,.5);

    border-radius:40px;

    margin-bottom:22px;

}

.hero h1{

    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;

}

.hero p{

    color:var(--gray);

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{
//background:var(--primary);
background:
linear-gradient(
135deg,
#FF8A00,
#FFA733);

background-size:200%;
transition:.5s;

color:white;
    padding:16px 36px;
    text-decoration:none;
    border-radius:50px;
    transition:.3s;
}

.btn-primary:hover{

		background-position:right center;
		transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(255,138,0,.4);

}

.btn-secondary{

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

    color:white;

    padding:16px 36px;

    text-decoration:none;

    border-radius:50px;

    transition:.3s;

}

.btn-secondary:hover{

    background:var(--primary);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

/*==============================
Sections
==============================*/

section{

    padding:110px 0;

}

section h2{

    text-align:center;

    font-size:2.8rem;

    margin-bottom:60px;

}

/*==============================
Features
==============================*/

.feature-grid{

    display:grid;

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

    gap:30px;

}

.card{
background:rgba(255,255,255,.04);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);

//background:var(--card);
    padding:45px;
    border-radius:var(--radius);
    transition:var(--transition);
    //border:1px solid rgba(255,255,255,.05);
}

.card i{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,138,0,.12);
margin-bottom:20px;

color:var(--primary);
    font-size:48px;
    //margin-bottom:25px;
}

.card:hover{

transform:
translateY(-12px)
rotateX(6deg);

box-shadow:
0 25px 60px rgba(255,138,0,.18);

// transform:translateY(-10px);
    border-color:var(--primary);
    //box-shadow:var(--shadow);
}


/*==============================
Steps
==============================*/

.steps{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.step{

    background:var(--card);

    text-align:center;

    padding:40px;

    border-radius:18px;

}

.step span{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 20px;

    border-radius:50%;

    background:var(--primary);

    font-size:28px;

    font-weight:700;

}

/*==============================
Community
==============================*/

.community-grid{

    display:grid;

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

    gap:30px;

}

.story{

    background:var(--card);

    padding:35px;

    border-left:5px solid var(--secondary);

    border-radius:18px;

}

/*==============================
Download
==============================*/

#download{

    text-align:center;

    background:linear-gradient(135deg,#0d0d0d,#181818);

}

.download-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.download-buttons a{

    text-decoration:none;

    padding:18px 34px;

    border-radius:60px;

    background:var(--primary);

    color:white;

    transition:.3s;

}

.download-buttons a:hover{

    background:var(--secondary);

    color:black;

}

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

footer{

    background:#050505;

    text-align:center;

    padding:60px 20px;

}

footer img{

    width:160px;

    margin-bottom:20px;

}

footer p{

    color:var(--gray);

    margin:10px 0;

}

/*==============================
Feedback Modal
==============================*/

#feedbackModal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.8);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:10000;

}

.modal-content{

    width:90%;

    max-width:600px;

    background:#151515;

    border-radius:20px;

    padding:40px;

    position:relative;

}

.modal-content h2{

    margin-bottom:25px;

}

.modal-content input,

.modal-content textarea{

    width:100%;

    margin-bottom:20px;

    background:#222;

    color:white;

    border:none;

    border-radius:12px;

    padding:16px;

    font-family:inherit;

}

.modal-content textarea{

    min-height:180px;

    resize:vertical;

}

.modal-content button{

    width:100%;

    border:none;

    padding:16px;

    background:var(--primary);

    color:white;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

}

#closeModal{

    position:absolute;

    right:20px;

    top:15px;

    font-size:30px;

    cursor:pointer;

}

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

@media(max-width:900px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:2.8rem;

}

.steps{

grid-template-columns:1fr 1fr;

}

/*
nav{

display:none;

}

.feedback-btn{

display:none;

}

#hamburger{

display:flex;

}
*/

}


@media(max-width:600px){

.steps{

grid-template-columns:1fr;

}

section h2{

font-size:2rem;

}

.hero h1{

font-size:2.2rem;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

display:block;

}

}

/* Reveal Animation */

.hidden{

opacity:0;

transform:translateY(50px);

transition:.8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Active Navigation */

nav a.active{

color:var(--primary);

}

/* Mobile Menu *
@media(max-width:900px){

    nav{
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        display:none;
        background:#111;
        z-index:9999;
        padding: 25px;    }

    nav.show{
        display:block;
    }

    nav ul{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:25px 0;
        margin:0;
    }

    nav li{
        width:100%;
        list-style:none;
        text-align:center;
    }

    nav a{
        display:block;
        padding:12px;
    }

}
*/

/* Floating Orbs */

.orb{

position:absolute;

width:10px;

height:10px;

background:rgba(255,138,0,.35);

border-radius:50%;

bottom:-50px;

animation:floatOrb linear infinite;

filter:blur(1px);

}

@keyframes floatOrb{

0%{

transform:translateY(0) scale(.5);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:translateY(-110vh) scale(1.6);

opacity:0;

}

}