/* Role text color for dark/light mode */
        #role_text {
            color: #f1f5f9 !important;
        }
        [data-bs-theme="light"] #role_text {
            color: #334155 !important;
        }
        /* Contact Section Canvas */
        .contact-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        #contact {
            position: relative;
            overflow: hidden;
        }

        :root {
            --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            background-color: #0f172a;
            overflow-x: hidden;
        }

        .bg-dark-custom {
            background-color: #0f172a;
        }

        .bg-dark-secondary {
            background-color: #1e293b;
        }

        /* Projects section. A gradient panel instead of a flat block: it starts
           and ends on the page background, so the sections above and below meet
           it without a seam. Same approach as .cosmos-section. */
        .projects-section {
            position: relative;
            overflow: hidden;
            background: linear-gradient(
                180deg,
                #0f172a 0%,
                #16203a 18%,
                #1b2542 50%,
                #16203a 82%,
                #0f172a 100%
            );
        }

        /* Soft indigo/violet glow for depth, faded out well before the top and
           bottom edges so no colour lands on a hard line. */
        .projects-section::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(42% 48% at 18% 22%, rgba(99, 102, 241, 0.20), transparent 70%),
                radial-gradient(38% 44% at 82% 78%, rgba(139, 92, 246, 0.16), transparent 72%);
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
        }

        .projects-section > .container {
            position: relative;
            z-index: 1;
        }

        .text-primary-custom {
            color: #6366f1 !important;
        }

        .btn-primary-custom {
            background-color: #6366f1;
            border-color: #6366f1;
        }

        .btn-primary-custom:hover {
            background-color: #4f46e5;
            border-color: #4f46e5;
            transform: translateY(-2px);
        }

        .navbar {
            backdrop-filter: blur(10px);
            background-color: rgba(15, 23, 42, 0.9) !important;
        }

        .hero-section {
            min-height: 100vh;
            padding-top: 100px;
            position: relative;
            overflow: hidden;
            width: 100vw;
        }
        /* Responsive Fixes for Mobile */
        @media (max-width: 480px) {
            .container {
                max-width: 100vw !important;
                width: 100% !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
                overflow-x: hidden;
            }
            .hero-section {
                padding-top: 60px;
                min-height: 80vh;
            }
            .row, .col-lg-8, .col-lg-4, .col-md-6 {
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .project-card, .timeline, .timeline-item {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            img, .skill-badge img {
                max-width: 100%;
                height: auto;
            }
        }

        .hero-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .hero-section .container {
            position: relative;
            z-index: 1;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center bottom, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
            z-index: 0;
            pointer-events: none;
        }

        [data-bs-theme="light"] .hero-section::before {
            background: radial-gradient(ellipse at center bottom, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
        }

        .skill-badge {
            transition: all 0.3s ease;
        }

        .skill-badge:hover {
            transform: translateY(-3px);
            border-color: #6366f1 !important;
        }

        .skill-badge img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #334155;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 2rem;
        }

        .timeline-dot {
            position: absolute;
            left: -2.35rem;
            top: 5px;
            width: 14px;
            height: 14px;
            background: #0f172a;
            border: 2px solid #6366f1;
            border-radius: 50%;
        }

        .timeline-dot.active {
            background: #6366f1;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);
        }

        /* Frosted-glass project cards. The translucent fill lets the section
           gradient and its indigo glows read through the card, so the panels
           sit in the background rather than on top of it. */
        .project-card {
            position: relative;
            border-radius: 16px;
            background: linear-gradient(
                145deg,
                rgba(148, 163, 184, 0.16),
                rgba(148, 163, 184, 0.05)
            );
            border: 1px solid rgba(203, 213, 225, 0.16);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            /* Inset highlight = the lit top edge of a real glass pane. */
            box-shadow:
                0 8px 32px rgba(2, 6, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.09);
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }

        /* Diagonal specular sweep across the top-left corner. It is positioned,
           so the card body needs lifting above it (below) to stay legible. */
        .project-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.02) 32%,
                transparent 60%
            );
        }

        .project-card .card-body {
            position: relative;
            z-index: 1;
        }

        .project-card:hover {
            transform: translateY(-8px) scale(1.02);
            background: linear-gradient(
                145deg,
                rgba(129, 140, 248, 0.20),
                rgba(148, 163, 184, 0.07)
            );
            border-color: rgba(129, 140, 248, 0.55);
            box-shadow:
                0 20px 44px rgba(2, 6, 23, 0.45),
                0 0 32px rgba(99, 102, 241, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }

        /* Without backdrop-filter the fill is just a flat wash over the section,
           which reads as washed-out — carry more of the colour ourselves. */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .project-card {
                background: linear-gradient(145deg, rgba(51, 65, 85, 0.85), rgba(30, 41, 59, 0.8));
            }
        }

        /* Tech pills, matched to the glass rather than Bootstrap's solid grey. */
        .project-card .badge.bg-secondary {
            background-color: rgba(148, 163, 184, 0.16) !important;
            border: 1px solid rgba(203, 213, 225, 0.14);
            color: #cbd5e1 !important;
            font-weight: 500;
        }

        .animate-fade-in {
            animation: fadeInUp 0.6s ease forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }

        /* Creative Animations */
        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .glow {
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 5px #6366f1, 0 0 10px #6366f1; }
            to { text-shadow: 0 0 20px #6366f1, 0 0 30px #6366f1, 0 0 40px #6366f1; }
        }

        .pulse-dot {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        .typing-effect {
            overflow: hidden;
            border-right: 3px solid #6366f1;
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #6366f1; }
        }

        .gradient-text {
            background: linear-gradient(135deg, #6366f1, #22d3ee, #6366f1);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient-shift 3s ease infinite;
        }

        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .skill-badge:hover {
            transform: translateY(-3px) scale(1.05);
            border-color: #6366f1 !important;
            box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
        }

        .btn-primary-custom {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-primary-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
            z-index: -1;
        }

        .btn-primary-custom:hover::before {
            left: 100%;
        }

        .timeline-dot.active {
            animation: pulse-glow 2s infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); }
            50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.1), 0 0 20px rgba(99, 102, 241, 0.5); }
        }

        .stagger-animation > * {
            opacity: 0;
            transform: translateY(20px);
        }

        [data-aos] {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Theme Toggle Button */
        .theme-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #6366f1;
            background: transparent;
            color: #6366f1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            background: #6366f1;
            color: white;
            transform: rotate(180deg);
        }

        .theme-toggle i {
            font-size: 1.2rem;
        }

        /* Light Mode Styles */
        [data-bs-theme="light"] body,
        [data-bs-theme="light"] .bg-dark-custom {
            background-color: #f8fafc !important;
        }

        [data-bs-theme="light"] .bg-dark-secondary {
            background-color: #e2e8f0 !important;
        }

        [data-bs-theme="light"] .projects-section {
            background: linear-gradient(
                180deg,
                #f8fafc 0%,
                #edf1fa 18%,
                #e6ecf8 50%,
                #edf1fa 82%,
                #f8fafc 100%
            );
        }

        [data-bs-theme="light"] .projects-section::before {
            background:
                radial-gradient(42% 48% at 18% 22%, rgba(99, 102, 241, 0.10), transparent 70%),
                radial-gradient(38% 44% at 82% 78%, rgba(139, 92, 246, 0.08), transparent 72%);
        }

        [data-bs-theme="light"] .navbar {
            background-color: rgba(248, 250, 252, 0.95) !important;
            border-color: #e2e8f0 !important;
        }

        [data-bs-theme="light"] .text-secondary {
            color: #64748b !important;
        }

        [data-bs-theme="light"] .card.bg-dark {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        /* Glass over a light backdrop: tint towards white and lighten the
           shadow, or the panels read as grey smudges instead of glass. */
        [data-bs-theme="light"] .project-card {
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.78),
                rgba(255, 255, 255, 0.42)
            );
            border-color: rgba(255, 255, 255, 0.75);
            box-shadow:
                0 8px 28px rgba(15, 23, 42, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }

        [data-bs-theme="light"] .project-card::after {
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.55) 0%,
                rgba(255, 255, 255, 0.14) 32%,
                transparent 60%
            );
        }

        [data-bs-theme="light"] .project-card:hover {
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.9),
                rgba(224, 231, 255, 0.55)
            );
            border-color: rgba(99, 102, 241, 0.45);
            box-shadow:
                0 20px 40px rgba(15, 23, 42, 0.14),
                0 0 30px rgba(99, 102, 241, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        [data-bs-theme="light"] .project-card .badge.bg-secondary {
            background-color: rgba(99, 102, 241, 0.10) !important;
            border-color: rgba(99, 102, 241, 0.18);
            color: #4f46e5 !important;
        }

        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            [data-bs-theme="light"] .project-card {
                background: rgba(255, 255, 255, 0.95);
            }
        }

        [data-bs-theme="light"] .skill-badge.bg-dark {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            color: #1e293b;
        }

        [data-bs-theme="light"] .timeline::before {
            background: #cbd5e1;
        }

        [data-bs-theme="light"] .timeline-dot {
            background: #f8fafc;
        }

        [data-bs-theme="light"] .badge.bg-secondary {
            background-color: #e2e8f0 !important;
            color: #475569 !important;
        }

        [data-bs-theme="light"] .btn-outline-light {
            border-color: #334155;
            color: #334155;
        }

        [data-bs-theme="light"] .btn-outline-light:hover {
            background-color: #334155;
            color: white;
        }

        [data-bs-theme="light"] .border-secondary {
            border-color: #e2e8f0 !important;
        }

        [data-bs-theme="light"] footer {
            border-color: #e2e8f0 !important;
        }

        [data-bs-theme="light"] .gradient-text {
            background: linear-gradient(135deg, #4f46e5, #0891b2, #4f46e5);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Disclaimer Box */
        .disclaimer-box {
            position: fixed;
            top: 80px;
            left: 20px;
            max-width: 300px;
            background: rgba(30, 41, 59, 0.95);
            border: 1px solid #6366f1;
            border-radius: 12px;
            padding: 16px;
            z-index: 1050;
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .disclaimer-box.show {
            opacity: 1;
            transform: translateX(0);
        }

        .disclaimer-box .disclaimer-content {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .disclaimer-box .disclaimer-icon {
            color: #6366f1;
            font-size: 1.2rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .disclaimer-box .disclaimer-text {
            font-size: 0.85rem;
            color: #cbd5e1;
            line-height: 1.5;
        }

        .disclaimer-box .disclaimer-close {
            position: absolute;
            top: 8px;
            right: 8px;
            background: transparent;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .disclaimer-box .disclaimer-close:hover {
            color: #f1f5f9;
        }

        [data-bs-theme="light"] .disclaimer-box {
            background: rgba(255, 255, 255, 0.95);
            border-color: #6366f1;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        [data-bs-theme="light"] .disclaimer-box .disclaimer-text {
            color: #475569;
        }

        [data-bs-theme="light"] .disclaimer-box .disclaimer-close {
            color: #64748b;
        }

        [data-bs-theme="light"] .disclaimer-box .disclaimer-close:hover {
            color: #1e293b;
        }

        /* ---- Standalone prose pages: /about, /privacy, /terms ---- */

        /* The navbar is fixed, so the first block needs its own top offset. */
        .content-page {
            position: relative;
            padding: 140px 0 4rem;
            overflow: hidden;
        }

        /* Same indigo wash the hero and projects sections open with. */
        .content-page::before {
            content: '';
            position: absolute;
            top: -20%;
            left: 50%;
            width: 900px;
            height: 900px;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, transparent 62%);
            pointer-events: none;
        }

        .content-page > .container {
            position: relative;
            z-index: 1;
            max-width: 900px;
        }

        .content-hero {
            margin-bottom: 3rem;
        }

        .content-card {
            position: relative;
            /* Clears the fixed navbar when a clause anchor is jumped to. */
            scroll-margin-top: 90px;
            border-radius: 16px;
            padding: 1.75rem;
            margin-bottom: 1.25rem;
            background: linear-gradient(145deg, rgba(51, 65, 85, 0.85), rgba(30, 41, 59, 0.8));
            border: 1px solid rgba(203, 213, 225, 0.16);
            box-shadow:
                0 8px 32px rgba(2, 6, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.09);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .content-card:hover {
            border-color: rgba(129, 140, 248, 0.4);
            box-shadow:
                0 12px 36px rgba(2, 6, 23, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .content-card p,
        .content-card li {
            color: #94a3b8;
            line-height: 1.7;
        }

        .content-card ul {
            padding-left: 1.15rem;
            margin-bottom: 0;
        }

        .content-card li + li {
            margin-top: 0.5rem;
        }

        .content-card strong {
            color: #e2e8f0;
            font-weight: 600;
        }

        .content-card a {
            color: #818cf8;
            text-decoration: none;
        }

        .content-card a:hover {
            text-decoration: underline;
        }

        .content-card code {
            background: rgba(148, 163, 184, 0.16);
            border-radius: 4px;
            padding: 0.1rem 0.35rem;
            font-size: 0.85em;
            color: #cbd5e1;
        }

        [data-bs-theme="light"] .content-page::before {
            background: radial-gradient(circle, rgba(99, 102, 241, 0.10) 0%, transparent 62%);
        }

        [data-bs-theme="light"] .content-card {
            background: #fff;
            border-color: #e2e8f0;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
        }

        [data-bs-theme="light"] .content-card:hover {
            border-color: rgba(99, 102, 241, 0.35);
        }

        [data-bs-theme="light"] .content-card p,
        [data-bs-theme="light"] .content-card li {
            color: #475569;
        }

        [data-bs-theme="light"] .content-card strong {
            color: #1e293b;
        }

        [data-bs-theme="light"] .content-card a {
            color: #4f46e5;
        }

        [data-bs-theme="light"] .content-card code {
            background: #f1f5f9;
            color: #334155;
        }

        @media (max-width: 767.98px) {
            .content-page {
                padding-top: 110px;
            }

            .content-card {
                padding: 1.25rem;
            }
        }


        /* ---- Single-card legal document (/privacy, /terms) ---- */

        .content-doc h2 {
            /* Clears the fixed navbar when a clause anchor is jumped to. */
            scroll-margin-top: 90px;
            margin: 2.25rem 0 0.75rem;
            font-size: 1.05rem;
            font-weight: 600;
            color: #e2e8f0;
        }

        .content-doc h2:first-child {
            margin-top: 0;
        }

        .content-doc p,
        .content-doc li {
            font-size: 0.94rem;
        }

        .content-doc > p,
        .content-doc > ul {
            margin-bottom: 0.9rem;
        }

        /* Boxed lead-in blocks: the plain-language summary and the clause index. */
        .doc-summary,
        .doc-toc {
            background: rgba(99, 102, 241, 0.08);
            border: 1px solid rgba(99, 102, 241, 0.22);
            border-radius: 10px;
            padding: 1rem 1.25rem;
            margin-bottom: 1.25rem;
        }

        .doc-summary p:first-child,
        .doc-toc p:first-child {
            color: #e2e8f0;
        }

        .doc-toc ol {
            margin: 0;
            padding-left: 1.15rem;
            columns: 2;
            column-gap: 2rem;
        }

        .doc-toc li {
            break-inside: avoid;
            margin: 0 0 0.3rem;
            font-size: 0.85rem;
        }

        [data-bs-theme="light"] .content-doc h2 {
            color: #1e293b;
        }

        [data-bs-theme="light"] .doc-summary,
        [data-bs-theme="light"] .doc-toc {
            background: rgba(99, 102, 241, 0.05);
        }

        [data-bs-theme="light"] .doc-summary p:first-child,
        [data-bs-theme="light"] .doc-toc p:first-child {
            color: #1e293b;
        }

        @media (max-width: 575.98px) {
            .doc-toc ol {
                columns: 1;
            }
        }