@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

:root { --bg: transparent; --text: #ffffff; --muted: #a3a3a3; --glass: rgba(20,20,20,0.4); --glass-border: rgba(255,255,255,0.1); --primary: #ffffff; --ease: cubic-bezier(0.32, 0.72, 0, 1); }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
body { background-color: #050505; color: var(--text); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; position: relative; }

#bg-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -3; filter: grayscale(40%) brightness(0.7); }
.video-overlay { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%); z-index: -2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.capitalize-text { text-transform: capitalize; }
input, textarea, .normal-text { text-transform: none !important; }

.shimmer-text { font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, #fff 0%, #888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.animate-fade-in-up { animation: fadeInUp 0.8s var(--ease) forwards; opacity: 0; }
.stagger-1 { animation: fadeInUp 0.8s var(--ease) forwards; animation-delay: 0.15s; opacity: 0; }
.stagger-2 { animation: fadeInUp 0.8s var(--ease) forwards; animation-delay: 0.3s; opacity: 0; }
.stagger-3 { animation: fadeInUp 0.8s var(--ease) forwards; animation-delay: 0.45s; opacity: 0; }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(25px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }

.glass-card { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-radius: 24px; transition: 0.4s var(--ease); position: relative; overflow: hidden; }
.glass-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }

.media-float { animation: floatAnim 6s ease-in-out infinite; }
@keyframes floatAnim { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }

.btn-glow { background: var(--primary); color: #000; transition: all 0.3s var(--ease); border: none; cursor: pointer; border-radius: 50px !important; }
.btn-glow:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,255,255,0.2); }
.btn-glow:active:not(:disabled) { transform: scale(0.95); }
.btn-glow:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-dark { background: var(--glass); color: var(--primary); border: 1px solid var(--glass-border); transition: all 0.3s var(--ease); cursor: pointer; backdrop-filter: blur(24px); border-radius: 50px !important; }
.btn-dark:hover:not(:disabled) { background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.btn-dark:active:not(:disabled) { transform: scale(0.95); }

.social-icon { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); transition: 0.3s; backdrop-filter: blur(24px); }
.social-icon:hover { background: var(--primary); color: #000; transform: translateY(-3px) scale(1.05); }

.loader { border: 2px solid rgba(255,255,255,0.3); border-top: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; animation: spin 0.7s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }