/* ═══════════════════════════════════════════════
   AISHAWON.INFO — MODERN DARK PORTFOLIO CSS
   ═══════════════════════════════════════════════ */

/* ─── CSS Variables ─────────────────────────── */
:root  {
    
  --primary: #00D4FF;
    
  --secondary: #7B2FBE;
    
  --accent: #FF6B35;
    
  --bg: #04060e;
    
  --bg-surface: #0a0f1b;
    
  --footer-bg: #060911;
    
  --card-bg: rgba(17, 24, 39, 0.85);
    
  --card-border: rgba(255, 255, 255, 0.08);
    
  --text-primary: #F1F5F9;
    
  --text-secondary: #94A3B8;
    
  --text-muted: #64748B;
    
  --success: #10B981;
    
  --warning: #F59E0B;
    
  --danger: #EF4444;
    
  --gradient: linear-gradient(135deg, #00D4FF, #7B2FBE);
    
  --gradient-accent: linear-gradient(135deg, #FF6B35, #7B2FBE);
    
  --blur: blur(12px);
    
  --radius: 12px;
    
  --radius-sm: 8px;
    
  --radius-pill: 50px;
    
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
    
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.15);
    
  --font-heading: 'Inter', sans-serif;
    
  --font-body: 'Poppins', sans-serif;
}


[data-theme="light"]  {
    
  --bg: #F8FAFC;
    
  --bg-surface: #F1F5F9;
    
  --footer-bg: #E7ECF3;
    
  --card-bg: rgba(255,255,255,0.85);
    
  --card-border: rgba(0,0,0,0.08);
    
  --text-primary: #0F172A;
    
  --text-secondary: #475569;
    
  --text-muted: #94A3B8;
    
  --shadow: 0 4px 24px rgba(0,0,0,0.1);
    
  --shadow-glow: 0 0 30px rgba(0,212,255,0.08);
}


/* ─── Reset & Base ──────────────────────────── */
*, *::before, *::after  {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

html  {
     scroll-behavior: smooth;
     scroll-padding-top: 80px;
}

body  {
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--text-primary);
     line-height: 1.7;
     overflow-x: hidden;
     transition: background 0.3s, color 0.3s;
}

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

a:hover  {
     color: var(--primary);
     opacity: 0.85;
}

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

ul  {
     list-style: none;
     padding: 0;
     margin: 0;
}


/* ─── Page Loader ───────────────────────────── */
#page-loader  {
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.5s, visibility 0.5s;
}

#page-loader.hidden  {
     opacity: 0;
     visibility: hidden;
}

.loader-inner  {
     text-align: center;
}

.loader-circle  {
     width: 50px;
     height: 50px;
     border: 3px solid var(--card-border);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
     margin: 0 auto;
}

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


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

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

::-webkit-scrollbar-thumb  {
     background: var(--primary);
     border-radius: 3px;
}


/* ─── Utility ───────────────────────────────── */
.gradient-text  {
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.section-padding  {
     padding: clamp(4rem, 9vw, 6.25rem) 0;
}

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

.glass-card  {
     background: var(--card-bg);
     backdrop-filter: var(--blur);
     -webkit-backdrop-filter: var(--blur);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     transition: var(--transition);
}

.glass-card:hover  {
     border-color: rgba(0,212,255,0.2);
     box-shadow: var(--shadow-glow);
     transform: translateY(-4px);
}


/* ─── Section Header ────────────────────────── */
.section-header  {
     margin-bottom: 3rem;
}

.section-label  {
     font-size: 0.875rem;
     font-weight: 600;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 0.5rem;
}

.section-title  {
     font-family: var(--font-heading);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
}


/* ─── Buttons ───────────────────────────────── */
.btn-primary-custom  {
     background: var(--gradient);
     color: #fff;
     border: 2px solid transparent;
     padding: 0.75rem 2rem;
     border-radius: var(--radius-pill);
     font-weight: 600;
     font-family: var(--font-heading);
     transition: var(--transition);
     box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.btn-primary-custom:hover  {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0,212,255,0.4);
     color: #fff;
}

.btn-outline-custom  {
     background: transparent;
     color: var(--primary);
     border: 2px solid var(--primary);
     padding: 0.75rem 2rem;
     border-radius: var(--radius-pill);
     font-weight: 600;
     font-family: var(--font-heading);
     transition: var(--transition);
}

.btn-outline-custom:hover  {
     background: var(--primary);
     color: var(--bg);
     transform: translateY(-2px);
}


/* ─── Navbar ────────────────────────────────── */
#mainNav  {
     background: transparent;
     padding: 1rem 0;
     transition: var(--transition);
     z-index: 1000;
}

#mainNav.scrolled  {
     background: rgba(10,14,26,0.9);
     backdrop-filter: var(--blur);
     border-bottom: 1px solid var(--card-border);
     padding: 0.5rem 0;
     box-shadow: var(--shadow);
}

[data-theme="light"] #mainNav.scrolled  {
     background: rgba(248,250,252,0.9);
}

.navbar-brand  {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     white-space: nowrap;
}

.brand-monogram  {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.4rem;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.brand-logo-img  {
     /* --logo-h is admin-controlled (Website Settings > Branding), but is
        still capped here — an oversized logo would grow the whole navbar
        row height (align-items:center) far beyond the surrounding nav
        links/buttons, throwing off the header's proportions. */
     height: var(--logo-h, 38px);
     max-height: 52px;
     width: auto;
     max-width: 160px;
     object-fit: contain;
     vertical-align: middle;
}

.brand-name  {
     color: var(--text-primary);
     font-weight: 600;
}

.nav-link  {
     color: var(--text-secondary) !important;
     font-weight: 500;
     padding: 0.5rem 0.75rem !important;
     border-radius: var(--radius-sm);
     transition: var(--transition);
}

.nav-link:hover, .nav-link.active  {
     color: var(--primary) !important;
     background: rgba(0,212,255,0.08);
}

.hire-btn  {
     background: var(--gradient) !important;
     color: #fff !important;
     border-radius: var(--radius-pill) !important;
     padding: 0.5rem 1.25rem !important;
     font-weight: 600 !important;
}

.hire-btn:hover  {
     transform: translateY(-1px);
     box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.theme-toggle  {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
}

.theme-toggle:hover  {
     border-color: var(--primary);
     color: var(--primary);
}

.navbar-toggler  {
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     background: var(--card-bg);
     border-radius: var(--radius-sm);
}

.navbar-toggler-icon  {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     transition: transform .2s ease;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon  {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
     transform: rotate(180deg);
}

/* Desktop (lg+): only one flex item should claim the auto-margin spacer.
   The theme-toggle group no longer pushes itself to the edge here — the
   nav menu does, so it lands flush right with Contact/Hire Me last.
   Logo/name/toggle stay exactly where Bootstrap's centered .container
   originally placed them — only the menu "bleeds" past the container's
   own right edge to the true viewport edge (standard full-bleed trick).
   Mobile/tablet (<lg) keep their original markup-driven behavior untouched. */
@media (min-width: 992px)  {
     #mainNav .container > .d-flex.ms-auto  {
          margin-left: 0 !important;
     }
     #mainNav .navbar-collapse  {
          margin-left: auto;
          margin-right: calc(-50vw + 50%);
          padding-right: 16px;
     }
}


/* ─── Home ──────────────────────────────────── */
.home-section  {
     position: relative;
     min-height: 100svh;
     display: flex;
     align-items: center;
     overflow: hidden;
}

#homeParticles  {
     position: absolute;
     inset: 0;
     z-index: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
}

.home-content  {
     position: relative;
     z-index: 1;
     width: 100%;
}

.home-greeting  {
     font-size: 1.1rem;
     color: var(--primary);
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 0.5rem;
}

.home-name  {
     font-family: var(--font-heading);
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 1rem;
}

.home-typed-wrapper  {
     font-size: clamp(1.1rem, 2.5vw, 1.5rem);
     color: var(--text-secondary);
     margin-bottom: 1rem;
}

.typed-text  {
     color: var(--primary);
     font-weight: 600;
}

.typed-cursor  {
     color: var(--primary);
}

.home-tagline  {
     color: var(--text-secondary);
     font-size: 1.08rem;
     max-width: 100%;
     text-align: justify;
}

.tech-badges-label  {
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin: 0;
}

.home-tech-badges  {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.55rem;
}

.tech-badge  {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: transparent;
     color: var(--text-primary);
     border: 1.5px solid var(--card-border);
     border-radius: var(--radius-pill);
     padding: 0.4rem 0.9rem 0.4rem 0.45rem;
     font-size: 0.95rem;
     line-height: 1.2;
     font-weight: 600;
     margin: 0;
}

.tech-badge:not(:has(.tech-badge-icon))  {
     padding: 0.5rem 0.9rem;
}

.tech-badge-icon-only  {
     padding: 0.4rem;
     gap: 0;
}

.tech-badge-icon-only .tech-badge-icon  {
     width: 28px;
     height: 28px;
     border-radius: 7px;
}

.tech-badge-icon-only .tech-badge-icon i  {
     font-size: 1rem;
}

.tech-badge-icon-only .tech-badge-icon-logo  {
     width: 30px;
     height: 30px;
}

.tech-badge-icon  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 20px;
     height: 20px;
     border-radius: 5px;
     flex-shrink: 0;
     overflow: hidden;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     color: #fff;
}

.tech-badge-icon i  {
     font-size: 0.7rem;
     max-width: 100%;
}

.tech-badge-icon-logo  {
     background: transparent;
     width: 22px;
     height: 22px;
     border-radius: 0;
}

.tech-badge-icon-logo img  {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.tech-badge:hover  {
     border-color: var(--primary);
}

/* Icon-only pills carry no visible label — reveal the skill/tech name in a
   small tooltip on hover so it's still identifiable at a glance. */
.tech-badge-icon-only[data-tooltip]  {
     position: relative;
}

.tech-badge-icon-only[data-tooltip]::after  {
     content: attr(data-tooltip);
     position: absolute;
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%) translateY(4px);
     background: var(--text-primary);
     color: var(--bg);
     font-size: 0.75rem;
     font-weight: 600;
     line-height: 1.3;
     white-space: nowrap;
     padding: 0.3rem 0.65rem;
     border-radius: 6px;
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
     transition: opacity .15s ease, transform .15s ease;
     z-index: 20;
}

.tech-badge-icon-only[data-tooltip]::before  {
     content: "";
     position: absolute;
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(2px);
     border: 5px solid transparent;
     border-top-color: var(--text-primary);
     opacity: 0;
     visibility: hidden;
     transition: opacity .15s ease, transform .15s ease;
     z-index: 20;
}

.tech-badge-icon-only[data-tooltip]:hover::after,
.tech-badge-icon-only[data-tooltip]:hover::before  {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
}

@media (hover: none)  {
     .tech-badge-icon-only[data-tooltip]::after,
     .tech-badge-icon-only[data-tooltip]::before  {
          display: none;
     }
}

/* Known brand colors for the tech-badge icon swatch — falls back to the
   site's primary/secondary gradient above for anything not listed here or
   in browsers without :has() support. */
