body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  background: #18191A;
  color: #F1F1F1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
  gap: 1rem;
  font-size: 16px;
  overflow-x: hidden;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 7rem;
  z-index: 1000;
  margin-left: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 300px;
  width: 260px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #191A1D;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 0.8rem;
  border: 1.5px solid #232426;
  transform: none;
  visibility: visible;
  gap: 0;
}

@media (max-width: 1100px) {
  .sidebar {
    left: auto !important;
    right: -100%;
    visibility: hidden;
    transition: right 0.3s ease, visibility 0.3s ease;
  }
  .sidebar.active {
    right: 0;
    visibility: visible;
  }
}

/* Sidebar profile image and status dot */
.profile-pic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3rem auto 0.5rem;
  width: 100%;
}
.profile-pic-squared {
  position: relative;
  width: 80px;
  height: 80px;
  background: #232526;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-pic-squared img {
  width: 85%;
  height: 85%;
  border-radius: 16px;
  object-fit: cover;
}

/* Remove the glow animations and hover effects */
@keyframes sidebar-photo-glow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: none;
  }
}

.profile-pic-squared:hover {
  transform: none;
  box-shadow: none;
}

.profile-pic-squared:hover img {
  border-color: transparent;
  transform: none;
}

.status-dot {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 18px;
  height: 18px;
  background: #19ff19;
  border: 3px solid #232526;
  border-radius: 50%;
}

.sidebar h2 {
  margin: 0.1rem 0;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}
.sidebar-title-pill {
  display: inline-block;
  background: #232526;
  color: #FFD600;
  font-weight: 500;
  border-radius: 20px;
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  margin: 0.2rem auto 0.4rem;
  text-align: center;
  transition: all 0.3s ease;
  animation: title-glow 2s ease-in-out infinite alternate;
}

@keyframes title-glow {
  from {
    text-shadow: 0 0 10px rgba(255, 214, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 214, 0, 0.2);
  }
  to {
    text-shadow: 0 0 20px rgba(255, 214, 0, 0.5),
                 0 0 30px rgba(255, 214, 0, 0.3);
    box-shadow: 0 0 25px rgba(255, 214, 0, 0.3),
                0 0 35px rgba(255, 214, 0, 0.2);
  }
}

.sidebar-title-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255, 214, 0, 0.4);
  text-shadow: 0 0 15px rgba(255, 214, 0, 0.6);
}

.sidebar-divider {
  border: none;
  border-top: 1px solid #333;
  margin: 0.5rem 0;
  width: 80%;
}

.contact-info {
  width: 100%;
  margin-bottom: 0.5rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #232526;
  border-radius: 10px;
  padding: 0.5rem;
  margin-bottom: 0.35rem;
  transition: transform 0.18s, box-shadow 0.18s;
}
.contact-item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(255,214,0,0.13);
}
.contact-icon img {
  width: 32px;
  height: 32px;
  filter: brightness(1) sepia(1) hue-rotate(45deg) saturate(8) brightness(1.2);
}
.contact-label {
  color: #FFD600;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.contact-value {
  color: #F1F1F1;
  font-size: 0.82rem;
  font-weight: 500;
}

.sidebar-socials {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.2rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.sidebar-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  background: #232526;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
  margin-bottom: 0.5rem;
  z-index: 2;
}

/* Add tooltip styles */
.sidebar-socials a::after {
  content: "Click to get in touch";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #232526;
  color: #FFD600;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 1000;
  max-width: 90vw;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .sidebar-socials a::after {
    font-size: 11px;
    padding: 6px 8px;
    bottom: -32px;
    max-width: 70vw;
  }
  .sidebar-socials a::before {
    bottom: -12px;
  }
}

@media (max-width: 400px) {
  .sidebar-socials a::after {
    font-size: 9px;
    padding: 4px 6px;
    bottom: -26px;
    max-width: 60vw;
  }
  .sidebar-socials a::before {
    bottom: -8px;
  }
}

.sidebar-socials a:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: -45px;
}

/* Adjust the tooltip arrow */
.sidebar-socials a::before {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #232526;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.sidebar-socials a:hover::before {
  opacity: 1;
  visibility: visible;
  bottom: -20px;
}

/* LinkedIn specific glow */
.sidebar-socials a[aria-label="LinkedIn"]:hover {
  transform: scale(1.13);
  box-shadow: 0 0 15px rgba(10, 102, 194, 0.5);
}

/* GitHub specific glow */
.sidebar-socials a[aria-label="GitHub"]:hover {
  transform: scale(1.13);
  box-shadow: 0 0 15px rgba(255, 214, 0, 0.5);
}

/* WhatsApp specific glow */
.sidebar-socials a[aria-label="WhatsApp"]:hover {
  transform: scale(1.13);
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
}

.sidebar-socials svg {
  width: 20px;
  height: 20px;
  display: block;
  transition: all 0.3s ease;
}
.sidebar-socials a:hover svg {
  transform: scale(1.1);
}

/* Add pulsing glow animation */
@keyframes iconGlow {
  0% {
    box-shadow: 0 0 5px rgba(255, 214, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 214, 0, 0.5),
                0 0 25px rgba(255, 214, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 214, 0, 0.3);
  }
}
.sidebar-socials a {
  animation: iconGlow 2s infinite;
}

.main-content {
  margin-left: 285px;
  padding-top: 2.8rem;
  padding-right: 50px;
  width: calc(100% - 285px);
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* Add smooth scrolling behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

/* Multi-page: each page owns one section — always visible */
section {
  min-height: auto;
  padding: 0;
  position: relative;
  display: block;
  animation: fadeInUp 0.4s ease both;
}

/* Update navbar styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #18191A;
  padding: 0.8rem 0;
  z-index: 999;
  border-bottom: 1px solid #232426;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding-left: 285px;
}

.navbar a {
  color: #F1F1F1;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.navbar a:hover {
  color: #FFD600;
}

.navbar a.active {
  background: #232426;
  color: #FFD600;
}

/* ---------- Sidebar nav (mobile drawer menu) ---------- */
.sidebar-nav { display: none; }
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sidebar-nav li { margin: 0; }
.sidebar-nav a {
  display: block;
  padding: 0.75rem 1rem;
  color: #F1F1F1;
  text-decoration: none;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-weight: 600;
  font-size: 0.98rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sidebar-nav a:hover {
  background: rgba(255, 214, 0, 0.08);
  color: #FFD600;
  border-left-color: #FFD600;
}
.sidebar-nav a.active {
  background: rgba(255, 214, 0, 0.12);
  color: #FFD600;
  border-left-color: #FFD600;
}

@media (max-width: 1100px) {
  .sidebar-nav { display: block; }
  .navbar { display: none; }
}

/* ---------- First-visit intro splash (home only, two slides) ---------- */
html.intro-skip .intro-splash { display: none !important; }
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease;
  background: #0a0b0d;
}
.intro-splash.active { opacity: 1; pointer-events: auto; }
.intro-splash.leaving { opacity: 0; pointer-events: none; }

.intro-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  overflow: hidden;
}
.intro-splash.active .intro-slide-1 { opacity: 1; }
.intro-splash.show-2 .intro-slide-1 { opacity: 0; }
.intro-splash.show-2 .intro-slide-2 { opacity: 1; }

.intro-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  animation: introZoom 6s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-bg-workstation {
  background-image: url('/images/images2/hero-splash.webp'), url('/images/images2/hero-splash.jpg');
  filter: saturate(1.1) brightness(0.72);
}
.intro-bg-portrait {
  background-image: url('/images/images2/hero-portrait.webp'), url('/images/images2/hero-portrait.jpg');
  filter: saturate(1.05) brightness(0.42) blur(8px);
  transform: scale(1.2);
}
.intro-slide-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.25), rgba(0,0,0,0.85) 75%),
    linear-gradient(180deg, rgba(10,11,13,0.35) 0%, rgba(10,11,13,0.65) 60%, rgba(10,11,13,0.92) 100%);
}
.intro-slide-scrim-2 {
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.85) 65%),
    linear-gradient(180deg, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0.9) 100%);
}
.intro-slide-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #fff;
}

/* Slide 1 — brand intro */
.intro-splash-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #FFD600;
  margin-bottom: 0.9rem;
  opacity: 0;
  transform: translateY(10px);
  animation: introFadeUp 0.5s cubic-bezier(.2,.7,.2,1) 0.1s forwards;
}
.intro-splash-name {
  font-size: clamp(2.6rem, 9vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  color: #fff;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px);
  animation: introFadeUp 0.6s cubic-bezier(.2,.7,.2,1) 0.25s forwards;
}
.intro-splash-name span {
  background: linear-gradient(135deg, #FFE34D 0%, #FFD600 50%, #FFB800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.intro-splash-tag {
  font-size: clamp(0.92rem, 1.6vw, 1.15rem);
  color: #d6d8de;
  font-weight: 500;
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  animation: introFadeUp 0.5s cubic-bezier(.2,.7,.2,1) 0.45s forwards;
}

/* Slide 2 — Welcome with portrait */
.intro-welcome { gap: 0.4rem; }
.intro-welcome-portrait {
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: scale(0.85);
  box-shadow:
    0 0 0 3px rgba(255, 214, 0, 0.85),
    0 0 0 8px rgba(255, 214, 0, 0.18),
    0 22px 50px rgba(0, 0, 0, 0.55);
}
.intro-splash.show-2 .intro-welcome-portrait {
  animation: introPopIn 0.7s cubic-bezier(.2,.9,.3,1.2) 0s forwards;
}
.intro-welcome-portrait::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 214, 0, 0.55);
  animation: introSpin 9s linear infinite;
}
.intro-welcome-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-welcome-eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FFD600;
  opacity: 0;
  transform: translateY(10px);
  margin-bottom: 0.3rem;
}
.intro-splash.show-2 .intro-welcome-eyebrow {
  animation: introFadeUp 0.5s cubic-bezier(.2,.7,.2,1) 0.3s forwards;
}
.intro-welcome-title {
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  color: #fff;
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(18px);
}
.intro-splash.show-2 .intro-welcome-title {
  animation: introFadeUp 0.7s cubic-bezier(.2,.7,.2,1) 0.45s forwards;
}
.intro-welcome-dot {
  display: inline-block;
  color: #FFD600;
}
.intro-welcome-tag {
  font-size: clamp(0.92rem, 1.7vw, 1.18rem);
  color: #d6d8de;
  font-weight: 500;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
}
.intro-splash.show-2 .intro-welcome-tag {
  animation: introFadeUp 0.55s cubic-bezier(.2,.7,.2,1) 0.7s forwards;
}

/* shared progress bar (full duration) */
.intro-splash-progress {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, 50vw);
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}
.intro-splash-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFE34D, #FFD600, #FFB800);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 214, 0, 0.5);
  animation: introProgress 4.8s cubic-bezier(.4,.0,.2,1) 0.1s forwards;
}

/* Slide 2 + dot pager are unused — single-slide splash now. Hide them. */
.intro-slide-2,
.intro-splash-dots { display: none !important; }

