:root {
    --paper: #2a1016;
    --paper-2: rgba(255,255,255,0.05);
    --surface: rgba(255,255,255,0.05);
    --ink: #f8eeef;
    --solid: #1c0a0f;
    --ink-2: #e7c4c4;
    --muted: #b09192;
    --line: rgba(255,255,255,0.10);
    --line-2: rgba(255,255,255,0.16);
    --e01: #e0464f;
    --e10: #e88a3c;
    --e11: #c03a6a;
    --accent: var(--e01);
    --maxw: 1240px;
    --navh: 74px;
    --r: 18px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: 'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

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

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

.mono {
    font-family: 'IBM Plex Mono',ui-monospace,monospace;
    font-feature-settings: "tnum";
}

.ar {
    font-family: 'Tajawal','IBM Plex Sans Arabic',sans-serif;
}

.eng-01 {
    --c: var(--e01);
    --c55: rgba(224,70,79,.55);
    --c60: rgba(224,70,79,.60);
    --c12: rgba(224,70,79,.12);
    --c-ink60: #ea898f;
    --c-paper10: #3c151c;
}

.eng-10 {
    --c: var(--e10);
    --c55: rgba(232,138,60,.55);
    --c60: rgba(232,138,60,.60);
    --c12: rgba(232,138,60,.12);
    --c-ink60: #eeb284;
    --c-paper10: #3d1c1a;
}

.eng-11 {
    --c: var(--e11);
    --c55: rgba(192,58,106,.55);
    --c60: rgba(192,58,106,.60);
    --c12: rgba(192,58,106,.12);
    --c-ink60: #d6829f;
    --c-paper10: #39141e;
}

/* Soft mesh + blurred ambient gradient atmosphere (immersive dark) */
.ambient-2 {
    position: fixed;
    inset: -30%;
    z-index: -5;
    pointer-events: none;
    background: radial-gradient(60% 70% at 50% 38%, rgba(235,170,150,0.16), transparent 74%);
    filter: blur(54px);
}

.ambient {
    position: fixed;
    inset: -42%;
    z-index: -4;
    pointer-events: none;
    background-color: #241015;
    background-image: radial-gradient(46% 56% at 12% 10%, rgba(224,70,79,0.62), transparent 62%), radial-gradient(50% 60% at 90% 16%, rgba(232,138,60,0.50), transparent 62%), radial-gradient(54% 64% at 82% 90%, rgba(192,58,106,0.52), transparent 64%), radial-gradient(48% 58% at 16% 90%, rgba(150,30,50,0.42), transparent 62%);
    filter: blur(82px) saturate(118%);
}

.mesh {
    position: fixed;
    inset: -25%;
    z-index: -3;
    pointer-events: none;
    background: radial-gradient(34% 42% at 22% 16%, rgba(224,70,79,0.40), transparent 64%), radial-gradient(38% 46% at 80% 22%, rgba(232,138,60,0.30), transparent 64%), radial-gradient(42% 50% at 70% 84%, rgba(192,58,106,0.32), transparent 64%), radial-gradient(50% 56% at 42% 58%, rgba(200,90,70,0.20), transparent 66%);
    filter: blur(50px) saturate(114%);
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .025;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* section-level soft glow */
.soft-glow {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    filter: blur(50px);
    opacity: .9;
}

.hero .soft-glow {
    inset: auto -8% -10% -8%;
    height: 64%;
    background: radial-gradient(60% 100% at 30% 100%, rgba(224,70,79,.16), transparent 70%);
}

.hero-bigbin {
    position: absolute;
    top: -46px;
    inset-inline-start: -12px;
    font-family: 'IBM Plex Mono';
    font-weight: 600;
    font-size: clamp(150px,24vw,300px);
    line-height: .8;
    letter-spacing: -.05em;
    color: rgba(192,58,106,.13);
    z-index: -1;
    pointer-events: none;
}

.group .soft-glow {
    inset: -10% -6%;
    background: radial-gradient(50% 60% at 80% 0%, rgba(232,138,60,.12), transparent 70%);
}

.section {
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: clamp(64px,9vw,128px) clamp(20px,5vw,56px);
    scroll-margin-top: var(--navh);
}

.eyebrow {
    font-family: 'IBM Plex Mono',monospace;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .eyebrow::before {
        content: "";
        width: 26px;
        height: 1px;
        background: var(--line-2);
    }

.h2 {
    font-family: 'Tajawal',sans-serif;
    font-weight: 800;
    font-size: clamp(28px,4.4vw,46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-top: 14px;
}

.sub {
    color: var(--ink-2);
    font-size: clamp(15px,1.6vw,17px);
    margin-top: 14px;
    max-width: 54ch;
}

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--navh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(18px,5vw,56px);
    border-bottom: 1px solid transparent;
    transition: background .3s,border-color .3s,backdrop-filter .3s;
}

    .nav.scrolled {
        background: rgba(8,11,18,0.55);
        backdrop-filter: blur(18px) saturate(140%);
        border-color: var(--line);
    }

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

    .brand .mark {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #ffffff;
        color: var(--solid);
        display: grid;
        place-items: center;
        font-family: 'IBM Plex Mono';
        font-weight: 600;
        font-size: 13px;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }

        .brand .mark::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,rgba(224,70,79,.5),rgba(232,138,60,.4));
            mix-blend-mode: screen;
            opacity: .7;
        }

    .brand b {
        font-family: 'IBM Plex Mono';
        font-weight: 600;
        font-size: 13.5px;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .brand .jo {
        font-family: 'IBM Plex Mono';
        font-size: 10px;
        color: var(--muted);
        letter-spacing: .18em;
        margin-top: 1px;
    }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .nav-links a {
        font-family: 'IBM Plex Mono';
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink-2);
        padding: 9px 14px;
        border-radius: 9px;
        transition: color .2s,background .2s;
        white-space: nowrap;
    }

        .nav-links a:hover {
            color: var(--ink);
            background: rgba(255,255,255,.08);
        }

.nav-cta {
    font-family: 'IBM Plex Mono';
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--e01);
    color: #fff;
    padding: 11px 18px;
    border-radius: 11px;
    transition: transform .2s,opacity .2s,box-shadow .2s;
    white-space: nowrap;
    flex-shrink: 0;
}

    .nav-cta:hover {
        transform: translateY(-1px);
        opacity: .92;
        box-shadow: 0 12px 30px -14px rgba(224,70,79,.70);
    }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-menu {
    position: fixed;
    top: var(--navh);
    left: 0;
    right: 0;
    z-index: 49;
    background: rgba(8,11,18,.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 10px clamp(18px,5vw,56px) 20px;
    gap: 4px;
}

    .mobile-menu[hidden] {
        display: none !important;
    }

    .mobile-menu a {
        font-family: 'IBM Plex Mono';
        font-size: 13px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-2);
        padding: 13px 6px;
        border-bottom: 1px solid var(--line);
    }

