/* ===== THEME (swap brand colours here) ===== */
:root{
  --brand:#2562e7;      /* primary brand colour */
  --brand2:#1a4ec4;     /* hover / darker */
  --brandS:#eaf1fe;     /* soft tint */
  --ink:#1c2230;        /* headings, dark sections */
  --tx:#4a5568;         /* body text */
  --mu:#8a94a6;         /* muted */
  --ln:#e6eaf2;         /* lines */
  --bg:#f6f8fc;         /* alt background */
  --wa:#25d366;         /* WhatsApp green */
  --waBg:#e9f5ee;       /* chat wallpaper */
  --ok:#16a34a;--warn:#f59e0b;--bad:#ef4444;
  --r:20px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--tx);font-size:16px;line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.1;font-weight:800}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.w{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:100px 0}.alt{background:var(--bg)}
.ey{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.h2{font-size:clamp(30px,3.6vw,46px);margin-top:12px}.h2 em{font-style:normal;background:linear-gradient(90deg,var(--brand),#5b8dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd{max-width:700px;margin:0 auto 52px;text-align:center}.hd p{font-size:18px;margin:16px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:14px;font-weight:700;font-size:15.5px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn svg{width:18px;height:18px}.btn:hover{transform:translateY(-2px)}
.bp{background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(37,98,231,.3)}.bp:hover{background:var(--brand2)}
.bl{background:#fff;color:var(--ink);border:1.5px solid var(--ln)}.bl:hover{border-color:var(--ink)}
.bk{background:var(--ink);color:#fff}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--ln);font-size:13.5px;font-weight:600;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(37,211,102,.2);animation:pu 2s infinite}@keyframes pu{50%{box-shadow:0 0 0 7px rgba(37,211,102,.05)}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
/* mockup switch */
.mk{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:99;display:flex;gap:4px;background:#fff;border:1px solid var(--ln);border-radius:999px;padding:4px;box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:13px}
.mk span{padding:8px 12px;color:var(--mu);font-weight:600}.mk button{border:0;background:none;padding:8px 14px;border-radius:999px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}.mk button.on{background:var(--ink);color:#fff}
body.mob{background:#d6dbe6}body.mob .site{max-width:390px;margin:24px auto 90px;box-shadow:0 30px 80px rgba(0,0,0,.25);border-radius:28px;overflow:hidden;background:#fff}

/* ===== HEADER ===== */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.sc{border-color:var(--ln)}
.top .w{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.03em}
.logo i{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#5b8dff);display:grid;place-items:center;color:#fff}.logo i svg{width:22px;height:22px}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex:1}
.nav>li{position:relative}.nav>li>a{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink)}.nav>li>a:hover{background:var(--bg)}
.nav>li>a svg{width:14px;height:14px;transition:transform .2s}.nav>li:hover>a svg{transform:rotate(180deg)}
.mm{position:absolute;top:100%;left:-12px;min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;background:#fff;border:1px solid var(--ln);border-radius:20px;box-shadow:0 30px 70px rgba(28,34,48,.14);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s}
.nav>li:hover .mm{opacity:1;visibility:visible;transform:none}
.mm a{display:flex;gap:12px;padding:12px;border-radius:14px}.mm a:hover{background:var(--bg)}
.mm i{flex:0 0 40px;height:40px;border-radius:12px;background:var(--brandS);color:var(--brand);display:grid;place-items:center}.mm i svg{width:20px;height:20px}
.mm b{display:block;color:var(--ink);font-size:14.5px}.mm small{display:block;color:var(--mu);font-size:13px;line-height:1.4}
.mm .feat{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px;margin-top:4px}.mm .feat b{color:#fff}.mm .feat small{color:rgba(255,255,255,.7)}
.hr{display:flex;align-items:center;gap:10px}
.reg{display:flex;background:var(--bg);border-radius:10px;padding:3px}.reg button{border:0;background:none;padding:6px 10px;border-radius:8px;font:inherit;font-size:13px;font-weight:700;color:var(--mu);cursor:pointer}.reg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.login{font-weight:600;font-size:15px;color:var(--ink);padding:10px}
.top .btn{padding:11px 18px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--ln);background:#fff;place-items:center;margin-left:auto}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:70px 0 90px;background:radial-gradient(900px 500px at 85% 0%,rgba(124,92,255,.12),transparent 60%),radial-gradient(700px 400px at 10% 10%,rgba(37,98,231,.10),transparent 60%)}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.2vw,66px);margin:22px 0 20px}
.hero h1 span{background:linear-gradient(90deg,var(--brand),#5b8dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.s{font-size:19px;max-width:560px;margin:0}
.try{display:flex;gap:8px;margin-top:30px;background:#fff;border:1.5px solid var(--ln);border-radius:18px;padding:7px;max-width:560px;box-shadow:0 18px 40px rgba(28,34,48,.08)}
.try input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15.5px;padding:10px 12px;color:var(--ink);background:transparent}
.try .btn{padding:13px 20px}
.under{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:14px;color:var(--mu)}.under span{display:flex;align-items:center;gap:6px}.under svg{width:16px;height:16px;color:var(--ok)}
.alt-cta{margin-top:14px;font-size:14.5px}.alt-cta a{color:var(--brand);font-weight:700}

/* phone */
.phone{position:relative;width:340px;height:640px;margin:0 auto;border-radius:48px;border:11px solid #0b1530;background:var(--waBg);overflow:hidden;box-shadow:0 50px 100px rgba(28,34,48,.28)}
.phone .nt{position:absolute;top:8px;left:50%;width:100px;height:26px;margin-left:-50px;border-radius:20px;background:#0b1530;z-index:5}
.wa-top{background:#075e54;color:#fff;padding:44px 14px 12px;display:flex;align-items:center;gap:10px}
.wa-top .av{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--brand);font-weight:800;font-size:13px}
.wa-top b{display:block;font-size:15px}.wa-top small{font-size:12px;opacity:.8}
.wa-body{padding:14px 12px;display:flex;flex-direction:column;gap:8px;height:calc(100% - 150px);overflow:hidden}
.msg{max-width:82%;padding:8px 11px 6px;border-radius:12px;font-size:13.5px;line-height:1.4;color:#111;position:relative;animation:pop .35s ease both;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg small{display:block;text-align:right;font-size:10.5px;color:#7b8794;margin-top:2px}
.msg.in{background:#fff;align-self:flex-start;border-top-left-radius:4px}
.msg.out{background:#d9fdd3;align-self:flex-end;border-top-right-radius:4px}
.msg.sys{align-self:center;background:#fff7d6;color:#7a5b00;font-size:12px;font-weight:600;border-radius:8px;text-align:center}
.msg.agent{background:#dbe7ff;align-self:flex-end;border-top-right-radius:4px}
.msg .tag{display:block;font-size:10.5px;font-weight:700;color:var(--brand);margin-bottom:2px}
.typing{align-self:flex-end;background:#d9fdd3;border-radius:12px;padding:10px 12px;display:flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:#6b7c6b;animation:bl 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.3;transform:translateY(-2px)}}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.wa-in{position:absolute;left:10px;right:10px;bottom:12px;background:#fff;border-radius:22px;padding:11px 14px;font-size:13px;color:#9aa;display:flex;justify-content:space-between}
.ptabs{display:flex;gap:6px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.ptabs button{border:1.5px solid var(--ln);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}.ptabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.float{position:absolute;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(28,34,48,.14);font-size:13px;font-weight:700;color:var(--ink);display:flex;gap:10px;align-items:center;animation:fl 5s ease-in-out infinite;z-index:3}
.float i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}.float i svg{width:16px;height:16px}.float small{display:block;font-weight:500;color:var(--mu);font-size:12px}
.f1{left:-70px;top:250px}.f2{right:-24px;bottom:150px;animation-delay:-2.5s}
@keyframes fl{50%{transform:translateY(-8px)}}

/* trust strip */
.strip{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.strip .w{display:grid;grid-template-columns:repeat(4,1fr)}
.st{display:flex;gap:12px;align-items:center;padding:24px 18px;border-right:1px solid var(--ln)}.st:last-child{border-right:0}
.st i{flex:0 0 44px;height:44px;border-radius:12px;background:var(--brandS);color:var(--brand);display:grid;place-items:center}.st i svg{width:22px;height:22px}
.st b{display:block;color:var(--ink);font-size:15.5px}.st small{color:var(--mu);font-size:13px}

/* playground */
.pg{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center;background:var(--ink);border-radius:32px;padding:56px;color:rgba(255,255,255,.75);position:relative;overflow:hidden}
.pg:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.45),transparent 65%)}
.pg h2{color:#fff}.pg .ey{color:#9fb7ff}
.steps3{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;position:relative}
.steps3 li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:all .3s}
.steps3 li i{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;color:#fff}
.steps3 li.on{background:rgba(37,98,231,.18);border-color:rgba(37,98,231,.5)}.steps3 li.done i{background:var(--wa);border-color:var(--wa)}
.pg .try{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);box-shadow:none}.pg .try input{color:#fff}.pg .try input::placeholder{color:rgba(255,255,255,.5)}
.pg .phone{width:320px;height:560px;position:relative}
.sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}.sugg button{border:0;background:#fff;border-radius:999px;padding:7px 11px;font:inherit;font-size:12px;font-weight:600;color:#075e54;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.gate{position:absolute;inset:auto 10px 12px 10px;background:#fff;border-radius:18px;padding:14px;box-shadow:0 -10px 30px rgba(0,0,0,.15);display:none;color:var(--tx);z-index:4}.gate.on{display:block;animation:pop .4s}
.gate b{display:block;color:var(--ink);font-size:14.5px}.gate p{margin:4px 0 10px;font-size:12.5px}
.gate form{display:flex;gap:6px}.gate input{flex:1;min-width:0;border:1.5px solid var(--ln);border-radius:10px;padding:9px 10px;font:inherit;font-size:13px}.gate .btn{padding:9px 12px;font-size:13px}

/* how it works */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--ln);border-radius:24px;padding:30px;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(28,34,48,.08)}
.card .n{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:18px}
.card h3{font-size:20px;margin-bottom:8px}.card p{margin:0;font-size:15.5px}
.mini{margin-top:18px;border-radius:16px;background:var(--bg);padding:14px;font-size:13px}
.mini .row{display:flex;align-items:center;gap:8px;padding:6px 0}.mini .row b{color:var(--ink);font-size:13px}.mini .ok{margin-left:auto;color:var(--ok);font-weight:700;font-size:12px}
.mini .bar{height:8px;border-radius:8px;background:#e3e8f3;overflow:hidden;margin-top:6px}.mini .bar i{display:block;height:100%;width:78%;background:var(--brand);border-radius:8px}

/* learning loop */
.loop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lsteps{display:grid;gap:10px}
.lsteps button{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:16px 18px;border-radius:16px;border:1.5px solid var(--ln);background:#fff;font:inherit;cursor:pointer;transition:all .25s}
.lsteps button i{flex:0 0 34px;height:34px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--ink);transition:all .25s}
.lsteps button b{display:block;color:var(--ink);font-size:15.5px}.lsteps button small{color:var(--mu);font-size:13.5px}
.lsteps button.on{border-color:var(--brand);box-shadow:0 14px 30px rgba(37,98,231,.12)}.lsteps button.on i{background:var(--brand);color:#fff}
.lviz{position:relative;aspect-ratio:1;max-width:460px;margin:0 auto;width:100%}
.ring{position:absolute;inset:8%;border-radius:50%;border:2px dashed #c9d4ee;animation:spin 40s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.node{position:absolute;width:118px;margin:-50px 0 0 -59px;text-align:center;transition:transform .3s}
.node i{width:64px;height:64px;margin:0 auto 8px;border-radius:20px;background:#fff;border:1.5px solid var(--ln);display:grid;place-items:center;color:var(--ink);box-shadow:0 10px 24px rgba(28,34,48,.08);transition:all .3s}.node i svg{width:28px;height:28px}
.node b{font-size:12.5px;color:var(--ink)}
.node.on i{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.12);box-shadow:0 0 0 10px rgba(37,98,231,.15)}
.lcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;text-align:center;background:#fff;border-radius:24px;padding:20px;box-shadow:0 20px 50px rgba(28,34,48,.1);border:1px solid var(--ln)}
.lcenter b{display:block;font-size:34px;color:var(--brand);font-weight:800}.lcenter small{font-size:13px;color:var(--mu)}

/* before after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bacol{border-radius:28px;padding:32px;position:relative}.bacol.b{background:#fff5f5;border:1px solid #fde2e2}.bacol.a{background:#effaf3;border:1px solid #cdeedb}
.bacol h3{font-size:22px;margin-bottom:6px}.bacol .lb{display:inline-block;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;margin-bottom:12px}.b .lb{background:#fee2e2;color:#b91c1c}.a .lb{background:#dcfce7;color:#15803d}
.tl{margin-top:18px;display:grid;gap:10px}.tl div{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:14px;padding:12px 14px;font-size:14.5px}.tl time{flex:0 0 52px;font-weight:800;color:var(--ink);font-size:13px}
.res{margin-top:16px;font-weight:800;color:var(--ink)}

/* dashboard */
.dash{border-radius:28px;border:1px solid var(--ln);background:#fff;box-shadow:0 40px 90px rgba(28,34,48,.12);overflow:hidden}
.dbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--ln)}.dbar i{width:11px;height:11px;border-radius:50%;background:#f87171}.dbar i:nth-child(2){background:#fbbf24}.dbar i:nth-child(3){background:#34d399}
.dbar span{margin-left:12px;font-size:12.5px;color:var(--mu);background:#fff;border:1px solid var(--ln);border-radius:8px;padding:4px 12px}
.dwrap{display:grid;grid-template-columns:200px 1fr}
.dside{border-right:1px solid var(--ln);padding:16px 12px;display:grid;gap:4px;align-content:start}
.dside button{display:flex;gap:10px;align-items:center;border:0;background:none;padding:10px 12px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--tx);cursor:pointer;text-align:left}.dside button svg{width:18px;height:18px}
.dside button.on{background:var(--brandS);color:var(--brand)}
.dside .cnt{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px}
.dmain{padding:22px;min-height:470px}.dpane{display:none}.dpane.on{display:block;animation:pop .35s}
.dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dh h4{font-size:18px}.dh small{color:var(--mu);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--ln);border-radius:14px;padding:14px}.kpi small{display:block;color:var(--mu);font-size:12.5px}.kpi b{display:block;font-size:26px;color:var(--ink);margin:4px 0 2px}.kpi em{font-style:normal;font-size:12px;font-weight:700;color:var(--ok)}
.drow{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}
.dbox{border:1px solid var(--ln);border-radius:14px;padding:14px}.dbox h5{margin:0 0 10px;font-size:14px;color:var(--ink)}
.chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:6px}
.chart div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.chart i{display:block;border-radius:5px 5px 0 0;transition:height 1s cubic-bezier(.2,.7,.2,1)}.chart .x{font-size:11px;color:var(--mu);text-align:center;margin-top:4px}
.leg{display:flex;gap:14px;font-size:12px;margin-top:8px}.leg span{display:flex;align-items:center;gap:6px}.leg i{width:10px;height:10px;border-radius:3px}
.topics div{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--ln)}.topics div:last-child{border:0}.topics b{color:var(--ink);font-weight:600}
.esc{display:grid;gap:8px}.esc div{display:flex;align-items:center;gap:12px;border:1px solid var(--ln);border-radius:12px;padding:12px}.esc .av{width:34px;height:34px;border-radius:50%;background:var(--brandS);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px}
.esc b{display:block;color:var(--ink);font-size:14px}.esc small{color:var(--mu);font-size:12.5px}.esc .w8{margin-left:auto;font-size:12px;font-weight:700;color:var(--warn)}
.esc .btn{padding:8px 12px;font-size:13px}
.teach div{display:flex;align-items:center;gap:12px;border:1px solid var(--ln);border-radius:12px;padding:12px;margin-bottom:8px}.teach b{color:var(--ink);font-size:14px;display:block}.teach small{color:var(--mu);font-size:12.5px}
.teach .btn{margin-left:auto;padding:8px 12px;font-size:13px}.teach .done{background:var(--ok)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(28,34,48,.08)}
.calc .ci{padding:40px}.calc .co{padding:40px;background:var(--ink);color:rgba(255,255,255,.75);display:flex;flex-direction:column}
.fld{margin-bottom:24px}.fld label{display:flex;justify-content:space-between;font-weight:700;color:var(--ink);font-size:15px;margin-bottom:10px}.fld output{color:var(--brand)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--brand) var(--p,50%),var(--ln) var(--p,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.co .lb{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#9fb7ff;font-weight:700}
.big{font-size:clamp(42px,5vw,60px);color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1;margin:10px 0}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.kv div{background:rgba(255,255,255,.06);border-radius:14px;padding:14px}.kv b{display:block;color:#fff;font-size:22px}.kv span{font-size:13px}
.co .btn{align-self:flex-start;margin-top:auto}

/* industries */
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ic{position:relative;border-radius:24px;padding:26px;background:#fff;border:1px solid var(--ln);transition:all .25s;overflow:hidden}.ic:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 24px 50px rgba(28,34,48,.08)}
.ic .ii{width:48px;height:48px;border-radius:14px;background:var(--brandS);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}.ic .ii svg{width:24px;height:24px}
.ic h3{font-size:19px;margin-bottom:6px}.ic p{margin:0 0 14px;font-size:14.5px}
.q{display:inline-block;background:var(--waBg);border-radius:10px 10px 10px 3px;padding:7px 10px;font-size:12.5px;color:#111;margin:0 6px 6px 0}
.ic .go{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--brand);font-size:14px;margin-top:6px}.ic .go svg{width:15px;height:15px;transition:transform .2s}.ic:hover .go svg{transform:translateX(4px)}

/* pricing */
.ptog{display:flex;justify-content:center;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:4px}.seg button{border:0;background:none;padding:9px 16px;border-radius:9px;font:inherit;font-weight:700;font-size:14px;color:var(--mu);cursor:pointer}.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border:1.5px solid var(--ln);border-radius:26px;padding:30px;background:#fff;display:flex;flex-direction:column;position:relative}
.plan.pop{border-color:var(--brand);box-shadow:0 30px 70px rgba(37,98,231,.15)}.plan .badge{position:absolute;top:-13px;left:30px;background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px}
.plan h3{font-size:21px}.plan .for{color:var(--mu);font-size:14px;margin:4px 0 16px}
.plan .pr{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}.plan .pr small{font-size:15px;color:var(--mu);font-weight:600}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:10px;flex:1}.plan li{display:flex;gap:10px;font-size:14.5px}.plan li svg{flex:0 0 18px;width:18px;height:18px;color:var(--ok);margin-top:2px}
.pnote{text-align:center;color:var(--mu);font-size:13.5px;margin-top:18px}

/* compare */
.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ln);border-radius:20px;overflow:hidden;font-size:15px;background:#fff}
.cmp th,.cmp td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--ln)}.cmp tr:last-child td{border-bottom:0}
.cmp th{background:var(--bg);color:var(--ink);font-size:14px}.cmp th.us{background:var(--brand);color:#fff}
.cmp td:first-child{text-align:left;font-weight:600;color:var(--ink)}.cmp td.us{background:var(--brandS);font-weight:700;color:var(--ink)}
.y{color:var(--ok);font-weight:800}.n{color:#c0c7d4;font-weight:800}
.cmpw{overflow-x:auto}

/* faq */
.faq{max-width:820px;margin:0 auto}.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:700;font-size:17px;color:var(--ink)}.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:0 0 32px;height:32px;border-radius:50%;background:var(--brandS);color:var(--brand);display:grid;place-items:center;font-style:normal;font-size:20px;transition:transform .25s}.faq details[open] summary i{transform:rotate(45deg)}
.faq .a{padding:0 48px 20px 0;font-size:15.5px}

/* cta + footer */
.cta{border-radius:32px;padding:64px;background:linear-gradient(120deg,var(--brand),#5b8dff);color:rgba(255,255,255,.85);display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;right:-60px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.08)}
.cta h2{color:#fff;font-size:clamp(30px,3.6vw,44px)}.cta p{margin:12px 0 0;font-size:17px}
.cta .acts{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}.cta .bw{background:#fff;color:var(--ink)}.cta .bo{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:72px 0 36px;margin-top:100px;font-size:14.5px}
.fg{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
footer h5{color:#fff;font-size:14px;margin:0 0 14px;letter-spacing:.04em}footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}footer a:hover{color:#fff}
footer .logo{color:#fff}.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:24px;font-size:13px}
.mbar{display:none}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){.nav,.login,.reg{display:none}.burger{display:grid}.top .btn{display:none}
.hero .w,.pg,.loop,.calc,.drow{grid-template-columns:1fr}.how,.ind,.plans{grid-template-columns:1fr 1fr}.strip .w{grid-template-columns:1fr 1fr}.st:nth-child(2){border-right:0}.st:nth-child(-n+2){border-bottom:1px solid var(--ln)}
.dwrap{grid-template-columns:1fr}.dside{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ln)}.kpis{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}.cta{grid-template-columns:1fr}.pg .phone{margin:0 auto}}
@media (max-width:640px){.sec{padding:64px 0}.w{padding:0 18px}.hero{padding:36px 0 56px}.try{flex-direction:column}.how,.ind,.plans,.ba,.strip .w,.kv{grid-template-columns:1fr}.st{border-right:0;border-bottom:1px solid var(--ln)}
.pg,.cta,.calc .ci,.calc .co{padding:28px 20px}.phone{width:300px;height:580px}.pg .phone{width:290px;height:520px}.f1,.f2{display:none}.faq .a{padding-right:0}.dmain{padding:14px}.esc .btn,.teach .btn{display:none}
.mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px;background:rgba(255,255,255,.97);border-top:1px solid var(--ln)}.mbar .btn{padding:13px 8px;font-size:14.5px}footer{padding-bottom:96px}.mk{bottom:84px}}
body.mob .nav,body.mob .login,body.mob .reg,body.mob .top .btn{display:none}body.mob .burger{display:grid}
body.mob .hero .w,body.mob .pg,body.mob .loop,body.mob .calc,body.mob .drow,body.mob .how,body.mob .ind,body.mob .plans,body.mob .ba,body.mob .strip .w,body.mob .kv,body.mob .dwrap,body.mob .fg,body.mob .cta{grid-template-columns:1fr}
body.mob .sec{padding:60px 0}body.mob .w{padding:0 18px}body.mob .hero{padding:32px 0 52px}body.mob .hero h1{font-size:38px}body.mob .h2{font-size:30px}body.mob .try{flex-direction:column}
body.mob .st{border-right:0;border-bottom:1px solid var(--ln)}body.mob .pg,body.mob .cta,body.mob .calc .ci,body.mob .calc .co{padding:28px 20px}body.mob .phone{width:300px;height:580px}body.mob .pg .phone{width:290px;height:520px}
body.mob .f1,body.mob .f2,body.mob .esc .btn,body.mob .teach .btn{display:none}body.mob .dside{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ln)}body.mob .kpis{grid-template-columns:1fr 1fr}body.mob .dmain{padding:14px}
body.mob .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;bottom:0;z-index:60;padding:10px 12px;background:rgba(255,255,255,.97);border-top:1px solid var(--ln)}body.mob .big{font-size:44px}
.mini .row svg{width:22px;height:22px;flex:0 0 22px}.mini .row:first-child svg{color:#25d366}.mini .row:nth-child(2) svg{color:#229ed9}
.cmpw{max-width:100%}.ic .go{display:flex;width:max-content;margin-top:12px}.dside button{white-space:nowrap}
@media (max-width:640px){.lviz{max-width:290px}.node{width:84px;margin:-38px 0 0 -42px}.node i{width:48px;height:48px;border-radius:14px}.node i svg{width:22px;height:22px}.node b{font-size:11px}.lcenter{padding:12px;width:50%}.lcenter b{font-size:24px}.lcenter small{font-size:11px}}
body.mob .lviz{max-width:290px}body.mob .node{width:84px;margin:-38px 0 0 -42px}body.mob .node i{width:48px;height:48px}body.mob .node b{font-size:11px}body.mob .lcenter b{font-size:24px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== SITE ADDITIONS ===== */
:root{--logo:#313131}
body.sb{overflow-x:hidden}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}.skip:focus{left:8px}
:focus-visible{outline:3px solid rgba(37,98,231,.45);outline-offset:2px;border-radius:8px}
em{font-style:normal}
h1 em,.h2 em,.ph h1 em{background:linear-gradient(90deg,var(--brand),#5b8dff);-webkit-background-clip:text;background-clip:text;color:transparent}
a.btn{text-decoration:none}

/* logo */
.lg{display:inline-flex;align-items:center;font-weight:700;font-size:29px;letter-spacing:-.045em;color:var(--logo);line-height:1}
.lg .lgb{height:38px;width:auto;margin:0 -2px 0 1px;transform:translateY(-5px)}
.lgw{color:#fff}.lgw .lgb{--logo:#fff;--rbfill:transparent}
.logo img{display:none}

/* robot */
.rb-eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.rb-eyes{transition:transform .25s ease-out}
.rb-ant{transform-box:fill-box;transform-origin:50% 100%}
.avb{width:28px;height:28px}.wa-top .av{background:#fff;padding:3px}

/* header */
.top .w{gap:22px}
.nav>li>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font:inherit;font-weight:600;font-size:15px;color:var(--ink);background:none;border:0;cursor:pointer}
.nav>li>a{padding:10px 14px}
.nav>li>button:hover,.nav>li.open>button{background:var(--bg)}
.nav>li>button svg{width:14px;height:14px;transition:transform .25s}.nav>li.open>button svg{transform:rotate(180deg)}
.nav>li.open>button{color:var(--brand)}
.login{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 12px}.login svg{width:17px;height:17px}.login:hover{background:var(--bg);color:var(--brand)}
.hm{position:static!important}
.mp{position:absolute;left:0;right:0;top:100%;padding:0 24px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;pointer-events:none}
.hm.open .mp{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mw{max-width:1152px;margin:10px auto 0;display:grid;grid-template-columns:1.6fr .9fr 1fr;gap:10px;padding:14px;background:#fff;border:1px solid var(--ln);border-radius:24px;box-shadow:0 40px 90px rgba(28,34,48,.16),0 2px 6px rgba(28,34,48,.04)}
.mp .mstrip{max-width:1152px;margin:-8px auto 0;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:var(--bg);border:1px solid var(--ln);border-top:0;border-radius:0 0 24px 24px;font-size:13.5px;color:var(--mu)}
.mp:has(.mstrip) .mw{border-radius:24px 24px 0 0;box-shadow:none}
.mp:has(.mstrip){filter:drop-shadow(0 30px 50px rgba(28,34,48,.14))}
.mstrip span{display:flex;align-items:center;gap:8px}.mstrip svg{width:16px;height:16px;color:var(--brand)}
.mstrip a{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--brand)}.mstrip a svg{width:15px;height:15px;transition:transform .2s}.mstrip a:hover svg{transform:translateX(3px)}
.mcol{padding:10px}
.mcol h6{margin:4px 10px 10px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);font-weight:700}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mw a:not(.mfeat):not(.mall){display:flex;gap:12px;padding:11px 10px;border-radius:14px;transition:background .15s}
.mw a:not(.mfeat):not(.mall):hover{background:var(--bg)}
.mw a:not(.mfeat):not(.mall):hover i{background:var(--brand);color:#fff;transform:scale(1.05)}
.mw i{flex:0 0 38px;height:38px;border-radius:11px;background:var(--brandS);color:var(--brand);display:grid;place-items:center;transition:all .2s}.mw i svg{width:19px;height:19px}
.mw b{display:block;color:var(--ink);font-size:14.5px}.mw small{display:block;color:var(--mu);font-size:12.8px;line-height:1.4;margin-top:1px}
.mall{display:inline-flex;align-items:center;gap:6px;margin:10px 10px 2px;font-weight:700;font-size:14px;color:var(--brand)}.mall svg{width:15px;height:15px}
.mfeat{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;border-radius:18px;background:linear-gradient(160deg,var(--ink),#2a3550);color:rgba(255,255,255,.72);min-height:250px;grid-column:3}
.mfeat:before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(37,98,231,.55),transparent 65%)}
.mfeat b{color:#fff!important;font-size:17px!important;position:relative}.mfeat small{color:rgba(255,255,255,.7)!important;position:relative}
.mf-rb{position:absolute;right:18px;top:18px;width:96px;animation:fl 4s ease-in-out infinite}.mfr{width:96px;--logo:#fff;--rbfill:#2a3550}
.mf-go{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:#9fb7ff;font-weight:700;font-size:14px}.mf-go svg{width:15px;height:15px;transition:transform .2s}.mfeat:hover .mf-go svg{transform:translateX(4px)}
.mcalc{background:linear-gradient(160deg,#eaf1fe,#fff);color:var(--tx);border:1px solid var(--ln)}.mcalc:before{background:radial-gradient(circle,rgba(37,98,231,.18),transparent 65%)}
.mcalc b{color:var(--ink)!important}.mcalc small{color:var(--mu)!important}.mcalc .mf-go{color:var(--brand)}
.mc-n{position:absolute;right:20px;top:20px;font-size:34px;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.mquote{grid-column:2/4;border-radius:18px;background:var(--waBg);padding:22px;display:flex;flex-direction:column;gap:6px}
.mq-chat{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.mq-chat .q{align-self:flex-start;background:#fff;margin:0}.mq-chat .q.me{align-self:flex-end;background:#d9fdd3}
.mquote b{color:var(--ink);font-size:16px}.mquote small{color:var(--tx)}.mquote a{font-weight:700;color:var(--brand);display:inline-flex;gap:6px;align-items:center;margin-top:6px}.mquote a svg{width:15px;height:15px}
.mscrim{position:fixed;inset:74px 0 0;background:rgba(28,34,48,.18);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.2s;z-index:-1}
.top.mopen .mscrim{opacity:1;visibility:visible}
.top.mopen{background:#fff;border-color:var(--ln)}

/* drawer */
.drawer{position:fixed;inset:74px 0 0;z-index:49;background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
.drawer.on{transform:none}
.dr-in{padding:12px 18px 120px;display:grid;gap:4px}
.dg{border-bottom:1px solid var(--ln)}.dg summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-weight:700;font-size:17px;color:var(--ink);cursor:pointer}.dg summary::-webkit-details-marker{display:none}
.dg summary svg{width:18px;height:18px;transition:transform .2s}.dg[open] summary svg{transform:rotate(180deg)}
.dg>div{display:grid;gap:2px;padding-bottom:10px}.dg a{display:flex;gap:12px;padding:10px 6px;border-radius:12px}.dg i{flex:0 0 36px;height:36px;border-radius:10px;background:var(--brandS);color:var(--brand);display:grid;place-items:center}.dg i svg{width:18px;height:18px}
.dg b{display:block;color:var(--ink);font-size:15px}.dg small{color:var(--mu);font-size:13px}
.dl{padding:16px 4px;font-weight:700;font-size:17px;color:var(--ink);border-bottom:1px solid var(--ln)}
.drawer .reg{display:inline-flex;margin:16px 0;width:max-content}
.dr-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dr-signin{display:block;text-align:center;margin-top:16px;padding:14px;border-radius:14px;background:var(--bg);font-size:14.5px;color:var(--tx)}.dr-signin b{color:var(--brand)}
.burger svg{width:22px;height:22px}
body.noscroll{overflow:hidden}

/* page hero */
.ph{position:relative;padding:84px 0 70px;background:radial-gradient(800px 420px at 85% -10%,rgba(91,141,255,.14),transparent 60%),radial-gradient(600px 360px at 5% 0%,rgba(37,98,231,.09),transparent 60%)}
.ph h1{font-size:clamp(36px,4.8vw,60px);margin:16px 0 18px}
.ph .lead{font-size:19px;max-width:680px;margin:0}
.ph.center .phi{text-align:center;max-width:860px;margin:0 auto}.ph.center .lead{margin:0 auto}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.center .acts{justify-content:center}
.cta .acts{display:flex;flex-direction:column;gap:10px}
.cta-sign{position:relative;z-index:1;text-align:center;font-size:14px;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}.cta-sign:hover{color:#fff}
.alt-cta .sep{color:var(--mu);margin:0 4px}
.dbar{position:relative}.dsign{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brand)}.dsign svg{width:14px;height:14px}
.fsign{margin-top:18px;padding:11px 16px;font-size:14px}
.fchips{display:flex;gap:8px;margin-top:16px}.fchips span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:13px}.fchips svg{width:15px;height:15px}
.crumb{display:inline-flex;font-size:14px;font-weight:600;color:var(--brand);margin-bottom:12px}.crumb:before{content:"\2190";margin-right:6px}
.ihero .crumb{display:flex;width:max-content}
.qs{margin-top:28px}.qs small{display:block;color:var(--mu);font-size:13px;margin-bottom:8px;font-weight:600}
.mini-h{font-size:20px;margin-bottom:16px}

/* grids + cards */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card .ii{width:48px;height:48px;border-radius:14px;background:var(--brandS);color:var(--brand);display:grid;place-items:center;margin-bottom:18px}.card .ii svg{width:24px;height:24px}
.g4 .card{padding:24px}.g4 .card h3{font-size:17.5px}.g4 .card p{font-size:14.5px}
.ck{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}.ck li{display:flex;gap:10px;font-size:15.5px;color:var(--ink)}.ck svg{flex:0 0 20px;width:20px;height:20px;padding:3px;border-radius:50%;background:#dcfce7;color:var(--ok);margin-top:2px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}.split p{font-size:17px}
.note-card,.about-card,.cinfo{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:32px;box-shadow:0 30px 70px rgba(28,34,48,.07)}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stats3 div{background:var(--ink);border-radius:22px;padding:28px 18px;text-align:center}.stats3 b{display:block;font-size:34px;color:#fff;letter-spacing:-.03em}.stats3 span{color:rgba(255,255,255,.65);font-size:14px}
.tline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tl-i{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:24px;position:relative}
.tl-d{display:inline-block;font-size:12px;font-weight:800;color:var(--brand);background:var(--brandS);border-radius:999px;padding:5px 10px;margin-bottom:12px}
.tl-i h3{font-size:18px;margin-bottom:6px}.tl-i p{margin:0;font-size:14.5px}
.oths{display:flex;flex-wrap:wrap;gap:10px}.oth{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;border:1px solid var(--ln);font-weight:600;color:var(--ink);transition:.2s}.oth svg{width:18px;height:18px;padding:7px;box-sizing:content-box;border-radius:50%;background:var(--brandS);color:var(--brand)}.oth:hover{border-color:var(--brand)}
.intg{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:30px}.ig-h{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ig-h i{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff}.ig-h i svg{width:28px;height:28px}.ig-h .wa{background:#25d366}.ig-h .tg{background:#229ed9}
.ig-h h3{font-size:21px}.ig-h small{color:var(--mu)}.tag-live{margin-left:auto;background:#dcfce7;color:#15803d;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
.pick{border-radius:26px;padding:30px;background:#fff;border:1px solid var(--ln)}.pick.us{border:2px solid var(--brand);box-shadow:0 30px 70px rgba(37,98,231,.12)}.pick h3{font-size:21px}
.cmp .y svg{width:20px;height:20px}
.pnote a{color:var(--brand);font-weight:700}

/* forms */
.fm{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:32px;box-shadow:0 30px 70px rgba(28,34,48,.07)}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}.fg2 .full{grid-column:1/-1}
.fm label span{display:block;font-weight:700;color:var(--ink);font-size:14px;margin-bottom:7px}.fm label em{color:var(--bad)}
.fm input,.fm select,.fm textarea{width:100%;border:1.5px solid var(--ln);border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,98,231,.12)}
.fnote{font-size:13px;color:var(--mu);margin:12px 0 0}.hpf{position:absolute;left:-9999px;height:0;overflow:hidden}
.fm.sending button{opacity:.6;pointer-events:none}
.ctg{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.cinfo{display:grid;gap:18px}.cinfo>div{display:flex;gap:14px;align-items:flex-start}.cinfo i{flex:0 0 44px;height:44px;border-radius:12px;background:var(--brandS);color:var(--brand);display:grid;place-items:center}.cinfo i svg{width:22px;height:22px}
.cinfo b{display:block;color:var(--ink)}.cinfo a{color:var(--brand);font-weight:600}
.demo-side{display:block}.demo-side h3{font-size:20px}
.ab-rb{width:130px;margin:0 auto 18px;animation:fl 4s ease-in-out infinite}.ab-rb svg{width:100%}.ab-rb.sm{width:96px;margin:24px 0 0}
.about-card .ab-rb{margin:0 0 10px}
.thx{padding:110px 0}

/* blog + prose */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s}.post:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(28,34,48,.08)}
.pt-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brandS),#fff);display:grid;place-items:center;position:relative;overflow:hidden}
.pt-img svg.pa{width:100%;height:100%}
.pt-b{padding:22px}.pt-c{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}.pt-b h3{font-size:19px;margin:8px 0}.pt-b p{margin:0 0 12px;font-size:14.5px}
.pt-m{font-size:13px;color:var(--mu)}
.art{padding:70px 0 20px}.art-h{max-width:760px;margin:0 auto 32px}.art-h h1{font-size:clamp(32px,4vw,48px);margin:10px 0}
.prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75;color:#3d4657}
.prose h2{font-size:26px;margin:38px 0 12px}.prose h3{font-size:20px;margin:28px 0 10px}.prose p{margin:0 0 18px}.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}.prose li{margin-bottom:6px}
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}.prose blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--brand);background:var(--bg);border-radius:0 14px 14px 0}
.draft{display:inline-block;background:#fff7d6;color:#7a5b00;font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px}

/* help */
.hsearch{display:flex;align-items:center;gap:10px;max-width:620px;margin:30px auto 0;background:#fff;border:1.5px solid var(--ln);border-radius:18px;padding:8px 18px;box-shadow:0 18px 40px rgba(28,34,48,.08)}
.hsearch svg{width:20px;height:20px;color:var(--mu)}.hsearch input{flex:1;border:0;outline:0;font:inherit;font-size:16px;padding:10px 0;color:var(--ink);background:transparent}
.hcats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:48px}
.hc{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:20px;border:1px solid var(--ln);background:#fff;transition:.2s}.hc:hover{border-color:var(--brand);transform:translateY(-3px)}
.hc i{width:42px;height:42px;border-radius:12px;background:var(--brandS);color:var(--brand);display:grid;place-items:center;margin-bottom:8px}.hc i svg{width:21px;height:21px}.hc b{color:var(--ink)}.hc small{color:var(--mu)}
.hlist{max-width:860px;margin:0 auto}.hsec{margin-bottom:40px;scroll-margin-top:100px}.hsec h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:6px}.hsec h3 svg{width:22px;height:22px;color:var(--brand)}
.hsec .faq{max-width:none}.hnone{display:none;text-align:center;color:var(--mu)}.hnone a{color:var(--brand);font-weight:700}

/* hero mascot */
.hmascot{position:absolute;left:-96px;bottom:70px;width:112px;z-index:4;animation:fl 4.5s ease-in-out infinite}
.hmr{width:112px;filter:drop-shadow(0 20px 30px rgba(37,98,231,.25))}
.hm-bub{position:absolute;left:56px;top:-30px;white-space:nowrap;background:#fff;border:1px solid var(--ln);border-radius:14px 14px 14px 4px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 12px 30px rgba(28,34,48,.12);animation:pop .5s 1.2s both}
.hmascot .rb-ant{animation:wig 3s ease-in-out infinite}@keyframes wig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}

/* floating mascot */
.mascot{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ms-bot{position:relative;width:78px;height:78px;border-radius:50%;border:0;background:#fff;box-shadow:0 18px 40px rgba(28,34,48,.22),0 0 0 6px rgba(37,98,231,.12);cursor:pointer;display:grid;place-items:center;padding:12px;animation:msfl 4s ease-in-out infinite;transition:transform .2s}
.ms-bot:hover{transform:scale(1.07)}.msr{width:54px}
.ms-bot:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,98,231,.35);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes msfl{50%{translate:0 -6px}}
.ms-bub{position:relative;width:270px;background:#fff;border:1px solid var(--ln);border-radius:20px 20px 6px 20px;padding:18px;box-shadow:0 24px 60px rgba(28,34,48,.18);font-size:14px;display:none}
.ms-bub.on{display:block;animation:pop .35s}.ms-bub b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}.ms-bub span{display:block;margin-bottom:12px}.ms-bub .btn{padding:10px 14px;font-size:14px;width:100%}
.ms-x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:22px;color:var(--mu);cursor:pointer;line-height:1}
.mascot.hide{display:none}

/* dashboard concept app */
.app{border-radius:28px;border:1px solid var(--ln);background:#fff;box-shadow:0 40px 90px rgba(28,34,48,.12);overflow:hidden}
.appw{display:grid;grid-template-columns:230px 1fr;min-height:600px}
.aps{border-right:1px solid var(--ln);padding:14px 12px;display:flex;flex-direction:column;gap:3px;background:#fbfcfe}
.aps-b{display:flex;gap:10px;align-items:center;padding:8px 10px 16px;border-bottom:1px solid var(--ln);margin-bottom:8px}.apr{width:38px}.aps-b b{display:block;color:var(--ink);font-size:14px}.aps-b small{color:var(--mu);font-size:12px}
.aps>button{display:flex;gap:10px;align-items:center;border:0;background:none;padding:10px 12px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--tx);cursor:pointer;text-align:left}
.aps>button svg{width:18px;height:18px;flex:0 0 18px}.aps>button span:not(.cnt){flex:1}.aps .cnt{flex:none}.aps>button:hover{background:var(--bg)}.aps>button.on{background:var(--brandS);color:var(--brand)}
.cnt{background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px;font-style:normal}.cnt.b{background:var(--brand)}.cnt.g{background:var(--ok)}
.usage{margin-top:auto;padding:14px 10px 4px;border-top:1px solid var(--ln)}.usage small{display:block;font-size:12px;color:var(--mu)}.usage b{color:var(--ink)}
.ub{height:7px;border-radius:7px;background:#e3e8f3;overflow:hidden;margin:7px 0}.ub i{display:block;height:100%;background:var(--brand);border-radius:7px}
.apm{padding:22px;min-width:0}.apn{display:none}.apn.on{display:block;animation:pop .35s}
.nyn{display:grid;gap:8px}.nyn button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--ln);background:#fff;border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;cursor:pointer;color:var(--tx)}.nyn button:hover{border-color:var(--brand)}
.nyn b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brandS);color:var(--brand)}
.csat{display:flex;gap:16px;align-items:center}.csat>b{font-size:44px;color:var(--ink)}.csat>div{flex:1;display:grid;gap:5px}.csat span{display:flex;align-items:center;gap:8px;font-size:12px}.csat em{width:10px;color:var(--mu)}.csat i{display:block;height:7px;border-radius:7px;background:var(--warn)}
.inb{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--ln);border-radius:16px;overflow:hidden;min-height:430px}
.chl{border-right:1px solid var(--ln);overflow-y:auto}
.ch{display:flex;gap:10px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--ln);background:#fff;padding:12px;text-align:left;font:inherit;cursor:pointer}.ch.on{background:var(--brandS)}
.ch .av,.cvh .av{flex:0 0 36px;height:36px;border-radius:50%;background:var(--brandS);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px}.ch.on .av{background:#fff}
.cm{flex:1;min-width:0}.cm b{display:block;font-size:13.5px;color:var(--ink)}.cm b small{display:inline;color:var(--mu);font-weight:500;font-size:11.5px}.cm>small{display:block;font-size:12.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr{text-align:right}.cr small{display:block;font-size:11px;color:var(--mu)}.cr em{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;margin-top:3px;white-space:nowrap}.cr em.warn{background:#fef3c7;color:#92400e}.cr em.ok{background:#dcfce7;color:#15803d}
.cv{display:flex;flex-direction:column;background:var(--waBg)}.cvh{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#fff;border-bottom:1px solid var(--ln)}.cvh b{display:block;color:var(--ink);font-size:14px}.cvh small{color:var(--mu);font-size:12px}.cvh .btn{margin-left:auto;padding:9px 14px;font-size:13px}
.cvb{flex:1;padding:16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:330px}
.cvi{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid var(--ln)}.cvi input{flex:1;border:1.5px solid var(--ln);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px}.cvi .btn{padding:10px 16px;font-size:14px}
.kbs{display:grid;gap:10px}.kbr{display:flex;align-items:center;gap:14px;border:1px solid var(--ln);border-radius:14px;padding:14px}.kbr>i{flex:0 0 38px;height:38px;border-radius:10px;background:var(--brandS);color:var(--brand);display:grid;place-items:center}.kbr>i svg{width:19px;height:19px}
.kbr>span{flex:1}.kbr b{display:block;color:var(--ink);font-size:14px}.kbr small{color:var(--mu);font-size:12.5px}.kbb{width:140px;height:7px;border-radius:7px;background:#e3e8f3;overflow:hidden}.kbb i{display:block;height:100%;background:var(--brand)}.kbr em{width:40px;text-align:right;font-weight:700;color:var(--ink);font-size:13px}
.kbtip{display:flex;gap:10px;margin-top:14px;padding:14px;border-radius:14px;background:#fff7d6;color:#7a5b00;font-size:14px}.kbtip svg{flex:0 0 20px;width:20px;height:20px}
.obp{color:var(--ok)}.obb{height:9px;border-radius:9px;background:#e3e8f3;overflow:hidden;margin-bottom:16px}.obb i{display:block;height:100%;background:var(--ok);transition:width .4s}
.obl{display:grid;gap:8px}.obr{display:flex;align-items:center;gap:12px;border:1px solid var(--ln);border-radius:14px;padding:14px;cursor:pointer}.obr input{position:absolute;opacity:0}
.obx{width:26px;height:26px;border-radius:50%;border:2px solid var(--ln);display:grid;place-items:center;color:transparent;transition:.2s}.obx svg{width:15px;height:15px}.obr.done .obx{background:var(--ok);border-color:var(--ok);color:#fff}.obr.done b{color:var(--mu);text-decoration:line-through}.obr b{color:var(--ink);font-size:14.5px}
.sets{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sets .dbox:first-child{grid-column:1/-1}.sets p{margin:0 0 8px;font-size:14px}
.tg{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;cursor:pointer}.tg input{position:absolute;opacity:0}.tg i{width:38px;height:22px;border-radius:22px;background:#d6dbe6;position:relative;transition:.2s;flex:0 0 38px}.tg i:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.tg input:checked+i{background:var(--brand)}.tg input:checked+i:after{left:19px}
.seg.sm button{padding:6px 12px;font-size:13px}

/* responsive additions */
@media (max-width:1080px){
.mp{display:none}.drawer{display:block}
.g3,.g4,.tline,.posts{grid-template-columns:1fr 1fr}.split,.ctg{grid-template-columns:1fr;gap:32px}.hcats{grid-template-columns:repeat(3,1fr)}
.appw{grid-template-columns:1fr}.aps{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ln)}.aps-b,.usage{display:none}.aps>button{white-space:nowrap;flex:0 0 auto}
.inb{grid-template-columns:1fr}.chl{max-height:220px}.hmascot{left:auto;right:-10px;top:-30px;width:90px}.hmr{width:90px}.hm-bub{left:auto;right:70px}
.ihero .w{grid-template-columns:1fr}}
@media (min-width:1081px){.drawer{display:none}}
@media (max-width:640px){
.g2,.g3,.g4,.tline,.posts,.fg2,.stats3,.sets{grid-template-columns:1fr}.hcats{grid-template-columns:1fr 1fr}.ph{padding:52px 0 44px}.ph .lead{font-size:17px}
.fm,.note-card,.about-card,.cinfo,.intg,.pick{padding:22px}.kbb{display:none}.lg{font-size:25px}.lg .lgb{height:33px}
.mascot{right:14px;bottom:84px}.ms-bot{width:62px;height:62px;padding:10px}.msr{width:42px}.ms-bub{width:240px}.hmascot{display:none}
.acts .btn{flex:1}.cta .acts .btn{flex:none}.mbar{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.mascot *,.hmascot,.ab-rb,.mf-rb{animation:none!important}}

/* ===== hero fits the first screen ===== */
@media (min-width:1081px){
.hero{min-height:calc(100svh - 74px);display:flex;align-items:center;padding:clamp(16px,3.5vh,56px) 0 clamp(20px,4vh,60px)}
.hero>.w{width:100%;gap:clamp(32px,4vw,56px)}
.hero h1{font-size:clamp(34px,min(4.9vw,7.6vh),64px);margin:clamp(10px,2vh,22px) 0 clamp(10px,2vh,20px)}
.ihero h1{font-size:clamp(32px,min(4.4vw,7vh),58px)}
.hero p.s{font-size:clamp(15px,2.3vh,19px);line-height:1.55}
.hero .chip{padding:6px 12px;font-size:13px}
.hero .try{margin-top:clamp(14px,3vh,30px)}
.hero .under{margin-top:clamp(8px,1.6vh,16px)}
.hero .alt-cta{margin-top:clamp(6px,1.4vh,14px)}
.hero .acts{margin-top:clamp(14px,3vh,28px)}
.hero .qs{margin-top:clamp(12px,2.6vh,28px)}
.hero .crumb{margin-bottom:clamp(4px,1vh,12px)}
.hero .phone{height:clamp(400px,calc(100svh - 74px - 130px),640px);width:auto;aspect-ratio:340/640;border-width:clamp(8px,1.4vh,11px);border-radius:clamp(36px,6vh,48px)}
.ihero .phone{height:clamp(400px,calc(100svh - 74px - 80px),640px)}
.hero .ptabs{margin-bottom:clamp(8px,1.6vh,16px)}
.hero .wa-top{padding-top:clamp(34px,5.5vh,44px)}
.f1{left:-70px;top:42%}.f2{right:-24px;bottom:22%}
.hmascot{bottom:auto;top:62%}
}
@media (min-width:1081px) and (max-height:720px){
.hero .alt-cta,.hero .q:nth-child(n+4){display:none}
.hero .under{font-size:13px}
.float{padding:8px 12px}.float i{width:26px;height:26px}
}
@media (max-width:1080px){.hero .phone{height:600px;width:320px}}
@media (max-width:640px){.hero .phone{height:560px;width:300px}.hero h1{font-size:clamp(32px,9vw,40px)}}
@media (max-width:640px){.dsign{display:none}}
body.noscroll .mascot,body.noscroll .mbar{display:none}

/* ===== Supbotive app UI (rebuilt from app.supbotive.com) ===== */
.sbapp{display:grid;grid-template-columns:56px 260px 1fr;height:100%;background:#fff;font-size:13px;color:#1f2937;text-align:left}
.arail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;border-right:1px solid #eef1f6;background:#fff}
.rlogo{margin-bottom:8px}.rlb{width:30px}
.arail .ri{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#6b7280;position:relative;transition:.2s}.arail .ri svg{width:17px;height:17px}
.arail .ri.on{background:#eaf1fe;color:var(--brand)}.arail .ri.on:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--brand)}
.rsp{flex:1}.rav{position:relative;width:30px;height:30px;border-radius:50%;background:#e0e7ff;color:#3730a3;font-size:11px;font-weight:700;display:grid;place-items:center}.rav i{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.alist{border-right:1px solid #eef1f6;display:flex;flex-direction:column;min-width:0;background:#fff}
.atabs{display:flex;gap:4px;padding:12px 10px;border-bottom:1px solid #eef1f6}.atabs span{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-weight:600;color:#4b5563;font-size:12.5px;position:relative;transition:.2s}
.atabs span.on{background:var(--brand);color:#fff}.atabs i{position:absolute;top:-4px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-style:normal;line-height:16px;padding:0 4px}
.asrch{display:flex;align-items:center;gap:8px;margin:10px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:9px;color:#9ca3af}.asrch svg{width:14px;height:14px}
.aitems{flex:1;overflow:hidden}
.ali{display:flex;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid #f1f4f9;transition:background .3s}
.ali.sel{background:#eef4ff}.ali.new{animation:slin .5s both}@keyframes slin{from{opacity:0;transform:translateY(-14px)}}
.aav{position:relative;flex:0 0 34px;height:34px;border-radius:50%;background:#dbeafe;color:#1e40af;display:grid;place-items:center;font-weight:700;font-size:12px}
.aav>i{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;border:2px solid #fff}.aav>i svg{width:9px;height:9px}
.aav.s{flex-basis:30px;height:30px;font-size:11px}.aav.g{background:#dcfce7;color:#166534}
.alm{flex:1;min-width:0}.alm b{display:block;font-size:13px;color:#111827}.alm small{display:block;color:#6b7280;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.alr small{color:#2563eb;font-size:10.5px;font-weight:600}
.alr em{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ede9fe}.lib{width:15px}
.lok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#22c55e;color:#fff}.lok svg{width:12px;height:12px}
.lal{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;font-size:12px;animation:pu2 1.2s infinite}@keyframes pu2{50%{box-shadow:0 0 0 5px rgba(239,68,68,.18)}}
.lme{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e0e7ff;color:#3730a3;font-size:8.5px}
.amain{position:relative;min-width:0;background:#f7f9fc}
.aview{position:absolute;inset:0;display:none;flex-direction:column}.aview.on{display:flex;animation:pop .35s}
.achh{display:flex;align-items:center;gap:10px;padding:11px 16px;background:#fff;border-bottom:1px solid #eef1f6}.achh b{font-size:15px;color:#111827}
.achi{margin-left:auto;display:flex;gap:12px;color:#6b7280}.achi svg{width:16px;height:16px}
.awall{flex:1;overflow:hidden;padding:14px 18px;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;background-color:#eef3fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 120 112'%3E%3Cg fill='none' stroke='%232562e7' stroke-opacity='.08' stroke-width='6'%3E%3Cpath d='M40 27H80a29 29 0 0 1 0 58H74L60 101V85H42A29 29 0 0 1 14 50'/%3E%3Crect x='22' y='40' width='74' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E")}
.adate{align-self:center;background:#fff;border-radius:8px;padding:3px 10px;font-size:11px;color:#6b7280;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.am{max-width:72%;padding:9px 12px;border-radius:12px;font-size:12.8px;line-height:1.45;animation:pop .35s both;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.am small{display:block;text-align:right;font-size:10px;color:#9ca3af;margin-top:3px}
.am.c{align-self:flex-start;background:#fff}.am.b{align-self:flex-end;background:#e0ecff}.am.a{align-self:flex-end;background:#dcfce7}
.am .who{display:block;font-size:10.5px;font-weight:700;margin-bottom:2px;color:var(--brand)}.am.a .who{color:#15803d}
.am .src{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px;border-radius:999px;background:#fff;font-size:10.5px;font-weight:600;color:#475569}.am .src svg{width:11px;height:11px;color:var(--brand)}
.asys{align-self:center;background:#fff7ed;color:#9a3412;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;animation:pop .35s both}
.atyp{align-self:flex-end;background:#e0ecff;border-radius:12px;padding:10px 12px;display:flex;gap:4px}.atyp i{width:6px;height:6px;border-radius:50%;background:#6b8fd6;animation:bl 1s infinite}.atyp i:nth-child(2){animation-delay:.15s}.atyp i:nth-child(3){animation-delay:.3s}
.afoot{padding:12px;background:#fff;border-top:1px solid #eef1f6;text-align:center}.afoot small{display:block;color:#9ca3af;font-size:10.5px;margin-top:6px}
.abtns{display:flex;justify-content:center;gap:10px}.abtns span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;font-weight:600;font-size:12.5px;transition:.2s}.abtns svg{width:14px;height:14px}
.bt-my{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.bt-as{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.bt-my.press{transform:scale(.94);background:#dcfce7}
.acomp{display:none;align-items:center;gap:10px;margin:10px;padding:10px 12px;background:#fff;border:1.5px solid #c7d7fb;border-radius:12px;color:#6b7280}.acomp span{flex:1}.acomp b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff}.acomp b svg{width:14px;height:14px}
.amain.agent .afoot{display:none}.amain.agent .acomp{display:flex}
.adh{padding:16px 18px 4px}.adh h5{margin:0;font-size:18px;color:#111827}.adh small{color:#6b7280}
.adg{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 18px}
.acard{background:#fff;border:1px solid #e9eef5;border-radius:14px;padding:14px}
.ach{display:flex;gap:10px;align-items:center}.ach>svg{width:32px;height:32px;padding:7px;border-radius:9px;background:#eaf1fe;color:var(--brand);box-sizing:border-box}.ach b{display:block;font-size:13.5px;color:#111827}.ach small{color:#6b7280;font-size:11.5px}
.donut{display:flex;align-items:center;gap:16px;margin-top:10px}.donut svg{width:46%;max-width:150px;transform:rotate(-90deg)}.donut circle[data-seg]{transition:stroke-dasharray 1s ease,stroke-dashoffset 1s ease}
.dleg{flex:1;display:grid;gap:8px}.dleg span{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151}.dleg i{width:9px;height:9px;border-radius:50%}.dleg b{margin-left:auto;color:#111827}
.agp{display:grid;gap:8px;margin-top:10px}.agp>div{display:flex;align-items:center;gap:10px;border:1px solid #eef1f6;border-radius:10px;padding:8px 10px}.agp b{display:block;font-size:12.5px}.agp small{font-size:10.5px}.onl{color:#16a34a}.agp em{margin-left:auto;font-style:normal;font-size:11px;color:#6b7280}
.trend{width:100%;height:60px;margin-top:6px}.trend path:first-child{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}.aview.on .trend path:first-child{stroke-dashoffset:0}

/* tour layout */
.tour{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.tsteps{display:grid;gap:8px}
.tstep{position:relative;overflow:hidden;display:flex;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid var(--ln);background:#fff;font:inherit;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.tstep i{flex:0 0 28px;height:28px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:var(--ink);transition:.25s}
.tstep b{display:block;color:var(--ink);font-size:15px}.tstep small{display:block;color:var(--mu);font-size:13px;line-height:1.4;max-height:0;overflow:hidden;transition:max-height .35s}
.tstep.on{border-color:var(--brand);box-shadow:0 14px 30px rgba(37,98,231,.12)}.tstep.on i{background:var(--brand);color:#fff}.tstep.on small{max-height:60px;margin-top:3px}
.tstep.done i{background:#dcfce7;color:var(--ok)}
.tstep em{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}.tstep em u{display:block;height:100%;width:0;background:var(--brand)}
.tstep.on em u{animation:tprog var(--td,5s) linear forwards}.tour.paused .tstep.on em u{animation-play-state:paused}@keyframes tprog{to{width:100%}}
.tctl{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:13.5px}
.tctl button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:6px 0}.tctl button svg{width:16px;height:16px}
.tctl a{color:var(--brand);font-weight:700;display:inline-flex;gap:4px;align-items:center}.tctl a svg{width:14px;height:14px}
.twin{border-radius:22px;border:1px solid var(--ln);background:#fff;box-shadow:0 40px 90px rgba(28,34,48,.14);overflow:hidden}
.tstage{position:relative;height:540px}
.tcur{position:absolute;left:60%;top:60%;width:22px;height:22px;z-index:6;pointer-events:none;transition:left .9s cubic-bezier(.4,.1,.2,1),top .9s cubic-bezier(.4,.1,.2,1);filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.tcur svg{width:22px;height:22px}.tcur span{position:absolute;left:-9px;top:-9px;width:40px;height:40px;border-radius:50%;background:rgba(37,98,231,.35);transform:scale(0);opacity:0}
.tcur.clk span{animation:clk .5s ease-out}@keyframes clk{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.2);opacity:0}}
.ttip{position:absolute;z-index:7;max-width:240px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;line-height:1.4;box-shadow:0 14px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,left .6s,top .6s;pointer-events:none}
.ttip.on{opacity:1;transform:none}.ttip b{color:#9fb7ff}

/* ===== hero variants ===== */
.hv{display:none;position:relative}.hv.on{display:block}
.hero[data-hvon="1"] .ptabs,.hero[data-hvon="2"] .ptabs,.hero[data-hvon="3"] .ptabs,.hero:not([data-hvon="0"]) .hv0x{display:none}
/* V1 live inbox */
.hv1{height:clamp(420px,calc(100svh - 74px - 120px),560px);width:100%;max-width:620px;margin-left:auto}
.v1win{position:absolute;right:0;top:0;width:88%;height:86%;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--ln);box-shadow:0 40px 90px rgba(28,34,48,.18)}
.v1win .dbar{padding:9px 12px}.v1win .dbar span{font-size:11.5px}
.sbapp.mini{grid-template-columns:46px 170px 1fr;height:calc(100% - 38px);font-size:12px}
.sbapp.mini .arail .ri{width:30px;height:30px}.sbapp.mini .arail .ri:nth-child(n+6){display:none}.sbapp.mini .rlb{width:24px}
.sbapp.mini .atabs{padding:9px 6px}.sbapp.mini .atabs span{font-size:10.5px;padding:5px 0}.sbapp.mini .ali{padding:9px 8px;gap:8px}.sbapp.mini .alm small{font-size:11px}.sbapp.mini .alr small{display:none}
.sbapp.mini .awall{padding:12px}.sbapp.mini .am{font-size:12px;max-width:82%}
.v1live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#047857;background:#d1fae5;padding:4px 9px;border-radius:999px}.v1live i{width:7px;height:7px;border-radius:50%;background:#10b981;animation:pu 2s infinite}
.v1ph{position:absolute;left:0;bottom:0;width:210px;height:78%;border-radius:34px;border:8px solid #1c2230;background:var(--waBg);overflow:hidden;box-shadow:0 40px 80px rgba(28,34,48,.3);z-index:2}
.v1ph .nt{position:absolute;top:6px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#1c2230;z-index:5}
.v1ph .wa-top{padding:30px 10px 9px}.v1ph .wa-top b{font-size:13px}.v1ph .wa-body{height:calc(100% - 70px);padding:10px 8px}.v1ph .msg{font-size:11.5px;max-width:88%}
.v1tag{position:absolute;z-index:3;display:flex;gap:9px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:8px 12px;box-shadow:0 18px 40px rgba(28,34,48,.14);animation:fl 5s ease-in-out infinite}
.v1tag svg{width:28px;height:28px;padding:6px;border-radius:9px;background:var(--brand);color:#fff;box-sizing:border-box}.v1tag b{display:block;font-size:13px;color:var(--ink)}.v1tag small{font-size:11px;color:var(--mu)}
.v1tag.t1{left:150px;top:6%}.v1tag.t2{right:-14px;bottom:4%;animation-delay:-2.5s}.v1tag.t2 svg{background:#25d366}
/* V2 glow phone */
.hv2{display:none;justify-content:center}.hv2.on{display:flex}
.v2aura{position:absolute;inset:6% 10%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(37,98,231,.45),rgba(91,141,255,.2) 45%,transparent 70%);filter:blur(30px);animation:aura 6s ease-in-out infinite}@keyframes aura{50%{transform:scale(1.08)}}
.v2ring{position:absolute;left:50%;top:50%;width:min(520px,110%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(37,98,231,.25);animation:spin 50s linear infinite}
.v2p{border:0!important;padding:9px;background:linear-gradient(150deg,#2562e7,#5b8dff 50%,#1c2230)!important;position:relative;z-index:2}
.v2p:after{content:"";position:absolute;inset:9px;border-radius:calc(48px - 9px);z-index:-1;background:#eef3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 120 112'%3E%3Cg fill='none' stroke='%232562e7' stroke-opacity='.09' stroke-width='6'%3E%3Cpath d='M40 27H80a29 29 0 0 1 0 58H74L60 101V85H42A29 29 0 0 1 14 50'/%3E%3Crect x='22' y='40' width='74' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E")}
.v2p .wa-top{background:linear-gradient(90deg,#2562e7,#3b74f0);border-radius:38px 38px 0 0}.v2p .wa-top small{display:flex;align-items:center;gap:4px}.v2p .wa-top small svg{width:12px;height:12px;padding:2px;border-radius:50%;background:#fff;color:var(--brand)}
.v2p .nt{top:17px}.v2p .wa-body{background:transparent}.v2p .msg.out{background:#dbe7ff}.v2p .msg .tag{color:var(--brand)}
.v2p .wa-in{left:19px;right:19px;bottom:21px}
.v2peek{position:absolute;z-index:3;top:-4px;left:50%;margin-left:70px;width:100px;animation:peek 4s ease-in-out infinite}.v2r{width:100px;filter:drop-shadow(0 14px 20px rgba(37,98,231,.3))}
@keyframes peek{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.v2chip{position:absolute;z-index:3;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(28,34,48,.14);text-align:center;animation:fl 5s ease-in-out infinite}
.v2chip b{display:block;font-size:20px;color:var(--brand);letter-spacing:-.02em}.v2chip small{font-size:11.5px;color:var(--mu);font-weight:600}
.v2chip.c1{left:2%;top:18%}.v2chip.c2{right:0;top:40%;animation-delay:-1.6s}.v2chip.c3{left:6%;bottom:14%;animation-delay:-3.2s}
.msg .src{display:flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px;width:max-content;border-radius:999px;background:rgba(255,255,255,.85);font-size:10.5px;font-weight:600;color:#475569}.msg .src svg{width:11px;height:11px;color:var(--brand)}
/* V3 chat canvas */
.hv3{padding:20px 10px 30px 30px}
.v3card{position:relative;z-index:2;border-radius:28px;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:0 50px 100px rgba(28,34,48,.16),0 0 0 1px var(--ln);overflow:hidden}
.v3card:before{content:"";position:absolute;inset:-40% -20% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(91,141,255,.25),transparent 65%);z-index:-1}
.v3h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ln)}
.v3ch{display:flex;background:var(--bg);border-radius:12px;padding:4px}.v3ch button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:7px 12px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;color:var(--mu);cursor:pointer}.v3ch button svg{width:15px;height:15px}
.v3ch button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}.v3ch button.on[data-v3c=wa] svg{color:#25d366}.v3ch button.on[data-v3c=tg] svg{color:#229ed9}
.v3live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#b91c1c}.v3live i{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:pu2 1.2s infinite}
.v3body{padding:16px 18px;height:clamp(250px,calc(100svh - 74px - 330px),360px);display:flex;flex-direction:column}
.v3who{display:flex;align-items:center;gap:10px;margin-bottom:10px}.v3who .av{width:36px;height:36px;border-radius:50%;background:var(--brandS);display:grid;place-items:center}.v3who b{color:var(--ink);font-size:15px}.v3who small{color:var(--mu);font-size:12px;margin-left:auto}
.v3body .wa-body{flex:1;height:auto;padding:0;background:transparent}
.v3body .msg{font-size:14.5px;padding:11px 14px;border-radius:16px;max-width:80%}.v3body .msg.in{background:var(--bg)}.v3body .msg.out{background:var(--brand);color:#fff}.v3body .msg.out .tag{color:#cfe0ff}.v3body .msg.out small{color:rgba(255,255,255,.7)}
.v3body .msg.sys{background:#fff7d6}.v3body .typing{background:var(--brand)}.v3body .typing i{background:#fff}
.v3card.v3tg .msg.out{background:#229ed9}.v3card.v3tg .typing{background:#229ed9}
.v3foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln)}.v3foot div{padding:14px;text-align:center;border-right:1px solid var(--ln)}.v3foot div:last-child{border:0}
.v3foot b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}.v3foot small{font-size:12px;color:var(--mu)}
.v3float{position:absolute;z-index:3;left:-6px;bottom:-4px;display:flex;gap:10px;align-items:center;background:var(--ink);color:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 20px 40px rgba(28,34,48,.3);animation:fl 5s ease-in-out infinite}
.v3float svg{width:30px;height:30px;padding:7px;border-radius:9px;background:rgba(255,255,255,.12);box-sizing:border-box}.v3float b{display:block;font-size:13px}.v3float small{color:rgba(255,255,255,.7);font-size:12px}
/* options page */
.hopts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hopt{border:1px solid var(--ln);border-radius:24px;overflow:hidden;background:#fff}
.hframe{position:relative;height:300px;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--ln)}
.hframe iframe{position:absolute;left:0;top:0;width:1440px;height:820px;border:0;transform:scale(.4);transform-origin:0 0;pointer-events:none}
.hob{padding:22px}.hob h3{font-size:20px;margin:6px 0}.hob p{font-size:14.5px;margin:0 0 14px}
body.embed .mascot,body.embed .mbar,body.embed #wpadminbar{display:none!important}html:has(body.embed){margin-top:0!important}

@media (max-width:1080px){.tour{grid-template-columns:1fr}.tsteps{grid-template-columns:repeat(5,1fr);gap:6px}.tstep{flex-direction:column;padding:10px}.tstep small{display:none}.tstep b{font-size:12.5px}.tctl{grid-column:1/-1}
.hv1{height:480px;max-width:600px;margin:0 auto}.hopts{grid-template-columns:1fr}.hframe iframe{transform:scale(.3)}.hframe{height:240px}}
@media (max-width:760px){.tstage{height:460px}.sbapp{grid-template-columns:0 0 1fr}.arail,.alist{display:none}
.tsteps{grid-template-columns:1fr}.tstep{flex-direction:row}.tstep:not(.on){display:none}.tstep small{display:block}
.hv1{height:440px}.v1win{width:100%;height:70%}.sbapp.mini{grid-template-columns:0 0 1fr}.v1ph{width:170px;height:62%}.v1tag.t1{left:auto;right:0;top:auto;bottom:40%}.v1tag.t2{display:none}
.hv2 .v2chip.c2,.v2ring{display:none}.v2peek{margin-left:50px;width:80px}.v2r{width:80px}.hv3{padding:10px 0 20px}.v3foot b{font-size:16px}.v3body{height:320px}}
/* variant refinements */
.v1win{width:90%;height:84%}
.sbapp.mini{grid-template-columns:42px 150px 1fr}.sbapp.mini .arail .ri:nth-child(n+5){display:none}
.v1ph{width:186px;height:76%;left:-26px;border-width:7px;border-radius:30px}
.v1ph .wa-top{padding:26px 10px 8px}.v1ph .msg{font-size:11px}
.v1tag.t1{left:-40px;top:6%}
.sbapp.mini .alist{padding-left:0}.sbapp.mini .achh b{font-size:13.5px;white-space:nowrap}
.v2p{border:9px solid transparent!important;padding:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 120 112'%3E%3Cg fill='none' stroke='%232562e7' stroke-opacity='.09' stroke-width='6'%3E%3Cpath d='M40 27H80a29 29 0 0 1 0 58H74L60 101V85H42A29 29 0 0 1 14 50'/%3E%3Crect x='22' y='40' width='74' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E") padding-box,linear-gradient(#eef3fb,#eef3fb) padding-box,linear-gradient(150deg,#2562e7,#5b8dff 50%,#1c2230) border-box!important}
.v2p:after{display:none}.v2p .wa-top{border-radius:0}.v2p .nt{top:8px}.v2p .wa-in{left:10px;right:10px;bottom:12px}
.v3body{height:clamp(290px,calc(100svh - 74px - 300px),380px)}.v3body .msg{font-size:13.5px;padding:9px 13px}
.v3float{left:-38px;bottom:100px}
@media (max-width:760px){.v1ph{left:0}.v1tag.t1{left:auto}.v3float{left:-6px;bottom:-14px}}
.am .src{display:flex;width:max-content;max-width:100%}
/* ===== interactive demo (click-through) ===== */
.demo{position:relative;border-radius:22px;border:1px solid #d9dff0;background:#fff;box-shadow:0 40px 90px rgba(28,34,48,.14);overflow:hidden}
.demo .dbar{position:relative}.dx{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--ln);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--mu)}.dx svg{width:14px;height:14px}
.dstrip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:linear-gradient(90deg,#eaf1fe,#f1ecff);color:#3b4a6b;font-size:14.5px}
.dstrip>span{display:flex;align-items:center;gap:8px}.dstrip svg{width:18px;height:18px;color:var(--brand)}.dstrip b{color:var(--brand)}.dstrip .btn{padding:9px 16px;font-size:13.5px;border-color:#c7d4f5;color:var(--brand)}
.demo .tstage{height:560px}
.dbeacon{position:absolute;z-index:8;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(37,98,231,.18);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s,left .5s cubic-bezier(.4,.1,.2,1),top .5s cubic-bezier(.4,.1,.2,1)}
.dbeacon i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#5b8dff,#2562e7);box-shadow:0 0 0 4px #fff,0 4px 12px rgba(37,98,231,.5)}
.dbeacon:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,98,231,.5);animation:ring 1.6s ease-out infinite}
.dbeacon.on{opacity:1}
.dtip{position:absolute;z-index:9;background:linear-gradient(160deg,#2562e7,#3f6fe0);color:#fff;border-radius:16px;padding:16px 18px 12px;box-shadow:0 24px 50px rgba(28,34,48,.3);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.dtip.on{opacity:1;transform:none;pointer-events:auto}
.dt-arr{position:absolute;top:-7px;width:16px;height:16px;background:#2a64e6;transform:rotate(45deg);border-radius:3px}.dtip.up .dt-arr{top:auto;bottom:-7px;background:#3b6de2}
.dtip p{position:relative;margin:0 0 12px;font-size:14px;line-height:1.5;font-weight:500}
.dt-f{position:relative;display:flex;align-items:center;gap:10px}.dt-f span{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:600}
.dt-back{border:0;background:rgba(255,255,255,.14);color:#fff;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:15px}
.dt-next{margin-left:auto;border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:9px;cursor:pointer}.dt-next:hover{background:#eaf1fe}
.dintro{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(246,248,252,.55);backdrop-filter:blur(3px);transition:opacity .3s}
.demo.started .dintro{opacity:0;pointer-events:none}
.di-card{text-align:center;background:#fff;border:1px solid var(--ln);border-radius:24px;padding:28px 34px;box-shadow:0 30px 70px rgba(28,34,48,.16)}
.di-rb{width:86px;margin:0 auto 10px;animation:fl 4s ease-in-out infinite}.dir{width:86px}.di-card b{display:block;font-size:20px;color:var(--ink)}.di-card small{display:block;color:var(--mu);margin:4px 0 16px}
.dprog{height:4px;background:#eef1f6}.dprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2562e7,#5b8dff);transition:width .4s}
.dnote{text-align:center;color:var(--mu);font-size:14px;margin-top:18px}.dnote a{color:var(--brand);font-weight:700}
.demo.full{position:fixed;inset:12px;z-index:120;border-radius:18px}.demo.full .tstage{height:calc(100% - 38px - 52px - 4px)}
@media (max-width:760px){.dstrip .btn{display:none}.dstrip{font-size:13px;padding:10px 14px}.demo .tstage{height:500px}.di-card{padding:22px}}
@media (max-width:760px){.sbapp,.sbapp.mini{grid-template-columns:1fr}.dstrip>span{display:block}}
@media (max-width:760px){.adg{grid-template-columns:1fr}.donut svg{width:120px}}
/* ---------- demo mode switch ---------- */
.dmode{display:flex;width:max-content;max-width:100%;margin:0 auto 22px;padding:5px;gap:4px;border-radius:999px;background:#fff;border:1px solid var(--ln);box-shadow:0 6px 18px -10px rgba(28,34,48,.25)}
.dmode button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--mu);padding:10px 18px;border-radius:999px;cursor:pointer;transition:.2s}
.dmode button svg{width:18px;height:18px}
.dmode button.on{background:#2562e7;color:#fff;box-shadow:0 6px 16px -6px rgba(37,98,231,.6)}
html[data-theme=dark] .dmode{background:#141b2d;border-color:#2a3550}

/* ---------- phone demo ---------- */
.mdemo{display:flex;align-items:center;justify-content:center;gap:48px;padding:10px 0 6px}
.mph{position:relative;width:310px;flex:none;border-radius:50px;padding:11px;background:#0f1522;box-shadow:0 40px 80px -30px rgba(28,34,48,.55),inset 0 0 0 2px #2b3446}
.mph-in{position:relative;height:640px;border-radius:40px;overflow:hidden;background:linear-gradient(180deg,#eef3ff 0,#f4f2ff 55%,#f7f8fc 100%);font-size:12px;color:#0f172a}
.mst{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 6px;font-size:13px}
.mst b{font-weight:700}.mnotch{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#0f1522}
.msi{display:flex;gap:3px;align-items:flex-end}.msi i{width:3px;background:#0f172a;border-radius:1px}.msi i:nth-child(1){height:5px}.msi i:nth-child(2){height:7px}.msi i:nth-child(3){height:9px}.msi u{width:20px;height:9px;border:1.5px solid #0f172a;border-radius:3px;margin-left:5px;text-decoration:none;position:relative}.msi u:after{content:"";position:absolute;inset:1px 4px 1px 1px;background:#0f172a;border-radius:1px}
.mscreens{position:relative;height:calc(100% - 100px)}
.mscreen{position:absolute;inset:0;padding:6px 14px 0;opacity:0;transform:translateX(16px);transition:opacity .35s,transform .35s;pointer-events:none}
.mhd{display:flex;align-items:flex-start;justify-content:space-between;margin:6px 2px 10px}.mhd b{font-size:19px;font-weight:800;letter-spacing:-.02em;display:block}.mhd small{color:#64748b;font-size:11px}
.mon{display:inline-flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.06)}.mon i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.mdemo .ma-sr{display:flex;align-items:center;gap:7px;background:#fff;border-radius:12px;padding:9px 11px;color:#94a3b8;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.mdemo .ma-sr svg{width:13px;height:13px}
.mtb{display:flex;gap:2px;background:#e9eef8;border-radius:12px;padding:3px;margin:10px 0 6px}.mtb span{flex:1;text-align:center;padding:6px 0;border-radius:9px;font-size:10.5px;font-weight:700;color:#64748b}.mtb span.on{background:#fff;color:#1d4ed8;box-shadow:0 1px 3px rgba(0,0,0,.08)}.mtb i{font-style:normal;font-size:9px;background:#dbe6fb;color:#1d4ed8;border-radius:999px;padding:1px 5px;margin-left:2px}.mtb .al i{background:#fee2e2;color:#dc2626}
.mql{display:grid}
.mq{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(15,23,42,.06)}
.mq-new{background:#fff;border-radius:14px;border:0;box-shadow:0 8px 20px -10px rgba(37,98,231,.45);padding:10px 8px;margin:2px -4px 4px}
.mav{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none}.mav i{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;border:2px solid #fff}.mav i svg{width:8px;height:8px}.mav.s{width:32px;height:32px;font-size:10px}
.mqm{flex:1;min-width:0}.mqm b{display:block;font-size:12.5px;font-weight:700}.mqm small{display:block;color:#64748b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mqr{display:grid;justify-items:end;gap:4px}.mqr small{font-size:10px;color:#94a3b8}.mqr em{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}
.mb-new{background:#2562e7;color:#fff}.mb-ok{background:#dcfce7;color:#16a34a}.mb-ok svg{width:10px;height:10px}.mb-bot{background:#eef3fd}.mb-bot svg{width:14px;height:13px}.mb-al{background:#fee2e2;color:#dc2626}
.mwhy{margin-top:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:10px 12px}.mwhy b{display:block;font-size:11.5px;color:#9a3412}.mwhy small{font-size:11px;color:#7c2d12}
.mch{display:flex;align-items:center;gap:9px;padding:4px 2px 10px;border-bottom:1px solid rgba(15,23,42,.07)}.mbk{font-size:16px;color:#1d4ed8}.mch b{display:block;font-size:13px}.mch small{font-size:10px;color:#64748b}
.mwall{display:flex;flex-direction:column;gap:7px;padding:10px 0;height:calc(100% - 120px);overflow:hidden}
.mday{align-self:center;font-size:9.5px;font-weight:700;color:#64748b;background:#fff;border-radius:999px;padding:3px 9px}
.mz-m{max-width:80%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.4;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}.mz-m small{display:block;font-size:9px;color:#94a3b8;margin-top:3px}
.mz-m.in{align-self:flex-start;border-bottom-left-radius:5px}
.mz-m.out{align-self:flex-end;background:#1d4ed8;color:#fff;border-bottom-right-radius:5px}.mz-m.out small{color:#c7d6fb}
.mtag{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#c7d6fb;margin-bottom:3px}.mtag svg{width:12px;height:11px;--brand:#fff;--logo:#fff;--rbfill:#1d4ed8}
.mz-m.me{background:#0f172a}
.msys{align-self:center;font-size:10px;font-weight:700;color:#9a3412;background:#ffedd5;border-radius:999px;padding:4px 10px}.msys.ok{color:#15803d;background:#dcfce7;display:flex;gap:4px;align-items:center}.msys.ok svg{width:10px;height:10px}
.mtake{position:absolute;left:14px;right:14px;bottom:8px;text-align:center}.mtake button{width:100%;border:0;background:#1d4ed8;color:#fff;font:inherit;font-weight:800;font-size:13px;padding:12px;border-radius:14px;box-shadow:0 10px 22px -10px rgba(29,78,216,.8)}.mtake small{display:block;font-size:10px;color:#64748b;margin-top:5px}
.mcomp{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 7px 7px 14px;color:#94a3b8;box-shadow:0 1px 3px rgba(0,0,0,.08)}.mcomp span{flex:1}.mcomp b{width:30px;height:30px;border-radius:50%;background:#1d4ed8;color:#fff;display:grid;place-items:center}.mcomp b svg{width:14px;height:14px}
.mnav{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.92);border-radius:22px;padding:7px;box-shadow:0 6px 18px -8px rgba(28,34,48,.25)}.mnav span{display:inline-flex;align-items:center;gap:5px;color:#64748b;font-weight:700;font-size:11px;padding:6px 12px;border-radius:14px}.mnav span.on{background:#e3ebfd;color:#1d4ed8}.mnav svg{width:16px;height:16px}
.mpush{position:absolute;z-index:5;left:10px;right:10px;top:44px;display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.96);border-radius:18px;padding:10px 12px;box-shadow:0 14px 30px -12px rgba(28,34,48,.45);transform:translateY(-140%);opacity:0;transition:.45s cubic-bezier(.2,.9,.3,1.2)}
.mpi{width:30px;height:30px;border-radius:9px;background:#eef3fd;display:grid;place-items:center;flex:none}.mpi svg{width:22px;height:20px}
.mpush b{display:block;font-size:11.5px}.mpush small{display:block;font-size:11px;color:#475569;line-height:1.3}.mpush em{font-style:normal;font-size:10px;color:#94a3b8;align-self:flex-start}
.mbeacon{position:absolute;z-index:6;width:30px;height:30px;margin:-15px 0 0 -15px}.mbeacon i{position:absolute;inset:6px;border-radius:50%;background:#2562e7;box-shadow:0 0 0 0 rgba(37,98,231,.6);animation:mbp 1.6s infinite}.mbeacon:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
@keyframes mbp{70%{box-shadow:0 0 0 14px rgba(37,98,231,0)}100%{box-shadow:0 0 0 0 rgba(37,98,231,0)}}
/* step states */
.mdemo .ms-queue{opacity:1;transform:none}
.st1 .mpush{transform:none;opacity:1}.st1 .mbeacon{left:88%;top:15%}
.st2 .ms-queue,.st3 .ms-queue,.st4 .ms-queue,.st5 .ms-queue{opacity:0}
.st2 .ms-chat,.st4 .ms-chat,.st5 .ms-chat{opacity:1;transform:none}
.st2 .mnav,.st4 .mnav,.st5 .mnav{display:none}
.st2 .mz-m.in:nth-of-type(n+3),.st2 .msys,.st2 .mz-m.me,.st2 .mtake{display:none}
.st2 .mbeacon{left:30%;top:54%}
.st3 .ms-alerts{opacity:1;transform:none}.st3 .mbeacon{left:50%;top:42%}
.st4 .mz-m.me,.st4 .msys.ok,.st4 .mcomp{display:none}.st4 .mbeacon{left:50%;top:92.5%}
.st5 .mtake{display:none}.st5 .mbeacon{left:85%;top:94%}
.st2 .mcomp,.st3 .mcomp{display:none}
/* step card */
.mtip{width:340px;flex:none;background:#fff;border:1px solid var(--ln);border-radius:22px;padding:22px 22px 18px;box-shadow:0 30px 60px -30px rgba(28,34,48,.35)}
.mt-n{font-size:12px;font-weight:800;color:#2562e7;text-transform:uppercase;letter-spacing:.06em}
.mtip b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;color:var(--ink)}
.mtip p{color:var(--mu);font-size:15px;line-height:1.55;margin:0}
.mt-f{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.mt-dots{display:flex;gap:6px}.mt-dots i{width:7px;height:7px;border-radius:50%;background:#d6deec}.mt-dots i.on{width:20px;border-radius:4px;background:#2562e7}
.mt-btns{display:flex;gap:8px}.mt-b{width:40px;height:40px;border-radius:12px;border:1px solid var(--ln);background:#fff;font-size:16px;cursor:pointer;color:var(--ink)}
.mt-nx{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:12px;border:0;background:#2562e7;color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer}.mt-nx svg{width:15px;height:15px}
html[data-theme=dark] .mtip{background:#141b2d;border-color:#2a3550}html[data-theme=dark] .mt-b{background:#1b2540;border-color:#2a3550}
@media (max-width:760px){.mdemo{flex-direction:column;gap:18px}.mph{width:290px}.mph-in{height:600px}.mtip{width:100%;max-width:400px}.dmode button{padding:9px 13px;font-size:13px}}

.mdemo .ma-sr span{white-space:nowrap}
.mdemo .mq{min-width:0}.mdemo .mqm{overflow:hidden}
.mdemo .mscreen *{box-sizing:border-box}

/* which demo shows: phones get the app, larger screens the dashboard, the switch overrides */
#dashboard .mdemo{display:none}
@media (max-width:760px){#dashboard .mdemo{display:flex}#dashboard .dwrap{display:none!important}}
#dashboard.dm-app .mdemo{display:flex}#dashboard.dm-app .dwrap{display:none!important}
#dashboard.dm-web .mdemo{display:none}#dashboard.dm-web .dwrap{display:block!important}
.mbeacon{border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;transition:left .4s,top .4s}
.mt-b:disabled{opacity:.4;cursor:default}
.mdemo .mscreen{pointer-events:none}
.st4 .mwall,.st5 .mwall{justify-content:flex-end}
.hvwrap{position:relative}
/* ===== Option 3 hardening ===== */
.v3card{display:flex!important;flex-direction:column!important;width:100%}
.v3card>*{flex:none;width:100%}
.v3h{flex-wrap:nowrap;gap:10px}.v3live{white-space:nowrap;flex:none}.v3live i{flex:0 0 8px}
.v3who{flex-wrap:nowrap}.v3who b{white-space:nowrap}.v3who small{white-space:nowrap}
.v3body .wa-body{width:100%}.v3body .msg{flex:none}
.v3foot b,.v3foot small{white-space:nowrap}
@media (max-width:400px){.v3ch button{padding:7px 9px;font-size:12px}.v3live{font-size:11px}.v3foot div{padding:12px 6px}.v3foot b{font-size:15px}.v3foot small{font-size:11px}}

/* ===== floating mascot: bubble beside the robot, never over content ===== */
.mascot{flex-direction:row;align-items:flex-end}
.ms-bub{position:absolute;right:92px;bottom:6px;width:250px;padding:14px 16px;border-radius:18px 18px 6px 18px;font-size:13.5px}
.ms-bub b{font-size:14px}.ms-bub span{margin-bottom:10px}.ms-bub .btn{padding:9px 12px;font-size:13.5px}
@media (max-width:640px){.ms-bub{right:0;bottom:76px;width:min(260px,calc(100vw - 28px))}}

/* ===== theme toggle ===== */
.thm{width:40px;height:40px;border-radius:12px;border:1px solid var(--ln);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none}
.thm:hover{border-color:var(--brand);color:var(--brand)}.thm svg{width:18px;height:18px}.thm .i-sun{display:none}
html[data-theme=dark] .thm .i-sun{display:block}html[data-theme=dark] .thm .i-moon{display:none}
.mthm{display:none}
@media (max-width:1080px){.hr .thm{display:none}.mthm{display:block;margin-left:auto}.mthm+.burger{margin-left:8px}}
.top .w .hr{gap:8px}

/* ===== dark mode ===== */
html[data-theme=dark]{color-scheme:dark;--bg:#111827;--ln:#243049;--tx:#a9b4c8;--mu:#7f8aa1;--ink:#eef2fb;--brandS:#18264a;--waBg:#132119;--surface:#161e30;--deep:#0a0f1c;--logo:#eef2fb}
html[data-theme=dark] body{background:#0d1322;color:var(--tx)}
html[data-theme=dark] :is(.top){background:rgba(13,19,34,.85)}
html[data-theme=dark] .top.mopen{background:#0d1322}
html[data-theme=dark] :is(.mw,.btn.bl,.chip,.try,.reg button.on,.seg button.on,.burger,.ptabs button,.float,.card,.lsteps button,.node i,.lcenter,.tl div,.calc,.ic,.plan,.cmp,.fm,.fm input,.fm select,.fm textarea,.note-card,.about-card,.cinfo,.intg,.pick,.post,.tl-i,.hc,.hsearch,.oth,.ms-bub,.drawer,.di-card,.v1tag,.hopt,.tstep,.mbar,.dg a:hover){background-color:var(--surface)}
html[data-theme=dark] :is(.btn.bl){color:var(--ink);border-color:var(--ln)}
html[data-theme=dark] :is(.pg,.calc .co,footer,.stats3 div,.mfeat:not(.mcalc),.btn.bk,.v3float,.ttip,.skip){background:var(--deep);border:1px solid var(--ln)}
html[data-theme=dark] footer{border-width:1px 0 0}
html[data-theme=dark] .mcalc{background:linear-gradient(160deg,#18264a,#161e30);border-color:var(--ln)}
html[data-theme=dark] .mquote{background:#132119}html[data-theme=dark] .mq-chat .q{background:#1f2a3f;color:var(--ink)}html[data-theme=dark] .mq-chat .q.me{background:#1d3b2a}
html[data-theme=dark] .q{color:#dfe7f5}
html[data-theme=dark] .bacol.b{background:#24141a;border-color:#4a2530}html[data-theme=dark] .bacol.a{background:#11251b;border-color:#1f4532}
html[data-theme=dark] .prose{color:var(--tx)}html[data-theme=dark] .prose blockquote{background:var(--surface)}
html[data-theme=dark] .pt-img{background:linear-gradient(135deg,#18264a,#161e30)}
html[data-theme=dark] .lg .lgb{--rbfill:transparent}
html[data-theme=dark] .ms-bot{background:#eef2fb}
html[data-theme=dark] .ck svg{background:#14331f}
html[data-theme=dark] .tag-live{background:#14331f;color:#4ade80}
html[data-theme=dark] .kbtip,html[data-theme=dark] .draft{background:#2f2710;color:#facc15}
html[data-theme=dark] .y{color:#4ade80}html[data-theme=dark] .n{color:#4b5873}
html[data-theme=dark] .cmp th{background:#111827}
html[data-theme=dark] input[type=range]{background:linear-gradient(90deg,var(--brand) var(--p,50%),var(--ln) var(--p,50%))}
html[data-theme=dark] .hero{background:radial-gradient(900px 500px at 85% 0%,rgba(91,141,255,.16),transparent 60%),radial-gradient(700px 400px at 10% 10%,rgba(37,98,231,.14),transparent 60%)}
html[data-theme=dark] .mscrim{background:rgba(0,0,0,.4)}
html[data-theme=dark] .v2chip{background:rgba(22,30,48,.9);border-color:var(--ln)}
/* product screens stay light, like real screenshots */
html[data-theme=dark] :is(.sbapp,.demo,.twin,.app,.dash,.phone,.v1ph,.v1win,.calc .ci){--ink:#1c2230;--tx:#4a5568;--mu:#8a94a6;--ln:#e6eaf2;--bg:#f6f8fc;--brandS:#eaf1fe;--waBg:#e9f5ee;--logo:#313131;color:var(--tx)}
html[data-theme=dark] :is(.demo,.twin,.app,.dash,.v1win){border-color:#2a3550;box-shadow:0 40px 90px rgba(0,0,0,.45)}
html[data-theme=dark] .calc .ci{background:#fff}
html[data-theme=dark] .dnote{color:var(--mu)}
/* Option 3 card in dark */
html[data-theme=dark] .v3card{background:rgba(22,30,48,.88);border-color:rgba(255,255,255,.06);box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 0 1px var(--ln)}
html[data-theme=dark] .v3ch{background:#0f1626}html[data-theme=dark] .v3ch button.on{background:#243049;color:#fff}
html[data-theme=dark] .v3body .msg.in{background:#222c42;color:#e6ebf5}html[data-theme=dark] .v3body .msg.in small{color:#8592ab}
html[data-theme=dark] .v3body .msg.sys{background:#2f2710;color:#facc15}
html[data-theme=dark] .v3who .av{background:#eef2fb}
html[data-theme=dark] .v3foot,html[data-theme=dark] .v3foot div,html[data-theme=dark] .v3h{border-color:var(--ln)}
html[data-theme=dark] .mm,html[data-theme=dark] .mp .mstrip{background:#111827;border-color:var(--ln)}
html[data-theme=dark] .mw a:not(.mfeat):not(.mall):hover{background:#1c2640}
html{transition:background-color .2s}

/* logo: robot sits on the text baseline like the real logo */
.lg{display:inline-block;white-space:nowrap;line-height:1}
.lg>span{display:inline}
.lg .lgb{display:inline-block;height:1.42em;width:auto;vertical-align:-.45em;margin:0 -.02em 0 .01em;transform:none}
/* mega menu calculator card */
.mcalc{justify-content:flex-start;gap:8px}
.mc-n{position:static;display:block;font-size:40px;line-height:1;margin:4px 0 6px}
.mc-n:after{content:"at risk each month";display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mu);text-transform:uppercase}
.mcalc .mf-go{margin-top:auto}
.lg{font-weight:500;letter-spacing:-.035em}
.lg .lgb{height:1.62em;vertical-align:-.42em;margin:0 -.03em 0 -.01em}
.lg .lgb .rb-face,.lg .lgb line{stroke-width:5.5}.lg .lgb .rb-ring{stroke-width:6.5}.lg .lgb circle[r="7"]{r:6}
html[data-theme=dark] :is(.sbapp,.demo,.twin,.app,.dash,.phone,.v1ph,.v1win,.calc .ci){--surface:#fff}
html[data-theme=dark] :is(.msr,.hmr,.abr,.avb,.dir,.v2r,.apr,.rlb,.lib){--logo:#313131;--rbfill:#fff}
.login,.reg button,.nav>li>button,.nav>li>a{white-space:nowrap}
@media (max-width:1360px) and (min-width:1081px){.top .w{gap:16px}.nav>li>button,.nav>li>a{padding:10px 10px}.top .btn{padding:10px 14px}.reg{display:none}}
@media (max-width:640px){.top .login{display:none}.mthm .thm{width:44px;height:44px}}

/* ===== theme switch: sliding sun/moon pill ===== */
.thm{position:relative;width:60px;height:32px;border-radius:999px;border:1px solid var(--ln);background:linear-gradient(180deg,#e9f1ff,#f7faff);padding:0;display:block;overflow:hidden;transition:background .5s,border-color .3s}
.thm:hover{border-color:var(--brand)}
.thm .thk{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(28,34,48,.18);display:grid;place-items:center;color:#f59e0b;transition:transform .5s cubic-bezier(.5,1.6,.4,.8),background .5s,color .5s;z-index:2}
.thm .thk svg{position:absolute;width:15px;height:15px;transition:opacity .35s,transform .5s}
.thm .i-sun{display:block!important;opacity:1;transform:none}.thm .i-moon{display:block!important;opacity:0;transform:rotate(-90deg) scale(.6)}
.thm .ths{position:absolute;right:12px;top:9px;width:3px;height:3px;border-radius:50%;background:#c9d4ee;opacity:0;transition:opacity .5s}.thm .ths.s2{right:20px;top:18px;width:2px;height:2px}
html[data-theme=dark] .thm{background:linear-gradient(180deg,#1b2540,#0f1626);border-color:#2a3550}
html[data-theme=dark] .thm .thk{transform:translateX(28px);background:#e6ebf7;color:#2562e7}
html[data-theme=dark] .thm .i-sun{opacity:0;transform:rotate(90deg) scale(.6)}html[data-theme=dark] .thm .i-moon{opacity:1;transform:none}
html[data-theme=dark] .thm .ths{opacity:1;background:#fff}
.thm:focus{outline:0}.thm:focus-visible{outline:3px solid rgba(37,98,231,.45);outline-offset:2px}
.mthm .thm{width:60px;height:32px}
/* smooth theme change */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theming *,html.theming *:before,html.theming *:after{transition:none!important}
html.fade body,html.fade body *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s,stroke .45s!important}

/* ===== playground: scanning + knowledge found ===== */
.kbx{display:none;gap:8px;margin-top:14px;position:relative}.kbx.on{display:grid}
.kf{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;animation:kfin .45s cubic-bezier(.2,.8,.2,1) both}
.kf i{flex:0 0 30px;height:30px;border-radius:9px;background:rgba(37,98,231,.3);display:grid;place-items:center;font-style:normal;font-size:15px}
.kf span{flex:1;min-width:0}.kf b{display:block;font-size:13px}.kf small{display:block;font-size:12.5px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf em{font-style:normal;color:#4ade80;font-weight:800}
@keyframes kfin{from{opacity:0;transform:translateX(-16px) scale(.97)}}
.steps3 li{position:relative;overflow:hidden}
.steps3 li.on:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,#5b8dff,transparent);animation:sweep 1s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.steps3 li.on i{border-color:#5b8dff;animation:pu3 1s infinite}@keyframes pu3{50%{box-shadow:0 0 0 6px rgba(91,141,255,.2)}}
.scanl{position:absolute;left:0;right:0;top:0;height:60px;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,rgba(91,141,255,.35),transparent)}
.scanning .scanl{opacity:1;animation:scan 1.6s ease-in-out infinite}@keyframes scan{0%{top:0}50%{top:calc(100% - 60px)}100%{top:0}}
.scanning .wa-top small:after{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
.pg .sugg button{animation:pop .35s both}.pg .sugg button:nth-child(2){animation-delay:.08s}.pg .sugg button:nth-child(3){animation-delay:.16s}.pg .sugg button:nth-child(4){animation-delay:.24s}

/* ===== learning loop faster ===== */
.ring{animation-duration:14s!important}
.lviz:after{content:"";position:absolute;left:50%;top:8%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(37,98,231,.18);offset-path:circle(42% at 50% 50%);transform-origin:50% 50%;animation:orbit 4s linear infinite}
@supports not (offset-path:circle(1px)){.lviz:after{display:none}}
.lviz:after{left:0;top:0;offset-path:circle(42% at 50% 50%);offset-distance:0}
@keyframes orbit{to{offset-distance:100%}}
.lsteps button,.node i,.lcenter b{transition-duration:.18s!important}
.lcenter b{animation:none}.lcenter.flip b{animation:pop .3s}

/* ===== before / after player ===== */
.ba .tl>div{opacity:.25;transform:translateY(6px);transition:opacity .45s,transform .45s,background .3s}
.ba .tl>div.in{opacity:1;transform:none}
.ba .bacol.b .tl>div.miss.in{background:#fff;box-shadow:inset 3px 0 0 #ef4444}
.ba .bacol.a .tl>div.in{box-shadow:inset 3px 0 0 #16a34a}
.ba .res{opacity:0;transform:scale(.96);transition:opacity .4s,transform .4s;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px}
.ba .res.in{opacity:1;transform:none}.bacol.b .res{background:#fee2e2;color:#991b1b}.bacol.a .res{background:#dcfce7;color:#166534}
.bacol h3{display:flex;align-items:center;gap:12px}
.baclock{display:inline-grid;place-items:center;min-width:72px;padding:6px 10px;border-radius:10px;background:var(--ink);color:#fff;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bacol.b.done .baclock{background:#b91c1c}.bacol.a.done .baclock{background:#15803d}
.baact{grid-column:1/-1;text-align:center;margin-top:6px}.baact .btn svg{width:16px;height:16px}
html[data-theme=dark] .ba .bacol.b .tl>div.miss.in{background:var(--surface)}
html[data-theme=dark] .bacol.b .res{background:#3a1519;color:#fca5a5}html[data-theme=dark] .bacol.a .res{background:#123321;color:#86efac}
html[data-theme=dark] .baclock{background:#243049}

/* ===== first-visit intro ===== */
.intro{display:none}
html.sb-intro .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:300;color:#fff;clip-path:circle(150% at var(--ix,50%) var(--iy,50%));transition:clip-path .78s cubic-bezier(.7,0,.2,1)}
.intro.out{clip-path:circle(0px at var(--ix) var(--iy))}
.in-bg{position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 40%,#2a56c9,#1c2230 62%,#0d1322)}
.in-bg:after{content:"";position:absolute;inset:0;opacity:.045;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 120 112'%3E%3Cg fill='none' stroke='%23fff' stroke-width='6'%3E%3Cpath d='M40 27H80a29 29 0 0 1 0 58H74L60 101V85H42A29 29 0 0 1 14 50'/%3E%3Crect x='22' y='40' width='74' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E");animation:bgdrift 12s linear infinite}
@keyframes bgdrift{to{background-position:140px 70px}}
.in-c{position:relative;text-align:center;padding:24px}
.in-rb{position:relative;width:150px;height:140px;margin:0 auto 18px}
.inr{position:relative;z-index:2;width:150px;--logo:#313131;--rbfill:#fff;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));opacity:0}
.intro.play .inr{animation:drop .9s cubic-bezier(.3,1.6,.5,1) .15s forwards}
@keyframes drop{0%{opacity:0;transform:translateY(-120px) scale(.6)}60%{opacity:1;transform:translateY(8px) scale(1.06,.94)}100%{opacity:1;transform:none}}
.intro.play .inr .rb-ant{animation:wig .9s ease-in-out 1s 2}
.intro.play .inr .rb-eye{animation:blink 1.2s 1.1s 2}
.in-rip{position:absolute;left:50%;top:55%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(147,180,255,.5);opacity:0}
.intro.play .in-rip{animation:rip 1.6s ease-out .8s infinite}.intro.play .in-rip.r2{animation-delay:1.3s}
@keyframes rip{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.in-hi{position:absolute;z-index:3;right:-34px;top:0;background:#fff;color:#1c2230;font-weight:800;font-size:16px;padding:7px 12px;border-radius:14px 14px 14px 4px;box-shadow:0 10px 24px rgba(0,0,0,.25);opacity:0}
.intro.play .in-hi{animation:hi .45s cubic-bezier(.3,1.6,.5,1) 1s forwards}@keyframes hi{from{opacity:0;transform:scale(.4) translate(-20px,20px)}to{opacity:1;transform:none}}
.in-ey{display:block;font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#9fb7ff;opacity:0}
.intro.play .in-ey{animation:fup .5s ease .75s forwards}
.in-w{margin:8px 0 10px;font-size:clamp(46px,8vw,86px);font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1}
.in-w span{display:inline-block;opacity:0;transform:translateY(24px)}
.intro.play .in-w span{animation:fup .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
.in-w span:nth-child(4){color:#7fa6ff}
.in-t{margin:0 auto;max-width:440px;font-size:17px;color:rgba(255,255,255,.75);opacity:0}.intro.play .in-t{animation:fup .5s ease 1.6s forwards}
@keyframes fup{to{opacity:1;transform:none}}
.in-bar{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.15);margin:26px auto 0;overflow:hidden}.in-bar i{display:block;height:100%;width:0;background:#7fa6ff}
.intro.play .in-bar i{animation:bar 3s linear .2s forwards}@keyframes bar{to{width:100%}}
.in-skip{position:absolute;z-index:2;top:20px;right:20px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px;cursor:pointer}.in-skip:hover{background:rgba(255,255,255,.16)}
.intro.out .in-c{transform:scale(.85);opacity:0;transition:.5s}
.ms-bot.land{animation:land .8s cubic-bezier(.3,1.6,.5,1)}@keyframes land{0%{transform:scale(.3)}100%{transform:none}}
@media (max-width:640px){.in-rb{width:120px;height:112px}.inr{width:120px}.in-rip{width:120px;height:120px;margin:-60px 0 0 -60px}.in-t{font-size:15px}}

/* playground: long facts never push the phone out */
.pg{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.pg>div:first-child{min-width:0}
.pg .phone{position:sticky;top:96px;justify-self:end}
.kf small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.kf span{overflow:hidden}
.pg .sugg{left:10px!important;right:10px!important;max-height:46%;overflow:hidden;align-content:flex-end}
.pg .sugg button{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1080px){.pg{grid-template-columns:minmax(0,1fr)}.pg .phone{position:relative;top:auto;justify-self:center}}

/* before/after timeline scrubber */
.bascrub{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin-top:8px;padding:16px 20px;background:#fff;border:1px solid var(--ln);border-radius:20px;box-shadow:0 18px 40px rgba(28,34,48,.06)}
.bsp{flex:0 0 48px;height:48px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(37,98,231,.3);transition:transform .2s}.bsp:hover{transform:scale(1.06)}
.bsp svg{width:20px;height:20px}.bsp .ipa{display:none}.playing .bsp .ipa{display:block}.playing .bsp .ip{display:none}
.bsr{flex:1;min-width:0}
.bsr input{width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--brand) var(--p,0%),var(--ln) var(--p,0%))}
.bsl{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-weight:700;color:var(--mu)}
.bsd{flex:0 0 auto;text-align:center;padding:8px 14px;border-radius:14px;background:var(--bg);transition:.3s;min-width:120px}
.bsd b{display:block;font-size:22px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.bsd small{font-size:12px;color:var(--mu)}
.bsd.on{background:#dcfce7}.bsd.on b{color:#15803d}
.baact{display:none}
html[data-theme=dark] .bascrub{background:var(--surface)}html[data-theme=dark] .bsd.on{background:#123321}html[data-theme=dark] .bsd.on b{color:#4ade80}
@media (max-width:640px){.bascrub{flex-wrap:wrap;gap:12px;padding:14px}.bsr{flex:1 1 calc(100% - 64px)}.bsd{flex:1 1 100%;display:flex;align-items:baseline;justify-content:center;gap:8px}.bsl span:nth-child(3){display:none}}

/* demo on phones: scaled real dashboard, tooltip under it */
.demo.scaled .tstage{overflow:visible}
.demo.scaled .sbapp{transform-origin:0 0;position:absolute;left:0;top:0;grid-template-columns:56px 260px 1fr!important}
.demo.scaled .arail,.demo.scaled .alist{display:flex!important}
.demo.scaled .adg{grid-template-columns:1fr 1fr!important}
.demo.scaled .dtip{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:84px;width:auto!important;z-index:130}
.demo.scaled .dt-arr{display:none}
.demo.scaled .dbeacon{width:22px;height:22px;margin:-11px 0 0 -11px}.demo.scaled .dbeacon i{width:12px;height:12px}
.demo.scaled .dintro{position:absolute}
.demo.scaled .di-card{padding:18px 20px;margin:0 14px}.demo.scaled .di-card b{font-size:17px}.demo.scaled .di-rb,.demo.scaled .dir{width:60px}
.demo:not(.started) .dtip{display:none}
.demo.scaled.offscreen .dtip{opacity:0!important;pointer-events:none!important}
@media (max-width:640px){.bascrub{position:sticky;bottom:80px;z-index:20;box-shadow:0 16px 40px rgba(28,34,48,.18)}.bsd{display:none}}

/* playground phone: chat, chips and input stacked, nothing overlaps */
.pg .phone{display:flex;flex-direction:column}
.pg .phone .wa-top{flex:none}
.pg .phone .wa-body{flex:1 1 auto;height:auto!important;min-height:0;padding-bottom:8px}
.pg .sugg{position:static!important;flex:none;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;max-height:none!important;padding:6px 10px 8px!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.pg .sugg::-webkit-scrollbar{display:none}
.pg .sugg:empty{display:none}
.pg .sugg button{flex:none;max-width:none!important}
.pg .phone .wa-in{position:static;flex:none;margin:0 10px 12px}
.pg .phone .msg{flex:none}
/* knowledge is gathered in the background only */
.kbx{display:none!important}

/* ===== mega menu: text links, real logos only ===== */
.mw a:not(.mfeat):not(.mall){padding:12px 14px;border-radius:10px;gap:0}
.mw a:not(.mfeat):not(.mall) i{display:none}
.mw a:not(.mfeat):not(.mall) b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.mw a:not(.mfeat):not(.mall) b:after{content:"\2192";font-weight:400;opacity:0;transform:translateX(-4px);transition:.18s;color:var(--brand)}
.mw a:not(.mfeat):not(.mall):hover{background:var(--bg)}
.mw a:not(.mfeat):not(.mall):hover b{color:var(--brand)}
.mw a:not(.mfeat):not(.mall):hover b:after{opacity:1;transform:none}
.mw a[href*="#whatsapp"] i,.mw a[href*="#telegram"] i{display:grid!important;flex:0 0 30px;height:30px;border-radius:50%;margin-right:12px;color:#fff!important;background:#25d366!important;transform:none!important}
.mw a[href*="#telegram"] i{background:#229ed9!important}
.mw a[href*="#whatsapp"] i svg,.mw a[href*="#telegram"] i svg{width:16px;height:16px}
.mcol h6{letter-spacing:.02em;text-transform:none;font-size:13px;color:var(--mu);font-weight:600;margin-left:14px}
.mstrip span svg{display:none}
html[data-theme=dark] .mw a:not(.mfeat):not(.mall):hover{background:#1c2640}

/* ===== WhatsApp / Telegram toggle: sliding pill ===== */
.v3ch{position:relative;isolation:isolate}
.v3ch:before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--pw,0);transform:translateX(var(--px,0));border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(28,34,48,.08),0 4px 12px -4px rgba(28,34,48,.18);opacity:0;transition:transform .45s cubic-bezier(.65,0,.25,1),width .45s cubic-bezier(.65,0,.25,1),background .3s}
.v3ch.ready:before{opacity:1}
.v3ch.ready button.on{background:transparent!important;box-shadow:none!important}
.v3ch button{position:relative;transition:color .35s ease}
.v3ch button svg{transition:color .35s ease,transform .45s cubic-bezier(.65,0,.25,1)}
.v3ch button.on svg{transform:scale(1.12)}
.v3ch.noanim:before,.v3ch.noanim button,.v3ch.noanim button svg{transition:none!important}
html[data-theme=dark] .v3ch:before{background:#243049;box-shadow:none}
.v3body .msg.out,.v3body .typing{transition:background-color .45s ease}
.v3body.swap .wa-body{animation:v3swap .45s ease}
@keyframes v3swap{0%{opacity:1}35%{opacity:.35;transform:translateY(4px)}100%{opacity:1;transform:none}}

/* ===== theme switch lives bottom-left of the page ===== */
.hr .thm,.mthm{display:none!important}
.mthm+.burger{margin-left:auto}
.thfloat{position:fixed;left:22px;bottom:22px;z-index:70}
.thfloat .thm{display:block!important;width:64px;height:34px;box-shadow:0 8px 22px -8px rgba(28,34,48,.35),0 0 0 1px var(--ln);border:0}
.thfloat .thm .thk{width:26px;height:26px;top:4px;left:4px}
html[data-theme=dark] .thfloat .thm .thk{transform:translateX(30px)}
html.sb-intro .thfloat{display:none}
body.noscroll .thfloat{display:none}
@media (max-width:640px){.thfloat{left:14px;bottom:84px}}

/* ===== homepage video: same frame as the interactive dashboard ===== */
.vid{position:relative;border-radius:16px;overflow:hidden;background:#0f1626;aspect-ratio:16/9;box-shadow:0 40px 80px -30px rgba(28,34,48,.28),0 0 0 1px var(--ln);max-width:100%}
.vid video{display:block;width:100%;height:100%;object-fit:cover;background:#f6f8fc}
.vplay{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 10px rgba(37,98,231,.18),0 20px 40px rgba(28,34,48,.3);transition:transform .2s,box-shadow .2s}
.vplay:hover{transform:scale(1.06);box-shadow:0 0 0 14px rgba(37,98,231,.2),0 20px 40px rgba(28,34,48,.3)}
.vplay svg{width:30px;height:30px;margin-left:4px}
.vlen{position:absolute;left:16px;bottom:14px;background:rgba(28,34,48,.75);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none}
.vid.playing .vplay,.vid.playing .vlen{display:none}
@media (max-width:640px){.vplay{width:64px;height:64px;margin:-32px 0 0 -32px}.vplay svg{width:24px;height:24px}}

/* dark mode readability fixes */
.how .n{color:#fff!important}
html[data-theme=dark]{--mu:#93a0b8;--tx:#b7c1d3}
html[data-theme=dark] .btn.bw{background:#fff;color:#1c2230}
html[data-theme=dark] .cmp .n,html[data-theme=dark] .n:not(.how .n){color:#7d89a3}

/* ===== back to top ===== */
.totop{position:fixed;right:30px;bottom:118px;z-index:69;width:48px;height:48px;border-radius:50%;border:0;padding:0;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px -6px rgba(28,34,48,.28),0 0 0 1px var(--ln);opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1),visibility .3s,background .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand);color:#fff}
.totop:hover .tt-ring circle:first-child{stroke:rgba(255,255,255,.25)}.totop:hover .tt-fill{stroke:#fff}
.totop:focus-visible{outline:3px solid rgba(37,98,231,.45);outline-offset:3px}
.tt-ring{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
.tt-ring circle{fill:none;stroke-width:3}
.tt-ring circle:first-child{stroke:var(--ln)}
.tt-fill{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .15s linear}
.tt-arrow{position:relative;width:18px;height:18px;transition:transform .25s}
.totop:hover .tt-arrow{transform:translateY(-2px)}
.totop.go .tt-arrow{animation:ttgo .6s ease}
@keyframes ttgo{40%{transform:translateY(-10px);opacity:0}41%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
html[data-theme=dark] .totop{background:#18213a;color:#eef2fb}
body.noscroll .totop,html.sb-intro .totop{display:none}
@media (max-width:640px){.totop{right:max(18px,env(safe-area-inset-right,0px));bottom:176px;width:44px;height:44px}.tt-ring{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.totop,.tt-fill,.tt-arrow{transition:none;animation:none}}

/* ===== mobile menu: text links, real logos only ===== */
.dg a{padding:11px 6px;border-radius:10px;align-items:center}
.dg a i{display:none}
.dg a[href*="#whatsapp"] i,.dg a[href*="#telegram"] i{display:grid;flex:0 0 30px;height:30px;border-radius:50%;color:#fff;background:#25d366}
.dg a[href*="#telegram"] i{background:#229ed9}
.dg a[href*="#whatsapp"] i svg,.dg a[href*="#telegram"] i svg{width:16px;height:16px}
.dg a b{font-size:15.5px;font-weight:600}
.dg a small{font-size:13px}
.dg a:active{background:var(--bg)}

/* ===== WhatsApp chat button ===== */
.ms-bot{text-decoration:none}
.ms-wa{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px #fff;z-index:2}
.ms-wa svg{width:15px;height:15px}
.ms-pill{position:absolute;right:92px;bottom:13px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 20px 10px 18px;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;white-space:nowrap;box-shadow:0 14px 34px rgba(37,211,102,.32);transition:transform .25s,opacity .25s,box-shadow .25s}
.ms-pill:hover{transform:translateX(-3px);box-shadow:0 18px 40px rgba(37,211,102,.42)}
.ms-pill b{font-size:15px;line-height:1.1;color:#fff}
.ms-pill small{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.95}
.ms-pill small i{width:7px;height:7px;border-radius:50%;background:#d8ffe6;box-shadow:0 0 0 3px rgba(255,255,255,.25);animation:wapulse 2s ease-in-out infinite}
@keyframes wapulse{50%{opacity:.4}}
.mascot.bub-on .ms-pill{opacity:0;pointer-events:none;transform:translateX(8px)}
.ms-bub .bwa{background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;border:0}
.ms-bub .bwa:hover{background:#1ebe5b}
.ms-bub .bwa svg{width:17px;height:17px}
.ms-alt{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:13px;font-weight:600;color:var(--brand);text-decoration:none}
.ms-alt svg{width:14px;height:14px}
html[data-theme=dark] .ms-wa{box-shadow:0 0 0 3px #0f1524}
@media (max-width:900px){.ms-pill{display:none}}
@media (prefers-reduced-motion:reduce){.ms-pill small i{animation:none}}

/* ===== blog ===== */
.pt-img img.pt-ph{width:100%;height:100%;object-fit:cover;display:block}
.bcats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.bcats a{padding:8px 14px;border-radius:999px;border:1px solid var(--ln);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:.2s}
.bcats a:hover{border-color:var(--brand);color:var(--brand)}
.bcats a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pgn{margin-top:36px;display:flex;justify-content:center}
.pgn ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.pgn a,.pgn span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--ln);font-weight:600;color:var(--ink);text-decoration:none}
.pgn .current{background:var(--brand);border-color:var(--brand);color:#fff}
.pgn a:hover{border-color:var(--brand);color:var(--brand)}
.crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:600}
.crumb a{color:var(--brand);text-decoration:none}.crumb span{color:var(--mu)}
.art-hero{max-width:900px;margin:0 auto 36px;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.prose img{max-width:100%;height:auto;border-radius:16px}
.prose .art-fig{margin:28px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--ln);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--bg);color:var(--ink)}
.prose .art-faq{border:1px solid var(--ln);border-radius:14px;margin:0 0 10px;background:var(--surface,#fff)}
.prose .art-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.prose .art-faq summary::-webkit-details-marker{display:none}
.prose .art-faq summary:after{content:"+";font-size:20px;line-height:1;color:var(--brand);transition:transform .2s}
.prose .art-faq[open] summary:after{transform:rotate(45deg)}
.prose .art-faq>div{padding:0 18px 6px}
.prose h1{font-size:30px;margin:38px 0 12px}
.prose h4{font-size:18px;margin:24px 0 8px}
.rel{padding-top:20px}.rel-h{font-size:26px;margin:0 0 20px}
html[data-theme=dark] .prose th{background:#18203a}

/* ===== blog post lead form (Absoluit blog publisher plugin) ===== */
.prose .abp-lead-form-wrapper{margin:40px 0 10px;padding:28px;border:1px solid var(--ln);border-radius:22px;background:linear-gradient(180deg,var(--brandS),transparent 70%)}
.prose .abp-lead-form-header h3{margin:0 0 4px;font-size:22px}
.prose .abp-lead-form-header p{margin:0 0 18px;color:var(--mu);font-size:15px}
.prose .abp-lead-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prose .abp-lead-form-group{display:flex;flex-direction:column;gap:6px;margin:0}
.prose .abp-lead-form-group.full-width{grid-column:1/-1}
.prose .abp-lead-form-label{font-size:14px;font-weight:600;color:var(--ink)}
.prose .abp-lead-form-required{color:#e5484d}
.prose .abp-lead-form-input,.prose .abp-lead-form-textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--surface,#fff);color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.prose .abp-lead-form-textarea{min-height:110px;resize:vertical}
.prose .abp-lead-form-input:focus,.prose .abp-lead-form-textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,98,231,.12)}
.prose .abp-lead-form-footer{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prose .abp-lead-form-submit{border:0;cursor:pointer;padding:13px 22px;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:15px;box-shadow:0 10px 24px rgba(37,98,231,.25);transition:transform .2s}
.prose .abp-lead-form-submit:hover{transform:translateY(-1px)}
.prose .abp-lead-form-message{font-size:14px}
.prose .abp-lead-form-wrapper p:empty,.prose .abp-lead-form-wrapper br{display:none}
html[data-theme=dark] .prose .abp-lead-form-wrapper{background:linear-gradient(180deg,#16203a,transparent 70%)}
html[data-theme=dark] .prose .abp-lead-form-input,html[data-theme=dark] .prose .abp-lead-form-textarea{background:#0f1524}
@media (max-width:640px){.prose .abp-lead-form-grid{grid-template-columns:1fr}.prose .abp-lead-form-wrapper{padding:20px}}

/* old site's WhatsApp widget: the new chat button replaces it */
body.sb .wa-widget,body.sb .wa-content{display:none!important}

/* WordPress admin bar (only when logged in) */
body.admin-bar .top{top:32px}
@media (max-width:782px){body.admin-bar .top{top:46px}}
@media (max-width:600px){body.admin-bar .top{top:0}}

/* ===== homepage dashboard demo: make it stand out ===== */
.dlive{display:inline-flex;align-items:center;gap:8px}
.dlive i{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:dlpulse 1.6s infinite}
@keyframes dlpulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.dwrap{display:block!important;position:relative;padding:3px;border-radius:25px;isolation:isolate}
.dwrap:before{content:"";position:absolute;inset:0;border-radius:25px;padding:3px;background:conic-gradient(from var(--da,0deg),#2562e7,#5b8dff,#25d366,#2562e7 40%,#7aa2ff,#2562e7);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:dspin 6s linear infinite;z-index:-1}
.dwrap:after{content:"";position:absolute;inset:8% 6% -4%;border-radius:40px;background:radial-gradient(closest-side,rgba(37,98,231,.35),transparent);filter:blur(40px);z-index:-2;animation:dglow 4s ease-in-out infinite}
@property --da{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes dspin{to{--da:360deg}}
@keyframes dglow{50%{opacity:.55;transform:scale(.97)}}
.dwrap .demo{border:0}
.dbadge{margin-left:auto;margin-right:10px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#ef4444;background:#fef2f2;border:1px solid #fecaca;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.dbadge:before{content:"";width:6px;height:6px;border-radius:50%;background:#ef4444;animation:dlpulse 1.6s infinite}
.demo .dbar span{flex:1}
.dintro{background:rgba(246,248,252,.28)!important;backdrop-filter:blur(1.5px)!important}
.di-card{transform:translateY(0);animation:dicard 3.2s ease-in-out infinite}
@keyframes dicard{50%{transform:translateY(-6px)}}
.di-card b{font-size:23px!important}
.dgo{font-size:16px;padding:14px 22px;gap:10px;box-shadow:0 14px 30px rgba(37,98,231,.35),0 0 0 0 rgba(37,98,231,.45);animation:dgopulse 2.2s infinite}
@keyframes dgopulse{0%{box-shadow:0 14px 30px rgba(37,98,231,.35),0 0 0 0 rgba(37,98,231,.45)}70%{box-shadow:0 14px 30px rgba(37,98,231,.35),0 0 0 14px rgba(37,98,231,0)}100%{box-shadow:0 14px 30px rgba(37,98,231,.35),0 0 0 0 rgba(37,98,231,0)}}
.dplay{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);font-size:10px;padding-left:2px}
.dhint{display:block;margin-top:10px;font-size:12.5px;color:#8a94a6}
.dchip{position:absolute;z-index:12;background:#fff;border:1px solid #e3e8f2;border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(28,34,48,.16);display:flex;align-items:center;gap:10px;animation:fl 5s ease-in-out infinite;pointer-events:none}
.dchip b{font-size:20px;color:#2562e7;line-height:1}.dchip small{font-size:12px;color:#4a5568;line-height:1.3}
.dchip .dok{width:26px;height:26px;border-radius:50%;background:#dcfce7;color:#16a34a;display:grid;place-items:center;font-weight:800;font-size:13px}
.dchip.c1{left:-46px;top:200px}.dchip.c2{right:-52px;top:170px;animation-delay:-1.6s}.dchip.c3{left:-34px;bottom:70px;animation-delay:-3s}
.demo.started~.dchip,.dwrap:has(.demo.started) .dchip{opacity:0;transition:opacity .4s}
html[data-theme=dark] .dchip{background:#161e30;border-color:#2a3550}html[data-theme=dark] .dchip small{color:#c3cbe0}
html[data-theme=dark] .dintro{background:rgba(15,21,36,.2)!important}
@media (max-width:1240px){.dchip{display:none}}
@media (prefers-reduced-motion:reduce){.dwrap:before,.dwrap:after,.di-card,.dgo,.dchip,.dlive i,.dbadge:before{animation:none}}
@media (max-width:900px){.dbadge{display:none}.di-card{animation:none}.di-card b{font-size:17px!important}.di-card small{margin:2px 0 10px!important;font-size:12.5px}.dgo{font-size:14px;padding:10px 16px;animation:none}.dplay{width:20px;height:20px}.dhint{display:none}.demo.scaled .di-rb,.demo.scaled .dir{width:44px;margin-bottom:4px}}
.demo.scaled:not(.started) .tstage{height:auto!important;min-height:330px}
.demo.scaled .dintro{padding:14px}
.demo.scaled .di-card{width:100%;max-width:330px;margin:0!important;box-sizing:border-box}
.demo.scaled .dgo{width:100%;justify-content:center}
@media (max-width:420px){.demo .dstrip{font-size:12.5px;padding:10px 12px}.demo .dbar span{font-size:11.5px}}
@media (max-width:380px){.demo.scaled .dgo{font-size:14px;padding:11px 12px;gap:8px}.demo.scaled .dgo svg{display:none}.demo.scaled .di-card{padding:16px 14px!important}.demo.scaled .di-card b{font-size:16px!important}}
.demo.scaled .di-card{min-width:0;overflow:hidden}
@media (max-width:380px){.fg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:22px 16px}.fg>div:first-child{grid-column:1/-1}.fg h5{font-size:13px}.fg li a{font-size:13.5px;overflow-wrap:anywhere}}

/* CookieYes "cookie settings" icon sits above the light/dark switch, not on top of it */
.cky-btn-revisit-wrapper{left:24px!important;bottom:70px!important;right:auto!important;z-index:60!important}
@media (max-width:640px){.cky-btn-revisit-wrapper{bottom:132px!important;left:14px!important}}

/* logo: robot sized and placed like a real "b" (antenna = ascender, face sits on the baseline) */
.lg .lgb{height:1.22em!important;vertical-align:-.375em!important;margin:0 -.02em 0 -.06em!important;transform:none!important}

/* ===== mobile apps ===== */
.stores{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.stores a{display:inline-flex;line-height:0;border-radius:10px;transition:transform .2s,box-shadow .2s}
.stores a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,34,48,.18)}
.stores .sb-ios img{height:48px;width:auto}
.stores .sb-and img{height:70px;width:auto;margin:-11px -10px}
.stores.sm{gap:8px;margin-top:8px}.stores.sm .sb-ios img{height:36px}.stores.sm .sb-and img{height:53px;margin:-8px -8px}
.apps{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.ap-copy .lead{max-width:520px}
.ap-feats{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.ap-feats li{display:flex;gap:12px;align-items:flex-start}
.ap-feats .ak{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brandS);color:var(--brand);display:grid;place-items:center}
.ap-feats .ak svg{width:15px;height:15px}
.ap-feats b{display:block;color:var(--ink);font-size:16px}.ap-feats small{color:var(--mu);font-size:14.5px}
.ap-note{margin:12px 0 0;font-size:13px;color:var(--mu)}
.ap-vis{position:relative;display:flex;justify-content:center;padding:20px 0}
.ap-vis:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(37,98,231,.22),transparent);top:50%;left:50%;transform:translate(-50%,-50%)}
.ap-ph{position:relative;width:290px;height:580px;border-radius:44px;background:#fff;border:10px solid #1c2230;box-shadow:0 50px 90px -30px rgba(28,34,48,.45);overflow:hidden;color:#1c2230;animation:fl 6s ease-in-out infinite}
.ap-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:12px;background:#1c2230;z-index:3}
.ap-push{position:absolute;left:10px;right:10px;top:40px;z-index:4;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.96);border:1px solid #e6eaf2;border-radius:16px;padding:10px 12px;box-shadow:0 16px 30px rgba(28,34,48,.18);animation:appush 7s ease-in-out infinite}
.ap-push .ap-pi{flex:none;width:30px;height:30px;border-radius:8px;background:#eaf1fe;display:grid;place-items:center}.ap-push .ap-pi svg{width:24px}
.ap-push b{display:block;font-size:12px}.ap-push small{display:block;font-size:11.5px;color:#4a5568;line-height:1.35}
@keyframes appush{0%,8%{transform:translateY(-130%);opacity:0}16%,60%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(-130%);opacity:0}}
.ap-top{padding:44px 16px 10px;background:#f6f8fc;border-bottom:1px solid #e6eaf2}
.ap-top>b{font-size:22px;display:block;margin-bottom:10px}
.ap-tabs{display:flex;gap:6px}.ap-tabs i{font-style:normal;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid #e6eaf2;color:#4a5568}
.ap-tabs i.on{background:#2562e7;border-color:#2562e7;color:#fff}.ap-tabs u{text-decoration:none;background:#ef4444;color:#fff;border-radius:999px;padding:0 5px;margin-left:3px;font-size:10px}
.ap-list{padding:6px 10px}
.ap-row{display:flex;gap:10px;align-items:center;padding:11px 6px;border-bottom:1px solid #f0f2f7}
.ap-row div{flex:1;min-width:0}.ap-row b{display:block;font-size:13.5px}.ap-row small{display:block;font-size:12px;color:#6b7385;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:#eaf1fe;color:#2562e7;display:grid;place-items:center;font-size:12px;font-weight:700}
.ap-av i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid #fff}
.ap-row em{font-style:normal;flex:none;min-width:20px;height:20px;border-radius:999px;background:#25d366;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.ap-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:12px 20px 18px;background:#fff;border-top:1px solid #e6eaf2}
.ap-bar i{width:22px;height:22px;border-radius:7px;background:#e6eaf2}.ap-bar i.on{background:#2562e7}
.ap-chip{position:absolute;z-index:5;background:#fff;border:1px solid #e3e8f2;border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(28,34,48,.16);display:flex;align-items:center;gap:10px;animation:fl 5s ease-in-out infinite}
.ap-chip b{font-size:18px;color:#2562e7;line-height:1;display:grid;place-items:center}.ap-chip b svg{width:18px;height:18px;color:#16a34a}.ap-chip small{font-size:12px;color:#4a5568;line-height:1.3}
.ap-chip.c1{left:0;top:300px}.ap-chip.c2{right:0;bottom:110px;animation-delay:-2.4s}
html[data-theme=dark] .ap-chip{background:#161e30;border-color:#2a3550}html[data-theme=dark] .ap-chip small{color:#c3cbe0}
html[data-theme=dark] .ap-ph{border-color:#0b0f1a}
.dr-apps{padding:14px 6px 4px}.dr-apps>span{display:block;font-size:13px;font-weight:600;color:var(--mu)}
.fapps{margin-top:18px}.fapps>small{display:block;font-size:12.5px;color:var(--mu);font-weight:600}
.mstrip .stores{margin:0;flex-wrap:nowrap}
@media (max-width:980px){.apps{grid-template-columns:1fr;gap:30px}.ap-chip{display:none}}
@media (max-width:420px){.ap-ph{width:260px;height:520px}.stores .sb-ios img{height:42px}.stores .sb-and img{height:62px;margin:-10px -9px}}
@media (prefers-reduced-motion:reduce){.ap-ph,.ap-push,.ap-chip{animation:none}}
.apps-sec{overflow:hidden}
/* one chat entry point only: robot button + pill, no pop-up bubble */
.mascot .ms-bub{display:none!important}
.mascot.bub-on .ms-pill{opacity:1;pointer-events:auto;transform:none}

/* real app screenshots, fanned */
.ap-fan{position:relative;width:100%;max-width:520px;height:560px;margin:0 auto}
.ap-fan .af{position:absolute;top:50%;left:50%;width:236px;height:auto;border-radius:26px;box-shadow:0 40px 80px -24px rgba(28,34,48,.45);background:#eef3fc;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ap-fan .af-c{z-index:3;transform:translate(-50%,-50%)}
.ap-fan .af-l{z-index:1;transform:translate(-112%,-46%) rotate(-7deg) scale(.88);opacity:.96}
.ap-fan .af-r{z-index:2;transform:translate(12%,-46%) rotate(7deg) scale(.88);opacity:.96}
.ap-vis:hover .af-l{transform:translate(-122%,-47%) rotate(-9deg) scale(.9)}
.ap-vis:hover .af-r{transform:translate(22%,-47%) rotate(9deg) scale(.9)}
.ap-vis .ap-chip.c1{left:-6px;top:auto;bottom:70px}.ap-vis .ap-chip.c2{right:-6px;bottom:auto;top:60px}
@media (max-width:980px){.ap-fan{height:470px;max-width:420px}.ap-fan .af{width:196px}}
@media (max-width:420px){.ap-fan{height:400px}.ap-fan .af{width:170px}.ap-fan .af-l{transform:translate(-100%,-46%) rotate(-7deg) scale(.86)}.ap-fan .af-r{transform:translate(0%,-46%) rotate(7deg) scale(.86)}}

/* chat: robot button only */
.mascot .ms-pill{display:none!important}

/* Title Case for headlines, buttons and menus (blog article text keeps its own case) */
h1,h2,h3,h4,h5,.h2,.btn,button.btn,.top nav a,.top nav button,.mw a b,.mw h5,.mw .mall,.mw .mfeat b,.dg summary,.dg a b,.dr-acts .btn,footer h5,footer li a,.ey,.di-card b,.bcats a,.pgn a,.crumb a,.ap-feats b,.ms-alt,.cta-sign,.dnote a,.alt-cta a{text-transform:capitalize}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.art-h h1,.post h3,.rel .post h3{text-transform:none}

/* speed: below-the-fold sections render only when they come near the screen */
/* apps: straight phone row (replaces fan) */
.ap-vis{display:block!important;min-width:0;max-width:100%}
.ap-row{position:relative;display:flex;justify-content:center;align-items:flex-start;margin:0 auto;padding-top:6px;-webkit-mask-image:linear-gradient(#000 64%,transparent 97%);mask-image:linear-gradient(#000 64%,transparent 97%)}
.aph{margin:0;flex:none;width:168px;border:6px solid #111827;border-bottom:0;border-radius:36px 36px 0 0;overflow:hidden;background:#eef3fc;box-shadow:0 24px 50px -20px rgba(28,34,48,.4)}
.aph img{display:block;width:100%;height:auto}
.aph-c{width:212px;position:relative;z-index:2;box-shadow:0 30px 60px -18px rgba(28,34,48,.5)}
.aph-l,.aph-r{margin-top:54px}.aph-l{margin-right:-34px}.aph-r{margin-left:-34px}
html[data-theme=dark] .aph{border-color:#000}
.ap-vis .ap-chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:-40px;position:relative;z-index:3}
.ap-vis .ap-chips .ap-chip{position:static;animation:none;display:flex;flex:none}
.ap-vis .ap-chips .ap-chip small br{display:none}.ap-vis .ap-chips .ap-chip small{white-space:nowrap}
@media (max-width:560px){.aph{width:128px;border-width:5px;border-radius:28px 28px 0 0}.aph-c{width:168px}.aph-l{margin-right:-40px}.aph-r{margin-left:-40px}.aph-l,.aph-r{margin-top:42px}.ap-vis .ap-chips small{white-space:normal}}
@media (max-width:360px){.aph{width:112px}.aph-c{width:150px}}
/* hero label: brand icons instead of pulsing dot */
.hero .chip.hero-ch{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ln);padding:5px 15px 5px 5px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(28,34,48,.04)}
.hc-ic{display:inline-flex}.hc-ic i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;border:2px solid #fff;font-style:normal}
.hc-ic .wa{background:#25d366;position:relative;z-index:1}.hc-ic .tg{background:#2aabee;margin-left:-8px}
.hc-ic svg{width:14px;height:14px}
html[data-theme=dark] .hero .chip.hero-ch{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}html[data-theme=dark] .hc-ic i{border-color:#0d1220}
/* phones/tablets: theme switch in the top bar, no floating theme or cookie buttons */
@media (max-width:1080px){
.thfloat{display:none!important}
.top .mthm{display:block!important;margin-left:auto}
.top .mthm+.burger{margin-left:10px}
.top .mthm .thm{width:56px;height:30px}
.top .mthm .thm .thk{width:22px;height:22px;top:3px;left:3px}
html[data-theme=dark] .top .mthm .thm .thk{transform:translateX(26px)}
.cky-btn-revisit-wrapper{display:none!important}
}
.dr-ck{display:block;margin:14px auto 0;background:none;border:0;font:inherit;font-size:13.5px;color:var(--mu);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
@media (max-width:1080px){.top>.w{gap:0}.top>.w>.mthm{margin-left:auto}}
@media (max-width:360px){.top .mthm .thm{width:50px;height:28px}.top .mthm .thm .thk{width:20px;height:20px}html[data-theme=dark] .top .mthm .thm .thk{transform:translateX(22px)}.top .mthm+.burger{margin-left:8px}}
/* legal pages */
.prose .ltoc{background:var(--bg);border:1px solid var(--ln);border-radius:16px;padding:18px 22px;margin:8px 0 26px}
.prose .ltoc b{display:block;font-size:14px;margin-bottom:8px}
.prose .ltoc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14.5px}
.prose .ltoc li{margin:0 0 6px;break-inside:avoid}
.prose .ltoc a{text-decoration:none}
@media (max-width:640px){.prose .ltoc ol{columns:1}}
html[data-theme=dark] .prose .ltoc{background:rgba(255,255,255,.03);border-color:#2a3550}
.prose h2[id]{scroll-margin-top:96px}
/* footer social links */
footer .fsoc{display:flex;gap:10px;margin-top:16px}
footer .fsoc a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:inherit;transition:background .2s,color .2s,transform .2s}
footer .fsoc a:hover{background:#2562e7;border-color:#2562e7;color:#fff;transform:translateY(-2px)}
footer .fsoc svg{width:19px;height:19px}
/* demo bot: typed questions */
.phone .wa-in.wa-ask{padding:5px 5px 5px 14px;align-items:center;gap:8px;color:#0f172a;z-index:3}
.wa-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:#0f172a;padding:6px 0}
.wa-ask input::placeholder{color:#8a9aa0}
.wa-ask button{width:32px;height:32px;flex:none;border-radius:50%;border:0;background:#075e54;color:#fff;display:grid;place-items:center;cursor:pointer;transition:opacity .2s,transform .15s}
.wa-ask button:not(:disabled):hover{transform:scale(1.06)}
.wa-ask button:disabled{opacity:.35;cursor:default}
.wa-ask svg{width:15px;height:15px}
.phone .msg .src{display:block;font-size:10px;opacity:.6;margin-top:4px;font-style:italic}
/* blog posts rendered by Divi */
.art .art-divi{margin:8px 0 0}
/* book a demo: calendar step */
form[hidden],.bk[hidden]{display:none!important}
.bk{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:28px;box-shadow:0 30px 70px rgba(28,34,48,.07)}
.bk-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bk-back{border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--brand);cursor:pointer;padding:0}
.bk-step{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.bk h3{font-size:24px;margin:4px 0 4px}.bk-sub{margin:0 0 16px;color:var(--mu);font-size:15px}
.bk-tz{display:grid;gap:6px;margin-bottom:16px;font-size:13px;font-weight:700;color:var(--ink)}
.bk-tz select{border:1.5px solid var(--ln);border-radius:12px;padding:10px 12px;font:inherit;font-weight:500;font-size:14px;background:#fff;color:var(--ink);max-width:100%}
.bk-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.bk-days button{flex:none;width:64px;border:1.5px solid var(--ln);background:#fff;border-radius:14px;padding:8px 0;display:grid;justify-items:center;gap:1px;cursor:pointer;font:inherit;color:var(--ink);transition:.15s}
.bk-days button small{font-size:11px;color:var(--mu);font-weight:600}.bk-days button b{font-size:20px;line-height:1.2}
.bk-days button.on{background:var(--brand);border-color:var(--brand);color:#fff}.bk-days button.on small{color:#dbe6ff}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:14px 0 18px}
.bk-slots button{border:1.5px solid var(--ln);background:#fff;border-radius:12px;padding:10px 0;font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:.15s}
.bk-slots button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.bk-slots button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bk-slots button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.bk-f{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--ln);padding-top:16px}
.bk-f p{margin:0;font-size:14.5px;color:var(--tx)}.bk-f small{color:var(--mu)}
.bk-done{text-align:center;padding:10px 0}.bk-ok{width:58px;height:58px;border-radius:50%;background:#dcfce7;color:#16a34a;font-size:28px;display:grid;place-items:center;margin:0 auto 12px}
.bk-when{font-size:17px}.bk-done .acts{justify-content:center;display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
html[data-theme=dark] .bk,html[data-theme=dark] .bk-days button,html[data-theme=dark] .bk-slots button,html[data-theme=dark] .bk-tz select{background:#141b2d;border-color:#2a3550;color:#e8edf8}
html[data-theme=dark] .bk-days button.on,html[data-theme=dark] .bk-slots button.on{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:560px){.bk{padding:20px}.bk h3{font-size:21px}.bk-f .btn{width:100%}}
.bk,.bk p,.bk-done p{color:var(--tx)}.bk h3,.bk-when b,.bk-f p b{color:var(--ink)}.bk-sub,.bk small{color:var(--mu)}
html[data-theme=dark] .bk,html[data-theme=dark] .bk p{color:#c3cbe0}html[data-theme=dark] .bk h3,html[data-theme=dark] .bk-when b,html[data-theme=dark] .bk-f p b{color:#fff}
/* try-it phone: chat, suggestions and input stacked (no overlap) at every width */
.pg .phone{display:flex;flex-direction:column}
.pg .phone .wa-top{flex:none}
.pg .phone .wa-body{flex:1 1 auto;height:auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:8px}
.pg .phone .wa-body::-webkit-scrollbar{display:none}
.pg .sugg{position:static!important;flex:none;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;max-height:none!important;padding:6px 10px 8px!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.pg .sugg::-webkit-scrollbar{display:none}.pg .sugg:empty{display:none}
.pg .sugg button{flex:none;max-width:none!important}
.pg .phone .wa-in{position:static;flex:none;margin:0 10px 12px}
/* email form replaces the input instead of covering the chat */
.pg .phone.gated .wa-in,.pg .phone.gated .sugg{display:none!important}
.pg .phone.gated .gate.on{position:static;flex:none;margin:0 10px 12px;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
/* ===== book a demo page (redesign) ===== */
.bd{padding:56px 0 64px;background:radial-gradient(900px 500px at 85% 10%,rgba(47,107,255,.10),transparent 70%),radial-gradient(700px 420px at 0% 100%,rgba(34,197,94,.07),transparent 70%)}
.bd-g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.bd-ey{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--brand);background:#eef3fd;border:1px solid #d9e4fb;padding:7px 14px;border-radius:999px}
.bd-ey i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.bd h1{font-size:clamp(34px,4.4vw,54px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 16px}
.bd h1 em{font-style:normal;color:var(--brand)}
.bd-lead{font-size:18px;line-height:1.6;color:var(--tx);margin:0 0 26px;max-width:540px}
.bd-perks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:16px}
.bd-perks li{display:flex;gap:14px;align-items:flex-start}
.bd-perks i{flex:none;width:42px;height:42px;border-radius:12px;background:#eef3fd;color:var(--brand);display:grid;place-items:center}
.bd-perks i svg{width:21px;height:21px}
.bd-perks b{display:block;font-size:16px;color:var(--ink)}.bd-perks small{display:block;font-size:14.5px;line-height:1.5;color:var(--mu);margin-top:2px}
.bd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:540px}
.bd-stats div{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:14px 16px}
.bd-stats b{display:block;font-size:24px;letter-spacing:-.02em;color:var(--ink)}.bd-stats small{font-size:12.5px;color:var(--mu);line-height:1.35;display:block;margin-top:2px}
.bd-card{position:sticky;top:96px;background:#fff;border:1px solid var(--ln);border-radius:26px;padding:24px 24px 22px;box-shadow:0 40px 90px -30px rgba(28,34,48,.28)}
.bd-ch{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ln)}
.bd-av{width:46px;height:46px;border-radius:14px;background:#eef3fd;display:grid;place-items:center;flex:none}.bd-av svg{width:34px;height:32px}
.bd-ch b{display:block;font-size:17px;color:var(--ink)}.bd-ch small{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.bd-ch em{font-style:normal;font-size:12px;font-weight:700;color:#1d4ed8;background:#eef3fd;border-radius:999px;padding:3px 9px}
.bd-prog{list-style:none;display:flex;gap:6px;padding:0;margin:16px 0 18px;counter-reset:none}
.bd-prog li{flex:1;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--mu);padding:8px 10px;border-radius:12px;background:#f4f6fb}
.bd-prog i{width:20px;height:20px;border-radius:50%;background:#dfe5f0;color:#5b6577;font-style:normal;font-size:11px;display:grid;place-items:center;flex:none}
.bd-card[data-step="1"] .bd-prog li:nth-child(1),.bd-card[data-step="2"] .bd-prog li:nth-child(2),.bd-card[data-step="3"] .bd-prog li:nth-child(3){background:#eef3fd;color:#1d4ed8}
.bd-card[data-step="1"] .bd-prog li:nth-child(1) i,.bd-card[data-step="2"] .bd-prog li:nth-child(2) i,.bd-card[data-step="3"] .bd-prog li:nth-child(3) i{background:var(--brand);color:#fff}
.bd-card[data-step="2"] .bd-prog li:nth-child(1) i,.bd-card[data-step="3"] .bd-prog li:nth-child(-n+2) i{background:#22c55e;color:#fff}
.bd-card .fm{border:0;box-shadow:none;padding:0;background:transparent}
.bd-card .fg2{gap:12px 14px;margin-bottom:16px}
.bd-card .fm textarea{min-height:0}
.bd-card .fm .btn{width:100%;justify-content:center;padding:15px 18px;font-size:16px}
.bd-card .fnote{text-align:center;font-size:12.5px;color:var(--mu);margin:10px 0 0}
.bd-card .bk{border:0;box-shadow:none;padding:0;background:transparent}
.bd-card .bk-h{margin-top:2px}.bd-card .bk h3{font-size:21px}
.bd-how .bd-tl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.bd-st{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:24px;position:relative}
.bd-min{display:inline-block;font-size:12px;font-weight:800;color:#1d4ed8;background:#eef3fd;border-radius:999px;padding:4px 10px;margin-bottom:12px}
.bd-st b{display:block;font-size:19px;color:var(--ink);margin-bottom:6px}.bd-st p{margin:0;color:var(--mu);font-size:15px;line-height:1.55}
.bd-qs{max-width:820px;margin:0 auto;display:grid;gap:10px}
.bd-q{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:0 20px}
.bd-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-weight:700;color:var(--ink);font-size:16px}
.bd-q summary::-webkit-details-marker{display:none}.bd-q summary svg{width:18px;height:18px;transition:transform .2s;flex:none}
.bd-q[open] summary svg{transform:rotate(180deg)}.bd-q p{margin:0 0 18px;color:var(--mu);line-height:1.6}
.bd-wa{text-align:center;margin:26px 0 0;color:var(--mu)}.bd-wa a{font-weight:700;color:var(--brand)}
html[data-theme=dark] .bd{background:radial-gradient(900px 500px at 85% 10%,rgba(47,107,255,.16),transparent 70%)}
html[data-theme=dark] .bd-card,html[data-theme=dark] .bd-stats div,html[data-theme=dark] .bd-st,html[data-theme=dark] .bd-q{background:#141b2d;border-color:#2a3550}
html[data-theme=dark] .bd-prog li{background:#1b2540}html[data-theme=dark] .bd-ey,html[data-theme=dark] .bd-perks i,html[data-theme=dark] .bd-av,html[data-theme=dark] .bd-ch em{background:#1b2540;border-color:#2a3550}
html[data-theme=dark] .bd-card[data-step="1"] .bd-prog li:nth-child(1),html[data-theme=dark] .bd-card[data-step="2"] .bd-prog li:nth-child(2),html[data-theme=dark] .bd-card[data-step="3"] .bd-prog li:nth-child(3){background:#1d2a4d;color:#9db8ff}
@media (max-width:980px){.bd-g{grid-template-columns:1fr;gap:34px}.bd-card{position:static}.bd-how .bd-tl{grid-template-columns:1fr}}
@media (max-width:560px){.bd{padding:34px 0 44px}.bd-lead{font-size:16px}.bd-card{padding:18px 16px;border-radius:22px}.bd-card .fg2{grid-template-columns:1fr}.bd-stats b{font-size:20px}.bd-stats div{padding:12px}.bd-prog li{font-size:11px;padding:7px 6px;gap:5px}.bd-prog i{width:18px;height:18px}}
.bd-g>*{min-width:0}.bk-tz select{width:100%}
.bk-slots button.on,.bk-slots button.on:hover{color:#fff!important;border-color:var(--brand)}
.sb-demo .mbar{display:none!important}
/* four plans (Free added, 2 Nov) */
.plans.p4{grid-template-columns:repeat(4,1fr);gap:16px}.plans.p4 .plan{padding:26px 22px}.plans.p4 .plan .pr{font-size:40px}
@media(max-width:1180px){.plans.p4{grid-template-columns:1fr 1fr;gap:20px}.plans.p4 .plan .pop,.plans.p4 .plan{padding:28px}}
@media(max-width:640px){.plans.p4{grid-template-columns:1fr}}
.cmp td:nth-child(2),.cmp th:nth-child(2){white-space:normal}
/* mega menu: only the visible panel keeps it open (the full-width wrapper and side gutters no longer count as "inside") */
@media (hover:hover) and (min-width:1081px){
.hm .mp{pointer-events:none!important}
.hm.open .mp>.mw{pointer-events:auto;position:relative}
.hm.open .mp>.mw::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
}

/* ===== Supbotive mascot (official illustration + live LED face) ===== */
.sbx{position:relative;display:block;width:100%;aspect-ratio:308/571;user-select:none;-webkit-user-select:none}
.sbx img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.sbx-float,.sbx-lean,.sbx-head{position:absolute;inset:0}
.sbx-face,.sbx-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sbx-shadow{position:absolute;left:18%;right:18%;bottom:-1.5%;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(11,31,92,.28),transparent);animation:sbmShadow 3.6s ease-in-out infinite}
.sbx-float{animation:sbmFloat 3.6s ease-in-out infinite}
.sbx-lean{transform-origin:50% 100%}
.sbx-head{transform-origin:50% 38%;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.sbx .eye-in>g{opacity:0;transition:opacity .14s}
.sbx[data-l=open] .eye-l .e-open,.sbx[data-r=open] .eye-r .e-open,.sbx[data-l=happy] .eye-l .e-happy,.sbx[data-r=happy] .eye-r .e-happy,.sbx[data-l=heart] .eye-l .e-heart,.sbx[data-r=heart] .eye-r .e-heart,.sbx[data-l=star] .eye-l .e-star,.sbx[data-r=star] .eye-r .e-star,.sbx[data-l=wow] .eye-l .e-wow,.sbx[data-r=wow] .eye-r .e-wow,.sbx[data-l=half] .eye-l .e-half,.sbx[data-r=half] .eye-r .e-half,.sbx[data-l=dizzy] .eye-l .e-dizzy,.sbx[data-r=dizzy] .eye-r .e-dizzy,.sbx[data-l=angry] .eye-l .e-angry,.sbx[data-r=angry] .eye-r .e-angry,.sbx[data-l=closed] .eye-l .e-closed,.sbx[data-r=closed] .eye-r .e-closed{opacity:1}
.sbx .eye-in{transform-box:fill-box;transform-origin:center;transition:transform .09s}
.sbx.blink .eye-in{transform:scaleY(.1)}
.sbx .e-heart,.sbx .e-star{transform-box:fill-box;transform-origin:center;animation:sbmPop 1.1s ease-in-out infinite}
.sbx .e-dizzy .spin{transform-box:fill-box;transform-origin:center;animation:sbmSpin 1s linear infinite}
.sbx .sbx-mouth>*{opacity:0;transition:opacity .15s;transform-box:fill-box;transform-origin:center}
.sbx .mo-smile{opacity:1}
.sbx.m-happy .mo-smile,.sbx.m-party .mo-smile,.sbx.m-love .mo-smile,.sbx.m-wave .mo-smile{opacity:0}
.sbx.m-happy .mo-big,.sbx.m-party .mo-big,.sbx.m-love .mo-big,.sbx.m-wave .mo-big{opacity:1}
.sbx.m-wow .mo-smile,.sbx.m-dizzy .mo-smile{opacity:0}.sbx.m-wow .mo-o,.sbx.m-dizzy .mo-o{opacity:1}
.sbx.m-grumpy .mo-smile,.sbx.m-think .mo-smile{opacity:0}.sbx.m-grumpy .mo-flat,.sbx.m-think .mo-flat{opacity:1}
.sbx.m-sleepy .mo-smile{opacity:.6}
.sbx.talk .sbx-mouth>*{opacity:0}.sbx.talk .mo-o{opacity:1;animation:sbmTalk .2s ease-in-out infinite alternate}
.sbx .sbx-fx text{font:800 30px/1 'Plus Jakarta Sans',system-ui,sans-serif;fill:#2f6bff;opacity:0}
.sbx .fx-q,.sbx .fx-x{font-size:54px}
.sbx.m-sleepy .fx-z{animation:sbmZ 2.4s ease-in-out infinite}.sbx.m-sleepy .fx-z2{animation-delay:.6s}.sbx.m-sleepy .fx-z3{animation-delay:1.2s}
.sbx.m-think .fx-q{opacity:1;animation:sbmBob 1.2s ease-in-out infinite}
.sbx.m-wow .fx-x{opacity:1;animation:sbmBob .5s ease-in-out infinite}
/* moods: head and body motion */
.sbx.m-wave .sbx-head{animation:sbmNod .7s ease-in-out 2}
.sbx.m-happy .sbx-float{animation:sbmFloat 1.4s ease-in-out infinite}
.sbx.m-party .sbx-float{animation:sbmJump .55s cubic-bezier(.3,0,.4,1) infinite}.sbx.m-party .sbx-lean{animation:sbmTilt .55s ease-in-out infinite alternate}
.sbx.m-wow .sbx-float{animation:sbmHop .5s ease-out 1}
.sbx.m-love .sbx-lean{animation:sbmSway 1.6s ease-in-out infinite}
.sbx.m-think .sbx-head>*{transform:rotate(-7deg);transform-origin:50% 38%}
.sbx.m-wink .sbx-head>*{transform:rotate(6deg);transform-origin:50% 38%}
.sbx.m-sleepy .sbx-head>*{transform:rotate(8deg) translateY(1.5%);transform-origin:50% 38%}.sbx.m-sleepy .sbx-float{animation-duration:5.5s}
.sbx.m-dizzy .sbx-lean{animation:sbmWobble .8s ease-in-out infinite}
.sbx.m-grumpy .sbx-float{animation:none}.sbx.m-grumpy .sbx-lean{animation:sbmShake .4s ease-in-out 2}
.sbx .sbx-head>*{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.sbx.bounce .sbx-lean{animation:sbmSquash .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes sbmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8%)}}
@keyframes sbmShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.65}}
@keyframes sbmJump{0%,100%{transform:translateY(0)}45%{transform:translateY(-6%)}}
@keyframes sbmHop{0%{transform:translateY(0)}40%{transform:translateY(-4%)}100%{transform:translateY(0)}}
@keyframes sbmTilt{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes sbmSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes sbmWobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes sbmShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2%)}75%{transform:translateX(2%)}}
@keyframes sbmNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes sbmSquash{0%{transform:scale(1,1)}30%{transform:scale(1.05,.94)}60%{transform:scale(.97,1.04)}100%{transform:scale(1,1)}}
@keyframes sbmPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes sbmSpin{to{transform:rotate(360deg)}}
@keyframes sbmTalk{from{transform:scaleY(.35)}to{transform:scaleY(1.3)}}
@keyframes sbmZ{0%{opacity:0;transform:translate(0,8px)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-14px)}}
@keyframes sbmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* page */
.hm-hero{padding:56px 0 40px;background:radial-gradient(900px 500px at 78% 30%,rgba(47,107,255,.13),transparent 65%),linear-gradient(180deg,#f4f8ff,var(--bg))}
.hm-g{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hm-g>*{min-width:0}
.hm-copy h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:12px 0 16px}
.hm-copy h1 em{font-style:normal;color:var(--brand)}
.hm-copy .lead{max-width:520px}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px}
.hm-chip{border:1.5px solid #d8e3fb;background:#fff;color:var(--ink);font:700 14px/1 inherit;font-family:inherit;padding:10px 14px;border-radius:999px;cursor:pointer;transition:.2s}
.hm-chip:hover,.hm-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.hm-ask{display:flex;gap:8px;background:#fff;border:1.5px solid #d8e3fb;border-radius:18px;padding:6px;max-width:520px;box-shadow:0 14px 40px -22px rgba(37,98,231,.45)}
.hm-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1.2 inherit;font-family:inherit;padding:10px 12px;color:var(--ink)}
.hm-ask button{flex:0 0 46px;height:46px;border:0;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.hm-ask button svg{width:20px;height:20px}
.hm-sgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;max-width:540px}
.hm-sg{border:0;background:rgba(47,107,255,.09);color:var(--brand);font:600 13px/1 inherit;font-family:inherit;padding:9px 12px;border-radius:999px;cursor:pointer}
.hm-sg:hover{background:rgba(47,107,255,.17)}
.hm-stage{position:relative;aspect-ratio:1/1.02;max-width:560px;width:100%;margin:0 auto;border-radius:40px;background:radial-gradient(60% 55% at 50% 45%,#ffffff,#e4edff 70%,#d6e3ff);box-shadow:inset 0 0 0 1.5px rgba(47,107,255,.12),0 40px 90px -50px rgba(37,98,231,.55);overflow:hidden}
.hm-bot{position:absolute;left:50%;bottom:5.5%;width:41%;transform:translateX(-50%);border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hm-bot:focus-visible{outline:3px solid var(--brand);outline-offset:6px;border-radius:30px}
.hm-bubble{position:absolute;left:5%;top:4.5%;max-width:52%;background:#fff;color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.45;padding:14px 16px;border-radius:20px 20px 20px 6px;box-shadow:0 18px 40px -18px rgba(11,21,48,.35);z-index:3;transform-origin:0 100%;transition:transform .25s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.hm-bubble.off{transform:scale(.6);opacity:0}
.hm-bubble a{color:var(--brand);text-decoration:underline}
.hm-bubble .dots{display:inline-flex;gap:4px}.hm-bubble .dots i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:sbmDot 1s infinite}.hm-bubble .dots i:nth-child(2){animation-delay:.15s}.hm-bubble .dots i:nth-child(3){animation-delay:.3s}
@keyframes sbmDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.hm-tip{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12.5px;color:#6b7a99;margin:0;z-index:2}
.hm-deco{position:absolute;display:flex;flex-direction:column;gap:5px;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px -16px rgba(37,98,231,.5);animation:sbmBob 4s ease-in-out infinite}
.hm-deco i{display:block;height:6px;border-radius:3px;background:#c9d8fb}.hm-deco i:first-child{width:46px;background:var(--brand)}.hm-deco i:last-child{width:30px}
.hm-deco.d1{right:7%;top:20%}.hm-deco.d2{left:7%;bottom:30%;animation-delay:1.3s}
.hm-deco.d3{right:11%;bottom:34%;width:34px;height:34px;padding:0;border-radius:12px;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21h4'/%3E%3C/svg%3E") center/18px no-repeat;animation-delay:.7s}
.hm-fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.hm-fx span{position:absolute;width:22px;height:22px;animation:sbmPt 1.4s ease-out forwards}
.hm-fx span svg{width:100%;height:100%}
@keyframes sbmPt{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(var(--r))}}
.hm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hm-card{border:1.5px solid var(--ln);background:#fff;border-radius:24px;padding:16px 12px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:inherit;color:var(--ink);transition:.2s}
.hm-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(37,98,231,.5)}
.hm-card .sbx{width:62%;max-width:110px}
.hm-card b{font-size:15px}
@media (max-width:1000px){.hm-g{grid-template-columns:1fr}.hm-stage{max-width:520px}.hm-grid{grid-template-columns:repeat(3,1fr)}.hm-copy{text-align:center}.hm-copy .lead,.hm-ask,.hm-sgs{margin-left:auto;margin-right:auto}.hm-chips,.hm-sgs{justify-content:center}}
@media (max-width:560px){.hm-hero{padding:28px 0 24px}.hm-grid{grid-template-columns:repeat(2,1fr);gap:10px}.hm-stage{border-radius:28px}.hm-bubble{font-size:14px;max-width:72%;padding:11px 13px}.hm-bot{width:52%}.hm-deco.d2,.hm-deco.d3{display:none}.hm-chip{padding:9px 12px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.sbx,.sbx *{animation:none!important;transition:none!important}}
[data-theme=dark] .hm-hero{background:radial-gradient(900px 500px at 78% 30%,rgba(47,107,255,.2),transparent 65%),#0d1322}
[data-theme=dark] .hm-stage{background:radial-gradient(60% 55% at 50% 45%,#1d2c57,#111a35 70%,#0b1226);box-shadow:inset 0 0 0 1.5px rgba(120,160,255,.15),0 40px 90px -50px rgba(0,0,0,.8)}
[data-theme=dark] .hm-chip,[data-theme=dark] .hm-ask,[data-theme=dark] .hm-card,[data-theme=dark] .hm-deco{background:#161e30;border-color:#2a3654;color:var(--ink)}
[data-theme=dark] .hm-bubble{background:#1b2541;color:#eef2fb}
[data-theme=dark] .hm-sg{background:rgba(110,150,255,.14);color:#9dbbff}
[data-theme=dark] .hm-tip{color:#8a97b6}
[data-theme=dark] .hm-deco i{background:#33436b}[data-theme=dark] .hm-deco i:first-child{background:var(--brand)}

/* ===== Taxi industry page ===== */
.tx-hero .w{align-items:center}
.tx-hero h1{font-size:clamp(34px,4.4vw,56px)}
.tx-pts{list-style:none;padding:0;margin:18px 0 26px;display:flex;flex-wrap:wrap;gap:10px 22px}
.tx-pts li{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.tx-pts svg{width:20px;height:20px;color:#fff;background:var(--brand);border-radius:50%;padding:3px}
.tx-hv{min-width:0}
.tx-demo{position:relative}
.tx-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.tx-tabs button,.tx-qs button,.tx-sc button{font-family:inherit;cursor:pointer;transition:.2s}
.tx-tabs button{border:1.5px solid var(--ln);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px}
.tx-tabs button.on,.tx-tabs button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.tx-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:16px;align-items:center}
.tx-stage .phone{width:100%;max-width:300px;margin:0 auto;height:520px}
.tx-ticket{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:18px;box-shadow:0 30px 60px -30px rgba(11,21,48,.35)}
.tx-th{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.tx-th i,.tx-f i,.tx-h i,.tx-fs i,.tx-chc i,.tx-hub i,.tx-mh i,.tx-colh i,.tx-srcs i{display:grid;place-items:center;flex:0 0 auto}
.tx-th i{width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff}
.tx-th i svg{width:22px;height:22px}
.tx-th b{display:block;font-size:16px}.tx-th small{color:var(--mu);font-size:12.5px}
.tx-f{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px dashed var(--ln)}
.tx-f i{width:30px;height:30px;border-radius:9px;background:#eef3ff;color:#9aa7c2}
.tx-f i svg{width:16px;height:16px}
.tx-f small{display:block;font-size:11.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.tx-f b{font-size:14px;color:#9aa7c2;font-weight:600}
.tx-f.set i{background:var(--brand);color:#fff}.tx-f.set b{color:var(--ink);font-weight:700}
.tx-f.set{animation:txIn .4s ease}
.tx-ok{margin-top:10px;display:flex;align-items:center;gap:8px;justify-content:center;background:#e7f9ee;color:#11823b;font-weight:700;border-radius:12px;padding:10px;font-size:14px;opacity:0;transform:translateY(6px);transition:.35s}
.tx-ok svg{width:18px;height:18px}
.tx-ticket.done .tx-ok{opacity:1;transform:none}
.tx-replay{display:flex;align-items:center;gap:6px;margin:14px auto 0;border:0;background:none;color:var(--brand);font:700 14px/1 inherit;font-family:inherit;cursor:pointer}
.tx-replay svg{width:16px;height:16px}
@keyframes txIn{from{opacity:.3;transform:translateX(6px)}to{opacity:1;transform:none}}
.tx-hg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tx-h{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--ln);border-radius:18px;padding:16px;font-size:15px}
.tx-h i{width:42px;height:42px;border-radius:12px;background:#eef3ff;color:var(--brand)}
.tx-h i svg{width:22px;height:22px}
.tx-h:last-child{background:var(--brand);border-color:var(--brand);color:#fff}.tx-h:last-child i{background:rgba(255,255,255,.18);color:#fff}
.tx-note{text-align:center;margin:26px auto 0;max-width:700px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--ink)}
.tx-note svg{width:20px;height:20px;color:#25d366;flex:0 0 auto}
.tx-note.c{display:block}
.tx-split{align-items:center}
.tx-split p a{color:var(--brand);text-decoration:underline}
.tx-sub{font-weight:700;color:var(--ink);margin-bottom:6px}
.tx-flow{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.tx-fs{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:20px;padding:18px}
.tx-fs i{width:48px;height:48px;border-radius:14px;background:#eef3ff;color:var(--brand)}
.tx-fs i svg{width:26px;height:26px}
.tx-fs b{display:block;font-size:16.5px}.tx-fs small{color:var(--mu);font-size:13.5px}
.tx-fs.hl{border-color:var(--brand);box-shadow:0 20px 40px -26px rgba(37,98,231,.6)}
.tx-fs.hl i{background:var(--brand)}
.tx-fs .tx-rb{width:34px;height:34px;--rbfill:#fff;--logo:#fff;--brand:#9cc2ff}
.tx-ar{align-self:center;color:var(--brand);transform:rotate(90deg);display:grid}
.tx-ar svg{width:20px;height:20px}
.tx-qa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:stretch;max-width:1040px;margin:0 auto}
.tx-qs{display:flex;flex-direction:column;gap:8px}
.tx-qs small{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-bottom:2px}
.tx-qs button{text-align:left;border:1.5px solid var(--ln);background:#fff;color:var(--ink);border-radius:14px;padding:12px 16px;font-size:15px;font-weight:600}
.tx-qs button:hover{border-color:var(--brand)}
.tx-qs button.on{border-color:var(--brand);background:var(--brand);color:#fff}
.tx-qpanel{background:var(--waBg,#efeae2);border-radius:24px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;border:1px solid var(--ln)}
.tx-qchat{display:flex;flex-direction:column;gap:10px}
.tx-qchat .msg{max-width:88%;font-size:14.5px}
.tx-qchat .src{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;font-weight:700;color:#2562e7;background:#eef3ff;border-radius:6px;padding:3px 7px}
.tx-qchat .typing{display:inline-flex;gap:4px;padding:12px 14px}.tx-qchat .typing i{width:7px;height:7px;border-radius:50%;background:#9aa7c2;animation:sbmDot 1s infinite}.tx-qchat .typing i:nth-child(2){animation-delay:.15s}.tx-qchat .typing i:nth-child(3){animation-delay:.3s}
@keyframes sbmDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.tx-qnote{margin:14px 0 0;font-size:12.5px;color:#6b7a99}
.tx-ch{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.tx-chc{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:6px}
.tx-chc i{width:52px;height:52px;border-radius:16px;color:#fff}
.tx-chc i svg{width:28px;height:28px}
.tx-chc.txw i{background:#25d366}.tx-chc.txt i{background:#229ed9}
.tx-chc b{font-size:18px}.tx-chc small,.tx-hub small{color:var(--mu);font-size:13.5px}
.tx-hub{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:linear-gradient(135deg,#2562e7,#1846d6);color:#fff;border-radius:22px;padding:24px}
.tx-hub small{color:rgba(255,255,255,.85)}
.tx-hub i{width:56px;height:56px;border-radius:50%;background:#fff}
.tx-hub .tx-rb{width:40px;height:40px;--rbfill:#fff}
.tx-split.rev>div:first-child{order:0}






.tx-mh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tx-mh i{width:36px;height:36px;border-radius:50%;background:#eef3ff}.tx-mh .tx-rb{width:26px;height:26px}
.tx-merge dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14.5px}
.tx-merge dt{color:var(--mu);font-weight:600}.tx-merge dd{margin:0;font-weight:700;color:var(--ink)}


.tx-hand svg{width:16px;height:16px}
.tx-srcs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tx-srcs span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:999px;padding:8px 14px 8px 8px;font-weight:600;font-size:14px;color:var(--ink)}
.tx-srcs i{width:26px;height:26px;border-radius:50%;background:#eef3ff;color:var(--brand)}
.tx-srcs i svg{width:14px;height:14px}
.tx-loop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px}
.tx-lp{background:#fff;border:1px solid var(--ln);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:4px;animation:txGlow 4s infinite}
.tx-lp b{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px}
.tx-lp span{font-weight:700;color:var(--ink);font-size:15.5px}.tx-lp small{color:var(--mu);font-size:13px}
.tx-lp.l2{animation-delay:1s}.tx-lp.l3{order:4;animation-delay:2s}.tx-lp.l4{order:3;animation-delay:3s}
.tx-lc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px var(--bg,#f5f8ff);order:5}
.tx-lc svg{width:24px;height:24px;animation:sbmSpin 3s linear infinite}
@keyframes txGlow{0%,20%{border-color:var(--brand);box-shadow:0 18px 40px -24px rgba(37,98,231,.7)}25%,100%{border-color:var(--ln);box-shadow:none}}
@keyframes sbmSpin{to{transform:rotate(360deg)}}
.tx-sort{max-width:1040px;margin:0 auto}
.tx-sc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.tx-sc button{border:0;background:#fff;color:#111;border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:14.5px;font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.08),0 0 0 1px var(--ln)}
.tx-sc button:hover{box-shadow:0 0 0 2px var(--brand)}
.tx-sc button.used{opacity:.35;pointer-events:none}
.tx-res{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tx-col{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:16px;min-height:200px}
.tx-colh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tx-colh i{width:38px;height:38px;border-radius:12px}
.tx-col.ai .tx-colh i{background:#eef3ff}.tx-col.ai .tx-rb{width:28px;height:28px}
.tx-col.team .tx-colh i{background:#fff1e6;color:#c2410c}.tx-col.team .tx-colh i svg{width:20px;height:20px}
.tx-colh b{flex:1;font-size:16px}
.tx-colh em{font-style:normal;font-weight:800;min-width:30px;height:30px;border-radius:10px;background:#eef3ff;color:var(--brand);display:grid;place-items:center}
.tx-col.team .tx-colh em{background:#fff1e6;color:#c2410c}
.tx-list{display:flex;flex-direction:column;gap:6px}
.tx-list span{padding:9px 12px;border-radius:12px;font-size:14px;font-weight:600;animation:txIn .35s ease}
.tx-col.ai .tx-list span{background:#eef3ff;color:#1c3d91}.tx-col.team .tx-list span{background:#fff1e6;color:#8a3a0b}
.tx-why{text-align:center;margin:16px auto 0;font-weight:600;color:var(--ink);min-height:24px}
.tx-ctrl{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:linear-gradient(135deg,#0d1b45,#1846d6);color:#fff;border-radius:32px;padding:48px}
.tx-ctrl .h2,.tx-ctrl p{color:#fff}.tx-ctrl .h2 em{color:#9cc2ff}.tx-ctrl p{opacity:.9}
.tx-ctrl .stats3{margin:0}
.tx-ctrl .stats3 b{color:#fff}.tx-ctrl .stats3 span{color:rgba(255,255,255,.8)}
.tx-ctrl .stats3>div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
@media (max-width:1100px){.tx-hg{grid-template-columns:repeat(2,1fr)}.tx-ctrl{grid-template-columns:1fr;padding:34px}}
@media (max-width:900px){.tx-qa,.tx-res{grid-template-columns:1fr}.tx-stage{grid-template-columns:1fr}.tx-stage .phone{height:460px}.tx-ticket{max-width:340px;margin:0 auto;width:100%}}
@media (max-width:560px){.tx-hg{grid-template-columns:1fr}.tx-ch{grid-template-columns:1fr}.tx-loop{grid-template-columns:1fr}.tx-lc{display:none}.tx-lp.l3{order:0}.tx-lp.l4{order:0}.tx-ctrl{padding:26px;border-radius:24px}.tx-qs button{font-size:14px;padding:11px 14px}}
[data-theme=dark] .tx-tabs button,[data-theme=dark] .tx-ticket,[data-theme=dark] .tx-h,[data-theme=dark] .tx-fs,[data-theme=dark] .tx-qs button,[data-theme=dark] .tx-chc,[data-theme=dark] .tx-ctx,[data-theme=dark] .tx-srcs span,[data-theme=dark] .tx-lp,[data-theme=dark] .tx-col{background:#161e30;border-color:#2a3654;color:var(--ink)}
[data-theme=dark] .tx-qs button.on,[data-theme=dark] .tx-tabs button.on{background:var(--brand);color:#fff}
[data-theme=dark] .tx-f i,[data-theme=dark] .tx-h i,[data-theme=dark] .tx-fs i,[data-theme=dark] .tx-srcs i,[data-theme=dark] .tx-mh i{background:#22305a}
[data-theme=dark] .tx-col.ai .tx-list span{background:#22305a;color:#cfe0ff}[data-theme=dark] .tx-col.team .tx-list span{background:#3a2616;color:#ffd2b0}
[data-theme=dark] .tx-ok,[data-theme=dark] .tx-hand{background:#123322;color:#7ee2a5}
@media (prefers-reduced-motion:reduce){.tx-lp,.tx-lc svg{animation:none}}
/* timeline */
.tx-day{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--ln);border-radius:28px;padding:26px}
.tx-dtop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tx-dtop p{margin:0;font-size:13px;color:var(--mu);max-width:380px}
.tx-clock{display:flex;align-items:center;gap:12px}
.tx-clock b{font-size:40px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.tx-office{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:#fff1e6;color:#c2410c}
.tx-office.open{background:#e7f9ee;color:#11823b}
.tx-bars{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;align-items:end;height:110px}
.tx-bars i{display:block;background:#dbe6ff;border-radius:6px 6px 2px 2px;transition:background .2s}
.tx-bars i.on{background:var(--brand)}
.tx-bars i.closed{background:#ffe1cc}.tx-bars i.closed.on{background:#ea6a1f}
.tx-day input[type=range],.tx-rg input{width:100%;accent-color:var(--brand);margin:12px 0 4px;height:28px;cursor:pointer}
.tx-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums}
.tx-dchat{margin-top:18px;background:var(--waBg,#efeae2);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:170px}
.tx-dchat .msg{max-width:80%;font-size:14.5px;animation:txIn .3s ease}
.tx-dwho{align-self:center;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:#eef3ff;color:var(--brand)}
.tx-dwho.team{background:#fff1e6;color:#c2410c}
/* languages */
.tx-lang{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:20px}
.tx-ltabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tx-ltabs button{border:1.5px solid var(--ln);background:#fff;color:var(--ink);font:700 13.5px/1 inherit;font-family:inherit;padding:9px 14px;border-radius:999px;cursor:pointer}
.tx-ltabs button.on,.tx-ltabs button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.tx-lchat{background:var(--waBg,#efeae2);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.tx-lchat .msg{max-width:86%;font-size:15px}
/* calculator */
.tx-calc{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;max-width:1040px;margin:0 auto}
.tx-cin{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:14px}
.tx-rg{display:block}
.tx-rg>span{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tx-rg b{font-size:15.5px;color:var(--ink)}.tx-rg em{font-style:normal;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;font-size:17px}
.tx-cout{background:linear-gradient(140deg,#2562e7,#1846d6);color:#fff;border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:10px}
.tx-cout small{font-weight:700;opacity:.85;font-size:14px}
.tx-big{display:flex;align-items:baseline;gap:10px}
.tx-big b{font-size:54px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tx-big span{font-size:18px;font-weight:700;opacity:.9}
.tx-big.money b{font-size:40px;color:#c9dcff}
.tx-cout p{margin:4px 0;color:rgba(255,255,255,.9);font-size:15px}
.tx-cout .btn{align-self:flex-start;margin-top:6px}
.tx-cnote{font-size:12px!important;opacity:.75}
@media (max-width:900px){.tx-calc{grid-template-columns:1fr}}
@media (max-width:560px){.tx-bars{height:80px;gap:2px}.tx-clock b{font-size:32px}.tx-day{padding:18px}.tx-big b{font-size:44px}}
[data-theme=dark] .tx-day,[data-theme=dark] .tx-lang,[data-theme=dark] .tx-cin,[data-theme=dark] .tx-ltabs button{background:#161e30;border-color:#2a3654;color:var(--ink)}
[data-theme=dark] .tx-ltabs button.on{background:var(--brand);color:#fff}
[data-theme=dark] .tx-bars i{background:#26345c}[data-theme=dark] .tx-bars i.on{background:var(--brand)}
[data-theme=dark] .tx-bars i.closed{background:#4a2c1a}[data-theme=dark] .tx-bars i.closed.on{background:#ea6a1f}
[data-theme=dark] .tx-office{background:#3a2616;color:#ffc49a}[data-theme=dark] .tx-office.open{background:#123322;color:#7ee2a5}
[data-theme=dark] .tx-dwho{background:#22305a;color:#cfe0ff}[data-theme=dark] .tx-dwho.team{background:#3a2616;color:#ffc49a}

/* context: everything visible at rest, quick highlight links each message to its detail */
.tx-ctx{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:22px}
.tx-cx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:12px;align-items:center}
.tx-pieces{display:flex;flex-direction:column;gap:7px;background:var(--waBg,#efeae2);border-radius:18px;padding:14px}
.tx-pieces small{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7a99;margin-bottom:2px}
.tx-pieces .msg{animation:none;max-width:100%;font-size:13.5px;transition:box-shadow .2s,transform .2s}
.tx-cxa{color:var(--brand);display:grid}.tx-cxa svg{width:22px;height:22px}
.tx-merge{border:2px solid var(--brand);border-radius:18px;padding:16px}
.tx-merge dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14.5px}
.tx-merge dt,.tx-merge dd{padding:5px 6px;border-radius:8px;transition:background .2s}
.tx-merge dt{color:var(--mu);font-weight:600}.tx-merge dd{margin:0;font-weight:700;color:var(--ink)}
.tx-hand{margin-top:12px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#11823b;background:#e7f9ee;border-radius:10px;padding:9px 12px;transition:box-shadow .2s}
.tx-ctx .hl.msg{box-shadow:0 0 0 2px var(--brand);transform:translateX(4px)}
.tx-ctx dt.hl,.tx-ctx dd.hl{background:#eef3ff}
.tx-ctx .tx-hand.hl{box-shadow:0 0 0 2px #22c55e}
@media (max-width:640px){.tx-cx{grid-template-columns:1fr}.tx-cxa{transform:rotate(90deg);justify-self:center}}
[data-theme=dark] .tx-ctx dt.hl,[data-theme=dark] .tx-ctx dd.hl{background:#22305a}

/* trip card (hero) */
.tx-ticket{position:relative;padding:22px 18px 18px;overflow:visible}
.tx-roof{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#1c2230;color:#5b6478;font:800 12px/1 inherit;letter-spacing:.22em;padding:7px 16px 6px;border-radius:9px 9px 4px 4px;transition:.4s;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.tx-ticket.done .tx-roof{background:#ffcc33;color:#1c2230;box-shadow:0 0 0 4px rgba(255,204,51,.25),0 0 26px rgba(255,204,51,.7)}
.tx-th{justify-content:space-between}
.tx-led{width:12px;height:12px;border-radius:50%;background:#f0a500;box-shadow:0 0 0 4px rgba(240,165,0,.18);animation:txBlink 1s infinite}
.tx-ticket.done .tx-led{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:none}
@keyframes txBlink{50%{opacity:.35}}
.tx-map{border-radius:16px;overflow:hidden;background:#eef3fb;border:1px solid var(--ln)}
.tx-map svg{display:block;width:100%;height:auto}
.tx-map .rd{stroke:#fff;stroke-width:7;fill:none}
.tx-route-bg{fill:none;stroke:#c9d6ee;stroke-width:4;stroke-dasharray:2 6;stroke-linecap:round}
.tx-route{fill:none;stroke:var(--brand);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s ease}
.tx-ticket.r1 .tx-route{stroke-dashoffset:55}.tx-ticket.r2 .tx-route{stroke-dashoffset:0}
.tx-pa circle{fill:#9aa7c2}.tx-pa .in{fill:#fff}.tx-ticket.r1 .tx-pa circle:not(.in){fill:var(--brand)}
.tx-pb .pole{stroke:#9aa7c2;stroke-width:2.5}.tx-pb .flag,.tx-pb circle{fill:#9aa7c2}
.tx-ticket.r2 .tx-pb .flag,.tx-ticket.r2 .tx-pb circle{fill:#ea6a1f}.tx-ticket.r2 .tx-pb .pole{stroke:#ea6a1f}
.tx-carm rect{fill:#1c2230}.tx-carm .lamp{fill:#5b6478}.tx-ticket.done .tx-carm .lamp{fill:#ffcc33}
.tx-ends{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);border-top:1px solid var(--ln)}
.tx-ends .tx-f{background:#fff;padding:9px 12px;border:0;display:block}
.tx-f{display:block}
.tx-f small{display:block;font-size:10.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tx-f b{display:block;font-size:13.5px;color:#9aa7c2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-f.set b{color:var(--ink);font-weight:800}
.tx-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.tx-meta .tx-f{background:#f5f8ff;border:1px solid var(--ln);border-radius:12px;padding:9px 10px;transition:.3s}
.tx-meta .tx-f.set{background:#eef3ff;border-color:#c9d8ff}
.tx-meta .tx-f b{font-variant-numeric:tabular-nums}
/* WhatsApp/Telegram badge under heading */
.tx-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin:-26px auto 34px;max-width:720px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--ln);width:fit-content;font-weight:600;font-size:14.5px;color:var(--ink)}
.tx-badge i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.tx-badge i svg{width:15px;height:15px}.tx-badge .txw{background:#25d366}.tx-badge .txt{background:#229ed9;margin-left:-16px;box-shadow:0 0 0 2px #fff}
/* channel tiles: hover */
.tx-chc,.tx-hub{transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,border-color .3s}
.tx-chc:hover{transform:translateY(-6px)}
.tx-chc.txw:hover{border-color:#25d366;box-shadow:0 24px 40px -22px rgba(37,211,102,.7)}
.tx-chc.txt:hover{border-color:#229ed9;box-shadow:0 24px 40px -22px rgba(34,158,217,.7)}
.tx-chc i{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.tx-chc:hover i{transform:rotate(-8deg) scale(1.12)}
.tx-hub:hover{transform:translateY(-4px);box-shadow:0 30px 50px -26px rgba(37,98,231,.9)}
.tx-hub i{position:relative}
.tx-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:txRing 2.2s ease-out infinite}
@keyframes txRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.8);opacity:0}}
/* booking flow: steps light up in turn, dots travel down the connectors */
.tx-fs{transition:transform .3s,box-shadow .3s,border-color .3s;animation:txStep 4.5s infinite}
.tx-flow .tx-fs:nth-of-type(2){animation-delay:1.5s}.tx-flow .tx-fs:nth-of-type(3){animation-delay:3s}
@keyframes txStep{0%,30%{border-color:var(--brand);box-shadow:0 20px 40px -26px rgba(37,98,231,.65);transform:translateX(6px)}36%,100%{border-color:var(--ln);box-shadow:none;transform:none}}
.tx-fs i{animation:txIco 4.5s infinite}.tx-flow .tx-fs:nth-of-type(2) i{animation-delay:1.5s}.tx-flow .tx-fs:nth-of-type(3) i{animation-delay:3s}
@keyframes txIco{0%,30%{background:var(--brand);color:#fff}36%,100%{background:#eef3ff;color:var(--brand)}}
.tx-fs .tx-rb{--logo:currentColor;--rbfill:transparent}
.tx-ar{position:relative;width:2px;height:28px;transform:none;background:repeating-linear-gradient(to bottom,#c9d6ee 0 4px,transparent 4px 8px);margin:0 auto}
.tx-ar em{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--brand);animation:txDot 1.5s linear infinite}
.tx-flow .tx-ar:nth-of-type(2) em{animation-delay:.75s}
@keyframes txDot{from{top:-4px;opacity:0}20%{opacity:1}80%{opacity:1}to{top:24px;opacity:0}}
.tx-fs:hover{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){.tx-fs,.tx-fs i,.tx-ar em,.tx-ring,.tx-led{animation:none}}
[data-theme=dark] .tx-map{background:#111a2e}[data-theme=dark] .tx-map .rd{stroke:#1d2840}
[data-theme=dark] .tx-ends .tx-f,[data-theme=dark] .tx-badge{background:#161e30;border-color:#2a3654}
[data-theme=dark] .tx-meta .tx-f{background:#111a2e;border-color:#2a3654}[data-theme=dark] .tx-meta .tx-f.set{background:#22305a}
[data-theme=dark] .tx-badge .txt{box-shadow:0 0 0 2px #161e30}
[data-theme=dark] .tx-carm rect{fill:#e6ebf5}[data-theme=dark] .tx-pa .in{fill:#111a2e}
@keyframes txIcoD{0%,30%{background:var(--brand);color:#fff}36%,100%{background:#22305a;color:#9cc2ff}}
[data-theme=dark] .tx-fs i{animation-name:txIcoD}
/* trip card fit */
.tx-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.tx-ends{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tx-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tx-f b{white-space:normal;overflow:visible;line-height:1.25}
.tx-meta .tx-f{padding:8px}
.tx-meta .tx-f small{font-size:9.5px;letter-spacing:.04em}
.tx-badge{border-radius:18px;text-align:left}
.tx-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.tx-meta .tx-f[data-f=pax]{grid-column:1/-1}
@media (max-width:900px){.tx-stage{grid-template-columns:1fr}.tx-ticket{max-width:360px;margin:8px auto 0;width:100%}}
/* industries grids with 8 cards (7 industries + "Don't see your industry?") */
@media (min-width:1101px){.ind.i8{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:1100px){.ind.i8{grid-template-columns:repeat(2,1fr)}}
.ic.ic-more{border-style:dashed;background:transparent}
.ic.ic-more .ii{background:var(--brand);color:#fff}
/* industry links strip on blog posts */
.ind-strip{padding-block:10px 0}
.is-box{display:flex;gap:18px 28px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:#f5f8ff;border:1px solid var(--ln);border-radius:22px;padding:20px 22px}
.is-box b{display:block;font-size:17px;color:var(--ink)}.is-box small{color:var(--mu);font-size:14px}
.is-links{display:flex;flex-wrap:wrap;gap:8px}
.is-links a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ln);border-radius:999px;padding:7px 13px 7px 9px;font-size:13.5px;font-weight:700;color:var(--ink);transition:.2s}
.is-links a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.is-links svg{width:16px;height:16px;color:var(--brand)}
[data-theme=dark] .is-box{background:#121a2c;border-color:#2a3654}[data-theme=dark] .is-links a{background:#161e30;border-color:#2a3654}
[data-theme=dark] .tx-sc button{background:#1b2541;color:#e6ebf5;box-shadow:0 0 0 1px #2a3654}
[data-theme=dark] .tx-col.ai .tx-colh i{background:#22305a}[data-theme=dark] .tx-col.team .tx-colh i{background:#3a2616;color:#ffc49a}
/* Bot or human? quiz */
.tx-quiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;max-width:1060px;margin:0 auto;align-items:start}
.tx-qz-l{background:#0f1830;border-radius:28px;padding:24px;color:#fff;box-shadow:0 40px 80px -40px rgba(11,21,48,.6)}
.tx-qz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tx-qz-top b{font-size:20px}.tx-qz-top span{font-weight:700;font-size:13px;color:#9cb3e6;font-variant-numeric:tabular-nums}
.tx-qz-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:18px}
.tx-qz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f8dff,#7fdcff);transition:width .4s}
.tx-qz-card{background:var(--waBg,#efeae2);border-radius:20px;padding:16px;min-height:200px;display:flex;flex-direction:column;gap:12px;border:2px solid transparent;transition:border-color .25s}
.tx-qz-card.in{animation:txCard .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes txCard{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.tx-qz-card.ok{border-color:#22c55e}.tx-qz-card.no{border-color:#ea6a1f;animation:txShake .35s}
@keyframes txShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tx-qz-who{display:flex;gap:10px;align-items:center;color:#111}
.tx-qz-who .av{width:34px;height:34px;border-radius:50%;background:#fde8d4;color:#c2410c;display:grid;place-items:center;font-weight:800}
.tx-qz-who b{display:block;font-size:14px}.tx-qz-who small{font-size:12px;color:#667}
.tx-qz-msg{font-size:17px!important;max-width:92%!important;animation:none}
.tx-qz-res{font-size:14px;line-height:1.45;color:#1f2a44;background:#fff;border-radius:12px;padding:0 12px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
.tx-qz-res.ok,.tx-qz-res.no{max-height:200px;padding:10px 12px}
.tx-qz-res.ok b{color:#11823b}.tx-qz-res.no b{color:#c2410c}
.tx-qz-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tx-qz-btns button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:14px 10px;font:800 15px/1.2 inherit;font-family:inherit;cursor:pointer;transition:transform .15s,filter .15s}
.tx-qz-btns button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.tx-qz-btns [data-qz=ai]{background:var(--brand);color:#fff}.tx-qz-btns [data-qz=team]{background:#ea6a1f;color:#fff}
.tx-qz-btns i{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.tx-qz-btns i svg{width:18px;height:18px}.tx-qz-btns .tx-rb{width:22px;height:22px;--logo:#fff;--rbfill:transparent;--brand:#cfe0ff}
.tx-qz-next{width:100%;margin-top:14px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:14px;padding:13px;font:700 15px/1 inherit;font-family:inherit;cursor:pointer}
.tx-qz-next:hover{background:rgba(255,255,255,.08)}
.tx-qz-r{display:flex;flex-direction:column;gap:14px}
.tx-lane{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:16px;min-height:150px}
.tx-lane.ai{border-top:4px solid var(--brand)}.tx-lane.team{border-top:4px solid #ea6a1f}
.tx-lh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tx-lh i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.tx-lane.ai .tx-lh i{background:#eef3ff}.tx-lane.ai .tx-rb{width:26px;height:26px}
.tx-lane.team .tx-lh i{background:#fff1e6;color:#c2410c}.tx-lane.team .tx-lh i svg{width:19px;height:19px}
.tx-lh b{flex:1;font-size:16px;color:var(--ink)}
.tx-lh em{font-style:normal;font-weight:800;min-width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#eef3ff;color:var(--brand)}
.tx-lane.team .tx-lh em{background:#fff1e6;color:#c2410c}
.tx-lane .tx-list span{display:block;padding:8px 12px;border-radius:10px;font-size:13.5px;font-weight:600;animation:txIn .35s ease}
.tx-lane.ai .tx-list span{background:#eef3ff;color:#1c3d91}.tx-lane.team .tx-list span{background:#fff1e6;color:#8a3a0b}
.tx-qz-score{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#2562e7,#1846d6);color:#fff;border-radius:20px;padding:18px 20px;animation:txCard .4s}
.tx-qz-score b{font-size:34px;font-variant-numeric:tabular-nums}.tx-qz-score span{font-weight:700}
@media (max-width:900px){.tx-quiz{grid-template-columns:1fr}}
[data-theme=dark] .tx-lane{background:#161e30;border-color:#2a3654}
[data-theme=dark] .tx-lane.ai .tx-lh i{background:#22305a}[data-theme=dark] .tx-lane.team .tx-lh i{background:#3a2616;color:#ffc49a}
[data-theme=dark] .tx-lane.ai .tx-list span{background:#22305a;color:#cfe0ff}[data-theme=dark] .tx-lane.team .tx-list span{background:#3a2616;color:#ffd2b0}
[data-theme=dark] .tx-qz-l{background:#0a1124;border:1px solid #2a3654}
@media (prefers-reduced-motion:reduce){.tx-qz-card.in,.tx-qz-card.no{animation:none}}
.tx-qz-btns[hidden],.tx-qz-next[hidden],.tx-qz-score[hidden]{display:none!important}
[data-theme=dark] .tx-qz-who{color:#e6ebf5}[data-theme=dark] .tx-qz-who small{color:#9aa7c2}