/* ================================================================
   HERO v4 — Premium Enterprise Design
   Scoped entirely to .hero and its descendants.
   Loaded after style-v3.css — overrides only what is needed.
   ================================================================ */

/* Kill the style-v3 rules that set display:block and min-height:420px —
   they override our height:100vh column-flex layout */
.hero { display: flex !important; }

/* Force navbar to stay fixed at top */
.site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1010 !important; }
.site-navigation { position: relative !important; }

/* Reserve space for the fixed header in all environments (local + deployed)
   so hero content never sits underneath the navbar if a stale CSS file loads. */
.hero {
  padding-top: 60px !important;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

html {
  overflow-x: hidden;
}

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (hero-local — inherit from :root where possible)
   ---------------------------------------------------------------- */
.hero {
  --h-accent:        #19c2c1;
  --h-accent-dk:     #13a09f;
  --h-accent-glow:   rgba(25, 194, 193, 0.28);
  --h-accent-glow-sm:rgba(25, 194, 193, 0.14);
  --h-bg:            #060b16;
  --h-surface:       #0f1a2e;
  --h-surface-2:     #111827;
  --h-border:        rgba(255, 255, 255, 0.07);
  --h-border-accent: rgba(25, 194, 193, 0.18);
  --h-text:          #ffffff;
  --h-text-2:        #b5c2d3;
  --h-text-3:        rgba(255, 255, 255, 0.52);
  --h-radius-sm:     8px;
  --h-radius-md:     12px;
  --h-radius-lg:     16px;
  --h-radius-pill:   9999px;
}


/* ----------------------------------------------------------------
   2. HERO SHELL — full-viewport dark background
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  height: auto !important;
  /* Reduce overall visual height so the hero doesn't dominate 1080p displays.
     Targets a 20-30% reduction versus full-viewport. */
  min-height: 78vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background-color: var(--h-bg) !important;
  background-image: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--h-border);
}


/* ----------------------------------------------------------------
   3. BLUEPRINT GRID BACKGROUND
   Stronger grid lines (stroke-opacity 0.07) with both H and V lines,
   80 px cell, plus the soft radial gradient overlay.
   ---------------------------------------------------------------- */
.hero.background-overlay::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(
      160deg,
      rgba(6, 11, 22, 0.92)  0%,
      rgba(6, 11, 22, 0.78) 45%,
      rgba(6, 11, 22, 0.88) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><rect width='80' height='80' fill='%23050b14'/><g stroke='%2319c2c1' stroke-opacity='0.07' stroke-width='0.6'><path d='M0 0h80M0 20h80M0 40h80M0 60h80M0 80h80'/><path d='M0 0v80M20 0v80M40 0v80M60 0v80M80 0v80'/></g></svg>") !important;
  background-size: cover, 80px 80px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, 0 0 !important;
  animation: none !important;
}

/* Subtle radial glow orbs via pseudo-element on the hero itself */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 70% 30%, rgba(25, 194, 193, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 15% 75%, rgba(25, 100, 193, 0.035) 0%, transparent 70%);
}


/* ----------------------------------------------------------------
   4. CANVAS + ORB ELEMENTS
   ---------------------------------------------------------------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}

.hero-navbar-spacer {
  position: relative;
  z-index: 2;
  flex: 0 0 56px;
  height: 56px;
  min-height: 56px;
}

@media (max-width: 767px) {
  .hero-navbar-spacer {
    flex-basis: 42px;
    height: 42px;
    min-height: 42px;
  }
}

.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(80px);
  animation: orbDrift 20s ease-in-out infinite alternate;
}

.hero-bg-orb--1 {
  width: 520px;
  height: 520px;
  top: -140px;
  right: -60px;
  background: radial-gradient(circle, rgba(25, 194, 193, 0.07) 0%, transparent 70%);
  animation-duration: 22s;
}

.hero-bg-orb--2 {
  width: 380px;
  height: 380px;
  bottom: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(25, 80, 193, 0.05) 0%, transparent 70%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.05); }
  100% { transform: translate(-20px, 30px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-orb { animation: none !important; }
}


/* ----------------------------------------------------------------
   5. LAYOUT CONTAINER
   ---------------------------------------------------------------- */
.hero .container.hero-layout {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex !important;
  flex-direction: row;
  align-items: flex-start; /* align columns at the top for better balance */
  flex: 1 1 auto;       /* grows to fill viewport above bottom panels */
  min-height: 0;        /* allows flexbox shrink below content size */
  gap: 40px;            /* tighten column gap for a denser, premium layout */
  /* Add breathing room beneath the fixed header so headline and skill cards
     are not tucked under the navbar on wide screens. */
  padding: 84px 28px 0 !important;
}

.hero-left  {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;
  margin-top: 72px !important;
}

.hero-right {
  flex: 0 0 520px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  margin-top: 72px !important;
}

/* Responsive: stack columns on smaller screens to avoid horizontal overflow and keep the mobile menu visible */
@media (max-width: 991px) {
  .hero .container.hero-layout {
    flex-direction: column;
    gap: 20px;
    padding: 28px 16px 0 !important;
  }
  .hero-right {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    margin-top: 28px !important;
  }
  .hero-left {
    max-width: 100%;
    order: 1;
    margin-top: 52px !important;
  }
  .hero-headline .accent-word {
    font-size: clamp(20px, 8.5vw, 44px) !important;
  }
}

.hero-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ----------------------------------------------------------------
   6. BADGE
   ---------------------------------------------------------------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(25, 194, 193, 0.09) !important;
  border: 1px solid rgba(25, 194, 193, 0.38) !important;
  border-radius: var(--h-radius-pill) !important;
  padding: 7px 18px 7px 14px !important;
  font-size: 11px !important;
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--h-accent) !important;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 var(--h-accent-glow);
  animation: badgePulse 3.2s ease-in-out infinite;
  margin-bottom: 14px !important;
  position: relative;
  overflow: hidden;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--h-accent);
  animation: dotBlink 2s ease-in-out infinite;
}