/* slide indicator dots — clickable to pause on that slide */
.intro-splash-dots {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7rem;
  z-index: 3;
}
.intro-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.4s ease, transform 0.25s ease, box-shadow 0.3s ease;
  cursor: pointer;
  padding: 0;
  border: 0;
  position: relative;
}
.intro-dot::before {
  /* expand hit-area to make the dot easier to tap */
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.intro-dot:hover { background: rgba(255, 214, 0, 0.6); transform: scale(1.25); }
.intro-splash.active .intro-dot:nth-child(1) { background: #FFD600; transform: scale(1.3); }
.intro-splash.show-2 .intro-dot:nth-child(1) { background: rgba(255, 255, 255, 0.28); transform: scale(1); }
.intro-splash.show-2 .intro-dot:nth-child(2) { background: #FFD600; transform: scale(1.3); }

/* Pause state — freeze all splash animations */
.intro-splash {
  cursor: pointer;
}
.intro-splash.paused,
.intro-splash.paused * {
  animation-play-state: paused !important;
}
.intro-splash.paused .intro-slide { transition: none; }

/* "Tap to pause / resume" hint badge */
.intro-splash::after {
  content: "Tap a dot to pause";
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 3;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  animation: introHintFade 0.5s ease 0.8s forwards;
}
.intro-splash.paused::after {
  content: "Resuming in " attr(data-countdown) "s";
  color: #FFD600;
  background: rgba(255, 214, 0, 0.14);
  animation: none;
  opacity: 1;
}
.intro-splash.paused:not([data-countdown])::after {
  content: "Paused — tap to continue";
}
@keyframes introHintFade { to { opacity: 1; } }

@keyframes introZoom { to { transform: scale(1); } }
@keyframes introFadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes introPopIn { to { opacity: 1; transform: scale(1); } }
@keyframes introProgress { to { width: 100%; } }
@keyframes introSpin { to { transform: rotate(360deg); } }

/* ---------- Mode-switch loader (DM logo spinner overlay) ---------- */
.mode-loader {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 99999;
}
.mode-loader.active {
  opacity: 1;
  pointer-events: auto;
}
.mode-loader-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 2rem 1.3rem;
  background: linear-gradient(160deg, #1f2129, #16181d);
  border: 1px solid rgba(255, 214, 0, 0.25);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.mode-loader.active .mode-loader-card { transform: scale(1); }
.mode-loader-ring {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 214, 0, 0.18);
  border-top-color: #FFD600;
  animation: modeLoaderSpin 0.9s linear infinite;
  pointer-events: none;
}
.mode-loader-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  z-index: 1;
  box-shadow: 0 0 28px rgba(255, 214, 0, 0.25);
  animation: modeLoaderPulse 1.2s ease-in-out infinite;
  margin: 16px 0;
}
.mode-loader-text {
  margin-top: 0.6rem;
  color: #FFD600;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@keyframes modeLoaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes modeLoaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

/* ---------- Right edge tab: category toggle (expands on hover) ---------- */
.right-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.right-sidebar-tab {
  width: 34px;
  background: linear-gradient(180deg, #FFE34D 0%, #FFD600 50%, #FFB800 100%);
  border: none;
  border-radius: 14px 0 0 14px;
  cursor: pointer;
  padding: 1.1rem 0;
  box-shadow: -6px 6px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: #18191A;
  transition: width 0.25s ease, box-shadow 0.25s ease;
  order: 2;
}
.right-sidebar-tab-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.right-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(160deg, #1f2129, #16181d);
  border: 1px solid rgba(255, 214, 0, 0.28);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.45);
  width: 200px;
  max-width: 0;
  padding: 0.85rem 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-width 0.28s cubic-bezier(.4,0,.2,1), opacity 0.18s ease, padding 0.28s ease, margin 0.28s ease;
  order: 1;
  margin-right: -1px;
}
.right-sidebar:hover .right-sidebar-panel,
.right-sidebar:focus-within .right-sidebar-panel,
.right-sidebar.open .right-sidebar-panel {
  max-width: 210px;
  opacity: 1;
  pointer-events: auto;
  padding: 0.9rem 0.75rem;
}
.right-sidebar:hover .right-sidebar-tab,
.right-sidebar:focus-within .right-sidebar-tab,
.right-sidebar.open .right-sidebar-tab {
  box-shadow: -10px 6px 30px rgba(255, 184, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.right-sidebar-label {
  font-size: 0.6rem;
  color: #6c707a;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.nav-cat-btn {
  background: #FFD600;
  color: #18191A;
  border: 1.5px solid #FFD600;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}
.nav-cat-btn strong {
  display: block;
  font-weight: 800;
  font-size: 0.84rem;
}
.nav-cat-btn small {
  display: block;
  font-weight: 600;
  font-size: 0.68rem;
  color: rgba(24, 25, 26, 0.7);
}
.nav-cat-btn:hover {
  background: #FFE34D;
  border-color: #FFE34D;
  color: #18191A;
  transform: translateY(-1px);
}
.nav-cat-btn.active {
  background: linear-gradient(135deg, #FFE34D 0%, #FFD600 50%, #FFB800 100%);
  border-color: #FFD600;
  color: #18191A;
  box-shadow: 0 6px 18px rgba(255, 214, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.nav-cat-clear {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  flex-direction: row;
  justify-content: center;
}
.nav-cat-clear strong { font-size: 0.74rem; font-weight: 700; }

.sidebar.active ~ .right-sidebar { display: none; }

@media (max-width: 1100px) {
  .right-sidebar {
    top: auto;
    bottom: 1rem;
    right: 0.7rem;
    transform: none;
  }
  .right-sidebar-tab { display: none; }
  .right-sidebar-panel {
    position: static;
    max-width: none;
    width: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 0.35rem 0.4rem;
    flex-direction: row;
    gap: 0.3rem;
    border: 1px solid rgba(255, 214, 0, 0.22);
    border-radius: 999px;
    background: rgba(20, 22, 27, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    margin-right: 0;
  }
  .right-sidebar-label { display: none; }
  /* Inside the chip, hide the descriptive "small" line so only the title shows */
  .right-sidebar-panel .nav-cat-btn small { display: none; }
  .nav-cat-btn {
    width: auto;
    padding: 0.28rem 0.55rem;
    font-size: 0.66rem;
    line-height: 1;
  }
  .right-sidebar-panel .nav-cat-btn strong { font-size: 0.66rem; font-weight: 800; }
  .nav-cat-clear {
    padding: 0.26rem 0.45rem;
    font-size: 0.68rem;
  }
}

section {
  margin-bottom: 0;
}
section h1, section h2 {
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
  margin-top: 0;
  padding: 0.6rem 0 0.4rem;
}
section h1 {
  font-size: 2.2rem;
}

@media (max-width: 1100px) {
  section h1, section h2 {
    font-size: 1.3rem;
    padding: 0.5rem 0;
  }

  .resume-header {
    padding: 0.5rem 0;
  }

  .resume-header h2 {
    font-size: 1.05rem;
  }

  .resume-header .download-cv-btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
  }
}

@media (max-width: 480px) {
  section h1, section h2 {
    font-size: 1.05rem;
  }

  .resume-header h2 {
    font-size: 0.9rem;
  }
}

/* Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.service-card {
  background: #232526;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 0;
}
.service-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 30px rgba(255, 214, 0, 0.13);
}
.service-icon {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.service-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.service-card {
  position: relative;
  overflow: hidden;
}

/* ---------- Portfolio: headline stats row ---------- */
.portfolio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.8rem;
}
.portfolio-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(160deg, #1f2129, #16181d);
  border: 1px solid #232426;
  border-radius: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.portfolio-stat:hover { transform: translateY(-2px); border-color: rgba(255, 214, 0, 0.4); }
.portfolio-stat strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFD600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.portfolio-stat span {
  font-size: 0.72rem;
  color: #9aa0aa;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Portfolio: case studies (Featured client work) ---------- */
.case-studies {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin: 1.2rem 0 2rem;
  counter-reset: cs;
}
/* Big faded project-number indicator at the top-right of each card.
   Makes the "I'm now on a new project" transition obvious as the user scrolls. */
.case-study { counter-increment: cs; }
.case-study::after {
  content: counter(cs, decimal-leading-zero);
  position: absolute;
  top: 0.85rem;
  right: 1.3rem;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255, 214, 0, 0.1);
  z-index: 0;
  line-height: 1;
  pointer-events: none;
  font-feature-settings: "tnum";
}
.case-studies-head { margin: 0.6rem 0 0.4rem; }
.case-studies-eyebrow {
  font-size: 0.7rem;
  color: #FFD600;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}
.case-studies-head h3 {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.case-study {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.3fr);
  gap: 1.4rem;
  padding: 1.4rem;
  background: linear-gradient(160deg, #1c1e25, #16181d);
  border: 1px solid #232426;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  align-items: start; /* don't stretch info column when shots column is taller */
}
.case-study::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #FFE34D, #FFD600, #FFB800);
}
.case-study-flip { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr); }
.case-study-flip .case-study-info { order: 2; }
.case-study-flip .case-study-shots { order: 1; }

.case-study-info { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.case-study-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.case-study-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2c2e33;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #c9c9c9;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.case-study-badge-live {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.case-study-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  animation: caseStudyPulse 1.8s ease-in-out infinite;
}
@keyframes caseStudyPulse { 50% { opacity: 0.45; } }

.case-study-title {
  font-size: 1.6rem;
  color: #fff;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.case-study-tag {
  font-size: 0.85rem;
  color: #FFD600;
  font-weight: 600;
  margin: 0;
}
.case-study-desc {
  font-size: 0.92rem;
  color: #d6d8de;
  line-height: 1.55;
  margin: 0;
}
.case-study-desc strong { color: #fff; font-weight: 700; }
.case-study-stack {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.case-study-stack li {
  padding: 0.28rem 0.65rem;
  background: rgba(255, 214, 0, 0.08);
  border: 1px solid rgba(255, 214, 0, 0.22);
  border-radius: 999px;
  font-size: 0.72rem;
  color: #FFD600;
  font-weight: 600;
}
.case-study-impact {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.case-study-impact li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: #c9c9c9;
  line-height: 1.45;
}
.case-study-impact li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #FFD600;
  font-weight: 700;
}

.case-study-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.case-study-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.05rem;
  background: #FFD600;
  color: #18191A;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 18px rgba(255, 184, 0, 0.32);
  border: 1.5px solid transparent;
}
.case-study-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 184, 0, 0.45);
  background: #FFE34D;
}
/* Ghost variant — secondary action (e.g. Play Store) */
.case-study-link-ghost {
  background: transparent;
  color: #FFD600;
  border-color: rgba(255, 214, 0, 0.55);
  box-shadow: none;
}
.case-study-link-ghost:hover {
  background: rgba(255, 214, 0, 0.08);
  border-color: #FFD600;
  color: #FFE34D;
  box-shadow: 0 6px 18px rgba(255, 214, 0, 0.16);
}

.case-study-shots {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  width: 100%;
}
.case-study-shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0f12;
  border: 1px solid #2c2e33;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
  width: 100%;
}

/* Auto-compact: when there are 4+ landscape shots, use a 2-col grid so the
   shots column doesn't grow into a tall single stack (which leaves black
   space in the info column). Last odd-positioned shot spans full width. */
.case-study-shots:not(.case-study-shots--mobile):has(.case-study-shot:nth-child(4)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case-study-shots:not(.case-study-shots--mobile):has(.case-study-shot:nth-child(4)) .case-study-shot {
  aspect-ratio: 16 / 10;
}
.case-study-shots:not(.case-study-shots--mobile):has(.case-study-shot:nth-child(4)) .case-study-shot:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Mobile screenshot variant — phone-portrait shots laid out as a 2x2 grid */
.case-study-shots.case-study-shots--mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.case-study-shots.case-study-shots--mobile .case-study-shot {
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, #1a1c22, #0e0f12);
}
.case-study-shots.case-study-shots--mobile .case-study-shot img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.4rem !important;
}
.case-study-shot:hover { transform: translateY(-3px); border-color: rgba(255, 214, 0, 0.5); }
/* Hide the inline overlay caption — descriptions live in the case-study info column.
   The text stays in the DOM so the lightbox can still read it. */
.case-study-shot .portfolio-item-overlay {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.case-study-shot img,
.case-study-shot[data-category] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
  padding: 0 !important;
  background: transparent !important;
}
@media (max-width: 900px) {
  .case-study, .case-study-flip { grid-template-columns: 1fr; }
  .case-study-flip .case-study-info { order: 1; }
  .case-study-flip .case-study-shots { order: 2; }
}
@media (max-width: 600px) {
  .case-study { padding: 1.1rem; }
  .case-study-title { font-size: 1.3rem; }
}

.portfolio-subtitle {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
  font-style: italic;
  background: linear-gradient(90deg, #FFD600, #FFA500, #FFD600);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGlow 3s linear infinite;
}

@keyframes textGlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.scroll-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: #FFD600;
  opacity: 0.7;
  margin-left: 0.5rem;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(5px); }
}

.service-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #00C896, #00E6A8);
  color: #0D0D1A;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 0 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-desc {
  color: #f1f1f1;
  font-size: 0.95rem;
  opacity: 0.85;
  font-weight: 400;
}

.skills-icons {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}
.skills-icons img {
  width: 90px;
  height: 90px;
  background: #232526;
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.skills-icons img:hover {
  transform: scale(1.1);
}

.education {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.03), transparent);
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 0, 0.08);
}

.education h3 {
  color: #FFD600;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.education h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #FFD600;
  border-radius: 2px;
  margin-top: 8px;
}

.education ul {
  list-style: none;
  padding: 0;
}

.education > ul > li {
  background: #232526;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  color: #F1F1F1;
  border: 1px solid rgba(255, 214, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.education > ul > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(255, 214, 0, 0.15);
  border-color: rgba(255, 214, 0, 0.3);
}

.education strong {
  color: #FFD600;
  font-size: 1.4rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.education > ul > li > br {
  display: none;
}

.education > ul > li > strong + br + text,
.education > ul > li > text {
  color: #fff;
  font-size: 1.1rem;
  margin: 0.3rem 0;
  display: block;
}

.education-details {
  list-style: none;
  margin: 1.2rem 0 0 0;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.education-details li {
  background: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: #f1f1f1;
  opacity: 0.9;
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.education-details li::before {
  content: "•";
  color: #FFD600;
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: 0.2rem;
}

@media (max-width: 768px) {
  .education h3 {
    font-size: 1.5rem;
  }

  .education strong {
    font-size: 1.2rem;
  }

  .education > ul > li {
    padding: 1.2rem;
  }

  .education > ul > li > text {
    font-size: 1rem;
  }

  .education-details {
    padding: 0.8rem 1.2rem;
  }

  .education-details li {
    font-size: 0.95rem;
    padding: 0.4rem 0 0.4rem 1.3rem;
  }

  .education-details li::before {
    font-size: 1.3rem;
    top: 0.15rem;
  }
}

@media (max-width: 480px) {
  .education h3 {
    font-size: 1.3rem;
  }

  .education strong {
    font-size: 1.1rem;
  }

  .education > ul > li {
    padding: 1rem;
  }

  .education > ul > li > text {
    font-size: 0.9rem;
  }

  .education-details {
  padding: 0.7rem 1rem;
  }

  .education-details li {
    font-size: 0.9rem;
    padding: 0.3rem 0 0.3rem 1.2rem;
  }
}

.portfolio-categories {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #FFD600 #232526;
}

.portfolio-categories::-webkit-scrollbar {
  height: 4px;
}

.portfolio-categories::-webkit-scrollbar-track {
  background: #232526;
  border-radius: 4px;
}

.portfolio-categories::-webkit-scrollbar-thumb {
  background: #FFD600;
  border-radius: 4px;
}

.portfolio-categories button {
  background: #232526;
  border: none;
  color: #F1F1F1;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.portfolio-categories button:hover,
.portfolio-categories button.active {
  background: #FFD600;
  color: #232526;
}

@media (max-width: 768px) {
  .portfolio-categories {
    gap: 0.8rem;
    padding: 0.3rem;
    margin-bottom: 1.5rem;
  }

  .portfolio-categories button {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .portfolio-categories {
    gap: 0.6rem;
    padding: 0.2rem;
    margin-bottom: 1.2rem;
  }

  .portfolio-categories button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
}

.portfolio-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
}

.portfolio-item[data-category="webdev"] img,
.portfolio-item[data-category="certificates"] img {
  object-fit: contain;
  background: #232526;
  padding: 0.5rem;
}

.portfolio-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

.portfolio-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  padding: 2.5rem 1rem 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item-overlay {
  opacity: 1;
}

.portfolio-item-overlay h3 {
  color: #FFD600;
  font-size: 1rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.portfolio-item-overlay p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
  }

  /* Mobile: minimal one-line caption at the bottom edge */
  .portfolio-item-overlay {
    opacity: 1;
    padding: 0.3rem 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    max-height: auto;
    display: flex;
    align-items: flex-end;
  }
  .portfolio-item-overlay h3 {
    font-size: 0.62rem;
    line-height: 1.15;
    margin: 0;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    opacity: 0.92;
  }
  /* Hide description entirely on mobile — full info in lightbox on tap */
  .portfolio-item-overlay p { display: none; }
}

@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
  }

  .portfolio-item {
    border-radius: 4px;
  }
}

/* Gallery - masonry-like layout */
#gallery .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

#gallery .portfolio-item {
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#gallery .portfolio-item:nth-child(3n+1) {
  grid-row: span 2;
}

#gallery .portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
}

#gallery .portfolio-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 214, 0, 0.15);
  z-index: 2;
}

#gallery .portfolio-item:hover img {
  transform: scale(1.08);
  filter: brightness(0.8) contrast(1.1);
}

#gallery .portfolio-item-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  padding: 3rem 0.8rem 0.8rem;
}

