:root {
    --primary: #0d6efd;
    --primary-dark: #0a58ca;
    --darker: #12151a;
    --accent: #00d4ff;
    --gradient: linear-gradient(135deg, #0d6efd 0%, #00d4ff 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #fff;
    line-height: 1.6;
    overflow: hidden;
    background: var(--darker);
}

/* ========== FULL PAGE HERO ========== */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--darker); position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: -20%;
    background: radial-gradient(circle at 30% 50%, rgba(13,110,253,.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(0,212,255,.1) 0%, transparent 40%);
    animation: heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(5%, -3%) scale(1.05); }
    66%  { transform: translate(-3%, 5%) scale(1.02); }
    100% { transform: translate(2%, 2%) scale(1.08); }
}
.hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* ========== PARTICLES ========== */
.hero-particles {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-particles .particle {
    position: absolute; border-radius: 50%; opacity: 0;
    animation: particleFloat linear infinite;
}
.hero-particles .particle:nth-child(1) {
    width: 4px; height: 4px; background: var(--accent); left: 15%; bottom: -10px;
    animation-duration: 14s; animation-delay: 0s;
}
.hero-particles .particle:nth-child(2) {
    width: 6px; height: 6px; background: var(--primary); left: 35%; bottom: -10px;
    animation-duration: 18s; animation-delay: 2s;
}
.hero-particles .particle:nth-child(3) {
    width: 3px; height: 3px; background: var(--accent); left: 55%; bottom: -10px;
    animation-duration: 16s; animation-delay: 4s;
}
.hero-particles .particle:nth-child(4) {
    width: 5px; height: 5px; background: var(--primary); left: 75%; bottom: -10px;
    animation-duration: 20s; animation-delay: 1s;
}
.hero-particles .particle:nth-child(5) {
    width: 3px; height: 3px; background: var(--accent); left: 90%; bottom: -10px;
    animation-duration: 15s; animation-delay: 6s;
}
.hero-particles .particle:nth-child(6) {
    width: 4px; height: 4px; background: var(--primary); left: 5%; bottom: -10px;
    animation-duration: 22s; animation-delay: 3s;
}
.hero-particles .particle:nth-child(7) {
    width: 5px; height: 5px; background: var(--accent); left: 45%; bottom: -10px;
    animation-duration: 17s; animation-delay: 8s;
}
.hero-particles .particle:nth-child(8) {
    width: 3px; height: 3px; background: var(--primary); left: 65%; bottom: -10px;
    animation-duration: 19s; animation-delay: 5s;
}
@keyframes particleFloat {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .6; }
    90%  { opacity: .6; }
    100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ========== CONTENT ========== */
.hero-content {
    position: relative; text-align: center; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.hero-content .logo {
    width: 140px; height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.badge {
    display: inline-block; padding: .5rem 1.5rem;
    background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3);
    border-radius: 50px; color: var(--accent); font-size: .9rem;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,255,.2); }
    50%      { box-shadow: 0 0 20px 5px rgba(0,212,255,.15); }
}
.contact-line {
    margin-top: 2rem; color: #6b7280; font-size: .9rem;
}
.contact-line a {
    color: var(--accent); text-decoration: none;
}
.contact-line a:hover { text-decoration: underline; }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero-grid, .hero-particles .particle, .badge { animation: none; }
    .hero-particles .particle { opacity: .3; }
}

/* ========== SR-ONLY (SEO content, invisible) ========== */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content .logo { width: 90px; }
}