/* HERO */
.hero { padding: 100px 0 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 100vh; display: flex; align-items: center; }
.hero-content { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
.hero-main { display: flex; flex-direction: column; gap: 2rem; }
.hero-header { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }

/* Profile photo + Title*/
.hero-image { display: flex; justify-content: center; align-items: center; }
.profile-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; }
.profile-photo:hover { transform: scale(1.05); }
.hero-title-section { display: flex; flex-direction: column; gap: 0.5rem; }
.hero-title-section h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 0; line-height: 1.2; }
.hero-title-section h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0; opacity: 0.9; }
.hero-title-section .hero-location { font-size: 1.1rem; margin-bottom: 0; opacity: 0.8; }

/* Social buttons */
.hero-buttons { display: flex; gap: 1rem; margin-top: 2rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; text-decoration: none; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.icon-btn i { font-size: 1.1rem; }

/* Portfolio Scroller */
.hero-scroll { grid-column: 1 / -1; justify-self: center; display: inline-flex; flex-direction: column; align-items: center; color: #ffffff; text-decoration: none; font-weight: 600; }
.hero-scroll:hover { opacity: 0.9; }
.hero-scroll:focus { outline: 2px solid #ffffff; outline-offset: 2px; }
.chevrons { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.chevrons i { font-size: 1rem; opacity: 0.8; animation: chevron-bounce 1.5s ease-in-out infinite; }
.chevrons i:nth-child(2) { animation-delay: 0.15s; }
.chevrons i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chevron-bounce { 0% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.3; } }

/* Metrics */
.hero-metrics { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.metric-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 0.8rem 1rem; backdrop-filter: blur(6px); }
.metric-icon i { font-size: 1.2rem; color: #fff; }
.metric-number { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.metric-label { font-size: 0.9rem; opacity: 0.9; }

/* Hour of dev component */
.metric-clock { grid-template-columns: auto 1fr; }
.clock { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.clock-face { position: relative; width: 24px; height: 24px; }
.hand { position: absolute; left: 50%; top: 50%; transform-origin: left center; background: #fff; height: 2px; border-radius: 2px; }
.hand-minute { width: 12px; animation: rotate-minute 4s linear infinite; }
.hand-hour { width: 8px; opacity: 0.9; animation: rotate-hour 24s linear infinite; }
@keyframes rotate-minute { from { transform: translate(-0.5px, -1px) rotate(0deg); } to { transform: translate(-0.5px, -1px) rotate(360deg); } }
@keyframes rotate-hour { from { transform: translate(-0.5px, -1px) rotate(0deg); } to { transform: translate(-0.5px, -1px) rotate(360deg); } }