:root {
    /* Light Theme (Permanent) */
    --bg-color: #ffffff;
    --text-color: #333333;
    --text-light: #555555;
    --accent-color: #007bff;
    /* Blue */
    --accent-secondary: #0d1117;
    --card-bg: #ffffff;
    --border-color: #eeeeee;
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px rgba(0, 123, 255, 0.2);
    --timeline-line: #e0e0e0;
}



/* Inputs */


html.lenis,
html.lenis body {
    height: auto;
    scroll-behavior: auto !important;
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--accent-color);
    z-index: 10001;
    pointer-events: none;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

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

/* Global Font Enforced (Excluding Icons) */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: 'Poppins', sans-serif !important;
}

/* Vanta Background */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    /* Let clicks pass through if needed, though Vanta has mouse controls */
}

body {
    font-family: var(--font-body);
    font-size: 1.2rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 123, 255, 0.12), transparent 28rem),
        radial-gradient(circle at 86% 22%, rgba(34, 197, 94, 0.08), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 48%, #ffffff 100%);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-assistant {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(18px, 4vw, 30px);
    z-index: 1200;
    color: #f8fafc;
}

.assistant-launcher {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 999px;
    padding: 12px 18px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(15, 23, 42, 0.96)),
        rgba(15, 23, 42, 0.88);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.assistant-launcher:hover,
.assistant-launcher:focus {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.6);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.44), 0 0 24px rgba(20, 184, 166, 0.22);
}

.assistant-panel {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(430px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 112px));
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.94)),
        rgba(15, 23, 42, 0.9);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.profile-assistant.is-open .assistant-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.assistant-header,
.assistant-status,
.assistant-form {
    display: flex;
    align-items: center;
}

.assistant-header {
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 2px;
}

.assistant-kicker {
    display: block;
    color: #5eead4;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.assistant-header h2 {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: 1.32rem;
    letter-spacing: 0;
}

.assistant-icon-btn,
.assistant-send {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    cursor: pointer;
}

.assistant-status {
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(45, 212, 191, 0.16);
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.09);
}

.assistant-status p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.86rem;
    line-height: 1.35;
}

.assistant-pulse {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.14);
}

.assistant-suggestions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.assistant-suggestions button {
    min-height: 36px;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    padding: 0 13px;
    background: rgba(15, 23, 42, 0.74);
    color: #e2e8f0;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}

.assistant-messages {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.54), rgba(15, 23, 42, 0.2)),
        rgba(2, 6, 23, 0.28);
    scrollbar-width: thin;
    scrollbar-color: #2dd4bf rgba(15, 23, 42, 0.8);
}

.assistant-messages::-webkit-scrollbar,
.assistant-suggestions::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

.assistant-messages::-webkit-scrollbar-track,
.assistant-suggestions::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 999px;
}

.assistant-messages::-webkit-scrollbar-thumb,
.assistant-suggestions::-webkit-scrollbar-thumb {
    background: #2dd4bf;
    border-radius: 999px;
}

.assistant-message {
    max-width: 94%;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.95);
    color: #0f172a;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.assistant-message.user {
    align-self: flex-end;
    border-color: rgba(45, 212, 191, 0.2);
    background: linear-gradient(135deg, #0f766e, #0f9185);
    color: #ffffff;
}

.assistant-message span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 900;
    opacity: 0.74;
    letter-spacing: 0;
}

.assistant-message p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.assistant-form {
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.assistant-form textarea {
    width: 100%;
    max-height: 110px;
    resize: none;
    border: 0;
    outline: 0;
    color: #111827;
    background: transparent;
    font: inherit;
    line-height: 1.35;
}

.assistant-send {
    flex: 0 0 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #111827, #0f766e);
    color: #ffffff;
}

.profile-assistant.is-thinking .assistant-pulse {
    animation: assistantPulse 0.9s ease-in-out infinite;
}

.featured-projects-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 14%, rgba(15, 118, 110, 0.16), transparent 28rem),
        radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.12), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #f6fdf9 100%);
}

.featured-nav {
    position: sticky;
    top: 0;
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    border-radius: 8px;
}

.featured-logo {
    color: #111827;
    font-size: 1.45rem;
    font-weight: 900;
    text-decoration: none;
}

.featured-logo span {
    color: #0f766e;
}

.featured-nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.featured-nav-links a,
.featured-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.78);
    color: #111827;
    text-decoration: none;
    font-weight: 800;
}

.featured-back-link,
.featured-action.primary {
    background: #111827;
    color: #ffffff;
}

.featured-projects-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 84px 0 72px;
}

.featured-projects-hero {
    max-width: 840px;
    padding-bottom: 28px;
}

.featured-projects-hero h1 {
    margin: 10px 0 14px;
    color: #0f172a;
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    line-height: 1;
    letter-spacing: 0;
}

.featured-projects-hero p {
    max-width: 760px;
    color: #475569;
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.7;
}

.featured-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.featured-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.featured-project-card {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.featured-project-card.spotlight {
    grid-column: span 2;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(255, 255, 255, 0.92)),
        #ffffff;
}

.featured-project-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #0f766e, #2563eb, #111827);
}

.featured-project-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.featured-project-card span {
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.featured-project-card h2 {
    margin: 0;
    color: #111827;
    font-size: 1.45rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.featured-project-card p {
    margin: 0;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.6;
}

.featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.featured-tags b {
    padding: 7px 9px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
}

.featured-cta-card .featured-action {
    width: fit-content;
    margin-top: auto;
}

.card-featured .icon-circle {
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

@keyframes assistantPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.55;
    }
}

@media (max-width: 640px) {
    .profile-assistant {
        right: 12px;
        bottom: 12px;
    }

    .assistant-panel {
        width: calc(100vw - 20px);
        height: min(620px, calc(100vh - 82px));
        bottom: 58px;
        padding: 12px;
        gap: 10px;
    }

    .assistant-suggestions {
        display: flex;
    }

    .featured-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .featured-nav-links {
        width: 100%;
    }

    .featured-nav-links a {
        flex: 1 1 auto;
    }

    .featured-projects-shell {
        padding-top: 52px;
    }

    .featured-project-grid {
        grid-template-columns: 1fr;
    }

    .featured-project-card.spotlight {
        grid-column: auto;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .featured-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-project-card.spotlight {
        grid-column: span 2;
    }
}

html.modal-open,
body.modal-open {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

#preloader {
    align-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 240, 173, 0.09), transparent 18rem),
        radial-gradient(circle at 22% 18%, rgba(37, 240, 173, 0.18), transparent 26rem),
        radial-gradient(circle at 78% 20%, rgba(24, 201, 255, 0.14), transparent 24rem),
        linear-gradient(135deg, #010507 0%, #061018 48%, #02080c 100%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    transition: opacity 0.65s ease, visibility 0.65s ease;
    z-index: 20000;
}

#preloader::before {
    animation: loaderScan 5s linear infinite;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px),
        linear-gradient(90deg, transparent, rgba(37, 240, 173, 0.08), transparent);
    content: '';
    inset: 0;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
}

#preloader::after {
    animation: loaderSweep 1.8s ease-in-out infinite;
    background: linear-gradient(180deg, transparent, rgba(37, 240, 173, 0.12), transparent);
    content: '';
    height: 18vh;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -20vh;
}

#preloader.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.015);
    visibility: hidden;
}

.loader-content {
    background:
        linear-gradient(90deg, rgba(37, 240, 173, 0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(37, 240, 173, 0.06) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 45%),
        rgba(5, 13, 18, 0.9);
    background-size: 36px 36px, 36px 36px, auto, auto;
    border: 1px solid rgba(37, 240, 173, 0.34);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(24, 201, 255, 0.08),
        0 28px 90px rgba(0, 0, 0, 0.55),
        inset 0 0 40px rgba(37, 240, 173, 0.055);
    display: grid;
    gap: 1rem;
    max-width: 620px;
    overflow: hidden;
    padding: 1.35rem;
    position: relative;
    transform-origin: center;
    width: min(100%, 620px);
}

.loader-content::before {
    animation: loaderBorderPulse 2.8s ease-in-out infinite;
    border: 1px solid rgba(37, 240, 173, 0.26);
    border-radius: inherit;
    content: '';
    inset: 0.65rem;
    pointer-events: none;
    position: absolute;
}

.loader-content::after {
    animation: loaderDataSweep 2.2s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(37, 240, 173, 0.18), transparent);
    content: '';
    height: 1px;
    left: -35%;
    position: absolute;
    right: auto;
    top: 4.1rem;
    width: 35%;
}

.loader-topbar {
    display: flex;
    gap: 0.55rem;
}

.loader-topbar span {
    border-radius: 50%;
    height: 0.72rem;
    width: 0.72rem;
}

.loader-topbar span:nth-child(1) {
    background: #ff5f57;
}

.loader-topbar span:nth-child(2) {
    background: #ffbd2e;
}

.loader-topbar span:nth-child(3) {
    background: var(--dash-green, #25f0ad);
    box-shadow: 0 0 16px rgba(37, 240, 173, 0.6);
}

.loader-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(12, 1fr);
    opacity: 0.82;
}

.loader-grid i {
    animation: loaderNode 1.25s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 70ms);
    aspect-ratio: 1;
    background: rgba(37, 240, 173, 0.13);
    border: 1px solid rgba(37, 240, 173, 0.12);
    border-radius: 4px;
}

.loader-grid i:nth-child(3n) {
    --i: 2;
}

.loader-grid i:nth-child(4n) {
    --i: 4;
}

.loader-grid i:nth-child(5n) {
    --i: 6;
}

.loader-kicker {
    color: var(--dash-green, #25f0ad);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loader-core {
    align-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    justify-self: center;
    margin: 0.15rem 0 -0.2rem;
    place-items: center;
    position: relative;
    width: clamp(92px, 18vw, 132px);
}

.loader-core::before,
.loader-core::after {
    border-radius: 50%;
    content: '';
    inset: 0;
    position: absolute;
}

.loader-core::before {
    animation: loaderCoreSpin 4.2s linear infinite;
    background:
        conic-gradient(from 0deg, transparent 0 12%, rgba(37, 240, 173, 0.95) 13% 18%, transparent 19% 38%, rgba(24, 201, 255, 0.9) 39% 45%, transparent 46% 100%);
    filter: drop-shadow(0 0 18px rgba(37, 240, 173, 0.35));
}

.loader-core::after {
    background: radial-gradient(circle, rgba(37, 240, 173, 0.18), rgba(5, 13, 18, 0.9) 58%, rgba(5, 13, 18, 0.98) 62%);
    inset: 9px;
}

.loader-core strong {
    color: #e6fff8;
    font-family: "Courier New", monospace !important;
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    letter-spacing: 0.04em;
    position: relative;
    text-shadow: 0 0 20px rgba(37, 240, 173, 0.58);
    z-index: 2;
}

.loader-core-ring {
    animation: loaderCorePulse 1.6s ease-in-out infinite;
    border: 1px solid rgba(37, 240, 173, 0.5);
    border-radius: 50%;
    inset: 18px;
    position: absolute;
    z-index: 1;
}

.loader-orbit {
    animation: loaderOrbit 2.8s linear infinite;
    border: 1px dashed rgba(37, 240, 173, 0.34);
    border-radius: 50%;
    inset: -4px;
    position: absolute;
}

.loader-orbit-two {
    animation-duration: 4.6s;
    animation-direction: reverse;
    border-color: rgba(24, 201, 255, 0.28);
    inset: 10px;
    transform: rotate(28deg);
}

.loader-diagnostics {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loader-diagnostics span {
    animation: loaderChip 1.9s ease-in-out infinite;
    background: rgba(37, 240, 173, 0.065);
    border: 1px solid rgba(37, 240, 173, 0.22);
    border-radius: 999px;
    color: #9fffe0;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    min-width: 0;
    overflow: hidden;
    padding: 0.48rem 0.6rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loader-diagnostics span:nth-child(2) {
    animation-delay: 0.18s;
}

.loader-diagnostics span:nth-child(3) {
    animation-delay: 0.36s;
}

.loader-text {
    color: #e6edf3;
    font-size: clamp(3.25rem, 13vw, 6.4rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.9;
    text-shadow: 0 0 32px rgba(37, 240, 173, 0.22);
}

.loader-text span {
    color: var(--dash-green, #25f0ad);
}

.loader-terminal {
    color: #8fa0b2;
    display: grid;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.35rem;
}

.loader-terminal p {
    animation: loaderType 1.45s steps(34, end) both;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.loader-terminal p:nth-child(2) {
    animation-delay: 0.22s;
}

.loader-terminal p:nth-child(3) {
    animation-delay: 0.44s;
}

.loader-terminal p:nth-child(4) {
    animation-delay: 0.66s;
}

.loader-progress {
    background: rgba(125, 211, 252, 0.09);
    border: 1px solid rgba(37, 240, 173, 0.2);
    border-radius: 999px;
    height: 0.7rem;
    overflow: hidden;
}

.loader-progress span {
    background: linear-gradient(90deg, var(--dash-green, #25f0ad), var(--dash-cyan, #18c9ff));
    box-shadow: 0 0 22px rgba(37, 240, 173, 0.45);
    display: block;
    height: 100%;
    transition: width 0.18s ease-out;
    width: 0;
}

.loader-footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.loader-status {
    color: var(--dash-green, #25f0ad);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.loader-percent {
    color: #e6edf3;
    font-family: "Courier New", monospace !important;
    font-size: 0.98rem;
    letter-spacing: 0.06em;
    text-shadow: 0 0 18px rgba(24, 201, 255, 0.35);
}

@keyframes loaderBorderPulse {
    50% {
        border-color: rgba(24, 201, 255, 0.3);
        box-shadow: inset 0 0 24px rgba(37, 240, 173, 0.08);
    }
}

@keyframes loaderDataSweep {
    to {
        left: 100%;
    }
}

@keyframes loaderCoreSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderCorePulse {
    50% {
        box-shadow: 0 0 30px rgba(37, 240, 173, 0.28);
        transform: scale(1.08);
    }
}

@keyframes loaderOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderChip {
    50% {
        background: rgba(37, 240, 173, 0.16);
        box-shadow: 0 0 18px rgba(37, 240, 173, 0.18);
        color: #eafff8;
    }
}

@keyframes loaderScan {
    from {
        transform: translateY(-8px);
    }

    to {
        transform: translateY(8px);
    }
}

@keyframes loaderSweep {
    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}

@keyframes loaderNode {
    0%,
    100% {
        background: rgba(37, 240, 173, 0.08);
    }

    50% {
        background: rgba(37, 240, 173, 0.72);
        box-shadow: 0 0 18px rgba(37, 240, 173, 0.5);
    }
}

@keyframes loaderType {
    from {
        max-width: 0;
    }

    to {
        max-width: 100%;
    }
}

@keyframes loaderProgress {
    to {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .loader-content {
        gap: 0.82rem;
        padding: 1rem;
        width: min(100%, 360px);
    }

    .loader-grid {
        gap: 0.28rem;
        grid-template-columns: repeat(8, 1fr);
    }

    .loader-core {
        width: 92px;
    }

    .loader-diagnostics {
        gap: 0.38rem;
    }

    .loader-diagnostics span {
        font-size: 0.52rem;
        padding: 0.42rem 0.35rem;
    }

    .loader-terminal {
        font-size: 0.66rem;
    }

    .loader-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}

img,
svg,
canvas {
    max-width: 100%;
}

body::before {
    background-image:
        linear-gradient(rgba(0, 123, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 123, 255, 0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    content: '';
    inset: 0;
    mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
    opacity: 0.45;
    pointer-events: none;
    position: fixed;
    z-index: -2;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    /* Light default */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.live-metrics-button {
    align-items: center;
    background: var(--accent-secondary);
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.5rem;
    line-height: 1;
    padding: 0.75rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.live-metrics-button:hover,
.live-metrics-button:focus {
    box-shadow: 0 10px 22px rgba(0, 123, 255, 0.18);
    outline: none;
    transform: translateY(-2px);
}

.metrics-modal {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.25s ease;
    z-index: 10000;
}

.metrics-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.metrics-modal-panel {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(31, 38, 135, 0.26);
    max-height: min(760px, calc(100vh - 2rem));
    max-width: 760px;
    overflow: hidden;
    padding: 2rem;
    position: relative;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.25s ease;
    width: min(100%, 760px);
}

.metrics-modal-body {
    max-height: calc(min(760px, 100vh - 2rem) - 115px);
    overflow-y: auto;
    padding-right: 0.35rem;
}

.metrics-modal-body::-webkit-scrollbar {
    width: 8px;
}

.metrics-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 123, 255, 0.35);
    border-radius: 999px;
}

.metrics-modal-panel .heatmap-header {
    padding-right: 3.25rem;
}

.metrics-modal-panel .analytics-icon {
    flex: 0 0 42px;
    height: 42px;
    width: 42px;
}

.metrics-modal.active .metrics-modal-panel {
    transform: translateY(0) scale(1);
}

.metrics-close {
    align-items: center;
    background: var(--accent-secondary);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 42px;
}

.metrics-detail-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1rem 0 1.25rem;
}

.metrics-summary {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
}

.metrics-summary>div,
.visitor-graph-card {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 18px;
    padding: 1rem;
}

.metrics-summary span {
    color: var(--text-light);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.metrics-summary strong {
    color: var(--text-color);
    display: block;
    font-size: 1.05rem;
    line-height: 1.25;
}

.visitor-graph-card {
    margin-bottom: 1rem;
}

.visitor-live-graph {
    display: block;
    height: 150px;
    margin-top: 0.65rem;
    width: 100%;
}

#visitor-graph-area {
    fill: url(#visitorGraphFill);
}

#visitor-graph-line {
    fill: none;
    stroke: var(--accent-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.metrics-detail-grid span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(0, 123, 255, 0.08));
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 16px;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 650;
    min-height: 70px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.85rem;
}

.metrics-detail-grid strong {
    color: var(--text-color);
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

[data-theme="light"] nav {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Scroll Reveal Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--accent-secondary);
    z-index: 1001;
}

.logo span {
    color: var(--accent-color);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-status-cluster {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

.digital-clock {
    align-items: center;
    background: rgba(5, 13, 18, 0.86);
    border: 1px solid rgba(32, 247, 180, 0.26);
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(32, 247, 180, 0.08);
    color: var(--text-color);
    display: inline-flex;
    gap: 0.7rem;
    line-height: 1;
    min-height: 42px;
    padding: 0.65rem 0.85rem;
}

.digital-clock span {
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.digital-clock strong {
    color: #e6edf3;
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: 0.03em;
    min-width: 5.8rem;
    text-align: right;
    text-shadow: 0 0 14px rgba(32, 247, 180, 0.25);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.4rem;
    font-family: var(--font-heading);
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-color);
}

.nav-links a::after {
    background: var(--accent-color);
    border-radius: 999px;
    bottom: -0.45rem;
    content: '';
    height: 3px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.28s ease;
    width: 70%;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Custom Cursor */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    display: none;
    /* Hidden by default until JS enablement */
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent-color);
    transition: transform 0.2s ease-out;
    /* Smooth expansion */
}

/* Hide default cursor on desktop */
@media (min-width: 900px) {
    body {
        cursor: auto;
        /* Restored default cursor */
    }

    a,
    button,
    .cta-button {
        cursor: pointer;
        /* Restored pointer cursor */
    }

    .cursor-dot,
    .cursor-outline {
        display: none;
        /* Hide custom cursor */
    }
}



/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    transition: 0.3s;
}

/* Typography & Layout */
section {
    min-height: 100vh;
    padding: 120px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#about,
#skills {
    min-height: auto;
    /* Allow content to dictate height */
    padding-top: 100px;
    padding-bottom: 100px;
}

#about,
#skills,
#heatmaps,
#featured-projects,
#projects,
#contact {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

/* Hero Section */
#hero {
    display: flex;
    flex-direction: row;
    /* Side by side on desktop */
    align-items: center;
    justify-content: space-between;
    /* Spread text and image */
    gap: 4rem;
    padding-top: 100px;
    text-align: left;
    /* Align text to left */
    max-width: 1400px;
    /* Constrain width */
    margin: 0 auto;
    /* Center container */
}

.hero-text {
    flex: 1;
    max-width: 600px;
    z-index: 2;
    order: 1;
    /* Text on left */
}

.hero-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    order: 2;
    /* Image on right */
}

.hero-greeting {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    display: block;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    /* fallback */
}

.hero-name {
    font-size: 5rem;
    line-height: 1.1;
    color: var(--accent-secondary);
    margin-bottom: 2rem;
    font-weight: 500;
    /* Thin */
    font-family: 'Poppins', sans-serif;
    text-shadow: none;
}

[data-theme="light"] .hero-name {
    color: var(--accent-secondary);
    text-shadow: none;
}

.hero-name span {
    color: var(--accent-color);
    font-weight: 500;
    /* Medium */
}


.hero-bio {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.tech-stack {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.tech-badge {
    background: var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    transition: transform 0.2s, background 0.3s, color 0.3s;
}

.tech-badge:hover {
    transform: translateY(-2px);
    background: var(--accent-color);
    color: white;
}

.tech-badge.highlight {
    background: var(--accent-color);
    color: white;
}

.hero-image-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Stack image and text */
    justify-content: center;
    position: relative;
    height: 600px;
    align-items: center;
}

.hero-image-tagline {
    margin-top: 2rem;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-color);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    z-index: 2;
    max-width: 80%;
}

.hero-bg-shape {
    position: absolute;
    width: 650px;
    height: 650px;
    background: var(--accent-color);
    opacity: 0.8;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    z-index: -1;
    filter: blur(50px);
    transition: background 0.5s;
}

.hero-img {
    width: 400px;
    height: 400px;
    object-fit: cover;
    object-position: 50% 28%;
    border-radius: 50%;
    border: 10px solid var(--bg-color);
    box-shadow: var(--shadow-soft);
    position: relative;
    z-index: 1;
    transition: border 0.5s;
}

.hero-img:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow: 0 24px 55px rgba(0, 123, 255, 0.22);
}

.floating-card {
    display: none;
}

.cta-button {
    display: inline-block;
    padding: 1rem 3rem;
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 123, 255, 0.5);
}

/* Tech Stack Grid (2 Rows - 3 columns) */
.minimal-tech-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

.minimal-pill {
    background: var(--border-color);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    transition: transform 0.2s, background 0.3s, color 0.3s, box-shadow 0.3s;
    cursor: default;
    /* 3D Tilt Support */
    transform-style: preserve-3d;
}

.minimal-pill:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
}

/* About Section Glassmorphism Redesign */
/* Unified Glassmorphism Container */
.about-wrapper,
.contact-wrapper,
.projects-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;

    /* Strong Glass Effect */
    background: rgba(255, 255, 255, 0.4);
    /* Much clearer milky glass */
    backdrop-filter: blur(30px);
    /* Heavy frost */
    -webkit-backdrop-filter: blur(30px);
    padding: 3rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* Distinct border */
    box-shadow: 0 15px 40px 0 rgba(31, 38, 135, 0.25);
    /* Deep shadow */
    /* Ensure content inside doesn't get washed out */
    color: var(--text-color);
}


.about-content-row {
    display: flex;
    gap: 4rem;
    width: 100%;
    align-items: flex-start;
}

.about-text-col {
    flex: 1;
    position: relative;
}

/* Shared Section Header Styles */
.section-title,
.about-header h2,
.contact-wrapper h2 {
    text-align: left;
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* CRITICAL: Allow text to wrap */
}

.section-title::before,
.about-header h2::before,
.contact-wrapper h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
}

/* Specific overrides */
.about-header {
    margin-bottom: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Left align container */
}

.about-arrow-header {
    font-size: 4rem;
    font-weight: 800;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    line-height: 1.1;
    white-space: normal;
    /* Changed from nowrap to normal */
    padding-left: 25px;
    /* Space for dot */
    position: relative;
    overflow-wrap: break-word;
    /* Ensure wrapping happens naturally */
    word-break: break-word;
    /* Ensure long words break */
}

.about-arrow-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
}

/* Education Section Styles */
.education-container {
    margin-top: 4rem;
    width: 100%;
    text-align: left;
}

.education-content {
    padding-left: 2rem;
    position: relative;
    /* Border removed for animation control */
    margin-left: 10px;
}

/* Animated Guide Line */
.education-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 123, 255, 0.3);
    transform-origin: top;
    transform: scaleY(0);
    /* Hidden initially */
    transition: transform 1s ease;
    /* For non-JS fallback */
}

.education-content.timeline-visible::before,
.skills-grid-new.timeline-visible::before {
    transform: scaleY(1);
}

.education-item {
    margin-bottom: 3rem;
    position: relative;
}

/* Timeline Dot */
.education-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    /* Align with padding/border */
    top: 5px;
    width: 1rem;
    height: 1rem;
    background: var(--accent-color);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
    /* Soft glow ring */
    transition: all 0.3s ease;
}

.education-item:hover::before {
    background: white;
    box-shadow: 0 0 0 6px var(--accent-color);
    transform: translateX(-50%) scale(1.2);
}

.education-item:last-child {
    margin-bottom: 0;
}

.education-item h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.edu-degree {
    font-size: 1.3rem;
    /* Adjusted to 1.3rem */
    color: var(--accent-color);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.edu-details {
    font-size: 1.3rem;
    /* Adjusted to 1.3rem */
    color: var(--text-light);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.edu-details strong {
    color: var(--text-color);
}

/* Prevent overflow in education details */
.edu-degree,
.edu-details {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Interactive Skills Roadmap (Timeline) */
/* Interactive Skills Roadmap (Timeline) */
.skills-grid-new {
    display: flex;
    flex-direction: column;
    /* Vertical Roadmap */
    gap: 3rem;
    width: 100%;
    margin-top: 2rem;
    padding-left: 2rem;
    /* Indent for line */
    position: relative;
    /* Border replaced by pseudo-element */
    margin-left: 10px;
}

.skills-grid-new::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 123, 255, 0.3);
    transform-origin: top;
    transform: scaleY(0);
    /* Hidden initially */
    transition: transform 1s ease;
}

.skill-pill {
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle glass */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    /* Pill Shape defaults, expands on hover */
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    /* For dot */
    overflow: hidden;
    min-height: 80px;
    /* Initial height for header only */
    cursor: pointer;
    width: 100%;
    /* Full width cards */
}

/* Roadmap Dot for Skills */
.skill-pill::before {
    content: '';
    position: absolute;
    left: -2rem;
    /* Align with education dots */
    top: 50%;
    /* Center vertically for pill */
    width: 1rem;
    height: 1rem;
    background: var(--accent-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Center dot */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
}

/* Hover State adjustments for dot */
.skill-pill:hover::before {
    background: white;
    box-shadow: 0 0 0 6px var(--accent-color);
    transform: translate(-50%, -50%) scale(1.2);
    top: 40px;
    /* Pin dot to top when expanded */
}

.pill-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.4s ease;
    z-index: 2;
}

.pill-header i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.pill-header h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
    color: var(--text-color);
}

.pill-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    transition: all 0.5s ease;
    transform: translateY(20px);
}

.pill-content span {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    width: 100%;
}

/* Hover State -> Mindblowing Reveal */
.skill-pill:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 20px 50px rgba(0, 123, 255, 0.3),
        0 0 0 2px var(--accent-color);
    /* Glowing Border */
    transform: translateY(-10px) scale(1.05);
    border-radius: 20px;
    /* Morph to card */
    z-index: 100;
    min-height: 250px;
    /* Expand */
    justify-content: flex-start;
    padding-top: 2rem;
}

