:root{
    --red:#e31318;
    --red2:#b90d12;
    --ink:#111820;
    --muted:#667085;
    --line:#e8eaee;
    --soft:#fff4f4;
    --bg:#fff;
    --shadow:0 14px 40px rgba(17,24,32,.08);
    --radius:20px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.6;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:min(1160px,92%);
    margin:auto;
}

/* =========================
   HEADER
========================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

.nav{
    min-height:78px;
    display:flex;
    align-items:center;
    gap:20px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
}

.brand img{
    width:54px;
    height:54px;
    object-fit:contain;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-text b{
    font-size:18px;
    letter-spacing:.02em;
}

.brand-text small{
    letter-spacing:.28em;
    color:var(--muted);
    font-size:10px;
    margin-top:6px;
}

.donate-top,
.nav-donate{
    background:var(--red);
    color:#fff;
    border-radius:999px;
    padding:12px 19px;
    font-weight:800;
    box-shadow:0 8px 20px rgba(227,19,24,.18);
    transition:.2s ease;
}

.donate-top:hover,
.nav-donate:hover{
    background:var(--red2);
    transform:translateY(-1px);
}

.nav-links{
    display:flex;
    gap:20px;
    align-items:center;
    font-size:14px;
    font-weight:700;
}

.nav-links a:not(.nav-donate):hover{
    color:var(--red);
}

.menu-btn{
    display:none;
    border:0;
    background:none;
    font-size:28px;
    cursor:pointer;
    color:var(--ink);
}

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

.hero{
    position:relative;
    min-height:620px;
    overflow:hidden;
    background:#101010;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-slide.active{
    opacity:1;
}

.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.78),
        rgba(0,0,0,.28),
        rgba(0,0,0,.12)
    );
}

.hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    min-height:620px;
    display:flex;
    align-items:center;
}

.hero-copy{
    max-width:650px;
    padding:60px 0;
}

.eyebrow{
    color:#ff6a6e;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:900;
    font-size:13px;
}

.hero h1{
    font-size:clamp(42px,7vw,76px);
    line-height:1.02;
    margin:15px 0;
}

.hero p{
    font-size:20px;
    max-width:580px;
    color:#f1f1f1;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:12px;
    padding:13px 20px;
    font-weight:800;
    border:1px solid transparent;
    cursor:pointer;
    transition:.2s ease;
}

.btn-primary{
    background:var(--red);
    color:#fff;
}

.btn-primary:hover{
    background:var(--red2);
    transform:translateY(-1px);
}

.btn-outline{
    border-color:#fff;
    color:#fff;
}

.btn-outline:hover{
    background:#fff;
    color:var(--ink);
}

.btn-light{
    background:#fff;
    color:var(--ink);
}

.btn-light:hover{
    background:#f3f4f6;
}

/* =========================
   GENERAL SECTIONS
========================= */

.section{
    padding:78px 0;
}

.section.soft{
    background:var(--soft);
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:end;
    margin-bottom:30px;
}

.section-head h2{
    font-size:clamp(28px,4vw,44px);
    line-height:1.1;
    margin:0;
}

.section-head p{
    color:var(--muted);
    max-width:620px;
    margin:8px 0 0;
}

.accent{
    color:var(--red);
}

/* =========================
   CARDS
========================= */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(17,24,32,.12);
}

.card img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}

.card-body{
    padding:22px;
}

.card h3{
    margin:0 0 7px;
    font-size:21px;
}

.card p{
    color:var(--muted);
}

.chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.chip{
    background:#fff1f1;
    color:var(--red);
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

/* =========================
   STATS
========================= */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.stat{
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}

.stat strong{
    font-size:34px;
    display:block;
    color:var(--red);
}

/* =========================
   SPLIT
========================= */

.split{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;
}

.photo-card{
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.photo-card img{
    aspect-ratio:4/3;
    object-fit:cover;
}

/* =========================
   EVENTS
========================= */

.event{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:25px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:14px;
    box-shadow:var(--shadow);
    margin-bottom:18px;
}

.event:last-child{
    margin-bottom:0;
}

.event img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:15px;
}

.date-badge{
    color:var(--red);
    font-weight:900;
}

/* =========================
   FORMS
========================= */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    font-weight:800;
    font-size:13px;
}

.field input,
.field textarea,
.field select{
    width:100%;
    border:1px solid #dfe3e8;
    border-radius:13px;
    padding:14px 15px;
    font:inherit;
    outline:none;
    background:#fff;
}

