/* =================================================================
   6. HERO SECTION
   =================================================================
*/
#hero {
    /* CHANGED: Reduced from 180px to 130px to pull content up */
    padding-top: 130px; 
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
    /* Ensure no margin accidentally pushes it down */
    margin-top: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; 
    gap: 40px;
    align-items: center;
}

/* --- TEXT STYLES --- */
.hero-text { z-index: 10; position: relative; }
.hero-label { display: inline-block; padding: 8px 16px; border: 1px solid var(--primary-glow); background: rgba(99, 102, 241, 0.1); color: var(--primary); border-radius: 30px; font-size: 0.8rem; font-weight: 600; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }
.hero-title { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; color: #fff; }
.hero-bio { font-size: 1.1rem; color: var(--text-muted); max-width: 550px; margin-bottom: 40px; line-height: 1.7; }
.hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }

/* --- VISUAL CONTAINER --- */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 600px;
}

.visual-container {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- THE IMAGE --- */
.img-box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 10;
    background: #000;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.profile-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.visual-container:hover .profile-img { transform: scale(1.05); }


/* --- THE ELLIPTICAL RINGS (ATOMIC STYLE) --- */
.big-ring {
    position: absolute;
    top: 50%; left: 50%;
    /* We handle centering in the individual transforms below */
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 1;
    
    /* White Dotted Style */
    border: 2px dotted rgba(255, 255, 255, 0.3); /* Visible white dots */
    box-shadow: 0 0 20px rgba(255,255,255,0.05);
}

/* Ring 1: Wide Horizontal Ellipse */
.ring-1 {
    width: 190%; 
    height: 110%; /* Makes it an oval */
    transform: translate(-50%, -50%); /* Perfectly centered */
    animation: pulse-ring 8s ease-in-out infinite alternate;
}

/* Ring 2: Tilted Ellipse (60deg) */
.ring-2 {
    width: 190%;
    height: 110%;
    /* Center it, then rotate it */
    transform: translate(-50%, -50%) rotate(60deg);
    animation: wobble-1 10s ease-in-out infinite alternate;
}

/* Ring 3: Tilted Ellipse (-60deg) */
.ring-3 {
    width: 190%;
    height: 110%;
    transform: translate(-50%, -50%) rotate(-60deg);
    animation: wobble-2 12s ease-in-out infinite alternate;
}


/* --- ORBS ON THE RINGS --- */
.orb {
    position: absolute;
    border-radius: 50%;
}

/* Orb 1 (On Horizontal Ring) */
.o-1 { 
    width: 12px; height: 12px; 
    background: var(--accent); /* Cyan */
    box-shadow: 0 0 15px var(--accent);
    top: 50%; left: 100%; /* Placed on the edge */
    transform: translate(-50%, -50%);
}

/* Orb 2 (On Ring 2) */
.o-2 { 
    width: 10px; height: 10px; 
    background: var(--secondary); /* Purple */
    box-shadow: 0 0 15px var(--secondary); 
    top: 0%; left: 50%; /* Top edge */
    transform: translate(-50%, -50%);
}

/* Orb 3 (On Ring 3) */
.o-3 {
    width: 8px; height: 8px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
    bottom: 0%; left: 50%; /* Bottom edge */
    transform: translate(-50%, 50%);
}


/* --- THE 3 HOLLOW SHAPES --- */
.hollow-shape {
    position: absolute;
    border-radius: 50%;
    background: transparent;
    z-index: 20;
    border-style: solid;
    border-width: 4px;
    animation: float-shape 6s ease-in-out infinite alternate;
}

.h-cyan { width: 70px; height: 70px; border-color: var(--accent); top: -10%; right: -10%; box-shadow: 0 0 25px rgba(6, 182, 212, 0.5); }
.h-indigo { width: 90px; height: 90px; border-color: var(--primary); bottom: -15%; left: -15%; box-shadow: 0 0 25px rgba(99, 102, 241, 0.5); animation-delay: 1s; }
.h-white { width: 50px; height: 50px; border-color: #fff; bottom: 20%; right: -25%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); animation-delay: 2.5s; }


/* --- ANIMATIONS (Gentle Wobble to preserve shape) --- */
@keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes wobble-1 {
    0% { transform: translate(-50%, -50%) rotate(60deg); }
    100% { transform: translate(-50%, -50%) rotate(65deg); }
}

@keyframes wobble-2 {
    0% { transform: translate(-50%, -50%) rotate(-60deg); }
    100% { transform: translate(-50%, -50%) rotate(-65deg); }
}

@keyframes float-shape { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-15px) scale(1.05); } }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; }
    .visual-container { width: 300px; height: 300px; margin: 0 auto; }
    .img-box { width: 220px; height: 220px; }
    
    /* Adjust Hollow Shapes */
    .h-cyan { width: 50px; height: 50px; right: 0; top: 0; }
    .h-indigo { width: 60px; height: 60px; left: -5%; bottom: -5%; }
    .h-white { width: 30px; height: 30px; right: -5%; bottom: 10%; }
}