/* ===========================================
   style.css — Base / Global Styles
   All non-responsive, non-media-query styles
   =========================================== */

/* =========================================
   CSS VARIABLES & RESET
   ========================================= */
:root {
    --bg-dark: #020617;
    --bg-darker: #0f172a;
    --bg-card: #1e293b;
    --accent-primary: #3b82f6;
    --accent-secondary: #9333ea;
    --accent-tertiary: #06b6d4;
    --text-white: #ffffff;
    --text-gray: #94a3b8;
    --text-light: #cbd5e1;
    --transition: all 0.3s ease;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 20px 40px rgba(59, 130, 246, 0.3);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    display: block;
}

/* =========================================
   LOADER
   ========================================= */
.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid var(--bg-card);
    border-top: 5px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* =========================================
   PROGRESS BAR
   ========================================= */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    z-index: 9999;
    transition: width 0.1s ease;
}


/* =========================================
   LEGACY MESSAGE BUTTON STYLES — REMOVED
   (replaced by .floating-msg-btn system)
   ========================================= */

/* =========================================
   MINIMAL THEME DROPDOWN
   ========================================= */
.theme-dropdown {
    position: relative;
    display: inline-block;
}

.theme-dropdown-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-dropdown-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.05);
}

.theme-dropdown-content {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-darker);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    min-width: 120px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: none; /* Hidden by default */
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.theme-dropdown-content.show {
    display: block;
    animation: fadeInDown 0.3s ease;
}

.theme-option {
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: var(--transition);
    text-align: left;
}

.theme-option:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

.theme-option.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Light mode adjustments for dropdown */
body.light-mode .theme-dropdown-content {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
body.light-mode .theme-option {
    color: #1e293b;
}

/* =========================================
   BACK TO TOP BUTTON
   ========================================= */
/* Back to Top Button - REMOVED */
#topBtn {
    display: none !important;
}

/* =========================================
   CONTAINER & SECTIONS
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

.bg-darker {
    background: var(--bg-darker);
}

/* =========================================
   SECTION TITLES
   ========================================= */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title span {
    color: var(--accent-primary);
    font-size: 0.9rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 2px;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
    display: inline-block;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
    border: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
    border-radius: 50%;
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-primary:hover::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8),
                0 20px 40px rgba(147, 51, 234, 0.6);
}

.btn-outline {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--accent-primary);
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.4s ease;
    z-index: -1;
}

.btn-outline:hover::before {
    width: 100%;
}

.btn-outline:hover {
    color: #fff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.5);
    border-color: var(--accent-secondary);
}

/* Light mode button adjustments */
body.light-mode .btn-outline {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.light-mode .btn-outline:hover {
    background: var(--accent-primary);
    color: #fff;
}

/* =========================================
   NAVBAR (CONSISTENT IN ALL MODES)
   ========================================= */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    padding: 15px 0;
    background: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(12px);
    z-index: 999;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    flex-shrink: 0;
    letter-spacing: 1px;
}

.logo span {
    display: inline-block;
    color: transparent;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 2.2rem;
    font-weight: 900;
    animation: dotPulse 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    transform-origin: center;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    color: var(--text-light);
    font-weight: 500;
    position: relative;
    padding: 5px 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    /* Unified with enhance layer: only transform controls show/hide */
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.3s ease;
}

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

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* Mobile Menu Toggle */
.menu-toggle {
    background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background: var(--text-white);
    transition: var(--transition);
}

.menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Keep navbar consistent in light mode */
body.light-mode .navbar {
    background: rgba(2, 6, 23, 0.95);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

body.light-mode .logo {
    color: var(--text-white);
}

body.light-mode .nav-link {
    color: var(--text-light);
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--accent-primary);
}

body.light-mode .menu-toggle .bar {
    background: var(--text-white);
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top right, var(--bg-darker), var(--bg-dark));
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent);
    top: -100px;
    right: -100px;
    border-radius: 50%;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h3 {
    font-size: 1.5rem;
    color: var(--text-gray);
    font-weight: 400;
    margin-bottom: 10px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.typing-text {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-light);
}

.type-effect {
    color: var(--accent-primary);
    font-weight: 600;
}

.type-effect::after {
    content: '|';
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.social-icons-hero {
    display: flex;
    gap: 15px;
}

.social-icons-hero a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.social-icons-hero a::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.social-icons-hero a:hover::before {
    opacity: 1;
}

.social-icons-hero a:hover {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    transform: translateY(-8px) scale(1.15) rotate(5deg);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5), 0 0 20px rgba(147, 51, 234, 0.3);
    border-color: transparent;
}

/* Hero Image */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box {
    padding: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    box-shadow: 0 0 60px rgba(147, 51, 234, 0.6);
    animation: float 3s ease-in-out infinite;
}

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

.img-box img {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
    border: 5px solid var(--bg-dark);
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-content-new {
    max-width: 1000px;
    margin: 0 auto 60px;
    text-align: center;
}

.about-headline {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-white);
    line-height: 1.3;
}

.highlight-text {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-tagline {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 30px;
    font-weight: 400;
}

.about-description {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.9;
    margin-bottom: 20px;
}

.about-stats-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 50px;
}

.stat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 50px 35px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    overflow: visible;
    text-align: center;
}

/* Remove border line and background overlay */
.stat-card::before {
    display: none;
}

.stat-card::after {
    display: none;
}

.stat-card:hover::before {
    display: none;
}

.stat-card:hover::after {
    display: none;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4),
                0 10px 30px rgba(147, 51, 234, 0.3);
}

.stat-card h4 {
    font-size: 3.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    font-weight: 800;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.stat-card:hover h4 {
    transform: scale(1.15);
}

.stat-card p {
    color: var(--text-gray);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    z-index: 2;
}


/* Download CV Button */
.download-cv-wrapper {
    text-align: center;
}

.btn-download-cv {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 45px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.btn-download-cv i {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translateX(-100px);
    opacity: 0;
}

.btn-download-cv:hover i {
    transform: translateX(0);
    opacity: 1;
}

.btn-download-cv::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--accent-tertiary), 
        var(--accent-primary),
        var(--accent-secondary),
        transparent
    );
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 30px;
    z-index: -1;
    animation: borderFlow 3s linear infinite;
}

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

.btn-download-cv:hover::before {
    opacity: 1;
}

.btn-download-cv:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8),
                0 0 60px rgba(147, 51, 234, 0.6);
    padding-right: 50px;
}

/* Light mode adjustments for About */
body.light-mode .about-headline {
    color: #1e293b;
}

body.light-mode .stat-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .stat-card:hover {
    background: #f8fafc;
    border-color: var(--accent-primary);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2),
                0 0 40px rgba(147, 51, 234, 0.15);
}

/* Responsive */

/* =========================================
   SKILLS SECTION
   ========================================= */
.skills-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 30px;
}

.skill-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: var(--transition);
}

.skill-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    transform: translateX(10px);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.skill-header h6 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
}

.skill-header span {
    color: var(--accent-primary);
    font-weight: 600;
}

.skill-bar {
    width: 100%;
    height: 10px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.skill-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    transition: width 1s ease;
    width: 0;
}

/* =========================================
   SERVICES SECTION
   ========================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-box {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: var(--transition);
    text-align: center;
}

.service-box:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.service-box .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.service-box h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-white);
}

.service-box p {
    color: var(--text-gray);
    line-height: 1.8;
}

/* =========================================
   SERVICES SECTION (NEW DESIGN)
   ========================================= */
.services-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.service-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    padding: 45px 35px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-card::before,
.service-card::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid var(--accent-primary);
    border-radius: 20px;
    opacity: 0;
    transition: all 0.6s ease;
}

.service-card::before {
    top: -50px;
    left: -50px;
    border-right: none;
    border-bottom: none;
}

.service-card::after {
    bottom: -50px;
    right: -50px;
    border-left: none;
    border-top: none;
}

.service-card:hover::before {
    top: 0;
    left: 0;
    opacity: 1;
    animation: serviceBorder1 2s linear infinite;
}

.service-card:hover::after {
    bottom: 0;
    right: 0;
    opacity: 1;
    animation: serviceBorder2 2s linear infinite;
}

@keyframes serviceBorder1 {
    0%, 100% {
        border-color: var(--accent-primary);
    }
    33% {
        border-color: var(--accent-secondary);
    }
    66% {
        border-color: var(--accent-tertiary);
    }
}

@keyframes serviceBorder2 {
    0%, 100% {
        border-color: var(--accent-tertiary);
    }
    33% {
        border-color: var(--accent-primary);
    }
    66% {
        border-color: var(--accent-secondary);
    }
}

.service-card:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3), 
                0 0 40px rgba(147, 51, 234, 0.25),
                inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.service-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    font-size: 2.2rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 18px;
    color: var(--text-white);
    font-weight: 600;
}

.service-card p {
    color: var(--text-gray);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Light mode adjustments for Services */
body.light-mode .service-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .service-card:hover {
    background: #f1f5f9;
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

body.light-mode .service-card h3 {
    color: #1e293b;
}

/* =========================================
   RESUME SECTION (NEW DESIGN)
   ========================================= */
.resume-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.resume-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.resume-title i {
    font-size: 1.5rem;
}

.resume-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.resume-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 15px;
    border-left: 3px solid var(--accent-primary);
    transition: var(--transition);
}

.resume-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}

.resume-date {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.resume-info h4 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--text-white);
}

.resume-info p {
    color: var(--text-gray);
}

/* =========================================
   RESUME SECTION (NEW DESIGN)
   ========================================= */
.resume-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-bottom: 60px;
}

.resume-section-title {
    font-size: 1.8rem;
    margin-bottom: 35px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.resume-section-title i {
    font-size: 1.6rem;
}

.resume-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 15px;
    border-left: 4px solid var(--accent-primary);
    margin-bottom: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.resume-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.resume-card:hover::before {
    opacity: 1;
}

.resume-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.25),
                0 5px 20px rgba(147, 51, 234, 0.15);
    border-left-color: var(--accent-secondary);
}

.resume-year {
    display: inline-block;
    padding: 6px 18px;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.resume-card h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-white);
    font-weight: 600;
}

.resume-place {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* Light mode adjustments for Resume */
body.light-mode .resume-section-title {
    color: var(--accent-primary);
}

body.light-mode .resume-card {
    background: #ffffff;
    border-color: var(--accent-primary);
}

body.light-mode .resume-card:hover {
    background: #f1f5f9;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

body.light-mode .resume-card h4 {
    color: #1e293b;
}

body.light-mode .resume-place {
    color: #64748b;
}

/* =========================================
   CERTIFICATIONS BUTTON (UPDATED WITH STAR BADGE)
   ========================================= */
.certifications-wrapper {
    text-align: center;
    margin-top: 50px;
}

.certifications-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 50px;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
}

.certifications-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    z-index: -1;
}

.certifications-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.certifications-btn:hover::before {
    opacity: 1;
    animation: credentialsBorder 3s linear infinite;
}

.certifications-btn:hover::after {
    width: 400px;
    height: 400px;
}

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

.certifications-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.6), 
                0 0 40px rgba(147, 51, 234, 0.4),
                inset 0 0 30px rgba(255, 255, 255, 0.1);
}

.certifications-btn i {
    font-size: 1.3rem;
    transition: all 0.4s ease;
    z-index: 1;
}

.certifications-btn:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.cert-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1;
}

.certifications-btn:hover .cert-count-badge {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.15);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.certifications-btn span {
    z-index: 1;
}

/* =========================================
   CERTIFICATIONS MODAL (NEW)
   ========================================= */
.certifications-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.certifications-modal.active {
    opacity: 1;
    visibility: visible;
}

.certifications-modal-content {
    background: var(--bg-darker);
    border-radius: 20px;
    padding: 40px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.2);
    animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.certifications-modal-content h2 {
    text-align: center;
    color: var(--text-white);
    margin-bottom: 40px;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.certifications-modal-content h2 i {
    color: var(--accent-primary);
}

.certifications-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-gray);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.certifications-close:hover {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    transform: rotate(90deg);
}

/* =========================================
   CERTIFICATES GRID (NEW)
   ========================================= */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.certificate-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: var(--transition);
}

.certificate-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

.certificate-image {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: var(--bg-card);
}

.certificate-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.certificate-card:hover .certificate-image img {
    transform: scale(1.1);
}

.certificate-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-card:hover .certificate-overlay {
    opacity: 1;
}

.cert-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
}

.view-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4);
}

.download-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.download-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.certificate-info {
    padding: 20px;
}

.certificate-info h4 {
    font-size: 1.2rem;
    color: var(--text-white);
    margin-bottom: 8px;
}

.certificate-info p {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.cert-date {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* =========================================
   CERTIFICATE VIEWER MODAL (NEW)
   ========================================= */
.cert-viewer-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cert-viewer-modal.active {
    opacity: 1;
    visibility: visible;
}

.cert-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cert-viewer-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}

.cert-viewer-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-viewer-close:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: rotate(90deg);
}

/* =========================================
   PORTFOLIO SECTION
   ========================================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

.portfolio-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(0.95);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    transition: all 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.portfolio-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--text-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    font-weight: 700;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay h3 {
    transform: translateY(0);
}

.portfolio-overlay span {
    color: var(--accent-primary);
    margin-bottom: 15px;
    display: block;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    font-weight: 500;
    font-size: 0.95rem;
    transform: translateY(10px);
    transition: transform 0.4s ease 0.1s;
}

.portfolio-item:hover .portfolio-overlay span {
    transform: translateY(0);
}

.portfolio-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    transform: translateY(10px);
}

.portfolio-item:hover .portfolio-link {
    background: var(--accent-primary);
    transform: scale(1.15) translateY(0);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
}

/* =========================================
   BLOG SECTION
   ========================================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.blog-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.blog-img {
    position: relative;
    overflow: hidden;
}

.blog-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img img {
    transform: scale(1.1);
}

.blog-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-primary);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.blog-content {
    padding: 25px;
}

.blog-content h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-white);
}

.blog-content p {
    color: var(--text-gray);
    margin-bottom: 15px;
    line-height: 1.8;
}

.read-more {
    color: var(--accent-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.read-more:hover {
    gap: 12px;
}

/* =========================================
   CONTACT SECTION
   ========================================= */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.08);
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-gray);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: var(--transition);
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    transform: translateX(10px);
}

.info-item i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.info-item:hover i {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.6);
    filter: brightness(1.2);
}

.info-item h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--text-white);
}

.info-item p,
.info-item a {
    color: var(--text-gray);
}

.info-item a:hover {
    color: var(--accent-primary);
}

/* =========================================
   FOOTER
   ========================================= */
