/*
Theme Name: KP Portfolio
Theme URI: https://example.com/kp-portfolio
Author: KP Portfolio
Author URI: https://example.com
Description: A professional multi-page portfolio theme for Senior Software Engineer
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: portfolio, responsive, modern, software-engineer
Text Domain: kpportfolio
*/

/* Main theme styles are loaded from css/main.css */

/* ==================== GEMINI INSPIRED FUTURISTIC UI SKIN ==================== */
:root {
    --gemini-bg: #080b12;
    --gemini-bg-soft: #101522;
    --gemini-panel: rgba(17, 24, 39, 0.74);
    --gemini-panel-strong: rgba(20, 28, 45, 0.9);
    --gemini-border: rgba(148, 163, 184, 0.16);
    --gemini-text: #f8fbff;
    --gemini-muted: #aab6c8;
    --gemini-blue: #40c9ff;
    --gemini-purple: #8b5cf6;
    --gemini-violet: #4f46e5;
    --gemini-cyan: #22d3ee;
    --gemini-pink: #ec4899;
    --gemini-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    --gemini-glow-blue: 0 0 34px rgba(64, 201, 255, 0.22);
    --gemini-glow-purple: 0 0 38px rgba(139, 92, 246, 0.22);
    --gemini-radius: 8px;
}

html,
body {
    background-color: var(--gemini-bg) !important;
}

body {
    color: var(--gemini-text);
    background-image:
        linear-gradient(125deg, rgba(64, 201, 255, 0.12), transparent 28%),
        linear-gradient(235deg, rgba(139, 92, 246, 0.14), transparent 34%),
        linear-gradient(180deg, #080b12 0%, #0b1020 48%, #080b12 100%) !important;
    background-attachment: fixed;
}

body::before {
    background-image:
        linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px) !important;
    background-size: 78px 78px !important;
    opacity: 0.74;
}

body::after {
    background:
        linear-gradient(140deg, rgba(64, 201, 255, 0.14), transparent 30%),
        linear-gradient(220deg, rgba(139, 92, 246, 0.16), transparent 36%),
        linear-gradient(25deg, rgba(236, 72, 153, 0.08), transparent 32%) !important;
    filter: blur(60px);
    opacity: 0.78;
}

.portfolio-graphic-bg {
    opacity: 0.86;
}

.graphic-bg-shape {
    border-radius: var(--gemini-radius);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%) !important;
    filter: blur(18px);
}

.graphic-bg-shape--top {
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.2), rgba(139, 92, 246, 0.16)) !important;
}

.graphic-bg-shape--side,
.graphic-bg-shape--strip {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.1)) !important;
}

.graphic-bg-shape--grid {
    opacity: 0.18;
    filter: none;
}

body,
p,
li,
.lead,
.text-muted,
.portfolio-summary,
.service-card-home p,
.skill-years,
.timeline-description,
.contact-desc,
.footer-description {
    color: var(--gemini-muted) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.display-5,
.portfolio-title a,
.skill-title,
.timeline-title,
.service-title-about,
.info-value,
.stat-number,
.exp-number {
    color: var(--gemini-text) !important;
}

a:not(.btn):not(.menu-link):not(.mobile-menu-link):not(.portfolio-link-btn) {
    color: var(--gemini-cyan);
}

a:not(.btn):not(.menu-link):not(.mobile-menu-link):not(.portfolio-link-btn):hover {
    color: #ffffff;
}

.site-header {
    background: rgba(8, 11, 18, 0.72) !important;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.36) !important;
}

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(64, 201, 255, 0.65), rgba(139, 92, 246, 0.65), transparent);
    pointer-events: none;
}

.site-header.scrolled {
    background: rgba(8, 11, 18, 0.86) !important;
}

.top-info-bar {
    background: rgba(8, 11, 18, 0.92) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.logo-main {
    background: linear-gradient(135deg, var(--gemini-blue), var(--gemini-purple), var(--gemini-pink)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.logo-sub,
.info-item,
.top-info-bar .social-link {
    color: var(--gemini-muted) !important;
}

.menu-link {
    color: var(--gemini-text) !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
}

.menu-link:hover,
.menu-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.12), rgba(139, 92, 246, 0.14)) !important;
    border-color: rgba(64, 201, 255, 0.22);
    box-shadow: var(--gemini-glow-blue);
}

.sub-menu,
.services-mega-panel,
.mobile-menu {
    background: rgba(11, 16, 32, 0.9) !important;
    border: 1px solid var(--gemini-border) !important;
    box-shadow: var(--gemini-shadow), var(--gemini-glow-purple) !important;
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.btn,
.btn-cta,
.btn-primary,
.submit-btn,
.portfolio-action-primary,
.download-resume-btn,
.filter-btn.active {
    border-radius: 999px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--gemini-blue), var(--gemini-purple)) !important;
    box-shadow: 0 14px 32px rgba(64, 201, 255, 0.2), 0 0 28px rgba(139, 92, 246, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.btn:hover,
.btn-cta:hover,
.btn-primary:hover,
.submit-btn:hover,
.portfolio-action-primary:hover {
    box-shadow: 0 18px 42px rgba(64, 201, 255, 0.28), 0 0 36px rgba(139, 92, 246, 0.26) !important;
}

.btn-outline-light,
.btn-outline-primary,
.portfolio-action-secondary,
.filter-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gemini-text) !important;
    border: 1px solid var(--gemini-border) !important;
    border-radius: 999px !important;
}

.hero,
.about-hero,
.portfolio-hero,
.resume-hero,
.skills-hero,
.contact-hero,
.page-hero,
.service-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 11, 18, 0.88), rgba(15, 23, 42, 0.72)),
        linear-gradient(105deg, rgba(64, 201, 255, 0.26), transparent 34%, rgba(139, 92, 246, 0.28) 70%, rgba(236, 72, 153, 0.12)),
        url('data:image/svg+xml,%3Csvg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" stroke="%23ffffff" stroke-opacity=".09"%3E%3Cpath d="M0 70h140M70 0v140"/%3E%3Cpath d="M20 20h100v100H20z"/%3E%3C/g%3E%3C/svg%3E') !important;
    position: relative;
    overflow: hidden;
}

.hero::before,
.about-hero::before,
.portfolio-hero::before,
.resume-hero::before,
.skills-hero::before,
.contact-hero::before,
.page-hero::before,
.service-page-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(240deg, rgba(64, 201, 255, 0.16), transparent 36%) !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none;
}

.hero::after,
.about-hero::after,
.portfolio-hero::after,
.resume-hero::after,
.skills-hero::after,
.contact-hero::after,
.page-hero::after,
.service-page-hero::after {
    content: '\2726';
    position: absolute;
    right: clamp(24px, 9vw, 150px);
    bottom: clamp(18px, 5vw, 72px);
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: var(--gemini-radius);
    color: #ffffff;
    font-size: 2.4rem;
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.2), rgba(139, 92, 246, 0.22)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--gemini-glow-blue), var(--gemini-glow-purple);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: none;
}

.hero .container,
.about-hero .container,
.portfolio-hero .container,
.resume-hero .container,
.skills-hero .container,
.contact-hero .container,
.page-hero .container,
.service-page-hero .container {
    position: relative;
    z-index: 2;
}

.home-section,
.section-bg-light,
.about-content,
.skills-overview,
.portfolio-filter,
.portfolio-grid,
.skills-filter,
.skills-grid,
.resume-summary,
.experience-education,
.contact-content,
.page-content,
.service-intro-section,
.service-section,
.service-archive-section {
    background: transparent !important;
    position: relative;
    isolation: isolate;
}

