/* =========================================================
   TRADE ACADEMY — ABOUT PAGE
   Page-only CSS. Does NOT style the shared header/footer.
   ========================================================= */

body.ta-about-page{
    margin:0;
    padding:0;
    background:#F4F8FB;
    color:#0F172A;
    font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}

body.ta-about-page main.wrap{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:38px 0 54px;
}


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

body.ta-about-page main.wrap .about-hero{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr);
    gap:20px;
    align-items:stretch;

    padding:30px;

    background:
        radial-gradient(circle at 0 0,rgba(56,189,248,.16),transparent 35%),
        linear-gradient(135deg,#07131A,#0B2230 70%,#0A566C);

    border:1px solid rgba(56,189,248,.20);
    border-radius:24px;

    box-shadow:0 18px 44px rgba(7,19,26,.12);
}

body.ta-about-page main.wrap .eyebrow{
    display:inline-flex;
    padding:6px 11px;
    margin-bottom:12px;

    background:rgba(56,189,248,.10);
    color:#8AD8FF;
    -webkit-text-fill-color:#8AD8FF;

    border:1px solid rgba(138,216,255,.25);
    border-radius:999px;

    font-size:11px;
    font-weight:900;
}

body.ta-about-page main.wrap .about-hero h1{
    margin:0 0 14px;

    color:#FFFFFF;
    -webkit-text-fill-color:#FFFFFF;

    font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:clamp(34px,4vw,52px);
    line-height:1.18;
    font-weight:950;
}

body.ta-about-page main.wrap .about-hero > div:first-child > p{
    margin:0;
    max-width:720px;

    color:#C8D9E2;
    -webkit-text-fill-color:#C8D9E2;

    font-size:14px;
    line-height:1.95;
}


/* ================= ACTIONS ================= */

body.ta-about-page main.wrap .about-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}

body.ta-about-page main.wrap .about-actions .btn{
    min-height:44px;
    padding:10px 17px;

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

    background:linear-gradient(135deg,#38BDF8,#0E7490);

    color:#FFFFFF;
    -webkit-text-fill-color:#FFFFFF;

    border:0;
    border-radius:12px;

    text-decoration:none;
    font-size:13px;
    font-weight:900;

    box-shadow:0 10px 22px rgba(14,116,144,.18);
}

body.ta-about-page main.wrap .about-actions .about-btn-secondary{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:none;
}


/* ================= PHILOSOPHY ================= */

body.ta-about-page main.wrap .signal-card{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:24px;

    background:#FFFFFF;
    border:1px solid #CFE3ED;
    border-radius:19px;

    box-shadow:0 12px 28px rgba(15,23,42,.07);
}

body.ta-about-page main.wrap .signal-label{
    color:#0E7490;
    -webkit-text-fill-color:#0E7490;
    font-size:11px;
    font-weight:900;
}

body.ta-about-page main.wrap .signal-card .big{
    margin-top:8px;

    color:#0F172A;
    -webkit-text-fill-color:#0F172A;

    font-size:clamp(24px,2.5vw,35px);
    line-height:1.3;
    font-weight:950;
}

body.ta-about-page main.wrap .signal-card p{
    margin:12px 0 0;

    color:#475569;
    -webkit-text-fill-color:#475569;

    font-size:13px;
    line-height:1.85;
}


/* ================= SERVICES ================= */

body.ta-about-page main.wrap .services{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;

    margin-top:16px;
}

body.ta-about-page main.wrap .service{
    min-width:0;
    min-height:175px;
    padding:20px;

    background:#FFFFFF;
    border:1px solid #D6E5ED;
    border-radius:18px;

    box-shadow:0 9px 24px rgba(15,23,42,.045);
}

body.ta-about-page main.wrap .service .icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    margin-bottom:13px;

    background:#EAF7FB;
    border:1px solid #B9E5F2;
    border-radius:12px;

    font-size:20px;
}

body.ta-about-page main.wrap .service h3{
    margin:0 0 7px;

    color:#0F172A;
    -webkit-text-fill-color:#0F172A;

    font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:16px;
    font-weight:900;
}

body.ta-about-page main.wrap .service p{
    margin:0;

    color:#526477;
    -webkit-text-fill-color:#526477;

    font-size:13px;
    line-height:1.8;
}


/* IMPORTANT:
   No header/nav/.btn global selectors here.
   Shared header keeps exactly its normal size.
*/


@media(max-width:850px){
    body.ta-about-page main.wrap .about-hero{
        grid-template-columns:1fr;
        padding:22px;
    }

    body.ta-about-page main.wrap .services{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:560px){
    body.ta-about-page main.wrap{
        width:min(100% - 24px,1180px);
        padding-top:22px;
    }

    body.ta-about-page main.wrap .about-hero{
        padding:18px;
        border-radius:19px;
    }

    body.ta-about-page main.wrap .services{
        grid-template-columns:1fr;
    }

    body.ta-about-page main.wrap .service{
        min-height:auto;
    }

    body.ta-about-page main.wrap .about-actions .btn{
        width:100%;
    }
}