*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Pretendard,sans-serif;

background:#fff;

overflow-x:hidden;

}


.hero-content,
.hero-image,
.scroll{
    position:relative;
    z-index:2;
}






@media (max-width:768px){

.hero{
    min-height:100svh;
}


}

/* HEADER */

header{

position:absolute;

top:0;

left:0;

width:100%;

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

z-index:10;

}

.logo{

font-size:32px;

font-weight:900;

color:white;

text-shadow:0 2px 10px rgba(0,0,0,.3);

}

nav{

display:flex;

gap:40px;

}

nav a{

color:white;

font-weight:700;

text-decoration:none;

}

/* HERO */

.hero{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    background:url("images/hero-bg.png") center center;
    background-size:cover;
    background-repeat:no-repeat;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.28);
    z-index:1;
}

.hero-content{

width:50%;

z-index:5;

color:white;
text-align:center;

/*padding-left:8%;*/

}

.sub-title{

font-size:22px;

font-weight:700;

margin-bottom:20px;

}

.hero h1{

font-size:70px;

line-height:1.2;

font-weight:900;

margin-bottom:30px;

}

.desc{

font-size:24px;

line-height:1.8;

margin-bottom:40px;

}

.download-btn{

display:inline-block;

background:#ff9800;

padding:20px 50px;

border-radius:60px;

font-size:22px;

font-weight:700;

color:white;

text-decoration:none;

transition:.3s;

animation:pulse 2s infinite;

}

.download-btn:hover{

transform:translateY(-5px);

background:#ff8800;

}

.hero-image{

width:40%;

display:flex;

justify-content:center;

z-index:5;

}

.hero-image img{

width:420px;

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

}

.scroll{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:40px;

color:white;

animation:bounce 1.5s infinite;

z-index:5;

}

/* animation */

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}

@keyframes pulse{

0%{box-shadow:0 0 0 0 rgba(255,152,0,.5);}
70%{box-shadow:0 0 0 20px rgba(255,152,0,0);}
100%{box-shadow:0 0 0 0 rgba(255,152,0,0);}

}

@keyframes bounce{

0%,100%{transform:translate(-50%,0);}
50%{transform:translate(-50%,15px);}

}

@keyframes bgZoom{

0%{background-size:100%;}

100%{background-size:110%;}

}

.logo img{
    width:190px;
    height:auto;
    display:block;
}



/* MOBILE */

@media(max-width:900px){


.logo img{

	width:150px;

}
	

header{

padding:20px;

}

nav{

display:none;

}

.hero{

flex-direction:column;

text-align:center;

}

.hero-content{

width:100%;

padding:30px;

}

.hero h1{

font-size:42px;

}

.desc{

font-size:18px;

}

.hero-image{

width:100%;

margin-top:30px;

}

.hero-image img{

width:240px;

}

.download-btn{

font-size:18px;

padding:16px 40px;

}


.process{

padding:80px 20px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:17px;

}

.process-line{

flex-direction:column;

align-items:center;

overflow:visible;

}

.arrow{

transform:rotate(90deg);

margin:0;

font-size:28px;

}

.step{

width:100%;

max-width:360px;

min-width:auto;

}



.reward{

padding:80px 20px;

}

.reward-grid{

grid-template-columns:1fr;

gap:20px;

}

.reward-card{

padding:30px;

}

.reward-icon{

font-size:58px;

}

.reward-card h3{

font-size:24px;

}

.reward-card span{

font-size:16px;

}



.features{

padding:80px 20px;

}

.feature-grid{

grid-template-columns:1fr;

gap:20px;

}

.feature-card{

padding:30px;

}

.feature-icon{

width:70px;

height:70px;

font-size:34px;

}

.feature-card h3{

font-size:22px;

}

.feature-card p{

font-size:15px;

}


.download{

padding:80px 20px;

}

.download-wrap{

flex-direction:column-reverse;

text-align:center;

gap:40px;

}

.download h2{

font-size:34px;

}

.download p{

font-size:18px;

}

.download-list{

text-align:left;

display:inline-block;

}

.google-btn{

width:100%;

max-width:360px;

padding:18px;

font-size:18px;

}

.download-image img{

max-width:260px;

}

.footer-logo{

font-size:26px;

}

.footer-links{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}


.faq{

padding:80px 20px;

}

.faq-question{

font-size:18px;

padding:20px;

text-align:left;

}

.faq-answer{

font-size:15px;

padding:0 20px;

}

.faq-item.active .faq-answer{

padding:0 20px 20px;

}


#topBtn{

width:48px;

height:48px;

right:18px;

bottom:18px;

font-size:20px;

}

