:root {
            --bg-void: #071318;
            --bg: #071318;
            --bg-elevated: #0b1d24;
            --card: rgba(11, 29, 36, 0.90);
            --card-deep: rgba(7, 19, 24, 0.96);
            --yellow: #f59e0b;
            --gold: #d97706;
            --gold-primary: #14b8a6;
            --gold-amber: #f59e0b;
            --gold-sheen: #fbbf24;
            --gold-dark: #b45309;
            --white: #f0fdfa;
            --text-silver: #99f6e4;
            --grey: #94a3b8;
            --dim: #64748b;
            --nordic-teal: #14b8a6;
            --nordic-teal-bright: #2dd4bf;
            --nordic-bronze: #d97706;
        }

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

        /* ===== LUXURY ARCHITECTURAL TEXT SELECTION ===== */
        ::selection {
            background: #14b8a6 !important;
            color: #071318 !important;
            text-shadow: none !important;
        }
        ::-moz-selection {
            background: #14b8a6 !important;
            color: #071318 !important;
            text-shadow: none !important;
        }
        img::selection {
            background: rgba(16, 185, 129, 0.3) !important;
        }

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

        body {

            font-family: 'Inter', sans-serif;

            background-color: var(--bg);

            color: var(--white);

            line-height: 1.7;

            overflow-x: hidden;

        }

        /* ===== CUSTOM SCROLLBAR ===== */

        ::-webkit-scrollbar { width: 10px; height: 10px; }

        ::-webkit-scrollbar-track { background: rgba(8, 12, 20, 0.95); border-left: 1px solid rgba(255, 255, 255, 0.05); }

        ::-webkit-scrollbar-thumb {

            background: var(--yellow);

            border-radius: 6px;

            border: 2px solid #0a0d14;

            transition: background 0.2s, box-shadow 0.2s;

        }

        ::-webkit-scrollbar-thumb:hover {

            background: #f59e0b;

            box-shadow: 0 0 10px rgba(234, 179, 8, 0.6);

        }

        /* ===== SCROLL PROGRESS BAR ===== */

        .scroll-progress {

            position: fixed; top: 0; left: 0;

            height: 3px; background: var(--yellow);

            z-index: 10001; width: 0%;

            transition: width 0.1s linear;

        }

        /* ===== PARTICLE CANVAS ===== */

        #particles {

            position: fixed; inset: 0;

            width: 100vw; height: 100vh;

            pointer-events: none;

            z-index: 0;

        }

        /* ===== CAD BLUEPRINT GRID ===== */

        .cad-grid {

            position: fixed; top: 0; left: 0;

            width: 100vw; height: 100vh;

            background-image:

                linear-gradient(to right, rgba(255, 215, 0, 0.028) 1px, transparent 1px),

                linear-gradient(to bottom, rgba(255, 215, 0, 0.028) 1px, transparent 1px);

            background-size: 42px 42px;

            mask-image: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 60%, transparent 85%);

            -webkit-mask-image: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 60%, transparent 85%);

            pointer-events: none;

            z-index: 0;

        }

        /* ===== ATMOSPHERIC GLOWS (ZERO-BLUR SHADER OPTIMIZATION) ===== */

        .atmos-gold {

            position: fixed; top: -250px; left: 12%;

            width: 900px; height: 700px;

            background: radial-gradient(circle, rgba(255, 190, 30, 0.065) 0%, rgba(255, 215, 0, 0.03) 30%, rgba(255, 215, 0, 0.01) 55%, transparent 75%);

            pointer-events: none; z-index: 0;

            will-change: transform;

            animation: driftGold 14s ease-in-out infinite alternate;

        }

        .atmos-depth {

            position: fixed; top: 120px; right: 0%;

            width: 950px; height: 900px;

            background: radial-gradient(circle, rgba(12, 30, 55, 0.28) 0%, rgba(6, 16, 30, 0.14) 40%, rgba(6, 16, 30, 0.04) 65%, transparent 80%);

            pointer-events: none; z-index: 0;

            will-change: transform;

            animation: driftDepth 18s ease-in-out infinite alternate;

        }

        .atmos-bottom {

            position: fixed; bottom: -180px; left: 35%;

            width: 800px; height: 600px;

            background: radial-gradient(circle, rgba(255, 200, 50, 0.045) 0%, rgba(255, 200, 50, 0.015) 35%, transparent 70%);

            pointer-events: none; z-index: 0;

            will-change: transform;

        }

        .vignette {

            position: fixed; top: 0; left: 0;

            width: 100vw; height: 100vh;

            background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);

            pointer-events: none; z-index: 0;

        }

        @keyframes driftGold {

            0% { transform: translate(0, 0) scale(1); opacity: 0.85; }

            100% { transform: translate(50px, 70px) scale(1.12); opacity: 1; }

        }

        @keyframes driftDepth {

            0% { transform: translate(0, 0) scale(1); }

            100% { transform: translate(-60px, -50px) scale(1.08); }

        }

        /* ===== DEEP DARK GLASS CARDS + SPOTLIGHT HOVER ===== */

        .project-card, .skill-card {

            position: relative;

            background: linear-gradient(150deg, rgba(13, 21, 35, 0.95) 0%, rgba(6, 12, 22, 0.98) 100%) !important;

            border: 1px solid rgba(255, 215, 0, 0.2) !important;

            border-radius: 16px !important;

            overflow: hidden;

            box-shadow:

                0 22px 50px rgba(0, 0, 0, 0.75),

                0 0 1px rgba(255, 215, 0, 0.3),

                inset 0 1px 0 rgba(255, 255, 255, 0.1);

            transition:

                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),

                border-color 0.4s ease,

                box-shadow 0.5s ease !important;

        }

        .project-card::before, .skill-card::before {

            content: '';

            position: absolute;

            top: var(--mouse-y, 40%);

            left: var(--mouse-x, 50%);

            transform: translate(-50%, -50%);

            width: 350px; height: 350px;

            background: radial-gradient(circle,

                rgba(255, 215, 0, 0.25) 0%,

                rgba(255, 190, 50, 0.1) 30%,

                rgba(12, 25, 45, 0.15) 55%,

                transparent 70%

            );

            opacity: 0;

            transition: opacity 0.35s ease;

            pointer-events: none;

            z-index: 1;

        }

        .project-card:hover::before, .skill-card:hover::before {

            opacity: 1;

        }

        .project-card::after, .skill-card::after {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; height: 1px;

            background: linear-gradient(90deg,

                transparent 5%,

                rgba(255, 215, 0, 0.45) 30%,

                rgba(255, 215, 0, 0.6) 50%,

                rgba(130, 210, 255, 0.15) 70%,

                rgba(255, 215, 0, 0.2) 85%,

                transparent 95%

            );

            pointer-events: none;

            z-index: 10;

        }

        .project-card:hover, .skill-card:hover {

            transform: translateY(-8px) !important;

            border-color: rgba(255, 215, 0, 0.55) !important;

            box-shadow:

                0 35px 70px rgba(0, 0, 0, 0.9),

                0 0 40px rgba(255, 215, 0, 0.15),

                0 0 80px rgba(10, 25, 50, 0.25),

                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

        }

        /* ===== MICRO-DETAILS & GLOWS ===== */

        @keyframes dotBreathe {

            0%, 100% { box-shadow: 0 0 6px #4ec8f0, 0 0 14px rgba(78, 200, 240, 0.3); opacity: 0.85; }

            50% { box-shadow: 0 0 8px #4ec8f0, 0 0 22px rgba(78, 200, 240, 0.5); opacity: 1; }

        }

        .pulse-dot {

            animation: dotBreathe 2.5s ease-in-out infinite !important;

        }

        .project-tag {

            background: linear-gradient(135deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.05) 100%) !important;

            border: 1px solid rgba(255, 215, 0, 0.35) !important;

            box-shadow: 0 0 10px rgba(255, 215, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

        }

        .project-stat-ribbon {

            background: rgba(10, 18, 30, 0.95) !important;

            border: 1px solid rgba(255, 215, 0, 0.2) !important;

        }

        .stat-pill-val {

            color: #FFD700 !important;

            text-shadow: 0 0 12px rgba(255, 215, 0, 0.3);

        }

        .btn-primary {

            background: linear-gradient(135deg, #ffd700 0%, #f5a623 50%, #b8860b 100%) !important;

            color: #030508 !important;

            font-family: 'Cinzel', serif !important;

            font-weight: 800 !important;

            letter-spacing: 1.5px !important;

            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.38), 0 0 30px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

            border: none !important;

        }

        .btn-primary:hover {

            transform: translateY(-2px) scale(1.02) !important;

            box-shadow: 0 12px 35px rgba(245, 158, 11, 0.55), 0 0 50px rgba(255, 215, 0, 0.35) !important;

        }

        .btn-outline {

            background: rgba(10, 20, 35, 0.85) !important;

            border: 1px solid rgba(255, 215, 0, 0.32) !important;

            font-family: 'Cinzel', serif !important;

            font-weight: 700 !important;

            letter-spacing: 1.5px !important;

        }

        .btn-outline:hover {

            border-color: var(--gold-primary) !important;

            background: rgba(14, 28, 48, 0.75) !important;

            box-shadow: 0 0 25px rgba(255, 215, 0, 0.2) !important;

        }

        /* ===== ANIMATIONS ===== */

        @keyframes fadeSlideUp {

            from { opacity: 0; transform: translateY(30px); }

            to { opacity: 1; transform: translateY(0); }

        }

        @keyframes photoReveal {

            from { opacity: 0; transform: scale(0.9) translateX(40px); }

            to { opacity: 1; transform: scale(1) translateX(0); }

        }

        @keyframes typing {

            from { width: 0; }

            to { width: 100%; }

        }

        @keyframes blink {

            0%, 100% { border-color: var(--yellow); }

            50% { border-color: transparent; }

        }

        @keyframes cursorHide {

            to { border-color: transparent; }

        }

        @keyframes fadeIn {

            from { opacity: 0; }

            to { opacity: 1; }

        }

        

        /* ===== LUXURY DOCUMENT & HIGH-DEFINITION CERTIFICATE VIEWER ===== */

        .doc-modal {

            position: fixed;

            inset: 0;

            background: rgba(3, 6, 12, 0.92);

            z-index: 100000;

            display: none;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            padding: 16px;

        }

        .doc-modal.active {

            display: flex;

        }

        .doc-modal-content {

            width: 95%;

            max-width: 1300px;

            height: 92vh;

            background: #090e18;

            border-radius: 16px;

            position: relative;

            border: 1px solid rgba(255, 215, 0, 0.35);

            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 215, 0, 0.15);

            cursor: default;

            display: flex;

            flex-direction: column;

            overflow: hidden;

        }

        .doc-modal-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 16px;

            padding: 14px 20px;

            background: linear-gradient(180deg, rgba(14, 22, 38, 0.98) 0%, rgba(8, 14, 24, 0.98) 100%);

            border-bottom: 1px solid rgba(255, 215, 0, 0.2);

            flex-wrap: wrap;

            z-index: 10;

        }

        .doc-modal-title-area {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        .doc-modal-badge {

            width: 38px;

            height: 38px;

            border-radius: 10px;

            background: rgba(255, 215, 0, 0.12);

            border: 1px solid rgba(255, 215, 0, 0.35);

            display: flex;

            align-items: center;

            justify-content: center;

            color: #FFD700;

            font-size: 1.1rem;

            flex-shrink: 0;

        }

        .doc-modal-text h4 {

            font-family: var(--font-tech);

            font-size: 0.95rem;

            font-weight: 700;

            color: #ffffff;

            letter-spacing: 0.04em;

            margin: 0;

            line-height: 1.25;

        }

        .doc-modal-text p {

            font-size: 0.76rem;

            color: rgba(255, 255, 255, 0.6);

            margin: 2px 0 0 0;

        }

        .doc-modal-tabs {

            display: flex;

            align-items: center;

            gap: 6px;

            background: rgba(5, 10, 18, 0.85);

            padding: 4px;

            border-radius: 9999px;

            border: 1px solid rgba(255, 215, 0, 0.25);

        }

        .doc-tab-btn {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 6px 14px;

            border-radius: 9999px;

            border: none;

            background: transparent;

            color: rgba(255, 255, 255, 0.7);

            font-family: var(--font-tech);

            font-size: 0.74rem;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.25s;

        }

        .doc-tab-btn:hover {

            color: #FFD700;

        }

        .doc-tab-btn.active {

            background: rgba(255, 215, 0, 0.2);

            color: #FFD700;

            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.18);

        }

        .doc-modal-actions {

            display: flex;

            align-items: center;

            gap: 10px;

        }

        .doc-hdr-btn {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 8px 16px;

            background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);

            border: 1px solid rgba(255, 215, 0, 0.4);

            border-radius: 8px;

            color: #FFD700;

            font-family: var(--font-tech);

            font-size: 0.78rem;

            font-weight: 700;

            text-decoration: none;

            letter-spacing: 0.05em;

            cursor: pointer;

            transition: all 0.25s;

        }

        .doc-hdr-btn:hover {

            background: #FFD700;

            color: #050811;

            box-shadow: 0 4px 18px rgba(255, 215, 0, 0.4);

            transform: translateY(-1px);

        }

        .doc-hdr-close {

            width: 36px;

            height: 36px;

            border-radius: 8px;

            background: rgba(255, 255, 255, 0.06);

            border: 1px solid rgba(255, 255, 255, 0.15);

            color: #ffffff;

            font-size: 1.1rem;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: all 0.25s;

        }

        .doc-hdr-close:hover {

            background: rgba(239, 68, 68, 0.2);

            border-color: rgba(239, 68, 68, 0.6);

            color: #ef4444;

            transform: scale(1.05);

        }

        .doc-cert-stage {

            flex: 1;

            overflow: auto;

            background: radial-gradient(circle at 50% 50%, #0d1524 0%, #04070e 100%);

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 24px;

        }

        .doc-cert-wrapper {

            max-width: 100%;

            max-height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .doc-cert-img {

            max-width: 100%;

            max-height: calc(92vh - 90px);

            width: auto;

            height: auto;

            object-fit: contain;

            border-radius: 8px;

            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 215, 0, 0.12);

            border: 1px solid rgba(255, 215, 0, 0.25);

            background: #fff;

            transition: opacity 0.3s;

        }

        .doc-iframe {

            flex: 1;

            width: 100%;

            height: 100%;

            border: none;

        }

        .view-doc-btn {

            background: transparent; border: 1px solid var(--yellow);

            color: var(--yellow); padding: 8px 16px; border-radius: 4px;

            font-family: 'Inter', sans-serif; font-size: 0.8rem;

            text-transform: uppercase; letter-spacing: 1px; cursor: pointer;

            transition: all 0.3s; margin-top: auto; align-self: flex-end;

            display: inline-flex; align-items: center; gap: 8px;

        }

        .view-doc-btn:hover { background: var(--yellow); color: #000; }

        .project-actions { margin-top: auto; padding-top: 24px; text-align: right; }

        /* ==========================================================================

           GEN-Z LUXURY HIGH-TECH SYSTEM CSS OVERRIDES

           ========================================================================== */

        :root {

            --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

            --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

            --font-tech: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

            --font-mono: 'JetBrains Mono', monospace;

        }

        body {

            font-family: var(--font-body) !important;

            letter-spacing: -0.01em;

            color: #E2E8F0;

        }

        /* Typography Refinement */

        .section-title {

            font-family: var(--font-display) !important;

            font-size: 2.2rem !important;

            font-weight: 800 !important;

            letter-spacing: -0.025em !important;

            text-transform: uppercase !important;

        }

        .section-label {

            font-family: var(--font-tech) !important;

            font-size: 0.76rem !important;

            font-weight: 700 !important;

            letter-spacing: 0.16em !important;

            text-transform: uppercase !important;

            color: var(--gold) !important;

        }

        .gold-gradient-text {

            background: linear-gradient(135deg, #FFF099 0%, #FFD700 45%, #F59E0B 80%, #D97706 100%) !important;

            -webkit-background-clip: text !important;

            -webkit-text-fill-color: transparent !important;

            display: inline-block !important;

        }

        

        /* ===== EXECUTIVE PRINT / PDF EXPORT STYLESHEET ===== */
@media print {
    *, *::before, *::after {
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #1e293b !important;
    }

    html, body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }

    /* High-contrast structural cards */
    .section {
        padding: 24px 0 !important;
        page-break-inside: avoid;
    }

    .section-title {
        color: #0f172a !important;
        font-size: 1.8rem !important;
    }

    .section-title .title-accent {
        color: #b45309 !important;
        font-weight: 800 !important;
    }

    .section-kicker {
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #475569 !important;
    }

    a {
        text-decoration: underline !important;
        color: #0369a1 !important;
    }

    /* Print header notice */
    body::before {
        content: "SYED ABDUL RAHMAN // CIVIL & STRUCTURAL ENGINEERING DOSSIER • https://www.syedabdulrahman-civil.me";
        display: block;
        text-align: center;
        font-size: 8pt;
        font-weight: 700;
        color: #64748b;
        border-bottom: 1px solid #cbd5e1;
        padding-bottom: 6px;
        margin-bottom: 20px;
    }
}

/* ===== NORDIC SLATE & BRUSHED BRONZE CURSOR ===== */
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background: #2dd4bf;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #2dd4bf;
    will-change: transform;
}
.custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(217, 119, 6, 0.65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    will-change: transform;
}
.custom-cursor-ring.hover {
    width: 44px;
    height: 44px;
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.10);
}
.custom-cursor-ring.cad-crosshair {
    border-radius: 0;
    width: 24px;
    height: 24px;
    border-color: #f59e0b;
}