/* link interaction system */
.link {
    transition: opacity .25s,transform .25s,box-shadow .25s,border-color .25s,background .25s;
}

body[data-active] .link {
    opacity: .42;
    filter: saturate(.7);
}

    body[data-active] .link.is-active {
        opacity: 1;
        filter: none;
    }

.link.is-active {
    box-shadow: 0 0 0 1px var(--c55),0 14px 36px -20px var(--c60);
}

    .link.is-active .em {
        color: var(--c);
    }

    .link.is-active .bin {
        color: var(--c);
    }

/* HERO */
.hero {
    position: relative;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--navh) + clamp(40px,7vw,96px)) clamp(20px,5vw,56px) clamp(60px,8vw,110px);
}

.hero-motif {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    overflow: hidden;
}

    .hero-motif svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.brandline {
    font-family: 'IBM Plex Mono';
    font-size: 12px;
    letter-spacing: .26em;
    color: var(--ink-2);
    text-transform: uppercase;
}

    .brandline .jordan {
        color: var(--muted);
    }

.free-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px -34px rgba(224,70,79,.5);
    position: relative;
    overflow: hidden;
}

    .free-badge::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(var(--e01),var(--e10));
    }

    .free-badge .lbl {
        font-family: 'IBM Plex Mono';
        font-size: 10px;
        letter-spacing: .2em;
        color: var(--e01);
        text-transform: uppercase;
    }

    .free-badge .ar {
        font-family: 'Tajawal';
        font-weight: 700;
        font-size: 14px;
        color: var(--ink);
    }

.identity {
    margin-top: clamp(34px,5vw,56px);
    display: flex;
    align-items: center;
    gap: clamp(14px,2.4vw,30px);
    flex-wrap: wrap;
    max-width: 100%;
}

.id-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: pointer;
    min-width: 0;
}

    .id-card .bin {
        font-family: 'IBM Plex Mono';
        font-weight: 600;
        font-size: 20px;
        color: var(--muted);
        transition: color .25s;
    }

    .id-card .nm {
        font-family: 'IBM Plex Mono';
        font-size: 12px;
        letter-spacing: .16em;
        color: var(--ink-2);
    }

.identity .phrase {
    font-family: 'IBM Plex Mono';
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-inline-start: auto;
}

.headline {
    font-family: 'Alexandria','IBM Plex Sans Arabic','Tajawal',sans-serif;
    font-weight: 600;
    font-size: clamp(42px,6.3vw,76px);
    line-height: 1.18;
    letter-spacing: -.015em;
    margin-top: clamp(26px,4vw,44px);
    max-width: 100%;
}

    .headline .l2 {
        display: block;
        color: #f0cfd0;
        margin-top: .08em;
    }

