/* =========================================

K-ECONOMY LAB

GLOBAL STYLE

========================================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{


font-family:

"Noto Sans KR",
Arial,
sans-serif;


background:#050816;


color:#ffffff;


line-height:1.7;


}



img{


max-width:100%;


display:block;


}



a{


text-decoration:none;


color:inherit;


}



section{


padding:90px 8%;


}



h1,h2,h3{


line-height:1.3;


}



p{


color:#b9c2d9;


font-size:17px;


}









/* =========================================

HEADER

========================================= */


.header{


position:fixed;


top:0;


left:0;


width:100%;


height:80px;


padding:0 8%;


display:flex;


align-items:center;


justify-content:space-between;


background:

rgba(5,8,22,.9);


backdrop-filter:blur(15px);


z-index:999;


}




.logo{


font-size:25px;


font-weight:900;


color:#d6b25e;


}



nav{


display:flex;


gap:30px;


}



nav a{


color:#ddd;


}



nav a:hover{


color:#d6b25e;


}









/* =========================================

BUTTON

========================================= */


.main-btn,


.submit-btn{


display:inline-flex;


justify-content:center;


align-items:center;


background:

linear-gradient(

135deg,

#d6b25e,

#f5dd91

);


color:#111;


font-weight:900;


font-size:18px;


padding:18px 45px;


border-radius:50px;


border:none;


cursor:pointer;


transition:.3s;


}





.main-btn:hover,

.submit-btn:hover{


transform:translateY(-5px);


box-shadow:

0 15px 40px

rgba(214,178,94,.4);


}









/* =========================================

HERO

========================================= */


.hero{


min-height:100vh;


padding-top:150px;


display:grid;


grid-template-columns:1fr 1fr;


gap:50px;


align-items:center;



background:


radial-gradient(

circle at top right,

#26375f,

#050816 55%

);



}




.badge{


display:inline-block;


border:1px solid #d6b25e;


padding:8px 20px;


border-radius:30px;


color:#d6b25e;


margin-bottom:25px;


}




.hero h1{


font-size:65px;


font-weight:900;


}



.hero h1 strong{


color:#d6b25e;


}





.hero h2{


text-align:left;


font-size:30px;


margin:30px 0;


}





.hero p{


font-size:20px;


margin-bottom:40px;


}





.stats{


display:flex;


gap:20px;


margin-top:40px;


}



.stats div{


background:#11182d;


padding:20px;


border-radius:20px;


text-align:center;


}





.stats strong{


font-size:30px;


color:#d6b25e;


}





.hero-right img{


border-radius:30px;


box-shadow:

0 30px 80px

rgba(0,0,0,.5);


}









/* =========================================

CARDS

========================================= */


.cards,


.feature-grid,


.experts,


.reviews{


display:grid;


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


gap:30px;


}





.card,

.feature-grid div,

.experts div,

.reviews div{


background:#11182d;


padding:35px;


border-radius:25px;


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


}





.card h3,

.feature-grid h3{


color:#d6b25e;


font-size:25px;


}









/* =========================================

EXPERT

========================================= */


.experts img{


width:140px;


height:140px;


object-fit:cover;


border-radius:50%;


margin:0 auto 20px;


}



.experts h3{


color:#d6b25e;


}









/* =========================================

VIDEO

========================================= */


.video{


width:80%;


margin:auto;


border-radius:25px;


}







.chat-image{


width:80%;


margin:auto;


border-radius:25px;


}









/* =========================================

CTA

========================================= */


.cta{


text-align:center;


background:

linear-gradient(

135deg,

#11182d,

#050816

);


}





.cta h2{


font-size:42px;


}









/* =========================================

APPLY PAGE

========================================= */


.apply-page{


min-height:100vh;


padding-top:130px;


}





.apply-container{


max-width:750px;


margin:auto;


}





.step{


display:none;


animation:

fade .4s ease;


}





.step.active{


display:block;


}




@keyframes fade{


from{


opacity:0;


transform:translateY(20px);


}



to{


opacity:1;


transform:translateY(0);


}


}









/* =========================================

STEP CONTENT

========================================= */


.step h1{


font-size:42px;


text-align:center;


margin-bottom:30px;


}





.step h2{


font-size:30px;


margin-bottom:20px;


}





.step p{


font-size:18px;


line-height:2;


margin-bottom:30px;


}









/* =========================================

BIG CHECKBOX

========================================= */


.big-checkbox{


display:flex;


flex-direction:column;


gap:18px;


margin:35px 0;


}






.big-checkbox label{


display:flex;


align-items:center;


gap:20px;


padding:22px;


background:#11182d;


border-radius:20px;


border:1px solid #26304e;


cursor:pointer;


font-size:19px;


transition:.3s;


}



.big-checkbox label:hover{


border-color:#d6b25e;


transform:translateY(-3px);


}




.big-checkbox input{


appearance:none;


width:34px;


height:34px;


border-radius:8px;


border:2px solid #d6b25e;


position:relative;


flex-shrink:0;


}





.big-checkbox input:checked{


background:#d6b25e;


}





.big-checkbox input:checked::after{


content:"✓";


position:absolute;


color:#111;


font-size:25px;


font-weight:bold;


left:5px;


top:-5px;


}









/* =========================================

RESOURCE CARD

========================================= */


.resource-card{


background:#11182d;


border:1px solid #26304e;


padding:30px;


border-radius:25px;


margin-bottom:20px;


transition:.3s;


}




.resource-card:hover{


border-color:#d6b25e;


transform:translateY(-4px);


}





.resource-card h3{


color:#d6b25e;


font-size:24px;


margin:15px 0;


}









/* =========================================

RESOURCE GRID
两列两行卡片布局

========================================= */


.resource-grid{

display:grid;

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

gap:20px;

margin:35px 0;

}


.resource-grid .resource-card{

margin-bottom:0;

}


@media(max-width:700px){

.resource-grid{

grid-template-columns:1fr;

}

}




/* =========================================

MOBILE

========================================= */


@media(max-width:900px){



nav{


display:none;


}





section{


padding:70px 20px;


}





.hero{


grid-template-columns:1fr;


text-align:center;


}



.hero h1{


font-size:40px;


}



.hero h2{


text-align:center;


font-size:22px;


}





.stats{


flex-direction:column;


}





.cards,

.feature-grid,

.experts,

.reviews{


grid-template-columns:1fr;


}




.video,

.chat-image{


width:100%;


}





.step h1{


font-size:32px;


}





.step h2{


font-size:24px;


}





.big-checkbox label{


padding:20px;


font-size:17px;


}





.big-checkbox input{


width:38px;


height:38px;


}





.resource-card{


padding:25px;


}





.submit-btn{


width:100%;


font-size:20px;


}



}