/* WeIT Solution design system. Primary #0057D9, accent #00BFFF, background #FFFFFF. */
:root {
  --blue: #0057D9; --blue-700: #0046AF; --blue-900: #00306F; --blue-50: #EEF4FF; --blue-100: #DCE9FF;
  --cyan: #00BFFF; --cyan-50: #E5F8FF;
  --bg: #FFFFFF; --surface: #F6F9FF; --line: #DCE6F5; --line-strong: #C2D2EA;
  --ink: #0B1F3A; --muted: #5B6B82; --faint: #8896AB;
  --ok: #0E9F6E; --ok-bg: #E6F7F0; --warn: #B76E00; --warn-bg: #FFF4DB; --bad: #D32F2F; --bad-bg: #FDECEC;
  --radius: 10px; --shadow: 0 1px 2px rgba(11,31,58,.06), 0 4px 16px rgba(11,31,58,.06);
  --font: Inter, "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali", "Hind Siliguri", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.right { margin-left: auto; } .nowrap { white-space: nowrap; } .grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } .gap-lg { gap: 20px; }
.hidden { display: none !important; }

.boot { height: 100%; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--blue-100); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-900) 100%); color: #fff; padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; }
.brand small { display: block; font-weight: 500; font-size: 11px; opacity: .75; letter-spacing: .02em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,.86); font-weight: 520; position: relative; }
.nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cyan); }
.nav .sep { height: 1px; background: rgba(255,255,255,.14); margin: 10px 8px; }
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); padding: 16px 12px 6px; }
.nav-group:first-child { padding-top: 4px; }
.nav a .grow { flex: 1; }
.nav a .chev svg { width: 14px; height: 14px; opacity: .65; transition: transform .18s ease; }
.nav > a.open .chev svg { transform: rotate(90deg); opacity: 1; }
.crumbs { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin: 0 0 6px; }
.nav svg, .btn svg { width: 18px; height: 18px; flex: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 20; }
.topbar .who { text-align: right; line-height: 1.2; } .topbar .who b { display: block; font-size: 13px; }
.menu-btn { display: none; }
.page { padding: 26px 28px 90px; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- components */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.card-b { padding: 18px; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.stat { padding: 16px 18px; }
.stat .label { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.stat .value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; color: var(--blue); }
.stat .sub { color: var(--faint); font-size: 12px; margin-top: 2px; }
.stat.accent { border-top: 3px solid var(--cyan); }

.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 560; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; min-height: 36px; }
.btn:hover { background: var(--blue-50); border-color: var(--blue); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tab:focus-visible { outline: 3px solid rgba(0,191,255,.45); outline-offset: 1px; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn.primary:hover { background: var(--blue-700); }
.btn.accent { background: var(--cyan); border-color: var(--cyan); color: #00294A; } .btn.accent:hover { background: #26CBFF; }
.btn.danger { color: var(--bad); border-color: #F0B8B8; } .btn.danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn.danger.solid { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--blue-50); }
.btn.sm { padding: 4px 10px; min-height: 28px; font-size: 12.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--blue-50); color: var(--blue-700); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.gray { background: #EEF1F6; color: var(--muted); } .badge.cyan { background: var(--cyan-50); color: #007AA8; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #FAFCFF; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { padding: 10px 16px; border: 0; background: none; cursor: pointer; font-weight: 580; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tab:hover { color: var(--blue); } .tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .lbl { font-size: 12.5px; font-weight: 600; color: #34465F; }
.field .help { font-size: 12px; color: var(--muted); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], select, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 11px; background: #fff; min-height: 36px; }
input:hover, select:hover, textarea:hover { border-color: #93AEDB; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; } .check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; } .form-grid .full { grid-column: 1 / -1; }
.err { color: var(--bad); background: var(--bad-bg); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.note { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-900); padding: 10px 13px; border-radius: 8px; font-size: 13px; }
.note.warn { background: var(--warn-bg); border-color: #F2D894; color: #6B4300; }
.secret { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; }
.secret code { flex: 1; word-break: break-all; font-size: 13px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-all; }
.bar { height: 8px; border-radius: 99px; background: var(--blue-100); overflow: hidden; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 550; font-size: 13px; }
.chip.available { border-color: #9BDDC3; background: var(--ok-bg); color: #08724F; } .chip.on_call { border-color: #9CC0FF; background: var(--blue-50); color: var(--blue-700); } .chip.offline, .chip.unknown { color: var(--faint); background: #F6F7FA; }
.pager { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 8px 4px 0; }
.chart .col { flex: 1; min-width: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.chart .stack { width: 100%; max-width: 38px; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 0 0; overflow: hidden; }
.chart .stack i { display: block; width: 100%; } .chart .lab { font-size: 11px; color: var(--faint); white-space: nowrap; }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* ---------------------------------------------------------------- modal / toast */
.overlay { position: fixed; inset: 0; background: rgba(11,31,58,.5); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(11,31,58,.35); }
.modal.wide { width: min(860px, 100%); } .modal.narrow { width: min(440px, 100%); }
.modal-h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .modal-b { padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; } .modal-f { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface); border-radius: 0 0 14px 14px; }
#toasts { position: fixed; right: 18px; top: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 9px; box-shadow: var(--shadow); max-width: 380px; animation: fade .15s; border-left: 4px solid var(--cyan); }
.toast.error { border-left-color: #FF6B6B; background: #3a1010; } .toast.ok { border-left-color: #2FD39B; }

/* ---------------------------------------------------------------- auth screen */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-hero { background: radial-gradient(1200px 600px at 10% -10%, rgba(0,191,255,.35), transparent 60%), linear-gradient(160deg, var(--blue) 0%, var(--blue-900) 100%); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-hero h1 { font-size: 36px; line-height: 1.12; max-width: 460px; letter-spacing: -.025em; }
.auth-hero ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; max-width: 460px; } .auth-hero li { display: flex; gap: 10px; opacity: .92; } .auth-hero li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-top: 7px; flex: none; }
.auth-form { display: grid; place-items: center; padding: 32px; } .auth-box { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------- softphone */
.phone-fab { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--cyan); color: #00294A; box-shadow: 0 8px 24px rgba(0,87,217,.35); cursor: pointer; display: grid; place-items: center; z-index: 50; }
.phone-fab:hover { background: #26CBFF; } .phone-fab svg { width: 26px; height: 26px; }
.phone-fab .pip { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: #98A5B8; } .phone-fab .pip.on { background: #19C37D; } .phone-fab.ringing { animation: ring 0.9s infinite; background: #19C37D; color: #fff; }
@keyframes ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } }
.phone { position: fixed; right: 22px; bottom: 92px; width: 316px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(11,31,58,.3); border: 1px solid var(--line); z-index: 50; overflow: hidden; }
.phone-h { background: var(--blue); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px; } .phone-h small { opacity: .8; display: block; font-size: 11.5px; }
.phone-screen { padding: 14px 16px 6px; } .phone-screen input { font-size: 22px; text-align: center; letter-spacing: .02em; font-weight: 600; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; padding: 6px; } .phone-screen input:focus { border-bottom-color: var(--cyan); outline: none; }
.phone-state { text-align: center; color: var(--muted); font-size: 13px; padding: 4px 16px 8px; min-height: 26px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 16px 12px; }
.key { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; height: 46px; font-size: 18px; font-weight: 600; cursor: pointer; } .key:hover { background: var(--blue-50); } .key:active { background: var(--blue-100); }
.phone-actions { display: flex; gap: 10px; padding: 0 16px 16px; justify-content: center; }
.round { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; } .round svg { width: 24px; height: 24px; }
.round.call { background: #19B36B; } .round.hang { background: #E5484D; } .round.tool { background: var(--blue-50); color: var(--blue); width: 44px; height: 44px; } .round.tool.on { background: var(--blue); color: #fff; }
.incoming { background: var(--ok-bg); padding: 12px 16px; text-align: center; border-bottom: 1px solid #BEE8D6; }

@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform .2s; } .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; } .page { padding: 18px 16px 100px; } .topbar { padding: 10px 16px; }
  .g2, .g3, .g4, .g5, .form-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; } .auth-hero { display: none; }
  .phone { right: 10px; left: 10px; width: auto; bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 860px) { .main > div > .note { margin: 12px 16px 0 !important; } }
@media (max-width: 860px) {
  .topbar .who { display: none; } .topbar .btn { padding: 6px 10px; } .topbar > div:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head .row.wrap { margin-left: 0; }
}

/* Phone system sub-menu (inside the main menu) */
.nav .subnav { display: none; flex-direction: column; gap: 1px; margin: 2px 0 8px 21px; padding-left: 10px; border-left: 1.5px solid rgba(255,255,255,.2); }
.nav .subnav.open { display: flex; }
.nav .subnav a { padding: 7px 10px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.75); }
.nav .subnav a:hover { color: #fff; }
.nav .subnav a.active { background: #fff; color: var(--blue); font-weight: 650; }
.nav .subnav a.active::before { left: -12.5px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; }

/* ---- Sidebar sub-menus: grouped, collapsible, easy to scan ---- */
.nav .subnav { margin: 2px 0 10px 18px; padding: 4px 0 4px 12px; border-left: 1.5px solid rgba(255,255,255,.22); gap: 2px; }
.nav .subnav a { padding: 7px 10px 7px 14px; border-radius: 7px; font-size: 13.5px; position: relative; }
.nav .subnav a::after { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: rgba(255,255,255,.35); }
.nav .subnav a.active::after { background: var(--cyan); }
.nav .subnav a.active { box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.nav .subnav .sub-head { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 9px 10px 3px 14px; }
.nav .subnav .sub-head:first-child { padding-top: 3px; }
.nav > a.active.open { background: rgba(255,255,255,.18); }
.nav > a .chev { display: inline-flex; margin-left: auto; }
.nav > a[data-key] { cursor: pointer; }
.note.ok { background: #e8f8ef; border-color: #b9e8cd; color: #0b6b3a; }
pre.code { background: #0b1b3a; color: #e6f1ff; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 13px; margin: 8px 0 12px; }

/* ---- public website ---- */
.landing { min-height: 100%; background: #fff; color: var(--ink); }
.l-wrap { max-width: calc(1160px * var(--z)); margin: 0 auto; padding: 0 calc(22px * var(--z)); }
.l-top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.97); border-bottom: calc(1px * var(--z)) solid var(--line); padding: calc(9px * var(--z)) 0; backdrop-filter: blur(calc(6px * var(--z))); }
.l-top .row { gap: calc(18px * var(--z)); }
.l-nav { display: flex; gap: calc(4px * var(--z)); margin: 0 auto; } .l-nav a { padding: calc(8px * var(--z)) calc(14px * var(--z)); border-radius: calc(8px * var(--z)); color: var(--ink); font-weight: 550; } .l-nav a:hover { background: var(--blue-50); text-decoration: none; } .l-nav a.on { background: var(--blue-50); color: var(--blue); }
.l-hero { background: radial-gradient(calc(1200px * var(--z)) calc(500px * var(--z)) at 85% -10%, #0a8fe0 0%, transparent 60%), linear-gradient(135deg, #00306F 0%, var(--blue) 60%, #0a7bd6 100%); color: #fff; padding: calc(56px * var(--z)) 0 calc(64px * var(--z)); }
.l-hero.page { padding: calc(56px * var(--z)) 0 calc(90px * var(--z)); max-width: none; width: auto; } /* the portal also has a ".page" rule (max-width 1400px): it must not limit the website heroes */
.l-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(40px * var(--z)); align-items: center; }
.eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: .12em; font-size: calc(13px * var(--z)); margin-bottom: calc(14px * var(--z)); }
.l-hero h1 { font-size: clamp(calc(34px * var(--z)), 6vw, calc(64px * var(--z))); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; }
.l-hero.page h1 { font-size: clamp(calc(28px * var(--z)), 5vw, calc(48px * var(--z))); }
.l-hero .sub { font-size: calc(20px * var(--z)); font-weight: 700; margin: calc(26px * var(--z)) 0 0; line-height: 1.3; }
.l-hero .lead { max-width: calc(560px * var(--z)); font-size: calc(16.5px * var(--z)); opacity: .92; margin: calc(14px * var(--z)) 0 0; }
.btn.big { min-height: calc(46px * var(--z)); padding: 0 calc(22px * var(--z)); background: #fff; color: var(--blue-900); border-color: #fff; font-weight: 650; } .btn.big.dark { background: #06172e; border-color: #06172e; color: #fff; }
.btn.big2 { min-height: calc(46px * var(--z)); padding: 0 calc(22px * var(--z)); } .btn.big3 { min-height: calc(46px * var(--z)); padding: 0 calc(22px * var(--z)); background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn.cta svg { width: calc(16px * var(--z)); height: calc(16px * var(--z)); margin-left: calc(6px * var(--z)); }
.l-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(36px * var(--z)); background: #06172e; color: #fff; border-radius: calc(16px * var(--z)); padding: calc(34px * var(--z)) calc(38px * var(--z)); margin-top: calc(-30px * var(--z)); position: relative; box-shadow: 0 calc(14px * var(--z)) calc(40px * var(--z)) rgba(0,30,80,.25); }
.l-three h3 { font-size: calc(19px * var(--z)); margin-bottom: calc(10px * var(--z)); } .l-three p { color: #cbd7ea; margin: 0 0 calc(10px * var(--z)); line-height: 1.6; } .l-three a { color: var(--cyan); } .l-three a svg { width: calc(18px * var(--z)); height: calc(18px * var(--z)); }
.l-sec { padding: calc(64px * var(--z)) 0 calc(8px * var(--z)); } .l-sec.up { margin-top: calc(-56px * var(--z)); padding-top: 0; } .l-sec.alt { background: var(--surface); padding-bottom: calc(56px * var(--z)); margin-top: calc(56px * var(--z)); } .l-sec.narrow .l-wrap { max-width: calc(860px * var(--z)); }
.l-title { text-align: center; margin-bottom: calc(28px * var(--z)); } .l-title h2 { font-size: clamp(calc(24px * var(--z)), 3.6vw, calc(36px * var(--z))); letter-spacing: -.02em; } .l-title p { color: var(--muted); margin: calc(8px * var(--z)) 0 0; font-size: calc(16px * var(--z)); }
.l-tabs { display: flex; flex-wrap: wrap; gap: calc(8px * var(--z)); justify-content: center; margin-bottom: calc(20px * var(--z)); }
.l-tabs button { border: calc(1px * var(--z)) solid var(--line-strong); background: #fff; border-radius: calc(9px * var(--z)); padding: calc(9px * var(--z)) calc(16px * var(--z)); cursor: pointer; font-weight: 550; color: var(--ink); } .l-tabs button:hover { border-color: var(--blue); } .l-tabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.l-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(36px * var(--z)); align-items: center; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(16px * var(--z)); padding: calc(34px * var(--z)); box-shadow: var(--shadow); }
.l-feature h3, .l-biz h3 { font-size: calc(24px * var(--z)); margin-bottom: calc(10px * var(--z)); } .l-feature p, .l-biz p { color: var(--muted); line-height: 1.65; margin: 0 0 calc(14px * var(--z)); }
.l-checks { list-style: none; margin: 0 0 calc(18px * var(--z)); padding: 0; display: grid; gap: calc(8px * var(--z)); } .l-checks li { display: flex; gap: calc(10px * var(--z)); align-items: center; } .l-checks svg { width: calc(17px * var(--z)); height: calc(17px * var(--z)); color: var(--ok); flex: none; }
.mock { background: #fff; color: var(--ink); border-radius: calc(14px * var(--z)); box-shadow: 0 calc(24px * var(--z)) calc(60px * var(--z)) rgba(0,20,60,.35); padding: calc(16px * var(--z)); display: grid; gap: calc(10px * var(--z)); }
.mock.dark { background: #0a1a30; color: #fff; box-shadow: none; border: calc(1px * var(--z)) solid #1d3354; } .mock.small { padding: calc(22px * var(--z)); } .mock.small > small { color: #7f93b2; letter-spacing: .06em; font-size: calc(11.5px * var(--z)); }
.mock-bar { display: flex; gap: calc(6px * var(--z)); align-items: center; } .mock-bar i { width: calc(10px * var(--z)); height: calc(10px * var(--z)); border-radius: 50%; background: var(--line-strong); } .mock-bar span { margin-left: calc(8px * var(--z)); color: var(--muted); font-size: calc(12.5px * var(--z)); }
.mock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8px * var(--z)); } .mock-grid.three { grid-template-columns: repeat(3, 1fr); }
.mock-stat { background: var(--surface); border-radius: calc(10px * var(--z)); padding: calc(10px * var(--z)) calc(12px * var(--z)); display: grid; } .mock.dark .mock-stat { background: transparent; padding: 0; } .mock-stat small { color: var(--muted); font-size: calc(12px * var(--z)); } .mock.dark .mock-stat small { color: #8aa0c0; } .mock-stat b { font-size: calc(22px * var(--z)); color: var(--blue); } .mock.dark .mock-stat b { color: #fff; font-size: calc(30px * var(--z)); }
.mock-row { display: flex; gap: calc(10px * var(--z)); align-items: center; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(10px * var(--z)); padding: calc(9px * var(--z)) calc(12px * var(--z)); font-size: calc(13px * var(--z)); } .mock-row .dot { width: calc(8px * var(--z)); height: calc(8px * var(--z)); border-radius: 50%; background: var(--ok); } .mock-row em { font-style: normal; color: var(--muted); } .mock-row b { color: var(--blue); }
.mock-note { color: var(--faint); font-size: calc(12px * var(--z)); } .mock.dark .mock-note { color: #6f85a6; }
.step { display: flex; gap: calc(12px * var(--z)); align-items: center; background: #11263f; border-radius: calc(10px * var(--z)); padding: calc(12px * var(--z)) calc(14px * var(--z)); } .step span { width: calc(26px * var(--z)); height: calc(26px * var(--z)); border-radius: calc(8px * var(--z)); display: grid; place-items: center; background: #0c3a66; color: var(--cyan); font-weight: 700; font-size: calc(13px * var(--z)); }
.l-strip { margin-top: calc(56px * var(--z)); border-top: calc(1px * var(--z)) solid var(--line); border-bottom: calc(1px * var(--z)) solid var(--line); padding: calc(26px * var(--z)) 0; text-align: center; background: var(--surface); } .l-strip small { letter-spacing: .12em; color: var(--muted); font-weight: 650; }
.ops { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(14px * var(--z)) calc(34px * var(--z)); margin-top: calc(14px * var(--z)); font-size: calc(18px * var(--z)); } .ops b { color: var(--blue-900); } .ops span { color: var(--faint); }
.l-biz { display: grid; grid-template-columns: 1fr 1fr; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(16px * var(--z)); overflow: hidden; box-shadow: var(--shadow); } .l-biz > div:last-child { padding: calc(38px * var(--z)); align-self: center; }
.l-biz-art { background: linear-gradient(135deg, #00306F, var(--blue) 70%, #0a8fe0); color: #fff; display: flex; align-items: flex-end; padding: calc(34px * var(--z)); min-height: calc(260px * var(--z)); } .l-biz-art b { display: block; font-size: calc(44px * var(--z)); letter-spacing: -.02em; line-height: 1.05; } .l-biz-art small { color: var(--cyan); letter-spacing: .1em; font-weight: 650; }
.l-dark { background: #06172e; color: #fff; padding: calc(64px * var(--z)) 0; margin-top: calc(64px * var(--z)); } .l-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(44px * var(--z)); align-items: center; } .l-dark h2 { font-size: clamp(calc(26px * var(--z)), 4vw, calc(40px * var(--z))); margin: calc(14px * var(--z)) 0; letter-spacing: -.02em; } .l-dark p { color: #cbd7ea; line-height: 1.65; } .muted-d { color: #8aa0c0 !important; font-size: calc(13px * var(--z)); }
.pill { display: inline-block; border: calc(1px * var(--z)) solid rgba(255,255,255,.5); border-radius: calc(999px * var(--z)); padding: calc(4px * var(--z)) calc(12px * var(--z)); font-size: calc(12px * var(--z)); font-weight: 700; letter-spacing: .08em; } .pill.ok { background: #0b3a2b; border-color: #0b3a2b; color: #46e0a2; letter-spacing: 0; }
.bar.big { height: calc(10px * var(--z)); margin: calc(8px * var(--z)) 0 calc(6px * var(--z)); background: #1d3354; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(270px * var(--z)), 1fr)); gap: calc(22px * var(--z)); align-items: stretch; padding-bottom: calc(20px * var(--z)); }
.price-card { position: relative; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(16px * var(--z)); padding: calc(28px * var(--z)) calc(24px * var(--z)); display: flex; flex-direction: column; gap: calc(14px * var(--z)); background: #fff; box-shadow: var(--shadow); }
.price-card.popular { background: #06172e; color: #fff; border-color: #06172e; transform: translateY(calc(-8px * var(--z))); box-shadow: 0 calc(20px * var(--z)) calc(50px * var(--z)) rgba(0,30,80,.3); } .price-card.popular .price span { color: #9fb2d0; } .price-card.popular .price b { color: #fff; } .price-card.popular li svg { color: #46e0a2; }
.price-card .ribbon { position: absolute; top: calc(14px * var(--z)); right: calc(16px * var(--z)); background: var(--cyan); color: #00263a; font-size: calc(12px * var(--z)); font-weight: 700; padding: calc(3px * var(--z)) calc(12px * var(--z)); border-radius: calc(999px * var(--z)); }
.price-card h3 { font-size: calc(15px * var(--z)); letter-spacing: .06em; }
.price b { font-size: calc(40px * var(--z)); color: var(--blue); letter-spacing: -.02em; } .price span { color: var(--muted); }
.price-card ul { align-content: start; list-style: none; margin: 0; padding: 0; display: grid; gap: calc(9px * var(--z)); flex: 1; font-size: calc(14px * var(--z)); }
.price-card li { display: flex; gap: calc(9px * var(--z)); align-items: flex-start; } .price-card li svg { width: calc(16px * var(--z)); height: calc(16px * var(--z)); color: var(--ok); flex: none; margin-top: calc(2px * var(--z)); } .price-card li.extra { font-weight: 650; } .price-card li.off { color: var(--faint); } .price-card.popular li.off { color: #6f85a6; } .price-card li .dash { width: calc(16px * var(--z)); text-align: center; flex: none; }
.price-card.popular .btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.l-faq { border: calc(1px * var(--z)) solid var(--line); border-radius: calc(14px * var(--z)); overflow: hidden; background: #fff; } .l-faq details + details { border-top: calc(1px * var(--z)) solid var(--line); }
.l-faq summary { list-style: none; cursor: pointer; padding: calc(18px * var(--z)) calc(22px * var(--z)); font-weight: 600; display: flex; align-items: center; justify-content: space-between; } .l-faq summary::-webkit-details-marker { display: none; } .l-faq summary svg { width: calc(18px * var(--z)); height: calc(18px * var(--z)); color: var(--muted); transform: rotate(90deg); transition: transform .15s; } .l-faq details[open] summary svg { transform: rotate(-90deg); }
.l-faq p { margin: 0; padding: 0 calc(22px * var(--z)) calc(20px * var(--z)); color: var(--muted); line-height: 1.65; }
.cta-box { background: #06172e; color: #fff; text-align: center; border-radius: calc(18px * var(--z)); padding: calc(52px * var(--z)) calc(24px * var(--z)); margin-bottom: calc(64px * var(--z)); } .cta-box h2 { font-size: clamp(calc(24px * var(--z)), 4vw, calc(38px * var(--z))); } .cta-box p { color: #cbd7ea; margin: calc(12px * var(--z)) auto calc(24px * var(--z)); max-width: calc(560px * var(--z)); }
.about { padding-top: calc(56px * var(--z)); } .about h2 { margin-bottom: calc(14px * var(--z)); font-size: calc(28px * var(--z)); } .about p { color: var(--muted); line-height: 1.7; } .card-plain { border: calc(1px * var(--z)) solid var(--line); border-radius: calc(14px * var(--z)); padding: calc(26px * var(--z)); background: var(--surface); } .card-plain h3 { margin-bottom: calc(14px * var(--z)); font-size: calc(18px * var(--z)); }
.l-four { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(230px * var(--z)), 1fr)); gap: calc(18px * var(--z)); } .belief { background: #fff; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(14px * var(--z)); padding: calc(22px * var(--z)); } .belief p { color: var(--muted); font-size: calc(13.5px * var(--z)); line-height: 1.6; margin: calc(6px * var(--z)) 0 0; }
.ic { width: calc(46px * var(--z)); height: calc(46px * var(--z)); border-radius: calc(12px * var(--z)); background: var(--cyan-50); color: var(--blue); display: grid; place-items: center; margin-bottom: calc(14px * var(--z)); } .ic svg { width: calc(22px * var(--z)); height: calc(22px * var(--z)); } .ic.grey { background: var(--surface); margin: 0; flex: none; }
.l-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px * var(--z)); } .c-card { background: #fff; border: calc(1px * var(--z)) solid var(--line); border-radius: calc(14px * var(--z)); padding: calc(24px * var(--z)); box-shadow: var(--shadow); } .c-card h3 { margin-bottom: calc(6px * var(--z)); font-size: calc(17px * var(--z)); } .c-card a { font-weight: 600; word-break: break-all; } .c-card.wide { grid-column: span 2; display: flex; gap: calc(16px * var(--z)); align-items: flex-start; } .c-card.wide p { margin: 0; color: var(--muted); line-height: 1.6; }
.l-foot { background: #06172e; color: #cbd7ea; padding: calc(46px * var(--z)) 0 calc(18px * var(--z)); margin-top: calc(10px * var(--z)); } .l-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: calc(34px * var(--z)); } .l-foot h4 { color: #fff; margin: 0 0 calc(12px * var(--z)); font-size: calc(15px * var(--z)); } .l-foot a { display: block; color: #9fb2d0; margin: calc(8px * var(--z)) 0; word-break: break-all; } .l-foot a:hover { color: #fff; }
.logo-chip { background: #fff; border-radius: calc(12px * var(--z)); padding: calc(8px * var(--z)) calc(12px * var(--z)); display: inline-block; margin-bottom: calc(14px * var(--z)); } .logo-chip img { height: calc(40px * var(--z)); display: block; } .foot-brand b { color: #fff; display: block; } .foot-brand p { color: #9fb2d0; line-height: 1.6; max-width: calc(320px * var(--z)); }
.l-foot .copy { margin-top: calc(30px * var(--z)); padding-top: calc(16px * var(--z)); border-top: calc(1px * var(--z)) solid #1d3354; font-size: calc(12.5px * var(--z)); color: #7f93b2; }
.signup-overlay { position: fixed; inset: 0; background: rgba(11,31,58,.55); display: grid; place-items: center; z-index: 50; padding: calc(16px * var(--z)); overflow: auto; }
.signup-box { background: #fff; border-radius: calc(14px * var(--z)); padding: calc(26px * var(--z)); width: min(calc(440px * var(--z)), 100%); max-height: 94vh; overflow: auto; box-shadow: 0 calc(20px * var(--z)) calc(60px * var(--z)) rgba(0,0,0,.3); }
@media (max-width: 900px) { .l-hero-grid, .l-feature, .l-biz, .l-split { grid-template-columns: 1fr; } .l-three { grid-template-columns: 1fr; gap: calc(22px * var(--z)); } .l-contact { grid-template-columns: 1fr; } .c-card.wide { grid-column: auto; } .l-foot-grid { grid-template-columns: 1fr 1fr; } .l-nav a { padding: calc(7px * var(--z)) calc(9px * var(--z)); } .price-card.popular { transform: none; } }
@media (max-width: 640px) { .l-top .row { flex-wrap: wrap; gap: calc(8px * var(--z)); } .l-nav { order: 3; width: 100%; justify-content: center; } .l-hero { padding: calc(36px * var(--z)) 0 calc(48px * var(--z)); } }
/* ---- billing ---- */
.pay-now { border: calc(2px * var(--z)) solid var(--blue); margin-bottom: calc(16px * var(--z)); } .pay-now .amount { font-size: calc(24px * var(--z)); font-weight: 700; color: var(--blue); }
.plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(220px * var(--z)), 1fr)); gap: calc(14px * var(--z)); }
.plan-mini { border: calc(1px * var(--z)) solid var(--line); border-radius: var(--radius); padding: calc(14px * var(--z)); background: #fff; } .plan-mini.current { border-color: var(--blue); background: var(--blue-50); }
.seg { display: inline-flex; border: calc(1px * var(--z)) solid var(--line-strong); border-radius: calc(9px * var(--z)); overflow: hidden; }
.seg button { border: 0; background: #fff; padding: calc(7px * var(--z)) calc(14px * var(--z)); cursor: pointer; } .seg button.on { background: var(--blue); color: #fff; }
.pay-ins { margin: 0; padding-left: calc(18px * var(--z)); display: grid; gap: calc(4px * var(--z)); }
@media (max-width: 640px) { .l-hero { padding: calc(40px * var(--z)) 0 calc(48px * var(--z)); } .l-nav a { padding: calc(7px * var(--z)) calc(10px * var(--z)); } }
.l-wrap.up { margin-top: calc(-56px * var(--z)); position: relative; }

/* ---- agent status + click to call ---- */
.tel { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; } .tel::before { content: "☎ "; opacity: .55; } .tel:hover { text-decoration: underline; }
.sdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #9aa7ba; flex: none; }
.sdot.st-online { background: #0E9F6E; } .sdot.st-break { background: #E0A100; } .sdot.st-away { background: #F08A24; } .sdot.st-dnd { background: #D32F2F; } .sdot.st-offline { background: #9aa7ba; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 8px 4px 12px; background: #fff; }
.status-pill select { border: 0; background: transparent; font-weight: 600; cursor: pointer; outline: none; padding-right: 2px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.status-btn { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; }
.status-btn:hover { border-color: var(--blue); } .status-btn.on { border-width: 2px; border-color: var(--blue); background: var(--blue-50); color: var(--blue-900); padding: 11px 13px; }
.status-btn.on.st-dnd { border-color: #D32F2F; background: var(--bad-bg); color: #8E1B1B; } .status-btn.on.st-break, .status-btn.on.st-away { border-color: #E0A100; background: var(--warn-bg); color: #6B4300; } .status-btn.on.st-online { border-color: #0E9F6E; background: var(--ok-bg); color: #08724F; } .status-btn.on.st-offline { border-color: #9aa7ba; background: #F6F7FA; color: var(--muted); }
.chip.break, .chip.away { border-color: #F2D894; background: var(--warn-bg); color: #6B4300; } .chip.dnd { border-color: #F3B8B8; background: var(--bad-bg); color: #8E1B1B; }
.recent-h { padding: 6px 16px 4px; font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; border-top: 1px solid var(--line); }
.recent { max-height: 190px; overflow: auto; padding-bottom: 8px; }
.recent-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 7px 16px; cursor: pointer; text-align: left; } .recent-row:hover { background: var(--blue-50); }
.recent-row .rdir { width: 18px; color: var(--ok); font-weight: 700; } .recent-row.missed .rdir { color: var(--bad); } .recent-row .rnum { font-weight: 600; flex: 1; } .recent-row small { color: var(--faint); }

/* ---- website on very large viewports (browser zoomed out to 50% etc.): every size scales with --z so the page fills the screen.
   No CSS `zoom` is used (browsers differ on it); lengths in the website rules are written as calc(Npx * var(--z)). ---- */
:root { --z: 1; }
@media (min-width: 1500px) { :root { --z: 1.2; } }
@media (min-width: 1900px) { :root { --z: 1.5; } }
@media (min-width: 2400px) { :root { --z: 2; } }
@media (min-width: 3000px) { :root { --z: 2.5; } }
@media (min-width: 3600px) { :root { --z: 3; } }
@media (min-width: 4400px) { :root { --z: 3.5; } }
/* Every public page fills at least the whole screen: the footer sits at the bottom even on short pages */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing > footer, .landing > .l-foot { margin-top: auto; }
@media (min-width: 1500px) {
  .landing .l-hero:not(.page) { min-height: calc(100vh - 61px * var(--z)); display: flex; align-items: center; padding-bottom: calc(110px * var(--z)); }
  .landing .l-hero:not(.page) > .l-wrap { width: 100%; }
}

/* Portal controls used inside the website pages and the signup dialog, scaled with --z (same values as the portal rules above) */
.landing, .signup-overlay { font-size: calc(14px * var(--z)); }
.landing .btn, .signup-overlay .btn { padding: calc(8px * var(--z)) calc(14px * var(--z)); border-radius: calc(8px * var(--z)); gap: calc(7px * var(--z)); min-height: calc(36px * var(--z)); }
.landing .btn.sm, .signup-overlay .btn.sm { padding: calc(4px * var(--z)) calc(10px * var(--z)); min-height: calc(28px * var(--z)); font-size: calc(12.5px * var(--z)); }
.landing .btn.big, .landing .btn.big2, .landing .btn.big3 { padding: 0 calc(22px * var(--z)); min-height: calc(46px * var(--z)); }
.signup-overlay h1 { font-size: calc(22px * var(--z)); }
.signup-overlay .row { gap: calc(10px * var(--z)); }
.signup-overlay .field { gap: calc(5px * var(--z)); }
.signup-overlay .field > label { font-size: calc(12.5px * var(--z)); }
.signup-overlay .field .help { font-size: calc(12px * var(--z)); }
.signup-overlay input[type=text], .signup-overlay input[type=password], .signup-overlay input[type=email], .signup-overlay input[type=tel], .signup-overlay select { border-radius: calc(8px * var(--z)); padding: calc(8px * var(--z)) calc(11px * var(--z)); min-height: calc(36px * var(--z)); }
.signup-overlay .err { padding: calc(9px * var(--z)) calc(12px * var(--z)); border-radius: calc(8px * var(--z)); font-size: calc(13px * var(--z)); }
.signup-overlay .auth-box { gap: calc(16px * var(--z)); }
.signup-overlay input[type=radio], .signup-overlay input[type=checkbox] { width: calc(14px * var(--z)); height: calc(14px * var(--z)); }