.lede {
    font-family: 'IBM Plex Sans Arabic';
    font-size: clamp(15px,1.8vw,18px);
    color: var(--ink-2);
    max-width: 48ch;
    margin-top: 22px;
}

.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn {
    padding: 15px 26px;
    border-radius: 13px;
    font-family: 'IBM Plex Mono';
    font-size: 13px;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform .2s,box-shadow .25s,background .2s,color .2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg,var(--e01),var(--e10));
    color: #fff;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px -18px rgba(224,70,79,.65);
    }

.btn-ghost {
    background: rgba(255,255,255,0.04);
    border-color: var(--line-2);
    color: var(--ink);
}

    .btn-ghost:hover {
        border-color: var(--ink);
        transform: translateY(-2px);
        background: rgba(255,255,255,0.08);
    }

.btn .arr {
    transition: transform .2s;
}

.btn:hover .arr {
    transform: translateX(-3px);
}


/* =========================================================
   TECHNICAL COUNTER BADGES
   ========================================================= */

.subjects-counter-badge,
.resources-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-top: 20px;
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    direction: ltr;
}

.subjects-counter-label,
.resources-counter-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .14em;
    color: var(--muted);
    white-space: nowrap;
}

.subjects-counter-value,
.resources-counter-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--e10);
    white-space: nowrap;
}

/* SUBJECTS */

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

.subjects-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    width: 100%;
}

.subject-card {
    min-height: 210px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

    .subject-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255,255,255,0.28);
        background: rgba(255,255,255,0.06);
    }

.subject-code {
    direction: ltr;
    width: fit-content;
    color: var(--e10);
    font-family: 'IBM Plex Mono',monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

.subject-card h3 {
    direction: ltr;
    margin: 24px 0;
    color: var(--ink);
    font-family: 'Tajawal','IBM Plex Sans Arabic',sans-serif;
    font-size: clamp(18px,1.6vw,22px);
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
}

.subject-status {
    direction: ltr;
    width: fit-content;
    padding-top: 8px;
    border-top: 1px solid var(--e10);
    color: var(--muted);
    font-family: 'IBM Plex Mono',monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
}

@media (max-width:1024px) {
    .subjects-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 14px;
    }
}

@media (max-width:600px) {
    .subjects-grid {
        grid-template-columns: 1fr;
    }

    .subject-card {
        min-height: 170px;
    }
}

/* RESOURCES */
.res-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px,4vw,60px);
    align-items: center;
    margin-top: 34px;
    width: 100%;
}

.readout {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 34px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

    .readout .big {
        font-family: 'IBM Plex Mono';
        font-weight: 600;
        font-size: clamp(56px,10vw,104px);
        line-height: 1;
        letter-spacing: -.02em;
        color: var(--ink);
    }

    .readout .meta {
        font-family: 'IBM Plex Mono';
        font-size: 11px;
        letter-spacing: .2em;
        color: var(--muted);
        text-transform: uppercase;
        margin-top: 10px;
    }

    .readout .ring {
        position: absolute;
        right: -40px;
        bottom: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(232,138,60,.30),transparent 70%);
        filter: blur(10px);
    }

.res-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.res-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .25s,transform .25s;
    min-width: 0;
}

    .res-item:hover {
        border-color: var(--line-2);
        transform: translateY(-2px);
    }

    .res-item .rt {
        font-family: 'Tajawal';
        font-weight: 700;
        font-size: 16px;
        min-width: 0;
    }

    .res-item .rs {
        font-family: 'IBM Plex Mono';
        font-size: 10px;
        letter-spacing: .16em;
        color: var(--muted);
        text-transform: uppercase;
        flex-shrink: 0;
    }

/* ABOUT */
.dossiers {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(16px,2.4vw,26px);
    margin-top: clamp(34px,5vw,60px);
    width: 100%;
}

.dossier {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-width: 0;
}

    .dossier::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 80% at 100% 0%,var(--c12),transparent 60%);
        opacity: 0;
        transition: opacity .3s;
    }

    .dossier.is-active::before {
        opacity: 1;
    }

.portrait {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg,var(--paper-2),#dfe2e6);
    border: 1px solid var(--line-2);
    width: 100%;
}

    .portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.02);
        transition: filter .4s,transform .6s;
        mix-blend-mode: multiply;
    }

.dossier:hover .portrait img {
    filter: grayscale(.2);
    transform: scale(1.03);
}

.portrait .fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    font-family: 'IBM Plex Mono';
    font-weight: 600;
    font-size: 64px;
    color: var(--c-ink60);
    background: linear-gradient(160deg,var(--c-paper10),var(--paper-2));
}

.portrait .pbin {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-family: 'IBM Plex Mono';
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    mix-blend-mode: difference;
}