footer {
    background: var(--bg-darker);
    padding: 30px 0;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

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

.footer-text {
    color: var(--text-gray);
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.footer-social a::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.footer-social a:hover::before {
    opacity: 1;
}

.footer-social a:hover {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    transform: translateY(-8px) scale(1.15) rotate(5deg);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5), 0 0 20px rgba(147, 51, 234, 0.3);
    border-color: transparent;
}

/* =========================================
   LIGHT MODE (ENHANCED)
   ========================================= */
body.light-mode {
    background: #f8fafc;
    color: #1e293b;
}

body.light-mode .hero {
    background: radial-gradient(circle at top right, #e0e7ff, #f8fafc);
}

body.light-mode .bg-darker {
    background: #ffffff;
}

body.light-mode .section-title h2 {
    color: #1e293b;
}

body.light-mode .hero-content h1 {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .hero-content h3,
body.light-mode .hero-content p,
body.light-mode .typing-text {
    color: #475569;
}

body.light-mode .about-content p,
body.light-mode .stat-item p,
body.light-mode .skill-header h4,
body.light-mode .service-box h3,
body.light-mode .service-box p,
body.light-mode .resume-info h4,
body.light-mode .resume-info p,
body.light-mode .blog-content h3,
body.light-mode .blog-content p,
body.light-mode .certificate-info h4,
body.light-mode .certificate-info p {
    color: #475569;
}

body.light-mode .service-box,
body.light-mode .skill-item,
body.light-mode .resume-item,
body.light-mode .blog-card,
body.light-mode .info-item,
body.light-mode .certificate-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .service-box:hover,
body.light-mode .skill-item:hover,
body.light-mode .resume-item:hover,
body.light-mode .blog-card:hover,
body.light-mode .info-item:hover,
body.light-mode .certificate-card:hover {
    background: #f1f5f9;
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-mode .contact-form input::placeholder,
body.light-mode .contact-form textarea::placeholder {
    color: #94a3b8;
}

body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus {
    border-color: var(--accent-primary);
    background: #f8fafc;
}

body.light-mode .img-box {
    border: 5px solid #ffffff;
}

body.light-mode footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

body.light-mode .footer-text {
    color: #64748b;
}

body.light-mode .theme-selector {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .theme-btn {
    color: #64748b;
}

body.light-mode .theme-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .theme-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
}

body.light-mode .message-popup {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .message-popup h3 {
    color: #1e293b;
}

body.light-mode .notification-text p,
body.light-mode .option-desc {
    color: #64748b;
}

body.light-mode .message-option {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .message-option:hover {
    background: #f1f5f9;
    border-color: var(--accent-primary);
}

body.light-mode .theme-dropdown-content {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

body.light-mode .theme-option {
    color: #1e293b;
}

body.light-mode .theme-option:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

body.light-mode .certifications-modal {
    background: rgba(0, 0, 0, 0.85);
}

body.light-mode .certifications-modal-content {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .certifications-modal-content h2 {
    color: #1e293b;
}

body.light-mode .cert-count {
    border-color: #f8fafc;
}

body.light-mode .info-item h4 {
    color: #1e293b;
}

body.light-mode .info-item p,
body.light-mode .info-item a {
    color: #64748b;
}

body.light-mode .info-item a:hover {
    color: var(--accent-primary);
}

body.light-mode .social-icons-hero a {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

body.light-mode .social-icons-hero a:hover {
    background: var(--accent-primary);
    color: #fff;
}

body.light-mode .read-more {
    color: var(--accent-primary);
}

body.light-mode .portfolio-overlay h3 {
    color: #fff;
}

body.light-mode .option-name {
    color: #1e293b;
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */

/* Tablets */

/* Mobile */

/* =========================================
   MODERN SKILLS SECTION - ENHANCED
   ========================================= */
.skills-modern {
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

.skills-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

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

.skill-category-title {
    font-size: 1.5rem;
    margin: 60px 0 30px;
    padding-left: 20px;
    border-left: 4px solid var(--accent-primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
}

.skill-category-title i {
    color: var(--accent-primary);
    font-size: 1.8rem;
}

.skills-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* Modern Glassmorphism Skill Cards */
.skill-card-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.skill-card-modern::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: top 0.6s ease;
}

.skill-card-modern:hover::before {
    top: 100%;
}

.skill-card-modern:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3), 
                inset 0 0 20px rgba(59, 130, 246, 0.1);
}

/* Circular Progress with Icon */
.circle-container-modern {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
}

.circle-container-modern svg {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
}

.circle-bg-modern {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.circle-progress-modern {
    fill: none;
    stroke: url(#modernGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 345;
    stroke-dashoffset: 345;
}

.skill-icon-modern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--accent-primary);
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    transition: all 0.3s ease;
    will-change: transform;
}

.skill-card-modern:hover .skill-icon-modern {
    transform: translate(-50%, -50%) scale(1.15);
    color: #fff;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
}

/* Skill percentage - positioned for path-following animation */
.skill-percentage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-align: center;
    transition: color 0.3s ease;
    z-index: 10;
    opacity: 1;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skill-card-modern:hover .skill-percentage {
    color: var(--accent-secondary);
    text-shadow: 0 0 15px rgba(147, 51, 234, 0.8);
}

/* Animated outer border on hover */
.skill-card-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.skill-card-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.skill-card-modern:hover::before {
    opacity: 1;
    animation: skillBorderMove 2s linear infinite;
}

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

.skill-card-modern:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3), 
                inset 0 0 20px rgba(59, 130, 246, 0.1);
}

/* Skill Info */
.skill-info-modern {
    text-align: center;
    width: 100%;
}

.skill-name-modern {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-white);
}

.skill-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    font-weight: 600;
    transition: all 0.3s ease;
}

.skill-card-modern:hover .skill-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

/* SVG Gradient Definitions */
svg defs {
    position: absolute;
}

/* Add this SVG gradient to work with the circles */
.skills-modern::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =========================================
   HERO PARTICLES EFFECT
   ========================================= */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 0.3;
}

/* =========================================
   AOS ANIMATION SUPPORT
   ========================================= */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(50px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-right"] {
    transform: translateX(-50px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-left"] {
    transform: translateX(50px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.6);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

/* =========================================
   ENHANCED HOVER EFFECTS FOR ALL SECTIONS
   ========================================= */

/* Service Cards Enhancement */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s ease;
}

.service-card:hover::before {
    left: 100%;
}

/* Portfolio Items Enhancement */
.portfolio-item {
    position: relative;
    overflow: hidden;
}

/* Shadow overlay removed - no top shadow on hover */

.portfolio-overlay {
    z-index: 2;
}

/* Blog Cards Enhancement */
.blog-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Resume Cards Enhancement */
.resume-card {
    position: relative;
    overflow: hidden;
}

.resume-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    transition: height 0.4s ease;
}

.resume-card:hover::before {
    height: 100%;
}

/* Contact Form Enhancement */
.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

/* Smooth Scroll Enhancement */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Enhanced Button Glow Effect */
.btn-primary,
.btn-download-cv {
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.btn-download-cv::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:hover::before,
.btn-download-cv:hover::before {
    width: 300px;
    height: 300px;
}

/* Navbar Sticky Effect Enhancement */
.navbar.sticky {
    background: rgba(2, 6, 23, 0.98);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
}

/* Light Mode Adjustments for Modern Skills */
body.light-mode .skills-modern {
    background: #f8fafc;
}

body.light-mode .skill-card-modern {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(59, 130, 246, 0.2);
}

body.light-mode .skill-card-modern:hover {
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
}

body.light-mode .skill-name-modern {
    color: #1e293b;
}

body.light-mode .circle-bg-modern {
    stroke: rgba(0, 0, 0, 0.08);
}

body.light-mode .skill-category-title {
    color: #475569;
}

/* =========================================
   RESPONSIVE DESIGN FOR MODERN SKILLS
   ========================================= */



/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */
.skill-card-modern,
.service-card,
.portfolio-item,
.blog-card,
.resume-card {
    will-change: transform;
}

.circle-progress-modern {
    will-change: stroke-dashoffset;
}

/* Reduce motion for accessibility */

/* =========================================
   CERTIFICATIONS BUTTON & MODAL
   ========================================= */

/* Certifications Button Wrapper */
.certifications-btn-wrapper {
    text-align: center;
    margin-top: 60px;
}

/* Certifications Button */
.btn-certifications {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-certifications i {
    font-size: 1.3rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

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

.btn-certifications .cert-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    border: 3px solid var(--bg-dark);
    animation: bounce 2s ease-in-out infinite;
}

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

.btn-certifications:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}

.btn-certifications::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-certifications:hover::before {
    width: 300px;
    height: 300px;
}

/* Certifications Modal */
.certifications-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    padding: 20px;
    overflow-y: auto;
}

.certifications-modal.active {
    opacity: 1;
    visibility: visible;
}

.certifications-modal-content {
    background: var(--bg-darker);
    border-radius: 30px;
    max-width: 1200px;
    width: 100%;
    padding: 50px;
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(50px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.certifications-modal.active .certifications-modal-content {
    transform: scale(1) translateY(0);
}

/* Close Button */
.certifications-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--text-white);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
}

.certifications-close:hover {
    background: #ff4444;
    border-color: #ff4444;
    transform: rotate(90deg);
}

/* Modal Header */
.certifications-header {
    text-align: center;
    margin-bottom: 50px;
}

.certifications-header h2 {
    font-size: 2.5rem;
    color: var(--text-white);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.certifications-header h2 i {
    color: var(--accent-primary);
    font-size: 2.2rem;
}

.certifications-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
}

/* Certificates Grid */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Certificate Card */
.certificate-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.4s ease;
    cursor: pointer;
}

.certificate-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-primary);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3);
}

/* Certificate Image Container */
.certificate-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.certificate-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.certificate-card:hover .certificate-image img {
    transform: scale(1.1);
}

/* Certificate Overlay - DESKTOP ONLY (Hidden by default, shown on hover) */
.certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(147, 51, 234, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* Wave effect on hover */
.certificate-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.certificate-card:hover .certificate-overlay::before {
    left: 100%;
}

/* DESKTOP: Show overlay on hover */

/* Certificate Actions */
.certificate-actions {
    display: flex;
    gap: 15px;
    z-index: 2;
    position: relative;
}

/* Certificate Buttons */
.cert-btn {
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cert-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.cert-btn i {
    font-size: 1rem;
}

/* Certificate Info */
.certificate-info {
    padding: 25px;
}

.certificate-info h4 {
    font-size: 1.2rem;
    color: var(--text-white);
    margin-bottom: 12px;
    line-height: 1.4;
}

.certificate-info p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.certificate-info i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

.cert-issuer {
    font-weight: 500;
}

.cert-date {
    font-size: 0.85rem;
}

/* =========================================
   CERTIFICATE VIEWER MODAL
   ========================================= */
.cert-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(15px);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cert-viewer-modal.active {
    opacity: 1;
    visibility: visible;
}

.cert-viewer-container {
    max-width: 90%;
    max-height: 90vh;
    position: relative;
}

.cert-viewer-container img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 15px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    border: 3px solid rgba(59, 130, 246, 0.3);
}

.cert-viewer-close {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10002;
}

.cert-viewer-close:hover {
    background: #ff4444;
    border-color: #ff4444;
    transform: rotate(90deg) scale(1.1);
}

/* =========================================
   MOBILE OPTIMIZATIONS FOR CERTIFICATES
   ========================================= */

/* Tablet adjustments */

/* Light Mode Adjustments for Certifications */
body.light-mode .certifications-modal {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .certifications-modal-content {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .certifications-header h2 {
    color: #1e293b;
}

body.light-mode .certifications-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

body.light-mode .certifications-close:hover {
    background: #ff4444;
    color: #fff;
}

body.light-mode .certificate-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .certificate-card:hover {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.15);
}

body.light-mode .certificate-info h4 {
    color: #1e293b;
}

body.light-mode .cert-viewer-modal {
    background: rgba(255, 255, 255, 0.98);
}

body.light-mode .cert-viewer-close {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1e293b;
}

body.light-mode .btn-certifications .cert-count {
    border-color: #f8fafc;
}

/* Mobile-specific light mode */

/* Animation for certificate cards on load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.certificates-grid .certificate-card {
    animation: fadeInUp 0.6s ease forwards;
}

.certificates-grid .certificate-card:nth-child(1) { animation-delay: 0.1s; }
.certificates-grid .certificate-card:nth-child(2) { animation-delay: 0.2s; }
.certificates-grid .certificate-card:nth-child(3) { animation-delay: 0.3s; }
.certificates-grid .certificate-card:nth-child(4) { animation-delay: 0.4s; }
.certificates-grid .certificate-card:nth-child(5) { animation-delay: 0.5s; }
.certificates-grid .certificate-card:nth-child(6) { animation-delay: 0.6s; }

/* =========================================
   PREMIUM CREDENTIALS BUTTON - ENHANCED
   ========================================= */

/* Credentials Button Wrapper */
.certifications-btn-wrapper {
    text-align: center;
    margin-top: 60px;
    perspective: 1000px;
}

/* Premium Credentials Button */
.btn-certifications {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 25px 50px;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #6366f1 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 60px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* Icon Wrapper with Rotation */
.btn-icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    transition: all 0.6s ease;
}

.btn-icon-wrapper i {
    font-size: 1.6rem;
    animation: float-icon 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(10deg); }
}

/* Button Content */
.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

.btn-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.btn-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.95);
}

/* Enhanced Count Badge */
.btn-certifications .cert-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    border: 4px solid var(--bg-dark);
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.6);
    animation: pulse-badge 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes pulse-badge {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(239, 68, 68, 0.6);
    }
    50% { 
        transform: scale(1.15);
        box-shadow: 0 8px 30px rgba(239, 68, 68, 0.8);
    }
}

