.hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); text-align: center; background: linear-gradient(rgba(5,5,5,0.9), rgba(5,5,5,0.95)); background-size: cover; background-position: center top; }
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero-role { color: var(--color-accent); margin: var(--space-sm) 0; min-height: 2.4rem; }
.typing-cursor { animation: blink 1s step-end infinite; color: var(--color-primary); }
@keyframes blink { 50% { opacity: 0; } }
.hero-tagline { margin: var(--space-md) 0 var(--space-lg); font-size: 1.05rem; }
.hero-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

.section { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.section-title { margin-bottom: var(--space-lg); position: relative; padding-bottom: var(--space-sm); }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background-color: var(--color-primary); border-radius: var(--radius-sm); }

.about-content { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-xl); align-items: start; }
.about-photo { width: 100%; border: 1px solid var(--color-border); }
.about-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.project-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin: var(--space-sm) 0 var(--space-md); }
.project-links { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.skills-list { display: flex; flex-direction: column; gap: var(--space-md); }
.skill-item { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.skill-header { display: flex; justify-content: space-between; margin-bottom: var(--space-sm); font-weight: 600; }

.certificates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.footer { text-align: center; padding: var(--space-lg); border-top: 1px solid var(--color-border); margin-top: var(--space-xl); }

@media (max-width: 768px) {
  .about-content { grid-template-columns: 1fr; }
  .about-details { grid-template-columns: 1fr; }
  .hero { padding: var(--space-lg); }
  h1 { font-size: 2rem; }
}

.hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; z-index: 0; }
.hero-blob-1 { width: 380px; height: 380px; background: radial-gradient(circle, var(--color-primary), transparent 70%); top: -80px; left: -80px; animation: floatY 8s ease-in-out infinite; }
.hero-blob-2 { width: 320px; height: 320px; background: radial-gradient(circle, var(--color-accent), transparent 70%); bottom: -100px; right: -60px; animation: floatY 10s ease-in-out infinite reverse; }

.brand-logo-img { width: 34px; height: 34px; border-radius: 50%; opacity: 0; transform: scale(0.5) rotate(-30deg); transition: opacity 0.5s var(--ease-bounce), transform 0.5s var(--ease-bounce); }
.navbar.scrolled .brand-logo-img { opacity: 1; transform: scale(1) rotate(0deg); }
.scrolled-always { opacity: 1 !important; transform: scale(1) rotate(0deg) !important; }
.brand-logo-wrap { display: flex; align-items: center; gap: var(--space-sm); }
.brand-name-text { transition: letter-spacing 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth); }
.navbar.scrolled .brand-name-text { color: var(--color-primary); letter-spacing: 0.5px; }

/* NOTE: image sizing rules (.project-image, .certificate-card img, etc.) intentionally
   REMOVED from this file — they now live only in shared/css/components.css so there's
   no conflict between the two stylesheets. Never re-add image size rules here. */