.badge-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 10% 50%, rgba(25, 194, 193, 0.12), transparent 60%);
  pointer-events: none;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 194, 193, 0.30); }
  50%       { box-shadow: 0 0 0 6px rgba(25, 194, 193, 0); }
}

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

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


/* ----------------------------------------------------------------
   7. HEADLINE — SOFTWARE accent word
   ---------------------------------------------------------------- */
.hero-headline {
  /* Base size scales smoothly across breakpoints; kept bold and condensed. */
  font-size: clamp(24px, 2.6vw, 40px) !important;
  font-weight: 900 !important;
  /* Slightly tighter than default, but increased from near-collapse to avoid overlap. */
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  color: var(--h-text) !important;
  text-transform: uppercase;
  margin: 0 0 12px !important; /* reduce vertical footprint */
  max-width: none !important;
}

/* Make the first line ("Hi, I'm Sim") slightly smaller than the job title.
   A specific span.hero-intro is used for deterministic cross-browser control. */
.hero-headline .hero-intro {
  display: inline-block;
  font-size: clamp(14px, 1.2vw, 22px) !important;
  font-weight: 700 !important;
  opacity: 0.95;
  letter-spacing: 0; /* avoid uppercase tightening on intro */
  text-transform: none; /* preserve natural casing for a friendly intro */
}

.hero-headline .accent-word {
  color: var(--h-accent);
  /* Accent word scaled to be the visual focal point. Uses clamp so it grows on large screens. */
  font-size: clamp(22px, 4.4vw, 56px) !important;
  line-height: 0.98 !important; /* tighten to pull the accent visually together */
  text-shadow:
    0 0 40px rgba(25, 194, 193, 0.40),
    0 0 80px rgba(25, 194, 193, 0.15);
  display: inline-block;
}


/* ----------------------------------------------------------------
   8. ROLE TYPING LINE
   ---------------------------------------------------------------- */
.hero-role {
  min-height: 26px;
  font-size: 14px !important;
  color: var(--h-text-2) !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.02em;
}

#heroRole::after {
  content: '|';
  color: var(--h-accent);
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 2px;
}

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


/* ----------------------------------------------------------------
   9. SUBCOPY
   ---------------------------------------------------------------- */
.hero-subcopy {
  font-size: 15px !important;
  line-height: 1.45 !important; /* tighter, still readable — secondary to headline */
  color: var(--h-text-2) !important;
  max-width: 520px;
  margin-bottom: 14px !important;
}

.hero-skills-panel {
  margin-top: 8px !important;
  margin-bottom: 18px !important;
  max-width: 540px;
  background: rgba(10, 18, 36, 0.72) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-radius-md) !important;
  padding: 16px !important;
  backdrop-filter: blur(12px);
}

.hero-skills-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hero-skills-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h-text);
}

.hero-skills-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--h-text-3);
  letter-spacing: 0.04em;
}

.hero-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-skill-card {
  background: rgba(15, 26, 46, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--h-radius-sm);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-skill-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--h-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.hero-skill-card-title i {
  color: var(--h-accent);
}

.hero-skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-skill-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(25, 194, 193, 0.08);
  border: 1px solid rgba(25, 194, 193, 0.18);
  color: var(--h-text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ----------------------------------------------------------------
   10. CTA BUTTONS
   ---------------------------------------------------------------- */
.hero-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
}

.hero-cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  background: var(--h-accent) !important;
  color: #fff !important;
  border: 2px solid var(--h-accent) !important;
  border-radius: var(--h-radius-sm) !important;
  padding: 13px 26px !important;
  font-size: 13px !important;
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  min-height: 44px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 20px rgba(25, 194, 193, 0.22);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 160ms ease !important;
}

.hero-cta-primary:hover,
.hero-cta-primary:focus {
  background: var(--h-accent-dk) !important;
  border-color: var(--h-accent-dk) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(25, 194, 193, 0.40) !important;
  transform: translateY(-2px) !important;
}

.hero-cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: var(--h-radius-sm) !important;
  padding: 13px 24px !important;
  font-size: 13px !important;
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  min-height: 44px !important;
  line-height: 1 !important;
  backdrop-filter: blur(8px);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 160ms ease !important;
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

.hero-btn-icon {
  font-size: 13px !important;
  opacity: 0.88;
  transition: transform 200ms ease;
}
.hero-cta-primary:hover .hero-btn-icon  { transform: translateX(3px); }
.hero-cta-secondary:hover .hero-btn-icon { transform: translateY(2px); }

.hero-cv-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px;
  color: var(--h-text-2) !important;
  font-size: 14px !important;
  font-weight: 600;
  text-decoration: none !important;
  padding: 6px 0 !important;
  height: auto !important;
  position: relative;
  letter-spacing: 0.02em;
}

.hero-cv-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--h-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.hero-cv-link:hover,
.hero-cv-link:focus {
  color: #fff !important;
}

.hero-cv-link:hover::after,
.hero-cv-link:focus::after {
  transform: scaleX(1);
}

.hero-cta-primary:active,
.hero-cta-secondary:active {
  transform: translateY(0) !important;
}