.skill-pill:hover .pill-header {
    transform: scale(0.9);
    margin-bottom: 1rem;
}

.skill-pill:hover .pill-content {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
}

/* Responsive adjustments only */
@media (max-width: 1100px) {
    /* No grid overrides needed */
}

@media (max-width: 600px) {
    .skill-pill {
        width: 100%;
    }
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    /* Fluid scaling */
    margin-bottom: 2rem;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    padding-left: 25px;
}

.section-title::before {
    width: 12px;
    height: 12px;
}

.orange-arrow {
    display: none;
    /* Hide if still present */
}

.about-bio {
    font-size: 1.3rem;
    /* Adjusted to 1.3rem */
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    font-family: 'Poppins', sans-serif;
}

.about-bio strong {
    color: var(--text-color);
}

/* Mobile Hero Reset (Stacking) */
@media (max-width: 900px) {
    #hero {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .hero-text {
        order: 1;
        margin: 0 auto;
        align-items: center;
        width: 100%;
    }

    .hero-image-wrapper {
        order: 2;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        order: 3;
        justify-content: center;
        width: 100%;
        gap: 1rem;
        /* Reduced gap for mobile */
        flex-wrap: nowrap;
        /* Force side-by-side */
    }

    .cta-button.subtle-btn {
        padding: 0.8rem 1.5rem;
        /* Smaller padding */
        font-size: 0.9rem;
        /* Smaller font */
        flex: 1;
        /* Equal width */
        justify-content: center;
    }
}

/* Glossy Stats Cards */
.glossy-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    position: relative;
}

