/* ═══════════════════════════════════════════════════════════════
   Hemraj Adhikari Portfolio — style.css v7.0 (Desktop)
   ═══════════════════════════════════════════════════════════════
   Sections:
   1.  Root Variables
   2.  Reset & Base
   3.  Accessibility
   4.  Backgrounds & Decorations
   5.  Progress Bar
   6.  Search Overlay
   7.  Navigation
   8.  Mobile Nav Shell (structure; breakpoints in mobile.css)
   9.  Toast
   10. Page Layout & Reveal Animation
   11. Typography Utilities
   12. Buttons
   13. Hero Section
   14. About Section
   15. Skills Section
   16. Experience Section
   17. Services Section
   18. Portfolio Section
   19. Blog Section
   20. FAQ Section
   21. Contact Section
   22. Footer
   23. Back to Top
   24. Utilities
   25. Print
   26. Reduced Motion & High Contrast
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. ROOT VARIABLES
   ───────────────────────────────────────────────────────────── */
:root {
  /* Colour palette */
  --bg:            #060811;
  --bg2:           #0b0f1a;
  --bg3:           #111622;
  --surface:       #141926;
  --surface2:      #1a2030;
  --border:        rgba(255, 255, 255, 0.07);
  --border2:       rgba(255, 255, 255, 0.14);

  --text1:         #f2f5ff;
  --text2:         #9aa3bc;
  --text3:         #5a6278;

  --accent:        #4f9cf9;
  --accent2:       #8b72ff;
  --accent3:       #2dd4a0;

  --grad:          linear-gradient(135deg, #4f9cf9, #8b72ff);
  --grad-rev:      linear-gradient(135deg, #8b72ff, #4f9cf9);

  /* Typography */
  --font-display:  'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --nav-h:         64px;
  --max-w:         1160px;
  --gutter:        clamp(18px, 5vw, 64px);

  /* Border radius scale */
  --r-sm:          6px;
  --r-md:          10px;
  --r-lg:          16px;
  --r-xl:          24px;

  /* Transition shorthand: duration + easing */
  --t:             0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* scroll-behavior set via prefers-reduced-motion below */
}

body {
  background: var(--bg);
  color: var(--text2);
  font-family: var(--font-display);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe,
table {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  color: transparent; /* suppress broken-image alt text rendering */
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Scrollbar */
::-webkit-scrollbar        { width: 2px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--accent); border-radius: 2px; }

/* Selection */
::selection {
  background: rgba(79, 156, 249, 0.22);
  color: var(--text1);
}


/* ─────────────────────────────────────────────────────────────
   3. ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
/* Single unified screen-reader utility (removed duplicate .visually-hidden) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1.2rem;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s;
}

.skip-nav:focus {
  top: 0;
}


/* ─────────────────────────────────────────────────────────────
   4. BACKGROUNDS & DECORATIONS
   ───────────────────────────────────────────────────────────── */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(79, 156, 249, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 156, 249, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
}

.orb1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(79, 156, 249, 0.08) 0%, transparent 70%);
}

.orb2 {
  width: 500px;
  height: 500px;
  bottom: 20%;
  right: -150px;
  background: radial-gradient(circle, rgba(139, 114, 255, 0.07) 0%, transparent 70%);
}

.orb3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 40%;
  background: radial-gradient(circle, rgba(45, 212, 160, 0.04) 0%, transparent 70%);
}


/* ─────────────────────────────────────────────────────────────
   5. PROGRESS BAR
   ───────────────────────────────────────────────────────────── */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 2px;
  width: 0;
  background: var(--grad);
  transition: width 0.1s linear;
  will-change: width;
}