.home-section::before,
.section-bg-light::before,
.about-content::before,
.skills-overview::before,
.portfolio-filter::before,
.portfolio-grid::before,
.skills-filter::before,
.skills-grid::before,
.resume-summary::before,
.experience-education::before,
.contact-content::before,
.page-content::before,
.service-intro-section::before,
.service-section::before,
.service-archive-section::before {
    content: '';
    position: absolute;
    inset: 18px;
    z-index: 0;
    pointer-events: none;
    border-radius: var(--gemini-radius);
    border: 1px solid rgba(148, 163, 184, 0.1);
    background:
        linear-gradient(145deg, rgba(17, 24, 39, 0.5), rgba(8, 11, 18, 0.24)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.045), rgba(139, 92, 246, 0.045)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-section > .container,
.section-bg-light > .container,
.about-content > .container,
.skills-overview > .container,
.portfolio-filter > .container,
.portfolio-grid > .container,
.skills-filter > .container,
.skills-grid > .container,
.resume-summary > .container,
.experience-education > .container,
.contact-content > .container,
.page-content > .container,
.service-intro-section > .container,
.service-section > .container,
.service-archive-section > .container {
    position: relative;
    z-index: 1;
}

.content-wrapper,
.portfolio-card,
.project-main-content,
.project-info-card,
.timeline-content,
.skill-card-detailed,
.category-card,
.skill-card-mini,
.service-card-home,
.service-card-about,
.contact-info-wrapper,
.contact-form-wrapper,
.service-content-card,
.service-sidebar-card,
.deliverable-item,
.info-card,
.stat-card,
.stat-card-home,
.testimonial-card-home,
.portfolio-link-btn,
.social-btn,
.mobile-menu-link,
.mobile-submenu-toggle {
    border-radius: var(--gemini-radius) !important;
    border: 1px solid var(--gemini-border) !important;
    background:
        linear-gradient(145deg, rgba(20, 28, 45, 0.82), rgba(9, 13, 24, 0.68)) !important;
    box-shadow: var(--gemini-shadow) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.content-wrapper::before,
.portfolio-card::before,
.project-main-content::before,
.project-info-card::before,
.timeline-content::before,
.skill-card-detailed::before,
.category-card::before,
.skill-card-mini::before,
.service-card-home::before,
.service-card-about::before,
.contact-info-wrapper::before,
.contact-form-wrapper::before,
.service-content-card::before,
.service-sidebar-card::before,
.deliverable-item::before,
.info-card::before,
.stat-card::before,
.stat-card-home::before,
.testimonial-card-home::before {
    background: linear-gradient(90deg, rgba(64, 201, 255, 0.44), rgba(139, 92, 246, 0.38), transparent) !important;
}

.portfolio-card:hover,
.service-card-home:hover,
.skill-card-detailed:hover,
.stat-card-home:hover,
.info-card:hover {
    border-color: rgba(64, 201, 255, 0.28) !important;
    box-shadow: var(--gemini-shadow), var(--gemini-glow-blue) !important;
}

.service-icon,
.info-icon,
.section-icon,
.skill-icon-wrapper,
.contact-icon-box,
.portfolio-link-btn {
    box-shadow: 0 0 28px rgba(64, 201, 255, 0.18) !important;
}

.section-title::after,
.portfolio-accent-line,
.footer-section-title::after {
    background: linear-gradient(90deg, var(--gemini-blue), var(--gemini-purple)) !important;
    box-shadow: var(--gemini-glow-blue);
}

.section-title,
.footer-section-title,
.form-title {
    position: relative;
}

.section-title::before,
.footer-section-title::before,
.form-title::before {
    content: '\2726';
    display: inline-block;
    margin-right: 0.45rem;
    color: var(--gemini-cyan);
    text-shadow: 0 0 18px rgba(64, 201, 255, 0.7);
}

.form-control,
.custom-contact-form .form-control,
.custom-contact-form .form-select {
    color: var(--gemini-text) !important;
    border-radius: var(--gemini-radius) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: rgba(8, 11, 18, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.form-control:focus,
.custom-contact-form .form-control:focus {
    border-color: rgba(64, 201, 255, 0.48) !important;
    box-shadow: 0 0 0 4px rgba(64, 201, 255, 0.12), var(--gemini-glow-blue) !important;
}

.mobile-menu-header {
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.9), rgba(139, 92, 246, 0.84)) !important;
    border-radius: 0 0 var(--gemini-radius) var(--gemini-radius);
}

.site-footer {
    position: relative;
    overflow: hidden;
    color: var(--gemini-text);
    background:
        linear-gradient(145deg, rgba(8, 11, 18, 0.98), rgba(15, 23, 42, 0.94)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.1), rgba(139, 92, 246, 0.1)) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    right: -80px;
    width: 420px;
    height: 220px;
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.18), rgba(139, 92, 246, 0.14)) !important;
    filter: blur(22px);
    pointer-events: none;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.footer-social-link,
.back-to-top,
.whatsapp-content {
    border-radius: var(--gemini-radius) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.footer-brand-title {
    color: #ffffff !important;
}

.footer-menu a,
.footer-contact-link,
.footer-contact-text {
    color: var(--gemini-muted) !important;
}

.dark-mode body {
    background-color: var(--gemini-bg) !important;
}

.dark-mode .site-header,
.dark-mode .site-footer,
.dark-mode .content-wrapper,
.dark-mode .portfolio-card,
.dark-mode .project-main-content,
.dark-mode .project-info-card,
.dark-mode .timeline-content,
.dark-mode .skill-card-detailed,
.dark-mode .category-card,
.dark-mode .skill-card-mini,
.dark-mode .service-card-home,
.dark-mode .service-card-about,
.dark-mode .contact-info-wrapper,
.dark-mode .contact-form-wrapper,
.dark-mode .service-content-card,
.dark-mode .service-sidebar-card,
.dark-mode .deliverable-item,
.dark-mode .info-card,
.dark-mode .stat-card,
.dark-mode .stat-card-home,
.dark-mode .testimonial-card-home,
.dark-mode .mobile-menu {
    color: var(--gemini-text) !important;
}

@media (max-width: 767px) {
    body::before {
        background-size: 54px 54px !important;
    }

    .hero::after,
    .about-hero::after,
    .portfolio-hero::after,
    .resume-hero::after,
    .skills-hero::after,
    .contact-hero::after,
    .page-hero::after,
    .service-page-hero::after {
        width: 66px;
        height: 66px;
        right: 18px;
        bottom: 18px;
        font-size: 1.65rem;
    }

    .home-section::before,
    .section-bg-light::before,
    .about-content::before,
    .skills-overview::before,
    .portfolio-filter::before,
    .portfolio-grid::before,
    .skills-filter::before,
    .skills-grid::before,
    .resume-summary::before,
    .experience-education::before,
    .contact-content::before,
    .page-content::before,
    .service-intro-section::before,
    .service-section::before,
    .service-archive-section::before {
        inset: 8px;
    }

    .content-wrapper,
    .portfolio-card,
    .skill-card-detailed,
    .service-card-home,
    .contact-info-wrapper,
    .contact-form-wrapper {
        border-radius: var(--gemini-radius) !important;
    }
}

/* ==================== THEME TOGGLE READABILITY FIX ==================== */
body:not(.dark-mode) {
    --theme-bg: #f6f8ff;
    --theme-panel: rgba(255, 255, 255, 0.86);
    --theme-panel-strong: rgba(255, 255, 255, 0.94);
    --theme-border: rgba(15, 23, 42, 0.12);
    --theme-text: #101827;
    --theme-muted: #526071;
    --theme-header: rgba(255, 255, 255, 0.78);
    --theme-footer: #101827;
    --theme-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
    color: var(--theme-text) !important;
    background-color: var(--theme-bg) !important;
    background-image:
        linear-gradient(125deg, rgba(64, 201, 255, 0.14), transparent 30%),
        linear-gradient(235deg, rgba(139, 92, 246, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #eef4ff 52%, #f9fbff 100%) !important;
}

body.dark-mode,
.dark-mode body {
    --theme-bg: #080b12;
    --theme-panel: rgba(17, 24, 39, 0.82);
    --theme-panel-strong: rgba(20, 28, 45, 0.94);
    --theme-border: rgba(148, 163, 184, 0.16);
    --theme-text: #f8fbff;
    --theme-muted: #aab6c8;
    --theme-header: rgba(8, 11, 18, 0.78);
    --theme-footer: #080b12;
    --theme-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    color: var(--theme-text) !important;
    background-color: var(--theme-bg) !important;
    background-image:
        linear-gradient(125deg, rgba(64, 201, 255, 0.12), transparent 28%),
        linear-gradient(235deg, rgba(139, 92, 246, 0.14), transparent 34%),
        linear-gradient(180deg, #080b12 0%, #0b1020 48%, #080b12 100%) !important;
}

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6,
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .display-5,
body:not(.dark-mode) .portfolio-title a,
body:not(.dark-mode) .skill-title,
body:not(.dark-mode) .timeline-title,
body:not(.dark-mode) .service-title-about,
body:not(.dark-mode) .info-value,
body:not(.dark-mode) .stat-number,
body:not(.dark-mode) .exp-number {
    color: var(--theme-text) !important;
}

body:not(.dark-mode) p,
body:not(.dark-mode) li,
body:not(.dark-mode) .lead,
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .portfolio-summary,
body:not(.dark-mode) .service-card-home p,
body:not(.dark-mode) .skill-years,
body:not(.dark-mode) .timeline-description,
body:not(.dark-mode) .contact-desc,
body:not(.dark-mode) .footer-description {
    color: var(--theme-muted) !important;
}

body:not(.dark-mode) .site-header {
    background: var(--theme-header) !important;
    border-bottom-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08) !important;
}

body.dark-mode .site-header,
.dark-mode body .site-header,
.dark-mode .site-header {
    background: var(--theme-header) !important;
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}

body:not(.dark-mode) .menu-link,
body:not(.dark-mode) .mobile-menu-link,
body:not(.dark-mode) .mobile-submenu-toggle {
    color: var(--theme-text) !important;
}

body:not(.dark-mode) .logo-sub,
body:not(.dark-mode) .info-item {
    color: var(--theme-muted) !important;
}

body:not(.dark-mode) .home-section::before,
body:not(.dark-mode) .section-bg-light::before,
body:not(.dark-mode) .about-content::before,
body:not(.dark-mode) .skills-overview::before,
body:not(.dark-mode) .portfolio-filter::before,
body:not(.dark-mode) .portfolio-grid::before,
body:not(.dark-mode) .skills-filter::before,
body:not(.dark-mode) .skills-grid::before,
body:not(.dark-mode) .resume-summary::before,
body:not(.dark-mode) .experience-education::before,
body:not(.dark-mode) .contact-content::before,
body:not(.dark-mode) .page-content::before,
body:not(.dark-mode) .service-intro-section::before,
body:not(.dark-mode) .service-section::before,
body:not(.dark-mode) .service-archive-section::before {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.05), rgba(139, 92, 246, 0.04)) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

body:not(.dark-mode) .content-wrapper,
body:not(.dark-mode) .portfolio-card,
body:not(.dark-mode) .project-main-content,
body:not(.dark-mode) .project-info-card,
body:not(.dark-mode) .timeline-content,
body:not(.dark-mode) .skill-card-detailed,
body:not(.dark-mode) .category-card,
body:not(.dark-mode) .skill-card-mini,
body:not(.dark-mode) .service-card-home,
body:not(.dark-mode) .service-card-about,
body:not(.dark-mode) .contact-info-wrapper,
body:not(.dark-mode) .contact-form-wrapper,
body:not(.dark-mode) .service-content-card,
body:not(.dark-mode) .service-sidebar-card,
body:not(.dark-mode) .deliverable-item,
body:not(.dark-mode) .info-card,
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .stat-card-home,
body:not(.dark-mode) .testimonial-card-home,
body:not(.dark-mode) .mobile-menu,
body:not(.dark-mode) .mobile-menu-link,
body:not(.dark-mode) .mobile-submenu-toggle,
body:not(.dark-mode) .sub-menu,
body:not(.dark-mode) .services-mega-panel {
    color: var(--theme-text) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.72)) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow) !important;
}