#gallery .portfolio-item[data-category="certificates"] img {
  object-fit: contain;
  background: #232526;
  padding: 0.5rem;
}

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

  #gallery .portfolio-item:nth-child(3n+1) {
    grid-row: span 1;
  }

  #gallery .portfolio-item:nth-child(4n+1) {
    grid-row: span 2;
  }
}

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

  #gallery .portfolio-item:nth-child(3n+1),
  #gallery .portfolio-item:nth-child(4n+1) {
    grid-row: span 1;
  }
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.blog-post {
  background: #232526;
  border-radius: 8px;
  padding: 1rem;
  color: #F1F1F1;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.blog-post:hover {
  background: #FFD600;
  color: #232526;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 600px;
}
.contact-form input, .contact-form textarea {
  background: #232526;
  border: 1px solid #FFD600;
  border-radius: 6px;
  padding: 1.5rem;
  color: #F1F1F1;
  font-size: 1.5rem;
  resize: none;
}
.contact-form button {
  background: #FFD600;
  color: #232526;
  border: none;
  border-radius: 6px;
  padding: 1.2rem;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.contact-form button:hover {
  background: #232526;
  color: #FFD600;
  border: 1px solid #FFD600;
}

/* Yellow accent underline for About Me */
#about {
  min-height: auto;
  height: auto;
  padding: 0;
  opacity: 1;
  transform: none;
  display: block;
  overflow: hidden;
  position: relative;
}

#about .section-container {
  min-height: auto;
}

#about strong {
  color: #FFD600;
}

.section-container {
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  border-radius: 12px;
  background: #191A1D;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  border: 1.5px solid #232426;
  scrollbar-width: thin;
  scrollbar-color: #FFD600 #232526;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overscroll-behavior: contain;
}

#about h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: block;
  padding: 0.6rem 0 0.4rem;
}

#about h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #FFD600;
  border-radius: 2px;
  margin-top: 6px;
}

#about p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  color: #F1F1F1;
  max-width: 95%;
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  body {
    flex-direction: column;
    padding-top: 0;
  }

  .sidebar {
    position: fixed;
    left: -100%;
    top: 3.2rem;
    height: calc(100vh - 3.2rem);
    width: 85%;
    max-width: 300px;
    transition: left 0.3s ease;
    z-index: 998;
    overflow-y: auto;
    margin-left: 0;
    border-radius: 0 16px 16px 0;
  }

  .sidebar.active {
    left: 0;
  }

  .sidebar-toggle {
    display: block;
    top: 0.45rem;
    right: 0.5rem;
    left: auto;
    z-index: 1001;
    padding: 0.35rem;
  }

  .main-content {
    margin: 0 auto;
    margin-left: 0;
    padding-top: 1rem;
    padding-right: 0;
    width: 97%;
    max-width: 100%;
  }

  .navbar {
    width: 100%;
    padding: 0.5rem 0;
    height: auto;
  }

  .navbar ul {
    padding-left: 2.8rem;
    gap: 0.5rem;
  }

  .section-container {
    padding: 1rem;
  }

  .contact-button {
    font-size: 2rem;
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 0;
  }

  .navbar {
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    top: 0;
    padding: 0.4rem 0;
  }

  .sidebar-toggle {
    display: block;
    top: 0.35rem;
    right: 0.5rem;
    left: auto;
  }

  .sidebar {
    position: fixed;
    left: auto;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 85%;
    max-width: 300px;
    transition: right 0.3s ease;
    z-index: 998;
    border-radius: 16px 0 0 16px;
  }

  .sidebar.active {
    right: 0;
    left: auto;
  }

  .main-content {
    padding-top: 1rem;
  }

  .profile-pic-container {
    margin: 0 auto 1rem;
    padding: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .profile-pic-squared {
    width: 100px;
    height: 100px;
    margin: 0;
  }

  .profile-pic-squared img {
    width: 100%;
    height: 100%;
    padding: 5px;
  }

  .sidebar-title-pill {
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
    margin: 0.5rem auto 1rem;
    max-width: 90%;
    word-wrap: break-word;
  }

  .contact-info {
    width: 100%;
    margin-bottom: 1rem;
  }

  .contact-item {
    padding: 0.8rem;
    margin-bottom: 0.5rem;
    word-break: break-word;
  }

  .contact-value {
    font-size: 0.9rem;
  }

  .navbar ul {
    gap: 0.5rem;
    padding-left: 2.8rem;
  }

  .navbar a {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
  }

  /* Skills section adjustments */
  .skills-scroll {
    gap: 15px;
    padding: 15px;
  }

  .skill-card {
    min-width: 100px;
    padding: 20px 15px 15px 15px;
  }

  .skill-card img {
    width: 70px;
    height: 70px;
  }

  /* Services section adjustments */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .service-card {
    padding: 1.2rem;
  }

  /* Portfolio adjustments */
  .portfolio-grid {
    gap: 1rem;
  }

  .portfolio-item {
    min-height: 200px;
  }

  .portfolio-item img {
    padding: 0.8rem;
  }
  
  .portfolio-item[data-category="webdev"] img {
    padding: 0.4rem;
  }

  #about {
    padding: 1.5rem 0;
  }
  
  #about .section-container {
    padding: 1rem;
  }
  
  #about p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 0;
  }

  .navbar {
    height: auto;
    min-height: 36px;
    padding: 0.3rem 0;
  }

  .sidebar-toggle {
    top: 0.25rem;
    right: 0.5rem;
    left: auto;
  }

  .sidebar {
    top: 0;
    height: 100vh;
    padding: 3rem 0.8rem 0.8rem;
  }

  .profile-pic-container {
    margin: 0 auto 0.8rem;
    padding: 0.3rem;
  }

  .profile-pic-squared {
    width: 90px;
    height: 90px;
  }

  .sidebar-title-pill {
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
  }

  .contact-value {
    font-size: 0.85rem;
  }

  .sidebar-socials {
    margin-top: 1rem;
    gap: 0.8rem;
  }

  .sidebar-socials a {
    width: 35px;
    height: 35px;
  }

  .skill-card {
    min-width: 90px;
    padding: 15px 12px 12px 12px;
  }

  .skill-card img {
    width: 60px;
    height: 60px;
  }

  .skill-card span {
    font-size: 12px;
  }

  /* Services section adjustments */
  .service-card {
    padding: 1rem;
  }

  .service-title {
    font-size: 1.1rem;
  }

  .service-desc {
    font-size: 0.9rem;
  }

  /* Portfolio adjustments */
  .portfolio-grid {
    gap: 0.8rem;
  }

  .portfolio-item {
    min-height: 180px;
  }

  .portfolio-item-overlay h3 {
    font-size: 1rem;
  }

  .portfolio-item-overlay p {
    font-size: 0.8rem;
  }

  .contact-button {
    font-size: 1.5rem;
    padding: 0.8rem 1.2rem;
    width: 100%;
    text-align: center;
  }

  .contact-photo {
    width: 150px;
    height: 150px;
  }

  .contact-social {
    gap: 1rem;
  }

  .contact-social-icon {
    width: 48px;
    height: 48px;
  }

  .timeline {
    margin-left: 16px;
    padding-left: 16px;
  }

  .timeline-dot {
    left: -25px;
    width: 12px;
    height: 12px;
  }

  #about {
    padding: 1rem 0;
  }
  
  #about .section-container {
    padding: 0.8rem;
  }
  
  #about p {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.7rem;
  }
}

/* Small mobile devices */
@media (max-width: 360px) {
  body {
    font-size: 13px;
    padding: 0;
  }

  .sidebar {
    width: 90%;
    padding: 0.8rem 0.6rem;
  }

  .profile-pic-container {
    margin: 0.6rem auto 1rem;
  }

  .profile-pic-squared {
    width: 85px;
    height: 85px;
  }

  .profile-pic-squared img {
    padding: 3px;
  }

  .sidebar h2 {
    font-size: 1.3rem;
    margin: 0.3rem 0;
  }

  .contact-item {
    padding: 0.7rem;
    margin-bottom: 0.5rem;
  }

  .navbar a {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }

  .skill-card {
    min-width: 80px;
  }

  .skill-card img {
    width: 50px;
    height: 50px;
  }

  .sidebar-title-pill {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
  }

  .contact-value {
    font-size: 0.8rem;
  }
}

/* Handle notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Handle different aspect ratios */
@media (min-aspect-ratio: 2/1) {
  .portfolio-item {
    min-height: 220px;
  }
}

/* Handle high-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .skill-card img,
  .service-icon img,
  .portfolio-item img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Ensure proper touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
  .navbar a,
  .portfolio-categories button,
  .contact-social-link {
    min-height: 44px;
    min-width: 44px;
  }

  .portfolio-item-overlay {
    opacity: 1;
  }

  .portfolio-item:hover img {
    transform: none;
    filter: none;
  }

  .contact-social-link:hover {
    transform: none;
  }

  .download-cv-btn {
    min-height: 44px;
  }
}

/* Fix for very tall screens */
@media (min-height: 1000px) {
  .section-container {
    max-height: calc(100vh - 4rem);
  }
}

.ellipsis {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  max-width: 100%;
  display: block;
  word-break: break-all;
}

.projects h3 {
  color: #FFD600;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.projects h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #FFD600;
  border-radius: 2px;
  margin-top: 8px;
}

.timeline {
  position: relative;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 3px solid rgba(255, 214, 0, 0.3);
}
.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
}
.timeline-item > div:last-child {
  background: #232526;
  padding: 1.2rem 1.5rem;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 214, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}
.timeline-item > div:last-child:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.12);
  border-color: rgba(255, 214, 0, 0.25);
}
.timeline-dot {
  position: absolute;
  left: -35px;
  top: 14px;
  width: 16px;
  height: 16px;
  background: #191A1D;
  border: 4px solid #FFD600;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 214, 0, 0.3);
}
.timeline-item strong {
  font-size: 1.1rem;
  color: #FFD600;
  font-weight: 700;
}
.experience-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.experience-header h3 {
  margin-bottom: 0;
}

.experience-header h3::after {
  display: none;
}

.linkedin-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(135deg, #0A66C2, #004182);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
}

.linkedin-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(10, 102, 194, 0.5);
  background: linear-gradient(135deg, #0077B5, #0A66C2);
}

.linkedin-cta svg {
  flex-shrink: 0;
}

.linkedin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px;
  background: rgba(10, 102, 194, 0.15);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.linkedin-badge:hover {
  background: #0A66C2;
  transform: scale(1.15);
}
.linkedin-badge:hover svg {
  fill: #fff;
}
.timeline-date {
  color: #FFD600;
  font-size: 0.98rem;
  font-weight: 500;
}
.timeline-item em {
  color: #aaa;
  font-size: 0.98rem;
  font-style: italic;
}
.timeline-item ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.2rem;
}
.timeline-item li {
  color: #f1f1f1;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  list-style: disc;
}
.timeline-item li::marker {
  content: "\2022 "; /* Unicode for bullet */
  font-size: 2.2em;
  color: #FFD600;
}

.resume-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0 0.4rem;
}

.resume-header h2 {
  position: static;
  margin: 0;
  padding: 0;
}

.resume-header .download-cv-btn {
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .resume-header .resume-cv-btn {
    font-size: 0;
    padding: 0.4rem;
    gap: 0;
  }
  .resume-header .resume-cv-btn .download-cv-icon svg {
    width: 22px;
    height: 26px;
  }
}

.download-cv-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
}
.download-cv-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #232526;
  color: #FFD600;
  font-weight: 600;
  font-size: 1.08rem;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

@media (max-width: 768px) {
  .download-cv-container {
    justify-content: center;
    margin-top: 1.5rem;
  }
  .download-cv-btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .download-cv-btn {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }
}
.download-cv-btn:hover {
  background: #FFD600;
  color: #232526;
  box-shadow: 0 4px 16px rgba(255,214,0,0.18);
}
.download-cv-icon svg {
  display: block;
}

#contact {
  padding: 0;
  background-color: var(--dark-color);
  color: var(--yellow-color);
  text-align: center;
  min-height: auto;
}

#contact .section-container {
  max-width: 850px;
  margin: 0 auto;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 1rem 1.5rem;
  background: #191A1D;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contact h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--yellow-color);
  text-shadow: 0 0 10px rgba(255, 214, 0, 0.5);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(255, 214, 0, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(255, 214, 0, 0.8),
                 0 0 30px rgba(255, 214, 0, 0.6),
                 0 0 40px rgba(255, 214, 0, 0.4);
  }
}

.contact-main-ui {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  max-width: 620px;
  margin: 0 auto;
  background: rgba(30, 31, 34, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 0, 0.1);
  padding: 1.2rem;
}

.contact-photo-side {
  flex-shrink: 0;
  width: 200px;
}

.contact-photo {
  width: 200px;
  height: 250px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid rgba(255, 214, 0, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease;
}

.contact-photo:hover {
  border-color: var(--yellow-color);
  box-shadow: 0 8px 30px rgba(255, 214, 0, 0.2);
  transform: scale(1.03);
}

.contact-info-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.contact-name {
  font-size: 1.3rem;
  color: #fff;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.contact-tagline {
  font-size: 0.78rem;
  color: var(--yellow-color);
  margin: 0.2rem 0 0;
  opacity: 0.9;
}

.contact-guide {
  font-size: 0.72rem;
  color: rgba(241, 241, 241, 0.6);
  margin: 0.1rem 0 0;
  font-style: italic;
}

.contact-email {
  background: rgba(234, 67, 53, 0.06);
  border-color: rgba(234, 67, 53, 0.15);
}

.contact-email:hover {
  background: rgba(234, 67, 53, 0.12);
  border-color: rgba(234, 67, 53, 0.35);
  box-shadow: 0 4px 16px rgba(234, 67, 53, 0.1);
}

.contact-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--yellow-color), transparent);
  margin: 0.4rem 0;
}

.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.contact-social-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--yellow-color);
  background: rgba(35, 37, 38, 0.9);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 214, 0, 0.12);
  transition: all 0.3s ease;
}

.contact-social-link:hover {
  transform: translateX(4px);
  background: rgba(255, 214, 0, 0.1);
  border-color: rgba(255, 214, 0, 0.35);
  box-shadow: 0 4px 16px rgba(255, 214, 0, 0.1);
}

.contact-whatsapp {
  background: rgba(37, 211, 102, 0.06);
  border-color: rgba(37, 211, 102, 0.15);
}

.contact-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.1);
}

.contact-linkedin {
  background: rgba(10, 102, 194, 0.06);
  border-color: rgba(10, 102, 194, 0.2);
}

.contact-linkedin:hover {
  background: rgba(10, 102, 194, 0.12);
  border-color: rgba(10, 102, 194, 0.4);
  box-shadow: 0 4px 16px rgba(10, 102, 194, 0.12);
}

.contact-github {
  background: rgba(24, 23, 23, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
}

.contact-github:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08);
}

.contact-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.contact-social-label {
  font-size: 0.82rem;
  color: #F1F1F1;
}