/* ─────────────────────────────────────────────────────────────
   6. SEARCH OVERLAY
   ───────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6, 8, 17, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.search-overlay-inner {
  width: min(600px, calc(100vw - 48px));
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}

.search-overlay-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
  font-family: var(--font-mono);
}

.search-box-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  color: var(--text3);
}

.search-box-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text1);
  font-size: 1rem;
  font-family: var(--font-display);
}

.search-box-input::placeholder {
  color: var(--text3);
}

.search-close-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t), border-color var(--t);
}

.search-close-btn:hover {
  color: var(--text1);
  border-color: var(--border2);
}

.search-results {
  margin-top: 12px;

}
.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 0.9rem;
  transition: background var(--t), color var(--t);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.search-result-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text1);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-section {
  font-size: 0.72rem;
  color: var(--text3);
  font-family: var(--font-mono);
}

.search-no-result {
  padding: 12px 14px;
  color: var(--text3);
  font-size: 0.88rem;
}


/* ─────────────────────────────────────────────────────────────
   7. NAVIGATION
   ───────────────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--nav-h);
  background: rgba(6, 8, 17, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background var(--t), box-shadow var(--t);
}

#site-header.scrolled {
  background: rgba(6, 8, 17, 0.97);
  box-shadow: 0 1px 0 var(--border2);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: space-between; /* ← FIX: logo left, actions right on mobile */
}

.logo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -0.3px;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.logo em {
  font-style: normal;
  color: var(--accent);
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-links a {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text2);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}

.nav-links a:hover,
.nav-links a[aria-current="page"],
.nav-links a.active {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text2);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
  min-height: 34px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
}

.nav-dropdown-toggle svg {
  transition: transform 0.2s;
}

.nav-dropdown.open .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 200;
}

.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 0.84rem;
  color: var(--text2);
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text1);
}

.tag-sm {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(79, 156, 249, 0.12);
  color: var(--accent);
  border: 1px solid rgba(79, 156, 249, 0.2);
  flex-shrink: 0;
}

/* Nav action buttons */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* ← FIX: pushes actions to right when nav-links hidden */
}

.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: color var(--t), border-color var(--t), background var(--t);
}

.nav-search-btn:hover {
  color: var(--text1);
  border-color: var(--border2);
  background: var(--surface2);
}

/* Hamburger button — hidden on desktop, shown via mobile.css */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: color var(--t), border-color var(--t), background var(--t);
}

.nav-toggle:hover {
  color: var(--text1);
  border-color: var(--border2);
  background: var(--surface2);
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s, width 0.25s;
}

/* Hamburger → X via aria-expanded (no duplicate .open class needed) */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


/* ─────────────────────────────────────────────────────────────
   8. MOBILE NAV SHELL
   (Breakpoint rules live in mobile.css)
   ───────────────────────────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 498;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  width: min(300px, 88vw);
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  z-index: 499;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px;
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 14px;
  margin-bottom: 16px;
  color: var(--text3);
  cursor: text;
}

.mobile-search-input {
  flex: 1;
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  outline: none;
  color: var(--text1);
  font-size: 0.9rem;
  font-family: var(--font-display);
}

.mobile-search-input::placeholder {
  color: var(--text3);
}

.mobile-nav-section {
  margin-bottom: 20px;
}

.mobile-nav-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
  padding: 0 4px;
  font-family: var(--font-mono);
}

.mobile-nav-section a {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  color: var(--text2);
  font-size: 0.9rem;
  border-radius: var(--r-sm);
  min-height: 44px;
  transition: background var(--t), color var(--t);
}

.mobile-nav-section a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text1);
}

.mobile-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #000;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 8px;
  min-height: 44px;
  transition: opacity var(--t);
}

.mobile-dl-btn:hover {
  opacity: 0.88;
}


/* ─────────────────────────────────────────────────────────────
   9. TOAST
   ───────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--bg3);
  color: var(--text1);
  padding: 9px 20px;
  border-radius: 40px;
  font-size: 0.84rem;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

#toast.show {
  transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────────────────
   10. PAGE LAYOUT & REVEAL
   ───────────────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

main {
  padding-top: var(--nav-h);
}

section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--gutter);
}

/* Below-fold sections: browser can skip rendering until near viewport */
#about,
#skills,
#experience,
#services,
#portfolio,
#blog,
#faq,
#contact {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

.section-cta {
  text-align: center;
  margin-top: 24px;
}

