:root{--primary: #4f46e5;--primary-hover: #4338ca;--secondary: #ec4899;--background: #0f172a;--surface: rgba(30, 41, 59, .7);--surface-border: rgba(255, 255, 255, .1);--text-main: #f8fafc;--text-muted: #94a3b8;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 8px;--shadow-glow: 0 0 40px -10px rgba(79, 70, 229, .5)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--background);color:var(--text-main);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden}.background-shapes{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s infinite ease-in-out alternate}.shape-1{background:var(--primary);width:400px;height:400px;top:-100px;left:-100px;animation-delay:0s}.shape-2{background:var(--secondary);width:300px;height:300px;bottom:-50px;right:-50px;animation-delay:-5s}.shape-3{background:#06b6d4;width:250px;height:250px;bottom:30%;left:20%;animation-delay:-10s}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(30px,-50px) scale(1.1)}to{transform:translate(-20px,20px) scale(.9)}}.content{position:relative;z-index:1;max-width:480px;width:100%;display:flex;flex-direction:column;gap:2.5rem;animation:slideUp .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero{text-align:center}.title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;letter-spacing:-.02em}.subtitle{font-size:1.125rem;color:var(--text-muted);font-weight:500}.card{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:2rem;box-shadow:0 25px 50px -12px #00000080;transition:transform .3s ease,box-shadow .3s ease}.card-header{margin-bottom:2rem;text-align:center}.card-header h2{font-size:1.75rem;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.wave{display:inline-block;animation:wave 2.5s infinite;transform-origin:70% 70%}@keyframes wave{0%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0)}to{transform:rotate(0)}}.card-header p{color:var(--text-muted);font-size:1rem}.card-body{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.interactive-button{position:relative;background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;border:none;padding:1rem 2rem;border-radius:var(--radius-md);font-size:1.125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-glow);overflow:hidden}.interactive-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.interactive-button:hover{transform:translateY(-2px);box-shadow:0 0 50px -10px #4f46e5b3;background:linear-gradient(135deg,var(--primary-hover),#4f46e5)}.interactive-button:hover:before{left:100%}.interactive-button:active{transform:translateY(1px)}.button-badge{background:#fff3;padding:.125rem .5rem;border-radius:var(--radius-sm);font-size:.875rem;min-width:1.5rem;text-align:center}.button-badge:empty{display:none}.hint-text{font-size:.875rem;color:var(--text-muted);opacity:.8}.features{display:flex;justify-content:center;gap:2rem;padding:1rem;background:#0f172a66;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);border:1px solid var(--surface-border)}.feature-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.875rem;font-weight:500;transition:color .3s ease}.feature-item:hover{color:var(--text-main)}.icon{width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);background-size:cover;background-position:center;background-color:var(--surface);border:1px solid var(--surface-border);display:flex;align-items:center;justify-content:center}@media(max-width:480px){.title{font-size:2.5rem}.card{padding:1.5rem}.features{gap:1.5rem}}