@media (max-width: 767px) {
  .hero-actions         { flex-direction: column; align-items: stretch !important; }
  .hero-actions > *     { width: 100%; justify-content: center !important; }
  .hero {
    overflow-x: hidden !important;
  }
  .hero .container.hero-layout {
    gap: 24px;
    padding: 84px 16px 0 !important;
  }
  .hero-left,
  .hero-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero-subcopy {
    max-width: 100%;
  }

  .hero-skills-panel {
    max-width: 100%;
    padding: 14px !important;
  }

  .hero-skills-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-skills-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------
   11. STATUS BAR — glowing left accent border
   ---------------------------------------------------------------- */
.hero-status-bar {
  margin-top: 18px;
  margin-bottom: 32px;
  padding: 12px 16px;
  max-width: 540px;
  border-left: 3px solid var(--h-accent);
  background: rgba(25, 194, 193, 0.05);
  border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0;
  box-shadow: -4px 0 20px rgba(25, 194, 193, 0.16), inset 0 0 0 1px rgba(25, 194, 193, 0.08);
}

.hero-recruiter-cta {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--h-text-2) !important;
  line-height: 1.5 !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero-recruiter-cta br {
  display: none;
}

.hero-recruiter-cta::after {
  content: ' ';
  white-space: pre;
}


/* ----------------------------------------------------------------
   12. TRUST / STATISTICS GRID
   ---------------------------------------------------------------- */
.hero-trust-grid {
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  background: rgba(10, 18, 36, 0.70) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-radius-md) !important;
  padding: 16px !important;
  backdrop-filter: blur(12px);
}

.trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 10px !important;
  background: rgba(15, 26, 46, 0.60) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--h-radius-sm) !important;
  transition: border-color 240ms ease, transform 200ms ease;
}

.trust-item:hover {
  border-color: var(--h-border-accent) !important;
  transform: translateY(-2px);
}

.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 194, 193, 0.10);
  border: 1px solid rgba(25, 194, 193, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: var(--h-accent);
  font-size: 16px;
  flex-shrink: 0;
}

.trust-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--h-text) !important;
  line-height: 1.1;
}

.trust-label {
  font-size: 11px !important;
  color: var(--h-text-2) !important;
  margin-top: 5px !important;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .hero-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .hero-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ----------------------------------------------------------------
   13. TECH STACK PILLS
   ---------------------------------------------------------------- */
.hero-tech-pills {
  margin-top: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: rgba(10, 18, 36, 0.70) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-radius-md) !important;
  padding: 16px !important;
  backdrop-filter: blur(12px);
}

.hero-tech-pills .pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 13px !important;
  height: auto !important;
  min-width: auto !important;
  border-radius: var(--h-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--h-text-2) !important;
  background: rgba(15, 26, 46, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
  cursor: default;
}

/* Technology icon badges (match hero skill cards) */
.pill-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

.pill-icon.fa { font-size: 11px !important; }

