#preloader {position: fixed; top:0; left:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
background: radial-gradient(circle at center, #0a0a0a 0%, #1a1a1a 100%);
z-index:9999; transition: opacity 0.8s ease, visibility 0.8s;}
#preloader.loaded { opacity:0; visibility:hidden; }
.loader-animation { position:relative; text-align:center; }
.loader-icon { width:80px; height:80px; border:6px solid #16a34a;
border-top:6px solid transparent; border-radius:50%;
margin:0 auto 20px auto; animation: spin 2s linear infinite; }
.loader-text { font-size:2rem; font-weight:bold; color:#16a34a;
text-shadow:0 0 15px rgba(22,163,74,0.8); animation: pulse 1.5s infinite; }
#loader-message { margin-top: 15px; font-size: 1rem; color: #ccc;
font-style: italic; transition: opacity 0.4s ease; }
@keyframes spin { 100% { transform:rotate(360deg); } }
@keyframes pulse {0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.7; transform:scale(1.1); }}

body { margin:0; font-family:Arial,sans-serif; color:#fff; background:#111; }
nav { background:#222; padding:10px; text-align:center; }
nav a { color:#16a34a; margin:0 10px; text-decoration:none; }
.hero { position:relative; height:100vh; overflow:hidden; }
.hero video { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; z-index:-1; }
.hero .overlay { position:relative; z-index:1; background:rgba(0,0,0,0.5); height:100%; 
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero h1 { font-size:3rem; margin:0; }
footer { background:#222; text-align:center; padding:10px; font-size:0.9rem; }