.glossy-card {
    background: linear-gradient(135deg, #e0e5ec 0%, #ffffff 100%);
    border-radius: 30px;
    padding: 3rem 1.5rem;
    text-align: center;
    box-shadow:
        10px 10px 20px rgba(163, 177, 198, 0.3),
        -10px -10px 20px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .glossy-card {
    background: linear-gradient(145deg, #1e1e1e 0%, #2a2a2a 100%);
    box-shadow:
        5px 5px 15px rgba(0, 0, 0, 0.5),
        -5px -5px 15px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glossy-card.large {
    grid-column: span 2;
}

.glossy-card:hover {
    transform: translateY(-5px);
}

/* Metallic Gradient Overlays for specific cards */
.glossy-card.blue-tint {
    background: linear-gradient(135deg, #dce8f7 0%, #ffffff 100%);
}

[data-theme="dark"] .glossy-card.blue-tint {
    background: linear-gradient(135deg, #1a2332 0%, #0d1117 100%);
}

.glossy-card.purple-tint {
    background: linear-gradient(135deg, #efdcf7 0%, #ffffff 100%);
}

[data-theme="dark"] .glossy-card.purple-tint {
    background: linear-gradient(135deg, #2b1a32 0%, #0d1117 100%);
}

.glossy-card.green-tint {
    background: linear-gradient(135deg, #dcf7e3 0%, #ffffff 100%);
}

[data-theme="dark"] .glossy-card.green-tint {
    background: linear-gradient(135deg, #1a3222 0%, #0d1117 100%);
}


.stat-num-glossy {
    font-size: 3.5rem;
    font-weight: 900;
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.blue-text {
    color: #58a6ff;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.purple-text {
    color: #bc8cff;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.green-text {
    color: #3fb950;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .blue-text,
[data-theme="dark"] .purple-text,
[data-theme="dark"] .green-text {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.stat-label-glossy {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #555555;
    text-transform: uppercase;
}

.glossy-title {
    font-size: 2rem;
    font-weight: 900;
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

/* Floating cubes removed for the terminal theme. */
.floating-cube,
.cube-ghost {
    display: none !important;
}

@keyframes floatCube {

    0%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(-25px) rotate(60deg);
    }
}

/* Updated Tech Pills */
.minimal-tech-stack {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.minimal-pill {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    color: #24292e;
    padding: 1rem 2.5rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    /* fallback to match font style in image (serif-ish) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s;
}

[data-theme="dark"] .minimal-pill {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

.minimal-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

/* Projects Grid (Redesigned) */
.section-title {
    font-size: 3.5rem;
    /* Reduced from 4rem */
    font-weight: 600;
    /* Reduced from 800 */
    color: var(--text-color);
    letter-spacing: 2px;
    /* Add breathing room */
    word-spacing: 30px;
    /* Proper gap between words */
    margin-bottom: 3rem;
    text-align: center;
    font-family: var(--font-heading);
}

/* Projects Grid (Glass Style) -> NOW WRAPPER */
/* Unified Glassmorphism */
.projects-wrapper {
    width: 100%;
    overflow: hidden;
    /* Hide horizontal scrollbar, JS will animate track */

    /* Exact Match to Contact Section & About Section */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 3rem 0;
    /* Vertical padding only to allow full width track flow */
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    max-width: 1200px;
    margin: 0 auto;
}

.activity-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 10;
}

.heatmap-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(31, 38, 135, 0.18);
    padding: 2rem;
    overflow: hidden;
    min-width: 0;
    transform-style: preserve-3d;
}

.heatmap-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.heatmap-kicker {
    color: var(--accent-color);
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.heatmap-card h3 {
    color: var(--text-color);
    font-size: 1.45rem;
    line-height: 1.2;
    margin: 0;
}

.heatmap-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 48px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.heatmap-link:hover {
    background: var(--accent-color);
    transform: translateY(-3px) scale(1.05);
}

.leetcode-logo {
    display: block;
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.icon-circle .leetcode-logo {
    height: 38px;
    width: 38px;
}

.heatmap-stats,
.heatmap-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.heatmap-stats span,
.heatmap-insights span {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
}

.heatmap-stats strong,
.heatmap-insights strong {
    color: var(--text-color);
}

.github-metrics-panel {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.1rem;
}

.github-metrics-panel span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 14px;
    color: var(--text-light);
    font-size: 0.84rem;
    font-weight: 650;
    min-height: 62px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.8rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.github-metrics-panel span:hover {
    border-color: rgba(34, 197, 94, 0.35);
    transform: translateY(-2px);
}

.github-metrics-panel span.wide {
    grid-column: 1 / -1;
    min-height: auto;
}

.github-metrics-panel strong {
    color: var(--text-color);
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.15rem;
}

.analytics-wrapper {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    width: 100%;
    z-index: 10;
}

.analytics-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(31, 38, 135, 0.18);
    min-width: 0;
    overflow: hidden;
    padding: 2rem;
    transform-style: preserve-3d;
}

.analytics-icon {
    align-items: center;
    background: var(--accent-secondary);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
    width: 48px;
}

.analytics-icon:hover {
    background: var(--accent-color);
    transform: translateY(-3px) scale(1.05);
}

.analytics-grid,
.linkedin-metrics {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.analytics-grid span,
.linkedin-metrics span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(0, 123, 255, 0.08));
    border: 1px solid rgba(0, 123, 255, 0.14);
    border-radius: 16px;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 650;
    min-height: 72px;
    padding: 0.9rem;
}

.analytics-grid strong,
.linkedin-metrics strong {
    color: var(--text-color);
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

.country-panel,
.linkedin-status {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 16px;
    padding: 1rem;
}

.country-panel-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.country-panel-header strong,
.linkedin-status strong {
    color: var(--text-color);
    font-size: 0.95rem;
}

.country-panel-header span,
.linkedin-status span {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 650;
}

.country-list {
    display: grid;
    gap: 0.7rem;
}

.country-list span {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(120px, 0.42fr) minmax(80px, 1fr) auto;
}

.country-list b,
.country-list em {
    color: var(--text-color);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 750;
}

.country-list b {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}

.country-list i {
    background: rgba(0, 123, 255, 0.1);
    border-radius: 999px;
    height: 0.55rem;
    overflow: hidden;
    position: relative;
}

.country-list i::before {
    background: var(--accent-color);
    border-radius: inherit;
    content: '';
    inset: 0 auto 0 0;
    position: absolute;
    width: var(--bar, 0%);
}

.linkedin-status {
    display: grid;
    gap: 0.35rem;
}

.platform-metrics {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.platform-metrics span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(13, 17, 23, 0.05));
    border: 1px solid rgba(13, 17, 23, 0.1);
    border-radius: 16px;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 650;
    min-height: 68px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.85rem;
}

.platform-metrics strong {
    color: var(--text-color);
    display: block;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

.mini-viz-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.mini-viz-grid>div {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 16px;
    padding: 1rem;
}

.mini-viz-grid strong {
    color: var(--text-color);
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.mini-bars {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(3, 1fr);
    height: 56px;
}

.mini-bars i {
    background: linear-gradient(180deg, #f59e0b, #f97316);
    border-radius: 8px 8px 4px 4px;
    display: block;
    height: var(--bar, 6%);
    min-height: 6px;
}

.mini-line {
    display: block;
    height: 56px;
    overflow: visible;
    width: 100%;
}

.mini-line polyline {
    fill: none;
    stroke: var(--accent-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.topic-pills span,
.recent-feed span {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(13, 17, 23, 0.08);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.6rem;
}

.compact-heatmap {
    display: grid;
    gap: 3px;
    grid-auto-flow: column;
    grid-auto-columns: 8px;
    grid-template-rows: repeat(7, 8px);
    margin-bottom: 1rem;
    max-width: 100%;
    min-height: 74px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.compact-heatmap i {
    background: #ebedf0;
    border-radius: 2px;
    display: block;
}

.compact-heatmap i[data-level="1"] {
    background: #bfdbfe;
}

.compact-heatmap i[data-level="2"] {
    background: #60a5fa;
}

.compact-heatmap i[data-level="3"] {
    background: #2563eb;
}

.compact-heatmap i[data-level="4"] {
    background: #1e40af;
}

.recent-feed {
    display: grid;
    gap: 0.5rem;
}

.leetcode-overview {
    align-items: center;
    display: grid;
    gap: 1.25rem;
    grid-template-areas:
        "ring meta"
        "legend meta";
    grid-template-columns: 150px minmax(0, 1fr);
    margin-bottom: 1.25rem;
}

.leetcode-progress-ring {
    --easy-deg: 0deg;
    --medium-deg: 0deg;
    --hard-deg: 0deg;
    align-items: center;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0 58%, transparent 59%),
        conic-gradient(
            #22c55e 0 var(--easy-deg),
            #f59e0b var(--easy-deg) calc(var(--easy-deg) + var(--medium-deg)),
            #ef4444 calc(var(--easy-deg) + var(--medium-deg)) calc(var(--easy-deg) + var(--medium-deg) + var(--hard-deg)),
            rgba(13, 17, 23, 0.08) 0
        );
    border: 1px solid rgba(249, 115, 22, 0.18);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 10px rgba(255, 255, 255, 0.65),
        0 18px 38px rgba(249, 115, 22, 0.2);
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    grid-area: ring;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 150px;
}

.leetcode-progress-ring::after {
    background: linear-gradient(135deg, #22c55e, #f59e0b, #ef4444);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(249, 115, 22, 0.35);
    content: '';
    height: 14px;
    left: 50%;
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    width: 14px;
}

.leetcode-progress-ring:hover,
.leetcode-progress-ring:focus {
    box-shadow:
        inset 0 0 0 10px rgba(255, 255, 255, 0.75),
        0 22px 48px rgba(249, 115, 22, 0.3);
    outline: none;
    transform: translateY(-4px) scale(1.03);
}

.leetcode-ring-legend {
    display: grid;
    gap: 0.6rem;
    grid-area: legend;
}

.leetcode-ring-legend span {
    align-items: center;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(13, 17, 23, 0.08);
    border-radius: 999px;
    color: var(--text-light);
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.leetcode-ring-legend span:hover {
    border-color: rgba(249, 115, 22, 0.28);
    transform: translateX(3px);
}

.leetcode-ring-legend i {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 0.7rem;
    height: 0.7rem;
    width: 0.7rem;
}

.leetcode-ring-legend strong {
    color: var(--text-color);
    font-size: 0.98rem;
}

.leetcode-ring-legend .easy i {
    background: #22c55e;
}

.leetcode-ring-legend .medium i {
    background: #f59e0b;
}

.leetcode-ring-legend .hard i {
    background: #ef4444;
}

.ring-center {
    align-items: center;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: center;
}

.ring-center strong {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 800;
}

.ring-center span {
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ring-center small {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.ring-center b {
    color: var(--accent-color);
}

.leetcode-meta-panel {
    display: grid;
    gap: 0.75rem;
    grid-area: meta;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.leetcode-meta-panel span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(249, 115, 22, 0.08));
    border: 1px solid rgba(249, 115, 22, 0.16);
    border-radius: 14px;
    color: var(--text-light);
    font-size: 0.84rem;
    font-weight: 650;
    min-height: 62px;
    min-width: 0;
    padding: 0.8rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    overflow-wrap: anywhere;
}

.leetcode-meta-panel span:hover {
    border-color: rgba(249, 115, 22, 0.35);
    transform: translateY(-2px);
}

.leetcode-meta-panel strong {
    color: var(--text-color);
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.15rem;
    overflow-wrap: anywhere;
}

.heatmap-insights span {
    background: rgba(13, 17, 23, 0.04);
    border-color: rgba(13, 17, 23, 0.08);
}

.heatmap-months {
    --heatmap-cell: 12px;
    --heatmap-gap: 4px;
    align-items: center;
    color: var(--text-light);
    display: grid;
    font-size: 0.72rem;
    font-weight: 700;
    gap: var(--heatmap-gap);
    grid-template-rows: 1rem;
    margin-bottom: 0.35rem;
    max-width: 100%;
    min-height: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    width: max-content;
}

.heatmap-months::-webkit-scrollbar {
    display: none;
}

.heatmap-months span {
    line-height: 1;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.contribution-heatmap {
    --heatmap-cell: 12px;
    --heatmap-gap: 4px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--heatmap-cell));
    grid-auto-columns: var(--heatmap-cell);
    gap: var(--heatmap-gap);
    min-height: calc((7 * var(--heatmap-cell)) + (6 * var(--heatmap-gap)) + 1.1rem);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0 0.85rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
}

.contribution-heatmap.is-loading::before,
.contribution-heatmap.is-error::before {
    content: 'Loading heatmap...';
    color: var(--text-light);
    font-size: 0.95rem;
    grid-row: 1 / -1;
    white-space: nowrap;
}

.contribution-heatmap.is-error::before {
    content: 'Heatmap is temporarily unavailable.';
}

.heatmap-day {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #ebedf0;
    border: 1px solid rgba(27, 31, 35, 0.04);
    flex: 0 0 auto;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.contribution-heatmap:not(.is-loading) .heatmap-day:not(.heatmap-day-blank) {
    animation: heatmapPop 0.38s ease both;
    animation-delay: calc(var(--heatmap-index, 0) * 2ms);
}

@keyframes heatmapPop {
    from {
        opacity: 0;
        transform: scale(0.45);
    }

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

.heatmap-day:not(.heatmap-day-blank) {
    cursor: crosshair;
}

.heatmap-day:not(.heatmap-day-blank):hover,
.heatmap-day:not(.heatmap-day-blank):focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
    outline: none;
    transform: scale(1.25);
    z-index: 2;
}

.heatmap-day[data-level="1"] {
    background: #9be9a8;
}

.heatmap-day[data-level="2"] {
    background: #40c463;
}

.heatmap-day[data-level="3"] {
    background: #30a14e;
}

.heatmap-day[data-level="4"] {
    background: #216e39;
}

.leetcode-heatmap-card .heatmap-day[data-level="1"],
.leetcode-legend i[data-level="1"] {
    background: #9be9a8;
}

.leetcode-heatmap-card .heatmap-day[data-level="2"],
.leetcode-legend i[data-level="2"] {
    background: #40c463;
}

.leetcode-heatmap-card .heatmap-day[data-level="3"],
.leetcode-legend i[data-level="3"] {
    background: #30a14e;
}

.leetcode-heatmap-card .heatmap-day[data-level="4"],
.leetcode-legend i[data-level="4"] {
    background: #216e39;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.heatmap-legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #ebedf0;
    display: inline-block;
}

.heatmap-legend i[data-level="1"] {
    background: #9be9a8;
}

.heatmap-legend i[data-level="2"] {
    background: #40c463;
}

.heatmap-legend i[data-level="3"] {
    background: #30a14e;
}

.heatmap-legend i[data-level="4"] {
    background: #216e39;
}

.heatmap-focus {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 12px;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
    min-height: 2.4rem;
    padding: 0.65rem 0.8rem;
}

.projects-horizontal-track {
    display: flex;
    gap: 4rem;
    /* Wide gap for horizontal scroll */
    width: fit-content;
    padding: 0 5vw;
    /* Start with some padding */
}

/* .projects-grid removed/refactored */


.project-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 2.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 400px;
    border: none;
    transform-style: preserve-3d;
}

.project-card::before {
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}

/* ... existing styles ... */

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.project-card:hover::before {
    transform: translateX(120%);
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    backdrop-filter: blur(5px);
}

.icon-circle i {
    font-size: 1.8rem;
    color: white;
}

.project-card h3 {
    font-size: 2rem;
    /* Increased from 1.8rem */
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.project-card p {
    font-size: 1.2rem;
    /* Increased from 1.05rem */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    flex-grow: 1;
}

.view-project {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-project i {
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.project-card:hover .view-project i {
    transform: translate(3px, -3px);
}

/* Specific Card Themes */
.card-github {
    background: #1c2128;
    /* Dark Grey/Black */
}

.card-linkedin {
    background: #1d4ed8;
    /* Stronger Blue */
}

.card-leetcode {
    background: #b45309;
    /* Deep Orange/Brown */
}

/* Contact & Form (Glass Style & Compact) */
.contact-wrapper {
    display: flex;
    gap: 2rem;
    /* Reduced gap */
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2.5rem;
    /* Reduced padding */
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1000px;
    /* Constrain width */
    margin: 0 auto;
}

.contact-info {
    flex: 1;
    min-width: 280px;
}

.contact-form {
    flex: 1.5;
    min-width: 300px;
    background: var(--card-bg);
    padding: 2rem;
    /* Compact padding */
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
}

.form-group {
    position: relative;
    margin-bottom: 2rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: var(--font-body);
}

.form-group textarea {
    height: 150px;
    resize: none;
}

.form-group label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--text-light);
    pointer-events: none;
    transition: 0.3s ease all;
    background: var(--card-bg);
    padding: 0 0.5rem;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}

.form-group input:focus~label,
.form-group input:not(:placeholder-shown)~label,
.form-group textarea:focus~label,
.form-group textarea:not(:placeholder-shown)~label {
    top: -0.8rem;
    font-size: 0.8rem;
    color: var(--accent-color);
}

.contact-pill {
    background: var(--card-bg);
    padding: 1rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    width: fit-content;
}

.contact-pill i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.contact-pill:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

/* Footer */
footer {
    padding: 3rem;
    text-align: center;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.1);
    /* Transparent glass */
    backdrop-filter: blur(15px);
    /* Strong blur */
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.back-to-top {
    font-size: 2rem;
    color: var(--accent-color);
    text-decoration: none;
    transition: transform 0.3s;
}

.back-to-top:hover {
    transform: translateY(-5px);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    z-index: 5;
}

/* Response */
@media (max-width: 900px) {
    #hero {
        flex-direction: column;
        text-align: center;
        /* Restored Center */
        padding-top: 100px;
        /* Adjusted padding */
        justify-content: center;
        /* Center vertically if possible */
        min-height: 100vh;
        gap: 2rem;
        align-items: center;
        /* Restored Center */
    }

    /* FORCE VISIBILITY & ORDER ON MOBILE - Critical Fix */
    .hero-text,
    .hero-image-wrapper {
        position: relative;
        z-index: 10;
        text-align: center;
    }

    .hero-buttons {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: row;
        /* FORCE ROW */
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        /* Allow full width */
        margin: 1.5rem auto 0;
        /* Add top margin */
        justify-content: center;
        /* Center them */
        align-items: center;
        flex-wrap: wrap;
        /* Wrap if screen extremely small */
    }

    .cta-button {
        width: auto;
        /* Auto width */
        min-width: 140px;
        /* Minimum tappable size */
        text-align: center;
        display: inline-flex;
        justify-content: center;
    }

    /* RESET HORIZONTAL SCROLL ON TABLET/MOBILE */
    .projects-horizontal-track {
        flex-direction: column;
        width: 100%;
        padding: 0 2rem;
    }


    .hero-text {
        flex: none;
        /* Don't stretch */
        margin-top: 0;
    }

    .hero-img {
        width: 280px;
        /* Smaller image for mobile to save space */
        height: 280px;
        margin-bottom: 0;
    }

    .floating-card {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        background: var(--bg-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
    }

    .metrics-modal-panel {
        border-radius: 20px;
        padding: 1.35rem;
    }

    .metrics-modal-panel .heatmap-header {
        padding-right: 3rem;
    }

    .metrics-modal-panel .analytics-icon {
        display: none;
    }

    .metrics-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metrics-summary {
        grid-template-columns: 1fr;
    }

    .hamburger {
        display: flex;
    }

    /* Stack About & Skills */
    .about-wrapper {
        flex-direction: column;
        text-align: left;
        padding: 1.5rem;
        /* Reduced from 2.5rem for more space */
        align-items: flex-start;
        /* Ensure items align left */
    }

    .about-bio {
        text-align: left !important;
        width: 100%;
    }

    .education-container {
        text-align: left !important;
        width: 100%;
        padding: 0;
        margin-top: 2rem;
    }

    .about-content-row {
        flex-direction: column;
        gap: 3rem;
    }

    .about-text-col {
        width: 100%;
    }

    .skills-container {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        /* Left align skills on mobile */
    }

    .skill-category {
        width: 100%;
        text-align: left;
        /* Keep category titles left? Or center? Let's keep existing logic but ensure width is full */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .skills-container .skill-list {
        justify-content: flex-start;
    }

    .glossy-grid {
        width: 100%;
    }

    .activity-wrapper {
        grid-template-columns: 1fr;
    }

    .analytics-wrapper {
        grid-template-columns: 1fr;
    }

    .heatmap-card {
        padding: 1.5rem;
    }

    .leetcode-overview {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .leetcode-progress-ring {
        width: 130px;
    }

    .section-title,
    .about-arrow-header {
        justify-content: center;
        /* Center flex content */
        padding-left: 0;
        text-align: center;
        /* Center text */
        white-space: normal;
        /* Force normal wrapping on mobile */
    }

    .section-title::before,
    .about-arrow-header::before {
        display: inline-block;
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin-right: 10px;
        vertical-align: middle;
        /* Ensure dot is visible and correctly positioned */
    }

    /* Fix contact wrapper */
    .contact-wrapper {
        flex-direction: column;
        padding: 2rem;
    }
}

/* Mobile (Tablets/Large Phones) */
@media (max-width: 768px) {
    section {
        padding: 80px 5%;
    }

    .hero-name {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.5rem;
        /* Better scale */
    }

    .hero-bg-shape {
        width: 350px;
        height: 350px;
    }

    .hero-img {
        width: 280px;
        height: 280px;
    }

    .about-arrow-header {
        font-size: 2.2rem;
        /* Reduced from 2.5rem */
        white-space: normal;
        word-break: normal;
        /* Fix for mobile breaking */
        overflow-wrap: break-word;
    }

    .education-content {
        padding-left: 0;
        text-align: left;
    }
}

/* Small Phones */
@media (max-width: 600px) {
    .live-metrics-button {
        justify-content: center;
        padding: 0.7rem 0.85rem;
        width: auto;
    }

    .metrics-detail-grid {
        grid-template-columns: 1fr;
    }

    .country-list span {
        grid-template-columns: 1fr;
    }

    .hero-name {
        font-size: 2.8rem;
    }

    .hero-greeting {
        font-size: 1.2rem;
    }

    .hero-bio {
        font-size: 1rem;
    }

    .minimal-tech-stack {
        grid-template-columns: repeat(2, 1fr);
    }

    .glossy-grid {
        grid-template-columns: 1fr;
    }

    .glossy-card.large {
        grid-column: span 1;
    }

    /* Contact Grid Redesign */
    .contact-grid {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .contact-box {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        /* Circle */
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--text-color);
        font-size: 1.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .contact-box:hover {
        background: var(--accent-color);
        color: white;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
    }

    /* Hide span if valid html remains */
    .contact-box span {
        display: none;
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        /* Keep row even on small screens */
        justify-content: center;
        width: 100%;
        gap: 1rem;
    }

    .cta-button {
        width: auto;
        /* Full width */
        text-align: center;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Projects Grid - RESET to vertical on mobile */
    .projects-horizontal-track {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        padding: 0;
    }


    .project-card {
        padding: 1.5rem;
    }

    .heatmap-header {
        align-items: center;
    }

    .heatmap-card h3 {
        font-size: 1.2rem;
    }

    .analytics-card {
        padding: 1.5rem;
    }

    .analytics-grid,
    .linkedin-metrics,
    .platform-metrics,
    .mini-viz-grid {
        grid-template-columns: 1fr;
    }

    .country-list span {
        grid-template-columns: minmax(60px, 0.45fr) minmax(70px, 1fr) auto;
    }

    .leetcode-overview {
        grid-template-areas:
            "ring"
            "legend"
            "meta";
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .leetcode-ring-legend {
        width: 100%;
    }

    .leetcode-meta-panel {
        width: 100%;
    }

    .contribution-heatmap {
        --heatmap-cell: 10px;
        --heatmap-gap: 3px;
        min-height: 92px;
    }

    .heatmap-months {
        --heatmap-cell: 10px;
        --heatmap-gap: 3px;
        font-size: 0.65rem;
    }

    .heatmap-day,
    .heatmap-legend i {
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

    /* About & Skills Wrapper */
    .about-wrapper {
        padding: 1.5rem;
    }

    /* Reduce animation intensity on mobile for performance */
    .glossy-card,
    .project-card,
    .contact-box {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
}

/* Extra Small Phones */
@media (max-width: 400px) {
    .hero-name {
        font-size: 2.5rem;
        /* Reduced from 2.8rem */
    }

    .about-arrow-header {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 2rem;
        /* Consistent ratio */
        margin-bottom: 2rem;
    }

    .contact-box {
        width: 100%;
    }

    .hero-img {
        width: 200px;
        height: 200px;
    }

    .hero-bg-shape {
        width: 250px;
        height: 250px;
    }
}

/* Ensure no horizontal overflow globally */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Contact Section Redesign (Responsive) */
.container-narrow {
    max-width: 1000px;
    margin: 0 auto;
}

/* Unified wrapper handles glass style. */
.contact-wrapper {
    justify-content: center;
    width: 100%;
    /* Keep specifics */
}

.contact-info-center {
    text-align: center;
    width: 100%;
}

.contact-intro {
    margin-bottom: 3rem;
    font-size: 1.3rem;
    /* Adjusted to 1.3rem */
    color: var(--text-light);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.contact-grid {
    display: flex;
    flex-direction: row;
    /* Desktop Default: Horizontal */
    flex-wrap: wrap;
    /* Allow wrapping if needed, but aim for row */
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-box {
    background: transparent;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s;
    min-width: auto;
}

/* MOBILE OVERRIDE: 900px and below */
@media (max-width: 900px) {
    .contact-grid {
        display: flex;
        flex-direction: row;
        /* Horizontal */
        flex-wrap: wrap;
        /* Wrap if needed, but try row */
        justify-content: center;
        gap: 1.5rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-box {
        width: auto;
        /* Allow auto width */
        flex: 0 0 auto;
        /* Don't stretch */
    }
}

/* Force row on small screens too */
@media (max-width: 600px) {
    .contact-grid {
        flex-direction: row;
        /* Keep row */
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        /* Smaller gap for tighter fit */
    }

    .contact-box {
        width: auto;
        /* Auto width */
        height: auto;
        /* Auto height */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 0.5rem;
        /* Small padding for touch target */
        border-radius: 0;
    }

    .contact-box i {
        font-size: 2rem;
        /* Balanced size without container */
        color: var(--text-color);
        /* Default color, or black if user wants black */
    }
}

.contact-box i {
    font-size: 3.5rem;
    /* Bigger icons */
    color: black !important;
    /* Force black color */
    transition: transform 0.3s;
}

.contact-box span {
    font-weight: 600;
    font-size: 1.2rem;
}

.contact-box:hover {
    transform: translateY(-5px) scale(1.1);
}

.contact-box:hover i {
    transform: scale(1.1);
}

/* Dark mode overrides removed for clean icon look */

/* Tabs for Projects/Certifications */
.section-header-tabs {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
    padding-left: 20px;
}

.tab-title {
    margin-bottom: 0 !important;
    /* Override section-title margin */
    cursor: pointer;
    transition: opacity 0.3s, color 0.3s;
    font-size: 2.5rem !important;
    /* Match section title size */
}

.tab-title.inactive {
    opacity: 0.4;
    color: var(--text-light);
}

.tab-title.inactive:hover {
    opacity: 0.8;
    color: var(--accent-color);
}

.tab-title.active {
    opacity: 1;
    color: var(--text-color);
}


/* Projects Header & Toggle Button */
.projects-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-right: 20px;
    /* Align with grid */
    flex-wrap: wrap;
    gap: 1rem;
}

#projects-title.section-title {
    margin-bottom: 0;
    /* Remove default margin */
}

.outline-btn {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--text-color);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.outline-btn i {
    transition: transform 0.3s ease;
}

.outline-btn:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

.outline-btn:hover i {
    transform: translateX(5px);
}

[data-theme="light"] .outline-btn:hover {
    color: white;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

/* Hero Buttons Redesign */
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    position: relative;
    z-index: 10;
    margin-left: -15px;
    /* Move slightly left */
}

.cta-button.subtle-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle glass */
    border: 1px solid rgba(0, 123, 255, 0.3);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Icons */
.cta-button.subtle-btn i {
    font-size: 1.2rem;
    color: var(--accent-color);
    transition: transform 0.4s ease;
}

/* Mindblowing Hover Effect */
.cta-button.subtle-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    border-color: var(--accent-color);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.25);
    padding-right: 3rem;
    /* Dynamic expansion */
}

.cta-button.subtle-btn:hover i {
    transform: scale(1.3) rotate(15deg);
}

.cta-button.subtle-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.6s;
    pointer-events: none;
}

.cta-button.subtle-btn:hover::after {
    left: 100%;
}

/* Relocated Stats Section Styles */
.glossy-grid.relocated-stats {
    display: flex;
    /* Flex row for horizontal layout */
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    flex-wrap: wrap;
    /* Allow wrapping on mobile */
}

.relocated-stats .glossy-card {
    flex: 1;
    min-width: 200px;
    /* Ensure decent size */
    max-width: 300px;
}

.relocated-stats .glossy-card.large {
    grid-column: auto;
    /* Reset grid specific props */
}

/* Ensure Font is Poppins Sans Serif */
.stat-num-glossy,
.stat-label-glossy,
.glossy-title {
    font-family: 'Poppins', sans-serif !important;
}

/* Mobile Adjustments for Stats */
@media (max-width: 768px) {
    .glossy-grid.relocated-stats {
        flex-direction: column;
        align-items: center;
    }

    .relocated-stats .glossy-card {
        width: 100%;
        max-width: 100%;
    }
}

/* Orbiting Social Icons */
.orbit-icon {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    /* Circular size */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.5rem;
    text-decoration: none;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.orbit-icon:hover {
    background: var(--accent-color);
    /* Blue fill on hover */
    color: white;
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 20px var(--accent-color);
    border-color: transparent;
}

/* Positioning around the 400x400 image + 50px buffer approx */
/* Center is 50% 50% */
/* Radius approx 240px from center */

.orbit-1 {
    top: 8%;
    right: 2%;
    animation: floatOrbit 6s ease-in-out infinite;
}

/* LinkedIn */
.orbit-2 {
    bottom: 23%;
    right: 2%;
    animation: floatOrbit 7s ease-in-out infinite 1s;
}

/* Instagram */
.orbit-3 {
    bottom: 13%;
    left: 2%;
    animation: floatOrbit 8s ease-in-out infinite 2s;
}

/* WhatsApp */
.orbit-4 {
    top: 13%;
    left: 2%;
    animation: floatOrbit 6s ease-in-out infinite 0.5s;
}

/* Email */

@keyframes floatOrbit {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Mobile Orbit Adjustment */
@media (max-width: 900px) {
    .orbit-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    /* Bring them closer on mobile */
    .orbit-1 {
        top: 1rem;
        right: 1rem;
    }

    .orbit-2 {
        bottom: 9rem;
        right: 1rem;
    }

    .orbit-3 {
        bottom: 9rem;
        left: 1rem;
    }

    .orbit-4 {
        top: 1rem;
        left: 1rem;
    }
}

/* Force Remove Glow */
.hero-bg-shape {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    display: none !important;
    /* Just hide it completely if it's only for glow */
}

/* Refined Heading Styles (Applied to About, Skills, Education) */
.about-arrow-header {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    /* Reduced boldness */
    letter-spacing: 1px;
    word-spacing: 30px;
    /* Gap between "About" and "Me" */
    font-size: 2.5rem;
    /* Adjusted for balance */
}

/* Contact Form Section */
.form-container {
    width: 100%;
    max-width: 600px;
    margin: 3rem auto 0;
    text-align: left;
}

#contactForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
    width: 100%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    /* Much more visible */
    /* Whiter background */
    border: 2px solid rgba(0, 0, 0, 0.5);
    /* Softer black border */
    /* Bolder Black Border */
    padding: 1rem;
    color: var(--text-color);
    font-size: 1rem;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.25);
    /* Even whiter on focus */
    border-color: #000;
    /* Pitch black on focus */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.15);
}

.form-group label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--text-light);
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
    padding: 0 0.2rem;
}

/* Floating Label Logic */
.form-group input:focus~label,
.form-group input:not(:placeholder-shown)~label,
.form-group textarea:focus~label,
.form-group textarea:not(:placeholder-shown)~label {
    top: -0.7rem;
    left: 0.8rem;
    font-size: 0.85rem;
    color: var(--accent-color);
    background: var(--bg-color);
    border-radius: 4px;
}

/* Submit Button */
.submit-btn {
    align-self: flex-start;
    padding: 1rem 3rem;
    border-radius: 50px;
    border: none;
    background: var(--accent-color);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 123, 255, 0.4);
}

/* Mobile Icon Single Line Enforcement */
@media (max-width: 600px) {
    .contact-grid {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        /* FORCE SINGLE LINE */
        overflow-x: auto;
        /* Safety scroll */
        align-items: center;
        justify-content: space-evenly;
        /* Distribute */
        min-height: 60px;
        gap: 0 !important;
    }

    .contact-box {
        width: 45px !important;
        height: 45px !important;
        padding: 0;
        flex: 0 0 45px;
        margin: 0 2px;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .contact-box i {
        font-size: 1.8rem !important;
        /* Visible size */
        color: var(--text-color);
    }

    .form-container {
        padding: 0;
        margin-top: 2rem;
    }

    .submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Performance Optimizations */
#hero,
#about,
#skills,
#heatmaps,
#featured-projects,
#projects,
#contact {
    will-change: transform, opacity;
    /* Hint browser to promote layers */
}

.hero-text,
.hero-image-wrapper {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .orbit-icon {
        animation: none !important;
    }

    #preloader::before,
    #preloader::after,
    .loader-content::before,
    .loader-content::after,
    .loader-core::before,
    .loader-core-ring,
    .loader-orbit,
    .loader-diagnostics span,
    .loader-grid i,
    .loader-terminal p,
    .loader-progress span {
        animation: none !important;
    }

    .loader-progress span {
        width: 100%;
    }
}

/* Narrow phone fixes must stay last. */
@media (max-width: 768px) {
    .hero-name {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
        line-height: 1.12 !important;
    }

    .hero-role {
        font-size: clamp(0.62rem, 2.4vw, 0.76rem) !important;
        line-height: 1.75 !important;
    }

    .hero-img {
        height: min(58vw, 230px) !important;
        width: min(58vw, 230px) !important;
    }
}

@media (max-width: 420px) {
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .featured-projects-wrapper,
    .featured-projects-preview,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: 1.75rem !important;
        line-height: 1.12 !important;
    }

    .hero-role {
        font-size: 0.62rem !important;
        line-height: 1.75 !important;
    }

    .hero-img {
        height: 210px !important;
        width: 210px !important;
    }

    .hero-image-tagline {
        font-size: 0.78rem !important;
        max-width: 220px !important;
    }
}

/* Reimagined hero */
#hero {
    align-items: center;
    display: grid !important;
    gap: clamp(2rem, 5vw, 5rem) !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    margin: 0 auto;
    max-width: 1440px !important;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(7rem, 10vh, 9rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 7vh, 5rem) !important;
    position: relative;
    text-align: left;
}

#hero::before {
    background:
        radial-gradient(circle at 22% 28%, rgba(45, 212, 191, 0.18), transparent 24rem),
        radial-gradient(circle at 76% 42%, rgba(251, 191, 36, 0.12), transparent 20rem),
        linear-gradient(120deg, rgba(15, 23, 42, 0.36), transparent 60%);
    content: "" !important;
    inset: 0;
    opacity: 0.9;
    pointer-events: none;
    position: absolute;
    z-index: -2;
}

#hero::after {
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 68px 68px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(180deg, black, transparent 85%);
    opacity: 0.42;
    pointer-events: none;
    position: absolute;
    z-index: -3;
}

.hero-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 720px !important;
    padding: 0 !important;
}

.hero-text::before,
.hero-text::after {
    display: none !important;
}

.hero-greeting {
    align-items: center;
    color: #8debdc !important;
    display: inline-flex !important;
    font-size: clamp(0.78rem, 1.1vw, 0.94rem) !important;
    font-weight: 800 !important;
    gap: 0.65rem;
    letter-spacing: 0.12em;
    margin-bottom: 1.25rem !important;
    text-transform: uppercase;
}

.hero-greeting::before {
    background: linear-gradient(135deg, #22c55e, #38bdf8);
    border-radius: 999px;
    box-shadow: 0 0 28px rgba(45, 212, 191, 0.42);
    content: "" !important;
    height: 0.7rem;
    width: 0.7rem;
}

.hero-name {
    color: #f8fafc !important;
    font-size: clamp(4rem, 8.8vw, 7.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.9 !important;
    margin-bottom: 1.4rem !important;
    max-width: 780px;
    text-shadow: 0 24px 70px rgba(15, 23, 42, 0.65) !important;
}

.hero-name span {
    background: linear-gradient(90deg, #2dd4bf, #facc15 52%, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    display: block;
    font-weight: 900 !important;
}

.hero-typewriter {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(125, 211, 252, 0.22) !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #dbeafe !important;
    display: inline-flex !important;
    font-size: clamp(0.9rem, 1.2vw, 1.02rem) !important;
    margin: 0 0 1.4rem !important;
    max-width: 100%;
    min-height: 0 !important;
    padding: 0.85rem 1.15rem !important;
    width: auto !important;
}

.hero-typewriter .typewriter-prefix {
    color: #facc15 !important;
}

.hero-typewriter .typewriter-dynamic {
    color: #5eead4 !important;
}

.hero-role {
    color: #b9c7d8 !important;
    font-size: clamp(1rem, 1.65vw, 1.28rem) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    max-width: 620px;
}

.hero-role::before {
    content: none !important;
}

.hero-signal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
}

.hero-signal-grid span {
    align-items: center;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: #e2e8f0;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.65rem 0.95rem;
}

.hero-signal-grid i {
    color: #5eead4;
}

.hero-text .hero-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.9rem !important;
    justify-content: flex-start !important;
    margin: 2rem 0 0 !important;
}

.hero-text .hero-buttons .cta-button.subtle-btn {
    align-items: center;
    background: #f8fafc !important;
    border: 1px solid rgba(248, 250, 252, 0.72) !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.28) !important;
    color: #07111f !important;
    display: inline-flex !important;
    gap: 0.8rem;
    justify-content: center;
    min-height: 52px;
    padding: 0.95rem 1.35rem !important;
}

.hero-text .hero-buttons .cta-button.subtle-btn:nth-child(2) {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(94, 234, 212, 0.36) !important;
    color: #eafffb !important;
}

.hero-text .hero-buttons .cta-button.subtle-btn:hover,
.hero-text .hero-buttons .cta-button.subtle-btn:focus {
    box-shadow: 0 22px 60px rgba(45, 212, 191, 0.18) !important;
    transform: translateY(-2px) !important;
}

.hero-image-wrapper {
    align-items: center !important;
    aspect-ratio: 0.95 / 1;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(8, 15, 28, 0.72)) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    border-radius: 32px !important;
    box-shadow: 0 34px 90px rgba(2, 6, 23, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: 620px !important;
    min-height: 620px !important;
    overflow: hidden !important;
    padding: clamp(1.2rem, 3vw, 2.2rem) !important;
    position: relative;
    width: 100%;
}

.hero-image-wrapper::before {
    background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.22), transparent 42%),
        radial-gradient(circle at 72% 18%, rgba(250, 204, 21, 0.16), transparent 13rem),
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px) !important;
    background-size: auto, auto, 28px 28px, 28px 28px !important;
    content: "" !important;
    inset: 0;
    opacity: 1 !important;
    pointer-events: none;
    position: absolute;
}

.hero-bg-shape {
    background: conic-gradient(from 140deg, #2dd4bf, #38bdf8, #facc15, #fb7185, #2dd4bf) !important;
    border-radius: 34% 66% 45% 55% / 52% 34% 66% 48% !important;
    filter: blur(34px) !important;
    height: 64% !important;
    left: 50% !important;
    opacity: 0.28 !important;
    position: absolute;
    top: 43% !important;
    transform: translate(-50%, -50%) rotate(-8deg) !important;
    width: 78% !important;
    z-index: 0 !important;
}

.hero-portrait-shell {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(248, 250, 252, 0.14), rgba(255, 255, 255, 0.03)),
        rgba(2, 6, 23, 0.46);
    border: 1px solid rgba(248, 250, 252, 0.12);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: clamp(0.7rem, 1.8vw, 1rem);
    position: relative;
    transform: rotate(-2deg);
    width: min(78%, 420px);
    z-index: 2;
}

.hero-img {
    aspect-ratio: 4 / 5;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    height: auto !important;
    max-height: 470px;
    object-fit: cover;
    object-position: 50% 22%;
    transition: transform 0.35s ease !important;
    width: 100% !important;
}

.hero-portrait-shell:hover .hero-img {
    transform: scale(1.035) !important;
}

.hero-status-card {
    align-items: center;
    background: rgba(2, 6, 23, 0.78);
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 18px;
    bottom: 6.8rem;
    box-shadow: 0 20px 55px rgba(2, 6, 23, 0.38);
    color: #e2e8f0;
    display: flex;
    gap: 0.85rem;
    left: clamp(1rem, 4vw, 2rem);
    max-width: min(360px, calc(100% - 2rem));
    padding: 0.9rem 1rem;
    position: absolute;
    z-index: 4;
}

.status-dot {
    background: #34d399;
    border-radius: 999px;
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.12), 0 0 24px rgba(52, 211, 153, 0.48);
    flex: 0 0 auto;
    height: 0.65rem;
    width: 0.65rem;
}

.hero-status-card strong {
    color: #ffffff;
    display: block;
    font-size: 0.82rem;
    line-height: 1.2;
}

.hero-status-card p {
    color: #a9b8ca;
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0.16rem 0 0;
}

.hero-image-tagline {
    color: #d8e3ef !important;
    font-size: clamp(0.95rem, 1.35vw, 1.1rem) !important;
    font-style: normal !important;
    font-weight: 700;
    line-height: 1.45 !important;
    margin: 1.7rem auto 0 !important;
    max-width: 390px !important;
    position: relative;
    text-align: center;
    z-index: 3;
}

.hero-image-tagline::before,
.hero-image-tagline::after {
    content: none !important;
}

.orbit-icon {
    background: rgba(2, 6, 23, 0.66) !important;
    border: 1px solid rgba(94, 234, 212, 0.28) !important;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.32) !important;
    color: #5eead4 !important;
    height: 3.2rem !important;
    width: 3.2rem !important;
}

.orbit-icon:hover,
.orbit-icon:focus {
    background: #5eead4 !important;
    color: #07111f !important;
}

.orbit-1 {
    right: 1.5rem !important;
    top: 1.5rem !important;
}

.orbit-2 {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
}

.orbit-3 {
    bottom: 1.5rem !important;
    left: 1.5rem !important;
}

.orbit-4 {
    left: 1.5rem !important;
    top: 1.5rem !important;
}

@media (max-width: 1100px) {
    #hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 7rem !important;
    }

    .hero-text,
    .hero-image-wrapper {
        justify-self: center;
        max-width: min(100%, 760px) !important;
        width: 100% !important;
    }

    .hero-image-wrapper {
        aspect-ratio: auto;
        min-height: 580px !important;
    }
}

@media (max-width: 768px) {
    #hero {
        gap: 1.5rem !important;
        padding: 6.6rem 1rem 3rem !important;
    }

    .hero-name {
        font-size: clamp(3rem, 16vw, 5rem) !important;
    }

    .hero-role {
        font-size: 0.98rem !important;
    }

    .hero-typewriter {
        border-radius: 18px !important;
        display: flex !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .hero-signal-grid span {
        flex: 1 1 145px;
        justify-content: center;
    }

    .hero-text .hero-buttons .cta-button.subtle-btn {
        flex: 1 1 190px;
        width: auto !important;
    }

    .hero-image-wrapper {
        min-height: 510px !important;
        padding: 1rem !important;
    }

    .hero-portrait-shell {
        width: min(78%, 340px);
    }

    .hero-status-card {
        bottom: 5.7rem;
        left: 1rem;
        right: 1rem;
    }
}

@media (max-width: 420px) {
    #hero {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: clamp(2.7rem, 15vw, 3.6rem) !important;
        text-align: left !important;
    }

    .hero-name span {
        display: block;
    }

    .hero-typewriter {
        font-size: 0.82rem !important;
        padding: 0.78rem 0.85rem !important;
    }

    .hero-role {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    .hero-signal-grid {
        gap: 0.55rem;
    }

    .hero-signal-grid span {
        flex-basis: 100%;
    }

    .hero-text .hero-buttons {
        flex-direction: column;
    }

    .hero-text .hero-buttons .cta-button.subtle-btn {
        width: 100% !important;
    }

    .hero-image-wrapper {
        min-height: 470px !important;
    }

    .hero-portrait-shell {
        width: min(76%, 280px);
    }

    .hero-img {
        height: auto !important;
        width: 100% !important;
    }

    .hero-status-card {
        bottom: 5.1rem;
        padding: 0.75rem 0.8rem;
    }

    .hero-image-tagline {
        font-size: 0.82rem !important;
        max-width: 260px !important;
    }

    .orbit-icon {
        height: 2.75rem !important;
        width: 2.75rem !important;
    }
}

/* Final typewriter system */
.typewriter-line {
    display: none !important;
}

.hero-typewriter,
.terminal-typewriter-line {
    align-items: center;
    color: var(--muted-text, #a7b4c4);
    display: flex;
    font-family: "Courier New", monospace;
    gap: 0.55rem;
    max-width: 100%;
    overflow: hidden;
}

.hero-typewriter {
    background: linear-gradient(90deg, rgba(36, 244, 174, 0.1), rgba(36, 244, 174, 0.03));
    border: 1px solid rgba(36, 244, 174, 0.22);
    border-radius: 10px;
    box-shadow: inset 0 0 28px rgba(36, 244, 174, 0.05);
    font-size: clamp(0.95rem, 1.35vw, 1.18rem);
    font-weight: 800;
    line-height: 1.45;
    margin: 0.8rem 0 1.1rem;
    min-height: 3rem;
    padding: 0.72rem 0.95rem;
    text-align: left;
}

.typewriter-prefix,
.terminal-prompt {
    color: var(--dash-green, #24f4ae);
    flex: 0 0 auto;
    text-shadow: 0 0 16px rgba(36, 244, 174, 0.25);
}

.typewriter-dynamic {
    color: var(--text-color, #edf5ff);
    min-width: 0;
    overflow-wrap: anywhere;
}

.hero-typewriter .typewriter-dynamic {
    color: #f4f871;
    text-shadow: 0 0 18px rgba(244, 248, 113, 0.18);
}

.typewriter-caret {
    animation: typewriterCaretBlink 0.8s steps(1) infinite;
    background: var(--dash-green, #24f4ae);
    box-shadow: 0 0 16px rgba(36, 244, 174, 0.55);
    flex: 0 0 auto;
    height: 1.35em;
    width: 2px;
}

.terminal-typewriter-line {
    background: rgba(2, 14, 21, 0.78);
    border: 1px solid rgba(36, 244, 174, 0.18);
    border-radius: 8px;
    box-shadow: inset 0 0 24px rgba(36, 244, 174, 0.04);
    font-size: clamp(0.86rem, 1.05vw, 1rem);
    font-weight: 700;
    line-height: 1.55;
    margin: 0.25rem auto 1.4rem;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    width: min(100%, 920px);
}

.contact-typewriter {
    margin-bottom: 1.2rem;
    width: min(100%, 760px);
}

@keyframes typewriterCaretBlink {
    50% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .hero-typewriter,
    .terminal-typewriter-line {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
        justify-content: center;
        overflow: visible;
        text-align: center;
        white-space: normal;
    }

    .hero-typewriter {
        font-size: 0.88rem;
        margin-left: auto;
        margin-right: auto;
        min-height: 4.1rem;
        padding: 0.68rem 0.75rem;
        width: 100%;
    }

    .terminal-typewriter-line {
        font-size: 0.78rem;
        justify-content: flex-start;
        min-height: 5.2rem;
        padding: 0.72rem 0.78rem;
        text-align: left;
    }

    .terminal-prompt {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .hero-typewriter {
        font-size: 0.76rem !important;
        line-height: 1.55;
        min-height: 4.4rem;
    }

    .terminal-typewriter-line {
        font-size: 0.7rem !important;
        min-height: 5.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .typewriter-caret {
        animation: none !important;
    }
}

/* Permanent Layout Stabilization + Typewriter */
html {
    font-size: 16px;
}

body {
    min-width: 0;
}

body,
main,
section,
nav,
.hero-text,
.hero-image-wrapper,
.about-wrapper,
.contact-wrapper,
.projects-wrapper,
.project-card,
.skill-pill,
.education-item,
.metrics-modal-panel {
    box-sizing: border-box;
}

.navbar {
    gap: 1rem;
}

.nav-actions {
    flex: 1 1 auto;
    gap: clamp(0.75rem, 1.5vw, 1.75rem);
    min-width: 0;
}

.nav-links {
    gap: clamp(1rem, 2.1vw, 2.5rem);
    min-width: 0;
}

.nav-links a {
    font-size: clamp(0.95rem, 1.35vw, 1.25rem);
    white-space: nowrap;
}

.nav-status-cluster {
    flex: 0 1 auto;
    gap: clamp(0.65rem, 1vw, 1rem);
    min-width: 0;
}

.digital-clock {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.55rem 0.7rem;
}

.digital-clock strong {
    font-size: clamp(0.78rem, 1.05vw, 0.92rem);
    min-width: 5.05rem;
}

.digital-clock span {
    font-size: 0.66rem;
}

.live-metrics-button {
    flex: 0 0 auto;
    max-width: 11rem;
    min-height: 38px;
    white-space: nowrap;
}

.logo {
    flex: 0 0 auto;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}

#hero {
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 1500px;
    padding-left: clamp(1.25rem, 4vw, 4rem);
    padding-right: clamp(1.25rem, 4vw, 4rem);
}

.hero-text {
    flex: 1 1 0;
    max-width: 640px;
    min-width: 0;
}

.hero-image-wrapper {
    flex: 0 1 600px;
    max-width: 600px;
    min-width: 0;
}

.hero-name {
    font-size: clamp(3rem, 5.4vw, 4.6rem) !important;
    line-height: 1.05;
}

.hero-role {
    font-size: clamp(1rem, 1.55vw, 1.35rem);
}

.hero-text .hero-buttons {
    contain: layout paint;
}

.cta-button.subtle-btn,
.cta-button.subtle-btn:hover,
.cta-button.subtle-btn:focus {
    min-width: 0;
    padding: 1rem 2rem !important;
    transform: none !important;
    width: auto;
}

.cta-button.subtle-btn:hover,
.cta-button.subtle-btn:focus {
    background: rgba(32, 247, 180, 0.13);
    box-shadow: 0 0 0 1px rgba(32, 247, 180, 0.26), 0 16px 34px rgba(32, 247, 180, 0.12);
}

.cta-button.subtle-btn:hover i,
.cta-button.subtle-btn:focus i {
    transform: none !important;
}

.cta-button.subtle-btn::after {
    display: none;
}

.hero-image-wrapper,
.hero-image-wrapper::before {
    backface-visibility: hidden;
    transform: translateZ(0);
}

@media (max-width: 1280px) {
    .nav-links {
        gap: 1.2rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .live-metrics-button {
        max-width: 9.7rem;
        padding: 0.6rem 0.75rem;
    }

    .digital-clock {
        gap: 0.45rem;
    }
}

@media (max-width: 1100px) {
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    #hero {
        flex-direction: column;
    }

    .hero-text,
    .hero-image-wrapper {
        flex: none;
        max-width: min(100%, 760px);
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cta-button.subtle-btn,
    .cta-button.subtle-btn:hover,
    .cta-button.subtle-btn:focus {
        padding: 0.85rem 1rem !important;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .hero-name {
        font-size: 1.75rem !important;
    }
}

/* Narrow phone fixes must stay last. */
@media (max-width: 420px) {
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: 1.75rem !important;
        line-height: 1.12 !important;
    }

    .hero-role {
        font-size: 0.62rem !important;
        line-height: 1.75 !important;
    }

    .hero-img {
        height: 210px !important;
        width: 210px !important;
    }

    .hero-image-tagline {
        font-size: 0.78rem !important;
        max-width: 220px !important;
    }
}

@media (max-width: 420px) {
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: 1.75rem !important;
        line-height: 1.12 !important;
    }

    .hero-role {
        font-size: 0.62rem !important;
        line-height: 1.75 !important;
    }

    .hero-img {
        height: 210px !important;
        width: 210px !important;
    }

    .hero-image-tagline {
        font-size: 0.78rem !important;
        max-width: 220px !important;
    }
}

/* Code Terminal Theme */
:root {
    --bg-color: #05080d;
    --text-color: #e6edf3;
    --text-light: #96a6b8;
    --accent-color: #20f7b4;
    --accent-secondary: #7dd3fc;
    --card-bg: rgba(8, 13, 20, 0.9);
    --border-color: rgba(32, 247, 180, 0.22);
    --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 26px 70px rgba(32, 247, 180, 0.2);
    --timeline-line: rgba(32, 247, 180, 0.32);
    --terminal-panel: rgba(7, 12, 19, 0.84);
    --terminal-panel-solid: #080d14;
    --terminal-border: rgba(125, 211, 252, 0.2);
    --terminal-glow: 0 0 28px rgba(32, 247, 180, 0.14);
    --terminal-amber: #fbbf24;
}

*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, monospace !important;
}

html {
    background: var(--bg-color);
}

body {
    background:
        radial-gradient(circle at 18% 16%, rgba(32, 247, 180, 0.15), transparent 28rem),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.12), transparent 26rem),
        radial-gradient(circle at 50% 100%, rgba(251, 191, 36, 0.08), transparent 34rem),
        linear-gradient(180deg, #05080d 0%, #07111a 48%, #030509 100%);
    color: var(--text-color);
}

body::before {
    background-image:
        linear-gradient(rgba(32, 247, 180, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    opacity: 0.55;
    z-index: -3;
}

body::after {
    animation: terminalScan 8s linear infinite;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, transparent, rgba(32, 247, 180, 0.04), transparent);
    content: '';
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

@keyframes terminalScan {
    from {
        transform: translateY(-4px);
    }

    to {
        transform: translateY(4px);
    }
}

#scroll-progress {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary), var(--terminal-amber));
    box-shadow: 0 0 18px rgba(32, 247, 180, 0.65);
}

nav {
    background: rgba(5, 8, 13, 0.84);
    border-bottom: 1px solid rgba(32, 247, 180, 0.18);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.navbar::before {
    color: var(--accent-color);
    content: "nirmalya@portfolio:~";
    font-size: 0.72rem;
    font-weight: 700;
    left: 5%;
    letter-spacing: 0;
    opacity: 0.75;
    position: absolute;
    top: 0.38rem;
}

.logo {
    color: var(--text-color);
    text-shadow: 0 0 18px rgba(125, 211, 252, 0.4);
}

.logo span,
.nav-links a:hover,
.nav-links a.active,
.hero-name span,
.about-arrow-header strong,
.section-title span {
    color: var(--accent-color);
}

.nav-links a {
    color: var(--text-light);
    position: relative;
}

.nav-links a::before {
    color: var(--accent-color);
    content: "./";
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-links a:hover::before,
.nav-links a.active::before {
    opacity: 1;
}

.hamburger span {
    background-color: var(--accent-color);
}

.live-metrics-button,
.cta-button,
.submit-btn,
.outline-btn:hover {
    background: linear-gradient(135deg, rgba(32, 247, 180, 0.18), rgba(125, 211, 252, 0.16));
    border: 1px solid rgba(32, 247, 180, 0.4);
    box-shadow: var(--terminal-glow);
    color: var(--text-color);
}

.live-metrics-button:hover,
.live-metrics-button:focus,
.cta-button:hover,
.submit-btn:hover {
    box-shadow: 0 0 0 1px rgba(32, 247, 180, 0.34), 0 20px 45px rgba(32, 247, 180, 0.18);
}

section {
    overflow: visible;
}

section::before {
    color: rgba(32, 247, 180, 0.2);
    content: attr(id) " /";
    font-size: clamp(3rem, 10vw, 10rem);
    font-weight: 900;
    left: 4%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    top: 5.5rem;
    z-index: 0;
}

#hero {
    isolation: isolate;
}

.hero-text {
    background: linear-gradient(135deg, rgba(7, 12, 19, 0.82), rgba(8, 18, 25, 0.72));
    border: 1px solid var(--terminal-border);
    border-radius: 18px;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    max-width: 680px;
    padding: 2rem;
    position: relative;
}

.hero-text::before {
    color: var(--accent-color);
    content: "run ./intro.sh";
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 1rem;
    opacity: 0.86;
}

.hero-text::after,
.about-wrapper::before,
.contact-wrapper::before,
.projects-wrapper::before,
.heatmap-card::before,
.metrics-modal-panel::before {
    background: linear-gradient(90deg, #ff5f57 0 10px, transparent 10px 18px, #ffbd2e 18px 28px, transparent 28px 36px, #28c840 36px 46px, transparent 46px);
    content: '';
    height: 10px;
    left: 1rem;
    position: absolute;
    top: 0.8rem;
    width: 58px;
}

.hero-greeting {
    color: var(--accent-color);
    font-size: 1rem;
}

.hero-greeting::before {
    content: "$ ";
}

.hero-name {
    color: var(--text-color);
    font-size: clamp(3.1rem, 7vw, 5.5rem);
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 0 26px rgba(125, 211, 252, 0.16);
}

.hero-role {
    color: var(--text-light);
}

.hero-role::before {
    color: var(--terminal-amber);
    content: "> ";
    font-weight: 900;
}

.hero-text .hero-buttons {
    display: flex !important;
    gap: 1rem;
    justify-content: flex-start;
    margin: 2rem 0 0;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.hero-text .hero-buttons .cta-button {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.hero-image-wrapper {
    background:
        linear-gradient(135deg, rgba(32, 247, 180, 0.1), transparent 45%),
        rgba(7, 12, 19, 0.62);
    border: 1px solid rgba(32, 247, 180, 0.18);
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
    height: auto;
    min-height: 560px;
    overflow: visible;
    padding: 2rem;
}

.hero-image-wrapper::before {
    background:
        linear-gradient(rgba(125, 211, 252, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.1) 1px, transparent 1px);
    background-size: 18px 18px;
    content: '';
    inset: 0;
    opacity: 0.28;
    pointer-events: none;
    position: absolute;
}

.hero-img {
    border: 6px solid rgba(32, 247, 180, 0.28);
    box-shadow: 0 0 0 10px rgba(7, 12, 19, 0.88), 0 0 50px rgba(32, 247, 180, 0.2);
}

.hero-image-tagline {
    color: var(--text-light);
}

.hero-image-tagline::before,
.hero-image-tagline::after {
    color: var(--accent-color);
    content: "\"";
}

.orbit-icon,
.heatmap-link,
.analytics-icon,
.metrics-close,
.icon-circle {
    background: #05080d;
    border: 1px solid rgba(32, 247, 180, 0.28);
    color: var(--accent-color);
    box-shadow: 0 0 24px rgba(32, 247, 180, 0.12);
}

.orbit-icon:hover,
.heatmap-link:hover,
.analytics-icon:hover,
.metrics-close:hover {
    background: rgba(32, 247, 180, 0.14);
    color: #f8fafc;
}

.about-wrapper,
.contact-wrapper,
.projects-wrapper,
.heatmap-card,
.analytics-card,
.metrics-modal-panel,
.project-card,
.glossy-card,
.skill-pill,
.education-item,
.form-group input,
.form-group textarea {
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.88), rgba(8, 16, 24, 0.76));
    border: 1px solid var(--terminal-border);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    color: var(--text-color);
}

.about-wrapper,
.contact-wrapper,
.projects-wrapper,
.heatmap-card,
.metrics-modal-panel {
    border-radius: 18px;
    position: relative;
}

.about-wrapper,
.contact-wrapper {
    padding-top: 3.5rem;
}

.projects-wrapper {
    padding-top: 4rem;
}

.heatmap-card {
    padding-top: 3rem;
}

.metrics-modal {
    background: rgba(2, 6, 12, 0.52);
}

.metrics-modal-panel {
    max-width: 850px;
    padding-top: 3.2rem;
}

.metrics-modal-body::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: var(--accent-color);
}

.metrics-summary > div,
.visitor-graph-card,
.metrics-detail-grid span,
.country-panel,
.github-metrics-panel span,
.leetcode-meta-panel span,
.heatmap-stats span,
.heatmap-insights span,
.leetcode-ring-legend span,
.topic-pills span,
.recent-feed span,
.mini-viz-grid > div,
.platform-metrics span,
.analytics-grid span,
.linkedin-metrics span,
.pill-content span {
    background: rgba(6, 11, 18, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.16);
    color: var(--text-light);
}

.github-metrics-panel span,
.leetcode-meta-panel span {
    background: linear-gradient(135deg, rgba(8, 15, 23, 0.95), rgba(32, 247, 180, 0.055));
}

.leetcode-meta-panel span {
    background: linear-gradient(135deg, rgba(8, 15, 23, 0.95), rgba(251, 191, 36, 0.06));
    border-color: rgba(251, 191, 36, 0.18);
}

.github-metrics-panel strong,
.leetcode-meta-panel strong,
.metrics-summary strong,
.metrics-detail-grid strong,
.analytics-grid strong,
.linkedin-metrics strong,
.platform-metrics strong,
.heatmap-stats strong,
.heatmap-insights strong,
.country-list b,
.country-list em,
.ring-center strong {
    color: var(--text-color);
}

.heatmap-kicker,
.section-title::before,
.about-arrow-header::before,
.contact-wrapper h2::before,
.education-item::before,
.skill-pill::before {
    background: var(--accent-color);
    box-shadow: 0 0 18px rgba(32, 247, 180, 0.5);
}

.heatmap-kicker {
    background: transparent;
    box-shadow: none;
    color: var(--accent-color);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 0.55rem;
    text-shadow: 0 0 14px rgba(32, 247, 180, 0.36);
    text-transform: uppercase;
}

.github-heatmap-card .heatmap-kicker::before {
    content: none;
}

.leetcode-heatmap-card .heatmap-kicker::before {
    content: none;
}

.heatmap-card h3,
.section-title,
.about-arrow-header,
.contact-wrapper h2,
.project-card h3,
.education-item h3,
.pill-header h3 {
    color: var(--text-color);
}

.about-bio,
.edu-details,
.contact-intro,
.project-card p,
.ring-center span,
.ring-center small,
.country-panel-header span,
.metrics-summary span,
.metrics-detail-grid span,
.heatmap-focus,
.heatmap-months,
.heatmap-legend,
.leetcode-ring-legend span,
.heatmap-stats span,
.heatmap-insights span {
    color: var(--text-light);
}

.edu-degree,
.pill-header i,
.cta-button.subtle-btn i,
.outline-btn,
.heatmap-kicker,
.ring-center b {
    color: var(--accent-color);
}

.education-content::before,
.skills-grid-new::before {
    background: linear-gradient(180deg, transparent, var(--accent-color), transparent);
}

.skill-pill {
    border-radius: 14px;
}

.skill-pill:hover {
    background: rgba(10, 22, 31, 0.98);
    border-color: rgba(32, 247, 180, 0.55);
    box-shadow: 0 24px 50px rgba(32, 247, 180, 0.16), inset 0 0 0 1px rgba(32, 247, 180, 0.18);
}

.project-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.project-card::after {
    color: rgba(32, 247, 180, 0.18);
    content: "open --project";
    font-size: 0.8rem;
    font-weight: 800;
    position: absolute;
    right: 1.2rem;
    top: 1rem;
}

.card-github,
.card-linkedin,
.card-leetcode {
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.94), rgba(9, 20, 30, 0.84)) !important;
}

.projects-wrapper {
    overflow: visible;
    padding: 3.25rem;
}

.projects-horizontal-track {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    transform: none !important;
    width: 100%;
}

.project-card {
    border: 1px solid rgba(125, 211, 252, 0.2);
    min-height: 360px;
    padding: 2rem;
    width: 100%;
}

.project-card::after {
    font-size: 0.68rem;
    opacity: 0.7;
    right: 1rem;
}

.project-card h3 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.25;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.project-card p {
    font-size: 1rem;
    line-height: 1.55;
}

.icon-circle {
    height: 54px;
    margin-bottom: 1.5rem;
    width: 54px;
}

.view-project {
    font-size: 0.9rem;
}

.education-container {
    margin-top: 2.75rem;
}

.education-content {
    display: grid;
    gap: 1.4rem;
    margin-left: 0;
    padding-left: 2.35rem;
}

.education-content::before {
    left: 0.45rem;
    width: 1px;
}

.education-item {
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 14px;
    margin-bottom: 0;
    padding: 1.15rem 1.25rem;
}

.education-item::before {
    left: -1.9rem;
    top: 1.4rem;
}

.education-item h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.35;
    margin-bottom: 0.7rem;
}

.edu-degree {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 0.9rem;
}

.edu-details {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0.45rem;
}

.view-project {
    color: var(--accent-color);
}

.project-card:hover,
.contact-box:hover,
.heatmap-card:hover {
    box-shadow: var(--shadow-hover);
}

.contact-box i {
    color: var(--accent-color) !important;
    filter: drop-shadow(0 0 14px rgba(32, 247, 180, 0.22));
}

.contact-box span {
    color: var(--text-light);
}

.form-group input,
.form-group textarea {
    border-color: rgba(32, 247, 180, 0.26);
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(8, 16, 24, 0.98);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(32, 247, 180, 0.1);
}

.form-group label {
    color: var(--text-light);
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    background: var(--terminal-panel-solid);
    color: var(--accent-color);
}

.leetcode-progress-ring {
    background:
        radial-gradient(circle at center, #081018 0 58%, transparent 59%),
        conic-gradient(
            #22c55e 0 var(--easy-deg),
            #f59e0b var(--easy-deg) calc(var(--easy-deg) + var(--medium-deg)),
            #ef4444 calc(var(--easy-deg) + var(--medium-deg)) calc(var(--easy-deg) + var(--medium-deg) + var(--hard-deg)),
            rgba(125, 211, 252, 0.16) 0
        );
    border-color: rgba(251, 191, 36, 0.28);
    box-shadow:
        inset 0 0 0 10px rgba(5, 8, 13, 0.72),
        0 0 38px rgba(251, 191, 36, 0.16);
}

.leetcode-progress-ring::after {
    border-color: #05080d;
}

.heatmap-focus {
    background: rgba(6, 11, 18, 0.72);
    border-color: rgba(125, 211, 252, 0.16);
}

.heatmap-day {
    border-color: rgba(255, 255, 255, 0.05);
}

.heatmap-day:not(.heatmap-day-blank):hover,
.heatmap-day:not(.heatmap-day-blank):focus {
    box-shadow: 0 0 0 3px rgba(32, 247, 180, 0.26), 0 0 14px rgba(32, 247, 180, 0.28);
}

.metrics-detail-grid span {
    border-radius: 12px;
}

.visitor-live-graph {
    filter: drop-shadow(0 0 12px rgba(32, 247, 180, 0.16));
}

#visitor-graph-line {
    stroke: var(--accent-color);
}

#visitor-graph-area {
    fill: rgba(32, 247, 180, 0.12);
}

.country-list i {
    background: rgba(125, 211, 252, 0.11);
}

.country-list i::before {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
}

.back-to-top {
    background: rgba(5, 8, 13, 0.86);
    border: 1px solid rgba(32, 247, 180, 0.28);
    color: var(--accent-color);
}

::selection {
    background: rgba(32, 247, 180, 0.28);
    color: #f8fafc;
}

@media (max-width: 900px) {
    .navbar::before {
        display: none;
    }

    .nav-links {
        background: rgba(5, 8, 13, 0.98);
    }

    #hero {
        gap: 1.5rem;
        padding-top: 120px;
    }

    .hero-text {
        padding: 1.5rem;
    }

    .hero-image-wrapper {
        min-height: auto;
        padding: 1.35rem;
        width: 100%;
    }

    section::before {
        font-size: clamp(2.2rem, 16vw, 6rem);
        left: 5%;
        top: 5rem;
    }

    .about-wrapper,
    .contact-wrapper,
    .featured-projects-wrapper,
    .projects-wrapper {
        padding-top: 3.25rem;
    }
}

/* Keep GitHub and LeetCode heatmap cards unchanged from the terminal version. */
.activity-wrapper {
    max-width: 1200px;
}

.heatmap-card {
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.88), rgba(8, 16, 24, 0.76));
    border: 1px solid var(--terminal-border);
    border-radius: 18px;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    padding: 3rem 2rem 2rem;
}

.featured-projects-wrapper {
    display: grid;
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.featured-projects-heading {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.featured-projects-heading .section-kicker,
.featured-projects-heading .section-title {
    grid-column: 1;
}

.featured-projects-heading .section-title {
    margin-bottom: 0;
}

.featured-projects-more {
    align-items: center;
    background: rgba(5, 8, 13, 0.86);
    border: 1px solid rgba(32, 247, 180, 0.28);
    border-radius: 8px;
    color: var(--accent-color);
    display: inline-flex;
    font-weight: 800;
    gap: 0.55rem;
    justify-content: center;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.featured-projects-more:hover,
.featured-projects-more:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 30px rgba(37, 240, 173, 0.18);
    outline: none;
    transform: translateY(-3px);
}

.featured-projects-preview {
    background:
        linear-gradient(145deg, rgba(7, 12, 19, 0.9), rgba(8, 16, 24, 0.72)),
        repeating-linear-gradient(90deg, rgba(32, 247, 180, 0.045) 0 1px, transparent 1px 96px);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    min-height: 260px;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    position: relative;
}

.featured-projects-preview::after {
    background: linear-gradient(180deg, transparent 0%, rgba(5, 8, 13, 0.72) 58%, rgba(5, 8, 13, 0.96) 100%);
    content: "";
    inset: auto 0 0;
    height: 45%;
    pointer-events: none;
    position: absolute;
}

.featured-projects-empty {
    align-items: center;
    border: 1px dashed rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    color: var(--text-light);
    display: grid;
    gap: 0.55rem;
    min-height: 210px;
    place-items: center;
    position: relative;
    text-align: center;
    z-index: 1;
}

.featured-projects-empty i {
    color: var(--accent-color);
    font-size: 2rem;
}

.featured-projects-empty strong {
    color: var(--text-color);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.featured-projects-empty span {
    font-size: 0.95rem;
}

.featured-cms-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    position: relative;
    z-index: 1;
}

.featured-cms-grid.is-preview {
    max-height: 780px;
    overflow: hidden;
}

.featured-cms-card {
    background: linear-gradient(145deg, rgba(6, 11, 18, 0.94), rgba(9, 18, 28, 0.86));
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    min-height: 360px;
    overflow: hidden;
}

.featured-cms-card.is-blurred {
    filter: blur(3px);
    opacity: 0.45;
    pointer-events: none;
    transform: scale(0.985);
}

.featured-cms-thumb {
    aspect-ratio: 16 / 9;
    background: rgba(15, 23, 42, 0.9);
    overflow: hidden;
    position: relative;
}

.featured-cms-thumb img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.featured-cms-thumb span {
    align-items: center;
    background: rgba(5, 8, 13, 0.84);
    border: 1px solid rgba(32, 247, 180, 0.22);
    border-radius: 999px;
    bottom: 0.8rem;
    color: var(--accent-color);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    gap: 0.4rem;
    left: 0.8rem;
    padding: 0.45rem 0.65rem;
    position: absolute;
    text-transform: uppercase;
}

.featured-cms-body {
    display: grid;
    gap: 0.85rem;
    padding: 1.1rem;
}

.featured-cms-body h3 {
    color: var(--text-color);
    font-size: 1.22rem;
    line-height: 1.2;
    margin: 0;
}

.featured-cms-kicker {
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.featured-cms-body p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.featured-cms-tech,
.admin-preview-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-width: 100%;
    min-width: 0;
}

.featured-cms-tech span,
.admin-preview-tech span {
    background: rgba(32, 247, 180, 0.08);
    border: 1px solid rgba(32, 247, 180, 0.16);
    border-radius: 999px;
    color: rgba(224, 242, 254, 0.82);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.35rem 0.55rem;
    white-space: normal;
}

.featured-cms-highlights {
    color: rgba(224, 242, 254, 0.76);
    display: grid;
    font-size: 0.84rem;
    gap: 0.35rem;
    line-height: 1.45;
    list-style: none;
    margin: 0;
    padding: 0;
}

.featured-cms-highlights li {
    padding-left: 1rem;
    position: relative;
}

.featured-cms-highlights li::before {
    color: var(--accent-color);
    content: "";
    background: var(--accent-color);
    border-radius: 50%;
    height: 5px;
    left: 0;
    position: absolute;
    top: 0.58em;
    width: 5px;
}

.featured-cms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.featured-cms-actions a,
.featured-cms-delete,
.featured-preview-overlay {
    align-items: center;
    background: rgba(5, 8, 13, 0.86);
    border: 1px solid rgba(32, 247, 180, 0.25);
    border-radius: 8px;
    color: var(--accent-color);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 850;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.8rem;
    text-decoration: none;
}

.featured-cms-delete {
    border-color: rgba(248, 113, 113, 0.32);
    color: #fca5a5;
    cursor: pointer;
}

.featured-cms-delete:hover,
.featured-cms-delete:focus-visible {
    background: rgba(127, 29, 29, 0.42);
    outline: none;
}

.featured-cms-delete:disabled {
    cursor: wait;
    opacity: 0.68;
}

.featured-preview-overlay {
    bottom: 1.2rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 3;
}

.admin-project-shell {
    max-width: 920px;
}

.admin-project-form {
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.92), rgba(8, 16, 24, 0.78));
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 2rem);
}

body.admin-upload-page .admin-project-form,
body.admin-upload-page .admin-project-form *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: 'Poppins', sans-serif !important;
}

.admin-auth-panel {
    align-items: center;
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.92), rgba(8, 16, 24, 0.78));
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 1rem;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    position: relative;
    overflow: hidden;
}

.admin-auth-panel::before,
.admin-project-form::before {
    animation: adminPanelSweep 5s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgba(32, 247, 180, 0.12), transparent);
    content: "";
    height: 1px;
    left: -30%;
    position: absolute;
    top: 0;
    width: 30%;
}

.admin-auth-panel h2 {
    color: var(--text-color);
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0.25rem 0;
}

.admin-auth-panel p {
    color: var(--text-light);
    font-size: 0.92rem;
    margin: 0;
}

.admin-auth-panel p[data-state="success"],
.admin-project-status[data-state="success"] {
    color: var(--accent-color);
}

.admin-project-status[data-state="warning"] {
    color: #fbbf24;
}

.admin-auth-panel p[data-state="error"],
.admin-project-status[data-state="error"] {
    color: #f87171;
}

.admin-auth-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.admin-auth-actions button {
    cursor: pointer;
}

.admin-magic-link-form {
    align-items: center;
    display: flex;
    gap: 0.55rem;
}

.admin-magic-link-form input {
    background: rgba(5, 8, 13, 0.78);
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 8px;
    color: var(--text-color);
    min-height: 40px;
    outline: none;
    padding: 0 0.75rem;
    width: min(260px, 65vw);
}

.admin-form-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-field {
    display: grid;
    gap: 0.5rem;
}

.admin-field label,
.admin-checkbox {
    color: rgba(224, 242, 254, 0.88);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.admin-field input,
.admin-field textarea,
.admin-field select {
    background: rgba(3, 8, 14, 0.82);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0;
    min-height: 50px;
    outline: none;
    padding: 0.82rem 0.95rem;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus {
    background: rgba(5, 11, 18, 0.96);
    border-color: rgba(32, 247, 180, 0.44);
    box-shadow: 0 0 0 4px rgba(32, 247, 180, 0.08);
}

.admin-field textarea {
    line-height: 1.65;
    resize: vertical;
}

.admin-checkbox {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
}

.admin-file-input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.admin-file-drop {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(15, 118, 110, 0.16), rgba(5, 8, 13, 0.86)),
        rgba(5, 8, 13, 0.82);
    border: 1px solid rgba(32, 247, 180, 0.24);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto 1fr;
    min-height: 78px;
    padding: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-file-drop:hover,
.admin-file-input:focus-visible + .admin-file-drop {
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(32, 247, 180, 0.13);
    transform: translateY(-1px);
}

.admin-file-icon {
    align-items: center;
    background: rgba(32, 247, 180, 0.1);
    border: 1px solid rgba(32, 247, 180, 0.26);
    border-radius: 8px;
    color: var(--accent-color);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.admin-file-drop strong,
.admin-file-drop small {
    display: block;
}

.admin-file-drop strong {
    color: var(--text-color);
    font-size: 0.96rem;
    line-height: 1.25;
}

.admin-file-drop small {
    color: rgba(224, 242, 254, 0.62);
    font-size: 0.76rem;
    font-weight: 700;
    justify-self: start;
    line-height: 1.45;
    margin-top: 0.18rem;
    overflow-wrap: anywhere;
}

.admin-crop-shell {
    align-items: center;
    background:
        linear-gradient(rgba(125, 211, 252, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px),
        rgba(5, 8, 13, 0.66);
    background-size: 24px 24px;
    border: 1px dashed rgba(125, 211, 252, 0.24);
    border-radius: 8px;
    display: grid;
    min-height: 300px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.admin-crop-shell:not(.has-image)::before {
    color: var(--text-light);
    content: 'Crop preview appears here';
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.admin-crop-shell:not(.has-image)::after {
    color: rgba(224, 242, 254, 0.42);
    content: 'Upload an image to adjust framing before publishing.';
    font-size: 0.78rem;
    font-weight: 700;
    left: 50%;
    position: absolute;
    text-align: center;
    top: calc(50% + 1.7rem);
    transform: translateX(-50%);
    width: min(260px, calc(100% - 2rem));
}

.admin-crop-shell img {
    display: block;
    max-height: 460px;
    max-width: 100%;
}

.admin-crop-shell img:not([src]) {
    display: none;
}

.admin-crop-tools {
    display: grid;
    gap: 0.75rem;
}

.admin-crop-aspects,
.admin-crop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-crop-aspects button,
.admin-crop-actions button {
    align-items: center;
    background: rgba(5, 8, 13, 0.84);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 8px;
    color: rgba(224, 242, 254, 0.8);
    cursor: pointer;
    display: inline-flex;
    font-weight: 850;
    justify-content: center;
    min-height: 38px;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-crop-aspects button {
    flex: 1 1 72px;
    padding: 0 0.8rem;
}

.admin-crop-actions button {
    flex: 1 1 42px;
    min-width: 42px;
    padding: 0;
}

.admin-crop-aspects button:hover,
.admin-crop-actions button:hover,
.admin-crop-aspects button:focus-visible,
.admin-crop-actions button:focus-visible,
.admin-crop-aspects button.is-active {
    border-color: rgba(32, 247, 180, 0.48);
    box-shadow: 0 0 22px rgba(32, 247, 180, 0.1);
    color: var(--accent-color);
    outline: none;
    transform: translateY(-1px);
}

.admin-crop-aspects button:disabled,
.admin-crop-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.admin-crop-mode {
    background: rgba(5, 8, 13, 0.62);
    border: 1px solid rgba(32, 247, 180, 0.18);
    border-radius: 8px;
    color: rgba(224, 242, 254, 0.78);
    display: grid;
    gap: 0.2rem;
    padding: 0.72rem 0.8rem;
}

.admin-crop-mode span {
    align-items: center;
    color: var(--accent-color);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 900;
    gap: 0.5rem;
}

.admin-crop-mode small {
    color: rgba(224, 242, 254, 0.54);
    font-size: 0.72rem;
    font-weight: 700;
    justify-self: start;
    line-height: 1.45;
}

.admin-crop-zoom {
    align-items: center;
    background: rgba(5, 8, 13, 0.62);
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 44px;
    padding: 0.55rem 0.7rem;
}

.admin-crop-zoom span {
    color: rgba(224, 242, 254, 0.76);
    font-size: 0.76rem;
    font-weight: 850;
}

.admin-crop-zoom input {
    accent-color: var(--accent-color);
    width: 100%;
}

.admin-project-status {
    color: var(--text-light);
    font-size: 0.92rem;
    margin: 0;
    min-height: 1.5rem;
}

.admin-save-next {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    display: grid;
    inset: 0;
    padding: 1rem;
    position: fixed;
    z-index: 10020;
}

.admin-save-next[hidden] {
    display: none;
}

.admin-save-next-panel {
    background:
        linear-gradient(180deg, rgba(32, 247, 180, 0.06), transparent 34%),
        rgba(4, 10, 17, 0.94);
    border: 1px solid rgba(32, 247, 180, 0.24);
    border-radius: 8px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
    display: grid;
    gap: 0.95rem;
    justify-self: center;
    max-width: 480px;
    padding: clamp(1rem, 3vw, 1.35rem);
    width: min(100%, 480px);
}

.admin-save-next-panel h2 {
    color: var(--text-color);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.15;
    margin: 0.25rem 0 0.4rem;
}

.admin-save-next-panel p {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

.admin-save-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.admin-submit {
    border: 0;
    cursor: pointer;
    width: fit-content;
}

.admin-verify-shell {
    display: grid;
    gap: 1rem;
}

.admin-verify-hero {
    min-height: auto;
    overflow: visible;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
}

.admin-verify-orb {
    animation: adminOrbFloat 7s ease-in-out infinite;
    background:
        radial-gradient(circle, rgba(32, 247, 180, 0.34), transparent 58%),
        radial-gradient(circle, rgba(24, 201, 255, 0.22), transparent 66%);
    filter: blur(2px);
    height: 230px;
    left: -70px;
    opacity: 0.75;
    position: absolute;
    top: 25px;
    width: 230px;
    z-index: -1;
}

.admin-verify-hero h1 {
    animation: adminTitleIn 0.75s ease both;
    color: var(--text-color);
    font-size: clamp(2.6rem, 7vw, 6.4rem);
    line-height: 0.98;
    margin: 0.8rem 0 1rem;
}

.admin-verify-hero p,
.admin-upload-hero p {
    color: var(--text-light);
    max-width: 720px;
}

.admin-auth-panel-hero,
.admin-verification-form,
.admin-upload-form {
    animation: adminCardIn 0.7s ease both;
}

.admin-verification-form {
    animation-delay: 0.12s;
    position: relative;
    overflow: hidden;
}

.admin-step-card h2 {
    color: var(--text-color);
    font-size: 1.4rem;
    margin: 0.25rem 0;
}

.admin-step-card p {
    color: var(--text-light);
    margin: 0;
}

.admin-step-rail {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.admin-step-rail span {
    background: rgba(125, 211, 252, 0.14);
    border-radius: 999px;
    height: 5px;
    overflow: hidden;
    position: relative;
    width: 72px;
}

.admin-step-rail span::before {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
}

.admin-step-rail span.is-active::before {
    animation: adminStepFill 1.6s ease infinite;
}

.admin-upload-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 1.6rem);
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1fr);
}

.admin-upload-console {
    display: grid;
    gap: clamp(1rem, 3vw, 1.4rem);
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
}

.admin-publish-panel {
    background:
        linear-gradient(180deg, rgba(125, 211, 252, 0.035), transparent 26%),
        rgba(4, 10, 17, 0.7);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 1.1rem;
    min-width: 0;
    padding: clamp(1rem, 2.4vw, 1.3rem);
}

.admin-publish-main {
    align-content: start;
}

.admin-panel-header {
    align-items: center;
    border-bottom: 1px solid rgba(125, 211, 252, 0.12);
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto 1fr;
    padding-bottom: 1rem;
}

.admin-panel-header strong {
    color: var(--text-color);
    display: block;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    letter-spacing: 0;
    line-height: 1.15;
}

.admin-panel-header p {
    color: rgba(224, 242, 254, 0.62);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0.35rem 0 0;
    max-width: 620px;
}

.admin-panel-icon {
    align-items: center;
    background: rgba(32, 247, 180, 0.09);
    border: 1px solid rgba(32, 247, 180, 0.23);
    border-radius: 8px;
    color: var(--accent-color);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.admin-brief-header .section-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    margin-bottom: 0.25rem;
}

.admin-brief-header .section-kicker::before {
    height: 0.45rem;
    width: 0.45rem;
}

.admin-field-media {
    align-self: start;
    position: sticky;
    top: 120px;
}

.admin-upload-fields {
    display: grid;
    gap: 1rem;
}

.admin-upload-form {
    position: relative;
    overflow: visible;
}

.admin-upload-form small {
    color: rgba(224, 242, 254, 0.52);
    font-size: 0.7rem;
    font-weight: 700;
    justify-self: end;
}

.admin-upload-form input::placeholder,
.admin-upload-form textarea::placeholder {
    color: rgba(224, 242, 254, 0.34);
    font-weight: 600;
    opacity: 1;
}

body.admin-upload-page .admin-publish-main .admin-form-grid:first-of-type {
    background: rgba(125, 211, 252, 0.035);
    border: 1px solid rgba(125, 211, 252, 0.09);
    border-radius: 8px;
    padding: 0.9rem;
}

body.admin-upload-page .admin-publish-main .admin-form-grid:first-of-type .admin-field input {
    min-height: 54px;
}

.admin-live-preview {
    display: grid;
    gap: 0.8rem;
}

.admin-preview-card {
    background: linear-gradient(145deg, rgba(6, 11, 18, 0.98), rgba(9, 18, 28, 0.86));
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 8px;
    overflow: hidden;
}

.admin-preview-thumb {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: rgba(5, 8, 13, 0.8);
    color: rgba(224, 242, 254, 0.48);
    display: grid;
    font-size: 2rem;
    justify-items: center;
    overflow: hidden;
}

.admin-preview-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

body.admin-upload-page .admin-preview-thumb img {
    object-fit: contain;
}

.admin-preview-body {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
}

.admin-preview-body > span {
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-preview-body h2 {
    color: var(--text-color);
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-preview-body p {
    color: rgba(224, 242, 254, 0.72);
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.admin-publish-toggles,
.admin-submit-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.admin-reset {
    border: 0;
    cursor: pointer;
}

body.admin-upload-page .admin-project-shell {
    max-width: 1180px;
}

body.admin-upload-page .admin-upload-hero h1 {
    max-width: 760px;
}

body.admin-verify-page .featured-nav,
body.admin-upload-page .featured-nav {
    animation: adminNavDrop 0.58s ease both;
}

body.admin-verify-page .admin-project-shell {
    max-width: 960px;
}

body.admin-verify-page [hidden] {
    display: none !important;
}

body.admin-verify-page .admin-verify-shell {
    gap: 1rem;
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

body.admin-verify-page .admin-gate-hero {
    padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(1.1rem, 3vw, 1.8rem);
}

body.admin-verify-page .admin-gate-hero h1 {
    font-size: clamp(2.25rem, 5.8vw, 4.8rem);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0.65rem 0 0.9rem;
    max-width: 760px;
}

body.admin-verify-page .admin-gate-hero p {
    color: rgba(224, 242, 254, 0.72);
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    line-height: 1.75;
    max-width: 680px;
}

body.admin-verify-page .admin-gate-card {
    align-items: start;
    animation: adminCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: rgba(4, 10, 17, 0.82);
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.4rem);
    grid-template-columns: 250px minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    padding: clamp(1.1rem, 2.8vw, 1.6rem);
    position: relative;
}

body.admin-verify-page .admin-gate-card::after {
    background: linear-gradient(90deg, var(--accent-color), rgba(24, 201, 255, 0.35), transparent);
    content: "";
    height: 1px;
    left: 0;
    opacity: 0.55;
    position: absolute;
    right: 0;
    top: 0;
}

body.admin-verify-page .admin-auth-panel::before,
body.admin-verify-page .admin-project-form::before,
body.admin-verify-page .admin-verify-orb,
body.admin-verify-page .admin-step-rail {
    display: none;
}

.admin-gate-card-heading {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
}

.admin-step-badge {
    align-items: center;
    background: rgba(32, 247, 180, 0.1);
    border: 1px solid rgba(32, 247, 180, 0.28);
    border-radius: 8px;
    color: var(--accent-color);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

body.admin-verify-page .admin-gate-card-heading h2 {
    color: var(--text-color);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.2;
    margin: 0.25rem 0 0;
}

.admin-gate-card-body {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

body.admin-verify-page .admin-auth-panel p,
body.admin-verify-page .admin-step-card p {
    color: rgba(224, 242, 254, 0.7);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0;
}

body.admin-verify-page .admin-auth-actions {
    align-items: stretch;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
    justify-content: start;
}

body.admin-verify-page .admin-magic-link-form {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(180px, 1fr) auto;
    width: 100%;
}

body.admin-verify-page .admin-magic-link-form input,
body.admin-verify-page .admin-field input {
    min-height: 46px;
    width: 100%;
}

body.admin-verify-page .featured-action {
    border-radius: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 0 1rem;
    white-space: nowrap;
}

body.admin-verify-page .admin-verification-form {
    animation-delay: 0.08s;
}

body.admin-verify-page .admin-submit {
    min-width: 190px;
}

body.admin-verify-page .admin-password-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

@media (max-width: 820px) {
    body.admin-verify-page .admin-gate-card {
        grid-template-columns: 1fr;
    }

    body.admin-verify-page .admin-auth-actions,
    body.admin-verify-page .admin-magic-link-form {
        grid-template-columns: 1fr;
    }

    body.admin-verify-page .featured-action,
    body.admin-verify-page .admin-submit {
        width: 100%;
    }

    body.admin-verify-page .admin-password-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@keyframes adminPanelSweep {
    0% {
        left: -30%;
        opacity: 0;
    }
    30%, 65% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes adminOrbFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(32px, -18px, 0) scale(1.08);
    }
}

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

@keyframes adminCardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes adminStepFill {
    0% {
        transform: translateX(-100%);
    }
    55%, 100% {
        transform: translateX(0);
    }
}

@keyframes adminNavDrop {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.heatmap-card::before {
    top: 0.8rem;
}

.heatmap-link {
    background: #05080d;
    border: 1px solid rgba(32, 247, 180, 0.28);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(32, 247, 180, 0.12);
    color: var(--accent-color);
}

.heatmap-stats span,
.heatmap-insights span,
.github-metrics-panel span,
.leetcode-meta-panel span,
.leetcode-ring-legend span,
.heatmap-focus {
    background: rgba(6, 11, 18, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.16);
    color: var(--text-light);
}

.github-metrics-panel span {
    background: linear-gradient(135deg, rgba(8, 15, 23, 0.95), rgba(32, 247, 180, 0.055));
}

.leetcode-meta-panel span {
    background: linear-gradient(135deg, rgba(8, 15, 23, 0.95), rgba(251, 191, 36, 0.06));
    border-color: rgba(251, 191, 36, 0.18);
}

.contribution-heatmap {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0 0.85rem;
}

@media (max-width: 600px) {
    nav {
        padding: 1rem 5%;
    }

    #hero {
        max-width: 100%;
        overflow: hidden;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    }

    .live-metrics-button span {
        display: inline;
        font-size: 0.74rem;
    }

    .hero-text {
        flex: 0 0 auto;
        max-width: calc(100vw - 2rem);
        min-width: 0;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        width: calc(100vw - 2rem);
    }

    .hero-text::before {
        font-size: 0.68rem;
    }

    .hero-name {
        font-size: clamp(2.35rem, 13vw, 3rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .hero-name span {
        display: block;
    }

    .hero-role {
        font-size: 0.82rem;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .hero-image-wrapper {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
    }

    .hero-image-wrapper::before {
        background-size: 14px 14px;
    }

    .hero-img {
        height: 230px;
        width: 230px;
    }

    .hero-buttons {
        margin-left: 0;
        justify-content: center;
    }

    .hero-text .hero-buttons {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .cta-button.subtle-btn {
        border-radius: 12px;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: 0.85rem 1rem;
        white-space: normal;
        width: 100%;
    }

    .heatmap-card {
        border-radius: 14px;
        padding: 2.8rem 1rem 1rem;
    }

    .leetcode-progress-ring {
        width: 128px;
    }

    .metrics-modal-panel {
        border-radius: 16px;
        padding: 3rem 1rem 1rem;
    }

    .contact-box i {
        color: var(--accent-color) !important;
    }
}

/* Full Terminal Dashboard Reframe */
:root {
    --dash-bg: #03080c;
    --dash-panel: rgba(5, 13, 18, 0.88);
    --dash-panel-2: rgba(7, 18, 24, 0.76);
    --dash-line: rgba(42, 238, 175, 0.2);
    --dash-line-strong: rgba(42, 238, 175, 0.42);
    --dash-cyan: #18c9ff;
    --dash-green: #25f0ad;
    --dash-muted: #708091;
}

body {
    background:
        linear-gradient(rgba(24, 201, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 240, 173, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 20% 20%, rgba(37, 240, 173, 0.12), transparent 24rem),
        radial-gradient(circle at 82% 12%, rgba(24, 201, 255, 0.1), transparent 26rem),
        linear-gradient(180deg, #03080c 0%, #061018 50%, #03070b 100%);
    background-size: 38px 38px, 38px 38px, auto, auto, auto;
}

body::after {
    opacity: 0.14;
}

.terminal-rail {
    align-items: center;
    background: linear-gradient(180deg, rgba(5, 13, 18, 0.95), rgba(5, 13, 18, 0.74));
    border-right: 1px solid var(--dash-line);
    box-shadow: 18px 0 42px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    inset: 0 auto 0 0;
    padding: 1.25rem 0.8rem;
    position: fixed;
    width: 78px;
    z-index: 999;
}

.rail-lights {
    border-bottom: 1px solid rgba(125, 211, 252, 0.13);
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding-bottom: 1rem;
    width: 100%;
}

.rail-lights span {
    background: var(--dash-green);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(37, 240, 173, 0.7);
    height: 0.7rem;
    opacity: 0.9;
    width: 0.7rem;
}

.rail-lights span:nth-child(2) {
    background: #56e8c7;
}

.rail-lights span:nth-child(3) {
    background: rgba(86, 232, 199, 0.55);
}

.terminal-rail a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-light);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    width: 44px;
}

.terminal-rail a:hover,
.terminal-rail a:focus {
    background: rgba(37, 240, 173, 0.11);
    border-color: var(--dash-line-strong);
    box-shadow: inset 3px 0 0 var(--dash-green), 0 0 22px rgba(37, 240, 173, 0.16);
    color: var(--dash-green);
    outline: none;
}

.rail-status {
    color: var(--dash-green);
    display: grid;
    font-size: 0.58rem;
    font-weight: 800;
    gap: 0.35rem;
    margin-top: auto;
    text-align: center;
}

.rail-status span {
    background: var(--dash-green);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(37, 240, 173, 0.64);
    display: block;
    height: 0.45rem;
    width: 2.25rem;
}

nav {
    left: 78px;
    padding: 1rem 5%;
    width: calc(100% - 78px);
}

.digital-clock {
    background: rgba(5, 13, 18, 0.9);
    border-color: var(--dash-line-strong);
}

.navbar::before {
    left: 2.4rem;
    top: 0.25rem;
}

main,
footer {
    margin-left: 78px;
}

section {
    min-height: auto;
    padding: 96px clamp(1.25rem, 5vw, 5rem);
}

#hero {
    gap: 1.5rem;
    min-height: 100vh;
}

section::before {
    opacity: 0.42;
}

.hero-text,
.hero-image-wrapper,
.about-wrapper,
.contact-wrapper,
.projects-wrapper,
.heatmap-card,
.metrics-modal-panel,
.project-card,
.skill-pill,
.education-item,
.glossy-card,
.metrics-summary > div,
.visitor-graph-card,
.metrics-detail-grid span,
.country-panel,
.github-metrics-panel span,
.leetcode-meta-panel span,
.heatmap-stats span,
.heatmap-insights span,
.leetcode-ring-legend span,
.heatmap-focus,
.form-group input,
.form-group textarea {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 44%),
        linear-gradient(145deg, var(--dash-panel), var(--dash-panel-2));
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.025),
        0 20px 55px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hero-text::after,
.about-wrapper::before,
.contact-wrapper::before,
.projects-wrapper::before,
.heatmap-card::before,
.metrics-modal-panel::before {
    top: 1rem;
}

.hero-text {
    max-width: 560px;
    padding: 2rem 2.1rem;
}

.hero-image-wrapper {
    min-height: 520px;
    padding: 1.7rem;
}

.hero-img {
    height: min(360px, 45vw);
    width: min(360px, 45vw);
}

.hero-name {
    font-size: clamp(3rem, 5.6vw, 4.8rem);
}

.hero-role,
.about-bio,
.edu-details,
.contact-intro,
.project-card p,
.pill-content span {
    color: #9aa8b8;
}

.hero-buttons {
    gap: 0.9rem;
}

.cta-button.subtle-btn,
.live-metrics-button,
.submit-btn,
.outline-btn {
    background: linear-gradient(90deg, rgba(37, 240, 173, 0.12), rgba(24, 201, 255, 0.08));
    border: 1px solid var(--dash-line-strong);
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(37, 240, 173, 0.08);
}

.about-wrapper,
.contact-wrapper,
.projects-wrapper {
    max-width: 1280px;
    padding: 3rem;
}

.section-title,
.about-arrow-header,
.contact-wrapper h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0;
    word-spacing: 0;
}

.section-title::before,
.about-arrow-header::before,
.contact-wrapper h2::before {
    box-shadow: 0 0 18px rgba(37, 240, 173, 0.75);
}

.about-content-row {
    gap: 2rem;
}

.education-item,
.skill-pill,
.glossy-card,
.project-card {
    position: relative;
}

.education-item::after,
.skill-pill::after,
.project-card::after,
.glossy-card::after {
    color: rgba(37, 240, 173, 0.42);
    content: ">_";
    font-size: 0.8rem;
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 0.8rem;
}

.skill-pill {
    min-height: 70px;
    padding: 1.1rem 1.4rem;
}

.skill-pill:hover {
    border-color: var(--dash-line-strong);
    min-height: 210px;
}

.relocated-stats .glossy-card {
    max-width: none;
    min-height: 110px;
}

.activity-wrapper {
    max-width: 1280px;
}

.heatmap-card {
    border-radius: 8px;
    padding: 2.8rem 1.7rem 1.55rem;
}

.heatmap-link,
.analytics-icon,
.icon-circle,
.orbit-icon,
.contact-box {
    background: rgba(4, 10, 15, 0.9);
    border: 1px solid var(--dash-line-strong);
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(37, 240, 173, 0.11);
}

.orbit-icon,
.heatmap-link,
.analytics-icon {
    border-radius: 50%;
}

.github-metrics-panel,
.leetcode-meta-panel {
    gap: 0.65rem;
}

.contribution-heatmap {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 6px;
    padding: 0.7rem 0.7rem 1rem;
}

.heatmap-day,
.heatmap-legend i {
    border-radius: 2px;
}

.projects-wrapper {
    padding: 2.5rem;
}

.projects-horizontal-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
    min-height: 300px;
    padding: 1.5rem;
}

.project-card::after {
    content: "open";
}

.project-card h3 {
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
}

.project-card p {
    font-size: 0.94rem;
}

.view-project {
    color: var(--dash-green);
}

.contact-grid {
    gap: 1rem;
}

.contact-box {
    min-height: 74px;
    min-width: 74px;
}

.contact-box i {
    font-size: 2.4rem !important;
}

.form-container {
    max-width: 760px;
}

.metrics-modal-panel {
    border-radius: 10px;
}

footer {
    background: rgba(3, 8, 12, 0.92);
    border-top: 1px solid var(--dash-line);
}

.back-to-top {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(5, 13, 18, 0.92);
    border: 1px solid var(--dash-line-strong);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(37, 240, 173, 0.12);
    color: var(--dash-green);
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    width: 48px;
}

.back-to-top i {
    display: block;
    line-height: 1;
}

.back-to-top:hover,
.back-to-top:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 30px rgba(37, 240, 173, 0.22);
    outline: none;
    transform: translateY(-4px);
}

@media (max-width: 1100px) {
    .projects-horizontal-track,
    .activity-wrapper {
        grid-template-columns: 1fr;
    }

    .featured-projects-heading {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .featured-projects-more {
        justify-self: start;
    }

    .featured-cms-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-auth-panel {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .admin-auth-actions {
        justify-content: flex-start;
    }

    .admin-magic-link-form {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .admin-magic-link-form input {
        width: 100%;
    }

    .admin-upload-grid {
        grid-template-columns: 1fr;
    }

    .admin-upload-console {
        grid-template-columns: 1fr;
    }

    .admin-field-media {
        position: static;
    }
}

@media (max-width: 900px) {
    .terminal-rail {
        display: none;
    }

    nav,
    main,
    footer {
        left: 0;
        margin-left: 0;
        width: 100%;
    }

    section {
        padding: 86px 5%;
    }

    .about-wrapper,
    .contact-wrapper,
    .featured-projects-wrapper,
    .projects-wrapper {
        padding: 2rem 1.2rem;
    }

    .hero-img {
        height: 260px;
        width: 260px;
    }

    .nav-status-cluster {
        gap: 0.8rem;
    }

    .digital-clock {
        padding: 0.55rem 0.65rem;
    }

    .digital-clock span {
        font-size: 0.62rem;
    }

    .digital-clock strong {
        font-size: 0.82rem;
        min-width: 4.95rem;
    }
}

@media (max-width: 600px) {
    .digital-clock {
        display: none;
    }
}

/* Mobile Optimization Pass */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 1rem;
    }

    nav {
        min-height: 78px;
        padding: 0.9rem 1rem;
    }

    .nav-actions {
        gap: 0.75rem;
        min-width: 0;
    }

    .live-metrics-button {
        min-height: 42px;
        padding: 0.65rem 0.8rem;
    }

    .logo {
        font-size: 1.45rem;
    }

    main,
    footer {
        max-width: 100%;
        overflow: hidden;
    }

    section {
        min-height: auto;
        overflow: hidden;
        padding: 84px 1rem;
        width: 100%;
    }

    section::before {
        font-size: clamp(3rem, 21vw, 5.25rem);
        left: 1rem;
        top: 5.6rem;
    }

    #hero {
        gap: 1.5rem;
        padding-top: 112px;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card,
    .metrics-modal-panel {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .hero-text {
        padding: 1.45rem 1rem 1.6rem;
    }

    .hero-name {
        font-size: clamp(2.45rem, 12vw, 3.25rem);
        line-height: 1.08;
        text-align: center;
    }

    .hero-role {
        font-size: 0.8rem;
        line-height: 1.75;
        text-align: center;
    }

    .hero-text .hero-buttons {
        display: grid !important;
        gap: 0.8rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cta-button.subtle-btn {
        border-radius: 8px;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
        padding: 0.85rem 1rem;
        width: 100%;
    }

    .hero-image-wrapper {
        min-height: auto;
        padding: 1.2rem;
    }

    .hero-img {
        height: min(68vw, 260px);
        width: min(68vw, 260px);
    }

    .hero-image-tagline {
        font-size: 0.95rem;
        line-height: 1.65;
        max-width: 100%;
    }

    .orbit-icon {
        height: 2.75rem;
        width: 2.75rem;
    }

    .orbit-1 {
        right: 0.65rem;
        top: 0.65rem;
    }

    .orbit-2 {
        bottom: 6.25rem;
        right: 0.65rem;
    }

    .orbit-3 {
        bottom: 6.25rem;
        left: 0.65rem;
    }

    .orbit-4 {
        left: 0.65rem;
        top: 0.65rem;
    }

    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper {
        padding: 2.5rem 1rem 1.35rem;
    }

    .section-title,
    .about-arrow-header,
    .contact-wrapper h2 {
        font-size: clamp(1.8rem, 9vw, 2.45rem);
        line-height: 1.15;
        margin-bottom: 1.5rem;
        text-align: left;
    }

    .about-bio,
    .contact-intro,
    .edu-details,
    .edu-degree {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .education-container {
        margin-top: 2rem;
    }

    .education-content,
    .skills-grid-new {
        margin-left: 0;
        padding-left: 1.25rem;
    }

    .education-item,
    .skill-pill {
        padding: 1rem;
    }

    .education-item::before,
    .skill-pill::before {
        left: -1.25rem;
    }

    .relocated-stats {
        gap: 0.75rem;
    }

    .glossy-grid.relocated-stats,
    .projects-horizontal-track,
    .activity-wrapper,
    .metrics-detail-grid,
    .metrics-summary,
    .github-metrics-panel,
    .leetcode-meta-panel {
        grid-template-columns: 1fr;
    }

    .glossy-grid.relocated-stats {
        display: grid;
    }

    .heatmap-card {
        padding: 2.65rem 1rem 1rem;
    }

    .heatmap-header {
        align-items: center;
        gap: 0.75rem;
    }

    .heatmap-card h3 {
        font-size: 1.05rem;
    }

    .heatmap-link {
        flex-basis: 42px;
        height: 42px;
        width: 42px;
    }

    .heatmap-stats,
    .heatmap-insights {
        gap: 0.5rem;
    }

    .heatmap-stats span,
    .heatmap-insights span,
    .leetcode-ring-legend span {
        font-size: 0.78rem;
        padding: 0.45rem 0.6rem;
    }

    .github-metrics-panel span,
    .leetcode-meta-panel span {
        min-height: auto;
        padding: 0.75rem;
    }

    .leetcode-overview {
        grid-template-areas:
            "ring"
            "legend"
            "meta";
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .leetcode-ring-legend,
    .leetcode-meta-panel {
        width: 100%;
    }

    .leetcode-progress-ring {
        width: min(42vw, 138px);
    }

    .heatmap-months,
    .contribution-heatmap {
        max-width: 100%;
        overflow-x: auto;
    }

    .project-card {
        min-height: 260px;
        padding: 1.25rem;
    }

    .project-card h3 {
        font-size: 1.35rem;
    }

    .project-card p {
        font-size: 0.9rem;
    }

    .contact-grid {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(5, minmax(42px, 1fr));
        overflow: visible;
    }

    .contact-box {
        height: 52px !important;
        min-height: 52px;
        min-width: 0;
        width: 100% !important;
    }

    .contact-box i {
        font-size: 1.45rem !important;
    }

    .form-container {
        max-width: 100%;
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.95rem;
        padding: 0.9rem;
    }

    footer {
        padding: 2rem 1rem;
    }
}

@media (max-width: 420px) {
    section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: 2rem !important;
        line-height: 1.12;
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .hero-name span {
        display: block;
    }

    .hero-role {
        font-size: 0.66rem !important;
        line-height: 1.8;
    }

    .hero-img {
        height: 220px !important;
        width: 220px !important;
    }

    .hero-image-tagline {
        font-size: 0.8rem !important;
        max-width: 230px !important;
    }
}

@media (max-width: 420px) {
    .hero-name {
        font-size: clamp(2rem, 10vw, 2.3rem);
    }

    .hero-role {
        font-size: 0.66rem;
        line-height: 1.8;
    }

    .live-metrics-button span {
        font-size: 0.68rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .contact-grid {
        gap: 0.45rem;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hero-img {
        height: min(62vw, 220px);
        width: min(62vw, 220px);
    }

    .hero-image-tagline {
        font-size: 0.8rem;
        max-width: 230px !important;
    }
}

@media (max-width: 768px) {
    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }

    .hero-image-wrapper {
        align-items: center;
        flex: none !important;
        height: auto !important;
        justify-content: flex-start;
        min-height: 0 !important;
        overflow: hidden;
    }

    .hero-image-wrapper::before {
        pointer-events: none;
    }

    .hero-image-tagline {
        display: block;
        font-size: 0.88rem;
        line-height: 1.55;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.25rem;
        max-width: 260px !important;
        overflow-wrap: break-word;
        padding: 0 0.25rem;
        text-align: center;
        white-space: normal;
        word-break: normal;
    }

    .orbit-1 {
        right: 0.55rem;
        top: 0.55rem;
    }

    .orbit-2 {
        bottom: 5.4rem;
        right: 0.55rem;
    }

    .orbit-3 {
        bottom: 5.4rem;
        left: 0.55rem;
    }

    .orbit-4 {
        left: 0.55rem;
        top: 0.55rem;
    }

    .contribution-heatmap,
    .heatmap-months {
        width: 100%;
    }

    .contribution-heatmap:not(.is-loading) .heatmap-day:not(.heatmap-day-blank) {
        animation: none !important;
    }

    .heatmap-day {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card,
    .metrics-modal-panel,
    .project-card,
    .skill-pill,
    .education-item,
    .glossy-card,
    .metrics-summary > div,
    .visitor-graph-card,
    .metrics-detail-grid span,
    .country-panel,
    .github-metrics-panel span,
    .leetcode-meta-panel span,
    .heatmap-stats span,
    .heatmap-insights span,
    .leetcode-ring-legend span,
    .form-group input,
    .form-group textarea {
        animation: none !important;
    }
}

/* Narrow phone fixes must stay last. */
@media (max-width: 420px) {
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-wrapper,
    .contact-wrapper,
    .projects-wrapper,
    .heatmap-card {
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }

    .hero-name {
        font-size: 1.75rem !important;
        line-height: 1.12 !important;
    }

    .hero-role {
        font-size: 0.62rem !important;
        line-height: 1.75 !important;
    }

    .hero-img {
        height: 210px !important;
        width: 210px !important;
    }

    .hero-image-tagline {
        font-size: 0.78rem !important;
        max-width: 220px !important;
    }
}
/* Final hero mobile guardrails - keep at EOF */
@media (max-width: 768px) {
    #hero {
        overflow: hidden !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero-typewriter {
        align-items: flex-start !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .hero-typewriter .typewriter-prefix,
    .hero-typewriter .typewriter-dynamic {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .hero-typewriter .typewriter-dynamic {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .hero-typewriter .typewriter-caret {
        display: none !important;
    }

    .hero-text {
        max-width: 100% !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-role {
        font-size: 0.94rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: min(100%, 34ch) !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
    }
}

@media (max-width: 420px) {
    #hero {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-text,
    .hero-image-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero-typewriter,
    .hero-signal-grid,
    .hero-text .hero-buttons {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }

    .hero-typewriter .typewriter-prefix,
    .hero-typewriter .typewriter-dynamic {
        flex-basis: 100% !important;
        text-align: center !important;
    }

    .hero-name {
        font-size: clamp(2.7rem, 15vw, 3.6rem) !important;
        text-align: center !important;
    }

    .hero-role {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    .hero-img {
        height: auto !important;
        width: 100% !important;
    }
}

/* Reimagined about, education, and contact */
#about,
#contact {
    position: relative;
}

.section-kicker {
    align-items: center;
    color: #7dd3fc;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    gap: 0.55rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.section-kicker::before {
    background: linear-gradient(135deg, #2dd4bf, #facc15);
    border-radius: 999px;
    box-shadow: 0 0 22px rgba(45, 212, 191, 0.34);
    content: "";
    height: 0.55rem;
    width: 0.55rem;
}

#about .about-wrapper,
#contact .contact-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: 1280px !important;
    padding: 0 !important;
}

#about .about-wrapper::before,
#contact .contact-wrapper::before {
    display: none !important;
}

.about-panel-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.about-story-panel,
.about-focus-panel,
.education-container,
.contact-copy-panel,
.contact-form-panel {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(8, 15, 28, 0.74)) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    position: relative;
}

.about-story-panel::before,
.about-focus-panel::before,
.education-container::before,
.contact-copy-panel::before,
.contact-form-panel::before {
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    content: "";
    inset: 0;
    opacity: 0.44;
    pointer-events: none;
    position: absolute;
}

.about-story-panel,
.about-focus-panel {
    padding: clamp(1.25rem, 3vw, 2.2rem);
}

#about .about-header {
    margin-bottom: 1rem;
}

#about .about-arrow-header,
#contact .section-title {
    color: #f8fafc !important;
    font-size: clamp(2.1rem, 4.4vw, 4rem) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: left !important;
}

#about .about-arrow-header::before,
#contact .section-title::before {
    display: none !important;
}

.about-typewriter,
.contact-typewriter {
    margin: 1.3rem 0 1.5rem;
    position: relative;
    z-index: 1;
}

#about .about-bio {
    color: #b9c7d8 !important;
    font-size: clamp(0.96rem, 1.2vw, 1.06rem) !important;
    line-height: 1.8 !important;
    margin: 0 0 1rem !important;
    max-width: 74ch;
    position: relative;
    text-align: left !important;
    z-index: 1;
}

#about .about-bio:last-child {
    margin-bottom: 0 !important;
}

#about strong,
#contact strong {
    color: #f8fafc;
}

.about-focus-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.about-focus-panel h3 {
    color: #f8fafc;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.15;
    margin: 0 0 1.4rem;
    position: relative;
    z-index: 1;
}

.about-focus-list {
    display: grid;
    gap: 0.8rem;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.about-focus-list div {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: grid;
    gap: 0.25rem;
    grid-template-columns: auto 1fr;
    padding: 1rem 0 0.9rem;
}

.about-focus-list i {
    color: #5eead4;
    font-size: 1rem;
    grid-row: span 2;
    margin-top: 0.2rem;
    width: 1.8rem;
}

.about-focus-list span {
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 800;
}

.about-focus-list p {
    color: #9fb0c2;
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.education-container {
    margin-top: 1.25rem !important;
    padding: clamp(1.25rem, 3vw, 2.2rem) !important;
}

.education-heading-row {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.65fr);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.education-heading-row p {
    color: #9fb0c2;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.education-content {
    display: grid !important;
    gap: 1rem;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

.education-content::before {
    display: none !important;
}

.education-item {
    background: rgba(15, 23, 42, 0.52) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 0 !important;
    padding: 1.2rem !important;
}

.education-item::before,
.education-item::after {
    display: none !important;
}

.education-year {
    align-self: start;
    background: rgba(45, 212, 191, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 999px;
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.65rem;
    text-align: center;
    text-transform: uppercase;
}

.education-item h3,
.education-item .edu-degree,
.education-item .edu-details {
    grid-column: 2;
}

.education-item h3 {
    color: #f8fafc !important;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
    line-height: 1.25;
    margin: 0 !important;
}

.education-item .edu-degree,
.education-item .edu-details {
    color: #9fb0c2 !important;
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

#contact .container {
    max-width: 1280px;
}

#contact .contact-wrapper {
    align-items: stretch;
    display: grid !important;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.75fr);
}

.contact-copy-panel,
.contact-form-panel {
    padding: clamp(1.25rem, 3vw, 2.2rem) !important;
}

.contact-copy-panel > *,
.contact-form-panel > * {
    position: relative;
    z-index: 1;
}

#contact .section-title {
    margin-bottom: 1.2rem !important;
}

.contact-intro {
    color: #b9c7d8 !important;
    font-size: clamp(0.96rem, 1.2vw, 1.06rem) !important;
    line-height: 1.78 !important;
    margin: 0 !important;
    max-width: 68ch;
    text-align: left !important;
}

.contact-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.4rem 0;
}

.contact-highlights span {
    align-items: center;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: #e2e8f0;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.55rem;
    padding: 0.62rem 0.85rem;
}

.contact-highlights i {
    color: #facc15;
}

.contact-grid {
    display: grid !important;
    gap: 0.7rem !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    margin: 1.35rem 0 0 !important;
    max-width: 100% !important;
}

.contact-box {
    align-items: center !important;
    aspect-ratio: auto !important;
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid rgba(94, 234, 212, 0.22) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
    display: grid !important;
    gap: 0.45rem;
    height: auto !important;
    justify-items: center;
    min-height: 88px !important;
    min-width: 0 !important;
    padding: 0.85rem 0.45rem !important;
    text-decoration: none;
    width: auto !important;
}

.contact-box i {
    color: #5eead4 !important;
    font-size: 1.45rem !important;
}

.contact-box span {
    color: #cbd5e1 !important;
    display: block !important;
    font-size: 0.68rem !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.contact-box:hover,
.contact-box:focus {
    background: rgba(45, 212, 191, 0.13) !important;
    border-color: rgba(94, 234, 212, 0.5) !important;
    outline: none;
    transform: translateY(-3px);
}

.contact-form-panel {
    max-width: none !important;
}

.contact-form-panel form {
    display: grid;
    gap: 0.95rem;
}

.contact-form-panel .form-group {
    margin: 0 !important;
}

.contact-form-panel .form-group input,
.contact-form-panel .form-group textarea {
    background: rgba(2, 6, 23, 0.52) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    color: #f8fafc !important;
    min-height: 56px;
}

.contact-form-panel .form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form-panel .form-group label {
    color: #9fb0c2 !important;
}

.contact-form-panel .submit-btn {
    align-items: center;
    background: #f8fafc !important;
    border: 1px solid rgba(248, 250, 252, 0.72) !important;
    border-radius: 999px !important;
    color: #07111f !important;
    display: inline-flex;
    justify-content: center;
    min-height: 56px;
    width: 100%;
}

@media (max-width: 1100px) {
    .about-panel-grid,
    #contact .contact-wrapper {
        grid-template-columns: 1fr !important;
    }

    .education-heading-row {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #about .about-wrapper,
    #contact .contact-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .about-story-panel,
    .about-focus-panel,
    .education-container,
    .contact-copy-panel,
    .contact-form-panel {
        border-radius: 22px !important;
        padding: 1.15rem !important;
    }

    #about .about-arrow-header,
    #contact .section-title {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }

    .education-item {
        grid-template-columns: 1fr;
        padding: 1rem !important;
    }

    .education-item h3,
    .education-item .edu-degree,
    .education-item .edu-details {
        grid-column: auto;
    }

    .education-year {
        justify-self: start;
    }

    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-box:last-child {
        grid-column: 1 / -1;
    }
}

/* Professional preloader refresh */
#preloader {
    align-items: center !important;
    background:
        radial-gradient(circle at 50% 40%, rgba(45, 212, 191, 0.13), transparent 24rem),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.09), transparent 22rem),
        linear-gradient(145deg, #02070d 0%, #07111f 52%, #02060a 100%) !important;
    display: flex !important;
    justify-content: center !important;
    padding: 1.25rem !important;
}

#preloader::before {
    animation: loaderAmbientShift 8s ease-in-out infinite !important;
    background:
        linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.06), transparent),
        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px) !important;
    background-size: auto, 54px 54px, 54px 54px !important;
    content: "" !important;
    inset: 0 !important;
    opacity: 0.72 !important;
    position: absolute !important;
}

#preloader::after {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.22), transparent 55%) !important;
    content: "" !important;
    height: min(58vw, 460px) !important;
    left: 50% !important;
    opacity: 0.22 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(58vw, 460px) !important;
}

#preloader.is-hidden {
    opacity: 0 !important;
    transform: scale(1.015) !important;
    visibility: hidden !important;
}

.loader-content {
    align-items: stretch !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(5, 13, 22, 0.82) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    border-radius: 26px !important;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    display: grid !important;
    gap: 1.45rem !important;
    max-width: 520px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(1.35rem, 4vw, 2.2rem) !important;
    position: relative !important;
    width: min(92vw, 520px) !important;
    z-index: 2 !important;
}

.loader-content::before {
    animation: none !important;
    background:
        linear-gradient(90deg, rgba(45, 212, 191, 0.62), rgba(125, 211, 252, 0.42), rgba(250, 204, 21, 0.5)) !important;
    content: "" !important;
    height: 3px !important;
    inset: 0 0 auto !important;
    opacity: 1 !important;
    position: absolute !important;
}

.loader-content::after,
.loader-topbar,
.loader-grid,
.loader-diagnostics,
.loader-terminal {
    display: none !important;
}

.loader-brand {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
    position: relative;
    z-index: 1;
}

.loader-core {
    align-items: center !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.2), transparent 64%),
        rgba(2, 6, 23, 0.62) !important;
    border: 1px solid rgba(94, 234, 212, 0.25) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.42) !important;
    display: flex !important;
    height: 82px !important;
    justify-content: center !important;
    margin: 0 !important;
    position: relative !important;
    width: 82px !important;
}

.loader-core::before,
.loader-core::after {
    display: none !important;
}

.loader-core strong {
    color: #f8fafc !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 0 22px rgba(94, 234, 212, 0.3) !important;
}

.loader-core-ring {
    animation: loaderCorePulse 1.7s ease-in-out infinite !important;
    border: 1px solid rgba(94, 234, 212, 0.4) !important;
    border-radius: 20px !important;
    inset: 9px !important;
    position: absolute !important;
}

.loader-orbit {
    animation: loaderProfessionalOrbit 3.5s linear infinite !important;
    background: #5eead4 !important;
    border-radius: 999px !important;
    height: 9px !important;
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform-origin: -28px -28px !important;
    width: 9px !important;
}

.loader-orbit-two {
    animation-duration: 4.8s !important;
    background: #facc15 !important;
    height: 7px !important;
    opacity: 0.85 !important;
    width: 7px !important;
}

.loader-kicker {
    color: #7dd3fc !important;
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.35rem !important;
    text-transform: uppercase !important;
}

.loader-text {
    color: #f8fafc !important;
    display: block !important;
    font-size: clamp(2.1rem, 8vw, 3.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
    margin: 0 !important;
}

.loader-text span {
    color: #2dd4bf !important;
}

.loader-signal {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr 0.64fr 0.34fr;
    position: relative;
    z-index: 1;
}

.loader-signal span {
    animation: loaderSignal 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12), rgba(45, 212, 191, 0.78));
    border-radius: 999px;
    height: 5px;
}

.loader-signal span:nth-child(2) {
    animation-delay: 0.18s;
    opacity: 0.72;
}

.loader-signal span:nth-child(3) {
    animation-delay: 0.36s;
    opacity: 0.5;
}

.loader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
}

.loader-meta span {
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.48rem 0.68rem;
}

.loader-progress {
    background: rgba(148, 163, 184, 0.14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    height: 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    z-index: 1 !important;
}

.loader-progress span {
    animation: none !important;
    background: linear-gradient(90deg, #2dd4bf, #38bdf8, #facc15) !important;
    border-radius: inherit !important;
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.34) !important;
    display: block !important;
    height: 100% !important;
    transition: width 0.22s ease !important;
    width: 0%;
}

.loader-footer {
    align-items: center !important;
    color: #94a3b8 !important;
    display: flex !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.loader-status {
    color: #cbd5e1 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}

.loader-percent {
    color: #f8fafc !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    min-width: 3.2rem !important;
    text-align: right !important;
}

@keyframes loaderProfessionalOrbit {
    from {
        transform: rotate(0deg) translateX(42px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(42px) rotate(-360deg);
    }
}

@keyframes loaderSignal {
    0%,
    100% {
        transform: scaleX(0.74);
    }

    50% {
        transform: scaleX(1);
    }
}

@keyframes loaderAmbientShift {
    0%,
    100% {
        opacity: 0.46;
        transform: translateX(-4%);
    }

    50% {
        opacity: 0.78;
        transform: translateX(4%);
    }
}

@media (max-width: 520px) {
    .loader-brand {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .loader-meta {
        justify-content: center;
    }

    .loader-footer {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 0.45rem !important;
    }

    .loader-percent {
        text-align: left !important;
    }
}

/* Reimagined skills section */
#skills .about-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: 1280px !important;
    padding: 0 !important;
}

#skills .about-wrapper::before {
    display: none !important;
}

.skills-header-panel {
    align-items: end;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(8, 15, 28, 0.74)) !important;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 0.75fr) minmax(280px, 0.7fr);
    margin-bottom: 1.25rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.2rem);
    position: relative;
}

.skills-header-panel::before {
    background:
        radial-gradient(circle at 18% 30%, rgba(45, 212, 191, 0.18), transparent 16rem),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    content: "";
    inset: 0;
    opacity: 0.72;
    pointer-events: none;
    position: absolute;
}

.skills-header-panel > * {
    position: relative;
    z-index: 1;
}

#skills .about-arrow-header {
    color: #f8fafc !important;
    font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: left !important;
}

#skills .about-arrow-header::before {
    display: none !important;
}

.skills-header-panel p {
    color: #b9c7d8;
    font-size: clamp(0.96rem, 1.2vw, 1.06rem);
    line-height: 1.75;
    margin: 0;
}

#skills .about-content-row {
    display: block !important;
    margin: 0 !important;
}

.skills-grid-new {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.skills-grid-new::before {
    display: none !important;
}

.skill-pill {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(8, 15, 28, 0.68)) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 58px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    min-height: 230px !important;
    overflow: hidden !important;
    padding: 1.15rem !important;
    position: relative !important;
    transform: none !important;
}

.skill-pill::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(45, 212, 191, 0.15), transparent 8rem),
        linear-gradient(90deg, rgba(45, 212, 191, 0.65), rgba(56, 189, 248, 0.24), transparent);
    border-radius: 0 !important;
    content: "" !important;
    display: block !important;
    height: 3px !important;
    inset: 0 0 auto 0 !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
}

.skill-pill::after {
    color: rgba(94, 234, 212, 0.26) !important;
    content: "</>" !important;
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 1rem !important;
    top: 0.9rem !important;
}

.skill-pill:hover {
    border-color: rgba(94, 234, 212, 0.38) !important;
    box-shadow: 0 26px 70px rgba(45, 212, 191, 0.1), 0 20px 58px rgba(2, 6, 23, 0.3) !important;
    min-height: 230px !important;
    transform: translateY(-4px) !important;
}

.skill-pill:hover .pill-header,
.skill-pill:hover .pill-content {
    transform: none !important;
}

.pill-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.85rem !important;
    position: relative;
    z-index: 1;
}