/* Animated Glow Effect */
.btn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hover State */
.btn-certifications:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 
        0 30px 80px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 40px rgba(99, 102, 241, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-certifications:hover .btn-glow {
    opacity: 1;
}

.btn-certifications:hover .btn-icon-wrapper {
    transform: rotate(360deg) scale(1.1);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Shimmer Effect */
.btn-certifications::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

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

/* Active/Click State */
.btn-certifications:active {
    transform: translateY(-4px) scale(0.98);
}

/* Particles Around Button */
.btn-certifications::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, transparent 30%, rgba(59, 130, 246, 0.1) 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.btn-certifications:hover::after {
    opacity: 1;
    animation: expand-particles 2s ease-in-out infinite;
}

@keyframes expand-particles {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }
}

/* =========================================
   CONSISTENT HOVER EFFECTS - ALL SECTIONS
   ========================================= */

/* About Section Stats Enhancement */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s ease;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover h4 {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Service Cards Enhancement */
.service-card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.service-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.service-card:hover::after {
    opacity: 1;
    animation: rotate-glow 3s linear infinite;
}

@keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.service-card .service-icon {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover .service-icon {
    transform: translateY(-10px) scale(1.15) rotate(10deg);
}

.service-card:hover .service-icon i {
    animation: icon-pulse 0.6s ease;
}

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

/* Resume Cards Enhancement */
.resume-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resume-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    transition: height 0.4s ease;
}

.resume-card:hover {
    transform: translateX(15px);
    background: rgba(59, 130, 246, 0.05);
}

.resume-card:hover::after {
    height: 100%;
}

.resume-year {
    transition: all 0.3s ease;
}

.resume-card:hover .resume-year {
    transform: scale(1.1);
    color: var(--accent-primary);
}

/* Portfolio Items Enhancement */
.portfolio-item {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-item:hover {
    transform: translateY(-15px) scale(1.02) rotateX(5deg);
}

.portfolio-item img {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-item:hover img {
    transform: scale(1.15) rotate(2deg);
}

.portfolio-overlay {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-item:hover .portfolio-overlay {
    background: linear-gradient(135deg, rgba(96, 111, 136, 0.95), rgba(36, 31, 41, 0.178));
}

.portfolio-link {
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-link {
    transform: scale(1.2);
}

/* Blog Cards Enhancement */
.blog-card {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(59, 130, 246, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: inherit;
}

.blog-card:hover::before {
    opacity: 1;
}

.blog-card:hover {
    transform: translateY(-15px) scale(1.03) rotateY(5deg);
}

.blog-img img {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-card:hover .blog-img img {
    transform: scale(1.2) rotate(-2deg);
}

.blog-date {
    transition: all 0.4s ease;
}

.blog-card:hover .blog-date {
    background: var(--accent-primary);
    transform: scale(1.1);
}

.read-more {
    transition: all 0.3s ease;
    position: relative;
}

.read-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.blog-card:hover .read-more::after {
    width: 100%;
}

.blog-card:hover .read-more i {
    transform: translateX(5px);
}

/* Contact Form Enhancement */
.contact-form input,
.contact-form textarea {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 10px 30px rgba(59, 130, 246, 0.2),
        inset 0 0 20px rgba(59, 130, 246, 0.05);
}

.info-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-item:hover {
    transform: translateX(10px) scale(1.02);
    background: rgba(59, 130, 246, 0.05);
}

.info-item i {
    transition: all 0.4s ease;
}

.info-item:hover i {
    transform: scale(1.3);
    color: #fff;
}

/* Hero Social Icons Enhancement */
.social-icons-hero a {
    position: relative;
    overflow: hidden;
}

.social-icons-hero a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    transition: all 0.5s ease;
}

.social-icons-hero a:hover::before {
    width: 150%;
    height: 150%;
}

/* Navigation Links Enhancement */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    transition: transform 0.3s ease;
}

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

/* Section Titles Enhancement */
.section-title h2 {
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    animation: pulse-underline 2s ease-in-out infinite;
}

@keyframes pulse-underline {
    0%, 100% { width: 60px; opacity: 1; }
    50% { width: 80px; opacity: 0.7; }
}

/* Download CV Button Enhancement */
.btn-download-cv {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-download-cv::after {
    content: '\f019';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.3s ease;
}

.btn-download-cv:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.btn-download-cv:hover {
    padding-right: 60px;
}

/* Primary Button Enhancement */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transition: transform 0.6s ease;
}

.btn-primary:hover::after {
    transform: translate(-50%, -50%) scale(2);
}

/* Outline Button Enhancement */
.btn-outline {
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: var(--accent-primary);
    border-radius: 50%;
    transition: all 0.6s ease;
}

.btn-outline:hover::before {
    width: 300%;
    height: 300%;
}

.btn-outline:hover {
    color: #fff;
    border-color: var(--accent-primary);
}

/* Footer Social Icons */
.footer-social a {
    transition: all 0.3s ease;
}

.footer-social a:hover {
    transform: translateY(-5px) rotate(360deg) scale(1.2);
}


/* =========================================
   RESPONSIVE - PREMIUM BUTTON
   ========================================= */



/* Light Mode - Premium Button */
body.light-mode .btn-certifications {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.light-mode .btn-certifications:hover {
    box-shadow: 
        0 30px 80px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 40px rgba(99, 102, 241, 0.4);
}

body.light-mode .btn-certifications .cert-count {
    border-color: #f8fafc;
}

/* =========================================
   FIXES AND IMPROVEMENTS
   ========================================= */

/* FIX 1: My Work Button - Text Visibility */
.btn-outline {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline span,
.btn-outline::before {
    position: relative;
    z-index: 2;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: var(--accent-primary);
    border-radius: 50%;
    transition: all 0.6s ease;
    z-index: -1;
}

.btn-outline:hover::before {
    width: 300%;
    height: 300%;
}

.btn-outline:hover {
    color: #fff !important;
    border-color: var(--accent-primary);
}

/* FIX 2: Professional Social Media Icons */
.social-icons-hero {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.social-icons-hero a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: var(--text-white);
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icons-hero a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: inherit;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

.social-icons-hero a i {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.social-icons-hero a:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}

.social-icons-hero a:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.social-icons-hero a:hover i {
    transform: scale(1.2);
    color: #fff;
}

/* FIX 3: Attractive Statistics Cards with Animations */
.stat-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    border: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotate-slow 10s linear infinite;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.stat-card:hover::after {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);
}

.stat-card h4 {
    font-size: 3.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    font-weight: 800;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.stat-card:hover h4 {
    transform: scale(1.15);
}

.stat-card p {
    color: var(--text-gray);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* Add icon to stat cards */
.stat-card::after {
    content: '\f080';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2.5rem;
    color: rgba(59, 130, 246, 0.1);
    z-index: 1;
    transition: all 0.3s ease;
}

.stat-card:hover::after {
    color: rgba(59, 130, 246, 0.2);
    transform: scale(1.2) rotate(10deg);
}

/* FIX 4: Skills Section - Show Percentage on Hover */
.skill-card-modern {
    position: relative;
}

/* FIX 5: Services Section - Remove Icon Tilt, Add Smooth Zoom */
.service-card .service-icon {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card:hover .service-icon {
    transform: scale(1.2) !important;
}

.service-card:hover .service-icon i {
    animation: none !important;
}

/* FIX 6: Resume Section - Fix Year Visibility and Add Better Effects */
.resume-card {
    position: relative;
    overflow: visible !important;
}

.resume-year {
    position: relative;
    z-index: 10;
    color: var(--accent-primary) !important;
    font-weight: 600;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.resume-card:hover .resume-year {
    transform: scale(1.05) !important;
    color: var(--accent-secondary) !important;
}

.resume-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s ease;
}

.resume-card:hover::before {
    left: 100%;
}

/* Add decorative corner */
.resume-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.resume-card:hover::after {
    border-top-color: var(--accent-primary);
    border-left-color: var(--accent-primary);
    width: 40px;
    height: 40px;
}

/* FIX 7: Credentials Button - Reposition Badge and Smooth Icon Rotation */
.btn-certifications {
    position: relative;
}

.btn-certifications .cert-count {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.6);
    animation: pulse-badge-smooth 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-badge-smooth {
    0%, 100% { 
        transform: translateY(-50%) scale(1);
        box-shadow: 0 5px 20px rgba(239, 68, 68, 0.6);
    }
    50% { 
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.8);
    }
}

.btn-icon-wrapper {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-certifications:hover .btn-icon-wrapper {
    transform: rotate(360deg) scale(1.1) !important;
    animation: smooth-spin 2s linear infinite;
}

@keyframes smooth-spin {
    from { transform: rotate(0deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1.1); }
}

.btn-icon-wrapper i {
    animation: none !important;
}

.btn-certifications:hover .btn-icon-wrapper i {
    animation: none !important;
}

/* FIX 8: Message Button Color Alignment */
.message-btn-circle {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.4) !important;
}

.message-btn-circle:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6) !important;
}

/* Footer Social Icons - Match Design */
.footer-social a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: var(--text-white);
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-social a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: inherit;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

.footer-social a:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.footer-social a:hover::before {
    transform: translate(-50%, -50%) scale(1);
}


/* =========================================
   ADDITIONAL POLISH & RESPONSIVE FIXES
   ========================================= */

/* Ensure text visibility in all states */
.btn-outline * {
    position: relative;
    z-index: 2;
}

/* Credentials Button - Mobile Adjustments */

/* Light Mode Adjustments */
body.light-mode .social-icons-hero a {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

body.light-mode .social-icons-hero a:hover {
    color: #fff;
}

body.light-mode .stat-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.08));
    border-color: rgba(59, 130, 246, 0.3);
}

body.light-mode .stat-card:hover {
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25);
}

body.light-mode .resume-year {
    color: var(--accent-primary) !important;
}

body.light-mode .resume-card:hover .resume-year {
    color: var(--accent-secondary) !important;
}

body.light-mode .footer-social a {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

body.light-mode .footer-social a:hover {
    color: #fff;
}

/* Skill percentage in light mode */
body.light-mode .skill-percentage {
    color: var(--accent-primary);
}

/* Enhanced stat card numbers */
.stat-card h4 {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Smooth transitions for all fixes */
.resume-year,
.btn-outline,
.social-icons-hero a,
.footer-social a,
.service-card .service-icon,
.stat-card h4 {
    will-change: transform;
}

/* Remove conflicting animations */
.service-card:hover .service-icon i {
    animation: none !important;
}

/* Ensure badge visibility */
.btn-certifications .cert-count {
    pointer-events: none;
}

/* Smooth icon rotation without float */
.btn-icon-wrapper i {
    display: block;
}

.btn-certifications:hover .btn-icon-wrapper i {
    animation: none !important;
    transform: none !important;
}
/* =====================================================
   COMPREHENSIVE FIXES - ADDED FOR PROFESSIONAL POLISH
   ===================================================== *
   ===================================================== */

/* =========================================
   FIX 1: MY WORK BUTTON TEXT VISIBILITY
   ========================================= */
.btn-outline {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--accent-primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline:hover {
    background: var(--accent-primary);
    color: #fff !important; /* Force text visibility */
    transform: translateY(-3px);
}

/* Ensure text stays on top */
.btn-outline span,
.btn-outline::after {
    position: relative;
    z-index: 2;
}

/* Light mode */
body.light-mode .btn-outline {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.light-mode .btn-outline:hover {
    background: var(--accent-primary);
    color: #fff !important;
}

/* =========================================
   FIX 2: PROFESSIONAL SOCIAL ICONS
   ========================================= */
.social-icons-hero {
    display: flex;
    gap: 18px;
}

.social-icons-hero a {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.05));
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Animated gradient background */
.social-icons-hero a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
    z-index: 0;
}

.social-icons-hero a i {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.social-icons-hero a:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4),
                0 0 20px rgba(147, 51, 234, 0.3);
}

.social-icons-hero a:hover::before {
    opacity: 1;
}

.social-icons-hero a:hover i {
    color: #fff;
    transform: scale(1.15) rotate(5deg);
}

/* Light mode */
body.light-mode .social-icons-hero a {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.03));
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--accent-primary);
}

body.light-mode .social-icons-hero a:hover {
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25),
                0 0 20px rgba(147, 51, 234, 0.2);
}

/* =========================================
   FIX 3: ATTRACTIVE STATS CARDS WITH ANIMATIONS
   ========================================= */
.stat-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    padding: 50px 35px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Animated shine effect */
.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent, 
        rgba(59, 130, 246, 0.1), 
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.stat-card:hover::before {
    animation: shine 1.5s ease-in-out;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.stat-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 70px rgba(59, 130, 246, 0.4),
                0 0 50px rgba(147, 51, 234, 0.3),
                inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.stat-card h4 {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.stat-card:hover h4 {
    transform: scale(1.08);
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.7));
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stat-card p {
    color: var(--text-gray);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.stat-card:hover p {
    color: var(--text-white);
    letter-spacing: 2.5px;
}

/* Light mode */
body.light-mode .stat-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: #e2e8f0;
}

body.light-mode .stat-card:hover {
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-color: var(--accent-primary);
    box-shadow: 0 25px 70px rgba(59, 130, 246, 0.25),
                0 0 50px rgba(147, 51, 234, 0.2);
}

/* =========================================
   FIX 4: SKILLS SECTION - PERCENTAGE DISPLAY
   ========================================= */
.skill-card-modern {
    position: relative;
    transition: all 0.4s ease;
}

/* Show percentage on hover */
.skill-card-modern .skill-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 10;
    pointer-events: none;
}

.skill-card-modern:hover .skill-percentage {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* =========================================
   FIX 5: SERVICES - STABLE ICON WITH ZOOM
   ========================================= */
.service-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(12px);
    padding: 45px 35px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-primary),
        var(--accent-secondary),
        transparent
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: movingBorder 3s linear infinite;
    border-radius: inherit;
    z-index: -1;
}

@keyframes movingBorder {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) rotate(360deg);
    }
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-12px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-color: var(--accent-primary);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}

.service-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* STABLE ZOOM - NO TILT */
.service-card:hover .service-icon {
    transform: scale(1.15); /* Only zoom, no rotation or tilt */
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.5);
}

.service-card:hover .service-icon i {
    transform: scale(1.1);
}

/* =========================================
   FIX 6: RESUME - CONFINED SHADOW NO OVERLAP
   ========================================= */
.resume-section {
    position: relative;
    z-index: 1;
}

.resume-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    padding: 32px 32px 32px 60px;
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

/* Circular highlight confined within card */
.resume-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.resume-card:hover::after {
    opacity: 1;
}

.resume-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    transform: translateX(15px) translateY(-8px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
    z-index: 10;
}

.resume-year {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff !important; /* Force visibility */
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure it stays on top */
}

.resume-card:hover .resume-year {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
}

.resume-card h4,
.resume-card p {
    position: relative;
    z-index: 1;
}

.resume-card h4 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-white);
    font-weight: 700;
    transition: color 0.3s ease;
}

.resume-card:hover h4 {
    color: var(--accent-primary);
}

.resume-place {
    color: var(--text-gray);
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.resume-card:hover .resume-place {
    color: var(--text-light);
}

/* =========================================
   FIX 7: CREDENTIALS BUTTON - SMOOTH ROTATION & BADGE
   ========================================= */
.btn-certifications {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 45px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon wrapper - rotates smoothly */
.btn-certifications .btn-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 3s linear;
}

.btn-certifications:hover .btn-icon-wrapper {
    animation: smoothRotate 3s linear infinite;
}

@keyframes smoothRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-certifications .btn-icon-wrapper i {
    font-size: 1.4rem;
}

/* Certificate count badge - stylish and attractive */
.btn-certifications .cert-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1e293b;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
    border: 3px solid var(--bg-dark);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.6),
                inset 0 2px 5px rgba(255, 255, 255, 0.3);
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 0 6px;
}