.contact-social-icon svg {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 768px) {
  .contact-main-ui {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    max-width: 100%;
  }

  .contact-photo-side {
    width: auto;
  }

  .contact-photo {
    width: 140px;
    height: 160px;
    border-radius: 12px;
  }

  .contact-info-side {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .contact-tagline {
    font-size: 0.78rem;
  }

  .contact-guide {
    font-size: 0.72rem;
  }

  .contact-divider {
    background: linear-gradient(90deg, transparent, var(--yellow-color), transparent);
    margin: 0.5rem auto;
  }

  .contact-buttons {
    width: 100%;
  }

  .contact-social-link {
    padding: 0.65rem 0.8rem;
    gap: 0.6rem;
  }

  .contact-social-link:hover {
    transform: translateY(-2px);
  }

  .contact-social-icon svg {
    width: 30px;
    height: 30px;
  }

  #contact h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 480px) {
  #contact .section-container {
    padding: 0.8rem;
  }

  .contact-main-ui {
    padding: 0.8rem;
    gap: 0.8rem;
    border-radius: 14px;
  }

  .contact-photo {
    width: 110px;
    height: 130px;
  }

  .contact-name {
    font-size: 1.2rem;
  }

  .contact-tagline {
    font-size: 0.72rem;
  }

  .contact-guide {
    font-size: 0.68rem;
  }

  .contact-social-link {
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
  }

  .contact-social-label {
    font-size: 0.78rem;
  }

  .contact-social-icon svg {
    width: 28px;
    height: 28px;
  }

  #contact h2 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
}

@media screen and (max-width: 360px) {
  .contact-photo {
    width: 90px;
    height: 110px;
  }

  .contact-name {
    font-size: 1.1rem;
  }

  .contact-social-label {
    font-size: 0.72rem;
  }

  .contact-social-link {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }
}

/* Add CSS variables at the top of the file if not already present */
:root {
  --dark-color: #18191A;
  --yellow-color: #FFD600;
}

/* Skills Section */
.skills-container {
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.skills-scroll {
  display: flex;
  overflow-x: auto;
  gap: 30px;
  padding: 30px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #FFD600 #232526;
}

.skills-scroll::-webkit-scrollbar {
  height: 8px;
}

.skills-scroll::-webkit-scrollbar-track {
  background: #232526;
  border-radius: 4px;
}

.skills-scroll::-webkit-scrollbar-thumb {
  background: #FFD600;
  border-radius: 4px;
}

.skill-card {
  min-width: 160px;
  background: #20222b;
  border-radius: 24px;
  padding: 30px 25px 22px 25px;
  text-align: center;
  transition: transform 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

.skill-card:hover {
  transform: translateY(-5px);
}

.skill-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #232634;
  border-radius: 20px;
  padding: 15px;
}

.skill-icon-fallback {
  display: none;
  width: 120px;
  height: 120px;
  background: #232634;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.skill-card span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.section-title {
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #FFD600;
  border-radius: 2px;
  margin-top: 8px;
}

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

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    flex-direction: row;
    padding: 25px 30px;
    gap: 22px;
  }
}

/* Custom scrollbar styling */
.section-container::-webkit-scrollbar {
  width: 8px;
}

.section-container::-webkit-scrollbar-track {
  background: #232526;
  border-radius: 10px;
  margin: 0.5rem;
}

.section-container::-webkit-scrollbar-thumb {
  background: #FFD600;
  border-radius: 10px;
  border: 2px solid #232526;
}

.section-container::-webkit-scrollbar-thumb:hover {
  background: #ffd900e0;
}

@media (max-width: 1100px) {
  .section-container {
    height: calc(100vh - 4rem);
    margin: 0.3rem;
    padding: 1rem;
  }

  .main-content {
    margin: 0 auto;
    padding-top: 3.5rem;
  }
}

@media (max-width: 768px) {
  .section-container {
    height: calc(100vh - 3.5rem);
    padding: 0.8rem;
    margin: 0.2rem;
    border-radius: 10px;
  }

  .section-container::-webkit-scrollbar {
    width: 6px;
  }
}

@media (max-width: 480px) {
  .section-container {
    height: calc(100vh - 3.2rem);
    padding: 0.7rem;
    margin: 0.1rem;
    border-radius: 8px;
  }
}

/* Fade animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

@media (max-width: 900px) {
  /* Keep navbar fixed at top so hamburger + tabs share one row */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.45rem 0;
    background: #18191A;
    z-index: 999;
    border-bottom: 1px solid #232426;
  }
  .navbar ul {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 0.4rem;
    /* leave room for hamburger button on the left */
    padding: 0 1rem 0 3.2rem;
    margin: 0;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .navbar ul::-webkit-scrollbar {
    display: none;
  }
  .navbar li {
    display: inline-block;
    min-width: max-content;
    flex-shrink: 0;
  }
  .navbar a {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 16px;
  }
  /* Fade hint on the right edge */
  .navbar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, #18191A);
    pointer-events: none;
    z-index: 2;
  }
  /* Push main content below the fixed navbar */
  .main-content {
    padding-top: 3rem;
  }
}

.projects {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.03), transparent);
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 0, 0.08);
}

.projects .timeline-item {
  margin-bottom: 2.5rem;
}

.projects .timeline-item em {
  color: #FFD600;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.3rem 0;
  display: block;
}

.projects .timeline-item ul {
  margin-top: 0.8rem;
}

.projects .timeline-item li {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .projects .timeline-item li {
    font-size: 0.9rem;
  }
}

/* Mobile Sidebar Toggle — larger, brand-colored */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.7rem;
  right: 0.7rem;
  left: auto;
  z-index: 1001;
  background: linear-gradient(135deg, #FFD600, #FFB800);
  border: none;
  color: #18191A;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 184, 0, 0.4), 0 0 0 1px rgba(255, 214, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255, 184, 0, 0.5), 0 0 0 1px rgba(255, 227, 77, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sidebar-toggle:active { transform: scale(0.96); }

.sidebar-toggle svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: auto;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 85%;
    max-width: 300px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    margin: 0;
    padding: 3rem 0.8rem 1rem;
    border-radius: 16px 0 0 16px;
  }

  .sidebar.active {
    right: 0;
    left: auto;
  }

  .sidebar-toggle {
    display: block;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .sidebar-overlay.active {
    display: block;
  }
}

@media (max-width: 768px) {
  .profile-pic-squared {
    width: 100px;
    height: 100px;
    min-width: 80px;
    min-height: 80px;
  }
}

@media (max-width: 480px) {
  .profile-pic-squared {
    width: 90px;
    height: 90px;
    min-width: 70px;
    min-height: 70px;
  }
  
  .status-dot {
    width: 14px;
    height: 14px;
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 360px) {
  .profile-pic-squared {
    width: 80px;
    height: 80px;
    min-width: 60px;
    min-height: 60px;
  }
  
  .status-dot {
    width: 12px;
    height: 12px;
    right: 6px;
    bottom: 6px;
    border-width: 2px;
  }
}

/* Services Section Styles */
.services-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.08), rgba(255, 214, 0, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(0, 200, 150, 0.15);
}

.services-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 200, 150, 0.06) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  z-index: -1;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.services-header h2 {
  background: linear-gradient(135deg, #00C896, #FFD600, #FF6B35);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 800;
  animation: gradientShift 3s ease-in-out infinite;
  position: relative;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.services-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #FFD600, transparent);
  border-radius: 2px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
}

.services-intro {
  max-width: 800px;
  margin: 0 auto;
}

.intro-main {
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00C896, #00E6A8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.intro-sub {
  font-size: 1.1rem;
  color: #F1F1F1;
  margin-bottom: 0.8rem;
  line-height: 1.5;
  opacity: 0.9;
  position: relative;
}

.intro-sub::before {
  content: '✨';
  position: absolute;
  left: -30px;
  top: 0;
  font-size: 1.2rem;
  animation: sparkle 2s ease-in-out infinite;
}

.intro-note {
  font-size: 1rem;
  color: #F1F1F1;
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 0;
  animation: fadeInUp 1s ease-out 0.4s both;
  position: relative;
  padding: 1rem;
  background: rgba(255, 214, 0, 0.05);
  border-radius: 12px;
  border-left: 4px solid #FFD600;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

.rate-card-section {
  margin: 1.5rem 0;
  text-align: center;
}

.rate-card-header h3 {
  color: #FFD600;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  position: relative;
}

.rate-card-header h3::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #FFD600, #FFA500);
  border-radius: 2px;
  margin: 8px auto 0;
}

.rate-card-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  background: linear-gradient(135deg, #232526, #2a2b2d, #1a1b1d);
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255, 214, 0, 0.1);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
}

.rate-card-container::before,
.rate-card-container::after {
  pointer-events: none;
}

.rate-card-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #FFD600, #FFA500, #FF6B35);
  border-radius: 25px;
  padding: 2px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  animation: borderGlow 3s ease-in-out infinite;
}

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

.rate-card-container:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 30px 80px rgba(255, 214, 0, 0.2),
    0 0 0 1px rgba(255, 214, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rate-card-container::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  animation: rotate 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rate-card-container:hover::after {
  opacity: 1;
}

.rate-card-download {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #232526, #2a2b2d);
  border-radius: 16px;
  border: 2px solid rgba(255, 214, 0, 0.2);
  transition: all 0.3s ease;
}

.rate-card-download:hover {
  border-color: rgba(255, 214, 0, 0.4);
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.15);
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #FFD600, #FFA500);
  color: #232526;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 214, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.download-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.download-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.4);
}

.download-link:hover::before {
  left: 100%;
}

.download-icon {
  font-size: 1.3rem;
  animation: bounce 2s ease-in-out infinite;
}

.download-text {
  position: relative;
  z-index: 2;
}

.download-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.download-link:hover .download-arrow {
  transform: translateX(5px);
}

.download-note {
  color: #F1F1F1;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 0.8rem;
  font-style: italic;
}

.rate-card-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.rate-card-image:hover {
  transform: scale(1.02);
}

.rate-card-overlay {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #FFD600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.rate-card-container:hover .rate-card-overlay {
  opacity: 1;
}

.additional-services {
  margin: 3rem 0;
}

.additional-services h3 {
  color: #FFD600;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
}

.additional-services h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #FFD600;
  border-radius: 2px;
  margin: 8px auto 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-item {
  background: #232526;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 214, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(255, 214, 0, 0.15);
  border-color: rgba(255, 214, 0, 0.3);
}

.service-item h4 {
  color: #FFD600;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.service-item ul {
  list-style: none;
  padding: 0;
}

.service-item li {
  color: #F1F1F1;
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  opacity: 0.9;
}

.service-item li::before {
  content: "•";
  color: #FFD600;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0.3rem;
}

.process-timeline {
  margin: 2rem 0;
  position: relative;
}

.process-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.process-timeline h3 {
  background: linear-gradient(135deg, #00C896, #00E6A8, #FFD600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  position: relative;
}

.process-subtitle {
  color: #F1F1F1;
  font-size: 1.2rem;
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 0;
}

.timeline-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 1024px) {
  .timeline-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, #1a2a1f, #1a1b1d);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 200, 150, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 250px;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 200, 150, 0.15);
  border-color: rgba(0, 200, 150, 0.4);
}

.step-number {
  background: linear-gradient(135deg, #00C896, #00E6A8);
  color: #0D0D1A;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 200, 150, 0.3);
  position: relative;
  z-index: 2;
}

.step-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  display: block;
  animation: bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.3));
  position: relative;
  z-index: 2;
}

