:root{--primary:#6366f1;--secondary:#8b5cf6;--accent:#06b6d4;--background:#0f0f23;--surface:rgba(255,255,255,0.1);--surface-light:rgba(255,255,255,0.05);--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.5)} *{box-sizing:border-box} body{font-family:'Inter',system-ui,sans-serif;background:var(--background);color:var(--text-primary);margin:0;padding:0;overflow-x:hidden} .glass{background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2)} .glass-strong{background:rgba(255,255,255,0.15);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,0.3)} .gradient-mesh{background:radial-gradient(at 40% 20%,hsla(228,100%,74%,1) 0px,transparent 50%),radial-gradient(at 80% 0%,hsla(189,100%,56%,1) 0px,transparent 50%),radial-gradient(at 0% 50%,hsla(355,100%,93%,1) 0px,transparent 50%),radial-gradient(at 80% 50%,hsla(340,100%,76%,1) 0px,transparent 50%),radial-gradient(at 0% 100%,hsla(22,100%,77%,1) 0px,transparent 50%),radial-gradient(at 80% 100%,hsla(242,100%,70%,1) 0px,transparent 50%),radial-gradient(at 0% 0%,hsla(343,100%,76%,1) 0px,transparent 50%)} .header-logo{width:80px !important;height:49px !important} @keyframes float{0%,100%{transform:translateY(0px)} 50%{transform:translateY(-20px)} } @keyframes pulseGlow{from{box-shadow:0 0 20px rgba(99,102,241,0.3)} to{box-shadow:0 0 40px rgba(99,102,241,0.6)} } @keyframes slideIn{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes typing{0%,80%,100%{transform:scale(0);opacity:0.5} 40%{transform:scale(1);opacity:1} } .float-animation{animation:float 6s ease-in-out infinite} .pulse-glow{animation:pulseGlow 2s ease-in-out infinite alternate} .message-slide-in{animation:slideIn 0.3s ease-out} .suggestion-card:hover{transform:translateY(-2px);transition:all 0.3s ease} .navbar{position:relative;z-index:50;background:var(--surface);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.1)} .navbar-brand{display:flex;align-items:center;gap:0.5rem;font-size:1.25rem;font-weight:bold;text-decoration:none;color:var(--text-primary)} .navbar-nav{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0} .nav-link{color:var(--text-secondary);text-decoration:none;transition:color 0.3s ease} .nav-link:hover{color:var(--text-primary)} .hero-section{position:relative;z-index:10;padding:5rem 1rem;text-align:center} .hero-badge{display:inline-block;background:var(--surface);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,0.3);border-radius:9999px;padding:0.5rem 1rem;margin-bottom:2rem;animation:pulseGlow 2s ease-in-out infinite alternate} .hero-title{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:bold;margin-bottom:1.5rem;line-height:1.1} .hero-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:48rem;margin:0 auto 3rem;line-height:1.6} .gradient-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:0.75rem;font-weight:600;text-decoration:none;transition:all 0.3s ease;border:none;cursor:pointer} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white} .btn-primary:hover{box-shadow:0 10px 25px rgba(99,102,241,0.25);transform:scale(1.05)} .btn-glass{background:var(--surface);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);color:var(--text-primary)} .btn-glass:hover{background:rgba(255,255,255,0.2)} .card{background:var(--surface);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:1rem;padding:2rem;transition:all 0.3s ease} .card:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px)} .card-strong{background:var(--surface);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,0.3)} .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:4rem} .feature-card{background:var(--surface);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:1rem;padding:2rem;transition:all 0.3s ease} .feature-card:hover{background:rgba(255,255,255,0.15);transform:translateY(-5px)} .feature-icon{width:3rem;height:3rem;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem} .feature-title{font-size:1.25rem;font-weight:bold;margin-bottom:0.5rem} .feature-description{color:var(--text-secondary);line-height:1.6} .footer{background:var(--surface);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.1);margin-top:5rem} .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;padding:3rem 0} .footer-section h3{font-weight:600;margin-bottom:1rem} .footer-links{list-style:none;padding:0;margin:0} .footer-links li{margin-bottom:0.5rem} .footer-links a{color:var(--text-secondary);text-decoration:none;transition:color 0.3s ease} .footer-links a:hover{color:var(--text-primary)} @media (max-width:768px){.navbar-nav{flex-direction:column;gap:1rem} .hero-section{padding:3rem 1rem} .features-grid{grid-template-columns:1fr;gap:1.5rem} .footer-grid{grid-template-columns:1fr;text-align:center} } .loading{opacity:0.6;pointer-events:none} .spinner{width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)} } .form-group{margin-bottom:1.5rem} .form-label{display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary)} .form-input{width:100%;padding:0.75rem 1rem;background:var(--surface);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:0.5rem;color:var(--text-primary);font-size:1rem;transition:all 0.3s ease} .form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)} .form-input::placeholder{color:var(--text-muted)} .alert{padding:1rem;border-radius:0.5rem;margin-bottom:1rem} .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);color:#10b981} .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:#ef4444} .alert-warning{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);color:#f59e0b}