body {
            background-color: #11151c;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
        }
        html[lang="ar"] body { font-family: 'Cairo', sans-serif; }

        /* ===== Full-page artwork background (static, no motion) ===== */
        .site-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: url("page-bg.webp");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #05070c;
            transform: translateZ(0);
        }
        /* Portrait phones/tablets get the dedicated portrait crop */
        @media (max-aspect-ratio: 1/1) {
            .site-bg { background-image: url("page-bg-mobile.webp"); }
        }
        .skill-box { border: 1px solid rgba(255, 106, 0, 0.5); }
        .modal { display: none; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
        .modal.active { display: flex; }
        #lightbox { transition: opacity 0.3s ease; }
        
        .pixelated {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .pixelated-zoom-box {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            width: auto !important;
            height: auto !important;
            max-width: 80vw !important;
            max-height: 80vh !important;
            min-width: 350px;
        }

        /* ================= OROKIN DAMASCUS AESTHETIC ================= */
        :root {
            --accent: #ff6a00;
            --accentHover: #cc5500;
            --accent2: #00e0ff;
            --void: #00e0ff;
            --void2: #8a5cff;
            --gold-1: #f6e6a8;
            --gold-2: #d4af37;
            --gold-3: #8a6d1f;
            --gold-grad: linear-gradient(135deg, #f6e6a8 0%, #d4af37 45%, #8a6d1f 100%);
            --gold-line: rgba(212, 175, 55, 0.35);
        }

        /* Orbitron for Latin headings & logo */
        .gamer-font,
        html[lang="en"] h1,
        html[lang="en"] h2,
        html[lang="en"] h3,
        html[lang="en"] h4 {
            font-family: 'Orbitron', 'Inter', sans-serif;
            letter-spacing: 0.06em;
        }

        /* 8-bit pixel font for HUD tags / badges (Latin only) */
        html[lang="en"] #projects .font-mono {
            font-family: 'Press Start 2P', monospace;
            font-size: 0.5rem;
            line-height: 1.7;
        }

        /* Animated Orokin energy gradient on the name */
        #dynamicName {
            /* Removed animated gradient and glow effect */
            color: white;
            font-weight: bold;
            text-shadow: 0 0 8px rgba(0,0,0,0.3);
        }
        

        /* Warframe void-energy pulse */


        /* Section titles: 8-point star + gold energy underline */
        section h2 { position: relative; }
        section h2::before {
            content: '\2726  ';
            color: var(--gold-2);
            text-shadow: 0 0 10px rgba(212,175,55,0.9);
        }
        section h2::after {
            content: '';
            display: block;
            width: 72px;
            height: 2px;
            margin-top: 8px;
            background: linear-gradient(90deg, var(--gold-2), rgba(255,106,0,0.8), transparent);
        }

        /* ===== Project cards: Warframe chamfer + Orokin gold hairline ===== */
        #projects .group {
            position: relative;
            border-radius: 0 !important;
            border-color: transparent !important;
            clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
        }
        #projects .group::before {
            content: '';
            position: absolute;
            inset: 6px;
            border: 1px solid var(--gold-line);
            clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
            pointer-events: none;
            z-index: 5;
        }
        #projects .group::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M14 5H47V38' stroke='%23d4af37' stroke-width='2'/%3E%3Cpath d='M22 12H40V30' stroke='%2300e0ff' stroke-opacity='0.85' stroke-width='1.5'/%3E%3Cpath d='M47 5L31 21' stroke='%23d4af37' stroke-opacity='0.5' stroke-width='1'/%3E%3Ccircle cx='47' cy='5' r='2' fill='%23d4af37'/%3E%3C/g%3E%3C/svg%3E"),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M38 47H5V14' stroke='%23d4af37' stroke-width='2'/%3E%3Cpath d='M30 40H12V22' stroke='%2300e0ff' stroke-opacity='0.85' stroke-width='1.5'/%3E%3Cpath d='M5 47L21 31' stroke='%23d4af37' stroke-opacity='0.5' stroke-width='1'/%3E%3Ccircle cx='5' cy='47' r='2' fill='%23d4af37'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: top right, bottom left;
            background-size: 52px 52px, 52px 52px;
            opacity: 0;
            transform: translate(8px, -8px);
            transition: opacity .3s ease, transform .3s ease;
            pointer-events: none;
            z-index: 6;
        }
        #projects .group:hover {
            transform: translateY(-4px);
            filter: drop-shadow(0 0 14px rgba(0,224,255,0.35)) drop-shadow(0 0 6px rgba(212,175,55,0.35));
        }
        #projects .group:hover::after { opacity: 1; transform: translate(0, 0); }
        #projects .group > div:first-child { border: 1px solid rgba(212,175,55,0.25); }

        /* tag badges -> Orokin gold */
        #projects span.border {
            border-color: rgba(212,175,55,0.45) !important;
            color: #e9d9a6;
        }

        /* ===== Orokin chamfered buttons ===== */
        a.bg-accent,
        header a.border,
        .modal a.bg-accent,
        .modal a.border {
            border-radius: 0 !important;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        }
        a.bg-accent:hover {
            box-shadow: 0 0 20px rgba(255,106,0,0.6), 0 0 8px rgba(0,224,255,0.35);
            animation: oroPulse 1.6s ease-in-out infinite;
        }

        /* ===== Modals as Orokin vessels ===== */
        .modal > div {
            border-radius: 0 !important;
            max-height: calc(100vh - 8rem) !important;
            clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
            background-image: linear-gradient(180deg, rgba(212,175,55,0.06), transparent 30%);
        }

        /* skill boxes -> gold-framed, chamfered (not interactive, no hover) */
        .skill-box {
            border-color: rgba(212,175,55,0.4) !important;
            border-radius: 0 !important;
            clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
        }
        .skill-box i { color: var(--gold-2); filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); }

        /* ===== Language proficiency meters ===== */
        .lang-track {
            height: 9px;
            border-radius: 999px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(212,175,55,0.20);
            overflow: hidden;
        }
        /* Tenno (TT) mode: render with the tenObet font instead of canvas glyphs */
        @font-face {
            font-family: 'tenObet';
            src: url('tennobet.ttf') format('truetype');
            font-display: swap;
        }
        body.tenno-active,
        body.tenno-active :not(i):not(code):not(input):not(textarea):not(select):not(option):not([data-tenno-skip]):not([data-tenno-skip] *) {
            font-family: 'tenObet', 'Inter', sans-serif !important;
        }

        /* In Tenno mode, shrink the brand to keep the nav links + language menu on screen */
        body.tenno-active .nav-brand-full { display: none !important; }
        body.tenno-active .nav-brand-short { display: inline !important; }
        /* Tenno words are wider: give wide language labels room and stack the list */
        body.tenno-active .lang-list { grid-template-columns: 1fr !important; }
        body.tenno-active .lang-list span[data-i18n^="level"] { width: 12rem; }
        body.tenno-active .lang-list span[data-i18n^="lang"] { width: 7rem; }

        .lang-fill {
            position: relative;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--gold-2), var(--accent));
            box-shadow: 0 0 12px rgba(255,106,0,0.45);
            animation: langGrow 1.1s cubic-bezier(0.22,0.61,0.36,1) both;
        }
        .lang-fill::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 2px;
            width: 6px;
            height: 6px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 8px #ffb347;
        }
        @keyframes langGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
        @media (prefers-reduced-motion: reduce) { .lang-fill { animation: none; } }

        /* profile photo: gold energy ring */
        /* logo in Orokin gold */
        nav .gamer-font {
            color: var(--gold-2) !important;
            text-shadow: 0 0 10px rgba(212,175,55,0.5);
        }

        /* nav: fused gold/void energy underline */
        nav::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-2), var(--void), var(--accent), transparent);
            opacity: 0.8;
        }

        /* Page content sits above the fixed background layers */
        body > header,
        body > section,
        body > footer,
        body > .oro-divider { position: relative; z-index: 1; }

        /* ===== Orokin Lotus emblem shapes ===== */
        .nav-lotus {
            height: 52px;
            width: auto;
            flex: none;
            filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.45)) drop-shadow(0 0 14px rgba(212, 175, 55, 0.35));
            animation: oroPulse 3.6s ease-in-out infinite;
            transition: transform 0.25s ease, filter 0.25s ease;
            cursor: pointer;
        }
        @media (min-width: 640px) {
            .nav-lotus { height: 66px; }
        }
        @media (min-width: 1024px) {
            .nav-lotus { height: 74px; }
        }
        .nav-lotus:hover {
            transform: scale(1.08);
            filter: drop-shadow(0 0 10px rgba(0, 224, 255, 0.7)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
        }
        @media (prefers-reduced-motion: reduce) {
            .nav-lotus { animation: none; }
            #dynamicName { animation: none; }
            .oro-emblem { animation: none; }
            .modal.active, .modal.active > div,
            #lightbox:not(.hidden), #lightbox:not(.hidden) #lightbox-img,
            #lang-menu:not(.hidden) { animation: none; }
            .viewer-spinner { animation: none; }
        }
        .oro-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            max-width: 1100px;
            margin: 0 auto;
            padding: 10px 24px;
        }
        .oro-line { flex: 1; height: 1px; }
        .oro-line:first-child { background: linear-gradient(90deg, transparent, var(--gold-line)); }
        .oro-line:last-child { background: linear-gradient(270deg, transparent, var(--gold-line)); }
        .oro-emblem {
            width: 38px;
            height: 38px;
            color: var(--gold-2);
            filter: drop-shadow(0 0 7px rgba(212,175,55,0.65));
            animation: oroPulse 3.2s ease-in-out infinite;
            flex: none;
        }

        /* Gamer CRT scanlines + screen vignette */
        .crt-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 70;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,0.035) 0px,
                rgba(255,255,255,0.035) 1px,
                transparent 1px,
                transparent 3px
            );
            mix-blend-mode: overlay;
        }
        .screen-vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 69;
            box-shadow: inset 0 0 160px rgba(0,0,0,0.55);
        }

        /* ===== Smooth motion ===== */
        html { scroll-behavior: smooth; }
        [id] { scroll-margin-top: 92px; }

        /* Press feedback on every clickable element */
        a, button { transition: transform 0.15s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
        a:active, button:active { transform: scale(0.95); }
        [onclick]:active { transform: scale(0.985); }
        /* Keyboard focus ring for div-based interactive cards/thumbs (role=button) */
        [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
        #lightbox > div:active { transform: none !important; }

        /* Modal entrance */
        @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalPopIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
        .modal.active { animation: modalFadeIn 0.25s ease; }
        .modal.active > div { animation: modalPopIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
        #lightbox:not(.hidden) { animation: modalFadeIn 0.25s ease; }
        #lightbox:not(.hidden) #lightbox-img { animation: modalPopIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

        /* Language dropdown entrance */
        @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
        #lang-menu:not(.hidden) { animation: dropIn 0.18s ease; }

        /* Section nav links */
        .nav-link {
            position: relative;
            padding: 6px 12px;
            color: #9aa4b2;
            letter-spacing: 0.05em;
            white-space: nowrap;
            transition: color 0.25s ease;
        }
        @media (max-width: 1023px) {
            .nav-link { padding: 6px 6px; font-size: 12px; letter-spacing: 0; }
        }
        .nav-link::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 0;
            height: 2px;
            border-radius: 2px;
            background: #ff6a00;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        .nav-link:hover { color: #fff; }
        .nav-link:hover::after,
        .nav-link.active::after { transform: scaleX(1); }
        .nav-link.active { color: #fff; }
        html[dir="rtl"] .nav-link::after { transform-origin: right; }

        /* Embedded viewer: GPU slide + fade; iframe reveals after the panel settles */
        #viewer {
            display: flex;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(0, 30px, 0);
            will-change: opacity, transform;
            transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                        transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                        visibility 0s linear 0.32s;
        }
        #viewer.viewer-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate3d(0, 0, 0);
            transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                        transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                        visibility 0s;
        }
        #viewer-frame { opacity: 0; transition: opacity 0.4s ease; }
        #viewer.content-ready #viewer-frame { opacity: 1; }
        #viewer-loading { opacity: 1; transition: opacity 0.3s ease; }
        #viewer.content-ready #viewer-loading { opacity: 0; pointer-events: none; }
        .viewer-spinner {
            width: 46px; height: 46px;
            border: 3px solid rgba(255, 106, 0, 0.25);
            border-top-color: #ff6a00;
            border-radius: 50%;
            animation: viewerSpin 0.8s linear infinite;
        }
        @keyframes viewerSpin { to { transform: rotate(360deg); } }

        /* ================= TENNO DAMASCUS AESTHETIC (alternate theme) =================
           Activated by body.theme-tenno (toggled in main.js). Layers watered
           Damascus-steel artwork, Tennobet script columns and an imperial
           gold / void palette over the default Orokin look. */
        body.theme-tenno {
            --accent: #c9a227;
            --accentHover: #a9861c;
            --accent2: #9fd8e0;
            --void: #9fd8e0;
            --void2: #7a6bb5;
            --gold-1: #f0e6bc;
            --gold-2: #c9a227;
            --gold-3: #7c6413;
            --gold-grad: linear-gradient(135deg, #f0e6bc 0%, #c9a227 45%, #7c6413 100%);
            --gold-line: rgba(201, 162, 39, 0.35);
            background-color: #05070c;
        }

        /* ===== Tennobet script columns (the Tenno language, drawn as texture) ===== */
        .tenno-script { display: none; }
        body.theme-tenno .tenno-script {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            overflow: hidden;
        }
        body.theme-tenno .tenno-script__col {
            position: absolute;
            top: -4%;
            bottom: -4%;
            font-family: 'tenObet', 'Inter', sans-serif;
            font-size: 20px;
            line-height: 1;
            letter-spacing: 0.42em;
            white-space: nowrap;
            writing-mode: vertical-rl;
            color: rgba(232, 217, 160, 0.13);
            text-shadow: 0 0 14px rgba(159, 216, 224, 0.14);
            user-select: none;
        }
        .tenno-script__col--l { left: 12px; }
        .tenno-script__col--r { right: 12px; transform: rotate(180deg); }
        @media (max-width: 900px) { body.theme-tenno .tenno-script { display: none; } }

        /* ===== Palette remap for the compiled Tailwind accent classes ===== */
        body.theme-tenno .text-accent { color: #d9b64e !important; }
        body.theme-tenno .bg-accent,
        body.theme-tenno .group:hover .group-hover\:bg-accent { background-color: #c9a227 !important; color: #0a0f18 !important; }
        body.theme-tenno .hover\:bg-accentHover:hover,
        body.theme-tenno .group:hover .group-hover\:bg-accentHover { background-color: #a9861c !important; }
        body.theme-tenno .border-accent,
        body.theme-tenno .hover\:border-accent:hover,
        body.theme-tenno .focus\:border-accent:focus { border-color: #c9a227 !important; }
        body.theme-tenno .hover\:border-accent\/60:hover { border-color: rgba(201, 162, 39, 0.6) !important; }
        body.theme-tenno .border-accent\/25 { border-color: rgba(201, 162, 39, 0.25) !important; }
        body.theme-tenno .border-accent\/30 { border-color: rgba(201, 162, 39, 0.30) !important; }
        body.theme-tenno .bg-accent\/10,
        body.theme-tenno .group:hover .group-hover\:bg-accent\/10 { background-color: rgba(201, 162, 39, 0.10) !important; }
        body.theme-tenno .bg-accent\/5 { background-color: rgba(201, 162, 39, 0.05) !important; }
        body.theme-tenno .text-accent\/80 { color: rgba(217, 182, 78, 0.8) !important; }
        body.theme-tenno .text-accent\/90 { color: rgba(217, 182, 78, 0.9) !important; }
        body.theme-tenno .hover\:text-accent:hover,
        body.theme-tenno .group:hover .group-hover\:text-accent { color: #d9b64e !important; }
        body.theme-tenno .group:hover .group-hover\:text-accent\/10 { color: rgba(201, 162, 39, 0.10) !important; }
        body.theme-tenno .from-accent {
            --tw-gradient-from: #c9a227 var(--tw-gradient-from-position);
            --tw-gradient-to: rgba(201, 162, 39, 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        }
        body.theme-tenno .hover\:shadow-\[0_18px_40px_-12px_rgba\(255\2c 106\2c 0\2c 0\.4\)\]:hover {
            box-shadow: 0 18px 40px -12px rgba(201, 162, 39, 0.45) !important;
        }
        body.theme-tenno .group:hover .group-hover\:shadow-\[0_0_30px_rgba\(255\2c 106\2c 0\2c 0\.5\)\] {
            box-shadow: 0 0 30px rgba(201, 162, 39, 0.5) !important;
        }
        /* inline card glow uses the old ember rgba -> remap */
        body.theme-tenno #projects .group > .pointer-events-none {
            background: radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.14), transparent 60%) !important;
        }

        /* Other hard-coded ember bits in the base sheet */
        body.theme-tenno .nav-link::after { background: var(--accent); }
        body.theme-tenno #dynamicName {
            background-image: linear-gradient(90deg, #c9a227, #f0e6bc, #9fd8e0, #7a6bb5, #c9a227);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 0 16px rgba(159, 216, 224, 0.30));
        }
        body.theme-tenno .viewer-spinner {
            border-color: rgba(201, 162, 39, 0.25);
            border-top-color: #c9a227;
        }
        body.theme-tenno a.bg-accent:hover {
            box-shadow: 0 0 20px rgba(201, 162, 39, 0.55), 0 0 8px rgba(159, 216, 224, 0.35);
        }
        body.theme-tenno .crt-overlay {
            background: repeating-linear-gradient(
                to bottom,
                rgba(232, 217, 160, 0.03) 0px,
                rgba(232, 217, 160, 0.03) 1px,
                transparent 1px,
                transparent 3px
            );
        }
        /* ================= WARFRAME-STYLE ORNAMENTATION (Tenno theme) ================= */
        /* Giant Tennobet rune glowing behind the hero — the Tenno language, big */
        .hero-rune { display: none; }
        body.theme-tenno .hero-rune {
            display: block;
            position: absolute;
            left: 50%;
            top: 42%;
            transform: translate(-50%, -50%);
            font-family: 'tenObet', 'Inter', sans-serif;
            font-size: clamp(5rem, 20vw, 18rem);
            line-height: 1;
            letter-spacing: 0.08em;
            white-space: nowrap;
            color: rgba(232, 217, 160, 0.07);
            text-shadow: 0 0 40px rgba(159, 216, 224, 0.20), 0 0 90px rgba(201, 162, 39, 0.14);
            pointer-events: none;
            user-select: none;
            z-index: -1;
        }

        /* Void-energy bloom behind the header */
        body.theme-tenno header#top::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(circle at 50% 40%, rgba(159,216,224,0.18), rgba(159,216,224,0.05) 38%, transparent 62%);
        }

        /* Fixed HUD corner brackets (Warframe interface feel) */
        .tenno-hud { display: none; }
        body.theme-tenno .tenno-hud { display: block; }
        .tenno-hud__c {
            position: absolute;
            width: 54px;
            height: 54px;
            border: 2px solid rgba(201, 162, 39, 0.55);
            filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.35));
        }
        .tenno-hud__c--tl { top: 76px; left: 14px; border-right: 0; border-bottom: 0; }
        .tenno-hud__c--tr { top: 76px; right: 14px; border-left: 0; border-bottom: 0; }
        .tenno-hud__c--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
        .tenno-hud__c--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
        @media (max-width: 900px) { body.theme-tenno .tenno-hud { display: none; } }

        /* Orokin filigree corners on project cards, always lit (not just hover) */
        body.theme-tenno #projects .group::after { opacity: 0.6; transform: translate(0, 0); }
        body.theme-tenno #projects .group:hover::after { opacity: 1; }
        body.theme-tenno #projects .group:hover {
            filter: drop-shadow(0 0 18px rgba(159,216,224,0.35)) drop-shadow(0 0 8px rgba(201,162,39,0.40));
        }

        /* Orokin corner notches on skill boxes (non-interactive) */
        body.theme-tenno .skill-box { position: relative; }
        body.theme-tenno .skill-box::before,
        body.theme-tenno .skill-box::after {
            content: '';
            position: absolute;
            width: 11px;
            height: 11px;
            border: 2px solid rgba(201, 162, 39, 0.8);
            pointer-events: none;
        }
        body.theme-tenno .skill-box::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
        body.theme-tenno .skill-box::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

        /* Bolder section titles and dividers */
        body.theme-tenno section h2::before { font-size: 1.05em; text-shadow: 0 0 14px rgba(201, 162, 39, 1); }
        body.theme-tenno section h2::after {
            width: 110px;
            background: linear-gradient(90deg, var(--gold-2), rgba(159, 216, 224, 0.85), transparent);
        }
        body.theme-tenno .oro-emblem {
            width: 46px;
            height: 46px;
            filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.75)) drop-shadow(0 0 22px rgba(159, 216, 224, 0.35));
        }
        body.theme-tenno .nav-lotus {
            filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.7)) drop-shadow(0 0 18px rgba(159, 216, 224, 0.35));
        }

        /* Warframe HUD trim on buttons: gold inner hairline */
        body.theme-tenno a.bg-accent,
        body.theme-tenno header a.border,
        body.theme-tenno .modal a.bg-accent {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 14px rgba(201, 162, 39, 0.25);
        }

        /* ================= VOID NEBULA (ref: deep-space energy clouds) ================= */
        /* Layered cosmic atmosphere drawn ABOVE the orokin artwork so the opaque
           base of that SVG doesn't hide it. Sits at z-index 0, below page content. */
        .nebula-bg {
            position: fixed;
            inset: -12%;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(58% 44% at 17% 20%, rgba(45, 212, 191, 0.20), transparent 62%),
                radial-gradient(52% 42% at 83% 16%, rgba(37, 99, 235, 0.24), transparent 64%),
                radial-gradient(64% 56% at 72% 84%, rgba(34, 211, 238, 0.15), transparent 66%),
                radial-gradient(46% 42% at 24% 86%, rgba(13, 148, 136, 0.18), transparent 62%),
                radial-gradient(90% 80% at 50% 45%, transparent 30%, rgba(3, 7, 14, 0.55) 100%);
            filter: blur(2px) saturate(130%);
            animation: nebulaDrift 64s ease-in-out infinite alternate;
            will-change: transform;
        }
        @keyframes nebulaDrift {
            0%   { transform: translate3d(-1.6%, -1.2%, 0) scale(1.06); }
            100% { transform: translate3d(1.8%, 1.6%, 0) scale(1.14); }
        }

        /* Horizontal void-energy beam behind the hero (ref: image 2) */
        .energy-beam {
            position: absolute;
            left: 50%;
            top: 33%;
            width: 150%;
            height: 2px;
            transform: translate(-50%, -50%);
            z-index: -1;
            pointer-events: none;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(56, 189, 248, 0.0) 12%,
                rgba(125, 211, 252, 0.55) 38%,
                rgba(224, 242, 254, 0.95) 50%,
                rgba(125, 211, 252, 0.55) 62%,
                rgba(56, 189, 248, 0.0) 88%,
                transparent 100%);
            box-shadow:
                0 0 16px 3px rgba(56, 189, 248, 0.55),
                0 0 54px 12px rgba(37, 99, 235, 0.30),
                0 0 120px 30px rgba(14, 116, 144, 0.20);
            animation: beamPulse 5.5s ease-in-out infinite;
        }
        .energy-beam::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 280px;
            height: 280px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(224,242,254,0.42), rgba(56,189,248,0.18) 32%, transparent 68%);
            mix-blend-mode: screen;
        }
        @keyframes beamPulse {
            0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scaleX(0.92); }
            50%      { opacity: 1;    transform: translate(-50%, -50%) scaleX(1.04); }
        }

        /* Wispy nebula tendrils drifting through the hero */
        .energy-wisp {
            position: absolute;
            z-index: -1;
            pointer-events: none;
            border-radius: 50%;
            filter: blur(34px);
            mix-blend-mode: screen;
            opacity: 0.5;
        }
        .energy-wisp--1 {
            width: 46vw; height: 16vw;
            left: -8%; top: 8%;
            background: radial-gradient(ellipse at center, rgba(45,212,191,0.35), transparent 70%);
            transform: rotate(-18deg);
            animation: wispDrift1 26s ease-in-out infinite alternate;
        }
        .energy-wisp--2 {
            width: 40vw; height: 14vw;
            right: -6%; top: 52%;
            background: radial-gradient(ellipse at center, rgba(59,130,246,0.34), transparent 70%);
            transform: rotate(14deg);
            animation: wispDrift2 32s ease-in-out infinite alternate;
        }
        @keyframes wispDrift1 {
            from { transform: rotate(-18deg) translate3d(0, 0, 0) scale(1);      opacity: 0.35; }
            to   { transform: rotate(-12deg) translate3d(6%, 8%, 0) scale(1.15); opacity: 0.60; }
        }
        @keyframes wispDrift2 {
            from { transform: rotate(14deg) translate3d(0, 0, 0) scale(1.1);      opacity: 0.30; }
            to   { transform: rotate(8deg)  translate3d(-7%, -6%, 0) scale(1);     opacity: 0.55; }
        }

        @media (prefers-reduced-motion: reduce) {
            .nebula-bg, .energy-beam, .energy-beam::after,
            .energy-wisp--1, .energy-wisp--2 { animation: none; }
        }

        /* ===== Project facts on cards ===== */
        .proj-facts {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.35rem 0.5rem;
            margin-bottom: 0.75rem;
            font-family: 'SFMono-Regular', Consolas, monospace;
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .fact-period { color: #ff8a33; }
        .fact-sep { color: #4b5563; }
        .fact-role { color: #9ca3af; }
        .fact-status {
            margin-inline-start: auto;
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.3);
            border-radius: 0.25rem;
            padding: 0.05rem 0.4rem;
            white-space: nowrap;
        }
        .fact-ai {
            color: #a78bfa;
            border: 1px solid rgba(167, 139, 250, 0.3);
            border-radius: 0.25rem;
            padding: 0.05rem 0.4rem;
            white-space: nowrap;
        }

        /* ===== Project details in modals ===== */
        .proj-details {
            margin: 0 0 1.5rem;
            border: 1px solid #374151;
            border-radius: 0.5rem;
            overflow: hidden;
            background: rgba(17, 21, 28, 0.6);
        }
        .pd-row {
            display: flex;
            gap: 0.75rem;
            padding: 0.6rem 0.9rem;
            border-bottom: 1px solid #2b3440;
            font-size: 0.8rem;
        }
        .pd-row:last-child { border-bottom: 0; }
        .pd-label {
            flex: 0 0 6.5rem;
            font-family: 'SFMono-Regular', Consolas, monospace;
            font-size: 0.65rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #ff8a33;
            padding-top: 0.1rem;
        }
        .pd-value { color: #cbd5e1; line-height: 1.5; }

        /* ===== Experience tags on skill chips ===== */
        .exp-tag {
            margin-inline-start: 0.35rem;
            color: #ff8a33;
            font-weight: 700;
        }

        /* ===== AI usage disclosure note ===== */
        .ai-note {
            margin-top: 1.1rem;
            padding: 0.75rem 0.9rem;
            border: 1px solid rgba(255, 106, 0, 0.22);
            border-inline-start: 3px solid var(--accent);
            border-radius: 0.5rem;
            background: rgba(255, 106, 0, 0.05);
            font-size: 0.82rem;
            line-height: 1.6;
            color: #94a3b8;
        }

        /* ===== Hero: profile (left) + about (right) ===== */
        .hero {
            position: relative;
            overflow: hidden;
            padding: 7.5rem 1rem 4.5rem;
        }
        .hero__inner {
            max-width: 72rem;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            align-items: center;
        }
        .hero-profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        /* ===== Profile portrait: chamfered Orokin energy frame ===== */
        .hero-portrait {
            position: relative;
            width: 15rem;
            height: 18.2rem;
            overflow: visible;
            isolation: isolate;
            --chamfer: 20px;   /* how much each corner is cut */
            --frame: 7px;      /* thickness of the frame ring */
            --chamfer-in: 18px;
            /* shadows follow the chamfered silhouette, plus a warm rim glow */
            filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.82))
                    drop-shadow(0 0 16px rgba(255, 106, 0, 0.28));
        }
        /* The frame plate — dark metallic with a gold inset rim */
        .hero-portrait::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background: linear-gradient(150deg, #211a0e 0%, #0a0d13 52%, #0e161d 100%);
            box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.9);
            clip-path: polygon(
                var(--chamfer) 0,
                calc(100% - var(--chamfer)) 0,
                100% var(--chamfer),
                100% calc(100% - var(--chamfer)),
                calc(100% - var(--chamfer)) 100%,
                var(--chamfer) 100%,
                0 calc(100% - var(--chamfer)),
                0 var(--chamfer));
        }
        /* Faint accent hairline separating the mat from the photo */
        .hero-portrait::after {
            content: "";
            position: absolute;
            inset: 5px;
            z-index: 2;
            pointer-events: none;
            border: 1px solid rgba(0, 224, 255, 0.32);
            clip-path: polygon(
                calc(var(--chamfer-in) - 3px) 0,
                calc(100% - (var(--chamfer-in) - 3px)) 0,
                100% calc(var(--chamfer-in) - 3px),
                100% calc(100% - (var(--chamfer-in) - 3px)),
                calc(100% - (var(--chamfer-in) - 3px)) 100%,
                calc(var(--chamfer-in) - 3px) 100%,
                0 calc(100% - (var(--chamfer-in) - 3px)),
                0 calc(var(--chamfer-in) - 3px));
        }
        /* Photo window (inset so the frame ring stays visible) */
        .hero-portrait__inner {
            position: absolute;
            inset: var(--frame);
            z-index: 1;
            overflow: hidden;
            background: #05070c;
            clip-path: polygon(
                var(--chamfer-in) 0,
                calc(100% - var(--chamfer-in)) 0,
                100% var(--chamfer-in),
                100% calc(100% - var(--chamfer-in)),
                calc(100% - var(--chamfer-in)) 100%,
                var(--chamfer-in) 100%,
                0 calc(100% - var(--chamfer-in)),
                0 var(--chamfer-in));
        }
        .hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
        /* HUD corner brackets (skip the cut corners so they don't get clipped) */
        .hero-portrait__inner::before,
        .hero-portrait__inner::after {
            content: "";
            position: absolute;
            z-index: 3;
            width: 15px;
            height: 15px;
            border: 2px solid rgba(212, 175, 55, 0.9);
            pointer-events: none;
            filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.65));
        }
        .hero-portrait__inner::before {
            top: 10px; left: 10px;
            border-right: 0; border-bottom: 0;
        }
        .hero-portrait__inner::after {
            bottom: 10px; right: 10px;
            border-left: 0; border-top: 0;
        }
        .hero-name {
            margin-top: 1.35rem;
            font-size: clamp(1.5rem, 4.4vw, 2.2rem);
            font-weight: 800;
            line-height: 1.12;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: #fff;
        }
        .hero-role {
            margin-top: 0.55rem;
            font-size: 0.74rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--accent);
        }
        .hero-tagline {
            margin-top: 0.85rem;
            max-width: 24rem;
            font-size: 0.95rem;
            line-height: 1.65;
            font-weight: 300;
            color: #cbd5e1;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
            margin-top: 1.6rem;
        }

        .hero-about { text-align: center; }
        .hero-eyebrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.7rem;
            font-family: 'SFMono-Regular', Consolas, monospace;
            font-size: 0.72rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--accent);
        }
        .hero-eyebrow::after { content: none; }
        .hero-about__text {
            margin-top: 1.1rem;
            color: #cbd5e1;
            font-size: 0.95rem;
            line-height: 1.8;
        }
        .hero-about__lead { color: #e2e8f0; font-size: 1.02rem; }

        .hero-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            justify-content: center;
            margin-top: 1.6rem;
        }
        .hero-fact {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.35rem 0.85rem;
            border: 1px solid #374151;
            border-radius: 999px;
            font-size: 0.68rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .hero-fact i { color: var(--accent); font-size: 0.66rem; }
        .hero-fact--open { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
        .hero-fact--open i { font-size: 0.42rem; color: #4ade80; }

        /* ===== Hero aesthetic upgrades ===== */
        /* Soft aurora halo behind the profile column */
        .hero-profile { position: relative; }
        .hero-profile::before {
            content: "";
            position: absolute;
            top: -2.5rem;
            left: 50%;
            width: min(26rem, 96%);
            height: 24rem;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at 50% 32%, rgba(255, 106, 0, 0.16), rgba(0, 224, 255, 0.10) 44%, transparent 72%);
            filter: blur(14px);
            z-index: -1;
            pointer-events: none;
        }

        /* About column as a glass HUD panel — improves readability over the void bg */
        .hero-about {
            position: relative;
            padding: 1.9rem 1.6rem;
            border: 1px solid var(--gold-line);
            border-radius: 1rem;
            background: linear-gradient(160deg, rgba(21, 27, 36, 0.82), rgba(11, 15, 21, 0.72));
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
        }
        .hero-about::before {
            content: "";
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 0.7rem;
            pointer-events: none;
        }

        /* Fact pills are static info — no hover (they aren't pressable) */

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        @media (max-width: 640px) {
            .hero-about { padding: 1.5rem 1.2rem; }
        }

        @media (min-width: 1024px) {
            .hero__inner { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 4.5rem; }
            .hero-about { text-align: start; }
            .hero-eyebrow { justify-content: flex-start; }
            .hero-eyebrow::after {
                content: "";
                flex: 1;
                height: 1px;
                background: linear-gradient(90deg, var(--gold-line), transparent);
            }
            .hero-facts { justify-content: flex-start; }
        }

        @media (max-width: 640px) {
            .pd-row { flex-direction: column; gap: 0.15rem; }
            .pd-label { flex-basis: auto; }
        }