.step-content h4 {
  background: linear-gradient(135deg, #FFD600, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.step-description {
  color: #F1F1F1;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

.step-duration {
  background: rgba(255, 214, 0, 0.1);
  color: #FFD600;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 214, 0, 0.3);
  position: relative;
  z-index: 2;
}

.payment-terms {
  margin: 3rem 0;
}

.payment-terms h3 {
  color: #00C896;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
}

.payment-terms h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #00C896, #00E6A8);
  border-radius: 2px;
  margin: 8px auto 0;
}

.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.term-item {
  background: linear-gradient(135deg, #1a2a1f, #1a1b1d);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 200, 150, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.term-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00C896, #00E6A8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.term-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 200, 150, 0.15);
  border-color: rgba(0, 200, 150, 0.3);
}

.term-item:hover::before {
  opacity: 1;
}

.term-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  text-align: center;
}

.structure-card {
  border-left: 4px solid #00C896;
}

.guarantees-card {
  border-left: 4px solid #FFD600;
}

.term-item h4 {
  color: #00C896;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.term-item ul {
  list-style: none;
  padding: 0;
}

.term-item li {
  color: #F1F1F1;
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  opacity: 0.9;
}

.term-item li::before {
  content: "•";
  color: #FFD600;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0.3rem;
}

.why-choose-me {
  margin: 4rem 0;
  text-align: center;
}

.why-choose-me h3 {
  background: linear-gradient(135deg, #00C896, #FFD600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.why-choose-me h3::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00C896, #00E6A8);
  border-radius: 2px;
  margin: 12px auto 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-item {
  background: linear-gradient(135deg, #232526, #2a2b2d, #1a1b1d);
  border-radius: 20px;
  padding: 2.5rem;
  border: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #FFD600, #FFA500, #FF6B35);
  border-radius: 20px;
  padding: 2px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 214, 0, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.feature-item:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 
    0 25px 60px rgba(255, 214, 0, 0.25),
    0 0 0 1px rgba(255, 214, 0, 0.3);
}

.feature-item:hover::before {
  opacity: 1;
}

.feature-item:hover::after {
  width: 300px;
  height: 300px;
}

.feature-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  display: block;
  animation: bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.3));
  position: relative;
  z-index: 2;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.feature-item h4 {
  background: linear-gradient(135deg, #FFD600, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.feature-item p {
  color: #F1F1F1;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
  position: relative;
  z-index: 2;
  font-weight: 500;
}


/* Secure Payment Section */
.secure-payment {
  text-align: center;
  margin: 4rem 0;
  padding: 2.5rem;
  background: linear-gradient(135deg, #232526, #2a2b2d);
  border-radius: 20px;
  border: 2px solid rgba(255, 214, 0, 0.2);
}

.secure-payment h3 {
  background: linear-gradient(135deg, #FFD600, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.payment-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.payment-option {
  background: #1a1b1d;
  border-radius: 16px;
  padding: 1.5rem;
  width: 160px;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.payment-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.mpesa:hover {
  border-color: #25D366;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2);
}

.paypal:hover {
  border-color: #0070BA;
  box-shadow: 0 10px 30px rgba(0, 112, 186, 0.2);
}

.payment-logo {
  height: 40px;
  max-width: 100px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.payment-option p {
  color: #F1F1F1;
  font-weight: 600;
  font-size: 1.1rem;
}

.payment-note {
  color: #F1F1F1;
  opacity: 0.8;
  font-style: italic;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .secure-payment {
    padding: 1.5rem;
  }

  .secure-payment h3 {
    font-size: 1.5rem;
  }

  .payment-option {
    width: 130px;
    padding: 1rem;
  }
}

/* Payment Modals */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: linear-gradient(180deg, #1d1f27, #16181d);
  margin: 6% auto;
  padding: 0;
  border: 1px solid #2a2d36;
  border-radius: 20px;
  width: 92%;
  max-width: 460px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
  animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
  from { transform: translateY(-30px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.close-button {
  color: rgba(255,255,255,0.7);
  position: absolute;
  top: 14px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.25s ease, color 0.2s ease;
  z-index: 5;
  user-select: none;
}

.close-button:hover,
.close-button:focus {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transform: rotate(90deg);
}

/* Brand banner at top — colored per provider */
.modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.6rem;
  margin: 0;
  border-bottom: 1px solid #2a2d36;
  position: relative;
  overflow: hidden;
}
.modal-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(76, 175, 80, 0.12), transparent 60%);
  pointer-events: none;
}
#paypal-modal .modal-header::before {
  background: linear-gradient(120deg, rgba(0, 156, 222, 0.14), transparent 60%);
}

.modal-logo {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.modal-logo svg {
  width: 110px;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 1;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
}

.modal-body {
  padding: 1.4rem 1.6rem 1.6rem;
}
.modal-body > p:first-child {
  color: #c9c9c9;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

/* Payment detail rows — each becomes a label/value/copy row */
.payment-details {
  background: #20222b;
  border: 1px solid #2a2d36;
  border-radius: 12px;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
}
.payment-details p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0;
  padding: 0.7rem 0;
  font-size: 0.92rem;
  color: #fff;
  border-bottom: 1px solid #25272f;
  flex-wrap: wrap;
}
.payment-details p:last-child { border-bottom: none; }
.payment-details strong {
  color: #9aa0aa;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.payment-details a {
  color: #FFD600;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.payment-details a:hover { color: #FFE34D; }

/* Modal footer tip box */
.modal-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(255, 214, 0, 0.05);
  border: 1px solid rgba(255, 214, 0, 0.18);
  border-radius: 10px;
  color: #d4d6db;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.75rem 0.9rem;
  position: relative;
}
.modal-footer::before {
  content: "💡";
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .modal-content { margin: 5% auto; }
  .modal-header { padding: 1.2rem; }
  .modal-logo svg { width: 90px; }
  .modal-header h3 { font-size: 1rem; }
  .modal-body { padding: 1.1rem 1.2rem 1.3rem; }
  .payment-details p { font-size: 0.88rem; }
}

.testimonial-cta {
  margin: 2rem 0;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #0a1f15, #1a1b1d);
  border-radius: 16px;
  border-top: 3px solid #00C896;
  position: relative;
  overflow: hidden;
}

.testimonial-cta.quote blockquote {
  font-size: 1.5rem;
  font-style: italic;
  color: #F1F1F1;
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  position: relative;
  padding: 0 2rem;
  font-weight: 500;
  line-height: 1.6;
}

.testimonial-cta.quote blockquote::before,
.testimonial-cta.quote blockquote::after {
  content: '“';
  font-family: Georgia, serif;
  font-size: 5rem;
  color: #FFD600;
  opacity: 0.2;
  position: absolute;
  line-height: 1;
}

.testimonial-cta.quote blockquote::before {
  top: -1rem;
  left: -1rem;
}

.testimonial-cta.quote blockquote::after {
  content: '”';
  bottom: -3rem;
  right: -1rem;
}

.testimonial-cta .cta-button {
  background: linear-gradient(135deg, #FFD600, #FFA500);
  color: #232526;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Portfolio Modal Styles */
.portfolio-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  overflow: auto;
  animation: fadeIn 0.3s ease;
}

.portfolio-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.portfolio-modal-content {
  position: relative;
  max-width: 95%;
  max-height: 95vh;
  margin: auto;
  padding-top: 113px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.portfolio-modal-content img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.portfolio-modal-content img.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

.portfolio-modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.3s ease;
  background: rgba(0, 0, 0, 0.5);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.portfolio-modal-close:hover {
  color: #FFD600;
  background: rgba(255, 214, 0, 0.2);
}

.portfolio-modal-info {
  margin-top: 10px;
  text-align: center;
  color: #fff;
  max-width: 800px;
}

.portfolio-modal-info h3 {
  color: #FFD600;
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.portfolio-modal-info p {
  color: #F1F1F1;
  font-size: 0.85rem;
  opacity: 0.8;
}

.portfolio-modal-controls {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}

.zoom-btn {
  background: #232526;
  color: #FFD600;
  border: 2px solid #FFD600;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.zoom-btn:hover {
  background: #FFD600;
  color: #232526;
  transform: scale(1.05);
}

.zoom-btn:active {
  transform: scale(0.95);
}

.modal-download-btn {
  background: #00C896 !important;
  color: #fff !important;
  border-color: #00C896 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.modal-download-btn:hover {
  background: #00E6A8 !important;
  color: #0D0D1A !important;
  border-color: #00E6A8 !important;
}

#zoom-reset {
  font-size: 0.9rem;
  padding: 10px 15px;
}

@media (max-width: 768px) {
  .portfolio-modal-content {
    max-width: 98%;
    max-height: 98vh;
  }

  .portfolio-modal-close {
    top: 10px;
    right: 15px;
    font-size: 30px;
    width: 40px;
    height: 40px;
  }

  .portfolio-modal-info h3 {
    font-size: 1rem;
  }

  .portfolio-modal-info p {
    font-size: 0.75rem;
  }

  .portfolio-modal-controls {
    flex-wrap: wrap;
  }

  .zoom-btn {
    padding: 8px 15px;
    font-size: 1rem;
  }
} 
/* Custom Cursor Styles */
.cursor-dot {
  width: 5px;
  height: 5px;
  background-color: var(--accent-color);
}

.cursor-outline {
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent-color);
}

.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 10000;
  pointer-events: none;
  display: none;
}

/* Custom cursor disabled — use native cursor */
.cursor-dot,
.cursor-outline {
  display: none !important;
}

/* =====================================================
   POLISH PASS — TAB 1: "What I Do"
   ===================================================== */

/* Global: bump scroll offset so sections clear the fixed navbar */
html {
  scroll-padding-top: 5rem;
}

/* Desktop: tab titles were clipped by the fixed navbar — give them air */
#skills-section .section-container,
#about .section-container,
#portfolio .section-container,
#resume .section-container,
#gallery .section-container,
#services .section-container,
#contact .section-container {
  padding-top: 2rem;
}

/* About Me title: extra breathing room from navbar + underline gap */
#about h1 {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
}
#about h1::after {
  margin-top: 10px;
}

/* =====================================================
   FIX: Payment logos (SVG, no broken external images)
   ===================================================== */
.payment-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 0.6rem;
}
.payment-logo svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.payment-logo-paypal svg {
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.modal-logo svg {
  width: 140px;
  height: auto;
  border-radius: 10px;
}

/* =====================================================
   FIX: Schedule Consultation button (was unstyled)
   ===================================================== */
.contact-cta {
  position: relative;
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.06), rgba(255, 184, 0, 0.02));
  border: 1px solid rgba(255, 214, 0, 0.15);
  border-radius: 18px;
  overflow: hidden;
}
.contact-cta .cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.contact-cta h3 {
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 0.4rem;
}
.contact-cta .cta-subtitle {
  color: #c9c9c9;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}
.contact-cta .cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.contact-cta .cta-button.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}
.contact-cta .cta-button.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
}
.contact-cta .btn-icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
}

/* Floating decorative icons in CTA */
.contact-cta .floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.contact-cta .floating-icon {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0.18;
  animation: floatY 6s ease-in-out infinite;
}
.contact-cta .floating-icon:nth-child(1) { top: 12%;  left: 8%;  animation-delay: 0s; }
.contact-cta .floating-icon:nth-child(2) { top: 18%;  right: 10%; animation-delay: 1.5s; }
.contact-cta .floating-icon:nth-child(3) { bottom: 18%; left: 12%; animation-delay: 3s; }
.contact-cta .floating-icon:nth-child(4) { bottom: 14%; right: 8%; animation-delay: 4.5s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .contact-cta { padding: 1.6rem 1rem; }
  .contact-cta h3 { font-size: 1.15rem; }
  .contact-cta .cta-button.whatsapp-btn {
    width: 100%;
    justify-content: center;
  }
  .contact-cta .floating-icon { font-size: 1.2rem; opacity: 0.12; }
}

@media (max-width: 768px) {

  /* Section breathing room — clear the fixed navbar */
  #skills-section .section-container {
    padding: 2rem 1rem 1.5rem;
  }
  #skills-section h2:first-of-type {
    margin-top: 0.25rem;
  }

  /* Service cards: bigger tap area, single column already set above */
  .services-grid {
    gap: 0.9rem !important;
  }
  .service-card {
    padding: 1.1rem 1.1rem !important;
    border: 1px solid rgba(255, 214, 0, 0.08);
    min-height: 96px;
    align-items: center;
  }
  .service-card:active {
    transform: scale(0.98);
    box-shadow: 0 4px 18px rgba(255, 214, 0, 0.12);
  }
  .service-icon {
    min-width: 40px;
    min-height: 40px;
  }
  .service-title {
    font-size: 1rem !important;
    line-height: 1.3;
  }
  .service-desc {
    font-size: 0.86rem !important;
    line-height: 1.45;
  }
  .service-badge {
    font-size: 0.5rem;
    padding: 2px 8px;
  }

  /* Skills heading + scroll-hint cleaner stacking */
  #skills-section h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Skills horizontal scroller — snap + edge fade */
  .skills-container {
    padding: 8px 0 14px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
  }
  .skills-scroll {
    gap: 12px !important;
    padding: 8px 16px 14px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  .skills-scroll::-webkit-scrollbar { display: none; }
  .skills-scroll { scrollbar-width: none; }

  .skill-card {
    scroll-snap-align: start;
    min-width: 104px !important;
    padding: 14px 12px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 214, 0, 0.06);
  }
  .skill-card img,
  .skill-icon-fallback {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    padding: 8px !important;
  }
  .skill-card span {
    font-size: 13px !important;
    font-weight: 500;
  }
}


/* =====================================================
   HOME — BENTO GRID
   ===================================================== */
#home .section-container {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 2.25rem 0.8rem 0.6rem;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 8px;
  margin: 0.25rem 0 1rem;
}

/* Tile base */
.bento-tile {
  position: relative;
  background: #1a1c22;
  border: 1px solid #25272f;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), border-color 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}
a.bento-tile { cursor: pointer; }
a.bento-tile:hover {
  transform: translateY(-3px);
  border-color: #FFD600;
  box-shadow: 0 14px 32px rgba(255, 214, 0, 0.12);
}

/* Eyebrow used inside several tiles */
.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa0aa;
  margin-bottom: 0.4rem;
}

/* CTA arrow shared */
.bento-cta-arrow {
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFD600;
  margin-top: auto;
  align-self: flex-start;
  transition: transform 0.2s ease;
}
.bento-tile:hover .bento-cta-arrow { transform: translateX(4px); }