/* Scroll-reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────────
   11. TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.eyebrow-line {
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--grad);
}

.eyebrow-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.sec-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text1);
  line-height: 1.15;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.sec-title mark {
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: var(--grad);
}


/* ─────────────────────────────────────────────────────────────
   12. BUTTONS
   ───────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--accent);
  color: #000;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: var(--font-display);
  min-height: 44px;
  border: none;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t);
}

.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: var(--font-display);
  min-height: 44px;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}

.btn-outline:hover {
  color: var(--text1);
  border-color: var(--accent);
  background: rgba(79, 156, 249, 0.06);
  transform: translateY(-1px);
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: var(--font-display);
  background: rgba(37, 211, 102, 0.05);
  min-height: 44px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.btn-wa:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.5);
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────
   13. HERO SECTION
   ───────────────────────────────────────────────────────────── */
#hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 80px;
}

.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}

/* Availability banner */
.avail-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(45, 212, 160, 0.07);
  border: 1px solid rgba(45, 212, 160, 0.2);
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 0.8rem;
  color: var(--accent3);
  margin-bottom: 20px;
}

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent3);
  box-shadow: 0 0 0 3px rgba(45, 212, 160, 0.2);
  animation: live-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45, 212, 160, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(45, 212, 160, 0.05); }
}

/* IT Officer badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 156, 249, 0.08);
  border: 1px solid rgba(79, 156, 249, 0.2);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 20px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: badge-pulse 2.5s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.5); }
}

/* Hero name */
.hero-name {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}

.name-line {
  display: block;
  color: var(--text1);
}

.name-accent {
  display: block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: var(--grad);
}

/* Typed role text */
.hero-role {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text2);
  margin-bottom: 20px;
  min-height: 24px;
  flex-wrap: wrap;
}

.role-sep    { color: var(--accent); font-weight: 700; }
.role-typed  { color: var(--text1); }

.role-cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

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

.hero-desc {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--text2);
  max-width: 560px;
  margin-bottom: 28px;
}

.hero-desc strong {
  color: var(--text1);
  font-weight: 600;
}

/* Skill tags */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.tag {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: border-color var(--t), color var(--t);
}

.tag:hover         { border-color: var(--border2); color: var(--text1); }
.tag.blue          { background: rgba(79, 156, 249, 0.08); border-color: rgba(79, 156, 249, 0.2); color: #82b8fb; }
.tag.purple        { background: rgba(139, 114, 255, 0.08); border-color: rgba(139, 114, 255, 0.2); color: #b49aff; }
.tag.green         { background: rgba(45, 212, 160, 0.08); border-color: rgba(45, 212, 160, 0.2); color: #5ddfc2; }

/* CTA row */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

/* Social buttons */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}

.social-btn:hover {
  color: var(--text1);
  border-color: var(--border2);
  background: var(--surface2);
  transform: translateY(-2px);
}

/* Hero visual (right column) */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Profile photo with orbit */
.photo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  contain: layout;
}

.photo-ring-outer {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), transparent 130deg, transparent 210deg, var(--accent2), var(--accent), transparent 340deg);
  animation: spin-ring 10s linear infinite;
  will-change: transform;
}

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

.photo-ring-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(79, 156, 249, 0.2);
  background: var(--bg3);
}

.photo-ring-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Orbit ring: contains the 4 emoji icons */
.orbit-ring {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  animation: orbit-spin 20s linear infinite;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

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

.orb-icon {
  position: absolute;
  width: 38px;
  height: 38px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  will-change: transform;
}

/* Place each icon at a compass point and counter-rotate so they stay upright */
.orb-icon:nth-child(1) {
  top: 0; left: 50%;
  animation: counter-top    20s linear infinite;
}
.orb-icon:nth-child(2) {
  top: 50%; right: 0;
  animation: counter-right  20s linear infinite;
}
.orb-icon:nth-child(3) {
  bottom: 0; left: 50%;
  animation: counter-bottom 20s linear infinite;
}
.orb-icon:nth-child(4) {
  top: 50%; left: 0;
  animation: counter-left   20s linear infinite;
}

@keyframes counter-top    { to { transform: translateX(-50%) translateY(-50%) rotate(-360deg); } }
@keyframes counter-right  { to { transform: translateY(-50%) translateX(50%) rotate(-360deg); } }
@keyframes counter-bottom { to { transform: translateX(-50%) translateY(50%) rotate(-360deg); } }
@keyframes counter-left   { to { transform: translateY(-50%) translateX(-50%) rotate(-360deg); } }

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color var(--t), transform var(--t);
  cursor: default;
}

