/* Reveo — product pages (AI chatbot / Call analyze / Offline analyze).
   Its own design system rather than the SEO-page template: the landing's
   tokens, type scale and card language, so a visitor moving from the home
   page into a product page stays in the same product, not a second website.
   Self-contained — these pages link this file only. */

/* ---------- Fonts (same self-hosted faces as the landing) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#00B57C;--brand-bright:#0A8A62;--brand-deep:#05704F;--brand-tint:#E6F7F1;
  --ink:#0B1F19;--ink-soft:#3D5049;--muted:#62736C;--muted-2:#83938C;
  --line:rgba(11,31,25,.10);--line-2:rgba(11,31,25,.17);
  --panel-2:#F3F8F6;--radius:24px;--radius-sm:14px;--maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-sm:0 1px 2px rgba(11,31,25,.06);
  --shadow-md:0 10px 30px -12px rgba(11,31,25,.16);
  --shadow-lg:0 30px 70px -28px rgba(11,31,25,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;
  line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
::selection{background:rgba(0,181,124,.22)}
.container{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px}
.sec{padding-top:88px;padding-bottom:88px}
.sec--soft{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:19px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-size:12.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-bright)}
.kicker::before{content:"";width:24px;height:1px;background:var(--brand)}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker::before{display:none}
.sec-head h2{margin-top:16px}
.lede{font-size:clamp(16px,1.4vw,19px);color:var(--ink-soft);margin-top:18px;max-width:620px}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;
  border-radius:999px;font-family:var(--font-b);font-weight:600;font-size:15.5px;cursor:pointer;
  border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px -10px rgba(0,181,124,.75)}
.btn--primary:hover{background:#00A270;box-shadow:0 14px 34px -12px rgba(0,181,124,.85)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--panel-2);border-color:var(--brand)}
.btn--sm{height:42px;padding:0 18px;font-size:14px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:20px;
  letter-spacing:-.01em;flex:none}
.brand img{height:27px;width:auto}
.hnav{display:flex;align-items:center;gap:2px;margin-left:8px}
.hnav a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:9px 13px;border-radius:10px;
  transition:color .18s,background .18s;white-space:nowrap}
.hnav a:hover{color:var(--ink);background:var(--panel-2)}
.hnav a[aria-current="page"]{color:var(--brand-bright);background:var(--brand-tint)}
.hdr__right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px;color:var(--muted)}
.crumb .container{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:16px;padding-bottom:4px}
.crumb a:hover{color:var(--brand-bright)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:42px;padding-bottom:74px}
.hero::before{content:"";position:absolute;inset:-140px -10% auto;height:520px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(0,181,124,.16),transparent 70%);filter:blur(30px)}
.hero .container{position:relative}
.hero__grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.hero__grid>div:first-child{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__grid>div:first-child .lede{margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;font-weight:600;color:var(--ink-soft)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(0,181,124,.16)}
.hero h1{margin-top:22px}
.hero h1 em{font-style:normal;color:var(--brand-bright)}
.hero .lede{margin-top:22px}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:32px}
.hero__facts{display:flex;justify-content:center;flex-wrap:wrap;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line);width:min(100%,720px)}
.hero__fact b{display:block;font-family:var(--font-d);font-size:23px;font-weight:700;color:var(--ink);line-height:1}
.hero__fact span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- Hero visuals (built in markup, no images) ---------- */
/* The floating badges sit outside the card; the wrapper reserves room for
   them so they never cover the card's own header or last row. */
.vis{position:relative;width:min(100%,980px);margin:0 auto;padding:54px 22px 64px}
.vis__card{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:26px;
  box-shadow:0 28px 70px -32px rgba(11,31,25,.32),0 0 0 10px rgba(0,181,124,.045);overflow:hidden;width:100%}
.vis__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:#fff}
.vis__ava{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-deep));color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:15px}
.vis__who b{display:block;font-family:var(--font-d);font-size:14.5px;font-weight:600}
.vis__who span{display:block;font-size:12px;color:var(--brand-bright);margin-top:2px}
.vis__badge{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);
  font-size:13px;font-weight:600}