.pill-header i {
    align-items: center;
    background: rgba(45, 212, 191, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.24);
    border-radius: 16px;
    color: #5eead4 !important;
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.15rem !important;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.pill-header h3 {
    color: #f8fafc !important;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
    line-height: 1.2;
    margin: 0 !important;
}

.pill-content {
    align-content: start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.55rem !important;
    opacity: 1 !important;
    position: relative;
    transform: none !important;
    z-index: 1;
}

.pill-content span {
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 999px !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 0.52rem 0.68rem !important;
}

.relocated-stats {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 1.25rem !important;
}

.relocated-stats .glossy-card {
    align-items: flex-start !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(8, 15, 28, 0.72)) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 58px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    justify-content: center !important;
    min-height: 118px !important;
    padding: 1.2rem !important;
}

.stat-num-glossy,
.glossy-title {
    color: #f8fafc !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

.stat-label-glossy {
    color: #9fb0c2 !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
}

@media (max-width: 1100px) {
    .skills-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .skills-header-panel {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .skills-header-panel {
        border-radius: 22px;
        padding: 1.15rem;
    }

    .skills-grid-new,
    .relocated-stats {
        grid-template-columns: 1fr !important;
    }

    .skill-pill {
        min-height: 0 !important;
    }

    .skill-pill:hover {
        min-height: 0 !important;
        transform: none !important;
    }
}

/* Skills reveal interaction */
.skill-pill {
    cursor: pointer;
    justify-content: space-between !important;
    min-height: 190px !important;
}

.skill-pill::after {
    content: "hover to reveal" !important;
    color: #7dd3fc !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    opacity: 0.78;
    text-transform: uppercase;
}

.skill-pill:focus {
    border-color: rgba(94, 234, 212, 0.52) !important;
    outline: none;
}

.skill-pill .pill-header {
    margin-top: auto;
    margin-bottom: auto;
    transition: transform 0.28s ease, margin 0.28s ease;
}

.skill-pill .pill-content {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: translateY(10px) !important;
    transition: max-height 0.34s ease, opacity 0.24s ease, transform 0.3s ease !important;
}

.skill-pill:hover,
.skill-pill:focus {
    min-height: 230px !important;
}

.skill-pill:hover::after,
.skill-pill:focus::after {
    content: "capabilities" !important;
    color: #facc15 !important;
}

.skill-pill:hover .pill-header,
.skill-pill:focus .pill-header {
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(0) !important;
}

.skill-pill:hover .pill-content,
.skill-pill:focus .pill-content {
    max-height: 220px !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: translateY(0) !important;
}

@media (hover: none) {
    .skill-pill::after {
        content: "tap to reveal" !important;
    }
}

@media (max-width: 768px) {
    .skill-pill {
        min-height: 160px !important;
    }

    .skill-pill:hover,
    .skill-pill:focus {
        min-height: 230px !important;
    }
}

/* Removed terminal label/status ornaments */
.rail-status,
.navbar::before {
    display: none !important;
}

/* Protected document captcha modal */
.document-gate-modal {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.25s ease;
    z-index: 20000;
}

.document-gate-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.document-gate-panel {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 15, 28, 0.86));
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 26px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    max-width: 480px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(1.2rem, 4vw, 2rem);
    position: relative;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
    width: min(100%, 480px);
}