.dossier .dname {
    font-family: 'Tajawal';
    font-weight: 800;
    font-size: 21px;
    margin-top: 18px;
}

.dossier .drole {
    font-family: 'IBM Plex Mono';
    font-size: 10.5px;
    letter-spacing: .16em;
    color: var(--c);
    text-transform: uppercase;
    margin-top: 4px;
}

.dossier .dmeta {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono';
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 6px;
}

    .dossier .dmeta .ok {
        color: var(--e10);
    }

.modules {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

    .modules span {
        font-family: 'IBM Plex Mono';
        font-size: 11px;
        color: var(--ink-2);
        border: 1px solid var(--line-2);
        border-radius: 7px;
        padding: 4px 9px;
    }

/* CONTACT */
.contact {
    position: relative;
    text-align: center;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: clamp(80px,11vw,150px) clamp(20px,5vw,56px);
    scroll-margin-top: var(--navh);
}

    .contact .aura {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(40% 60% at 30% 30%,rgba(224,70,79,.22),transparent 60%), radial-gradient(40% 60% at 70% 70%,rgba(232,138,60,.20),transparent 60%), radial-gradient(50% 60% at 50% 100%,rgba(192,58,106,.18),transparent 60%);
        filter: blur(40px);
        border-radius: 40px;
    }

    .contact .big {
        font-family: 'Tajawal';
        font-weight: 800;
        font-size: clamp(34px,7vw,76px);
        line-height: 1.02;
        letter-spacing: -.03em;
    }

    .contact .lede {
        margin: 22px auto 0;
        max-width: 46ch;
    }

.ig {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding: 16px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg,var(--e01),var(--e11));
    color: #fff;
    font-family: 'IBM Plex Mono';
    font-size: 14px;
    letter-spacing: .06em;
    transition: transform .2s,box-shadow .25s;
}

    .ig:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 50px -22px rgba(224,70,79,.70);
    }

    .ig .arr {
        transition: transform .2s;
    }

    .ig:hover .arr {
        transform: translate(2px,-2px);
    }

/* FOOTER */
.footer {
    border-top: 1px solid var(--line);
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: 34px clamp(20px,5vw,56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 24px;
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
}

    .footer > span:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        text-align: left;
        direction: ltr;
    }

    .footer > span:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        text-align: center;
    }

    .footer > span:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        text-align: right;
        direction: ltr;
    }

    .footer > span:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        text-align: center;
        direction: ltr;
        opacity: .82;
    }

/* reveal */
.reveal {
    opacity: 1;
    transform: none;
}

html.js-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}

    html.js-ready .reveal.in {
        opacity: 1;
        transform: none;
    }

/* =========================================================
   TABLET & IPAD BREAKPOINT (Up to 1024px)
   ========================================================= */

@media (max-width: 1024px) {
    .nav-links, .nav-cta {
        display: none;
    }

    .nav-toggle {
        display: grid;
        place-items: center;
    }

    .res-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dossiers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .dossier {
        padding: 14px;
    }

        .dossier .dname {
            font-size: 16px;
        }

        .dossier .drole {
            font-size: 9.5px;
        }

        .dossier .dmeta {
            font-size: 9px;
        }

    .identity {
        justify-content: flex-start;
        gap: 12px;
    }

        .identity .phrase {
            margin-inline-start: 0;
            width: 100%;
        }
}

@media (max-width: 760px) {
    .footer {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 9px;
        text-align: center;
    }

        .footer > span:nth-child(1),
        .footer > span:nth-child(2),
        .footer > span:nth-child(3),
        .footer > span:nth-child(4) {
            grid-column: 1;
            justify-self: center;
            text-align: center;
        }

        .footer > span:nth-child(1) {
            grid-row: 1;
        }

        .footer > span:nth-child(2) {
            grid-row: 2;
        }

        .footer > span:nth-child(3) {
            grid-row: 3;
        }

        .footer > span:nth-child(4) {
            grid-row: 4;
        }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .mesh {
        transition: none;
    }
}

/* =========================================================
   HERO HEADLINE FINAL OVERRIDE
========================================================= */

.headline {
    font-family: "Noto Kufi Arabic", sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(38px, 5.5vw, 68px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

    .headline .l2 {
        display: block;
        margin-top: 6px;
        color: #f0cfd0;
    }

.about-title {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .about-title {
        white-space: normal;
    }
}

/* =========================================================
   CONTACT EXTRA LINKS
========================================================= */

.contact-extra {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
    width: 100%;
}

    .contact-extra a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 128px;
        padding: 14px 22px;
        border: 1px solid var(--line-2);
        border-radius: 14px;
        background: rgba(255,255,255,0.035);
        color: var(--ink);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .08em;
        text-decoration: none;
        transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

        .contact-extra a:hover {
            transform: translateY(-2px);
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.3);
        }

        .contact-extra a span {
            color: var(--e10);
        }

.contact-email {
    margin-top: 22px;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
}

/* =========================================================
   ENGINEER DETAILS
========================================================= */

.engineer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
    direction: ltr;
    text-align: left;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .04em;
}