.btn-certifications .cert-count::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.btn-certifications:hover .cert-count::before {
    opacity: 0.8;
    animation: badgePulse 1.5s ease-in-out infinite;
}

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

.btn-certifications:hover .cert-count {
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.9),
                inset 0 2px 8px rgba(255, 255, 255, 0.5);
}

.btn-certifications:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}

/* Light mode */
body.light-mode .btn-certifications .cert-count {
    border-color: #ffffff;
}

/* =========================================
   FIX 8: MESSAGE BUTTON COLOR HARMONY
   ========================================= */
.message-btn-circle {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 998;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-btn-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.message-btn-circle:hover::before {
    opacity: 0.5;
    animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

.message-btn-circle:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
}

.message-btn-circle i {
    position: relative;
    z-index: 1;
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */
/* =========================================
   FLOATING SPEED-DIAL — REDESIGNED
   ========================================= */

/* Container — anchors everything */
.speed-dial {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    z-index: 9990;
}

/* ---- Action buttons wrapper ---- */
.speed-dial-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.92);
    transition:
        opacity  0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.28s;
    pointer-events: none;
}

/* Open state */
.speed-dial.open .speed-dial-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Staggered entrance per button */
.speed-dial.open .sd-btn:nth-child(1) { transition-delay: 0.06s; }
.speed-dial.open .sd-btn:nth-child(2) { transition-delay: 0.03s; }
.speed-dial.open .sd-btn:nth-child(3) { transition-delay: 0s;    }

/* ---- Individual action button ---- */
.sd-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition:
        transform  0.22s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.22s ease,
        opacity    0.22s ease;
    /* Start slightly off */
    opacity: 0;
    transform: translateY(8px) scale(0.85);
}

.speed-dial.open .sd-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sd-btn:hover {
    transform: translateY(-3px) scale(1.1) !important;
}

/* Brand colours */
.sd-whatsapp  { background: #25D366; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); }
.sd-telegram  { background: #2AABEE; box-shadow: 0 4px 16px rgba(42, 171, 238, 0.4); }
.sd-messenger { background: linear-gradient(135deg, #0084FF, #8A3EFA); box-shadow: 0 4px 16px rgba(0, 132, 255, 0.4); }

.sd-whatsapp:hover  { box-shadow: 0 8px 24px rgba(37, 211, 102,  0.6); }
.sd-telegram:hover  { box-shadow: 0 8px 24px rgba(42, 171, 238,  0.6); }
.sd-messenger:hover { box-shadow: 0 8px 24px rgba(0,  132, 255,  0.6); }

/* ---- Tooltip ---- */
.sd-tooltip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.sd-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(15, 23, 42, 0.88);
}
.sd-btn:hover .sd-tooltip {
    opacity: 1;
}

/* Light-mode tooltip */
body.light-mode .sd-tooltip {
    background: rgba(30, 41, 59, 0.92);
}

/* ---- Main trigger button ---- */
.sd-trigger {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 6px 22px rgba(59, 130, 246, 0.45);
    transition:
        transform  0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
    overflow: hidden;
    outline: none;
}

.sd-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.speed-dial.open .sd-trigger::before {
    opacity: 1;
}

.sd-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.6);
}

/* Icon swap — close icon hidden by default */
.sd-trigger .sd-icon-open,
.sd-trigger .sd-icon-close {
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s ease;
}
.sd-trigger .sd-icon-open  { transform: rotate(0deg) scale(1);   opacity: 1; }
.sd-trigger .sd-icon-close { transform: rotate(-90deg) scale(0.5); opacity: 0; }

.speed-dial.open .sd-trigger .sd-icon-open  { transform: rotate(90deg)  scale(0.5); opacity: 0; }
.speed-dial.open .sd-trigger .sd-icon-close { transform: rotate(0deg)   scale(1);   opacity: 1; }

/* ---- Light-mode overrides ---- */
body.light-mode .sd-trigger {
    box-shadow: 0 6px 22px rgba(59, 130, 246, 0.3);
}

/* ---- Mobile adjustments ---- */

/* ---- Remove old message-popup styles so they don't conflict ---- */
.message-btn-circle,
.message-popup,
.message-popup-close,
.message-options,
.message-option {
    display: none !important;
}

/* =========================================
   SKILLS SECTION — COMPREHENSIVE MOBILE FIX
   Targets: overflow, percentage placement,
   proportional scaling, single-column mobile
   ========================================= */

/* --- Grid: desktop keeps auto-fit, mobile forced single col --- */
.skills-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

/* --- Card: must clip all content, no overflow --- */
.skill-card-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;   /* CRITICAL — clip circle glow & pseudo */
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* --- Circle container: percentage is inside, not floating above --- */
.circle-container-modern {
    position: relative;
    /* Use a CSS custom property so we can resize it in one place */
    --circle-size: 120px;
    width: var(--circle-size);
    height: var(--circle-size);
    flex-shrink: 0;
    /* No extra margin needed — gap on parent handles spacing */
    margin-bottom: 0;
}

/* SVG scales to 100% of its container — viewBox handles coordinate space */
.circle-container-modern svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.25));
    display: block;
}

/* --- Percentage: centred inside the ring, not above it --- */
.skill-percentage {
    position: absolute;
    /* Perfect vertical + horizontal centre */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Sit above the icon so it doesn't collide — icon moves to bottom half */
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
    /* nudge to top-half of circle */
    margin-top: -18px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

/* --- Icon: centred but nudged to bottom half so it doesn't clash with % --- */
.skill-icon-modern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 12px; /* nudge below the percentage */
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    color: var(--accent-primary);
    text-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
    transition: all 0.3s ease;
    will-change: transform;
    line-height: 1;
}

.skill-card-modern:hover .skill-icon-modern {
    transform: translate(-50%, -50%) scale(1.12);
    margin-top: 12px; /* keep consistent on hover */
    color: #fff;
    text-shadow: 0 0 24px rgba(59, 130, 246, 0.8);
}

.skill-card-modern:hover .skill-percentage {
    color: var(--accent-secondary);
}

/* --- Skill info block --- */
.skill-info-modern {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.skill-name-modern {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    font-weight: 600;
    color: var(--text-white);
    line-height: 1.3;
    word-break: break-word;
}

.skill-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
    padding: 4px 14px;
    border-radius: 20px;
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.skill-card-modern:hover .skill-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* --- Category title --- */
.skill-category-title {
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin: 50px 0 24px;
    padding-left: 18px;
    border-left: 4px solid var(--accent-primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

/* -----------------------------------------------
   TABLET  (≤ 768px) — 2 columns, smaller circles
------------------------------------------------ */

/* -----------------------------------------------
   SMALL MOBILE  (≤ 480px) — still 2 cols but
   even smaller circles to fit narrow screens
------------------------------------------------ */

/* -----------------------------------------------
   VERY SMALL  (≤ 360px) — single column so
   nothing can overflow on tiny phones
------------------------------------------------ */

/* ---- Light-mode overrides ---- */
body.light-mode .skill-card-modern {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body.light-mode .skill-card-modern:hover {
    background: #f8fafc;
    border-color: var(--accent-primary);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.18);
}

body.light-mode .skill-name-modern {
    color: #1e293b;
}

body.light-mode .skill-category-title {
    color: #334155;
}

body.light-mode .circle-bg-modern {
    stroke: rgba(0, 0, 0, 0.08);
}

body.light-mode .skill-badge {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

body.light-mode .skill-card-modern:hover .skill-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

body.light-mode .skill-percentage {
    color: var(--accent-primary);
}

/* =====================================================
   SKILLS — DEFINITIVE FINAL OVERHAUL
   Fixes: percentage overflow, circle alignment,
   2-col mobile balance, responsive scaling
   ===================================================== */

/* ---- Grid ---- */
.skills-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* ---- Card ---- */
.skill-card-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    /* Generous but consistent padding */
    padding: 28px 16px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    /* CRITICAL: clip everything including the animated % label */
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.skill-card-modern:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-primary);
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.25),
                inset 0 0 16px rgba(59, 130, 246, 0.08);
}

/* Animated gradient border on hover */
.skill-card-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(45deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        var(--accent-primary));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.skill-card-modern:hover::before {
    opacity: 1;
    animation: skillBorderMove 2s linear infinite;
}

/* ---- Circle container ----
   Uses a CSS var so every breakpoint only changes one value */
.circle-container-modern {
    position: relative;
    --sz: 120px;
    width: var(--sz);
    height: var(--sz);
    flex-shrink: 0;
    /* Centre the container inside the card */
    margin: 0 auto;
}

/* SVG fills container, viewBox handles internal coordinates */
.circle-container-modern svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.2));
}

