/* ── Brand tokens ───────────────────────────────────────────────────────────
   The design system's own layer. Everything below derives colour, type and
   shape from here, so the palette has one owner and the Latin face can diverge
   from the Arabic one without hunting through the sheet. The face is the
   self-hosted Alexandria variable from fonts.css — never a CDN. */
:root{
  --brand-primary:#1F9887;
  --brand-primary-strong:#177a6c;
  --brand-primary-soft:color-mix(in oklch, var(--brand-primary) 12%, transparent);
  --brand-font-arabic:'Alexandria Variable', 'Alexandria', system-ui, sans-serif;
  --brand-font-latin:'Alexandria Variable', 'Alexandria', system-ui, sans-serif;
  --brand-radius-control:999px;
  --brand-radius-card:16px;
}
[dir="ltr"] body{ font-family:var(--brand-font-latin); }

/* ============ TOKENS ============ */
:root{
  --primary:var(--brand-primary); --primary-strong:var(--brand-primary-strong); --bright:#34E0C4;
  --primary-fill:var(--brand-primary-strong); --primary-ink:#ffffff; --primary-text:#12655a;
  --warn-text:#a35a00; --danger-text:#c1272d;
  --bg:#F8FAFB; --surface:#ffffff; --surface-2:#F1F5F6; --surface-3:#E9EFF0;
  --border:#E1E8E9; --border-strong:#D3DDDE;
  --text:#0C1E22; --text-2:rgba(12,30,34,.72); --text-3:rgba(12,30,34,.66);
  --shadow-sm:0 1px 2px rgba(12,30,34,.05), 0 2px 8px rgba(12,30,34,.04);
  --shadow-md:0 6px 24px rgba(12,30,34,.08), 0 2px 6px rgba(12,30,34,.05);
  --shadow-lg:0 24px 60px rgba(12,30,34,.13), 0 8px 20px rgba(12,30,34,.07);
  --ring:0 0 0 3px rgba(31,152,135,.35);
  --radius:var(--brand-radius-card); --radius-sm:12px; --radius-lg:24px; --radius-pill:var(--brand-radius-control);
  --maxw:1200px; --gutter:24px;
  --wa:#25D366; --ig:#E4405F; --ms:#0A7CFF; --tg:#2AABEE; --web:#1F9887;
  --font:var(--brand-font-arabic);
  --dur:.22s; --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#070C10; --surface:#0D171D; --surface-2:#111F27; --surface-3:#16262F;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.15);
  --text:#EAF3F2; --text-2:rgba(234,243,242,.74); --text-3:rgba(234,243,242,.56);
  --primary:#25b3a0; --primary-strong:#1F9887;
  --primary-fill:#35c9b4; --primary-ink:#06231d; --primary-text:#25b3a0;
  --warn-text:#f0a44a; --danger-text:#ff7b7f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 28px rgba(0,0,0,.5);
  --shadow-lg:0 28px 70px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(52,224,196,.4);
}
/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; font-family:var(--font); background:var(--bg); color:var(--text); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); overflow-x:hidden}
h1,h2,h3,h4{margin:0; line-height:1.14; font-weight:800; letter-spacing:-.01em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:var(--primary-text); text-decoration:none; transition:color var(--dur) var(--ease)}
a:hover{color:var(--primary-strong)}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
::selection{background:var(--primary); color:#fff}
[dir="ltr"]{font-feature-settings:"ss01"}
/* ============ LAYOUT ============ */
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
.section-tight{padding-block:clamp(48px,6vw,80px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--primary-text); letter-spacing:.02em}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--primary); border-radius:2px}
.h-xl{font-size:clamp(34px,5.2vw,60px); font-weight:900; letter-spacing:-.025em}
.h-lg{font-size:clamp(28px,3.8vw,44px); font-weight:800; letter-spacing:-.02em}
.h-md{font-size:clamp(22px,2.6vw,30px); font-weight:800}
[dir="rtl"] .h-xl,[dir="rtl"] .h-lg,[dir="rtl"] .brand-word{letter-spacing:normal}
.lead{font-size:clamp(16px,1.5vw,19px); color:var(--text-2); font-weight:400; max-width:60ch}
.muted{color:var(--text-2)}
.center{text-align:center}
.sec-head{max-width:64ch; margin-inline:auto}
.sec-head.center{display:flex; flex-direction:column; align-items:center; gap:14px}
.sec-head .eyebrow{align-self:center}
/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-weight:700; font-size:15px; padding:13px 22px; border-radius:var(--radius-pill); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space:nowrap; min-height:46px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--primary-fill); color:var(--primary-ink); box-shadow:0 6px 18px rgba(31,152,135,.28)}
.btn-primary:hover{background:var(--primary-strong); color:var(--primary-ink); box-shadow:0 10px 26px rgba(31,152,135,.36); transform:translateY(-1px)}
.btn-ghost{background:var(--surface); color:var(--text); border:1.5px solid var(--border-strong)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary-text); transform:translateY(-1px)}
.btn-soft{background:var(--surface-2); color:var(--text); border:1.5px solid transparent}
.btn-soft:hover{border-color:var(--border-strong)}
.btn-lg{padding:16px 30px; font-size:16.5px; min-height:54px}
.btn-block{width:100%}
/* ============ PRIMITIVES ============ */
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border)}
.pill-live{background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary-text); border-color:transparent; font-weight:700}
.dot-live{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:live 2s var(--ease) infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.tag-teal{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:700; background:color-mix(in srgb,var(--primary) 13%,transparent); color:var(--primary-text)}
/* ============ CHAT ============ */
.chat-wrap{display:flex; flex-direction:column; gap:9px}
.msg{max-width:82%; padding:11px 15px; border-radius:18px; font-size:14.5px; line-height:1.55; font-weight:500; box-shadow:var(--shadow-sm); animation:msgIn .34s var(--ease) both}
.msg.bot{align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-inline-start:none; border-start-start-radius:6px}
.msg.user{align-self:flex-end; background:var(--primary-fill); color:var(--primary-ink); border-end-end-radius:6px; font-weight:600}
[data-theme="dark"] .msg.bot{background:var(--surface-2)}
/* Slide, don't fade. The demo threads replay on a loop, so a message that
   fades through partial opacity spends that time at a blended — and
   measurably insufficient — contrast against its bubble, over and over. */
@keyframes msgIn{from{transform:translateY(10px) scale(.98)}to{transform:none}}
.typing{align-self:flex-start; display:inline-flex; gap:4px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:18px; border-start-start-radius:6px}
[data-theme="dark"] .typing{background:var(--surface-2)}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--text-3); animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-5px); opacity:1}}
.result-chip{align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:14px; font-size:14px; font-weight:700; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-text); border:1px solid color-mix(in srgb,var(--primary) 25%,transparent); animation:msgIn .34s var(--ease) both}
.result-chip svg{width:18px; height:18px; flex:none}
/* ============ WINDOW / MOCKUP CHROME ============ */
.win{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.win-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.win-bar .lights{display:flex; gap:6px}
.win-bar .lights i{width:11px; height:11px; border-radius:50%; background:var(--border-strong)}
.win-title{font-size:12.5px; font-weight:600; color:var(--text-3); margin-inline-start:6px}
/* ============ CHANNEL ICONS ============ */
.chan-ico{display:inline-flex; align-items:center; justify-content:center; border-radius:13px; color:#fff}
.chan-wa{background:var(--wa)} .chan-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .chan-ms{background:var(--ms)} .chan-tg{background:var(--tg)} .chan-web{background:var(--primary)}
/* ============ TABS / SEGMENTED ============ */
.seg{display:inline-flex; gap:4px; padding:5px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); flex-wrap:wrap}
.seg button{padding:9px 17px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; color:var(--text-2); transition:all var(--dur) var(--ease); white-space:nowrap; min-height:40px}
.seg button:hover{color:var(--text)}
.seg button[aria-selected="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); font-weight:700}
[data-theme="dark"] .seg button[aria-selected="true"]{background:var(--surface-3)}
/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .msg,.result-chip,.wa-msg,.wa-chips,.wa-result{animation:none !important}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
  .dot-live{animation:none}
}
/* ============ GRID HELPERS ============ */
.grid{display:grid; gap:24px}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.wrap{flex-wrap:wrap}
.hide-mob{display:initial}
@media (max-width:1024px){.hide-mob{display:none !important}}
.show-mob{display:none !important}
@media (max-width:1024px){.show-mob.icon-btn{display:inline-flex !important}}
html{scroll-padding-top:80px}
/* ============ NAV ============ */
.nav{position:fixed; inset-inline:0; top:0; z-index:100; transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom:1px solid transparent}
.nav-solid{background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--border); box-shadow:var(--shadow-sm)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text)}
.brand:hover{color:var(--text)}
.brand-word{font-size:22px; font-weight:900; letter-spacing:-.02em; display:inline-flex; align-items:baseline; gap:6px}
.brand-sub{font-size:1em; font-weight:900; color:var(--primary-text); letter-spacing:normal}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-link{padding:8px 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--text-2); transition:color var(--dur),background var(--dur)}
.nav-link:hover{color:var(--text); background:var(--surface-2)}
.nav-link.login{color:var(--text-2)}
.nav-actions{display:flex; align-items:center; gap:10px}
.icon-btn{display:inline-flex; align-items:center; gap:6px; justify-content:center; min-width:42px; height:42px; padding:0 10px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); transition:all var(--dur) var(--ease)}
.icon-btn:hover{color:var(--primary-text); border-color:var(--primary)}
.lang-tag{font-size:12.5px; font-weight:800}
.nav-mobile{position:fixed; inset:68px 0 0; background:var(--bg); z-index:99; padding:20px var(--gutter) max(32px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:space-between; gap:24px; overflow-y:auto; overscroll-behavior:contain; animation:msgIn .25s var(--ease)}
@media (min-width:1025px){.nav-mobile{display:none !important}}
.nav-mobile-links{display:flex; flex-direction:column; gap:2px}
.nav-mobile-link{display:flex; align-items:center; justify-content:space-between; padding:18px 8px; font-size:19px; font-weight:700; color:var(--text); border-bottom:1px solid var(--border); text-align:start}
.nav-mobile-link svg{color:var(--text-3)}
.nav-mobile-foot{display:flex; flex-direction:column; gap:10px}
/* ============ HERO ============ */
.hero{position:relative; padding-top:120px; padding-bottom:clamp(48px,7vw,88px); overflow:hidden}
.hero-glow{position:absolute; inset-block-start:-160px; inset-inline-end:-120px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--bright) 26%,transparent),transparent 62%); filter:blur(20px); pointer-events:none; z-index:0}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:22px}
.hero-title{margin:0; line-height:1.16}
[dir="rtl"] .hero-title{line-height:1.32}
.hero-t1{display:block; color:var(--text-2); font-weight:800; font-size:.66em}
.hero-t2{display:block; color:var(--text); margin-top:.08em}
.hero-t2{background:linear-gradient(120deg,var(--primary),color-mix(in srgb,var(--bright) 85%,var(--primary))); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-sub{margin:0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-trial{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-2); margin:0}
.hero-trial svg{color:var(--primary-text)}
.hero-visual{display:flex; flex-direction:column; gap:14px}
.hero-controls{display:flex; flex-direction:column; gap:10px}
.hero-try{font-size:13.5px; font-weight:700; color:var(--text-3)}
.biz-bar{position:relative; display:flex; gap:2px; padding:5px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); align-self:stretch; overflow:hidden; box-shadow:var(--shadow-sm)}
.biz-bar button{position:relative; z-index:1; flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 6px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:700; color:var(--text-2); white-space:nowrap; min-height:42px}
/* The label snaps rather than cross-fading: the bar rotates on its own, and a
   320ms colour transition means the text spends that time at a blend of the two
   tones — measurably under 4.5:1 against either ground it is over. */
