body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
}

/* --- ANIMATION CONTAINER --- */
.animation-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(117, 230, 163, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.dot-wrapper {
    position: absolute;
}

.dot {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    opacity: 0.85;
}

.ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
}

/* --- DOT 1 --- */
.wrapper-1 {
    transform: translate(-54px, -30px);
    animation: float1 2.4s infinite ease-in-out alternate;
}
.dot-1 {
    background-color: #FF8A8A;
    animation: scale1 1.5s infinite ease-in-out alternate;
}
.ring-1 {
    border-color: #FF8A8A;
    animation: ringPulse 1.4s infinite ease-in-out alternate;
}

/* --- DOT 2 --- */
.wrapper-2 {
    transform: translate(10px, -60px);
    animation: float2 1.9s infinite ease-in-out alternate;
}
.dot-2 {
    background-color: #FFE066;
    animation: scale2 2.2s infinite ease-in-out alternate;
}
.ring-2 {
    border-color: #FFE066;
    animation: ringPulse 1.4s infinite ease-in-out alternate;
    animation-delay: 0.3s;
}

/* --- DOT 3 --- */
.wrapper-3 {
    transform: translate(58px, -14px);
    animation: float3 2.1s infinite ease-in-out alternate;
    z-index: 2;
}
.dot-3 {
    background-color: #75E6A3;
    animation: scale3 1.8s infinite ease-in-out alternate;
}
.ring-3 {
    border-color: #75E6A3;
    animation: ringPulse 1.4s infinite ease-in-out alternate;
    animation-delay: 0.1s;
}

/* --- DOT 4 --- */
.wrapper-4 {
    transform: translate(-10px, 52px);
    animation: float4 1.76s infinite ease-in-out alternate;
}
.dot-4 {
    background-color: #74B9FF;
    animation: scale4 2.0s infinite ease-in-out alternate;
}
.ring-4 {
    border-color: #74B9FF;
    animation: ringPulse 1.4s infinite ease-in-out alternate;
    animation-delay: 0.5s;
}

/* --- KEYFRAMES --- */
@keyframes ringPulse {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0.2; }
}

@keyframes scale1 { 0% { transform: scale(0.78); } 100% { transform: scale(1.22); } }
@keyframes scale2 { 0% { transform: scale(1.15); } 100% { transform: scale(0.78); } }
@keyframes scale3 { 0% { transform: scale(0.88); } 100% { transform: scale(1.22); } }
@keyframes scale4 { 0% { transform: scale(1.20); } 100% { transform: scale(0.80); } }

@keyframes float1 { 0% { transform: translate(-54px, -40px); } 100% { transform: translate(-54px, -20px); } }
@keyframes float2 { 0% { transform: translate(10px, -52px); } 100% { transform: translate(10px, -72px); } }
@keyframes float3 { 0% { transform: translate(58px, -20px); } 100% { transform: translate(58px, -0px); } }
@keyframes float4 { 0% { transform: translate(-10px, 64px); } 100% { transform: translate(-10px, 44px); } }


/* --- TYPOGRAPHY & CONTENT --- */
.content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

.content h2 {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.description-card {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    max-width: 450px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}

.description-card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* --- FOOTER LINKS --- */
.footer-links {
    margin-top: 4rem;
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.8);
}