.loader h2{

font-size:30px;

}

.egg{

font-size:60px;

}





}




/* ===========================
   PROCESS
=========================== */

.process{

padding:120px 8%;

background:#FFFDF5;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:42px;

color:#333;

margin-bottom:20px;

font-weight:900;

}

.section-title p{

font-size:20px;

color:#777;

line-height:1.7;

}

.process-line{

display:flex;

justify-content:center;

align-items:flex-start;

gap:20px;

flex-wrap:nowrap;

overflow-x:auto;

padding-bottom:20px;

}

.process-line::-webkit-scrollbar{

height:8px;

}

.process-line::-webkit-scrollbar-thumb{

background:#FFD54F;

border-radius:20px;

}

.step{

background:#fff;

border-radius:24px;

padding:35px 25px;

min-width:220px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

opacity:0;

transform:translateY(50px);

}

.step.show{

opacity:1;

transform:translateY(0);

}

.step:hover{

transform:translateY(-12px);

}

.icon{

font-size:60px;

margin-bottom:20px;

}

.step h3{

font-size:26px;

margin-bottom:15px;

color:#444;

}

.step p{

font-size:16px;

line-height:1.7;

color:#777;

}

.arrow{

font-size:34px;

color:#FFC107;

margin-top:95px;

flex-shrink:0;

}




/* ===========================
   REWARD
=========================== */

.reward{

padding:120px 8%;

background:linear-gradient(
180deg,
#FFFDF5 0%,
#FFF7DD 100%
);

}

.reward-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.reward-card{

background:#fff;

border-radius:30px;

padding:40px;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

opacity:0;

transform:translateY(50px);

}

.reward-card.show{

opacity:1;

transform:translateY(0);

}

.reward-card:hover{

transform:translateY(-12px) scale(1.03);

}

.reward-icon{

font-size:72px;

margin-bottom:25px;

}

.reward-card h3{

font-size:28px;

margin-bottom:12px;

color:#333;

}

.reward-card span{

display:block;

font-size:18px;

line-height:1.7;

color:#777;

}

.gold{

background:linear-gradient(
135deg,
#FFF6C2,
#FFE082
);

}

.gold h3{

color:#7A4E00;

}

.gold .reward-icon{

animation:goldEgg 2s infinite;

}

@keyframes goldEgg{

0%{

transform:rotate(-8deg);

}

50%{

transform:rotate(8deg);

}

100%{

transform:rotate(-8deg);

}

}


/* ===========================
   FEATURES
=========================== */

.features{

padding:120px 8%;

background:#ffffff;

}

.feature-grid{

margin-top:60px;

display:grid;

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

gap:35px;

}

.feature-card{

background:#fff;

border-radius:28px;

padding:40px;

text-align:center;

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

transition:.35s;

opacity:0;

transform:translateY(40px);

border:1px solid #f2f2f2;

}

.feature-card.show{

opacity:1;

transform:translateY(0);

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.feature-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:#FFF8DD;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

transition:.3s;

}

.feature-card:hover .feature-icon{

background:#FFC928;

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

}

.feature-card h3{

font-size:26px;

margin-bottom:18px;

color:#333;

}

.feature-card p{

font-size:17px;

line-height:1.8;

color:#666;

}



/* ===========================
   DOWNLOAD
=========================== */

.download{

padding:140px 8%;

background:linear-gradient(
135deg,
#FFF8DD,
#FFF3C4
);

position:relative;

overflow:hidden;

}