.document-gate-modal.active .document-gate-panel {
    transform: translateY(0) scale(1);
}

.document-gate-panel::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.18), transparent 12rem),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: auto, 30px 30px, 30px 30px;
    content: "";
    inset: 0;
    opacity: 0.64;
    pointer-events: none;
    position: absolute;
}

.document-gate-panel > * {
    position: relative;
    z-index: 1;
}

.document-gate-close,
.captcha-refresh {
    align-items: center;
    background: rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(94, 234, 212, 0.24);
    border-radius: 14px;
    color: #5eead4;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    width: 42px;
}

.document-gate-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.document-gate-close:hover,
.document-gate-close:focus,
.captcha-refresh:hover,
.captcha-refresh:focus {
    background: rgba(45, 212, 191, 0.15);
    outline: none;
    transform: translateY(-2px);
}

.document-gate-panel h3 {
    color: #f8fafc;
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    line-height: 1.05;
    margin: 0 3rem 0.75rem 0;
}

.document-gate-panel p {
    color: #b9c7d8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.document-captcha-card {
    align-items: center;
    background: rgba(2, 6, 23, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto;
    margin: 1rem 0;
    padding: 1rem;
}

.document-email-card {
    background: rgba(2, 6, 23, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0;
    padding: 1rem;
}

.document-email-card[hidden] {
    display: none !important;
}

.document-email-card label {
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 800;
}

.document-email-row {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto;
}

.document-email-card input {
    background: rgba(2, 6, 23, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    color: #f8fafc;
    font: inherit;
    min-height: 46px;
    outline: none;
    padding: 0 0.9rem;
    width: 100%;
}

.document-email-card input:focus {
    border-color: rgba(94, 234, 212, 0.64);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

.document-otp-button {
    background: rgba(94, 234, 212, 0.13);
    border: 1px solid rgba(94, 234, 212, 0.36);
    border-radius: 14px;
    color: #5eead4;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 0 0.9rem;
    white-space: nowrap;
}

.document-otp-button:disabled {
    cursor: wait;
    opacity: 0.58;
}

#document-otp-status {
    color: #7dd3fc;
    font-size: 0.78rem;
    min-height: 1rem;
}

.captcha-label {
    color: #7dd3fc;
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    grid-column: 1 / -1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.turnstile-widget {
    grid-column: 1 / -1;
    min-height: 65px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.turnstile-widget iframe {
    max-width: none;
}

.turnstile-widget.is-loading::before {
    animation: cloudflarePulse 1.15s ease-in-out infinite;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08), rgba(125, 211, 252, 0.16), rgba(148, 163, 184, 0.08)),
        rgba(15, 23, 42, 0.66);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 8px;
    content: "";
    inset: 0;
    position: absolute;
}

.turnstile-status {
    color: #9fb3c8;
    display: block;
    font-size: 0.72rem;
    grid-column: 1 / -1;
    min-height: 1rem;
}

#captcha-code {
    color: #f8fafc;
    font-size: clamp(1.6rem, 8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    text-shadow: 0 0 24px rgba(94, 234, 212, 0.18);
}

.document-gate-form {
    display: grid;
    gap: 0.85rem;
}

.document-gate-form .form-group {
    margin: 0;
}

.document-gate-form .form-group input {
    background: rgba(2, 6, 23, 0.52) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    color: #f8fafc !important;
    min-height: 56px;
}

.document-honeypot {
    height: 0 !important;
    left: -9999px !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
}

.document-gate-error {
    color: #fca5a5 !important;
    font-size: 0.84rem !important;
    margin: 0 !important;
    min-height: 1.2rem;
}

.document-gate-form .submit-btn {
    align-items: center;
    background: #f8fafc !important;
    border-radius: 999px !important;
    color: #07111f !important;
    display: inline-flex;
    gap: 0.7rem;
    justify-content: center;
    min-height: 54px;
    width: 100%;
}

.document-gate-form .submit-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

.document-gate-form .submit-btn.is-redirecting {
    animation: documentRedirectPulse 1s ease-in-out infinite;
    background: linear-gradient(90deg, #f8fafc, #99f6e4, #f8fafc) !important;
    background-size: 220% 100% !important;
}

@keyframes documentRedirectPulse {
    0% {
        background-position: 0% 50%;
        transform: translateY(0);
    }

    50% {
        background-position: 100% 50%;
        transform: translateY(-1px);
    }

    100% {
        background-position: 0% 50%;
        transform: translateY(0);
    }
}

@keyframes cloudflarePulse {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.resume-viewer-modal {
    align-items: center;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.25s ease;
    z-index: 20010;
}

.resume-viewer-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.resume-viewer-panel {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 28, 0.9));
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 22px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto minmax(0, 1fr);
    height: min(92vh, 920px);
    overflow: hidden;
    padding: 1rem;
    width: min(94vw, 980px);
}

.resume-viewer-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.resume-viewer-header h3 {
    color: #f8fafc;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1;
    margin: 0.25rem 0 0.3rem;
}

.resume-viewer-header p {
    color: #b9c7d8;
    font-size: 0.85rem;
    margin: 0;
}

.resume-viewer-close {
    align-items: center;
    background: rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(94, 234, 212, 0.24);
    border-radius: 14px;
    color: #5eead4;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.resume-viewer-frame-wrap {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.resume-viewer-frame {
    border: 0;
    height: 100%;
    width: 100%;
}

.resume-viewer-watermark {
    color: rgba(15, 23, 42, 0.32);
    display: grid;
    font-size: clamp(1rem, 2.8vw, 2.4rem);
    font-weight: 900;
    inset: 0;
    place-items: center;
    letter-spacing: 0.04em;
    pointer-events: none;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-24deg);
    user-select: none;
    z-index: 2;
}

.resume-viewer-watermark::before,
.resume-viewer-watermark::after {
    content: none;
}

/* Smoothness/performance pass */
#scroll-progress {
    will-change: transform;
}

@media (max-width: 900px), (pointer: coarse) {
    html,
    body {
        scroll-behavior: auto !important;
    }

    #canvas-container,
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-story-panel,
    .about-focus-panel,
    .education-container,
    .skills-header-panel,
    .skill-pill,
    .glossy-card,
    .heatmap-card,
    .project-card,
    .contact-copy-panel,
    .contact-form-panel,
    .document-gate-panel,
    .metrics-modal-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 14px 34px rgba(2, 6, 23, 0.22) !important;
        transform: none !important;
        transition-duration: 0.18s !important;
        will-change: auto !important;
    }

    .orbit-icon,
    .loader-orbit,
    .loader-core-ring,
    .loader-signal span {
        animation: none !important;
    }

    .hero-portrait-shell:hover .hero-img,
    .project-card:hover,
    .skill-pill:hover,
    .contact-box:hover,
    .cta-button:hover {
        transform: none !important;
    }
}