.engineer-desc {
    margin: 16px 0 18px;
    color: #e7d5d7;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    text-align: right;
    direction: rtl;
}

/* =========================================================
   SITE VIEWS
   ========================================================= */

.site-views-section {
    display: flex;
    justify-content: center;
    padding: 34px 20px 18px;
    width: 100%;
}

.site-views-inner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.site-views-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--muted);
}

.site-views-value {
    font-size: 16px;
    font-weight: 700;
    color: #ff8a2a;
}

/* =========================================================
   MOBILE RESPONSIVE (Phones <= 600px)
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --navh: 68px;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    main,
    .hero,
    .section,
    .contact {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* NAV */
    .nav {
        height: var(--navh);
        padding-inline: 14px;
        gap: 10px;
    }

    .brand {
        min-width: 0;
        gap: 8px;
    }

        .brand > span:last-child {
            min-width: 0;
        }

        .brand .mark {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            font-size: 12px;
        }

        .brand b {
            display: block;
            white-space: nowrap;
            font-size: 11px;
            letter-spacing: .03em;
        }

        .brand .jo {
            display: block;
            font-size: 8px;
            letter-spacing: .12em;
        }

    .nav-toggle {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .mobile-menu {
        padding-inline: 16px;
    }

    /* HERO */
    .hero {
        padding: calc(var(--navh) + 32px) 16px 58px;
        overflow: hidden;
    }

    .hero-bigbin {
        top: -2px;
        inset-inline-start: -18px;
        font-size: 126px;
    }

    .hero-top {
        display: block;
        width: 100%;
    }

    .brandline {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.8;
        letter-spacing: .14em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .identity {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 26px;
        align-items: stretch;
    }

    .id-card {
        width: 100%;
        min-width: 0;
        min-height: 68px;
        padding: 10px;
        gap: 3px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

        .id-card .bin {
            font-size: 17px;
            line-height: 1.1;
        }

        .id-card .nm {
            max-width: 100%;
            font-size: 8.5px;
            line-height: 1.3;
            letter-spacing: .08em;
            overflow-wrap: anywhere;
        }

    .identity .phrase {
        grid-column: 1 / -1;
        width: 100%;
        margin: 4px 0 0;
        font-size: 9.5px;
        line-height: 1.6;
        letter-spacing: .11em;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .headline {
        width: 100%;
        max-width: 100%;
        margin-top: 30px !important;
        font-size: clamp(31px, 8.5vw, 36px) !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;
        text-align: right;
        word-break: normal;
        overflow-wrap: normal;
    }

        .headline .l2 {
            margin-top: .16em;
        }

    .lede {
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.95;
        text-align: right;
    }

    .cta-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        margin-top: 24px;
    }

    .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 13px 10px;
        font-size: 11px;
        line-height: 1.5;
        letter-spacing: .03em;
        text-align: center;
        white-space: normal;
    }

    /* GENERAL SECTIONS */
    .section {
        padding: 54px 16px;
    }

    .eyebrow {
        min-width: 0;
        font-size: 9.5px;
        letter-spacing: .12em;
        overflow-wrap: anywhere;
    }

    .h2 {
        margin-top: 12px;
        font-size: 28px;
        line-height: 1.35;
    }

    .sub {
        max-width: 100%;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.85;
    }

    .subjects-counter-badge,
    .resources-counter-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        max-width: 100%;
        margin-top: 14px;
        padding: 7px 10px;
        border: 1px solid var(--line-2);
        border-radius: 8px;
        background: rgba(255,255,255,.025);
        direction: ltr;
    }

    .subjects-counter-label,
    .resources-counter-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 8.5px;
        line-height: 1.4;
        letter-spacing: .10em;
        color: var(--muted);
        white-space: nowrap;
    }

    .subjects-counter-value,
    .resources-counter-value {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        color: var(--e10);
        white-space: nowrap;
    }

    /* SUBJECTS */
    .subj-head {
        margin-bottom: 22px;
    }

    .subjects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .subject-card {
        min-width: 0;
        min-height: 162px;
        padding: 16px;
        border-radius: 14px;
    }

    .subject-code {
        font-size: 13px;
    }

    .subject-card h3 {
        margin: 16px 0;
        font-size: 15px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .subject-status {
        padding-top: 6px;
        font-size: 8px;
        letter-spacing: .11em;
    }

    /* RESOURCES */
    .res-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .readout {
        min-width: 0;
        padding: 22px;
    }

    .res-list {
        gap: 10px;
    }

    .res-item {
        min-width: 0;
        gap: 10px;
        padding: 15px 16px;
    }

        .res-item .rt {
            min-width: 0;
            font-size: 14px;
        }

        .res-item .rs {
            flex: 0 0 auto;
            font-size: 8.5px;
        }

    /* ABOUT */
    .dossiers {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
        overflow: visible;
    }

    .dossier {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "portrait name"
            "portrait role"
            "portrait info"
            "desc desc"
            "modules modules"
            "meta meta";
        column-gap: 16px;
        row-gap: 0;
        min-width: 0;
        padding: 16px;
        align-items: start;
    }

    .portrait {
        grid-area: portrait;
        width: 112px;
        aspect-ratio: 4 / 5;
        border-radius: 11px;
        align-self: start;
    }

    .dossier .dname {
        grid-area: name;
        min-width: 0;
        margin-top: 4px;
        font-size: 18px;
        line-height: 1.45;
    }

    .dossier .drole {
        grid-area: role;
        min-width: 0;
        margin-top: 5px;
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: .10em;
        overflow-wrap: anywhere;
    }

    .engineer-info {
        grid-area: info;
        max-width: 100%;
        margin-top: 10px;
        font-size: 8.5px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .engineer-desc {
        grid-area: desc;
        max-width: 100%;
        margin: 14px 0 0;
        font-size: 12.5px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }

    .modules {
        grid-area: modules;
        gap: 6px;
        margin-top: 12px;
    }

        .modules span {
            font-size: 9px;
            padding: 4px 7px;
        }

    .dossier .dmeta {
        grid-area: meta;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
        padding-top: 12px;
        font-size: 8px;
    }

    /* CONTACT */
    .contact {
        padding: 66px 16px;
    }

        .contact .big {
            font-size: clamp(31px, 9vw, 40px);
            line-height: 1.25;
        }

        .contact .lede {
            text-align: center;
        }

    .ig {
        width: auto;
        max-width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .contact-extra {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
    }

        .contact-extra a {
            width: auto;
            min-width: 118px;
            padding: 12px 15px;
        }

    .contact-email {
        max-width: 100%;
        letter-spacing: .035em;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* SITE VIEWS + FOOTER */
    .site-views-section {
        padding-inline: 16px;
    }

    .site-views-inner {
        max-width: 100%;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer {
        padding: 28px 16px;
        justify-content: center;
        text-align: center;
        gap: 8px 14px;
    }
}

/* Very narrow phones */
@media (max-width: 350px) {
    .subjects-grid {
        grid-template-columns: 1fr;
    }

    .identity {
        gap: 6px;
    }

    .id-card {
        padding: 8px;
    }

        .id-card .nm {
            font-size: 7.5px;
        }

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

.dossier.is-active .portrait img {
    filter: grayscale(.10) brightness(1.08) contrast(1.03);
    transform: scale(1.025);
}

/* =========================================================
   GPA CALCULATOR COMPLETE STYLES
   ========================================================= */

.gpa-page {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: calc(var(--navh) + 34px) clamp(18px, 4vw, 36px) 84px;
}

.gpa-hero {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

    .gpa-hero .eyebrow {
        justify-content: center;
    }

.gpa-title {
    margin-top: 10px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.3;
}

.gpa-intro {
    margin-top: 9px;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.75;
}

.gpa-calculator {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: clamp(38px, 6vw, 62px);
}

.gpa-section {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background: radial-gradient( 120% 120% at 100% 0%, rgba(232, 138, 60, .09), transparent 46% ), rgba(255, 255, 255, .035);
    box-shadow: 0 24px 70px -46px rgba(0, 0, 0, .75);
}

    .gpa-section::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: linear-gradient( 180deg, var(--e01), var(--e10), var(--e11) );
        opacity: .85;
    }

.gpa-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

    .gpa-section-header > div {
        min-width: 0;
    }

.gpa-section-code {
    display: inline-block;
    color: var(--e10);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
}

.gpa-section-header h2 {
    margin-top: 5px;
    font-family: "Noto Kufi Arabic", "Tajawal", sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 600;
    line-height: 1.5;
}

.gpa-course-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
    font-size: 10px;
    letter-spacing: .08em;
}

.gpa-mode-grid,
.gpa-scale-grid {
    display: grid;
    gap: 12px;
}

.gpa-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gpa-scale-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gpa-mode-card,
.gpa-scale-card {
    position: relative;
    min-width: 0;
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    color: var(--ink);
    cursor: pointer;
    text-align: right;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

    .gpa-mode-card:hover:not(:disabled),
    .gpa-scale-card:hover:not(:disabled) {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .28);
        background: rgba(255, 255, 255, .055);
    }

    .gpa-mode-card.active,
    .gpa-scale-card.active {
        border-color: rgba(224, 70, 79, .7);
        background: linear-gradient( 135deg, rgba(224, 70, 79, .13), rgba(232, 138, 60, .08) );
        box-shadow: 0 0 0 1px rgba(224, 70, 79, .08), 0 18px 44px -28px rgba(224, 70, 79, .7);
    }

    .gpa-mode-card:disabled,
    .gpa-scale-card:disabled {
        cursor: not-allowed;
        opacity: .46;
    }

.gpa-mode-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    color: var(--e10);
    background: rgba(255, 255, 255, .035);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
}

.gpa-mode-card strong,
.gpa-scale-card strong {
    display: block;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.gpa-mode-card small,
.gpa-scale-card small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 12px;
    line-height: 1.7;
}

.gpa-scale-card > .mono {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--e10);
    font-size: 20px;
    font-weight: 600;
    direction: ltr;
}

.gpa-info-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    max-width: 820px;
    margin: 28px auto 0;
    padding: 16px 18px;
    border: 1px solid var(--line-2);
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
}

.gpa-info-content {
    min-width: 0;
}

.gpa-info-label {
    display: block;
    margin-bottom: 5px;
    color: var(--e10);
    font-size: 9px;
    letter-spacing: .14em;
}

.gpa-info-content p {
    color: var(--ink-2);
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px;
    line-height: 1.75;
}

.gpa-system-preview {
    display: flex;
    min-width: 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(0, 0, 0, .09);
}

    .gpa-system-preview .mono {
        color: var(--e10);
        font-size: 18px;
        font-weight: 600;
    }

    .gpa-system-preview span:last-child {
        margin-top: 2px;
        color: var(--muted);
        font-family: 'Tajawal', sans-serif;
        font-size: 10px;
    }

.gpa-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-width: 820px;
    margin: 14px auto 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
}