/* ---------- TILE 1: NAME (big — 2x2) ---------- */
.bento-tile-name {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(180deg, #1a1c22, #16181d);
  border-color: #25272f;
  padding: 1.1rem 1.2rem 1rem;
}
.bento-name-stripe {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD600;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.bento-name-h1 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.5rem;
}
.bento-name-role {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: #c9c9c9;
  margin-top: 0.3rem;
  letter-spacing: 0;
}
.bento-name-yellow {
  background: linear-gradient(135deg, #FFE34D, #FFD600 50%, #FFB800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255, 214, 0, 0.25));
}

.bento-name-sub {
  color: #c9c9c9;
  font-size: 0.83rem;
  margin: 0 0 0.6rem;
  line-height: 1.45;
  max-width: 95%;
}
.bento-name-sub strong { color: #FFD600; font-weight: 600; }

/* ---------- TILE 2: LOCATION ---------- */
.bento-tile-loc {
  background: linear-gradient(160deg, #1a1c22, #1d1f27);
  justify-content: space-between;
}
.bento-loc-city {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bento-loc-country {
  font-size: 0.78rem;
  color: #9aa0aa;
  margin-top: 0.2rem;
}
.bento-loc-pulse {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18);
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ---------- TILE 3: NOW BUILDING ---------- */
.bento-tile-now {
  background: linear-gradient(160deg, #1a1c22, #181a20);
  border-color: rgba(34, 197, 94, 0.18);
}
.bento-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: heroPulse 2s ease-in-out infinite;
}
.bento-now-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.bento-now-desc {
  margin: 0 0 0.5rem;
  color: #c9c9c9;
  font-size: 0.78rem;
  line-height: 1.4;
}
.bento-now-desc strong { color: #FFD600; }
.bento-now-stack {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.bento-now-stack span {
  font-size: 0.7rem;
  font-weight: 600;
  background: #232634;
  border: 1px solid #2a2d36;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  color: #c9c9c9;
}

/* "Click to view" eyebrow — slim dark pill above the title on the yellow CTA tiles */
.bento-cta-tap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  padding: 0.24rem 0.6rem 0.24rem 0.5rem;
  background: #18191A;
  color: #FFD600;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  width: fit-content;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bento-cta-tap-emoji {
  font-variant-emoji: emoji;
  font-size: 0.95rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  display: inline-block;
  animation: ctaHandTap 1.5s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.bento-cta-tap-text { display: inline-block; line-height: 1; }
@keyframes ctaHandTap {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(3px) rotate(-6deg); }
  40% { transform: translateY(-2px) rotate(4deg); }
}
.bento-tile-hire:hover .bento-cta-tap,
.bento-tile-quote:hover .bento-cta-tap {
  opacity: 0;
  transform: translateX(-4px);
}

/* =====================================================
   TILE 4: HIRE ME AS ENGINEER (primary CTA) — FILLED YELLOW
   --------------------------------------------------------
   ⚠ This tile is paired with .bento-tile-quote below.
   Design rule (DO NOT CHANGE without reading both):
     • .bento-tile-hire  → filled YELLOW, dark text   (engineer / CV path)
     • .bento-tile-quote → DARK + yellow left stripe  (freelance path)
   The visual contrast between these two signals the two
   distinct audiences (engineer hire vs DM Solution Tech).
   If they ever look the same, the page loses its meaning.
   ===================================================== */
.bento-tile-hire {
  background: #FFD600;
  border-color: #FFD600;
  color: #18191A;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer sweep on hover */
.bento-tile-hire::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.bento-tile-hire:hover {
  background: #FFE34D;
  border-color: #FFE34D;
}
.bento-tile-hire:hover::before { left: 125%; }
.bento-tile-hire .bento-cta-body { flex: 1; position: relative; z-index: 1; }
.bento-tile-hire .bento-cta-body strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #18191A;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.bento-tile-hire .bento-cta-body small {
  display: block;
  font-size: 0.78rem;
  color: rgba(24, 25, 26, 0.72);
  font-weight: 600;
}
.bento-tile-hire .bento-cta-arrow {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #18191A;
  align-self: center;
  position: relative;
  z-index: 1;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.bento-tile-hire:hover .bento-cta-arrow {
  transform: translateX(6px);
}

/* ---------- TILE 5: GET A FREELANCER (secondary CTA — dark with yellow stripe) ---------- */
.bento-tile-quote {
  background: #1a1c22;
  border-color: #2a2d36;
  color: #f1f1f1;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
  padding-left: 1.1rem;
}
.bento-tile-quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #FFD600;
  pointer-events: none;
}
.bento-tile-quote:hover {
  border-color: #FFD600;
  background: #1c1f26;
}
.bento-tile-quote .bento-cta-body { flex: 1; position: relative; z-index: 1; }
.bento-tile-quote .bento-cta-body strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.bento-tile-quote .bento-cta-body small {
  display: block;
  font-size: 0.78rem;
  color: #9aa0aa;
  font-weight: 500;
}
.bento-tile-quote .bento-cta-arrow {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFD600;
  align-self: center;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease;
}
.bento-tile-quote:hover .bento-cta-arrow {
  transform: translateX(4px);
}

/* ---------- TILE 6: STATS ---------- */
.bento-tile-stats {
  background: linear-gradient(160deg, #1a1c22, #1d1f27);
  justify-content: center;
}
.bento-stats-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.bento-stats-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.bento-stats-list strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFD600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bento-stats-list span {
  font-size: 0.68rem;
  color: #9aa0aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- TILE 7: WHAT WE DELIVER (wide — spans 2) ---------- */
.bento-tile-deliver {
  grid-column: 1 / span 2;
  grid-row: 3;
  background: linear-gradient(160deg, #1d1f27, #16181d);
}
.bento-deliver-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0;
  margin: 0.2rem 0 0;
}
.bento-deliver-list li {
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem 0.35rem 1.3rem;
  line-height: 1.25;
}
.bento-deliver-list li::before {
  left: 0.55rem;
  width: 5px;
  height: 5px;
}
.bento-deliver-list li {
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
  color: #d4d6db;
  padding: 0.55rem 0.75rem 0.55rem 1.6rem;
  background: #20222b;
  border: 1px solid #2a2d36;
  border-radius: 10px;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  letter-spacing: -0.005em;
}
.bento-deliver-list li::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD600;
  box-shadow: 0 0 8px rgba(255, 214, 0, 0.5);
}
.bento-deliver-list li:hover {
  border-color: #FFD600;
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- TILE STATUS: combined location + availability (cols 3-4, row 1) ---------- */
.bento-tile-status {
  grid-column: 3 / -1;
  grid-row: 1;
  background: linear-gradient(160deg, #1a1c22, #1d1f27);
  justify-content: center;
}

/* Hire CTA — col 3 row 2 (left of dual CTA pair) */
.bento-tile-hire {
  grid-column: 3 !important;
  grid-row: 2 !important;
}
/* Quote CTA — col 4 row 2 (right of dual CTA pair) */
.bento-tile-quote {
  grid-column: 4 !important;
  grid-row: 2 !important;
}

/* ---------- TILE 8: WHATSAPP (row 3, full width) — black tile, green icon ---------- */
.bento-tile-wa {
  grid-column: 1 / -1;
  grid-row: 3;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border-color: rgba(37, 211, 102, 0.25);
  color: #fff;
  padding: 0.85rem 1.1rem;
}
.bento-tile-wa:hover {
  border-color: #25D366;
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.18);
}
.bento-wa-arrow {
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: auto;
  color: #25D366;
  transition: transform 0.2s ease;
}
.bento-tile-wa:hover .bento-wa-arrow { transform: translateX(4px); }
.bento-wa-icon {
  width: 46px;
  height: 46px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bento-wa-body { flex: 1; }
.bento-wa-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.bento-wa-body small {
  display: block;
  font-size: 0.74rem;
  opacity: 0.88;
  font-weight: 500;
}

/* ---------- TILE 9: SELECTED WORK (full-width grid, row 4) ---------- */
.bento-tile-work {
  grid-column: 1 / -1;
  grid-row: 4;
  background: linear-gradient(160deg, #1a1c22, #1d1f27);
  padding: 0.9rem 1.1rem 0.95rem;
}
.bento-work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.bento-work-card {
  position: relative;
  background: #16181d;
  border: 1px solid #25272f;
  border-radius: 10px;
  padding: 0.9rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.2s ease;
}
.bento-work-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #1f2229;
  border: 1px solid #2a2d36;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e4e6eb;
  margin-bottom: 0.2rem;
}
.bento-work-icon svg {
  width: 18px;
  height: 18px;
}
.bento-work-tag {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: #9aa0aa !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.05rem;
}
.bento-work-card strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.bento-work-card span {
  font-size: 0.72rem;
  color: #a8acb5;
  line-height: 1.4;
}
.bento-tile-work:hover .bento-work-card:hover {
  border-color: #3a3d47;
}

/* ---------- TILE 10: TRUSTED BY (clean list, row 5) ---------- */
.bento-tile-trust {
  grid-column: 1 / -1;
  grid-row: 5;
  background: linear-gradient(160deg, #1a1c22, #1d1f27);
  padding: 0.75rem 1.1rem 0.85rem;
}
.bento-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.35rem;
}
.bento-trust-list em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  color: #d4d6db;
  background: #232634;
  border: 1px solid #2a2d36;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bento-trust-list em:hover {
  border-color: #FFD600;
  color: #fff;
}

/* ===== MOBILE / TABLET (<900px) — stack everything ===== */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .bento-tile,
  .bento-tile-name,
  .bento-tile-deliver,
  .bento-tile-work,
  .bento-tile-trust,
  .bento-tile-wa {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .bento-tile-name {
    padding: 1.2rem;
  }
  .bento-name-h1 { font-size: 1.4rem; }
  .bento-loc-city { font-size: 1.3rem; }
  .bento-deliver-list { grid-template-columns: repeat(2, 1fr); }
  .bento-work-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tighten further on real phones */
@media (max-width: 480px) {
  .bento-deliver-list { grid-template-columns: 1fr; }
  .bento-work-grid { grid-template-columns: 1fr; }
  .bento-name-h1 { font-size: 1.25rem; }
}

/* =====================================================
   SERVICES — BENTO (reuses .bento + tile classes from Home)
   ===================================================== */
#services .section-container.services-bento-wrap {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 2.25rem 0.8rem 0.6rem;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#services .services-bento {
  margin: 0.25rem 0 0 !important;
}

/* Process steps inside the wide deliver-style tile */
.svc-process .svc-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 0;
  margin: 0.4rem 0 0;
}
.svc-process .svc-steps li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: #20222b;
  border: 1px solid #2a2d36;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.svc-process .svc-steps li:hover {
  border-color: #FFD600;
  transform: translateY(-1px);
}
.svc-step-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFD600;
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.svc-process .svc-steps strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.svc-process .svc-steps span {
  display: block;
  font-size: 0.72rem;
  color: #9aa0aa;
  line-height: 1.35;
}

/* Payment cards — two side-by-side tiles in row 3 (cols 3 & 4) */
.svc-pay-card {
  grid-row: 3;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font: inherit;
  color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55rem;
  text-align: left;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.svc-pay-mpesa { grid-column: 3; }
.svc-pay-paypal { grid-column: 4; }

.svc-pay-card:hover {
  transform: translateY(-3px);
  border-color: #FFD600;
  box-shadow: 0 14px 32px rgba(255, 214, 0, 0.14);
}
.svc-pay-mpesa:hover {
  border-color: #4CAF50;
  box-shadow: 0 14px 32px rgba(76, 175, 80, 0.18);
}
.svc-pay-paypal:hover {
  border-color: #009cde;
  box-shadow: 0 14px 32px rgba(0, 156, 222, 0.18);
}

.svc-pay-logo svg {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 8px;
}
.svc-pay-meta strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.1rem;
}
.svc-pay-meta small {
  display: block;
  font-size: 0.72rem;
  color: #9aa0aa;
  font-weight: 500;
}

/* Mobile: stack each card on its own row */
@media (max-width: 900px) {
  .svc-pay-mpesa, .svc-pay-paypal {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* Mobile: stack payments below process, single column already handled by .bento mobile rules */
@media (max-width: 900px) {
  .svc-process .svc-steps {
    grid-template-columns: 1fr;
  }
}

/* Services — Full Rate Card preview block */
.rate-card-preview {
  margin: 1.25rem 0 1.5rem;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 16px;
  padding: 1.25rem;
}
.rate-card-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rate-card-preview-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.rate-card-preview-head .bento-eyebrow {
  margin-bottom: 0.25rem;
}
.rate-card-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #FFD600, #FFB800);
  color: #18191A;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rate-card-dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 184, 0, 0.4);
}
.rate-card-preview-img {
  display: block;
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid #25272f;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.rate-card-preview-img:hover {
  border-color: #FFD600;
  transform: translateY(-2px);
}
.rate-card-preview-img img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 720px;
  object-fit: contain;
}

@media (max-width: 720px) {
  .rate-card-preview { padding: 1rem; }
  .rate-card-preview-head h3 { font-size: 1rem; }
  .rate-card-dl-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================
   SERVICES BENTO — grid placement overrides
   Layout: 4-col, rate card full-row in row 3
   ===================================================== */
#services .bento-tile-deliver {
  grid-column: 1 / span 2;
  grid-row: 4;
}
#services .svc-pay-mpesa {
  grid-column: 3;
  grid-row: 4;
}
#services .svc-pay-paypal {
  grid-column: 4;
  grid-row: 4;
}
#services .bento-tile-trust {
  grid-column: 1 / -1;
  grid-row: 5;
}

/* RATE CARD HERO TILE (full-width row 3) */
.bento-tile-ratecard {
  grid-column: 1 / -1;
  grid-row: 3;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border-color: rgba(255, 214, 0, 0.18);
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}
.bento-tile-ratecard:hover {
  border-color: #FFD600;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(255, 214, 0, 0.18);
}
.ratecard-meta {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem 1.4rem;
  gap: 0.45rem;
  border-right: 1px solid #25272f;
  background: linear-gradient(180deg, #1d1f27, #181a20);
}
.ratecard-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ratecard-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #9aa0aa;
  line-height: 1.4;
}
.ratecard-img {
  flex: 1;
  position: relative;
  background: #fff;
  overflow: hidden;
  min-height: 240px;
  max-height: 360px;
}
.ratecard-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.bento-tile-ratecard:hover .ratecard-img img {
  transform: scale(1.02);
}

/* Mobile: stack meta above image */
@media (max-width: 900px) {
  #services .bento-tile-deliver,
  #services .svc-pay-mpesa,
  #services .svc-pay-paypal,
  #services .bento-tile-trust,
  .bento-tile-ratecard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .bento-tile-ratecard {
    flex-direction: column;
  }
  .ratecard-meta {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid #25272f;
  }
  .ratecard-img {
    min-height: 280px;
    max-height: 520px;
  }
}

/* Services intro line — appears below "Services & Pricing" h2 */
.services-intro-line {
  color: #c9c9c9;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 760px;
}
.services-intro-line strong {
  color: #FFD600;
  font-weight: 600;
}

/* ===================== SERVICES "Trusted by" — reuse home bento tile UI ===================== */
.svc-trust-strip {
  /* Bento tile uses grid positioning by default — neutralize that on /services/ */
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 1.4rem 0 2rem !important;
  width: 100% !important;
}

/* ===================== SVC CLIENTS — DM tree + logo marquee ===================== */
.svc-clients {
  margin: 1.4rem 0 1rem;
  padding: 1.4rem;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: visible;
}
.svc-clients-head { text-align: center; margin-bottom: 1.6rem; }
.svc-clients-head h3 {
  font-size: 1.35rem;
  color: #fff;
  font-weight: 700;
  margin: 0.2rem 0 0;
  letter-spacing: -0.01em;
}

/* TREE LAYOUT */
.svc-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0 1rem;
  position: relative;
}
.svc-tree-root {
  display: flex;
  justify-content: center;
}
.svc-tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.7rem;
  background: #14161b;
  border: 1px solid #2c2e33;
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  width: 200px;
  position: relative;
  z-index: 2;
}
.svc-tree-node:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 0, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.svc-tree-node-root {
  width: 240px;
  background: linear-gradient(160deg, #FFE34D, #FFD600, #FFB800);
  border-color: #FFD600;
  box-shadow: 0 8px 24px rgba(255, 184, 0, 0.32);
}
.svc-tree-node img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
}
.svc-tree-node-root img {
  background: rgba(255, 255, 255, 0.95);
  padding: 8px;
  width: 64px;
  height: 64px;
}
.svc-tree-node-label strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
}
.svc-tree-node-root .svc-tree-node-label strong { color: #18191A; }
.svc-tree-node-label span {
  display: block;
  font-size: 0.68rem;
  color: #9aa0aa;
  margin-top: 0.15rem;
  font-weight: 500;
}
.svc-tree-node-root .svc-tree-node-label span { color: rgba(24, 25, 26, 0.72); font-weight: 600; }

/* BIG CLIENT SHOWCASE — one slide at a time, auto-rotating, no repeats */
.svc-clients-show {
  position: relative;
  margin: 2.2rem auto 0;
  padding: 0 1rem;
  height: 220px;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-clients-show-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.svc-clients-show-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
  transform: translateY(8px);
}
/* Auto-cycle: each slide lights up for 4s in turn (3 slides × 4s = 12s loop) */
.svc-clients-show-slide:nth-child(1) { animation: svcClientsCycle 12s 0s infinite; }
.svc-clients-show-slide:nth-child(2) { animation: svcClientsCycle 12s 4s infinite; }
.svc-clients-show-slide:nth-child(3) { animation: svcClientsCycle 12s 8s infinite; }
@keyframes svcClientsCycle {
  0%, 33.33% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  35%, 100% {
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
  }
}
/* Pause the slideshow on hover so the user can read */
.svc-clients-show:hover .svc-clients-show-slide { animation-play-state: paused; }

.svc-clients-show-slide img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  background: #fff;
  padding: 14px;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 214, 0, 0.15);
}
.svc-clients-show-label { text-align: center; }
.svc-clients-show-label strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
}
.svc-clients-show-label span {
  display: block;
  font-size: 0.78rem;
  color: #9aa0aa;
  margin-top: 0.25rem;
  font-weight: 500;
}

