/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#0858ba;
  --blue-dark:#064a9e;
  --blue-mid:#2e78d6;
  --blue-light:#dbeafe;
  --blue-xlight:#eff6ff;
  --bg-page:#ffffff;
  --bg-1:#f8fafc;
  --bg-2:#f1f5f9;
  --bg-3:#e2e8f0;
  --card:#ffffff;
  --border:#e2e8f0;
  --border-hi:#bfdbfe;
  --t1:#0f172a;
  --t2:#334155;
  --t3:#64748b;
  --t4:#94a3b8;
  --green:#16a34a;--green-bg:#dcfce7;
  --amber:#d97706;--amber-bg:#fef3c7;
  --red:#dc2626;--red-bg:#fee2e2;
  --cyan:#0891b2;--cyan-bg:#cffafe;
  --purple:#7c3aed;--purple-bg:#ede9fe;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 12px 32px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.06);
  --shadow-blue:0 4px 20px rgba(8,88,186,.18);
  --r-lg:16px;--r-md:10px;--r-sm:8px;--r-xs:6px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-page);color:var(--t1);overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg-2)}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}

/* ===== UTILITIES ===== */
.grad-text{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 60%,#38bdf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;background:var(--blue-xlight);border:1px solid var(--blue-light);border-radius:999px;font-size:.72rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.section-title{font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin-bottom:.875rem;color:var(--t1)}
.section-sub{color:var(--t2);font-size:1rem;line-height:1.75;max-width:560px}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes dash{to{stroke-dashoffset:-20}}
@keyframes tickerL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tickerR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes barGrow{from{height:0}to{height:var(--h,60%)}}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* ===== COMING SOON BANNER ===== */
.coming-soon-bar{
  position:relative;z-index:500;
  background:var(--blue);
  border-bottom:1px solid var(--blue-dark);
}
.csb-inner{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:.6rem 3.5rem .6rem 1.5rem;
  max-width:1200px;margin:0 auto;position:relative;
}
.csb-dot{width:7px;height:7px;border-radius:50%;background:#fde68a;flex-shrink:0;animation:blink 1.5s ease infinite}
.csb-text{font-size:.82rem;color:rgba(255,255,255,.92);line-height:1.4;text-align:center}
.csb-text strong{color:#fde68a;font-weight:700}
.csb-close{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.55);font-size:.85rem;cursor:pointer;padding:.25rem .4rem;border-radius:4px;transition:color .2s,background .2s;line-height:1}
.csb-close:hover{color:#fff;background:rgba(255,255,255,.15)}

/* Nav badges */
.nav-coming-soon-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .875rem;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;font-size:.74rem;font-weight:600;color:#92400e;white-space:nowrap}
.feature-coming-soon{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;background:#fef3c7;border:1px solid #fde68a;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:#92400e}
.cta-coming-soon-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:#fef3c7;border:1px solid #fde68a;border-radius:var(--r-md);font-size:1rem;font-weight:700;color:#92400e}

/* ===== PROGRESS BAR ===== */
.progress-bar-wrap{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:600}
.progress-bar{height:100%;background:var(--blue);width:0;transition:width .08s}

/* ===== SUBTLE ORBS ===== */
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;opacity:.18}
.orb-1{width:600px;height:600px;background:rgba(8,88,186,.15);top:-200px;right:-150px;animation:floatOrb 10s ease-in-out infinite}
.orb-2{width:450px;height:450px;background:rgba(14,165,233,.1);bottom:-100px;left:-150px;animation:floatOrb 13s ease-in-out infinite 2s}
.orb-3{width:300px;height:300px;background:rgba(99,102,241,.08);top:40%;right:5%;animation:floatOrb 8s ease-in-out infinite 1s}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:60px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  animation:fadeUp .5s ease;
}
.nav-logo{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700;text-decoration:none;color:var(--t1);letter-spacing:-.02em}
.logo-mark{width:32px;height:32px;background:var(--blue);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{color:var(--t3);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-btn-ghost{padding:.45rem 1rem;border:1.5px solid var(--border-hi);border-radius:var(--r-sm);font-size:.83rem;font-weight:500;color:var(--blue);background:transparent;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s}
.nav-btn-ghost:hover{border-color:var(--blue);background:var(--blue-xlight)}
.nav-btn-cta{padding:.45rem 1.1rem;background:var(--blue);border-radius:var(--r-sm);font-size:.83rem;font-weight:600;color:#fff;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:var(--shadow-blue)}
.nav-btn-cta:hover{background:var(--blue-dark);transform:translateY(-1px)}

/* ===== HERO ===== */
.hero{
  position:relative;overflow:hidden;
  padding:140px 2rem 0;
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 25%,#ffffff 65%);
}
.hero-content{position:relative;z-index:2;text-align:center;max-width:820px;animation:fadeUp .7s ease .1s both}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;background:var(--blue-xlight);border:1px solid var(--blue-light);border-radius:999px;font-size:.78rem;font-weight:600;color:var(--blue);margin-bottom:1.75rem}
.badge-live{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 1.4s ease infinite}
.hero-title{font-size:clamp(2.8rem,6vw,5rem);font-weight:800;line-height:1.06;letter-spacing:-.04em;margin-bottom:1.5rem;color:var(--t1)}
.hero-sub{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--t2);line-height:1.8;margin-bottom:2.25rem;max-width:600px;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.btn-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;background:var(--blue);color:#fff;border:none;border-radius:var(--r-md);font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:var(--shadow-blue)}
.btn-cta:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(8,88,186,.3)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;background:#fff;color:var(--blue);border:1.5px solid var(--blue-light);border-radius:var(--r-md);font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s}
.btn-ghost:hover{background:var(--blue-xlight);border-color:var(--blue)}

/* ===== PRODUCT MOCKUP ===== */
.product-frame{
  position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  border:1px solid var(--border);border-bottom:none;
  box-shadow:0 -8px 40px rgba(8,88,186,.1),0 -2px 12px rgba(0,0,0,.06);
  animation:fadeUp .7s ease .4s both;
}
.frame-bar{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:#f8fafc;border-bottom:1px solid var(--border)}
.frame-dots{display:flex;gap:.4rem}
.frame-dots span{width:11px;height:11px;border-radius:50%}
.frame-dots span:nth-child(1){background:#ef4444}
.frame-dots span:nth-child(2){background:#f59e0b}
.frame-dots span:nth-child(3){background:#22c55e}
.frame-url{flex:1;padding:.28rem .9rem;background:#fff;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--t3);font-family:monospace;max-width:380px}
.frame-running{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;color:var(--green);margin-left:auto}
.frame-running::before{content:'';width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 1.2s ease infinite}

/* ===== CANVAS TOOLBAR ===== */
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#ffffff;border-bottom:1px solid var(--border);gap:1rem;flex-wrap:wrap}
.ct-tools{display:flex;gap:.35rem}
.ct-tool{padding:.28rem .7rem;border:1px solid var(--border);border-radius:var(--r-xs);font-size:.72rem;font-weight:500;color:var(--t3);background:#fff;cursor:pointer;transition:all .15s}
.ct-tool:hover{background:var(--bg-1);color:var(--t2);border-color:var(--border-hi)}
.ct-tool.active{background:var(--blue-xlight);border-color:var(--blue-light);color:var(--blue);font-weight:600}
.ct-title{font-size:.78rem;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:.5rem}
.ct-title span{color:var(--t4)}
.ct-right{display:flex;align-items:center;gap:.5rem}
.ct-zoom{font-size:.72rem;color:var(--t3);padding:.2rem .5rem;background:var(--bg-1);border-radius:4px;border:1px solid var(--border)}
.ct-share{padding:.28rem .75rem;background:var(--blue);border-radius:var(--r-xs);font-size:.72rem;font-weight:600;color:#fff;border:none;cursor:pointer}

/* ===== CANVAS AREA ===== */
.canvas-area{
  position:relative;overflow:hidden;
  background:#f8fafc;
  background-image:radial-gradient(rgba(8,88,186,.07) 1px,transparent 1px);
  background-size:26px 26px;
  height:420px;
}
.canvas-edges{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.edge-static{fill:none;stroke:rgba(8,88,186,.18);stroke-width:1.5;stroke-dasharray:5 3;animation:dash 2s linear infinite}
.edge-active{fill:none;stroke:var(--blue);stroke-width:2;opacity:.5}
.edge-pending{fill:none;stroke:rgba(0,0,0,.08);stroke-width:1.5;stroke-dasharray:4 4}
.flow-particle{fill:var(--blue)}
.flow-particle-2{fill:var(--blue-mid)}

/* ===== WORKFLOW NODES ===== */
.wf-node{
  position:absolute;display:flex;align-items:center;gap:.65rem;
  padding:.75rem 1rem;
  background:#ffffff;
  border:1.5px solid var(--border);
  border-left-width:3px;border-left-color:var(--nc,var(--blue));
  border-radius:10px;white-space:nowrap;
  box-shadow:var(--shadow-md);
  transition:transform .2s,box-shadow .2s;
  cursor:grab;min-width:155px;
}
.wf-node:hover{transform:translate(-1px,-3px);box-shadow:var(--shadow-lg)}
.wf-node.is-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--nc,var(--blue)) 25%,transparent),var(--shadow-md)}
.wf-node-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;background:var(--bg-2)}
.wf-node-body{flex:1}
.wf-node-type{font-size:.62rem;color:var(--t4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.1rem}
.wf-node-name{font-size:.82rem;font-weight:600;color:var(--t1)}
.wf-node-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wf-node-dot.running{background:var(--green);animation:nodePulse 1.8s ease infinite}
.wf-node-dot.done{background:var(--green)}
.wf-node-dot.pending{background:var(--t4)}
.wf-node-dot.waiting{background:var(--amber);animation:nodePulse 2s ease infinite}
.canvas-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.4rem;padding:.35rem .875rem;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:999px;font-size:.72rem;color:var(--t3);pointer-events:none;box-shadow:var(--shadow-sm)}

/* ===== TICKER ===== */
.ticker-section{overflow:hidden;position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-1)}
.ticker-tag{position:absolute;left:0;top:0;bottom:0;z-index:10;display:flex;align-items:center;padding:0 1.5rem 0 1rem;background:var(--blue);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-right:2.2rem;white-space:nowrap}
.ticker-track{display:flex;width:max-content;animation:tickerL 30s linear infinite;padding:.825rem 0 .825rem 200px}
.ticker-track:hover{animation-play-state:paused}
.ticker-track-rev{animation:tickerR 35s linear infinite}
.ticker-item{display:flex;align-items:center;gap:.5rem;padding:.38rem 1.1rem;margin-right:.5rem;background:#fff;border:1px solid var(--border);border-radius:999px;font-size:.82rem;white-space:nowrap;color:var(--t2);transition:border-color .2s,box-shadow .2s}
.ticker-item:hover{border-color:var(--blue-light);box-shadow:0 2px 8px rgba(8,88,186,.1)}
.ticker-item .icon{font-size:.8rem}
.ticker-item .lbl{color:var(--t3);font-size:.72rem}
.ticker-item .val{font-weight:600;color:var(--t1)}
.t-fade-l{position:absolute;left:0;top:0;bottom:0;width:200px;background:linear-gradient(90deg,var(--bg-1),transparent);pointer-events:none;z-index:6}
.t-fade-r{position:absolute;right:0;top:0;bottom:0;width:80px;background:linear-gradient(-90deg,var(--bg-1),transparent);pointer-events:none;z-index:6}

/* ===== FEATURE SECTIONS ===== */
.feature-section{padding:6rem 2rem;max-width:1200px;margin:0 auto}
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.feature-split.rev{direction:rtl}.feature-split.rev>*{direction:ltr}
.feature-text .section-sub{margin-bottom:2rem}
.feature-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.feature-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:var(--bg-1);border:1px solid var(--border);border-radius:999px;font-size:.78rem;color:var(--t2)}
.feature-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pc,var(--blue))}

/* ===== FORM BUILDER DEMO ===== */
.form-demo{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.form-demo-header{padding:.65rem 1rem;background:var(--bg-1);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.form-demo-header .dot{width:10px;height:10px;border-radius:50%}
.form-demo-header .title{font-size:.75rem;color:var(--t3);margin-left:.5rem;font-weight:500}
.ai-prompt-area{padding:1.25rem}
.ai-prompt-box{display:flex;gap:.75rem;padding:1rem;background:var(--blue-xlight);border:1px solid var(--blue-light);border-radius:var(--r-md);margin-bottom:1rem}
.ai-icon{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;color:#fff}
.ai-text{font-size:.82rem;color:var(--t2);line-height:1.6;flex:1;min-height:2.5rem}
.ai-cursor{display:inline-block;width:2px;height:.9em;background:var(--blue);margin-left:1px;vertical-align:text-bottom;animation:cursorBlink .8s ease infinite}
.ai-generate-btn{width:100%;padding:.6rem;background:var(--blue);border:none;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;transition:background .2s}
.ai-generate-btn:hover{background:var(--blue-dark)}
.generated-form{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;border-top:1px solid var(--border)}
.gen-form-title{font-size:.9rem;font-weight:700;padding-bottom:.75rem;border-bottom:1px solid var(--border);color:var(--t1)}
.form-field{display:flex;flex-direction:column;gap:.35rem}
.form-field label{font-size:.72rem;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.form-field input,.form-field textarea{padding:.5rem .75rem;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);font-size:.82rem;color:var(--t2);font-family:var(--font);resize:none}
.form-field textarea{height:48px}
.star-rating{display:flex;gap:.25rem;align-items:center}
.star-rating span{color:#f59e0b;font-size:1rem;cursor:pointer}
.form-submit-btn{padding:.55rem;background:var(--blue);border:none;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:#fff;cursor:pointer;margin-top:.25rem;transition:background .2s}
.form-submit-btn:hover{background:var(--blue-dark)}

/* ===== MONITOR DEMO ===== */
.monitor-demo{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.monitor-header{padding:.85rem 1.1rem;background:var(--bg-1);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.monitor-title{font-size:.88rem;font-weight:700;color:var(--t1)}
.monitor-stats{display:flex;gap:1.25rem}
.ms-item{text-align:center}
.ms-num{font-size:1.1rem;font-weight:800}
.ms-label{font-size:.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.monitor-table{padding:0}
.mt-row{display:grid;grid-template-columns:1fr auto auto auto;gap:.75rem;align-items:center;padding:.65rem 1.1rem;border-bottom:1px solid var(--border);font-size:.8rem}
.mt-row:last-child{border-bottom:none}
.mt-row:hover{background:var(--bg-1)}
.mt-process{display:flex;align-items:center;gap:.5rem}
.mt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mt-name{font-weight:600;color:var(--t1);font-size:.82rem}
.mt-sub{font-size:.68rem;color:var(--t3)}
.mt-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#fff;flex-shrink:0}
.mt-status{padding:.18rem .6rem;border-radius:999px;font-size:.68rem;font-weight:600;white-space:nowrap}
.st-done{background:var(--green-bg);color:var(--green)}
.st-prog{background:var(--cyan-bg);color:var(--cyan)}
.st-wait{background:var(--amber-bg);color:var(--amber)}
.st-todo{background:var(--bg-2);color:var(--t3)}
.st-rev{background:var(--purple-bg);color:var(--purple)}
.mt-time{font-size:.7rem;color:var(--t4);white-space:nowrap}
.monitor-footer{padding:.75rem 1.1rem;background:var(--bg-1);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mf-text{font-size:.74rem;color:var(--t3)}
.mf-btn{padding:.3rem .85rem;background:var(--blue);border-radius:var(--r-xs);font-size:.72rem;font-weight:600;color:#fff;border:none;cursor:pointer;transition:background .2s}
.mf-btn:hover{background:var(--blue-dark)}

/* ===== ANALYTICS ===== */
.analytics-section{padding:6rem 2rem;background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.analytics-inner{max-width:1200px;margin:0 auto}

/* KPI row */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.5rem}
.kpi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem 1.4rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kpi-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.kpi-body{flex:1;min-width:0}
.kpi-num{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--t1);line-height:1.1}
.kpi-label{font-size:.72rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin:.15rem 0}
.kpi-trend{font-size:.72rem;font-weight:600}

/* Charts rows */
.charts-row-2{display:grid;grid-template-columns:1.3fr 1fr;gap:1.25rem}
.chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}
.chart-title{font-size:.88rem;font-weight:700;color:var(--t1)}
.chart-legend{display:flex;gap:1rem}
.cl-item{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--t2)}
.cl-dot{width:8px;height:8px;border-radius:2px}
.chart-footer{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.1rem;padding:.875rem;background:var(--blue-xlight);border-radius:var(--r-sm);border:1px solid var(--blue-light)}
.ai-insight-badge{width:26px;height:26px;border-radius:6px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;color:#fff}
.ai-insight-text{font-size:.78rem;color:var(--t2);line-height:1.6}
.ai-insight-text strong{color:var(--blue)}
.chart-day-labels{display:flex;justify-content:space-between;margin-top:.4rem;padding:0 .25rem}
.chart-day-labels span{font-size:.65rem;color:var(--t3)}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:.5rem;height:150px;border-bottom:1px solid var(--border);position:relative}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:2px}
.bar-wrap{width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.bar{width:100%;border-radius:3px 3px 0 0;animation:barGrow .8s ease both}
.bar-a{background:linear-gradient(to top,var(--blue),var(--blue-mid))}
.bar-b{background:var(--blue-light)}
@keyframes barGrow{from{height:0}to{height:var(--h,60%)}}

/* Donut chart */
.donut-wrap{display:flex;align-items:center;gap:1.5rem;flex:1;padding:.5rem 0}
.donut-ring{width:130px;height:130px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--blue) 0% 62%,var(--green) 62% 80%,var(--amber) 80% 94%,var(--red) 94% 100%);
  position:relative;display:flex;align-items:center;justify-content:center}
.donut-hole{width:70%;height:70%;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute}
.donut-center-num{font-size:1.1rem;font-weight:800;color:var(--t1);line-height:1}
.donut-center-lbl{font-size:.6rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:.6rem}
.dl-item{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.dl-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.dl-label{flex:1;color:var(--t2)}
.dl-val{font-weight:700;color:var(--t1)}

/* Line chart */
.line-chart-wrap{display:flex;gap:.5rem;flex:1;min-height:130px;align-items:stretch}
.lc-y-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:.6rem;color:var(--t3);text-align:right;padding-bottom:2px;min-width:28px}
.line-chart-svg{width:100%;height:100%;overflow:visible}
.lc-x-labels{display:flex;justify-content:space-between;margin-top:.4rem;padding-left:32px}
.lc-x-labels span{font-size:.65rem;color:var(--t3)}

/* Horizontal bar chart */
.h-bar-list{display:flex;flex-direction:column;gap:.875rem;flex:1}
.hb-item{display:flex;flex-direction:column;gap:.3rem}
.hb-meta{display:flex;justify-content:space-between;align-items:center}
.hb-name{font-size:.78rem;color:var(--t2)}
.hb-val{font-size:.78rem;font-weight:700}
.hb-track{height:6px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.hb-fill{height:100%;border-radius:999px;width:var(--w,0%);animation:hbarGrow .9s ease both}
@keyframes hbarGrow{from{width:0}to{width:var(--w,0%)}}

/* AI Recommendation cards */
.ai-rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.5rem}
.ai-rec-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.4rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;gap:.875rem}
.ai-rec-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.ai-rec-header{display:flex;align-items:flex-start;gap:.75rem}
.ai-rec-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.ai-rec-title{font-size:.85rem;font-weight:700;color:var(--t1);line-height:1.3}
.ai-rec-sub{font-size:.72rem;color:var(--t3);margin-top:.1rem}
.ai-rec-badge{padding:.18rem .6rem;border-radius:999px;font-size:.68rem;font-weight:600;white-space:nowrap;margin-left:auto;flex-shrink:0}
.ai-rec-body{font-size:.8rem;color:var(--t2);line-height:1.65}
.ai-rec-body strong{color:var(--t1)}
.ai-rec-impact{font-size:.75rem;font-weight:600;color:var(--blue);padding:.4rem .75rem;background:var(--blue-xlight);border-radius:var(--r-xs);border:1px solid var(--blue-light)}

/* trend colours */
.trend-up{color:var(--green)}
.trend-dn{color:var(--red)}

/* Responsive analytics */
@media(max-width:1024px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .charts-row-2{grid-template-columns:1fr}
  .ai-rec-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .ai-rec-grid{grid-template-columns:1fr}
}

/* ===== USE CASES ===== */
.usecases-section{padding:5rem 0;overflow:hidden;background:var(--bg-page)}
.usecases-inner{max-width:1200px;margin:0 auto;padding:0 2rem 3rem;text-align:center}
.usecases-inner .section-sub{margin:0 auto}
.uc-scroll-outer{overflow:hidden;position:relative}
.uc-track{display:flex;gap:1.25rem;width:max-content;padding:1.25rem;animation:tickerL 38s linear infinite}
.uc-track:hover{animation-play-state:paused}
.uc-track-rev{animation:tickerR 45s linear infinite}
.uc-card{flex-shrink:0;width:240px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:var(--shadow-sm)}
.uc-card:hover{transform:translateY(-6px);border-color:var(--blue-light);box-shadow:0 12px 28px rgba(8,88,186,.1)}
.uc-icon{font-size:1.6rem;margin-bottom:.75rem;display:block}
.uc-title{font-size:.92rem;font-weight:700;margin-bottom:.4rem;color:var(--t1)}
.uc-desc{font-size:.78rem;color:var(--t2);line-height:1.55}
.uc-tag{display:inline-block;margin-top:.75rem;padding:.18rem .6rem;border-radius:999px;font-size:.66rem;font-weight:600}
.uc-fade-l{position:absolute;left:0;top:0;bottom:0;width:100px;background:linear-gradient(90deg,var(--bg-page),transparent);pointer-events:none;z-index:2}
.uc-fade-r{position:absolute;right:0;top:0;bottom:0;width:100px;background:linear-gradient(-90deg,var(--bg-page),transparent);pointer-events:none;z-index:2}

/* ===== HOW IT WORKS ===== */
.how-section{padding:5rem 2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-1)}
.how-inner{max-width:1100px;margin:0 auto}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;position:relative}
.how-grid::before{content:'';position:absolute;top:2.5rem;left:calc(16.66% + 1rem);right:calc(16.66% + 1rem);height:1px;background:linear-gradient(90deg,var(--blue-light),var(--blue-mid),var(--blue-light));opacity:.5}
.how-step{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.how-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-light)}
.how-num{width:44px;height:44px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:800;color:#fff;margin:0 auto 1.25rem;box-shadow:var(--shadow-blue)}
.how-icon{font-size:1.6rem;margin-bottom:.875rem;display:block}
.how-title{font-size:.95rem;font-weight:700;margin-bottom:.5rem;color:var(--t1)}
.how-desc{font-size:.82rem;color:var(--t2);line-height:1.65}

/* ===== INTEGRATIONS ===== */
.integrations-section{padding:4rem 0;overflow:hidden;background:var(--bg-page);border-top:1px solid var(--border)}
.int-inner{max-width:1200px;margin:0 auto;padding:0 2rem 2.5rem;text-align:center}
.int-inner .section-sub{margin:0 auto}
.int-scroll-outer{overflow:hidden;position:relative}
.int-track{display:flex;gap:1rem;width:max-content;padding:.75rem;animation:tickerL 25s linear infinite}
.int-track:hover{animation-play-state:paused}
.int-logo{flex-shrink:0;display:flex;align-items:center;gap:.6rem;padding:.6rem 1.2rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);font-size:.82rem;font-weight:600;color:var(--t2);white-space:nowrap;transition:background .2s,border-color .2s,color .2s;box-shadow:var(--shadow-sm)}
.int-logo:hover{background:var(--blue-xlight);border-color:var(--blue-light);color:var(--blue)}
.int-logo span{font-size:1.1rem}
.int-fade-l{position:absolute;left:0;top:0;bottom:0;width:80px;background:linear-gradient(90deg,var(--bg-page),transparent);pointer-events:none;z-index:2}
.int-fade-r{position:absolute;right:0;top:0;bottom:0;width:80px;background:linear-gradient(-90deg,var(--bg-page),transparent);pointer-events:none;z-index:2}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);min-width:300px;max-width:360px;pointer-events:all;transform:translateX(120%);opacity:0;transition:transform .4s cubic-bezier(.17,.67,.35,1),opacity .4s ease}
.toast.show{transform:translateX(0);opacity:1}
.toast.hide{transform:translateX(120%);opacity:0}
.toast-icon{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:.8rem;font-weight:600;color:var(--t1);line-height:1.3}
.toast-sub{font-size:.73rem;color:var(--t3);margin-top:.18rem}
.toast-time{font-size:.7rem;color:var(--t4);white-space:nowrap;flex-shrink:0}

/* ===== STATS SECTION ===== */
.stats-section{padding:6rem 2rem;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);position:relative;overflow:hidden}
.stats-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,rgba(255,255,255,.09) 0%,transparent 60%),radial-gradient(ellipse at 75% 50%,rgba(255,255,255,.05) 0%,transparent 60%)}
.stats-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1;text-align:center}
.stats-label{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.stats-title{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:.5rem}
.stats-sub{font-size:1rem;color:rgba(255,255,255,.7);margin-bottom:3.5rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:2rem 1.5rem;backdrop-filter:blur(10px);transition:background .3s,transform .3s}
.stat-card:hover{background:rgba(255,255,255,.17);transform:translateY(-4px)}
.stat-icon{font-size:2rem;margin-bottom:1rem;display:block}
.stat-num{font-size:clamp(2.8rem,5vw,4rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem}
.stat-suffix{color:rgba(255,255,255,.65);font-size:.65em;font-weight:600}
.stat-desc{font-size:.85rem;color:rgba(255,255,255,.7);font-weight:500;margin-top:.5rem}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}

/* ===== CTA ===== */
.cta-section{padding:7rem 2rem;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blue-xlight) 0%,#dbeafe 100%);border-top:1px solid var(--border)}
.cta-inner{max-width:680px;margin:0 auto;position:relative;z-index:2}
.cta-section .section-title{font-size:clamp(2rem,4vw,3.2rem)}
.cta-section .section-sub{margin:0 auto 2.5rem;color:var(--t2)}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER ===== */
footer{background:#0f172a;color:#e2e8f0;padding:3.5rem 2rem 2rem}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
.footer-brand{display:flex;flex-direction:column;gap:1rem}
.footer-logo{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700;color:#fff}
.footer-tagline{font-size:.82rem;color:#94a3b8;line-height:1.65;max-width:240px}
.footer-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#64748b;margin-bottom:.875rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-col a{font-size:.83rem;color:#94a3b8;text-decoration:none;transition:color .2s}
.footer-col a:hover{color:#e2e8f0}
.footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.78rem;color:#475569}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:.78rem;color:#475569;text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:#94a3b8}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .feature-split{grid-template-columns:1fr;gap:3rem}
  .feature-split.rev{direction:ltr}
  .analytics-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .how-grid{grid-template-columns:1fr}
  .how-grid::before{display:none}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav{padding:0 1.25rem}
  .hero{padding:120px 1.25rem 0}
  .hero-title{font-size:2.4rem}
  .feature-section{padding:4rem 1.25rem}
}