.gpa-tab {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

    .gpa-tab .mono {
        font-size: 9px;
        color: var(--e10);
    }

    .gpa-tab small {
        font-size: 8px;
        font-weight: 500;
    }

    .gpa-tab.active {
        background: rgba(255, 255, 255, .07);
        color: var(--ink);
        box-shadow: inset 0 0 0 1px var(--line);
    }

.gpa-main-card {
    max-width: 820px;
    margin: 14px auto 0;
    padding: 22px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: radial-gradient( 110% 90% at 100% 0%, rgba(232, 138, 60, .07), transparent 50% ), rgba(255, 255, 255, .035);
    box-shadow: 0 26px 70px -48px rgba(0, 0, 0, .8);
}

.gpa-block {
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

    .gpa-block:last-of-type {
        margin-bottom: 16px;
    }

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

    .gpa-block-head > div {
        min-width: 0;
    }

.gpa-block-code {
    display: inline-block;
    color: var(--e10);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
}

.gpa-block-head h2 {
    margin-top: 2px;
    font-family: "Noto Kufi Arabic", 'Tajawal', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.gpa-block-note {
    flex: 0 0 auto;
    color: var(--muted);
    font-family: 'Tajawal', sans-serif;
    font-size: 10px;
}

.gpa-system-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.gpa-system-option {
    display: flex;
    min-width: 0;
    min-height: 72px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    color: var(--ink);
    cursor: pointer;
    text-align: right;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
}

    .gpa-system-option:hover:not(:disabled) {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, .28);
        background: rgba(255, 255, 255, .05);
    }

    .gpa-system-option.active {
        border-color: rgba(224, 70, 79, .68);
        background: linear-gradient( 135deg, rgba(224, 70, 79, .12), rgba(232, 138, 60, .07) );
    }

.gpa-system-number {
    color: var(--e10);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
}

.gpa-system-option > span:not(.gpa-system-number) {
    margin-top: 6px;
    font-family: 'Tajawal', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.gpa-system-option small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

.gpa-grade-type-row {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 14px;
    align-items: end;
}

.gpa-grade-type-field {
    min-width: 0;
}

.gpa-field-hint {
    margin: 0;
    padding-bottom: 5px;
    color: var(--muted);
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 10.5px;
    line-height: 1.7;
}

/* COURSE TABLE */
.gpa-course-table-head {
    display: grid;
    grid-template-columns: 42px minmax(110px, .8fr) minmax(170px, 1.2fr) 42px;
    gap: 9px;
    padding: 0 11px 7px;
    color: var(--muted);
    font-family: 'Tajawal', sans-serif;
    font-size: 9px;
}

    .gpa-course-table-head span:first-child,
    .gpa-course-table-head span:last-child {
        text-align: center;
    }

.gpa-courses {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.gpa-course-row {
    display: grid;
    grid-template-columns: 42px minmax(110px, .8fr) minmax(170px, 1.2fr) 42px;
    gap: 9px;
    align-items: end;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, .08);
}

    .gpa-course-row .gpa-field label {
        display: none;
    }

.gpa-course-number {
    align-self: center;
    color: var(--e10);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.gpa-field {
    min-width: 0;
}

    .gpa-field input,
    .gpa-field select {
        width: 100%;
        height: 39px;
        border: 1px solid var(--line-2);
        border-radius: 9px;
        outline: none;
        background: rgba(255, 255, 255, .035);
        color: var(--ink);
        font: inherit;
        padding-inline: 10px;
        font-size: 12px;
        transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .gpa-field input {
        direction: ltr;
        text-align: left;
    }

    .gpa-field select {
        cursor: pointer;
    }

        .gpa-field select option {
            background: var(--solid);
            color: var(--ink);
        }

        .gpa-field input:focus,
        .gpa-field select:focus {
            border-color: rgba(232, 138, 60, .72);
            background: rgba(255, 255, 255, .055);
            box-shadow: 0 0 0 3px rgba(232, 138, 60, .08);
        }

.gpa-delete-course {
    display: grid;
    width: 36px;
    height: 36px;
    align-self: end;
    place-items: center;
    border: 1px solid rgba(224, 70, 79, .32);
    border-radius: 9px;
    background: rgba(224, 70, 79, .07);
    color: #f18a90;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .gpa-delete-course:hover:not(:disabled) {
        transform: translateY(-1px);
        border-color: rgba(224, 70, 79, .65);
        background: rgba(224, 70, 79, .14);
    }

.gpa-add-course {
    display: flex;
    width: 100%;
    min-height: 42px;
    margin-top: 9px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(255, 255, 255, .24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .018);
    color: var(--ink-2);
    cursor: pointer;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 12px;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

    .gpa-add-course span {
        color: var(--e10);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 16px;
    }

    .gpa-add-course:hover {
        border-color: rgba(232, 138, 60, .5);
        background: rgba(232, 138, 60, .05);
        color: var(--ink);
    }

.gpa-calculate-btn {
    display: flex;
    width: 100%;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient( 135deg, var(--e01), var(--e10) );
    color: #fff;
    cursor: pointer;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 22px 48px -28px rgba(224, 70, 79, .82);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .gpa-calculate-btn:hover {
        transform: translateY(-2px);
        filter: saturate(1.08);
        box-shadow: 0 28px 58px -28px rgba(224, 70, 79, .92);
    }

.gpa-result {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
    gap: 18px;
    align-items: stretch;
    padding: 20px 22px;
    border: 1px solid rgba(232, 138, 60, .38);
    border-radius: 16px;
    background: radial-gradient( 100% 130% at 100% 0%, rgba(232, 138, 60, .14), transparent 52% ), rgba(255, 255, 255, .04);
    max-width: 820px;
    margin: 14px auto 0;
}

    .gpa-result[hidden],
    .gpa-error[hidden] {
        display: none !important;
    }

.gpa-result-value {
    margin-top: 8px;
    color: var(--ink);
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 600;
    line-height: 1;
    direction: ltr;
}

.gpa-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .gpa-result-meta > div {
        display: flex;
        min-width: 0;
        min-height: 68px;
        flex-direction: column;
        justify-content: center;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: rgba(0, 0, 0, .09);
    }

    .gpa-result-meta span {
        color: var(--muted);
        font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
        font-size: 12px;
    }

    .gpa-result-meta strong {
        margin-top: 5px;
        color: var(--e10);
        font-size: 20px;
        direction: ltr;
    }

.gpa-error {
    padding: 14px 16px;
    border: 1px solid rgba(224, 70, 79, .45);
    border-radius: 12px;
    background: rgba(224, 70, 79, .08);
    color: #f2b4b8;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   GPA MOBILE COURSE ROW OVERRIDE (<= 700px)
   ========================================================= */

@media (max-width: 700px) {
    .gpa-course-table-head {
        display: none;
    }

    .gpa-course-row {
        grid-template-columns: 34px minmax(0, .9fr) minmax(0, 1.1fr) 34px;
        gap: 8px;
        padding: 11px 9px;
        align-items: end;
    }

    .gpa-course-number {
        grid-column: 1;
        grid-row: 1;
        width: 34px;
        align-self: end;
        margin: 0;
    }

    .gpa-course-row > .gpa-field:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .gpa-course-row > .gpa-field.gpa-grade-field,
    .gpa-course-row > .gpa-grade-field {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
    }

    .gpa-delete-course {
        grid-column: 4;
        grid-row: 1;
        align-self: end;
        width: 34px;
        height: 40px;
        margin: 0;
    }

    .gpa-course-row .gpa-field {
        width: 100%;
        min-width: 0;
    }

        .gpa-course-row .gpa-field label {
            display: block;
            margin-bottom: 5px;
            font-size: 9px;
            line-height: 1.3;
        }

        .gpa-course-row .gpa-field input,
        .gpa-course-row .gpa-field select {
            width: 100%;
            min-width: 0;
        }
}