body.dark-mode .content-wrapper,
body.dark-mode .portfolio-card,
body.dark-mode .project-main-content,
body.dark-mode .project-info-card,
body.dark-mode .timeline-content,
body.dark-mode .skill-card-detailed,
body.dark-mode .category-card,
body.dark-mode .skill-card-mini,
body.dark-mode .service-card-home,
body.dark-mode .service-card-about,
body.dark-mode .contact-info-wrapper,
body.dark-mode .contact-form-wrapper,
body.dark-mode .service-content-card,
body.dark-mode .service-sidebar-card,
body.dark-mode .deliverable-item,
body.dark-mode .info-card,
body.dark-mode .stat-card,
body.dark-mode .stat-card-home,
body.dark-mode .testimonial-card-home,
body.dark-mode .mobile-menu,
body.dark-mode .mobile-menu-link,
body.dark-mode .mobile-submenu-toggle,
body.dark-mode .sub-menu,
body.dark-mode .services-mega-panel,
.dark-mode .content-wrapper,
.dark-mode .portfolio-card,
.dark-mode .project-main-content,
.dark-mode .project-info-card,
.dark-mode .timeline-content,
.dark-mode .skill-card-detailed,
.dark-mode .category-card,
.dark-mode .skill-card-mini,
.dark-mode .service-card-home,
.dark-mode .service-card-about,
.dark-mode .contact-info-wrapper,
.dark-mode .contact-form-wrapper,
.dark-mode .service-content-card,
.dark-mode .service-sidebar-card,
.dark-mode .deliverable-item,
.dark-mode .info-card,
.dark-mode .stat-card,
.dark-mode .stat-card-home,
.dark-mode .testimonial-card-home,
.dark-mode .mobile-menu,
.dark-mode .mobile-menu-link,
.dark-mode .mobile-submenu-toggle,
.dark-mode .sub-menu,
.dark-mode .services-mega-panel {
    color: var(--theme-text) !important;
    background:
        linear-gradient(145deg, rgba(20, 28, 45, 0.86), rgba(9, 13, 24, 0.72)) !important;
    border-color: var(--theme-border) !important;
}

body:not(.dark-mode) .form-control,
body:not(.dark-mode) .custom-contact-form .form-control,
body:not(.dark-mode) .custom-contact-form .form-select {
    color: var(--theme-text) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

body:not(.dark-mode) .site-footer {
    background:
        linear-gradient(145deg, rgba(16, 24, 39, 0.96), rgba(30, 41, 59, 0.92)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.12), rgba(139, 92, 246, 0.1)) !important;
}

body:not(.dark-mode) .theme-toggle {
    background: rgba(15, 23, 42, 0.08) !important;
    color: var(--theme-text) !important;
}

body.dark-mode .theme-toggle,
.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--theme-text) !important;
}

/* CTA sections use the Gemini surface in both themes for strong contrast. */
.home-cta,
.about-cta,
.portfolio-cta,
.resume-cta,
.skills-cta,
.service-cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(4rem, 7vw, 6.5rem) 0 !important;
    background:
        linear-gradient(145deg, rgba(8, 11, 18, 0.96), rgba(15, 23, 42, 0.88)),
        linear-gradient(105deg, rgba(64, 201, 255, 0.18), transparent 34%, rgba(139, 92, 246, 0.24) 74%, rgba(236, 72, 153, 0.1)) !important;
    color: #ffffff !important;
    text-align: center;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-cta::before,
.about-cta::before,
.portfolio-cta::before,
.resume-cta::before,
.skills-cta::before,
.service-cta-band::before {
    content: '';
    position: absolute;
    inset: 18px;
    z-index: -1;
    border-radius: var(--gemini-radius);
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.06), rgba(139, 92, 246, 0.07)) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-cta::after,
.about-cta::after,
.portfolio-cta::after,
.resume-cta::after,
.skills-cta::after,
.service-cta-band::after {
    content: '\2726';
    position: absolute;
    top: clamp(18px, 4vw, 44px);
    right: clamp(18px, 8vw, 140px);
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: var(--gemini-radius);
    color: #ffffff;
    font-size: 2rem;
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.18), rgba(139, 92, 246, 0.22)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--gemini-glow-blue), var(--gemini-glow-purple);
    pointer-events: none;
}

.home-cta .container,
.about-cta .container,
.portfolio-cta .container,
.resume-cta .container,
.skills-cta .container,
.service-cta-band .container {
    position: relative;
    z-index: 1;
}

body:not(.dark-mode) .home-cta .cta-title,
body:not(.dark-mode) .about-cta .cta-title,
body:not(.dark-mode) .portfolio-cta .cta-title,
body:not(.dark-mode) .resume-cta .cta-title,
body:not(.dark-mode) .skills-cta .cta-title,
body:not(.dark-mode) .service-cta-band .cta-title,
.dark-mode .home-cta .cta-title,
.dark-mode .about-cta .cta-title,
.dark-mode .portfolio-cta .cta-title,
.dark-mode .resume-cta .cta-title,
.dark-mode .skills-cta .cta-title,
.dark-mode .service-cta-band .cta-title {
    color: #ffffff !important;
    font-weight: 800;
    letter-spacing: 0 !important;
    text-shadow: 0 0 28px rgba(64, 201, 255, 0.16);
}

body:not(.dark-mode) .home-cta .cta-subtitle,
body:not(.dark-mode) .about-cta .cta-subtitle,
body:not(.dark-mode) .portfolio-cta .cta-subtitle,
body:not(.dark-mode) .resume-cta .cta-subtitle,
body:not(.dark-mode) .skills-cta .cta-subtitle,
body:not(.dark-mode) .service-cta-band .cta-subtitle,
.dark-mode .home-cta .cta-subtitle,
.dark-mode .about-cta .cta-subtitle,
.dark-mode .portfolio-cta .cta-subtitle,
.dark-mode .resume-cta .cta-subtitle,
.dark-mode .skills-cta .cta-subtitle,
.dark-mode .service-cta-band .cta-subtitle {
    color: rgba(226, 232, 240, 0.82) !important;
}

.home-cta .cta-btn-primary,
.about-cta .cta-btn-primary,
.portfolio-cta .cta-btn-primary,
.resume-cta .cta-btn-primary,
.skills-cta .cta-btn-primary,
.service-cta-band .cta-btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--gemini-blue), var(--gemini-purple)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 14px 32px rgba(64, 201, 255, 0.2), 0 0 28px rgba(139, 92, 246, 0.18) !important;
}

.home-cta .cta-btn-secondary,
.about-cta .cta-btn-secondary,
.portfolio-cta .cta-btn-secondary,
.resume-cta .cta-btn-secondary,
.skills-cta .cta-btn-secondary,
.service-cta-band .cta-btn-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}