.stat-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.stat-card dt.stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text3);
  text-transform: uppercase;
  font-family: var(--font-mono);
  order: 2;
  margin-top: 4px;
}

.stat-card dd {
  display: flex;
  align-items: baseline;
  gap: 1px;
  order: 1;
}

.stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text1);
  line-height: 1;
  font-feature-settings: "tnum";
}

.stat-sup {
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.scroll-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text3);
  letter-spacing: 0.08em;
  transition: color var(--t);
  padding: 0 4px;
}

.scroll-hint:hover {
  color: var(--text2);
}


/* ─────────────────────────────────────────────────────────────
   14. ABOUT SECTION
   ───────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 60px;
  align-items: start;
}

.about-text p {
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 0.97rem;
}

.about-text p strong {
  color: var(--text1);
  font-weight: 600;
}

.about-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Certification badges */
.cert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text2);
  transition: border-color var(--t), color var(--t);
}

.cert-badge:hover {
  border-color: var(--accent);
  color: var(--text1);
}

.cert-badge svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Highlight cards */
.hl-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.hl-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t);
}

.hl-card:hover {
  border-color: var(--border2);
}

.hl-icon {
  font-size: 1.2rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.hl-card div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hl-card strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text1);
}

.hl-card span {
  font-size: 0.8rem;
  color: var(--text3);
}

/* Photo column */
.about-photo-col {
  position: relative;
}

.deco-ring {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed var(--border2);
  pointer-events: none;
  animation: spin-ring 20s linear infinite;
}

.about-photo-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg3);
}

.about-photo-frame img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.about-photo-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 8, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 8px 14px;
  white-space: nowrap;
}

.badge-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent3);
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}

.about-photo-badge div {
  display: flex;
  flex-direction: column;
}

.about-photo-badge strong {
  font-size: 0.8rem;
  color: var(--text1);
  font-weight: 600;
}

.about-photo-badge span {
  font-size: 0.72rem;
  color: var(--text3);
}


/* ─────────────────────────────────────────────────────────────
   15. SKILLS SECTION
   ───────────────────────────────────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.skill-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: border-color var(--t);
}

.skill-item:hover {
  border-color: var(--border2);
}

.skill-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 3px;
}

.skill-level {
  font-size: 0.75rem;
  color: var(--text3);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

.skill-bar {
  height: 4px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
}

/* Width applied via JS data-width attribute; starts at 0, animates to target */
.skill-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--grad);
  width: 0;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────────────────────────
   16. EXPERIENCE SECTION
   ───────────────────────────────────────────────────────────── */
.exp-with-photo {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 40px;
  align-items: start;
}

.exp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t);
}

.exp-card:hover {
  border-color: var(--border2);
}

.exp-card.current {
  border-color: rgba(45, 212, 160, 0.25);
}

.exp-card.current:hover {
  border-color: rgba(45, 212, 160, 0.45);
}

.exp-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  position: relative;
  transition: background var(--t);
}

/* Accent top-border on hover/open */
.exp-trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.exp-card.current .exp-trigger::before,
.exp-card.open .exp-trigger::before,
.exp-trigger:hover::before {
  transform: scaleX(1);
}

.exp-trigger:hover {
  background: rgba(255, 255, 255, 0.02);
}

.exp-trigger-left {
  flex: 1;
  min-width: 0;
}

.exp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.exp-role {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text1);
}

.exp-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(45, 212, 160, 0.1);
  color: var(--accent3);
  border: 1px solid rgba(45, 212, 160, 0.2);
  font-family: var(--font-mono);
}

.exp-badge.past {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text3);
  border-color: var(--border);
}

.exp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text3);
  margin-bottom: 6px;
}

.exp-company {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text2);
}

.exp-sep {
  color: var(--border2);
}

.exp-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text3);
  letter-spacing: 0.04em;
}