.field textarea{
    min-height:150px;
    resize:vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
    border-color:var(--red);
    box-shadow:0 0 0 4px rgba(227,19,24,.08);
}

/* =========================
   CONTACT
========================= */

.contact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.contact-box{
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    text-align:center;
}

.contact-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff0f0;
    color:var(--red);
    display:grid;
    place-items:center;
    margin:0 auto 12px;
    font-size:21px;
}

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

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.person{
    text-align:center;
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px;
    background:#fff;
}

.person img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:15px;
    background:#f2f4f7;
}

.person h3{
    margin:13px 0 2px;
}

.person p{
    margin:0;
    color:var(--muted);
}

.person .socials{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:12px;
    color:var(--red);
}

/* =========================
   GALLERY
========================= */

.gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.gallery img{
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:18px;
}

/* =========================
   CTA
========================= */

.cta{
    background:linear-gradient(135deg,#d70e13,#f3282d);
    color:#fff;
    border-radius:28px;
    padding:42px;
}

.cta h2{
    margin:0;
    font-size:34px;
}

/* =========================
   DONATION
========================= */

.donate-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
}

.account{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:15px;
    padding:15px;
    margin:10px 0;
}

.account-number{
    font-size:24px;
    font-weight:900;
    letter-spacing:.04em;
}

.copy{
    border:0;
    background:#111820;
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
}

.notice{
    padding:14px 16px;
    border-radius:12px;
    background:#f0fdf4;
    color:#166534;
    margin-bottom:20px;
}

.empty{
    padding:30px;
    border:1px dashed #cfd4dc;
    border-radius:18px;
    color:var(--muted);
    text-align:center;
}

/* =========================
   FOOTER
========================= */

.footer{
    background:#10151b;
    color:#fff;
    padding:60px 0 0;
    width:100%;
}

.footer-container{
    width:min(1160px,92%);
    margin:auto;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1.1fr;
    gap:45px;
    align-items:start;
}

.footer-brand,
.footer-column{
    min-width:0;
}

.footer-logo{
    width:190px;
    max-width:100%;
    margin-bottom:16px;
    filter:brightness(0) invert(1);
}

.footer-brand p,
.footer-column p{
    color:#c5cbd2;
    font-size:14px;
    line-height:1.7;
    margin:0 0 12px;
}

.footer-brand > p{
    max-width:330px;
    margin-bottom:20px;
}

.footer-column h4{
    margin:0 0 17px;
    font-size:16px;
    font-weight:800;
    color:#fff;
}

.footer-column a{
    display:block;
    width:fit-content;
    color:#c5cbd2;
    font-size:14px;
    margin:0 0 11px;
    text-decoration:none;
    transition:.2s ease;
}

.footer-column a:hover{
    color:#fff;
    transform:translateX(2px);
}

.footer-bottom{
    min-height:70px;
    margin-top:50px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:#929aa4;
    font-size:13px;
}

.footer-bottom a{
    color:#bfc5cc;
}

.footer-bottom a:hover{
    color:#fff;
}

/* =========================
   FLOATING WHATSAPP CHAT
========================= */

.footer-whatsapp{
    position:fixed !important;
    right:22px;
    bottom:22px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    transition:transform .2s ease,box-shadow .2s ease;
    text-decoration:none !important;
    margin:0 !important;
    font-size:0 !important;
}

.footer-whatsapp:hover{
    transform:scale(1.08);
    box-shadow:0 12px 30px rgba(0,0,0,.3);
    color:#fff !important;
}

.footer-whatsapp svg{
    width:31px;
    height:31px;
    fill:#fff;
    display:block;
}

/* little live-chat notification dot */
.footer-whatsapp::after{
    content:"";
    position:absolute;
    top:2px;
    right:2px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#e31318;
    border:2px solid #fff;
}

/* subtle pulse */
.footer-whatsapp::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.35);
    animation:whatsappPulse 2s infinite;
    pointer-events:none;
}

@keyframes whatsappPulse{
    0%{
        transform:scale(.9);
        opacity:.8;
    }
    70%{
        transform:scale(1.15);
        opacity:0;
    }
    100%{
        transform:scale(1.15);
        opacity:0;
    }
}

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

.page-hero{
    background:#151a20;
    color:#fff;
    padding:80px 0;
    background-size:cover;
    background-position:center;
}

.page-hero h1{
    font-size:52px;
    margin:0 0 10px;
}

.page-hero p{
    max-width:650px;
    color:#d7dbe0;
}

/* =========================
   PROGRAMS
========================= */

.program-detail{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:30px;
    align-items:start;
}

.program-detail img{
    width:100%;
    border-radius:20px;
}

.list{
    padding-left:20px;
}

.list li{
    margin:8px 0;
}

/* =========================
   TABLES
========================= */

.table-wrap{
    overflow:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th,
.table td{
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    white-space:nowrap;
}

.badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    background:#eef2ff;
    font-size:12px;
    font-weight:800;
}

/* =========================
   ADMIN
========================= */

.admin-body{
    background:#f6f7f9;
}

.admin-shell{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:100vh;
}

.sidebar{
    background:#111820;
    color:#fff;
    padding:22px;
    position:sticky;
    top:0;
    height:100vh;
}

.sidebar .logo{
    width:150px;
    filter:brightness(0) invert(1);
    margin-bottom:25px;
}

.sidebar a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    color:#d9dde3;
    margin:4px 0;
}

.sidebar a:hover,
.sidebar a.active{
    background:#242c36;
    color:#fff;
}

.admin-main{
    padding:30px;
}

.admin-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.admin-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.admin-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
}

.admin-card strong{
    font-size:30px;
    color:var(--red);
}

.admin-form{
    background:#fff;
    padding:24px;
    border-radius:18px;
    border:1px solid var(--line);
    margin-bottom:25px;
}

.admin-table{
    background:#fff;
    padding:15px;
    border-radius:18px;
    border:1px solid var(--line);
}

.danger{
    color:#b42318;
}

/* =========================
   LOGIN
========================= */

.login-wrap{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#fdf2f2,#f6f7f9);
}

.login-box{
    width:min(430px,92%);
    background:#fff;
    padding:35px;
    border-radius:24px;
    box-shadow:var(--shadow);
}

.login-box img{
    width:180px;
    margin:0 auto 20px;
}

.small{
    font-size:13px;
    color:var(--muted);
}

/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .nav-links{
        position:fixed;
        top:78px;
        left:0;
        right:0;
        background:#fff;
        padding:20px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        box-shadow:var(--shadow);
        border-top:1px solid var(--line);
        max-height:calc(100vh - 78px);
        overflow-y:auto;
    }

    body.menu-open .nav-links{
        display:flex;
    }

    .menu-btn{
        display:block;
    }

    .donate-top{
        display:none;
    }

    .cards,
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .split{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1.5fr 1fr 1fr;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .program-detail{
        grid-template-columns:1fr;
    }

    .admin-shell{
        grid-template-columns:1fr;
    }

    .sidebar{
        position:relative;
        height:auto;
    }

    .admin-cards{
        grid-template-columns:repeat(2,1fr);
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

    .container{
        width:91%;
    }

    .nav{
        min-height:68px;
    }

    .nav-links{
        top:68px;
        max-height:calc(100vh - 68px);
    }

    .brand img{
        width:48px;
        height:48px;
    }

    .brand-text b{
        font-size:14px;
    }

    .brand-text small{
        font-size:8px;
    }

    .hero,
    .hero-content{
        min-height:590px;
    }

    .hero-copy{
        padding:30px 0;
    }

    .hero h1{
        font-size:45px;
    }

    .hero p{
        font-size:16px;
    }

    .section{
        padding:55px 0;
    }

    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .cards,
    .team-grid,
    .stats,
    .contact-grid,
    .gallery{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full{
        grid-column:auto;
    }

    .event{
        grid-template-columns:1fr;
    }

    .event img{
        height:220px;
    }

    .page-hero{
        padding:55px 0;
    }

    .page-hero h1{
        font-size:40px;
    }

    .footer{
        padding-top:45px;
    }

    .footer-container{
        width:91%;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:35px 25px;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-logo{
        width:175px;
    }

    .footer-bottom{
        margin-top:35px;
        padding:18px 0;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .account{
        grid-template-columns:1fr;
    }

    .account-number{
        font-size:21px;
    }

    .admin-main{
        padding:18px;
    }

    .admin-cards{
        grid-template-columns:1fr 1fr;
    }

    /* floating WhatsApp */
    .footer-whatsapp{
        width:55px;
        height:55px;
        right:16px;
        bottom:16px;
    }

    .footer-whatsapp svg{
        width:29px;
        height:29px;
    }
}

/* =========================
   VERY SMALL PHONES
========================= */

@media(max-width:400px){

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-column a{
        margin-bottom:9px;
    }

    .footer-whatsapp{
        width:52px;
        height:52px;
        right:14px;
        bottom:14px;
    }
}