.home-cta .cta-btn-primary:hover,
.about-cta .cta-btn-primary:hover,
.portfolio-cta .cta-btn-primary:hover,
.resume-cta .cta-btn-primary:hover,
.skills-cta .cta-btn-primary:hover,
.service-cta-band .cta-btn-primary:hover,
.home-cta .cta-btn-secondary:hover,
.about-cta .cta-btn-secondary:hover,
.portfolio-cta .cta-btn-secondary:hover,
.resume-cta .cta-btn-secondary:hover,
.skills-cta .cta-btn-secondary:hover,
.service-cta-band .cta-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(64, 201, 255, 0.24), 0 0 34px rgba(139, 92, 246, 0.2) !important;
}

@media (max-width: 767px) {
    .home-cta::before,
    .about-cta::before,
    .portfolio-cta::before,
    .resume-cta::before,
    .skills-cta::before,
    .service-cta-band::before {
        inset: 10px;
    }

    .home-cta::after,
    .about-cta::after,
    .portfolio-cta::after,
    .resume-cta::after,
    .skills-cta::after,
    .service-cta-band::after {
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
        right: 16px;
    }

    .home-cta .cta-buttons,
    .about-cta .cta-buttons,
    .portfolio-cta .cta-buttons,
    .resume-cta .cta-buttons,
    .skills-cta .cta-buttons,
    .service-cta-band .cta-buttons {
        gap: 0.75rem;
    }
}

/* Hero bands stay dark in both themes, so their copy must remain light. */
body:not(.dark-mode) .hero h1,
body:not(.dark-mode) .about-hero h1,
body:not(.dark-mode) .portfolio-hero h1,
body:not(.dark-mode) .resume-hero h1,
body:not(.dark-mode) .skills-hero h1,
body:not(.dark-mode) .contact-hero h1,
body:not(.dark-mode) .page-hero h1,
body:not(.dark-mode) .service-page-hero h1,
body:not(.dark-mode) .hero .lead,
body:not(.dark-mode) .about-hero .lead,
body:not(.dark-mode) .portfolio-hero .lead,
body:not(.dark-mode) .resume-hero .lead,
body:not(.dark-mode) .skills-hero .lead,
body:not(.dark-mode) .contact-hero .lead,
body:not(.dark-mode) .page-hero .lead,
body:not(.dark-mode) .service-page-hero .lead,
body:not(.dark-mode) .hero-subtitle,
body:not(.dark-mode) .service-page-hero__subtitle,
.dark-mode .hero h1,
.dark-mode .about-hero h1,
.dark-mode .portfolio-hero h1,
.dark-mode .resume-hero h1,
.dark-mode .skills-hero h1,
.dark-mode .contact-hero h1,
.dark-mode .page-hero h1,
.dark-mode .service-page-hero h1,
.dark-mode .hero .lead,
.dark-mode .about-hero .lead,
.dark-mode .portfolio-hero .lead,
.dark-mode .resume-hero .lead,
.dark-mode .skills-hero .lead,
.dark-mode .contact-hero .lead,
.dark-mode .page-hero .lead,
.dark-mode .service-page-hero .lead,
.dark-mode .hero-subtitle,
.dark-mode .service-page-hero__subtitle {
    color: #ffffff !important;
}

body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item,
body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item a,
body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-separator,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item a,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-separator,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item a,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-separator,
.dark-mode .theme-breadcrumb .breadcrumb-item,
.dark-mode .theme-breadcrumb .breadcrumb-item a,
.dark-mode .theme-breadcrumb .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.72) !important;
}

body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item.active,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item.active,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item.active,
.dark-mode .theme-breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
}

/* ==================== GEMINI COVERAGE AUDIT FIXES ==================== */
.single-project-hero,
.error-404-hero {
    isolation: isolate;
    background-color: var(--gemini-bg) !important;
}

.error-404-hero {
    background:
        radial-gradient(circle at 15% 18%, rgba(64, 201, 255, 0.28), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(139, 92, 246, 0.30), transparent 32%),
        linear-gradient(135deg, #080b12 0%, #101728 55%, #111827 100%) !important;
}

.single-project-hero::before,
.error-404-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(64, 201, 255, 0.30), transparent 28%),
        radial-gradient(circle at 84% 22%, rgba(139, 92, 246, 0.30), transparent 30%),
        linear-gradient(135deg, rgba(8, 11, 18, 0.82), rgba(12, 18, 32, 0.92));
    pointer-events: none;
}

.single-project-hero::after,
.error-404-hero::after {
    content: '\2726';
    position: absolute;
    right: clamp(1.5rem, 5vw, 5rem);
    top: clamp(5rem, 12vw, 9rem);
    z-index: 1;
    color: rgba(64, 201, 255, 0.72);
    font-size: clamp(2rem, 5vw, 4rem);
    text-shadow: 0 0 26px rgba(64, 201, 255, 0.65);
    pointer-events: none;
}

.single-project-hero .container,
.error-404-hero .hero-container {
    position: relative;
    z-index: 2;
}

.single-project-hero .hero-overlay,
.error-404-hero .hero-overlay {
    z-index: 1;
    opacity: 1 !important;
    background:
        linear-gradient(135deg, rgba(8, 11, 18, 0.50), rgba(17, 24, 39, 0.70)),
        linear-gradient(90deg, rgba(64, 201, 255, 0.14), rgba(139, 92, 246, 0.16)) !important;
    backdrop-filter: blur(4px);
}

.hero-glass-card,
.single-project-hero .hero-glass-card {
    background: linear-gradient(145deg, rgba(18, 25, 42, 0.78), rgba(8, 11, 18, 0.62)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body:not(.dark-mode) .single-project-hero h1,
body:not(.dark-mode) .single-project-hero .project-title,
body:not(.dark-mode) .single-project-hero .project-subtitle,
body:not(.dark-mode) .single-project-hero .scroll-text,
body:not(.dark-mode) .error-404-hero h1,
body:not(.dark-mode) .error-404-hero h2,
body:not(.dark-mode) .error-404-hero p,
.dark-mode .single-project-hero h1,
.dark-mode .single-project-hero .project-title,
.dark-mode .single-project-hero .project-subtitle,
.dark-mode .single-project-hero .scroll-text,
.dark-mode .error-404-hero h1,
.dark-mode .error-404-hero h2,
.dark-mode .error-404-hero p {
    color: #ffffff !important;
}

/* General breadcrumbs live on light cards too, so they need theme-aware colors. */
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item a,
body:not(.dark-mode) .theme-breadcrumb .breadcrumb-separator {
    color: rgba(16, 24, 39, 0.66) !important;
}

body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item.active {
    color: #101827 !important;
}

.dark-mode .theme-breadcrumb .breadcrumb-item,
.dark-mode .theme-breadcrumb .breadcrumb-item a,
.dark-mode .theme-breadcrumb .breadcrumb-separator {
    color: rgba(226, 232, 240, 0.70) !important;
}

.dark-mode .theme-breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
}

body:not(.dark-mode) .theme-breadcrumb .breadcrumb-item a:hover,
.dark-mode .theme-breadcrumb .breadcrumb-item a:hover {
    color: var(--gemini-blue) !important;
}

/* Hero breadcrumbs sit on dark gradient surfaces in both themes. */
body:not(.dark-mode) .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-item,
body:not(.dark-mode) .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-item a,
body:not(.dark-mode) .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-separator,
body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item,
body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item a,
body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-separator,
.dark-mode .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-item,
.dark-mode .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-item a,
.dark-mode .service-page-hero__breadcrumbs .theme-breadcrumb .breadcrumb-separator,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item a,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.76) !important;
}

body:not(.dark-mode) .service-page-hero__breadcrumbs .breadcrumb-item.active,
.dark-mode .service-page-hero__breadcrumbs .breadcrumb-item.active {
    color: #ffffff !important;
}

.service-category-hero-home__link {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.service-category-hero-home__link i {
    color: var(--gemini-blue) !important;
}

body:not(.dark-mode) .premium-card,
body:not(.dark-mode) .project-info-card {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #101827 !important;
    border: 1px solid rgba(64, 201, 255, 0.16) !important;
}

.dark-mode .premium-card,
.dark-mode .project-info-card {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(8, 11, 18, 0.88)) !important;
    color: #e8f0ff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body:not(.dark-mode) .premium-card h1,
body:not(.dark-mode) .premium-card h2,
body:not(.dark-mode) .premium-card h3,
body:not(.dark-mode) .premium-card h4,
body:not(.dark-mode) .premium-card h5,
body:not(.dark-mode) .premium-card h6,
.dark-mode .premium-card h1,
.dark-mode .premium-card h2,
.dark-mode .premium-card h3,
.dark-mode .premium-card h4,
.dark-mode .premium-card h5,
.dark-mode .premium-card h6 {
    color: inherit !important;
}

@media (max-width: 767.98px) {
    .single-project-hero,
    .error-404-hero {
        min-height: auto;
        padding: 7rem 0 4rem;
        background-attachment: scroll;
    }

    .hero-glass-card,
    .single-project-hero .hero-glass-card {
        padding: 2rem 1.25rem !important;
        border-radius: 1.5rem !important;
    }
}

/* ==================== GEMINI TOP HEADER BAR ==================== */
.top-info-bar {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(8, 11, 18, 0.96), rgba(17, 24, 39, 0.90)),
        radial-gradient(circle at 12% 50%, rgba(64, 201, 255, 0.26), transparent 32%),
        radial-gradient(circle at 88% 50%, rgba(139, 92, 246, 0.25), transparent 34%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.top-info-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(64, 201, 255, 0.10), transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 72px);
    opacity: 0.65;
    pointer-events: none;
}