.circle-bg-modern {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.circle-progress-modern {
    fill: none;
    stroke: url(#modernGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 345;
    stroke-dashoffset: 345;
    /* No CSS transition — JS rAF loop is the sole animation controller */
    transition: none;
}

/* ---- Icon — centred in the circle ---- */
.skill-icon-modern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: var(--accent-primary);
    text-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.skill-card-modern:hover .skill-icon-modern {
    transform: translate(-50%, -50%) scale(1.1);
    color: #fff;
    text-shadow: 0 0 24px rgba(59, 130, 246, 0.9);
}

/* ---- Percentage label ----
   Positioned by JS using scaled SVG coordinates.
   CSS provides only initial/fallback state. */
.skill-percentage {
    position: absolute;
    /* JS will override left/top; these are just safe fallbacks */
    top: 8px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: clamp(0.68rem, 1.8vw, 0.92rem);
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 12;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    transition: color 0.3s ease;
    /* Start hidden; JS sets opacity: 1 on first animation frame */
    opacity: 0;
}

.skill-card-modern:hover .skill-percentage {
    color: #e0e7ff;
    text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
}

/* ---- Skill info block ---- */
.skill-info-modern {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.skill-name-modern {
    font-size: clamp(0.82rem, 2.2vw, 1.1rem);
    font-weight: 600;
    color: var(--text-white);
    line-height: 1.3;
    word-break: break-word;
}

.skill-badge {
    display: inline-block;
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.15),
        rgba(147, 51, 234, 0.15));
    padding: 4px 14px;
    border-radius: 20px;
    font-size: clamp(0.6rem, 1.6vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.skill-card-modern:hover .skill-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* ---- Category title ---- */
.skill-category-title {
    font-size: clamp(1rem, 2.8vw, 1.5rem);
    margin: 50px 0 24px;
    padding-left: 18px;
    border-left: 4px solid var(--accent-primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.skill-category-title i {
    color: var(--accent-primary);
    font-size: 1.4em;
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* Tablets / small laptops (≤ 900px) */

/* Mobile landscape / large phones (≤ 768px) — 2 even columns */

/* Small phones (≤ 480px) — still 2 columns, smaller circles */

/* Very small (≤ 360px) — single column so nothing squeezes */

/* ---- Light-mode ---- */
body.light-mode .skill-card-modern {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.light-mode .skill-card-modern:hover {
    background: #f8fafc;
    border-color: var(--accent-primary);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
}

body.light-mode .skill-name-modern  { color: #1e293b; }
body.light-mode .skill-category-title { color: #334155; }
body.light-mode .circle-bg-modern   { stroke: rgba(0, 0, 0, 0.07); }

body.light-mode .skill-badge {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.07);
    border-color: rgba(59, 130, 246, 0.22);
}

body.light-mode .skill-card-modern:hover .skill-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

body.light-mode .skill-percentage { color: var(--accent-primary); }

/* =====================================================================
   FINAL PRIORITY FIXES — Resume, Skills Grid, About Glow
   ===================================================================== */

/* ═══════════════════════════════════════════════════════════════════
   PRIORITY 1 — RESUME: SHADOW CONFINED + CORNER ACCENT FIXED
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Root fixes for shadow bleed:
 *  1. Each .resume-section column is its own stacking context via
 *     isolation:isolate so z-index elevation can't cross columns.
 *  2. overflow:hidden on every card clips box-shadow at the card edge.
 *  3. transform on hover is reduced so the card never physically
 *     enters the adjacent column's space.
 *  4. box-shadow uses a very short spread and blur so it can't reach
 *     the neighbouring column even at the grid gap.
 *
 * Corner accent fix:
 *  The ::after pseudo is the decorative corner bracket. Previous rules
 *  used `width/height` to grow it on hover which shifts its visual
 *  centre inward. We now use `border-width` only — the origin corner
 *  stays anchored because top:0/left:0 never changes.
 */

.resume-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
    /* Each column is fully isolated — no z-index bleeds across */
    isolation: isolate;
}

.resume-section {
    /* Column-level stacking context */
    position: relative;
    isolation: isolate;
    overflow: hidden;   /* hard clip for any child box-shadows */
}

.resume-card {
    position: relative;
    background: linear-gradient(145deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.01));
    padding: 28px 28px 28px 32px;
    border-radius: 14px;
    border-left: 4px solid var(--accent-primary);
    margin-bottom: 22px;
    /* Card-level stacking context — shadow cannot escape this box */
    isolation: isolate;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition:
        transform          0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow         0.35s ease,
        border-left-color  0.35s ease,
        background         0.35s ease;
}

/* Sweep-shine inner glow — stays inside because parent overflow:hidden */
.resume-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(59,130,246,0.06),
        rgba(147,51,234,0.04));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

.resume-card:hover::before { opacity: 1; }

/*
 * Corner bracket accent — FIXED POSITION
 * top:0/left:0 never changes.
 * Only border-width grows, so the bracket expands outward from the
 * corner rather than drifting inward.
 */
.resume-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* Start invisible — zero-width borders */
    width: 28px;
    height: 28px;
    border-top: 0px solid var(--accent-primary);
    border-left: 0px solid var(--accent-primary);
    border-radius: 2px 0 0 0;
    opacity: 0;
    transition:
        border-top-width  0.3s ease,
        border-left-width 0.3s ease,
        opacity           0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.resume-card:hover::after {
    border-top-width: 3px;
    border-left-width: 3px;
    opacity: 1;
    /* width/height NEVER changes — corner stays pinned */
}

/* Hover: subtle lift only — never crosses into adjacent column */
.resume-card:hover {
    background: linear-gradient(145deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02));
    transform: translateX(6px) translateY(-4px);
    border-left-color: var(--accent-secondary);
    /*
     * Shallow shadow — x-spread is positive so it goes right,
     * away from the neighbouring left column. Blur is capped at 20px.
     * This cannot reach the other column across a 40px gap.
     */
    box-shadow:
        4px 8px 20px rgba(59,130,246,0.18),
        2px 4px  8px rgba(147,51,234,0.10);
    z-index: 2;
}

/* Content elements stay above the ::before glow layer */
.resume-card .resume-year,
.resume-card h4,
.resume-card .resume-place,
.resume-card p {
    position: relative;
    z-index: 1;
}

.resume-year {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg,
        var(--accent-primary), var(--accent-secondary));
    color: #fff !important;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.4px;
    box-shadow: 0 3px 10px rgba(59,130,246,0.25);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.resume-card:hover .resume-year {
    box-shadow: 0 6px 16px rgba(59,130,246,0.4);
    transform: translateY(-2px);
}

.resume-card h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--text-white);
    font-weight: 700;
    transition: color 0.3s ease;
}

.resume-card:hover h4 { color: var(--accent-primary); }

.resume-place {
    color: var(--text-gray);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.resume-card:hover .resume-place { color: var(--text-light); }

/* Light-mode resume */
body.light-mode .resume-card {
    background: #ffffff;
    border-left-color: var(--accent-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

body.light-mode .resume-card:hover {
    background: #f8fafc;
    box-shadow:
        4px 8px 20px rgba(59,130,246,0.13),
        2px 4px  8px rgba(147,51,234,0.08);
}

body.light-mode .resume-card h4  { color: #1e293b; }
body.light-mode .resume-card:hover h4 { color: var(--accent-primary); }
body.light-mode .resume-place     { color: #64748b; }
body.light-mode .resume-card:hover .resume-place { color: #475569; }

/* Mobile: stack columns */


/* ═══════════════════════════════════════════════════════════════════
   PRIORITY 2 — SKILLS GRID: 4-CARD = EVEN, 2-CARD = AUTO-EXPAND
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Strategy: use auto-fill with a min that fills 4 columns on desktop,
 * but for grids with exactly 2 cards we let them stretch by using
 * a data-count attribute added via JS. We also handle it purely in
 * CSS by targeting :last-child/:nth-child selectors so no JS needed.
 *
 * The grid uses auto-fill so 4 items make 4 equal columns.
 * For 2-card grids: we override to exactly 2 columns each at 1fr.
 * The card min-width is set so 4 always fit on desktop but 2 naturally
 * expand when that's all there is.
 */

.skills-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    align-items: stretch;
}

/*
 * When a grid has exactly 2 cards, the first card is :nth-child(1)
 * and the last is :nth-child(2) and :last-child.
 * We can detect "exactly 2 children" via:
 *   .skill-card-modern:first-child:nth-last-child(2)
 * and apply column override on the parent via @container — but we
 * don't have a container. Instead we set both children to span
 * more columns using a grid that gives them exactly half each.
 *
 * Cleanest CSS-only approach: set a fixed 2-col grid when there
 * are exactly 2 cards using the :only-of-type sibling trick.
 */

/* Exactly 2 cards — each fills half the container evenly */
.skill-card-modern:first-child:nth-last-child(2),
.skill-card-modern:first-child:nth-last-child(2) ~ .skill-card-modern {
    /* Force 2-column stretch by using a wider min */
    min-width: 0;
}

/* For 2-card grids, override the parent grid to 2 equal columns */
/* We target the grid when it contains exactly 2 skill cards */
.skills-grid-modern:has(.skill-card-modern:first-child:nth-last-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}

/* For 4-card grids, force exactly 4 columns (desktop) */
.skills-grid-modern:has(.skill-card-modern:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 2-card grids keep 2 cols; 4-card grids go 2×2 */

/* Mobile ≤768px: always 2 columns */

/* Mobile ≤480px: still 2 cols */

/* Tiny ≤360px: single column */


/* ═══════════════════════════════════════════════════════════════════
   SECONDARY — SKILLS: ANIMATED RGB BORDER ON HOVER
   ═══════════════════════════════════════════════════════════════════ */

.skill-card-modern {
    position: relative;
}

/* Animated rainbow border using conic-gradient rotation */
.skill-card-modern::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        var(--accent-primary)
    );
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    /* Mask to only show the border band, not fill the whole card */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
}

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateBorder {
    to { --border-angle: 360deg; }
}

.skill-card-modern:hover::after {
    opacity: 1;
    animation: rotateBorder 2.5s linear infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   SECONDARY — ABOUT: CURSOR-FOLLOWING GLOW ON STAT CARDS
   Uses a CSS custom property set by JS
   ═══════════════════════════════════════════════════════════════════ */

.stat-card {
    /* Make sure card establishes a stacking context for the glow */
    position: relative;
    overflow: hidden;
}

/* Cursor-tracking radial glow layer */
.stat-card .card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle 120px at var(--gx, 50%) var(--gy, 50%),
        rgba(59,130,246,0.18) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.stat-card:hover .card-glow { opacity: 1; }

/* Ensure content sits above glow */
.stat-card h4,
.stat-card p {
    position: relative;
    z-index: 1;
}

/* Service-card-style outer glow on hover — matches services section */
.stat-card:hover {
    box-shadow:
        0 20px 50px rgba(59,130,246,0.35),
        0  8px 24px rgba(147,51,234,0.25),
        0  0   0  1px rgba(59,130,246,0.3);
}


/* =====================================================================
   FINAL POLISH — 3 Issues from Screenshots
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   ISSUE 1: Skills percentage label — move ABOVE circle, centered,
   not arc-following. This is simpler, cleaner and avoids all the
   JS coordinate scaling bugs that cause the top-left float.
   The JS still animates the count-up number; we just stop moving it.
   ───────────────────────────────────────────────────────────────────── */

.skill-percentage {
    /* Reset any JS-injected left/top to centered-above-circle */
    position: absolute !important;
    top: -26px !important;          /* sit just above the circle ring  */
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--accent-primary) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 12 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.5) !important;
    background: transparent !important;
    /* Always visible — JS still updates the number */
    opacity: 1 !important;
    visibility: visible !important;
    /* No JS transform changes needed */
    transition: color 0.3s ease !important;
}

.skill-card-modern:hover .skill-percentage {
    color: var(--accent-secondary) !important;
    text-shadow: 0 0 16px rgba(147, 51, 234, 0.8) !important;
}

/* Give circle-container top margin to accommodate the label above */
.circle-container-modern {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Tighten card top padding to keep proportions balanced */
.skill-card-modern {
    padding-top: 36px !important;
}

/* Mobile: slightly tighter spacing */


/* ─────────────────────────────────────────────────────────────────────
   ISSUE 2: Footer social icons — dark rounded squares (wrong look).
   Override all conflicting earlier rules with clean, consistent style:
   Circular, border+icon color, gradient fill on hover.
   ───────────────────────────────────────────────────────────────────── */

.footer-social {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.footer-social a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;                   /* Circle, not square */
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;
    color: var(--accent-primary) !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform   0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow  0.3s ease,
        border-color 0.3s ease,
        background  0.3s ease !important;
}

/* Gradient fill layer — expands from centre on hover */
.footer-social a::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,
        var(--accent-primary),
        var(--accent-secondary)) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 0 !important;
}

.footer-social a i {
    position: relative;
    z-index: 1;
}

.footer-social a:hover {
    transform: translateY(-5px) scale(1.12) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.45),
                0  4px 12px rgba(147, 51, 234, 0.3) !important;
    color: #fff !important;
    background: transparent !important;
}

.footer-social a:hover::before {
    opacity: 1 !important;
}

/* Light-mode footer social */
body.light-mode .footer-social a {
    background: rgba(59, 130, 246, 0.07) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--accent-primary) !important;
}

body.light-mode .footer-social a:hover {
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   ISSUE 3: About stat-card cursor glow hides "HAPPY CLIENTS" text
   in light mode. Fix: reduce glow size and opacity in light mode,
   and ensure the label text always has readable contrast.
   ───────────────────────────────────────────────────────────────────── */

/* Dark mode: subtle glow is fine */
.stat-card .card-glow {
    background: radial-gradient(
        circle 90px at var(--gx, 50%) var(--gy, 50%),
        rgba(59, 130, 246, 0.14) 0%,
        transparent 70%
    ) !important;
}

/* Light mode: much more subtle — nearly invisible so text stays readable */
body.light-mode .stat-card .card-glow {
    background: radial-gradient(
        circle 70px at var(--gx, 50%) var(--gy, 50%),
        rgba(59, 130, 246, 0.07) 0%,
        transparent 65%
    ) !important;
    opacity: 0.6 !important;
}

/* Ensure stat-card text is always above the glow and readable */
.stat-card h4,
.stat-card p {
    position: relative !important;
    z-index: 2 !important;
}

/* Light mode stat card text always dark and readable */
body.light-mode .stat-card p {
    color: #475569 !important;
}

body.light-mode .stat-card:hover p {
    color: #334155 !important;
}
/* ================================================================
   FINAL DEFINITIVE PATCH — All 7 Section Requirements
   Applied at the very end so specificity wins over all prior rules.
   Date: 2026-02-18
   ================================================================ */


/* ----------------------------------------------------------------
   @keyframes shared across all patched sections
   ---------------------------------------------------------------- */
@keyframes animatedBorderSpin {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes heroImgBorderFlow {
    0%   { --hero-border-angle: 0deg; }
    100% { --hero-border-angle: 360deg; }
}

@property --hero-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}


/* ================================================================
   1. HOME — Profile image B&W + animated rotating border
   ================================================================ */

/* Wrapper: establish positioning context, preserve float animation */
.img-box {
    position: relative;
    /* keep the float animation that was there */
    animation: float 3s ease-in-out infinite;
    /* Remove old static gradient background — border is now a pseudo */
    background: transparent !important;
    /* give room for the pseudo-border ring */
    padding: 6px;
    border-radius: 50%;
    box-shadow: none;
    display: inline-block;
}

/* Rotating conic-gradient border ring */
.img-box::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from var(--hero-border-angle, 0deg),
        #3b82f6,
        #9333ea,
        #06b6d4,
        #f59e0b,
        #ec4899,
        #3b82f6
    );
    animation: heroImgBorderFlow 3s linear infinite;
    z-index: 0;
    /* Mask to ONLY show 4 px border band */
    -webkit-mask:
        radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px));
    mask:
        radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px));
}

/* Glow ring behind border */
.img-box::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from var(--hero-border-angle, 0deg),
        rgba(59,130,246,0.4),
        rgba(147,51,234,0.4),
        rgba(6,182,212,0.4),
        rgba(249,115,22,0.3),
        rgba(236,72,153,0.3),
        rgba(59,130,246,0.4)
    );
    animation: heroImgBorderFlow 3s linear infinite;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.8;
}

/* Image: grayscale by default, full-colour on hover */
.img-box img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
    border: 5px solid var(--bg-dark);
    filter: grayscale(100%);
    transition: filter 0.5s ease;
    display: block;
}

.img-box:hover img {
    filter: grayscale(0%);
}

/* Light mode: swap inner border colour */
body.light-mode .img-box img {
    border-color: #f8fafc;
}


/* ================================================================
   2. ABOUT — Animated running border + hover shadow on stat-cards
   ================================================================ */

/*
 * Strategy: we cannot use ::before/::after because the stat-card
 * CSS already sets both to display:none. We use outline + box-shadow
 * tricks instead, combined with a wrapper-based conic gradient ring.
 *
 * Since the HTML has a <div class="running-border"> inside the first
 * stat-card we can leverage that as a pattern and add the effect
 * via a CSS class approach. However the other stat-cards don't have
 * that div.  We'll use the CSS mask technique on ::before.
 *
 * Override the display:none from the earlier rules at max specificity.
 */

/* Un-hide ::before/::after for stat-card — override the display:none */
.stat-card::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 20px !important;
    padding: 2px !important;
    background: linear-gradient(
        45deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        #f59e0b,
        var(--accent-primary)
    ) !important;
    background-size: 300% 300% !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.stat-card::after {
    display: none !important;
}

/* Reveal animated border on hover */
.stat-card:hover::before {
    opacity: 1 !important;
    animation: animatedBorderSpin 2s linear infinite !important;
}

/* Smooth shadow on hover — consistent with skills section */
.stat-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    border-color: transparent !important;
    box-shadow:
        0 20px 50px rgba(59, 130, 246, 0.30),
        0  8px 24px rgba(147, 51, 234, 0.20) !important;
}

/* Keep content above pseudo-element glow */
.stat-card h4,
.stat-card p {
    position: relative !important;
    z-index: 2 !important;
}

/* Light mode */
body.light-mode .stat-card:hover {
    box-shadow:
        0 16px 40px rgba(59, 130, 246, 0.18),
        0  6px 18px rgba(147, 51, 234, 0.12) !important;
}


/* ================================================================
   3. RESUME — Fix top-left line + right border cut +
              running border + hover shadow (clean, no bleed)
   ================================================================ */

/*
 * Root cause of issues:
 * A) "Top-left line": the .resume-card::before from line ~2987 draws
 *    a 4px-wide, height:0→100% left-side bar. This creates the visible
 *    top-left artefact on hover because height starts from top:0.
 * B) "Right border cut": overflow:hidden on .resume-section clips the
 *    card's box-shadow and transformed card edge at the column boundary.
 *
 * Fixes:
 * A) Replace ::before entirely — no growing line, just the gradient
 *    border mask (same technique as skill cards).
 * B) Remove overflow:hidden from .resume-section; rely on isolation
 *    and a shallow, contained box-shadow instead.
 * C) Remove translateX from hover transform so the card never physically
 *    enters the next column's pixel space.
 */

/* Column wrapper — isolation yes, overflow visible */
.resume-section {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;   /* CRITICAL: stop clipping card edge */
}

/* Card base */
.resume-card {
    position: relative !important;
    overflow: hidden !important;    /* clips ::before mask to card shape */
    isolation: isolate !important;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 28px 28px 28px 32px !important;
    border-radius: 14px !important;
    border-left: 4px solid var(--accent-primary) !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    transition:
        transform    0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow   0.35s ease,
        border-color 0.35s ease,
        background   0.35s ease !important;
}

/*
 * ::before = animated gradient border ring
 * Replaces the old "growing left bar" entirely.
 */
.resume-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    /* Reset the old bar properties */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    padding: 2px !important;
    background: linear-gradient(
        45deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        #f59e0b,
        var(--accent-primary)
    ) !important;
    background-size: 300% 300% !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* No height animation — this eliminates the top-left line artefact */
}

.resume-card:hover::before {
    opacity: 1 !important;
    animation: animatedBorderSpin 2s linear infinite !important;
}

/* Remove the corner bracket ::after — it contributed to visual confusion */
.resume-card::after {
    display: none !important;
}

/*
 * Hover: lift only (no translateX) — card stays within its column.
 * box-shadow uses positive x-offset so it spreads right (into the gap)
 * not left (into the other column). Blur kept ≤ 24px so it can't
 * cross a 40px gap.
 */
