:root{
    --primary:#0f172a;
    --secondary:#1e40af;
    --accent:#38bdf8;
    --gold:#facc15;
    --light:#f8fafc;
    --glass:rgba(255,255,255,.12);
}

/* =====================================================
BACKGROUND
===================================================== */

body{
    font-family:'Sarabun',sans-serif;
    background:
        radial-gradient(circle at top left,#1e3a8a 0%,transparent 30%),
        radial-gradient(circle at bottom right,#0ea5e9 0%,transparent 30%),
        linear-gradient(135deg,#020617,#0f172a,#111827);
    min-height:100vh;
    overflow-x:hidden;
    color:#fff;
}

/* floating glow */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 20%),
        radial-gradient(circle at 80% 70%,rgba(56,189,248,.10),transparent 25%);
    pointer-events:none;
    z-index:0;
}




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

.council-hero{
    position:relative;
    z-index:2;
    padding:90px 20px 60px;
    text-align:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:999px;

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

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

    backdrop-filter:blur(14px);

    color:#000;

    font-weight:100;

    margin-bottom:24px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        inset 0 0 20px rgba(255,255,255,.03);
}

.council-title{
    font-size:clamp(2rem,5vw,4rem);
    font-weight:200;
    line-height:1.2;
    margin-bottom:18px;

    background:linear-gradient(191deg,#fff,#0078ff,#00b7cf);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.council-subtitle{
    color:rgba(255,255,255,.75);
    max-width:850px;
    margin:auto;
    font-size:1.08rem;
}

/* =====================================================
SECTION TITLE
===================================================== */

.section-title{
    position:relative;
    margin-bottom:35px;
    padding-left:24px;

    font-size:1.7rem;
    
    font-weight: normal;
    color:#000;
}

.section-title::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:100%;

    border-radius:999px;

    background:linear-gradient(to bottom,#38bdf8,#2563eb);
}

/* =====================================================
GLASS CARD
===================================================== */

.member-card{
    position:relative;

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

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

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    transition:.45s ease;

    box-shadow:
        0 10px 40px rgba(0,0,0,.25),
        inset 0 0 20px rgba(255,255,255,.02);

    height:100%;
}

.member-card:hover{
    transform:translateY(-12px) scale(1.02);

    box-shadow:
        0 25px 60px rgba(14,165,233,.28),
        0 0 25px rgba(59,130,246,.25);
}

/* glow */
.member-card::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.15),
            transparent 40%
        );

    pointer-events:none;
}

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

.member-image-wrap{
    position:relative;
    overflow:hidden;
}

.member-image{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;

    transition:transform .6s ease;
}

.member-card:hover .member-image{
    transform:scale(1.08);
}

.member-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(2,6,23,.95),
            transparent 60%
        );
}

/* =====================================================
BADGE
===================================================== */

.position-badge{
    position:absolute;
    left:16px;
    top:16px;

    background:linear-gradient(135deg,#facc15,#f59e0b);

    color:#111827;

    padding:8px 14px;

    border-radius:999px;

    font-size:.82rem;
    font-weight:800;

    box-shadow:0 10px 20px rgba(250,204,21,.35);
}

/* =====================================================
CONTENT
===================================================== */

.member-content{
    padding:24px;
    position:relative;
    z-index:2;
}

.member-name{
    font-size:1.15rem;
    font-weight:800;
    color:#0a0707;
    margin-bottom:8px;
}

.member-position{
    color:#000000;
    margin-bottom:14px;
}

.member-divider{
    width:60px;
    height:4px;
    border-radius:999px;
    margin:auto;

    background:linear-gradient(90deg,#38bdf8,#2563eb);
}

/* =====================================================
PRESIDENT CARD
===================================================== */

.president-card{
    max-width:420px;
    margin:auto;
}

.president-card .member-image{
    aspect-ratio:4/4.7;
}

.president-card .member-name{
    font-size:1.6rem;
}

/* =====================================================
ZONE BOX
===================================================== */

.zone-box{
    position:relative;

    padding:35px;

    border-radius:30px;

    margin-bottom:50px;

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

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

    backdrop-filter:blur(16px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.18);
}

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

.fade-up{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:none;
    }
}

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

@media(max-width:768px){

    .council-hero{
        padding-top:60px;
    }

    .zone-box{
        padding:22px;
    }

    .member-content{
        padding:18px;
    }

}