:root {
  --bg: #f8f6f6; --sidebar: #f2f0f0; --card: #fff; --fg: #0a0a0a; --muted: #737373; --muted-bg: #f5f5f5;
  --line: #e5e5e5; --brand: #6302ce; --brand-soft: #f0e9fb; --brand-deep: #4b1099;
  --chat: #2e6ee0; --voice: #10b981; --text: #7c86ff; --email: #f59e0b; --forms: #c01b8e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); }
body { font-family: 'Geist', system-ui, sans-serif; color: var(--fg); -webkit-font-smoothing: antialiased; }
#stage { position: absolute; inset: 0; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(110px); }
#g1 { width: 900px; height: 900px; background: rgba(99,2,206,.10); }
#g2 { width: 800px; height: 800px; background: rgba(46,110,224,.08); }
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.disp { font-family: 'Raleway', sans-serif; font-weight: 800; letter-spacing: -0.025em; }

/* left text panels */
.tp { position: absolute; left: 92px; top: 0; bottom: 0; width: 500px; display: none; flex-direction: column; justify-content: center; }
.tp .num { font-family: 'Geist Mono'; font-size: 19px; letter-spacing: .14em; color: var(--brand); font-weight: 500; display: flex; align-items: center; gap: 14px; }
.tp .num .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 24px; }
.tp h2 { font-family: 'Raleway'; font-weight: 800; font-size: 66px; line-height: 1.02; letter-spacing: -0.03em; margin-top: 26px; }
.tp .tag { font-size: 27px; color: #525252; margin-top: 14px; font-weight: 500; }
.tp ul { list-style: none; margin-top: 40px; display: flex; flex-direction: column; gap: 17px; }
.tp li { font-size: 23px; line-height: 1.32; color: #262626; display: flex; gap: 14px; align-items: flex-start; }
.tp li .ck { flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 15px; margin-top: 1px; }

/* app window: logical 960x717 scaled 1.25 */
#win { position: absolute; left: 650px; top: 92px; width: 960px; height: 717px; transform-origin: 0 0; border-radius: 14px; overflow: hidden; background: var(--bg);
  box-shadow: 0 40px 90px -30px rgba(10,10,10,.45), 0 0 0 1px rgba(10,10,10,.10); }
.chrome { height: 30px; background: #ecebeb; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid #e0dede; }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #d6d3d3; }
.chrome i:nth-child(1) { background: #ff5f57; } .chrome i:nth-child(2) { background: #febc2e; } .chrome i:nth-child(3) { background: #28c840; }
.chrome .url { margin: 0 auto; transform: translateX(-30px); background: #fff; border-radius: 7px; padding: 3px 60px; font-size: 11px; color: #737373; }
.inner { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; display: flex; }
#sidebar { width: 190px; flex: none; background: var(--sidebar); border-right: 1px solid #e7e4e4; padding: 12px 10px; position: relative; font-size: 12.5px; }
#mainhost { flex: 1; position: relative; overflow: hidden; }
.ws { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
.ws img { width: 24px; height: 24px; border-radius: 7px; }
.ws b { font-size: 12.5px; font-weight: 600; display: block; } .ws span { font-size: 10.5px; color: var(--muted); }
.nav { position: relative; }
.nv { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 8px; color: #404040; position: relative; z-index: 1; white-space: nowrap; }
.nv .ic { font-size: 14.5px; color: #8a8a8a; }
.nv.sub { padding-left: 30px; height: 24px; font-size: 12px; color: #525252; }
.nv.sub .ic { font-size: 13px; }
.nv.on { color: var(--brand-deep); font-weight: 600; } .nv.on .ic { color: var(--brand); }
.nv .cnt { margin-left: auto; font-size: 10px; color: var(--muted); }
#hl { position: absolute; left: 0; right: 0; height: 24px; border-radius: 8px; background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); z-index: 0; }
.sfoot { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid #e5e2e2; padding-top: 10px; font-size: 11.5px; }

/* main screens */
.scr { position: absolute; inset: 0; padding: 22px 24px; display: none; flex-direction: column; }
.sh { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.sh h1 { font-family: 'Raleway'; font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.sh .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sh .sp { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.btn .ic { font-size: 13px; }
.btn.pri { background: #171717; color: #fff; border-color: #171717; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.btn.ghost { border-color: transparent; background: transparent; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 9px; white-space: nowrap; }
.p-mut { background: var(--muted-bg); color: var(--muted); }
.p-br { background: var(--brand-soft); color: var(--brand-deep); }
.p-gr { background: #d1fae5; color: #047857; }
.p-am { background: #fef3c7; color: #b45309; }
.p-rd { background: #fee2e2; color: #b91c1c; }
.search { display: flex; align-items: center; gap: 8px; height: 30px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 0 12px; font-size: 12px; color: #a3a3a3; }
.fp { border-radius: 999px; font-size: 11.5px; padding: 5px 11px; background: var(--muted-bg); color: #525252; font-weight: 500; white-space: nowrap; }
.fp.on { background: #171717; color: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.sel td { background: var(--brand-soft); }
.cb { width: 15px; height: 15px; border: 1.5px solid #c4c4c4; border-radius: 4px; display: inline-grid; place-items: center; color: #fff; font-size: 10px; background: #fff; }
.cb.on { background: var(--brand); border-color: var(--brand); }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.sub2 { font-size: 11px; color: var(--muted); }
.toast { position: absolute; right: 18px; bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; display: flex; gap: 9px; align-items: center; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.28); z-index: 30; }
.toast .ic { color: #10b981; font-size: 15px; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; background: #fff; border-left: 1px solid var(--line); box-shadow: -24px 0 50px -30px rgba(0,0,0,.35); z-index: 20; padding: 20px; }
.chip-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--fg); vertical-align: -0.15em; margin-left: 1px; }

#cursor { position: absolute; width: 34px; height: 34px; left: 0; top: 0; z-index: 100; filter: drop-shadow(0 5px 8px rgba(0,0,0,.3)); transform-origin: 5px 3px; }
#ripple { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 3px solid var(--brand); z-index: 99; opacity: 0; }
#overlays { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.ov { position: absolute; display: none; }
#progress { position: absolute; left: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #2e6ee0, #6302ce, #c01b8e); }

/* big center scenes */
.bigc { position: absolute; inset: 0; display: none; }
.agenda-tile { position: absolute; width: 400px; height: 150px; background: #fff; border-radius: 22px; border: 1px solid #e5e5e5; padding: 24px 26px; display: flex; gap: 18px; align-items: flex-start;
  box-shadow: 0 20px 40px -28px rgba(0,0,0,.35); }
.agenda-tile .ico { width: 52px; height: 52px; border-radius: 15px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 26px; flex: none; }
.agenda-tile .n { font-family: 'Geist Mono'; font-size: 14px; color: var(--muted); letter-spacing: .1em; }
.agenda-tile b { display: block; font-family: 'Raleway'; font-weight: 800; font-size: 27px; letter-spacing: -0.02em; margin-top: 4px; }
.agenda-tile span { display: block; font-size: 18px; color: #525252; margin-top: 4px; }

/* phones */
.phone { position: absolute; width: 340px; height: 700px; border-radius: 52px; background: #0b0b0c; padding: 12px; box-shadow: 0 50px 90px -30px rgba(0,0,0,.55); }
.phone .scrn { position: absolute; inset: 12px; border-radius: 41px; overflow: hidden; background: #fff; }
.phone .island { position: absolute; top: 22px; left: 50%; width: 104px; height: 30px; margin-left: -52px; border-radius: 20px; background: #000; z-index: 10; }

/* marketing-site highlighter (components/home/home.css .hp-marker) */
.hp-marker {
  --ink: 255, 233, 68;
  color: inherit; background-color: transparent;
  background-image:
    linear-gradient(100deg, rgba(var(--ink),0) 0%, rgba(var(--ink),.9) 3%, rgba(var(--ink),.55) 8%, rgba(var(--ink),.4) 50%, rgba(var(--ink),.55) 92%, rgba(var(--ink),.9) 97%, rgba(var(--ink),0) 100%),
    linear-gradient(-96deg, rgba(var(--ink),0) 0%, rgba(var(--ink),.7) 4%, rgba(var(--ink),.45) 12%, rgba(var(--ink),.35) 55%, rgba(var(--ink),.6) 94%, rgba(var(--ink),0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 62%, 94% 58%;
  background-position: 0% 78%, 100% 44%;
  border-radius: 0.6em 0.3em 0.5em 0.8em / 0.35em 0.65em 0.3em 0.55em;
  padding: 0.02em 0.18em 0.06em 0.16em; margin: 0 -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  mix-blend-mode: multiply;
}
.rep { position: absolute; left: 92px; width: 540px; bottom: 54px; }
.rep .lab { font-family: 'Geist Mono'; font-size: 16px; letter-spacing: .16em; color: #8b8899; }
.rep .row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.rep .br { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 600; color: #404040; }
.rep .br svg { height: 30px; width: auto; display: block; }
.rep .br .mkw { width: 42px; height: 32px; display: flex; align-items: center; justify-content: center; }
.rep .br .st { position: absolute; left: 0; top: 52%; height: 3px; background: #0051fb; border-radius: 2px; }

/* 9:16 social cut (video.html?v=1) */
html.vert, html.vert body { width: 1080px; height: 1920px; }
.vert .rep { left: 80px; width: 920px; bottom: 120px; }
.vert .rep .br { font-size: 30px; } .vert .rep .br svg { height: 34px; } .vert .rep .lab { font-size: 18px; }