.resume-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-6px) !important;   /* up only, never sideways */
    border-left-color: transparent !important; /* border replaced by animated ring */
    border-color: transparent !important;
    box-shadow:
        0 16px 32px rgba(59, 130, 246, 0.22),
        0  6px 14px rgba(147, 51, 234, 0.14) !important;
    z-index: 2 !important;
}

/* Card content above the glow layer */
.resume-card .resume-year,
.resume-card h4,
.resume-card .resume-place,
.resume-card p {
    position: relative !important;
    z-index: 1 !important;
}

/* Year badge */
.resume-year {
    display: inline-block !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.resume-card:hover .resume-year {
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-2px) !important;
}

.resume-card h4 {
    color: var(--text-white) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
    transition: color 0.3s ease !important;
}

.resume-card:hover h4 {
    color: var(--accent-primary) !important;
}

.resume-place {
    color: var(--text-gray) !important;
    font-size: 0.95rem !important;
    transition: color 0.3s ease !important;
}

.resume-card:hover .resume-place {
    color: var(--text-light) !important;
}

/* Light mode */
body.light-mode .resume-card {
    background: #ffffff !important;
    border-left-color: var(--accent-primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .resume-card:hover {
    background: #f8fafc !important;
    border-color: transparent !important;
    box-shadow:
        0 14px 28px rgba(59, 130, 246, 0.16),
        0  5px 12px rgba(147, 51, 234, 0.10) !important;
}

body.light-mode .resume-card h4      { color: #1e293b !important; }
body.light-mode .resume-card:hover h4 { color: var(--accent-primary) !important; }
body.light-mode .resume-place         { color: #64748b !important; }
body.light-mode .resume-card:hover .resume-place { color: #475569 !important; }
body.light-mode .resume-year          { color: #fff !important; }


/* ================================================================
   5. FOOTER SOCIAL ICONS — Enhanced glow + colour transitions
   ================================================================ */

.footer-social a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;
    color: var(--accent-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform    0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow   0.35s ease,
        border-color 0.35s ease !important;
    text-decoration: none !important;
}

/* Gradient fill layer — slides in from centre on hover */
.footer-social a::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(
        135deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary)
    ) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 0 !important;
}

/* Ring glow layer */
.footer-social a::after {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from var(--hero-border-angle, 0deg),
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        var(--accent-primary)
    ) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    filter: blur(6px) !important;
    transition: opacity 0.3s ease !important;
}

.footer-social a i {
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
}

.footer-social a:hover {
    transform: translateY(-7px) scale(1.15) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.2),
        0 12px 28px rgba(59, 130, 246, 0.50),
        0  5px 14px rgba(147, 51, 234, 0.35),
        0  0   20px rgba(6, 182, 212, 0.20) !important;
}

.footer-social a:hover::before {
    opacity: 1 !important;
}

.footer-social a:hover::after {
    opacity: 0.9 !important;
    animation: heroImgBorderFlow 2s linear infinite !important;
}

.footer-social a:hover i {
    transform: scale(1.1) !important;
}

/* Light mode footer social */
body.light-mode .footer-social a {
    background: rgba(59, 130, 246, 0.07) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    color: var(--accent-primary) !important;
}

body.light-mode .footer-social a:hover {
    color: #fff !important;
    border-color: transparent !important;
    box-shadow:
        0 12px 28px rgba(59, 130, 246, 0.35),
        0  4px 12px rgba(147, 51, 234, 0.25) !important;
}


/* ================================================================
   6. SECTION DIVIDERS — Seamless gradient transitions
   ================================================================ */

/*
 * Replace the hard 1px lines between sections with a feathered
 * gradient band. We do this by adding a top/bottom pseudo fade
 * to each section that transitions colour into the next section's
 * background. Because we can't predict arbitrary background colours
 * across themes, we use a translucent gradient approach.
 */

/* Remove existing hard border-top from footer */
footer {
    border-top: none !important;
    position: relative !important;
}

/* Soft gradient divider above footer */
footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.25) 25%,
        rgba(147, 51, 234, 0.4)  50%,
        rgba(59, 130, 246, 0.25) 75%,
        transparent 100%
    ) !important;
    pointer-events: none !important;
}

/* Navbar bottom border — softer gradient */
.navbar {
    border-bottom: none !important;
    box-shadow: 0 1px 0 0 rgba(59, 130, 246, 0.10),
                0 2px 16px rgba(0, 0, 0, 0.18) !important;
}

/*
 * Between-section fade: each alternating-bg section (.bg-darker)
 * gets a very subtle top and bottom shadow bleed in the section's
 * own colour — this blurs the hard edge between sections.
 */
.section.bg-darker,
section.bg-darker {
    box-shadow:
        inset 0  8px 20px rgba(0, 0, 0, 0.08),
        inset 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .section.bg-darker,
body.light-mode section.bg-darker {
    box-shadow:
        inset 0  8px 20px rgba(0, 0, 0, 0.03),
        inset 0 -8px 20px rgba(0, 0, 0, 0.03) !important;
}


/* ================================================================
   7. SKILLS — Icon centring + light-theme hover colours
   ================================================================ */

/*
 * The SVG has viewBox coordinates with cx=60 cy=60 (centre of 120×120).
 * The icon sits at position:absolute top:50% left:50% translate(-50%,-50%).
 * We add line-height:1 and ensure no inherited font metrics shift it.
 */
.circle-container-modern {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.skill-icon-modern {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Remove any margin-top offsets from previous session rules */
    margin-top: 0 !important;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
    color: var(--accent-primary) !important;
    text-shadow: 0 0 16px rgba(59, 130, 246, 0.5) !important;
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Dark mode hover — icon goes white with glow */
.skill-card-modern:hover .skill-icon-modern {
    transform: translate(-50%, -50%) scale(1.12) !important;
    color: #ffffff !important;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.9),
        0 0 40px rgba(59, 130, 246, 0.8) !important;
    margin-top: 0 !important;
}

/* Light mode base — vibrant colour */
body.light-mode .skill-icon-modern {
    color: var(--accent-primary) !important;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

/* Light mode hover — rich, visible gradient colour shift */
body.light-mode .skill-card-modern:hover .skill-icon-modern {
    color: var(--accent-secondary) !important;
    text-shadow:
        0 0 16px rgba(147, 51, 234, 0.8),
        0 0 32px rgba(59, 130, 246, 0.5) !important;
    filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.6)) !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Light mode card hover — richer background + stronger shadow */
body.light-mode .skill-card-modern:hover {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.05),
        rgba(147, 51, 234, 0.05)
    ) !important;
    box-shadow:
        0 18px 44px rgba(59, 130, 246, 0.18),
        0  6px 18px rgba(147, 51, 234, 0.14),
        inset 0 0 18px rgba(59, 130, 246, 0.04) !important;
}

/* Keep mobile hover icon centred (no margin-top from previous patches) */


/* ================================================================
   END FINAL DEFINITIVE PATCH
   ================================================================ */

/* ================================================================
   FINAL PATCH — Floating Message Button + Resume Year Futuristic
   Hover + About Card Border Fix
   ================================================================ */

/* ── Keyframe: pulsing glow for the resume year badge ─────────── */
@keyframes yearGlowPulse {
    0%   { box-shadow: 0 0 8px  rgba(99,  179, 237, 0.55),
                        0 0 18px rgba(159, 122, 234, 0.35); }
    50%  { box-shadow: 0 0 16px rgba(99,  179, 237, 0.90),
                        0 0 34px rgba(159, 122, 234, 0.60),
                        0 0 48px rgba(59,  130, 246, 0.30); }
    100% { box-shadow: 0 0 8px  rgba(99,  179, 237, 0.55),
                        0 0 18px rgba(159, 122, 234, 0.35); }
}

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

/* ── Resume year badge — futuristic hover (dark mode) ─────────── */
.resume-card:hover .resume-year {
    color: #ffffff !important;
    background: linear-gradient(
        270deg,
        #3b82f6, #9333ea, #06b6d4, #3b82f6
    ) !important;
    background-size: 300% 300% !important;
    animation: yearShimmer 2.4s ease infinite,
               yearGlowPulse 2.4s ease-in-out infinite !important;
    transform: translateY(-3px) scale(1.06) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.70),
                 0 0 22px rgba(99,179,237,0.80) !important;
    letter-spacing: 0.8px !important;
    border: 1px solid rgba(147, 197, 253, 0.45) !important;
}

/* ── Light mode variant — same effect, warmer shadow base ──────── */
body.light-mode .resume-card:hover .resume-year {
    color: #ffffff !important;
    background: linear-gradient(
        270deg,
        #1d4ed8, #7c3aed, #0891b2, #1d4ed8
    ) !important;
    background-size: 300% 300% !important;
    animation: yearShimmer 2.4s ease infinite,
               yearGlowPulse 2.4s ease-in-out infinite !important;
    transform: translateY(-3px) scale(1.06) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.65),
                 0 0 20px rgba(29,78,216,0.70) !important;
    letter-spacing: 0.8px !important;
    border: 1px solid rgba(99, 144, 255, 0.50) !important;
}

/* ── About stat-card — remove hover border ─────────────────────── */
.stat-card:hover {
    border-color: transparent !important;
}
body.light-mode .stat-card:hover {
    border-color: transparent !important;
}

/* ================================================================
   FLOATING MESSAGE BUTTON
   ================================================================ */
.floating-msg-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* Main toggle button */
.floating-msg-main {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #3b82f6, #9333ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.40);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    order: 2;
}

.floating-msg-main:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(59, 130, 246, 0.60);
}

.floating-msg-main i {
    color: #fff;
    font-size: 1.3rem;
    transition: transform 0.35s ease;
}

.floating-msg-main.active i {
    transform: rotate(45deg);
}

/* Options wrapper */
.floating-msg-options {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    order: 1;
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.30s ease, transform 0.30s ease;
}