.top-info-bar .container,
.top-info-bar .row,
.top-info-bar .contact-info,
.top-info-bar .social-links {
    position: relative;
    z-index: 1;
}

.top-info-bar .contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.top-info-bar .info-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.86) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 0 18px rgba(64, 201, 255, 0.12);
}

.top-info-bar .info-item i {
    color: var(--gemini-blue) !important;
    filter: drop-shadow(0 0 8px rgba(64, 201, 255, 0.45));
}

.top-info-bar .social-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.top-info-bar .social-link,
.top-info-bar .theme-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

.top-info-bar .social-link:hover,
.top-info-bar .theme-toggle:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(64, 201, 255, 0.88), rgba(139, 92, 246, 0.88)) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(64, 201, 255, 0.30), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

.top-info-bar .theme-toggle i,
.top-info-bar .social-link i {
    color: inherit !important;
}

body:not(.dark-mode) .top-info-bar,
body.dark-mode .top-info-bar,
.dark-mode .top-info-bar {
    background:
        linear-gradient(90deg, rgba(8, 11, 18, 0.96), rgba(17, 24, 39, 0.90)),
        radial-gradient(circle at 12% 50%, rgba(64, 201, 255, 0.26), transparent 32%),
        radial-gradient(circle at 88% 50%, rgba(139, 92, 246, 0.25), transparent 34%) !important;
}

@media (max-width: 767.98px) {
    .top-info-bar {
        display: none !important;
    }
}

/* ==================== GEMINI SKILL ICON READABILITY ==================== */
.skill-card-detailed .skill-icon-wrapper,
.category-card .category-icon {
    position: relative !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 26%),
        linear-gradient(135deg, rgba(64, 201, 255, 0.92), rgba(139, 92, 246, 0.88)) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 0 26px rgba(64, 201, 255, 0.28), 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"] {
    background:
        radial-gradient(circle at 25% 18%, rgba(64, 201, 255, 0.34), transparent 32%),
        radial-gradient(circle at 78% 82%, rgba(139, 92, 246, 0.38), transparent 34%),
        linear-gradient(145deg, rgba(8, 11, 18, 0.98), rgba(17, 24, 39, 0.94)) !important;
    border-color: rgba(64, 201, 255, 0.28) !important;
    border-radius: 1rem !important;
    transform: rotate(0deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 12px rgba(64, 201, 255, 0.24),
        0 0 26px rgba(64, 201, 255, 0.14),
        0 14px 30px rgba(0, 0, 0, 0.32) !important;
}

.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"]::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 1.35rem;
    background: radial-gradient(circle, rgba(64, 201, 255, 0.18), transparent 64%);
    filter: blur(7px);
    opacity: 0.55;
    pointer-events: none;
}

.skill-card-detailed .skill-icon,
.skill-card-detailed .skill-icon::before,
.skill-card-detailed .skill-icon-wrapper > i,
.skill-card-detailed .skill-icon-wrapper > i::before,
.skill-card-detailed .skill-icon-wrapper .fa-solid,
.skill-card-detailed .skill-icon-wrapper .fa-brands,
.skill-card-detailed .skill-icon-wrapper .fa-regular,
.skill-card-detailed .skill-icon-wrapper .svg-inline--fa,
.category-card .category-icon i,
.category-card .category-icon i::before,
.category-card .category-icon .svg-inline--fa {
    color: #ffffff !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.45), 0 0 26px rgba(64, 201, 255, 0.40) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(64, 201, 255, 0.55)) !important;
}

.skill-card-detailed .skill-icon-wrapper .fa-brands::before {
    color: #7dd3fc !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #7dd3fc !important;
}

.skill-card-detailed .skill-icon-wrapper .fa-solid::before,
.skill-card-detailed .skill-icon-wrapper .fa-regular::before {
    color: #7dd3fc !important;
    font-family: "Font Awesome 6 Free" !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #7dd3fc !important;
}

.skill-card-detailed .skill-icon-wrapper .fa-solid::before {
    font-weight: 900 !important;
}

.skill-card-detailed .skill-icon-wrapper .fa-regular::before {
    font-weight: 400 !important;
}

.skill-card-detailed .skill-icon svg,
.skill-card-detailed .skill-icon-wrapper svg,
.skill-card-detailed .skill-icon-wrapper svg path,
.category-card .category-icon svg,
.category-card .category-icon svg path {
    fill: #7dd3fc !important;
    stroke: none !important;
    color: #7dd3fc !important;
    opacity: 1 !important;
}

.swal2-popup {
    background: #ffffff !important;
    color: #1f2937 !important;
}

.swal2-title,
#swal2-title,
.swal2-popup .swal2-title {
    color: #0f172a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0f172a !important;
    text-shadow: none !important;
    filter: none !important;
}

.swal2-html-container,
.swal2-content,
.swal2-popup p {
    color: #475569 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #475569 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.24) !important;
}

.swal2-confirm {
    color: #ffffff !important;
}

.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"] .skill-icon,
.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"] .skill-icon::before,
.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"] svg,
.skill-card-detailed .skill-icon-wrapper[data-icon-tone="gemini"] svg path {
    color: #8be9ff !important;
    fill: #8be9ff !important;
    stroke: none !important;
    -webkit-text-fill-color: #8be9ff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 7px rgba(64, 201, 255, 0.48)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.18)) !important;
}

.skill-card-detailed:hover .skill-icon-wrapper[data-icon-tone="gemini"] {
    transform: translateY(-3px) rotate(5deg) scale(1.05) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 16px rgba(64, 201, 255, 0.30),
        0 0 34px rgba(64, 201, 255, 0.18),
        0 18px 38px rgba(0, 0, 0, 0.38) !important;
}

.skill-card-detailed .skill-years i {
    color: var(--gemini-blue) !important;
}

/* ==================== GEMINI SKILL CARD DETAILS ==================== */
.skill-card-detailed .skill-level-badge,
.skill-card-detailed .skill-category-tag {
    color: #8fb0ff !important;
    background: rgba(64, 201, 255, 0.10) !important;
    border: 1px solid rgba(64, 201, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.skill-card-detailed .skill-years,
.skill-card-detailed .proficiency-label {
    color: rgba(226, 232, 240, 0.76) !important;
}

body:not(.dark-mode) .skill-card-detailed .skill-years,
body:not(.dark-mode) .skill-card-detailed .proficiency-label {
    color: rgba(16, 24, 39, 0.66) !important;
}

.skill-card-detailed .proficiency-percent {
    color: #8fb0ff !important;
    text-shadow: 0 0 16px rgba(64, 201, 255, 0.24);
}

.skill-card-detailed .progress-bar-bg {
    height: 8px !important;
    background: rgba(148, 163, 184, 0.20) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.28) !important;
}

body:not(.dark-mode) .skill-card-detailed .progress-bar-bg {
    background: rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
}

.skill-card-detailed .progress-bar-fill {
    background: linear-gradient(90deg, var(--gemini-blue), #6aa8ff 48%, var(--gemini-purple)) !important;
    box-shadow: 0 0 20px rgba(64, 201, 255, 0.40), 0 0 28px rgba(139, 92, 246, 0.20) !important;
}

.skill-card-detailed .progress-bar-fill::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent) !important;
}

/* ==================== GEMINI ABOUT MINI SKILL ICONS ==================== */
.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"] {
    width: 70px !important;
    height: 70px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem !important;
    color: #7dd3fc !important;
    -webkit-text-fill-color: #7dd3fc !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    background:
        radial-gradient(circle at 25% 18%, rgba(64, 201, 255, 0.34), transparent 32%),
        radial-gradient(circle at 78% 82%, rgba(139, 92, 246, 0.38), transparent 34%),
        linear-gradient(145deg, rgba(8, 11, 18, 0.98), rgba(17, 24, 39, 0.94)) !important;
    border: 1px solid rgba(64, 201, 255, 0.28) !important;
    border-radius: 1rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 26px rgba(64, 201, 255, 0.28),
        0 16px 34px rgba(0, 0, 0, 0.34) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 12px rgba(64, 201, 255, 0.55)) !important;
}

.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"]::before {
    color: #7dd3fc !important;
    -webkit-text-fill-color: #7dd3fc !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(64, 201, 255, 0.72)) !important;
}

.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"].fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"].fa-solid::before,
.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"].fa-regular::before {
    font-family: "Font Awesome 6 Free" !important;
}