.biz-bar button>svg{flex:none; opacity:.68; transition:opacity .32s var(--ease)}
.biz-bar button:hover{color:var(--text)}
.biz-bar button[aria-selected="true"]{color:var(--primary-ink); background:var(--primary-fill)}
.biz-bar button[aria-selected="true"]>svg{opacity:1}
@media (max-width:480px){.biz-bar button{font-size:12px; gap:4px}.biz-bar button>svg{display:none}}
.hero-win{overflow:hidden}
.chan-switch{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; padding-top:2px}
.chan-switch-label{font-size:13px; font-weight:600; color:var(--text-3)}
.chan-switch-row{display:flex; gap:8px}
.chan-btn{width:40px; height:40px; border-radius:12px; color:#fff; display:inline-flex; align-items:center; justify-content:center; opacity:.85; box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease); border:none}
.chan-btn:hover{opacity:1; transform:translateY(-2px)}
.chan-btn.on{opacity:1; transform:translateY(-1px)}
.chan-btn.chan-wa.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--wa)}
.chan-btn.chan-ms.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ms)}
.chan-btn.chan-tg.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--tg)}
.chan-btn.chan-ig.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ig)}
.chan-btn.chan-web.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--primary)}
/* ============ CHATSIM ============ */
.chatsim{--ch-head:var(--surface-2);--ch-head-fg:var(--text);--ch-head-sub:var(--text-3);--ch-dot:#22c55e;--ch-wall:var(--bg);--ch-out:var(--primary-fill);--ch-out-fg:var(--primary-ink);--ch-in:var(--surface);--ch-in-fg:var(--text);--ch-send:var(--primary-fill); display:flex; flex-direction:column; background:var(--surface)}
.chatsim-head{display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid color-mix(in srgb,var(--ch-head-fg) 12%,transparent); background:var(--ch-head)}
.cs-name-row{display:flex; align-items:center; gap:7px}
.cs-name{font-size:17px; font-weight:800; color:var(--ch-head-fg)}
.cs-status{font-size:12px; font-weight:600; color:var(--ch-head-sub)}
.cs-status-row{display:flex; align-items:center; gap:7px; margin-top:2px}
.cs-typing-inline{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ch-head-sub)}
.cs-dots{display:inline-flex; gap:3px}
.cs-dots span{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; animation:bounce 1.2s infinite}
.cs-dots span:nth-child(2){animation-delay:.18s}.cs-dots span:nth-child(3){animation-delay:.36s}
.chatsim .dot-live{background:var(--ch-dot)}
.chatsim-body{height:var(--h); overflow-y:auto; padding:18px 16px; background:var(--ch-wall); scrollbar-width:thin}
.chatsim-body::-webkit-scrollbar{width:5px}.chatsim-body::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:9px}
.chatsim .msg.user{background:var(--ch-out); color:var(--ch-out-fg)}
.chatsim .msg.bot{background:var(--ch-in); color:var(--ch-in-fg); border-color:color-mix(in srgb,var(--ch-in-fg) 10%,transparent)}
.chatsim .typing{background:var(--ch-in); border-color:color-mix(in srgb,var(--ch-in-fg) 10%,transparent)}
.chatsim .result-chip{background:color-mix(in srgb,var(--ch-send) 15%,var(--ch-wall)); color:var(--ch-send)}
.chatsim-input{display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--border); background:var(--surface)}
.ci-field{flex:1; padding:11px 15px; border-radius:999px; background:var(--surface-2); color:var(--text-3); font-size:13.5px; font-weight:500}
.ci-send{width:40px; height:40px; border-radius:50%; background:var(--ch-send); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none}
.chatsim.chan-wa{--ch-head:#008069;--ch-head-fg:#fff;--ch-head-sub:#fff;--ch-dot:#c9ffd8;--ch-wall:#ECE5DD;--ch-out:#D9FDD3;--ch-out-fg:#0b2318;--ch-in:#fff;--ch-in-fg:#0b1f1c;--ch-send:#008069}
.chatsim.chan-tg{--ch-head:#46708f;--ch-head-fg:#fff;--ch-head-sub:#fff;--ch-dot:#c9ffd8;--ch-wall:#cddced;--ch-out:#cfe4f7;--ch-out-fg:#12283a;--ch-in:#fff;--ch-in-fg:#12222e;--ch-send:#4c9be8}
.chatsim.chan-ig{--ch-head:var(--surface);--ch-head-fg:var(--text);--ch-head-sub:var(--text-3);--ch-dot:#22c55e;--ch-wall:var(--surface);--ch-out:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);--ch-out-fg:#fff;--ch-in:var(--surface-2);--ch-in-fg:var(--text);--ch-send:#DD2A7B}
.chatsim.chan-ms{--ch-head:var(--surface);--ch-head-fg:var(--text);--ch-head-sub:var(--text-3);--ch-dot:#22c55e;--ch-wall:var(--surface);--ch-out:#0b5fd0;--ch-out-fg:#fff;--ch-in:var(--surface-2);--ch-in-fg:var(--text);--ch-send:#0b5fd0}
.chatsim.chan-web{--ch-head:var(--primary-fill);--ch-head-fg:var(--primary-ink);--ch-head-sub:var(--primary-ink);--ch-dot:#c9ffd8;--ch-wall:#F4F9F8;--ch-out:var(--primary-fill);--ch-out-fg:var(--primary-ink);--ch-in:#fff;--ch-in-fg:#0C1E22;--ch-send:var(--primary)}
.chatsim.chan-wa .cs-chan,.chatsim.chan-tg .cs-chan,.chatsim.chan-web .cs-chan{background:rgba(255,255,255,.22)}
/* ============ CHANNELS STRIP ============ */
.channels .sec-head{margin-bottom:34px}
.chan-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.chan-tile{display:flex; flex-direction:column; align-items:center; gap:9px; padding:22px 12px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--surface); transition:all var(--dur) var(--ease); text-align:center}
.chan-tile:hover{border-color:var(--border-strong); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.chan-tile.on{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary),var(--shadow-md)}
.chan-name{font-size:15px; font-weight:800; color:var(--text)}
.chan-note{font-size:11.5px; font-weight:600; color:var(--text-3); line-height:1.4}
.chan-preview{display:flex; align-items:center; gap:12px; justify-content:center; margin-top:26px}
.meta-badge{display:flex; flex-direction:column; align-items:center; gap:13px; margin-top:38px}
.meta-badge-top{margin-top:0; margin-bottom:22px}
.meta-chip{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 30px; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center}
.meta-chip img{height:52px; width:auto; display:block}
.meta-badge-note{font-size:13.5px; font-weight:700; color:var(--text-3)}
/* ============ BUSINESS PICKER v2 (vertical rail + story card) ============ */
.picker2{display:grid; grid-template-columns:250px 1fr; gap:24px; margin-top:36px; align-items:start}
.biz-rail{display:flex; flex-direction:column; gap:8px; position:sticky; top:88px}
.biz-rail button{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--surface); border:1.5px solid var(--border); font-size:16px; font-weight:700; color:var(--text-2); text-align:start; transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.biz-rail button>span{flex:1}
.biz-rail button>svg{flex:none; color:var(--text-3); transition:color var(--dur) var(--ease)}
.biz-rail button:hover{border-color:var(--border-strong); color:var(--text)}
.biz-rail button:hover>svg:first-child{color:var(--text-2)}
.biz-rail button[aria-selected="true"]{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,var(--surface)); color:var(--primary-text); box-shadow:0 0 0 1px var(--primary)}
.biz-rail button[aria-selected="true"]>svg{color:var(--primary-text)}
.biz-rail-ar{opacity:0; transform:translateX(4px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
[dir="ltr"] .biz-rail-ar{transform:translateX(-4px)}
.biz-rail button[aria-selected="true"] .biz-rail-ar{opacity:1; transform:none}
.pk2-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:24px}
.pk2-tag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; margin-bottom:10px}
.pk2-tag.warn{color:var(--warn-text)}
.pk2-tag.teal{color:var(--primary-text)}
.pk2-problem h3{font-size:clamp(20px,2.3vw,27px); font-weight:800; line-height:1.42; color:var(--text)}
.pk2-do{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pk2-do-item{display:flex; flex-direction:column; gap:11px; padding:16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border)}
.pk2-do-ic{width:38px; height:38px; border-radius:11px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-text); display:inline-flex; align-items:center; justify-content:center; flex:none}
.pk2-do-item p{font-size:14.5px; font-weight:700; color:var(--text); line-height:1.45; margin:0}
.pk2-out{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--border)}
.pk2-out-chip{display:inline-flex; align-items:center; gap:8px; padding:12px 17px; border-radius:12px; background:var(--brand-primary-strong); color:#fff; font-weight:800; font-size:15px; box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 26%,transparent); flex:none}
.pk2-out p{flex:1; min-width:210px; font-size:14.5px; color:var(--text-2); margin:0}
@media (max-width:820px){
  .picker2{grid-template-columns:1fr; gap:18px}
  .biz-rail{position:static; flex-direction:row; flex-wrap:wrap}
  .biz-rail button{flex:1 1 120px; justify-content:center}
  .biz-rail button>span{flex:none}
  .biz-rail-ar{display:none}
}
@media (max-width:560px){.pk2-do{grid-template-columns:1fr}}
/* ============ BUSINESS PICKER (legacy, unused) ============ */
.picker-seg{display:flex; justify-content:center; margin:30px auto 0; max-width:100%}
.picker-panel{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; align-items:start}
.picker-info{display:flex; flex-direction:column; gap:22px}
.pk-block{display:flex; flex-direction:column; gap:10px}
.pk-label{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--primary-text); text-transform:uppercase; letter-spacing:.03em}
.pk-warn{color:#d97706}
.pk-problem{font-size:19px; font-weight:700; color:var(--text); line-height:1.5; margin:0}
.pk-dash{display:flex; flex-direction:column; gap:10px}
.pk-dash-chip{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:9px 14px; border-radius:12px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-text); font-weight:800; font-size:14px}
.pk-dash p{margin:0; color:var(--text-2); font-size:15px}
.pk-bullets{display:flex; flex-direction:column; gap:11px}
.pk-bullets li{display:flex; align-items:flex-start; gap:10px; font-size:15.5px; font-weight:600; color:var(--text)}
.pk-bullets svg,.cap-bullets svg,.price-feats svg{color:var(--primary-text); flex:none; margin-top:3px}
.picker-chat{display:flex; flex-direction:column; gap:12px}
.pk-chat-label{color:var(--text-3)}
/* ============ JOURNEY ============ */
.journey .sec-head{margin-bottom:40px}
.jry-list{list-style:none; max-width:680px; margin:0 auto; padding:0; position:relative}
.jry-item{display:flex; gap:18px; position:relative; padding-bottom:26px}
.jry-item:last-child{padding-bottom:0}
.jry-item:not(:last-child)::before{content:""; position:absolute; inset-inline-start:22px; top:50px; bottom:-6px; width:2px; border-radius:2px; background:linear-gradient(var(--primary),color-mix(in srgb,var(--primary) 22%,var(--border)))}
.jry-node{width:46px; height:46px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:#fff; background:linear-gradient(150deg,var(--primary),var(--primary-strong)); box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 30%,transparent); position:relative; z-index:1}
.jry-body{flex:1; min-width:0; padding-top:2px}
.jry-title{font-size:17px; font-weight:800; color:var(--text); line-height:1.3}
.jry-desc{margin:6px 0 0; font-size:14.5px; color:var(--text-2); line-height:1.6; text-wrap:pretty}
/* ============ CAPABILITIES · WHATSAPP SERVICES ============ */
.caps .sec-head{margin-bottom:38px}
.caps-sub-mobile{display:none}
.wa{--wh:#008069;--wa-panel:#eef1f1;--wa-list:#ffffff;--wa-hover:#f3f5f5;--wa-on:#eaf0ef;--wa-in:#ffffff;--wa-out:#005C4B;--wa-acc:#25D366;--wa-card:linear-gradient(160deg,#37c26b,#12a15f);--wa-txt:#111b21;--wa-mut:#5b6b75;--wa-mut-on:#54656f;--wa-head-fg:#fff;--wa-wall:#eef1f1;--wa-in-tx:#111b21;--wa-out-fg:#fff;--wa-edge:rgba(0,0,0,.1);--wa-edge-soft:rgba(0,0,0,.08);--wa-soft:rgba(0,0,0,.06);--wa-dots:rgba(0,0,0,.045);--wa-scroll:#ccd0d5; display:grid; grid-template-columns:340px 1fr; max-width:1040px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--wa-edge); background:var(--wa-panel); text-align:start; direction:rtl; min-height:540px}
[data-theme="dark"] .wa{--wa-panel:#202c33;--wa-list:#111b21;--wa-hover:#202c33;--wa-on:#2a3942;--wa-txt:#e9edef;--wa-mut:#8696a0;--wa-mut-on:#c0cbd1;--wa-edge:rgba(255,255,255,.12);--wa-edge-soft:rgba(255,255,255,.09);--wa-soft:rgba(255,255,255,.07);--wa-dots:rgba(255,255,255,.04);--wa-scroll:#3b4a54}
.wa-list{display:flex; flex-direction:column; background:var(--wa-list); border-inline-end:1px solid var(--wa-edge-soft); min-width:0; min-height:0}
.wa-list-head{display:flex; align-items:center; gap:11px; padding:12px 14px; background:linear-gradient(160deg,#1f9887,#177a6c); color:#fff; flex:none}
.wa-lh-av{width:38px; height:38px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden}
.wa-lh-meta{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.wa-lh-meta b{font-size:15px; font-weight:800}
.wa-lh-meta span{font-size:11.5px; color:rgba(255,255,255,.82); font-weight:600}
.wa-svc-badge{font-size:11px; font-weight:800; background:rgba(255,255,255,.2); color:#fff; padding:4px 9px; border-radius:999px; flex:none; white-space:nowrap}
.wa-mobile-showcase{display:none}
.wa-search{display:flex; align-items:center; gap:9px; margin:10px 12px 6px; padding:8px 13px; border-radius:999px; background:var(--wa-panel); color:var(--wa-mut); font-size:13px; font-weight:500; flex:none}
.wa-convs{list-style:none; margin:0; padding:2px 6px 8px; overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin}
.wa-convs::-webkit-scrollbar{width:5px}.wa-convs::-webkit-scrollbar-thumb{background:var(--wa-scroll); border-radius:9px}
.wa-conv{display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px; border-radius:12px; text-align:start; transition:background var(--dur) var(--ease)}
.wa-conv:hover{background:var(--wa-hover)}
.wa-conv.on{background:var(--wa-on)}
.wa-conv-ico{width:44px; height:44px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff}
.wa-conv-mid{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.wa-conv-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.wa-conv-top b{font-size:14.5px; font-weight:700; color:var(--wa-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-conv-top i{font-size:11px; color:var(--wa-mut); font-style:normal; flex:none}
.wa-conv-prev{font-size:12.5px; color:var(--wa-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.wa-conv.on .wa-conv-prev,.wa-conv.on .wa-conv-top i{color:var(--wa-mut-on)}
.wa-unread{background:var(--wa-acc); color:#0B141A; font-size:11.5px; font-weight:800; min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.wa-chat{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--wa-wall); position:relative}
.wa-chat::before{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--wa-dots) 1px,transparent 1px); background-size:22px 22px; pointer-events:none}
.wa-chat-head{display:flex; align-items:center; gap:11px; padding:11px 16px; background:var(--wh); color:var(--wa-head-fg); border-bottom:1px solid color-mix(in srgb,var(--wa-head-fg) 14%,transparent); flex:none; z-index:1}
.wa-chat-av{width:40px; height:40px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.wa-ch-meta{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.wa-ch-meta b{font-size:15px; font-weight:800}
.wa-ch-meta span{font-size:11.5px; color:color-mix(in srgb,var(--wa-head-fg) 70%,transparent); font-weight:600}
.wa-ch-actions{display:flex; align-items:center; gap:18px; color:color-mix(in srgb,var(--wa-head-fg) 85%,transparent); flex:none}
.wa-chat-body{flex:1; min-height:0; overflow-y:visible; padding:22px 20px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; z-index:1; scrollbar-width:thin}
.wa-chat-body::-webkit-scrollbar{width:5px}.wa-chat-body::-webkit-scrollbar-thumb{background:var(--wa-scroll); border-radius:9px}
.wa-feature-pill{align-self:center; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--wa-mut); background:var(--wa-soft); padding:5px 12px; border-radius:999px; margin-bottom:6px}
.wa-msg{max-width:76%; padding:9px 13px 8px; border-radius:12px; font-size:14px; line-height:1.5; font-weight:500; color:var(--wa-in-tx); position:relative; animation:msgIn .34s var(--ease) both; box-shadow:0 1px 1.5px var(--wa-edge-soft)}
.wa-msg.in{align-self:flex-start; background:var(--wa-in); border-start-start-radius:4px}
.wa-msg.out{align-self:flex-end; background:var(--wa-out); color:var(--wa-out-fg); border-end-end-radius:4px}
.wa-tick{display:inline; font-size:10px; color:color-mix(in srgb,var(--wa-out-fg) 55%,transparent); font-style:normal; margin-inline-start:6px; vertical-align:-1px; white-space:nowrap}
.wa-sys{align-self:center; font-size:11px; font-weight:700; color:var(--wa-mut); background:var(--wa-soft); padding:5px 12px; border-radius:999px; margin:3px 0; text-align:center; max-width:88%}
.wa-comment{align-self:flex-start; max-width:80%; background:var(--wa-in); border:1px solid var(--wa-edge-soft); border-radius:12px; border-start-start-radius:4px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; box-shadow:0 1px 1.5px var(--wa-soft); animation:msgIn .34s var(--ease) both}
.wa-comment-top{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--wa-mut)}
.wa-comment-ig{width:18px; height:18px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none}
.wa-comment-text{font-size:14px; font-weight:500; color:var(--wa-in-tx); line-height:1.5}
.wa-comment-text b{font-weight:800}
.wa-chips{align-self:flex-start; display:flex; flex-wrap:wrap; gap:8px; margin:2px 0; animation:msgIn .34s var(--ease) both}
.wa-chip{font-size:13px; font-weight:700; color:color-mix(in srgb,var(--wa-acc) 78%,var(--wa-txt)); border:1px solid color-mix(in srgb,var(--wa-acc) 55%,transparent); background:color-mix(in srgb,var(--wa-acc) 12%,var(--wa-in)); padding:7px 14px; border-radius:999px}
.wa-result{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:color-mix(in srgb,var(--wa-acc) 78%,var(--wa-txt)); background:color-mix(in srgb,var(--wa-acc) 14%,var(--wa-in)); border:1px solid color-mix(in srgb,var(--wa-acc) 30%,transparent); padding:8px 13px; border-radius:12px; margin-top:2px; animation:msgIn .34s var(--ease) both}
.wa-result svg{flex:none}
.wa-cardwrap{align-self:flex-end; max-width:88%; animation:msgIn .34s var(--ease) both}
.wa-card{background:var(--wa-card); color:#fff; border-radius:16px; padding:13px 14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 20px rgba(0,0,0,.14); min-width:222px}
.wa-card *{color:#fff}
.wa-card-tpl{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.24)}
.wa-tpl-av{width:22px; height:22px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none}
.wa-tpl-ch{margin-inline-start:auto; opacity:.9; display:inline-flex}
.wa-card-head{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800}
.wa-card-head svg{flex:none}
.wa-card-panel{background:rgba(255,255,255,.15); border-radius:12px; padding:12px 13px; display:flex; flex-direction:column; gap:9px}
.wa-card-lbl{font-size:10.5px; font-weight:800; letter-spacing:.05em; opacity:.9; text-transform:uppercase}
.wa-card-row{display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13.5px; font-weight:600}
.wa-card-row span{opacity:.92}
.wa-card-row b{font-weight:800; unicode-bidi:isolate}
.wa-card-row-tot{border-top:1px solid rgba(255,255,255,.24); padding-top:9px; font-size:15px}
.wa-card-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.24); font-weight:800; font-size:13.5px; padding:10px; border-radius:11px}
.wa-card-btn svg{flex:none}
.wa-card-btns{display:flex; flex-direction:column; gap:7px}
.wa-tbtn{display:inline-flex; align-items:center; justify-content:center; gap:7px; background:rgba(255,255,255,.15); font-weight:800; font-size:13.5px; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.3); width:100%}
.wa-tbtn svg{flex:none}
.wa-tbtn.primary{background:#fff; color:#0b3b2f; border-color:#fff}
.wa-tbtn.primary svg{color:#0b3b2f}
.wa-card-foot{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; opacity:.82}
.wa-card-foot svg{flex:none}
.wa-otp{display:flex; gap:9px; justify-content:center; padding:2px 0; direction:ltr}
.wa-otp-d{width:44px; height:52px; border-radius:11px; background:rgba(255,255,255,.18); display:inline-flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; border:1px solid rgba(255,255,255,.3)}
.wa-card-foot2{text-align:center; font-size:12px; font-weight:600; opacity:.9}
.wa-prods{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.wa-prod{background:rgba(255,255,255,.15); border-radius:12px; padding:11px 7px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center}
.wa-prod-ic{width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:19px}
.wa-prod b{font-size:12px; font-weight:800}
.wa-prod i{font-size:11px; font-weight:700; font-style:normal; opacity:.92}
@media (max-width:820px){
  .caps .sec-head{margin-bottom:24px}
  .caps-sub-desktop{display:none}
  .caps-sub-mobile{display:inline}
  .wa{display:block; width:100%; min-height:0; height:auto}
  .wa-list,.wa-chat{display:none}
  .wa-mobile-showcase{display:block; width:100%; background:var(--wa-panel)}
  .wa-mobile-showcase-head{display:flex; align-items:center; gap:10px; min-height:64px; padding:11px 14px; background:linear-gradient(160deg,#1f9887,#177a6c); color:#fff}
  .wa-mobile-showcase-brand{width:40px; height:40px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden}
  .wa-mobile-showcase-meta{display:flex; flex:1; min-width:0; flex-direction:column; line-height:1.25}
  .wa-mobile-showcase-meta b{font-size:15px; font-weight:800}
  .wa-mobile-showcase-meta span{font-size:11.5px; color:rgba(255,255,255,.82); font-weight:600}
  .wa-mobile-services{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px}
  .wa-mobile-service{display:flex; flex-direction:column; min-width:0; min-height:112px; gap:8px; padding:11px; border:1px solid var(--wa-edge-soft); border-radius:14px; background:var(--wa-list); box-shadow:0 2px 8px var(--wa-soft)}
  .wa-mobile-service-top{display:flex; align-items:center; gap:8px; min-width:0}
  .wa-mobile-service-ico{width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none}
  .wa-mobile-service-top b{min-width:0; color:var(--wa-txt); font-size:12.5px; font-weight:800; line-height:1.3}
  .wa-mobile-service p{display:-webkit-box; overflow:hidden; color:var(--wa-mut); font-size:10.5px; font-weight:600; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2}
  .wa-mobile-service-tag{align-self:flex-start; margin-top:auto; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--primary) 12%,var(--wa-list)); color:var(--primary-text); font-size:9.5px; font-weight:800; line-height:1.35}
}
@media (max-width:640px){
  .wa-mobile-services{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:11px}
  .wa-mobile-service{min-height:118px; padding:10px; gap:7px}
}
/* ============ MOCK UIs ============ */
.mk{font-size:13px; color:var(--text)}
.mk-av{width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex:none; position:relative}
.mk-av-ch{position:absolute; inset-block-end:-3px; inset-inline-end:-3px; width:16px; height:16px; border-radius:50%; border:2px solid var(--surface); display:inline-flex; align-items:center; justify-content:center}
.mk-status{padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap}
.mk-new{background:color-mix(in srgb,#0A7CFF 14%,transparent); color:#0A7CFF}
.mk-ship{background:color-mix(in srgb,#d97706 16%,transparent); color:#d97706}
.mk-done{background:color-mix(in srgb,var(--primary) 15%,transparent); color:var(--primary-text)}
.mk-inbox{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border)}
.mk-inbox.big{grid-template-columns:.9fr 1.1fr .8fr}
.mk-list,.mk-thread,.mk-side{background:var(--surface); padding:12px}
.mk-list-h{display:flex; align-items:center; gap:7px; font-weight:800; font-size:12.5px; color:var(--text-2); margin-bottom:10px}
.mk-badge{margin-inline-start:auto; background:var(--primary); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px}
.mk-conv{display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:11px; cursor:default}
.mk-conv.on{background:var(--surface-2)}
.mk-conv-mid{flex:1; min-width:0}.mk-conv-mid b{display:block; font-size:13px}.mk-conv-mid span{display:block; font-size:11.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mk-conv-end{display:flex; flex-direction:column; align-items:flex-end; gap:4px}.mk-conv-end i{font-size:10.5px; color:var(--text-3); font-style:normal}
.mk-unread{background:var(--primary); color:#fff; border-radius:999px; min-width:17px; height:17px; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 4px}
.mk-thread-h{display:flex; align-items:center; gap:9px; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:12px}
.mk-thread-h b{display:block; font-size:13.5px}.mk-on{font-size:11px; color:var(--primary-text); font-weight:700}
.mk-thread-body{display:flex; flex-direction:column; gap:8px}
.mk-side-top{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding-bottom:10px; border-bottom:1px solid var(--border)}
.mk-side-top b{font-size:13.5px}.mk-side-top span{font-size:11.5px; color:var(--text-3)}
.mk-side-tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:10px 0}
.mk-side-sec{margin-top:10px}.mk-side-lbl{font-size:11px; font-weight:800; color:var(--text-3); text-transform:uppercase}
.mk-side-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:12.5px}
.mk-dash{display:flex; flex-direction:column; gap:14px}
.mk-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.mk-stat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px}
.mk-stat-ic{width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-text); display:inline-flex; align-items:center; justify-content:center}
.mk-stat-lbl{font-size:12px; color:var(--text-3); font-weight:600}.mk-stat b{font-size:19px; font-weight:900}
.mk-dash-low{display:grid; grid-template-columns:1.4fr 1fr; gap:12px}
.mk-chart,.mk-feed{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px}
.mk-chart-h{font-size:12.5px; font-weight:800; color:var(--text-2); margin-bottom:12px}
.mk-bars{display:flex; align-items:flex-end; gap:8px; height:90px}
.mk-bars span{flex:1; background:linear-gradient(var(--primary),color-mix(in srgb,var(--bright) 70%,var(--primary))); border-radius:6px 6px 0 0; min-height:8px}
.mk-feed-row{display:flex; align-items:center; gap:9px; padding:8px 0; font-size:12.5px; font-weight:600; border-bottom:1px solid var(--border)}
.mk-feed-row svg{color:var(--primary-text)}.mk-feed-row:last-child{border:none}
.mk-table{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.mk-tr{display:grid; grid-template-columns:.7fr 1fr 1.3fr .8fr .9fr; gap:10px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); font-size:13px}
.mk-inbox.big .mk-tr,.mk-table.big .mk-tr{padding:15px 18px}
.mk-tr:last-child{border:none}
.mk-th{font-size:11.5px; font-weight:800; color:var(--text-3); text-transform:uppercase; background:var(--surface-2)}
.mk-mono{font-weight:800; font-family:ui-monospace,monospace}.mk-mut{color:var(--text-3)}
.mk-camp{display:flex; flex-direction:column; gap:10px}
.mk-camp-row{display:flex; align-items:center; gap:12px; padding:13px 15px; background:var(--surface); border:1px solid var(--border); border-radius:14px}
.mk-camp-mid{flex:1; min-width:0}.mk-camp-mid b{display:block; font-size:14px}.mk-camp-mid span{font-size:12px; color:var(--text-3)}
.mk-camp-stat{display:flex; gap:16px; font-size:12px; color:var(--text-3)}.mk-camp-stat b{color:var(--text); font-weight:800}
.mk-book{display:flex; flex-direction:column; gap:10px}
.mk-book-row{display:flex; align-items:center; gap:14px; padding:13px 15px; background:var(--surface); border:1px solid var(--border); border-radius:14px}
.mk-time{font-weight:900; font-size:15px; color:var(--primary-text); flex:none}
.mk-book-mid{flex:1; min-width:0}.mk-book-mid b{display:block; font-size:14px}.mk-book-mid span{font-size:12px; color:var(--text-3)}
.mk-ordercard{display:flex; flex-direction:column; gap:11px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.mk-oc-item{display:flex; align-items:center; gap:12px}
.mk-oc-thumb{width:44px; height:44px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.mk-oc-item b{font-size:14px}.mk-oc-item .mk-mut{display:block; font-size:12px}
.mk-oc-price{margin-inline-start:auto; font-size:15px}
.mk-oc-line{display:flex; justify-content:space-between; font-size:13px; color:var(--text-2)}.mk-oc-line b{color:var(--text)}
.mk-oc-total{display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border); font-size:15px}.mk-oc-total b{font-size:17px; color:var(--primary-text)}
.mk-bookmini{display:flex; flex-direction:column; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.mk-bm-h{display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px}
.mk-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mk-slot{padding:10px; border-radius:10px; border:1.5px solid var(--border); text-align:center; font-weight:700; font-size:13.5px; color:var(--text-2)}
.mk-slot.on{background:var(--primary); border-color:var(--primary); color:#fff}
.mk-crm{display:flex; flex-direction:column; gap:9px}
.mk-crm-row{display:flex; align-items:center; gap:11px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:13px}
.mk-crm-mid{flex:1; display:flex; align-items:center; gap:9px}.mk-crm-mid b{font-size:14px}
.mk-follow{padding:7px 14px; border-radius:999px; background:var(--primary); color:#fff; font-weight:800; font-size:12.5px; font-family:inherit}
.mk-comments{display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.mk-post{border:1px solid var(--border); border-radius:12px; padding:12px}
.mk-post-h{display:flex; align-items:center; gap:8px; margin-bottom:8px}.mk-post-h b{font-size:13px}
.mk-post-body{font-size:13.5px; font-weight:600}
.mk-comment{display:flex; align-items:center; gap:9px; font-size:13px; padding-inline-start:6px}
.mk-reply{display:flex; align-items:center; gap:8px; padding-inline-start:22px}
/* ============ SETUP ============ */
.su-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:26px; margin-top:38px; align-items:stretch}
.su-steps{display:flex; flex-direction:column; gap:12px}
.su-step{display:flex; align-items:center; gap:15px; padding:18px 18px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--surface); text-align:start; transition:all var(--dur) var(--ease)}
.su-step:hover{border-color:var(--border-strong)}
.su-step.on{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary),var(--shadow-sm)}
.su-num{width:46px; height:46px; border-radius:14px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-2)}
.su-step.on .su-num{background:var(--primary); color:#fff}
.su-step b{font-size:16px; display:block; margin-bottom:3px}.su-step p{margin:0; font-size:13.5px; color:var(--text-2)}
.su-idx{margin-inline-start:auto; font-size:20px; font-weight:900; color:var(--border-strong); flex:none}
.su-step.on .su-idx{color:var(--primary-text)}
.su-preview{min-height:300px}
.su-canvas{padding:20px; background:var(--bg); height:calc(100% - 45px)}
.su-form{display:flex; flex-direction:column; gap:10px}
.su-field{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; font-size:14px}
.su-field span{color:var(--text-3); font-weight:600}.su-field b{font-weight:700}
.su-upload{display:flex; flex-direction:column; gap:14px}
.su-drop{display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px; border:2px dashed var(--border-strong); border-radius:14px; color:var(--text-3); font-weight:600; font-size:14px; text-align:center}
.su-drop svg{color:var(--primary-text)}
.su-files{display:flex; gap:9px; flex-wrap:wrap}
.su-file{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:12.5px; font-weight:700}
.su-file.su-ok{color:var(--primary-text); border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.su-chans{display:flex; flex-direction:column; gap:10px}
.su-chan{display:flex; align-items:center; gap:12px; padding:12px 15px; background:var(--surface); border:1px solid var(--border); border-radius:12px}
.su-chan b{flex:1; font-size:14.5px}
.su-conn{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:var(--primary-text)}
.su-linkbtn{font-size:12.5px; font-weight:800; color:var(--text-3); padding:6px 12px; border-radius:999px; border:1px solid var(--border)}
/* ============ SIGNUP / ONBOARDING ============ */
.signup .container{max-width:1080px}
.ob{display:grid; grid-template-columns:400px 1fr; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.ob-side{position:relative; background:linear-gradient(160deg,#1F9887,#0f5f54); color:#fff; padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; gap:28px; overflow:hidden}
.ob-side::before{content:""; position:absolute; inset-block-start:-26%; inset-inline-start:-18%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(52,224,196,.4),transparent 62%); pointer-events:none}
.ob-brand{display:inline-flex; align-items:center; gap:9px; font-size:18px; font-weight:900; position:relative; z-index:1}
.ob-brand-av{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center}
.ob-side-top{position:relative; z-index:1; display:flex; flex-direction:column; gap:13px}
.ob-side-top h3{font-size:clamp(23px,2.5vw,29px); font-weight:900; line-height:1.28; letter-spacing:normal}
.ob-side-top p{font-size:14.5px; color:rgba(255,255,255,.86); line-height:1.6; max-width:34ch}
.ob-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; position:relative; z-index:1}
.ob-step{display:flex; align-items:center; gap:13px; padding:10px 2px}
.ob-step-ic{width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.72); flex:none}
.ob-step b{font-size:15.5px; font-weight:700; color:rgba(255,255,255,.6)}
.ob-step.on .ob-step-ic{background:#fff; border-color:#fff; color:var(--primary-text)}
.ob-step.on b{color:#fff; font-weight:800}
.ob-form{padding:clamp(26px,3vw,46px); display:flex; justify-content:center}
.ob-form-inner{width:100%; max-width:430px}
.ob-title{font-size:clamp(23px,2.7vw,30px); font-weight:900; text-align:center}
.ob-sub{font-size:14.5px; color:var(--text-2); text-align:center; margin-top:11px; line-height:1.6}
.ob-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:19px 0 22px}
.ob-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--primary-text); background:color-mix(in srgb,var(--primary) 10%,transparent); padding:7px 13px; border-radius:999px}
.ob-card{display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:clamp(20px,2.4vw,28px)}
.ob-field{display:flex; flex-direction:column; gap:8px}
.ob-field label{font-size:13.5px; font-weight:800; color:var(--text)}
.ob-inp{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.ob-inp:focus-within{border-color:var(--primary); box-shadow:var(--ring); background:var(--surface)}
.ob-inp>svg{color:var(--text-3); flex:none}
.ob-inp input{flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--text)}
.ob-inp input::placeholder{color:var(--text-3); font-weight:500}
.ob-eye{color:var(--text-3); background:none; border:none; padding:0; display:inline-flex; cursor:pointer}
.ob-eye:hover{color:var(--text-2)}
.ob-submit{margin-top:4px}
.ob-secure{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text-3); margin-top:2px}
.ob-secure svg{color:var(--primary-text)}
.ob-login{text-align:center; font-size:14px; color:var(--text-2); margin-top:20px; font-weight:600}
.ob-login a{font-weight:800}
@media (max-width:820px){.ob{grid-template-columns:1fr}.ob-side{gap:22px}}
/* ============ PRICING ============ */
.price-toggle{display:inline-flex; gap:4px; padding:5px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; margin:30px auto 34px}
.price-toggle{display:flex; width:max-content; margin-inline:auto}
.price-toggle button{display:inline-flex; align-items:center; gap:9px; padding:11px 24px; border-radius:999px; font-size:15px; font-weight:700; color:var(--text-2); font-family:inherit; transition:all var(--dur)}
.price-toggle button.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}
[data-theme="dark"] .price-toggle button.on{background:var(--surface-3)}
.price-save{font-size:11.5px; font-weight:800; color:var(--primary-text); background:color-mix(in srgb,var(--primary) 14%,transparent); padding:2px 8px; border-radius:999px}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.price-card{position:relative; display:flex; flex-direction:column; padding:30px 26px; border-radius:var(--radius-lg); border:1.5px solid var(--border); background:var(--surface); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.price-card:not(.hot):hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow-md)}
.price-card.hot{border-color:transparent; background:linear-gradient(168deg,var(--primary),var(--primary-strong)); color:#fff; box-shadow:0 24px 60px color-mix(in srgb,var(--primary) 36%,transparent); transform:translateY(-10px)}
.price-badge{position:absolute; top:-14px; inset-inline-start:50%; transform:translateX(-50%); background:#fff; color:var(--brand-primary-strong); padding:6px 16px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; box-shadow:var(--shadow-md); display:inline-flex; align-items:center; gap:6px}
[dir="rtl"] .price-badge{transform:translateX(50%)}
.price-head{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.price-ic{width:46px; height:46px; border-radius:14px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-text)}
.price-card.hot .price-ic{background:rgba(255,255,255,.2); color:#fff}
.price-name{font-size:21px; font-weight:900; line-height:1.2}
.price-desc{font-size:13px; color:var(--text-3); margin-top:3px; line-height:1.45}
.price-card.hot .price-desc{color:rgba(255,255,255,.85)}
.price-amt{display:flex; align-items:baseline; gap:8px}
.price-amt b{font-size:44px; font-weight:900; letter-spacing:-.02em; line-height:1}
.price-amt.contact b{font-size:27px}
.price-amt span{font-size:14px; font-weight:600; color:var(--text-3)}
.price-card.hot .price-amt span{color:rgba(255,255,255,.85)}
.price-billed{font-size:12.5px; color:var(--text-3); font-weight:600; margin:5px 0 0; display:block; min-height:16px}
.price-card.hot .price-billed{color:rgba(255,255,255,.82)}
.price-card .btn{margin:18px 0 2px}
.price-card.hot .btn{background:#fff; color:var(--brand-primary-strong); box-shadow:0 8px 22px rgba(0,0,0,.18)}
.price-card.hot .btn:hover{background:#fff; color:var(--brand-primary-strong); transform:translateY(-1px)}
.price-div{height:1px; background:var(--border); margin:20px 0 18px}
.price-card.hot .price-div{background:rgba(255,255,255,.24)}
.price-feats{display:flex; flex-direction:column; gap:13px}
.price-feats li{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600}
.price-feat-ic{width:21px; height:21px; border-radius:50%; background:color-mix(in srgb,var(--primary) 13%,transparent); color:var(--primary-text); display:inline-flex; align-items:center; justify-content:center; flex:none}
.price-feat-ic svg{color:var(--primary-text); margin-top:0}
.price-card.hot .price-feat-ic{background:rgba(255,255,255,.22)}
.price-card.hot .price-feat-ic svg{color:#fff}
.price-note{margin-top:26px; font-size:13px}
/* ============ FAQ ============ */
.faq-inner{max-width:780px}
.faq .sec-head{margin-bottom:36px; gap:16px}
.faq .h-lg{line-height:1.45}
.faq-list{display:flex; flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:22px 4px; font-size:17px; font-weight:700; color:var(--text); text-align:start}
.faq-ic{width:34px; height:34px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--primary-text); transition:all var(--dur)}
.faq-item.open .faq-ic{background:var(--primary); color:#fff}
.faq-a{overflow:hidden; transition:max-height .32s var(--ease)}
.faq-a p{margin:0; padding:0 4px 22px; font-size:15.5px; color:var(--text-2); line-height:1.7; max-width:64ch}
/* ============ FINAL CTA ============ */
.final-card{position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; padding:clamp(32px,5vw,60px); border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg)}
.final-glow{position:absolute; inset-block-start:-40%; inset-inline-end:-10%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--bright) 22%,transparent),transparent 60%); pointer-events:none}
.final-copy{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:18px}
.final-copy .h-lg{line-height:1.45}
.final-chat{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; align-items:flex-end}
.final-bot{display:flex; align-items:center; gap:10px; align-self:flex-start}
/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--border); padding-block:clamp(40px,5vw,60px) 24px; margin-top:20px}
.footer-inner{display:grid; grid-template-columns:1.4fr 2fr; gap:40px}
.footer-brand{display:flex; flex-direction:column; gap:14px; max-width:340px}
.footer-tag{font-size:14.5px; line-height:1.6}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.footer-col{min-width:0}
.footer-col h3{font-size:16px; line-height:1.6; font-weight:800; margin-bottom:8px}
.footer-col ul{display:flex; flex-direction:column; gap:4px}
.footer-col a{display:inline-flex; align-items:center; min-width:44px; min-height:44px; max-width:100%; padding-block:8px; font-size:16px; line-height:1.75; color:var(--text-2); font-weight:600; text-decoration:none; text-underline-offset:6px; text-decoration-thickness:1px; text-decoration-skip-ink:auto}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--primary-text); text-decoration-line:underline}
.footer-bar{margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:13px}
/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-copy{align-items:center; text-align:center}
  .hero-cta{justify-content:center}
  .final-card{grid-template-columns:1fr; gap:28px}
  .final-chat{align-items:stretch}
}
@media (max-width:900px){
  .picker-panel{grid-template-columns:1fr; gap:24px}
  .price-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .price-card.hot{transform:none}
  .footer-inner{grid-template-columns:1fr; gap:32px}
}
@media (max-width:860px){
  .cap-unit{grid-template-columns:1fr; gap:22px}
  .cap-unit.flip .cap-text{order:0}
  .cap-text{align-items:flex-start}
  .cap-mock-inner{max-width:100%}
  .su-wrap{grid-template-columns:1fr}
  .mk-inbox.big{grid-template-columns:1fr 1fr}
  .mk-inbox.big .mk-side{display:none}
}
@media (max-width:640px){
  .chan-strip{grid-template-columns:repeat(3,1fr)}
  .mk-dash-low{grid-template-columns:1fr}
  .mk-stats{grid-template-columns:repeat(2,1fr)}
  .mk-inbox{grid-template-columns:1fr}
  .mk-inbox .mk-list{display:none}
  .mk-tr{grid-template-columns:.7fr 1fr .8fr .9fr}
  .jry-step{flex:1 1 45%; min-width:120px}
  .jry-step::after{display:none}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-col:last-child{grid-column:1/-1}
}
@media (max-width:420px){
  .chan-strip{grid-template-columns:repeat(2,1fr)}
  .hero-cta .btn,.hero-cta{width:100%}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   A visitor who asks the OS for less motion gets none: not a shorter loop, not
   a slower one. The reveal animations are opacity-gated, so the App also drops
   them to their end state rather than leaving the content invisible. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skip link ──────────────────────────────────────────────────────────────
   Off-screen until focused, then a real target: a keyboard visitor should not
   have to tab through the whole header to reach the page. */
.skip-link{position:absolute; inset-inline-start:-9999px; top:8px; z-index:200;
  background:var(--surface); color:var(--text); border:2px solid var(--primary);
  padding:12px 20px; border-radius:var(--radius-sm); font-weight:700; box-shadow:var(--shadow-lg)}
.skip-link:focus{inset-inline-start:16px}