.floating-msg-options.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Individual option row */
.floating-msg-option {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Platform icon circle */
.floating-msg-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

/* Label chip */
.floating-msg-option-label {
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    letter-spacing: 0.3px;
}

body.light-mode .floating-msg-option-label {
    background: rgba(255,255,255,0.90);
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Platform colours */
.floating-msg-option.whatsapp  .floating-msg-option-icon { background: #25d366; }
.floating-msg-option.skype     .floating-msg-option-icon { background: #00aff0; }
.floating-msg-option.telegram  .floating-msg-option-icon { background: #0088cc; }
.floating-msg-option.messenger .floating-msg-option-icon {
    background: linear-gradient(135deg, #0099ff, #a033ff);
}

/* Platform glow on hover */
.floating-msg-option.whatsapp:hover  .floating-msg-option-icon {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(37,211,102,0.22),
                0 6px 20px rgba(37,211,102,0.55);
}
.floating-msg-option.skype:hover     .floating-msg-option-icon {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(0,175,240,0.22),
                0 6px 20px rgba(0,175,240,0.55);
}
.floating-msg-option.telegram:hover  .floating-msg-option-icon {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(0,136,204,0.22),
                0 6px 20px rgba(0,136,204,0.55);
}
.floating-msg-option.messenger:hover .floating-msg-option-icon {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(0,153,255,0.22),
                0 6px 22px rgba(160,51,255,0.50),
                0 4px 12px rgba(0,153,255,0.40);
}

/* Stagger entry animation */
.floating-msg-options .floating-msg-option {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(8px);
}
.floating-msg-options.open .floating-msg-option:nth-child(1) {
    opacity: 1; transform: translateY(0); transition-delay: 0.00s;
}
.floating-msg-options.open .floating-msg-option:nth-child(2) {
    opacity: 1; transform: translateY(0); transition-delay: 0.06s;
}
.floating-msg-options.open .floating-msg-option:nth-child(3) {
    opacity: 1; transform: translateY(0); transition-delay: 0.12s;
}
.floating-msg-options.open .floating-msg-option:nth-child(4) {
    opacity: 1; transform: translateY(0); transition-delay: 0.18s;
}


/* ================================================================
   END PATCH
   ================================================================ *//* ================================================================
   COMPREHENSIVE RESPONSIVE OPTIMIZATION PATCH
   Fixes: Skills section, Light Mode parity, all breakpoints,
   layout issues, overflow bugs, hover glitches
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTY ENHANCEMENTS
   ================================================================ */
:root {
    /* Light mode vars (defined in :root for fallback) */
    --lm-bg: #f0f4ff;
    --lm-bg-secondary: #ffffff;
    --lm-bg-card: #ffffff;
    --lm-text-primary: #0f172a;
    --lm-text-secondary: #334155;
    --lm-text-muted: #64748b;
    --lm-border: #e2e8f0;
    --lm-border-hover: #3b82f6;
    --lm-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    --lm-shadow-hover: 0 16px 48px rgba(59, 130, 246, 0.18);
}

/* ================================================================
   2. GLOBAL OVERFLOW & BOX SIZING FIXES
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* ================================================================
   3. CONTAINER — FLUID RESPONSIVE
   ================================================================ */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    width: 100%;
}

/* ================================================================
   4. SECTION PADDING — FLUID SCALING
   ================================================================ */
.section {
    padding: clamp(60px, 8vw, 120px) 0;
}

.section-title {
    margin-bottom: clamp(40px, 5vw, 70px);
}

.section-title h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

/* ================================================================
   5. NAVBAR — RESPONSIVE FIX
   ================================================================ */
.navbar {
    z-index: 1000;
}

.nav-wrapper {
    flex-wrap: nowrap;
    gap: clamp(10px, 2vw, 30px);
}

.logo {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-menu {
    gap: clamp(12px, 1.5vw, 30px);
    flex-wrap: nowrap;
}

.nav-link {
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    white-space: nowrap;
}

/* ================================================================
   6. HERO SECTION — RESPONSIVE
   ================================================================ */
.hero {
    padding-top: clamp(80px, 10vh, 100px);
    min-height: 100svh;
}

.hero-container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
}

.hero-content h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.typing-text {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

.hero-content p {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}

.hero-buttons {
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 20px);
}

.img-box img {
    width: clamp(200px, 30vw, 350px);
    height: clamp(200px, 30vw, 350px);
    object-fit: cover;
    border-radius: 50%;
}

/* ================================================================
   7. ABOUT SECTION — RESPONSIVE
   ================================================================ */
.about-stats-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 3vw, 30px);
    margin-top: 40px;
}

.stat-card {
    padding: clamp(24px, 4vw, 50px) clamp(16px, 3vw, 30px);
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.stat-card h4 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-card p {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: var(--text-gray);
}

/* Light mode stat card */
body.light-mode .stat-card {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .stat-card:hover {
    box-shadow: var(--lm-shadow-hover);
    border-color: var(--accent-primary);
    transform: translateY(-5px);
}

body.light-mode .stat-card p {
    color: var(--lm-text-muted);
}

/* ================================================================
   8. SKILLS SECTION — COMPLETE OVERHAUL
   ================================================================ */
.skills-modern {
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

body.light-mode .skills-modern {
    background: #f0f4ff;
}

/* Category title */
.skill-category-title {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin: clamp(30px, 5vw, 60px) 0 clamp(20px, 3vw, 30px);
    padding-left: 16px;
    border-left: 4px solid var(--accent-primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

body.light-mode .skill-category-title {
    color: var(--lm-text-secondary);
}

.skill-category-title i {
    color: var(--accent-primary);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    flex-shrink: 0;
}

/* ---- Skills Grid ---- */
.skills-grid-modern {
    display: grid;
    /* Fluid: fills 5 on wide, 4 on large, 3 on medium, 2 on small, 1 on xs */
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: clamp(16px, 3vw, 36px);
    margin-bottom: clamp(20px, 4vw, 40px);
}

/* ---- Skill Card ---- */
.skill-card-modern {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 30px) clamp(12px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                background 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    will-change: transform;
    /* Ensure nothing bleeds out */
    contain: layout style;
}

/* Animated gradient border on hover */
.skill-card-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.skill-card-modern:hover::before {
    opacity: 1;
    animation: skillBorderMove 2.5s linear infinite;
}

.skill-card-modern:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: transparent;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25),
                0 8px 24px rgba(147, 51, 234, 0.15),
                inset 0 0 20px rgba(59, 130, 246, 0.08);
}

/* Light mode card */
body.light-mode .skill-card-modern {
    background: #ffffff;
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

body.light-mode .skill-card-modern:hover {
    background: #f8fbff;
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15),
                0 8px 24px rgba(147, 51, 234, 0.10);
}

/* ---- Circle Container — proportional sizing ---- */
.circle-container-modern {
    position: relative;
    /* Fluid circle: scales between 90px and 130px */
    width: clamp(90px, 12vw, 130px);
    height: clamp(90px, 12vw, 130px);
    flex-shrink: 0;
}

.circle-container-modern svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
    overflow: visible;
}

/* Dynamic radius via CSS — keep cx/cy at 50% of the SVG */
.circle-bg-modern,
.circle-progress-modern {
    fill: none;
    /* cx/cy/r are set inline in HTML as 60/60/55, but we fix via stroke-width */
}

.circle-bg-modern {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 7;
}

body.light-mode .circle-bg-modern {
    stroke: rgba(15, 23, 42, 0.08);
}

.circle-progress-modern {
    stroke: url(#modernGradient);
    stroke-width: 7;
    stroke-linecap: round;
    /* No CSS transition — JS rAF loop is the sole animation controller */
    transition: none;
}

/* ---- Icon — always centered, never overflows ---- */
.skill-icon-modern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: var(--accent-primary);
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                color 0.35s ease,
                text-shadow 0.35s ease,
                filter 0.35s ease;
    /* Prevent overflow */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    margin: 0 !important;
}

.skill-card-modern:hover .skill-icon-modern {
    transform: translate(-50%, -50%) scale(1.15) !important;
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9),
                 0 0 40px rgba(59, 130, 246, 0.8) !important;
    margin: 0 !important;
}

body.light-mode .skill-icon-modern {
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

body.light-mode .skill-card-modern:hover .skill-icon-modern {
    color: var(--accent-secondary) !important;
    text-shadow: 0 0 18px rgba(147, 51, 234, 0.75),
                 0 0 36px rgba(59, 130, 246, 0.5) !important;
    filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.6)) !important;
}

/* ---- Percentage text ---- */
.skill-percentage {
    position: absolute;
    bottom: clamp(6px, 1.5vw, 10px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
    letter-spacing: 0.5px;
    z-index: 2;
    pointer-events: none;
}

body.light-mode .skill-percentage {
    color: var(--accent-primary);
}

.skill-card-modern:hover .skill-percentage {
    color: var(--accent-tertiary);
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.7);
}

/* ---- Skill name + badge ---- */
.skill-info-modern {
    text-align: center;
    width: 100%;
    min-width: 0; /* prevent overflow */
}

.skill-name-modern {
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.light-mode .skill-name-modern {
    color: var(--lm-text-primary);
}

.skill-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
    padding: clamp(3px, 0.5vw, 6px) clamp(8px, 1.5vw, 16px);
    border-radius: 20px;
    font-size: clamp(0.65rem, 1vw, 0.82rem);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-card-modern:hover .skill-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

body.light-mode .skill-badge {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--accent-primary);
}

body.light-mode .skill-card-modern:hover .skill-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: transparent;
}

/* ================================================================
   9. SERVICES SECTION — LIGHT MODE FIX
   ================================================================ */
.services-grid-new {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: clamp(20px, 3vw, 30px);
}

.service-card {
    padding: clamp(28px, 4vw, 45px) clamp(20px, 3vw, 35px);
}

.service-card h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.service-icon {
    width: clamp(64px, 8vw, 90px);
    height: clamp(64px, 8vw, 90px);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

body.light-mode .service-card {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
    color: var(--lm-text-primary);
}

body.light-mode .service-card h3 {
    color: var(--lm-text-primary);
}

body.light-mode .service-card p {
    color: var(--lm-text-muted);
}

body.light-mode .service-card:hover {
    background: #f8fbff;
    border-color: var(--accent-primary);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15),
                0 8px 24px rgba(147, 51, 234, 0.1);
    transform: translateY(-10px);
}

body.light-mode .service-card::before,
body.light-mode .service-card::after {
    border-color: var(--accent-primary);
}

/* ================================================================
   10. RESUME SECTION — RESPONSIVE & LIGHT MODE
   ================================================================ */
.resume-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 60px);
}

.resume-section-title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(20px, 3vw, 30px);
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.15);
}

.resume-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 14px;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 16px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.resume-card:hover {
    transform: translateX(6px);
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.04);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

.resume-year {
    display: inline-block;
    padding: 5px 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 10px;
    transition: all 0.35s ease;
}

.resume-card h4 {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 4px;
}

.resume-place {
    font-size: 0.88rem;
    color: var(--text-gray);
}

body.light-mode .resume-card {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .resume-card:hover {
    background: #f8fbff;
    border-color: var(--accent-primary);
    box-shadow: var(--lm-shadow-hover);
    transform: translateX(6px);
}

body.light-mode .resume-card h4 {
    color: var(--lm-text-primary);
}

body.light-mode .resume-place {
    color: var(--lm-text-muted);
}

body.light-mode .resume-section-title {
    color: var(--accent-primary);
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* ================================================================
   11. PORTFOLIO GRID — RESPONSIVE
   ================================================================ */
.portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: clamp(16px, 3vw, 30px);
}

.portfolio-item img {
    height: clamp(200px, 25vw, 320px);
    width: 100%;
    object-fit: cover;
}

/* Light mode portfolio */
body.light-mode .portfolio-item {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .portfolio-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--lm-shadow-hover);
}

/* ================================================================
   12. BLOG GRID — RESPONSIVE
   ================================================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: clamp(16px, 3vw, 30px);
}

.blog-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
}

body.light-mode .blog-card {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .blog-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--lm-shadow-hover);
}

body.light-mode .blog-content h3 {
    color: var(--lm-text-primary);
}

body.light-mode .blog-content p {
    color: var(--lm-text-muted);
}

/* ================================================================
   13. CONTACT SECTION — LIGHT MODE & RESPONSIVE
   ================================================================ */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(30px, 5vw, 60px);
    align-items: start;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
    background: #ffffff;
    border-color: var(--lm-border);
    color: var(--lm-text-primary);
    box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.04);
}

body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    background: #f8fbff;
}

body.light-mode .contact-form input::placeholder,
body.light-mode .contact-form textarea::placeholder {
    color: #94a3b8;
}

body.light-mode .info-item {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .info-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--lm-shadow-hover);
    background: #f8fbff;
}

body.light-mode .info-item h4 {
    color: var(--lm-text-primary);
}

body.light-mode .info-item p,
body.light-mode .info-item a {
    color: var(--lm-text-muted);
}

body.light-mode .info-item a:hover {
    color: var(--accent-primary);
}

/* ================================================================
   14. FOOTER — LIGHT MODE
   ================================================================ */
body.light-mode footer {
    background: #ffffff;
    border-top-color: var(--lm-border);
}

body.light-mode .footer-text {
    color: var(--lm-text-muted);
}

body.light-mode .footer-social a {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--accent-primary);
}

body.light-mode .footer-social a:hover {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* ================================================================
   15. LIGHT MODE — HERO
   ================================================================ */
body.light-mode .hero {
    background: radial-gradient(ellipse at top right, #dbeafe 0%, #ede9fe 50%, #f0f4ff 100%);
}

body.light-mode .hero-content h3 {
    color: var(--lm-text-secondary);
}

body.light-mode .hero-content p {
    color: var(--lm-text-muted);
}

body.light-mode .typing-text {
    color: var(--lm-text-secondary);
}

body.light-mode .type-effect {
    color: var(--accent-primary);
}

/* ================================================================
   16. LIGHT MODE — ABOUT TEXT
   ================================================================ */
body.light-mode .about-headline {
    color: var(--lm-text-primary);
}

body.light-mode .about-tagline {
    color: var(--lm-text-secondary);
}

body.light-mode .about-description {
    color: var(--lm-text-muted);
}

body.light-mode .highlight-text {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   17. LIGHT MODE — SECTION TITLE
   ================================================================ */
body.light-mode .section-title h2 {
    color: var(--lm-text-primary);
}

body.light-mode .section-title span {
    color: var(--accent-primary);
}

/* ================================================================
   18. LIGHT MODE — BACKGROUND SECTIONS
   ================================================================ */
body.light-mode {
    background: var(--lm-bg);
    color: var(--lm-text-primary);
}

body.light-mode .bg-darker {
    background: #ffffff;
}

/* ================================================================
   19. MODAL LIGHT MODE
   ================================================================ */
body.light-mode .certifications-modal {
    background: rgba(15, 23, 42, 0.7);
}

body.light-mode .certifications-modal-content {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2);
}

body.light-mode .certifications-header h2 {
    color: var(--lm-text-primary);
}

body.light-mode .certifications-header p {
    color: var(--lm-text-muted);
}

body.light-mode .certifications-close {
    background: rgba(15, 23, 42, 0.06);
    border-color: var(--lm-border);
    color: var(--lm-text-primary);
}

body.light-mode .certificate-card {
    background: #ffffff;
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow);
}

body.light-mode .certificate-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--lm-shadow-hover);
}

body.light-mode .certificate-info h4 {
    color: var(--lm-text-primary);
}

body.light-mode .certificate-info p {
    color: var(--lm-text-muted);
}

body.light-mode .cert-viewer-modal {
    background: rgba(255, 255, 255, 0.97);
}

body.light-mode .cert-viewer-close {
    background: rgba(15, 23, 42, 0.08);
    border-color: var(--lm-border);
    color: var(--lm-text-primary);
}

/* ================================================================
   20. BREAKPOINT: 1200px — LARGE TABLETS / SMALL LAPTOPS
   ================================================================ */

/* ================================================================
   21. BREAKPOINT: 992px — TABLETS
   ================================================================ */

/* ================================================================
   22. BREAKPOINT: 768px — MOBILE LANDSCAPE / SMALL TABLETS
   ================================================================ */

/* ================================================================
   23. BREAKPOINT: 480px — SMALL PHONES (PORTRAIT)
   ================================================================ */

/* ================================================================
   24. BREAKPOINT: 380px — VERY SMALL PHONES
   ================================================================ */

/* ================================================================
   25. ULTRA WIDE — 1400px+
   ================================================================ */

/* ================================================================
   26. TOUCH DEVICE — DISABLE PROBLEMATIC HOVER
   ================================================================ */

/* ================================================================
   27. SMOOTH SCROLL & SCROLL PADDING (OVERRIDES)
   ================================================================ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ================================================================
   28. FOCUS STATES — ACCESSIBILITY
   ================================================================ */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ================================================================
   29. CERTIFICATIONS BUTTON — RESPONSIVE
   ================================================================ */
.certifications-wrapper {
    text-align: center;
    margin-top: 50px;
}

.certifications-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 40px);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    white-space: nowrap;
}

/* ================================================================
   30. RUNNING BORDER ANIMATION ON STAT CARD
   ================================================================ */
@keyframes runningBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.stat-card .running-border {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: runningBorder 3s linear infinite paused;
}

.stat-card:hover .running-border {
    opacity: 0.7;
    animation-play-state: running;
}

/* ================================================================
   31. SKILL HOVER — MOBILE ICON FIX (ABSOLUTE OVERRIDE)
   ================================================================ */
.skill-icon-modern {
    /* Reset any previous patches */
    margin-top: 0 !important;
    top: 50% !important;
    left: 50% !important;
}

.skill-card-modern:hover .skill-icon-modern {
    margin-top: 0 !important;
    top: 50% !important;
    left: 50% !important;
}

/* ================================================================
   32. DARK MODE — ADDITIONAL POLISH
   ================================================================ */

/* Subtle gradient on section backgrounds alternation */
body:not(.light-mode) .section.skills-modern {
    background: var(--bg-dark);
}

body:not(.light-mode) .about-tagline {
    color: var(--text-light);
}

body:not(.light-mode) .about-description {
    color: var(--text-gray);
}

/* ================================================================
   33. HERO SECTION — LIGHT MODE BUTTONS
   ================================================================ */
body.light-mode .btn-primary {
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.3);
}

body.light-mode .btn-outline {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: transparent;
}

