:root{--color-bg-primary: #0a1628;--color-bg-secondary: #0f2030;--color-accent: #22c55e;--color-accent-glow: rgba(34, 197, 94, .3);--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-card-bg: rgba(15, 32, 48, .8);--color-border: rgba(34, 197, 94, .2);--font-display: "Playfair Display", serif;--font-body: "Outfit", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 20% 20%,rgba(34,197,94,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(34,197,94,.05) 0%,transparent 50%),linear-gradient(180deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%)}.hero{position:relative;z-index:10;padding:2rem;width:100%;max-width:600px}.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}.logo-badge{width:80px;height:80px;background:linear-gradient(135deg,var(--color-accent) 0%,#16a34a 100%);border-radius:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px -10px var(--color-accent-glow),0 0 60px -10px var(--color-accent-glow);animation:float 6s ease-in-out infinite}.logo-icon{font-size:2.5rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.title{display:flex;flex-direction:column;gap:.25rem}.title-main{font-family:var(--font-display);font-size:3.5rem;font-weight:600;background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.title-sub{font-size:1rem;font-weight:300;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.3em}.tagline{font-size:1.25rem;color:var(--color-accent);font-weight:500;padding:.75rem 1.5rem;background:#22c55e1a;border:1px solid var(--color-border);border-radius:100px}.status-card{width:100%;background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:16px;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.status-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);font-size:.875rem;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.status-dot{width:8px;height:8px;background:var(--color-accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.status-content{padding:1.25rem}.status-loading,.status-error,.status-success{display:flex;align-items:center;gap:.75rem;font-size:1rem}.status-loading{color:var(--color-text-secondary)}.spinner{width:20px;height:20px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-error{color:#f87171}.error-icon{font-size:1.25rem}.status-success{color:var(--color-accent)}.success-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-accent);color:var(--color-bg-primary);border-radius:50%;font-size:.875rem;font-weight:700}.tech-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem}.tech-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:100px;font-size:.875rem;color:var(--color-text-secondary);transition:all .3s ease}.tech-item:hover{background:#22c55e1a;border-color:var(--color-border);color:var(--color-text-primary)}.tech-icon{font-size:1rem}.decorative-elements{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.circle{position:absolute;border-radius:50%;border:1px solid rgba(34,197,94,.1)}.circle-1{width:600px;height:600px;top:-200px;right:-200px;animation:rotate 60s linear infinite}.circle-2{width:400px;height:400px;bottom:-100px;left:-100px;animation:rotate 45s linear infinite reverse}.circle-3{width:200px;height:200px;top:50%;left:10%;animation:rotate 30s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 640px){.title-main{font-size:2.5rem}.title-sub{font-size:.75rem}.tagline{font-size:1rem}.tech-stack{gap:.5rem}.tech-item{padding:.375rem .75rem;font-size:.75rem}}