/* Hero Section - Fully Responsive */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    cursor: crosshair;
}

.hero h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);  /* Scales smoothly */
    font-weight: 300;
    letter-spacing: clamp(0.2em, 2vw, 0.5em);
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
}

.hero h1 strong {
    font-weight: 700;
    display: block;
    margin-top: 0.5rem;
    color: #000; /* fallback if gradient fails */
    background: linear-gradient(135deg, #000 0%, #E8A020 40%, #000 60%, #E8A020 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    letter-spacing: clamp(0.1em, 1vw, 0.2em);
    color: #666;
    animation: fadeInUp 1s ease 0.2s both;
}