@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

            /* ── layout wrapper ── */
            #view-support {
                padding: 0 !important;
                position: relative;
                overflow: hidden;
            }

            /* ── parallax sections ── */
            #sp-hero {
                position: relative;
                padding: 4rem 2.2rem 3.5rem;
                overflow: hidden;
                min-height: 340px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            /* animated blobs */
            .sp-blob {
                position: absolute;
                border-radius: 50%;
                filter: blur(80px);
                pointer-events: none;
                will-change: transform;
            }
            .sp-blob-1 {
                width: 500px; height: 500px;
                background: radial-gradient(circle, rgba(var(--primary-rgb),.32), transparent 68%);
                top: -180px; left: -160px;
                animation: sp-drift1 18s ease-in-out infinite;
            }
            .sp-blob-2 {
                width: 360px; height: 360px;
                background: radial-gradient(circle, rgba(139,92,246,.22), transparent 68%);
                bottom: -120px; right: -80px;
                animation: sp-drift2 24s ease-in-out infinite;
            }
            .sp-blob-3 {
                width: 260px; height: 260px;
                background: radial-gradient(circle, rgba(192,132,252,.18), transparent 68%);
                top: 30%; right: 10%;
                animation: sp-drift3 30s ease-in-out infinite;
            }
            @keyframes sp-drift1 {
                0%,100% { transform: translate(0,0) scale(1); }
                40%      { transform: translate(60px,40px) scale(1.12); }
                70%      { transform: translate(30px,80px) scale(.92); }
            }
            @keyframes sp-drift2 {
                0%,100% { transform: translate(0,0) scale(1); }
                35%      { transform: translate(-50px,-30px) scale(1.18); }
                70%      { transform: translate(-25px,-70px) scale(1.04); }
            }
            @keyframes sp-drift3 {
                0%,100% { transform: translate(-50%,-50%) scale(1); }
                50%      { transform: translate(-50%,-50%) scale(1.35); }
            }

            /* grid overlay */
            .sp-grid {
                position: absolute; inset: 0;
                background-image:
                    linear-gradient(rgba(var(--primary-rgb),.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--primary-rgb),.04) 1px, transparent 1px);
                background-size: 52px 52px;
                pointer-events: none;
                will-change: transform;
            }

            /* geo floating lines */
            .sp-geo-line {
                position: absolute;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.14), transparent);
                pointer-events: none;
                animation: sp-line-drift linear infinite;
            }
            @keyframes sp-line-drift {
                0%   { transform: translateX(-110%); opacity: 0; }
                8%   { opacity: 1; }
                92%  { opacity: 1; }
                100% { transform: translateX(110vw); opacity: 0; }
            }

            /* ── hero eyebrow ── */
            .sp-eyebrow {
                display: inline-flex; align-items: center; gap: .45rem;
                padding: .35rem 1.1rem;
                background: rgba(var(--primary-rgb),.1);
                border: 1px solid rgba(var(--primary-rgb),.3);
                border-radius: 40px;
                color: #c084fc;
                font-size: .72rem; font-weight: 700;
                letter-spacing: .1em; text-transform: uppercase;
                margin-bottom: 1.5rem;
                position: relative; z-index: 2;
                animation: sp-reveal .7s ease both;
            }
            .sp-eyebrow-dot {
                width: 6px; height: 6px; border-radius: 50%;
                background: var(--primary);
                animation: sp-dot-pulse 2s ease-in-out infinite;
                flex-shrink: 0;
            }
            @keyframes sp-dot-pulse {
                0%,100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb),.6); }
                50%      { box-shadow: 0 0 0 5px rgba(var(--primary-rgb),0); }
            }

            /* ── hero title ── */
            .sp-hero-title {
                font-family: 'DM Serif Display', serif;
                font-size: clamp(2rem, 5.5vw, 3.2rem);
                line-height: 1.1; letter-spacing: -.028em;
                margin-bottom: .8rem;
                position: relative; z-index: 2;
                animation: sp-reveal .8s .08s ease both;
            }
            .sp-hero-title em {
                font-style: italic;
                background: linear-gradient(135deg, #c084fc 0%, var(--primary) 55%, #f0c060 100%);
                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            }
            .sp-hero-sub {
                font-size: .93rem; line-height: 1.75;
                color: var(--text-muted); max-width: 500px;
                position: relative; z-index: 2;
                animation: sp-reveal .9s .16s ease both;
            }
            @keyframes sp-reveal {
                from { opacity: 0; transform: translateY(24px); }
                to   { opacity: 1; transform: translateY(0); }
            }

            /* ── scroll reveal ── */
            .sp-sr {
                opacity: 0; transform: translateY(32px);
                transition: opacity .65s ease, transform .65s ease;
            }
            .sp-sr.sp-visible { opacity: 1; transform: translateY(0); }
            .sp-sr-d1 { transition-delay: .08s; }
            .sp-sr-d2 { transition-delay: .16s; }
            .sp-sr-d3 { transition-delay: .24s; }
            .sp-sr-d4 { transition-delay: .32s; }

            /* ── section padding ── */
            .sp-section {
                padding: 2.8rem 2.2rem;
                position: relative;
            }
            .sp-section-alt {
                background: linear-gradient(180deg, rgba(var(--primary-rgb),.03) 0%, transparent 100%);
                border-top: 1px solid rgba(var(--primary-rgb),.1);
                border-bottom: 1px solid rgba(var(--primary-rgb),.1);
            }

            /* ── section label ── */
            .sp-label {
                display: inline-block;
                padding: .25rem .9rem;
                background: rgba(var(--primary-rgb),.08);
                border: 1px solid rgba(var(--primary-rgb),.2);
                border-radius: 40px;
                color: #c084fc; font-size: .68rem; font-weight: 700;
                letter-spacing: .1em; text-transform: uppercase;
                margin-bottom: .9rem;
            }
            .sp-section-title {
                font-family: 'DM Serif Display', serif;
                font-size: clamp(1.5rem, 3.5vw, 2rem);
                line-height: 1.15; letter-spacing: -.022em;
                margin-bottom: .6rem;
            }
            .sp-section-title em {
                font-style: italic;
                background: linear-gradient(135deg, var(--primary), #c084fc);
                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            }
            .sp-section-desc {
                color: var(--text-muted); font-size: .875rem; line-height: 1.75;
                max-width: 480px; margin-bottom: 2rem;
            }

            /* ── running divider ── */
            .sp-divider {
                position: relative; height: 2px; overflow: hidden; margin: 0;
            }
            .sp-divider-line {
                position: absolute; width: 200%; height: 1px; top: 50%;
                background: linear-gradient(90deg, transparent 0%, rgba(var(--primary-rgb),.12) 15%, var(--primary) 50%, rgba(var(--primary-rgb),.12) 85%, transparent 100%);
                animation: sp-divider-scroll 7s linear infinite;
            }
            @keyframes sp-divider-scroll {
                0%   { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }

            /* ── DONATE GRID ── */
            .sp-donate-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
                gap: 10px; margin-bottom: 1.5rem;
            }
            .sp-donate-btn {
                display: flex; flex-direction: column; align-items: center;
                padding: 1rem .5rem;
                background: rgba(0,112,201,.07);
                border: 1px solid rgba(0,112,201,.22);
                border-radius: 14px;
                color: #4da6ff; font-weight: 700; font-size: .92rem;
                cursor: pointer; transition: all .22s;
                font-family: var(--font-main);
                position: relative; overflow: hidden;
            }
            .sp-donate-btn::before {
                content: '';
                position: absolute; inset: 0;
                background: radial-gradient(circle at 50% 0%, rgba(0,112,201,.12), transparent 65%);
                opacity: 0; transition: opacity .3s;
            }
            .sp-donate-btn:hover::before { opacity: 1; }
            .sp-donate-btn:hover {
                border-color: rgba(0,112,201,.5);
                background: rgba(0,112,201,.13);
                transform: translateY(-3px);
                box-shadow: 0 8px 24px rgba(0,112,201,.15);
            }
            .sp-donate-btn.sp-donate-featured {
                background: rgba(0,112,201,.13);
                border-color: rgba(0,112,201,.42);
                box-shadow: 0 0 0 1px rgba(0,112,201,.12), 0 4px 16px rgba(0,112,201,.1);
            }
            .sp-donate-badge {
                font-size: .6rem; color: #4da6ff; opacity: .75;
                font-weight: 600; letter-spacing: .05em; margin-top: .2rem;
            }
            .sp-donate-custom {
                background: rgba(255,255,255,.03);
                border-color: rgba(255,255,255,.1);
                color: var(--text-muted); font-size: .85rem;
            }
            .sp-donate-custom:hover {
                border-color: rgba(var(--primary-rgb),.35);
                background: rgba(var(--primary-rgb),.07);
                color: var(--text-main);
            }

            /* ── CONTRIBUTE GRID ── */
            .sp-contrib-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                gap: 12px;
            }
            .sp-contrib-card {
                padding: 1.4rem 1.1rem;
                border-radius: 16px;
                border: 1px solid rgba(255,255,255,.07);
                background: rgba(255,255,255,.025);
                text-align: center; text-decoration: none; color: inherit;
                display: block; cursor: pointer;
                transition: all .28s cubic-bezier(.22,.68,0,1.2);
                position: relative; overflow: hidden;
            }
            .sp-contrib-card::after {
                content: '';
                position: absolute; inset: 0;
                background: radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb),.1), transparent 60%);
                opacity: 0; transition: opacity .3s;
            }
            .sp-contrib-card:hover::after { opacity: 1; }
            .sp-contrib-card:hover {
                border-color: rgba(var(--primary-rgb),.4);
                transform: translateY(-5px);
                box-shadow: 0 12px 32px rgba(var(--primary-rgb),.12);
            }
            .sp-contrib-icon { font-size: 1.9rem; margin-bottom: .6rem; display: block; }
            .sp-contrib-title { font-weight: 700; font-size: .88rem; margin-bottom: .25rem; }
            .sp-contrib-desc { color: var(--text-muted); font-size: .75rem; line-height: 1.5; }

            /* ── STATS GRID (parallax card) ── */
            .sp-stats-panel {
                background: linear-gradient(135deg, rgba(var(--primary-rgb),.08), rgba(139,92,246,.05));
                border: 1px solid rgba(var(--primary-rgb),.18);
                border-radius: 20px;
                padding: 1.8rem;
                position: relative; overflow: hidden;
            }
            .sp-stats-panel::before {
                content: '';
                position: absolute; top: -40%; right: -15%;
                width: 300px; height: 300px;
                background: radial-gradient(circle, rgba(var(--primary-rgb),.08), transparent);
                border-radius: 50%; pointer-events: none;
            }
            #supportStatsGrid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                gap: 12px;
            }

            /* ── FEEDBACK PANEL ── */
            .sp-feedback-panel {
                background: rgba(255,255,255,.025);
                border: 1px solid rgba(255,255,255,.07);
                border-radius: 20px;
                padding: 2rem 1.8rem;
            }
            .sp-feedback-panel:focus-within {
                border-color: rgba(var(--primary-rgb),.3);
                box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.06);
            }
            .sp-emoji-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.2rem; }
            .sp-emoji-btn {
                padding: 10px 16px; border-radius: 12px;
                background: rgba(255,255,255,.03);
                border: 1px solid rgba(255,255,255,.07);
                font-size: 1.35rem; cursor: pointer;
                transition: transform .2s, box-shadow .2s;
                font-family: var(--font-main);
            }
            .sp-emoji-btn:hover { transform: scale(1.18); box-shadow: 0 4px 16px rgba(var(--primary-rgb),.2); }

            /* ── CHANGELOG ── */
            .sp-changelog-wrap {
                background: rgba(255,255,255,.02);
                border: 1px solid rgba(255,255,255,.06);
                border-radius: 20px;
                padding: 1.8rem;
            }
            #supportChangelog { display: flex; flex-direction: column; gap: 10px; }

            /* ── FLOATING CARD (parallax depth) ── */
            .sp-float-card {
                background: linear-gradient(135deg, rgba(var(--primary-rgb),.12), rgba(10,8,20,.95));
                border: 1px solid rgba(var(--primary-rgb),.25);
                border-radius: 18px;
                padding: 1.4rem 1.6rem;
                position: relative;
                animation: sp-float-anim 6s ease-in-out infinite;
                backdrop-filter: blur(12px);
            }
            @keyframes sp-float-anim {
                0%,100% { transform: translateY(0) rotate(-.3deg); }
                50%      { transform: translateY(-8px) rotate(.3deg); }
            }
            .sp-float-metric {
                font-family: 'DM Serif Display', serif;
                font-size: 2.4rem; line-height: 1;
                background: linear-gradient(135deg, var(--primary), #c084fc);
                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            }
            .sp-float-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-top: .3rem; }

            /* ── SPLIT LAYOUT ── */
            .sp-split {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2.5rem;
                align-items: center;
            }
            @media (max-width: 720px) {
                .sp-split { grid-template-columns: 1fr; }
            }
            .sp-float-stack {
                display: flex; flex-direction: column; gap: 1rem;
            }
            .sp-float-row { display: flex; gap: 1rem; }
            .sp-float-row .sp-float-card { flex: 1; }

            /* ── FOOTER strip ── */
            .sp-footer {
                border-top: 1px solid rgba(255,255,255,.06);
                padding: 1.8rem 2.2rem;
                display: flex; flex-wrap: wrap;
                align-items: center; justify-content: space-between; gap: 1rem;
            }
            .sp-footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
            .sp-footer-links a {
                color: var(--text-muted); text-decoration: none;
                font-size: .78rem; transition: color .22s;
            }
            .sp-footer-links a:hover { color: var(--primary); }