@media (min-width: 901px) {
    #about,
    #skills,
    #heatmaps,
    #featured-projects,
    #projects,
    #contact {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }
}

@media (max-width: 520px) {
    .document-gate-panel {
        border-radius: 22px;
        padding: 1.15rem;
        width: min(100%, 360px);
    }

    .document-gate-panel h3 {
        margin-right: 2.6rem;
    }

    .document-captcha-card {
        padding: 0.85rem;
        overflow: hidden;
    }

    .document-email-card {
        padding: 0.85rem;
    }

    .document-email-row {
        grid-template-columns: 1fr;
    }

    .document-otp-button {
        min-height: 44px;
        width: 100%;
    }

    .turnstile-widget {
        height: 61px;
        min-height: 61px;
    }

    .turnstile-widget > div {
        transform: scale(0.92);
        transform-origin: left top;
    }
}

@media (max-width: 370px) {
    .document-gate-modal {
        padding: 0.75rem;
    }

    .document-gate-panel {
        padding: 1rem;
    }

    .document-captcha-card {
        padding: 0.75rem;
    }

    .turnstile-widget {
        height: 56px;
        min-height: 56px;
    }

    .turnstile-widget > div {
        transform: scale(0.86);
    }
}

/* Mobile hero portrait fix */
@media (max-width: 768px) {
    .hero-image-wrapper {
        aspect-ratio: auto !important;
        display: flex !important;
        gap: 1rem !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 1rem !important;
    }

    .hero-portrait-shell {
        border-radius: 24px !important;
        margin: 0 auto !important;
        max-width: 340px !important;
        padding: 0.65rem !important;
        transform: none !important;
        width: min(100%, 340px) !important;
    }

    .hero-img {
        aspect-ratio: 4 / 5 !important;
        border-radius: 18px !important;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 50% 18% !important;
        width: 100% !important;
    }

    .hero-status-card {
        bottom: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        max-width: 340px !important;
        position: relative !important;
        right: auto !important;
        width: 100% !important;
    }

    .hero-image-tagline {
        margin-top: 0 !important;
        max-width: 320px !important;
        padding: 0 0.5rem !important;
    }

    .orbit-1,
    .orbit-4 {
        top: 1.4rem !important;
    }

    .orbit-2,
    .orbit-3 {
        bottom: auto !important;
        top: min(76vw, 300px) !important;
    }
}

