/* =========================================================
   ASG public live proof demo v2.0 — complete replacement
========================================================= */
.asg-live-demo {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 126px) 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(47,107,255,.18), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(28,196,151,.13), transparent 30rem),
    linear-gradient(135deg,#07162f 0%,#0a2142 52%,#07172f 100%);
  color: #f6f9ff;
}
.asg-live-demo::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(157,188,231,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(157,188,231,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.35));
}
.asg-live-demo .asg-wrap { position:relative; z-index:1; }
.asg-demo-shell {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(580px,1.08fr);
  gap:clamp(28px,4vw,58px);
  align-items:start;
}
.asg-demo-story { position:sticky; top:92px; }
.asg-demo-story .asg-section-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  padding:9px 12px;
  border:1px solid rgba(92,216,204,.28);
  border-radius:999px;
  background:rgba(24,165,146,.1);
  color:#80ead8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.asg-demo-story h2 {
  max-width:780px;
  margin:20px 0 18px;
  color:#fff;
  font-size:clamp(42px,4.4vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}
.asg-demo-lead {
  max-width:760px;
  margin:0;
  color:#c9d8ec;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.58;
}
.asg-demo-outcomes {
  display:grid;
  gap:10px;
  margin:28px 0 22px;
}
.asg-demo-outcomes article {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:13px;
  align-items:center;
  padding:14px 15px;
  border:1px solid rgba(141,177,222,.17);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(8px);
}
.asg-demo-outcomes i {
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(145deg,rgba(50,115,255,.25),rgba(31,199,160,.15));color:#87b2ff;
}
.asg-demo-outcomes span { display:grid; gap:4px; }
.asg-demo-outcomes strong { color:#fff; font-size:15px; }
.asg-demo-outcomes small { color:#a9bdd7; line-height:1.45; }
.asg-live-source-tabs,.asg-live-window-buttons,.asg-live-actions { display:flex; flex-wrap:wrap; gap:9px; }
.asg-live-source-tabs { margin-top:18px; }
.asg-live-window-buttons { margin-top:10px; }
.asg-live-actions { margin-top:18px; }
.asg-live-source-tabs button,.asg-live-window-buttons button {
  min-height:40px;padding:0 14px;border:1px solid rgba(152,182,221,.32);border-radius:999px;
  background:rgba(255,255,255,.07);color:#d7e4f5;font:inherit;font-size:12px;font-weight:850;cursor:pointer;
  transition:.18s ease;
}
.asg-live-source-tabs button { min-height:46px; border-radius:14px; }
.asg-live-source-tabs button i { margin-right:7px; }
.asg-live-source-tabs button:hover,.asg-live-window-buttons button:hover { transform:translateY(-1px); border-color:rgba(115,165,255,.7); }
.asg-live-source-tabs button.active,.asg-live-window-buttons button.active {
  color:#07162f;background:#fff;border-color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.2);
}
.asg-demo-conversion-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin-top:22px;
  padding:18px;
  border:1px solid rgba(97,226,190,.25);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(20,164,127,.14),rgba(34,104,231,.12));
}
.asg-demo-conversion-card div { display:grid; gap:6px; }
.asg-demo-conversion-card span { color:#71dfc5;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.asg-demo-conversion-card strong { color:#fff;font-size:17px;line-height:1.35; }
.asg-demo-conversion-card small { color:#afc1d8;line-height:1.48; }
.asg-demo-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.asg-demo-flow article { display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px;border:1px solid rgba(143,177,217,.15);border-radius:16px;background:rgba(255,255,255,.035); }
.asg-demo-flow b { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(47,107,255,.18);color:#8eb3ff;font-size:11px; }
.asg-demo-flow span { display:grid;gap:3px; }
.asg-demo-flow strong { color:#f9fbff;font-size:12px; }
.asg-demo-flow small { color:#9eb2ca;font-size:10px;line-height:1.38; }
.asg-live-demo .asg-btn { white-space:nowrap; }
.asg-live-demo-cockpit {
  position:relative;
  overflow:hidden;
  padding:16px;
  border:1px solid rgba(102,167,244,.24);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(10,31,65,.96),rgba(6,22,47,.98));
  box-shadow:0 32px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
}
.asg-live-demo-cockpit::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(47,107,255,.16),transparent 28rem); }
.asg-live-demo-cockpit>* { position:relative;z-index:1; }
.asg-live-top { display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:2px 2px 12px;border-bottom:1px solid rgba(151,181,218,.16); }
.asg-live-top>div { display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center; }
.asg-live-top strong { color:#fff;font-size:14px; }
.asg-live-top small { grid-column:2;color:#9eb4d0;font-size:10px; }
.asg-live-dot { width:10px;height:10px;border-radius:50%;background:#39d39d;box-shadow:0 0 0 6px rgba(57,211,157,.12),0 0 16px rgba(57,211,157,.7); }
.asg-live-badge { display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:999px;background:#fff3da;color:#9b5d00;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.asg-live-health-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.asg-live-health-grid article { min-height:86px;display:grid;align-content:start;gap:4px;padding:10px;border:1px solid rgba(151,181,218,.18);border-radius:15px;background:rgba(255,255,255,.05); }
.asg-live-health-grid article i { width:27px;height:27px;display:grid;place-items:center;border-radius:10px;background:rgba(57,194,222,.12);color:#68daf0;font-size:11px; }
.asg-live-health-grid article span,.asg-live-demo-metrics span,.asg-demo-rate-grid span { color:#8298b6;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }
.asg-live-health-grid article strong { color:#fff;font-size:13px; }
.asg-live-health-grid article small { color:#8094ae;font-size:8px;line-height:1.3; }
.asg-live-health-grid article.is-ok { border-color:rgba(47,210,150,.28);background:linear-gradient(180deg,rgba(35,181,131,.1),rgba(255,255,255,.035)); }
.asg-live-health-grid article.is-ok strong { color:#55d8a4; }
.asg-live-health-grid article.is-warn { border-color:rgba(244,166,54,.3);background:linear-gradient(180deg,rgba(244,166,54,.1),rgba(255,255,255,.035)); }
.asg-live-health-grid article.is-warn strong { color:#f1b353; }
.asg-demo-kpi-head,.asg-live-window-head,.asg-live-feed-head { display:flex;justify-content:space-between;gap:12px;align-items:center; }
.asg-demo-kpi-head { margin:12px 2px 7px; }
.asg-demo-kpi-head span,.asg-live-window-head span,.asg-live-feed-head span { color:#7fa0c7;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }
.asg-demo-kpi-head strong,.asg-live-window-head strong,.asg-live-feed-head strong { color:#eaf2ff;font-size:10px; }
.asg-live-demo-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; }
.asg-live-demo-metrics article { min-height:92px;display:grid;align-content:space-between;gap:5px;padding:11px;border:1px solid rgba(151,181,218,.18);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); }
.asg-live-demo-metrics article:nth-child(1){background:linear-gradient(180deg,rgba(47,107,255,.18),rgba(255,255,255,.035));}
.asg-live-demo-metrics article:nth-child(2){background:linear-gradient(180deg,rgba(36,184,146,.17),rgba(255,255,255,.035));}
.asg-live-demo-metrics article:nth-child(3){background:linear-gradient(180deg,rgba(57,211,157,.13),rgba(255,255,255,.035));}
.asg-live-demo-metrics article:nth-child(4){background:linear-gradient(180deg,rgba(154,98,255,.17),rgba(255,255,255,.035));}
.asg-live-demo-metrics article.checkout-metric{border-color:rgba(154,98,255,.32);background:linear-gradient(180deg,rgba(154,98,255,.19),rgba(255,255,255,.035));}
.asg-live-demo-metrics article.secondary { grid-column:span 2;min-height:72px; }
.asg-live-demo-metrics article.secondary:last-child { grid-column:span 3; }
.asg-live-demo-metrics strong { color:#fff;font-size:clamp(21px,1.6vw,29px);letter-spacing:-.04em; }
.asg-live-demo-metrics small { color:#8fa4bf;font-size:9px;line-height:1.35; }
.asg-live-demo-chart-card { margin-top:10px;padding:12px;border:1px solid rgba(151,181,218,.18);border-radius:18px;background:rgba(255,255,255,.045); }
.asg-live-demo-chart { min-height:230px;margin-top:9px;border:1px solid rgba(151,181,218,.18);border-radius:14px;overflow:hidden;background:linear-gradient(rgba(113,150,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(113,150,200,.08) 1px,transparent 1px),linear-gradient(180deg,#f8fbff,#edf4ff);background-size:34px 34px,34px 34px,auto; }
.asg-live-demo-chart svg { display:block;width:100%;height:230px; }
.asg-live-demo-chart .grid line { stroke:rgba(93,122,165,.25);stroke-width:.8; }
.asg-live-demo-chart .line { fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; }
.asg-live-demo-chart .dot { stroke:#fff;stroke-width:2; }
.asg-live-demo-chart .axis-labels text { fill:#65748d;font-size:10px;font-weight:700; }
.asg-demo-empty { min-height:230px;display:grid;place-items:center;align-content:center;gap:7px;color:#60718c;text-align:center; }
.asg-demo-empty i { font-size:28px;color:#2f6bff; }
.asg-demo-empty small { color:#7a89a0; }
.asg-live-demo-legend { display:flex;flex-wrap:wrap;gap:7px;margin-top:9px; }
.asg-live-demo-legend span { display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(151,181,218,.2);border-radius:999px;background:rgba(255,255,255,.06);color:#b9c9dd;font-size:9px;font-weight:800; }
.asg-live-demo-legend i { width:8px;height:8px;border-radius:50%; }
.asg-live-demo-legend b { color:#fff; }
.asg-demo-rate-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px; }
.asg-demo-rate-grid article { min-height:92px;display:grid;align-content:space-between;gap:5px;padding:10px;border:1px solid rgba(151,181,218,.16);border-radius:15px;background:rgba(255,255,255,.04); }
.asg-demo-rate-grid strong { color:#fff;font-size:19px; }
.asg-demo-rate-grid small { color:#8da2bc;font-size:9px; }
.asg-mini-meter { height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1); }
.asg-mini-meter i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f6bff,#55d5ee);transition:width .35s ease; }
.asg-live-feed { margin-top:10px;padding:11px;border:1px solid rgba(151,181,218,.16);border-radius:17px;background:rgba(255,255,255,.035); }
.asg-live-feed-scroll { display:grid;gap:7px;max-height:190px;overflow:auto;margin-top:8px;padding-right:3px; }
.asg-live-feed-scroll article { display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;padding:9px;border-radius:12px;background:rgba(3,15,34,.42); }
.asg-live-feed-scroll article>i { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(47,107,255,.14);color:#7ca5ff;font-size:11px; }
.asg-live-feed-scroll article span { display:grid;gap:3px; }
.asg-live-feed-scroll strong { color:#edf4ff;font-size:10px; }
.asg-live-feed-scroll small { color:#8fa4bf;font-size:9px;line-height:1.35; }
.asg-demo-skeleton { min-height:230px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:asgDemoShimmer 1.35s linear infinite; }
@keyframes asgDemoShimmer { from{transform:translateX(-100%)}to{transform:translateX(100%)} }
.asg-live-demo.is-loading #asgLiveRefreshBtn i { animation:asgDemoSpin .8s linear infinite; }
@keyframes asgDemoSpin { to{transform:rotate(360deg)} }
.asg-live-demo.is-error .asg-live-badge { background:#ffe9db;color:#a34816; }
@media(max-width:1260px){.asg-demo-shell{grid-template-columns:1fr}.asg-demo-story{position:relative;top:auto}.asg-live-demo-cockpit{max-width:980px}.asg-demo-story h2{max-width:980px}}
@media(max-width:760px){.asg-live-demo{padding:68px 0}.asg-demo-story h2{font-size:42px}.asg-demo-conversion-card{grid-template-columns:1fr}.asg-demo-flow,.asg-live-health-grid,.asg-live-demo-metrics,.asg-demo-rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asg-live-demo-metrics article.secondary,.asg-live-demo-metrics article.secondary:last-child{grid-column:span 1}.asg-live-demo-cockpit{padding:11px;border-radius:20px}.asg-live-top{display:grid}.asg-live-demo-chart svg{height:210px}.asg-live-demo-chart{min-height:210px}}
@media(max-width:500px){.asg-demo-flow,.asg-live-health-grid,.asg-live-demo-metrics,.asg-demo-rate-grid{grid-template-columns:1fr}.asg-demo-outcomes article{grid-template-columns:38px 1fr}.asg-demo-outcomes i{width:38px;height:38px}.asg-live-source-tabs button{flex:1 1 100%}}