/* ─── TOKENS ─────────────────────────────────────────────────────────── */
        :root {
            --bg:        #fcfcfc;
            --surface:   #ffffff;
            --hl:        #f3f4f6;
            --text:      #0a1128;
            --dim:       #374151;
            --border:    #e5e7eb;
            --brand:     #fcca47;
            --brand-l:   #fddb73;
            --brand-d:   #e5b02b;
            --navy:      #0a1128;
            --shad:      6px 6px 0 0 var(--text);
            --shad-sm:   3px 3px 0 0 var(--text);
        }
        [data-theme="dark"] {
            --bg:      #0a1128;
            --surface: #141e3d;
            --hl:      #1e2a52;
            --text:    #fcfcfc;
            --dim:     #9ca3af;
            --border:  #1e2a52;
        }

        /* ─── RESET ──────────────────────────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; overflow-x: hidden; }
        body {
            font-family: 'Outfit', 'IBM Plex Sans Arabic', sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            transition: background .3s, color .3s;
        }
        a { color: inherit; text-decoration: none; }
        button { cursor: pointer; font-family: inherit; border: none; background: none; }
        img { display: block; max-width: 100%; }
        ::selection { background: var(--brand); color: var(--navy); }

        /* ─── LAYOUT ─────────────────────────────────────────────────────────── */
        .wrap {
            max-width: 1280px;
            margin: 0 auto;
            padding-inline: 1rem;
        }
        @media (min-width: 640px)  { .wrap { padding-inline: 1.5rem; } }
        @media (min-width: 1024px) { .wrap { padding-inline: 2rem; } }

        .i18n-fade { transition: opacity .2s ease; }

        /* ─── NAV ────────────────────────────────────────────────────────────── */
        nav {
            position: fixed; top: 0; inset-inline: 0; z-index: 50;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--surface) 80%, transparent);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: background .3s, border-color .3s;
            overflow: hidden;
        }
        .nav-inner {
            display: flex; align-items: center; justify-content: space-between; height: 80px;
        }
        .nav-logo { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
        .nav-logo-icon {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--brand); color: var(--navy);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; box-shadow: var(--shad-sm);
            transition: transform .2s;
        }
        .nav-logo:hover .nav-logo-icon { transform: rotate(-12deg); }
        .nav-logo-text { font-weight: 900; font-size: 1.75rem; letter-spacing: -.05em; }
        .nav-logo-text span { color: var(--brand); }
        .nav-actions { display: flex; align-items: center; gap: 1rem; }
        .btn-circle {
            width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; transition: background .2s, transform .2s;
        }
        .btn-theme { background: var(--hl); color: var(--text); }
        .btn-theme:hover { background: var(--border); }
        .btn-lang { background: var(--text); color: var(--bg); font-weight: 700; font-size: 1.1rem; box-shadow: var(--shad-sm); }
        .btn-lang:hover { transform: scale(1.05); }

        /* ─── HERO ───────────────────────────────────────────────────────────── */
        .hero {
            position: relative; overflow: hidden;
            padding-top: 8rem; padding-bottom: 5rem;
            min-height: 90vh; display: flex; align-items: center;
        }
        @media (min-width: 1024px) { .hero { padding-top: 10rem; padding-bottom: 8rem; } }
        .hero-grid {
            position: absolute; inset: 0; pointer-events: none;
            background-size: 50px 50px;
            background-image:
                linear-gradient(to right, var(--border) 1px, transparent 1px),
                linear-gradient(to bottom, var(--border) 1px, transparent 1px);
            opacity: .4;
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }
        .hero-fade {
            position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(to top, var(--bg), transparent 50%);
        }
        .hero-inner { position: relative; z-index: 10; width: 100%; }
        .hero-layout {
            display: flex; flex-direction: column-reverse;
            align-items: center; justify-content: space-between; gap: 3rem;
        }
        @media (min-width: 1024px) { .hero-layout { flex-direction: row; gap: 5rem; } }

        .hero-text { width: 100%; text-align: center; z-index: 20; }
        @media (min-width: 1024px) {
            /* text-align: start flips automatically for RTL — no override needed */
            .hero-text { width: 50%; text-align: start; }
        }
        .hero-badge {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .4rem 1.25rem; border-radius: 9999px;
            background: var(--brand); color: var(--navy);
            font-size: .8rem; font-weight: 900; text-transform: uppercase;
            letter-spacing: .1em; margin-bottom: 2rem;
            box-shadow: var(--shad-sm); border: 2px solid var(--navy);
        }
        .hero-h1 {
            font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900;
            letter-spacing: -.04em; line-height: 1.05;
            text-transform: uppercase; margin-bottom: 1.5rem;
        }
        .hero-h1-hi {
            display: block; color: var(--brand);
            text-shadow: 3px 3px 0 var(--navy), 6px 6px 0 var(--text);
        }
       [data-theme="dark"] .hero-h1-hi {
    text-shadow: 3px 3px 0 var(--navy), 6px 6px 0 var(--brand);
       }
        .hero-desc {
            font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--dim);
            margin-bottom: 2.5rem; max-width: 42rem;
            margin-inline: auto;
            line-height: 1.6; font-weight: 500;
        }
        @media (min-width: 1024px) { .hero-desc { margin-inline-start: 0; } }
        .hero-ctas {
            display: flex; flex-direction: column;
            gap: 1.5rem; align-items: center; justify-content: center;
        }
        @media (min-width: 640px)  { .hero-ctas { flex-direction: row; } }
        @media (min-width: 1024px) { .hero-ctas { justify-content: flex-start; } }
        .btn-primary {
            display: inline-flex; align-items: center; justify-content: center;
            gap: .75rem; padding: 1.1rem 2.5rem;
            background: var(--text); color: var(--bg);
            font-weight: 900; font-size: 1.2rem; border-radius: 9999px;
            border: 2px solid var(--text);
            transition: transform .2s; white-space: nowrap;
            box-shadow: 3px 3px 0 var(--brand), 4px 4px 0 var(--navy);
        }
        .btn-primary:hover { transform: scale(1.05); }
        .cta-wrap { position: relative; width: 100%; }
        @media (min-width: 640px) { .cta-wrap { width: auto; } }
        .btn-disabled {
            display: inline-flex; align-items: center; justify-content: center;
            gap: .75rem; padding: 1.1rem 2.5rem;
            background: var(--surface); color: var(--dim);
            font-weight: 900; font-size: 1.2rem; border-radius: 9999px;
            border: 2px solid var(--border); opacity: .7; cursor: not-allowed;
            white-space: nowrap; width: 100%;
        }
        .soon-badge {
            position: absolute; top: -12px; inset-inline-end: -12px;
            background: var(--brand); color: var(--navy);
            font-size: .7rem; font-weight: 900; padding: .3rem .9rem;
            border-radius: 9999px; text-transform: uppercase;
            border: 2px solid var(--navy); box-shadow: var(--shad-sm);
            transform: rotate(12deg); z-index: 10;
        }

        .hero-mascot {
            width: 100%; display: flex; justify-content: center;
            position: relative; height: 320px; z-index: 10;
        }
        @media (min-width: 1024px) { .hero-mascot { width: 50%; height: 600px; } }
        .hero-glow {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 24rem; height: 24rem; border-radius: 50%;
            background: color-mix(in srgb, var(--brand) 30%, transparent);
            filter: blur(100px);
        }
        .hero-img {
            width: auto; height: 100%; object-fit: contain;
            position: relative; z-index: 20;
            animation: float 4s ease-in-out infinite;
            filter: drop-shadow(0 25px 40px rgba(0,0,0,.2));
        }
        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); }
            50%       { transform: translateY(-20px) scale(1.02); }
        }
        .hero-pill {
            position: absolute; bottom: 2.5rem; inset-inline-start: 0;
            padding: 1rem; background: var(--surface);
            border: 2px solid var(--text); border-radius: 1rem;
            box-shadow: var(--shad); display: none;
            align-items: center; gap: .75rem; z-index: 30;
        }
        @media (min-width: 768px) { .hero-pill { display: flex; } }
        .hero-pill-icon {
            width: 48px; height: 48px; border-radius: 50%;
            background: #22c55e; color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
        }
        .hero-pill-title { font-weight: 900; font-size: .85rem; text-transform: uppercase; }
        .hero-pill-amount { font-size: .75rem; font-weight: 700; color: #22c55e; }

        /* ─── MARQUEE ────────────────────────────────────────────────────────── */
        .marquee-section {
            padding: 2.5rem 0;
            background: var(--brand);
            border-top: 4px solid var(--navy); border-bottom: 4px solid var(--navy);
            overflow: hidden; position: relative;
            display: flex; align-items: center; z-index: 20;
        }
        .marquee-btn {
            position: absolute; inset-inline-start: 1rem; z-index: 30;
            width: 96px; height: 96px; border-radius: 50%;
            background: var(--surface); border: 4px solid var(--navy);
            box-shadow: var(--shad); color: var(--navy);
            font-size: 2.5rem; display: none;
            align-items: center; justify-content: center; pointer-events: none;
        }
        @media (min-width: 768px) { .marquee-btn { display: flex; } }
        .marquee-wrap { width: 100%; overflow: hidden; padding: 1rem 0; }
        .marquee-track {
            display: flex; align-items: center; gap: 3rem;
            font-weight: 900; font-size: 1.875rem; color: var(--navy);
            text-transform: uppercase; letter-spacing: .1em;
            padding: 0 3rem; will-change: transform; white-space: nowrap;
        }
        .mitem { display: flex; align-items: center; gap: .75rem; }

        /* ─── CURRICULUM ─────────────────────────────────────────────────────── */
        .sect { padding: 8rem 0; background: var(--bg); }
        .sect-surface { background: var(--surface); }
        .curr-hdr {
            display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem;
        }
        @media (min-width: 768px) {
            .curr-hdr { flex-direction: row; align-items: flex-end; justify-content: space-between; }
        }
        .sec-title {
            font-size: clamp(2.5rem, 6vw, 3.75rem);
            font-weight: 900; text-transform: uppercase; margin-bottom: 1rem;
        }
        .sec-sub { color: var(--dim); font-size: 1.25rem; font-weight: 500; max-width: 42rem; }
        .grid-curr {
            display: grid; grid-template-columns: 1fr; gap: 2rem;
        }
        @media (min-width: 768px)  { .grid-curr { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .grid-curr { grid-template-columns: repeat(3, 1fr); } }

        .card {
            background: var(--surface); border-radius: 2rem; padding: 2rem;
            border: 4px solid var(--text); box-shadow: var(--shad-sm);
            display: flex; flex-direction: column;
            transition: transform .2s, box-shadow .2s;
            text-decoration: none; color: inherit;
        }
        .card:hover { transform: translateY(-8px); box-shadow: var(--shad); }
        .card-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
        .card-icon {
            width: 64px; height: 64px; border-radius: 1rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.875rem; border: 2px solid var(--text); box-shadow: var(--shad-sm);
        }
        .card-arr {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--hl); color: var(--dim);
            display: flex; align-items: center; justify-content: center;
            transition: background .2s, color .2s;
        }
        .card:hover .card-arr { background: var(--brand); color: var(--navy); }
        .card-title { font-size: 1.5rem; font-weight: 900; margin-bottom: .75rem; }
        .card-desc { color: var(--dim); font-weight: 500; }

        .card-hero {
            background: var(--text); color: var(--bg);
            border-radius: 2rem; padding: 2.5rem;
            border: 4px solid var(--text); box-shadow: var(--shad-sm);
            display: flex; flex-direction: column; justify-content: space-between;
            min-height: 350px; position: relative; overflow: hidden;
            transition: transform .2s, box-shadow .2s; text-decoration: none;
        }
        @media (min-width: 768px) { .card-hero { grid-column: span 2; } }
        .card-hero:hover { transform: translateY(-8px); box-shadow: var(--shad); }
        .card-hero-glow {
            position: absolute; inset-inline-end: -5rem; top: -5rem;
            width: 16rem; height: 16rem;
            background: var(--brand); border-radius: 50%;
            filter: blur(80px); opacity: .2; transition: opacity .2s;
        }
        .card-hero:hover .card-hero-glow { opacity: .4; }
        .card-hero-body { position: relative; z-index: 10; }
        .card-hero-icon {
            width: 80px; height: 80px; background: var(--brand); color: var(--navy);
            border-radius: 1.25rem; display: flex; align-items: center; justify-content: center;
            font-size: 2.5rem; margin-bottom: 2rem;
            border: 2px solid var(--navy); box-shadow: var(--shad-sm);
            transition: transform .2s;
        }
        .card-hero:hover .card-hero-icon { transform: rotate(12deg); }
        .card-hero-title { font-size: 2.25rem; font-weight: 900; margin-bottom: 1rem; }
        .card-hero-desc { font-size: 1.25rem; opacity: .8; font-weight: 500; max-width: 32rem; margin-bottom: 2rem; }
        .card-hero-cta {
            display: inline-flex; align-items: center; gap: .75rem;
            color: var(--brand); font-weight: 900; font-size: 1.25rem;
            text-transform: uppercase; letter-spacing: .05em;
            position: relative; z-index: 10; transition: gap .2s;
        }
        .card-hero:hover .card-hero-cta { gap: 1.25rem; }

        /* ─── COMMUNITY ──────────────────────────────────────────────────────── */
        .section-community {
            padding: 8rem 0; background: var(--surface);
            border-top: 4px solid var(--text); border-bottom: 4px solid var(--text);
        }
        .comm-layout {
            display: flex; flex-direction: column; align-items: center; gap: 4rem;
        }
        @media (min-width: 1024px) { .comm-layout { flex-direction: row; justify-content: space-between; } }
        .comm-text { flex: 1; text-align: center; }
        @media (min-width: 1024px) {
            /* text-align: start flips automatically for RTL — no override needed */
            .comm-text { text-align: start; }
        }
        .live-badge {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .375rem 1rem; border-radius: 9999px;
            background: color-mix(in srgb, #ef4444 10%, transparent);
            color: #ef4444; font-size: .85rem; font-weight: 900;
            text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem;
        }
        .live-dot {
            width: 10px; height: 10px; border-radius: 50%; background: #ef4444;
            animation: pulse 2s ease infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }
        .comm-btns { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; align-items: center; }
        @media (min-width: 640px)  { .comm-btns { flex-direction: row; } }
        @media (min-width: 1024px) { .comm-btns { justify-content: flex-start; } }
        .btn-comm {
            display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
            padding: 1rem 2rem; border-radius: 9999px;
            font-weight: 900; color: white;
            border: 2px solid var(--text); box-shadow: var(--shad-sm);
            transition: transform .2s;
        }
        .btn-comm:hover { transform: translateY(-4px); }
        .btn-comm i { font-size: 1.875rem; }
        /* text-align: start = left in LTR, right in RTL automatically */
        .btn-comm-txt { text-align: start; line-height: 1.3; }
        .btn-comm-sub { opacity: .8; font-size: .875rem; text-transform: uppercase; }
        .btn-comm-cnt { font-size: 1.1rem; }

        .chat-box {
            width: 100%; max-width: 32rem;
            background: var(--bg); border: 4px solid var(--text);
            border-radius: 2rem; padding: 1.5rem;
            box-shadow: var(--shad); position: relative;
        }
        @media (min-width: 1024px) { .chat-box { width: 50%; } }
        .chat-decor {
            position: absolute; top: -1.5rem; inset-inline-end: -1.5rem;
            width: 48px; height: 48px; background: var(--brand);
            border-radius: 50%; border: 4px solid var(--text);
            display: flex; align-items: center; justify-content: center;
            color: var(--navy); font-size: 1.25rem; font-weight: 900;
            transform: rotate(12deg); z-index: 10;
        }
        .chat-msgs { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; }
        .chat-msg { display: flex; gap: 1rem; }
        .chat-rev { flex-direction: row-reverse; }
        .chat-av {
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--hl); border: 2px solid var(--text);
            flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            font-weight: 900;
        }
        .chat-av-brand { background: var(--brand); color: var(--navy); }
        .chat-bubble {
            background: var(--surface); border: 2px solid var(--text);
            padding: 1rem; border-radius: 1rem;
            /* sharp corner on the start side (left in LTR, right in RTL) */
            border-start-start-radius: 0;
            box-shadow: var(--shad-sm); flex: 1;
        }
        .chat-dark {
            background: var(--text); color: var(--bg);
            /* sharp on the end side (right in LTR, left in RTL) */
            border-start-end-radius: 0;
            border-start-start-radius: 1rem;
            flex: 1; min-width: 0; overflow-wrap: break-word;
        }
        .chat-sm { display: inline-block; flex: none; }
        .dyn { color: var(--brand-d); font-weight: 900; font-size: 1.25rem; display: inline-block; margin-top: .25rem; }
        [data-theme="dark"] .dyn { color: var(--brand-l); }
        .typing-cursor::after { content: '|'; animation: blink 1s step-start infinite; color: var(--text); }
        @keyframes blink { 50% { opacity: 0; } }

        /* ─── TRANSPARENCY ───────────────────────────────────────────────────── */
        .section-trans { padding: 8rem 0; background: var(--bg); }
        .trans-hdr { text-align: center; margin-bottom: 4rem; }
        .trans-icon { font-size: 4.5rem; color: var(--brand); margin-bottom: 1.5rem; }
        .trans-grid {
            display: grid; grid-template-columns: 1fr;
            gap: 2rem; max-width: 56rem; margin: 0 auto 5rem;
        }
        @media (min-width: 768px) { .trans-grid { grid-template-columns: repeat(2, 1fr); } }
        .trans-card {
            background: var(--surface); padding: 2rem;
            border-radius: 2rem; border: 4px solid var(--text);
            box-shadow: var(--shad); position: relative;
        }
        .trans-dot {
            position: absolute; width: 40px; height: 40px;
            background: var(--brand); border-radius: 50%;
            border: 4px solid var(--text); display: none;
        }
        @media (min-width: 768px) { .trans-dot { display: block; } }
        /* logical inset properties flip automatically in RTL */
        .trans-dot-tl { top: -20px; inset-inline-start: -20px; }
        .trans-dot-br { bottom: -20px; inset-inline-end: -20px; }
        .trans-card-h {
            font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem;
            display: flex; align-items: center; gap: .75rem;
        }
        .trans-card-h i { color: var(--brand); font-size: 1.875rem; }
        .trans-card p { font-size: 1.1rem; color: var(--dim); font-weight: 500; line-height: 1.6; }

        /* ─── BACKERS CAROUSEL ───────────────────────────────────────────────── */
        .backers-box {
            background: var(--hl); border-radius: 3rem;
            padding: 3rem 2rem; border: 4px solid var(--text);
            text-align: center; box-shadow: var(--shad);
            max-width: 56rem; margin: 0 auto;
        }
        .backers-title { font-size: 2.25rem; font-weight: 900; text-transform: uppercase; margin-bottom: 2.5rem; }

        .bc-viewport {
            position: relative;
            overflow: hidden;
            height: 120px;
            margin-bottom: 1.25rem;
        }
        .bc-track {
            display: flex;
            height: 100%;
            transition: transform .5s ease;
            will-change: transform;
        }
        .bc-slide {
            flex: 0 0 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-inline: 3.5rem;
        }
        .bc-slide img {
            max-height: 64px;
            max-width: 100%;
            width: auto;
            object-fit: contain;
            opacity: .7;
            filter: grayscale(1);
            transition: opacity .3s, filter .3s;
        }
        .bc-slide img:hover { opacity: 1; filter: grayscale(0); }
        .bc-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--surface); border: 2px solid var(--text);
            box-shadow: var(--shad-sm); color: var(--text);
            display: flex; align-items: center; justify-content: center;
            z-index: 10; transition: background .2s, color .2s; cursor: pointer;
        }
        .bc-btn:hover { background: var(--brand); color: var(--navy); }
        .bc-prev { inset-inline-start: 0; }
        .bc-next { inset-inline-end: 0; }
        .bc-dots { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
        .bc-dot {
            width: 10px; height: 10px; border-radius: 50%;
            border: 2px solid var(--text); background: transparent;
            cursor: pointer; transition: background .2s; padding: 0;
        }
        .bc-dot.active { background: var(--text); }

        .btn-donate {
            display: inline-flex; align-items: center; gap: .75rem;
            padding: 1.1rem 2.5rem; background: var(--brand); color: var(--navy);
            font-weight: 900; font-size: 1.2rem; border-radius: 9999px;
            border: 2px solid var(--navy); box-shadow: var(--shad-sm);
            transition: transform .2s;
        }
        .btn-donate:hover { transform: scale(1.05); }

        /* ─── CONTRIBUTORS ───────────────────────────────────────────────────── */
        .section-contrib {
            padding: 5rem 0; background: var(--bg);
            border-top: 4px solid var(--border);
        }
        .contrib-inner { text-align: center; }
        .contrib-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 2rem; }
        .contrib-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; }
        .cw { position: relative; cursor: pointer; }
        .cw img {
            width: 56px; height: 56px; border-radius: 50%;
            border: 2px solid var(--text); box-shadow: var(--shad-sm);
            object-fit: cover;
        }
        .utip {
            position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%);
            background: var(--text); color: var(--bg);
            font-size: .75rem; font-weight: 900; padding: .35rem .75rem;
            border-radius: 9999px; white-space: nowrap;
            pointer-events: none; opacity: 0;
            border: 2px solid var(--text); box-shadow: var(--shad-sm);
            transition: opacity .15s; z-index: 10;
        }
        .cw:hover .utip { opacity: 1; }
        .utip.show { opacity: 1 !important; }
        .utip.shake { animation: shake .5s ease forwards; }
        @keyframes shake {
            0%,100% { transform: translateX(-50%) rotate(0deg); }
            15%  { transform: translateX(calc(-50% - 4px)) rotate(-4deg); }
            30%  { transform: translateX(calc(-50% + 4px)) rotate(4deg); }
            45%  { transform: translateX(calc(-50% - 3px)) rotate(-2deg); }
            60%  { transform: translateX(calc(-50% + 3px)) rotate(2deg); }
            75%  { transform: translateX(calc(-50% - 1px)) rotate(-1deg); }
        }
        .contrib-plus {
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--hl); border: 2px solid var(--text);
            box-shadow: var(--shad-sm); display: flex;
            align-items: center; justify-content: center;
            font-size: 1.25rem; color: var(--text);
            transition: background .2s, color .2s;
        }
        .contrib-plus:hover { background: var(--brand); color: var(--navy); }

        /* ─── FOOTER ─────────────────────────────────────────────────────────── */
        footer {
            padding: 4rem 0; background: var(--text); color: var(--bg);
            transition: background .3s, color .3s;
        }
        .footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
        .footer-logo { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
        .footer-logo-icon {
            width: 40px; height: 40px; background: var(--brand); color: var(--navy);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
        }
        .footer-logo-text { font-weight: 900; font-size: 1.75rem; letter-spacing: -.05em; }
        .footer-logo-text span { color: var(--brand); }
        .footer-links {
            display: flex; flex-wrap: wrap; justify-content: center;
            gap: 2rem; font-size: 1.1rem; font-weight: 500; margin-bottom: 2rem;
        }
        .footer-links a {
            color: color-mix(in srgb, var(--bg) 80%, transparent);
            transition: color .2s; display: inline-flex; align-items: center; gap: .4rem;
        }
        .footer-links a:hover { color: var(--brand); }
        .footer-credit-box {
            display: inline-block;
            background: color-mix(in srgb, var(--bg) 10%, transparent);
            border: 2px solid color-mix(in srgb, var(--bg) 20%, transparent);
            border-radius: 1rem; padding: 1rem 1.5rem;
            margin-bottom: 1.5rem; max-width: 28rem;
        }
        .footer-credit-box p {
            font-size: .875rem; font-weight: 500;
            color: color-mix(in srgb, var(--bg) 70%, transparent);
        }
        .footer-credit-box a { color: var(--brand); }
        .footer-credit-box a:hover { text-decoration: underline; }
        .footer-copy {
            font-size: .75rem; font-family: monospace; margin-top: 1rem;
            color: color-mix(in srgb, var(--bg) 40%, transparent);
        }