.vis__badge b span{display:block;font-size:11.5px;font-weight:600;color:var(--brand-bright);margin-top:2px}
.vis__badge--tl{top:4px;left:6px}
.vis__badge--br{right:6px;bottom:4px}
.vis__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--brand-tint);color:var(--brand-bright)}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;padding:26px 28px;background:#fff;min-height:250px}
.bub{max-width:84%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bub--in{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub--out{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px;font-weight:500}
.chat__foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.chat__field{flex:1;height:36px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.chat__send{width:36px;height:36px;border-radius:50%;background:var(--brand);flex:none;display:grid;place-items:center;color:#fff}

/* score card */
.score{padding:20px 20px 22px;display:flex;flex-direction:column;gap:16px}
.score__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.score__ring{width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--brand) 0 82%,var(--panel-2) 82% 100%)}
.score__ring i{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-family:var(--font-d);font-style:normal;font-weight:700;font-size:17px;color:var(--ink)}
.score__row{display:flex;flex-direction:column;gap:7px}
.score__row .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.score__row .lbl b{font-family:var(--font-d);font-size:13px;color:var(--ink)}
.bar{height:7px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.bar--warn i{background:#E8A33D}

/* extraction card */
.extract{padding:20px;display:flex;flex-direction:column;gap:16px}
.quote-line{font-size:14.5px;line-height:1.6;color:var(--ink-soft);padding:14px 16px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line)}
.quote-line b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-direction:column;gap:9px}
.chip{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;border:1px solid var(--line);
  background:#fff;font-size:13.5px}
.chip em{font-style:normal;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-bright);background:var(--brand-tint);border-radius:999px;
  padding:4px 9px;flex:none}
.chip b{font-weight:600;color:var(--ink)}

/* ---------- Logos / channel strip ---------- */
.strip{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip span{font-size:13px;color:var(--muted)}
.strip img{width:26px;height:26px}

/* ---------- Feature cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(0,181,124,.35)}
.card__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);font-family:var(--font-d);font-weight:700;font-size:13px}
.card h3{margin-top:18px}
.card p{color:var(--ink-soft);font-size:14.5px;margin-top:9px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow-sm)}
.step__n{font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--brand-bright)}
.step h3{margin-top:14px}
.step p{color:var(--ink-soft);font-size:14.5px;margin-top:9px}

/* ---------- Dark showcase band ---------- */
.band{background:linear-gradient(160deg,#0C2C23,#081F19);color:#fff;border-radius:var(--radius);
  padding:clamp(30px,4.4vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.72);font-size:16px;margin-top:16px;max-width:520px}
.band__stats{display:flex;flex-direction:column;gap:22px}
.band__stat b{display:block;font-family:var(--font-d);font-size:34px;font-weight:700;line-height:1;color:#fff}
.band__stat span{display:block;font-size:13px;color:rgba(255,255,255,.66);margin-top:7px}

/* ---------- Checklist ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:26px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-soft)}
.checks .tick{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;
  box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 0;font-family:var(--font-d);font-size:16.5px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq p{color:var(--ink-soft);font-size:15px;padding:0 0 20px}

/* ---------- Closing CTA ---------- */
/* Closing band: the page ends on one dark card that carries the ask, the way
   the hero opens it. Light on light read as one more section; this reads as
   the end of the page. */
.cta{position:relative;overflow:hidden;border:0;border-radius:28px;color:#fff;text-align:center;
  padding:clamp(38px,5vw,72px);
  background:linear-gradient(135deg,#06251C 0%,#0C3A2B 46%,#0A7A57 100%);
  box-shadow:0 40px 90px -46px rgba(6,37,28,.85)}
.cta__kicker{display:block;font-family:var(--font-d);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9BE4C7;margin-bottom:16px}
.cta h2{color:#fff;max-width:18ch;margin-left:auto;margin-right:auto}
.cta p{color:rgba(255,255,255,.72);font-size:17px;margin-top:16px;max-width:620px;margin-left:auto;margin-right:auto}
.cta__row{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:30px}
.cta .btn--primary{background:#fff;color:#06251C;border-color:#fff;box-shadow:none}
.cta .btn--primary:hover{background:#E6F7F1;border-color:#E6F7F1;box-shadow:none}
.cta .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.cta .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta__note{margin-top:20px;font-size:14px;color:rgba(255,255,255,.6)}
.cta__note a{color:#9BE4C7;text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
.ftr{background:var(--panel-2);border-top:1px solid var(--line);padding:56px 0 34px;margin-top:0}
.ftr__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.ftr p{color:var(--muted);font-size:14px;margin-top:14px;max-width:300px}
.ftr h5{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:14px}
.ftr__col a{display:block;font-size:14.5px;color:var(--ink-soft);padding:6px 0}
.ftr__col a:hover{color:var(--brand-bright)}
.ftr__bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid,.band{grid-template-columns:1fr;gap:38px}
  .grid3,.steps{grid-template-columns:1fr 1fr}
  .hnav{display:none}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sec{padding-top:56px;padding-bottom:56px}
  .grid3,.grid2,.steps,.checks,.ftr__grid{grid-template-columns:1fr}
  .vis__badge--tl{left:0;top:0}
  .vis__badge--br{right:6px;bottom:4px}
  .vis{padding-left:0;padding-right:0}
  .chat{padding:20px 16px;min-height:0}
  .hero{padding-top:28px;padding-bottom:48px}
  .hero__facts{gap:18px;margin-top:28px;padding-top:20px}
  .hero__fact b{font-size:20px}
  .hero__fact span{font-size:11px}
  .vis__badge{padding:8px 10px;border-radius:13px;font-size:11px}
  .vis__badge b span{font-size:10px}
  .vis__ic{width:26px;height:26px}
}

/* ---------- Feed pages (Product updates / Company news) ----------
   A listing page is a list, not a hero: compact header, a filter row, then
   entries on a dated timeline with a side rail for following along. */
.feed-head{padding:40px 0 22px}
.feed-head h1{font-size:clamp(30px,3.6vw,44px);margin-top:14px}
.feed-head .lede{margin-top:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filters a,.filters button{font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.filters a:hover,.filters button:hover{border-color:var(--brand);color:var(--ink)}
.filters .is-on{background:var(--brand-tint);border-color:rgba(0,181,124,.35);color:var(--brand-bright)}
/* Single column: the right-hand rail was removed from /updates/. */
.feed{display:block;max-width:820px;padding-bottom:80px}
.timeline{display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
.entry__date{font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  padding-top:5px;position:relative}
.entry__date::after{content:"";position:absolute;right:-13px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.entry__body{border-left:1px solid var(--line);padding-left:22px;min-width:0}
.entry__tag{display:inline-block;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-bright);background:var(--brand-tint);border-radius:999px;
  padding:5px 10px;margin-bottom:10px}
.entry__tag--news{color:#5B4BB0;background:#EEEBFA}
.entry h2{font-size:20px;line-height:1.3}
.entry p{color:var(--ink-soft);font-size:15px;margin-top:8px;max-width:640px}
.entry ul{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.entry li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)}
.entry li .tick{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);margin-top:2px}
.entry.is-hidden{display:none}
.rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.rail__card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-sm)}
.rail__card h3{font-size:16px}
.rail__card p{color:var(--ink-soft);font-size:14px;margin-top:8px}
.rail__card .btn{margin-top:14px;width:100%}
.rail__card--tint{background:radial-gradient(120% 120% at 15% 0%,var(--brand-tint),#F7FCFA)}
.rail__links{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rail__links a{font-size:14px;color:var(--ink);padding:9px 12px;border-radius:12px;border:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.rail__links a:hover{border-color:var(--brand);color:var(--brand-bright)}
.feed-empty{padding:36px;border:1px dashed var(--line-2);border-radius:20px;text-align:center;color:var(--muted)}
@media (max-width:900px){
  .feed{grid-template-columns:1fr}
  .rail{position:static}
  .entry{grid-template-columns:1fr;gap:8px}
  .entry__date::after{display:none}
  .entry__body{border-left:0;padding-left:0}
}

/* Flow diagram: one picture instead of three paragraph cards. Text lives in the
   SVG so it scales with the drawing and still reads as text to a screen reader. */
.flowchart{margin-top:30px}
.flowchart svg{display:block;width:100%;height:auto;color:var(--ink);font-family:var(--font-d)}
.flowchart .fc-num{fill:var(--brand-bright);font-size:12px;font-weight:700;letter-spacing:.12em}
.flowchart .fc-title{fill:var(--ink);font-size:17px;font-weight:600}
.flowchart .fc-sub{fill:var(--muted);font-size:13px;font-family:var(--font-b,inherit);font-weight:400}
/* Three nodes side by side shrink their own labels to nothing on a phone, so
   the same diagram is drawn stacked and the wide one steps aside. */
.flowchart--tall{display:none}
@media (max-width:760px){
  .flowchart--wide{display:none}
  .flowchart--tall{display:block}
}

/* ---------- The deck's arithmetic, and the panel itself ---------- */
.math{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:28px}
.math__rows{list-style:none;margin:0;padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--brand-tint)}
.math__rows li{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(11,31,25,.08)}
.math__rows li:last-child{border-bottom:0;padding-bottom:0}
.math__rows li:first-child{padding-top:0}
.math__rows b{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--brand-bright);line-height:1}
.math__rows span{font-size:15px;color:var(--ink-soft)}
.math__out{display:flex;flex-direction:column;gap:18px}
.math__card{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(22px,3vw,32px);border-radius:24px}
.math__card span{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.math__card b{font-family:var(--font-d);font-size:clamp(34px,4.6vw,52px);font-weight:700;line-height:1}
.math__card--loss{background:var(--brand);color:#fff}
.math__card--loss span{color:rgba(255,255,255,.8)}
.math__card--price{background:#06251C;color:#fff}
.math__card--price span{color:#9BE4C7}
.math__note{margin-top:18px;font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.math{grid-template-columns:1fr}}

.shot{margin:28px 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow-md)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:14px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shot-pair .shot{margin-top:22px}
@media (max-width:860px){.shot-pair{grid-template-columns:1fr}}

/* AI chatbot page: calm, product-first minimalism. */
.product-page--minimal{--radius:16px;background:#fff}
.product-page--minimal .hero::before{display:none}
.product-page--minimal .hero{padding-top:54px;padding-bottom:62px}
.product-page--minimal .pill{box-shadow:none;border-color:var(--line-2);padding:6px 12px}
.product-page--minimal .hero h1{max-width:820px;font-size:clamp(36px,4.4vw,58px)}
.product-page--minimal .hero__cta{margin-top:26px}
.product-page--minimal .hero__facts{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);gap:42px}
.product-page--minimal .vis{padding:34px 0 10px;max-width:900px}
.product-page--minimal .vis__badge{display:none}
.product-page--minimal .vis__card{border-radius:16px;box-shadow:0 14px 40px -30px rgba(11,31,25,.32);}
.product-page--minimal .vis__head{padding:14px 16px}
.product-page--minimal .chat{padding:22px 24px;min-height:230px}
.product-page--minimal .strip{gap:20px;padding:18px 0;color:var(--muted)}
.product-page--minimal .strip span:first-child{margin-right:12px}
.product-page--minimal .sec{padding-top:76px;padding-bottom:76px}
.product-page--minimal .sec--soft{background:#fbfcfb;border:0}
.product-page--minimal .sec-head{margin-bottom:34px}
.product-page--minimal .grid3{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-page--minimal .card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:26px 24px}
.product-page--minimal .card:hover{transform:none;box-shadow:none;background:var(--panel-2)}
.product-page--minimal .card:nth-child(3n+2){border-left:1px solid var(--line);border-right:1px solid var(--line)}
.product-page--minimal .card__ic{width:auto;height:auto;border-radius:0;background:none;justify-content:flex-start;font-size:12px;letter-spacing:.12em;color:var(--brand-bright)}
.product-page--minimal .card h3{margin-top:16px}
.product-page--minimal .steps{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-page--minimal .step{border:0;border-radius:0;box-shadow:none;background:transparent;padding:26px 24px}
.product-page--minimal .step+.step{border-left:1px solid var(--line)}
.product-page--minimal .band{border-radius:16px;background:#06251c;padding:44px}
.product-page--minimal .math{gap:0}
.product-page--minimal .math__rows{border-radius:16px 0 0 16px;background:#f0faf6}
.product-page--minimal .math__card{border-radius:0;padding:26px 30px}
.product-page--minimal .math__card--loss{border-radius:0 16px 0 0}
.product-page--minimal .math__card--price{border-radius:0 0 16px 0}
.product-page--minimal .shot{border-radius:16px;box-shadow:none}
.product-page--minimal .faq{gap:0}
.product-page--minimal .faq details{border-width:1px 0 0;border-radius:0;box-shadow:none;padding:0}
.product-page--minimal .faq details:last-child{border-bottom:1px solid var(--line)}
.product-page--minimal .cta{border-radius:16px;background:#06251c;box-shadow:none}
@media(max-width:960px){
  .product-page--minimal .card:nth-child(3n+2){border-left:0;border-right:0}
  .product-page--minimal .step+.step{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:680px){
  .product-page--minimal .hero{padding-top:34px;padding-bottom:46px}
  .product-page--minimal .hero__facts{gap:20px}
  .product-page--minimal .vis{padding-top:24px}
  .product-page--minimal .card{padding:22px 0}
  .product-page--minimal .math__rows{border-radius:16px 16px 0 0}
  .product-page--minimal .math__card--loss{border-radius:0}
  .product-page--minimal .math__card--price{border-radius:0 0 16px 16px}
  .product-page--minimal .band{padding:30px 24px}
}

/* The embedded chat demo on /ai-chatbot/. A frame, so the landing's own
   stylesheet cannot reach this page's design system; the height is fixed
   because the demo inside it is a fixed-height chat card. */
.vis__demo{display:block;width:100%;height:620px;border:0;border-radius:20px;background:transparent}
@media (max-width:860px){.vis__demo{height:560px}}

/* ---- «Qanday ishlaydi»: the three steps ---- */
/* Cards on a rail. The SVG diagram this replaces drew its own boxes and arrows,
   so the text could not be selected, translated or reflowed, and every step was
   an empty outline. */
.steps{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* The rail is the "and then" the arrows were drawing, behind the cards. */
.steps::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;
  background:linear-gradient(90deg,rgba(0,181,124,.25),rgba(0,181,124,.55),rgba(0,181,124,.25))}
.step{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:22px 22px 24px;border-radius:18px;border:1px solid var(--line);background:#fff;
  box-shadow:0 10px 30px -22px rgba(11,31,25,.5);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.step:hover{border-color:rgba(0,181,124,.45);transform:translateY(-3px);
  box-shadow:0 18px 38px -22px rgba(0,181,124,.5)}
.step__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--brand-tint,#E6F7F1);color:var(--brand-strong,#0A8A62);margin-bottom:6px}
.step__n{font:700 12px/1 var(--font-display,inherit);letter-spacing:.14em;color:var(--brand-strong,#0A8A62)}
.step h3{margin:2px 0 0;font-size:17px;line-height:1.3}
.step p{margin:0;font-size:14px;color:var(--muted,#62736C)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:12px}
  /* Vertical rail on one column, threaded through the icon tiles. */
  .steps::before{left:43px;right:auto;top:38px;bottom:38px;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(0,181,124,.25),rgba(0,181,124,.55),rgba(0,181,124,.25))}
  .step{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:16px 18px}
  .step__ic{margin:0;flex:none}
  .step__n{order:-1;width:100%;display:none}
  .step h3{flex:1 1 auto;font-size:15.5px}
  .step p{flex-basis:100%;margin-left:56px;font-size:13.5px}
}

/* ---- Hero orbit (AI chatbot) ---- */
/* Reveo in the middle, the channels it answers on and the systems it writes to
   turning around it. Two rings at different speeds and directions so the
   picture never reads as one rigid object. */
/* Tighter: at 520px the rings were large and mostly empty, and the icons read
   as specks on them. The box is smaller and the icons bigger, so the picture
   is the icons rather than the circles. */
.orbit{position:relative;width:min(100%,430px);aspect-ratio:1;margin:0 auto}
.orbit__ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(11,31,25,.10)}
.orbit__ring--in{width:52%;height:52%}
.orbit__ring--out{width:86%;height:86%}
.orbit__core{position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 0 0 10px rgba(0,181,124,.07),0 22px 50px -24px rgba(0,181,124,.75)}
.orbit__core img{width:46%;height:auto}
.orbit__spin{position:absolute;inset:0;margin:auto;border-radius:50%}
.orbit__spin--in{width:52%;height:52%;animation:orbitSpin 34s linear infinite}
.orbit__spin--out{width:86%;height:86%;animation:orbitSpin 52s linear infinite reverse}
/* Placing an icon on a ring takes three nested elements and each one has a
   job: the ITEM rotates to the icon's angle and is a full-size box, so its top
   edge IS the ring; the i sits on that edge and runs the reverse spin, which
   cancels the ring's rotation; the b undoes the static angle, so the icon ends
   up upright wherever it sits. Collapsing any of them tilts the icons or
   stacks them in the middle. */
.orbit__item{position:absolute;inset:0;transform:rotate(var(--a))}
.orbit__item i{position:absolute;top:0;left:50%;display:block;width:56px;height:56px;
  margin:-28px 0 0 -28px;animation:orbitSpin 34s linear infinite reverse}
.orbit__item b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:#fff;border:1px solid var(--line,rgba(11,31,25,.1));
  box-shadow:0 10px 24px -14px rgba(11,31,25,.5);transform:rotate(calc(-1 * var(--a)))}
.orbit__spin--out .orbit__item i{width:50px;height:50px;margin:-25px 0 0 -25px;
  animation-duration:52s;animation-direction:normal}
.orbit__item img{width:27px;height:27px;object-fit:contain}
.orbit__spin--out .orbit__item img{width:25px;height:25px}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@media (max-width:1100px){
  .orbit{width:min(100%,380px)}.orbit__pill--b{right:-4%;top:4%}.orbit__pill--d{left:-4%;bottom:0}
}
@media (max-width:620px){
  .orbit{width:min(100%,320px)}
  .orbit__item i{width:42px;height:42px;margin:-21px 0 0 -21px}
  .orbit__spin--out .orbit__item i{width:38px;height:38px;margin:-19px 0 0 -19px}
  /* Four floating labels do not fit beside a 320px circle. */
}
@media (prefers-reduced-motion:reduce){
  .orbit__spin,.orbit__item i{animation:none}
}

/* ---- Feature cards with drawn panels (AI chatbot) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(26px,3.4vw,40px)}
.feat-grid--wide{grid-template-columns:repeat(2,1fr);margin-top:18px}
.feat{display:flex;flex-direction:column;gap:6px;padding:26px 26px 0;border-radius:22px;
  border:1px solid var(--line,rgba(11,31,25,.1));background:#fff;overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.feat:hover{border-color:rgba(0,181,124,.4);box-shadow:0 22px 46px -30px rgba(0,181,124,.55)}
.feat h3{margin:0;font-size:20px;line-height:1.25}
.feat p{margin:0;font-size:14.5px;color:var(--muted,#62736C);max-width:34ch}
/* The panel is the picture: tinted, inset, and cropped by the card's bottom so
   it reads as a window into the product rather than a boxed illustration. */
.feat__art{position:relative;margin:20px -26px 0;padding:22px;min-height:184px;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,#F2FBF7,#E4F5EE);overflow:hidden}
.feat-grid--wide .feat__art{min-height:230px}

/* follow-up */
.fa-bub{position:absolute;display:block;padding:11px 14px;border-radius:14px;font-size:12.5px;line-height:1.4;
  box-shadow:0 10px 24px -16px rgba(11,31,25,.6)}
.fa-bub--out{left:22px;top:24px;max-width:62%;background:var(--brand-strong,#0A8A62);color:#fff}
.fa-bub--in{right:22px;top:96px;width:44%;height:34px;background:#fff}
.fa-bub--short{top:140px;width:30%;height:26px}

/* images and voice */
.fa-tiles{position:absolute;left:50%;top:26px;transform:translateX(-50%);display:flex;gap:10px}
.fa-tiles i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff;
  color:var(--brand-strong,#0A8A62);box-shadow:0 10px 22px -16px rgba(11,31,25,.6)}
.fa-wave{position:absolute;left:22px;right:22px;bottom:26px;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;background:var(--brand-strong,#0A8A62);color:#fff}
.fa-wave b{flex:none;width:0;height:0;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.fa-wave svg{flex:1;height:26px;opacity:.9}
.fa-wave em{font-style:normal;font-size:12px;opacity:.85}

/* languages */
.fa-chip{position:absolute;padding:9px 14px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;
  box-shadow:0 10px 24px -16px rgba(11,31,25,.6)}
/* All six languages, so they wrap as a cloud rather than sit at hand-placed
   coordinates: four fixed spots could not take two more without colliding
   with each other and the «6 til» label. */
.feat__art--lang{flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:10px 8px;padding:18px 20px 64px}
.feat__art--lang .fa-chip{position:static}
.feat__art--lang em{position:absolute;left:24px;bottom:16px;font-style:normal;font-weight:700;
  font-size:26px;color:rgba(10,138,98,.5)}

/* channels + crm: a core with its channels, and a wall of systems. Both are
   laid out by flow — a card this small cannot afford hand-placed absolutes. */
/* In flow, not absolute: the art grows to the cluster instead of squeezing it
   (a column flexbox shrinks its children's HEIGHT, which flattened the core). */
.fa-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:186px}
.fa-stack>*{flex:none}
.fa-orb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:#fff;box-shadow:0 14px 30px -18px rgba(11,31,25,.65)}
.fa-orb img{width:32px;height:32px;object-fit:contain}
.fa-orb--mid{width:82px;height:82px}
.fa-orb--mid img{width:42px;height:42px}
.fa-row{display:flex;gap:16px}
/* The line from the core down to the channels: one element, no SVG. */
.fa-link{width:1px;height:18px;background:linear-gradient(rgba(10,138,98,.05),rgba(10,138,98,.45))}
.fa-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.fa-tag{padding:7px 13px;border-radius:999px;background:#fff;font-size:12px;font-weight:600;
  color:var(--ink,#0B1F19);box-shadow:0 10px 22px -16px rgba(11,31,25,.6)}
.fa-tag--on{background:var(--brand-strong,#0A8A62);color:#fff;box-shadow:none}
/* The systems wall: every logo the agent can write into, at a readable size. */
.fa-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.fa-wall span{display:grid;place-items:center;height:62px;border-radius:16px;background:#fff;
  box-shadow:0 12px 26px -20px rgba(11,31,25,.6)}
.fa-wall img{max-width:60%;max-height:30px;object-fit:contain}
.fa-wall b{display:grid;place-items:center;height:62px;border-radius:16px;font-size:12.5px;
  font-weight:600;color:var(--brand-strong,#0A8A62);background:rgba(255,255,255,.55);
  border:1px dashed rgba(10,138,98,.35)}
@media (max-width:520px){
  .fa-wall{grid-template-columns:repeat(3,1fr)}
  .fa-orb{width:56px;height:56px}.fa-orb img{width:28px;height:28px}
  .fa-orb--mid{width:70px;height:70px}.fa-orb--mid img{width:36px;height:36px}
}

@media (max-width:980px){
  .feat-grid,.feat-grid--wide{grid-template-columns:1fr}
  .feat h3{font-size:18px}
}

/* The orbit's labels, under the circle rather than floating beside it. A wide
   label placed anywhere around a rotating ring is swept through by an icon
   once per lap — corners included, because the label is wider than the corner
   is deep. Measured 0 collisions here, by construction. */
.orbit__facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:18px auto 0;padding:0;max-width:440px}
.orbit__facts li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--line,rgba(11,31,25,.1));
  box-shadow:0 10px 24px -20px rgba(11,31,25,.55);
  font-size:12.5px;font-weight:600;color:var(--ink,#0B1F19)}
.orbit__facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand,#00B57C)}
@media (max-width:620px){.orbit__facts{max-width:320px}.orbit__facts li{font-size:11.5px;padding:7px 11px}}

/* ---- AI chatbot hero: copy left, orbit right ---- */
/* The centred stack put the headline over the middle of the page and the
   orbit below the fold. Two columns: the sentence reads down the left, the
   picture holds the right, and neither waits for the other. */
.hero--split .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.hero--split .hero__grid>div:first-child{align-items:flex-start;text-align:left}
.hero--split .hero__grid>div:first-child .lede{margin-left:0;margin-right:0;max-width:52ch}
.hero--split .hero__cta{justify-content:flex-start}
@media (max-width:980px){
  /* Back to one column: at this width the orbit and the sentence each get
     less room than either needs. */
  .hero--split .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero--split .hero__grid>div:first-child{align-items:center;text-align:center}
  .hero--split .hero__grid>div:first-child .lede{margin-left:auto;margin-right:auto}
  .hero--split .hero__cta{justify-content:center}
}

/* The orbit and its labels are one cell of the hero grid. */
.hero__vis{display:flex;flex-direction:column;align-items:center;gap:4px}
/* The labels are as wide as the circle, so both share one centre line. */
.hero__vis .orbit__facts{max-width:430px}

/* The split hero is the page's first chapter, so it sits on the same tint the
   home page gives its inner sections — the breadcrumb included, or the band
   would start mid-air below it. */
.crumb--tint,.hero--split{background:var(--panel-2)}
.hero--split{border-bottom:1px solid var(--line)}

/* ---- AI chatbot hero: the home page's dark band ----
   The home page opens on the system's ink (#0B1F19) with one brand radial
   behind the headline; the product page is the next step of the same story,
   so it opens on the same ground — breadcrumb included, or the band would
   start below a strip of tint. Values mirror `.has-dark-hero` in
   landing/index.html; change them together. */
.crumb--tint,.hero--split{background:#0B1F19}
.crumb--tint{color:#9ED4BE}
.crumb--tint a:hover{color:#fff}
.crumb--tint [aria-current="page"]{color:#fff}
.hero--split{border-bottom:0}
.hero--split .hero__grid>div:first-child{position:relative;isolation:isolate}
.hero--split .hero__grid>div:first-child::before{content:"";position:absolute;z-index:-1;left:30%;top:-40px;
  width:min(820px,110vw);height:520px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,181,124,.2),transparent)}
.hero--split h1{color:#fff}
.hero--split h1 em{color:var(--brand)}
.hero--split .lede{color:#BFE8D8}
.hero--split .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#E4F5EE}
.hero--split .btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.hero--split .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.hero--split .orbit__ring{border-color:rgba(255,255,255,.14)}
.hero--split .orbit__core{box-shadow:0 0 0 10px rgba(0,181,124,.14),0 22px 60px -20px rgba(0,181,124,.8)}
.hero--split .orbit__facts li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);
  color:#fff;box-shadow:none}
@media (max-width:980px){
  .hero--split .hero__grid>div:first-child::before{left:50%}
}

/* ---- AI chatbot steps: the rail at number height ----
   The shared rail runs behind the icon tiles on the other product pages.
   This page's steps have no icons and no card ground, so the rail sat on the
   titles. Here each number carries its own stretch of rail to the next
   column instead: the same "and then", on a line with nothing else on it. */
.product-page--minimal .steps::before{display:none}
.product-page--minimal .step__n{display:flex;align-items:center;gap:14px;margin-right:-24px}
.product-page--minimal .step__n::after{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,181,124,.55),rgba(0,181,124,.12))}
.product-page--minimal .step:last-child .step__n::after{display:none}
.product-page--minimal .step h3{margin-top:14px}
@media (max-width:960px){
  .product-page--minimal .step__n{margin-right:0}
  .product-page--minimal .step__n::after{display:none}
}
/* The shared one-column layout indents the text past an icon tile this page
   does not have, so here the step stays a plain stack. */
@media (max-width:860px){
  .product-page--minimal .step{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  .product-page--minimal .step h3{margin-top:10px}
  .product-page--minimal .step p{margin-left:0;flex-basis:auto}
}

/* ---- Call analyze hero: one graded call ----
   The same dark split hero as the AI chatbot page; the picture is the
   product's own unit of work — a call, its yes/no verdicts, the score counted
   from them, and the deal it belongs to. */
.callcard{width:min(100%,440px);margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);color:var(--ink)}
.callcard__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.callcard__ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-deep);font-family:var(--font-d);font-weight:700}
.callcard__who{flex:1;min-width:0}
.callcard__who b{display:block;font-family:var(--font-d);font-size:15px;font-weight:600}
.callcard__who>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.callcard__score{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;
  background:conic-gradient(var(--brand) 0 75%,var(--brand-tint) 75% 100%);position:relative}
.callcard__score::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.callcard__score b,.callcard__score span{position:relative;line-height:1}
.callcard__score b{font-family:var(--font-d);font-size:18px;font-weight:700;margin-top:6px}
.callcard__score span{font-size:10px;color:var(--muted);margin-top:-8px}
.callcard__wave{display:flex;align-items:center;gap:12px;margin:14px 18px 4px;padding:10px 12px;
  border-radius:12px;background:var(--panel-2)}
.callcard__play{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);position:relative}
.callcard__play::after{content:"";position:absolute;left:11px;top:8px;border-left:9px solid #fff;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.callcard__bars{flex:1;display:flex;align-items:center;gap:3px;height:26px}
.callcard__bars i{flex:1;border-radius:2px;background:rgba(11,31,25,.18);height:40%}
.callcard__bars i:nth-child(-n+10){background:var(--brand)}
.callcard__bars i:nth-child(6n+1){height:45%}.callcard__bars i:nth-child(6n+2){height:80%}
.callcard__bars i:nth-child(6n+3){height:100%}.callcard__bars i:nth-child(6n+4){height:60%}
.callcard__bars i:nth-child(6n+5){height:35%}.callcard__bars i:nth-child(6n){height:70%}
/* The page's own light glow is drawn for a white hero; on the band it shows
   as a pale strip under the breadcrumb. */
.hero--split::before{display:none}
.callcard__wave em{flex:none;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.callcard__checks{list-style:none;padding:8px 18px 4px}
.callcard__checks li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.callcard__checks li:last-child{border-bottom:0}
.callcard__checks li span{display:flex;align-items:center;gap:10px;min-width:0}
.callcard__checks li span::before{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;line-height:1}
.callcard__checks .is-yes span::before{content:"✓";background:var(--brand-tint);color:var(--brand-deep)}
.callcard__checks .is-no span::before{content:"✕";background:#FDECEC;color:#B42318}
.callcard__checks li b{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.callcard__checks .is-yes b{background:var(--brand-tint);color:var(--brand-deep)}
.callcard__checks .is-no b{background:#FDECEC;color:#B42318}
.callcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;background:var(--panel-2);border-top:1px solid var(--line);font-size:13px}
.callcard__foot span{color:var(--muted);font-weight:600}
.callcard__foot b{font-family:var(--font-d);font-weight:600;color:var(--brand-deep)}
.hero__vis .callcard+.orbit__facts{margin-top:22px}
@media (max-width:620px){
  .callcard__checks li{font-size:12.5px}
  .callcard__who b{font-size:14px}
}

/* ---- The playable call ----
   Static until call-demo.js marks the card `is-live` (the audio loaded). */
.callcard__play{border:0;cursor:pointer;flex:none}
.callcard__play:disabled{cursor:default}
.callcard.is-playing .callcard__play::after{left:9px;top:8px;width:10px;height:12px;border:0;
  border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.callcard.is-live .callcard__bars{cursor:pointer}
.callcard.is-live .callcard__bars i:nth-child(-n+10){background:rgba(11,31,25,.18)}
.callcard.is-live .callcard__bars i.is-on{background:var(--brand)}
.callcard__at{flex:none;margin-left:auto;padding:3px 8px;border-radius:8px;border:1px solid var(--line-2);
  background:#fff;font:600 11.5px/1.2 var(--font-b);color:var(--ink-soft);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
.callcard__at::before{content:"▶";font-size:8px;margin-right:5px;vertical-align:1px}
.callcard__at:hover{border-color:var(--brand);color:var(--brand-deep)}
.callcard__checks li{transition:background .2s}
.callcard__checks li.is-now{background:var(--brand-tint);margin:0 -18px;padding-left:18px;padding-right:18px}
.callcard__hint{padding:0 18px 12px;font-size:12px;color:var(--muted)}

/* ---- Call analyze band: by hand vs Reveo ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs__col{border-radius:16px;padding:20px 20px 22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.vs__col--after{background:rgba(0,181,124,.12);border-color:rgba(0,181,124,.4)}
.vs__col h3{font-size:15px;color:#fff;margin-bottom:14px}
.vs__col--before h3{color:rgba(255,255,255,.7)}
.vs__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.vs__col li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72)}
.vs__col--after li{color:#fff}
.vs__col li::before{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;line-height:1;margin-top:-1px}
.vs__col--before li::before{content:"✕";background:rgba(255,255,255,.1);color:#F4A6A6}
.vs__col--after li::before{content:"✓";background:var(--brand);color:#fff}
@media (max-width:620px){.vs{grid-template-columns:1fr}}

/* ---- Offline analyze hero: one floor conversation ----
   The same dark split hero; the picture is what the customer said and the
   four fields pulled out of it, each tied to its words by a number. */
.floorcard{width:min(100%,460px);margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);color:var(--ink)}
.floorcard__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.floorcard__ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-deep);font-family:var(--font-d);font-weight:700}
.floorcard__who{flex:1;min-width:0}
.floorcard__who b{display:block;font-family:var(--font-d);font-size:15px;font-weight:600}
.floorcard__who>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.floorcard__rec{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;
  background:var(--panel-2);font-size:12px;font-weight:600;color:var(--ink-soft)}
.floorcard__rec i{width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.floorcard__quote{margin:16px 18px 6px;padding:14px 16px;border-radius:14px;background:var(--panel-2);
  font-size:14.5px;line-height:1.65;color:var(--ink)}
.floorcard__quote mark{background:rgba(0,181,124,.16);color:inherit;padding:1px 3px;border-radius:4px}
.floorcard sup{font-size:10px;font-weight:700;color:var(--brand-deep);margin-left:2px}
.floorcard__fields{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:12px 0 0;background:var(--line);border-top:1px solid var(--line)}
.floorcard__fields>div{background:#fff;padding:12px 18px}
.floorcard__fields dt{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.floorcard__fields dt sup{margin:0 5px 0 0;vertical-align:1px}
.floorcard__fields dd{margin:4px 0 0;font-family:var(--font-d);font-size:14.5px;font-weight:600}
.hero__vis .floorcard+.orbit__facts{margin-top:22px}
@media (max-width:420px){.floorcard__fields{grid-template-columns:1fr}}

/* ---- Team page ---- */
.cocard{width:min(100%,420px);margin:0 auto;padding:26px;border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.cocard__faces{display:flex}
.cocard__faces img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;
  box-shadow:0 6px 16px -8px rgba(11,31,25,.5)}
.cocard__faces img+img{margin-left:-14px}
.cocard__name{margin-top:16px;font-family:var(--font-d);font-size:20px;font-weight:700}
.cocard__sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.cocard__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px -26px -26px;background:var(--line);border-top:1px solid var(--line)}
.cocard__facts>div{background:#fff;padding:14px 26px}
.cocard__facts dt{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cocard__facts dd{margin:4px 0 0;font-family:var(--font-d);font-size:16px;font-weight:600}
.hero__vis .cocard+.orbit__facts{margin-top:22px}

.founders2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.founder2{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:24px;align-items:stretch;padding:14px;
  border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-md)}
.founder2__photo{width:100%;height:100%;min-height:240px;object-fit:cover;border-radius:14px;background:var(--panel-2)}
.founder2__body{display:flex;flex-direction:column;padding:12px 10px 10px 0}
.founder2__role{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-bright)}
.founder2 h3{font-size:24px;margin-top:8px}
.founder2__body>p:not(.founder2__role){color:var(--ink-soft);font-size:15px;margin-top:12px}
.founder2__li{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding:9px 14px;
  border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;font-weight:600;color:#0A66C2;transition:border-color .2s,background .2s}
.founder2__li:hover{border-color:#0A66C2;background:#F3F8FD}
.founder2__body>p+.founder2__li{margin-top:20px}
@media (max-width:980px){.founders2{grid-template-columns:1fr}}
@media (max-width:560px){
  .founder2{grid-template-columns:1fr}
  .founder2__photo{aspect-ratio:4/5;height:auto;max-height:360px}
  .founder2__body{padding:4px 6px 8px}
}

.band__links{display:flex;flex-direction:column;gap:12px}
.band__links a{display:block;padding:18px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.band__links a:hover{border-color:rgba(0,181,124,.55);background:rgba(0,181,124,.1)}
.band__links b{display:block;font-family:var(--font-d);font-size:16px;color:#fff}
.band__links span{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:4px}
.band p a{color:#9BE4C7;text-decoration:underline;text-underline-offset:3px}

/* The dark split hero fills the first screen, like the home page's band:
   sized to its content it ended short of the fold and the white page showed
   under it. The sticky header (73px, 65px on phones) and the breadcrumb (40px)
   sit above it inside that screen. */
.hero--split{--above:113px;min-height:calc(100vh - var(--above));min-height:calc(100svh - var(--above));
  display:flex;flex-direction:column;justify-content:center}
.hero--split>.container{width:100%}
@media (max-width:760px){.hero--split{--above:105px}}
.cocard{overflow:hidden}

/* ---- Legal pages: a compact dark title band, then a reading layout ----
   Not a full-screen hero: a legal page is read, not sold, so the text starts
   on the first screen. */
.legal-hero{background:#0B1F19;color:#fff;padding:28px 0 56px;position:relative;overflow:hidden}
.legal-hero::before{content:"";position:absolute;left:10%;top:-120px;width:min(820px,110vw);height:460px;
  background:radial-gradient(closest-side,rgba(0,181,124,.18),transparent);pointer-events:none}
.legal-hero .container{position:relative}
.legal-hero__crumb{display:flex;gap:9px;flex-wrap:wrap;font-size:13px;color:#9ED4BE}
.legal-hero__crumb a:hover,.legal-hero__crumb [aria-current]{color:#fff}
.legal-hero__eyebrow{margin-top:40px;font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.legal-hero h1{color:#fff;font-size:clamp(34px,4.4vw,54px);margin-top:12px;max-width:20ch}
.legal-hero__lede{color:#BFE8D8;font-size:clamp(16px,1.4vw,18px);max-width:62ch;margin-top:16px}
.legal-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.legal-hero__date{font-size:14px;color:#9ED4BE;margin-right:8px}
.legal-hero__date b{color:#fff;font-weight:600}
.legal-hero__meta a{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.06);font-size:13.5px;font-weight:600;color:#fff;transition:background .2s,border-color .2s}
.legal-hero__meta a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}

.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,72px);padding-top:56px;padding-bottom:96px}
.legal__toc nav{position:sticky;top:96px}
.legal__toc-title{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legal__toc ol{list-style:none;margin-top:14px;border-left:1px solid var(--line)}
.legal__toc a{display:flex;gap:12px;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;
  font-size:14px;line-height:1.4;color:var(--ink-soft);transition:color .2s,border-color .2s}
.legal__toc a span{flex:none;font-family:var(--font-d);font-size:12px;font-weight:700;color:var(--muted-2);padding-top:1px}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--ink);border-left-color:var(--brand)}
.legal__body{max-width:720px}
.legal__intro{padding:22px 24px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.legal__sec{padding-top:44px;margin-top:44px;border-top:1px solid var(--line);scroll-margin-top:90px}
.legal__intro+.legal__sec{border-top:0;margin-top:12px}
.legal__n{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-bright)}
.legal__sec h2{font-size:clamp(22px,2.2vw,28px);margin-top:10px}
.legal__prose{color:var(--ink-soft);font-size:16px;line-height:1.7}
.legal__sec .legal__prose{margin-top:16px}
.legal__prose p+p,.legal__prose p+ul,.legal__prose ul+p{margin-top:14px}
.legal__prose ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.legal__prose li{position:relative;padding-left:22px}
.legal__prose li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.legal__prose a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal__contact{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;
  padding:24px 26px;border-radius:18px;background:#0B1F19;color:#fff}
.legal__contact b{display:block;font-family:var(--font-d);font-size:18px}
.legal__contact span{display:block;font-size:14px;color:#9ED4BE;margin-top:4px}
@media (max-width:900px){
  .legal{grid-template-columns:1fr;padding-top:32px}
  .legal__toc nav{position:static;padding:18px 20px;border:1px solid var(--line);border-radius:16px}
  .legal__toc ol{border-left:0}
  .legal__toc a{padding-left:0;border-left:0}
}
.legal__toc a[aria-current]{color:var(--brand-deep);border-left-color:var(--brand);font-weight:600}
.legal__toc a[aria-current] span{color:var(--brand-bright)}

/* ---- Customers page: the client logo wall as the hero picture ---- */
.logowall{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,480px);height:460px;
  margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent)}
.logowall__col{overflow:hidden}
.logowall__track{display:flex;flex-direction:column;gap:14px;animation:logowallUp 38s linear infinite}
.logowall__col--down .logowall__track{animation-name:logowallDown;animation-duration:44s}
.logowall__col--slow .logowall__track{animation-duration:50s}
.logowall__tile{display:grid;place-items:center;height:92px;padding:14px;border-radius:16px;background:#fff;
  box-shadow:0 20px 40px -30px rgba(0,0,0,.8)}
.logowall__tile img{max-width:100%;max-height:52px;object-fit:contain}
/* The track is two copies of the column; half its height (plus half a gap) is one full column. */
@keyframes logowallUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes logowallDown{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.logowall__track{animation:none}}
.logowall__count{position:relative;z-index:1;margin:-44px auto 0;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#0B1F19;
  border:1px solid rgba(0,181,124,.45);box-shadow:0 16px 36px -16px rgba(0,0,0,.8);font-size:13.5px;color:#BFE8D8}
.logowall__count b{font-family:var(--font-d);font-size:16px;color:#fff}
@media (max-width:620px){.logowall{height:380px;gap:10px}.logowall__track{gap:10px}.logowall__tile{height:76px;padding:10px}}

/* The band's right side: how a new case starts, three numbered steps. */
.band__steps{list-style:none;display:flex;flex-direction:column;gap:18px}
.band__steps li{display:flex;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.band__steps li:last-child{border-bottom:0;padding-bottom:0}
.band__steps li>span{flex:none;font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--brand);padding-top:3px}
.band__steps b{display:block;font-family:var(--font-d);font-size:17px;color:#fff}
.band__steps p{margin-top:4px!important;font-size:14px!important;color:rgba(255,255,255,.66)!important}

/* ---- About page ---- */
/* Hero picture: three conversation sources feeding one panel. */
.flowvis{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;width:min(100%,500px);margin:0 auto}
.flowvis__src{display:flex;flex-direction:column;gap:16px}
.flowvis__node{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}
.flowvis__node svg{grid-row:1/3;color:var(--brand)}
.flowvis__node b{font-family:var(--font-d);font-size:15px}
.flowvis__node em{font-style:normal;font-size:12px;color:#9ED4BE}
.flowvis__lines{width:100%;height:100%;min-height:260px;overflow:visible}
.flowvis__lines path{fill:none;stroke:rgba(0,181,124,.6);stroke-width:1.6;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.flowvis__panel{padding:22px 20px;border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 6px rgba(0,181,124,.12)}
.flowvis__panel img{width:36px;height:36px}
.flowvis__panel b{display:block;font-family:var(--font-d);font-size:17px;margin-top:12px}
.flowvis__panel ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.flowvis__panel li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);padding:8px 10px;border-radius:10px;background:var(--panel-2)}
.flowvis__panel li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
@media (max-width:520px){.flowvis{grid-template-columns:1fr;gap:14px}.flowvis__lines{display:none}}

/* Product cards that link to their pages. */
.prodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prodcard{display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.prodcard:hover{transform:translateY(-3px);border-color:rgba(0,181,124,.45);box-shadow:var(--shadow-md)}
.prodcard__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--brand-tint);color:var(--brand-deep)}
.prodcard h3{margin-top:18px;font-size:19px}
.prodcard p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);flex:1}
.prodcard__more{margin-top:18px;font-weight:700;font-size:14px;color:var(--brand-bright)}
@media (max-width:860px){.prodcards{grid-template-columns:1fr}}

/* Founders inside the dark band. */
.band__people{display:flex;flex-direction:column;gap:12px}
.band__people a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.band__people a:hover{border-color:rgba(0,181,124,.55);background:rgba(0,181,124,.1)}
.band__people img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.band__people b{display:block;font-family:var(--font-d);font-size:16px;color:#fff}
.band__people em{display:block;font-style:normal;font-size:13px;color:#9ED4BE;margin-top:2px}
.band__people a.band__people-more{justify-content:center;font-weight:700;font-size:14px;color:#9BE4C7}

/* ---- Careers page ---- */
.hirecard{width:min(100%,440px);margin:0 auto;padding:24px 24px 10px;border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.hirecard__title{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-bright)}
.hirecard ol{list-style:none;margin-top:16px;position:relative}
.hirecard ol::before{content:"";position:absolute;left:15px;top:18px;bottom:34px;width:2px;background:var(--brand-tint)}
.hirecard li{position:relative;display:flex;gap:14px;padding-bottom:18px}
.hirecard li>span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:#fff;font-family:var(--font-d);font-weight:700;font-size:14px}
.hirecard li:last-child>span{background:#0B1F19}
.hirecard b{display:block;font-family:var(--font-d);font-size:16px;padding-top:4px}
.hirecard em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:2px}
/* /careers/ — numeo.ai's list: the departments on the left
   and one row per role on the right; each role opens its own page. */
.jobs__note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
.jobs__note p{font-size:15px;color:var(--ink-soft)}
@media (max-width:620px){.jobs__note{flex-direction:column;align-items:stretch;padding:18px}.jobs__note .btn{width:100%}}
.jobs{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}
.jobs h2{font-family:var(--font-d);font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.jobs__grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,56px);margin-top:32px;align-items:start}
.jobs__grid>.jobs__rows:only-child{grid-column:1/-1}
.jobs__filter{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.jobs__filter-h{margin-bottom:8px;font-size:14px;font-weight:700}
.jobs__dept{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--ink-soft);text-align:left;cursor:pointer}
.jobs__dept span{font-size:12px;color:var(--muted)}
.jobs__dept:hover{background:var(--panel-2);color:var(--ink)}
.jobs__dept.is-on{background:var(--brand-tint);color:var(--brand-deep);font-weight:700}
.jobs__dept:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.jobs__list{list-style:none}
.job{border-bottom:1px solid var(--line)}
.job[hidden]{display:none}
.job__link{display:flex;align-items:center;gap:20px;padding:22px 4px}
.job__link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.job__main{flex:1;min-width:0}
.job__title{font-size:18px;line-height:1.3;transition:color .15s}
.job__meta{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.job__more{flex:none;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s}
.job__link:hover .job__title{color:var(--brand-bright)}
.job__link:hover .job__more{border-color:var(--brand);background:var(--brand-tint)}
@media (max-width:820px){
  .jobs__grid{grid-template-columns:1fr;gap:20px}
  .jobs__filter{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;padding-bottom:0;border-bottom:0}
  .jobs__filter-h{display:none}
  .jobs__dept{padding:7px 12px;border:1px solid var(--line-2);border-radius:999px}
  .jobs__dept.is-on{border-color:var(--brand)}
}
@media (max-width:620px){.job__link{gap:12px;padding:18px 0}.job__title{font-size:17px}.job__more{padding:7px 12px;font-size:13px}}

/* /careers/<slug>/ — one role: centred head, the role, and the apply card. */
.rolehead{padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line);text-align:center}
.rolehead__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:14px;color:var(--ink-soft)}
.rolehead__chip{display:inline-flex;align-items:center;gap:6px}
.rolehead__chip svg{color:var(--muted)}
.rolehead h1{margin-top:18px;font-family:var(--font-d);font-size:clamp(34px,4.8vw,56px);line-height:1.08;letter-spacing:-.03em}
.rolehead .lede{max-width:60ch;margin:16px auto 0;font-size:17px;color:var(--ink-soft)}
.rolepage{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px)}
.rolepage__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,96px);align-items:start}
.rolepage__sec{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.rolepage__sec h2{font-family:var(--font-d);font-size:24px;letter-spacing:-.01em}
.rolepage__sec>p{margin-top:12px;font-size:16px;color:var(--ink-soft);line-height:1.65}
.rolepage__body h3{margin:28px 0 12px;font-family:var(--font-d);font-size:24px;letter-spacing:-.01em}
.rolepage__body h3:first-child{margin-top:0}
.rolepage__body p{margin-top:12px;color:var(--ink-soft);line-height:1.65}
.rolepage__body ul,.rolepage__body ol{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rolepage__body li{position:relative;padding-left:20px;font-size:16px;color:var(--ink-soft);line-height:1.6}
.rolepage__body ul li::before{content:"";position:absolute;left:3px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.rolepage__back{font-size:15px;font-weight:600;color:var(--brand-bright)}
.rolepage__back:hover{text-decoration:underline}
.rolecard2{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--line-2);border-radius:20px;background:#fff}
.rolecard2__apply{width:100%}
.rolecard2__fact{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.rolecard2__fact svg{flex:none;margin-top:2px;color:var(--muted)}
.rolecard2__fact em{display:block;font-style:normal;color:var(--muted)}
.rolecard2__fact b{font-weight:600;color:var(--ink)}
.rolecard2__map{padding-top:14px;border-top:1px solid var(--line)}
.rolecard2__map:hover b{color:var(--brand-bright);text-decoration:underline}
.rolecard2__map:focus-visible,.rolecard2__apply:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:900px){.rolepage__grid{grid-template-columns:1fr}.rolecard2{position:static;order:-1}}

/* Bigger orbit logos: the circles grow a little and each logo fills two
   thirds of its circle, so the wide wordmarks (payme, amoCRM) read too. */
.orbit__item i{width:66px;height:66px;margin:-33px 0 0 -33px}
.orbit__spin--out .orbit__item i{width:62px;height:62px;margin:-31px 0 0 -31px}
.orbit__item img,.orbit__spin--out .orbit__item img{width:62%;height:62%;object-fit:contain}
@media (max-width:620px){
  .orbit__item i{width:50px;height:50px;margin:-25px 0 0 -25px}
  .orbit__spin--out .orbit__item i{width:46px;height:46px;margin:-23px 0 0 -23px}
}

/* The glow belongs to the whole band, not to the text column: tied to the
   column it lit only the middle of a full-height hero and left a flat strip
   above it. One radial over the entire hero, the text untouched. */
.hero--split .hero__grid>div:first-child::before{display:none}
.hero--split{background:
  radial-gradient(ellipse 65% 85% at 22% 55%,rgba(0,181,124,.2),transparent 70%),
  radial-gradient(ellipse 50% 60% at 80% 45%,rgba(0,181,124,.08),transparent 70%),
  #0B1F19}
@media (max-width:980px){
  .hero--split{background:
    radial-gradient(ellipse 110% 60% at 50% 30%,rgba(0,181,124,.2),transparent 70%),
    #0B1F19}
}

/* ==== Split hero: back to the LIGHT ground (2026-09-23) ====
   The team chose the pale brand tint over the dark band for the inner pages.
   Everything the dark band restyled is set back to its light form here, in
   one place, so the dark rules above stay readable history and this block is
   the one to remove if the band ever goes dark again. The header on these
   pages is the ordinary white bar again (no site-hdr--dark). */
.crumb--tint{background:var(--panel-2);color:var(--muted)}
.crumb--tint a:hover{color:var(--brand-bright)}
.crumb--tint [aria-current="page"]{color:var(--ink-soft)}
.hero--split{background:
  radial-gradient(ellipse 65% 85% at 22% 55%,rgba(0,181,124,.10),transparent 70%),
  radial-gradient(ellipse 50% 60% at 80% 45%,rgba(0,181,124,.06),transparent 70%),
  var(--panel-2);border-bottom:1px solid var(--line)}
@media (max-width:980px){
  .hero--split{background:radial-gradient(ellipse 110% 60% at 50% 30%,rgba(0,181,124,.10),transparent 70%),var(--panel-2)}
}
.hero--split h1{color:var(--ink)}
.hero--split h1 em{color:var(--brand-bright)}
.hero--split .lede{color:var(--ink-soft)}
.hero--split .pill{background:#fff;border-color:var(--line-2);color:var(--ink-soft)}
.hero--split .btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.hero--split .btn--ghost:hover{background:var(--panel-2);border-color:var(--brand)}
.hero--split .orbit__ring{border-color:rgba(11,31,25,.10)}
.hero--split .orbit__core{box-shadow:0 0 0 10px rgba(0,181,124,.07),0 22px 50px -24px rgba(0,181,124,.75)}
.hero--split .orbit__facts li{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:0 10px 24px -20px rgba(11,31,25,.55)}
.hero--split .callcard,.hero--split .floorcard,.hero--split .cocard,.hero--split .hirecard{
  box-shadow:0 30px 70px -40px rgba(11,31,25,.45),0 0 0 1px var(--line)}
.hero--split .logowall__tile{box-shadow:0 12px 30px -22px rgba(11,31,25,.5),0 0 0 1px var(--line)}
.hero--split .logowall__count{background:#fff;color:var(--ink-soft);border-color:rgba(0,181,124,.4);box-shadow:0 16px 36px -20px rgba(11,31,25,.45)}
.hero--split .logowall__count b{color:var(--ink)}
.hero--split .flowvis__node{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.hero--split .flowvis__node em{color:var(--muted)}
.hero--split .flowvis__panel{box-shadow:0 30px 70px -40px rgba(11,31,25,.45),0 0 0 6px rgba(0,181,124,.10)}

/* Full height, capped: zoomed far out a viewport is thousands of CSS pixels
   tall and the hero became a mostly empty band around small content. */
.hero--split{min-height:min(calc(100vh - var(--above)),900px);min-height:min(calc(100svh - var(--above)),900px)}

/* More room under the hero's last line (2026-09-23), on every split hero. */
.hero--split,.product-page--minimal .hero--split{padding-bottom:clamp(120px,11vw,170px)}
@media (max-width:680px){.hero--split,.product-page--minimal .hero--split{padding-bottom:84px}}

/* ---- Careers: the application form inside the dark band ---- */
.band--apply{align-items:start}
.apply__alt{margin-top:18px!important;font-size:14px!important}
.apply__alt a{color:#9BE4C7;text-decoration:underline;text-underline-offset:3px}
.apply{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff;color:var(--ink)}
.apply__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.apply__field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.apply__field em{font-style:normal;font-weight:500;color:var(--muted-2)}
.apply input:not([type="file"]),.apply select,.apply textarea{width:100%;min-height:46px;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:12px;background:#fff;font:500 15px/1.4 var(--font-b);color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.apply textarea{resize:vertical;min-height:84px}
.apply input:focus,.apply select:focus,.apply textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,181,124,.18)}
.apply__file{position:relative;display:block;cursor:pointer}
.apply__file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.apply__drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border:1.5px dashed var(--line-2);
  border-radius:14px;background:var(--panel-2);text-align:center;color:var(--brand-bright);transition:border-color .2s,background .2s}
.apply__drop b{font-family:var(--font-d);font-size:15px;color:var(--ink);word-break:break-all}
.apply__drop em{font-style:normal;font-size:12.5px;color:var(--muted)}
.apply__file:hover .apply__drop,.apply__file input:focus-visible+.apply__drop{border-color:var(--brand);background:var(--brand-tint)}
.apply.has-file .apply__drop{border-style:solid;border-color:var(--brand);background:var(--brand-tint)}
.apply__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.apply__submit{width:100%;min-height:50px;justify-content:center}
.apply__submit:disabled{opacity:.6;cursor:progress}
.apply__status{min-height:1.2em;font-size:14px;text-align:center;color:var(--muted)}
.apply__status.is-ok{color:var(--brand-deep);font-weight:600}
.apply__status.is-error{color:#B42318;font-weight:600}
@media (max-width:620px){.apply__row{grid-template-columns:1fr}.apply{padding:18px}}

/* ---- Careers: the application form as a dialog ---- */
.apply-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.apply-modal[hidden]{display:none}
.apply-modal:target{display:grid}
.apply-modal__backdrop{position:absolute;inset:0;background:rgba(6,20,14,.55);backdrop-filter:blur(4px)}
.apply-modal__panel{position:relative;width:min(100%,560px);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:30px 28px 24px;border-radius:22px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:applyIn .22s var(--ease)}
@keyframes applyIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.apply-modal__panel{animation:none}}
.apply-modal__x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer}
.apply-modal__x:hover{background:var(--panel-2);color:var(--ink)}
.apply-modal h2{font-size:26px;padding-right:40px}
.apply-modal__lede{margin:8px 0 20px;font-size:14.5px;color:var(--muted)}
.apply-modal__lede a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px}
.apply-modal .apply{padding:0;background:none}
html.apply-open{overflow:hidden}
@media (max-width:620px){.apply-modal{padding:10px;align-items:end}.apply-modal__panel{padding:24px 18px 18px;border-radius:20px}}

/* ---- Careers dialog: the «Yo‘nalish» dropdown ---- */
.dd{position:relative}
.dd__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dd__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:12px;background:#fff;font:500 15px/1.4 var(--font-b);color:var(--ink);
  text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.dd__btn:focus-visible,.dd.is-open .dd__btn{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,181,124,.18)}
.dd__chev{flex:none;color:var(--muted);transition:transform .2s var(--ease)}
.dd.is-open .dd__chev{transform:rotate(180deg)}
.dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,31,25,.35)}
.dd__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:15px;color:var(--ink-soft);cursor:pointer}
.dd__list li.is-active{background:var(--panel-2);color:var(--ink)}
.dd__list li[aria-selected="true"]{color:var(--brand-deep);font-weight:600}
.dd__tick{flex:none;color:var(--brand-bright);opacity:0}
.dd__list li[aria-selected="true"] .dd__tick{opacity:1}

/* ---- Careers: vacancy cards from the workspace ---- */
.site-empty{grid-column:1/-1;padding:28px;border:1px dashed var(--line-2);border-radius:16px;text-align:center;color:var(--muted)}

/* ==== Dark content blocks, lighter (2026-09-23) ====
   The near-black green bands and CTAs are lifted to a medium brand green —
   as far as it goes while white body text keeps 4.5:1 (#1F7A5E is 5.2:1,
   #1E6B53 6.4:1). The Reveo box's #2DA483 would read at 3.1:1 under
   paragraph text, so it is not used here. */
.band,
.product-page--minimal .band,
.cta,
.product-page--minimal .cta,
.legal__contact,
.math__card--price{background:linear-gradient(150deg,#1F7A5E,#1E6B53)!important}
.cta::before,.cta::after{opacity:.35}
/* Secondary text on the lighter ground: brighter, so it keeps its contrast. */
.band p,.band__stat span,.band__steps p,.band__links span,.cta p,.cta__note,
.vs__col li,.band__people em,.legal__contact span{color:rgba(255,255,255,.9)!important}
.band__steps li{border-bottom-color:rgba(255,255,255,.22)}
.band__steps li>span,.cta__kicker{color:#CFF5E6!important}
.vs__col{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.vs__col--after{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.band__links a,.band__people a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}

/* «Rasm va ovoz»: bigger tiles and glyphs (the svgs carry width="18"). */
.fa-tiles{gap:14px}
.fa-tiles i{width:60px;height:60px;border-radius:16px}
.fa-tiles i svg{width:28px;height:28px}
.fa-tiles i{background:linear-gradient(145deg,#FFFFFF 0%,#E3F6EE 100%);
  box-shadow:0 12px 26px -18px rgba(10,120,86,.7),inset 0 0 0 1px rgba(0,181,124,.18)}

/* ---- Call & offline analyze: feature cards with drawn panels ----
   The AI chat manager page's card language — a claim, one line, and a small
   drawing of the thing — built from a few panel pieces below. */
.feat-grid--row2{margin-top:18px}
.feat__art--pane{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px}
.fa-search{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:#fff;color:var(--brand-bright);font-size:13px;font-weight:600;box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.fa-line{display:flex;flex-direction:column;gap:2px;max-width:88%;padding:9px 12px;border-radius:12px;background:#fff;font-size:13px;
  box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.fa-line b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-bright)}
.fa-line--in{align-self:flex-end}
.fa-line mark{background:#FFF1B8;color:inherit;border-radius:3px;padding:0 1px}
.fa-score{display:flex;align-items:center;gap:18px}
.fa-ring{flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),#fff 0);position:relative}
.fa-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#EEF8F4}
.fa-ring b{position:relative;font-family:var(--font-d);font-size:22px}
.fa-checks{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px}
.fa-checks li{display:flex;align-items:center;gap:8px}
.fa-checks li::before{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700}
.fa-checks .is-yes::before{content:"✓";background:var(--brand);color:#fff}
.fa-checks .is-no::before{content:"✕";background:#FDECEC;color:#B42318}
.fa-states{display:flex;flex-direction:column;gap:9px}
.fa-states span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-radius:12px;background:#fff;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.fa-states span::after{content:"";width:9px;height:9px;border-radius:50%}
.fa-states .is-ok::after{background:var(--brand)}
.fa-states .is-warn::after{background:#E8A33D}
.fa-states .is-bad::after{background:#E5484D}
.fa-states--rank span::after{display:none}
.fa-states--rank b{font-family:var(--font-d);color:var(--brand-bright)}
.fa-funnel{display:flex;flex-direction:column;gap:8px}
.fa-funnel div{display:flex;justify-content:space-between;gap:10px;width:max(var(--w),128px);padding:9px 12px;border-radius:10px;
  background:linear-gradient(90deg,var(--brand),#34C99A);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.fa-funnel div.is-low{background:linear-gradient(90deg,#E8A33D,#F2C06A)}
.fa-bars{list-style:none;display:flex;flex-direction:column;gap:12px}
.fa-bars li{display:grid;grid-template-columns:96px 1fr 40px;align-items:center;gap:10px;font-size:13px;font-weight:600}
.fa-bars i{height:9px;border-radius:999px;background:#fff;position:relative;overflow:hidden}
.fa-bars i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--brand),#34C99A)}
.fa-bars .is-low i::before{background:linear-gradient(90deg,#E8A33D,#F2C06A)}
.fa-bars b{text-align:right;font-family:var(--font-d)}
.fa-chart{display:flex;align-items:flex-end;gap:8px;height:96px}
.fa-chart i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#34C99A,var(--brand))}
.fa-chart i:last-child{background:linear-gradient(180deg,#0E9F72,var(--brand-deep))}
.fa-delta{align-self:flex-start;padding:5px 11px;border-radius:999px;background:#fff;color:var(--brand-deep);font-size:12.5px;font-weight:700}
.fa-delta--soft{color:var(--muted)}
.fa-range{display:flex;flex-direction:column;gap:12px}
.fa-range__track{position:relative;height:12px;border-radius:999px;background:#fff;margin-top:26px}
.fa-range__track i{position:absolute;left:28%;right:22%;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#34C99A)}
.fa-range__track em{position:absolute;left:var(--x);bottom:calc(100% + 6px);transform:translateX(-50%);font-style:normal;font-size:11.5px;
  font-weight:700;color:#B42318;white-space:nowrap}
.fa-range__track em::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:2px;height:14px;background:#B42318}
.fa-range__lbl{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.fa-range__lbl b{color:var(--ink);font-size:13px}
.fa-needs{display:flex;flex-wrap:wrap;gap:8px}
.fa-needs span{padding:8px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.fa-needs b{color:var(--brand-bright);margin-left:4px}
.fa-quote{padding:14px 16px;border-radius:16px 16px 16px 4px;background:#fff;font-size:14px;line-height:1.5;font-style:italic;
  box-shadow:0 10px 24px -16px rgba(11,31,25,.6)}
@media (max-width:980px){.feat-grid--row2{grid-template-columns:1fr}}

/* Screenshot captions: a short label on one line, not a sentence. */
.shot figcaption{padding:9px 16px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- «bir joyda» card: Reveo branching to the three channels ---- */
.fa-hub{display:flex;flex-direction:column;align-items:center;width:100%}
.fa-hub__lines{width:min(300px,84%);height:44px;overflow:visible}
.fa-hub__lines path{fill:none;stroke:#8FD9BE;stroke-width:2;vector-effect:non-scaling-stroke}
.fa-hub__row{display:flex;justify-content:space-between;width:min(360px,100%)}
.fa-hub__ch{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px}
.fa-hub__ch em{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-soft)}
.fa-hub__note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border-radius:999px;
  background:#fff;font-size:13px;font-weight:600;color:var(--brand-deep);box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.fa-hub__note i{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(0,181,124,.18)}
@media (max-width:480px){.fa-hub__ch{width:90px}.fa-hub__ch .fa-orb{width:52px;height:52px}}

/* ---- «CRM» card: every logo the same size, with its name ---- */
.fa-wall span{height:78px;flex-direction:column;gap:6px;align-content:center}
.fa-wall span img{max-height:26px;max-width:62%}
.fa-wall span em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted)}
.fa-wall b{height:78px}

/* Panel screens: three in one row, equal frames, the top of each screen. */
.shot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.shot-row .shot{margin:0}
.shot-row .shot img{aspect-ratio:16/10;object-fit:cover;object-position:left top}
.shot-row .shot figcaption{text-align:center}
@media (max-width:860px){.shot-row{grid-template-columns:1fr}}

/* ---- AI chat manager: «Qanday ishga tushadi» as three step cards ----
   One line runs through the three number badges, so the order reads at a
   glance; each card says its step, what it takes, and the one point to keep. */
.flowsteps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(28px,3.6vw,44px);padding:0}
.flowsteps::before{content:"";position:absolute;left:calc(16.66% - 11px);right:calc(16.66% - 11px);top:22px;height:2px;
  background:repeating-linear-gradient(90deg,#8FD9BE 0 8px,transparent 8px 14px)}
.flowstep{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 26px 28px;border:1px solid #BFE8D8;border-radius:22px;background:linear-gradient(180deg,#fff 0%,#F2FBF7 100%);margin-top:22px}
.flowstep__n{display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  background:linear-gradient(145deg,#1FBF8C,#0A8A62);color:#fff;font-family:var(--font-d);font-weight:700;font-size:15px;
  box-shadow:0 0 0 6px #fff,0 10px 22px -10px rgba(10,138,98,.7)}
.flowstep__ic{display:grid;place-items:center;width:56px;height:56px;margin-top:22px;border-radius:16px;
  background:linear-gradient(145deg,#FFFFFF,#E3F6EE);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(0,181,124,.18)}
.flowstep h3{margin-top:16px;font-size:19px}
.flowstep p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:34ch}
.flowstep__chip{margin-top:16px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #BFE8D8;
  font-size:12.5px;font-weight:700;color:var(--brand-deep)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:860px){
  .flowsteps{grid-template-columns:1fr;gap:30px}
  .flowsteps::before{left:50%;right:auto;top:22px;bottom:22px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,#8FD9BE 0 8px,transparent 8px 14px)}
}
/* Badges sit in the open row above the cards, so the line through them is
   one unbroken rule instead of dashes showing between card edges. */
.flowstep{margin-top:66px;padding-top:0}
.flowstep__n{margin-top:-66px;position:relative;z-index:1}
.flowstep__n::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:22px;transform:translateX(-50%);background:#BFE8D8}
.flowstep__ic{margin-top:44px}
.flowsteps::before{top:22px;background:linear-gradient(90deg,#BFE8D8,#8FD9BE 50%,#BFE8D8)}
@media (max-width:860px){.flowsteps::before{display:none}}

/* Hero content sits near the top, not in the middle of the band. */
.hero--split,.product-page--minimal .hero--split{justify-content:flex-start;padding-top:clamp(24px,3.5vw,48px)}

/* The labels under a hero picture: an even 2×2 grid of equal chips with a
   check, the same mint frame as the page's other cards — no loose pills. */
.hero__vis .orbit__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,440px);max-width:none;margin-top:22px}
.hero__vis .orbit__facts li{justify-content:flex-start;gap:10px;padding:11px 14px;border-radius:14px;
  background:#fff;border:1px solid #BFE8D8;box-shadow:none;font-size:13.5px;font-weight:600;color:var(--ink)}
.hero__vis .orbit__facts li::before{content:"✓";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:11px;font-weight:700}
@media (max-width:420px){.hero__vis .orbit__facts{grid-template-columns:1fr}}
.hero__vis .orbit__facts{width:min(100%,500px)}
.hero__vis .orbit__facts li{font-size:13px;padding:11px 12px;white-space:nowrap}
@media (max-width:520px){.hero__vis .orbit__facts li{white-space:normal}}
/* Closer still under the breadcrumb (2026-09-24). */
.hero--split,.product-page--minimal .hero--split{padding-top:28px}
.hero--split .hero__grid{align-items:start}

/* ---- /cases/: every client, by product ---- */
.cases-hero{background:radial-gradient(ellipse 60% 80% at 30% 40%,rgba(0,181,124,.10),transparent 70%),var(--panel-2);
  border-bottom:1px solid var(--line);padding:28px 0 clamp(40px,5vw,64px)}
.cases-hero h1{margin-top:18px;max-width:18ch}
.cases-hero h1 em{font-style:normal;color:var(--brand-bright)}
.cases-hero .lede{margin-top:16px;max-width:60ch}
.cases-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cases-stats div{display:flex;align-items:baseline;gap:8px;padding:12px 18px;border-radius:14px;background:#fff;border:1px solid #BFE8D8}
.cases-stats b{font-family:var(--font-d);font-size:24px;color:var(--brand-deep)}
.cases-stats span{font-size:14px;color:var(--ink-soft)}
.cases-sec{padding-top:40px}
.cases-filter{display:flex;flex-wrap:wrap;gap:8px}
.cases-filter button{padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  font:600 14px/1 var(--font-b);color:var(--ink-soft);cursor:pointer}
.cases-filter button.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.case{display:flex;flex-direction:column;border:1px solid #BFE8D8;border-radius:20px;overflow:hidden;background:#fff;
  color:inherit;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.case[hidden]{display:none}
a.case:hover{border-color:var(--brand);transform:translateY(-3px)}
/* The covers are the carousel's portrait art (≈720×850): a wide strip cut
   them to a bottle cap or an empty sky, a square keeps each brand whole. */
.case__cover{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--panel-2)}
.case__cover img{width:100%;height:100%;object-fit:cover;object-position:center}
.case__cover--logo{display:grid;place-items:center;background:linear-gradient(145deg,#fff,#E3F6EE)}
.case__cover--logo img{width:auto;height:auto;max-width:50%;max-height:40%;object-fit:contain}
.case__body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.case__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.case__top b{font-family:var(--font-d);font-size:18px}
.case__prod{flex:none;padding:4px 10px;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);font-size:12px;font-weight:700}
.case__ind{font-size:13.5px;color:var(--muted)}
.case__body p{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.case__more{margin-top:auto;padding-top:12px;font-weight:700;font-size:14px;color:var(--brand-bright)}
@media (max-width:1000px){.cases-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cases-grid{grid-template-columns:1fr}}

/* ============ Clients: the photo strip (same as the home page's #cases, on white) ============ */
.sec--clients{background:#fff;overflow:hidden;padding-bottom:40px}
.sec--clients .sec-head{max-width:960px;margin-bottom:34px}
.cc{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cc-track{display:flex;gap:22px;width:max-content;padding:10px 0 18px;animation:ccScroll 60s linear infinite}
.cc:hover .cc-track,.cc:focus-within .cc-track{animation-play-state:paused}
/* Two copies of the list: moving by half the track (plus half a gap) is one full lap. */
@keyframes ccScroll{to{transform:translateX(calc(-50% - 11px))}}
.cc-card{position:relative;flex:none;width:300px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;
  display:block;color:#fff;text-decoration:none;background:#123;border:1px solid var(--line);
  transition:transform .35s var(--ease)}
.cc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)}
.cc-card:hover{transform:translateY(-6px)}
.cc-card:hover img{transform:scale(1.04)}
.cc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:56px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,20,14,.55) 40%,rgba(6,20,14,.88))}
.cc-cap b{font-family:var(--font-d);font-size:19px;font-weight:700;line-height:1.2}
.cc-cap span{font-size:13.5px;color:rgba(255,255,255,.85)}
.cc-cap em{align-self:flex-start;margin-top:10px;padding:5px 11px;border-radius:999px;background:var(--brand);
  font-style:normal;font-size:12.5px;font-weight:700;color:#fff}
a.cc-card:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (max-width:760px){.cc-card{width:230px}.cc-track{gap:14px}
  @keyframes ccScroll{to{transform:translateX(calc(-50% - 7px))}}}
@media (prefers-reduced-motion:reduce){
  .cc{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .cc-track{animation:none;padding-inline:24px}
  .cc-track>[aria-hidden="true"]{display:none}
  .cc-card,.cc-card img{transition:none}
}

/* ---------- «Sinab ko‘ring» (call-analyze): the visitor's own recording ---------- */
:root{--bad:#B42318;--bad-tint:#FDECEC;--warn:#9A5B00;--warn-tint:#FFF3DC;--cust:#9DB3AA}
.try{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.try>*{min-width:0}
.try__copy h2{margin-top:16px}
@media (min-width:901px){.try__copy{position:sticky;top:104px}}
.try__facts{list-style:none;margin-top:30px;display:grid;gap:14px}
.try__facts li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:500;color:var(--ink)}
.try__facts svg{flex:none;color:var(--brand-deep)}
.try__sample{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.try__sample>span{font-size:14.5px;color:var(--muted)}
.try__sample-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  font:600 14.5px var(--font-b);color:var(--brand-deep);background:#fff;border:1px solid var(--line-2);transition:border-color .2s,background .2s}
.try__sample-btn svg{color:var(--brand)}
.try__sample-btn:hover{border-color:var(--brand);background:var(--brand-tint)}
.try__sample-btn:disabled{opacity:.5;cursor:default;background:#fff;border-color:var(--line-2)}
.try__panel [hidden]{display:none!important}
.try__panel{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:0 24px 60px -36px rgba(11,31,25,.28);transition:border-color .2s,box-shadow .2s}
.try__panel.is-over{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint),0 24px 60px -36px rgba(11,31,25,.28)}
/* Idle: a slim upload bar over a preview of the report it will produce. */
.try__drop{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border:1.5px dashed var(--line-2);
  border-radius:16px;background:var(--panel-2);cursor:pointer;transition:border-color .2s,background .2s}
.try__drop:hover,.try__panel.is-over .try__drop{border-color:var(--brand);background:var(--brand-tint)}
.try__drop:focus-within{outline:2px solid var(--brand);outline-offset:3px}
.try__drop.is-spent{cursor:default;border-style:solid}
.try__drop.is-spent:hover{border-color:var(--line-2);background:var(--panel-2)}
.try__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.try__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;
  border:1px solid var(--line);color:var(--brand-deep)}
.try__drop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.try__title{font-family:var(--font-d);font-size:16.5px;font-weight:600}
.try__sub{font-size:13.5px;color:var(--muted)}
.try__btn{flex:none;height:44px;padding:0 20px;font-size:15px}
.try__ghost{margin-top:18px;padding:18px 6px 4px}
.try__ghost .rs__num b{color:var(--muted-2)}
.try__ghost .rs__file{color:var(--ink-soft);white-space:normal}
.try__ghost .rs__count{color:var(--muted);white-space:normal}
.try__ghost .rs__track{stroke:rgba(11,31,25,.07)}
.try__ghost .rs__rowhead b{color:var(--ink-soft);font-weight:500}
.try__ghost .rs__bar,.try__ghost .rs__talk span{background:rgba(11,31,25,.07)}
.try__ghost .rs__val,.try__ghost .rs__legend{color:var(--muted-2)}
.try__ghost .rs__sw{background:rgba(11,31,25,.12)}
.try__ghost .rs__pass{opacity:.18}
@media (max-width:560px){
  .try__drop{flex-wrap:wrap;padding:14px}
  .try__ic{width:38px;height:38px}
  .try__title{font-size:15.5px}
  .try__btn{width:100%}
}
.try__again{display:flex;margin-top:16px;width:100%;height:48px;font-size:15px}
.try__err{margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--bad-tint);color:var(--bad);font-size:14px;font-weight:500}
.try__err::before{content:"! ";font-weight:800}
.try__left{margin-top:14px;text-align:center;font-size:13.5px;color:var(--muted)}
.try__left-n{font-weight:700;color:var(--ink)}
.try__left a{color:var(--brand-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* The analysis in progress: file, the visitor's own waveform with a scan
   sweeping it, and the pipeline's four steps. */
.try__work{padding:6px 4px 4px}
.an__head{display:flex;align-items:center;gap:12px}
.an__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep)}
.an__who{flex:1;min-width:0;display:flex;flex-direction:column}
.an__who b{font-family:var(--font-d);font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an__meta{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.an__clock{flex:none;font-size:13px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:999px;background:var(--panel-2)}
.an__wave{position:relative;margin-top:18px;height:84px;padding:0 14px;border-radius:14px;background:var(--panel-2);overflow:hidden}
.an__bars{position:absolute;inset:14px;display:flex;align-items:center;gap:2px}
.an__bars i{flex:1;height:var(--h,40%);border-radius:2px;background:rgba(11,31,25,.16);transition:height .4s var(--ease)}
.an__scan{position:absolute;top:0;bottom:0;left:0;width:26%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,181,124,0),rgba(0,181,124,.22) 85%,rgba(0,181,124,0) 100%);
  border-right:2px solid var(--brand);animation:anScan 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes anScan{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
.an__steps{list-style:none;margin-top:18px;display:grid;gap:4px}
.an__steps li{display:flex;align-items:flex-start;gap:12px;padding:9px 4px;color:var(--muted-2);transition:color .3s}
.an__steps li.is-active,.an__steps li.is-done{color:var(--ink)}
.an__dot{flex:none;position:relative;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);margin-top:1px}
.an__steps .is-active .an__dot{border-color:var(--brand-tint);border-top-color:var(--brand);animation:anSpin .8s linear infinite}
.an__steps .is-done .an__dot{border-color:var(--brand);background:var(--brand)}
.an__steps .is-done .an__dot::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes anSpin{to{transform:rotate(360deg)}}
.an__txt{display:flex;flex-direction:column;min-width:0}
.an__txt b{font-size:15px;font-weight:600}
.an__sub{font-style:normal;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:0}
.an__sub:empty{display:none}
.an__steps li:not(.is-active) .an__sub{display:none}
@media (prefers-reduced-motion:reduce){
  .an__scan{animation-duration:6s}
  .an__steps .is-active .an__dot{animation-duration:2.4s}
}

/* The result: the score as a gauge, a bar per criterion on one 0–10 scale
   with the pass line at 6, and the talk split. Verdicts are a word and an
   icon beside every bar, never colour alone. */
.rs__top{display:flex;align-items:center;gap:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.rs__score{position:relative;flex:none;width:168px}
.rs__gauge{display:block;width:100%;height:auto;overflow:visible}
.rs__track,.rs__arc{fill:none;stroke-width:14;stroke-linecap:round}
.rs__track{stroke:var(--panel-2)}
.rs__arc{stroke:var(--brand);stroke-dasharray:var(--val) var(--len);stroke-dashoffset:0}
.rs__score.rs--mid .rs__arc{stroke:#D98A12}
.rs__score.rs--low .rs__arc{stroke:#D9483B}
.rs__num{position:absolute;left:0;right:0;bottom:0;text-align:center;line-height:1}
.rs__num b{display:block;font-family:var(--font-d);font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rs__num span{font-size:12.5px;color:var(--muted)}
.rs__sum{display:flex;flex-direction:column;gap:6px;min-width:0}
.rs__tone{align-self:flex-start;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.rs__tone.rs--good{background:var(--brand-tint);color:var(--brand-deep)}
.rs__tone.rs--mid{background:var(--warn-tint);color:var(--warn)}
.rs__tone.rs--low{background:var(--bad-tint);color:var(--bad)}
.rs__file{font-family:var(--font-d);font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs__count{font-size:14px;color:var(--ink-soft)}
.rs__count b{color:var(--ink)}
.rs__block{padding-top:20px}
.rs__block h4{font-family:var(--font-b);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.rs__rows{list-style:none;display:grid;gap:16px}
.rs__rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rs__rowhead b{font-size:14.5px;font-weight:600}
.rs__verdict{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.is-yes .rs__verdict{background:var(--brand-tint);color:var(--brand-deep)}
.is-no .rs__verdict{background:var(--bad-tint);color:var(--bad)}
.rs__track-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.rs__bar{position:relative;flex:1;height:10px;border-radius:999px;background:var(--panel-2)}
.rs__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:999px;background:var(--brand)}
.is-no .rs__bar i{background:#E8857B}
.rs__pass{position:absolute;left:60%;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink);opacity:.35}
.rs__val{flex:none;width:44px;text-align:right;font-family:var(--font-d);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.rs__val small{font-size:11px;font-weight:500;color:var(--muted)}
.rs__note{margin-top:6px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.rs__axis{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.rs__pass--key{position:static;display:inline-block;height:12px}
.rs__talk{display:flex;gap:2px;height:14px}
.rs__talk span{width:var(--w);border-radius:4px;min-width:4px}
.rs__talk-op{background:var(--brand)}
.rs__talk-cu{background:var(--cust)}
.rs__legend{display:flex;gap:20px;margin-top:10px;font-size:13.5px;color:var(--ink-soft)}
.rs__legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.rs__sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.rs__sw--op{background:var(--brand)}
.rs__sw--cu{background:var(--cust)}
.rs__xul p{padding:12px 14px;border-radius:12px;background:var(--panel-2);font-size:14.5px;color:var(--ink)}
/* The one entrance: the arc and the bars grow from zero together. */
@media (prefers-reduced-motion:no-preference){
  .try__result .rs__arc{transition:stroke-dasharray 1.1s var(--ease)}
  .try__result .rs__bar i,.try__result .rs__talk span{transition:width .9s var(--ease)}
  .try__result:not(.is-in) .rs__arc{stroke-dasharray:0 var(--len)}
  .try__result:not(.is-in) .rs__bar i{width:0}
  .try__result:not(.is-in) .rs__talk span{width:0}
}
@media (max-width:560px){
  .rs__top{gap:14px}
  .rs__score{width:132px}
  .rs__num b{font-size:32px}
}
@media (max-width:900px){.try{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){.try__panel{padding:14px}}

/* The connect card after the third recording — the home page's «Biznesingizni
   ulang» poster (landing/index.html .lead-pop), same ground and measured
   contrast, so the two demos end on the same offer. */
.try-pop{position:fixed;inset:0;z-index:300;display:grid;place-items:safe center;padding:24px;
  background:rgba(4,8,6,.74);backdrop-filter:blur(8px);overflow-y:auto}
.try-pop[hidden]{display:none}
.try-pop:focus{outline:none}
.try-pop__card{position:relative;width:100%;max-width:940px;min-height:430px;border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1.06fr .94fr;align-items:center;
  background:radial-gradient(60% 84% at 84% 72%,rgba(190,255,232,.34),transparent 66%),
    linear-gradient(118deg,#00744C 0%,#007A50 62%,var(--brand) 100%);
  box-shadow:0 56px 120px -34px rgba(3,34,24,.8)}
@media (prefers-reduced-motion:no-preference){.try-pop__card{animation:tryPopIn .35s var(--ease) both}}
@keyframes tryPopIn{from{transform:translateY(24px) scale(.97)}}
.try-pop__text{position:relative;z-index:2;padding:54px 8px 54px 56px}
.try-pop__text h2{font-size:clamp(28px,3.4vw,43px);line-height:1.08;letter-spacing:-.03em;color:#fff}
.try-pop__text p{margin-top:18px;font-size:16.5px;line-height:1.55;color:#fff;max-width:34ch}
.try-pop__cta{margin-top:32px;padding:0 34px;height:56px;font-size:16px;background:#08201A;color:#fff;
  border:1px solid rgba(0,0,0,.25);box-shadow:0 16px 34px -16px rgba(0,0,0,.7)}
.try-pop__cta:hover,.try-pop__cta:focus-visible{background:#0C2C23;transform:translateY(-2px);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.72),0 0 0 4px rgba(255,255,255,.2),0 0 34px 2px rgba(170,255,225,.55)}
.try-pop__art{position:relative;z-index:1;align-self:end;justify-self:end;display:flex}
.try-pop__art img{width:100%;max-width:268px;margin:0 22px -30px 0;transform:rotate(10deg);
  filter:drop-shadow(0 30px 44px rgba(2,42,29,.45))}
.try-pop__x{position:absolute;top:18px;right:18px;z-index:5;width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14)}
.try-pop__x:hover{background:rgba(255,255,255,.26);color:#fff}
.try-pop__x:focus-visible{outline-color:#fff}
@media (max-width:760px){
  .try-pop__card{grid-template-columns:1fr;max-width:440px;min-height:0;border-radius:24px;
    background:radial-gradient(70% 34% at 50% 16%,rgba(0,220,150,.55),transparent 70%),linear-gradient(160deg,#00754D,#006945)}
  .try-pop__text{order:2;padding:6px 26px 30px}
  .try-pop__text p{max-width:none;font-size:15.5px}
  .try-pop__cta{margin-top:24px;width:100%;padding:0}
  .try-pop__art{order:1;justify-self:center;align-self:center;padding-top:26px}
  .try-pop__art img{max-width:150px;margin:0}
}

/* ============ Who it is for: industry tiles with sticker illustrations ============ */
.sec--uc{padding-bottom:40px}
.uc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.uc-card h3{margin-top:18px;font-size:20px;color:var(--ink)}
.uc-card p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--muted)}
.uc-media{position:relative;aspect-ratio:1/1;border-radius:var(--radius);background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
/* The illustrations are drawn on white; multiply lets the tile colour show through. */
.uc-media img{position:absolute;inset:4% 6% 14%;width:88%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.uc-note{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  background:#fff;border:1px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--brand);max-width:68%}
.uc-note small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}
.uc-note b{font-family:var(--font-d);font-size:15.5px;font-weight:700;line-height:1.2;color:var(--ink)}
.uc-note span{font-size:12.5px;color:var(--muted)}
@media (max-width:980px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.uc-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- «Qanday ishlaydi» (call-analyze): steps as feature cards ---------- */
.hiw__n{font-family:var(--font-d);font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--brand-bright);margin-bottom:4px}
.hiw .feat__art{flex:none;height:290px;min-height:0}
/* The three cards share their rows (step, title, line, picture), so a line
   that wraps in one card moves the pictures of all three together. */
@supports (grid-template-rows:subgrid){
  .hiw.feat-grid{grid-template-rows:repeat(4,auto)}
  .hiw .feat{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:6px}
}
.hiw .feat p{max-width:none}
/* 1 — the telephony it plugs into: the vendors' own logos on light tiles,
   the integrations wall's language. */
.hiw-wall{padding:22px}
.hiw-logos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;height:100%}
.hiw-logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:0;
  border-radius:14px;background:#fff;padding:8px;box-shadow:0 8px 20px -16px rgba(11,31,25,.5)}
.hiw-logos img{width:34px;height:34px;object-fit:contain;border-radius:9px}
.hiw-logos span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
/* 2 — script becomes criteria */
.hiw-map{display:flex;align-items:center;gap:10px}
.hiw-doc{flex:none;width:34%;display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;background:#fff;
  box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.hiw-doc b{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-doc i{display:block;height:6px;border-radius:3px;background:rgba(11,31,25,.1)}
.hiw-arrow{flex:none;color:var(--brand)}
.hiw-crit{flex:1;min-width:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.hiw-crit li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;
  background:#fff;font-size:12.5px;font-weight:600;box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.hiw-crit li::before{content:"";flex:none;width:14px;height:14px;border-radius:4px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hiw-crit li{justify-content:flex-start}
.hiw-crit b{margin-left:auto;font-family:var(--font-d);color:var(--brand-bright);font-variant-numeric:tabular-nums}
/* 3 — the real report, cropped by the card like a window into the panel */
.hiw-shot{padding:24px 0 0 24px;justify-content:flex-start}
.hiw-shot img{display:block;flex:none;align-self:flex-start;width:230%;height:auto;max-width:none;border-radius:12px 0 0 0;border:1px solid var(--line);
  border-right:0;border-bottom:0;box-shadow:0 18px 40px -24px rgba(11,31,25,.45);
  margin-left:-56%}
@media (max-width:900px){.hiw.feat-grid{grid-template-columns:1fr}}

/* ---------- «Uch qadam» (offline-analyze): the same step cards, floor scenes ---------- */
.oa-rec{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.oa-rec__top{display:flex;align-items:center;justify-content:space-between}
.oa-rec__dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--bad)}
.oa-rec__dot i{width:8px;height:8px;border-radius:50%;background:#E5484D}
.oa-rec__top em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.oa-rec__who{display:flex;align-items:center;gap:10px}
.oa-rec__who>span:last-child{display:flex;flex-direction:column;min-width:0}
.oa-rec__who b{font-size:13.5px;font-weight:600}
.oa-rec__who>span:last-child>span{font-size:12px;color:var(--muted)}
.oa-rec__ava{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-tint);
  color:var(--brand-deep);font-family:var(--font-d);font-weight:700;font-size:14px}
.oa-rec__wave{display:flex;align-items:center;gap:3px;height:34px}
.oa-rec__wave i{flex:1;height:var(--h);border-radius:2px;background:var(--brand)}
.oa-rec__wave i:nth-child(n+17){background:rgba(11,31,25,.14)}
.oa-rec__ok{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--brand-tint);color:var(--brand-deep);font-size:12px;font-weight:700}
.oa-fields{display:flex;flex-direction:column;gap:6px}
.oa-fields div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:#fff;
  box-shadow:0 8px 20px -16px rgba(11,31,25,.6);font-size:12.5px}
.oa-fields dt{color:var(--muted);font-weight:500}
.oa-fields dd{font-weight:600;text-align:right}
.oa-acts{list-style:none;display:flex;flex-direction:column;gap:9px}
.oa-acts li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:12px;background:#fff;
  box-shadow:0 8px 20px -16px rgba(11,31,25,.6)}
.oa-acts__team{padding:3px 9px;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);font-size:11.5px;font-weight:700}
.oa-acts b{font-size:13px;font-weight:600}