/* Tiny dot pager under the slideshow */
.svc-clients-show::after {
  content: "";
  position: absolute;
  bottom: -0.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background:
    linear-gradient(90deg, #FFD600 0 33%, rgba(255,214,0,0.25) 33% 100%);
  border-radius: 999px;
  animation: svcClientsBar 12s linear infinite;
  background-size: 300% 100%;
}
@keyframes svcClientsBar {
  0%   { background-position: 0%   0; }
  100% { background-position: -200% 0; }
}

/* MOBILE — slightly smaller slideshow */
@media (max-width: 720px) {
  .svc-tree-node { width: 100%; max-width: 280px; }
  .svc-tree-node-root { width: 100%; max-width: 280px; }
  .svc-clients-head h3 { font-size: 1.1rem; }
  .svc-clients { padding: 1.2rem 1rem 1rem; }
  .svc-clients-show { height: 200px; padding: 0 0.5rem; }
  .svc-clients-show-slide img { width: 120px; height: 120px; padding: 12px; }
  .svc-clients-show-label strong { font-size: 1rem; }
}

/* Svc pay cards inside flex .payment-options — neutralize stray grid props */
.payment-options .svc-pay-card {
  grid-column: auto;
  grid-row: auto;
  width: 220px;
  min-height: 88px;
}
@media (max-width: 600px) {
  .payment-options .svc-pay-card {
    width: 100%;
  }
}

/* =====================================================
   SERVICES — Redesigned Process + Payment + CTA blocks
   ===================================================== */
.svc-block {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.4rem;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 18px;
  position: relative;
}
.svc-block-head { margin-bottom: 1.4rem; }

/* ============= READY-TO-LAUNCH PACKAGES ============= */
.svc-packages { margin: 2rem 0 2.5rem; }
.svc-package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.svc-package {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #1c1e25, #16181d);
  border: 1px solid #25272f;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.svc-package:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 0, 0.45);
}
.svc-package-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0e0f12;
  cursor: zoom-in;
  overflow: hidden;
}
.svc-package-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
  display: block;
}
.svc-package:hover .svc-package-img img { transform: scale(1.03); }
.svc-package-body {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.svc-package-eyebrow {
  font-size: 0.65rem;
  color: #FFD600;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.svc-package-body h4 {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
.svc-package-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.svc-package-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: #c9c9c9;
  line-height: 1.45;
}
.svc-package-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #FFD600;
  font-weight: 700;
}
.svc-package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.svc-package-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  border: 1.5px solid transparent;
}
.svc-package-btn-primary {
  background: #FFD600;
  color: #18191A;
  box-shadow: 0 5px 14px rgba(255, 184, 0, 0.3);
}
.svc-package-btn-primary:hover {
  background: #FFE34D;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(255, 184, 0, 0.45);
}
.svc-package-btn-ghost {
  background: transparent;
  color: #FFD600;
  border-color: rgba(255, 214, 0, 0.45);
}
.svc-package-btn-ghost:hover {
  background: rgba(255, 214, 0, 0.08);
  border-color: #FFD600;
  color: #FFE34D;
}

@media (max-width: 900px) {
  .svc-package-grid { grid-template-columns: 1fr; }
}
.svc-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFD600;
  opacity: 0.85;
  margin: 0 0 0.45rem;
  padding: 0;
  position: relative;
  padding-left: 1.4rem;
}
.svc-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFD600);
  border-radius: 2px;
}
.svc-block-head h3 {
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.svc-block-sub {
  color: #9aa0aa;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 640px;
}

/* ---------- PROCESS — horizontal 3-step track ---------- */
.svc-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 0;
  position: relative;
}
.svc-track::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 214, 0, 0.05), rgba(255, 214, 0, 0.35), rgba(255, 214, 0, 0.05));
  z-index: 0;
}
.svc-track-item {
  position: relative;
  background: #20222b;
  border: 1px solid #2a2d36;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  z-index: 1;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-track-item:hover {
  border-color: #FFD600;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 214, 0, 0.14);
}
.svc-track-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD600, #FFB800);
  color: #18191A;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
  box-shadow: 0 6px 16px rgba(255, 184, 0, 0.3);
  font-variant-numeric: tabular-nums;
}
.svc-track-item h4 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.svc-track-item p {
  margin: 0 0 0.7rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #9aa0aa;
}
.svc-track-meta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #FFD600;
  background: rgba(255, 214, 0, 0.1);
  border: 1px solid rgba(255, 214, 0, 0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ---------- PAYMENT — combined block ---------- */
.svc-pay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.svc-pay-col {
  background: #20222b;
  border: 1px solid #2a2d36;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: border-color 0.25s ease;
}
.svc-pay-col:hover { border-color: rgba(255, 214, 0, 0.35); }
.svc-pay-col-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.svc-pay-col-ic {
  font-size: 1.25rem;
  line-height: 1;
}
.svc-pay-col h4 {
  margin: 0;
  font-size: 0.98rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.svc-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.svc-bullets li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.85rem;
  color: #d4d6db;
  line-height: 1.4;
}
.svc-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFD600;
  box-shadow: 0 0 8px rgba(255, 214, 0, 0.45);
}

.svc-pay-methods {
  padding-top: 1.2rem;
  border-top: 1px solid #25272f;
}
.svc-pay-methods-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #9aa0aa;
  margin: 0 0 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.svc-pay-methods-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
/* Neutralize stray bento grid positions on these cards in this context */
.svc-pay-methods-row .svc-pay-card,
.payment-options .svc-pay-card {
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
.svc-pay-note {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
  letter-spacing: 0.01em;
}

/* ---------- FINAL CTA CARD ---------- */
.svc-cta-card {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 1.4rem 1.4rem 1.3rem;
  background: linear-gradient(180deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.svc-cta-card > .svc-cta-actions { margin-left: auto; }
.svc-cta-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
@media (max-width: 900px) {
  .svc-cta-card {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 1rem;
    padding: 1.2rem 1.2rem 1.1rem;
  }
  .svc-cta-card > .svc-cta-actions {
    margin-left: 0;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 0.5rem;
  }
  .svc-cta-h { font-size: 1.05rem; }
  .svc-cta-p { font-size: 0.82rem; }
  .svc-cta-primary {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1.2rem;
  }
  .svc-cta-secondary {
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    color: #9aa0aa;
    padding: 0.3rem 0;
  }
}
.svc-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(80% 60% at 100% 100%, rgba(37, 211, 102, 0.06), transparent 60%);
}
.svc-cta-card > *:not(.svc-cta-glow) { position: relative; z-index: 1; }

/* Minimal inline status — no pill, dot + text */
.svc-cta-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: none;
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.svc-cta-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
  animation: ctaPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ctaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.9); }
}

.svc-cta-h {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.svc-cta-p {
  color: #9aa0aa;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.svc-cta-p strong { color: #FFD600; font-weight: 600; }

.svc-cta-actions {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.svc-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.75rem 1.3rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: -0.005em;
}
.svc-cta-primary-ic { width: 24px; height: 24px; }
.svc-cta-primary-ic svg { width: 16px; height: 16px; }
.svc-cta-primary:hover {
  background: #1ebe5a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.38);
}
.svc-cta-primary-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border-radius: 0;
}
.svc-cta-primary-ic svg { width: 18px; height: 18px; }
.svc-cta-primary-arrow {
  font-size: 1.15rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}
.svc-cta-primary:hover .svc-cta-primary-arrow { transform: translateX(4px); }

.svc-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #9aa0aa;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  transition: color 0.2s ease;
}
.svc-cta-secondary:hover {
  color: #FFD600;
}

@media (max-width: 768px) {
  .svc-cta-card { padding: 1.6rem 1.2rem 1.4rem; margin-top: 1.6rem; }
  .svc-cta-status { font-size: 0.72rem; }
  .svc-cta-primary {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0.9rem 1.2rem;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .svc-block { padding: 1.2rem 1rem; margin-top: 1.8rem; }
  .svc-block-head h3 { font-size: 1.15rem; }
  .svc-block-sub { font-size: 0.85rem; }

  .svc-track {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .svc-track::before { display: none; }
  .svc-track-num { width: 38px; height: 38px; font-size: 0.85rem; }

  .svc-pay-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .svc-pay-methods-row { grid-template-columns: 1fr; }

  .svc-cta-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 1.2rem 1.1rem;
  }
  .svc-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================
   ABOUT PAGE — redesigned
   ===================================================== */
.about-wrap { padding: 1.5rem 1.2rem 2rem; }

.about-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFD600;
  opacity: 0.85;
  margin: 0 0 0.4rem;
  padding-left: 1.4rem;
  position: relative;
}
.about-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFD600);
}

/* HERO — photo + intro */
.about-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.6rem;
  align-items: center;
  margin-bottom: 2rem;
}
.about-hero-photo {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 214, 0, 0.25);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero-text h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 0.3rem;
  letter-spacing: -0.02em;
  color: #fff;
  padding: 0;
}
.about-hero-text h1::after { display: none; }
.about-role {
  color: #FFD600;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  opacity: 0.9;
}
.about-intro {
  color: #d4d6db;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.92;
}

/* STATS */
.about-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  padding: 1.1rem 1.2rem;
  margin: 0 0 2rem;
  background: linear-gradient(160deg, #1d1f27, #16181d);
  border: 1px solid #25272f;
  border-radius: 14px;
}
.about-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0.6rem;
  border-left: 2px solid transparent;
}
.about-stats li:not(:first-child) { border-left-color: #25272f; }
.about-stats strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFD600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.about-stats span {
  color: #9aa0aa;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* STORY GRID — 3 cards */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.about-card {
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.about-card:hover {
  border-color: rgba(255, 214, 0, 0.32);
  transform: translateY(-3px);
}
.about-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.about-card-ic {
  font-size: 1.2rem;
  line-height: 1;
}
.about-card h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.about-card > p {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #c9c9c9;
}
.about-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
  margin: 0;
}
.about-chips li {
  font-size: 0.72rem;
  font-weight: 600;
  background: #20222b;
  border: 1px solid #2a2d36;
  color: #d4d6db;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.about-chips-yellow li {
  border-color: rgba(255, 214, 0, 0.2);
  color: #FFD600;
}

/* "Now building" card variant */
.about-card-now {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(34, 197, 94, 0.08), transparent 55%),
    linear-gradient(160deg, #1a1c22, #16181d);
  border-color: rgba(34, 197, 94, 0.25);
}
.about-now-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  animation: aboutPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes aboutPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}
.about-now-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #FFD600;
}

/* TECH STACK */
.about-stack {
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 2rem;
}
.about-block-head { margin-bottom: 1.1rem; }
.about-block-head .about-eyebrow { margin-bottom: 0.3rem; }
.about-block-head h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.about-stack-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.about-stack-group {
  background: #20222b;
  border: 1px solid #2a2d36;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.about-stack-label {
  color: #9aa0aa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
}

/* FOOT — credentials + values */
.about-foot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.about-foot-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 214, 0, 0.05), transparent 55%),
    linear-gradient(160deg, #1d1f27, #16181d);
  border: 1px solid rgba(255, 214, 0, 0.18);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.about-foot-card:hover {
  border-color: #FFD600;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 214, 0, 0.15);
}
.about-foot-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 214, 0, 0.35), transparent 65%),
    linear-gradient(135deg, rgba(255, 214, 0, 0.18), rgba(255, 214, 0, 0.04));
  border: 1.5px solid rgba(255, 214, 0, 0.45);
  border-radius: 18px;
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow:
    0 6px 22px rgba(255, 214, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.about-foot-card:hover .about-foot-ic {
  transform: scale(1.08) rotate(-4deg);
}
.about-foot-card > div {
  flex: 1;
  min-width: 0;
}
.about-foot-card strong {
  display: block;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.about-foot-card span {
  display: block;
  font-size: 0.92rem;
  color: #c9c9c9;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .about-foot-card {
    padding: 1.2rem 1.1rem;
    gap: 0.9rem;
  }
  .about-foot-ic {
    width: 60px;
    height: 60px;
    font-size: 1.9rem;
    border-radius: 14px;
  }
  .about-foot-card strong { font-size: 1rem; }
  .about-foot-card span { font-size: 0.85rem; }
}

/* MOBILE */
@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .about-hero-photo {
    width: 150px;
    height: 150px;
    border-radius: 20px;
  }
  .about-stats { grid-template-columns: 1fr; }
  .about-stats li { border-left: none; padding: 0.2rem 0; }
  .about-stats li:not(:first-child) {
    border-top: 1px solid #25272f;
    border-left: none;
    padding-top: 0.6rem;
  }
  .about-grid { grid-template-columns: 1fr; }
  .about-stack-groups { grid-template-columns: 1fr; }
  .about-foot { grid-template-columns: 1fr; }
}

