/* hero.css - стили главного экрана */
.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
    color: white;
    padding: 180px 0 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.15), transparent 50%);
    pointer-events: none;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}