.tech-badge-icon:has(.fa-aws)  { background: #FF9900; }
.tech-badge-icon:has(.fa-docker)  { background: #2496ED; }
.tech-badge-icon:has(.fa-kubernetes), .tech-badge-icon:has(.fa-dharmachakra)  { background: #326CE5; }
.tech-badge-icon:has(.fa-linux)  { background: #111827; }
.tech-badge-icon:has(.fa-python)  { background: #3776AB; }
.tech-badge-icon:has(.fa-git-alt), .tech-badge-icon:has(.fa-github)  { background: #24292F; }
.tech-badge-icon:has(.fa-node-js)  { background: #339933; }
.tech-badge-icon:has(.fa-react)  { background: #149ECA; }
.tech-badge-icon:has(.fa-java)  { background: #f89820; }
.tech-badge-icon:has(.fa-html5)  { background: #E34F26; }
.tech-badge-icon:has(.fa-css3-alt), .tech-badge-icon:has(.fa-css3)  { background: #1572B6; }
.tech-badge-icon:has(.fa-js), .tech-badge-icon:has(.fa-js-square)  { background: #F7DF1E; color: #111827; }
.tech-badge-icon:has(.fa-vuejs)  { background: #42B883; }
.tech-badge-icon:has(.fa-angular)  { background: #DD0031; }
.tech-badge-icon:has(.fa-microsoft)  { background: #00A4EF; }
.tech-badge-icon:has(.fa-google)  { background: #4285F4; }
.tech-badge-icon:has(.fa-jenkins)  { background: #D24939; }
.tech-badge-icon:has(.fa-terraform)  { background: #7B42BC; }

.social-icon  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-secondary);
     margin-right: 0.5rem;
     font-size: 1.15rem;
     transition: var(--transition);
}

.social-icon:hover  {
     background: var(--primary);
     border-color: var(--primary);
     color: var(--bg);
     transform: translateY(-3px);
}

.home-image-wrapper  {
     position: relative;
     display: inline-block;
}

.home-profile-img  {
     width: clamp(250px, 35vw, 380px);
     height: clamp(250px, 35vw, 380px);
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid var(--primary);
     box-shadow: 0 0 0 8px rgba(0,212,255,0.1), var(--shadow-glow);
     position: relative;
     z-index: 1;
     background: var(--bg);
}

.home-profile-link  {
     display: block;
     position: relative;
     z-index: 1;
     border-radius: 50%;
     cursor: zoom-in;
     -webkit-tap-highlight-color: transparent;
}

.home-profile-link .home-profile-img  {
     display: block;
     transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-profile-link:hover .home-profile-img,
.home-profile-link:focus-visible .home-profile-img  {
     transform: scale(1.03);
     box-shadow: 0 0 0 8px rgba(0,212,255,0.18), var(--shadow-glow);
}

.home-profile-link:focus-visible  {
     outline: 3px solid var(--primary);
     outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce)  {
  .home-profile-link .home-profile-img  {
       transition: none;
  }
  .home-profile-link:hover .home-profile-img,
  .home-profile-link:focus-visible .home-profile-img  {
       transform: none;
  }
}

.home-ring  {
     position: absolute;
     border-radius: 50%;
     border: 2px solid;
     animation: ringPulse 3s ease-in-out infinite;
}

.ring-1  {
     inset: -15px;
     border-color: rgba(0,212,255,0.3);
     animation-delay: 0s;
}

.ring-2  {
     inset: -30px;
     border-color: rgba(0,212,255,0.15);
     animation-delay: 0.5s;
}

.ring-3  {
     inset: -45px;
     border-color: rgba(123,47,190,0.1);
     animation-delay: 1s;
}

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

.scroll-indicator  {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
}

.scroll-indicator a  {
     color: var(--text-muted);
     font-size: 1.2rem;
     display: block;
}

.mouse-scroll {
     display: block;
     width: 26px;
     height: 42px;
     border: 2px solid var(--text-muted);
     border-radius: 14px;
     position: relative;
}

.mouse-scroll-wheel {
     position: absolute;
     top: 6px;
     left: 50%;
     transform: translateX(-50%);
     width: 4px;
     height: 8px;
     border-radius: 2px;
     background: var(--primary);
     animation: mouse-scroll-wheel 1.6s ease infinite;
}

@keyframes mouse-scroll-wheel  {
     0%   { top: 6px; opacity: 1; }
     70%  { top: 20px; opacity: 0; }
     100% { top: 6px; opacity: 0; }
}

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


/* ─── About ─────────────────────────────────── */
.about-img-wrapper  {
     display: flex;
     align-items: stretch;
     justify-content: flex-end;
     height: 100%;
}

.about-profile-img  {
     width: 100%;
     max-width: 340px;
     height: 100%;
     min-height: 380px;
     max-height: 520px;
     border-radius: 12px;
     object-fit: cover;
     object-position: top center;
     border: none;
     display: block;
     margin: 0;
     box-shadow: none;
     background: none;
     transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.about-profile-img:hover  {
     transform: scale(1.06);
     box-shadow: 0 0 30px rgba(0,212,255,0.25);
}

.about-profile-link  {
     display: flex;
     flex: 0 1 340px;
     width: 100%;
     max-width: 340px;
     border-radius: 12px;
     cursor: zoom-in;
     -webkit-tap-highlight-color: transparent;
}

.about-profile-link:focus-visible  {
     outline: 3px solid var(--primary);
     outline-offset: 4px;
}

.about-profile-link:focus-visible .about-profile-img  {
     box-shadow: 0 0 30px rgba(0,212,255,0.25);
}

@media (max-width: 991.98px)  {
  .about-profile-link  {
       flex: 0 1 auto;
       width: auto;
       max-width: 100%;
  }
}

@media (max-width: 575.98px)  {
  .about-profile-link  {
       width: 100%;
       max-width: 260px;
  }
}

@media (prefers-reduced-motion: reduce)  {
  .about-profile-img:hover  {
       transform: none;
  }
}

.section-title-icon  {
     color: var(--primary);
     font-size: clamp(1.1rem, 2.5vw, 1.6rem);
     margin-left: 0.4rem;
     vertical-align: middle;
     -webkit-text-fill-color: var(--primary);
}

.about-greeting  {
     color: var(--text-secondary);
     font-size: 1.05rem;
     margin-bottom: 0.25rem;
}

.about-name  {
     font-family: var(--font-heading);
     font-size: clamp(1.35rem, 3.5vw, 1.75rem);
     font-weight: 700;
     margin-bottom: 1rem;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
}

.about-verified-badge  {
     font-size: 1.1rem;
     -webkit-text-fill-color: var(--primary);
     color: var(--primary);
}

.about-heading  {
     font-family: var(--font-heading);
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: var(--text-primary);
}

.about-bio  {
     color: var(--text-secondary);
     line-height: 1.8;
     margin-bottom: 1.5rem;
     text-align: justify;
}

.about-see-more-expanded  {
     margin-top: 0.5rem;
}

/* Timeline card description: 2-line preview that swaps for the full text
   (plus any images) when "See More" is expanded — same toggle button/JS
   already used for extra bullet points / photo galleries, just also
   hiding this clamp element while expanded. */
.timeline-desc  {
     color: var(--text-secondary);
     line-height: 1.7;
     text-align: justify;
     margin: 0.5rem 0;
     font-size: 0.9rem;
}
.cert-empty-state, .empty-state-card  {
     text-align: center;
     padding: 3.5rem 1.5rem;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     backdrop-filter: blur(12px);
}
.cert-empty-icon, .empty-state-icon  {
     width: 64px;
     height: 64px;
     margin: 0 auto 1rem;
     border-radius: 50%;
     background: rgba(255,255,255,0.04);
     border: 1px solid var(--card-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
}
.cert-empty-state h4, .empty-state-card h4  {
     font-family: var(--font-heading);
     font-size: 1rem;
     color: var(--text-primary);
     margin: 0 0 0.4rem;
}
.cert-empty-state p, .empty-state-card p  {
     color: var(--text-secondary);
     font-size: 0.85rem;
     margin: 0;
}
/* Generic "coming soon" empty state — used across Home preview sections
   (Projects, Articles) and full list pages (Gallery, Portfolio, Skills)
   whenever a section has no published content yet. Same glass-card look
   as .cert-empty-state (Resume tab empty states) so the whole site shares
   one consistent empty-state language instead of a plain muted <p>. Grid
   contexts (row/flex containers) need full width so it doesn't collapse
   to content width and misalign. */
.empty-state-card  {
     width: 100%;
     max-width: 420px;
     margin: 0 auto;
     animation: emptyStatePulse 3s ease-in-out infinite;
}
.empty-state-icon  {
     font-size: 1.6rem;
     animation: emptyStateFloat 3s ease-in-out infinite;
}
.empty-state-card .empty-state-sub  {
     margin-top: 0.35rem;
     font-size: 0.78rem;
     color: var(--text-tertiary, var(--text-secondary));
     opacity: 0.75;
}
@keyframes emptyStatePulse  {
     0%, 100%  { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
     50%  { box-shadow: 0 0 0 8px rgba(99,102,241,0.06); }
}
@keyframes emptyStateFloat  {
     0%, 100%  { transform: translateY(0); }
     50%  { transform: translateY(-5px); }
}
.timeline-desc-clamp  {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
.timeline-card:has(.timeline-extra-wrap:not(.d-none)) .timeline-desc-clamp,
.timeline-role:has(.timeline-extra-wrap:not(.d-none)) .timeline-desc-clamp  {
     display: none;
}
/* Card with several roles: only the expanded role's own clamp hides, not its siblings'. */
.timeline-company-card:has(.timeline-role) .timeline-role:not(:has(.timeline-extra-wrap:not(.d-none))) .timeline-desc-clamp  {
     display: -webkit-box;
}
.timeline-desc-full  {
     margin-bottom: 1rem;
}
/* Rich-text descriptions (Education / Leadership): real bullets, tidy spacing, readable links. */
.timeline-desc p  {
     margin: 0 0 0.5rem;
}
.timeline-desc p:last-child  {
     margin-bottom: 0;
}
.timeline-desc ul,
.timeline-desc ol  {
     margin: 0 0 0.5rem;
     padding-left: 1.25rem;
}
.timeline-desc ul  {
     list-style: disc;
}
.timeline-desc ol  {
     list-style: decimal;
}
.timeline-desc a  {
     color: var(--primary, #00D4FF);
     text-decoration: underline;
     text-underline-offset: 2px;
     overflow-wrap: anywhere;
}

/* Certification card: big badge on the left, vertically centered against
   the title→description block; Verify Certificate sits inline with the
   title/status badge (top), See More sits on its own row directly under
   the description (not a tall side column) so description text runs the
   full width of the card, same as Education. */
.cert-card-flex  {
     display: flex;
     gap: 1.75rem;
     /* flex-start is required here — align-items:center would keep
        re-centering the badge (margin-top included) against the row's
        current height, silently overriding the JS-computed fixed offset
        the moment "See More" changes that height. With flex-start, the
        inline margin-top set once on load becomes a true fixed distance
        from the top that never gets recomputed. */
     align-items: flex-start;
}
.cert-card-expand-wrap  {
     margin-top: 0.4rem;
}
.timeline-gallery-strip.cert-badge-gallery-strip  {
     display: contents;
}
.cert-card-badge-col  {
     flex-shrink: 0;
}
.cert-card-badge-col.timeline-gallery-thumb  {
     width: 112px;
     height: 112px;
     border-radius: 14px;
     border: none;
     background: transparent;
     margin: 0;
}
.cert-card-badge-lg  {
     width: 112px;
     height: 112px;
     object-fit: contain;
     flex-shrink: 0;
}
.cert-card-badge-col .timeline-company-logo-fallback  {
     width: 112px;
     height: 112px;
     font-size: 2.2rem;
}
.cert-doc-thumb-row  {
     display: flex;
     margin: 0.6rem 0 0.75rem;
}
.cert-card-body  {
     flex: 1;
     min-width: 0;
}
.cert-card-body .timeline-header  {
     margin-bottom: 0.15rem !important;
     gap: 0.4rem;
     align-items: center;
}
.cert-card-body .timeline-header h4  {
     margin: 0 !important;
     padding: 0;
     line-height: 1.25;
}
.cert-card-body .timeline-company  {
     margin: 0 !important;
     line-height: 1.4;
}
.cert-card-body .timeline-meta  {
     margin-bottom: 0.15rem;
}
.cert-card-body .timeline-desc-clamp  {
     margin-top: 0.4rem;
}
.cert-card-body .timeline-company a  {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
}
.cert-card-body .timeline-company a i  {
     font-size: 0.7rem;
}
.cert-header-right  {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     flex-wrap: wrap;
}
.cert-header-right .timeline-badge,
.cert-header-right .btn-verify-sm  {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     height: 28px !important;
     min-height: 28px !important;
     max-height: 28px !important;
     line-height: 28px !important;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     box-sizing: border-box !important;
     border-width: 1px !important;
     vertical-align: middle;
}
.cert-header-right .timeline-badge  {
     padding: 0 12px !important;
     border: 1px solid transparent !important;
}
.btn-verify-sm  {
     padding: 0 0.85rem;
     font-size: 0.72rem;
     margin-top: 0;
     white-space: nowrap;
}
.cert-see-more-row  {
     display: flex;
     justify-content: flex-end;
     margin-top: 0.5rem;
}

@media (max-width: 576px)  {
     .cert-card-flex  {
          flex-direction: column;
          align-items: center;
          text-align: center;
     }
     .cert-card-badge-lg, .cert-card-badge-col .timeline-company-logo-fallback  {
          width: 112px;
          height: 112px;
     }
     .cert-card-badge-col.timeline-gallery-thumb  {
          width: 112px;
          height: 112px;
     }
     .cert-card-body .timeline-header  {
          justify-content: center;
     }
     .cert-header-right  {
          justify-content: center;
          width: 100%;
     }
     .cert-see-more-row  {
          justify-content: center;
     }
     .timeline-desc  {
          text-align: justify;
     }
     /* Centered card on phones: issuer line and meta chips center too. */
     .cert-card-body .timeline-company  {
          justify-content: center;
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: 0.6rem !important;
     }
     .cert-card-body .exp-meta-row  {
          justify-content: center;
     }
     .cert-card-body .timeline-desc-clamp  {
          padding-top: 0.75rem;
          border-top: 1px dashed var(--card-border);
     }
}

.about-more-text  {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     color: var(--text-secondary);
     line-height: 1.8;
     text-align: justify;
     transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}

.about-more-text.is-open  {
     max-height: 2000px;
     opacity: 1;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
}

.see-more-btn  {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: linear-gradient(135deg, var(--primary), var(--secondary, var(--primary)));
     border: none;
     border-radius: 50px;
     padding: 0.55rem 1.3rem;
     color: #fff;
     font-weight: 600;
     font-size: 0.9rem;
     letter-spacing: 0.02em;
     cursor: pointer;
     box-shadow: 0 4px 14px rgba(59,130,246,0.25);
     transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.see-more-btn i  {
     font-size: 0.85rem;
     transition: transform 0.3s ease;
}

.see-more-btn:hover  {
     color: #fff;
     text-decoration: none;
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(59,130,246,0.35);
     filter: brightness(1.08);
}

.see-more-btn:active  {
     transform: translateY(0);
}

.see-more-btn:focus-visible  {
     outline: 2px solid var(--primary);
     outline-offset: 3px;
}

.availability-badge  {
     --dot: #22C55E;
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     max-width: 100%;
     padding: 0.4rem 1rem;
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--text-primary);
     background: color-mix(in srgb, var(--dot) 10%, transparent);
     border: 1px solid color-mix(in srgb, var(--dot) 35%, transparent);
     border-radius: var(--radius-pill);
}

.pulse-dot  {
     flex: 0 0 auto;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     position: relative;
     background: var(--dot, #22C55E);
     animation: pulseDot 2s infinite;
}

@keyframes pulseDot  {
     0%    { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot, #22C55E) 45%, transparent); }
     70%   { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dot, #22C55E) 0%, transparent); }
     100%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot, #22C55E) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce)  {
     .pulse-dot  { animation: none; }
}

@keyframes pulseGreen  {
     0%  {
         box-shadow: 0 0 0 0 rgba(16,185,129,0.4);
    }
     70%  {
         box-shadow: 0 0 0 8px rgba(16,185,129,0);
    }
     100%  {
         box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}

.about-info-grid  {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
}

.info-card  {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius-sm);
     padding: 0.75rem 1rem;
}

.info-card > div  {
     flex: 1;
     min-width: 0;
}

.info-card strong, .info-card a  {
     overflow-wrap: break-word;
     word-break: break-word;
}

.info-card-copy  {
     flex-shrink: 0;
     width: 30px;
     height: 30px;
     border: 1px solid var(--card-border);
     background: transparent;
     border-radius: var(--radius-sm);
     color: var(--text-muted);
     font-size: 0.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.info-card-copy:hover  {
     background: var(--primary);
     color: #fff;
     border-color: var(--primary);
}

.info-card-copy.copied  {
     background: #16A34A;
     color: #fff;
     border-color: #16A34A;
}

/* Compact variant: reuses .info-card-copy's click/copied behavior but
   sized to sit inline at the end of a credential ID text line instead
   of a full contact-info row. */
.cert-copy-btn  {
     width: 20px;
     height: 20px;
     font-size: 0.68rem;
     border-radius: 4px;
     margin-left: 0.4rem;
     vertical-align: middle;
     display: inline-flex;
}

.info-card i  {
     color: var(--primary);
     font-size: 1.1rem;
     width: 20px;
     flex-shrink: 0;
}

.info-card span  {
     display: block;
     font-size: 0.75rem;
     color: var(--text-muted);
}

.info-card strong, .info-card a  {
     font-size: 0.875rem;
     color: var(--text-primary);
     font-weight: 500;
}

.stats-row  {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
     gap: 1.5rem;
}

.stat-item  {
     text-align: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     padding: 2rem 1rem;
     transition: var(--transition);
}

.stat-item:hover  {
     border-color: rgba(0,212,255,0.3);
     transform: translateY(-4px);
}

.stat-icon  {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 0.75rem;
}

.about-cert-row  {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
     gap: 1.5rem;
}

.about-cert-card  {
     text-align: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     padding: 1.5rem 1rem;
     transition: var(--transition);
}

.about-cert-card:hover  {
     border-color: rgba(0,212,255,0.3);
     transform: translateY(-4px);
}

.about-cert-badge  {
     width: 96px;
     height: 96px;
     margin: 0 auto 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

.about-cert-badge img  {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.about-cert-badge i  {
     font-size: 2.5rem;
     color: var(--primary);
}

.about-cert-name  {
     font-size: 0.95rem;
     font-weight: 700;
     color: var(--text-primary);
     line-height: 1.4;
}

.stat-number  {
     font-family: var(--font-heading);
     font-size: 2.5rem;
     font-weight: 700;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline;
}

.stat-suffix  {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary);
     display: inline;
}

.stat-label  {
     font-size: 0.875rem;
     color: var(--text-secondary);
     margin-top: 0.25rem;
}

.qr-img  {
     width: 120px;
     margin: 0 auto;
     border-radius: var(--radius-sm);
     border: 2px solid var(--card-border);
}

.qr-caption  {
     font-size: 0.75rem;
     color: var(--text-muted);
}


/* ─── Skills ────────────────────────────────── */
.skill-filter-tabs  {
     display: flex;
     flex-wrap: wrap;
     row-gap: 0.65rem;
     column-gap: 0.5rem;
     justify-content: center;
     align-items: center;
}

.filter-btn  {
     display: inline-flex;
     align-items: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-secondary);
     padding: 0.5rem 1.25rem;
     border-radius: var(--radius-pill);
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1;
     cursor: pointer;
     transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active  {
     background: var(--gradient);
     border-color: transparent;
     color: #fff;
     box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.skill-filter-tabs .filter-btn  {
     padding: 0.75rem 1.5rem;
     font-size: 0.925rem;
}

.filter-count  {
     display: inline-block;
     font-size: 0.7rem;
     font-weight: 700;
     background: rgba(255,255,255,0.18);
     border-radius: 10px;
     padding: 0.05rem 0.4rem;
     margin-left: 0.3rem;
     vertical-align: 1px;
}

.filter-btn:not(:hover):not(.active) .filter-count  {
     background: rgba(0,212,255,0.12);
     color: var(--primary);
}

.skills-grid  {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 1.25rem;
}

.skill-card  {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     padding: 1.5rem 1rem;
     text-align: center;
     transition: var(--transition);
}

.skill-card:hover  {
     border-color: rgba(0,212,255,0.3);
     transform: translateY(-4px);
     box-shadow: var(--shadow-glow);
}

.skill-card.hidden  {
     display: none;
}

.skill-logo  {
     width: 60px;
     height: 60px;
     margin: 0 auto 0.75rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

.skill-logo img  {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.skill-logo i  {
     font-size: 2.5rem;
     color: var(--primary);
}

.skill-name  {
     font-weight: 600;
     font-size: 0.875rem;
     margin-bottom: 0.4rem;
     color: var(--text-primary);
}

.skill-badge  {
     font-size: 0.7rem;
     background: rgba(0,212,255,0.1);
     color: var(--primary);
     border-radius: var(--radius-pill);
     padding: 0.15rem 0.5rem;
     display: inline-block;
     margin-bottom: 0.75rem;
}

.skill-bar  {
     height: 4px;
     background: var(--card-border);
     border-radius: 2px;
     margin-bottom: 0.25rem;
     overflow: hidden;
}

.skill-bar-fill  {
     height: 100%;
     background: var(--gradient);
     border-radius: 2px;
     width: 0;
     transition: width 1s ease;
}

.skill-percent  {
     font-size: 0.75rem;
     color: var(--text-muted);
}


/* ─── Resume ────────────────────────────────── */
.resume-tabs  {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     justify-content: center;
     border-bottom: 1px solid var(--card-border);
     padding-bottom: 1rem;
}

.resume-tab  {
     background: transparent;
     border: 1px solid var(--card-border);
     color: var(--text-secondary);
     padding: 0.6rem 1.25rem;
     border-radius: var(--radius-sm);
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
}

.resume-tab:hover, .resume-tab.active  {
     background: var(--gradient);
     border-color: transparent;
     color: #fff;
}

.timeline  {
     position: relative;
     padding-left: 2.75rem;
}

.timeline::before  {
     content: '';
     position: absolute;
     left: 14px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: var(--gradient);
     border-radius: 1px;
}

.timeline-item  {
     position: relative;
     padding-bottom: 2rem;
}

.timeline-item:last-child  {
     padding-bottom: 0;
}

.timeline-dot  {
     position: absolute;
     left: -29px;
     /* Card content (logo/badge + h4) starts right at the card's own
        top padding — .timeline-header and .cert-card-flex both use
        align-items:flex-start, so the h4 title's own line-box always
        begins there. Centering the dot on that line-box (padding-top
        + half the title's line-height), rather than an arbitrary fixed
        px guess, is what actually keeps it level with "B.Sc. in
        Software Engineering" / "AWS Certified..." / "DevOps Meetup
        Dhaka..." / "Best DevOps Implementation 2024" regardless of
        whether that row also has a logo or badge image next to it. */
     top: calc(1.5rem + 0.66rem);
     width: 14px;
     height: 14px;
     background: var(--primary);
     border-radius: 50%;
     border: 3px solid var(--bg);
     box-shadow: 0 0 0 3px rgba(0,212,255,0.3);
     transform: translate(-50%, -50%);
}

.timeline-card  {
     padding: 1.5rem;
     box-sizing: border-box;
}

.timeline-card-expandable  {
     cursor: pointer;
}

.timeline-header  {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-bottom: 0.5rem;
}

.timeline-header h4  {
     font-family: var(--font-heading);
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--text-primary);
}

.timeline-badge  {
     background: rgba(0,212,255,0.1);
     color: var(--primary);
     border-radius: var(--radius-pill);
     padding: 0.2rem 0.75rem;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
}

.timeline-badge-current  {
     background: rgba(16, 185, 129, 0.15);
     color: #34D399;
}

.timeline-badge-expired  {
     background: rgba(239, 68, 68, 0.15);
     color: #F87171;
}

.timeline-company  {
     color: var(--primary);
     font-weight: 500;
     margin-bottom: 0.35rem;
}

.timeline-meta  {
     font-size: 0.85rem;
     color: var(--text-muted);
     margin-bottom: 0.75rem;
}

.timeline-list  {
     padding-left: 1.25rem;
     list-style: disc;
}

.timeline-list li  {
     color: var(--text-secondary);
     font-size: 0.875rem;
     margin-bottom: 0.35rem;
     text-align: justify;
}

.timeline-list li p  {
     margin: 0;
}

.timeline-list-extra  {
     margin-top: -0.35rem;
}

.timeline-extra-wrap  {
     margin-top: -0.35rem;
}

.timeline-gallery-strip  {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin: 0.6rem 0 0.75rem;
}

.timeline-gallery-thumb  {
     position: relative;
     display: block;
     width: 150px;
     height: 112px;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     border: 1px solid var(--border-color, rgba(120,120,120,.2));
     background: var(--card-bg, rgba(0,0,0,.15));
     flex-shrink: 0;
}

.timeline-gallery-thumb img  {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
}

.timeline-gallery-hover-overlay  {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 16px;
     opacity: 0;
     background: rgba(0,0,0,0);
     transition: all .2s;
}

.timeline-gallery-thumb:hover .timeline-gallery-hover-overlay  {
     opacity: 1;
     background: rgba(0,0,0,.35);
}

@media (max-width: 640px)  {
     .timeline-gallery-strip  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
     .timeline-gallery-thumb  { width: 100%; height: 30vw; min-height: 96px; max-height: 140px; }
}

/* ===== Timeline Lightbox (job images: prev/next, caption) ===== */
.timeline-lightbox  {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 3000;
     background: rgba(0,0,0,.75);
     backdrop-filter: blur(6px);
     overscroll-behavior: contain;
}

html.modal-scroll-lock  {
     overflow: hidden !important;
}

.timeline-lightbox.is-open  {
     display: flex;
     align-items: center;
     justify-content: center;
}

.timeline-lightbox-content  {
     position: relative;
     width: 100%;
     max-width: 1040px;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
     box-sizing: border-box;
     transition: max-width .2s ease;
}

.timeline-lightbox-card  {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
     max-height: 88vh;
     background: #111827;
     border-radius: 0;
     border: none;
     outline: none;
     overflow: hidden;
     box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.timeline-lightbox-img-wrap  {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     max-height: 74vh;
     line-height: 0;
     background: #000;
     border: none;
     border-radius: 0;
}

.timeline-lightbox-img  {
     width: 100%;
     max-height: 74vh;
     object-fit: cover;
     display: block;
     border: none;
     border-radius: 0;
     outline: none;
}

/* Certificate/badge images: show full artwork, never crop */
.timeline-lightbox-img-wrap.is-contain  {
     padding: 24px;
     box-sizing: border-box;
}

.timeline-lightbox-img-wrap.is-contain .timeline-lightbox-img  {
     width: auto;
     max-width: 100%;
     height: auto;
     max-height: 70vh;
     object-fit: contain;
}

.timeline-lightbox-close  {
     position: absolute;
     top: 8px;
     right: 8px;
     color: #111;
     font-size: 14px;
     background: rgba(255,255,255,.95);
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 14px rgba(0,0,0,.4);
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     z-index: 6;
     transition: var(--transition);
}

.timeline-lightbox-close:hover  {
     background: #EF4444 !important;
     border-color: #EF4444 !important;
     color: #fff !important;
}

.timeline-lightbox-nav  {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(17,24,39,.55);
     backdrop-filter: blur(4px);
     color: #fff;
     border: none;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 16px;
     z-index: 5;
     box-shadow: 0 4px 14px rgba(0,0,0,.3);
     transition: var(--transition);
}

.timeline-lightbox-nav:hover  {
     background: var(--primary);
     color: #fff;
}

.timeline-lightbox-nav[disabled],
.timeline-lightbox-nav.is-hidden  {
     display: none !important;
}

.timeline-lightbox-prev  { left: 14px; }
.timeline-lightbox-next  { right: 14px; }

.timeline-lightbox-caption  {
     box-sizing: border-box;
     width: 100%;
     margin-top: 0;
     background: rgba(17,24,39,.92);
     border-top: 1px solid rgba(255,255,255,.08);
     color: #fff;
     font-size: 13.5px;
     font-weight: 700;
     line-height: 1.6;
     text-align: center;
     padding: 16px 24px;
     display: none;
}

.timeline-lightbox-dots  {
     display: flex;
     gap: 6px;
     margin-top: 16px;
}

.timeline-lightbox-dot  {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: rgba(255,255,255,.35);
     transition: var(--transition);
     cursor: pointer;
     border: none;
     padding: 0;
}

.timeline-lightbox-dot.active  {
     background: #fff;
     width: 18px;
     border-radius: 4px;
}

@media (max-width: 768px)  {
     .timeline-lightbox-content  { max-width: 94vw; padding: 10px; }
     .timeline-lightbox-card  { max-height: 88vh; }
     .timeline-lightbox-img-wrap  { max-height: 56vh; }
     .timeline-lightbox-img  { max-height: 56vh; }
     .timeline-lightbox-img-wrap.is-contain  { padding: 14px; }
     .timeline-lightbox-img-wrap.is-contain .timeline-lightbox-img  { max-height: 52vh; }
     .timeline-lightbox-prev  { left: 6px; width: 34px; height: 34px; font-size: 14px; }
     .timeline-lightbox-next  { right: 6px; width: 34px; height: 34px; font-size: 14px; }
     .timeline-lightbox-close  { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 12px; }
     .timeline-lightbox-caption  { font-size: 12.5px; padding: 10px 14px; }
     .timeline-lightbox.is-open  { padding: 10px; box-sizing: border-box; }
}

@media (max-width: 480px)  {
     .timeline-lightbox-content  { padding: 6px; }
     .timeline-lightbox-img-wrap  { max-height: 46vh; }
     .timeline-lightbox-img  { max-height: 46vh; }
     .timeline-lightbox-img-wrap.is-contain  { padding: 8px; }
     .timeline-lightbox-img-wrap.is-contain .timeline-lightbox-img  { max-height: 42vh; }
     .timeline-lightbox-prev  { left: 4px; width: 30px; height: 30px; font-size: 12px; }
     .timeline-lightbox-next  { right: 4px; width: 30px; height: 30px; font-size: 12px; }
     .timeline-lightbox-close  { top: 4px; right: 4px; width: 26px; height: 26px; font-size: 11px; }
     .timeline-lightbox-caption  { font-size: 11.5px; padding: 8px 10px; }
     .timeline-lightbox-dots  { margin-top: 10px; }
}

.timeline-see-more  {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     width: fit-content;
     margin: 0.35rem 0 0.5rem auto;
     background: var(--card-bg, rgba(17,24,39,.85));
     border: 1.5px solid rgba(0,212,255,.35);
     color: var(--primary, #00D4FF);
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.4px;
     padding: 0.5rem 1.1rem;
     border-radius: 999px;
     cursor: pointer;
     transition: all 0.2s ease;
}

.timeline-see-more-icon  {
     font-size: 0.7rem;
     margin-left: 0;
     transition: transform 0.2s ease;
}

.timeline-see-more:hover  {
     background: rgba(0,212,255,.12);
     border-color: var(--primary, #00D4FF);
     text-decoration: none;
     transform: translateY(-1px);
}

.timeline-title-row  {
     display: flex;
     align-items: center;
     gap: 0.6rem;
}

.timeline-company-logo  {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     object-fit: cover;
     flex-shrink: 0;
}

.timeline-featured-star  {
     color: #F59E0B;
     margin-right: 0.35rem;
     font-size: 0.85em;
}

.timeline-company-block  {
     position: relative;
     margin-bottom: 2.5rem;
}
.timeline-company-block:last-child  {
     margin-bottom: 0;
}

/* Company header is now merged into the FIRST role's card (same white
   box) instead of sitting above it as its own separate card — so the
   nested timeline's normal line (starting at its own top, right where
   that merged card begins) is exactly what's needed; no custom company-
   block-level line required anymore. */
.timeline-company-header  {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
     flex-wrap: wrap;
     box-sizing: border-box;
}
/* Inline variant: header lives inside the role card's own padding, so it
   needs none of its own box styling — just a divider separating it from
   that role's details below. */
.timeline-company-header.timeline-company-header-inline  {
     margin: 0 0 1.25rem;
     padding: 0 0 1.25rem;
     border-bottom: 1px solid var(--card-border);
}
.timeline-company-header-left  {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     min-width: 0;
     width: 100%;
}
/* Company logo doubles as a marker on the vertical line, positioned the
   same way .timeline-dot is (bigger). The line, and this item's own
   dot, both start below the logo and the merged header block instead of
   running through them — using a fixed clearance rather than a JS-
   measured one, since the earlier dynamic version wasn't rendering
   reliably. If the header wraps to more/fewer lines than usual (e.g. no
   location set) this can be nudged, but a fixed value avoids any JS
   timing/measurement failure. */
.timeline-company-header-inline .timeline-company-logo-lg,
.timeline-company-header-inline .timeline-company-logo-fallback  {
     position: absolute;
     left: -29px;
     top: 0.65rem;
     width: 50px;
     height: 50px;
     transform: translateX(-50%);
     z-index: 2;
}
.timeline-nested::before  {
     top: 4rem;
}
.timeline-header-with-dot  {
     position: relative;
}
/* Dot is pinned to the role-title text row itself (fixed top offset
   matching the h4's own line-box), NOT centered on the whole flex
   header. Centering on the header (top:50%) broke on mobile once the
   badge wraps onto its own line below the title — the header's total
   height then spans two rows, so a 50%-centered dot floats between the
   title and the badge instead of sitting level with the role name. A
   fixed top keeps it aligned with the title row regardless of whether
   the badge wraps beneath it. */
.timeline-dot-inline  {
     top: 0.65rem !important;
     left: -53px !important;
     transform: translate(-50%, -50%) !important;
}
@media (max-width: 575.98px)  {
    
  .timeline-dot-inline  {
         top: 0.6rem !important;
         left: -47px !important;
    }
}
.timeline-company-header-text  {
     min-width: 0;
     flex: 1;
}
.timeline-company-name-row  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 0.5rem;
     width: 100%;
}
.timeline-company-logo-lg  {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     object-fit: cover;
     flex-shrink: 0;
}
.timeline-company-logo-fallback  {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     background: rgba(99, 102, 241, 0.12);
     color: var(--accent-color, #6366F1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     flex-shrink: 0;
}
.timeline-company-block-name  {
     font-size: 1.05rem;
     font-weight: 600;
     margin: 0;
     word-break: break-word;
}
.timeline-company-block-name a  {
     color: inherit;
     text-decoration: none;
}
.timeline-company-block-name a:hover  {
     text-decoration: underline;
}
.timeline-company-link-icon  {
     font-size: 0.68rem;
     margin-left: 0.15rem;
     opacity: 0.75;
     vertical-align: 1px;
}
.timeline-company-block-name a  {
     color: inherit;
     text-decoration: none;
}
.timeline-company-block-name a:hover  {
     color: var(--primary);
}
.timeline-company-block-name a:hover .timeline-company-link-icon  {
     opacity: 1;
}
.timeline-company-duration-pill  {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 0.75rem;
     font-weight: 600;
     padding: 0.2rem 0.75rem;
     border-radius: var(--radius-pill);
     background: rgba(0,212,255,0.1);
     color: var(--primary);
     white-space: nowrap;
}
.timeline-company-duration-pill-current  {
     background: rgba(16, 185, 129, 0.15);
     color: #34D399;
}
.timeline-nested .timeline-item:first-child  {
     margin-top: 0;
}

/* Roles within the same company now live inside ONE merged card instead
   of each getting its own glass-card box — .timeline-role-divided draws
   the separator between consecutive roles that a card boundary used to
   provide. */
.timeline-role-divided  {
     position: relative;
     margin-top: 1.75rem;
     padding-top: 1.75rem;
}
.timeline-role-divided::before  {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: rgba(148, 163, 184, 0.35);
}

.timeline-role-featured  {
     margin-left: -1rem;
     margin-right: -1rem;
     padding-left: 1rem;
     padding-right: 1rem;
     border-radius: 10px;
     background: rgba(245, 158, 11, 0.06);
     box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.5);
}

.timeline-role.timeline-item-highlight  {
     animation: timelineHighlightPulse 1.3s ease-out 2;
     border-radius: 10px;
}
@keyframes timelineHighlightPulse {
     0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
     70% { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); }
     100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}



.timeline-tech-chips  {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem;
     margin: 0.5rem 0 0.75rem;
}

.timeline-tech-chip  {
     font-size: 0.72rem;
     font-weight: 600;
     padding: 0.2rem 0.6rem;
     border-radius: 20px;
     background: rgba(79, 70, 229, 0.08);
     color: var(--accent1, #4F46E5);
     border: 1px solid rgba(79, 70, 229, 0.15);
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
}

.timeline-tech-chip-icon  {
     width: 14px;
     height: 14px;
     object-fit: contain;
     font-size: 0.72rem;
     flex-shrink: 0;
}

.timeline-tech-chip-icon-only  {
     position: relative;
     padding: 0.3rem;
     width: 26px;
     height: 26px;
     justify-content: center;
}

.timeline-tech-chip-icon-only img  {
     width: 15px;
     height: 15px;
     object-fit: contain;
}

.timeline-tech-chip-icon-only i  {
     font-size: 0.8rem;
}

.timeline-tech-chip-icon-only::after  {
     content: attr(data-tooltip);
     position: absolute;
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%) translateY(4px);
     background: var(--text-primary);
     color: var(--bg);
     font-size: 0.7rem;
     font-weight: 600;
     white-space: nowrap;
     padding: 0.25rem 0.55rem;
     border-radius: 6px;
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
     transition: opacity .15s ease, transform .15s ease;
     z-index: 20;
}

.timeline-tech-chip-icon-only:hover::after  {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
}

@media (hover: none)  {
     .timeline-tech-chip-icon-only::after  { display: none; }
}

.timeline-badge-col  {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 0.4rem;
}

.timeline-badge  {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
}

.exp-current-dot  {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: var(--success, #10B981);
     box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
     animation: pulseGreen 2s infinite;
     display: inline-block;
     flex-shrink: 0;
}

.btn-verify  {
     display: inline-block;
     margin-top: 0.75rem;
     padding: 0.4rem 1rem;
     background: transparent;
     border: 1px solid var(--primary);
     color: var(--primary);
     border-radius: var(--radius-pill);
     font-size: 0.8rem;
     font-weight: 600;
     transition: var(--transition);
}

.btn-verify:hover  {
     background: var(--primary);
     color: var(--bg);
}

.leadership-card, .award-item  {
     padding: 1.25rem;
}

.award-year-badge  {
     background: var(--gradient);
     color: #fff;
     border-radius: var(--radius-sm);
     padding: 0.35rem 0.75rem;
     font-size: 0.875rem;
     font-weight: 700;
     white-space: nowrap;
     height: fit-content;
}


/* ─── Portfolio ─────────────────────────────── */
.project-card  {
     overflow: hidden;
}

.project-thumb-wrapper  {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/3;
}

.project-thumb  {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
}

.project-card:hover .project-thumb  {
     transform: scale(1.08);
}

.project-category-badge  {
     position: absolute;
     top: 0.75rem;
     left: 0.75rem;
     background: var(--gradient);
     color: #fff;
     border-radius: var(--radius-pill);
     padding: 0.25rem 0.75rem;
     font-size: 0.75rem;
     font-weight: 600;
}

.project-title  {
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 1.05rem;
     margin-bottom: 0.5rem;
}

.project-desc  {
     font-size: 0.875rem;
     color: var(--text-secondary);
     margin-bottom: 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.tech-tag-pill  {
     display: inline-block;
     background: rgba(0,212,255,0.08);
     color: var(--text-secondary);
     border: 1px solid rgba(0,212,255,0.2);
     border-radius: var(--radius-pill);
     padding: 0.15rem 0.6rem;
     font-size: 0.72rem;
     margin: 0.1rem;
}

/* ===== Project detail: case-study rich text (Quill output) + code blocks ===== */
.rich-text-content p { margin-bottom: 0.9rem; }
.rich-text-content p:last-child { margin-bottom: 0; }
.rich-text-content ul, .rich-text-content ol { padding-left: 1.4rem; margin-bottom: 0.9rem; }
.rich-text-content li { margin-bottom: 0.4rem; }
.rich-text-content a { color: var(--primary); text-decoration: underline; }
.rich-text-content strong { color: var(--text-primary); }

.proj-code-block {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 10px;
     padding: 1rem 1.2rem;
     overflow-x: auto;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
     font-size: 0.82rem;
     line-height: 1.6;
     color: var(--text-secondary);
     white-space: pre;
     max-width: 100%;
}

.project-link-btn  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.4rem 0.75rem;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-secondary);
     border-radius: var(--radius-sm);
     font-size: 0.8rem;
     transition: var(--transition);
}

.project-link-btn:hover  {
     border-color: var(--primary);
     color: var(--primary);
}


/* ─── Gallery ───────────────────────────────── */
.gallery-preview-grid  {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 4px;
}

/* Empty state ("coming soon") is a single grid item — without this it
   only fills the first column, leaving the rest of the row blank beside
   it. Span every column so it centers properly. */
.gallery-preview-grid > .w-100,
.skills-grid > .w-100  {
     grid-column: 1 / -1;
}

@media (max-width: 768px)  {
     .gallery-preview-grid  {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
    }
}

@media (max-width: 480px)  {
     .gallery-preview-grid  {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
    }
}

@media (max-width: 575.98px)  {
    .gallery-overlay  {
         padding-top: 18%;
    }
    .gallery-overlay-expand  {
         width: 34px;
         height: 34px;
         font-size: 0.78rem;
    }
    .gallery-overlay-hint  {
         font-size: 0.65rem;
    }
    .gallery-overlay-meta  {
         font-size: 0.75rem;
    }
    .gallery-overlay-location, .gallery-overlay-desc  {
         font-size: 0.72rem;
    }
}

.gallery-preview-item  {
     position: relative;
     overflow: hidden;
     border-radius: 0;
     aspect-ratio: 4/3;
     display: block;
     cursor: zoom-in;
     border: 2px solid transparent;
     transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.gallery-preview-item:hover  {
     border-color: rgba(0,212,255,0.55);
     box-shadow: 0 0 0 4px rgba(0,212,255,0.12), 0 12px 30px rgba(0,0,0,0.35);
     z-index: 2;
}

.gallery-preview-item img  {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-preview-item img  {
     opacity: 0;
     transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-preview-item.img-loaded img  {
     opacity: 1;
}

.gallery-img-skeleton  {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, var(--card-border) 25%, var(--card-bg) 37%, var(--card-border) 63%);
     background-size: 400% 100%;
     animation: skeleton-shimmer 1.4s ease infinite;
     z-index: 0;
}

.gallery-preview-item.img-loaded .gallery-img-skeleton  {
     display: none;
}

.gallery-item-hidden  {
     opacity: 0 !important;
     transform: scale(0.9);
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-preview-item:hover img  {
     transform: scale(1.12) rotate(1deg);
}

.gallery-overlay  {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(2,3,8,0.97) 15%, rgba(2,3,8,0.7) 55%, rgba(2,3,8,0.3) 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     padding: 1.25rem;
     padding-top: 22%;
     opacity: 0;
     transition: opacity 0.35s ease;
}

.gallery-preview-item:hover .gallery-overlay  {
     opacity: 1;
}

.gallery-overlay-expand  {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 2px solid rgba(255,255,255,0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 0.9rem;
     margin-bottom: 0.4rem;
     transform: scale(0.6);
     opacity: 0;
     transition: transform 0.35s ease 0.05s, opacity 0.35s ease 0.05s;
}

.gallery-preview-item:hover .gallery-overlay-expand  {
     transform: scale(1);
     opacity: 1;
}

.gallery-overlay-hint  {
     color: rgba(255,255,255,0.85);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.4px;
     text-transform: uppercase;
     transform: translateY(-6px);
     opacity: 0;
     transition: transform 0.35s ease 0.1s, opacity 0.35s ease 0.1s;
}

.gallery-preview-item:hover .gallery-overlay-hint  {
     transform: translateY(0);
     opacity: 1;
}

.gallery-overlay-text  {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 0 1.1rem 1.1rem;
     transform: translateY(12px);
     opacity: 0;
     transition: transform 0.35s ease 0.05s, opacity 0.35s ease 0.05s;
}

.gallery-preview-item:hover .gallery-overlay-text  {
     transform: translateY(0);
     opacity: 1;
}

.gallery-overlay-meta  {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
     color: var(--primary);
     font-size: 0.82rem;
     font-weight: 700;
     margin-bottom: 0.4rem;
     text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.gallery-overlay-meta span  {
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
}

.gallery-overlay-meta span:not(:last-child)::after  {
     content: "|";
     margin-left: 0.5rem;
     color: rgba(255,255,255,0.35);
     font-weight: 400;
}

.gallery-overlay-meta i  {
     color: var(--primary);
     font-size: 0.85em;
}

.gallery-overlay-location  {
     display: flex;
     align-items: center;
     gap: 0.35rem;
     color: #cbd5e1;
     font-size: 0.78rem;
     font-weight: 500;
     margin-bottom: 0.4rem;
     text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.gallery-overlay-location i  {
     color: var(--primary);
     font-size: 0.85em;
}

.gallery-overlay-desc  {
     color: #e5e7eb;
     font-size: 0.82rem;
     line-height: 1.5;
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* ─── GLightbox custom skin ─────────────────── */
.glightbox-clean .gslide-media  {
     border-radius: 0;
}

.glightbox-counter  {
     position: fixed !important;
     top: 16px;
     left: 16px;
     z-index: 2147483647 !important;
     background: #000 !important;
     color: #fff !important;
     font-size: 1rem !important;
     font-weight: 800 !important;
     letter-spacing: 0.4px;
     padding: 0.55rem 1.1rem;
     border-radius: var(--radius-pill, 50px);
     border: 2px solid var(--primary);
     display: none;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 0 4px rgba(0,212,255,0.15);
     pointer-events: none;
}

@media (max-width: 575.98px)  {
    .glightbox-counter  {
         top: 10px;
         left: 10px;
         font-size: 0.85rem !important;
         padding: 0.45rem 0.9rem;
    }
}

.glightbox-kbd-hint  {
     position: fixed;
     left: 50%;
     bottom: calc(28px + env(safe-area-inset-bottom));
     transform: translate(-50%, 12px);
     background: rgba(10,14,26,0.92);
     color: #fff;
     font-size: 0.82rem;
     padding: 0.6rem 1.1rem;
     border-radius: var(--radius-pill, 50px);
     border: 1px solid rgba(255,255,255,0.12);
     box-shadow: 0 8px 24px rgba(0,0,0,0.4);
     z-index: 1000001;
     opacity: 0;
     transition: opacity 0.3s ease, transform 0.3s ease;
     white-space: nowrap;
}

.glightbox-kbd-hint.is-visible  {
     opacity: 1;
     transform: translate(-50%, 0);
}

.glightbox-kbd-hint kbd  {
     background: rgba(255,255,255,0.12);
     border: 1px solid rgba(255,255,255,0.25);
     border-radius: 4px;
     padding: 0.05rem 0.4rem;
     font-size: 0.78rem;
     margin: 0 0.1rem;
}

.glightbox-clean .gclose  {
     position: absolute;
     top: 14px;
     right: 14px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #fff !important;
     color: #0a0e1a;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 1 !important;
     z-index: 99999;
     box-shadow: 0 2px 10px rgba(0,0,0,0.35);
     transition: background-color 0.25s ease, color 0.25s ease;
}

.glightbox-clean .gclose svg,
.glightbox-clean .gclose svg *  {
     width: 18px;
     height: 18px;
     fill: #0a0e1a !important;
     stroke: #0a0e1a !important;
     color: #0a0e1a !important;
     opacity: 1 !important;
}

.glightbox-clean .gclose:hover  {
     background: #e0345c !important;
     color: #fff;
}

.glightbox-clean .gclose:hover svg,
.glightbox-clean .gclose:hover svg *  {
     fill: #fff !important;
     stroke: #fff !important;
     color: #fff !important;
}

.gprev, .gnext  {
     width: 44px !important;
     height: 44px !important;
     border-radius: 50% !important;
     background: #fff !important;
     color: #0a0e1a;
     top: 50%;
     transform: translateY(-50%);
     display: flex !important;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 10px rgba(0,0,0,0.35);
     opacity: 0.95 !important;
     transition: background-color 0.25s ease, color 0.25s ease;
}

.gprev  { left: 16px !important; }
.gnext  { right: 16px !important; }

.gprev.disabled, .gnext.disabled  {
     background: #fff !important;
     opacity: 0.4 !important;
}

.gprev svg, .gnext svg,
.gprev svg *, .gnext svg *,
.gprev.disabled svg, .gnext.disabled svg,
.gprev.disabled svg *, .gnext.disabled svg *  {
     fill: #0a0e1a !important;
     stroke: #0a0e1a !important;
     color: #0a0e1a !important;
     width: 20px;
     height: 20px;
     opacity: 1 !important;
}

.gprev:hover:not(.disabled), .gnext:hover:not(.disabled)  {
     background: var(--primary) !important;
     color: #fff;
}

.gprev:hover:not(.disabled) svg, .gnext:hover:not(.disabled) svg,
.gprev:hover:not(.disabled) svg *, .gnext:hover:not(.disabled) svg *  {
     fill: #fff !important;
     stroke: #fff !important;
     color: #fff !important;
}

.glightbox-clean .gdesc-inner  {
     padding: 0.85rem 1.1rem;
     position: relative;
}

.glightbox-clean .gslide-title,
.glightbox-clean .gslide-title *  {
     font-size: 0.85rem !important;
     font-weight: 600 !important;
     color: var(--primary) !important;
     margin-bottom: 0.35rem;
     opacity: 1 !important;
}

.glightbox-clean .gslide-title i  {
     margin-right: 0.15rem;
     font-size: 0.8em !important;
}

.glightbox-clean .gslide-desc,
.glightbox-clean .gslide-desc *  {
     font-size: 0.95rem !important;
     color: #ececec !important;
     text-align: justify;
     text-justify: inter-word;
}

.gslide-description.description-bottom  {
     background: #14181f;
     width: 100%;
     position: relative !important;
     z-index: 5;
}

/* Long captions get an internal scrollbar instead of growing tall
   enough to cover the photo above them. */
.glightbox-clean .gdesc-inner  {
     max-height: 32vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-color: var(--primary) transparent;
}

.glightbox-clean .gdesc-inner::-webkit-scrollbar  {
     width: 6px;
}

.glightbox-clean .gdesc-inner::-webkit-scrollbar-thumb  {
     background: var(--primary);
     border-radius: 3px;
}

.glightbox-clean .gdesc-inner .desc-more-inner,
.glightbox-clean .gdesc-inner .gslide-desc  {
     max-height: none !important;
     height: auto !important;
     overflow: visible !important;
     -webkit-line-clamp: unset !important;
}

.glightbox-clean .gdesc-inner .desc-more,
.glightbox-clean .gdesc-inner .gdesc-more  {
     display: none !important;
}

/* Scroll hint: shown only when JS detects the caption overflows */
.glightbox-clean .gdesc-inner::after  {
     content: "";
     position: absolute;
     display: block;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 26px;
     pointer-events: none;
     background: linear-gradient(to bottom, rgba(20,24,31,0), #14181f 85%);
     opacity: 0;
     transition: opacity 0.2s ease;
}

.glightbox-clean .gdesc-inner.has-more-content::after  {
     opacity: 1;
}

.glightbox-clean .gdesc-inner.has-more-content .scroll-hint  {
     opacity: 1;
}

.glightbox-clean .scroll-hint  {
     position: absolute;
     bottom: 8px;
     right: 12px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--primary);
     color: #0a0e1a;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.7rem;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
     animation: scrollHintBounce 1.4s ease-in-out infinite;
     z-index: 3;
}

@keyframes scrollHintBounce  {
     0%, 100%  { transform: translateY(0); }
     50%  { transform: translateY(4px); }
}

/* Vertically center the slide (image + description) within the
   viewport, instead of pinning the image to the top when the
   caption grows tall. */
.gslide  {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
}

.gslide-inner-content, .ginner-container  {
     height: auto !important;
     max-height: 92vh !important;
     margin: auto !important;
}

@media (max-width: 767.98px)  {
    .gslide-inner-content, .ginner-container  {
         max-height: 94vh !important;
    }
}

@media (max-width: 575.98px)  {
    .glightbox-clean .gdesc-inner  {
         max-height: 26vh;
    }
    .glightbox-clean .gclose  {
         width: 34px;
         height: 34px;
         z-index: 999999;
    }
    .gprev, .gnext  {
         width: 36px !important;
         height: 36px !important;
    }
    .gprev  { left: 6px !important; }
    .gnext  { right: 6px !important; }
}


/* ─── Services ──────────────────────────────── */
.service-icon  {
     font-size: 2.5rem;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.service-title  {
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 1.1rem;
     margin-bottom: 0.75rem;
     color: var(--text-primary);
}

.service-desc  {
     font-size: 0.875rem;
     color: var(--text-secondary);
     text-align: justify;
     text-align-last: left;
     line-height: 1.6;
}

/* Clamp to exactly 2 lines with a trailing ellipsis until "Learn More" is
   clicked. This is applied to a plain-text (striptags) rendering of the
   description — line-clamp on a container with a nested block element
   (e.g. the <p> a rich-text editor saves) doesn't reliably truncate,
   since the browser can't collapse across separate block boxes. */
.service-desc-clamp {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

/* Full rich-text description, only shown once a card is expanded. */
.service-desc-full  {
     display: none;
     font-size: 0.875rem;
     color: var(--text-secondary);
     text-align: justify;
     text-align-last: left;
     line-height: 1.6;
}

.service-desc-full p  {
     margin-bottom: 0.75rem;
}

.service-desc-full p:last-child  {
     margin-bottom: 0;
}

.service-card.service-expanded .service-desc-clamp  {
     display: none;
}

.service-card.service-expanded .service-desc-full  {
     display: block;
     animation: serviceFeaturesIn 0.25s ease;
}

.service-features  {
     display: none;
     margin-top: 0.5rem;
}

.service-card.service-expanded .service-features  {
     display: block;
     animation: serviceFeaturesIn 0.25s ease;
}

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

.service-features ul  {
     padding-left: 1.25rem;
     list-style: disc;
     text-align: left;
}

.service-features li  {
     font-size: 0.85rem;
     color: var(--text-secondary);
     margin-bottom: 0.35rem;
}

/* Card body flexes so the footer (Learn More button) always sits flush at
   the bottom of the card, aligned to the right-hand side. */
.service-card  {
     display: flex;
     flex-direction: column;
}

.service-card-footer  {
     margin-top: auto;
     padding-top: 0.75rem;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
}

/* "Get a Quote" CTA — only visible once the card is expanded. */
.btn-service-cta  {
     display: none;
     align-items: center;
     justify-content: center;
     background: var(--gradient);
     color: #fff;
     border: 1px solid transparent;
     border-radius: var(--radius-pill);
     padding: 0.35rem 1rem;
     font-size: 0.8rem;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
     transition: var(--transition);
}

.btn-service-cta:hover  {
     color: #fff;
     filter: brightness(1.08);
     transform: translateY(-1px);
}

.btn-service-cta:focus-visible  {
     outline: 2px solid var(--primary, #00D4FF);
     outline-offset: 2px;
}

.service-card.service-expanded .btn-service-cta  {
     display: inline-flex;
     animation: serviceFeaturesIn 0.25s ease;
}

.btn-learn-more  {
     background: transparent;
     border: 1px solid rgba(0,212,255,0.3);
     color: var(--primary);
     border-radius: var(--radius-pill);
     padding: 0.35rem 1rem;
     font-size: 0.8rem;
     cursor: pointer;
     transition: var(--transition);
     white-space: nowrap;
}

/* Services grid — mobile-first. Each column is independent (masonry):
   expanding a card only pushes the cards BELOW it in the SAME column;
   cards in other columns never move. Without JS it falls back to a plain
   responsive grid. */
.services-grid  {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem;
     align-items: start;
}

@media (min-width: 768px)  {
     .services-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px)  {
     .services-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.services-grid.is-masonry  {
     display: flex;
     align-items: flex-start;
}

.services-masonry-col  {
     flex: 1 1 0;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
}

/* Equal collapsed height: title and description reserve a fixed 2-line
   box on tablet/desktop so every collapsed card is identical in height,
   even though columns are independent. Expanded cards grow on their own. */
.service-title  {
     line-height: 1.35;
}

@media (min-width: 768px)  {
     .service-title  {
          min-height: 2.7em;
     }

     .service-card:not(.service-expanded) .service-title  {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
     }

     .service-card:not(.service-expanded) .service-desc-clamp  {
          min-height: 3.2em;
     }
}

/* Toolbar: service total (left) + Expand / Collapse all (right) */
.services-toolbar  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 0.75rem;
     margin-bottom: 1.25rem;
}

.services-total  {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.85rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     color: var(--text-secondary);
}

.services-total i  {
     color: var(--primary);
}

.btn-toggle-all  {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     padding: 0.3rem 0.35rem 0.3rem 1rem;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--radius-pill);
     color: var(--text-primary);
     font-size: 0.82rem;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     white-space: nowrap;
     transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-toggle-all-icon  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 1.9rem;
     height: 1.9rem;
     border-radius: 50%;
     font-size: 0.78rem;
     color: var(--primary);
     background: rgba(0, 212, 255, 0.12);
     border: 1px solid rgba(0, 212, 255, 0.25);
     transition: background .25s ease, color .25s ease, transform .25s ease;
}

.btn-toggle-all:hover  {
     border-color: rgba(0, 212, 255, 0.45);
     box-shadow: 0 6px 18px -8px rgba(0, 212, 255, 0.45);
     transform: translateY(-1px);
}

.btn-toggle-all:hover .btn-toggle-all-icon  {
     transform: scale(1.08);
}

.btn-toggle-all[aria-pressed="true"]  {
     border-color: rgba(0, 212, 255, 0.45);
}

.btn-toggle-all[aria-pressed="true"] .btn-toggle-all-icon  {
     background: var(--gradient);
     border-color: transparent;
     color: #fff;
}

.btn-toggle-all:focus-visible,
.btn-all-services:focus-visible  {
     outline: 2px solid var(--primary, #00D4FF);
     outline-offset: 2px;
}

@media (max-width: 575.98px)  {
     .services-toolbar  { margin-bottom: 1rem; }
     .services-total  { font-size: 0.8rem; }
}

.services-grid .service-col  {
     min-width: 0;
}

.services-grid .service-col > .service-card  {
     height: auto;
     width: 100%;
}

.btn-learn-more:hover  {
     background: rgba(0,212,255,0.1);
}

/* ---- Initial-load cap (6 cards) + "All Services" reveal ---- */
.service-col-extra  {
     display: none;
}

#servicesGrid.services-show-all .service-col-extra  {
     display: block;
     animation: serviceFeaturesIn 0.3s ease;
}

.services-show-all-wrap  {
     margin-top: 2.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
}

.btn-all-services  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.7rem;
     padding: 0.7rem 1.5rem;
     background: var(--card-bg);
     border: 1px solid rgba(0, 212, 255, 0.35);
     border-radius: var(--radius-pill);
     color: var(--text-primary);
     font-size: 0.9rem;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-all-services:hover  {
     border-color: var(--primary);
     box-shadow: 0 10px 26px -12px rgba(0, 212, 255, 0.55);
     transform: translateY(-2px);
}

.btn-all-services-badge  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 1.9rem;
     padding: 0.1rem 0.55rem;
     border-radius: var(--radius-pill);
     font-size: 0.72rem;
     font-weight: 700;
     color: #fff;
     background: var(--gradient);
}

.btn-all-services-badge[hidden]  {
     display: none;
}

.btn-all-services-chevron  {
     font-size: 0.75rem;
     color: var(--primary);
     transition: transform .3s ease;
}

.btn-all-services[aria-expanded="true"] .btn-all-services-chevron  {
     transform: rotate(180deg);
}

@media (max-width: 576px)  {
     .service-desc  { font-size: 0.85rem; }
     .btn-learn-more  { flex: 1 1 0; justify-content: center; text-align: center; }
     .btn-service-cta  { flex: 1 1 0; }
     .service-card-footer  { justify-content: stretch; flex-wrap: nowrap; }
     .btn-all-services  { width: 100%; }
}


/* ─── Blog ──────────────────────────────────── */
.blog-card  {
     overflow: hidden;
}

.blog-img-wrapper  {
     aspect-ratio: 16/9;
     overflow: hidden;
}

.blog-thumb  {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
}

.blog-card:hover .blog-thumb  {
     transform: scale(1.05);
}

.blog-meta  {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
     font-size: 0.8rem;
}

.blog-tag-pill  {
     border-radius: var(--radius-pill);
     padding: 0.15rem 0.6rem;
     font-size: 0.72rem;
     font-weight: 600;
}

.blog-read-time  {
     color: var(--text-muted);
     margin-left: auto;
}

.blog-title a  {
     color: var(--text-primary);
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 1rem;
}

.blog-title a:hover  {
     color: var(--primary);
}

.blog-excerpt  {
     font-size: 0.875rem;
     color: var(--text-secondary);
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.blog-author, .blog-date  {
     font-size: 0.8rem;
     color: var(--text-muted);
}

.btn-read-more  {
     display: inline-block;
     color: var(--primary);
     font-size: 0.875rem;
     font-weight: 600;
     border: none;
     background: none;
     padding: 0;
}

.btn-read-more:hover  {
     opacity: 0.8;
}


/* ─── Contact ───────────────────────────────── */
.contact-info {
     display: flex;
     flex-direction: column;
     width: 100%;
}

.contact-profile-card {
     display: flex;
     align-items: center;
     gap: 1rem;
}

.contact-profile-avatar,
.contact-profile-avatar-img {
     width: 68px;
     height: 68px;
     border-radius: 50%;
     flex-shrink: 0;
}

.contact-profile-avatar {
     background: var(--gradient);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: #fff;
     font-size: 1.4rem;
}

.contact-profile-avatar-img {
     object-fit: cover;
     /* Same border + glow treatment as the hero's profile photo
        (.home-profile-img), just scaled down to card size — no pulsing
        rings here since those are sized for the much larger hero avatar. */
     border: 3px solid var(--primary);
     box-shadow: 0 0 0 5px rgba(0,212,255,0.1), var(--shadow-glow);
}

.contact-profile-name {
     display: block;
     font-size: 0.95rem;
     font-weight: 600;
     color: var(--text-primary);
}

.contact-profile-name .about-verified-badge {
     /* Smaller than the About heading's badge — this card's name is a
        smaller font, so the icon is scaled down to match proportionally. */
     font-size: 0.85rem;
}

.contact-profile-typed {
     display: block;
     font-size: 0.78rem;
     color: var(--primary);
     min-height: 1.1em;
}

.contact-info-card  {
     display: flex;
     align-items: center;
     gap: 1rem;
     position: relative;
}

.contact-info-card > i  {
     font-size: 1.25rem;
     color: var(--primary);
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0,212,255,0.1);
     border-radius: 50%;
     flex-shrink: 0;
}

.contact-info-card > div {
     /* Clears space for the copy button that appears top-right on hover,
        so a long value never sits underneath it. */
     padding-right: 2rem;
     min-width: 0;
}

.contact-copy-btn {
     position: absolute;     top: 10px;
     right: 10px;
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: 1px solid var(--card-border);
     background: var(--bg-surface);
     color: var(--text-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.7rem;
     cursor: pointer;
     opacity: 0;
     transform: translateY(-2px);
     transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-info-card:hover .contact-copy-btn {
     opacity: 1;
     transform: translateY(0);
}

.contact-copy-btn:hover {
     border-color: var(--primary);
     color: var(--primary);
}

.contact-copy-btn.is-copied {
     opacity: 1;
     border-color: var(--success);
     color: var(--success);
}

@media (hover: none) {
     /* Touch devices have no hover — reveal the copy button on tap
        instead (JS toggles .is-tapped on the card), rather than showing
        it permanently on every card. */
     .contact-info-card.is-tapped .contact-copy-btn {
         opacity: 1;
         transform: none;
    }
}

.contact-info-card span  {
     display: block;
     font-size: 0.75rem;
     color: var(--text-muted);
}

.contact-info-card a, .contact-info-card span:last-child  {
     /* Explicit font-size here (not inherited) because the value is an
        <a> for items with a link (Email, Phone, WhatsApp, Website) but a
        plain <span> for items without one (Location) — without this, the
        <span> version fell back to the .contact-info-card span rule
        above (the label's small 0.75rem size), making Location's value
        visibly smaller than every other card's value. */
     display: block;
     font-size: 0.9rem;
     color: var(--text-primary);
     font-weight: 500;
}

.contact-socials  {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: auto;
}

.custom-input  {
     background: rgba(255,255,255,0.04) !important;
     border: 1px solid var(--card-border) !important;
     color: var(--text-primary) !important;
     border-radius: var(--radius-sm) !important;
     padding: 0.75rem 1rem !important;
     transition: var(--transition) !important;
}

.custom-input:focus  {
     border-color: var(--primary) !important;
     box-shadow: 0 0 0 3px rgba(0,212,255,0.1) !important;
     background: rgba(0,212,255,0.03) !important;
     outline: none !important;
}

.custom-input::placeholder  {
     color: var(--text-muted) !important;
}

[data-theme="light"] .custom-input  {
     background: rgba(0,0,0,0.04) !important;
}

/* Input field leading icons (Name / Email / Subject) */
.input-icon-wrap {
     position: relative;
}

.input-icon-wrap .input-icon {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-muted);
     font-size: 0.9rem;
     pointer-events: none;
     transition: color 0.2s ease;
}

.input-icon-wrap .custom-input.has-icon {
     padding-left: 2.6rem !important;
}

.input-icon-wrap:focus-within .input-icon {
     color: var(--primary);
}

/* Inline "Thank you" success card — swaps in for the whole field area
   after a successful submit, then automatically swaps back. */
.contact-form-success {
     text-align: center;
     padding: 3rem 1rem;
     animation: contactSuccessPop 0.4s ease-out;
}

.contact-form-success-icon {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: rgba(16,185,129,0.12);
     color: var(--success);
     font-size: 1.6rem;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.25rem;
}

.contact-form-success h4 {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
}

.contact-form-success p {
     color: var(--text-secondary);
     font-size: 0.9rem;
     margin: 0;
}

@keyframes contactSuccessPop {
     from { opacity: 0; transform: scale(0.94); }
     to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════
   CONTACT FORM — premium card (scoped to .contact-form so the
   footer newsletter / other .custom-input users are untouched).
   Theme-aware: all colors come from tokens + 4 local variables.
   ══════════════════════════════════════════════════════════ */
.contact-form {
     --cf-field-bg: rgba(255,255,255,0.04);
     --cf-field-bg-focus: rgba(0,212,255,0.05);
     --cf-field-border: rgba(255,255,255,0.10);
     --cf-card-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
     position: relative;
     display: flex;
     flex-direction: column;
     gap: clamp(1.1rem, 2.5vw, 1.6rem);
     padding: clamp(1.25rem, 4vw, 2.5rem);
     border-radius: 20px;
     overflow: hidden;
     background:
          linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 38%),
          var(--card-bg);
     box-shadow: var(--cf-card-shadow);
}

[data-theme="light"] .contact-form {
     --cf-field-bg: #F8FAFC;
     --cf-field-bg-focus: #FFFFFF;
     --cf-field-border: #E2E8F0;
     --cf-card-shadow: 0 30px 60px -30px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.04);
     background: #FFFFFF;
}

/* gradient accent line + soft corner glow */
.contact-form::before {
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
     height: 3px;
     background: var(--gradient);
     pointer-events: none;
}

.contact-form::after {
     content: "";
     position: absolute;
     top: -90px;
     right: -90px;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0,212,255,0.16), rgba(123,47,190,0.08) 55%, transparent 70%);
     pointer-events: none;
}

[data-theme="light"] .contact-form::after {
     background: radial-gradient(circle, rgba(0,212,255,0.14), rgba(123,47,190,0.06) 55%, transparent 70%);
}

.contact-form > * {
     position: relative;
     z-index: 1;
}

/* a form should not lift away from the cursor like a clickable card */
.contact-form.glass-card:hover {
     transform: none;
     border-color: var(--card-border);
     box-shadow: var(--cf-card-shadow);
}

/* heading */
.cf-head {
     display: flex;
     align-items: center;
     gap: 0.9rem;
     padding-bottom: clamp(1rem, 2.5vw, 1.4rem);
     border-bottom: 1px solid var(--card-border);
}

.cf-head-icon {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.05rem;
     background: var(--gradient);
     box-shadow: 0 8px 20px rgba(0,212,255,0.28);
}

.cf-head-text {
     min-width: 0;
}

.cf-title {
     font-family: var(--font-heading);
     font-size: clamp(1.1rem, 2.6vw, 1.35rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0;
     line-height: 1.3;
}

.cf-sub {
     font-size: 0.85rem;
     color: var(--text-secondary);
     margin: 0.15rem 0 0;
     line-height: 1.5;
}

/* layout: stacked fields, message grows to fill leftover card height */
.cf-fields {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     min-height: 0;
}

.cf-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.5rem 1.25rem;
}

.cf-field {
     min-width: 0;
}

.cf-field--message {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
}

/* labels + counters */
.contact-form .form-label {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     color: var(--text-secondary);
     margin-bottom: 0.5rem;
}

.cf-req {
     color: var(--primary);
     font-weight: 700;
}

.contact-form .char-count {
     float: none;
     margin-left: auto;
     opacity: 1;
     font-size: 0.7rem;
     font-weight: 500;
     font-variant-numeric: tabular-nums;
     line-height: 1;
     padding: 0.3rem 0.55rem;
     border-radius: 999px;
     color: var(--text-muted);
     background: rgba(148,163,184,0.14);
}

/* fields */
.contact-form .custom-input {
     min-height: 3.25rem;
     padding: 0.85rem 1.05rem !important;
     border-radius: 14px !important;
     font-size: 0.95rem;
     background: var(--cf-field-bg) !important;
     border: 1px solid var(--cf-field-border) !important;
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

.contact-form .input-icon-wrap .custom-input.has-icon {
     padding-left: 2.9rem !important;
}

.contact-form .input-icon-wrap .input-icon {
     left: 1.05rem;
     font-size: 0.95rem;
}

.contact-form .custom-input:hover {
     border-color: rgba(0,212,255,0.4) !important;
}

.contact-form .custom-input:focus {
     background: var(--cf-field-bg-focus) !important;
     border-color: var(--primary) !important;
     box-shadow: 0 0 0 4px rgba(0,212,255,0.15) !important;
}

.contact-form .custom-input.is-valid {
     border-color: #22c55e !important;
     box-shadow: 0 0 0 4px rgba(34,197,94,0.12) !important;
}

.contact-form .custom-input.is-invalid {
     border-color: #e0345c !important;
     box-shadow: 0 0 0 4px rgba(224,52,92,0.12) !important;
}

.contact-form textarea.auto-expand {
     flex: 1 1 auto;
     min-height: 10.5rem;
     line-height: 1.6;
     overflow-y: auto !important;
}

.contact-form .field-error {
     min-height: 1.15rem;
     margin-top: 0.3rem;
     font-size: 0.78rem;
}

/* send button */
.cf-actions {
     margin-top: 0.25rem;
}

.contact-form .cf-submit {
     position: relative;
     overflow: hidden;
     min-height: 3.5rem;
     font-size: 1rem;
     letter-spacing: 0.01em;
     box-shadow: 0 10px 28px -6px rgba(0,212,255,0.45);
}

.contact-form .cf-submit::after {
     content: "";
     position: absolute;
     top: 0;
     left: -70%;
     width: 50%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
     transform: skewX(-20deg);
     transition: left 0.7s ease;
     pointer-events: none;
}

.contact-form .cf-submit:hover::after {
     left: 130%;
}

.contact-form .cf-submit #submitText i {
     transition: transform 0.3s ease;
}

.contact-form .cf-submit:hover #submitText i {
     transform: translate(3px, -2px) rotate(-8deg);
}

.contact-form .cf-submit:focus-visible {
     outline: 3px solid var(--primary);
     outline-offset: 3px;
}

.contact-form .contact-spam-note {
     margin-top: 1rem;
     text-align: center;
}

/* success state fills the card and centres itself */
.contact-form .contact-form-success {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2rem 1rem;
}

.contact-form .contact-form-success-icon {
     box-shadow: 0 0 0 10px rgba(16,185,129,0.08);
}

@media (max-width: 575.98px) {
     .cf-row {
         grid-template-columns: minmax(0, 1fr);
     }
     .cf-head-icon {
         width: 42px;
         height: 42px;
         border-radius: 12px;
     }
     .contact-form::after {
         width: 180px;
         height: 180px;
         top: -70px;
         right: -70px;
     }
}

@media (prefers-reduced-motion: reduce) {
     .contact-form .cf-submit::after,
     .contact-form .cf-submit #submitText i {
         transition: none;
     }
     .contact-form .cf-submit:hover #submitText i {
         transform: none;
     }
}

textarea.auto-expand {
     overflow: hidden !important;
     resize: none !important;
     transition: height 0.15s ease !important;
}

.char-count  {
     font-size: 0.75rem;
     color: var(--text-muted);
     float: right;
}

.form-label  {
     color: var(--text-secondary);
     font-size: 0.875rem;
     font-weight: 500;
     margin-bottom: 0.4rem;
}


/* ─── Footer ────────────────────────────────── */
.footer  {
     background: var(--footer-bg);
     border-top: 1px solid var(--card-border);
}

@media (min-width: 992px) {
     /* Thin vertical dividers between the three footer columns — only
        applied once Bootstrap actually lays them out side-by-side
        (col-lg-4); below that breakpoint the columns stack, so a left
        border here would just show up as a stray line above each one. */
     .footer-columns > [class^="col-"] + [class^="col-"] {
         border-left: 1px solid var(--card-border);
    }
}

.footer-heading  {
     font-family: var(--font-heading);
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
}

.footer-links-cols  {
     display: flex;
     gap: 1.75rem;
}

.footer-links  {
     list-style: none;
     margin: 0;
     padding: 0;
}

.footer-links li  {
     margin-bottom: 0.5rem;
}

.footer-links a  {
     color: var(--text-secondary);
     font-size: 0.875rem;
     transition: var(--transition);
}

.footer-links a:hover  {
     color: var(--primary);
     padding-left: 4px;
}

.footer-contact-list li  {
     color: var(--text-secondary);
     font-size: 0.875rem;
     margin-bottom: 0.5rem;
     display: flex;
     align-items: center;
}

.footer-contact-list a  {
     color: var(--text-secondary);
}

.footer-contact-list a:hover  {
     color: var(--primary);
}

.footer-contact-list i  {
     color: var(--primary);
}

/* Footer newsletter signup */
.footer-newsletter-label {
     display: block;
     font-size: 0.78rem;
     color: var(--text-muted);
     margin-bottom: 0.6rem;
}

.footer-newsletter-stack {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

.footer-newsletter-stack .custom-input {
     width: 100%;
     padding: 0.6rem 0.85rem !important;
     font-size: 0.85rem !important;
}

.footer-newsletter-stack .input-icon-wrap .custom-input.has-icon {
     padding-left: 2.4rem !important;
}

.footer-newsletter-stack .input-icon-wrap .input-icon {
     left: 0.85rem;
     font-size: 0.85rem;
}

.footer-newsletter-btn {
     width: 100%;
     white-space: nowrap;
     padding: 0.6rem 1.1rem !important;
     font-size: 0.8rem;
     position: relative;
     overflow: hidden;
}

/* Cloned paper-plane launched by launchFooterPlane() in main.js — absolutely
   positioned inside the footer element only, so it loops within the footer
   area and never leaves it, then returns to the button and fades out.
   --fp-x1/--fp-y1/--fp-r1 (loop-out point) and --fp-x2/--fp-y2/--fp-r2
   (loop-back point) are set inline per launch. */
.footer-plane-flyer {
     position: absolute;
     top: 0;
     left: 0;
     color: var(--primary);
     font-size: 1.4rem;
     pointer-events: none;
     z-index: 10;
     opacity: 0;
     transform: translate(0, 0) scale(0.6) rotate(0deg);
     filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
     will-change: transform, opacity;
}

.footer-plane-flyer-fly {
     animation: footer-plane-fly 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes footer-plane-fly {
     0%   { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0; }
     12%  { opacity: 1; }
     40%  { transform: translate(var(--fp-x1), var(--fp-y1)) scale(1.3) rotate(var(--fp-r1)); opacity: 1; }
     70%  { transform: translate(var(--fp-x2), var(--fp-y2)) scale(1.3) rotate(var(--fp-r2)); opacity: 1; }
     88%  { opacity: 1; }
     100% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0; }
}

.footer-newsletter-msg {
     font-size: 0.78rem;
     color: var(--success);
     margin-top: 0.5rem;
     min-height: 1.1em;
}

.footer-newsletter-msg.is-error {
     color: #e0345c;
}

/* Subscribe button loading state — shimmer sweep + spinner while the
   request is in flight, so submitting the form gives clear feedback
   instead of looking frozen for the round trip. */
.footer-newsletter-btn.is-loading {
     opacity: 0.9;
     cursor: wait;
     pointer-events: none;
}

.footer-newsletter-btn.is-loading::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
     transform: translateX(-100%);
     animation: footerNewsletterShimmer 1.1s ease-in-out infinite;
}

@keyframes footerNewsletterShimmer {
     100% { transform: translateX(100%); }
}

/* Subscribe button success animation — brief green pop + checkmark */
.footer-newsletter-btn.is-success {
     background: var(--success) !important;
     border-color: var(--success) !important;
     animation: footerNewsletterPop 0.4s ease;
}

@keyframes footerNewsletterPop {
     0%   { transform: scale(1); }
     40%  { transform: scale(1.08); }
     100% { transform: scale(1); }
}

.footer-bottom  {
     border-top: 1px solid var(--card-border);
     padding: 1.5rem 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
     font-size: 0.875rem;
     color: var(--text-muted);
}

.footer-brand  {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
}

.footer-brand .brand-name  {
     margin-left: 0;
}

.footer-logo-img  {
     height: 40px;
     width: auto;
     max-width: 160px;
     object-fit: contain;
     vertical-align: middle;
}

.footer-tagline  {
     color: var(--text-secondary);
     font-size: 0.875rem;
}

.footer-socials  {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
}


/* ─── Back to Top ───────────────────────────── */
#back-to-top  {
     position: fixed;
     bottom: calc(2rem + env(safe-area-inset-bottom));
     right: calc(2rem + env(safe-area-inset-right));
     width: 48px;
     height: 48px;
     background: var(--gradient);
     color: #fff;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 999;
     box-shadow: 0 4px 15px rgba(0,212,255,0.4);
     transition: var(--transition);
     font-size: 1rem;
}

#back-to-top.visible  {
     display: flex;
}

#back-to-top:hover  {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0,212,255,0.5);
}

@media (max-width: 767.98px)  {
     /* Smaller + tucked closer to the corner on mobile so the fixed
        button never sits on top of the footer's Subscribe button when
        the page is scrolled all the way to the bottom. */
     #back-to-top  {
         width: 40px;
         height: 40px;
         bottom: calc(1rem + env(safe-area-inset-bottom));
         right: calc(1rem + env(safe-area-inset-right));
         font-size: 0.85rem;
    }
     .footer  {
         padding-bottom: 56px;
    }
}


/* ─── Toast ─────────────────────────────────── */
.custom-toast  {
     background: var(--card-bg);
     backdrop-filter: var(--blur);
     border: 1px solid var(--card-border);
     border-radius: var(--radius);
     padding: 1rem 1.25rem;
     min-width: 280px;
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-top: 0.5rem;
     animation: slideIn 0.3s ease;
}

.custom-toast.success  {
     border-left: 4px solid var(--success);
}

.custom-toast.error  {
     border-left: 4px solid var(--danger);
}

.custom-toast.success i  {
     color: var(--success);
}

.custom-toast.error i  {
     color: var(--danger);
}

@keyframes slideIn  {
     from  {
         transform: translateX(100%);
         opacity: 0;
    }
     to  {
         transform: translateX(0);
         opacity: 1;
    }
}


/* ─── Responsive ────────────────────────────── */
@media (max-width: 991.98px)  {
    
  .section-padding  {
         padding: 70px 0;
    }
    
  .about-info-grid  {
         grid-template-columns: 1fr;
    }
    
  #navbarNav  {
         background: var(--card-bg);
         backdrop-filter: var(--blur);
         border: 1px solid var(--card-border);
         border-radius: var(--radius);
         padding: 1rem;
         margin-top: 1rem;
    }
}

@media (max-width: 767.98px)  {
    
  .section-padding  {
         padding: 60px 0;
    }
    
  .home-profile-img  {
         width: 220px;
         height: 220px;
    }
    
  .skills-grid  {
         grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    
  .resume-tabs  {
         gap: 0.3rem;
    }
    
  .resume-tab  {
         padding: 0.4rem 0.75rem;
         font-size: 0.8rem;
    }
    
  .cert-grid  {
         grid-template-columns: 1fr 1fr;
    }
    
  .footer-bottom  {
         flex-direction: column;
         text-align: center;
    }
    
  .about-info-grid  {
         grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px)  {
    
  .home-name  {
         font-size: 2rem;
    }
    
  .cert-grid  {
         grid-template-columns: 1fr;
    }
    
  .stats-row  {
         grid-template-columns: repeat(2, 1fr);
    }
    
  .gallery-preview-grid  {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
    }
}

@media (min-width: 2560px)  {
    
  .container  {
         max-width: 1800px;
    }
}


/* ─── Blog & Portfolio Pages ────────────────── */
.page-hero  {
     padding: 120px 0 60px;
     background: var(--bg-surface);
     border-bottom: 1px solid var(--card-border);
}

.page-hero h1  {
     font-family: var(--font-heading);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
}

.breadcrumb-item, .breadcrumb-item a  {
     color: var(--text-muted);
     font-size: 0.875rem;
}

.breadcrumb-item.active  {
     color: var(--primary);
}

.breadcrumb-divider  {
     color: var(--text-muted);
}

.pagination .page-link  {
     background: var(--card-bg);
     border-color: var(--card-border);
     color: var(--text-secondary);
     border-radius: var(--radius-sm) !important;
     margin: 0 2px;
}

.pagination .page-link:hover, .pagination .page-item.active .page-link  {
     background: var(--gradient);
     border-color: transparent;
     color: #fff;
}


/* Language switcher — added in Milestone 6, kept minimal to sit quietly in the navbar */
.lang-switcher {
    
  background:transparent;
     border:1px solid rgba(255,255,255,.15);
     color:inherit;
    
  border-radius:6px;
     padding:4px 8px;
     font-size:12.5px;
     cursor:pointer;
}


/* Milestone: full-task-completion — Services, Gallery, Blog sections */
.service-card {
     height:auto;
     align-self:flex-start;
     cursor:pointer;
     transition: transform .25s ease;
}

.service-card:focus-visible {
     outline:2px solid var(--primary,#00D4FF);
     outline-offset:2px;
}

.service-card:hover {
     transform: translateY(-4px);
}

.service-icon {
     font-size: 2rem;
     background:linear-gradient(135deg,var(--primary,#00D4FF),var(--secondary,#7B2FBE));
    
  -webkit-background-clip:text;
     background-clip:text;
     color:transparent;
}

.gallery-item {
     overflow:hidden;
     position:relative;
     border-radius:12px;
}

.gallery-img {
     width:100%;
     height:160px;
     object-fit:cover;
     display:block;
}

.gallery-caption {
     position:absolute;
     bottom:0;
     left:0;
     right:0;
     padding:8px 10px;
     font-size:11.5px;
    
  background:linear-gradient(0deg, rgba(0,0,0,.7), transparent);
     color:#fff;
}

.blog-card-link {
     text-decoration:none;
     color:inherit;
     display:block;
}

.blog-card {
     overflow:hidden;
     height:100%;
}

.blog-thumb {
     width:100%;
     height:160px;
     object-fit:cover;
     display:block;
}

.blog-card h6 {
     margin-top:4px;
}


/* ---- Accessibility (WCAG pass) ---- */
.skip-to-content {
    
  position:absolute;
     left:-999px;
     top:auto;
     width:1px;
     height:1px;
     overflow:hidden;
    
  z-index:9999;
     background:#00D4FF;
     color:#0A0E1A;
     padding:12px 20px;
     border-radius:0 0 8px 0;
    
  font-weight:600;
     text-decoration:none;
}

.skip-to-content:focus {
    
  left:0;
     top:0;
     width:auto;
     height:auto;
     overflow:visible;
}

/* Visible focus outline for keyboard navigation — many dark themes accidentally
   suppress the default outline;
 this restores a clearly visible one everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    
  outline:2px solid #00D4FF;
     outline-offset:2px;
}

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

/* ══════════════════════════════════════════════════════════
   FULL RESPONSIVE HARDENING — mobile-first, all breakpoints
   Added on top of existing styles; no visual redesign, only
   fixes overflow / spacing / grid-collapse for small screens
   and implements the fixed(desktop) / auto-hide(mobile) navbar.
   ══════════════════════════════════════════════════════════ */

html, body {
     max-width: 100%;
     overflow-x: hidden;
}

* { min-width: 0; }

img, svg, video, canvas, iframe {
     max-width: 100%;
     height: auto;
}

.container, .container-fluid {
     width: 100%;
     padding-left: 16px;
     padding-right: 16px;
}

.row {
     margin-left: 0;
     margin-right: 0;
}

/* ---- Navbar: fixed always on desktop/tablet, auto-hide on mobile ---- */
#mainNav {
     left: 0;
     right: 0;
     width: 100%;
     will-change: transform;
     transition: transform 0.35s ease, background 0.3s, padding 0.3s, box-shadow 0.3s;
     /* iPhone notch / Dynamic Island: keep the nav content clear of the
        status-bar cutout instead of sitting under it (viewport-fit=cover
        makes env(safe-area-inset-*) meaningful; 0 on non-notch devices). */
     padding-top: max(1rem, env(safe-area-inset-top));
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
}

#mainNav.scrolled {
     padding-top: max(0.5rem, env(safe-area-inset-top));
}

/* ---- Scroll progress indicator: thin line at the navbar's bottom edge
   showing how far down the current page the visitor has scrolled ---- */
.scroll-progress-bar {
     position: absolute;
     left: 0;
     bottom: 0;
     height: 3px;
     width: 0%;
     background: var(--gradient, linear-gradient(90deg, #00D4FF, #6C5CE7));
     transform-origin: left center;
     transition: width 0.1s linear;
     z-index: 1;
     pointer-events: none;
}

@media (max-width: 991.98px) {
     #mainNav.nav-hidden {
         transform: translateY(-100%);
    }
     #mainNav.nav-visible {
         transform: translateY(0);
    }
     #navbarNav {
         max-height: 80vh;
         overflow-y: auto;
    }

     /* On mobile the navbar auto-hides/shows on scroll, so it always needs a
        solid background (matching the existing .scrolled look) — otherwise
        it's transparent at the top and visually blends into the page. */
     #mainNav {
         background: rgba(10,14,26,0.9);
         backdrop-filter: var(--blur);
         border-bottom: 1px solid var(--card-border);
         box-shadow: var(--shadow);
    }

     [data-theme="light"] #mainNav {
         background: rgba(248,250,252,0.9);
    }
}

@media (min-width: 1400px) {
     .container {
         max-width: 1320px;
    }
}

@media (max-width: 1199.98px) {
     .section-padding {
         padding: 85px 0;
    }
}

@media (max-width: 991.98px) {
     .home-section {
         text-align: center;
         padding-top: calc(90px + env(safe-area-inset-top));
         padding-bottom: 2.5rem;
    }
     .home-image-wrapper {
         margin-top: 2rem;
    }
     .stats-row {
         grid-template-columns: repeat(2, 1fr);
    }
     .skills-grid {
         grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
     .about-img-wrapper {
         height: auto;
         justify-content: center;
    }
     .about-profile-img {
         width: auto;
         max-width: 100%;
         height: auto;
         min-height: 0;
         max-height: 420px;
         object-fit: contain;
    }

     /* Hero layout on mobile/tablet: profile photo first (right under the
        navbar), text content below it; greeting/typed-line/tech-badges are
        left-aligned, tagline stays justified. Desktop layout untouched. */
     .home-image-col {
         order: -1;
         margin-top: 0 !important;
         margin-bottom: 2rem;
    }
     .home-image-wrapper {
         /* Ring-3 (the outermost pulsing ring) extends -45px above the
            photo itself, which previously poked up under the fixed navbar.
            Push the wrapper down enough that even the outermost ring
            clears the navbar instead of overlapping it. */
         margin-top: 52px;
    }
     .home-text {
         text-align: left;
    }
     .home-greeting,
     .home-name {
         text-align: left;
    }
     .home-typed-wrapper {
         text-align: left;
         white-space: normal;
    }
     .typed-prefix {
         margin-right: 0.35em;
    }
     .home-tagline {
         text-align: justify;
    }
     .home-tech-badges {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: flex-start;
         text-align: left;
         gap: 0.5rem;
    }
     .home-cta,
     .home-socials {
         justify-content: flex-start;
    }
     /* Download CV + Contact Me: keep on one row on phones instead of
        stacking — shrink padding/font just enough for both to fit, each
        taking an equal share of the row. */
     .home-cta {
         flex-wrap: nowrap;
         gap: 10px;
    }
     .home-cta .btn-primary-custom,
     .home-cta .btn-outline-custom {
         flex: 1 1 0;
         padding: 0.7rem 0.5rem;
         font-size: 0.85rem;
         white-space: nowrap;
         display: inline-flex;
         align-items: center;
         justify-content: center;
    }
     .home-cta .btn-primary-custom i,
     .home-cta .btn-outline-custom i {
         margin-right: 6px;
    }
     /* Scroll-down indicator: on mobile the hero content is taller than
        the viewport, so an absolutely-positioned "bottom: 2rem" indicator
        ends up floating next to the social icons instead of below them.
        Pull it into normal document flow, right after the socials, and
        center it as its own line. */
     .scroll-indicator {
         position: static;
         transform: none;
         margin: 1.75rem auto 0;
         display: flex;
         justify-content: center;
         width: 100%;
    }
     .navbar-brand .brand-name {
         font-size: 1rem;
    }
}

@media (max-width: 767.98px) {
     .container, .container-fluid {
         padding-left: 14px;
         padding-right: 14px;
    }
     h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
     h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
     h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
     .home-tagline {
         text-align: justify;
    }
     .tech-badge {
         font-size: 0.85rem;
    }
     .social-icon {
         width: 44px;
         height: 44px;
         font-size: 1.05rem;
    }
     .filter-btn {
         padding: 0.4rem 1rem;
         font-size: 0.8rem;
    }
     table {
         display: block;
         width: 100%;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
     .container, .container-fluid {
         padding-left: 12px;
         padding-right: 12px;
    }
     .home-profile-img {
         width: 180px;
         height: 180px;
    }
     .about-profile-img {
         width: 100%;
         max-width: 260px;
         min-height: 0;
         height: auto;
         object-fit: contain;
    }
     .about-cta {
         gap: 0.75rem !important;
    }
     .about-cta-buttons {
         gap: 0.75rem !important;
    }
     .see-more-btn {
         padding: 0.5rem 1.05rem;
         font-size: 0.85rem;
    }
     .skills-grid {
         grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    }
     .stat-item {
         padding: 1.25rem 0.75rem;
    }
     .stat-number {
         font-size: 2rem;
    }
     .theme-toggle {
         width: 36px;
         height: 36px;
    }
     .navbar-brand .brand-monogram {
         font-size: 1.2rem;
    }
     .brand-logo-img {
         height: calc(var(--logo-h, 38px) * 0.8);
         max-height: 34px;
    }
     .resume-tabs {
         gap: 0.4rem;
    }
     .resume-tab {
         padding: 0.5rem 0.85rem;
         font-size: 0.8rem;
    }
     .timeline-company-header-left {
         gap: 0.6rem;
    }
     .timeline-company-logo-lg,
     .timeline-company-logo-fallback {
         width: 38px;
         height: 38px;
    }
     .timeline-company-block-name {
         font-size: 0.95rem;
    }
     .timeline-company-duration-pill {
         font-size: 0.68rem;
         padding: 0.15rem 0.6rem;
    }
     .timeline-company-header.timeline-company-header-inline {
         padding-bottom: 1rem;
    }
     .timeline-card {
         padding: 1.1rem;
    }
    /* Same centering formula as the base rule (card padding-top + half
       the title's line-height), recomputed for the 1.1rem card padding
       used on mobile — keeps the dot level with the title on every
       screen size instead of drifting once the card padding shrinks. */
     .timeline-dot {
         top: calc(1.1rem + 0.66rem);
    }
     .timeline-badge-col {
         align-items: flex-start;
    }
}

@media (max-width: 380px) {
     .container, .container-fluid {
         padding-left: 10px;
         padding-right: 10px;
    }
     .home-profile-img {
         width: 150px;
         height: 150px;
    }
     .skills-grid {
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
     .stats-row {
         grid-template-columns: 1fr 1fr;
    }
     .tech-badge {
         font-size: 0.78rem;
         padding: 0.4rem 0.4rem;
    }
     .skill-filter-tabs .filter-btn  {
         font-size: 0.8rem;
         padding: 0.6rem 1.1rem;
         display: inline-flex;
         align-items: center;
         line-height: 1;
    }
     .cert-grid {
         grid-template-columns: 1fr !important;
    }
     .gallery-preview-grid {
         grid-template-columns: 1fr !important;
         gap: 12px !important;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
     .home-section {
         min-height: auto;
         padding: calc(90px + env(safe-area-inset-top)) 0 40px;
    }
}

/* ══════════════════════════════════════════════════════════
   SKELETON LOADER — shown inside #page-loader while first paint loads
   ══════════════════════════════════════════════════════════ */
.loader-skeleton {
     margin-top: 22px;
     width: 220px;
}

.skeleton-bar {
     height: 10px;
     border-radius: 6px;
     margin: 10px auto;
     background: linear-gradient(90deg, var(--card-border) 25%, var(--card-bg) 37%, var(--card-border) 63%);
     background-size: 400% 100%;
     animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-w-60 { width: 60%; }
.skeleton-w-40 { width: 40%; }
.skeleton-w-80 { width: 80%; }

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

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE — smooth cross-fade on switch + icon flip
   ══════════════════════════════════════════════════════════ */
/* Theme switch uses the View Transitions API: the browser cross-fades a
   snapshot of the old theme into the live new theme, so nothing jumps or
   shakes (the old per-element colour transitions overrode transform/AOS
   transitions and made content jitter). While the switch runs, element
   transitions are suspended so every colour changes in perfect sync. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
     transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
     animation-duration: 0.45s;
     animation-timing-function: ease;
     mix-blend-mode: normal;
}


#themeIcon {
     display: inline-block;
     transition: transform 0.3s ease;
}

.theme-icon-flip {
     animation: theme-icon-flip-anim 0.4s ease;
}

@keyframes theme-icon-flip-anim {
     0%   { transform: rotate(0deg) scale(1); }
     50%  { transform: rotate(180deg) scale(0.7); }
     100% { transform: rotate(360deg) scale(1); }
}

/* ══════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — subtle premium hover/press feedback
   (does not alter existing colors/design, only motion/depth)
   ══════════════════════════════════════════════════════════ */
.btn, .btn-primary-custom, .btn-outline-custom, .hire-btn, .filter-btn, .social-icon {
     transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover, .btn-primary-custom:hover, .btn-outline-custom:hover, .hire-btn:hover, .social-icon:hover {
     transform: translateY(-3px);
}

.btn:active, .btn-primary-custom:active, .btn-outline-custom:active, .hire-btn:active, .filter-btn:active {
     transform: translateY(0) scale(0.97);
}

.glass-card, .skill-card, .service-card, .project-card, .blog-card, .cert-card, .stat-item {
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover, .skill-card:hover, .service-card:hover, .project-card:hover, .blog-card:hover, .cert-card:hover {
     transform: translateY(-6px);
}

.gallery-preview-item img {
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-preview-item:hover img {
     transform: scale(1.12) rotate(1deg);
}

@media (prefers-reduced-motion: reduce) {
     .btn, .btn-primary-custom, .btn-outline-custom, .hire-btn, .filter-btn, .social-icon,
     .glass-card, .skill-card, .service-card, .project-card, .blog-card, .cert-card, .stat-item,
     .gallery-preview-item img, #themeIcon {
         transition: none !important;
         animation: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
         animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   CONTACT FORM — real-time inline validation states
   ══════════════════════════════════════════════════════════ */
.custom-input.is-invalid {
     border-color: #e0345c !important;
     box-shadow: 0 0 0 3px rgba(224, 52, 92, 0.15);
}

.custom-input.is-valid {
     border-color: #22c55e !important;
     box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.field-error {
     display: block;
     min-height: 18px;
     margin-top: 4px;
     font-size: 0.8rem;
     color: #e0345c;
}

.char-count {
     font-size: 0.75rem;
     font-weight: 400;
     opacity: 0.7;
     margin-left: 6px;
}

/* Spam-protection note under the Send button */
.contact-spam-note {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     font-size: 0.75rem;
     color: var(--text-muted);
     margin: 0.75rem 0 0;
}

.contact-spam-note i {
     color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   404 / 500 ERROR PAGES — responsive fluid type + subtle fade-in
   ══════════════════════════════════════════════════════════ */
.error-page h1,
.error-page .error-code {
     font-size: clamp(3.5rem, 16vw, 8rem);
     line-height: 1;
}

.error-page {
     animation: error-fade-in 0.6s ease;
}

@keyframes error-fade-in {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
     .error-page .btn {
         width: 100%;
    }
     .footer-links-cols {
         /* Keep the 2-column layout on narrow phones too, matching desktop —
            just tighten the gap so both lists fit comfortably. */
         gap: 1rem;
    }
     .footer-links-cols .footer-links {
         flex: 1 1 0;
         min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE FORM-INPUT SAFETY NET — iOS Safari auto-zooms the whole page
   when a focused input/select/textarea computes to under 16px, which
   feels like a bug even though it's "working as designed" on Apple's
   side. Force every text-entry control site-wide to at least 16px on
   phone-width screens so focusing any field never triggers that zoom.
   This also covers the two currently-unstyled elements below (blog
   newsletter box + article sort/series <select>) which had no font-size
   rule of their own and were inheriting the browser's small ~13px UA
   default — themed to match the rest of the site while we're at it.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
     input, textarea, select,
     .custom-input, .form-control,
     .blog-sort-select,
     .newsletter-box input {
         font-size: 16px !important;
    }
}

.newsletter-box input[type="email"],
.newsletter-box input[type="text"] {
     width: 100%;
     background: rgba(255,255,255,0.04);
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     border-radius: var(--radius-sm);
     padding: 0.7rem 0.9rem;
     margin-bottom: 0.6rem;
     transition: var(--transition);
}
[data-theme="light"] .newsletter-box input[type="email"],
[data-theme="light"] .newsletter-box input[type="text"] {
     background: rgba(0,0,0,0.04);
}
.newsletter-box input[type="email"]:focus,
.newsletter-box input[type="text"]:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
     outline: none;
}
.newsletter-box button[type="submit"] {
     width: 100%;
     background: var(--gradient);
     color: #fff;
     border: none;
     border-radius: var(--radius-sm);
     padding: 0.7rem 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
}
.newsletter-box button[type="submit"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0,212,255,0.25);
}

.blog-sort-select {
     background: rgba(255,255,255,0.04);
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     border-radius: var(--radius-sm);
     padding: 0.55rem 0.9rem;
     cursor: pointer;
     transition: var(--transition);
}
[data-theme="light"] .blog-sort-select {
     background: rgba(0,0,0,0.04);
}
.blog-sort-select:focus {
     border-color: var(--primary);
     outline: none;
}

/* ══════════════════════════════════════════════════════════
   LONG-TEXT / BADGE SAFETY NET — pills built for short labels
   (duration ranges, cert meta, award years) can still receive long
   free-text from the CMS. Rather than letting a long value force
   horizontal overflow on a narrow phone, let these specific badges
   wrap onto a second line below ~400px, and make sure their parent
   rows can wrap too instead of squeezing everything onto one line.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
     .timeline-badge,
     .timeline-company-duration-pill,
     .timeline-company-duration-pill-current,
     .award-year-badge {
         white-space: normal;
         word-break: break-word;
    }
}

/* Services skeleton (AJAX loading state) — neutral greys read well in both
   Light and Dark themes. Same grid as the real cards, so nothing jumps. */
.ajax-mount.is-loaded > *  {
     animation: servicesFadeIn 0.35s ease;
}

@keyframes servicesFadeIn  {
     from  { opacity: 0; transform: translateY(8px); }
     to    { opacity: 1; transform: none; }
}

.sk  {
     display: block;
     border-radius: 8px;
     background: linear-gradient(90deg, rgba(127,127,127,0.14) 25%, rgba(127,127,127,0.28) 37%, rgba(127,127,127,0.14) 63%);
     background-size: 400% 100%;
     animation: skeleton-shimmer 1.4s ease infinite;
}

.sk-pill  { height: 2rem; width: 7.5rem; border-radius: var(--radius-pill); }
.sk-icon  { width: 3rem; height: 3rem; border-radius: 12px; }
.sk-title  { height: 1.1rem; width: 70%; }
.sk-line  { height: 0.8rem; width: 100%; }
.sk-line-short  { width: 60%; }
.sk-btn  { height: 2.1rem; width: 8rem; border-radius: var(--radius-pill); margin-left: auto; margin-top: auto; }

.service-skeleton-card  {
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
     min-width: 0;
}

@media (min-width: 768px)  {
     .service-skeleton-card  { min-height: 17.5rem; }
}

.ajax-error  {
     text-align: center;
     padding: 2rem 1rem;
}

.ajax-error p  {
     margin-bottom: 1rem;
}

/* Services — respect reduced-motion preference */
@media (prefers-reduced-motion: reduce)  {
     .service-card,
     .service-card.service-expanded .service-desc-full,
     .service-card.service-expanded .service-features,
     .service-card.service-expanded .btn-service-cta,
     #servicesGrid.services-show-all .service-col-extra,
     .ajax-mount.is-loaded > *  {
          animation: none !important;
          transition: none !important;
     }

     .sk  {
          animation: none !important;
     }

     .btn-toggle-all,
     .btn-toggle-all-icon,
     .btn-all-services,
     .btn-all-services-chevron  {
          transition: none !important;
     }
}

/* ══════════════════════════════════════════════════════════
   SERVICE CARD — premium styling (icon box, accent line, number
   watermark, tags, check list, expanded look). Theme-aware: only
   rgba tints of --primary/--secondary + existing tokens are used.
   ══════════════════════════════════════════════════════════ */
.service-card  {
     position: relative;
     overflow: hidden;
     transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Top accent line — fills left → right on hover and while expanded */
.service-card::before  {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient);
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform .45s cubic-bezier(.4, 0, .2, 1);
     pointer-events: none;
}

.service-card:hover::before,
.service-card:focus-visible::before,
.service-card.service-expanded::before  {
     transform: scaleX(1);
}

/* Expanded card — accent border + soft shadow so it stands out at a glance */
.service-card.service-expanded  {
     border-color: rgba(0, 212, 255, 0.45);
     box-shadow: 0 14px 34px -14px rgba(0, 212, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Large faint number in the corner */
.service-num  {
     position: absolute;
     top: 0.4rem;
     right: 1rem;
     font-size: 3.25rem;
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.02em;
     color: var(--text-primary, currentColor);
     opacity: 0.07;
     pointer-events: none;
     user-select: none;
     transition: opacity .3s ease, transform .3s ease;
}

.service-card:hover .service-num,
.service-card.service-expanded .service-num  {
     opacity: 0.12;
     transform: translateY(2px);
}

/* Icon in a soft rounded box (gradient tint), glyph keeps the brand gradient */
.service-top  {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     min-width: 0;
}

.service-icon  {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 3.25rem;
     height: 3.25rem;
     font-size: 1.5rem;
     border-radius: 14px;
     background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(123, 47, 190, 0.16));
     border: 1px solid rgba(0, 212, 255, 0.22);
     -webkit-background-clip: border-box;
     background-clip: border-box;
     color: inherit;
     transition: transform .3s ease, box-shadow .3s ease;
}

.service-icon i  {
     background: linear-gradient(135deg, var(--primary, #00D4FF), var(--secondary, #7B2FBE));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
}

.service-card:hover .service-icon  {
     transform: rotate(-2deg) scale(1.05);
     box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
}

/* Popular badge */
.service-badge-popular  {
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
     padding: 0.2rem 0.6rem;
     border-radius: var(--radius-pill, 999px);
     font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     white-space: nowrap;
     color: #fff;
     background: var(--gradient-accent, linear-gradient(135deg, #FF6B35, #7B2FBE));
     box-shadow: 0 4px 12px -4px rgba(255, 107, 53, 0.55);
}

/* Descriptions: left-aligned (justify created uneven word gaps) */
.service-desc,
.service-desc-clamp,
.service-desc-full  {
     text-align: left;
     text-align-last: auto;
}

/* Tech tags — one fixed-height row so collapsed cards stay equal height */
.service-tags  {
     list-style: none;
     margin: 0.75rem 0 0;
     padding: 0;
     display: flex;
     flex-wrap: nowrap;
     gap: 0.4rem;
     overflow: hidden;
     min-height: 1.7rem;
}

.service-tags li  {
     flex: 0 1 auto;
     min-width: 0;
     padding: 0.2rem 0.6rem;
     font-size: 0.7rem;
     font-weight: 600;
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--primary, #00D4FF);
     background: rgba(0, 212, 255, 0.1);
     border: 1px solid rgba(0, 212, 255, 0.22);
     border-radius: var(--radius-pill, 999px);
}

.service-card.service-expanded .service-tags  {
     display: none;
}

/* Feature list — gradient check marks instead of bullets */
.service-features ul  {
     list-style: none;
     padding-left: 0;
     margin: 0;
}

.service-features li  {
     position: relative;
     padding-left: 1.6rem;
}

.service-features li::before  {
     content: "";
     position: absolute;
     left: 0;
     top: 0.2em;
     width: 1.05rem;
     height: 1.05rem;
     border-radius: 50%;
     background: var(--gradient);
}

.service-features li::after  {
     content: "";
     position: absolute;
     left: 0.38rem;
     top: 0.34em;
     width: 0.28rem;
     height: 0.5rem;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
}

@media (max-width: 575.98px)  {
     .service-num  { font-size: 2.6rem; }
     .service-icon  { width: 3rem; height: 3rem; font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce)  {
     .service-card::before,
     .service-icon,
     .service-num  {
          transition: none !important;
     }

     .service-card:hover .service-icon  {
          transform: none;
     }
}

/* ══════════════════════════════════════════════════════════
   UNIFIED CARD LANGUAGE — Projects, Skills, Blog, Certificates
   share the Services look: gradient top line, soft glow on hover,
   boxed icons and tinted tag pills. Theme-aware (rgba tints only).
   ══════════════════════════════════════════════════════════ */
.project-card,
.blog-card,
.skill-card,
.timeline-card:has(.cert-card-flex)  {
     position: relative;
     overflow: hidden;
}

.project-card::before,
.blog-card::before,
.skill-card::before,
.timeline-card:has(.cert-card-flex)::before  {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient);
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform .45s cubic-bezier(.4, 0, .2, 1);
     pointer-events: none;
     z-index: 2;
}

.project-card:hover::before,
.project-card:focus-within::before,
.blog-card:hover::before,
.blog-card:focus-within::before,
.skill-card:hover::before,
.timeline-card:has(.cert-card-flex):hover::before,
.timeline-card:has(.cert-card-flex):focus-within::before  {
     transform: scaleX(1);
}

.project-card:hover,
.blog-card:hover,
.timeline-card:has(.cert-card-flex):hover  {
     border-color: rgba(0, 212, 255, 0.35);
     box-shadow: 0 14px 34px -14px rgba(0, 212, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Skills: logo/icon in the same soft gradient box as the service icons */
.skill-logo  {
     width: 64px;
     height: 64px;
     padding: 12px;
     border-radius: 16px;
     background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(123, 47, 190, 0.14));
     border: 1px solid rgba(0, 212, 255, 0.22);
     transition: transform .3s ease, box-shadow .3s ease;
}

.skill-logo i  {
     font-size: 1.9rem;
}

.skill-card:hover .skill-logo  {
     transform: rotate(-2deg) scale(1.06);
     box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
}

/* Tag pills: same tint as the service tags */
.tech-tag-pill,
.project-tags .tech-tag-pill  {
     color: var(--primary);
     background: rgba(0, 212, 255, 0.1);
     border: 1px solid rgba(0, 212, 255, 0.22);
     font-weight: 600;
     line-height: 1.3;
     padding: 0.2rem 0.6rem;
}

/* Active section highlight in the navbar — gradient underline slides in */
.navbar .nav-link:not(.hire-btn)  {
     position: relative;
}

.navbar .nav-link:not(.hire-btn)::after  {
     content: "";
     position: absolute;
     left: 0.75rem;
     right: 0.75rem;
     bottom: 0.15rem;
     height: 2px;
     border-radius: 2px;
     background: var(--gradient);
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
     pointer-events: none;
}

.navbar .nav-link.active:not(.hire-btn)::after  {
     transform: scaleX(1);
}

/* Skeleton cards for Projects / Blog (same shimmer as the Services skeleton) */
.card-skeleton  {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     height: 100%;
}

.card-skeleton:hover  {
     transform: none;
     box-shadow: none;
}

.card-skeleton-body  {
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
}

.sk-thumb  { width: 100%; border-radius: 0; }
.sk-thumb-43  { aspect-ratio: 4 / 3; }
.sk-thumb-169  { aspect-ratio: 16 / 9; }

.card-skeleton-tags  {
     display: flex;
     gap: 0.4rem;
}

.sk-tag  { height: 1.35rem; width: 3.6rem; border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: reduce)  {
     .project-card::before,
     .blog-card::before,
     .skill-card::before,
     .timeline-card:has(.cert-card-flex)::before,
     .skill-logo,
     .navbar .nav-link:not(.hire-btn)::after  {
          transition: none !important;
     }

     .skill-card:hover .skill-logo  {
          transform: none;
     }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM POLISH — pointer glow, aurora hero, availability badge,
   hero stats, command palette, blur-up images, typography, 404,
   cross-page view transitions. Mobile-first, Light/Dark aware.
   ══════════════════════════════════════════════════════════ */

/* ── Typography polish ── */
h1, h2, h3, h4, .section-title, .home-name  {
     letter-spacing: -0.015em;
     text-wrap: balance;
}

.section-title  { letter-spacing: -0.02em; }

p, .service-desc, .home-tagline  { text-wrap: pretty; }

/* ── Cross-page transition (Projects / Blog detail etc.) ── */
@view-transition  { navigation: auto; }

/* ── Mouse-follow glow (mouse / trackpad only) ── */
@media (hover: hover) and (pointer: fine)  {
     .service-card,
     .project-card,
     .blog-card,
     .skill-card,
     .timeline-card:has(.cert-card-flex)  {
          --mx: 50%;
          --my: 50%;
     }

     .service-card::after,
     .project-card::after,
     .blog-card::after,
     .skill-card::after,
     .timeline-card:has(.cert-card-flex)::after  {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          pointer-events: none;
          opacity: 0;
          transition: opacity .35s ease;
          background: radial-gradient(340px circle at var(--mx) var(--my), rgba(0, 212, 255, 0.16), rgba(123, 47, 190, 0.06) 45%, transparent 70%);
          z-index: 1;
     }

     .service-card:hover::after,
     .project-card:hover::after,
     .blog-card:hover::after,
     .skill-card:hover::after,
     .timeline-card:has(.cert-card-flex):hover::after  {
          opacity: 1;
     }
}

/* ── Blur-up images (only hidden when JS is running) ── */
.js .blur-up:not(.is-loaded)  {
     opacity: 0;
     filter: blur(16px);
}

.blur-up.is-loaded  {
     animation: blurUpIn 0.6s ease backwards;
}

@keyframes blurUpIn  {
     from  { opacity: 0; filter: blur(16px); }
     to    { opacity: 1; filter: blur(0); }
}

.blur-up-wrap  {
     background: linear-gradient(90deg, rgba(127,127,127,0.14) 25%, rgba(127,127,127,0.28) 37%, rgba(127,127,127,0.14) 63%);
     background-size: 400% 100%;
     animation: skeleton-shimmer 1.4s ease infinite;
}

/* ── Command palette (Ctrl/⌘ + K) ── */
html.palette-open  { overflow: hidden; }

.palette-overlay  {
     position: fixed;
     inset: 0;
     z-index: 4000;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding: max(11vh, 4.5rem) 1rem 1rem;
     background: rgba(2, 6, 15, 0.55);
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease, visibility .2s ease;
}

.palette-overlay.is-open  { opacity: 1; visibility: visible; }

.palette  {
     width: min(100%, 38rem);
     max-height: min(72vh, 34rem);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     color: var(--text-primary);
     background: var(--bg-surface);
     border: 1px solid var(--card-border);
     border-radius: 16px;
     box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 212, 255, 0.08);
     transform: translateY(-8px) scale(0.98);
     transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.palette-overlay.is-open .palette  { transform: none; }

/* Dark theme: the page is almost black, so lift the palette with a lighter
   navy surface, a cyan edge and a soft glow so it clearly separates. */
[data-theme="dark"] .palette-overlay  {
     background: rgba(2, 6, 15, 0.7);
}

[data-theme="dark"] .palette  {
     background: linear-gradient(180deg, #172238 0%, #121b2f 100%);
     border-color: rgba(0, 212, 255, 0.35);
     box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 30px 80px -10px rgba(0, 0, 0, 0.85), 0 0 70px -12px rgba(0, 212, 255, 0.3);
}

[data-theme="dark"] .palette-search  {
     background: rgba(255, 255, 255, 0.03);
     border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .palette-foot  {
     background: rgba(0, 0, 0, 0.18);
     border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .palette-item:hover  {
     background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .palette-item[aria-selected="true"]  {
     background: rgba(0, 212, 255, 0.16);
     box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.4);
}

[data-theme="dark"] .palette-item-icon  {
     background: rgba(0, 212, 255, 0.14);
}

.palette-search  {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.9rem 1.1rem;
     border-bottom: 1px solid var(--card-border);
}

.palette-search i  { color: var(--primary); }

.palette-input  {
     flex: 1 1 auto;
     min-width: 0;
     border: 0;
     outline: 0;
     background: transparent;
     color: inherit;
     font: inherit;
     font-size: 1rem;
}

.palette-input::placeholder  { color: var(--text-muted); }

.palette-close  {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.25rem;
     height: 2.25rem;
     border: 1px solid var(--card-border);
     border-radius: 10px;
     background: transparent;
     color: var(--text-secondary);
     cursor: pointer;
     transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.palette-close:hover  {
     color: var(--text-primary);
     background: rgba(127, 127, 127, 0.12);
}

.palette-close:focus-visible  {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
}

.palette-list  {
     list-style: none;
     margin: 0;
     padding: 0.4rem;
     overflow-y: auto;
     overscroll-behavior: contain;
}

.palette-group  {
     padding: 0.6rem 0.75rem 0.25rem;
     font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text-muted);
}

.palette-item  {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.6rem 0.75rem;
     border-radius: 10px;
     cursor: pointer;
     min-height: 44px;
}

.palette-item[aria-selected="true"]  {
     background: rgba(0, 212, 255, 0.12);
     box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.28);
}

.palette-item-icon  {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     height: 2rem;
     border-radius: 9px;
     font-size: 0.85rem;
     color: var(--primary);
     background: rgba(0, 212, 255, 0.1);
}

.palette-item-title  {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 0.92rem;
}

.palette-item-type  {
     flex: 0 0 auto;
     font-size: 0.68rem;
     font-weight: 600;
     color: var(--text-secondary);
}

.palette-empty  {
     padding: 2rem 1rem;
     text-align: center;
     color: var(--text-secondary);
     font-size: 0.9rem;
}

.palette-foot  {
     display: none;
     gap: 1rem;
     padding: 0.55rem 1rem;
     border-top: 1px solid var(--card-border);
     font-size: 0.7rem;
     color: var(--text-muted);
}

@media (min-width: 768px)  {
     .palette-foot  { display: flex; }
}

@media (max-width: 575.98px)  {
     .palette-overlay  { padding-top: 4.25rem; }
}

/* ── Designed 404 ── */
.error-page-wrap  {
     position: relative;
     min-height: 100svh;
     display: grid;
     place-items: center;
     padding: 7rem 1rem 4rem;
     overflow: hidden;
}

.error-card  {
     position: relative;
     z-index: 1;
     width: min(100%, 40rem);
     padding: clamp(1.75rem, 5vw, 3rem);
     text-align: center;
}

.error-visual  {
     position: relative;
     display: inline-block;
     margin-bottom: 0.5rem;
}

.error-code-text  {
     display: block;
     font-family: var(--font-heading);
     font-size: clamp(5rem, 22vw, 9rem);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.04em;
}

.error-orbit  {
     position: absolute;
     top: 4%;
     right: -0.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.75rem;
     height: 2.75rem;
     border-radius: 14px;
     font-size: 1.2rem;
     color: var(--primary);
     background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(123, 47, 190, 0.16));
     border: 1px solid rgba(0, 212, 255, 0.25);
     animation: errorFloat 4s ease-in-out infinite;
}

@keyframes errorFloat  {
     0%, 100%  { transform: translateY(0) rotate(-4deg); }
     50%       { transform: translateY(-8px) rotate(4deg); }
}

.error-title  {
     font-size: clamp(1.5rem, 4vw, 2rem);
     font-weight: 700;
     margin-bottom: 0.75rem;
}

.error-text  {
     color: var(--text-secondary);
     margin: 0 auto 1.75rem;
     max-width: 30rem;
}

.error-actions  {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.75rem;
}

@media (max-width: 575.98px)  {
     .error-actions .btn  { width: 100%; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce)  {
     .error-orbit,
     .blur-up.is-loaded,
     .blur-up-wrap  {
          animation: none !important;
     }

     .palette,
     .palette-overlay  {
          transition: none !important;
     }

     .js .blur-up:not(.is-loaded)  {
          opacity: 1;
          filter: none;
     }

     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*)  {
          animation: none !important;
     }
}

/* ── Home hero: location line — same look as the tagline, sitting right under it ── */
.home-tagline:has(+ .home-location) > :last-child  {
     margin-bottom: 0;
}

.home-location  {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.3rem;
     margin: 0.35rem 0 0;
     font-size: 1.08rem;
     font-weight: inherit;
     line-height: inherit;
     text-align: left;
     color: var(--home-location-color, var(--text-secondary));
}

.home-location-pin  {
     flex: 0 0 auto;
     background: var(--gradient);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
}

.home-location-prefix  {
     color: inherit;
}

.home-location-text  {
     color: inherit;
}

.home-location-flag  {
     display: inline-block;
     flex: 0 0 auto;
     font-size: 0.95rem;
     vertical-align: -0.12em;
     border-radius: 2px;
     box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35);
}

/* ══════════════════════════════════════════════════════════
   EXPERIENCE META CHIPS — location / employment type / date range.
   Replaces the plain "Full-time | date (duration)" text line with
   soft pills. Theme-aware (tokens + rgba tints), wraps on phones.
   ══════════════════════════════════════════════════════════ */
.exp-meta-row {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
     margin: 0.7rem 0 0;
}

.exp-meta-row.timeline-meta {
     margin: 0.55rem 0 0.9rem;
}

.exp-meta-chip {
     --chip-accent: var(--primary);
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
     max-width: 100%;
     padding: 0.34rem 0.85rem;
     font-size: 0.8rem;
     font-weight: 500;
     line-height: 1.35;
     color: var(--text-secondary);
     background: rgba(148, 163, 184, 0.1);
     border: 1px solid var(--card-border);
     border-radius: var(--radius-pill);
}

.exp-meta-chip > i {
     flex-shrink: 0;
     font-size: 0.74rem;
     color: var(--chip-accent);
}

.exp-meta-loc {
     --chip-accent: var(--accent);
}

.exp-meta-type {
     --chip-accent: var(--primary);
     color: var(--text-primary);
     font-weight: 600;
     background: rgba(0, 212, 255, 0.08);
     border-color: rgba(0, 212, 255, 0.25);
}

.exp-meta-date {
     --chip-accent: #8B5CF6;
}

.exp-meta-dur {
     color: var(--text-muted);
     font-weight: 400;
}

.exp-meta-dur::before {
     content: "\2022";
     margin: 0 0.45rem 0 0.1rem;
     opacity: 0.55;
}

.exp-meta-chip .exp-current-dot {
     margin-left: 0.1rem;
}

@media (max-width: 575.98px) {
     .exp-meta-row {
         gap: 0.4rem;
     }
     .exp-meta-chip {
         padding: 0.3rem 0.7rem;
         font-size: 0.76rem;
     }
}

/* ── Chip variants for the other Resume tabs (Education, Certifications,
   Leadership, Awards) — same pill language as Experience. ── */
.exp-meta-field {
     --chip-accent: #14B8A6;
}

.exp-meta-grade {
     --chip-accent: #F59E0B;
     font-weight: 600;
     color: var(--text-primary);
}

.exp-meta-expiry {
     --chip-accent: #10B981;
}

.exp-meta-expired {
     --chip-accent: #F87171;
     background: rgba(239, 68, 68, 0.08);
     border-color: rgba(239, 68, 68, 0.28);
}

.exp-meta-cred {
     --chip-accent: #6366F1;
     overflow-wrap: anywhere;
}

.exp-meta-org {
     --chip-accent: #8B5CF6;
     font-weight: 600;
     color: var(--text-primary);
}

.exp-meta-award {
     --chip-accent: #F59E0B;
     font-weight: 600;
     color: var(--text-primary);
}

.exp-meta-key {
     color: var(--text-muted);
     font-weight: 500;
}

.exp-meta-key::after {
     content: ":";
}

.exp-meta-chip a {
     color: inherit;
     text-decoration: none;
}

.exp-meta-chip a:hover {
     color: var(--primary);
     opacity: 1;
}

.exp-meta-chip a i {
     font-size: 0.68rem;
     color: var(--text-muted);
}

.exp-meta-chip .cert-copy-btn {
     width: 22px;
     height: 22px;
     margin-left: 0.15rem;
     border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════
   Edge-to-edge on iPhone / Safari (viewport-fit=cover is set in base.html).
   The page now extends under the status bar and Safari's address-bar pill, so:
   - html gets the theme background (overscroll / bounce never shows white),
   - a fixed, solid "safe-area cap" fills the notch area with the navbar colour
     at all times (also when the mobile navbar auto-hides), which is what
     Safari samples to tint its top bar. env() is 0 on devices without a
     notch, so desktop and Android are unchanged.
   ══════════════════════════════════════════════════════════ */
html {
     background-color: var(--bg);
}

body {
     min-height: 100vh;
     min-height: 100dvh;
}

body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: env(safe-area-inset-top, 0px);
     background: #0A0E1A;
     z-index: 1020;
     pointer-events: none;
}

[data-theme="light"] body::before {
     background: #F8FAFC;
}