.exp-chevron {
  color: var(--text3);
  flex-shrink: 0;
  padding-top: 4px;
  transition: transform 0.2s, color var(--t);
}

.exp-card.open .exp-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Accordion body — CSS max-height pattern */
.exp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
  padding: 0 20px;
  border-top: 0 solid var(--border);
}

.exp-card.open .exp-body {
  max-height: 600px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}

.exp-bullets {
  list-style: disc;
  padding-left: 18px;
}

.exp-bullets li {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 8px;
  list-style: disc;
}

.exp-bullets li::marker {
  color: var(--accent);
}

/* Sticky photo sidebar */
.exp-photo-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.exp-photo-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg3);
}

.exp-photo-frame img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.exp-photo-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 8, 17, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 7px 12px;
  white-space: nowrap;
}

.exp-photo-badge div {
  display: flex;
  flex-direction: column;
}

.exp-photo-badge strong {
  font-size: 0.75rem;
  color: var(--text1);
  font-weight: 600;
}

.exp-photo-badge span {
  font-size: 0.68rem;
  color: var(--text3);
}


/* ─────────────────────────────────────────────────────────────
   17. SERVICES SECTION
   ───────────────────────────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.svc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}

.svc-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.svc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity var(--t);
}

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

.svc-ico {
  width: 44px;
  height: 44px;
  background: rgba(79, 156, 249, 0.08);
  border: 1px solid rgba(79, 156, 249, 0.15);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
}

.svc-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text3);
  letter-spacing: 0.05em;
}

.svc-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 10px;
}

.svc-card p {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 16px;
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-tags li {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────
   18. PORTFOLIO SECTION
   ───────────────────────────────────────────────────────────── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.proj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), transform var(--t);
}

.proj-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.proj-thumb {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--surface2), var(--bg3));
  border-bottom: 1px solid var(--border);
}

.proj-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.proj-type {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
}

.proj-year {
  font-size: 0.72rem;
  color: var(--text3);
  font-family: var(--font-mono);
}

.proj-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.4;
}

.proj-card p {
  font-size: 0.84rem;
  color: var(--text2);
  line-height: 1.65;
  flex: 1;
}

.proj-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proj-tech span {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.71rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--font-mono);
}

.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--t);
  min-height: 44px;
}

.proj-link:hover {
  gap: 9px;
}

.proj-done {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent3);
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────
   19. BLOG SECTION
   ───────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
  text-decoration: none;
}

.blog-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.blog-thumb {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--surface2), var(--bg3));
  border-bottom: 1px solid var(--border);
}

.blog-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-cat {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
  padding: 2px 8px;
  background: rgba(79, 156, 249, 0.07);
  border: 1px solid rgba(79, 156, 249, 0.12);
  border-radius: 4px;
}

.blog-date {
  font-size: 0.7rem;
  color: var(--text3);
}

.blog-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.4;
}

.blog-card p {
  font-size: 0.83rem;
  color: var(--text2);
  line-height: 1.65;
  flex: 1;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.blog-tags span {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--font-mono);
}

.blog-read {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.blog-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}

.blog-cta-bar p {
  font-size: 0.9rem;
  color: var(--text2);
}

.blog-cta-bar strong {
  color: var(--text1);
}


/* ─────────────────────────────────────────────────────────────
   20. FAQ SECTION
   ───────────────────────────────────────────────────────────── */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t);
}

.faq-item.open {
  border-color: var(--border2);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text1);
  min-height: 44px;
  transition: background var(--t), color var(--t);
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.02);
  color: var(--accent);
}

.faq-question svg {
  flex-shrink: 0;
  color: var(--text3);
  transition: transform 0.2s, color var(--t);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s;
  padding: 0 20px;
  border-top: 0 solid var(--border);
}

.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border);
}

.faq-answer p {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.75;
}

.faq-answer a {
  color: var(--accent);
}

.faq-answer a:hover {
  text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   21. CONTACT SECTION
   ───────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.contact-intro {
  font-size: 0.97rem;
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 24px;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.c-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--t), transform var(--t);
}

a.c-item:hover {
  border-color: var(--border2);
  transform: translateX(3px);
}