.skill-card-mini .skill-mini-icon[data-icon-tone="gemini"].fa-solid::before {
    font-weight: 900 !important;
}

.skill-card-mini:hover .skill-mini-icon[data-icon-tone="gemini"] {
    transform: translateY(-3px) rotate(5deg) scale(1.05) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 34px rgba(64, 201, 255, 0.36),
        0 18px 38px rgba(0, 0, 0, 0.38) !important;
}

/* ==================== FINAL THEME CONTRAST GUARD ==================== */
body:not(.dark-mode) {
    --readable-title: #101827;
    --readable-copy: #526071;
    --readable-soft: #64748b;
    --readable-panel: rgba(255, 255, 255, 0.90);
    --readable-panel-strong: rgba(255, 255, 255, 0.96);
    --readable-border: rgba(15, 23, 42, 0.12);
}

body.dark-mode,
.dark-mode body {
    --readable-title: #f8fbff;
    --readable-copy: #cbd7e8;
    --readable-soft: #aab6c8;
    --readable-panel: rgba(17, 24, 39, 0.88);
    --readable-panel-strong: rgba(20, 28, 45, 0.96);
    --readable-border: rgba(148, 163, 184, 0.16);
}

body:not(.dark-mode) .content-wrapper,
body:not(.dark-mode) .entry-content,
body:not(.dark-mode) .portfolio-info,
body:not(.dark-mode) .project-main-content,
body:not(.dark-mode) .project-info-card,
body:not(.dark-mode) .card-content,
body:not(.dark-mode) .timeline-content,
body:not(.dark-mode) .skill-card-detailed,
body:not(.dark-mode) .category-card,
body:not(.dark-mode) .skill-card-mini,
body:not(.dark-mode) .service-card-home,
body:not(.dark-mode) .service-card-about,
body:not(.dark-mode) .service-content-card,
body:not(.dark-mode) .service-sidebar-card,
body:not(.dark-mode) .service-info-card,
body:not(.dark-mode) .service-benefit-card,
body:not(.dark-mode) .contact-info-wrapper,
body:not(.dark-mode) .contact-form-wrapper,
body:not(.dark-mode) .info-card,
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .stat-card-home,
body:not(.dark-mode) .testimonial-card-home,
body:not(.dark-mode) .filter-btn,
body:not(.dark-mode) .sidebar-info-row,
body:not(.dark-mode) .deliverable-item,
body:not(.dark-mode) .premium-card,
body:not(.dark-mode) .related-project-card,
body:not(.dark-mode) .mobile-menu,
body:not(.dark-mode) .mobile-menu-link,
body:not(.dark-mode) .mobile-submenu-toggle,
body:not(.dark-mode) .mobile-services-panel,
body:not(.dark-mode) .services-mega-panel,
body:not(.dark-mode) .sub-menu {
    color: var(--readable-title) !important;
    background: var(--readable-panel) !important;
    border-color: var(--readable-border) !important;
}

body.dark-mode .content-wrapper,
body.dark-mode .entry-content,
body.dark-mode .portfolio-info,
body.dark-mode .project-main-content,
body.dark-mode .project-info-card,
body.dark-mode .card-content,
body.dark-mode .timeline-content,
body.dark-mode .skill-card-detailed,
body.dark-mode .category-card,
body.dark-mode .skill-card-mini,
body.dark-mode .service-card-home,
body.dark-mode .service-card-about,
body.dark-mode .service-content-card,
body.dark-mode .service-sidebar-card,
body.dark-mode .service-info-card,
body.dark-mode .service-benefit-card,
body.dark-mode .contact-info-wrapper,
body.dark-mode .contact-form-wrapper,
body.dark-mode .info-card,
body.dark-mode .stat-card,
body.dark-mode .stat-card-home,
body.dark-mode .testimonial-card-home,
body.dark-mode .filter-btn,
body.dark-mode .sidebar-info-row,
body.dark-mode .deliverable-item,
body.dark-mode .premium-card,
body.dark-mode .related-project-card,
body.dark-mode .mobile-menu,
body.dark-mode .mobile-menu-link,
body.dark-mode .mobile-submenu-toggle,
body.dark-mode .mobile-services-panel,
body.dark-mode .services-mega-panel,
body.dark-mode .sub-menu,
.dark-mode .content-wrapper,
.dark-mode .entry-content,
.dark-mode .portfolio-info,
.dark-mode .project-main-content,
.dark-mode .project-info-card,
.dark-mode .card-content,
.dark-mode .timeline-content,
.dark-mode .skill-card-detailed,
.dark-mode .category-card,
.dark-mode .skill-card-mini,
.dark-mode .service-card-home,
.dark-mode .service-card-about,
.dark-mode .service-content-card,
.dark-mode .service-sidebar-card,
.dark-mode .service-info-card,
.dark-mode .service-benefit-card,
.dark-mode .contact-info-wrapper,
.dark-mode .contact-form-wrapper,
.dark-mode .info-card,
.dark-mode .stat-card,
.dark-mode .stat-card-home,
.dark-mode .testimonial-card-home,
.dark-mode .filter-btn,
.dark-mode .sidebar-info-row,
.dark-mode .deliverable-item,
.dark-mode .premium-card,
.dark-mode .related-project-card,
.dark-mode .mobile-menu,
.dark-mode .mobile-menu-link,
.dark-mode .mobile-submenu-toggle,
.dark-mode .mobile-services-panel,
.dark-mode .services-mega-panel,
.dark-mode .sub-menu {
    color: var(--readable-title) !important;
    background: var(--readable-panel) !important;
    border-color: var(--readable-border) !important;
}

body:not(.dark-mode) h1:not(.text-white),
body:not(.dark-mode) h2:not(.text-white),
body:not(.dark-mode) h3:not(.text-white),
body:not(.dark-mode) h4:not(.text-white),
body:not(.dark-mode) h5:not(.text-white),
body:not(.dark-mode) h6:not(.text-white),
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .display-5,
body:not(.dark-mode) .about-heading,
body:not(.dark-mode) .portfolio-title,
body:not(.dark-mode) .portfolio-title a,
body:not(.dark-mode) .resume-name,
body:not(.dark-mode) .timeline-title,
body:not(.dark-mode) .skill-title,
body:not(.dark-mode) .skill-mini-title,
body:not(.dark-mode) .category-title,
body:not(.dark-mode) .service-title-about,
body:not(.dark-mode) .service-intro__title,
body:not(.dark-mode) .service-detail-block__title,
body:not(.dark-mode) .service-section__heading h2,
body:not(.dark-mode) .service-info-card h3,
body:not(.dark-mode) .service-benefit-card h3,
body:not(.dark-mode) .contact-heading,
body:not(.dark-mode) .form-title,
body:not(.dark-mode) .info-value,
body:not(.dark-mode) .detail-value,
body:not(.dark-mode) .tech-value,
body:not(.dark-mode) .stat-number,
body:not(.dark-mode) .exp-number {
    color: var(--readable-title) !important;
}

body.dark-mode h1:not(.text-white),
body.dark-mode h2:not(.text-white),
body.dark-mode h3:not(.text-white),
body.dark-mode h4:not(.text-white),
body.dark-mode h5:not(.text-white),
body.dark-mode h6:not(.text-white),
body.dark-mode .section-title,
body.dark-mode .display-5,
body.dark-mode .about-heading,
body.dark-mode .portfolio-title,
body.dark-mode .portfolio-title a,
body.dark-mode .resume-name,
body.dark-mode .timeline-title,
body.dark-mode .skill-title,
body.dark-mode .skill-mini-title,
body.dark-mode .category-title,
body.dark-mode .service-title-about,
body.dark-mode .service-intro__title,
body.dark-mode .service-detail-block__title,
body.dark-mode .service-section__heading h2,
body.dark-mode .service-info-card h3,
body.dark-mode .service-benefit-card h3,
body.dark-mode .contact-heading,
body.dark-mode .form-title,
body.dark-mode .info-value,
body.dark-mode .detail-value,
body.dark-mode .tech-value,
body.dark-mode .stat-number,
body.dark-mode .exp-number,
.dark-mode h1:not(.text-white),
.dark-mode h2:not(.text-white),
.dark-mode h3:not(.text-white),
.dark-mode h4:not(.text-white),
.dark-mode h5:not(.text-white),
.dark-mode h6:not(.text-white),
.dark-mode .section-title,
.dark-mode .display-5,
.dark-mode .about-heading,
.dark-mode .portfolio-title,
.dark-mode .portfolio-title a,
.dark-mode .resume-name,
.dark-mode .timeline-title,
.dark-mode .skill-title,
.dark-mode .skill-mini-title,
.dark-mode .category-title,
.dark-mode .service-title-about,
.dark-mode .service-intro__title,
.dark-mode .service-detail-block__title,
.dark-mode .service-section__heading h2,
.dark-mode .service-info-card h3,
.dark-mode .service-benefit-card h3,
.dark-mode .contact-heading,
.dark-mode .form-title,
.dark-mode .info-value,
.dark-mode .detail-value,
.dark-mode .tech-value,
.dark-mode .stat-number,
.dark-mode .exp-number {
    color: var(--readable-title) !important;
}