/* ABOUT — CV link (replaces credentials/values cards) */
.about-cv-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.6rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 214, 0, 0.06), transparent 55%),
    linear-gradient(160deg, #1d1f27, #16181d);
  border: 1px solid rgba(255, 214, 0, 0.22);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.about-cv-link:hover {
  border-color: #FFD600;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 214, 0, 0.15);
}
.about-cv-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 214, 0, 0.32), transparent 65%),
    linear-gradient(135deg, rgba(255, 214, 0, 0.16), rgba(255, 214, 0, 0.04));
  border: 1.5px solid rgba(255, 214, 0, 0.42);
  border-radius: 16px;
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(255, 214, 0, 0.18);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.about-cv-link:hover .about-cv-ic {
  transform: scale(1.08) rotate(-4deg);
}
.about-cv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.about-cv-body strong {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.about-cv-body span {
  font-size: 0.88rem;
  color: #c9c9c9;
  line-height: 1.5;
}
.about-cv-arrow {
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFD600;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.about-cv-link:hover .about-cv-arrow {
  transform: translateX(6px);
}

@media (max-width: 600px) {
  .about-cv-link { padding: 1.1rem 1.1rem; gap: 0.85rem; }
  .about-cv-ic   { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 12px; }
  .about-cv-body strong { font-size: 0.98rem; }
  .about-cv-body span   { font-size: 0.82rem; }
  .about-cv-arrow { font-size: 1.3rem; }
}

/* Trusted-by marquee — when logos are available */
.bento-trust-track .trust-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2d36;
  border-radius: 10px;
  padding: 0.4rem 0.9rem;
  min-height: 44px;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.bento-trust-track .trust-logo:hover {
  border-color: #FFD600;
  background: rgba(255, 214, 0, 0.06);
  transform: translateY(-1px);
}
.bento-trust-track .trust-logo img {
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
  filter: grayscale(20%) brightness(1.05);
  transition: filter 0.25s ease;
}
.bento-trust-track .trust-logo:hover img {
  filter: grayscale(0%) brightness(1.15);
}
/* Fallback text when image fails to load (replaceWith puts an <em>) */
.bento-trust-track .trust-logo em {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: #d4d6db;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* =====================================================
   SIDEBAR NAV — shown only on mobile (≤900px)
   Top navbar is hidden on mobile to save vertical space
   ===================================================== */
.sidebar-nav {
  display: none;
  flex-direction: column;
  width: 100%;
  margin: 0.4rem 0 0.4rem;
  gap: 0;
}
.sidebar-nav a {
  display: block;
  width: 100%;
  text-align: left;
  color: #d4d6db;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.95rem 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: transparent;
  letter-spacing: -0.005em;
  transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
}
.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover,
.sidebar-nav a:focus {
  color: #FFD600;
  padding-left: 0.7rem;
  background: rgba(255, 214, 0, 0.05);
}
.sidebar-nav a.active {
  color: #FFD600;
  font-weight: 700;
  border-left: 3px solid #FFD600;
  padding-left: 0.6rem;
  background: linear-gradient(90deg, rgba(255, 214, 0, 0.1), transparent 70%);
}

@media (max-width: 900px) {
  /* Show sidebar nav in the drawer */
  .sidebar-nav { display: flex; }

  /* Hide the top navbar entirely on mobile */
  .navbar { display: none !important; }

  /* No more top-bar offset needed */
  .main-content {
    padding-top: 0.5rem !important;
  }
}

/* Compact mobile sidebar so GitHub social shows without scrolling */
@media (max-width: 900px) {
  .sidebar {
    padding: 2.2rem 0.75rem 0.8rem !important;
  }
  .profile-pic-container { margin: 0 auto 0.35rem !important; }
  .profile-pic-squared { width: 64px !important; height: 64px !important; }
  .sidebar h2 { font-size: 1rem !important; margin: 0.2rem 0 !important; }
  .sidebar-title-pill {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.6rem !important;
    margin: 0.15rem auto 0.35rem !important;
  }
  .sidebar-divider { margin: 0.3rem 0 !important; }
  .contact-item {
    padding: 0.35rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  .contact-icon svg,
  .contact-icon img { width: 22px !important; height: 22px !important; }
  .contact-label { font-size: 0.62rem !important; }
  .contact-value { font-size: 0.74rem !important; }
  .sidebar-socials {
    gap: 0.9rem !important;
    margin: 1.3rem 0 0.4rem !important;
    padding: 0 0.4rem !important;
    justify-content: center !important;
  }
  .sidebar-socials a {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }
  .sidebar-socials svg { width: 28px !important; height: 28px !important; }
}

/* Hide the floating category toggle (right-sidebar) on mobile —
   the sidebar already shows all nav items, no need for a redundant filter. */
@media (max-width: 900px) {
  .right-sidebar,
  .right-sidebar-tab,
  .right-sidebar-panel,
  .nav-cat-toggle {
    display: none !important;
  }
}

/* =====================================================
   CV PAGE — Inline PDF preview
   ===================================================== */
.cv-preview {
  margin: 1.4rem 0 2rem;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 16px;
  overflow: hidden;
}
.cv-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #25272f;
  background: linear-gradient(180deg, #1d1f27, #181a20);
  flex-wrap: wrap;
}
.cv-preview-eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFD600;
  margin: 0 0 0.25rem;
  opacity: 0.85;
}
.cv-preview-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.cv-preview-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cv-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.cv-preview-btn-ghost {
  background: transparent;
  border: 1px solid #2a2d36;
  color: #d4d6db;
}
.cv-preview-btn-ghost:hover {
  border-color: #FFD600;
  color: #FFD600;
}
.cv-preview-btn-primary {
  background: linear-gradient(135deg, #FFD600, #FFB800);
  border: 1px solid #FFD600;
  color: #18191A;
  box-shadow: 0 4px 14px rgba(255, 184, 0, 0.3);
}
.cv-preview-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 184, 0, 0.45);
}

/* Iframe wrapper — keep aspect ratio close to A4 portrait */
.cv-preview-frame {
  position: relative;
  width: 100%;
  background: #fff;
  /* A4 ratio is ~1:1.414 → use a generous height for desktop reading */
  height: 80vh;
  min-height: 600px;
  max-height: 900px;
}
.cv-preview-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.cv-preview-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
  cursor: zoom-in;
}

/* ============================================================
   MOBILE SAFETY PASS — prevent horizontal overflow / cut-off
   ============================================================ */
@media (max-width: 768px) {
  /* Hard guarantee no horizontal scroll/clipping anywhere */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .main-content { padding-right: 0 !important; max-width: 100%; }
  .section-container { padding: 0.85rem !important; max-width: 100%; box-sizing: border-box; }
  /* Allow flex/grid items to shrink below their natural size so chips/buttons wrap */
  .case-study,
  .case-study-info,
  .case-study-shots,
  .about-stack-group,
  .about-stack-groups,
  .cv-preview-actions,
  .case-study-actions { min-width: 0; max-width: 100%; }
  /* Case study cards: kill the 280px min-column that was forcing horizontal overflow */
  .case-study, .case-study-flip { grid-template-columns: 1fr !important; padding: 1rem !important; }
  /* Stack pills + impact bullets shouldn't blow out the row */
  .case-study-stack,
  .about-chips { gap: 0.3rem !important; }
  .case-study-stack li,
  .about-chips li { font-size: 0.7rem !important; }
  /* Buttons stack full-width when they would overflow */
  .case-study-actions {
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    width: 100%;
  }
  .case-study-link {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
    gap: 0.35rem !important;
    overflow: hidden;
    text-align: center;
  }
  .case-study-link > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Section container should not be a nested scroll box on mobile —
     let the page body scroll naturally so users can reach the end. */
  .section-container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
  }
  /* THE REAL FIX:
     body is a flex container with align-items: flex-start on desktop (for the
     sidebar+main-content row layout). On mobile that combination prevents
     vertical scroll past the viewport edge because flex children don't push
     their parent's height the way block children do. Drop flex on mobile and
     let the body be a normal scrollable document. */
  body {
    display: block !important;
    align-items: initial !important;
    min-height: 100vh;
    height: auto;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  html {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Give the page bottom space so the floating mode-cluster doesn't sit on the last row */
  .main-content {
    padding-bottom: 6.5rem;
    min-height: auto;
  }
  /* Services CTA: stop the green WhatsApp button from overflowing the viewport */
  .svc-cta-card { max-width: 100%; box-sizing: border-box; }
  .svc-cta-card > .svc-cta-actions {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .svc-cta-primary {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0.7rem 0.7rem !important;
    font-size: 0.82rem !important;
    gap: 0.4rem !important;
    overflow: hidden;
    text-align: center;
  }
  .svc-cta-primary > span:not(.svc-cta-primary-ic):not(.svc-cta-primary-arrow) {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Very narrow phones (≤380px) — fall back to a short label */
@media (max-width: 380px) {
  .svc-cta-primary {
    font-size: 0.78rem !important;
    padding: 0.65rem 0.55rem !important;
  }
  /* Hide the long label, show a short one instead */
  .svc-cta-primary > span:not(.svc-cta-primary-ic):not(.svc-cta-primary-arrow) {
    font-size: 0;
  }
  .svc-cta-primary > span:not(.svc-cta-primary-ic):not(.svc-cta-primary-arrow)::before {
    content: "Chat on WhatsApp";
    font-size: 0.78rem;
  }
}

@media (max-width: 768px) {
  .cv-preview-head {
    padding: 0.85rem 1rem;
    gap: 0.7rem;
  }
  .cv-preview-head h3 { font-size: 0.92rem; }
  .cv-preview-actions { width: 100%; }
  .cv-preview-btn { flex: 1; justify-content: center; font-size: 0.78rem; padding: 0.5rem 0.7rem; }
  .cv-preview-frame {
    height: 70vh;
    min-height: 460px;
  }
}

/* Mobile: Hire + Get a Freelancer CTAs sit SIDE-BY-SIDE so both visible at once */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
  /* All other tiles span full width */
  .bento-tile-name,
  .bento-tile-loc,
  .bento-tile-available,
  .bento-tile-deliver,
  .bento-tile-trust,
  .bento-tile-wa,
  .bento-tile-featured {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  /* Hire + Quote share one row */
  .bento-tile-hire  { grid-column: 1 !important; grid-row: auto !important; }
  .bento-tile-quote { grid-column: 2 !important; grid-row: auto !important; }

  /* Tighten the CTAs so both fit side-by-side without text overflow */
  .bento-tile-hire,
  .bento-tile-quote {
    padding: 0.9rem 0.9rem !important;
    min-height: 84px;
  }
  .bento-tile-hire .bento-cta-body strong,
  .bento-tile-quote .bento-cta-body strong {
    font-size: 0.88rem !important;
    margin-bottom: 0.15rem;
    line-height: 1.2;
  }
  .bento-tile-hire .bento-cta-body small,
  .bento-tile-quote .bento-cta-body small {
    font-size: 0.7rem !important;
    line-height: 1.3;
  }
  .bento-tile-hire .bento-cta-arrow,
  .bento-tile-quote .bento-cta-arrow {
    font-size: 1.1rem !important;
  }
  .bento-tile-quote {
    padding-left: 1rem !important;
    box-shadow: inset 3px 0 0 #FFD600;
  }
}

@media (max-width: 380px) {
  /* On very narrow phones, stack them after all (text would crush) */
  .bento-tile-hire,
  .bento-tile-quote {
    grid-column: 1 / -1 !important;
  }
}

/* =====================================================
   CONTACT PAGE — Revamped
   ===================================================== */
.contact-wrap {
  padding: 2rem 1.4rem 2rem;
}

/* ---------- HERO ---------- */
.contact-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.6rem;
}
.contact-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFD600;
  opacity: 0.85;
  margin: 0 0 0.5rem;
}
.contact-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.6rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  padding: 0;
}
.contact-hero h1::after { display: none; }
.contact-lede {
  color: #c9c9c9;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto 1rem;
  max-width: 540px;
}
.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.contact-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: ctaPulse 2s ease-in-out infinite;
}

/* ---------- PRIMARY ACTION (WhatsApp big button) ---------- */
.contact-primary {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 540px;
  margin: 0 auto 2rem;
  padding: 1rem 1.3rem;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.45);
}
.contact-primary-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-primary-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-primary-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
  letter-spacing: -0.005em;
}
.contact-primary-text small {
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: 500;
}
.contact-primary-arrow {
  font-size: 1.5rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}
.contact-primary:hover .contact-primary-arrow { transform: translateX(4px); }

/* ---------- CHANNELS GRID ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  max-width: 880px;
  margin: 0 auto 1.5rem;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(160deg, #1a1c22, #16181d);
  border: 1px solid #25272f;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 72px;
}
.contact-channel:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 214, 0, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.ch-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #20222b;
  border: 1px solid #2a2d36;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ch-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ch-body strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.1rem;
}
.ch-body small {
  font-size: 0.78rem;
  color: #9aa0aa;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brand color border hints on hover */
.ch-call:hover    { border-color: rgba(96, 165, 250, 0.5); }
.ch-mail:hover    { border-color: rgba(248, 113, 113, 0.5); }
.ch-linkedin:hover{ border-color: rgba(96, 165, 250, 0.5); }
.ch-github:hover  { border-color: rgba(255, 255, 255, 0.4); }
.ch-loc, .ch-hours { cursor: default; }
.ch-loc:hover, .ch-hours:hover { transform: none; }

/* ---------- FOOT NOTE ---------- */
.contact-foot {
  text-align: center;
  color: #6c707a;
  font-size: 0.82rem;
  margin: 0 auto;
  max-width: 540px;
  letter-spacing: 0.01em;
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  .contact-wrap { padding: 1.5rem 1rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .contact-primary { padding: 0.85rem 1rem; gap: 0.7rem; }
  .contact-primary-ic { width: 38px; height: 38px; }
  .contact-primary-text strong { font-size: 0.95rem; }
  .contact-primary-text small { font-size: 0.74rem; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   MOBILE ONLY — reorder bento tiles so Loc (Nairobi)
   sits AFTER the Hire / Freelance CTAs.
   Desktop layout is unaffected.
   ===================================================== */
@media (max-width: 900px) {
  .bento-tile-name      { order: 1; }
  .bento-tile-available { order: 2; }
  .bento-tile-hire      { order: 3; }
  .bento-tile-quote     { order: 3; }  /* same row as Hire — side by side */
  .bento-tile-loc       { order: 4; }  /* Nairobi moves DOWN to after CTAs */
  .bento-tile-deliver   { order: 5; }
  .bento-tile-wa        { order: 6; }
  .bento-tile-featured  { order: 6; }
  .bento-tile-trust     { order: 7; }
}

/* About — "What I bring" / Strength card (replaces "Currently building") */
.about-card-strength {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 214, 0, 0.08), transparent 55%),
    linear-gradient(160deg, #1a1c22, #16181d);
  border-color: rgba(255, 214, 0, 0.28);
}
.about-card-strength .about-card-ic {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.45));
}
.about-card-strength .about-now-title {
  color: #FFD600;
}
.about-card-strength .about-chips li {
  border-color: rgba(255, 214, 0, 0.22);
  color: #FFD600;
  background: rgba(255, 214, 0, 0.04);
}

/* Hide contact info (Email/Phone/Location) in sidebar on mobile —
   info already lives on the dedicated Contact page; save vertical space
   so the nav + socials all fit in one view without scroll. */
@media (max-width: 900px) {
  .sidebar .contact-info { display: none !important; }
  .sidebar .sidebar-divider { display: none; }
}

/* Mobile sidebar: socials moved to TOP (right after title pill)
   so they're ALWAYS visible without scrolling. Nav is below and
   scrolls if it overflows. */
@media (max-width: 900px) {
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  .profile-pic-container { order: 1; }
  .sidebar h2            { order: 2; }
  .sidebar-title-pill    { order: 3; }
  .sidebar-socials       { order: 4; }
  .sidebar-nav           { order: 5; flex: 0 0 auto; }

  .sidebar-socials {
    margin: 0.6rem auto 0.9rem !important;
    padding: 0 0.4rem 0.9rem !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    justify-content: center !important;
  }
  .sidebar-nav a {
    padding: 0.7rem 0.55rem !important;
    font-size: 1rem !important;
  }
}