:root{--bg:#f4fdf8;--bg-elevated:#fff;--border:#dcfce7;--border-strong:#bbf7d0;--text:#064e3b;--text-muted:#166534;--text-dim:#15803d;--accent:#22c55e;--font-heading:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"SF Mono", "Fira Code", monospace;--shadow-sm:0 4px 10px #00000008;--shadow-md:0 10px 30px #0000000d;--shadow-lg:0 20px 40px -10px #00000014;--shadow-hover:0 25px 50px -12px #00000026;--radius-sm:12px;--radius-md:20px;--radius-lg:24px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:var(--font-heading);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-image:linear-gradient(#00000008 1px,#0000 1px),linear-gradient(90deg,#00000008 1px,#0000 1px);background-position:50%;background-size:40px 40px;line-height:1.6;overflow-x:hidden}h1,h2,h3,.logo,.stat-value{font-family:var(--font-heading);letter-spacing:-.02em}::selection{color:var(--text);background:#4318ff26}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-soft{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes orbFloat{0%{transform:translate(0)scale(1)}33%{transform:translate(40px,-60px)scale(1.05)}66%{transform:translate(-30px,40px)scale(.95)}to{transform:translate(0)scale(1)}}.animated-bg{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(100px);opacity:.4;border-radius:50%;animation:20s ease-in-out infinite alternate orbFloat;position:absolute}.orb-1{background:#dcfce7;width:500px;height:500px;animation-duration:25s;top:-150px;left:-100px}.orb-2{background:#bbf7d0;width:600px;height:600px;animation-duration:28s;animation-delay:-5s;bottom:-200px;right:-150px}.orb-3{background:#86efac;width:400px;height:400px;animation-duration:32s;animation-delay:-10s;top:40%;left:60%}.navbar{z-index:100;-webkit-backdrop-filter:blur(20px)saturate(160%);backdrop-filter:blur(20px)saturate(160%);border-bottom:1px solid var(--border);background:#ffffffd9;justify-content:space-between;align-items:center;height:72px;padding:0 clamp(20px,5vw,56px);animation:.6s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:fixed;top:0;left:0;right:0}.logo{color:var(--text);align-items:center;gap:8px;font-size:1.25rem;font-weight:800;text-decoration:none;display:flex}.logo:before{content:"";background:linear-gradient(135deg,#22c55e,#10b981);border-radius:8px;width:24px;height:24px;display:inline-block;box-shadow:0 4px 10px #22c55e4d}.logo span{color:var(--accent)}.nav-links{background:var(--bg);border:1px solid var(--border);border-radius:999px;gap:32px;padding:8px 24px;list-style:none;display:flex}.nav-links a{color:var(--text-muted);font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s}.nav-links a:hover{color:var(--accent);transform:translateY(-1px)}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:80px;max-width:1400px;min-height:100vh;margin:0 auto;padding:120px clamp(24px,6vw,80px) 80px;animation:.8s cubic-bezier(.16,1,.3,1) forwards slideUp;display:grid}.hero-left{flex-direction:column;gap:0;display:flex}.hero-tag-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse-soft;box-shadow:0 0 10px #22c55e}.hero h1{color:#0a2e1a;letter-spacing:-.04em;margin-bottom:28px;font-size:clamp(2.8rem,4.5vw,4rem);font-weight:900;line-height:1.08}.hero-highlight{color:#22c55e;display:block}.subtitle{color:#4b7a5e;max-width:480px;margin-bottom:40px;font-size:1.05rem;font-weight:450;line-height:1.75}.hero-cta{color:#fff;background:#22c55e;border-radius:999px;align-items:center;gap:10px;width:fit-content;padding:14px 28px;font-size:.95rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;box-shadow:0 8px 24px #22c55e59}.hero-cta:hover{background:#16a34a;transform:translateY(-3px)scale(1.04);box-shadow:0 12px 32px #22c55e80}.hero-right{flex-direction:column;gap:20px;display:flex}.hero-right-row{grid-template-columns:1fr 1fr;gap:20px;display:grid}.stat-block{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffb8;border:1px solid #22c55e26;border-radius:24px;flex-direction:column;gap:12px;padding:32px;transition:transform .3s,box-shadow .3s;display:flex;box-shadow:0 4px 20px #0000000a}.stat-block:hover{border-color:#22c55e59;transform:translateY(-4px);box-shadow:0 20px 40px #22c55e1f}.stat-block-main{padding:40px}.stat-block-sm{padding:28px}.stat-block-number{color:#064e3b;letter-spacing:-.05em;font-size:clamp(3.5rem,5vw,5rem);font-weight:900;line-height:1;font-family:var(--font-heading)}.stat-block-sm .stat-block-number{font-size:clamp(2.5rem,3.5vw,3.5rem)}.stat-block-unit{color:#22c55e;letter-spacing:-.04em;vertical-align:baseline;margin-left:2px;font-size:1em;font-weight:900}.stat-block-rule{background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:999px;width:40px;height:3px}.stat-block-label{text-transform:uppercase;letter-spacing:.1em;color:#166534;font-size:.8rem;font-weight:800}.stat-block-desc{color:#4b7a5e;font-size:.85rem;font-weight:450;line-height:1.6}.demo-section{max-width:1000px;margin:0 auto;padding:40px 20px 100px;animation:1s cubic-bezier(.16,1,.3,1) forwards slideUp}.demo-container{background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid #fffc;transition:all .4s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;transform:perspective(1000px)rotateX(0)}.demo-container:hover{box-shadow:var(--shadow-hover);transform:perspective(1000px)translateY(-4px)rotateX(1deg)}.demo-header{border-bottom:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.demo-header h2{color:var(--text);font-size:1.25rem;font-weight:800}.badge{border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:.8rem;font-weight:700;display:inline-flex}.badge-gpu{color:#4318ff;background:#eef2ff}.badge-cpu{color:#e11d48;background:#fff1f2}.badge-fallback{color:#ea580c;background:#fff7ed}.badge-loading{color:var(--text-muted);background:#f1f5f9}.dot{border-radius:50%;width:10px;height:10px}.dot-gpu{background:#4318ff;animation:2s infinite pulse-soft;box-shadow:0 0 12px #4318ff66}.dot-cpu{background:#e11d48}.dot-pulse{background:var(--text-muted);animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.drop-zone{aspect-ratio:16/9;cursor:pointer;background:#f8fafc;justify-content:center;align-items:center;width:100%;transition:all .3s;display:flex;position:relative}.drop-zone:hover{background:#f1f5f9}.drop-placeholder{color:var(--text-muted);flex-direction:column;align-items:center;gap:16px;animation:4s ease-in-out infinite float;display:flex}.drop-placeholder p{color:var(--text);font-size:1.1rem;font-weight:600}.drop-placeholder .hint{color:var(--text-dim);font-size:.85rem;font-weight:500}.drop-placeholder svg{opacity:.8;color:#4318ff;filter:drop-shadow(0 4px 6px #4318ff33)}.result-canvas{object-fit:contain;max-width:100%;max-height:100%}.webcam-layer{object-fit:contain;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drop-zone-loading{cursor:default;background:#f8fafc}.drop-zone-loading:hover{background:#f8fafc}.loading-placeholder{color:var(--text-muted);text-align:center;flex-direction:column;align-items:center;gap:18px;padding:0 24px;display:flex}.loading-placeholder p{color:var(--text);font-size:1.1rem;font-weight:600}.loading-placeholder .hint{color:var(--text-dim);max-width:440px;font-size:.85rem;font-weight:500}.spinner{border:4px solid #4318ff26;border-top-color:#4318ff;border-radius:50%;width:44px;height:44px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result-actions{justify-content:center;align-items:center;gap:14px;margin-top:28px;margin-bottom:8px;display:flex}.btn-secondary{appearance:none;color:#4318ff;cursor:pointer;background:0 0;border:1.5px solid #4318ff;border-radius:10px;padding:10px 22px;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s}.btn-secondary:hover{color:#fff;background:#4318ff;transform:translateY(-1px);box-shadow:0 6px 14px #4318ff40}.btn-secondary:active{transform:translateY(0)}.btn-secondary.active{color:#fff;background:#4318ff;box-shadow:0 6px 14px #4318ff40}.demo-footer{background:var(--border);grid-template-columns:1.5fr 1fr;gap:1px;display:grid}.detections-panel,.classes-legend{background:#fff;padding:32px}.detections-panel h3,.classes-legend h3{color:var(--text);align-items:center;gap:12px;margin-bottom:20px;font-size:1.1rem;font-weight:800;display:flex}.latency{font-family:var(--font-mono);color:#ea580c;background:#fff7ed;border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600}.detection-list{flex-direction:column;gap:12px;display:flex}.detection-item{border-radius:var(--radius-sm);border:1px solid var(--border);background:#f8fafc;align-items:center;gap:12px;padding:12px 16px;font-size:.95rem;font-weight:500;transition:transform .2s;display:flex}.detection-item:hover{background:#f1f5f9;transform:translate(4px)}.det-color{border-radius:6px;flex-shrink:0;width:14px;height:14px;box-shadow:0 2px 4px #0000001a}.det-name{flex:1;font-weight:700}.det-conf{font-family:var(--font-mono);color:var(--text-muted);font-size:.85rem;font-weight:600}.no-detections{color:var(--text-dim);font-size:.95rem;font-weight:500}.error{border-radius:var(--radius-sm);color:#e11d48;background:#fff1f2;border:1px solid #ffe4e6;margin-top:12px;padding:12px 16px;font-size:.9rem;font-weight:600}.legend-items{flex-direction:column;gap:12px;display:flex}.legend-item{color:var(--text-muted);border-radius:var(--radius-sm);align-items:center;gap:12px;padding:8px 12px;font-size:.95rem;font-weight:600;transition:background .2s;display:flex}.legend-item:hover{color:var(--text);background:#f8fafc}.demo-cta{justify-content:center;margin-top:40px;display:flex}.cta-button{color:#0f172a;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;align-items:center;gap:12px;padding:16px 32px;font-size:1.05rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:inline-flex}.cta-button:hover{box-shadow:var(--shadow-md);color:var(--accent);border-color:#cbd5e1;transform:translateY(-4px)scale(1.02)}.dashboard-page{padding-top:120px}.metrics-section{max-width:1100px;margin:0 auto;padding:20px 20px 80px}.metrics-dashboard{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#fff;border:1px solid #fffc;padding:32px;animation:.8s cubic-bezier(.16,1,.3,1) forwards slideUp}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:32px;display:flex}.dashboard-header h2{color:var(--text);font-size:1.4rem;font-weight:800}.dashboard-window{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:#f1f5f9;border-radius:999px;padding:6px 16px;font-size:.85rem;font-weight:700}.kpi-row{grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:32px;display:grid}.kpi-card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);background:#fff;flex-direction:column;justify-content:center;padding:24px 22px;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.kpi-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-4px)}.kpi-card:before{content:"";opacity:.85;background:linear-gradient(90deg,#22c55e,#4ade80);height:3px;position:absolute;top:0;left:0;right:0}.kpi-card:nth-child(4):before{background:linear-gradient(90deg,#ef4444,#fb7185)}.kpi-card:nth-child(5):before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.kpi-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.09em;z-index:2;margin-bottom:10px;font-size:.72rem;font-weight:700}.kpi-value{font-family:var(--font-heading);color:var(--text);z-index:2;align-items:baseline;font-size:2.1rem;font-weight:800;line-height:1;display:flex}.kpi-bad{color:#e11d48}.unit{color:var(--text-dim);margin-left:4px;font-size:.95rem;font-weight:600}.charts-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.chart-card{border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;min-height:300px;padding:24px;transition:all .3s;display:flex}.chart-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.chart-wide{grid-column:1/-1}.chart-card h3{color:var(--text);align-items:baseline;gap:8px;margin-bottom:20px;font-size:1.1rem;font-weight:800;display:flex}.chart-sub{color:var(--text-dim);font-size:.8rem;font-weight:600}.chart-canvas{flex:1;height:280px;min-height:280px;position:relative}.chart-canvas .apexcharts-canvas{height:280px!important}.chart-empty{color:var(--text-dim);justify-content:center;align-items:center;height:100%;font-size:.95rem;font-weight:500;display:flex}.metrics-error,.no-data{color:var(--text-dim);text-align:center;padding:40px;font-size:1rem;font-weight:500}footer{text-align:center;color:var(--text-muted);margin-top:40px;padding:40px 20px;font-size:.9rem;font-weight:500}@media (width<=1024px){.hero{text-align:center;grid-template-columns:1fr;justify-items:center;gap:60px;min-height:auto;padding-top:100px}.hero-left{align-items:center}.subtitle{text-align:center}.hero-right{width:100%;max-width:600px}}@media (width<=900px){.demo-footer{grid-template-columns:1fr}.kpi-row{grid-template-columns:repeat(2,1fr)}.kpi-card:nth-child(5){grid-column:1/-1}.charts-grid{grid-template-columns:1fr}.chart-wide{grid-column:1}.hero-right-row{grid-template-columns:1fr 1fr}.nav-links{display:none}}@media (width<=500px){.hero h1{font-size:2.4rem}.hero-right-row{grid-template-columns:1fr}.stat-block-number{font-size:3rem}.kpi-row{grid-template-columns:1fr}.kpi-card:nth-child(5){grid-column:auto}}