.pill-icon--csharp { background: linear-gradient(135deg, #5a1a6a, #9b4dca); }
.pill-icon--net    { background: linear-gradient(135deg, #6d28d9, #7c3aed); font-size: 8px; }
.pill-icon--aspnet { background: linear-gradient(135deg, #0050a0, #0078d4); font-size: 9px; }
.pill-icon--angular{ background: linear-gradient(135deg, #b91c1c, #dd0031); font-size: 12px; font-weight: 900; }
.pill-icon--ts     { background: linear-gradient(135deg, #1d4ed8, #3178c6); }
.pill-icon--sql    { background: linear-gradient(135deg, #991b1b, #cc2233); }
.pill-icon--azure  { background: linear-gradient(135deg, #0050a0, #0078d4); font-size: 9px; }
.pill-icon--ef     { background: linear-gradient(135deg, #5b21b6, #7c5cff); font-size: 9px; }
.pill-icon--git    { background: linear-gradient(135deg, #333, #555); }
.pill-icon--docker { background: linear-gradient(135deg, #1565c0, #2496ed); }
.pill-icon--rest   { background: linear-gradient(135deg, #0e7b7a, #19c2c1); font-size: 9px; }
.pill-icon--arch   { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.pill-icon--micro  { background: linear-gradient(135deg, #065f46, #19c2c1); }
.pill-icon--js     { background: linear-gradient(135deg, #f59e0b, #facc15); color: #1f2937 !important; font-size: 9px; }
.pill-icon--python { background: linear-gradient(135deg, #3776ab, #ffd43b); color: #0f172a !important; }
.pill-icon--react  { background: linear-gradient(135deg, #0ea5e9, #22d3ee); color: #0f172a !important; }
.pill-icon--node   { background: linear-gradient(135deg, #15803d, #22c55e); }
.pill-icon--mongodb{ background: linear-gradient(135deg, #166534, #22c55e); }
.pill-icon--html   { background: linear-gradient(135deg, #c2410c, #f97316); }
.pill-icon--css    { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.pill-icon--bootstrap { background: linear-gradient(135deg, #5b21b6, #a855f7); }
.pill-icon--photoshop { background: linear-gradient(135deg, #0f172a, #2563eb); color: #93c5fd !important; font-size: 8px; }

.hero-tech-pills .pill:hover {
  transform: translateY(-3px);
  border-color: var(--h-border-accent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff !important;
}

/* legacy dot markers removed in favor of icon badges */


/* ----------------------------------------------------------------
   14. AVAILABILITY / CONFIDENCE STRIP
   ---------------------------------------------------------------- */
.hero-confidence-strip {
  margin-top: 10px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: rgba(10, 18, 36, 0.70) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-radius-md) !important;
  padding: 0 !important;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.conf-section {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  flex: 1 1 0;
}

.conf-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
  align-self: stretch;
  flex-shrink: 0;
}

.conf-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(25, 194, 193, 0.10);
  border: 1px solid rgba(25, 194, 193, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--h-accent);
  font-size: 17px;
  flex-shrink: 0;
}

.conf-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conf-heading {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--h-text);
  letter-spacing: 0.02em;
}

.conf-detail {
  font-size: 12px;
  color: var(--h-text-2);
  letter-spacing: 0.01em;
  font-weight: 500;
}

@media (max-width: 767px) {
  .hero-confidence-strip { flex-direction: column !important; }
  .conf-divider           { width: 100%; height: 1px; align-self: auto; }
}


/* ----------------------------------------------------------------
   15. STACK CARDS — 3-column glassmorphism dashboard
   ---------------------------------------------------------------- */
.hero-right {
  flex: 0 0 540px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 8px;
  padding-bottom: 70px;
}

.stack-cards--3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 540px !important;
}

/* Centred singleton in row 4 */
.stack-card--center {
  grid-column: 2 !important;
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

/* Three orbital rings below Microservices card (explicit elements for reliability) */
.micro-orbits {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: -1;
}

.micro-orbit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  animation: ringPulse 3.3s ease-in-out infinite;
}

.micro-orbit--1 {
  top: 0;
  width: 190px;
  height: 30px;
  border: 1px solid rgba(25, 194, 193, 0.65);
  box-shadow: 0 0 12px rgba(25, 194, 193, 0.38), inset 0 0 10px rgba(25, 194, 193, 0.12);
}

.micro-orbit--2 {
  top: 10px;
  width: 255px;
  height: 42px;
  border: 1px solid rgba(25, 194, 193, 0.40);
  box-shadow: 0 0 16px rgba(25, 194, 193, 0.24);
  animation-delay: .18s;
}

.micro-orbit--3 {
  top: 20px;
  width: 320px;
  height: 54px;
  border: 1px solid rgba(25, 194, 193, 0.26);
  box-shadow: 0 0 20px rgba(25, 194, 193, 0.18);
  animation-delay: .36s;
}

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

/* Card shell */
.stack-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 15px !important;
  min-height: 80px !important;
  height: auto !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: var(--h-radius-md) !important;
  background: rgba(15, 24, 39, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(14px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-weight: normal !important;
  font-size: inherit !important;
  text-shadow: none !important;
  color: var(--h-text) !important;
  transition:
    transform 320ms cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 240ms ease,
    box-shadow 240ms ease !important;
  animation: floatCard 6s ease-in-out infinite;
  overflow: hidden;
}

/* Subtle inner top-light glint */
.stack-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  border-radius: var(--h-radius-md) var(--h-radius-md) 0 0;
  pointer-events: none;
}

.stack-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.stack-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: var(--h-border-accent) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(25, 194, 193, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Staggered float animation delays */
.stack-card:nth-child(1)  { animation-delay: 0s;    }
.stack-card:nth-child(2)  { animation-delay: 0.24s; }
.stack-card:nth-child(3)  { animation-delay: 0.48s; }
.stack-card:nth-child(4)  { animation-delay: 0.72s; }
.stack-card:nth-child(5)  { animation-delay: 0.96s; }
.stack-card:nth-child(6)  { animation-delay: 1.20s; }
.stack-card:nth-child(7)  { animation-delay: 1.44s; }
.stack-card:nth-child(8)  { animation-delay: 1.68s; }
.stack-card:nth-child(9)  { animation-delay: 1.92s; }
.stack-card:nth-child(10) { animation-delay: 2.16s; }

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

/* Stack-card hover must override float animation */
.stack-card:hover { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .stack-card { animation: none !important; }
  .micro-orbit { animation: none !important; }
}


/* ----------------------------------------------------------------
   15a. SC-ICON — coloured icon container inside each card
   ---------------------------------------------------------------- */
.sc-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

/* Per-technology icon colours matching reference palette */
.sc-icon--net     { background: linear-gradient(135deg, #6d28d9, #7c3aed); box-shadow: 0 4px 12px rgba(109, 40, 217, 0.40); }
.sc-icon--angular { background: linear-gradient(135deg, #b91c1c, #dd0031); box-shadow: 0 4px 12px rgba(221, 0, 49, 0.40); }
.sc-icon--azure   { background: linear-gradient(135deg, #0050a0, #0078d4); box-shadow: 0 4px 12px rgba(0, 120, 212, 0.40); }
.sc-icon--csharp  { background: linear-gradient(135deg, #5a1a6a, #9b4dca); box-shadow: 0 4px 12px rgba(155, 77, 202, 0.40); }
.sc-icon--rest    { background: linear-gradient(135deg, #0e7b7a, var(--h-accent)); box-shadow: 0 4px 12px rgba(25, 194, 193, 0.35); font-size: 16px; letter-spacing: -0.04em; }
.sc-icon--sql     { background: linear-gradient(135deg, #991b1b, #cc2233); box-shadow: 0 4px 12px rgba(204, 34, 51, 0.40); }
.sc-icon--arch    { background: linear-gradient(135deg, #0369a1, #0ea5e9); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.40); }
.sc-icon--git     { background: linear-gradient(135deg, #333, #555); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40); }
.sc-icon--docker  { background: linear-gradient(135deg, #1565c0, #2496ed); box-shadow: 0 4px 12px rgba(36, 150, 237, 0.40); }
.sc-icon--micro   { background: linear-gradient(135deg, #065f46, var(--h-accent)); box-shadow: 0 4px 12px rgba(25, 194, 193, 0.35); }

/* Icon symbol text / fa icons inside sc-icon */
.sc-icon span { line-height: 1; }
.sc-icon i    { font-size: 18px !important; color: #fff !important; }
.sc-icon--net span    { font-size: 11px; letter-spacing: 0; font-weight: 900; }
.sc-icon--angular span { font-size: 22px; font-weight: 900; }
.sc-icon--azure span   { font-size: 14px; font-weight: 900; }
.sc-icon--csharp span  { font-size: 14px; font-weight: 900; }
.sc-icon--rest span    { font-size: 17px; font-weight: 900; letter-spacing: -0.06em; }


/* ----------------------------------------------------------------
   15b. SC-INFO — text block inside each card
   ---------------------------------------------------------------- */
.sc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sc-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--h-text) !important;
  line-height: 1.2;
  white-space: normal;
}

.sc-desc {
  font-size: 11px !important;
  color: var(--h-text-3) !important;
  line-height: 1.35;
  white-space: normal;
}


/* ----------------------------------------------------------------
   16. SCROLL-REVEAL INSIDE HERO
   Overrides style-v2 / style-v3 for hero children — staggered fade-up
   ---------------------------------------------------------------- */
.hero .reveal-on-scroll {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition:
    opacity  0.65s cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  will-change: opacity, transform;
}

.hero .reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger hero-left children */
.hero-content-wrap .reveal-on-scroll:nth-child(1) { transition-delay: 0.00s !important; }
.hero-content-wrap .reveal-on-scroll:nth-child(2) { transition-delay: 0.10s !important; }
.hero-content-wrap .reveal-on-scroll:nth-child(3) { transition-delay: 0.20s !important; }
.hero-content-wrap .reveal-on-scroll:nth-child(4) { transition-delay: 0.30s !important; }
.hero-content-wrap .reveal-on-scroll:nth-child(5) { transition-delay: 0.40s !important; }
.hero-left > .reveal-on-scroll                     { transition-delay: 0.50s !important; }
.hero-left > .hero-tech-pills.reveal-on-scroll     { transition-delay: 0.60s !important; }
.hero-left > .hero-confidence-strip.reveal-on-scroll { transition-delay: 0.70s !important; }
.hero-right .reveal-on-scroll                      { transition-delay: 0.20s !important; }


/* ----------------------------------------------------------------
   17. HERO ARROW
   ---------------------------------------------------------------- */
.hero-arrow {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

.hero-arrow a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--h-border) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--h-text-2) !important;
  font-size: 16px !important;
  animation: arrowBounce 2s ease-in-out infinite;
  transition: border-color 200ms ease, background 200ms ease;
}

.hero-arrow a:hover {
  border-color: var(--h-accent) !important;
  background: rgba(25, 194, 193, 0.12) !important;
  color: var(--h-accent) !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-arrow a { animation: none !important; }
}


/* ----------------------------------------------------------------
   18. HERO BOTTOM PANELS (moved out of hero-left)
   ---------------------------------------------------------------- */
.hero-bottom {
  position: relative;
  z-index: 2;
  flex-shrink: 0;   /* never shrinks — always shows at bottom */
  width: 100%;
}

.hero-bottom-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 28px 24px;
}


/* ----------------------------------------------------------------
   19. RESPONSIVE
   ---------------------------------------------------------------- */

/* Large desktop — slight gap tightening */
@media (max-width: 1299px) {
  .hero .container.hero-layout { gap: 40px !important; }
  .hero-left  { max-width: 520px; }
  .hero-right { flex: 0 0 460px !important; }
  .stack-cards--3col { max-width: 460px !important; }
  .hero-bottom-container { padding: 0 24px 16px; }
}

/* Short desktop screens (laptops with 768-850px height) — allow scroll */
@media (max-height: 820px) and (min-width: 1024px) {
  .hero {
    height: auto !important;
    min-height: 100vh !important;
  }
  .hero .container.hero-layout {
    flex: 0 0 auto !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
  .hero-right { padding-bottom: 40px; }
}

/* Tablet — stack columns, auto height */
@media (max-width: 1023px) {
  .hero {
    height: auto !important;
    min-height: 100svh !important;   /* svh respects browser chrome */
    overflow: visible !important;
  }
  .hero .container.hero-layout {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
    padding: 80px 24px 16px !important;
  }
  .hero-left  { max-width: 100% !important; flex: 1 1 auto !important; }
  .hero-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }
  .stack-cards--3col {
    max-width: 520px !important;
    margin: 0 auto;
  }
  .micro-orbits {
    display: none !important;
  }
  .hero-bottom-container { padding: 0 24px 16px; }
}

/* Mobile — single column, no stack cards */
@media (max-width: 767px) {
  .hero {
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
  }
  .hero .container.hero-layout { padding: 76px 18px 12px !important; }
  .hero-headline { font-size: clamp(26px, 8.5vw, 42px) !important; }
  .hero-right { display: none !important; }
  .hero-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-confidence-strip { flex-direction: column !important; }
  .conf-divider { width: 100% !important; height: 1px !important; }
  .hero-bottom-container { padding: 0 18px 18px; }
}

/* Small mobile */
@media (max-width: 479px) {
  .hero-headline { font-size: clamp(24px, 7.5vw, 36px) !important; }
  .hero-trust-grid { grid-template-columns: 1fr 1fr !important; }
  .conf-section { padding: 12px 16px; }
}


/* ================================================================
   20. THEME TRANSITIONS
   Smooth colour crossfade when the toggle fires.
   Applied only to properties that change — avoids layout jank.
   ================================================================ */
.hero,
.hero-headline,
.hero-role,
.hero-subcopy,
.hero-recruiter-cta,
.hero-badge,
.hero-status-bar,
.hero-trust-grid,
.trust-item,
.trust-value,
.trust-label,
.hero-tech-pills,
.hero-tech-pills .pill,
.hero-confidence-strip,
.conf-heading,
.conf-detail,
.conf-divider,
.stack-card,
.sc-title,
.sc-desc,
.hero-arrow a {
  transition:
    background-color 380ms ease,
    background      380ms ease,
    border-color    380ms ease,
    color           380ms ease,
    box-shadow      380ms ease,
    opacity         380ms ease !important;
}

/* ================================================================
   21. LIGHT MODE
   Triggered by absence of body.theme-dark (the default state).
   Remaps all --h-* tokens and overrides hardcoded rgba() values.
   ================================================================ */

/* ---- Token remap ---- */
body:not(.theme-dark) .hero {
  --h-bg:            #eef4fb;
  --h-surface:       #ffffff;
  --h-surface-2:     #f4f8ff;
  --h-border:        rgba(0, 0, 0, 0.09);
  --h-border-accent: rgba(25, 194, 193, 0.32);
  --h-text:          #0d1021;
  --h-text-2:        #4a5568;
  --h-text-3:        rgba(14, 17, 33, 0.48);
}

/* ---- Hero shell ---- */
body:not(.theme-dark) .hero {
  background-color: var(--h-bg) !important;
}

/* ---- Blueprint grid — light teal lines on pale blue-white ---- */
body:not(.theme-dark) .hero.background-overlay::before {
  background-image:
    linear-gradient(
      160deg,
      rgba(238, 244, 251, 0.90)  0%,
      rgba(244, 250, 255, 0.76) 45%,
      rgba(240, 248, 255, 0.92) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><rect width='80' height='80' fill='%23eaf2fb'/><g stroke='%2319c2c1' stroke-opacity='0.10' stroke-width='0.6'><path d='M0 0h80M0 20h80M0 40h80M0 60h80M0 80h80'/><path d='M0 0v80M20 0v80M40 0v80M60 0v80M80 0v80'/></g></svg>") !important;
}

/* ---- Glow orbs — subtler on light ---- */
body:not(.theme-dark) .hero::after {
  background:
    radial-gradient(ellipse 600px 400px at 70% 30%, rgba(25, 194, 193, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 15% 75%, rgba(25, 100, 193, 0.04) 0%, transparent 70%);
}
body:not(.theme-dark) .hero-bg-orb--1 {
  background: radial-gradient(circle, rgba(25, 194, 193, 0.05) 0%, transparent 70%);
}
body:not(.theme-dark) .hero-bg-orb--2 {
  background: radial-gradient(circle, rgba(25, 80, 193, 0.04) 0%, transparent 70%);
}

/* ---- Particle canvas — lighter opacity on light bg ---- */
body:not(.theme-dark) .hero-canvas { opacity: 0.22; }

/* ---- Headline ---- */
body:not(.theme-dark) .hero-headline {
  color: var(--h-text) !important;
}

/* ---- Role typing ---- */
body:not(.theme-dark) .hero-role {
  color: var(--h-text-2) !important;
}

/* ---- Subcopy ---- */
body:not(.theme-dark) .hero-subcopy {
  color: var(--h-text-2) !important;
}

/* ---- Badge ---- */
body:not(.theme-dark) .hero-badge {
  background: rgba(25, 194, 193, 0.08) !important;
  border-color: rgba(25, 194, 193, 0.32) !important;
}

/* ---- Primary CTA (stays teal, no change needed) ---- */

/* ---- Secondary CTA ---- */
body:not(.theme-dark) .hero-cta-secondary {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: var(--h-text) !important;
}
body:not(.theme-dark) .hero-cta-secondary:hover,
body:not(.theme-dark) .hero-cta-secondary:focus {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.28) !important;
  color: var(--h-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

/* ---- GitHub link ---- */
body:not(.theme-dark) .hero-cv-link {
  color: var(--h-text-2) !important;
}
body:not(.theme-dark) .hero-cv-link:hover,
body:not(.theme-dark) .hero-cv-link:focus {
  color: var(--h-text) !important;
}

/* ---- Status bar ---- */
body:not(.theme-dark) .hero-status-bar {
  background: rgba(25, 194, 193, 0.06);
  box-shadow: -4px 0 20px rgba(25, 194, 193, 0.12), inset 0 0 0 1px rgba(25, 194, 193, 0.12);
  border-left-color: var(--h-accent);
}
body:not(.theme-dark) .hero-recruiter-cta {
  color: #374151 !important;
  font-weight: 600;
}

/* ---- Trust / stats grid ---- */
body:not(.theme-dark) .hero-trust-grid {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
body:not(.theme-dark) .trust-item {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
body:not(.theme-dark) .trust-item:hover {
  border-color: var(--h-border-accent) !important;
}
body:not(.theme-dark) .trust-value {
  color: var(--h-text) !important;
}
body:not(.theme-dark) .trust-label {
  color: #4a5568 !important;
  font-weight: 600;
}
body:not(.theme-dark) .trust-icon {
  background: rgba(25, 194, 193, 0.08);
  border-color: rgba(25, 194, 193, 0.20);
}

/* ---- Tech stack pills ---- */
body:not(.theme-dark) .hero-tech-pills {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
body:not(.theme-dark) .hero-tech-pills .pill {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
  font-weight: 600;
}
body:not(.theme-dark) .hero-tech-pills .pill:hover {
  border-color: var(--h-border-accent) !important;
  color: #0d1021 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* ---- Availability strip ---- */
body:not(.theme-dark) .hero-confidence-strip {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
body:not(.theme-dark) .conf-heading {
  color: #0d1021 !important;
  font-weight: 700;
}
body:not(.theme-dark) .conf-detail {
  color: #374151 !important;
  font-weight: 600;
}
body:not(.theme-dark) .conf-divider {
  background: rgba(0, 0, 0, 0.07);
}
body:not(.theme-dark) .conf-icon {
  background: rgba(25, 194, 193, 0.08);
  border-color: rgba(25, 194, 193, 0.20);
}

/* ---- Stack cards (right column) ---- */
body:not(.theme-dark) .stack-card {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body:not(.theme-dark) .stack-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
}
body:not(.theme-dark) .stack-card:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--h-border-accent) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(25, 194, 193, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
body:not(.theme-dark) .sc-title {
  color: var(--h-text) !important;
}
body:not(.theme-dark) .sc-desc {
  color: var(--h-text-2) !important;
}

/* ---- Scroll-down arrow ---- */
body:not(.theme-dark) .hero-arrow a {
  border-color: rgba(0, 0, 0, 0.14) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--h-text-2) !important;
}
body:not(.theme-dark) .hero-arrow a:hover {
  border-color: var(--h-accent) !important;
  background: rgba(25, 194, 193, 0.08) !important;
  color: var(--h-accent) !important;
}


/* ================================================================
   22. LIGHT MODE — NAVIGATION
   Clean unified navbar with frosted glass and integrated logo
   ================================================================ */

/* Nav bar shell — unified white background */
body:not(.theme-dark) .site-navigation {
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.07) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Adjust navbar height for cleaner look */
body:not(.theme-dark) .site-navigation .navbar-nav {
  min-height: 64px !important;
}

/* Kill the logo background extension (2000px pseudo-element) */
body:not(.theme-dark) .site-logo {
  background-color: transparent !important;
  height: 64px !important;
}

body:not(.theme-dark) .site-logo::before {
  display: none !important;
}

/* Logo text — dark navy on light nav */
body:not(.theme-dark) .site-logo a {
  color: #0d1021 !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 24px !important;
  margin-top: 19px !important;
}

/* Nav links */
body:not(.theme-dark) .site-navigation .navbar-nav > li > a {
  color: rgba(14, 17, 33, 0.72) !important;
  font-weight: 600;
  font-size: 13px !important;
  letter-spacing: 0.03em;
}

body:not(.theme-dark) .site-navigation .navbar-nav > li > a:hover,
body:not(.theme-dark) .site-navigation .nav > li > a:hover {
  color: #19c2c1 !important;
  border-bottom-color: #19c2c1 !important;
  background-color: transparent !important;
}

body:not(.theme-dark) .site-navigation .navbar-nav > li.active > a,
body:not(.theme-dark) .site-navigation .nav > li.active > a {
  color: #0d1021 !important;
  border-bottom-color: #19c2c1 !important;
  background-color: transparent !important;
}

/* Theme toggle button */
body:not(.theme-dark) .site-navigation .theme-toggle {
  color: rgba(14, 17, 33, 0.65) !important;
  border-color: rgba(14, 17, 33, 0.18) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

body:not(.theme-dark) .site-navigation .theme-toggle:hover {
  background: rgba(25, 194, 193, 0.10) !important;
  border-color: rgba(25, 194, 193, 0.40) !important;
  color: #19c2c1 !important;
}

/* Contact CTA button — keep teal accent */
body:not(.theme-dark) .site-navigation .nav-cta-item a.nav-cta {
  background: #19c2c1 !important;
  border-color: #19c2c1 !important;
  color: #ffffff !important;
}

body:not(.theme-dark) .site-navigation .nav-cta-item a.nav-cta:hover {
  background: #13a09f !important;
  border-color: #13a09f !important;
}

/* Mobile nav dropdown */
@media (max-width: 767px) {
  body:not(.theme-dark) .site-navigation .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  }

  body:not(.theme-dark) .site-navigation .navbar-nav > li > a {
    color: rgba(14, 17, 33, 0.78) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  body:not(.theme-dark) .site-navigation .navbar-nav > li > a:hover {
    background: rgba(25, 194, 193, 0.06) !important;
    color: #19c2c1 !important;
  }

  body:not(.theme-dark) .site-navigation .navbar-toggle {
    border-color: rgba(0, 0, 0, 0.22) !important;
  }

  body:not(.theme-dark) .site-navigation .navbar-toggle .icon-bar {
    background-color: rgba(14, 17, 33, 0.75);
  }
}


/* ================================================================
   23. SKILLS & GROWTH — reference-matched hero continuation
   ================================================================ */
.hero-bottom {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 !important;
  padding: 0 28px 24px !important;
}

.hero-bottom-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.skills-growth-panel {
  --sg-panel-bg: rgba(255, 255, 255, 0.78);
  --sg-panel-border: rgba(14, 17, 33, 0.08);
  --sg-panel-shadow: 0 18px 54px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255,255,255,0.72) inset;
  --sg-card-bg: rgba(255, 255, 255, 0.58);
  --sg-card-border: rgba(14, 17, 33, 0.08);
  --sg-chip-bg: rgba(255, 255, 255, 0.74);
  --sg-chip-border: rgba(14, 17, 33, 0.08);
  --sg-text: #0d1021;
  --sg-text-2: #4e5a70;
  --sg-text-3: rgba(78, 90, 112, 0.76);
  position: relative;
  overflow: hidden;
  background: var(--sg-panel-bg);
  border: 1px solid var(--sg-panel-border);
  border-radius: 18px;
  box-shadow: var(--sg-panel-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 20px 22px 18px;
}

.skills-growth-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(25, 194, 193, 0.12), transparent 65%),
    radial-gradient(420px 220px at 84% 18%, rgba(124, 92, 255, 0.08), transparent 72%);
}

.skills-growth-panel > * {
  position: relative;
  z-index: 1;
}

.skills-growth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(14, 17, 33, 0.08);
}

.skills-growth-title-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.skills-growth-logo {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(25, 194, 193, 0.74);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.90), rgba(25,194,193,0.08) 55%, rgba(124,92,255,0.10));
  box-shadow: 0 0 0 5px rgba(25,194,193,0.07), 0 10px 26px rgba(25,194,193,0.16);
  color: var(--h-accent);
  font-family: 'Varela', 'Inter', sans-serif;
  line-height: 1;
}

.skills-growth-logo span {
  font-size: 25px;
  font-style: italic;
  letter-spacing: -0.05em;
}

.skills-growth-logo small {
  margin-top: 2px;
  font-size: 11px;
  color: #7c5cff;
  font-weight: 800;
}

.skills-growth-title-wrap h2 {
  margin: 0 0 5px !important;
  color: var(--sg-text) !important;
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-size: clamp(21px, 2vw, 32px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

.skills-growth-title-wrap h2::after {
  display: none !important;
}

.skills-growth-title-wrap h2 span {
  color: var(--h-accent);
}

.skills-growth-title-wrap h2 em {
  color: #7c5cff;
  font-style: normal;
}

.skills-growth-title-wrap p {
  margin: 0 !important;
  color: var(--sg-text-2) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
}

.skills-growth-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  max-width: 330px;
  padding: 12px 16px;
  border: 1px solid rgba(124, 92, 255, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--sg-text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.skills-growth-note i {
  color: var(--h-accent);
  font-size: 18px;
  flex: 0 0 auto;
}

.skills-growth-note span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.skills-growth-note strong {
  display: block;
  color: var(--sg-text);
  font-size: 12px;
  font-weight: 800;
}

.skills-growth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.skills-growth-column {
  padding: 20px 20px 18px;
  min-width: 0;
  border-right: 1px solid rgba(14, 17, 33, 0.08);
}

.skills-growth-column:last-child {
  border-right: 0;
}

.skills-growth-column-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}

.skills-growth-column-title > i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border-radius: 9px;
  background: rgba(25, 194, 193, 0.10);
  color: var(--h-accent);
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(25,194,193,0.22);
}

.skills-growth-column-title strong {
  display: block;
  color: var(--sg-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.skills-growth-column-title span {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(25, 194, 193, 0.10);
  color: var(--h-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.skills-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 8px;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 9px 4px 5px;
  border-radius: 9px;
  background: var(--sg-chip-bg);
  border: 1px solid var(--sg-chip-border);
  color: var(--sg-text-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255,255,255,0.65);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.skill-chip .pill-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 5px;
  font-size: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.skill-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(25, 194, 193, 0.30);
  color: var(--sg-text);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.70);
}

.skills-growth-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border: 1px solid rgba(14, 17, 33, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.42);
}

.skills-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 18px 22px;
  border-right: 1px solid rgba(14, 17, 33, 0.08);
}

.skills-stat-card:last-child {
  border-right: 0;
}

.skills-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(25, 194, 193, 0.10);
  border: 1px solid rgba(25, 194, 193, 0.20);
  color: var(--h-accent);
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(25,194,193,0.12);
}

.skills-stat-card strong {
  display: block;
  color: var(--sg-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.skills-stat-card span {
  display: block;
  margin-top: 3px;
  color: var(--sg-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.skills-stat-card small {
  display: block;
  margin-top: 3px;
  color: var(--sg-text-3);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
}

body.theme-dark .skills-growth-panel {
  --sg-panel-bg: rgba(10, 18, 36, 0.76);
  --sg-panel-border: rgba(255, 255, 255, 0.08);
  --sg-panel-shadow: 0 22px 64px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.035);
  --sg-card-bg: rgba(15, 26, 46, 0.72);
  --sg-card-border: rgba(255, 255, 255, 0.08);
  --sg-chip-bg: rgba(15, 26, 46, 0.82);
  --sg-chip-border: rgba(255, 255, 255, 0.075);
  --sg-text: #ffffff;
  --sg-text-2: #b5c2d3;
  --sg-text-3: rgba(255, 255, 255, 0.58);
}

body.theme-dark .skills-growth-header,
body.theme-dark .skills-growth-column,
body.theme-dark .skills-growth-stats,
body.theme-dark .skills-stat-card {
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .skills-growth-note,
body.theme-dark .skills-growth-stats {
  background: rgba(15, 26, 46, 0.62);
}

body.theme-dark .skill-chip:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

@media (max-width: 1199px) {
  .hero-bottom {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .skills-growth-panel {
    padding: 18px 18px 16px;
  }

  .skills-growth-column {
    padding: 18px 14px 16px;
  }

  .skill-chip {
    font-size: 10.5px;
    padding-right: 8px;
  }

  .skills-stat-card {
    padding: 16px 14px;
    gap: 12px;
  }
}

@media (max-width: 991px) {
  .skills-growth-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .skills-growth-note {
    width: 100%;
    max-width: none;
  }

  .skills-growth-grid {
    grid-template-columns: 1fr;
  }

  .skills-growth-column {
    border-right: 0;
    border-bottom: 1px solid rgba(14, 17, 33, 0.08);
    padding: 18px 4px 18px;
  }

  .skills-growth-column:last-child {
    border-bottom: 0;
  }

  body.theme-dark .skills-growth-column {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .skills-growth-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skills-stat-card:nth-child(2) {
    border-right: 0;
  }

  .skills-stat-card:nth-child(1),
  .skills-stat-card:nth-child(2) {
    border-bottom: 1px solid rgba(14, 17, 33, 0.08);
  }

  body.theme-dark .skills-stat-card:nth-child(1),
  body.theme-dark .skills-stat-card:nth-child(2) {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 767px) {
  .hero-bottom {
    padding: 0 14px 18px !important;
  }

  .skills-growth-panel {
    border-radius: 16px;
    padding: 16px 14px 14px;
  }

  .skills-growth-title-wrap {
    align-items: flex-start;
    gap: 12px;
  }

  .skills-growth-logo {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .skills-growth-logo span {
    font-size: 20px;
  }

  .skills-growth-title-wrap h2 {
    font-size: clamp(19px, 6vw, 26px) !important;
    line-height: 1.08 !important;
  }

  .skills-growth-title-wrap p,
  .skills-growth-note span,
  .skills-growth-note strong {
    font-size: 11px !important;
  }

  .skills-chip-list {
    gap: 8px 7px;
  }

  .skill-chip {
    min-height: 27px;
    font-size: 10px;
  }

  .skills-growth-stats {
    grid-template-columns: 1fr;
  }

  .skills-stat-card,
  .skills-stat-card:nth-child(2) {
    border-right: 0;
  }

  .skills-stat-card {
    min-height: 76px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(14, 17, 33, 0.08);
  }

  .skills-stat-card:last-child {
    border-bottom: 0;
  }

  .skills-stat-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}