*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}#root{width:100%;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}button{cursor:pointer;font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}.welcome-container{width:100%;min-height:100vh;background:#fff;overflow-x:hidden}.hero-section{padding:72px 20px 56px;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;position:relative;background:radial-gradient(circle at top right,#ed1c240d,#fff 40%,#0033660d);overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIi8+Cjwvc3ZnPg==) repeat;z-index:1}.hero-content{width:100%;max-width:800px;text-align:center;position:relative;z-index:2;color:#1a1a1a;display:flex;flex-direction:column;align-items:center}.hero-logo{width:min(300px,75vw);height:auto;margin-bottom:18px}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#ed1c241a;color:#ed1c24;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:24px;border:1px solid rgba(237,28,36,.2)}.hero-title{font-size:clamp(2.3rem,7vw,3.8rem);font-weight:800;line-height:1.1;color:#036;margin-bottom:20px;letter-spacing:-.02em}.hero-subtitle{font-size:clamp(1rem,2.2vw,1.2rem);color:#4a5568;line-height:1.6;max-width:600px;margin:0 auto 30px}.backend-status{margin:4px auto 28px;padding:12px 20px;background:#ed1c240d;border-radius:12px;border:1px solid rgba(237,28,36,.15);display:inline-block}.status-indicator{display:flex;align-items:center;justify-content:center;gap:10px}.status-dot{width:12px;height:12px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px #f59e0b99}.status-dot.ready{background:#10b981;box-shadow:0 0 10px #10b98199}.status-dot.pulsing{box-shadow:0 0 12px #f59e0bcc}.status-text{font-size:.92rem;color:#1a1a1a;font-weight:600}.gradient-text{background:linear-gradient(135deg,#ed1c24,#bd0f16);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.hero-buttons{display:flex;flex-direction:column;gap:15px;width:100%;max-width:320px;margin:0 auto 30px}.hero-actions-row{display:flex;gap:10px;width:100%;max-width:360px}.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;background:#ed1c24;color:#fff;padding:16px;border-radius:12px;font-size:1.1rem;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ed1c244d}.btn-primary:hover{transform:translateY(-2px);background:#c9141b;box-shadow:0 8px 22px #ed1c2459}.btn-primary:active{background:#bd0f16;transform:translateY(2px);box-shadow:0 4px 15px #ed1c2466}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#036;padding:14px;border-radius:12px;font-size:1rem;font-weight:600;border:2px solid #e2e8f0;cursor:pointer;transition:all .3s ease}.btn-secondary:active{background:#0033660d;border-color:#036}.btn-secondary:hover{border-color:#036;background:#f8fbff;transform:translateY(-1px)}.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-demo:focus-visible,.btn-cta:focus-visible{outline:3px solid rgba(237,28,36,.35);outline-offset:2px}.btn-icon,.btn-icon-left{width:20px;height:20px}.hero-visual{display:grid;gap:14px;width:100%;max-width:460px;z-index:2}.visual-card{background:#fff;border:1px solid rgba(0,51,102,.12);border-radius:14px;padding:16px 18px;text-align:left;display:flex;align-items:center;gap:14px;transition:all .3s ease;box-shadow:0 8px 24px #0033661a}.visual-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #ed1c2429;border-color:#ed1c2459}.card-icon{width:48px;height:48px;border-radius:12px;font-size:26px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ed1c241f,#0033661a);flex-shrink:0}.card-label{color:#036;font-weight:700;font-size:.98rem;line-height:1.45}.why-section{padding:72px 20px;background:linear-gradient(to bottom,#f8f9fa,#fff)}.why-content{max-width:1200px;margin:0 auto}.why-grid{display:grid;grid-template-columns:1fr;gap:25px;margin-top:40px}.why-card{background:#fff;border-radius:12px;padding:30px 25px;text-align:center;transition:all .3s ease;border:2px solid #e3f2fd;box-shadow:0 2px 8px #0052cc14}.why-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #ed1c2426;border-color:#ed1c24}.why-icon{font-size:48px;margin-bottom:20px;display:block}.why-card h3{font-size:20px;font-weight:700;color:#ed1c24;margin:0 0 12px}.why-card p{font-size:14px;color:#5e6c84;line-height:1.6;margin:0}.features-section{padding:72px 20px;background:#fff}.section-title{text-align:center;font-size:clamp(1.8rem,3.4vw,2.25rem);font-weight:800;color:#036;letter-spacing:-.01em;margin:0 0 50px;line-height:1.3}.section-title:after{content:"";display:block;width:64px;height:4px;background:#ed1c24;border-radius:999px;margin:12px auto 0}.features-grid{display:grid;grid-template-columns:1fr;gap:25px;max-width:1200px;margin:0 auto}.feature-card{background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;padding:30px 25px;text-align:center;transition:all .3s ease;border:2px solid #e8eef3}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #ed1c2426;border-color:#ed1c24}.feature-icon{font-size:48px;margin-bottom:20px;display:block}.feature-card h3{font-size:20px;font-weight:700;color:#172b4d;margin:0 0 12px}.feature-card p{font-size:14px;color:#5e6c84;line-height:1.6;margin:0}.how-it-works-section{padding:72px 20px;background:linear-gradient(135deg,#036,#001a33)}.how-it-works-section .section-title{color:#fff}.how-it-works-section .section-title:after{background:#ed1c24}.steps-container{display:flex;flex-direction:column;gap:30px;max-width:800px;margin:0 auto;align-items:center}.step{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:30px 25px;text-align:center;width:100%;max-width:300px}.step-number{width:50px;height:50px;background:#ed1c24;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto 20px;box-shadow:0 4px 15px #ed1c2459}.step h3{font-size:20px;font-weight:700;color:#fff;margin:0 0 10px}.step p{font-size:14px;color:#ffffffe6;margin:0;line-height:1.6}.step-arrow{color:#fff;font-size:32px;font-weight:300;transform:rotate(90deg);display:block}.demo-section{padding:72px 20px;background:linear-gradient(to bottom,#fff,#f8fafc);text-align:center}.demo-content{max-width:600px;margin:0 auto}.demo-content h2{font-size:32px;font-weight:800;color:#172b4d;margin:0 0 15px}.demo-content p{font-size:16px;color:#5e6c84;margin:0 0 30px;line-height:1.6}.demo-features{display:flex;flex-direction:column;gap:15px;margin-bottom:30px;align-items:flex-start;max-width:350px;margin-left:auto;margin-right:auto}.demo-feature{display:flex;align-items:center;gap:12px;color:#172b4d;font-size:15px;font-weight:500}.check-icon{width:24px;height:24px;color:#ed1c24;flex-shrink:0}.btn-demo,.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#ed1c24,#bd0f16);color:#fff;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ed1c244d;text-decoration:none}.btn-demo:hover,.btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ed1c2466}.demo-actions{display:flex;gap:15px;justify-content:center;margin-top:20px;flex-wrap:wrap}.cta-section{padding:72px 20px;background:linear-gradient(135deg,#036,#001f3f);text-align:center}.cta-section h2{font-size:32px;font-weight:800;color:#fff;margin:0 0 15px}.cta-section p{font-size:16px;color:#fffffff2;margin:0 0 30px}.btn-cta{background:#fff;color:#ed1c24;border:2px solid rgba(237,28,36,.18);box-shadow:0 4px 15px #ffffff4d}.btn-cta:hover{background:#f5f5f5;box-shadow:0 6px 20px #fff6}.welcome-footer{padding:32px 20px;background:#172b4d;text-align:center}.welcome-footer p{color:#8993a4;font-size:14px;margin:5px 0}.footer-subtitle{margin-top:5px;font-size:.8rem;color:#a0aec0}@media (min-width: 768px){.hero-title{font-size:56px}.hero-subtitle{font-size:18px}.hero-buttons{flex-direction:row;gap:20px}.hero-actions-row{max-width:none;width:auto}.btn-primary,.btn-secondary,.btn-demo,.btn-cta{width:auto}.hero-visual{grid-template-columns:1fr;max-width:470px}.why-grid,.features-grid{grid-template-columns:repeat(2,1fr);gap:30px}.steps-container{flex-direction:row;gap:20px}.step-arrow{transform:rotate(0)}.demo-features{align-items:center}.section-title{font-size:40px}}@media (min-width: 1024px){.hero-section{flex-direction:row;padding:80px 40px;gap:60px}.hero-content{text-align:left;max-width:550px;align-items:flex-start}.hero-buttons{justify-content:flex-start}.hero-visual{max-width:440px}.hero-actions-row{justify-content:flex-start}.hero-badge{font-size:15px}.hero-title{font-size:64px}.hero-subtitle{font-size:20px}.why-grid{grid-template-columns:repeat(3,1fr);gap:35px}.why-card h3{font-size:22px}.why-card p{font-size:15px}.features-grid{grid-template-columns:repeat(3,1fr);gap:35px}.feature-card h3{font-size:22px}.feature-card p{font-size:15px}.features-section,.how-it-works-section,.demo-section,.cta-section,.why-section{padding:100px 40px}}@media (min-width: 1440px){.hero-title{font-size:72px}.section-title{font-size:48px}.features-grid,.why-grid,.steps-container,.demo-content{max-width:1400px}}.welcome-container{min-height:100vh;background-color:#f8fafc;background-image:radial-gradient(circle at top right,rgba(237,28,36,.06) 0%,transparent 45%),radial-gradient(circle at bottom left,rgba(0,51,102,.05) 0%,transparent 45%),linear-gradient(rgba(0,51,102,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,51,102,.025) 1px,transparent 1px);background-size:100% 100%,100% 100%,32px 32px,32px 32px;background-position:top right,bottom left,center,center;color:#0f172a;padding:30px 24px 40px;position:relative}.welcome-container:before,.welcome-container:after{content:"";position:fixed;top:0;bottom:0;width:clamp(36px,6vw,90px);pointer-events:none;z-index:0}.welcome-container:before{left:0;background:linear-gradient(90deg,#0033660f,#0360)}.welcome-container:after{right:0;background:linear-gradient(270deg,#ed1c2412,#ed1c2400)}.top-bar{max-width:1320px;margin:0 auto 24px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.top-logo{width:clamp(180px,28vw,250px);height:auto}.server-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.9rem;background:#f8fafc}.server-pill.checking{color:#9a6700;border-color:#fcd34d;background:#fffbeb}.server-pill.waking{color:#9a3412;border-color:#fdba74;background:#fff7ed}.server-pill.ready{color:#065f46;border-color:#6ee7b7;background:#ecfdf5}.server-dot,.status-dot-large{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block}.hero-layout{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}.hero-content-left{display:flex;flex-direction:column;padding:20px 0}.hero-visual-right{display:flex;justify-content:center;align-items:center;padding:20px}.visual-composition{position:relative;width:100%;max-width:400px;height:380px}.floating-card{position:absolute;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,51,102,.08);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 16px 36px -6px #0033661a,0 4px 12px -4px #ed1c240f;width:300px;transition:transform .3s ease,box-shadow .3s ease;animation:float 4s ease-in-out infinite}.floating-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 24px 48px -8px #00336626,0 8px 16px -6px #ed1c241a;z-index:10}.card-1{top:0;left:10%;animation-delay:0s}.card-2{top:130px;right:5%;animation-delay:1.5s}.card-3{bottom:0;left:0;animation-delay:3s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}.card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:linear-gradient(135deg,#ed1c241a,#0033660d);flex-shrink:0}.card-text h4{margin:0 0 4px;color:#036;font-size:1.05rem;font-weight:700}.card-text p{margin:0;color:#475569;font-size:.85rem;line-height:1.4}.hero-main,.hero-side{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,51,102,.08);border-radius:24px;box-shadow:0 20px 40px -8px #0033660f,0 1px 3px #00000008}.hero-main{padding:40px 32px}.hero-side{padding:14px;display:grid;gap:12px}.hero-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid rgba(237,28,36,.25);background:#ed1c2414;color:#c1121f;font-size:.82rem;font-weight:700;margin-bottom:14px}.hero-title{margin:0;font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.1;color:#036;letter-spacing:-.03em}.gradient-text{background:linear-gradient(135deg,#ed1c24,#a60010);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{margin:16px 0 0;color:#475569;font-size:clamp(1.05rem,2vw,1.15rem);line-height:1.6;max-width:60ch}.server-panel{margin-top:18px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#ed1c240f,#0033660f);border:1px solid rgba(0,51,102,.15)}.server-panel-header{display:flex;align-items:center;gap:10px;color:#0f172a}.status-dot-large{width:12px;height:12px}.status-dot-large.checking{background:#f59e0b}.status-dot-large.waking{background:#f97316}.status-dot-large.ready{background:#10b981}.server-panel p{margin:8px 0 0;color:#475569;font-size:.92rem}.hero-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px}.btn-primary,.btn-secondary{border-radius:12px;padding:12px 20px;font-weight:700;font-size:1rem;border:1px solid transparent;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-decoration:none}.btn-primary{background:linear-gradient(135deg,#ed1c24,#cc0d14);color:#fff;box-shadow:0 4px 14px #ed1c2433}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ed1c2459}.btn-secondary{background:#fff;color:#036;border-color:#00336626;box-shadow:0 2px 8px #0033660a}.btn-secondary:hover{transform:translateY(-2px);border-color:#ed1c244d;color:#ed1c24;box-shadow:0 8px 20px #00336614}.link-btn{display:inline-flex;align-items:center}.info-card{padding:14px;border-radius:12px;border:1px solid rgba(0,51,102,.12);background:linear-gradient(135deg,#fff,#f8fafc)}.info-card h3{margin:0 0 6px;color:#036;font-size:1rem}.info-card p{margin:0;color:#64748b;font-size:.9rem;line-height:1.55}.highlights{max-width:1320px;margin:14px auto 0;display:grid;grid-template-columns:1fr;gap:10px}.highlight-item{padding:12px 14px;border-radius:10px;text-align:center;font-weight:600;color:#036;border:1px solid rgba(0,51,102,.14);background:#fff}.details-grid{max-width:1320px;margin:14px auto 0;display:grid;grid-template-columns:1fr;gap:10px}.detail-card{background:#fff;border:1px solid rgba(0,51,102,.12);border-radius:12px;padding:14px;box-shadow:0 8px 20px #0206170a}.detail-card h4{margin:0 0 6px;font-size:.98rem;color:#036}.detail-card p{margin:0;color:#64748b;line-height:1.5;font-size:.9rem}@media (min-width: 900px){.welcome-container{padding:28px 22px 40px}.hero-layout{grid-template-columns:1fr 1fr;gap:40px;align-items:center}.hero-content-left{padding:40px 32px 40px 0}.highlights{grid-template-columns:repeat(3,1fr)}.details-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media (min-width: 1500px){.top-bar,.hero-layout,.highlights,.details-grid{max-width:1450px}}.hero-layout.simple-layout{max-width:1240px}.hero-main.hero-main-wide{width:100%}.quick-points{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}.quick-points span{display:inline-flex;align-items:center;border:1px solid rgba(0,51,102,.16);background:#f8fafc;color:#036;padding:6px 10px;border-radius:999px;font-size:.82rem;font-weight:600}.flow-section{max-width:1240px;margin:24px auto 40px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,51,102,.08);border-radius:24px;box-shadow:0 20px 40px -8px #0033660f,0 1px 3px #00000008;padding:24px 28px}.flow-section h2{margin:0 0 20px;font-size:1.25rem;font-weight:800;color:#036;letter-spacing:-.01em}.flow-chart{display:grid;grid-template-columns:1fr;gap:16px}.flow-step{border:1px solid rgba(0,51,102,.08);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc);padding:16px 20px;box-shadow:0 4px 12px #00336608;transition:all .3s cubic-bezier(.4,0,.2,1)}.flow-step:hover{transform:translateY(-3px);box-shadow:0 12px 24px #ed1c241a;border-color:#ed1c2433}.flow-number{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ed1c24,#aa0010);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;box-shadow:0 4px 12px #ed1c2440;margin-bottom:8px}.flow-step h3{margin:8px 0 6px;color:#0f172a;font-size:1.05rem;font-weight:700}.flow-step p{margin:0;color:#475569;font-size:.95rem;line-height:1.5}.flow-arrow{display:none;color:#94a3b8;align-self:center;justify-self:center;font-weight:700}@media (min-width: 900px){.flow-section{padding:20px}.flow-chart{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px}.flow-arrow{display:inline}}@media (min-width: 1100px){.hero-layout.simple-layout{max-width:1320px;gap:80px}.visual-composition{max-width:500px;height:460px}.floating-card{width:360px;padding:24px 28px;gap:20px}.card-1{left:0%;top:0}.card-2{right:-5%;top:160px}.card-3{left:5%;bottom:0}.flow-section{max-width:1320px}.flow-chart{position:relative;align-items:stretch}.flow-step{min-height:130px}}@media (min-width: 1280px){.flow-chart:before{content:"";position:absolute;left:8%;right:8%;top:22px;border-top:1px dashed rgba(0,51,102,.25);z-index:0}.flow-step,.flow-arrow{position:relative;z-index:1}}.upload-page{min-height:100vh;background:radial-gradient(circle at top right,#ed1c240f,#fff 40%,#00336614);padding:20px 15px 40px}.upload-page:before{content:"";position:absolute;inset:0;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIi8+Cjwvc3ZnPg==) repeat;z-index:0;pointer-events:none}.upload-container{max-width:900px;margin:0 auto;width:100%;position:relative;z-index:1}.header{text-align:center;margin-bottom:40px;color:#fff}.header-content{display:flex;flex-direction:column;align-items:center;gap:20px}.header-icon{width:70px;height:70px;background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #00000026;border:2px solid rgba(255,255,255,.3)}.header-icon svg{width:40px;height:40px}.header-text h1{font-size:2rem;margin-bottom:12px;line-height:1.2;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.1)}.header-text .subtitle{font-size:1.05rem;opacity:.95;line-height:1.5;margin-bottom:20px;font-weight:400}.upload-content{background:#fff;border-radius:20px;padding:35px 25px;box-shadow:0 18px 50px #0033661f;border:1px solid rgba(0,51,102,.08)}.upload-header{text-align:center;margin-bottom:26px}.upload-title{color:#036;margin:12px 0 8px;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800}.upload-subtitle{color:#64748b;margin:0;font-size:1rem}.back-button{border:1px solid rgba(0,51,102,.2);background:#fff;color:#036;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#f8fbff;border-color:#ed1c2466;color:#ed1c24}.steps-indicator{display:flex;align-items:center;justify-content:center;margin-bottom:40px;padding:0 10px}.step-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:120px}.step-circle{width:45px;height:45px;border-radius:50%;background:#e8eef3;color:#5e6c84;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;transition:all .3s ease;border:3px solid #e8eef3}.step-item.active .step-circle{background:#ed1c24;color:#fff;border-color:#ed1c24;box-shadow:0 4px 15px #ed1c244d}.step-item.completed .step-circle{background:#036;color:#fff;border-color:#036}.step-item.completed .step-circle:before{content:"✓";font-weight:700}.step-item.completed .step-circle{font-size:0}.step-item.completed .step-circle:before{font-size:20px}.step-item span{font-size:12px;color:#5e6c84;font-weight:600;text-align:center}.step-item.active span{color:#ed1c24}.step-item.completed span{color:#036}.step-line{flex:1;height:3px;background:#e8eef3;margin:0 10px;max-width:80px;position:relative;top:-15px}.upload-box{display:flex;flex-direction:column;gap:30px;background:#fff;padding:40px 30px;border-radius:20px;box-shadow:0 10px 40px #0000001a}.drop-zone{border:2px dashed #CBD5E1;border-radius:16px;padding:60px 20px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);background:#f8fafc;cursor:pointer;position:relative;overflow:hidden}.drop-zone:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ed1c240d,#0033660d);opacity:0;transition:opacity .3s ease}.drop-zone:hover{border-color:#ed1c24;background:#fff8f8;transform:translateY(-2px)}.drop-zone:hover:before{opacity:1}.drop-zone.drag-over{border-color:#ed1c24;background:#fff6f6;transform:scale(1.02);box-shadow:0 0 0 4px #ed1c241f}.drop-zone svg{color:#64748b;transition:transform .3s ease,color .3s ease;margin-bottom:20px}.drop-zone:hover svg{transform:scale(1.1);color:#ed1c24}.file-selected{color:#036;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;gap:8px}.file-selected:before{content:"✓";display:inline-block;width:30px;height:30px;background:#ed1c24;color:#fff;border-radius:50%;line-height:30px;font-size:18px}.browse-button{background:linear-gradient(135deg,#ed1c24,#bd0f16);color:#fff;border:none;padding:14px 32px;border-radius:10px;font-size:1rem;font-weight:600;margin-top:10px;transition:all .3s;cursor:pointer;display:inline-block;box-shadow:0 4px 15px #ed1c244d}.browse-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ed1c2466}.bank-selection{margin-top:35px;padding:25px 20px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:16px;border:2px solid #e8eef3}.bank-selection h3{margin-bottom:15px;color:#172b4d;font-size:1.2rem;font-weight:700}.bank-grid{display:grid;grid-template-columns:1fr;gap:15px}.bank-button{padding:20px 18px;border:3px solid #e8eef3;border-radius:12px;background:#fff;text-align:left;transition:all .3s;cursor:pointer;display:block;width:100%;position:relative;overflow:hidden}.bank-button:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:#0052cc;transform:scaleY(0);transition:transform .3s ease}.bank-button:hover{border-color:#2684ff;box-shadow:0 4px 15px #0052cc26;transform:translateY(-2px)}.bank-button:hover:before{transform:scaleY(1)}.bank-button.selected{border-color:#0052cc;background:linear-gradient(135deg,#e3f2fd,#fff);box-shadow:0 6px 20px #0052cc33}.bank-button.selected:before{transform:scaleY(1)}.bank-icon{font-size:2rem;margin-bottom:10px}.bank-name{font-weight:700;font-size:1rem;margin-bottom:5px;color:#172b4d}.bank-button.selected .bank-name{color:#0052cc}.bank-format{font-size:.85rem;color:#5e6c84}.upload-button{width:100%;margin-top:30px;padding:16px;background:linear-gradient(135deg,#ed1c24,#bd0f16);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;transition:all .3s;cursor:pointer;box-shadow:0 6px 20px #ed1c244d;position:relative;overflow:hidden}.upload-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.upload-button:hover:before{width:400px;height:400px}.upload-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #ed1c2466}.upload-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite;margin-right:10px}.features{display:flex;flex-direction:column;gap:12px;margin-top:35px;padding:25px 20px;background:linear-gradient(135deg,#ed1c240f,#0033660f);border-radius:12px;border:1px solid rgba(0,51,102,.12)}.feature-item{display:flex;align-items:center;padding:0;color:#172b4d;font-size:.95rem;font-weight:500}.feature-item:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#ed1c24;color:#fff;border-radius:50%;margin-right:12px;font-size:14px;font-weight:700;flex-shrink:0}.upload-button:focus-visible,.browse-button:focus-visible,.back-button:focus-visible{outline:3px solid rgba(237,28,36,.28);outline-offset:2px}@media (min-width: 768px){.upload-page{padding:40px 30px 60px}.header-content{flex-direction:row;gap:25px}.header-icon{width:80px;height:80px}.header-icon svg{width:45px;height:45px}.header-text{text-align:left}.header-text h1{font-size:2.5rem}.header-text .subtitle{font-size:1.15rem}.upload-content{padding:45px 40px}.step-item span{font-size:14px}.step-circle{width:50px;height:50px}.drop-zone{padding:60px 30px}.drop-zone svg{width:80px;height:80px}.bank-grid{grid-template-columns:repeat(2,1fr);gap:18px}.bank-button{padding:22px 20px}.features{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:30px 25px}.feature-item{flex:0 0 48%}}@media (min-width: 1024px){.upload-page{padding:60px 40px 80px}.header-icon{width:90px;height:90px}.header-icon svg{width:50px;height:50px}.header-text h1{font-size:2.75rem}.header-text .subtitle{font-size:1.2rem}.upload-content{padding:50px 45px}.steps-indicator{margin-bottom:50px}.step-item{max-width:150px}.drop-zone{padding:70px 40px;border-width:4px}.browse-button{padding:16px 40px;font-size:1.1rem}.bank-selection{padding:30px 25px}.bank-selection h3{font-size:1.3rem}.bank-grid{grid-template-columns:repeat(3,1fr);gap:20px}.upload-button{padding:18px;font-size:1.15rem;margin-top:35px}.features{gap:15px;padding:30px}.feature-item{flex:0 0 32%;font-size:1rem}}.advanced-analytics-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.header{background:#fff;box-shadow:0 1px 3px #0000001a;border-bottom:1px solid #e5e7eb}.header-content{max-width:100%;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center;gap:1rem}.icon-container{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#fff}.analytics-icon{background-color:#8b5cf6}.icon-container svg{width:1.25rem;height:1.25rem}.header h1{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.header-actions{display:flex;gap:.75rem}.btn-secondary{padding:.5rem 1rem;background:#fff;border:1px solid #d1d5db;color:#374151;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.btn-secondary:hover{background:#f9fafb}.analytics-content{max-width:100%;padding:1.5rem}.section-title{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem}.stats-section{margin-bottom:2rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.stat-card{background:#fff;border-radius:1rem;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 6px #0000001a;transition:transform .2s}.stat-card:hover{transform:translateY(-4px)}.stat-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.stat-icon.blue{background:#dbeafe}.stat-icon.green{background:#d1fae5}.stat-icon.purple{background:#ede9fe}.stat-icon.orange{background:#fed7aa}.stat-details{flex:1}.stat-label{font-size:.875rem;color:#6b7280;margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.outliers-section{margin-bottom:2rem}.outliers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.outlier-card{background:#fff;border-radius:1rem;padding:1.25rem;box-shadow:0 4px 6px #0000001a;border-left:4px solid #EF4444}.outlier-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.outlier-badge{background:#fee2e2;color:#dc2626;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600}.outlier-amount{font-size:1.25rem;font-weight:700;color:#ef4444}.outlier-description{color:#374151;margin-bottom:.75rem;font-size:.875rem}.outlier-meta{display:flex;gap:1rem;font-size:.75rem;color:#6b7280}.no-data{background:#fff;border-radius:1rem;padding:2rem;text-align:center;color:#6b7280}.patterns-section{margin-bottom:2rem}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem}.chart-container{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 6px #0000001a}.chart-container.full-width{grid-column:1 / -1}.chart-title{font-size:1.125rem;font-weight:600;color:#111827;margin-bottom:1rem}.chart-wrapper{height:300px;position:relative}.frequency-section{margin-bottom:2rem}.frequency-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.frequency-card{background:#fff;border-radius:1rem;padding:1.25rem;box-shadow:0 4px 6px #0000001a}.frequency-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #E5E7EB}.merchant-name{font-weight:600;color:#111827;font-size:1rem}.transaction-count{background:#dbeafe;color:#1d4ed8;padding:.25rem .75rem;border-radius:9999px;font-size:.875rem;font-weight:600}.frequency-stats{display:flex;justify-content:space-between}.stat-item{display:flex;flex-direction:column;gap:.25rem}.stat-item .stat-label{font-size:.75rem;color:#6b7280}.stat-item .stat-value{font-size:1rem;font-weight:600;color:#111827}.quality-section{margin-bottom:2rem}.quality-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}.quality-card{background:#fff;border-radius:1rem;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 6px #0000001a}.quality-icon{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700}.quality-icon.success{background:#d1fae5;color:#059669}.quality-icon.warning{background:#fef3c7;color:#d97706}.quality-icon.info{background:#dbeafe;color:#2563eb}.quality-details{flex:1}.quality-label{font-size:.875rem;color:#6b7280;margin-bottom:.25rem}.quality-value{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.insights-section{margin-bottom:2rem}.insights-list{display:grid;gap:1rem}.insight-card{background:#fff;border-radius:1rem;padding:1.5rem;display:flex;gap:1rem;box-shadow:0 4px 6px #0000001a;transition:transform .2s}.insight-card:hover{transform:translate(4px)}.insight-icon{width:3rem;height:3rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}.insight-content{flex:1}.insight-title{font-size:1.125rem;font-weight:600;color:#111827;margin-bottom:.5rem}.insight-text{color:#6b7280;line-height:1.5;margin:0}.loading-container,.error-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.spinner{width:4rem;height:4rem;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:1rem;color:#fff;font-size:1.125rem}.error-container p{color:#fff;font-size:1.125rem;margin-bottom:1.5rem}.upload-button{padding:.75rem 1.5rem;background:#fff;color:#8b5cf6;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:transform .2s}.upload-button:hover{transform:scale(1.05)}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;align-items:flex-start}.header-actions{width:100%;flex-direction:column}.btn-secondary{width:100%}.charts-grid,.stats-grid,.frequency-grid,.quality-grid{grid-template-columns:1fr}}
