:root{--bg:#061326;--panel:#0b213e;--line:rgba(97,161,255,.23);--muted:#a9bdd4;--white:#f7fbff;--cyan:#67ddff;--violet:#7562ff}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,#051225,#071a31 65%,#061326);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{text-decoration:none;color:inherit}
.demo-detail-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:rgba(4,14,30,.90);backdrop-filter:blur(16px);border-bottom:1px solid rgba(94,157,255,.17)}
.demo-detail-brand{display:flex;align-items:center;gap:10px}.demo-detail-brand img{width:44px;height:44px;border-radius:50%}.demo-detail-brand strong{display:block}.demo-detail-brand small{display:block;color:#63d9ff;font-weight:800;letter-spacing:.16em}
.demo-detail-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.demo-detail-nav a{padding:9px 11px;border-radius:12px;border:1px solid rgba(105,172,255,.18);background:rgba(255,255,255,.04);font-size:12px;font-weight:800}
.demo-detail-shell{width:min(1080px,calc(100% - 30px));margin:0 auto;padding:44px 0 70px}
.demo-detail-hero{display:grid;grid-template-columns:1fr .95fr;gap:24px;align-items:start}
.demo-detail-copy{padding:12px 0}.demo-detail-kicker{font-size:12px;font-weight:900;letter-spacing:.18em;color:#65d9ff}.demo-detail-copy h1{font-size:clamp(38px,6vw,66px);line-height:.96;margin:14px 0 16px;letter-spacing:-.045em}.demo-detail-copy p{font-size:18px;line-height:1.55;color:#b4c6db;margin:0;max-width:620px}.demo-detail-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.demo-detail-chips span{padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(101,171,255,.18);font-size:12px;font-weight:800}
.demo-real-card{padding:18px;border-radius:28px;background:linear-gradient(145deg,#0a1f3b,#102b50 60%,#232263);border:1px solid rgba(100,166,255,.23);box-shadow:0 24px 70px rgba(0,0,0,.24)}
.demo-window{background:#f8fbff;border-radius:24px;padding:22px;color:#10213c;box-shadow:0 18px 50px rgba(0,0,0,.20)}
.demo-window-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #dae4ef}.demo-window-dots{display:flex;gap:6px}.demo-window-dots i{width:9px;height:9px;border-radius:50%;background:#c9d5e3}.demo-final{padding:7px 10px;border-radius:999px;background:#e5f7eb;color:#169357;font-size:11px;font-weight:900}
.demo-window small{display:block;margin-top:18px;color:#71839c;font-size:11px;font-weight:900;letter-spacing:.13em}.demo-window h2{font-size:30px;line-height:1.02;margin:9px 0;color:#10213c}.demo-window p{font-size:15px;line-height:1.5;color:#52637b;margin:0}.demo-window-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.demo-window-grid div{padding:13px 10px;border-radius:14px;background:#edf3fa}.demo-window-grid b{display:block;font-size:20px}.demo-window-grid span{font-size:11px;color:#6d7d92}
.demo-side-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.demo-side-box{padding:17px;border-radius:20px;border:1px solid rgba(99,162,255,.18);background:rgba(255,255,255,.045)}.demo-side-box strong{display:block;font-size:15px;margin-bottom:6px}.demo-side-box p{margin:0;color:#a9bdd4;font-size:13px;line-height:1.45}
.demo-detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.demo-detail-actions a{padding:14px 18px;border-radius:16px;font-weight:900}.demo-primary{background:linear-gradient(135deg,#168fff,#743aff);box-shadow:0 14px 34px rgba(64,82,255,.22)}.demo-secondary{border:1px solid rgba(102,171,255,.25);background:rgba(255,255,255,.04)}
.demo-detail-footer{padding:22px 18px 36px;color:#8ca4bf;text-align:center;font-size:12px}
@media(max-width:780px){.demo-detail-hero{grid-template-columns:1fr}.demo-detail-shell{padding-top:28px}.demo-detail-copy h1{font-size:42px}.demo-detail-copy p{font-size:16px}.demo-side-grid{grid-template-columns:1fr}.demo-detail-nav a:nth-child(2){display:none}.demo-window{padding:18px}.demo-window h2{font-size:26px}.demo-window-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.demo-detail-header{padding:10px 12px}.demo-detail-brand strong{font-size:14px}.demo-detail-brand small{font-size:9px}.demo-detail-nav a{padding:8px 9px;font-size:11px}.demo-detail-shell{width:min(100% - 22px,1080px)}.demo-detail-copy h1{font-size:38px}.demo-window-grid{gap:7px}.demo-window-grid div{padding:11px 7px}.demo-detail-actions a{width:100%;text-align:center}}


/* V21.6 — refined demo funnel */
.demo-detail-actions{align-items:center}
.demo-detail-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:56px;white-space:nowrap}
.demo-primary{min-width:290px}
.demo-plan{border:1px solid rgba(105,172,255,.28);background:rgba(255,255,255,.05);color:#eef6ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.demo-plan:hover,.demo-secondary:hover{background:rgba(255,255,255,.08)}
.demo-funnel-note{margin:12px 0 0;color:#90a7c0 !important;font-size:13px !important;line-height:1.5;max-width:760px}
@media(max-width:780px){
  .demo-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .demo-primary{grid-column:1 / -1;min-width:0}
  .demo-detail-actions a{min-height:54px;padding:13px 16px}
  .demo-funnel-note{font-size:12px !important}
}
@media(max-width:430px){
  .demo-detail-actions{grid-template-columns:1fr}
  .demo-detail-actions a{width:100%}
  .demo-funnel-note{text-align:left}
}


/* V21.7 — direct pricing button in demonstrations */
.demo-price{border:1px solid rgba(54,176,255,.36);background:linear-gradient(135deg,rgba(25,107,189,.24),rgba(89,53,193,.20));color:#dff5ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.demo-price:hover{background:linear-gradient(135deg,rgba(25,107,189,.34),rgba(89,53,193,.30))}
@media(max-width:780px){.demo-price{min-height:54px}}

.demo-detail-footer a{color:#7fd8ff;text-decoration:none;font-weight:800}.demo-detail-footer a:hover{text-decoration:underline}