.c-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: rgba(79, 156, 249, 0.08);
  border: 1px solid rgba(79, 156, 249, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.c-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text3);
  margin-bottom: 2px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.c-val {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text1);
}

.wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: var(--r-md);
  color: #25d366;
  font-weight: 700;
  font-size: 0.92rem;
  min-height: 44px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.wa-cta:hover {
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.4);
  transform: translateY(-2px);
}

.contact-form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.contact-form-panel p {
  font-size: 0.97rem;
  color: var(--text2);
  line-height: 1.7;
}

.contact-form-note {
  font-size: 0.78rem;
  color: var(--text3);
  margin-top: 4px;
}

/* Hire CTA bar */
.hire-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: linear-gradient(135deg, rgba(79, 156, 249, 0.06) 0%, rgba(139, 114, 255, 0.06) 100%);
  border: 1px solid rgba(79, 156, 249, 0.2);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-top: 32px;
}

.hire-cta-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 4px;
}

.hire-cta-text p {
  font-size: 0.88rem;
  color: var(--text2);
}

.hire-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   22. FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.footer-accent-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 50%, transparent 100%);
  opacity: 0.4;
}

.footer-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 300px 1fr 1fr 1fr;
  gap: 48px 40px;
}

.footer-logo {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  text-decoration: none;
  font-family: var(--font-mono);
}

.footer-logo em {
  font-style: normal;
  color: var(--accent);
}

.footer-tagline {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text2);
  margin-bottom: 18px;
}

.footer-avail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(45, 212, 160, 0.07);
  border: 1px solid rgba(45, 212, 160, 0.18);
  border-radius: 30px;
  padding: 5px 12px;
  font-size: 0.76rem;
  color: var(--accent3);
  font-weight: 500;
  margin-bottom: 20px;
}

.footer-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent3);
  animation: live-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Footer social — now a div[role="list"], not inside <nav> */
.footer-social {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  transition: border-color var(--t), color var(--t), background var(--t);
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(79, 156, 249, 0.06);
}

/* Footer nav columns */
.footer-col-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text1);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  font-size: 0.855rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t);
  text-decoration: none;
}

.footer-nav-list a:hover {
  color: var(--text1);
}

/* Contact strip */
.footer-contact-strip {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text2);
  text-decoration: none;
  transition: color var(--t);
}

.footer-contact-item:is(a):hover {
  color: var(--text1);
}

.footer-contact-item svg {
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}

.footer-contact-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--text3);
}

.footer-copy strong {
  color: var(--text2);
  font-weight: 500;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 0.8rem;
  color: var(--text3);
  transition: color var(--t);
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: var(--text2);
}

.footer-made {
  font-size: 0.8rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-heart {
  color: #f87171;
}


/* ─────────────────────────────────────────────────────────────
   23. BACK TO TOP
   ───────────────────────────────────────────────────────────── */
#btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t), color var(--t);
}

#btt.on {
  opacity: 1;
  pointer-events: auto;
}

#btt:hover {
  color: var(--text1);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────────────
   24. UTILITIES
   ───────────────────────────────────────────────────────────── */
/* .sr-only defined in section 3 — no duplicate needed */


/* ─────────────────────────────────────────────────────────────
   25. PRINT
   ───────────────────────────────────────────────────────────── */
@media print {
  .nav-actions,
  .mobile-nav,
  .mobile-nav-overlay,
  #btt,
  .search-overlay,
  .orb,
  .grid-bg,
  #progress,
  #site-header,
  .skip-nav,
  .hero-visual,
  .about-photo-col,
  .exp-photo-sticky { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: gray; }

  section { padding: 20pt; page-break-inside: avoid; }
}


/* ─────────────────────────────────────────────────────────────
   26. REDUCED MOTION & HIGH CONTRAST
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Override smooth scrolling when motion is reduced */
  html { scroll-behavior: auto !important; }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (forced-colors: active) {
  .tag,
  .exp-badge,
  .blog-cat,
  .cert-badge,
  .hero-badge { border: 1px solid ButtonText; }

  .btn-primary,
  .btn-outline,
  .btn-wa { border: 2px solid ButtonText; }
}