@media (max-width: 420px) {
    .hero-portrait-shell,
    .hero-status-card {
        max-width: calc(100vw - 3rem) !important;
    }

    .hero-image-wrapper {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Smooth contained social icon motion */
.hero-image-wrapper .orbit-icon {
    --orbit-dx: 18px;
    --orbit-dy: 14px;
    --orbit-scale: 1;
    animation: profileIconDrift 11s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate !important;
    transform: translate3d(0, 0, 0) scale(var(--orbit-scale)) !important;
    will-change: transform;
}

.hero-image-wrapper .orbit-icon.profile-bounce-icon {
    animation: none !important;
    transform: translate3d(var(--bounce-x, 0), var(--bounce-y, 0), 0) scale(var(--orbit-scale)) !important;
}

.hero-image-wrapper .orbit-icon:hover,
.hero-image-wrapper .orbit-icon:focus {
    --orbit-scale: 1.08;
    animation-play-state: paused !important;
}

.hero-image-wrapper .orbit-1 {
    --orbit-dx: -24px;
    --orbit-dy: 18px;
    animation-duration: 12s !important;
}

.hero-image-wrapper .orbit-2 {
    --orbit-dx: -26px;
    --orbit-dy: -18px;
    animation-duration: 13.5s !important;
    animation-delay: -2.3s !important;
}

.hero-image-wrapper .orbit-3 {
    --orbit-dx: 26px;
    --orbit-dy: -18px;
    animation-duration: 12.8s !important;
    animation-delay: -4.1s !important;
}

.hero-image-wrapper .orbit-4 {
    --orbit-dx: 24px;
    --orbit-dy: 18px;
    animation-duration: 13.2s !important;
    animation-delay: -1.4s !important;
}

@keyframes profileIconDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--orbit-scale));
    }

    48% {
        transform: translate3d(var(--orbit-dx), var(--orbit-dy), 0) scale(var(--orbit-scale));
    }

    100% {
        transform: translate3d(calc(var(--orbit-dx) * -0.45), calc(var(--orbit-dy) * -0.45), 0) scale(var(--orbit-scale));
    }
}

@media (max-width: 768px) {
    .hero-image-wrapper .orbit-icon {
        animation-duration: 10.5s !important;
    }

    .hero-image-wrapper .orbit-1 {
        --orbit-dx: -16px;
        --orbit-dy: 14px;
    }

    .hero-image-wrapper .orbit-2 {
        --orbit-dx: -16px;
        --orbit-dy: -12px;
    }

    .hero-image-wrapper .orbit-3 {
        --orbit-dx: 16px;
        --orbit-dy: -12px;
    }

    .hero-image-wrapper .orbit-4 {
        --orbit-dx: 16px;
        --orbit-dy: 14px;
    }
}

/* Clearer loading monogram accents */
.loader-core strong {
    position: relative !important;
    z-index: 3 !important;
}

.loader-orbit {
    animation: loaderAccentDot 2.8s ease-in-out infinite alternate !important;
    background: #2dd4bf !important;
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.5) !important;
    height: 8px !important;
    left: auto !important;
    right: 14px !important;
    top: 15px !important;
    transform: none !important;
    transform-origin: center !important;
    width: 8px !important;
    z-index: 2 !important;
}

.loader-orbit-two {
    animation-delay: -1.1s !important;
    background: #facc15 !important;
    bottom: 14px !important;
    height: 7px !important;
    left: 15px !important;
    opacity: 0.95 !important;
    right: auto !important;
    top: auto !important;
    width: 7px !important;
}

@keyframes loaderAccentDot {
    from {
        opacity: 0.78;
        transform: translate3d(0, 0, 0) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate3d(2px, -2px, 0) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-image-wrapper .orbit-icon,
    .loader-orbit {
        animation: none !important;
    }
}

/* Reliable mobile navigation override */
@media (max-width: 1100px) {
    body.nav-open {
        overflow: hidden;
    }

    .navbar .nav-links {
        align-items: center !important;
        background:
            radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.14), transparent 16rem),
            rgba(2, 6, 23, 0.98) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        height: 100dvh !important;
        inset: 0 !important;
        justify-content: center !important;
        list-style: none !important;
        opacity: 0 !important;
        padding: 5.5rem 1.2rem 2rem !important;
        pointer-events: none !important;
        position: fixed !important;
        transform: translateX(-100%) !important;
        transition: transform 0.32s ease, opacity 0.32s ease !important;
        width: 100vw !important;
        z-index: 9998 !important;
    }

    .navbar .nav-links.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .navbar .nav-links a {
        border: 1px solid rgba(94, 234, 212, 0.18) !important;
        border-radius: 16px !important;
        display: block !important;
        font-size: 1rem !important;
        min-width: min(280px, 82vw) !important;
        padding: 0.95rem 1.2rem !important;
        text-align: center !important;
    }

    .hamburger {
        cursor: pointer !important;
        display: flex !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}