body.light-mode .btn-outline:hover {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

/* ================================================================
   34. DOWNLOAD CV BUTTON — LIGHT MODE
   ================================================================ */
body.light-mode .btn-download-cv {
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

/* ================================================================
   35. ANIMATION: SKILL BORDER KEYFRAME
   ================================================================ */
@keyframes skillBorderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================================================================
   END COMPREHENSIVE RESPONSIVE PATCH
   ================================================================ */

/* ================================================================
   TARGETED PATCH: About Cards = Service Cards + Floating Icon Toggle
   ================================================================ */

/* ── 1. About stats grid — same 3-col layout ─────────────────── */
.about-stats-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* ── 2. About stat card — number & label override ────────────── */
.about-stat-card {
    /* Inherits ALL service-card styles: hover, shadow, border, glow,
       corner-bracket animation, shimmer – zero extra rules needed.     */
    text-align: center; /* service-card is already text-align:center */
}

/* Stat number styled like service card h3 */
.about-stat-card .stat-number {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    /* Match service-card h3 transition */
    transition: all 0.4s ease;
}

.about-stat-card:hover .stat-number {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    transform: scale(1.05);
    display: inline-block;
}

/* Label text — match service-card p */
.about-stat-card p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Light mode — stat number */
body.light-mode .about-stat-card .stat-number {
    -webkit-text-fill-color: transparent;
}

body.light-mode .about-stat-card p {
    color: #475569;
}

/* Responsive — match service-card breakpoints */



/* ── 3. Floating message icon — toggle animation ─────────────── */

/* Both icons sit in same space */
.floating-msg-main .floating-icon-open,
.floating-msg-main .floating-icon-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Default state: show chat icon, hide X */
.floating-msg-main .floating-icon-open {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.floating-msg-main .floating-icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

/* Active (open) state: hide chat icon, show X */
.floating-msg-main.active .floating-icon-open {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.6);
}

.floating-msg-main.active .floating-icon-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Ensure button is positioned for absolute children */
.floating-msg-main {
    position: relative;
}

/* ================================================================
   END TARGETED PATCH
   ================================================================ */
/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE & INTERACTION ADDITIONS
═══════════════════════════════════════════════════════════════ */

/* hero-greeting: replaces the original h3 for semantic correctness
   (only one h1 per page rule — the h3 is just stylistic, not a heading level)  */
.hero-greeting {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 500;
    color: var(--text-muted, rgba(148,163,184,0.9));
    margin: 0 0 0.25em 0;
    letter-spacing: 0.02em;
}

/* Theme dropdown: explicit stacking context above nav-center at all times */
.theme-dropdown {
    isolation: isolate;
}
.theme-dropdown-btn {
    position: relative;
    z-index: 1001;
}
.theme-dropdown-content {
    z-index: 1002;
}

/* Navbar wrapper: explicit stacking context */
.nav-wrapper {
    position: relative;
    z-index: 1000;
}

/* Modal aria-hidden:true → display:none (accessibility + performance) */
#certificationsModal[aria-hidden="true"] { display: none !important; }
#certViewerModal[aria-hidden="true"]     { display: none !important; }

/* Screen-reader only utility class */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL THEME SYNC — Logo, Hamburger, Theme Toggle
   Priority: these rules are last in the file, so they win over earlier rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DARK MODE (default) ──────────────────────────────────────────────────
   Logo text  = accent-primary (brand blue)
   Hamburger bars = accent-primary (brand blue), no background fill
   Theme toggle   = white (already set earlier, confirmed here)
   ────────────────────────────────────────────────────────────────────────── */
.logo {
    color: var(--accent-primary) !important;
}

/* The animated "." keeps its gradient — no override needed */

.menu-toggle .bar {
    background: var(--accent-primary) !important;
}

/* ── LIGHT MODE ────────────────────────────────────────────────────────────
   Navbar stays dark in light mode → white elements keep good contrast.
   Logo  = white
   Hamburger bars = white
   Theme toggle   = white (already correct)
   ────────────────────────────────────────────────────────────────────────── */
body.light-mode .logo {
    color: #ffffff !important;
}

body.light-mode .menu-toggle .bar {
    background: #ffffff !important;
}

body.light-mode .theme-dropdown-btn {
    color: #ffffff !important;
}

/* Active (open) state — hamburger remains the same color */
.menu-toggle.active .bar {
    background: var(--accent-primary) !important;
}
body.light-mode .menu-toggle.active .bar {
    background: #ffffff !important;
}

/* ── HOVER glow for hamburger ─────────────────────────────────────────────
   Dark: brightens accent  |  Light: slight white glow
   ────────────────────────────────────────────────────────────────────────── */
.menu-toggle:hover .bar,
.menu-toggle:focus-visible .bar {
    background: var(--accent-tertiary) !important; /* cyan-teal pop on hover */
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.6);
}
body.light-mode .menu-toggle:hover .bar,
body.light-mode .menu-toggle:focus-visible .bar {
    background: rgba(255, 255, 255, 0.75) !important;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKILLS SECTION — Responsive Overflow & Containment Fix
   Definitive rules placed last to win over all earlier breakpoint conflicts.

   Strategy:
     ≥ 601 px  → 2 columns  (cards ~280 px each on 768 px, plenty of room)
     481–600 px → 1 column  (the "large-mobile squeeze" zone — fixes overflow)
     ≤ 480 px  → 2 columns  (cards shrunk with smaller circles, still fits)
     ≤ 380 px  → 1 column  (very small — prevent any overflow)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base card guard — prevent any text from ever escaping the card */
.skill-card-modern {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.skill-info-modern {
    width: 100% !important;
    min-width: 0 !important;    /* flex/grid shrink fix */
    overflow: hidden !important;
}

.skill-name-modern {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    min-width: 0 !important;
}

.skill-badge {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── 768 px and below: 2-column ── */
@media (max-width: 768px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .skill-card-modern {
        padding: 20px 14px 16px !important;
        gap: 12px !important;
    }
    .circle-container-modern {
        --sz: 90px !important;
        --circle-size: 90px !important;
    }
    .skill-name-modern {
        font-size: 0.88rem !important;
    }
    .skill-badge {
        font-size: 0.62rem !important;
        padding: 3px 10px !important;
        letter-spacing: 0.4px !important;
    }
}

/* ── 600 px and below: collapse to 1 column (the overflow zone) ── */
@media (max-width: 600px) {
    .skills-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .skill-card-modern {
        padding: 24px 20px 20px !important;
        gap: 14px !important;
        flex-direction: row !important;   /* horizontal layout for single col */
        align-items: center !important;
        text-align: left !important;
    }
    .circle-container-modern {
        --sz: 80px !important;
        --circle-size: 80px !important;
        flex-shrink: 0 !important;
    }
    .skill-info-modern {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .skill-name-modern {
        font-size: 1rem !important;
        white-space: normal !important;
    }
    .skill-badge {
        font-size: 0.68rem !important;
        padding: 4px 12px !important;
    }
}

/* ── 480 px and below: back to 2 columns (tighter, but smaller circles) ── */
@media (max-width: 480px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .skill-card-modern {
        padding: 16px 10px 14px !important;
        gap: 10px !important;
        flex-direction: column !important;  /* back to column for 2-col */
        align-items: center !important;
        text-align: center !important;
    }
    .circle-container-modern {
        --sz: 72px !important;
        --circle-size: 72px !important;
    }
    .skill-info-modern {
        text-align: center !important;
        align-items: center !important;
    }
    .skill-name-modern {
        font-size: 0.78rem !important;
        word-break: break-word !important;
    }
    .skill-badge {
        font-size: 0.56rem !important;
        padding: 3px 8px !important;
        letter-spacing: 0.2px !important;
    }
    .skill-icon-modern {
        font-size: 1.3rem !important;
    }
}

/* ── 380 px and below: single column again ── */
@media (max-width: 380px) {
    .skills-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .skill-card-modern {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 20px 16px !important;
        max-width: 100% !important;
    }
    .circle-container-modern {
        --sz: 78px !important;
        --circle-size: 78px !important;
        flex-shrink: 0 !important;
    }
    .skill-info-modern {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .skill-name-modern {
        font-size: 0.92rem !important;
    }
    .skill-badge {
        font-size: 0.62rem !important;
        padding: 4px 10px !important;
    }
    .skill-icon-modern {
        font-size: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER ANIMATION FIX — service-card (Services + About sections)
   ─────────────────────────────────────────────────────────────────────────
   ROOT CAUSES FIXED
   ─────────────────────────────────────────────────────────────────────────

   PROBLEM 1 — ::before inset:-2px + overflow:hidden = edge glitch
   ─────────────────────────────────────────────────────────────────────────
   The last winning .service-card::before (line ~4585) uses `inset: -2px`,
   making the pseudo-element 4px larger than the card in every direction.
   `overflow: hidden` hard-clips this at the card edge. The `movingBorder`
   animation does translateX(-100%) rotate(0deg) → translateX(100%)
   rotate(360deg). At ~45°–135° mid-animation the diagonal rotation makes the
   clipped gradient visibly cut at an angle across the card corner → glitch.

   FIX: Change inset to 0 (pseudo stays inside card boundary) and remove the
   compound translate+rotate — replace with a clean background-position sweep
   which is GPU-composited and never clips.

   PROBLEM 2 — ::after 200%×200% rotating inside overflow:hidden = artifacts
   ─────────────────────────────────────────────────────────────────────────
   The last winning .service-card::after (line ~3464) is positioned
   top:-50%, left:-50%, width:200%, height:200% and rotates with
   `rotate-glow 3s infinite`. A radial gradient on a 200% element rotating
   inside overflow:hidden clips asymmetrically at each edge as it spins
   (left/right/top/bottom clip at different animation phases) → uneven glow.

   FIX: Replace the oversized rotating element with a contained radial glow
   that animates opacity only — zero rotation, no clipping artifacts.

   PROBLEM 3 — transform-style:preserve-3d breaks compositing
   ─────────────────────────────────────────────────────────────────────────
   `transform-style: preserve-3d` (added at line ~3458) creates a 3D
   compositing context. Combined with `overflow: hidden` and
   `backdrop-filter: blur(12px)`, this forces the browser to flatten the 3D
   context before applying the backdrop filter, which can cause a compositing
   layer reset on hover → one-frame pop/flash.

   FIX: Remove transform-style:preserve-3d. The card has no actual 3D
   children — the preserve-3d was added by accident in an edit pass.

   PROBLEM 4 — No will-change = GPU layer created on hover entry = pop
   ─────────────────────────────────────────────────────────────────────────
   Without will-change:transform, the browser creates the GPU compositing
   layer the moment the CSS transform fires on hover. This causes a
   1-frame repaint flash as the paint target switches from the main layer
   to a new promoted layer.

   FIX: Add will-change:transform to pre-promote the card layer.
   This trades a tiny amount of GPU memory for eliminating the hover flash.
   Applied only to service-card (not globally) to minimise memory impact.

   CONSTRAINTS RESPECTED
   ─────────────────────────────────────────────────────────────────────────
   ✅  Animation style, speed, color, and glow preserved exactly
   ✅  Card design, border-radius, shadows, backdrop-filter unchanged
   ✅  Both dark and light mode hover behavior maintained
   ✅  About section (service-card about-stat-card) fixed identically
   ✅  Responsive behavior unchanged
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── FIX 1 & 3: Remove transform-style:preserve-3d + pre-promote GPU layer ── */
.service-card {
    /* Remove 3D context — incompatible with overflow:hidden + backdrop-filter */
    transform-style: flat !important;
    /* Pre-promote to GPU compositing layer so hover doesn't trigger a new layer */
    will-change: transform !important;
    /* Ensure the card itself has a proper stacking context for pseudo-elements */
    isolation: isolate !important;
}


/* ── FIX 2: Replace ::before — remove inset:-2px, fix animation ────────────── */
/*
   The movingBorder animation sweeps a gradient across the card interior.
   Changed from compound translateX+rotate (creates diagonal clips) to a
   clean background-position shift (GPU composited, never overflows the
   card boundary, no clipping artifacts).
*/
.service-card::before {
    content: '' !important;
    position: absolute !important;
    /* inset:0 instead of inset:-2px — stays inside overflow:hidden boundary */
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(59, 130, 246, 0.18) 40%,
        rgba(147, 51, 234, 0.12) 55%,
        transparent 75%
    ) !important;
    background-size: 250% 250% !important;
    background-position: 100% 50% !important;
    opacity: 0 !important;
    /* Transition opacity in + background-position sweep */
    transition:
        opacity 0.4s ease,
        background-position 0.6s ease !important;
    /* Never rotates — no diagonal clipping possible */
    transform: none !important;
    animation: none !important;       /* cancel movingBorder */
    z-index: 0 !important;
    pointer-events: none !important;
}

.service-card:hover::before {
    opacity: 1 !important;
    /* Sweep background position left-to-right — smooth, no rotation, no clipping */
    background-position: 0% 50% !important;
    animation: none !important;       /* no spin animation needed */
}


/* ── FIX 3: Replace ::after — remove 200%×200% rotation, use contained glow ── */
/*
   Replaced the 200%×200% rotating element (clips at all 4 edges during spin)
   with a contained radial glow that fades in/out via opacity only.
   Radial gradient is fully contained within the card (inset:0),
   so overflow:hidden never produces any visible artifact.
*/
.service-card::after {
    content: '' !important;
    position: absolute !important;
    /* Fully contained inside card — no overflow clipping issues */
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    border-radius: inherit !important;
    background: radial-gradient(
        ellipse 80% 70% at 50% 40%,
        rgba(59, 130, 246, 0.12) 0%,
        rgba(147, 51, 234, 0.06) 55%,
        transparent 80%
    ) !important;
    opacity: 0 !important;
    /* Only animate opacity — no rotation, no transform */
    transition: opacity 0.5s ease !important;
    animation: none !important;       /* cancel rotate-glow */
    transform: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.service-card:hover::after {
    opacity: 1 !important;
    /* Subtle pulse — opacity only, no movement → zero clipping risk */
    animation: cardGlowPulse 2.5s ease-in-out infinite !important;
}

/* Gentle opacity pulse — replaces the broken rotate-glow */
@keyframes cardGlowPulse {
    0%,  100% { opacity: 0.7; }
    50%        { opacity: 1;   }
}


/* ── Ensure all card content sits above pseudo-elements ─────────────────────── */
.service-card > * {
    position: relative !important;
    z-index: 1 !important;
}


/* ── Service icon hover — smooth zoom only (no rotate jitter) ───────────────── */
.service-card .service-icon {
    will-change: transform !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease !important;
}

.service-card:hover .service-icon {
    transform: scale(1.12) !important;   /* zoom only — no tilt, no rotation */
    box-shadow: 0 14px 32px rgba(59, 130, 246, 0.45) !important;
}


/* ── Light mode: same fix, light-aware glow colors ─────────────────────────── */
body.light-mode .service-card::before {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(59, 130, 246, 0.10) 40%,
        rgba(147, 51, 234, 0.07) 55%,
        transparent 75%
    ) !important;
    background-size: 250% 250% !important;
    background-position: 100% 50% !important;
}

body.light-mode .service-card::after {
    background: radial-gradient(
        ellipse 80% 70% at 50% 40%,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(147, 51, 234, 0.04) 55%,
        transparent 80%
    ) !important;
}


/* ── About section stat-cards (service-card about-stat-card) ─────────────────
   These share the .service-card class so the above fixes apply automatically.
   The rules below just ensure the stat-number z-index stays above the glow.  */
.about-stat-card .stat-number,
.about-stat-card p,
.about-stat-card .service-icon {
    position: relative !important;
    z-index: 2 !important;
}
/* ── END HOVER ANIMATION FIX ─────────────────────────────────────────────── */