@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}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(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes progressFill{0%{width:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes confetti{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(-100vh)rotate(720deg)}}.animate-fade-in-down{animation:.5s forwards fadeInDown}.animate-fade-in-left{animation:.5s forwards fadeInLeft}.animate-fade-in-right{animation:.5s forwards fadeInRight}.animate-scale-in{animation:.3s forwards scaleIn}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-bounce{animation:1s ease-in-out infinite bounce}.animate-bounce-in{animation:.5s forwards bounceIn}.animate-shake{animation:.5s ease-in-out shake}.animate-float{animation:3s ease-in-out infinite float}.animate-delay-1{animation-delay:.1s}.animate-delay-2{animation-delay:.2s}.animate-delay-3{animation-delay:.3s}.animate-delay-4{animation-delay:.4s}.animate-delay-5{animation-delay:.5s}.animate-delay-6{animation-delay:.6s}.animate-delay-7{animation-delay:.7s}.animate-delay-8{animation-delay:.8s}.animate-delay-9{animation-delay:.9s}.animate-delay-10{animation-delay:1s}.btn{border-radius:var(--radius-btn,999px);font-size:1rem;font-weight:600;font-family:var(--sans,system-ui, -apple-system, sans-serif);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 28px;line-height:1;text-decoration:none;transition:all .2s;display:inline-flex}.btn:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:#f59e0b;box-shadow:0 8px 16px #f59e0b26}.btn-primary:hover:not(:disabled){background:#d97706;transform:scale(1.05)}.btn-secondary{color:#475569;background:#fff;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){color:#003152;border-color:#003152;transform:scale(1.05)}.btn-primary-blue{color:#fff;background:#003152;border:none;border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:500;box-shadow:0 4px 8px #0031521a}.btn-primary-blue:hover:not(:disabled){background:#0a4a75;transform:scale(1.05)}.btn-text{color:#475569;cursor:pointer;background:0 0;border:none;padding:0 .5rem;font-size:.95rem;font-weight:500}.btn-text:hover:not(:disabled){color:#003152}.btn-cta-white{color:#003152;cursor:pointer;background:#fff;border:none;border-radius:999px;padding:14px 40px;font-size:1rem;font-weight:600;text-decoration:none;transition:transform .2s;display:inline-block;box-shadow:0 10px 20px #00000026}.btn-cta-white:hover:not(:disabled){transform:scale(1.05)}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover:not(:disabled){background:var(--accent-hover)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--border-light)}.btn-full{width:100%}.card{background:var(--bg-secondary);border-radius:var(--radius-card,12px);padding:var(--space-xl);border:1px solid var(--border-color);box-shadow:var(--shadow-card);transition:all .2s}.card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-blue)}.badge{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full,999px);padding:4px 12px;font-size:13px;font-weight:500;display:inline-flex}.badge-primary{color:#003152;background:#00315214}.badge-accent{background:var(--accent-light);color:var(--accent-orange)}.input{border:1px solid var(--border-light);border-radius:var(--radius-card,12px);width:100%;font-size:1rem;font-family:var(--sans);color:var(--text-title);background:var(--bg-white);padding:12px 16px;transition:all .2s}.input:focus{border-color:var(--primary-blue);outline:none;box-shadow:0 0 0 3px #0031521a}.input::placeholder{color:var(--text-caption)}.textarea{border:1px solid var(--border-light);border-radius:var(--radius-card,12px);width:100%;min-height:100px;font-size:1rem;font-family:var(--sans);resize:vertical;background:var(--bg-white);color:var(--text-title);padding:12px 16px;transition:all .2s}.textarea:focus{border-color:var(--primary-blue);outline:none;box-shadow:0 0 0 3px #0031521a}.textarea::placeholder{color:var(--text-caption)}.section{background:var(--bg-white);border-radius:var(--radius-xl,16px);padding:var(--space-xl);border:1px solid var(--border-light)}.section-title{margin-bottom:var(--space-lg);align-items:center;gap:var(--space-sm);color:var(--text-title);font-size:1.125rem;font-weight:600;display:flex}.page-header{background:var(--bg-white);border-radius:var(--radius-xl,16px);padding:var(--space-xl);border:1px solid var(--border-light)}.page-title{margin-bottom:var(--space-sm);color:var(--text-title);font-size:2rem;font-weight:700}.page-desc{color:var(--text-body);margin-bottom:var(--space-md);font-size:1rem}.empty-state{text-align:center;padding:var(--space-2xl)}.empty-icon{margin-bottom:var(--space-lg);font-size:64px}.empty-title{margin-bottom:var(--space-sm);font-size:1.25rem;font-weight:600}.empty-desc{color:var(--text-body);margin-bottom:var(--space-lg)}.grid{gap:var(--space-lg);display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}@media (width<=768px){.grid-2,.grid-3{grid-template-columns:1fr}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.animate-fade-in{animation:.3s forwards fadeIn}.animate-fade-in-up{animation:.5s forwards fadeInUp}.animate-spin{animation:1s linear infinite spin}.spinner{border:3px solid var(--border-light);border-top-color:var(--primary-blue);width:40px;height:40px;margin:0 auto var(--space-md);border-radius:50%;animation:1s linear infinite spin}.progress-bar{background:var(--border-light);border-radius:var(--radius-full,999px);height:12px;overflow:hidden}.progress-fill{border-radius:var(--radius-full,999px);background:linear-gradient(90deg,#f59e0b,#22c55e);height:100%;transition:width .5s}.tag{border-radius:var(--radius-full,999px);background:var(--border-light);color:var(--text-body);align-items:center;padding:4px 12px;font-size:12px;font-weight:500;display:inline-flex}:root{--mobile-nav-height:0px;--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;margin:0;padding:0}html{width:100%;min-height:100%;overflow-x:hidden}body{font-family:var(--sans);background-color:var(--bg-white);color:var(--text-title);-webkit-font-smoothing:antialiased;min-height:100dvh;line-height:1.5;overflow-x:hidden}#root{text-align:left;box-sizing:border-box;flex-direction:column;max-width:100%;min-height:100dvh;margin:0 auto;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--heading);color:var(--text-title);font-weight:600;line-height:1.2}h1{letter-spacing:-.02em;margin-bottom:20px;font-size:clamp(32px,8vw,48px);font-weight:700}h2{letter-spacing:-.01em;font-size:clamp(24px,6vw,32px);font-weight:600}h3{font-size:1.2rem}h4{font-size:1.1rem}p{margin:0;line-height:1.6}a{color:inherit;transition:var(--transition);text-decoration:none}ul{list-style:none}img{max-width:100%;height:auto}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-caption)}@media (width<=1024px){:root{font-size:16px}}@media (width<=767px){:root{--mobile-nav-height:72px}}.footer{background:var(--bg-soft);padding:60px var(--padding-mobile) 40px;text-align:center;border-top:1px solid var(--border-light)}@media (width>=768px){.footer{padding:60px var(--padding-tablet) 40px}}@media (width>=1024px){.footer{padding:60px var(--padding-desktop) 40px}}@media (width<=767px){.footer{padding-bottom:calc(32px + var(--mobile-nav-height) + var(--mobile-safe-bottom))}}.footer-logo{color:var(--primary-blue);justify-content:center;align-items:center;gap:8px;margin-bottom:12px;font-size:1.3rem;font-weight:600;display:flex}.footer-logo i{color:var(--primary-blue)}.footer-tagline{color:var(--text-body);margin-bottom:24px;font-size:.95rem}.footer-links{flex-wrap:wrap;justify-content:center;gap:24px;margin:24px 0;display:flex}.footer-links a{color:var(--text-body);font-size:.9rem;text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--primary-blue)}.footer-copy{color:var(--text-caption);font-size:.85rem}:root{--primary-blue:#003152;--blue-hover:#0a4a75;--accent-orange:#f59e0b;--orange-hover:#d97706;--text-title:#0f172a;--text-body:#475569;--text-caption:#94a3b8;--text-tertiary:#64748b;--text-placeholder:#94a3b8;--text-primary:#1e293b;--text-secondary:#475569;--bg-white:#fff;--bg-soft:#f8fafc;--border-light:#e2e8f0;--radius-card:12px;--radius-btn:999px;--radius-sm:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-card:0 4px 16px #0031520f;--shadow-hover:0 20px 30px -10px #0031521f;--shadow-sm:0 2px 8px #00315214;--shadow-md:0 4px 12px #0031521a;--shadow-lg:0 8px 20px #00315226;--shadow-xl:0 20px 40px -20px #0031521f;--primary:#003152;--primary-light:#0a4a75;--primary-dark:#002842;--primary-bg:#0031520a;--primary-border:#00315214;--primary-shadow:0 2px 8px #00315214;--accent:#f59e0b;--accent-light:#f59e0b1a;--accent-hover:#d97706;--text:#475569;--text-h:#0f172a;--bg:#fff;--border:#e2e8f0;--border-color:#e5e7eb;--code-bg:#f4f3ec;--social-bg:#f4f3ec80;--sans:"Inter", system-ui, -apple-system, sans-serif;--heading:"Inter", system-ui, -apple-system, sans-serif;--mono:ui-monospace, Consolas, monospace;--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-dark:#0f172a;--bg-card:#fff;--text-light:#9ca3af;--text-white:#fff;--text-muted:#94a3b8;--space-xs:4px;--space-sm:8px;--space:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--padding-mobile:20px;--padding-tablet:40px;--padding-desktop:60px;--transition:all .2s;--color-success:#22c55e;--color-warning:#f59e0b;--color-danger:#ef4444;--color-info:#3b82f6;--color-success-light:#22c55e1a;--color-warning-light:#f59e0b1a;--color-danger-light:#ef44441a;--color-info-light:#3b82f61a;--color-success-border:#22c55e4d;--color-warning-border:#f59e0b4d;--color-danger-border:#ef44444d;--color-info-border:#3b82f64d;--graph-frontend:#3b82f6;--graph-backend:#8b5cf6;--graph-ai:#f59e0b;--graph-devops:#ef4444;--graph-basic:#64748b;--graph-recommended:#10b981}.home-page{background:#fff;min-height:100vh}.hero{text-align:center;background:linear-gradient(135deg,#fff,#eef6fb,#dbeafe,#fff7ed);padding:60px 0}@media (width>=768px){.hero{padding:80px 0}}@media (width>=1024px){.hero{padding:100px 0}}.hero-content{padding:0 var(--padding-mobile);margin:0 auto}@media (width>=768px){.hero-content{padding:0 var(--padding-tablet)}}@media (width>=1024px){.hero-content{padding:0 var(--padding-desktop)}}.hero-badge{color:#003152;background:#0031520a;border:1px solid #0031520d;border-radius:40px;align-items:center;gap:8px;margin-bottom:24px;padding:6px 16px;font-size:.9rem;font-weight:500;display:inline-flex}.hero h1{color:var(--text-title);margin-bottom:20px;font-size:clamp(32px,8vw,48px);font-weight:700;line-height:1.2}.hero h1 span{color:var(--accent-orange)}.hero-desc{color:var(--text-body);max-width:550px;margin:0 auto 32px;font-size:1rem;line-height:1.6}.hero-cta{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:48px;display:flex}.stats{flex-direction:column;justify-content:center;gap:24px;margin:32px 0;display:flex}.stat-item{text-align:center}.stat-number{color:var(--accent-orange);font-size:2rem;font-weight:700}.stat-label{color:var(--text-body);margin-top:4px;font-size:.9rem}@media (width>=640px){.stats{flex-direction:row;gap:48px}}.screenshot{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:24px;margin-top:40px;transition:transform .3s;overflow:hidden;box-shadow:0 20px 30px -10px #0031521f}.screenshot:hover{transform:scale(1.02)}.screenshot img{width:100%;height:auto;display:block}.main-content{width:100%;max-width:1200px;padding:0 var(--padding-mobile) 60px;margin:0 auto}@media (width>=768px){.main-content{padding:0 var(--padding-tablet) 80px}}@media (width>=1024px){.main-content{padding:0 var(--padding-desktop) 100px}}section{margin:60px 0}.section-header{text-align:center;margin-top:40px;margin-bottom:40px}.section-header h2{color:var(--text-title);font-size:clamp(24px,6vw,32px);font-weight:600}.section-header p{color:var(--text-body);margin-top:8px;font-size:1rem}.steps-grid{grid-template-columns:1fr;gap:20px;display:grid}@media (width>=640px){.steps-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.steps-grid{grid-template-columns:repeat(3,1fr)}}.step-card{background:var(--bg-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);text-align:center;border:1px solid #0000;padding:28px 24px;transition:all .2s}.step-badge{color:var(--primary-blue);background:#eef6fb;border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.75rem;font-weight:600;display:inline-block}.step-icon{color:var(--primary-blue);margin-bottom:16px;font-size:2rem}.step-card h3{color:var(--text-title);margin-bottom:8px;font-size:1.2rem;font-weight:600}.step-card p{color:var(--text-body);font-size:.95rem}.features-grid{grid-template-columns:1fr;gap:20px;display:grid}@media (width>=640px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-item{background:var(--bg-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid #0000;padding:28px 24px;transition:all .2s}.feature-icon{color:var(--accent-orange);margin-bottom:16px;font-size:2rem}.feature-item h4{color:var(--text-title);margin-bottom:8px;font-size:1.1rem;font-weight:600}.feature-item p{color:var(--text-body);font-size:.95rem}.split-section{background:var(--bg-soft);border-radius:24px;flex-direction:column;gap:32px;padding:32px;display:flex}@media (width>=768px){.split-section{flex-direction:row;align-items:center;padding:48px}}.split-left{flex:1}.split-left h2{color:var(--text-title);margin-bottom:16px;font-size:1.8rem;font-weight:600}.split-left p{color:var(--text-body);font-size:1rem;line-height:1.6}.split-right{flex:1}.check-list{list-style:none}.check-list li{color:var(--text-body);align-items:center;gap:12px;margin-bottom:16px;font-size:1rem;display:flex}.check-list i{color:var(--primary-blue)}.check-list .highlight{color:var(--accent-orange);margin-left:4px;font-weight:600}.faq-list{border-top:1px solid var(--border-light);max-width:800px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border-light);padding:20px 0}.faq-question{color:var(--text-title);cursor:pointer;justify-content:space-between;align-items:center;gap:16px;font-size:1rem;font-weight:600;transition:color .2s;display:flex}.faq-question:hover{color:var(--primary-blue)}.faq-question i{color:var(--text-body);font-size:.85rem;transition:transform .3s}.faq-question.open i{color:var(--primary-blue)}.faq-answer{color:var(--text-body);max-height:0;margin-top:0;font-size:.95rem;line-height:1.6;transition:max-height .3s,margin-top .3s;overflow:hidden}.faq-answer.open{max-height:200px;margin-top:12px}.final-cta{text-align:center;color:#fff;background:linear-gradient(135deg,#003152,#0a4a75,#f59e0b 80%);border-radius:24px;padding:48px 32px}@media (width>=768px){.final-cta{padding:60px 40px}}.final-cta h2{color:#fff;margin-bottom:16px;font-size:clamp(24px,5vw,32px);font-weight:700}.final-cta p{opacity:.9;margin-bottom:24px;font-size:1rem}.step-card,.feature-item{opacity:0;animation:.5s forwards fadeInUp}.step-card:first-child,.feature-item:first-child{animation-delay:.1s}.step-card:nth-child(2),.feature-item:nth-child(2){animation-delay:.2s}.step-card:nth-child(3),.feature-item:nth-child(3){animation-delay:.3s}.feature-item:nth-child(4){animation-delay:.4s}.feature-item:nth-child(5){animation-delay:.5s}.feature-item:nth-child(6){animation-delay:.6s}