body:not(.dark-mode) p:not(.text-white):not(.text-white-50),
body:not(.dark-mode) li:not(.breadcrumb-item),
body:not(.dark-mode) .lead:not(.text-white),
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .text-body-secondary,
body:not(.dark-mode) .text-body-tertiary,
body:not(.dark-mode) .about-bio,
body:not(.dark-mode) .service-desc-about,
body:not(.dark-mode) .service-intro__text,
body:not(.dark-mode) .service-intro__text p,
body:not(.dark-mode) .service-detail-block__text,
body:not(.dark-mode) .service-detail-block__text p,
body:not(.dark-mode) .service-info-card p,
body:not(.dark-mode) .service-benefit-card p,
body:not(.dark-mode) .portfolio-summary,
body:not(.dark-mode) .portfolio-meta,
body:not(.dark-mode) .timeline-description,
body:not(.dark-mode) .skill-description p,
body:not(.dark-mode) .skill-years,
body:not(.dark-mode) .skill-mini-years,
body:not(.dark-mode) .category-desc,
body:not(.dark-mode) .contact-desc,
body:not(.dark-mode) .contact-item-content p,
body:not(.dark-mode) .info-label,
body:not(.dark-mode) .detail-label,
body:not(.dark-mode) .tech-category,
body:not(.dark-mode) .stat-label {
    color: var(--readable-copy) !important;
}

body.dark-mode p:not(.text-white):not(.text-white-50),
body.dark-mode li:not(.breadcrumb-item),
body.dark-mode .lead:not(.text-white),
body.dark-mode .text-muted,
body.dark-mode .text-body-secondary,
body.dark-mode .text-body-tertiary,
body.dark-mode .about-bio,
body.dark-mode .service-desc-about,
body.dark-mode .service-intro__text,
body.dark-mode .service-intro__text p,
body.dark-mode .service-detail-block__text,
body.dark-mode .service-detail-block__text p,
body.dark-mode .service-info-card p,
body.dark-mode .service-benefit-card p,
body.dark-mode .portfolio-summary,
body.dark-mode .portfolio-meta,
body.dark-mode .timeline-description,
body.dark-mode .skill-description p,
body.dark-mode .skill-years,
body.dark-mode .skill-mini-years,
body.dark-mode .category-desc,
body.dark-mode .contact-desc,
body.dark-mode .contact-item-content p,
body.dark-mode .info-label,
body.dark-mode .detail-label,
body.dark-mode .tech-category,
body.dark-mode .stat-label,
.dark-mode p:not(.text-white):not(.text-white-50),
.dark-mode li:not(.breadcrumb-item),
.dark-mode .lead:not(.text-white),
.dark-mode .text-muted,
.dark-mode .text-body-secondary,
.dark-mode .text-body-tertiary,
.dark-mode .about-bio,
.dark-mode .service-desc-about,
.dark-mode .service-intro__text,
.dark-mode .service-intro__text p,
.dark-mode .service-detail-block__text,
.dark-mode .service-detail-block__text p,
.dark-mode .service-info-card p,
.dark-mode .service-benefit-card p,
.dark-mode .portfolio-summary,
.dark-mode .portfolio-meta,
.dark-mode .timeline-description,
.dark-mode .skill-description p,
.dark-mode .skill-years,
.dark-mode .skill-mini-years,
.dark-mode .category-desc,
.dark-mode .contact-desc,
.dark-mode .contact-item-content p,
.dark-mode .info-label,
.dark-mode .detail-label,
.dark-mode .tech-category,
.dark-mode .stat-label {
    color: var(--readable-copy) !important;
}

body:not(.dark-mode) .text-white:not(.btn):not(.badge),
body:not(.dark-mode) .text-light:not(.btn):not(.badge) {
    color: var(--readable-title) !important;
}

body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-body,
body.dark-mode .text-body-secondary,
body.dark-mode .text-body-tertiary,
.dark-mode .text-dark,
.dark-mode .text-black,
.dark-mode .text-body,
.dark-mode .text-body-secondary,
.dark-mode .text-body-tertiary {
    color: var(--readable-copy) !important;
}

