:root{--primary: #A73B24;--primary-dark: #8B311E;--primary-light: #C85A3E;--primary-50: #FDF2F0;--primary-100: #FADDDA;--primary-200: #F4AEA5;--accent-blue: #3B82F6;--accent-blue-dark: #2563EB;--accent-indigo: #6366F1;--accent-purple: #8B5CF6;--accent-emerald: #10B981;--accent-amber: #F59E0B;--accent-rose: #F43F5E;--accent-cyan: #06B6D4;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--gradient-hero: linear-gradient(135deg, #A73B24 0%, #8B311E 40%, #701B10 100%);--gradient-card: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.85));--gradient-mission-active: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);--gradient-mission-done: linear-gradient(135deg, #10B981 0%, #059669 100%);--gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);--gradient-ai: linear-gradient(135deg, #6366F1 0%, #8B5CF6 60%, #A855F7 100%);--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);--shadow-glow-primary: 0 0 30px rgba(167, 59, 36, .25);--shadow-glow-blue: 0 0 30px rgba(59, 130, 246, .25);--shadow-glow-emerald: 0 0 30px rgba(16, 185, 129, .25);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--font-family: "Kanit", "Inter", system-ui, -apple-system, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background-color:var(--gray-50);color:var(--gray-800);line-height:1.6;overflow-x:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes floatSlow{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px #a73b244d}50%{box-shadow:0 0 25px #a73b2499}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes orbit{0%{transform:rotate(0) translate(120px) rotate(0)}to{transform:rotate(360deg) translate(120px) rotate(-360deg)}}@keyframes particle-drift{0%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-30px) scale(1)}to{opacity:0;transform:translateY(-200px) scale(.5)}}@keyframes wave{0%,to{transform:translate(0)}50%{transform:translate(-25%)}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes bounce-subtle{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes progress-bar-fill{0%{width:0%}}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.animate-fadeIn{animation:fadeIn .5s ease-out both}.animate-fadeInUp{animation:fadeInUp .6s ease-out both}.animate-fadeInDown{animation:fadeInDown .5s ease-out both}.animate-fadeInLeft{animation:fadeInLeft .6s ease-out both}.animate-fadeInRight{animation:fadeInRight .6s ease-out both}.animate-scaleIn{animation:scaleIn .4s var(--transition-spring) both}.animate-float{animation:float 3s ease-in-out infinite}.animate-floatSlow{animation:floatSlow 5s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.animate-shimmer{background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 2.5s infinite}.animate-orbit{animation:orbit 20s linear infinite}.animate-gradient-shift{background-size:200% 200%;animation:gradient-shift 5s ease infinite}.animate-bounce-subtle{animation:bounce-subtle 2s ease-in-out infinite}.animate-spin-slow{animation:spin-slow 12s linear infinite}.animate-wiggle{animation:wiggle .6s ease-in-out}.stagger-children>*:nth-child(1){animation-delay:.05s}.stagger-children>*:nth-child(2){animation-delay:.1s}.stagger-children>*:nth-child(3){animation-delay:.15s}.stagger-children>*:nth-child(4){animation-delay:.2s}.stagger-children>*:nth-child(5){animation-delay:.25s}.stagger-children>*:nth-child(6){animation-delay:.3s}.glass{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}.glass-dark{background:#0f172ab3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}.glass-primary{background:#a73b24d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15)}.hero-particle{position:absolute;border-radius:50%;pointer-events:none}.hero-particle-1{width:6px;height:6px;background:#ffffff4d;top:15%;left:10%;animation:float 4s ease-in-out infinite}.hero-particle-2{width:10px;height:10px;background:#ffffff26;top:60%;left:80%;animation:float 5s ease-in-out infinite 1s}.hero-particle-3{width:4px;height:4px;background:#ffffff59;top:30%;left:60%;animation:float 3.5s ease-in-out infinite .5s}.hero-particle-4{width:8px;height:8px;background:#fff3;top:75%;left:25%;animation:float 6s ease-in-out infinite 2s}.hero-particle-5{width:5px;height:5px;background:#ffffff40;top:45%;left:45%;animation:float 4.5s ease-in-out infinite 1.5s}.geo-circle{border:2px solid rgba(255,255,255,.1);border-radius:50%;position:absolute;pointer-events:none}.geo-square{border:2px solid rgba(255,255,255,.08);position:absolute;pointer-events:none;transform:rotate(45deg)}.geo-triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:50px solid rgba(255,255,255,.06);position:absolute;pointer-events:none}.card-premium{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-base);position:relative;overflow:hidden}.card-premium:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-mission-active);opacity:0;transition:opacity var(--transition-base)}.card-premium:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px);border-color:var(--gray-200)}.card-premium:hover:before{opacity:1}.progress-bar{height:8px;border-radius:var(--radius-full);background:var(--gray-200);overflow:hidden;position:relative}.progress-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--gradient-mission-active);transition:width 1s cubic-bezier(.34,1.56,.64,1);position:relative}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite;background-size:200% 100%}.stat-number{font-size:2rem;font-weight:700;background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mission-card{position:relative;overflow:hidden;border-radius:var(--radius-xl);transition:all var(--transition-base);cursor:pointer}.mission-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#fff0,#ffffff1a);opacity:0;transition:opacity var(--transition-base)}.mission-card:hover{transform:translateY(-6px) scale(1.02)}.mission-card:hover:after{opacity:1}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;transition:all var(--transition-fast)}.badge-primary{background:var(--primary-100);color:var(--primary)}.badge-success{background:#d1fae5;color:#059669}.badge-warning{background:#fef3c7;color:#d97706}.badge-danger{background:#fee2e2;color:#dc2626}.badge-info{background:#dbeafe;color:#2563eb}.tooltip-wrapper{position:relative}.tooltip-wrapper:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.9);padding:.5rem .75rem;border-radius:var(--radius-sm);background:var(--gray-900);color:#fff;font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transition-fast)}.tooltip-wrapper:hover:after{opacity:1;transform:translate(-50%) scale(1)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.btn-hover-shine{position:relative;overflow:hidden}.btn-hover-shine:before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skew(-25deg);transition:left .5s ease}.btn-hover-shine:hover:before{left:125%}@media(max-width:640px){.hero-particle,.geo-circle,.geo-square,.geo-triangle{display:none}}.page-enter{animation:fadeIn .4s ease-out both}::selection{background:var(--primary-200);color:var(--primary-dark)}