.download::before{

content:"";

position:absolute;

width:600px;

height:600px;

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

border-radius:50%;

top:-250px;

right:-200px;

}

.download-wrap{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

position:relative;

z-index:2;

}

.download-text{

flex:1;

}

.badge{

display:inline-block;

padding:10px 20px;

border-radius:30px;

background:#fff;

font-weight:700;

margin-bottom:25px;

color:#ff9800;

}

.download h2{

font-size:52px;

font-weight:900;

margin-bottom:30px;

color:#333;

}

.download p{

font-size:22px;

line-height:1.8;

color:#555;

margin-bottom:35px;

}

.download-list{

list-style:none;

margin-bottom:40px;

}

.download-list li{

font-size:19px;

margin-bottom:14px;

color:#444;

}

.google-btn{

display:inline-block;

padding:22px 55px;

background:#34A853;

color:#fff;

text-decoration:none;

border-radius:60px;

font-size:22px;

font-weight:700;

transition:.3s;

box-shadow:0 15px 40px rgba(52,168,83,.3);

animation:pulse 2s infinite;

}

.google-btn:hover{

transform:translateY(-5px);

background:#2d9449;

}

.download-image{

flex:1;

text-align:center;

}

.download-image img{

max-width:420px;

width:100%;

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

}

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

footer{

padding:60px 20px;

background:#2F2F2F;

text-align:center;

color:#ddd;

}

.footer-logo{

font-size:32px;

font-weight:900;

margin-bottom:20px;

color:white;

}

.footer-links{

margin-bottom:20px;

}

.footer-links a{

color:white;

text-decoration:none;

margin:0 12px;

}

.footer-links a:hover{

color:#FFD54F;

}

.copyright{

font-size:15px;

opacity:.75;

}


/* ===========================
   FAQ
=========================== */

.faq{

padding:120px 8%;

background:#FFFDF8;

}

.faq-list{

max-width:900px;

margin:60px auto 0;

}

.faq-item{

background:#fff;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.faq-question{

width:100%;

padding:25px 30px;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:22px;

font-weight:700;

cursor:pointer;

}

.faq-question span{

font-size:28px;

transition:.3s;

}

.faq-item.active .faq-question span{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

padding:0 30px;

font-size:17px;

line-height:1.8;

color:#666;

transition:.35s;

}

.faq-item.active .faq-answer{

max-height:200px;

padding:0 30px 25px;

}



/* ===========================
   LOADING
=========================== */

#loading{

position:fixed;

inset:0;

background:#FFFDF5;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

#loading.hide{

opacity:0;

visibility:hidden;

}

.loader{

text-align:center;

}

.loader h2{

font-size:42px;

margin:20px 0 10px;

color:#333;

}

.loader p{

color:#777;

}

.egg{

font-size:80px;

animation:eggBounce 1.2s infinite;

}

@keyframes eggBounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}

/* ===========================
   Scroll Top
=========================== */

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#FFC928;

color:#fff;

font-size:24px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.2);

display:none;

z-index:999;

transition:.3s;

}

#topBtn:hover{

transform:translateY(-5px);

background:#FF9800;

}

/* ===========================
   Floating Animation
=========================== */

.float{

animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* ===========================
   Shine Button
=========================== */

.google-btn{

position:relative;

overflow:hidden;

}

.google-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

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

transform:skewX(-20deg);

transition:.8s;

}

.google-btn:hover::before{

left:130%;

}

/* ===========================
   Card Hover Upgrade
=========================== */

.step,
.reward-card,
.feature-card{

transition:.35s;

}

.step:hover,
.reward-card:hover,
.feature-card:hover{

transform:translateY(-12px) scale(1.04);

}



.icon img,
.reward-icon img,
.feature-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.hero-image img {
    width: 100%;
    max-width: 520px;
}

.egg img {
    width: 70px;
    height: 70px;
}

.footer-logo img {
    height: 50px;
}

.badge img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}