* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", system-ui, sans-serif;
}

body {
    height: 100vh;
    background: radial-gradient(circle at top right, #0f172a, #020617 70%);
    overflow: hidden;
}

/* Fondo tipo flujo de energía */

.energy span {
    position: absolute;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, #6366f1, transparent);
    opacity: .25;
    animation: energy 12s linear infinite;
}

.energy span:nth-child(2) { top: 20%; animation-duration: 14s; }
.energy span:nth-child(3) { top: 40%; animation-duration: 16s; }
.energy span:nth-child(4) { top: 60%; animation-duration: 18s; }
.energy span:nth-child(5) { top: 80%; animation-duration: 20s; }

@keyframes energy {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Contenido */

.content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Tuerca */

.gear {
    width: 90px;
    height: 90px;
    border: 8px solid #60a5fa;
    border-radius: 50%;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    animation: spin 2.5s linear infinite;
    margin-bottom: 24px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Texto */

h1 {
    font-size: 3rem;
    color: #e5e7eb;
    margin-bottom: 12px;
}

p {
    font-size: 1.1rem;
    color: #cbd5f5;
    max-width: 520px;
}

/* SEO invisible */

.seo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}