:root {
  --bg: #050505; --text: #ffffff; --muted: #a3a3a3; --glass: rgba(20,20,20,0.4);
  --glass-border: rgba(255,255,255,0.1); --glass-hover: rgba(255,255,255,0.08);
  --primary: #ffffff; --sans: 'Inter', sans-serif; --display: 'Space Grotesk', sans-serif;
  --blur: blur(24px) saturate(150%); --ios-ease: cubic-bezier(0.32,0.72,0,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; min-height: 100vh; display: flex; justify-content: center; padding: 1rem; }
#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); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
h1, h2, h3 { font-family: var(--display); }
#root { width: 100%; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.glass-card { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: 24px; transition: all 0.3s; }
.glass-card:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-5px); }
.glass-input { background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 20px; width: 100%; color: var(--text); font-family: var(--sans); font-size: 1rem; outline: none; transition: all 0.3s; }
.glass-input:focus { border-color: var(--primary); background: rgba(0,0,0,0.5); }
.btn-primary { background: var(--primary); color: #000; border: 1px solid transparent; border-radius: 50px; padding: 14px 32px; font-weight: 600; transition: all 0.3s var(--ios-ease); cursor: pointer; width: 100%; }
.btn-primary:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,255,255,0.2); }
.btn-primary:active { transform: scale(0.95); }
.btn-download { background: var(--glass); border: 1px solid var(--glass-border); color: var(--primary); border-radius: 50px; padding: 14px 32px; font-weight: 600; transition: all 0.3s var(--ios-ease); cursor: pointer; width: 100%; }
.btn-download:hover:not(:disabled) { background: var(--glass-hover); transform: translateY(-3px); }
.social-circle { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); font-size: 1.1rem; transition: 0.3s; backdrop-filter: var(--blur); -webkit-backdrop-filter: blur(24px) saturate(150%); }
.social-circle:hover { background: var(--primary); color: #000; transform: translateY(-3px) scale(1.05); }
.gradient-text { background: linear-gradient(135deg,#fff 0%,#888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.badge { display: inline-block; padding: 8px 20px; border-radius: 50px; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 1rem; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: var(--blur); }
.menu-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
.menu-hamburger { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer; transition: 0.3s; backdrop-filter: var(--blur); }
.menu-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 4px; transition: 0.3s; }
.menu-hamburger:hover { transform: scale(1.05); }
.menu-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.menu-hamburger.open span:nth-child(2) { opacity: 0; }
.menu-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }
.dropdown-menu { position: absolute; top: 60px; right: 0; background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: 16px; width: 170px; overflow: hidden; animation: fadeUp 0.2s ease; }
.dropdown-menu button { width: 100%; padding: 12px 18px; text-align: left; background: transparent; border: none; color: var(--text); font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 12px; }
.dropdown-menu button:hover { background: var(--glass-hover); }
.product-category-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1rem; transition: 0.2s; cursor: pointer; }
.product-category-card:hover { border-color: rgba(255,255,255,0.3); background: var(--glass-hover); transform: translateX(5px); }
.role-option { background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem; transition: 0.2s; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.role-option:hover { background: var(--glass-hover); border-color: rgba(255,255,255,0.3); }
.dev-note { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 1.5rem; transition: all 0.3s ease; backdrop-filter: var(--blur); }
.dev-note:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp 0.4s ease forwards; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.animate-zoom-in { animation: zoomIn 0.2s ease-out forwards; }
.delay-100 { animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; }
.delay-200 { animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; }
.delay-300 { animation-delay: 0.3s; opacity: 0; animation-fill-mode: forwards; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }