:root {
        --bg: #0b1220;
        --panel: #101a33;
        --panel2: #0f1830;
        --card: #0f1a34;
        --text: #eaf0ff;
        --muted: #b8c4e6;
        --muted2: #93a3d6;
        --line: rgba(255, 255, 255, .10);
        --brand: #4fb6ff;
        --brand2: #63ffa7;
        --warn: #ffcf5a;
        --radius: 18px;
        --shadow: 0 18px 50px rgba(0, 0, 0, .35);
        --shadow2: 0 10px 30px rgba(0, 0, 0, .25);
        --max: 1180px;
    }

    * {
        box-sizing: border-box
    }

    html,
    body {
        height: auto;
    }

    body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
        color: var(--text);
        background:
            radial-gradient(1200px 700px at 10% -10%, rgba(79, 182, 255, .18), transparent 60%),
            radial-gradient(1000px 600px at 90% 0%, rgba(99, 255, 167, .14), transparent 55%),
            radial-gradient(900px 650px at 50% 115%, rgba(255, 207, 90, .10), transparent 60%),
            linear-gradient(180deg, var(--bg), #070b14 70%);
        line-height: 1.55;
    }

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

    .wrap {
        max-width: var(--max);
        margin: 0 auto;
        padding: 0 18px
    }

    .skip {
        position: absolute;
        left: -999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .skip:focus {
        left: 18px;
        top: 18px;
        width: auto;
        height: auto;
        padding: 10px 12px;
        background: #fff;
        color: #000;
        border-radius: 10px;
        z-index: 9999;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        backdrop-filter: blur(10px);
        background: rgba(11, 18, 32, .55);
        border-bottom: 1px solid var(--line);
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 0;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 210px;
    }

    .logo {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(79, 182, 255, .9), rgba(99, 255, 167, .85));
        box-shadow: var(--shadow2);
        position: relative;
        overflow: hidden;
    }

    .logo:after {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .55), transparent 40%);
        transform: rotate(18deg);
    }

    .brand b {
        font-size: 15px;
        letter-spacing: .2px
    }

    .brand small {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-top: 2px
    }

    nav {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .navlinks {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .link {
        padding: 9px 10px;
        border-radius: 12px;
        color: var(--muted);
        border: 1px solid transparent;
        font-size: 13px;
    }

    .link:hover {
        color: var(--text);
        border-color: var(--line);
        background: rgba(255, 255, 255, .04)
    }

    .dropdown {
        position: relative
    }

    .dropbtn {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .caret {
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--muted);
        border-bottom: 2px solid var(--muted);
        transform: rotate(45deg);
        margin-top: -2px;
    }

    .menu {
        position: absolute;
        top: 44px;
        right: 0;
        min-width: 250px;
        background: rgba(16, 26, 51, .98);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 10px;
        display: none;
    }

    .menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        color: var(--muted);
        font-size: 13px;
    }

    .menu a:hover {
        background: rgba(255, 255, 255, .06);
        color: var(--text)
    }

    .menu a span {
        color: var(--muted2);
        font-size: 12px
    }

    .dropdown.open .menu {
        display: block
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 10px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .04);
        color: var(--text);
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
    }

    .btn:hover {
        background: rgba(255, 255, 255, .07)
    }

    .btn.primary {
        border-color: rgba(79, 182, 255, .35);
        background: linear-gradient(135deg, rgba(79, 182, 255, .20), rgba(99, 255, 167, .12));
    }

    .btn.donate {
        border-color: rgba(255, 207, 90, .38);
        background: linear-gradient(135deg, rgba(255, 207, 90, .18), rgba(79, 182, 255, .10));
    }

    .hamburger {
        display: none;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .03);
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .hamburger i {
        width: 18px;
        height: 2px;
        background: var(--text);
        display: block;
        position: relative;
    }

    .hamburger i:before,
    .hamburger i:after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: var(--text);
    }

    .hamburger i:before {
        top: -6px
    }

    .hamburger i:after {
        top: 6px
    }

    .mobile {
        display: none;
        padding: 0 0 14px;
    }

    .mobile .panel {
        background: rgba(16, 26, 51, .92);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 10px;
    }

    .mobile a {
        display: block;
        padding: 10px 12px;
        border-radius: 12px;
        color: var(--muted);
        font-size: 13px
    }

    .mobile a:hover {
        background: rgba(255, 255, 255, .06);
        color: var(--text)
    }

    .mobile .row {
        display: flex;
        gap: 10px;
        padding: 10px 12px
    }

    .mobile .row .btn {
        flex: 1
    }

    section {
        padding: 54px 0
    }

    .hero {
        padding: 42px 0 22px;
    }

    .hero-inner {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 22px;
        align-items: stretch;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(79, 182, 255, .22);
        background: rgba(79, 182, 255, .08);
        color: var(--muted);
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 12px;
        width: fit-content;
    }

    .tag b {
        color: var(--text);
        font-weight: 700
    }

    h1 {
        margin: 14px 0 10px;
        font-size: clamp(28px, 3.8vw, 46px);
        line-height: 1.06;
        letter-spacing: -.4px;
    }

    .lead {
        color: var(--muted);
        font-size: 15px;
        max-width: 58ch
    }

    .hero-cta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 18px
    }

    .hero-card {
        border: 1px solid var(--line);
        background: rgba(16, 26, 51, .65);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow2);
        overflow: hidden;
        position: relative;
    }

    .hero-card:before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(circle at 60% 40%, rgba(79, 182, 255, .22), transparent 55%);
        transform: rotate(18deg);
        pointer-events: none;
    }

    .img-slot {
        border: 1px dashed rgba(255, 255, 255, .22);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, .03);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 270px;
    }

    .img-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92;
    }

    .img-cap {
        position: absolute;
        left: 12px;
        bottom: 12px;
        font-size: 12px;
        color: rgba(255, 255, 255, .85);
        background: rgba(0, 0, 0, .30);
        border: 1px solid rgba(255, 255, 255, .16);
        padding: 6px 10px;
        border-radius: 999px;
        backdrop-filter: blur(8px);
    }

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

    .card {
        border: 1px solid var(--line);
        background: rgba(16, 26, 51, .50);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow2);
    }

    .card h3 {
        margin: 0 0 6px;
        font-size: 14px
    }

    .card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px
    }

    .kpi {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: rgba(79, 182, 255, .12);
        border: 1px solid rgba(79, 182, 255, .22);
        flex: 0 0 auto;
    }

    .icon.green {
        background: rgba(99, 255, 167, .10);
        border-color: rgba(99, 255, 167, .18)
    }

    .icon.gold {
        background: rgba(255, 207, 90, .10);
        border-color: rgba(255, 207, 90, .20)
    }

    .icon.purple {
        background: rgba(167, 117, 255, .10);
        border-color: rgba(167, 117, 255, .18)
    }

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

    .section-head h2 {
        margin: 0;
        font-size: 22px;
        letter-spacing: -.2px;
    }

    .section-head p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        max-width: 70ch
    }

    .two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .panel {
        border: 1px solid var(--line);
        background: rgba(16, 26, 51, .45);
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: var(--shadow2);
    }

    .list {
        display: grid;
        gap: 10px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    .list li {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        color: var(--muted);
        font-size: 13px;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin-top: 4px;
        background: var(--brand);
        box-shadow: 0 0 0 4px rgba(79, 182, 255, .12);
        flex: 0 0 auto;
    }

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

    .course {
        padding: 16px !important;
        border-radius: var(--radius) !important;
        border: 1px solid var(--line) !important;
        background: rgba(255, 255, 255, 0.85) !important;
        box-shadow: var(--shadow2) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        /* min-height: 210px; */
    }

    .course .thumb {
        border-radius: 16px;
        overflow: hidden;
        border: 1px dashed rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .03);
        height: 200px;
        position: relative;
    }

    .course .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        border: 1px solid rgba(255, 255, 255, .10);
        padding: 6px 10px;
        border-radius: 999px;
        width: fit-content;
        background: rgba(255, 255, 255, .03);
    }

    .course h3 {
        margin: 0;
        font-size: 15px
    }

    .course p {
        margin: 0;
        color: var(--muted);
        font-size: 13px
    }

    .course .meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        color: var(--muted2);
        font-size: 12px
    }

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

    .program {
        border: 1px solid var(--line);
        background: rgba(16, 26, 51, .50);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow2);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .program .img-mini {
        height: 120px;
        border-radius: 16px;
        border: 1px dashed rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .03);
        overflow: hidden;
        position: relative;
    }

    .program .img-mini img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92
    }

    .program h3 {
        margin: 0;
        font-size: 15px
    }

    .program p {
        margin: 0;
        color: var(--muted);
        font-size: 13px
    }

    .cta {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 16px;
        align-items: stretch;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .12);
        background:
            radial-gradient(700px 400px at 15% 20%, rgba(26, 94, 43, 0.05), transparent 80%),
            radial-gradient(700px 400px at 85% 80%, rgba(211, 47, 47, 0.04), transparent 80%),
            #f8fafd;
        padding: 20px;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

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

    .cta p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        max-width: 66ch
    }

    .cta .box {
        border: 1px dashed rgba(255, 255, 255, .22);
        border-radius: 20px;
        background: rgba(255, 255, 255, .03);
        overflow: hidden;
        position: relative;
        min-height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta .box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92
    }

    .cta .box .img-cap {
        left: 10px;
        bottom: 10px
    }

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

    blockquote {
        margin: 0;
        padding: 16px;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        background: rgba(16, 26, 51, .50);
        box-shadow: var(--shadow2);
        color: var(--muted);
        font-size: 13px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .person {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: auto;
        color: var(--text);
        font-weight: 700;
        font-size: 13px;
    }

    .avatar {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px dashed rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .03);
        overflow: hidden;
        flex: 0 0 auto;
    }

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92
    }

    .person span {
        display: block;
        color: #144620;
        font-weight: 600;
        font-size: 12px
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px
    }

    .logo-slot {
        height: 86px;
        border-radius: 14px;
        border: 1px dashed rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .03);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .65);
        font-size: 12px;
        overflow: hidden;
    }

    .logo-slot img {
        max-width: 80%;
        max-height: 70%;
        object-fit: contain;
        display: block;
        opacity: .95;
        border-radius: 50%;
    }

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

    .gallery .img-mini {
        height: 140px;
        border-radius: 18px;
        border: 1px dashed rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .03);
        overflow: hidden
    }

    .gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .92
    }

    footer {
        border-top: 1px solid var(--line);
        background: rgba(7, 11, 20, .75);
        padding: 44px 0 22px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: 18px;
    }

    .foot h3 {
        margin: 0 0 10px;
        font-size: 14px
    }

    .foot a {
        display: block;
        padding: 8px 0;
        color: var(--muted);
        font-size: 13px;
    }

    .foot a:hover {
        color: var(--text)
    }

    .social {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .03);
        color: var(--muted);
        font-size: 12px;
    }

    .copy {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        color: var(--muted2);
        font-size: 12px;
    }

    @media (max-width: 980px) {
        .hero-inner {
            grid-template-columns: 1fr
        }

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

        .course-grid {
            grid-template-columns: 1fr
        }

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

        .two {
            grid-template-columns: 1fr
        }

        .cta {
            grid-template-columns: 1fr
        }

        .quote-grid {
            grid-template-columns: 1fr
        }

        .logo-grid {
            grid-template-columns: repeat(3, 1fr)
        }

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

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

        .navlinks,
        .actions {
            display: none
        }

        .hamburger {
            display: inline-flex
        }

        .mobile {
            display: block
        }

        .mobile[hidden] {
            display: none
        }
    }

    :root {
        /* الألوان المستوحاة من اللوجو */
        --brand-green: #1a5e2b;
        /* الأخضر الأساسي */
        --brand-red: #d32f2f;
        /* الأحمر (السهم) */
        --bg: #f8f9fa;
        /* خلفية فاتحة مريحة */
        --panel: #ffffff;
        /* لوحات بيضاء */
        --text: #1a1a1a;
        /* نص غامق للوضوح */
        --muted: #5f6368;
        /* نص ثانوي */
        --line: rgba(0, 0, 0, .08);
        /* خطوط تقسيم خفيفة */

        /* تحويل الألوان المتدرجة لتناسب الهوية الجديدة */
        --brand: var(--brand-green);
        --brand2: var(--brand-red);
        --warn: #ffb300;

        --radius: 12px;
        --shadow: 0 10px 30px rgba(0, 0, 0, .08);
        --shadow2: 0 4px 12px rgba(0, 0, 0, .05);
        --max: 1180px;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--text);
        background:
            radial-gradient(circle at 10% 10%, rgba(26, 94, 43, 0.05), transparent 40%),
            radial-gradient(circle at 90% 90%, rgba(211, 47, 47, 0.05), transparent 40%),
            var(--bg);
        line-height: 1.6;
    }

    /* تحديث الهيدر */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.85);
        border-bottom: 2px solid var(--brand-green);
    }

    .logo {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        /* شعار يدمج الأخضر والأحمر */
        background: linear-gradient(135deg, var(--brand-green), var(--brand-red));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* تحديث الأزرار */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        border-radius: 8px;
        border: 1px solid #144620 !important;
        background: #fff !important;
        color: var(--text) !important;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .btn.primary {
        background: var(--brand-green) !important;
        color: #fff !important;
        border: none;
    }

    .btn.primary:hover {
        background: #144620 !important;
        transform: translateY(-2px);
    }

    .btn.donate {
        background: var(--brand-red) !important;
        color: #fff !important;
        border: none;
    }

    .btn.donate:hover {
        background: #b71c1c !important;
    }

    /* الكروت */
    .card,
    .panel,
    .hero-card {
        background: var(--panel);
        border: 1px solid var(--line);
        box-shadow: var(--shadow2);
        border-radius: var(--radius);
        transition: transform 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
        border-color: var(--brand-green);
    }

    /* التاج (العلامة العلوية) */
    .tag {
        background: rgba(26, 94, 43, 0.1);
        color: var(--brand-green);
        border: 1px solid rgba(26, 94, 43, 0.2);
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: bold;
    }

    /* الأيقونات */
    .icon {
        background: rgba(26, 94, 43, 0.1);
        border: 1px solid rgba(26, 94, 43, 0.1);
    }

    .icon.green {
        background: rgba(26, 94, 43, 0.1);
    }

    .icon.gold {
        background: rgba(211, 47, 47, 0.1);
    }

    /* نقاط القائمة */
    .dot {
        background: var(--brand-red);
        box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);
    }

    h1,
    h2,
    h3 {
        color: var(--brand-green);
    }

    /* تعديل الهيرو سكشن */
    .hero-card {
        border-right: 5px solid var(--brand-red);
        /* لمسة جمالية من لون السهم */
    }

    /* الروابط */
    .link:hover {
        color: var(--brand-green);
        background: rgba(26, 94, 43, 0.05);
    }