/* ── SVG ICON SYSTEM ── */
/* Inline SVG icons used as premium humanised design elements */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Service icon containers */
.service-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,142,247,0.1);
  border: 1px solid rgba(79,142,247,0.18);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.service-icon.gold {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.18);
}
.service-card:hover .service-icon {
  background: rgba(79,142,247,0.18);
  border-color: rgba(79,142,247,0.35);
}
.service-card:hover .service-icon.gold {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.35);
}
.service-icon svg { color: #4F8EF7; }
.service-icon.gold svg { color: #C9A84C; }

/* Skill badge icon containers */
.skill-badge-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,142,247,0.1);
  border-radius: 10px;
  color: #4F8EF7;
}
.skill-badge:hover .skill-badge-icon {
  background: rgba(79,142,247,0.2);
}

/* Why-me icons */
.whyme-icon svg { color: #4F8EF7; }
.whyme-icon.gold svg { color: #C9A84C; }

/* Contact info icons */
.contact-info-icon svg { color: #4F8EF7; }

/* Floating CTA & social */
.social-btn svg { width: 16px; height: 16px; color: currentColor; }

/* Nav CTA arrow */
.btn-arrow { transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Fix skills layout — remove large blank space */
.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.skills-mech-visual {
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(79,142,247,0.04));
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.skills-mech-visual img {
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(201,168,76,0.2));
  animation: float 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.skills-mech-visual-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 60px;
  background: rgba(201,168,76,0.25);
  filter: blur(30px);
  border-radius: 50%;
}

/* Hero image: use actual uploaded images with priority */
.hero-img-wrap img {
  height: 480px;
}

/* About card image fix — ensure it renders cleanly */
.about-card-img {
  position: absolute;
  bottom: 0; right: -10px;
  height: 220px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Portfolio empty thumb placeholder */
.project-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(79,142,247,0.08), rgba(201,168,76,0.06));
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.project-thumb-placeholder svg {
  width: 40px; height: 40px;
  color: rgba(79,142,247,0.4);
}

/* Section tag with SVG dot */
.section-tag-dot {
  width: 6px; height: 6px;
  background: #4F8EF7;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  display: inline-block;
}