/* =====================================================
   BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Space Grotesk', sans-serif;
    background: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
    transition: background .3s, color .3s;
}
.dark body, body.dark-body { background:#0f172a; color:#e2e8f0; }

/* =====================================================
   SCROLL PROGRESS BAR
   ===================================================== */
#scroll-bar {
    position: fixed; top:0; left:0; height:3px; width:0%;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    z-index: 9999; transition: width .1s linear;
}

/* =====================================================
   SKIP LINK
   ===================================================== */
.skip-link {
    position:absolute; left:-9999px; top:0;
    background:#2563eb; color:#fff; padding:10px; z-index:999;
}
.skip-link:focus { left:0; }

/* =====================================================
   NAV
   ===================================================== */
.navbar {
    position: sticky; top:0; z-index:100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(37,99,235,.08);
    transition: background .3s;
}
.dark .navbar { background: rgba(15,23,42,.94); border-bottom-color: rgba(124,58,237,.15); }
.nav-inner {
    max-width:1200px; margin:0 auto; padding:0 1.5rem;
    display:flex; align-items:center; justify-content:space-between; height:66px;
}
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-avatar {
    width:40px; height:40px; border-radius:50%;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:.85rem; flex-shrink:0;
}
.nav-brand-name { font-weight:700; font-size:1rem; color:#0f172a; line-height:1.2; }
.dark .nav-brand-name { color:#f1f5f9; }
.nav-brand-sub  { font-size:.68rem; color:#64748b; }
.dark .nav-brand-sub { color:#94a3b8; }

.nav-links { display:flex; gap:1.75rem; list-style:none; }
.nav-links a {
    text-decoration:none; font-weight:500; font-size:.85rem;
    color:#334155; position:relative; transition:color .2s;
}
.dark .nav-links a { color:#cbd5e1; }
.nav-links a::after {
    content:''; position:absolute; bottom:-3px; left:0;
    width:0; height:2px; background:#2563eb; transition:width .25s;
}
.nav-links a:hover { color:#2563eb; }
.nav-links a:hover::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:8px; }
.icon-btn {
    width:38px; height:38px; border-radius:50%;
    border:1px solid #e2e8f0; background:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:#64748b; transition:all .2s; font-size:.9rem;
}
.dark .icon-btn { border-color:#334155; color:#94a3b8; }
.icon-btn:hover { background:#2563eb; color:#fff; border-color:#2563eb; }

.hamburger { display:none; background:none; border:none; cursor:pointer; font-size:1.3rem; color:#334155; }
.dark .hamburger { color:#cbd5e1; }

.mob-menu { display:none; flex-direction:column; background:#fff; border-top:1px solid #e2e8f0; }
.dark .mob-menu { background:#1e293b; border-top-color:#334155; }
.mob-menu.open { display:flex; }
.mob-menu a {
    padding:.9rem 1.5rem; text-decoration:none; font-weight:500; font-size:.9rem;
    color:#334155; border-bottom:1px solid #f1f5f9; transition:background .15s;
    display:flex; align-items:center; gap:8px;
}
.dark .mob-menu a { color:#cbd5e1; border-bottom-color:#334155; }
.mob-menu a:hover { background:#eff6ff; color:#2563eb; }
.dark .mob-menu a:hover { background:#0f172a; }

/* =====================================================
   SECTION EYEBROW
   ===================================================== */
.section-eyebrow {
    display:inline-block; font-size:.7rem; font-weight:700;
    letter-spacing:2.5px; text-transform:uppercase; color:#2563eb; margin-bottom:.4rem;
}

/* =====================================================
   THEME TOGGLE
   ===================================================== */
.theme-toggle {
    cursor:pointer; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:all .3s; background:transparent;
}
.theme-toggle:hover { background:rgba(37,99,235,.1); }
.dark .theme-toggle:hover { background:rgba(255,255,255,.1); }

/* =====================================================
   SKILL BAR
   ===================================================== */
.skill-bar { transition: width 1.5s ease-in-out; }

/* =====================================================
   FILTER BUTTONS
   ===================================================== */
.filter-btn {
    padding:.55rem 1.4rem; border-radius:30px; font-weight:500;
    transition:all .3s; border:2px solid transparent; cursor:pointer; font-family:inherit;
    background:#f1f5f9; color:#475569;
}
.dark .filter-btn { background:#334155; color:#94a3b8; }
.filter-btn.active {
    background:#2563eb; color:#fff;
    transform:scale(1.05); box-shadow:0 10px 25px -5px rgba(37,99,235,.45);
}
.filter-btn:hover:not(.active) { border-color:#2563eb; color:#2563eb; transform:translateY(-2px); background:#fff; }
.dark .filter-btn:hover:not(.active) { color:#93c5fd; border-color:#93c5fd; background:#1e293b; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:768px) {
    .nav-links  { display:none; }
    .hamburger  { display:block; }
    .hero-inner { flex-direction:column; text-align:center; padding:2.5rem 1rem 3rem; }
    .hero-text  { max-width:100%; }
    .hero-desc  { margin:0 auto 2rem; }
    .hero-btns  { justify-content:center; }
    .philip-wrap  { width:250px; height:330px; order:-1; margin:0 auto; }
    .philip-photo { width:202px; height:280px; }
    .philip-frame { width:194px; height:266px; top:18px; right:0; }
    .philip-dots  { width:194px; height:266px; top:18px; right:0; }
    .philip-badge { bottom:10px; right:-8px; min-width:145px; }
    .project-card:hover { transform:translateY(-6px) scale(1.01); }
    .education-card:hover { transform:translateX(4px); }
    .cert-card { flex-direction:column; }
    .cert-card-accent { width:100%; min-width:unset; height:68px; flex-direction:row; padding:0 1.25rem; justify-content:flex-start; gap:.75rem; }
}
@media (max-width:480px) {
    .philip-wrap  { width:210px; height:278px; }
    .philip-photo { width:172px; height:240px; }
    .philip-frame { width:164px; height:228px; top:14px; right:0; }
    .philip-dots  { width:164px; height:228px; top:14px; right:0; }
    .hero-btns    { flex-direction:column; align-items:center; }
    .btn-primary, .btn-outline, .btn-ghost { width:100%; justify-content:center; }
    .filter-btn   { padding:.4rem .85rem; font-size:.8rem; }
}
@media (max-width:960px) {
    .philip-wrap  { width:300px; height:390px; }
    .philip-photo { width:242px; height:330px; }
    .philip-frame { width:232px; height:318px; top:22px; }
    .philip-dots  { width:232px; height:318px; top:22px; }
}

/* =====================================================
   HERO SECTION
   ===================================================== */
#home {
    min-height: calc(100vh - 66px);
    background: linear-gradient(135deg,#eef2ff 0%,#f5f3ff 50%,#eff6ff 100%);
    display:flex; align-items:center;
    position:relative; overflow:hidden;
}
.dark #home { background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%); }

.hero-dots-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-dot {
    position:absolute; border-radius:50%;
    background:rgba(124,58,237,.14);
    animation: dotFloat linear infinite;
}
.dark .hero-dot { background:rgba(124,58,237,.22); }

.hero-inner {
    max-width:1200px; margin:0 auto; padding:4rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:3rem; width:100%; position:relative; z-index:1;
}

.hero-text { flex:1; max-width:560px; }
.hero-eyebrow {
    font-size:.72rem; font-weight:700; letter-spacing:2.5px;
    text-transform:uppercase; color:#64748b; margin-bottom:.3rem;
}
.dark .hero-eyebrow { color:#94a3b8; }
.hero-name {
    font-family:'Syne',sans-serif;
    font-size:clamp(2.4rem,5.5vw,4rem);
    font-weight:800; line-height:1.06; color:#0f172a; margin-bottom:.5rem;
}
.dark .hero-name { color:#f1f5f9; }
.hero-name span {
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-pill {
    display:inline-block; padding:.4rem 1.1rem;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff; border-radius:100px; font-size:.75rem;
    font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:1.2rem;
}
.hero-desc { font-size:.96rem; line-height:1.78; color:#475569; margin-bottom:2rem; max-width:500px; }
.dark .hero-desc { color:#94a3b8; }
.hero-btns { display:flex; flex-wrap:wrap; gap:.75rem; }

.btn-primary {
    padding:.72rem 1.6rem;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff; border-radius:8px; font-weight:600; font-size:.88rem;
    text-decoration:none; transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 14px rgba(37,99,235,.28);
    display:inline-flex; align-items:center; gap:6px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,99,235,.4); }
.btn-outline {
    padding:.72rem 1.6rem; border:2px solid #2563eb; color:#2563eb;
    border-radius:8px; font-weight:600; font-size:.88rem;
    text-decoration:none; transition:all .2s;
    display:inline-flex; align-items:center; gap:6px;
}
.btn-outline:hover { background:#2563eb; color:#fff; }
.dark .btn-outline { color:#93c5fd; border-color:#93c5fd; }
.dark .btn-outline:hover { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-ghost {
    padding:.72rem 1.2rem; color:#64748b;
    border-radius:8px; font-weight:600; font-size:.88rem;
    text-decoration:none; transition:all .2s;
    display:inline-flex; align-items:center; gap:6px;
}
.btn-ghost:hover { color:#2563eb; }
.dark .btn-ghost { color:#94a3b8; }
.dark .btn-ghost:hover { color:#93c5fd; }

.philip-wrap {
    position:relative; flex-shrink:0;
    width:360px; height:460px;
}
.philip-photo {
    position:absolute; top:0; left:0;
    width:288px; height:394px; border-radius:16px;
    overflow:hidden; z-index:2;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.philip-photo img {
    width:100%; height:100%;
    object-fit:cover; object-position:top center; display:block;
}
.philip-frame {
    position:absolute; top:28px; right:0;
    width:278px; height:374px; border-radius:16px;
    border:3px solid transparent;
    background: linear-gradient(white,white) padding-box,
                linear-gradient(135deg,#7c3aed,#2563eb) border-box;
    z-index:0;
}
.dark .philip-frame {
    background: linear-gradient(#1e293b,#1e293b) padding-box,
                linear-gradient(135deg,#7c3aed,#2563eb) border-box;
}
.philip-dots {
    position:absolute; top:28px; right:0;
    width:278px; height:374px; border-radius:16px;
    overflow:hidden; z-index:1; pointer-events:none;
}
.philip-badge {
    position:absolute; bottom:18px; right:-10px; z-index:3;
    background:#fff; border-radius:12px; padding:.85rem 1rem;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    display:flex; align-items:center; gap:10px; min-width:158px;
    animation: badgeFloat 3s ease-in-out infinite;
}
.dark .philip-badge { background:#1e293b; box-shadow:0 8px 28px rgba(0,0,0,.45); }
.badge-ico {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,#dcfce7,#bbf7d0);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.badge-ico i { color:#16a34a; font-size:.85rem; }
.badge-txt strong { display:block; font-size:.83rem; font-weight:700; color:#0f172a; }
.dark .badge-txt strong { color:#f1f5f9; }
.badge-txt span { font-size:.7rem; color:#64748b; }
.dark .badge-txt span { color:#94a3b8; }

.skill-bar {
    transition: width 1.5s ease-in-out;
}

.active-section {
    color: #2563eb;
    font-weight: 600;
}

/* Theme toggle styles */
.theme-toggle {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: rgba(37, 99, 235, 0.1);
}

.dark .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #2563eb;
    color: white;
    padding: 10px;
    z-index: 999;
}

.skip-to-content:focus {
    left: 0;
}

/* Resume button pulse */
.resume-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Dark mode styles */
.dark .bg-light {
    background-color: #1a1a1a;
}

.dark .bg-white {
    background-color: #2d2d2d;
}

.dark .bg-gray-50 {
    background-color: #262626;
}

.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-gray-400 {
    color: #b0b0b0;
}

.dark .text-gray-800 {
    color: #e0e0e0;
}

.dark .text-secondary {
    color: #ffffff;
}

.dark .border-gray-300 {
    border-color: #404040;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.dark .bg-gradient-to-r {
    background: linear-gradient(to right, #1a1a1a, #2d2d2d);
}

/* Form styles */
#contact-form input,
#contact-form textarea {
    transition: all 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
    background-color: white;
    color: #111827;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dark #contact-form input:focus,
.dark #contact-form textarea:focus {
    background-color: #1f2937;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Form states */
#contact-form input.success,
#contact-form textarea.success {
    border-color: #10b981;
    background-color: #f0fdf4;
}

.dark #contact-form input.success,
.dark #contact-form textarea.success {
    border-color: #34d399;
    background-color: #064e3b;
    color: white;
}

#contact-form input.error,
#contact-form textarea.error {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.dark #contact-form input.error,
.dark #contact-form textarea.error {
    border-color: #f87171;
    background-color: #7f1d1d;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #contact-form {
        padding: 1.5rem;
    }
    
    #contact-form input,
    #contact-form textarea {
        padding: 0.75rem 1rem;
    }
}
@keyframes blob {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-blob {
    animation: blob 10s infinite ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

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

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0f1e 0%, #0f172a 40%, #111827 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 100px 0 60px;
}

.hero-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.hero-bg-glow-1 {
    width: 500px;
    height: 500px;
    background: rgba(37, 99, 235, 0.12);
    top: -100px;
    left: -100px;
}

.hero-bg-glow-2 {
    width: 400px;
    height: 400px;
    background: rgba(16, 185, 129, 0.08);
    bottom: -80px;
    right: -80px;
}

/* Layout */
.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Available Badge */
.hero-available-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 1.4rem;
}

.hero-available-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: hero-dot-pulse 2s infinite;
}

@keyframes hero-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.75); }
}

/* Heading */
.hero-heading {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.hero-name-text {
    background: linear-gradient(135deg, #60a5fa 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Role */
.hero-role-wrapper {
    margin-bottom: 1.25rem;
}

.hero-role-text {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-left: 1.5rem;
    position: relative;
}

.hero-role-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #10b981);
    border-radius: 2px;
}

/* Bio */
.hero-bio {
    color: #94a3b8;
    font-size: 0.975rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    max-width: 480px;
}

/* Tech Tags */
.hero-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #93c5fd;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.hero-tag:hover {
    background: rgba(37, 99, 235, 0.28);
    border-color: #3b82f6;
    color: #fff;
    transform: translateY(-2px);
}

/* Stats */
.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
}

.hero-stat-lbl {
    font-size: 0.75rem;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* CTA Buttons */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.55);
}

.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    background: transparent;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.hero-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
    color: #fff;
}

.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-btn-ghost:hover {
    color: #94a3b8;
    transform: translateY(-3px);
}

/* Social */
.hero-social-row {
    display: flex;
    gap: 0.65rem;
}

.hero-social-link {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.hero-social-link:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: translateY(-3px);
}

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

.hero-img-container {
    position: relative;
    width: 340px;
    height: 340px;
}

.hero-img-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25), transparent 70%);
    border-radius: 50%;
    animation: hero-glow-pulse 3s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

.hero-img-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #3b82f6, #10b981, #3b82f6);
    animation: hero-ring-rotate 8s linear infinite;
    mask: radial-gradient(transparent 48%, black 49%);
    -webkit-mask: radial-gradient(transparent 48%, black 49%);
}

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

.hero-profile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    border: 4px solid rgba(15, 23, 42, 0.9);
    z-index: 1;
}

/* Floating Badges */
.hero-float-badge {
    position: absolute;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    z-index: 2;
    white-space: nowrap;
    animation: float 4s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.hero-float-badge.badge-top-right {
    top: 8%;
    right: -18px;
    animation-delay: 0s;
}

.hero-float-badge.badge-bottom-left {
    bottom: 8%;
    left: -18px;
    animation-delay: 1.2s;
}

/* ============================================================
   CERTIFICATE CARDS (Redesigned)
   ============================================================ */
.cert-card {
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    animation: fadeInScale 0.6s ease-out forwards;
    opacity: 0;
}

.dark .cert-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

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

.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.2);
}

.cert-card-accent {
    min-width: 78px;
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 1rem 0;
}

.cert-card-icon {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.85);
}

.cert-card-body {
    padding: 1.1rem 1.35rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cert-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.dark .cert-card-title {
    color: #f1f5f9;
}

.cert-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}

.cert-issuer {
    color: #2563eb;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cert-separator {
    color: #cbd5e1;
}

.cert-year {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dark .cert-year {
    color: #94a3b8;
}

.cert-credential {
    font-size: 0.76rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-verify-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    transition: all 0.25s ease;
    width: fit-content;
    margin-top: auto;
}

.cert-verify-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    transform: translateX(3px);
}

.dark .cert-verify-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 768px) {
    /* Hero */
    .hero-section {
        padding: 90px 0 50px;
        min-height: auto;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .hero-visual {
        order: -1;
    }

    .hero-img-container {
        width: 220px;
        height: 220px;
    }

    .hero-float-badge.badge-top-right {
        right: 0;
        top: 0;
    }

    .hero-float-badge.badge-bottom-left {
        left: 0;
        bottom: 0;
    }

    .hero-role-text {
        padding-left: 0;
    }

    .hero-role-text::before {
        display: none;
    }

    .hero-bio {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-tech-tags,
    .hero-cta-group,
    .hero-social-row,
    .hero-stats-row {
        justify-content: center;
    }

    .hero-stat {
        align-items: center;
    }

    /* Sections general */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Filter buttons wrap properly */
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    /* Education card horizontal scroll protection */
    .education-card {
        overflow-wrap: break-word;
    }

    /* Certificate cards on small screens */
    .cert-card {
        flex-direction: column;
    }

    .cert-card-accent {
        width: 100%;
        min-width: unset;
        height: 70px;
        flex-direction: row;
        padding: 0 1.25rem;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    /* Contact grid */
    .grid.grid-cols-1.md\:grid-cols-2.gap-12 {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-heading {
        font-size: 1.75rem;
    }

    .hero-img-container {
        width: 180px;
        height: 180px;
    }

    .hero-float-badge {
        font-size: 0.72rem;
        padding: 0.4rem 0.75rem;
    }

    .hero-btn-primary,
    .hero-btn-outline,
    .hero-btn-ghost {
        font-size: 0.85rem;
        padding: 0.65rem 1.2rem;
    }
}
/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ============================================================
   SECTION EYEBROW LABEL
   ============================================================ */
.section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 0.4rem;
}

/* ============================================================
   PHILIP GILBERT — HERO IMAGE LAYOUT
   ============================================================ */
.philip-wrap {
    position: relative;
    width: 340px;
    height: 440px;
    flex-shrink: 0;
}

/* Decorative rectangle border — offset behind photo */
.philip-frame {
    position: absolute;
    top: 30px;
    right: -18px;
    width: 280px;
    height: 380px;
    border-radius: 14px;
    border: 3px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #7c3aed, #2563eb) border-box;
    z-index: 0;
}
.dark .philip-frame {
    background:
        linear-gradient(#1e293b, #1e293b) padding-box,
        linear-gradient(135deg, #7c3aed, #2563eb) border-box;
}

/* Dots inside the frame */
.philip-dots {
    position: absolute;
    top: 30px;
    right: -18px;
    width: 280px;
    height: 380px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Photo card */
.philip-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 390px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}

.philip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Floating badge */
.philip-badge {
    position: absolute;
    bottom: 16px;
    right: -12px;
    z-index: 3;
    background: #ffffff;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 158px;
}
.dark .philip-badge {
    background: #1e293b;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Dot float animation used by JS-spawned dots */
@keyframes heroDotFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50%       { transform: translateY(-22px) scale(1.1); opacity: 1; }
}

/* ============================================================
   RESPONSIVE — PHILIP HERO IMAGE
   ============================================================ */
@media (max-width: 960px) {
    .philip-wrap   { width: 280px; height: 370px; }
    .philip-photo  { width: 228px; height: 320px; }
    .philip-frame  { width: 230px; height: 310px; top: 22px; right: -12px; }
    .philip-dots   { width: 230px; height: 310px; top: 22px; right: -12px; }
}

@media (max-width: 768px) {
    /* Hero layout: stack vertically, image on top */
    .hero-layout {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .hero-visual { order: -1; justify-content: center; }

    .philip-wrap   { width: 240px; height: 310px; margin: 0 auto; }
    .philip-photo  { width: 196px; height: 268px; }
    .philip-frame  { width: 196px; height: 256px; top: 16px; right: -10px; }
    .philip-dots   { width: 196px; height: 256px; top: 16px; right: -10px; }
    .philip-badge  { bottom: 8px; right: -8px; min-width: 140px; padding: 0.65rem 0.8rem; }

    .hero-tech-tags,
    .hero-cta-group,
    .hero-social-row,
    .hero-stats-row { justify-content: center; }
    .hero-bio { margin: 0 auto 1.5rem; }
    .hero-role-text::before { display: none; }
    .hero-role-text { padding-left: 0; }
}

@media (max-width: 480px) {
    .philip-wrap   { width: 200px; height: 264px; }
    .philip-photo  { width: 164px; height: 228px; }
    .philip-frame  { width: 164px; height: 218px; top: 14px; right: -8px; }
    .philip-dots   { width: 164px; height: 218px; top: 14px; right: -8px; }
    .philip-badge  { min-width: 130px; font-size: 0.8rem; }

    .hero-btn-primary,
    .hero-btn-outline,
    .hero-btn-ghost { width: 100%; justify-content: center; }
    .hero-cta-group { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   INTERACTIVE CERTIFICATE FILTER TABS
   ============================================================ */
.cert-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 2rem;
}

.cert-tab-btn {
    padding: 0.42rem 1.1rem;
    border-radius: 100px;
    border: 2px solid #e2e8f0;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.dark .cert-tab-btn {
    border-color: #334155;
    color: #94a3b8;
}
.cert-tab-btn.active,
.cert-tab-btn:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    border-color: transparent;
}

/* ============================================================
   MOBILE — EXPERIENCE TIMELINE
   ============================================================ */
@media (max-width: 640px) {
    #experience-timeline {
        margin-left: 0 !important;
        padding-left: 1.5rem !important;
        border-left-width: 2px;
    }
    #experience-timeline .absolute.-left-11,
    #experience-timeline .absolute.-left-14 {
        left: -1rem;
    }
}