/* ==========================================================
   ABOUT PAGE
========================================================== */

.about-page{
    width:min(1200px,92%);
    margin:0 auto;
    padding:7rem 0 5rem;
}

/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================================================
   HERO
========================================================== */

.about-hero{
    text-align:center;
    max-width:900px;
    margin:0 auto 6rem;
}

.hero-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.65rem 1.25rem;

    margin-bottom:1.75rem;

    border-radius:999px;

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

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

    backdrop-filter:blur(14px);

    font-size:.85rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:rgba(255,255,255,.85);

}

.about-hero h1{

    font-family:"Montserrat",sans-serif;

    font-size:clamp(3.4rem,7vw,5.8rem);

    line-height:1.05;

    margin-bottom:1.75rem;

    letter-spacing:-2px;

}

.about-hero h1 span{

    display:block;

    background:linear-gradient(
        90deg,
        #ffffff,
        rgba(255,255,255,.70)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.about-hero p{

    max-width:720px;

    margin:0 auto;

    font-size:1.15rem;

    line-height:2;

    color:rgba(255,255,255,.78);

}

/* ==========================================================
   SHARED SECTION TAG
========================================================== */

.section-tag{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:rgba(255,255,255,.65);

}

/* ==========================================================
   SHARED HEADINGS
========================================================== */

.about-page h2{

    font-size:clamp(2rem,4vw,3rem);

    margin-bottom:1.25rem;

    line-height:1.2;

}

.about-page h3{

    font-size:1.45rem;

    margin-bottom:1rem;

}

.about-page p{

    line-height:1.9;

    color:rgba(255,255,255,.82);

}

/* ==========================================================
   GLASS EFFECT
========================================================== */

.surface{

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.surface:hover{

    border-color:rgba(255,255,255,.15);

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

}

/* ==========================================================
   SECTION SPACING
========================================================== */

.about-story,
.vision-section,
.team-section,
.about-closing{

    margin-top:7rem;

}

/* ==========================================================
   OUR STORY
========================================================== */

.about-story{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.story-card{

    position:relative;

    width:100%;

    padding:4rem;

    border-radius:32px;

    overflow:hidden;

}

/* Decorative Glow */

.story-card::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-220px;
    right:-180px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.08),
        transparent 70%
    );

    pointer-events:none;

}

.story-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

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

    pointer-events:none;

}

.story-card:hover{

    transform:translateY(-6px);

}

.story-card h2{

    margin-bottom:2rem;

    max-width:650px;

}

.story-card p{

    font-size:1.05rem;

    margin-bottom:1.5rem;

    max-width:900px;

}

.story-card p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   STORY HIGHLIGHT
========================================================== */

.story-highlight{

    position:relative;

    max-width:900px;

    margin:3.5rem auto 0;

    padding:2rem 3rem;

    text-align:center;

}

.story-highlight::before{

    content:"“";

    position:absolute;

    top:-20px;
    left:0;

    font-size:6rem;

    line-height:1;

    opacity:.08;

    font-family:Georgia, serif;

}

.story-highlight p{

    font-size:1.5rem;

    line-height:1.7;

    font-weight:500;

    color:#fff;

}

.story-highlight strong{

    font-weight:700;

}

/* ==========================================================
   STORY EMPHASIS
========================================================== */

.story-card strong{

    color:#fff;

    font-weight:600;

}

/* ==========================================================
   SUBTLE DIVIDER
========================================================== */

.story-highlight::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    margin:2.5rem auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

}

/* ==========================================================
   VISION & MISSION
========================================================== */

.vision-section{
    width:100%;
}

.vision-grid{

    display:grid;

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

    gap:2rem;

}

.vm-card{

    position:relative;

    padding:3rem;

    border-radius:30px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

}

.vm-card::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    top:-140px;
    right:-140px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.08),
        transparent 70%
    );

    pointer-events:none;

}

.vm-card:hover{

    transform:translateY(-8px);

}

