/* RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Albert Sans', sans-serif; 
    background-color: #ffffff; 
    color: #3E3E3E; 
    -webkit-font-smoothing: antialiased; 
}

/* HEADER & MENU */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 52px 80px 46px 80px; 
    max-width: 1920px;
    margin: 0 auto;
}
.logo { height: 48px; width: auto; }
.frame-293 { display: flex; align-items: center; gap: 50.5px; }

.nav-item { 
    text-decoration: none; 
    color: #333333; 
    font-weight: 900; 
    font-size: 18px; 
    text-transform: uppercase; 
    position: relative;
    padding-bottom: 4px;
}
.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; 
    bottom: 0;
    left: 0;
    background-color: #A31F34;
    transition: width 0.3s ease;
}
.nav-item.active { color: #A31F34; }
.nav-item.active::after, .nav-item:hover::after { width: 100%; }

.btn-signup { 
    border: 2px solid #A31F34; 
    padding: 10px 30px; 
    border-radius: 30px; 
    color: #A31F34; 
    font-weight: 900; 
    text-decoration: none;
    text-transform: uppercase;
}
.icon-eng { width: 97px; height: auto; cursor: pointer; }

/* HERO VISUAL */
.hero-visual .hero-img { width: 100%; height: auto; display: block; }

/* SECTION: WHAT IS THE MIT */
.content-section { 
    padding: 230px 20px 100px 20px; 
    max-width: 1224px; 
    margin: 0 auto;
    text-align: center;
}
.section-title { 
    font-family: 'Alexandria', sans-serif; 
    font-size: 40px; 
    font-weight: 700; 
    letter-spacing: 0.05em; 
    margin-bottom: 40px;
    text-transform: uppercase;
}
.highlight { color: #A31F34; }

.intro-quote {
    font-family: 'Albert Sans', sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 200;
    color: #3E3E3E;
    margin-bottom: 30px;
}

.intro-text {
    font-family: 'Alexandria', sans-serif;
    font-size: 18px; 
    font-weight: 200; 
    line-height: 1.6; 
    color: #333333;
}
.intro-text p { margin-bottom: 25px; }

/* SECTION: CRITERIA */
.criteria-section { 
    margin-top: 100px; 
    text-align: center; 
    padding-bottom: 100px;
}
.criteria-main-title { 
    font-family: 'Alexandria', sans-serif;
    font-size: 40px; 
    font-weight: 700; 
    letter-spacing: 0.05em; 
    margin-bottom: 80px; 
    text-transform: uppercase; 
}
.criteria-main-title span { color: #A31F34; }

.criteria-container { 
    display: flex; 
    justify-content: center; 
    gap: 80px; 
    max-width: 1460px; 
    margin: 0 auto; 
    padding: 0 40px; 
}
.criteria-card { flex: 1; text-align: left; max-width: 380px; }
.criteria-header { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.criteria-number { font-size: 80px; font-weight: 900; color: #A31F34; line-height: 0.8; }
.criteria-label { font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.criteria-desc { font-family: 'Alexandria', sans-serif; font-weight: 200; font-size: 16px; line-height: 1.6; }

/* WHO IT'S FOR? */
.who-section { 
    padding: 100px 0; 
    text-align: center; 
    width: 100%; 
}
.who-title { 
    font-family: 'Alexandria', sans-serif;
    font-weight: 700; 
    font-size: 40px; 
    text-transform: uppercase; 
    margin-bottom: 60px; 
}
.who-container { 
    display: flex; 
    justify-content: center; 
    max-width: 1445px; 
    margin: 0 auto; 
    gap: 80px; 
}
.who-content { display: flex; align-items: center; gap: 15px; text-align: left; }
.who-text .main-text { font-family: 'Alexandria', sans-serif; font-size: 20px; font-weight: 700; }
.who-text .sub-text { font-weight: 400; font-size: 18px; }

/* PRIZES SECTION */
.price-section {
    width: 100%;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}
.price-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 85px;
    max-width: 1423px;
}
.price-info { width: 310px; margin-bottom: 20px; text-align: left; }
.price-title { font-size: 40px; font-weight: 900; margin-bottom: 15px; }
.rules-link { color: #A31F34; font-weight: 900; text-decoration: underline; text-transform: uppercase; }

.price-container { display: flex; align-items: flex-end; gap: 30px; }
.price-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    border-radius: 20px 20px 8px 8px;
    color: #FFFFFF;
}
.price-value { font-size: 48px; font-weight: 900; }
.price-rank { font-size: 20px; }

.card-30k .price-box { width: 250px; height: 448px; background-color: #A31F34; }
.card-15k .price-box { width: 220px; height: 250px; background-color: rgba(163, 31, 52, 0.8); }
.card-5k .price-box { width: 190px; height: 150px; background-color: rgba(163, 31, 52, 0.6); }

/* MILESTONES */
.milestones-section { padding: 100px 0; text-align: center; }
.milestones-main-title { font-family: 'Alexandria', sans-serif; font-size: 40px; font-weight: 700; margin-bottom: 60px; text-transform: uppercase; }
.milestones-image-container { width: 100%; max-width: 1505px; margin: 0 auto; padding: 0 40px; }
.milestones-img { width: 100%; height: auto; }

/* CTA & FOOTER */
.cta-section { padding: 100px 0; }
.cta-wrapper { max-width: 1505px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.cta-title { font-size: 38px; font-weight: 900; text-transform: uppercase; }
.btn-cta-signup { border: 2px solid #A31F34; padding: 15px 40px; border-radius: 40px; color: #A31F34; font-weight: 900; text-decoration: none; text-transform: uppercase; }

.footer-wrapper {
    width: 100%;
    height: 274px;
    background: url('../images/bg_footer.png') no-repeat center/cover;
    display: flex;
    align-items: center;
}
.footer-container { width: 100%; max-width: 1623px; margin: 0 auto; padding-left: 105px; }
.footer-content-img { width: 900px; height: auto; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .header { padding: 30px 40px; }
    .criteria-container, .who-container, .price-wrapper { flex-direction: column; align-items: center; gap: 40px; }
    .price-info { text-align: center; width: 100%; }
    .footer-container { padding-left: 20px; text-align: center; }
    .footer-content-img { width: 100%; max-width: 600px; }
}