:root{--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--color-bg: #090d16;--color-surface: rgba(17, 25, 40, .75);--color-surface-hover: rgba(26, 38, 57, .85);--color-border: rgba(255, 255, 255, .08);--color-border-active: rgba(6, 182, 212, .4);--color-text-primary: #f8fafc;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-primary: #06b6d4;--color-secondary: #6366f1;--color-accent: #f43f5e;--color-success: #10b981;--color-warning: #f59e0b;--gradient-primary: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);--gradient-glow: radial-gradient(circle at top right, rgba(6, 182, 212, .15), transparent 45%), radial-gradient(circle at bottom left, rgba(99, 102, 241, .1), transparent 45%);--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .5);--shadow-md: 0 8px 30px -4px rgba(0, 0, 0, .6);--shadow-glow: 0 0 20px rgba(6, 182, 212, .2);--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px}*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}body{font-family:var(--font-body);background-color:var(--color-bg);background-image:var(--gradient-glow);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;letter-spacing:-.02em}.glass{background:var(--color-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:var(--radius-md)}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:280px;border-right:1px solid var(--color-border);background:#0a0f1ecc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2.5rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0}.brand{display:flex;align-items:center;gap:.75rem;margin-bottom:3rem;padding-left:.5rem}.brand-icon{width:32px;height:32px;stroke:var(--color-primary)}.brand-text{font-family:var(--font-heading);font-size:1.4rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-menu{list-style:none;display:flex;flex-direction:column;gap:.5rem;flex-grow:1}.nav-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;color:var(--color-text-secondary);text-decoration:none;border-radius:var(--radius-sm);font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary);transform:translate(4px)}.nav-item.active{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-glow)}.nav-item svg{width:20px;height:20px;stroke-width:2}.sidebar-footer{font-size:.8rem;color:var(--color-text-muted);text-align:center;border-top:1px solid var(--color-border);padding-top:1.5rem}.main-content{flex-grow:1;display:flex;flex-direction:column;padding:2rem 3rem;max-width:1400px;margin:0 auto;width:calc(100% - 280px);height:100vh;overflow-y:auto}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}.user-profile{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem}.avatar{width:38px;height:38px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-family:var(--font-heading)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2.5rem}.metric-card{padding:1.75rem;position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient-primary)}.metric-info{display:flex;justify-content:space-between;align-items:flex-start}.metric-title{font-size:.9rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.metric-value{font-family:var(--font-heading);font-size:2rem;font-weight:700}.metric-icon-wrapper{background:#06b6d41a;padding:.75rem;border-radius:var(--radius-sm);color:var(--color-primary)}.metric-trend{margin-top:1rem;font-size:.85rem;display:flex;align-items:center;gap:.25rem}.trend-up{color:var(--color-success)}.section-title{margin-bottom:1.5rem;font-size:1.5rem;display:flex;align-items:center;gap:.75rem}.section-title svg{color:var(--color-primary)}.panel-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}@media (max-width: 1024px){.panel-grid{grid-template-columns:1fr}}.panel{padding:2rem}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;color:var(--color-text-secondary);margin-bottom:.5rem;font-weight:500}.form-input,.form-select{width:100%;padding:.875rem 1.25rem;background:#0f172a99;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:var(--font-body);font-size:.95rem;transition:all .3s ease}.form-input:focus,.form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 10px #06b6d426;background:#0f172acc}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;font-family:var(--font-heading);font-size:1rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:#ffffff0d;border:1px solid var(--color-border);color:var(--color-text-primary)}.btn-secondary:hover{background:#ffffff1a;border-color:var(--color-text-secondary)}.table-wrapper{overflow-x:auto}.custom-table{width:100%;border-collapse:collapse;text-align:left}.custom-table th{padding:1rem;font-size:.85rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.custom-table td{padding:1.25rem 1rem;border-bottom:1px solid var(--color-border);font-size:.95rem;color:var(--color-text-secondary)}.custom-table tr:last-child td{border-bottom:none}.custom-table tr:hover td{color:var(--color-text-primary);background:#ffffff03}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.badge-success{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge-warning{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(245,158,11,.3)}.badge-danger{background:#f43f5e26;color:#fb7185;border:1px solid rgba(244,63,94,.3)}.badge-info{background:#06b6d426;color:#67e8f9;border:1px solid rgba(6,182,212,.3)}.saga-visualizer{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem;padding:2rem;background:#0f172a66;border-radius:var(--radius-md);border:1px solid var(--color-border)}.saga-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border);padding-bottom:1rem}.saga-steps-container{display:flex;align-items:center;justify-content:space-between;position:relative;padding:1rem 0;overflow-x:auto}.saga-connector-line{position:absolute;top:50%;left:5%;right:5%;height:4px;background:var(--color-border);z-index:1;transform:translateY(-50%)}.saga-connector-line-progress{position:absolute;top:50%;left:5%;height:4px;background:var(--gradient-primary);z-index:2;transform:translateY(-50%);transition:width .8s ease-in-out}.saga-step{display:flex;flex-direction:column;align-items:center;gap:.75rem;z-index:3;width:120px;text-align:center}.saga-step-node{width:48px;height:48px;border-radius:50%;background:#1e293b;border:2px solid #334155;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:all .4s cubic-bezier(.4,0,.2,1)}.saga-step-node svg{width:20px;height:20px}.saga-step-label{font-family:var(--font-heading);font-size:.8rem;font-weight:500;color:var(--color-text-secondary)}.saga-step.pending .saga-step-node{background:#06b6d40d;border-color:var(--color-primary);color:var(--color-primary);animation:pulse-glow 1.5s infinite alternate}.saga-step.pending .saga-step-label{color:var(--color-primary);font-weight:600}.saga-step.completed .saga-step-node{background:var(--color-success);border-color:var(--color-success);color:#fff;box-shadow:0 0 15px #10b98166}.saga-step.completed .saga-step-label{color:var(--color-success);font-weight:600}.saga-step.failed .saga-step-node{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:0 0 15px #f43f5e66}.saga-step.failed .saga-step-label{color:var(--color-accent);font-weight:600}@keyframes pulse-glow{0%{box-shadow:0 0 5px #06b6d433;border-color:#06b6d499}to{box-shadow:0 0 15px #06b6d499;border-color:#06b6d4}}.fade-in{animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.invoice-card{padding:1.5rem;background:#10b9810d;border:1px dashed rgba(16,185,129,.3);border-radius:var(--radius-sm);margin-top:1.5rem}.invoice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.invoice-detail{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem}.live-logger{background:#020617;border-radius:var(--radius-sm);padding:1rem;font-family:Courier New,Courier,monospace;font-size:.85rem;color:#38bdf8;max-height:250px;overflow-y:auto;border:1px solid var(--color-border)}.log-entry{margin-bottom:.5rem;line-height:1.4}.log-time{color:var(--color-text-muted);margin-right:.5rem}.log-type-grpc{color:#a855f7}.log-type-kafka{color:#eab308}.log-type-info{color:#10b981}.auth-panel{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:2rem;box-sizing:border-box}.login-card{width:100%;max-width:450px;padding:3rem}#root{min-height:100vh;display:flex;flex-direction:column;width:100%}.password-input-container{position:relative;display:flex;align-items:center;width:100%}.password-toggle-btn{position:absolute;right:1rem;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:4px;transition:color .2s ease,background-color .2s ease;z-index:10}.password-toggle-btn:hover{color:var(--color-text-primary);background-color:#ffffff0d}.form-input.password-input{padding-right:3rem}.landing-page{display:flex;flex-direction:column;min-height:100vh;width:100%;overflow-x:hidden}.landing-container{max-width:1200px;margin:0 auto;width:100%}.landing-nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 3rem;background:transparent;position:fixed;top:0;left:0;right:0;z-index:200;transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}.landing-nav.nav-scrolled{background:#090d16d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 4px 30px #0006;border-bottom:1px solid var(--color-border)}.landing-brand{display:flex;align-items:center;gap:.75rem}.nav-links{display:flex;align-items:center;gap:2rem}.nav-link-item{color:var(--color-text-secondary);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s ease}.nav-link-item:hover{color:var(--color-text-primary)}.nav-cta{padding:.6rem 1.5rem!important;font-size:.9rem!important}.landing-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8rem 2rem 6rem;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(6,182,212,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(99,102,241,.06) 0%,transparent 50%)}.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.5;animation:orbFloat 12s ease-in-out infinite}.hero-orb-1{width:400px;height:400px;background:#06b6d41f;top:-100px;left:-100px;animation-delay:0s}.hero-orb-2{width:350px;height:350px;background:#6366f11a;bottom:-50px;right:-80px;animation-delay:-4s}.hero-orb-3{width:250px;height:250px;background:#ec489914;top:30%;right:10%;animation-delay:-8s}@keyframes orbFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}.hero-content{position:relative;z-index:2;max-width:820px}.hero-badge{display:inline-flex;align-items:center;padding:.5rem 1.25rem;border-radius:9999px;background:#06b6d414;color:var(--color-primary);border:1px solid rgba(6,182,212,.2);font-size:.8rem;font-weight:600;margin-bottom:2rem;text-transform:uppercase;letter-spacing:.06em}.hero-title{font-size:4.8rem;line-height:1.08;font-weight:800;margin-bottom:1.75rem;color:#fff;letter-spacing:-.03em}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:1.2rem;color:var(--color-text-secondary);max-width:660px;margin:0 auto 2.5rem;line-height:1.7}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.hero-btn{font-size:1.05rem;padding:.95rem 2rem}.hero-btn-glow{box-shadow:0 0 30px #06b6d44d,0 0 60px #6366f126;transition:box-shadow .3s ease,transform .3s ease}.hero-btn-glow:hover{box-shadow:0 0 40px #06b6d473,0 0 80px #6366f140;transform:translateY(-2px)}.hero-trust-line{margin-top:2rem;font-size:.8rem;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;gap:.4rem}.stats-banner{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:3rem;max-width:1200px;margin:-3rem auto 0;position:relative;z-index:10}.stat-card{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem 1.5rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}.stat-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.stat-value{font-family:var(--font-heading);font-size:2.2rem;font-weight:800;margin-bottom:.25rem}.stat-label{font-size:.85rem;color:var(--color-text-secondary);font-weight:500}.section-header-landing{text-align:center;margin-bottom:4rem}.section-pill{display:inline-block;padding:.4rem 1rem;border-radius:9999px;background:#06b6d414;color:var(--color-primary);border:1px solid rgba(6,182,212,.15);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem}.section-heading{font-size:2.75rem;font-weight:800;line-height:1.15;margin-bottom:1rem;letter-spacing:-.02em}.section-subheading{color:var(--color-text-secondary);max-width:600px;margin:0 auto;font-size:1.05rem;line-height:1.65}.features-section{padding:7rem 3rem;background:linear-gradient(180deg,#090d16,#060910)}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:1200px;margin:0 auto}.feature-card{padding:2.5rem 2rem 2rem;text-align:left;transition:transform .35s ease,box-shadow .35s ease;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}.feature-card-accent{position:absolute;top:0;left:0;width:100%;height:3px;opacity:.6;transition:opacity .3s ease}.feature-card:hover{transform:translateY(-6px);box-shadow:0 0 30px #06b6d41f;border-color:#06b6d433}.feature-card:hover .feature-card-accent{opacity:1}.feature-icon-wrapper{width:56px;height:56px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.feature-title{font-size:1.2rem;margin-bottom:.75rem;color:var(--color-text-primary);font-weight:700}.feature-desc{font-size:.9rem;color:var(--color-text-secondary);line-height:1.65;margin-bottom:1.25rem}.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:.5rem}.feature-bullets li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--color-text-secondary)}.feature-bullets li svg{color:var(--color-success);flex-shrink:0}.how-section{padding:7rem 3rem;background:#090d16;border-top:1px solid var(--color-border)}.steps-row{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:1000px;margin:0 auto}.step-card{flex:1;text-align:center;padding:2.5rem 1.5rem;background:var(--color-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-md);position:relative;transition:transform .3s ease,box-shadow .3s ease}.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-glow)}.step-number{position:absolute;top:-14px;left:50%;transform:translate(-50%);font-family:var(--font-heading);font-size:.75rem;font-weight:800;background:var(--gradient-primary);color:#fff;padding:.3rem .8rem;border-radius:9999px}.step-icon-wrap{width:56px;height:56px;margin:1rem auto 1.25rem;border-radius:50%;background:#06b6d414;color:var(--color-primary);display:flex;align-items:center;justify-content:center}.step-title{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}.step-desc{font-size:.85rem;color:var(--color-text-secondary);line-height:1.6}.step-connector{color:var(--color-text-muted);flex-shrink:0}.testimonials-section{padding:7rem 3rem;background:linear-gradient(180deg,#060910,#090d16);border-top:1px solid var(--color-border)}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin:0 auto}.testimonial-card{padding:2rem;display:flex;flex-direction:column;gap:1.25rem;transition:transform .3s ease,box-shadow .3s ease}.testimonial-card:hover{transform:translateY(-4px);box-shadow:0 0 25px #06b6d41a}.testimonial-stars{display:flex;gap:.15rem}.testimonial-text{font-size:.95rem;color:var(--color-text-secondary);line-height:1.7;font-style:italic;flex:1}.testimonial-author{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--color-border);padding-top:1.25rem}.testimonial-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.8rem;flex-shrink:0}.testimonial-name{font-weight:600;font-size:.9rem;color:var(--color-text-primary)}.testimonial-role{font-size:.75rem;color:var(--color-text-muted)}.cta-banner{padding:6rem 3rem;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#06b6d40f,#6366f10f);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.cta-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}.cta-orb-1{width:300px;height:300px;background:#06b6d41f;top:-80px;left:20%}.cta-orb-2{width:250px;height:250px;background:#6366f11a;bottom:-60px;right:15%}.cta-content{position:relative;z-index:2}.cta-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-.02em}.cta-subtitle{font-size:1.1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto 2rem;line-height:1.65}.landing-footer{padding:4rem 3rem 0;background:#060910;border-top:1px solid var(--color-border)}.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem}.footer-tagline{color:var(--color-text-muted);font-size:.9rem;line-height:1.6;max-width:280px}.footer-heading{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin-bottom:1rem;font-weight:700}.footer-link{display:block;color:var(--color-text-muted);text-decoration:none;font-size:.85rem;margin-bottom:.6rem;transition:color .2s ease}.footer-link:hover{color:var(--color-text-primary)}.footer-bottom{border-top:1px solid var(--color-border);padding:1.5rem 0;text-align:center;font-size:.8rem;color:var(--color-text-muted)}@media (max-width: 1024px){.features-grid,.testimonials-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}.stats-banner{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.hero-title{font-size:2.8rem}.section-heading{font-size:2rem}.landing-nav{padding:1rem 1.5rem}.nav-links{gap:1rem}.nav-link-item{display:none}.features-section,.how-section,.testimonials-section{padding:4rem 1.5rem}.steps-row{flex-direction:column}.step-connector{transform:rotate(90deg)}.stats-banner{grid-template-columns:1fr 1fr;margin-top:0;padding:2rem 1.5rem}.footer-inner{grid-template-columns:1fr;gap:2rem}.cta-title{font-size:1.8rem}}