body:not(.dark-mode) .bg-dark,
body:not(.dark-mode) .bg-black {
    background: #101827 !important;
    color: #ffffff !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body,
body.dark-mode .bg-body-secondary,
body.dark-mode .bg-body-tertiary,
.dark-mode .bg-white,
.dark-mode .bg-light,
.dark-mode .bg-body,
.dark-mode .bg-body-secondary,
.dark-mode .bg-body-tertiary {
    background: var(--readable-panel-strong) !important;
    color: var(--readable-title) !important;
}

body:not(.dark-mode) input,
body:not(.dark-mode) textarea,
body:not(.dark-mode) select,
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select {
    color: var(--readable-title) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--readable-border) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode .form-select,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .form-select {
    color: var(--readable-title) !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: var(--readable-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: rgba(203, 215, 232, 0.58) !important;
}

body:not(.dark-mode) .hero,
body:not(.dark-mode) .about-hero,
body:not(.dark-mode) .portfolio-hero,
body:not(.dark-mode) .resume-hero,
body:not(.dark-mode) .skills-hero,
body:not(.dark-mode) .contact-hero,
body:not(.dark-mode) .page-hero,
body:not(.dark-mode) .service-page-hero,
body:not(.dark-mode) .single-project-hero,
body:not(.dark-mode) .error-404-hero,
body:not(.dark-mode) .home-cta,
body:not(.dark-mode) .about-cta,
body:not(.dark-mode) .portfolio-cta,
body:not(.dark-mode) .resume-cta,
body:not(.dark-mode) .skills-cta,
body:not(.dark-mode) .service-cta-band {
    color: #ffffff !important;
}

body:not(.dark-mode) .hero h1,
body:not(.dark-mode) .hero h2,
body:not(.dark-mode) .hero p,
body:not(.dark-mode) .about-hero h1,
body:not(.dark-mode) .about-hero p,
body:not(.dark-mode) .portfolio-hero h1,
body:not(.dark-mode) .portfolio-hero p,
body:not(.dark-mode) .resume-hero h1,
body:not(.dark-mode) .resume-hero p,
body:not(.dark-mode) .skills-hero h1,
body:not(.dark-mode) .skills-hero p,
body:not(.dark-mode) .contact-hero h1,
body:not(.dark-mode) .contact-hero p,
body:not(.dark-mode) .page-hero h1,
body:not(.dark-mode) .page-hero p,
body:not(.dark-mode) .service-page-hero h1,
body:not(.dark-mode) .service-page-hero p,
body:not(.dark-mode) .single-project-hero h1,
body:not(.dark-mode) .single-project-hero p,
body:not(.dark-mode) .error-404-hero h1,
body:not(.dark-mode) .error-404-hero h2,
body:not(.dark-mode) .error-404-hero p,
body:not(.dark-mode) .home-cta h2,
body:not(.dark-mode) .home-cta p,
body:not(.dark-mode) .about-cta h2,
body:not(.dark-mode) .about-cta p,
body:not(.dark-mode) .portfolio-cta h2,
body:not(.dark-mode) .portfolio-cta p,
body:not(.dark-mode) .resume-cta h2,
body:not(.dark-mode) .resume-cta p,
body:not(.dark-mode) .skills-cta h2,
body:not(.dark-mode) .skills-cta p,
body:not(.dark-mode) .service-cta-band h2,
body:not(.dark-mode) .service-cta-band p {
    color: #ffffff !important;
}

body:not(.dark-mode) .site-footer,
body:not(.dark-mode) .site-footer p,
body:not(.dark-mode) .site-footer li,
body:not(.dark-mode) .site-footer a,
body:not(.dark-mode) .site-footer span,
body:not(.dark-mode) .site-footer h1,
body:not(.dark-mode) .site-footer h2,
body:not(.dark-mode) .site-footer h3,
body:not(.dark-mode) .site-footer h4,
body:not(.dark-mode) .site-footer h5,
body:not(.dark-mode) .site-footer h6,
body.dark-mode .site-footer,
body.dark-mode .site-footer p,
body.dark-mode .site-footer li,
body.dark-mode .site-footer a,
body.dark-mode .site-footer span,
body.dark-mode .site-footer h1,
body.dark-mode .site-footer h2,
body.dark-mode .site-footer h3,
body.dark-mode .site-footer h4,
body.dark-mode .site-footer h5,
body.dark-mode .site-footer h6,
.dark-mode .site-footer,
.dark-mode .site-footer p,
.dark-mode .site-footer li,
.dark-mode .site-footer a,
.dark-mode .site-footer span,
.dark-mode .site-footer h1,
.dark-mode .site-footer h2,
.dark-mode .site-footer h3,
.dark-mode .site-footer h4,
.dark-mode .site-footer h5,
.dark-mode .site-footer h6 {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* ==================== DATA-THEME FINAL OVERRIDES ==================== */
html[data-theme="light"] body,
body[data-theme="light"],
body.theme-light {
    color: #101827 !important;
    background-color: #f6f8ff !important;
}

html[data-theme="dark"] body,
body[data-theme="dark"],
body.theme-dark {
    color: #f8fbff !important;
    background-color: #080b12 !important;
}

html[data-theme="light"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card, .mobile-menu, .mobile-menu-link, .mobile-submenu-toggle, .mobile-services-panel, .services-mega-panel, .sub-menu),
body[data-theme="light"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card, .mobile-menu, .mobile-menu-link, .mobile-submenu-toggle, .mobile-services-panel, .services-mega-panel, .sub-menu) {
    color: #101827 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="dark"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card, .mobile-menu, .mobile-menu-link, .mobile-submenu-toggle, .mobile-services-panel, .services-mega-panel, .sub-menu),
body[data-theme="dark"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card, .mobile-menu, .mobile-menu-link, .mobile-submenu-toggle, .mobile-services-panel, .services-mega-panel, .sub-menu) {
    color: #f8fbff !important;
    background: rgba(17, 24, 39, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="light"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(h1, h2, h3, h4, h5, h6, .section-title, .display-5, .portfolio-title, .portfolio-title a, .resume-name, .timeline-title, .skill-title, .skill-mini-title, .category-title, .service-title-about, .service-intro__title, .service-detail-block__title, .contact-heading, .form-title, .info-value, .detail-value, .tech-value, .stat-number, .exp-number),
body[data-theme="light"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(h1, h2, h3, h4, h5, h6, .section-title, .display-5, .portfolio-title, .portfolio-title a, .resume-name, .timeline-title, .skill-title, .skill-mini-title, .category-title, .service-title-about, .service-intro__title, .service-detail-block__title, .contact-heading, .form-title, .info-value, .detail-value, .tech-value, .stat-number, .exp-number) {
    color: #0f172a !important;
}

html[data-theme="dark"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(h1, h2, h3, h4, h5, h6, .section-title, .display-5, .portfolio-title, .portfolio-title a, .resume-name, .timeline-title, .skill-title, .skill-mini-title, .category-title, .service-title-about, .service-intro__title, .service-detail-block__title, .contact-heading, .form-title, .info-value, .detail-value, .tech-value, .stat-number, .exp-number),
body[data-theme="dark"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(h1, h2, h3, h4, h5, h6, .section-title, .display-5, .portfolio-title, .portfolio-title a, .resume-name, .timeline-title, .skill-title, .skill-mini-title, .category-title, .service-title-about, .service-intro__title, .service-detail-block__title, .contact-heading, .form-title, .info-value, .detail-value, .tech-value, .stat-number, .exp-number) {
    color: #f8fbff !important;
}

html[data-theme="light"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(p, li, span, small, .lead, .text-muted, .text-body-secondary, .text-body-tertiary, .portfolio-summary, .portfolio-meta, .timeline-description, .skill-description, .skill-description p, .skill-years, .skill-mini-years, .category-desc, .service-desc-about, .service-intro__text, .service-detail-block__text, .contact-desc, .contact-item-content p, .info-label, .detail-label, .tech-category, .stat-label),
body[data-theme="light"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(p, li, span, small, .lead, .text-muted, .text-body-secondary, .text-body-tertiary, .portfolio-summary, .portfolio-meta, .timeline-description, .skill-description, .skill-description p, .skill-years, .skill-mini-years, .category-desc, .service-desc-about, .service-intro__text, .service-detail-block__text, .contact-desc, .contact-item-content p, .info-label, .detail-label, .tech-category, .stat-label) {
    color: #526071 !important;
}

html[data-theme="dark"] body :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(p, li, span, small, .lead, .text-muted, .text-body-secondary, .text-body-tertiary, .portfolio-summary, .portfolio-meta, .timeline-description, .skill-description, .skill-description p, .skill-years, .skill-mini-years, .category-desc, .service-desc-about, .service-intro__text, .service-detail-block__text, .contact-desc, .contact-item-content p, .info-label, .detail-label, .tech-category, .stat-label),
body[data-theme="dark"] :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(p, li, span, small, .lead, .text-muted, .text-body-secondary, .text-body-tertiary, .portfolio-summary, .portfolio-meta, .timeline-description, .skill-description, .skill-description p, .skill-years, .skill-mini-years, .category-desc, .service-desc-about, .service-intro__text, .service-detail-block__text, .contact-desc, .contact-item-content p, .info-label, .detail-label, .tech-category, .stat-label) {
    color: #cbd7e8 !important;
}

html[data-theme="light"] body :where(.hero, .about-hero, .portfolio-hero, .resume-hero, .skills-hero, .contact-hero, .page-hero, .service-page-hero, .single-project-hero, .error-404-hero, .home-cta, .about-cta, .portfolio-cta, .resume-cta, .skills-cta, .service-cta-band, .site-footer, .top-info-bar) :where(h1, h2, h3, h4, h5, h6, p, li, span, a, .lead, .text-white, .text-muted),
body[data-theme="light"] :where(.hero, .about-hero, .portfolio-hero, .resume-hero, .skills-hero, .contact-hero, .page-hero, .service-page-hero, .single-project-hero, .error-404-hero, .home-cta, .about-cta, .portfolio-cta, .resume-cta, .skills-cta, .service-cta-band, .site-footer, .top-info-bar) :where(h1, h2, h3, h4, h5, h6, p, li, span, a, .lead, .text-white, .text-muted),
html[data-theme="dark"] body :where(.hero, .about-hero, .portfolio-hero, .resume-hero, .skills-hero, .contact-hero, .page-hero, .service-page-hero, .single-project-hero, .error-404-hero, .home-cta, .about-cta, .portfolio-cta, .resume-cta, .skills-cta, .service-cta-band, .site-footer, .top-info-bar) :where(h1, h2, h3, h4, h5, h6, p, li, span, a, .lead, .text-white, .text-muted),
body[data-theme="dark"] :where(.hero, .about-hero, .portfolio-hero, .resume-hero, .skills-hero, .contact-hero, .page-hero, .service-page-hero, .single-project-hero, .error-404-hero, .home-cta, .about-cta, .portfolio-cta, .resume-cta, .skills-cta, .service-cta-band, .site-footer, .top-info-bar) :where(h1, h2, h3, h4, h5, h6, p, li, span, a, .lead, .text-white, .text-muted) {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* ==================== DARK MODE ONLY LOCK ==================== */
.theme-toggle,
#themeToggle,
#themeToggleMobile {
    display: none !important;
}

html,
body {
    color-scheme: dark;
}

html[data-theme="light"] body,
body[data-theme="light"],
body.theme-light,
body:not(.dark-mode) {
    color: #f8fbff !important;
    background-color: #080b12 !important;
    background-image:
        linear-gradient(125deg, rgba(64, 201, 255, 0.12), transparent 28%),
        linear-gradient(235deg, rgba(139, 92, 246, 0.14), transparent 34%),
        linear-gradient(180deg, #080b12 0%, #0b1020 48%, #080b12 100%) !important;
}

body:not(.dark-mode) :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card, .mobile-menu, .mobile-menu-link, .mobile-submenu-toggle, .mobile-services-panel, .services-mega-panel, .sub-menu) {
    color: #f8fbff !important;
    background: rgba(17, 24, 39, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

body:not(.dark-mode) :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(h1, h2, h3, h4, h5, h6, .section-title, .display-5, .portfolio-title, .portfolio-title a, .resume-name, .timeline-title, .skill-title, .skill-mini-title, .category-title, .service-title-about, .service-intro__title, .service-detail-block__title, .contact-heading, .form-title, .info-value, .detail-value, .tech-value, .stat-number, .exp-number) {
    color: #f8fbff !important;
}

body:not(.dark-mode) :where(.content-wrapper, .entry-content, .portfolio-info, .project-main-content, .project-info-card, .card-content, .timeline-content, .skill-card-detailed, .category-card, .skill-card-mini, .service-card-home, .service-card-about, .service-content-card, .service-sidebar-card, .service-info-card, .service-benefit-card, .contact-info-wrapper, .contact-form-wrapper, .info-card, .stat-card, .stat-card-home, .testimonial-card-home, .filter-btn, .sidebar-info-row, .deliverable-item, .premium-card, .related-project-card) :where(p, li, span, small, .lead, .text-muted, .text-body-secondary, .text-body-tertiary, .portfolio-summary, .portfolio-meta, .timeline-description, .skill-description, .skill-description p, .skill-years, .skill-mini-years, .category-desc, .service-desc-about, .service-intro__text, .service-detail-block__text, .contact-desc, .contact-item-content p, .info-label, .detail-label, .tech-category, .stat-label) {
    color: #cbd7e8 !important;
}