/* Final mobile responsiveness and performance layer */
@media (max-width: 768px) {
    :root {
        --mobile-gutter: clamp(0.85rem, 4vw, 1.15rem);
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 82px;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        font-size: 1rem;
        line-height: 1.6;
        text-rendering: optimizeSpeed;
    }

    body::before,
    #canvas-container,
    .terminal-rail,
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }

    .navbar {
        min-height: 68px;
        padding: 0.7rem var(--mobile-gutter) !important;
    }

    .nav-actions,
    .nav-status-cluster {
        gap: 0.65rem;
        min-width: 0;
    }

    .live-metrics-button {
        border-radius: 12px;
        min-height: 42px;
        padding: 0.65rem 0.7rem;
    }

    .live-metrics-button span {
        display: none;
    }

    .logo {
        font-size: 1.35rem;
        line-height: 1;
    }

    .hamburger {
        min-height: 42px;
        min-width: 42px;
        place-content: center;
    }

    main,
    section,
    footer {
        max-width: 100%;
        overflow-x: clip;
    }

    section {
        min-height: auto !important;
        padding: 78px var(--mobile-gutter) !important;
    }

    #hero {
        gap: 1rem !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding-top: 92px !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-story-panel,
    .about-focus-panel,
    .education-container,
    .skills-header-panel,
    .skill-pill,
    .heatmap-card,
    .project-card,
    .contact-copy-panel,
    .contact-form-panel,
    .metrics-modal-panel,
    .document-gate-panel,
    .resume-viewer-panel {
        border-radius: 18px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .hero-text {
        align-items: stretch !important;
        padding: 1.15rem !important;
        text-align: left !important;
    }

    .hero-greeting,
    .section-kicker,
    .heatmap-kicker {
        font-size: 0.68rem !important;
        letter-spacing: 0.08em !important;
    }

    .hero-name {
        font-size: clamp(2.45rem, 14vw, 3.75rem) !important;
        line-height: 1.03 !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    .hero-typewriter,
    .terminal-typewriter-line {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .hero-role,
    .about-bio,
    .contact-intro,
    .education-item .edu-degree,
    .education-item .edu-details,
    .skills-header-panel p {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }

    .hero-signal-grid,
    .hero-text .hero-buttons,
    .metrics-summary,
    .metrics-detail-grid,
    .github-metrics-panel,
    .leetcode-meta-panel,
    .projects-horizontal-track,
    .activity-wrapper,
    .about-panel-grid,
    .education-heading-row,
    #contact .contact-wrapper,
    .skills-header-panel,
    .skills-grid-new,
    .relocated-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-signal-grid {
        gap: 0.55rem !important;
    }

    .hero-text .hero-buttons {
        gap: 0.7rem !important;
    }

    .cta-button,
    .hero-text .hero-buttons .cta-button,
    .submit-btn,
    .document-otp-button {
        justify-content: center !important;
        min-height: 46px;
        width: 100% !important;
    }

    .hero-image-wrapper {
        gap: 0.85rem !important;
        min-height: 0 !important;
        padding: 1rem !important;
    }

    .hero-portrait-shell {
        max-width: min(100%, 300px) !important;
        padding: 0.55rem !important;
    }

    .hero-img {
        aspect-ratio: 4 / 5 !important;
        height: auto !important;
        max-height: 360px !important;
        object-fit: cover !important;
        object-position: 50% 18% !important;
        width: 100% !important;
    }

    .hero-bg-shape,
    .hero-image-wrapper .orbit-icon {
        display: none !important;
    }

    .hero-status-card {
        position: static !important;
    }

    .hero-image-tagline {
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
        max-width: 32ch !important;
    }

    #about .about-arrow-header,
    #skills .about-arrow-header,
    #contact .section-title,
    .section-title {
        font-size: clamp(1.9rem, 10vw, 2.75rem) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    .about-story-panel,
    .about-focus-panel,
    .education-container,
    .skills-header-panel,
    .skill-pill,
    .heatmap-card,
    .project-card,
    .contact-copy-panel,
    .contact-form-panel {
        padding: 1rem !important;
    }

    .about-focus-list div {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .education-item {
        grid-template-columns: 1fr !important;
    }

    .education-item h3,
    .education-item .edu-degree,
    .education-item .edu-details {
        grid-column: auto !important;
    }

    .skill-pill,
    .skill-pill:hover,
    .skill-pill:focus {
        min-height: auto !important;
    }

    .skill-pill .pill-content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
    }

    .skill-pill::after {
        content: "</>" !important;
    }

    .heatmap-card {
        overflow: hidden !important;
    }

    .heatmap-header {
        align-items: flex-start !important;
    }

    .heatmap-months,
    .contribution-heatmap {
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
    }

    .leetcode-overview {
        grid-template-areas:
            "ring"
            "legend"
            "meta" !important;
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    .leetcode-progress-ring {
        justify-self: center;
        width: min(46vw, 142px) !important;
    }

    .project-card {
        min-height: 0 !important;
    }

    #contact .container,
    #about .about-wrapper,
    #skills .about-wrapper,
    #contact .contact-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .contact-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-box {
        min-height: 76px !important;
    }

    .contact-box:last-child {
        grid-column: 1 / -1;
    }

    .form-group input,
    .form-group textarea,
    .document-email-card input {
        font-size: 16px !important;
        min-width: 0;
    }

    .metrics-modal,
    .document-gate-modal,
    .resume-viewer-modal {
        padding: 0.75rem !important;
    }

    .metrics-modal-panel,
    .document-gate-panel {
        max-height: calc(100dvh - 1.5rem) !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }

    .resume-viewer-panel {
        height: calc(100dvh - 1.5rem) !important;
        padding: 0.75rem !important;
        width: 100% !important;
    }

    .resume-viewer-header {
        align-items: flex-start !important;
    }

    .loader-content {
        width: min(100%, 360px) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --mobile-gutter: 0.75rem;
    }

    .navbar {
        min-height: 64px;
    }

    section {
        padding-bottom: 64px !important;
        padding-top: 70px !important;
    }

    #hero {
        padding-top: 84px !important;
    }

    .hero-text,
    .hero-image-wrapper,
    .about-story-panel,
    .about-focus-panel,
    .education-container,
    .skills-header-panel,
    .skill-pill,
    .heatmap-card,
    .project-card,
    .contact-copy-panel,
    .contact-form-panel {
        padding: 0.9rem !important;
    }

    .hero-name {
        font-size: clamp(2.25rem, 15vw, 3.1rem) !important;
    }

    .hero-role,
    .about-bio,
    .contact-intro,
    .education-item .edu-degree,
    .education-item .edu-details,
    .skills-header-panel p {
        font-size: 0.86rem !important;
    }

    .hero-portrait-shell {
        max-width: min(100%, 270px) !important;
    }

    .contact-grid {
        gap: 0.55rem !important;
    }

    .contact-box {
        min-height: 70px !important;
        padding: 0.7rem 0.45rem !important;
    }
}

/* Final mobile pass for the secure resume gate */
.document-gate-modal.active {
    overflow: hidden;
}

.document-gate-modal {
    background: rgba(2, 6, 23, 0.76);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    overscroll-behavior: contain;
}

.document-gate-panel {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.document-gate-panel::-webkit-scrollbar {
    width: 6px;
}

.document-gate-panel::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.36);
    border-radius: 999px;
}

@media (max-width: 560px) {
    .document-gate-modal {
        align-items: center;
        padding: max(0.65rem, env(safe-area-inset-top)) 0.65rem max(0.65rem, env(safe-area-inset-bottom)) !important;
    }

    .document-gate-panel {
        border-radius: 20px !important;
        max-height: calc(100dvh - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        width: min(100%, 390px) !important;
        -webkit-overflow-scrolling: touch;
    }

    .document-gate-close {
        border-radius: 13px;
        height: 42px;
        right: 0.85rem;
        top: 0.85rem;
        width: 42px;
    }

    .document-gate-panel h3 {
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
        line-height: 1.08;
        margin: 0 3rem 0.65rem 0 !important;
    }

    .document-gate-panel p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.85rem !important;
    }

    .document-email-card,
    .document-captcha-card {
        border-radius: 17px;
        gap: 0.65rem;
        margin: 0.75rem 0;
        padding: 0.85rem !important;
    }

    .document-email-row {
        grid-template-columns: 1fr !important;
    }

    .document-email-card input {
        min-height: 48px;
    }

    .document-otp-button {
        min-height: 46px;
        width: 100%;
    }

    .captcha-label {
        font-size: 0.68rem !important;
        letter-spacing: 0.12em !important;
    }

    .turnstile-widget {
        height: 60px !important;
        min-height: 60px !important;
        overflow: hidden;
    }

    .turnstile-widget > div {
        transform: scale(0.9) !important;
        transform-origin: left top !important;
    }

    .document-gate-form .submit-btn {
        min-height: 52px;
    }
}

/* EOF strict dark correction */
html,
body {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ededed !important;
}

.hero-panel,
.clean-card,
.top-nav,
.resume-button,
.secondary-link {
    box-shadow: none !important;
}

.hero-panel,
.clean-card {
    background: #111111 !important;
    border-color: #333333 !important;
}

/* Product Builder + Metrics First redesign */
main {
    background: #000000 !important;
}

.top-nav {
    border-color: #1f1f1f !important;
}

.top-nav .nav-links a[href="#projects"] {
    color: #ededed !important;
}

.section-heading {
    margin: 0 auto clamp(1.5rem, 4vw, 2.75rem);
    max-width: 760px;
    text-align: center;
}

.section-heading .section-title {
    font-size: clamp(2.25rem, 6vw, 4.8rem) !important;
    letter-spacing: -0.06em !important;
    line-height: 0.95 !important;
    margin: 0.35rem 0 0 !important;
}

.section-heading p {
    color: #888888 !important;
    font-size: clamp(1rem, 1.5vw, 1.12rem) !important;
    line-height: 1.7;
    margin: 1rem auto 0;
    max-width: 620px;
}

.proof-section {
    padding-top: clamp(2rem, 5vw, 4rem) !important;
}

.proof-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-card {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 16px;
    display: grid;
    gap: 0.7rem;
    min-height: 220px;
    padding: clamp(1.35rem, 3vw, 2rem);
}

.proof-card span {
    color: #888888;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.proof-card strong {
    color: #ffffff;
    font-size: clamp(2.1rem, 4.7vw, 4.7rem);
    font-weight: 850;
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.proof-card p {
    align-self: end;
    color: #888888;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.proof-card-primary {
    background: #ededed;
    border-color: #ededed;
}

.proof-card-primary span,
.proof-card-primary p {
    color: #333333;
}

.proof-card-primary strong {
    color: #000000;
}

#about .about-wrapper,
#skills .clean-container,
#heatmaps .activity-wrapper,
#featured-projects .clean-container,
#projects .projects-wrapper,
#contact .contact-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1120px !important;
}

.about-story-panel,
.about-focus-panel,
.education-container,
.skills-header-panel,
.heatmap-card,
.structure-card,
.project-card,
.contact-copy-panel,
.contact-form-panel {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.skill-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.skill-tag-grid span {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 999px;
    color: #ededed;
    display: inline-flex;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.85rem 1rem;
}

.skill-tag-grid span:hover {
    border-color: #555555;
}

.structure-card {
    display: grid;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    padding: clamp(1rem, 2.8vw, 1.5rem);
}

.structure-visual {
    background: #050505;
    border: 1px solid #333333;
    border-radius: 14px;
    min-height: 430px;
    overflow: hidden;
}

.mock-window-bar {
    align-items: center;
    border-bottom: 1px solid #242424;
    display: flex;
    gap: 0.45rem;
    height: 42px;
    padding: 0 1rem;
}

.mock-window-bar span {
    background: #333333;
    border-radius: 999px;
    height: 9px;
    width: 9px;
}

.mock-dashboard {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 388px;
}

.mock-sidebar {
    border-right: 1px solid #242424;
    display: grid;
    gap: 0.7rem;
    justify-items: center;
    padding-top: 1.2rem;
}

.mock-sidebar i {
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 10px;
    height: 34px;
    width: 34px;
}

.mock-main {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.mock-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.mock-header span,
.mock-stat strong {
    color: #ededed;
    font-weight: 800;
}

.mock-header b {
    background: rgba(0, 112, 243, 0.16);
    border: 1px solid rgba(0, 112, 243, 0.45);
    border-radius: 999px;
    color: #66b2ff;
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
}

.mock-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mock-stat {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    display: grid;
    gap: 0.35rem;
    min-height: 118px;
    padding: 1rem;
}

.mock-stat strong {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: -0.05em;
}

.mock-stat span {
    color: #888888;
    font-size: 0.84rem;
    line-height: 1.5;
}

.mock-stat.wide {
    grid-column: 1 / -1;
}

.mock-chart {
    align-items: end;
    border: 1px solid #333333;
    border-radius: 12px;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(5, 1fr);
    min-height: 108px;
    padding: 1rem;
}

.mock-chart i {
    background: linear-gradient(180deg, #ededed, #555555);
    border-radius: 999px 999px 4px 4px;
    min-height: 34px;
}

.mock-chart i:nth-child(2) {
    min-height: 58px;
}

.mock-chart i:nth-child(3) {
    min-height: 82px;
}

.mock-chart i:nth-child(4) {
    min-height: 48px;
}

.mock-chart i:nth-child(5) {
    min-height: 96px;
}

.structure-copy {
    align-content: center;
    display: grid;
    gap: 1.15rem;
    padding: clamp(0.4rem, 2vw, 1.25rem);
}

.structure-copy h3 {
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 3.3rem);
    letter-spacing: -0.06em;
    line-height: 0.98;
    margin: 0;
}

.structure-copy p {
    color: #888888;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

.structure-tags,
.structure-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.structure-tags span {
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 999px;
    color: #ededed;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 0.7rem;
}

.structure-links a {
    border-bottom: 1px solid #555555;
    color: #ededed;
    font-weight: 700;
    padding-bottom: 0.18rem;
}

.structure-links a:first-child {
    color: #66b2ff;
    border-color: #0070f3;
}

#heatmaps .section-title {
    font-size: clamp(2.25rem, 6vw, 4.8rem) !important;
    letter-spacing: -0.06em !important;
    text-align: center;
}

.heatmap-card {
    min-width: 0;
}

.heatmap-day[data-level="0"],
.heatmap-legend i[data-level="0"] {
    background: #161616 !important;
}

.heatmap-day[data-level="1"],
.heatmap-legend i[data-level="1"],
.leetcode-heatmap-card .heatmap-day[data-level="1"],
.leetcode-legend i[data-level="1"] {
    background: #333333 !important;
}

.heatmap-day[data-level="2"],
.heatmap-legend i[data-level="2"],
.leetcode-heatmap-card .heatmap-day[data-level="2"],
.leetcode-legend i[data-level="2"] {
    background: #555555 !important;
}

.heatmap-day[data-level="3"],
.heatmap-legend i[data-level="3"],
.leetcode-heatmap-card .heatmap-day[data-level="3"],
.leetcode-legend i[data-level="3"] {
    background: #999999 !important;
}

.heatmap-day[data-level="4"],
.heatmap-legend i[data-level="4"],
.leetcode-heatmap-card .heatmap-day[data-level="4"],
.leetcode-legend i[data-level="4"] {
    background: #ededed !important;
}

.leetcode-progress-ring {
    min-height: 190px !important;
}

.ring-center strong {
    font-size: clamp(3.2rem, 7vw, 5.8rem) !important;
    letter-spacing: -0.08em;
}

.assistant-launcher {
    background: #111111 !important;
    border-color: #333333 !important;
    color: #ededed !important;
}

@media (max-width: 960px) {
    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .structure-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .proof-grid {
        grid-template-columns: 1fr;
    }

    .proof-card {
        min-height: 170px;
    }

    .mock-dashboard {
        grid-template-columns: 1fr;
    }

    .mock-sidebar {
        display: none;
    }

    .mock-grid {
        grid-template-columns: 1fr;
    }

    .structure-visual {
        min-height: 0;
    }
}

/* EOF monochrome heatmap guarantee */
.heatmap-day[data-level="0"],
.heatmap-legend i[data-level="0"],
.leetcode-heatmap-card .heatmap-day[data-level="0"],
.leetcode-legend i[data-level="0"] {
    background: #161616 !important;
}

.heatmap-day[data-level="1"],
.heatmap-legend i[data-level="1"],
.leetcode-heatmap-card .heatmap-day[data-level="1"],
.leetcode-legend i[data-level="1"] {
    background: #333333 !important;
}

.heatmap-day[data-level="2"],
.heatmap-legend i[data-level="2"],
.leetcode-heatmap-card .heatmap-day[data-level="2"],
.leetcode-legend i[data-level="2"] {
    background: #555555 !important;
}

.heatmap-day[data-level="3"],
.heatmap-legend i[data-level="3"],
.leetcode-heatmap-card .heatmap-day[data-level="3"],
.leetcode-legend i[data-level="3"] {
    background: #999999 !important;
}

.heatmap-day[data-level="4"],
.heatmap-legend i[data-level="4"],
.leetcode-heatmap-card .heatmap-day[data-level="4"],
.leetcode-legend i[data-level="4"] {
    background: #ededed !important;
}

/* Strict Vercel-style black mode: top navigation + hero foundation */
:root {
    --bg: #000000;
    --bg-color: #000000;
    --surface: #111111;
    --surface-2: #1a1a1a;
    --border: #333333;
    --border-color: #333333;
    --text: #ededed;
    --text-color: #ededed;
    --muted: #888888;
    --text-light: #888888;
    --text-muted: #888888;
    --accent: #0070f3;
    --accent-color: #0070f3;
    --accent-secondary: #0070f3;
    --card-bg: #111111;
    --shadow-soft: none;
    --shadow-hover: none;
    --font-body: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body {
    background-color: #000000 !important;
    background: #000000 !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
}

body {
    background-color: #000000 !important;
    background-image: none !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
}

*:not(code):not(pre):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: var(--font-body) !important;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono) !important;
}

*,
*::before,
*::after {
    box-shadow: none !important;
}

.navbar,
.nav-actions,
.nav-status-cluster,
.digital-clock,
.hamburger,
.terminal-rail,
.document-gate-modal,
.resume-viewer-modal,
.cursor-dot,
.cursor-outline,
#preloader,
#canvas-container,
.hero-text,
.hero-image-wrapper,
.hero-typewriter,
.terminal-typewriter-line,
.hero-signal-grid,
.hero-bg-shape,
.hero-portrait-shell,
.hero-status-card,
.hero-image-tagline,
.orbit-icon {
    display: none !important;
}

.top-nav {
    align-items: center;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: rgba(0, 0, 0, 0.72);
    border-bottom: 1px solid var(--border);
    display: flex;
    height: 72px;
    justify-content: center;
    left: 0;
    padding: 0 24px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.nav-brand {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    left: 24px;
    letter-spacing: -0.02em;
    position: absolute;
}

.top-nav .nav-links {
    align-items: center;
    display: flex !important;
    gap: clamp(18px, 3vw, 36px);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-nav .nav-links a {
    color: var(--muted) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-decoration: none;
    text-transform: none !important;
    transition: color 160ms ease;
}

.top-nav .nav-links a:hover,
.top-nav .nav-links a:focus,
.top-nav .nav-links a.active {
    color: var(--accent) !important;
}

.clean-section {
    padding: clamp(96px, 12vw, 160px) clamp(20px, 5vw, 64px) !important;
}

.clean-container {
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}

#hero.hero {
    align-items: center !important;
    background: #000000 !important;
    display: grid !important;
    min-height: calc(100vh - 72px) !important;
    padding-top: clamp(96px, 12vw, 160px) !important;
}

.hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(48px, 8vw, 96px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

.hero-copy {
    max-width: 760px;
}

.hero-eyebrow {
    color: var(--muted) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 0 24px !important;
    text-transform: none !important;
}

.hero-name {
    color: #ffffff !important;
    font-size: clamp(4rem, 10vw, 8.5rem) !important;
    font-weight: 850 !important;
    letter-spacing: -0.07em !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    text-shadow: none !important;
}

.hero-role {
    color: var(--muted) !important;
    font-size: clamp(1.3rem, 2.6vw, 2rem) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 28px 0 0 !important;
}

.hero-bio {
    color: var(--text) !important;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
    line-height: 1.7 !important;
    margin: 28px 0 0 !important;
    max-width: 660px;
}

.hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.resume-button,
.secondary-link {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.resume-button {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

.resume-button:hover,
.resume-button:focus {
    opacity: 0.9;
}

.secondary-link {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.secondary-link:hover,
.secondary-link:focus {
    border-color: #555555;
}

.clean-card,
.hero-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.hero-panel {
    display: grid;
    gap: 24px;
    padding: clamp(28px, 4vw, 40px);
}

.hero-profile-photo {
    aspect-ratio: 1;
    border: 1px solid #333333;
    border-radius: 12px;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.hero-panel span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-panel strong {
    color: var(--text);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.about-story-panel,
.about-focus-panel,
.education-container,
.skills-header-panel,
.skill-pill,
.glossy-card,
.heatmap-card,
.featured-projects-preview,
.featured-cms-card,
.project-card,
.contact-copy-panel,
.contact-form-panel,
.assistant-panel,
.assistant-message,
.assistant-form textarea,
.assistant-suggestions button {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

.section-kicker,
.heatmap-kicker,
.featured-cms-kicker {
    color: var(--muted) !important;
}

.section-title,
.about-arrow-header,
.about-focus-panel h3,
.heatmap-card h3,
.featured-cms-body h3,
.project-card h3,
.contact-copy-panel h2 {
    color: var(--text) !important;
}

.hero-copy p,
.about-bio,
.about-focus-list p,
.edu-details,
.skills-header-panel p,
.heatmap-focus,
.featured-cms-body p,
.project-card p,
.contact-intro {
    color: var(--muted) !important;
}

@media (max-width: 860px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-name {
        font-size: clamp(3.4rem, 17vw, 5.4rem) !important;
    }
}

@media (max-width: 640px) {
    .top-nav {
        height: auto;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 16px 20px;
    }

    .nav-brand {
        display: none;
    }

    .top-nav .nav-links {
        gap: 20px;
        min-width: max-content;
    }

    .hero-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .resume-button,
    .secondary-link {
        width: 100%;
    }
}

@media (max-width: 360px), (max-height: 720px) {
    .document-gate-modal {
        align-items: flex-start;
    }

    .document-gate-panel {
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        padding: 0.85rem !important;
    }
}

/* Secure document approval and resume viewer polish */
.document-approval-status {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(20, 184, 166, 0.14)),
        rgba(2, 6, 23, 0.58);
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto 1fr;
    margin: 0.2rem 0;
    overflow: hidden;
    padding: 0.9rem;
    position: relative;
}

.document-approval-status[hidden] {
    display: none !important;
}

.document-approval-status::before {
    animation: approvalScan 2.4s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.22), transparent);
    content: "";
    height: 100%;
    left: -45%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 42%;
}

.approval-orbit {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    position: relative;
    width: 46px;
}

.approval-orbit span {
    animation: approvalOrbit 1.7s linear infinite;
    border: 2px solid rgba(94, 234, 212, 0.2);
    border-top-color: #5eead4;
    border-right-color: #7dd3fc;
    border-radius: 50%;
    inset: 0;
    position: absolute;
}

.approval-orbit i {
    color: #7dd3fc;
    font-size: 1rem;
}

.document-approval-status strong {
    color: #f8fafc;
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.document-approval-status p {
    color: #cbd5e1;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.approval-progress {
    display: grid;
    gap: 0.35rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
}

.approval-progress span {
    animation: approvalStep 1.45s ease-in-out infinite;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
}

.approval-progress span:nth-child(2) {
    animation-delay: 0.18s;
}

.approval-progress span:nth-child(3) {
    animation-delay: 0.36s;
}

.document-approval-status[data-stage="approved"] {
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(14, 165, 233, 0.12)),
        rgba(2, 6, 23, 0.64);
    border-color: rgba(134, 239, 172, 0.38);
}

.document-approval-status[data-stage="approved"] .approval-orbit span {
    animation: approvalSuccessRing 1.1s ease both;
    border-color: rgba(134, 239, 172, 0.85);
}

.document-approval-status[data-stage="approved"] .approval-orbit i {
    color: #86efac;
}

.document-gate-modal.is-awaiting-approval .document-email-card,
.document-gate-modal.is-awaiting-approval .document-captcha-card,
.document-gate-modal.is-approval-approved .document-email-card,
.document-gate-modal.is-approval-approved .document-captcha-card {
    display: none !important;
}

.document-gate-form .submit-btn.is-redirecting,
.document-gate-modal.is-awaiting-approval .document-gate-form .submit-btn:disabled {
    position: relative;
    overflow: hidden;
}

.document-gate-form .submit-btn.is-redirecting::after,
.document-gate-modal.is-awaiting-approval .document-gate-form .submit-btn:disabled::after {
    animation: buttonSheen 1.8s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    content: "";
    inset: 0 auto 0 -45%;
    position: absolute;
    width: 42%;
}

.resume-viewer-modal {
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.resume-viewer-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.14), transparent 18rem),
        linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(8, 15, 28, 0.92));
    border-color: rgba(125, 211, 252, 0.26);
    grid-template-rows: auto auto minmax(0, 1fr);
}

.resume-viewer-actions {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.resume-viewer-open {
    align-items: center;
    background: rgba(125, 211, 252, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 14px;
    color: #e0f2fe;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0 0.8rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.resume-viewer-open:hover,
.resume-viewer-open:focus {
    background: rgba(125, 211, 252, 0.2);
    outline: none;
    transform: translateY(-1px);
}

.resume-viewer-status {
    align-items: center;
    animation: viewerStatusIn 0.5s ease both;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(134, 239, 172, 0.24);
    border-radius: 16px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr;
    padding: 0.78rem 0.85rem;
}

.viewer-success-mark {
    align-items: center;
    animation: successPulse 2.2s ease-in-out infinite;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(134, 239, 172, 0.44);
    border-radius: 50%;
    color: #86efac;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.resume-viewer-status strong {
    color: #f8fafc;
    display: block;
    font-size: 0.9rem;
}

.resume-viewer-status p {
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.15rem 0 0;
}

.resume-viewer-frame-wrap {
    background: #111827;
    min-height: 420px;
}

.resume-frame-fallback {
    align-items: center;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 14px;
    bottom: 0.85rem;
    color: #dbeafe;
    display: inline-grid;
    gap: 0.22rem;
    grid-template-columns: auto auto;
    left: 0.85rem;
    max-width: calc(100% - 1.7rem);
    padding: 0.65rem 0.75rem;
    position: absolute;
    z-index: 4;
}

.resume-frame-fallback i {
    color: #fca5a5;
    grid-row: span 2;
}

.resume-frame-fallback strong {
    font-size: 0.78rem;
}

.resume-frame-fallback span {
    color: #a8b6ca;
    font-size: 0.7rem;
}

.resume-frame-fallback a {
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 900;
    grid-column: 1 / -1;
    text-decoration: none;
}

.resume-viewer-frame {
    background: #f8fafc;
    position: relative;
    z-index: 2;
}

@keyframes approvalOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes approvalScan {
    to {
        left: 110%;
    }
}

@keyframes approvalStep {
    0%,
    100% {
        background: rgba(148, 163, 184, 0.18);
    }

    50% {
        background: rgba(94, 234, 212, 0.72);
    }
}

@keyframes approvalSuccessRing {
    0% {
        transform: scale(0.82);
    }

    70% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes buttonSheen {
    to {
        left: 120%;
    }
}

@keyframes viewerStatusIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

@keyframes successPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(134, 239, 172, 0);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(134, 239, 172, 0.08);
    }
}

@media (max-width: 560px) {
    .document-approval-status {
        grid-template-columns: auto 1fr;
        padding: 0.78rem;
    }

    .approval-orbit {
        height: 40px;
        width: 40px;
    }

    .resume-viewer-modal {
        padding: max(0.65rem, env(safe-area-inset-top)) 0.65rem max(0.65rem, env(safe-area-inset-bottom)) !important;
    }

    .resume-viewer-panel {
        border-radius: 20px !important;
        gap: 0.75rem;
        height: calc(100dvh - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        padding: 0.85rem !important;
    }

    .resume-viewer-header {
        gap: 0.8rem;
    }

    .resume-viewer-header h3 {
        font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
        line-height: 1.08;
    }

    .resume-viewer-header p {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .resume-viewer-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 0.45rem;
    }

    .resume-viewer-open {
        border-radius: 12px;
        font-size: 0.7rem;
        min-height: 40px;
        padding: 0 0.62rem;
    }

    .resume-viewer-status {
        padding: 0.68rem;
    }

    .resume-viewer-status p {
        font-size: 0.72rem;
    }

    .resume-viewer-frame-wrap {
        min-height: 0;
    }

    .resume-frame-fallback {
        bottom: 0.65rem;
        left: 0.65rem;
        right: 0.65rem;
        max-width: none;
    }
}

body.featured-projects-page .featured-nav {
    position: sticky;
    top: 18px;
    left: auto;
    right: auto;
    transform: none;
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
}

body.featured-projects-page .featured-projects-shell {
    display: block;
}

body.featured-projects-page .featured-projects-list {
    display: block;
    position: relative;
    z-index: 1;
}

body.featured-projects-page .featured-projects-list::before {
    display: none;
}

body.featured-projects-page .featured-cms-grid {
    width: 100%;
}

body.featured-projects-page .featured-project-card {
    text-align: left;
    align-items: flex-start;
    transform: none;
}

@media (max-width: 640px) {
    body.featured-projects-page .featured-nav {
        top: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dynamic featured-project pages use the same terminal atmosphere as the homepage. */
body.featured-projects-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(32, 247, 180, 0.12), transparent 28rem),
        radial-gradient(circle at 84% 18%, rgba(24, 201, 255, 0.1), transparent 24rem),
        linear-gradient(135deg, #05080d 0%, #07111a 48%, #02060a 100%);
    color: var(--text-color);
}

body.featured-projects-page .featured-nav {
    background: rgba(5, 8, 13, 0.9);
    border: 1px solid var(--terminal-border);
    box-shadow: var(--shadow-soft);
}

body.featured-projects-page .featured-logo,
body.featured-projects-page .featured-projects-hero h1,
body.featured-projects-page .featured-project-card h2 {
    color: var(--text-color);
}

body.featured-projects-page .featured-projects-hero p,
body.featured-projects-page .featured-project-card p {
    color: var(--text-light);
}

body.featured-projects-page .featured-nav-links a,
body.featured-projects-page .featured-action {
    background: rgba(5, 8, 13, 0.82);
    border-color: rgba(32, 247, 180, 0.24);
    color: var(--accent-color);
}

body.featured-projects-page .featured-action.primary,
body.featured-projects-page .featured-back-link {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(5, 8, 13, 0.92));
    color: #ffffff;
}

body.featured-projects-page .featured-project-card {
    background: linear-gradient(145deg, rgba(7, 12, 19, 0.9), rgba(8, 16, 24, 0.78));
    border-color: var(--terminal-border);
}

/* Upload project mobile order and crop-tool polish */
@media (max-width: 760px) {
    body.admin-upload-page {
        overflow-x: hidden;
    }

    body.admin-upload-page .featured-nav {
        align-items: stretch;
        gap: 0.8rem;
        margin-top: 10px;
        padding: 0.85rem;
        width: calc(100% - 20px);
    }

    body.admin-upload-page .featured-nav-links {
        display: grid;
        gap: 0.55rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.admin-upload-page .featured-nav-links a {
        font-size: 0.76rem;
        min-height: 42px;
        min-width: 0;
        padding: 0 0.65rem;
        white-space: normal;
    }

    body.admin-upload-page .featured-back-link {
        grid-column: 1 / -1;
    }

    body.admin-upload-page .admin-project-shell {
        padding: 2.35rem 0 4rem;
        width: calc(100% - 20px);
    }

    body.admin-upload-page .admin-upload-hero {
        padding-bottom: 1rem;
    }

    body.admin-upload-page .admin-upload-hero h1 {
        font-size: clamp(2.05rem, 11vw, 3.1rem);
        line-height: 1.05;
        margin-bottom: 0.7rem;
    }

    body.admin-upload-page .admin-upload-hero p {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    body.admin-upload-page .admin-project-form {
        border-radius: 8px;
        gap: 0.85rem;
        padding: 0.75rem;
    }

    body.admin-upload-page .admin-upload-console {
        gap: 0.85rem;
        grid-template-columns: 1fr;
    }

    body.admin-upload-page .admin-publish-panel {
        gap: 0.95rem;
        padding: 0.85rem;
    }

    body.admin-upload-page .admin-publish-main {
        order: 2;
    }

    body.admin-upload-page .admin-publish-panel:not(.admin-publish-main) {
        order: 1;
    }

    body.admin-upload-page .admin-panel-header {
        gap: 0.65rem;
        padding-bottom: 0.8rem;
    }

    body.admin-upload-page .admin-panel-header strong {
        font-size: 1.05rem;
    }

    body.admin-upload-page .admin-panel-header p {
        font-size: 0.76rem;
        line-height: 1.5;
    }

    body.admin-upload-page .admin-panel-icon {
        height: 38px;
        width: 38px;
    }

    body.admin-upload-page .admin-form-grid {
        gap: 0.85rem;
        grid-template-columns: 1fr;
    }

    body.admin-upload-page .admin-field {
        gap: 0.42rem;
    }

    body.admin-upload-page .admin-field input,
    body.admin-upload-page .admin-field textarea,
    body.admin-upload-page .admin-field select {
        font-size: 1rem;
        min-height: 46px;
        padding: 0.78rem 0.82rem;
    }

    body.admin-upload-page .admin-field textarea {
        line-height: 1.55;
        min-height: 112px;
    }

    body.admin-upload-page .admin-file-drop {
        gap: 0.7rem;
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 70px;
        padding: 0.8rem;
    }

    body.admin-upload-page .admin-file-icon {
        height: 40px;
        width: 40px;
    }

    body.admin-upload-page .admin-crop-shell {
        aspect-ratio: 16 / 11;
        min-height: 0;
        width: 100%;
    }

    body.admin-upload-page .admin-crop-shell:not(.has-image)::before {
        font-size: 0.9rem;
        text-align: center;
    }

    body.admin-upload-page .admin-crop-tools {
        gap: 0.65rem;
    }

    body.admin-upload-page .admin-crop-aspects,
    body.admin-upload-page .admin-crop-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.admin-upload-page .admin-crop-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.admin-upload-page .admin-crop-aspects button,
    body.admin-upload-page .admin-crop-actions button {
        min-height: 42px;
    }

    body.admin-upload-page .admin-crop-zoom {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    body.admin-upload-page .admin-preview-body {
        padding: 0.85rem;
    }

    body.admin-upload-page .admin-preview-body h2 {
        font-size: 1rem;
    }

    body.admin-upload-page .admin-publish-toggles,
    body.admin-upload-page .admin-submit-row {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    body.admin-upload-page .admin-checkbox {
        background: rgba(5, 8, 13, 0.58);
        border: 1px solid rgba(125, 211, 252, 0.12);
        border-radius: 8px;
        min-height: 44px;
        padding: 0.75rem;
    }

    body.admin-upload-page .admin-submit,
    body.admin-upload-page .admin-reset {
        min-height: 46px;
        width: 100%;
    }
}

@media (max-width: 420px) {
    body.admin-upload-page .featured-nav,
    body.admin-upload-page .admin-project-shell {
        width: calc(100% - 14px);
    }

    body.admin-upload-page .featured-nav-links {
        grid-template-columns: 1fr;
    }

    body.admin-upload-page .featured-back-link {
        grid-column: auto;
    }

    body.admin-upload-page .admin-project-form {
        padding: 0.55rem;
    }

    body.admin-upload-page .admin-publish-panel {
        padding: 0.72rem;
    }

body.admin-upload-page .admin-crop-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Clean Engineering Theme - May 2026 refactor */
:root {
    --bg-color: #121212;
    --surface: rgba(26, 26, 26, 0.82);
    --surface-solid: #1a1a1a;
    --surface-raised: #202020;
    --text-color: #ededed;
    --text-light: #b8b8b8;
    --text-muted: #858585;
    --accent-color: #66b2ff;
    --accent-secondary: #0070f3;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);
    --card-bg: rgba(255, 255, 255, 0.035);
    --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 22px 70px rgba(0, 112, 243, 0.16);
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --dash-green: var(--accent-color);
    --terminal-border: var(--border-color);
    --terminal-glow: none;
    --terminal-panel: var(--surface);
    --terminal-panel-solid: var(--surface-solid);
}

html {
    background: var(--bg-color);
    color: var(--text-color);
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 50% -20%, rgba(102, 178, 255, 0.11), transparent 34rem),
        linear-gradient(180deg, #121212 0%, #171717 46%, #121212 100%) !important;
    color: var(--text-color) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem;
    letter-spacing: 0;
}

*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: var(--font-body) !important;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono) !important;
}

#preloader,
.cursor-dot,
.cursor-outline,
.terminal-rail,
.hero-bg-shape,
.hero-image-wrapper .orbit-icon,
.typewriter-caret,
.typewriter-prefix,
.terminal-prompt,
.document-gate-modal,
.resume-viewer-modal {
    display: none !important;
}

#canvas-container {
    opacity: 0 !important;
}

.navbar {
    background: rgba(18, 18, 18, 0.82) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    left: 50% !important;
    max-width: min(1120px, calc(100vw - 32px)) !important;
    padding: 0.8rem 1rem !important;
    top: 16px !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}

.nav-links a,
.featured-nav-links a {
    color: var(--text-light) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active {
    color: var(--accent-color) !important;
}

.logo,
.logo span,
.digital-clock,
.digital-clock strong,
.digital-clock span {
    color: var(--text-color) !important;
}

.digital-clock {
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
}

main {
    overflow: clip;
}

section {
    min-height: auto !important;
    padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 4vw, 2rem) !important;
}

#hero {
    align-items: center !important;
    display: grid !important;
    gap: clamp(2rem, 6vw, 4rem) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr) !important;
    min-height: 100vh !important;
    padding-top: clamp(7rem, 12vw, 9rem) !important;
}

.hero-text,
.hero-image-wrapper,
.about-story-panel,
.about-focus-panel,
.education-container,
.skills-header-panel,
.skill-pill,
.glossy-card,
.heatmap-card,
.featured-projects-preview,
.featured-cms-card,
.project-card,
.contact-copy-panel,
.contact-form-panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.hero-text,
.hero-image-wrapper {
    padding: clamp(1.4rem, 4vw, 2.5rem) !important;
}

.hero-text::before,
.hero-text::after,
.hero-image-wrapper::before,
.heatmap-card::before,
.featured-projects-preview::after {
    display: none !important;
}

.hero-greeting,
.section-kicker,
.heatmap-kicker,
.featured-cms-kicker {
    color: var(--accent-color) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.hero-greeting::before,
.section-kicker::before,
.heatmap-kicker::before {
    background: var(--accent-color) !important;
    box-shadow: none !important;
}

.hero-name,
.section-title,
.about-arrow-header,
.about-focus-panel h3,
.heatmap-card h3,
.featured-cms-body h3,
.project-card h3,
.contact-copy-panel h2,
.assistant-header h2 {
    color: var(--text-color) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.hero-name {
    font-size: clamp(3.2rem, 8vw, 7rem) !important;
    line-height: 0.95 !important;
    margin: 0.7rem 0 1rem !important;
}

.hero-name span {
    color: inherit !important;
}

.hero-role {
    color: var(--text-color) !important;
    font-size: clamp(1.35rem, 3vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    margin: 0 0 0.85rem !important;
}

.hero-bio,
.about-bio,
.about-focus-list p,
.education-heading-row p,
.edu-details,
.skills-header-panel p,
.heatmap-focus,
.featured-cms-body p,
.project-card p,
.contact-intro {
    color: var(--text-light) !important;
    font-size: clamp(0.98rem, 1.4vw, 1.08rem) !important;
    line-height: 1.7 !important;
}

.hero-typewriter,
.terminal-typewriter-line {
    display: none !important;
}

.hero-signal-grid,
.pill-content,
.featured-cms-tech,
.contact-highlights {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
}

.hero-signal-grid span,
.pill-content span,
.featured-cms-tech span,
.contact-highlights span,
.leetcode-meta-panel span,
.heatmap-stats span,
.heatmap-insights span,
.github-metrics-panel span,
.leetcode-ring-legend span {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

.cta-button,
.featured-projects-more,
.featured-cms-actions a,
.view-project,
.submit-btn {
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    min-height: 46px;
    text-transform: none !important;
    transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease, transform 0.18s ease !important;
}

.primary-btn,
.resume-download,
.submit-btn {
    background: var(--accent-secondary) !important;
    border: 1px solid var(--accent-secondary) !important;
    color: #ffffff !important;
}

.subtle-btn,
.featured-projects-more,
.featured-cms-actions a {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.cta-button:hover,
.featured-projects-more:hover,
.featured-cms-actions a:hover,
.project-card:hover,
.skill-pill:hover,
.heatmap-card:hover,
.featured-cms-card:hover {
    border-color: var(--border-strong) !important;
    opacity: 0.96;
    transform: translateY(-2px) !important;
}

.hero-portrait-shell {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    max-width: 360px !important;
    padding: 0.65rem !important;
}

.hero-img {
    border-radius: 6px !important;
    box-shadow: none !important;
    filter: none !important;
    height: auto !important;
    width: 100% !important;
}

.hero-status-card {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-light) !important;
    margin-top: 1rem !important;
    position: static !important;
    width: 100% !important;
}

.hero-status-card strong,
.education-item h3,
.pill-header h3,
.contact-box strong {
    color: var(--text-color) !important;
}

.status-dot {
    background: var(--accent-color) !important;
    box-shadow: none !important;
}

.hero-image-tagline {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    margin: 1rem 0 0 !important;
    text-align: center !important;
}

.about-panel-grid,
.activity-wrapper,
.projects-wrapper,
.contact-wrapper,
.featured-projects-wrapper {
    max-width: 1120px !important;
}

.about-panel-grid,
.activity-wrapper {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.education-content {
    border-left: 1px solid var(--border-color) !important;
    display: grid !important;
    gap: 1rem !important;
    padding-left: 1.2rem !important;
}

.education-item {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 1.1rem !important;
}

.education-year {
    background: rgba(0, 112, 243, 0.12) !important;
    border-color: rgba(102, 178, 255, 0.24) !important;
    color: var(--accent-color) !important;
}

.skills-grid-new,
.featured-cms-grid,
.projects-horizontal-track {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.glossy-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.green-text,
.blue-text,
.purple-text,
.stat-num-glossy,
.glossy-title {
    color: var(--text-color) !important;
}

.heatmap-card {
    padding: clamp(1rem, 3vw, 1.4rem) !important;
}

.github-metrics-panel {
    display: grid !important;
    gap: 0.6rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.leetcode-progress-ring {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.leetcode-progress-ring::after {
    display: none !important;
}

.ring-center strong,
.leetcode-meta-panel strong,
.heatmap-stats strong,
.heatmap-insights strong,
.github-metrics-panel strong {
    color: var(--text-color) !important;
}

.contribution-heatmap {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
}

.heatmap-day {
    border-radius: 3px !important;
}

.heatmap-day[data-level="0"] {
    background: rgba(255, 255, 255, 0.06) !important;
}

.heatmap-day[data-level="1"] {
    background: rgba(102, 178, 255, 0.25) !important;
}

.heatmap-day[data-level="2"] {
    background: rgba(102, 178, 255, 0.42) !important;
}

.heatmap-day[data-level="3"] {
    background: rgba(0, 112, 243, 0.68) !important;
}

.heatmap-day[data-level="4"] {
    background: rgba(0, 112, 243, 0.95) !important;
}

.featured-projects-preview {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        rgba(18, 18, 18, 0.78) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.featured-cms-card {
    background: rgba(255, 255, 255, 0.045) !important;
}

.featured-cms-thumb {
    background: #0f0f0f !important;
}

.featured-cms-thumb img {
    object-fit: cover !important;
}

.featured-cms-thumb span {
    background: rgba(18, 18, 18, 0.82) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
}

.featured-cms-highlights {
    color: var(--text-light) !important;
}

.featured-cms-highlights li::before {
    background: var(--accent-color) !important;
}

.contact-box,
.form-group input,
.form-group textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
}

.profile-assistant {
    bottom: 20px !important;
    right: 20px !important;
    z-index: 12000 !important;
}

.assistant-launcher {
    align-items: center !important;
    background: var(--accent-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    gap: 0 !important;
    height: 52px !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 52px !important;
}

.assistant-launcher span {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.assistant-panel {
    background: rgba(26, 26, 26, 0.96) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-color) !important;
}

.assistant-status {
    display: none !important;
}

.assistant-message,
.assistant-form textarea,
.assistant-suggestions button {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
}

.assistant-message span,
.assistant-kicker {
    color: var(--accent-color) !important;
}

.assistant-send,
.assistant-icon-btn {
    background: var(--accent-secondary) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

footer {
    background: #121212 !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

@media (max-width: 900px) {
    .navbar {
        max-width: calc(100vw - 20px) !important;
    }

    #hero,
    .about-panel-grid,
    .activity-wrapper {
        grid-template-columns: 1fr !important;
    }

    #hero {
        padding-top: 7rem !important;
    }

    .hero-name {
        font-size: clamp(2.8rem, 14vw, 4.8rem) !important;
    }

    .glossy-grid,
    .github-metrics-panel {
        grid-template-columns: 1fr !important;
    }

    .assistant-panel {
        bottom: 68px !important;
        max-width: calc(100vw - 24px) !important;
        right: 0 !important;
        width: 360px !important;
    }
}

@media (max-width: 560px) {
    section {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    .hero-buttons,
    .featured-projects-heading,
    .contact-highlights {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .cta-button,
    .featured-projects-more {
        width: 100% !important;
    }
}

/* EOF strict dark correction */
html,
body {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ededed !important;
}

.hero-panel,
.clean-card,
.top-nav,
.resume-button,
.secondary-link {
    box-shadow: none !important;
}