/* ============================================================
   PORTFOLIO — Professional Redesign
   Font: Sora (display) + DM Sans (body)
   Theme: Deep navy / slate with amber accent
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

   /* ── Variables ───────────────────────────────────────────── */
   :root {
     --navy:        #0b1120;
     --navy-mid:    #111827;
     --navy-light:  #1a2540;
     --slate:       #1e293b;
     --border:      rgba(255,255,255,0.07);
     --border-light:rgba(0,0,0,0.08);
   
     --amber:       #f59e0b;
     --amber-light: #fbbf24;
     --amber-glow:  rgba(245,158,11,0.18);
   
     --blue:        #3b82f6;
     --blue-soft:   rgba(59,130,246,0.12);
   
     --white:       #ffffff;
     --off-white:   #f8fafc;
     --text-body:   #e2e8f0;
     --text-muted:  #94a3b8;
     --text-dark:   #1e293b;
   
     --grad-hero:   linear-gradient(135deg, #0b1120 0%, #111827 60%, #1a2540 100%);
     --grad-amber:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
     --grad-blue:   linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
     --grad-card:   linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
   
     --radius-sm:   8px;
     --radius:      14px;
     --radius-lg:   22px;
     --radius-xl:   32px;
   
     --shadow-sm:   0 2px 8px rgba(0,0,0,0.12);
     --shadow-md:   0 8px 30px rgba(0,0,0,0.18);
     --shadow-lg:   0 20px 60px rgba(0,0,0,0.28);
     --shadow-amber:0 8px 32px rgba(245,158,11,0.25);
   
     --ease:        cubic-bezier(0.4,0,0.2,1);
     --transition:  all 0.3s var(--ease);
   }
   
   /* ── Reset & Base ────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; overflow-x: hidden; }
   
   body {
     font-family: 'DM Sans', sans-serif;
     background: var(--off-white);
     color: var(--text-dark);
     line-height: 1.7;
     overflow-x: hidden;
   }
   
   /* Scrollbar */
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 10px; }
   
   /* ── Typography ──────────────────────────────────────────── */
   h1,h2,h3,h4,h5,h6 {
     font-family: 'Sora', sans-serif;
     line-height: 1.2;
     font-weight: 700;
   }
   
   .gradient-text {
     background: var(--grad-amber);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   /* ── Loading Overlay ─────────────────────────────────────── */
   .loading-overlay {
     position: fixed; inset: 0;
     background: var(--navy);
     display: flex; align-items: center; justify-content: center;
     z-index: 9999;
   }
   .loading-spinner {
     width: 44px; height: 44px;
     border: 3px solid rgba(245,158,11,0.2);
     border-top: 3px solid var(--amber);
     border-radius: 50%;
     animation: spin 0.9s linear infinite;
   }
   
   /* ── Navigation ──────────────────────────────────────────── */
   .navbar {
     background: rgba(11,17,32,0.88) !important;
     backdrop-filter: blur(20px) saturate(160%);
     border-bottom: 1px solid var(--border);
     padding: 1rem 0;
     transition: var(--transition);
   }
   .navbar.scrolled {
     background: rgba(255,255,255,0.97) !important;
     border-bottom: 1px solid var(--border-light);
     box-shadow: 0 4px 24px rgba(0,0,0,0.08);
   }
   .navbar.scrolled .navbar-brand,
   .navbar.scrolled .nav-link { color: var(--text-dark) !important; }
   
   .navbar.scrolled .nav-link:hover,
   .navbar.scrolled .nav-link.active { color: #fff !important; }
   
   .navbar-brand {
     font-family: 'Sora', sans-serif;
     font-weight: 800;
     font-size: 1.5rem;
     color: #fff !important;
     letter-spacing: 0.5px;
   }
   .navbar-brand span { color: var(--amber); }
   
   .navbar-nav .nav-link {
     font-weight: 500;
     font-size: 0.92rem;
     color: rgba(255,255,255,0.78) !important;
     padding: 0.45rem 1rem !important;
     border-radius: var(--radius-sm);
     transition: var(--transition);
     letter-spacing: 0.3px;
   }
   .navbar-nav .nav-link:hover,
   .navbar-nav .nav-link.active {
     color: #fff !important;
     background: var(--grad-amber);
   }
   
   .navbar-toggler-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
   }
   
   .cta-nav-button {
     background: var(--grad-amber) !important;
     border: none !important;
     border-radius: 50px !important;
     padding: 0.55rem 1.4rem !important;
     font-weight: 700 !important;
     font-family: 'Sora', sans-serif !important;
     font-size: 0.88rem !important;
     color: var(--navy) !important;
     letter-spacing: 0.5px;
     box-shadow: var(--shadow-amber) !important;
     transition: var(--transition) !important;
   }
   .cta-nav-button:hover {
     transform: translateY(-2px) scale(1.04) !important;
     box-shadow: 0 12px 40px rgba(245,158,11,0.4) !important;
   }
   
   /* ── Hero ────────────────────────────────────────────────── */
   .hero {
     min-height: 100vh;
     background: var(--grad-hero);
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 6rem;
   }
   
   .hero::before {
     content: '';
     position: absolute; inset: 0;
     background:
       radial-gradient(ellipse 60% 50% at 20% 40%, rgba(245,158,11,0.08) 0%, transparent 60%),
       radial-gradient(ellipse 50% 40% at 80% 60%, rgba(59,130,246,0.07) 0%, transparent 60%),
       radial-gradient(ellipse 40% 60% at 50% 10%, rgba(99,102,241,0.06) 0%, transparent 60%);
     pointer-events: none;
   }
   
   /* Grid overlay */
   .hero::after {
     content: '';
     position: absolute; inset: 0;
     background-image:
       linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
   }
   
   .hero .container { position: relative; z-index: 2; }
   
   .profile-image-modern {
     width: 175px !important;
     height: 175px !important;
     border: 3px solid rgba(245,158,11,0.4);
     box-shadow: 0 0 0 8px rgba(245,158,11,0.06), var(--shadow-lg);
     animation: float-slow 6s ease-in-out infinite;
     position: relative;
     cursor: pointer;
     transition: var(--transition);
   }
   .profile-image-modern:hover {
     transform: scale(1.06) rotate(2deg);
     border-color: var(--amber);
     box-shadow: 0 0 0 12px rgba(245,158,11,0.1), var(--shadow-lg);
   }
   
   .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(245,158,11,0.12);
     border: 1px solid rgba(245,158,11,0.25);
     color: var(--amber);
     border-radius: 50px;
     padding: 0.35rem 1.1rem;
     font-size: 0.82rem;
     font-weight: 600;
     letter-spacing: 0.8px;
     text-transform: uppercase;
     margin-bottom: 1.2rem;
     font-family: 'Sora', sans-serif;
   }
   .hero-tag::before {
     content: '';
     width: 6px; height: 6px;
     border-radius: 50%;
     background: var(--amber);
     animation: pulse-dot 2s ease-in-out infinite;
   }
   
   .hero-title {
     font-size: clamp(2.4rem, 5.5vw, 3.8rem);
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.5px;
     margin-bottom: 0.7rem;
   }
   .hero-title .gradient-text {
     display: inline-block;
     border-right: 3px solid transparent;
     animation: blink-cursor 0.8s step-end infinite;
   }
   
   .hero-subtitle {
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     color: rgba(255,255,255,0.65);
     font-weight: 400;
     margin-bottom: 0.5rem;
     letter-spacing: 0.2px;
   }
   
   .hero-desc {
     font-size: 1rem;
     color: rgba(255,255,255,0.5);
     max-width: 480px;
     margin: 0 auto 2rem;
     line-height: 1.7;
   }
   
   .social-btn {
     border-radius: 50px !important;
     padding: 0.7rem 2rem !important;
     font-weight: 600 !important;
     font-family: 'Sora', sans-serif !important;
     font-size: 0.92rem !important;
     transition: var(--transition) !important;
     border: none !important;
     display: inline-flex;
     align-items: center;
     gap: 0.4em;
   }
   .social-btn:hover {
     transform: translateY(-3px) scale(1.04) !important;
     box-shadow: var(--shadow-lg) !important;
   }
   .btn-primary.social-btn {
     background: var(--grad-amber) !important;
     color: var(--navy) !important;
     box-shadow: var(--shadow-amber) !important;
   }
   .btn-dark.social-btn {
     background: rgba(255,255,255,0.1) !important;
     border: 1px solid rgba(255,255,255,0.15) !important;
     color: #fff !important;
     backdrop-filter: blur(8px);
   }
   
   /* Floating particles */
   .hero-particle {
     position: absolute;
     border-radius: 50%;
     background: var(--amber);
     animation: float-particle linear infinite;
     pointer-events: none;
   }
   
   /* ── Section Base ────────────────────────────────────────── */
   .section { padding: 6rem 0; position: relative; }
   
   .section-title {
     font-family: 'Sora', sans-serif;
     font-size: clamp(1.9rem, 4vw, 2.6rem);
     font-weight: 800;
     text-align: center;
     margin-bottom: 0.6rem;
     letter-spacing: -0.3px;
   }
   
   .section-subtitle {
     text-align: center;
     color: var(--text-muted);
     font-size: 1rem;
     margin-bottom: 3.5rem;
   }
   
   .section-title-underline {
     width: 52px;
     height: 3px;
     background: var(--grad-amber);
     border-radius: 2px;
     margin: 0.7rem auto 0.8rem;
   }
   
   /* ── Skills Section ──────────────────────────────────────── */
   .skills-section { background: var(--navy); }
   
   .skills-section .section-title { color: #fff; }
   .skills-section .section-subtitle { color: var(--text-muted); }
   
   .skills-section .section-title-underline { background: var(--grad-amber); }
   
   .skill-card {
     padding: 0.5rem;
   }
   
   .skill-inner {
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.07);
     border-radius: var(--radius);
     padding: 1.5rem 1rem 1.1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.7rem;
     position: relative;
     transition: var(--transition);
     cursor: default;
     overflow: hidden;
   }
   .skill-inner::before {
     content: '';
     position: absolute; inset: 0;
     background: var(--grad-amber);
     opacity: 0;
     transition: var(--transition);
     border-radius: var(--radius);
   }
   .skill-inner:hover::before { opacity: 0.06; }
   .skill-inner:hover {
     border-color: rgba(245,158,11,0.3);
     transform: translateY(-6px);
     box-shadow: 0 12px 40px rgba(245,158,11,0.12);
   }
   
   .skill-icon-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 58px; height: 58px;
     background: rgba(255,255,255,0.05);
     border-radius: var(--radius-sm);
     transition: var(--transition);
     position: relative; z-index: 1;
   }
   .skill-inner:hover .skill-icon-wrap {
     background: rgba(245,158,11,0.1);
   }
   
   .skill-name {
     font-family: 'Sora', sans-serif;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--text-body);
     text-align: center;
     letter-spacing: 0.2px;
     position: relative; z-index: 1;
   }
   
   .mern-skill .skill-inner {
     border-color: rgba(245,158,11,0.2);
   }
   .mern-dot {
     position: absolute;
     top: 0.5rem; right: 0.6rem;
     width: 6px; height: 6px;
     border-radius: 50%;
     background: var(--amber);
     animation: pulse-dot 2s ease-in-out infinite;
   }
   
   /* Devicon fix for dark bg */
   .devicon-nextjs-original-wordmark,
   .devicon-express-original,
   .devicon-flask-original {
     color: #e2e8f0 !important;
     fill: #e2e8f0 !important;
   }
   
   /* ── Projects Section ────────────────────────────────────── */
   .projects-section { background: var(--off-white); }
   
   .empty-projects-card {
     border: 2px dashed rgba(245,158,11,0.3);
     border-radius: var(--radius-lg);
     padding: 4rem 2rem;
     text-align: center;
     background: rgba(245,158,11,0.03);
     max-width: 420px;
     margin: 0 auto;
   }
   .empty-icon {
     width: 72px; height: 72px;
     background: var(--grad-amber);
     border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     margin: 0 auto 1.4rem;
     font-size: 1.8rem;
     color: var(--navy);
   }
   .empty-projects-card h4 {
     font-family: 'Sora', sans-serif;
     font-size: 1.2rem;
     color: var(--text-dark);
     margin-bottom: 0.4rem;
   }
   .empty-projects-card p {
     color: var(--text-muted);
     font-size: 0.95rem;
   }
   
   /* Project cards (for when populated later) */
   .proj-card {
     background: #fff;
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--border-light);
     box-shadow: var(--shadow-sm);
     transition: var(--transition);
     display: flex; flex-direction: column;
   }
   .proj-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-md);
     border-color: rgba(245,158,11,0.2);
   }
   .proj-img-wrapper {
     height: 200px;
     overflow: hidden;
     background: var(--off-white);
     position: relative;
   }
   .proj-img-wrapper img {
     width: 100%; height: 100%;
     object-fit: cover;
     transition: transform 0.5s var(--ease);
   }
   .proj-card:hover .proj-img-wrapper img { transform: scale(1.06); }

   .proj-card-wide .proj-gallery-wrapper {
     position: relative;
     background: var(--off-white);
     padding: 0.55rem;
   }

   .proj-gallery {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.55rem;
   }

   .proj-gallery-item {
     margin: 0;
     overflow: hidden;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border-light);
     background: #fff;
   }

   .proj-gallery-item img {
     width: 100%;
     height: 168px;
     object-fit: cover;
     object-position: top center;
     display: block;
     transition: transform 0.5s var(--ease);
   }

   .proj-card-wide:hover .proj-gallery-item img {
     transform: scale(1.03);
   }

   .proj-gallery-item figcaption {
     font-size: 0.68rem;
     font-weight: 600;
     font-family: 'Sora', sans-serif;
     color: var(--text-muted);
     padding: 0.35rem 0.5rem 0.45rem;
     text-align: center;
   }

   @media (max-width: 576px) {
     .proj-gallery {
       grid-template-columns: 1fr;
     }

     .proj-gallery-item img {
       height: 200px;
     }
   }
   
   .proj-featured-badge {
     position: absolute;
     top: 0.7rem; left: 0.7rem;
     background: var(--grad-amber);
     color: var(--navy);
     font-size: 0.75rem;
     font-weight: 700;
     font-family: 'Sora', sans-serif;
     padding: 0.25rem 0.8rem;
     border-radius: 50px;
   }
   
   .proj-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
   
   .proj-title {
     font-family: 'Sora', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 0.6rem;
   }
   
   .proj-badges {
     display: flex; flex-wrap: wrap; gap: 0.4rem;
     margin-bottom: 0.8rem;
   }
   .proj-badge {
     font-size: 0.72rem;
     font-weight: 600;
     font-family: 'Sora', sans-serif;
     background: rgba(245,158,11,0.1);
     color: #92400e;
     border: 1px solid rgba(245,158,11,0.2);
     padding: 0.2rem 0.7rem;
     border-radius: 50px;
   }
   
   .proj-desc {
     font-size: 0.88rem;
     color: var(--text-muted);
     line-height: 1.6;
     flex: 1;
     margin-bottom: 1rem;
   }
   
   .project-action-row {
     display: flex;
     justify-content: flex-end;
     gap: 0.5rem;
     margin-top: auto;
   }
   .project-action-btn {
     background: var(--grad-amber) !important;
     color: var(--navy) !important;
     border: none;
     border-radius: 50px;
     padding: 0.38rem 1.1rem;
     font-weight: 700;
     font-family: 'Sora', sans-serif;
     font-size: 0.82rem;
     display: flex; align-items: center; gap: 0.4em;
     transition: var(--transition);
     box-shadow: var(--shadow-amber);
     cursor: pointer;
     text-decoration: none;
   }
   .project-action-btn:hover {
     transform: translateY(-2px) scale(1.04);
     box-shadow: 0 12px 32px rgba(245,158,11,0.4);
   }
   
   /* ── Experience Section ───────────────────────────────────── */
   .experience-section { background: var(--navy-mid); }
   .experience-section .section-title { color: #fff; }
   .experience-section .section-subtitle { color: var(--text-muted); }
   .experience-section .section-title-underline { background: var(--grad-amber); }
   
   .exp-card {
     background: rgba(255,255,255,0.04);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     margin-bottom: 1.8rem;
     position: relative;
     transition: var(--transition);
   }
   .exp-card:hover {
     border-color: rgba(245,158,11,0.25);
     background: rgba(255,255,255,0.06);
     transform: translateX(6px);
   }
   
   .exp-card-accent {
     position: absolute;
     left: 0; top: 0; bottom: 0;
     width: 4px;
     background: var(--grad-amber);
     border-radius: 4px 0 0 4px;
   }
   
   .exp-card-content { padding: 2rem 2rem 1.6rem 2.4rem; text-align: left; }
   
   .exp-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 0.7rem;
   }
   
   .exp-icon-wrap {
     width: 44px; height: 44px;
     background: var(--amber-glow);
     border-radius: var(--radius-sm);
     display: flex; align-items: center; justify-content: center;
     color: var(--amber);
     font-size: 1.1rem;
     flex-shrink: 0;
   }
   
   .exp-title {
     font-family: 'Sora', sans-serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: #fff;
     margin: 0;
   }
   .exp-company {
     font-size: 0.88rem;
     color: var(--amber);
     font-weight: 600;
   }
   
   .exp-duration {
     font-size: 0.82rem;
     color: var(--text-muted);
     margin-bottom: 1.1rem;
     display: flex;
     align-items: center;
   }
   
   .exp-list {
     list-style: none;
     padding: 0; margin: 0;
     display: flex;
     flex-direction: column;
     gap: 0.55rem;
   }
   
   .exp-item {
     font-size: 0.9rem;
     color: rgba(226,232,240,0.8);
     padding-left: 1.3rem;
     position: relative;
     line-height: 1.6;
   }
   .exp-item::before {
     content: '';
     position: absolute;
     left: 0; top: 0.6em;
     width: 5px; height: 5px;
     border-radius: 50%;
     background: var(--amber);
   }
   
   /* ── Contact Section ─────────────────────────────────────── */
   .contact-section { background: var(--navy); }
   .contact-section .section-title { color: #fff; }
   .contact-section .section-subtitle { color: var(--text-muted); }
   .contact-section .section-title-underline { background: var(--grad-amber); }
   
   .contact-card {
     background: rgba(255,255,255,0.05);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.4rem 1.6rem;
     display: flex;
     align-items: center;
     gap: 1.1rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
   }
   .contact-card::before {
     content: '';
     position: absolute; inset: 0;
     background: var(--grad-amber);
     opacity: 0;
     transition: var(--transition);
   }
   .contact-card:hover {
     border-color: rgba(245,158,11,0.3);
     transform: translateY(-5px);
     box-shadow: 0 16px 48px rgba(245,158,11,0.12);
   }
   .contact-card:hover::before { opacity: 0.05; }
   
   .contact-icon-wrap {
     width: 48px; height: 48px;
     background: var(--amber-glow);
     border-radius: var(--radius-sm);
     display: flex; align-items: center; justify-content: center;
     font-size: 1.25rem;
     flex-shrink: 0;
     position: relative; z-index: 1;
   }
   
   .contact-info {
     flex: 1;
     position: relative; z-index: 1;
   }
   .contact-info h5 {
     font-family: 'Sora', sans-serif;
     font-size: 0.95rem;
     font-weight: 700;
     color: #fff;
     margin-bottom: 0.15rem;
   }
   .contact-info p {
     font-size: 0.82rem;
     color: var(--text-muted);
     margin: 0;
   }
   
   .contact-arrow {
     color: rgba(255,255,255,0.25);
     font-size: 0.85rem;
     transition: var(--transition);
     position: relative; z-index: 1;
   }
   .contact-card:hover .contact-arrow {
     color: var(--amber);
     transform: translate(2px,-2px);
   }
   
   /* ── Education Section ───────────────────────────────────── */
   .education-section { background: var(--navy-mid); }
   .education-section .section-title { color: #fff; }
   .education-section .section-subtitle { color: var(--text-muted); }
   .education-section .section-title-underline { background: var(--grad-amber); }
   
   .edu-card {
     background: rgba(255,255,255,0.04);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     position: relative;
     transition: var(--transition);
   }
   .edu-card:hover {
     border-color: rgba(245,158,11,0.3);
     background: rgba(255,255,255,0.06);
     transform: translateY(-4px);
     box-shadow: 0 20px 60px rgba(245,158,11,0.1);
   }
   
   .edu-card-accent {
     position: absolute;
     left: 0; top: 0; bottom: 0;
     width: 4px;
     background: var(--grad-amber);
     border-radius: 4px 0 0 4px;
   }
   
   .edu-card-content { padding: 2rem 2rem 1.8rem 2.4rem; text-align: left; }
   
   .edu-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.1rem;
   }
   
   .edu-icon-wrap {
     width: 52px; height: 52px;
     background: var(--amber-glow);
     border-radius: var(--radius-sm);
     display: flex; align-items: center; justify-content: center;
     color: var(--amber);
     font-size: 1.3rem;
     flex-shrink: 0;
   }
   
   .edu-degree {
     font-family: 'Sora', sans-serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: #fff;
     margin: 0 0 0.2rem;
     line-height: 1.3;
   }
   .edu-institution {
     font-size: 0.92rem;
     color: var(--amber);
     font-weight: 600;
     letter-spacing: 0.2px;
   }
   
   .edu-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
     margin-top: 0.2rem;
   }
   .edu-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
     background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1);
     color: var(--text-muted);
     border-radius: 50px;
     padding: 0.25rem 0.85rem;
     font-size: 0.8rem;
     font-weight: 500;
     font-family: 'Sora', sans-serif;
   }
   
   /* ── Modal ───────────────────────────────────────────────── */
   .modal-content {
     background: rgba(11,17,32,0.96) !important;
     border-radius: var(--radius-lg) !important;
     border: 1px solid var(--border);
   }
   .modal-title { color: #fff; font-family: 'Sora', sans-serif; }
   
   /* ── Animations ──────────────────────────────────────────── */
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   
   @keyframes float-slow {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-10px); }
   }
   
   @keyframes float-particle {
     0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
     10% { opacity: 1; }
     90% { opacity: 0.5; }
     100% { transform: translateY(-20px) rotate(360deg); opacity: 0; }
   }
   
   @keyframes pulse-dot {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.5; transform: scale(0.8); }
   }
   
   @keyframes blink-cursor {
     0%, 100% { border-color: transparent; }
     50% { border-color: rgba(255,255,255,0.7); }
   }
   
   @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(24px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Emoji ───────────────────────────────────────────────── */
   .emoji {
     color: initial !important;
     display: inline-block;
     animation: pulse-dot 2s ease-in-out infinite;
   }
   
   /* ── Responsive ──────────────────────────────────────────── */
   @media (max-width: 768px) {
     .hero { padding: 5rem 0 3rem; }
     .profile-image-modern { width: 140px !important; height: 140px !important; }
     .hero-title { font-size: 2rem; }
     .section { padding: 4rem 0; }
     .exp-card-content { padding: 1.4rem 1.4rem 1.4rem 1.8rem; }
     .hero .btn {
       display: block;
       margin: 0.6rem auto !important;
       width: 190px;
     }
     .navbar-collapse {
       background: rgba(11,17,32,0.97);
       backdrop-filter: blur(20px);
       padding: 1rem;
       border-radius: var(--radius);
       margin-top: 0.7rem;
       border: 1px solid var(--border);
     }
     .navbar.scrolled .navbar-collapse {
       background: rgba(255,255,255,0.98);
       border-color: var(--border-light);
     }
   }
   
   /* Focus states */
   a:focus, button:focus {
     outline: 2px solid var(--amber);
     outline-offset: 3px;
   }
   
   /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
     }
   }