*{
    box-sizing:border-box;
}

.about-page{

    max-width:1100px;

    margin:0 auto;

    padding:0 48px;

}

.hero{

    min-height:88vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero-title{

    font-size:clamp(54px,7vw,84px);

    font-weight:700;

    letter-spacing:-1px;

    margin-bottom:36px;

}

.hero-quote{

    max-width:900px;

    font-size:clamp(28px,3vw,42px);

    font-weight:300;

    line-height:1.45;

    color:#f3f3f3;

}

.hero-quote span{

    color:#6fd6ff;

    font-weight:500;

}

.hero-description{

    margin-top:42px;

    max-width:720px;

    font-size:20px;

    line-height:1.9;

    color:#b7b7b7;

}

.about-section{

    padding:110px 0;

}

.section-header{

    display:flex;

    align-items:center;

    gap: 18px;

    margin-bottom:60px;

}

.section-number{

    font-size:26px;

    font-weight:700;

    color:#6fd6ff;

    letter-spacing:6px;

    min-width:70px;

    padding-bottom:12px;

    opacity:1;

}

.section-header h2{

    font-size:40px;

    font-weight:600;

    letter-spacing:-.5px;

    color:white;

}

.section-content{

    max-width: 820px;

    font-size: 21px;

    line-height: 2.2;

    color:#d3d3d3;

}

.section-content p{

    margin-bottom:28px;

}

.lead{

    font-size:1.5rem;

    font-weight:600;

    line-height:1.5;

    color:#ffffff;

    margin-bottom:28px;

}

.about-question{

    margin:40px 0;

    padding-left:24px;

    border-left:2px solid #66d1ff;

    font-size:1.25rem;

    line-height:1.9;

    color:#f1f5f9;

    font-style:italic;

}

.final-quote{

    margin:40px 0;

    padding-left:24px;

    border-left:2px solid #66d1ff;

    font-size:1.25rem;

    line-height:2.2;

    color:#f1f5f9;

    font-style:italic;

}

.belief-grid{

    display:grid;

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

    gap:26px;

}

.belief-card{

    padding:28px;

    border-radius:18px;

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

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

    transition:.25s;

}

.belief-card:hover{

    transform:translateY(-4px);

    border-color:rgba(111,214,255,.25);

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

}

.belief-icon{

    font-size:34px;

    margin-bottom:18px;

}

.belief-card h3{

    font-size:24px;

    margin-bottom:14px;

    color:white;

}

.belief-card p{

    color:#c7c7c7;

    line-height:1.8;

}

.philosophy .section-content{

    max-width:880px;

}

.ending{

    text-align:center;

}

.ending .section-header{

    justify-content:center;

}

.ending .section-content{

    margin:0 auto;

    max-width:760px;

}

.begin-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:60px;

    padding:16px 32px;

    border-radius:16px;

    background:#2f8cff;

    color:white;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.25s;

}

.begin-button:hover{

    background:#1f79ea;

    transform:translateY(-3px);

}

.begin-section{

    display:flex;

    justify-content:center;

}

.begin-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-top:50px;

    padding:24px 64px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    color:white;

    text-decoration:none;

    font-weight:700;

    font-size:22px;

    letter-spacing:.3px;

    box-shadow:
        0 10px 35px rgba(106,90,255,.22);

    transition:.35s;

}

.begin-button:hover{

    transform:translateY(-4px)  scale(1.02);

    box-shadow:
        0 18px 45px rgba(106,90,255,.35);

}


@media(max-width:900px){

    .belief-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 768px) {

    .about-page {
        padding: 0 20px 70px;
    }

    .hero {
        min-height: 68vh;
        padding: 35px 0 45px;
    }

    .hero-title {
        font-size: clamp(36px, 9vw, 46px);
        line-height: 1.08;
        margin-bottom: 24px;
    }

    .hero-quote {
        font-size: clamp(20px, 5.2vw, 25px);
        line-height: 1.4;
        max-width: 360px;
    }

    .hero-description {
        margin-top: 28px;
        max-width: 360px;
        font-size: 16px;
        line-height: 1.7;
    }

    .about-section {
        padding: 65px 0;
    }

    .section-header {
        margin-bottom: 32px;
        gap: 8px;
    }

    .section-number {
        font-size: 17px;
        letter-spacing: 3px;
        min-width: auto;
        padding-bottom: 3px;
    }

    .section-header h2 {
        font-size: 26px;
        line-height: 1.2;
    }

    .section-content {
        max-width: none;
        font-size: 17px;
        line-height: 1.8;
    }

    .section-content p {
        margin-bottom: 22px;
    }

    .lead {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .about-question,
    .final-quote {
        margin: 30px 0;
        padding-left: 16px;
        font-size: 17px;
        line-height: 1.75;
    }

    .belief-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .belief-card {
        padding: 22px;
        border-radius: 16px;
    }

    .belief-icon {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .belief-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .belief-card p {
        font-size: 16px;
        line-height: 1.7;
    }

    .begin-button {
        width: 100%;
        max-width: 360px;
        padding: 17px 22px;
        margin-top: 35px;
        font-size: 17px;
    }
}