:root{--primary-main: #00d9ff;--primary-hover: #00b8d9;--primary-active: #0088aa;--secondary-main: #6b5bef;--secondary-hover: #5847d9;--secondary-active: #4533a8;--bg-primary: #050810;--bg-secondary: #0d1120;--bg-tertiary: #141829;--bg-quaternary: #1a1f2e;--bg-gradient: linear-gradient(135deg, #050810 0%, #0d1120 25%, #141829 75%, #1a1f2e 100%);--surface-main: #141829;--surface-elevated: #1f2536;--surface-dark: #0d1120;--surface-border: rgba(0, 217, 255, .1);--surface-border-light: rgba(255, 255, 255, .08);--text-primary: #f8f9fa;--text-secondary: #b0b3b8;--text-muted: #7a7d82;--text-accent: #00d9ff;--text-accent-secondary: #6b5bef;--accent-hydrogen: #00d9ff;--accent-electric: #6b5bef;--accent-innovation: #00ffd9;--accent-warning: #ff6b6b;--accent-success: #00d9ff;--accent-glow: rgba(0, 217, 255, .4);--status-success: #00d9ff;--status-error: #ff5252;--status-warning: #ffb74d;--status-info: #42a5f5;--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading: "Space Mono", "Courier New", monospace;--font-accent: "Poppins", "Arial", sans-serif;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 1.875rem;--font-4xl: 2.25rem;--font-5xl: 3rem;--font-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-black: 900;--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 8px 24px rgba(0, 0, 0, .6);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .7);--shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, .5), 0 0 40px rgba(0, 217, 255, .3);--shadow-glow-purple: 0 0 20px rgba(107, 91, 239, .5), 0 0 40px rgba(107, 91, 239, .3);--shadow-glow-strong: 0 0 30px rgba(0, 217, 255, .7), 0 0 60px rgba(0, 217, 255, .4);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}#root{min-height:100vh}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}@keyframes glow{0%,to{box-shadow:0 0 20px #00d9ff4d}50%{box-shadow:0 0 40px #00d9ff99}}@keyframes glowPulse{0%,to{text-shadow:0 0 10px rgba(0,217,255,.3),0 0 20px rgba(0,217,255,.1)}50%{text-shadow:0 0 20px rgba(0,217,255,.6),0 0 40px rgba(0,217,255,.4)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slowGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-pulse{animation:pulse 2.5s ease-in-out infinite}.animate-glow{animation:glow 3s ease-in-out infinite}.animate-glow-pulse{animation:glowPulse 4s ease-in-out infinite}.animate-fade-in{animation:fadeIn 1.2s ease-out}.animate-fade-in-up{animation:fadeInUp 1.2s ease-out}.animate-slide-in-up{animation:slideInUp .6s ease-out}.animate-gradient{animation:slowGradientShift 15s ease infinite;background-size:200% 200%}.header{position:fixed;top:0;left:0;right:0;background:rgba(5,8,16,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,217,255,.1);z-index:1000;padding:1rem 0}.header-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem}.brand{display:flex;align-items:center;gap:1rem}.brand-logo-small{max-width:50px;height:auto;filter:drop-shadow(0 0 10px rgba(0,217,255,.4))}.brand-name{font-size:1.5rem;font-weight:700;font-family:var(--font-heading);color:var(--text-primary);text-shadow:0 0 10px rgba(0,217,255,.3)}.navigation{display:flex;gap:2rem}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:1rem;transition:color .3s ease;position:relative}.nav-link:hover{color:var(--primary-main)}.nav-link:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary-main);transition:width .3s ease}.nav-link:hover:after{width:100%}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-background{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg-gradient);background-image:url(/HERO\ ELEMENT.gif);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-1}.tech-grid{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(0,217,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.05) 1px,transparent 1px);background-size:80px 80px;animation:slowGradientShift 15s ease infinite;background-size:200% 200%}.hero-content{text-align:center;max-width:1200px;padding:0 var(--space-lg);z-index:1}.coming-soon-badge{display:inline-flex;align-items:center;gap:.75rem;padding:.875rem 2rem;background:linear-gradient(135deg,rgba(0,217,255,.1) 0%,rgba(107,91,239,.1) 100%);border:2px solid rgba(0,217,255,.4);border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 30px #00d9ff4d,inset 0 1px #fff3;margin-bottom:2.5rem}.coming-soon-badge .subtext{color:var(--text-secondary);font-size:.85rem;font-weight:500}.logo{margin-bottom:1.5rem}.brand-logo{max-width:300px;height:auto;filter:drop-shadow(0 0 30px rgba(0,217,255,.6)) drop-shadow(0 0 60px rgba(0,217,255,.3));margin-bottom:1rem}.logo-accents{display:flex;justify-content:center;gap:2rem}.accent-line{width:40px;height:2px;background:linear-gradient(90deg,var(--primary-main),var(--secondary-main))}.accent-line.left{background:linear-gradient(90deg,var(--secondary-main),var(--primary-main))}.hero-heading{font-size:var(--font-4xl);font-weight:800;font-family:var(--font-heading);color:var(--text-primary);line-height:1.1;letter-spacing:-.01em;margin-bottom:1.5rem;text-shadow:0 4px 30px rgba(0,0,0,.8);max-width:1000px;margin-left:auto;margin-right:auto}.hero-heading .highlight{color:var(--primary-main);text-shadow:0 0 20px rgba(0,217,255,.5)}.hero-subtitle{font-size:1.35rem;color:var(--text-secondary);line-height:1.8;max-width:800px;margin:0 auto 3rem;font-weight:500}.tech-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem;margin-bottom:3rem}.spec-item{padding:1.5rem;background:rgba(0,217,255,.08);border:1px solid rgba(0,217,255,.2);border-radius:1rem;text-align:center;transition:all .3s ease;cursor:pointer}.spec-item:hover{border-color:#00d9ff99;background:rgba(0,217,255,.15);box-shadow:0 0 20px #00d9ff4d}.spec-icon{font-size:2rem;margin-bottom:.5rem}.spec-value{font-size:1.25rem;font-weight:700;color:var(--primary-main);margin-bottom:.25rem}.spec-label{font-size:.9rem;color:var(--text-secondary);font-weight:500}.hero-gif{margin-top:3rem;text-align:center}.hero-animation{max-width:600px;width:100%;height:auto;border-radius:1rem;box-shadow:0 0 40px #00d9ff4d}.features{padding:6rem 2rem;background:var(--bg-secondary)}.features-container{max-width:1200px;margin:0 auto}.features-header{text-align:center;margin-bottom:3rem}.features-title{font-size:var(--font-3xl);font-weight:800;font-family:var(--font-heading);color:var(--text-primary);margin-bottom:1rem}.features-subtitle{font-size:1.25rem;color:var(--text-secondary);font-weight:500}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.feature-item{padding:2rem;background:rgba(0,217,255,.05);border:1px solid rgba(0,217,255,.1);border-radius:1rem;text-align:center;transition:all .3s ease}.feature-item:hover{border-color:#00d9ff4d;background:rgba(0,217,255,.1);box-shadow:0 8px 24px #00d9ff33}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.feature-description{color:var(--text-secondary);line-height:1.6}.contact{padding:6rem 2rem;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border-top:2px solid rgba(0,217,255,.2)}.contact-container{max-width:700px;margin:0 auto}.contact-header{text-align:center;margin-bottom:3rem}.contact-title{font-size:2.75rem;font-weight:800;font-family:var(--font-heading);color:var(--text-primary);margin-bottom:1rem}.contact-subtitle{font-size:1.25rem;color:var(--text-secondary);line-height:1.6}.contact-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-primary);font-size:.95rem}.form-group input{padding:1.1rem 1.5rem;background:var(--surface-main);border:2px solid rgba(0,217,255,.15);border-radius:.875rem;font-size:1rem;color:var(--text-primary);font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-group input:focus{border-color:var(--primary-main);box-shadow:0 0 0 4px #00d9ff33,inset 0 0 0 1px #00d9ff1a;background:var(--surface-elevated);outline:none}.form-group input::placeholder{color:var(--text-muted)}.role-options{display:flex;flex-direction:column;gap:1.25rem}.role-option{background:rgba(107,91,239,.08);border:2px solid rgba(107,91,239,.2);border-radius:1rem;padding:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:1rem}.role-option:hover{border-color:var(--primary-main);background:rgba(0,217,255,.1);box-shadow:0 0 25px #00d9ff33}.role-option.selected{border-color:var(--primary-main);background:rgba(0,217,255,.15);box-shadow:0 0 30px #00d9ff66,inset 0 0 0 1px #00d9ff33}.role-icon{font-size:1.5rem}.role-content{flex:1}.role-title{font-weight:700;color:var(--text-primary);margin-bottom:.25rem}.role-description{font-size:.9rem;color:var(--text-secondary)}.submit-btn{width:100%;padding:1.5rem 2rem;font-size:1.1rem;font-weight:700;color:var(--bg-primary);background:linear-gradient(135deg,var(--primary-main) 0%,var(--secondary-main) 100%);border:none;border-radius:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #00d9ff66,inset 0 1px #ffffff4d;text-transform:uppercase;letter-spacing:.08em;position:relative;overflow:hidden}.submit-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 48px #00d9ff99,inset 0 1px #ffffff4d}.submit-btn:active:not(:disabled){transform:translateY(-1px)}.submit-btn:disabled{opacity:.7;cursor:not-allowed}.success-message{padding:2rem;background:linear-gradient(135deg,rgba(0,217,255,.15) 0%,rgba(107,91,239,.15) 100%);border:2px solid var(--primary-main);border-radius:1rem;color:var(--text-primary);text-align:center;font-weight:600;box-shadow:0 0 30px #00d9ff4d,inset 0 0 0 1px #00d9ff33}.success-message h4{margin-bottom:1rem;color:var(--primary-main)}.footer{padding:4rem 2rem 2rem;background:var(--bg-primary);border-top:1px solid rgba(0,217,255,.1)}.footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h4{color:var(--text-primary);font-size:1.1rem;font-weight:600;margin-bottom:1rem;font-family:var(--font-heading)}.footer-section p{color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}.footer-brand{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.footer-logo{max-width:40px;height:auto;filter:drop-shadow(0 0 10px rgba(0,217,255,.4))}.footer-links{display:flex;flex-direction:column;gap:.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .3s ease}.footer-links a:hover{color:var(--primary-main)}.social-links{display:flex;gap:1rem;margin-bottom:1rem}.social-link{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .3s ease;padding:.5rem;border:1px solid rgba(0,217,255,.2);border-radius:.5rem}.social-link:hover{color:var(--primary-main);border-color:var(--primary-main);background:rgba(0,217,255,.05)}.contact-info p{color:var(--text-muted);font-size:.85rem;margin:.25rem 0}.footer-bottom{border-top:1px solid rgba(0,217,255,.1);padding-top:2rem;text-align:center}.footer-bottom p{color:var(--text-muted);font-size:.9rem}@media (max-width: 1024px){.features-grid{grid-template-columns:repeat(2,1fr)}.tech-specs{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width: 768px){:root{--font-4xl: 2rem;--font-5xl: 2.5rem;--font-6xl: 3rem}.header-container{padding:0 var(--space-md);flex-wrap:wrap}.hero-content{padding:0 var(--space-md)}.hero-heading{font-size:2.5rem;line-height:1.15}.hero-subtitle{font-size:1.05rem}.coming-soon-badge{padding:.75rem 1.5rem;font-size:.85rem}.brand-logo{max-width:250px}.tech-specs{grid-template-columns:1fr;gap:1rem}.features{padding:4rem var(--space-md)}.features-grid{grid-template-columns:1fr;gap:1.5rem}.contact{padding:4rem var(--space-md)}.contact-title{font-size:2rem}.footer-container{grid-template-columns:1fr;gap:2rem}.footer-links{flex-direction:column;gap:.75rem}.social-links{flex-wrap:wrap}}.auth-section{display:flex;align-items:center;gap:1rem}.auth-button{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:rgba(0,217,255,.1);border:2px solid rgba(0,217,255,.3);border-radius:.75rem;color:var(--text-primary);text-decoration:none;font-weight:600;font-size:.9rem;transition:all .3s ease;cursor:pointer}.auth-button:hover{background:rgba(0,217,255,.2);border-color:var(--primary-main);box-shadow:0 0 20px #00d9ff4d}.auth-button.loading{opacity:.7;cursor:not-allowed}.auth-button.error{background:rgba(255,82,82,.1);border-color:var(--status-error);color:var(--status-error)}.spinner{width:16px;height:16px;border:2px solid rgba(0,217,255,.3);border-top:2px solid var(--primary-main);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-btn{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.75rem;background:linear-gradient(135deg,var(--primary-main) 0%,var(--secondary-main) 100%);border:none;border-radius:.75rem;color:var(--bg-primary);font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #00d9ff4d}.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00d9ff80}.google-icon{width:18px;height:18px}.user-info{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.2);border-radius:.75rem}.user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid var(--primary-main)}.user-avatar img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--primary-main),var(--secondary-main));display:flex;align-items:center;justify-content:center;color:var(--bg-primary);font-weight:700;font-size:.9rem}.user-details{display:flex;flex-direction:column;gap:.125rem}.user-name{font-weight:600;font-size:.9rem;color:var(--text-primary)}.user-email{font-size:.8rem;color:var(--text-secondary)}.logout-btn{padding:.5rem 1rem;background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.3);border-radius:.5rem;color:var(--status-error);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease}.logout-btn:hover{background:rgba(255,82,82,.2);border-color:var(--status-error)}.auth-required-message{padding:3rem 2rem;text-align:center;background:rgba(107,91,239,.05);border:2px solid rgba(107,91,239,.2);border-radius:1rem}.auth-prompt h4{color:var(--text-primary);font-size:1.5rem;font-weight:700;margin-bottom:1rem}.auth-prompt p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.error-message{padding:1rem 1.5rem;background:rgba(255,82,82,.1);border:1px solid var(--status-error);border-radius:.75rem;color:var(--status-error);font-weight:500;margin-bottom:1rem}.form-group textarea{padding:1.1rem 1.5rem;background:var(--surface-main);border:2px solid rgba(0,217,255,.15);border-radius:.875rem;font-size:1rem;color:var(--text-primary);font-weight:500;font-family:inherit;resize:vertical;min-height:120px;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-group textarea:focus{border-color:var(--primary-main);box-shadow:0 0 0 4px #00d9ff33,inset 0 0 0 1px #00d9ff1a;background:var(--surface-elevated);outline:none}.form-group textarea::placeholder{color:var(--text-muted)}@media (max-width: 768px){.auth-section{gap:.5rem}.user-info{padding:.5rem .75rem;gap:.75rem}.user-avatar{width:28px;height:28px}.user-name{font-size:.8rem}.user-email{font-size:.75rem}.logout-btn{padding:.4rem .75rem;font-size:.75rem}.login-btn{padding:.75rem 1.25rem;font-size:.9rem}.auth-required-message{padding:2rem 1.5rem}.auth-prompt h4{font-size:1.25rem}.auth-prompt p{font-size:1rem}}