/* === Consolidated shared theme (moved from per-page files) === */
:root {
    --bg1: rgba(29, 78, 216, 0.15);
    --bg2: rgba(168, 85, 247, 0.15);
    --page-text: #e2e8f0;
    --accent1: #3b82f6;
    --accent2: #a855f7;
    --loader-bg: rgba(2,6,23,0.6);
    --glass-bg: rgba(255,255,255,0.03);
	--focus-ring: 3px;
	--focus-color: rgba(59,130,246,0.35);
}

body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            color: white;
            overflow: hidden; /* Prevent scrollbars from canvas */

    /* shared visual theme */
    background:
        radial-gradient(circle at top left, var(--bg1) 0%, transparent 40%),
        radial-gradient(circle at bottom right, var(--bg2) 0%, transparent 40%),
        #0a0a0a; /* Dark background */
    color: var(--page-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
        }
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Place canvas behind content */
        }
        canvas {
            display: block; /* Remove default canvas margin */
        }
        .content-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: rgba(0,0,0, 0.25); /* Slightly reduced overlay opacity */
            padding: 20px;
            box-sizing: border-box;
        }
        .name {
            font-size: 3rem; /* 48px */
            font-weight: bold;
            margin-bottom: 0.5rem; /* 8px */
        }
        .title {
            font-size: 1.5rem; /* 24px */
            font-weight: 300;
            margin-bottom: 2rem; /* 32px */
        }
        .explore-button {
            padding: 0.75rem 2rem; /* 12px 32px */
            border: 2px solid white;
            border-radius: 9999px; /* full */
            color: rgb(249, 248, 252);
            background-color: transparent;
            font-size: 1rem; /* 16px */
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .explore-button:hover {
            background-color: rgb(109, 119, 238);
            color: black;
            font-weight: bold;
        }

        /* Logo used across pages (centralized from inline style) */
        .logo-img {
            width: 96px;
            height: 96px;
            object-fit: contain;
            display: block;
            margin-bottom: 1.5rem; /* matches previous spacing */
        }

        /* Slightly smaller logo on small screens */
        @media (max-width: 480px) {
            .logo-img {
                width: 72px;
                height: 72px;
                margin-bottom: 1rem;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .name {
                font-size: 2.5rem; /* 40px */
            }
            .title {
                font-size: 1.25rem; /* 20px */
            }
            .explore-button {
                padding: 0.6rem 1.5rem;
                font-size: 0.9rem;
            }
        }
        @media (max-width: 480px) {
            .name {
                font-size: 2rem; /* 32px */
            }
            .title {
                font-size: 1rem; /* 16px */
            }
            .explore-button {
                padding: 0.5rem 1.25rem;
                font-size: 0.8rem;
            }
        }

        /* Subtle glow effect for interactive elements (shared utility) */
        .glow-on-hover:hover {
    box-shadow: 0 0 10px rgba(29, 78, 216, 0.5), 0 0 20px rgba(168, 85, 247, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}

/* Shared custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #a855f7);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #9333ea);
}

/* Loader styles (shared, moved from script.js) */
#page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--loader-bg);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s cubic-bezier(.4,0,.2,1);
}
#page-loader.show { opacity: 1; pointer-events: auto; }

#page-loader .glass {
    width: min(780px,92%);
    display: flex;
    gap: 20px;
    padding: 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 12px 40px rgba(2,6,23,0.6);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
#page-loader .glass::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent1));
    background-size: 200% 100%;
    filter: blur(30px);
    opacity: .18;
    animation: gradShift 3.8s linear infinite;
    pointer-events: none;
}
#page-loader .left { display:flex;align-items:center;justify-content:center;min-width:110px;z-index:1; }
.spinner { width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 8px 24px rgba(0,0,0,0.45); }
.spinner .ring { position:absolute; inset:0; border-radius:50%; background: conic-gradient(from 0deg,var(--accent1),var(--accent2)); animation: spin 1.1s linear infinite; filter: blur(6px); opacity:.95; }
.spinner .core { width:36px;height:36px;border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.04); }
#page-loader .right { flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; z-index:1; }
.page-title { font-size:1.15rem; color:#e6eef8; font-weight:700; letter-spacing:0.2px; }
.page-sub { font-size:0.95rem; color:rgba(230,238,248,0.85); }
.dots { display:flex; gap:8px; align-items:center; }
.dots span { width:8px; height:8px; border-radius:999px; background: linear-gradient(180deg,var(--accent1),var(--accent2)); opacity:.95; transform:translateY(0); animation: dotBounce 1s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay:.12s; }
.dots span:nth-child(3) { animation-delay:.24s; }
.progress { height:6px; background:rgba(255,255,255,0.04); border-radius:999px; overflow:hidden; margin-top:10px; }
.progress .bar { height:100%; width:28%; background: linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:999px; animation: progressAnim 1.8s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gradShift { to { background-position: 200% 0; } }
@keyframes dotBounce { 0%,80%,100%{ transform:translateY(0); opacity:.95 } 40%{ transform:translateY(-8px); opacity:1 } }
@keyframes progressAnim { 0%{ transform:translateX(-10%) } 50%{ transform:translateX(40%) } 100%{ transform:translateX(110%) } }

@media (max-width:520px) {
    #page-loader .glass { flex-direction: row; gap: 12px; padding: 16px; }
    .spinner { width:64px; height:64px; }
    .spinner .core { width:28px; height:28px; }
    .page-title { font-size:1rem; }
}

/* Accessibility & UX enhancements */

/* visible focus for keyboard users */
:focus {
	outline: none;
}
:focus-visible {
	outline: var(--focus-ring) solid transparent;
	box-shadow: 0 0 0 var(--focus-ring) var(--focus-color);
	border-radius: 6px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Generic card utility */
.card {
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 12px;
	transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.card:focus-within,
.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 40px rgba(2,6,23,0.6);
}

/* CV download button variant (uses same visual language as CTAs) */
.cv-download-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.9rem;
     border-radius: 9999px;
     background: linear-gradient(90deg, var(--accent1), var(--accent2));
     color: white;
     text-decoration: none;
     box-shadow: 0 8px 24px rgba(59,130,246,0.08);
     border: 0;
     font-weight: 600;
 }
 .cv-download-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 40px rgba(59,130,246,0.12);
     opacity: 0.98;
 }

/* small responsive adjustment */
@media (max-width: 480px) {
    .cv-download-btn { padding: 0.45rem 0.7rem; font-size: 0.9rem; }
}