/* Live dashboard inside the hero frame (replaces the old screenshot).
   Drawn at 1280x782 and scaled to the frame by js/live-dash.js. Every class starts with ld-
   so nothing here touches the rest of the site. */
.ld-screen { position: relative; width: 100%; aspect-ratio: 1280 / 782; overflow: hidden; background: #f5f6fa; }
.ld { --ld-blue: #1f6bff; --ld-green: #22a447; --ld-red: #e5484d; --ld-amber: #f2a20c; --ld-teal: #17a2b8; --ld-grey: #6c757d;
  --ld-line: rgba(15,17,22,.09); --ld-muted: #575d6e; --ld-grad: linear-gradient(120deg, #4da3ff 0%, #1f6bff 50%, #0b3fd1 100%);
  position: absolute; left: 0; top: 0; width: 1280px; height: 782px; transform-origin: 0 0; display: flex; background: #f5f6fa;
  font: 400 13px/1.35 'Inter', system-ui, sans-serif; color: #0f1116; text-align: left; letter-spacing: 0; }
.ld svg { display: block; }
.ld-side { width: 236px; flex: 0 0 auto; background: #161a22; color: rgba(255,255,255,.72); padding: 18px 0; }
.ld-logo { height: 40px; width: auto; margin: 0 0 20px 22px; display: block; }
.ld-nav { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 22px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ld-nav svg { width: 17px; height: 17px; opacity: .7; }
.ld-nav.top { background: rgba(255,255,255,.06); color: #fff; font-weight: 700; }
.ld-nav.sec { color: #7fb2ff; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: rgba(31,107,255,.12); margin-top: 6px; }
.ld-nav.sub { padding-left: 46px; height: 34px; font-size: 12.5px; }
.ld-nav.grp { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-top: 6px; }
.ld-main { flex: 1; padding: 0 28px; min-width: 0; }
.ld-head { height: 64px; display: flex; align-items: center; gap: 12px; }
.ld-burger { width: 40px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--ld-line); display: grid; place-items: center; }
.ld-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ld-title i { width: 13px; height: 13px; border-radius: 4px; background: var(--ld-grad); }
.ld-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.ld-icon { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--ld-line); display: grid; place-items: center; color: #5b6170; }
.ld-icon svg { width: 16px; height: 16px; }
.ld-badge { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ld-red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.ld-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ld-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ld-banner { position: relative; height: 156px; border-radius: 18px; overflow: hidden; color: #fff; padding: 34px 40px; display: flex; align-items: center;
  background: linear-gradient(120deg, #141a2a 0%, #18213a 55%, #1b2550 100%); }
.ld-banner::before { content: ''; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; border-radius: 50%; background: rgba(77,163,255,.08); }
.ld-banner::after { content: ''; position: absolute; right: 300px; bottom: -120px; width: 220px; height: 220px; border-radius: 50%; background: rgba(31,107,255,.10); }
.ld-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; background: rgba(77,163,255,.18); color: #8fbcff; }
.ld-banner h4 { font: 800 24px/1.2 'Inter', system-ui, sans-serif; margin: 10px 0 6px; letter-spacing: -.01em; color: #fff; }
.ld-banner p { color: rgba(255,255,255,.62); font-size: 13px; margin: 0; }
.ld-stats { margin-left: auto; display: flex; position: relative; z-index: 1; }
.ld-stats div { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.12); text-align: center; }
.ld-stats div:first-child { border-left: 0; }
.ld-stats small { display: block; font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.55); font-weight: 600; }
.ld-stats b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ld-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #5b6170; margin: 18px 0 10px; }
.ld-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ld-m { position: relative; background: #fff; border-radius: 14px; border-left: 4px solid var(--c); box-shadow: 0 1px 2px rgba(15,17,22,.05); overflow: hidden; height: 200px; }
.ld-mtop { padding: 14px 16px 8px; }
.ld-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.ld-ico svg { width: 20px; height: 20px; }
.ld-num { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--c); margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ld-lbl { font-size: 10.5px; line-height: 1.25; font-weight: 700; letter-spacing: .08em; color: #5b6170; margin-top: 2px; }
.ld-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; background: #fafbfc; padding: 10px 16px 0; }
.ld-tr { font-size: 11.5px; color: #6b7080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-tr b { font-weight: 600; } .ld-tr .ld-up { color: var(--ld-green); } .ld-tr .ld-dn { color: var(--ld-red); }
.ld-spark { position: absolute; left: 14px; bottom: 7px; width: calc(100% - 28px); height: 36px; overflow: visible; }
.ld-flash { position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 10%, transparent); opacity: 0; pointer-events: none; }
.ld-row2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.ld-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,17,22,.05); padding: 18px 22px; height: 268px; overflow: hidden; }
.ld-card h5 { font: 700 14px/1.3 'Inter', system-ui, sans-serif; margin: 0; color: #0f1116; }
.ld-sub { font-size: 11.5px; color: var(--ld-muted); margin-top: 2px; }
.ld-chart-head { display: flex; align-items: flex-start; }
.ld-tabs { margin-left: auto; display: flex; gap: 8px; }
.ld-tabs span { font-size: 11.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--ld-line); background: #fff; }
.ld-tabs span.on { background: var(--ld-blue); color: #fff; border-color: var(--ld-blue); }
.ld-chart { width: 100%; height: 186px; margin-top: 8px; overflow: visible; }
.ld-qa { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f1f2f6; }
.ld-qa:last-child { border-bottom: 0; }
.ld-q { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.ld-q svg { width: 18px; height: 18px; }
.ld-qa b { display: block; font-size: 13px; } .ld-qa small { font-size: 11.5px; color: var(--ld-muted); }
.ld-qa .ld-arrow { margin-left: auto; color: #9aa0ad; }

/* Soft blue glow (the one behind the footer logo), reused in other sections.
   The box clips it so it never widens the page; isolation keeps it above the
   section's background and under its content. */
.has-glow { isolation: isolate; }
.glowbox { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.glowbox i { position: absolute; width: 900px; height: 900px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(30,106,255,.28), transparent 62%); animation: glow-breathe 9s ease-in-out infinite alternate; }
.glowbox.soft i { background: radial-gradient(circle, rgba(30,106,255,.13), transparent 62%); }
.glowbox i.big { width: 1200px; height: 1200px; }
@keyframes glow-breathe { from { transform: translate(-50%, -50%) scale(1); opacity: .85; } to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
@media (max-width: 720px) { .glowbox i, .glowbox i.big { width: 560px; height: 560px; } }
@media (prefers-reduced-motion: reduce) { .glowbox i { animation: none; } }

/* SplitText masks clip letters that hang below the line (the g in "grow").
   Give every mask room underneath, and take the same back so nothing moves. */
.wd-mask, .ln-mask { padding-bottom: .22em; margin-bottom: -.22em; }
/* Gradient text only paints inside its box; a block line set at line-height 1 cuts off
   the g's tail. Extend the box downwards without moving anything. */
.cta-big h2 em { padding-bottom: .2em; margin-bottom: -.2em; }