.vm-icon{

    width:80px;
    height:80px;

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

    margin-bottom:2rem;

    border-radius:20px;

    font-size:2rem;

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

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

    backdrop-filter:blur(12px);

}

.vm-card h3{

    margin-bottom:1.25rem;

    line-height:1.3;

}

.vm-card p{

    margin-top:auto;

    font-size:1rem;

    line-height:1.9;

}

/* ==========================================================
   TEAM SECTION
========================================================== */

.team-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 4rem;

}

.team-header h2{

    margin-bottom:1.5rem;

}

.team-header p{

    font-size:1.05rem;

}

/* ==========================================================
   TEAM GRID
========================================================== */

.team-grid{

    display:grid;

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

    gap:2rem;

}

.team-card{

    overflow:hidden;

    border-radius:28px;

    padding:1.25rem;

}

.team-card:hover{

    transform:translateY(-10px);

}

/* ==========================================================
   MEMBER IMAGE
========================================================== */

.member-image{

    overflow:hidden;

    border-radius:22px;

    margin-bottom:1.5rem;

}

.member-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}

.team-card:hover .member-image img{

    transform:scale(1.06);

}

/* ==========================================================
   MEMBER INFO
========================================================== */

.member-info{

    text-align:center;

}

.member-info h3{

    font-size:1.15rem;

    line-height:1.4;

    margin-bottom:.5rem;

    min-height:56px;

}

.member-role{

    margin-bottom:1.5rem;

    font-size:.95rem;

    color:rgba(255,255,255,.65);

}

.member-info a{

    display:inline-flex;

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

    padding:.8rem 1.5rem;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

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

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

    transition:all .3s ease;

}

.member-info a:hover{

    transform:translateY(-2px);

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

    border-color:rgba(255,255,255,.18);

}

/* ==========================================================
   CLOSING SECTION
========================================================== */

.about-closing{

    margin-top:8rem;

}

.closing-card{

    position:relative;

    padding:4rem;

    border-radius:32px;

    text-align:center;

    overflow:hidden;

}

.closing-card::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:50%;

    top:-320px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.08),
        transparent 70%
    );

    pointer-events:none;

}

.closing-card h2{

    margin-bottom:1.5rem;

}

.closing-card p{

    max-width:720px;

    margin:0 auto;

    font-size:1.05rem;

    line-height:2;

}

.closing-actions{

    margin-top:2.5rem;

}

.closing-actions .login-btn{

    display:inline-flex;

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

    min-width:220px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .team-grid{

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

    }

}

@media (max-width:900px){

    .about-page{

        width:min(94%,900px);

        padding-top:6rem;

    }

    .vision-grid{

        grid-template-columns:1fr;

    }

    .team-grid{

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

    }

    .story-card,
    .closing-card{

        padding:3rem;

    }

}

@media (max-width:640px){

    .about-page{

        width:92%;

        padding-top:5rem;

    }

    .about-hero{

        margin-bottom:4rem;

    }

    .about-hero h1{

        font-size:2.7rem;

    }

    .about-hero p{

        font-size:1rem;

    }

    .story-card{

        padding:2rem;

    }

    .story-highlight{

        padding:1rem;

    }

    .story-highlight p{

        font-size:1.2rem;

    }

    .vm-card{

        padding:2rem;

    }

    .team-grid{

        grid-template-columns:1fr;

    }

    .team-card{

        max-width:360px;

        margin:0 auto;

    }

    .closing-card{

        padding:2.5rem 2rem;

    }

}

@media (max-width:420px){

    .about-page{

        width:94%;

    }

    .hero-badge,
    .section-tag{

        font-size:.75rem;

    }

    .member-info h3{

        font-size:1rem;

        min-height:auto;

    }

    .member-role{

        font-size:.85rem;

    }

    .member-info a{

        width:100%;

    }

}

/* ==========================================================
   SCROLLBAR (OPTIONAL)
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

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

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

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

}