* {

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

}



body {

font-family:
Inter,
Arial,
sans-serif;

background:#faf9fc;

color:#111;

line-height:1.6;

}





/* NAV */


.navbar {

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 8%;

background:white;

}



.logo {

font-size:28px;

font-weight:800;

color:#111;

}



nav a {

margin-left:30px;

text-decoration:none;

color:#444;

font-weight:500;

}


nav a:hover {

color:#7c3aed;

}








/* HERO */


.hero {


display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

padding:80px 8%;


}



.tag {


color:#7c3aed;

font-weight:700;

letter-spacing:2px;

font-size:14px;

}



.hero h1 {


font-size:
clamp(45px,6vw,75px);

line-height:1.05;

margin:20px 0;


}



.subtitle {

font-size:20px;

color:#555;

max-width:500px;

}



.primary-btn {


display:inline-block;

margin-top:35px;

padding:16px 35px;

border-radius:50px;

background:#7c3aed;

color:white;

text-decoration:none;

font-weight:700;

}





.hero-image img {


width:100%;

height:600px;

object-fit:cover;

border-radius:30px;


}








/* SECTIONS */


.section,
.process,
.join {


padding:100px 8%;

}



h2 {


font-size:45px;

text-align:center;

margin-bottom:25px;


}



.section-text {


max-width:700px;

margin:auto;

text-align:center;

color:#555;

font-size:20px;


}







/* FEATURES */


.features {


display:grid;

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

gap:25px;

margin-top:60px;


}



.feature {


background:white;

padding:35px;

border-radius:25px;

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


}



.feature h3 {


margin-bottom:15px;

color:#7c3aed;


}








/* PROCESS */


.process {


background:#111;

color:white;

}



.steps {


display:grid;

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

gap:30px;

}



.step {


background:#1d1d1d;

padding:40px;

border-radius:25px;


}


.step span {


color:#a78bfa;

font-size:40px;

font-weight:bold;


}






/* CLASS FORMS */


.class-forms {

display:flex;

gap:40px;

justify-content:center;

align-items:stretch;

max-width:1100px;

margin:40px auto 0;

}



.class-card {

flex:1;

background:#1d1d1d;

padding:40px;

border-radius:25px;

}







/* FORM */


.join {


text-align:center;

}



.form-container {


background:white;

max-width:600px;

margin:40px auto;

padding:40px;

border-radius:30px;

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


}



form {


display:flex;

flex-direction:column;

gap:20px;

}



input,
textarea {


padding:16px;

border-radius:12px;

border:1px solid #ddd;

font-size:16px;

}



textarea {


height:130px;

}



button {


padding:16px;

border:none;

border-radius:50px;

background:#7c3aed;

color:white;

font-weight:bold;

cursor:pointer;


}







footer {


text-align:center;

padding:40px;

background:white;

}







/* MOBILE */


@media(max-width:900px){


.hero {

grid-template-columns:1fr;

}


.hero-image img {

height:400px;

}



.features,
.steps {

grid-template-columns:1fr;

}


.class-forms {

flex-direction:column;

}


nav {

display:none;

}


}

/* FORCE CLASS CARDS SIDE BY SIDE */

.class-forms {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px;
    width: 100%;
}


.class-card {
    width: 50%;
}


/* Mobile stacking */

@media (max-width: 900px) {

    .class-forms {
        flex-direction: column !important;
    }

    .class-card {
        width: 100%;
    }

}