/* fonts.css is linked separately in <head> so it does not sit behind this file in the request chain */

/* ============ TOKENS ============ */
:root{
  /* surfaces - cool near-white, never pure white page */
  --page:#F5F8FD; --surface:#FFFFFF; --sunk:#EDF2FA; --night:#061024; --night-2:#0C1B33;
  /* ink - deep navy, never pure black */
  --ink:#0B1B33; --ink-2:#42556F; --ink-3:#4A5D7C; --line:#E2E9F4;
  /* single locked accent */
  --accent:#1F6FEB; --accent-ink:#1557C0; --accent-soft:#E9F1FE;
  /* semantic only, never used as accent.
     Validated as a categorical set on #FFFFFF: lightness band, chroma floor,
     CVD separation, normal-vision floor and contrast all pass. */
  /* --warn sits on #F5F8FD in the comparison table: #C99A00 was 2.4:1, this is 4.6:1 */
  --ok:#0A7D57; --warn:#8A6A00; --bad:#DC2A3C;

  /* easing - exact values, no browser defaults */
  --e-out-expo:cubic-bezier(0.16,1,0.3,1);
  --e-out-quart:cubic-bezier(0.25,1,0.5,1);
  --e-in-out-expo:cubic-bezier(0.87,0,0.13,1);
  --d-fast:150ms; --d-norm:300ms; --d-slow:500ms; --d-slower:800ms; --d-slowest:1200ms;

  /* type */
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  /* sized so the longest uz word ("Menejeringiz") still fits its column - it used to overhang by 53px */
  --t-hero:clamp(2.5rem,1.55rem + 3.15vw,4.4rem);
  --t-mega:clamp(5rem,2rem + 12vw,13rem);
  --t-h2:clamp(1.85rem,1.4rem + 1.6vw,2.7rem);
  --t-h3:clamp(1.05rem,0.98rem + 0.3vw,1.25rem);
  --t-body:clamp(1rem,0.95rem + 0.22vw,1.115rem);

  --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 2px rgba(11,27,51,.05), 0 18px 44px -26px rgba(11,27,51,.28);
  --nav-h:70px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);
  font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,.mega,.plan-price,.stat b{font-family:var(--display);font-weight:700}
h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.028em;margin:0 0 20px;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance}
h3{font-family:var(--body);font-size:var(--t-h3);font-weight:700;letter-spacing:-.012em;margin:0 0 8px}
p{margin:0 0 14px;color:var(--ink-2);max-width:62ch}
.lead{font-size:clamp(1.06rem,1rem + 0.35vw,1.28rem);color:var(--ink-2);max-width:46ch}
strong{color:var(--ink);font-weight:700}
.eyebrow{font-size:.79rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);display:block;margin-bottom:14px}
.pain .eyebrow{color:#7FBAFF}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
section{padding:clamp(48px,4.2vw,68px) 0;position:relative}
/* anchored jumps must clear the sticky header, or the section eyebrow lands under it */
section[id],header{scroll-margin-top:calc(var(--nav-h) + 18px)}
.sec-head{max-width:56ch;margin-bottom:clamp(24px,2.6vw,38px)}
/* heading left, its fine print right - keeps wide sections from opening a void */
.sec-head.split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,4vw,64px);align-items:end}
.sec-head.split>div:last-child{border-top:2px solid var(--ink);padding-top:16px}
.sec-head.split .fine{font-size:.87rem;color:var(--ink-2);margin:0}
.sec-head.split .fine+.fine{margin-top:9px}

/* grain - fixed, pointer-events none, never on a scroller */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--page) 94%,transparent);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color var(--d-norm) var(--e-out-quart)}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;width:100%}
.brand{display:flex;align-items:center;gap:0;font-family:var(--display);font-weight:700;
  font-size:1.22rem;letter-spacing:-.05em}
.brand svg{margin-right:9px;flex:none}
.brand i{font-style:normal;color:var(--accent)}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{font-size:.945rem;font-weight:500;color:var(--ink-2);position:relative;
  display:flex;align-items:center;min-height:44px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);
  transition:width var(--d-norm) var(--e-out-expo)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.lang button{border:0;background:transparent;color:var(--ink-3);font-size:.78rem;font-weight:700;
  padding:7px 11px;cursor:pointer;transition:var(--d-fast)}
.lang button.on{background:var(--accent);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;
  border-radius:var(--r-pill);font-size:.95rem;font-weight:700;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:transform var(--d-fast) var(--e-out-quart),box-shadow var(--d-norm) var(--e-out-quart),
             background var(--d-fast) linear,border-color var(--d-fast) linear}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.big{padding:16px 30px;font-size:1.02rem}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.burger{display:none;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
  width:44px;height:44px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:18px;height:1.8px;
  background:var(--ink);border-radius:2px;transition:transform var(--d-norm) var(--e-out-expo)}
.burger span{top:21px}
.burger span::before{content:"";left:0;top:-6px}
.burger span::after{content:"";left:0;top:6px}

/* ============ HERO - asymmetric split ============ */
/* the panel bleeds past the right edge on purpose; clip keeps that off the scrollbar
   (overflow-x:clip, not hidden - hidden would make this a scroll container for the sticky nav) */
.hero{overflow-x:clip;padding-top:clamp(34px,4vw,58px);padding-bottom:clamp(42px,4.2vw,66px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:start}
.h-word{display:inline-block;opacity:0;transform:translateY(.5em);
  animation:wordUp var(--d-slower) var(--e-out-expo) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
.hero .lead,.hero .cta-row,.hero .hero-note{opacity:0;transform:translateY(18px);
  animation:fadeUp var(--d-slower) var(--e-out-expo) forwards}
.hero .lead{animation-delay:.42s}
.hero .cta-row{animation-delay:.56s}
.hero .hero-note{animation-delay:.68s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-note{margin-top:18px;font-size:.87rem;color:var(--ink-3)}

/* trust row: measured numbers, not adjectives - every one has a source in context.md */
.trust{display:flex;flex-wrap:wrap;gap:10px 30px;margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--line)}
.trust>div{display:flex;flex-direction:column;gap:3px}
.trust dt{font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.04em;
  line-height:1;color:var(--ink)}
.trust dt em{font-style:normal;font-size:.62em;color:var(--ink-3);letter-spacing:-.02em}
.trust dd{margin:0;font-size:.79rem;color:var(--ink-3);max-width:19ch;line-height:1.35}
.works{margin:16px 0 0;font-size:.85rem;color:var(--ink-3)}
.works b{color:var(--ink-2);font-weight:600}

/* hero visual: photo + live chat card overlapping (bleeding, asymmetric) */
.shot{position:relative;opacity:0;transform:translateY(26px) scale(.985);
  animation:fadeUp var(--d-slowest) var(--e-out-expo) .3s forwards}
.shot-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--night);
  box-shadow:0 40px 80px -46px rgba(6,16,36,.7)}
.shot-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transform:scale(1.02)}
.shot-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(31,111,235,.18),transparent 46%,rgba(6,16,36,.5))}
/* panel screenshot: crop from the top so the KPI row stays in frame, and no photo tint over UI */
/* the crop used to end on a hard cut through a timeline row; now it dissolves into the frame */
.shot-img.app img{object-position:top;transform:none;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);
  mask-image:linear-gradient(180deg,#000 76%,transparent)}
.shot-img.app::after{background:linear-gradient(180deg,transparent 62%,rgba(6,16,36,.28))}
/* bottom-left = the empty foot of the dark sidebar. top-left is the avatar and agency name,
   top-right the status chip, bottom-right is where .shot-card hangs. */
.shot-clock{position:absolute;bottom:16px;left:16px;z-index:3;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:.82rem;color:#fff;letter-spacing:.02em;
  background:rgba(6,16,36,.5);backdrop-filter:blur(8px);padding:7px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14)}
.pulse{width:7px;height:7px;border-radius:50%;background:#5FA5FF;box-shadow:0 0 0 0 rgba(95,165,255,.6);
  animation:pulse 2.4s var(--e-out-quart) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,165,255,.55)}70%{box-shadow:0 0 0 11px rgba(95,165,255,0)}100%{box-shadow:0 0 0 0 rgba(95,165,255,0)}}
/* the card hangs below the photo and sets the hero's bottom baseline against the CTA row */
/* the panel is the strongest argument above the fold; boxed into its column its UI text turns
   into texture, so on desktop it runs out to the viewport edge and gains ~20% */
@media (min-width:1025px){
  /* Chiqib turish EKRAN chetigacha, undan nariga emas. Ilgari `min(-140px, ...)`
     edi: 140px eng KAMIDA chiqsin degani. 1366 va 1280 px li ekranlarda (O'zbekistonda
     eng ko'p uchraydigan noutbuk) panel va uning yonidagi «19 ta suhbat» kartasi
     shu 140px ichida qirqilib qolardi. Endi chiqish ustun chetidan ekran chetigacha
     bo'lgan masofadan oshmaydi va har kenglikda ~15-21px hoshiya qoladi. O'ng burchak
     ham yumaloq qilindi: rasm endi ekran chetiga tegmaydi, tekis qirra sinishday
     ko'rinardi. */
  .shot{margin-right:calc(-1 * max(14px, 50vw - 610px))}
}
.shot-card{position:absolute;right:-14px;bottom:-74px;width:min(300px,74%);background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:15px 16px;box-shadow:var(--shadow)}
/* Bu qoida YUQORIDAGI media blokda turardi, ya'ni `.shot-card` ning o'zidan OLDIN —
   bir xil kuchda bo'lgani uchun keyingi `right:-14px` uni bosib ketardi va karta
   rasm bilan birga ekrandan chiqib qirqilardi. Endi kartaning cheti rasm cheti
   bilan emas, o'qiladigan masofa bilan o'lchanadi. */
@media (min-width:1025px){
  .shot-card{right:clamp(46px,5.4vw,112px)}
}
.hero-grid>div:first-child{padding-bottom:clamp(0px,1.6vw,26px)}
.shot-card .k{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.shot-card .v{font-family:var(--display);font-size:1.9rem;letter-spacing:-.04em;margin:5px 0 2px;line-height:1}
.shot-card .s{font-size:.83rem;color:var(--ink-2);margin:0}

/* «rejada» — hali qurilmagan imkoniyat. Sotuv sahifasi shartnoma suhbatida
   o'qiladi: bugun ishlaydigan narsa bilan keyin keladiganini ajratib turadi. */
.soon{display:inline-block;vertical-align:middle;margin-left:7px;font-style:normal;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;white-space:nowrap;
  color:var(--warn,#9a6216);background:color-mix(in srgb,var(--warn,#c98a2e) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--warn,#c98a2e) 30%,transparent)}

/* ============ SEGMENT STRIP ============ */
.strip{border-block:1px solid var(--line);background:var(--surface);overflow:hidden}
.strip-in{display:flex;align-items:center;gap:26px;padding-block:22px}
.strip-lbl{flex:none;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.strip-vp{flex:1;min-width:0;display:flex;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
.strip-track{flex:none;display:flex;animation:marq 38s linear infinite}
.strip-track b{flex:none;margin-right:clamp(28px,3.4vw,58px);
  font-family:var(--display);font-size:clamp(1rem,.88rem + .4vw,1.22rem);letter-spacing:-.03em;
  color:var(--ink);font-weight:600;opacity:.78;transition:opacity var(--d-norm) var(--e-out-quart)}
.strip-track b:hover{opacity:1}
@keyframes marq{to{transform:translateX(-100%)}}
.strip-vp:hover .strip-track{animation-play-state:paused}

/* ============ PAIN - data statement, mega number ============ */
.pain{background:var(--night);color:#EAF1FB;overflow:hidden}
.pain h2{color:#fff}
.pain p{color:#B4C6DD}
.pain{padding-bottom:clamp(46px,4.2vw,66px)}
.pain-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,76px);align-items:start}
/* the mega number wipes up from a clip instead of the page-wide fade-up */
.mega{font-size:var(--t-mega);line-height:.82;letter-spacing:-.055em;color:#fff;margin:0;
  clip-path:inset(0 0 100% 0)}
.rv.in .mega{clip-path:inset(0 0 -14% 0);transition:clip-path var(--d-slowest) var(--e-out-expo) 120ms}
.mega em{font-style:normal;font-size:.28em;color:#5FA5FF;letter-spacing:-.02em;vertical-align:super}
.mega-cap{font-size:1.02rem;color:#B4C6DD;max-width:26ch;margin-top:18px}
/* ---- night rail: the signature scene, driven by scroll position ---- */
.nrail{list-style:none;margin:38px 0 0;padding:0 0 0 26px;position:relative;counter-reset:n}
.nrail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:rgba(255,255,255,.13)}
.nrail::after{content:"";position:absolute;left:5px;top:6px;width:1.5px;height:var(--nr,0%);
  background:linear-gradient(180deg,#FF6B7A,#FF6B7A 78%,#7FBAFF)}
.nrail li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;opacity:.38;transition:opacity var(--d-slow) var(--e-out-quart)}
.nrail li.lit{opacity:1}
.nrail li::before{content:"";position:absolute;left:-25px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--night);border:1.5px solid rgba(255,255,255,.3);
  transition:background var(--d-norm) linear,border-color var(--d-norm) linear}
.nrail li.lit::before{background:#FF6B7A;border-color:#FF6B7A}
.nrail li.dawn.lit::before{background:#7FBAFF;border-color:#7FBAFF}
.nrail b{font-family:var(--display);font-size:.8rem;letter-spacing:-.02em;color:#fff}
.nrail span{font-size:.88rem;color:#B4C6DD;line-height:1.4}
.nrail li.dawn span{color:#7FBAFF}

.bars{display:flex;flex-direction:column;gap:15px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:baseline}
.bar-row .lbl{font-size:.95rem;color:#C9D8EC}
.bar-row .num{font-family:var(--display);font-size:1.02rem;letter-spacing:-.03em;color:#fff}
.bar-track{grid-column:1/-1;height:8px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:4px;background:#3D82F0;
  transition:width var(--d-slowest) var(--e-out-expo)}
.bar-row:first-child .bar-fill{background:#FF6B7A}
.bar-row:first-child .num{color:#FF9BA6}

/* ============ CAPS - one uniform grid instead of four bespoke sections ============ */
/* keeps the ruled-index language of the pricing table: a rule on top, no white boxes */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,32px) clamp(24px,3vw,44px)}
.cap{border-top:2px solid var(--line);padding:16px 0 0;transition:border-color var(--d-norm) linear}
.cap:hover{border-top-color:var(--accent)}
.cap .pic{display:block;width:24px;height:24px;color:var(--accent);margin-bottom:14px}
.cap h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:7px}
.cap p{font-size:.97rem;margin:0;color:var(--ink-2);max-width:39ch}
/* the CRM names ride inside their card, so integrations need no section of their own */
.cap .names{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.cap .names span{font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);
  background:var(--sunk);border-radius:var(--r-pill);padding:4px 10px}
.cap a{color:var(--accent-ink);font-weight:600}
.cap a:hover{text-decoration:underline}

/* ============ CHAT ============ */
/* the phone is pinned while the three scenarios scroll past it - the one staged scene */
.chat-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,72px);align-items:stretch}
/* the tinted stage owns the full column height so the pinned phone never reads as a void */
.phone-col{grid-column:2;grid-row:1/-1;background:var(--sunk);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,44px) clamp(20px,2.4vw,34px);
  display:flex;flex-direction:column}
.scenes{display:flex;flex-direction:column}
.scene{display:block;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px) 0;cursor:pointer;opacity:.32;transform:translateY(8px);
  transition:opacity var(--d-slow) var(--e-out-quart),transform var(--d-slow) var(--e-out-expo)}
.scene.on{transform:none}
/* the scenario's own lines settle in one after another, not as one block fade */
.scene b,.scene-s,.scene-out{transition:opacity var(--d-slow) var(--e-out-quart),
  transform var(--d-slow) var(--e-out-expo)}
.scene:not(.on) b{transform:translateY(4px)}
.scene:not(.on) .scene-s{transform:translateY(6px)}
.scene:not(.on) .scene-out{transform:translateY(8px)}
.scene:first-child{border-top:0;padding-top:0}
/* enough travel for the pinned phone to mean something, tight enough that the text column
   never shows half a screen of nothing: one scenario ≈ 40vh */
@media (min-width:1025px){
  .scene{min-height:36vh;display:flex;flex-direction:column;justify-content:center}
  /* trailing run-out so the phone stays pinned through the whole of scene 03, not just its start */
}
.scene.on{opacity:1}
.scene-n{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.02em;color:var(--ink-3);
  margin-bottom:12px}
.scene.on .scene-n{color:var(--accent)}
.scene b{display:block;font-family:var(--display);font-size:clamp(1.15rem,1rem + .55vw,1.6rem);
  letter-spacing:-.035em;line-height:1.1;margin-bottom:10px;text-wrap:balance}
.scene-s{display:block;font-size:1rem;color:var(--ink-2);line-height:1.55;max-width:44ch}
.scene-out{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--ink-3);
  border-left:2px solid var(--line);padding-left:10px}
.scene.on .scene-out{color:var(--accent-ink);border-left-color:var(--accent)}
/* the wrap fills the column above the note, so the pinned phone can never ride over it */
.phone-wrap{flex:1 1 auto;min-height:0}
/* the note belongs to all three scenes, not to the phone - and out here it cannot be covered by it */
.tab-note{grid-column:1;margin-top:clamp(26px,3vw,42px);padding-top:22px;
  border-top:1px solid rgba(11,27,51,.12);display:flex;flex-wrap:wrap;gap:18px 48px;
  align-items:baseline;justify-content:space-between}
.tab-note p{flex:1 1 420px;max-width:74ch;font-size:.87rem;color:var(--ink-3);margin:0}
.tab-note-row{display:flex;gap:34px}
.tab-note-row span{display:block}
.tab-note-row b{display:block;font-family:var(--display);font-size:1.32rem;letter-spacing:-.04em;line-height:1}
.tab-note-row i{display:block;margin-top:5px;font-style:normal;font-size:.8rem;color:var(--ink-3)}
/* centred in the viewport while pinned, so the staged panel breathes above AND below the phone
   instead of leaving one 270px grey slab under it */
.phone{position:sticky;top:max(calc(var(--nav-h) + 22px),calc(50vh - 250px));
  background:var(--night);border-radius:30px;padding:12px;box-shadow:0 44px 90px -50px rgba(6,16,36,.75);
  max-width:392px;margin-inline:auto;width:100%}
/* fixed frame, newest message at the bottom: the pinned phone must not jump 112px between
   scenes, and a chat that fills from the bottom never reads as an empty box */
.phone-in{position:relative;background:var(--surface);border-radius:22px;height:440px;overflow:hidden;
  padding:16px 15px;display:flex;flex-direction:column;gap:9px}
/* older messages fade out under the header instead of being cut with a hard edge */
.phone-in::after{content:"";position:absolute;left:0;right:0;top:60px;height:34px;pointer-events:none;
  background:linear-gradient(180deg,var(--surface),transparent)}
.ph-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;
  border-bottom:1px solid var(--line);margin-bottom:auto}
.ph-bar b{font-size:.92rem}
.ph-bar span{font-size:.76rem;color:var(--ink-3)}
.ph-meta{display:flex;align-items:center;gap:12px}
.replay{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;
  transition:border-color var(--d-fast) linear,color var(--d-fast) linear}
.replay:hover{border-color:var(--accent);color:var(--accent)}
/* CSS-drawn replay glyph: an open circle with an arrowhead */
.replay span{width:10px;height:10px;border:1.6px solid currentColor;border-radius:50%;
  border-right-color:transparent;transform:rotate(-40deg)}
.msg{max-width:85%;padding:10px 14px;border-radius:17px;font-size:.9rem;line-height:1.45;
  opacity:0;transform:translateY(9px) scale(.98);
  transition:opacity var(--d-slow) var(--e-out-quart),transform var(--d-slow) var(--e-out-expo)}
.msg.in{opacity:1;transform:none}
.msg.them{background:var(--sunk);border-bottom-left-radius:6px;align-self:flex-start}
.msg.us{background:var(--accent);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.sys{align-self:center;background:transparent;border:1px dashed var(--line);color:var(--ok);
  font-size:.8rem;font-weight:700;border-radius:var(--r-pill);padding:7px 15px}
/* the scene claims "the agent reads pictures", so the attachment has to look like a price
   screenshot worth reading - a blank grey block read as a broken asset */
.msg .att{display:block;position:relative;margin-top:8px;height:82px;border-radius:9px;
  background:#fff;border:1px solid rgba(11,27,51,.14);overflow:hidden}
.msg .att::before{content:"";position:absolute;left:11px;top:12px;width:62%;height:7px;border-radius:2px;
  background:rgba(11,27,51,.34);box-shadow:0 15px 0 -1px rgba(11,27,51,.18),0 28px 0 -1px rgba(11,27,51,.18)}
.msg .att::after{content:"1 800 $";position:absolute;left:11px;bottom:9px;
  font-family:var(--display);font-size:.86rem;letter-spacing:-.035em;color:var(--ink)}
.typing{align-self:flex-end;display:flex;gap:4px;padding:13px 16px;background:var(--accent);
  border-radius:17px;border-bottom-right-radius:6px;opacity:0;transition:opacity var(--d-norm) linear}
.typing.in{opacity:1}
.typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:bob 1.15s var(--e-in-out-expo) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,58%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ============ RESULT - comparison, second dark beat of the page ============ */
.result{background:var(--night-2);color:#EAF1FB}
.result h2{color:#fff}
.result p,.result .fine{color:#B4C6DD}
.result .sec-head.split>div:last-child{border-top-color:#5FA5FF}
.result .cmp{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11);box-shadow:none}
.result .col-head{color:#A8BFDA}
/* axis labels are data, not decoration: #8AA3C4 was 2.59:1 on the dark panel */
.result .plot-cap{color:#A8BFDA}
.result .col-head.hi{color:#7FBAFF}
.result .plot.a i{background:rgba(255,255,255,.17)}
.result .plot i.peak::after{color:#C9D8EC}
.result .plot.b i{background:#3D82F0}
.result .plot.b i.peak{background:#7FBAFF}
.result .plot.b i.peak::after{color:#7FBAFF}

.result .cmp-foot{border-top-color:rgba(255,255,255,.12)}
.result .stat b{color:#fff}
.result .stat>span{color:#8AA3C4}
.result .stat.hi b{color:#7FBAFF}
/* the red that marks loss in the pain section closes the loop here at zero missed */
/* zero missed nights is the win of the whole section - red would read as the problem */
.result .stat.zero b{color:#5FD3A6}


.cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);align-items:end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow)}
.col-head{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:16px}
.col-head.hi{color:var(--accent)}
/* the hairline is the shared ceiling (61/day) - it makes "same scale" visible without a grid */
.plot{display:flex;align-items:flex-end;gap:7px;height:clamp(130px,14vw,182px);
  border-top:1px dashed var(--line)}
.result .plot{border-top-color:rgba(255,255,255,.16)}
/* scroll drives scaleY, so no transition - it must track the finger, and no layout per frame */
.plot i{flex:1;border-radius:5px 5px 0 0;height:0;transform:scaleY(0);transform-origin:bottom}
.no-js .plot i{transform:none}
.plot.a i{background:#D6E0EE}
.result .plot.a i{background:#7E93B0}
.plot.b i{background:#3D82F0}
/* selective direct label on the peak bar, so the shared scale is readable without a grid */
.plot i.peak{position:relative}
.plot i.peak::after{content:attr(data-v);position:absolute;left:50%;bottom:100%;margin-bottom:7px;
  transform:translateX(-50%);font-family:var(--display);font-size:.78rem;letter-spacing:-.02em;color:var(--ink)}
.plot.b i.peak{background:#1F6FEB}
.plot.b i.peak::after{color:var(--accent)}
.plot-cap{display:flex;justify-content:space-between;margin-top:12px;font-size:.8rem;color:var(--ink-3)}
.cmp-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:20px;
  display:flex;gap:clamp(18px,4vw,54px);flex-wrap:wrap}
.stat b{display:block;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.3rem);letter-spacing:-.045em;line-height:1}
.stat>span{display:block;margin-top:6px;font-size:.86rem;color:var(--ink-3)}
.stat.hi b{color:var(--accent)}

/* ============ PRICING ============ */
/* the recommended plan is wider and taller, not just outlined */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(26px,3.6vw,58px);align-items:stretch}
/* plans rise one after another instead of the page-wide fade */
.plans .plan{opacity:0;transform:translateY(26px)}
.rv.in .plan,.no-js .plan{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--e-out-quart),transform var(--d-slower) var(--e-out-expo),
             box-shadow var(--d-slow) var(--e-out-quart)}
.rv.in .plan:nth-child(2){transition-delay:110ms}
.rv.in .plan:nth-child(3){transition-delay:220ms}
/* priced as an editorial index, not three stock cards: a rule on top, material
   difference on the recommended column instead of a badge-and-border outline */
.plan{background:none;border:0;border-top:2px solid var(--line);border-radius:0;padding:22px 0 0;
  display:flex;flex-direction:column;position:relative;box-shadow:none;
  transition:border-top-color var(--d-norm) linear}
.plan:hover,.rv.in .plan:hover{border-top-color:var(--ink)}
.plan:hover .btn{border-color:var(--ink)}
.plan.hi:hover .btn{background:var(--accent-ink);border-color:var(--accent-ink)}
.plan.hi{background:var(--sunk);border-top-color:var(--accent);border-top-width:3px;
  border-radius:0 0 var(--r-lg) var(--r-lg);padding:22px 26px 28px;margin:0 -26px}
.plan.hi:hover,.rv.in .plan.hi:hover{border-top-color:var(--accent-ink)}
/* the tag rides the accent rule so all three plan titles keep one baseline */
.plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.68rem;
  font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
.plan-price{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem);letter-spacing:-.05em;line-height:1;margin:14px 0 4px}
.plan-price small{font-family:var(--body);font-size:.86rem;font-weight:500;color:var(--ink-3);
  letter-spacing:0;margin-left:.42em}
.plan .usd{font-size:.83rem;color:var(--ink-3);margin:0 0 20px}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{font-size:.93rem;color:var(--ink-2);padding-left:24px;position:relative;line-height:1.5}
.plan li::before{content:"";position:absolute;left:3px;top:.42em;width:5px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(42deg)}
.plan li b{color:var(--ink)}
.plan .btn{margin-top:auto}

/* ============ SHOTS - three panel screens, cropped to their top ============ */
/* three tiles across meant a 2328px screenshot rendered into 369px - grey noise, not proof.
   the lead screen now runs full width, the other two at half. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(28px,3vw,42px)}
.sht{display:block}
.sht:first-child{grid-column:1/-1}
.sht:first-child img{aspect-ratio:21/9}
.sht img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);transition:transform var(--d-norm) var(--e-out-quart),
    box-shadow var(--d-norm) var(--e-out-quart)}
.sht:hover img{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,27,51,.05),0 26px 50px -28px rgba(11,27,51,.4)}
.sht b{display:block;margin-top:14px;font-size:1rem;letter-spacing:-.012em}
.sht span{display:block;margin-top:4px;font-size:.95rem;color:var(--ink-3);line-height:1.45}
.shots-more{margin:16px 0 0;font-size:.93rem}
.shots-more a{color:var(--accent-ink);font-weight:600}
.shots-more a:hover{text-decoration:underline}

/* ============ VS - what each tool costs and does ============ */
/* ============ Narx ostidagi tanlov jadvali ============ */
/* Uch ustun: parametr | ikkinchi menejer | Lidra. Telefonda ustunlar sig'maydi,
   shuning uchun har qator kartaga aylanadi va ustun nomi qator ichida chiqadi (.pl). */
.pick{margin-top:clamp(32px,3.4vw,50px);border-top:2px solid var(--ink);padding-top:20px}
.pick h3{font-family:var(--display);font-size:clamp(1.05rem,.98rem + .35vw,1.28rem);
  letter-spacing:-.03em;margin:0 0 16px}
.pick table{width:100%;border-collapse:collapse;font-size:.95rem}
.pick th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:0 16px 11px 0;white-space:nowrap}
.pick th.w{color:var(--accent)}
.pick td{padding:12px 16px 12px 0;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.pick td:first-child{color:var(--ink);font-weight:600;width:30%}
.pick td.w{color:var(--ink);font-weight:700;background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent);padding-left:13px;border-top-color:var(--accent)}
.pick .pl{display:none}
.pick .fine{font-size:.88rem;color:var(--ink-3);margin:16px 0 0;max-width:62ch}

@media (max-width:768px){
  .pick table,.pick tbody,.pick tr,.pick td{display:block}
  .pick thead{display:none}
  .pick tr{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
    padding:13px 16px;margin-bottom:9px}
  .pick td{border:0;padding:0}
  .pick td:first-child{width:auto;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:9px}
  .pick td.w{background:none;box-shadow:none;padding-left:0;
    border-top:1px solid var(--accent);padding-top:9px;margin-top:9px}
  .pick .pl{display:block;font-style:normal;font-size:.78rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
  .pick td.w .pl{color:var(--accent)}
}

/* ============ FAQ ============ */
/* one column: the accordion carries the answers, the ask-us line sits under it as a rule */
/* left-aligned and two-column: centred it broke the page rail, and single-column left 420px of
   white to its right */
.faq-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,3.4vw,56px);align-items:start}
/* the grid gap already separates the heading from the row; its own margin doubled it */
.faq-grid>.sec-head{grid-column:1/-1;margin-bottom:0}
/* the right column of the FAQ row: the question list carries the page, this closes it */
.faq-aside{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  background:var(--sunk);border-radius:var(--r-lg);padding:clamp(22px,2.2vw,30px)}
.faq-aside h3{margin:0 0 6px}
.faq-aside p{font-size:1rem;margin:0;max-width:38ch}
.faq-aside .btn{flex:none}
.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:17px 24px;font-weight:700;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:18px;transition:background var(--d-fast) linear}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--sunk)}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);
  transition:transform var(--d-norm) var(--e-out-expo)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .ans{padding:15px 24px 19px;color:var(--ink-2);font-size:1rem;max-width:70ch}

/* ============ CTA ============ */
/* full-bleed dark close: the card chrome comes off, the section itself carries the night */
.band{background:var(--night);color:#fff}
.band .cta{background:none;padding:0;border-radius:0}
.cta{background:var(--night);color:#fff;border-radius:var(--r-lg);padding:clamp(30px,4.4vw,60px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:center}
.cta h2{color:#fff}
.cta p{color:#B4C6DD}
.cta .cta-note{color:#8FA6C4;font-size:.9rem}
.result .sec-head.split .fine{font-size:.95rem;color:#D2E0F2}
.form{display:grid;gap:12px}
/* form fields slide in from the right, distinct from the page fade-up */
.field,.form .btn{opacity:0;transform:translateX(22px)}
.rv.in .field,.rv.in .form .btn,.no-js .field,.no-js .form .btn{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--e-out-quart),transform var(--d-slower) var(--e-out-expo)}
.rv.in .field:nth-child(2){transition-delay:90ms}
.rv.in .field:nth-child(3){transition-delay:180ms}
.rv.in .form .btn{transition-delay:270ms}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:.78rem;color:#B4C6DD;font-weight:600}
.field input,.field select{padding:14px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--body);font-size:.98rem}
.field.sel{position:relative}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.field.sel::after{content:"";position:absolute;right:18px;bottom:20px;width:9px;height:9px;pointer-events:none;
  border-right:2px solid #7FBAFF;border-bottom:2px solid #7FBAFF;transform:rotate(45deg) translateY(-2px)}
.field input::placeholder{color:#7089A8}
.field input:focus,.field select:focus{outline:none;border-color:#5FA5FF;background:rgba(255,255,255,.1)}
.field select option{color:#0B1B33}
.form .btn{margin-top:6px}
.done{font-size:.9rem;color:#6FE0B0;margin:0}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:40px 0 34px;background:var(--surface)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.f-grid h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:700}
.f-grid a{display:block;font-family:var(--body);font-weight:500;font-size:.94rem;letter-spacing:normal;color:var(--ink-2);padding:5px 0;margin-bottom:2px;transition:color var(--d-fast) linear}
.f-grid a:hover{color:var(--accent)}
.f-grid.slim{grid-template-columns:1.6fr 1fr 1fr 1fr}
.f-bot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-3)}
.f-legal{display:flex;gap:18px;flex-wrap:wrap}
.f-legal a{color:var(--ink-3);transition:color var(--d-fast) linear}
.f-legal a:hover{color:var(--accent)}

/* ============ DOC - oferta / maxfiylik ============ */
.doc{max-width:760px;margin:0 auto}
.doc .doc-date{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.doc h2{font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);margin:38px 0 12px}
.doc h2:first-of-type{margin-top:0}
.doc p,.doc li{color:var(--ink-2);max-width:none}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.doc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:.95rem}
.doc dt{color:var(--ink-3)}
.doc dd{margin:0;color:var(--ink)}
/* unfilled requisites must be visible, not silently blank */
.doc .todo{background:#FFF4CE;color:#6B5200;border-radius:5px;padding:1px 7px;font-weight:600;font-size:.9em}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity 420ms var(--e-out-quart),
  transform 450ms var(--e-out-expo)}
/* no-JS and hard-failure safety: content must never stay invisible */
.no-js .rv,.rv.force{opacity:1;transform:none}
.no-js .mega{clip-path:none}

/* touch: every control clears the 44px target */
@media (pointer:coarse){
  .lang button{min-height:44px;padding:7px 14px}
  .replay{min-height:44px;padding:0 15px}
  .nav-links a{padding:10px 0}
}
@media (min-width:901px){ h2{letter-spacing:-.025em} }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero-grid,.pain-grid,.chat-wrap,.cta,.sec-head.split{grid-template-columns:1fr}
  /* single column here: grid-column:2 would open an implicit second track */
  .phone-col{grid-column:1;grid-row:auto}
  .phone{position:static}
  .scene{opacity:1}
  .sec-head.split{gap:26px}
  .caps{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .shot-card{position:static;width:100%;margin-top:16px}
}
@media (max-width:768px){
  section{padding:clamp(52px,9vw,72px) 0}
  /* the highlighted plan sits inside the gutter on small screens, not past it */
  .plan.hi{margin:0;padding:26px 20px 28px;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .chat-wrap{gap:34px}
  .phone{position:static}
  /* stacked and not pinned - nothing to keep steady, so let the whole thread show */
  .phone-in{height:auto;min-height:404px}
  .phone-in::after{display:none}
  .scene{opacity:1;border-top:1px solid var(--line);padding:20px 0}
  .scene-s{max-width:none}
  .nav-links{display:none}
  /* full-width opaque panel with hairlines, its own CTA, and the page dimmed behind it */
  /* .nav has backdrop-filter, so it is the containing block even for position:fixed - left/right:0
     landed 8px short of the viewport. 100vw is measured against the viewport, not the nav. */
  .nav-links.open{display:flex;position:fixed;top:var(--nav-h);left:0;width:100vw;flex-direction:column;
    gap:0;background:var(--page);border-bottom:1px solid var(--line);padding:8px 20px 22px;
    box-shadow:0 26px 44px -22px rgba(11,27,51,.42);z-index:51}
  .nav-links.open a{border-bottom:1px solid var(--line)}
  .nav-links.open a:last-child{border-bottom:0}
  .nav-links.open .m-only{display:inline-flex;align-self:stretch;justify-content:center;margin-top:16px}
  body.menu-open::before{content:"";position:fixed;inset:0;z-index:49;
    background:rgba(6,16,36,.45);backdrop-filter:blur(2px)}
  .burger{display:block}
  /* the mobile source is already an art-directed crop; a second 16/10 crop on top of it cut
     words off both edges */
  .shot-img.app img{aspect-ratio:873/491}
  .caps,.shots{grid-template-columns:1fr}
  /* a nine-screen desktop panel squeezed into 350px is grey noise, not proof. on a phone the
     three screens are a list and the live demo is one tap away. */
  .shots{gap:0;border-top:1px solid var(--line)}
  .sht{padding:16px 0;border-bottom:1px solid var(--line)}
  .sht img{display:none}
  .sht b{margin-top:0}
  .shots-more a{display:inline-block;margin-top:6px;padding:12px 20px;border-radius:var(--r-pill);
    background:var(--ink);color:var(--page)}
  .trust{gap:14px 24px}
  .cmp{grid-template-columns:1fr}
  .f-grid,.f-grid.slim{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-aside .btn{width:100%}
  /* stacked, the phone sits under the list, so scrolling can't drive it - tapping does,
     and the scenarios have to look like the buttons they are */
  .scene{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:10px;
    background:var(--surface)}
  .scene.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  .scenes{margin-bottom:6px}
  /* the fields slide in from the right on desktop; at full-gutter width that 22px push was
     the source of the 2px horizontal overflow, so on a phone they rise instead */
  .field,.form .btn{transform:translateY(16px)}
  /* 44px touch targets on a phone, regardless of what the pointer media query reports */
  .lang button{min-height:44px;min-width:44px}
  .replay{min-height:44px;padding:0 16px}
  /* inline-block ran them together into "ImkoniyatlarNarxlarUlash" - they are a column */
  .f-grid>div{display:flex;flex-direction:column;align-items:flex-start}
  .f-grid a,.f-legal a{display:block;padding:11px 0;margin:0}
  /* inline links keep their line box but get a 44px tall hit area via vertical padding */
  .cap p a,.plan li a,.ans a,.fine a{padding:11px 0}
  .wrap{padding:0 20px}
}
.mcta{display:none}
@media (max-width:600px){
  h1{line-height:1.06;letter-spacing:-.02em}
  .mcta{display:flex;align-items:center;justify-content:center;position:fixed;left:16px;right:16px;bottom:16px;
    z-index:55;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;padding:15px 20px;
    border-radius:var(--r-pill);box-shadow:0 14px 34px -12px rgba(31,111,235,.55);
    transform:translateY(140%);transition:transform var(--d-slow) var(--e-out-expo)}
  body.past-hero .mcta{transform:none}
  /* scrim under the floating pill. it must be its OWN layer at z-index 54: as .mcta::before it
     painted over the button's blue fill and under its white label - white text on white. */
  body.past-hero::after{content:"";position:fixed;left:0;right:0;bottom:0;height:72px;z-index:54;
    background:linear-gradient(180deg,transparent,var(--page) 80%);pointer-events:none}
  .f-bot{flex-direction:column;gap:6px}
  footer{padding-bottom:112px}
  /* label moves above the rail instead of disappearing */
  .strip-in{display:block}
  .strip-lbl{display:block;margin-bottom:12px}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  /* nothing under 13px on a phone: eyebrows, stat captions and form labels all clear the floor */
  .eyebrow,.trust dd,.field span,.stat>span,.sht span,.f-grid h4,.col-head{font-size:.82rem}
}
@media (max-width:520px){
  .cta-row .btn{flex:1 1 100%}
  .cmp-foot{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
  .strip b{font-size:1rem}
  .tab-note-row{gap:24px}
  /* nav row must never overflow: hero CTA carries the action below the fold line */
  .nav-right .btn.pri{display:none}
  .nav .wrap{gap:12px}
  .lang button{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv,.h-word,.hero .lead,.hero .cta-row,.hero .hero-note,.shot,.msg,.typing{opacity:1!important;transform:none!important}
  .mega{clip-path:none!important}
  .plan,.field,.form .btn{opacity:1!important;transform:none!important}
  .strip-track{animation:none!important}
  .nrail li{opacity:1!important}
  body.past-hero .mcta{transform:none!important}
  html{scroll-behavior:auto}
  .grain{display:none}
}

/* ============ NAV: KIRISH (tizimga kirish) ============ */
/* two classes, so it outranks `.nav-links a{display:flex}` from the touch-target rule */
.nav-links .m-only{display:none}
.brand{min-height:44px}
.nav-links .enter{font-size:.78rem;font-weight:800;letter-spacing:.15em;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:10px;padding:7px 14px;margin-left:6px;
  transition:background var(--d-fast,150ms) ease,color var(--d-fast,150ms) ease}
.nav-links .enter::after{display:none}
.nav-links .enter:hover{background:var(--ink);color:var(--page)}

/* ============ ULASH ustasi ============ */
.wiz{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(30px,4.5vw,70px);align-items:start}
.wiz-rail h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.wiz-steps{list-style:none;margin:26px 0;padding:0;display:grid;gap:0}
.wiz-steps li{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line);color:var(--ink-3)}
.wiz-steps b{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.8rem;
  transition:all var(--d-slow) var(--e-out-expo)}
.wiz-steps li.on{color:var(--ink)}
.wiz-steps li.on b{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.wiz-steps li.done{color:var(--ink-2)}
.wiz-steps li.done b{background:var(--accent);border-color:var(--accent);color:#fff}
.wiz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:clamp(24px,3.4vw,42px)}
.wpane{display:none}
.wpane.on{display:block;animation:fadeUp .5s var(--e-out-quart) both}
.wpane h2{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:16px}
.wpane .field{display:block;margin-top:16px}
.wpane .field span{display:block;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.wpane .field input,.wpane .field select{width:100%;border:1.5px solid var(--line);border-radius:12px;
  background:var(--page);padding:13px 15px;font:inherit;color:var(--ink)}
.wpane .field input:focus,.wpane .field select:focus{outline:none;border-color:var(--accent)}
.wnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
/* Telefonda ikki tugma yonma-yon sig'masdi va SAHIFA yonga surilib ketardi —
   ulash sehrgari aynan telefondan to'ldiriladi. Tugma ichki bo'shlig'i qisqaradi,
   sig'masa pastga tushadi. */
@media (max-width:480px){
  .wnav{gap:10px;flex-wrap:wrap}
  .wnav .btn{padding-inline:16px;flex:1 1 auto;min-width:0;justify-content:center;text-align:center}
}
.werr{color:#C5443A;font-size:.9rem;margin-top:14px}
.wok{color:#0E8A64;font-weight:600;font-size:.95rem;margin-top:14px}
.howto{margin:18px 0 22px;padding-left:20px;display:grid;gap:10px;font-size:.97rem}
.howto code.copy{cursor:pointer;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
  padding:3px 10px;font-size:.9em;white-space:nowrap;transition:all .15s ease}
.howto code.copy:hover{border-color:var(--accent);color:var(--accent)}
.howto code.copy.did{background:var(--accent);border-color:var(--accent);color:#fff}
.howto code.copy.did::after{content:" ✓"}
/* BotFather suhbat maketi */
.bf{border:1px solid var(--line);border-radius:14px;background:var(--page);padding:14px 16px;max-width:440px}
.bf-h{display:flex;align-items:baseline;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.bf-h .mono{font-size:.72rem;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.bf-m{max-width:86%;background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 12px 4px;
  padding:8px 12px;font-size:.88rem;margin-bottom:8px}
.bf-m.them{margin-left:auto;background:#E4EEFF;border-color:#CCDFFC;border-radius:12px 12px 4px 12px}
.bf-m.ok{border-color:#BFE3D3;background:#F0FAF5}
.wsum{margin:14px 0 20px;display:grid;gap:0}
.wsum div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.wsum dt{color:var(--ink-3);font-size:.9rem}
.wsum dd{font-weight:600;text-align:right}
.wdone-mark{width:58px;height:58px;border-radius:50%;background:#0E8A64;color:#fff;display:flex;
  align-items:center;justify-content:center;margin-bottom:18px}
.wdone-mark svg{width:30px;height:30px}
/* 1fr = minmax(auto,1fr): min-content'dan kichrayolmaydi, shuning uchun qadamlar
   qatori telefonda ustunni kengaytirib, butun sahifaga yon skroll berardi (390 → 410px). */
@media (max-width:900px){ .wiz{grid-template-columns:minmax(0,1fr)} .wiz-steps{display:flex;gap:14px;flex-wrap:wrap}
  .wiz-steps li{border-top:0;padding:6px 0} .wiz-steps li span{display:none} }
/* Ustadagi maydonlar darhol ko'rinadi: .field ning opacity:0 bazasi faqat
   bosh sahifadagi .rv reveal uchun edi */
.wpane .field,.wpane .btn{opacity:1;transform:none}
/* Katta agentlik bloki */
.wbig{margin-top:22px;border:1.5px solid var(--accent);border-radius:14px;background:var(--sunk);padding:18px 20px}
.wbig b{display:block;font-size:1.02rem;margin-bottom:8px}
.wbig p{font-size:.93rem;color:var(--ink-2);margin:0 0 12px}
.wbig ul{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;font-size:.93rem}
.wbig .fine{margin:0;font-size:.85rem}

/* ============ QO'LLANMA (/qollanma) ============ */
.gd-hero{padding:clamp(48px,7vw,92px) 0 clamp(26px,3vw,40px)}
.gd-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin:10px 0 0}
.gd-hero .lead{margin-top:16px;max-width:56ch}
.gd-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-size:.87rem;color:var(--ink-2)}
.gd-meta span{position:relative;padding-left:15px}
.gd-meta span::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}

.gd{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start;padding-bottom:clamp(60px,8vw,110px)}

/* yon menyu - qaysi bo'limda turganingiz doim ko'rinadi */
/* sticky grid punktning O'ZIGA berilishi kerak: .gd da align-items:start bo'lgani
   uchun ichki div ning quticha balandligi kontentga teng va yopishishga joy qolmaydi */
.gd-toc{position:sticky;top:92px;align-self:start}
.gd-toc-in{display:flex;flex-direction:column;gap:2px}
.gd-toc-in>b{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:0 2px 10px}
.gd-toc a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  font-size:.92rem;color:var(--ink-2);line-height:1.35;text-decoration:none;
  transition:background var(--d-fast) linear,color var(--d-fast) linear}
.gd-toc a i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.72rem;font-weight:800;
  color:var(--ink-3)}
.gd-toc a:hover{background:var(--sunk);color:var(--ink)}
.gd-toc a.on{background:var(--sunk);color:var(--ink);font-weight:700}
.gd-toc a.on i{border-color:var(--accent);background:var(--accent);color:#fff}
.gd-cta{margin-top:18px;justify-content:center}

.gd-s{padding:clamp(34px,4.5vw,58px) 0;border-top:1px solid var(--line)}
.gd-s:first-child{padding-top:0;border-top:0}
.gd-s h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:8px 0 0;scroll-margin-top:96px}
.gd-s{scroll-margin-top:88px}
.gd-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--display);font-size:.86rem}
.gd-lead{font-size:1.03rem;line-height:1.62;color:var(--ink-2);margin:14px 0 26px;max-width:62ch}
.gd-sub{font-weight:700;margin:22px 0 10px}
.gd-s h3{font-size:1.06rem;margin:0 0 12px}

.gd-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,3.4vw,52px);
  align-items:start}
.gd-two-t{margin-top:34px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gd-fig{margin:0}
.gd-fig figcaption{margin-top:12px;font-size:.84rem;color:var(--ink-3);line-height:1.5;max-width:44ch}

.gd-list,.gd-check{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:.96rem;line-height:1.5}
.gd-list li{padding-left:15px;position:relative}
.gd-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;
  background:var(--ink-3)}
.gd-check li{padding-left:26px;position:relative}
.gd-check li::before{content:"";position:absolute;left:0;top:.18em;width:17px;height:17px;border-radius:5px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center/13px no-repeat}

/* ruxsatlar - tumbler bilan */
.perm{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:12px}
.perm-r{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);
  font-size:.93rem;color:var(--ink-3)}
.perm-r.on{color:var(--ink)}
.perm-r span{min-width:0}
.perm-r b{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);min-width:8ch;text-align:right;white-space:nowrap}
.perm-r.on b{color:var(--accent-ink)}
.sw{flex:none;margin-left:auto;width:34px;height:19px;border-radius:10px;background:var(--line);
  position:relative;transition:background var(--d-fast) linear}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(11,27,51,.3);
  transition:transform var(--d-fast) var(--e-out-quart)}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(15px)}

/* Telegram kanal adminlari ekrani */
.tgadm{border:1px solid var(--line);border-radius:14px;background:var(--page);overflow:hidden;max-width:400px}
.tgadm-h{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.tgadm-ava{width:40px;height:40px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px}
.tgadm-h b{display:block;font-size:.97rem;line-height:1.25}
.tgadm-h span{font-size:.8rem;color:var(--ink-3)}
.tgadm-t{padding:13px 16px 7px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.tgadm-r{display:flex;align-items:center;gap:11px;padding:10px 16px;background:var(--surface);
  border-top:1px solid var(--line)}
.tgadm-r.new{background:#F0F7FF;box-shadow:inset 3px 0 0 var(--accent)}
.tgadm-d{width:32px;height:32px;flex:none;border-radius:50%;background:var(--sunk);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.tgadm-d.bot{background:var(--accent);color:#fff}
.tgadm-r b{display:block;font-size:.9rem;line-height:1.3}
.tgadm-r span{font-size:.78rem;color:var(--ink-3)}
.tgadm-ok{margin-left:auto;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center}
.tgadm-add{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface);
  font-size:.9rem;color:var(--accent-ink);font-weight:700}

/* kunlik oqim */
.tline{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:tl}
.tline li{position:relative;padding:0 0 22px 42px;counter-increment:tl}
.tline li::before{content:counter(tl);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800}
.tline li::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:1.5px;background:var(--line)}
.tline li:last-child{padding-bottom:0}
.tline li:last-child::after{display:none}
.tline b{display:block;font-size:1rem}
.tline p{margin:4px 0 0;font-size:.94rem;color:var(--ink-2);line-height:1.55;max-width:58ch}

.gd-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.gd-mode{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:var(--surface)}
.gd-mode.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gd-mode b{display:block;font-size:1rem}
.gd-mode p{margin:7px 0 0;font-size:.92rem;color:var(--ink-2);line-height:1.55}

/* haftalik reja */
.rubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;margin-bottom:6px}
.rub{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 17px;background:var(--surface)}
.rub.hot{border-color:#F0C36A;background:#FFFBF2}
.rub-d{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 8px;
  border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rub.hot .rub-d{background:#F5D999;color:#5A3E00}
.rub b{display:block;margin-top:11px;font-size:1rem}
.rub p{margin:6px 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.rub em{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-style:normal;font-size:.85rem;color:var(--ink-3)}

/* .tbl platform.css da - bu sahifa uni yuklamaydi, shuning uchun o'zimizniki */
.gd-tbl{width:100%;border-collapse:collapse}
.gd-tbl th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px 9px 0;border-bottom:1px solid var(--ink)}
.gd-tbl td{font-size:.9rem;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top;line-height:1.45}
.gd-tbl td:first-child{color:var(--ink);font-weight:700;width:44%}

.gd-bad{display:grid;gap:0;border-top:1px solid var(--line)}
.gd-bad>div{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative}
.gd-bad>div::before{content:"";position:absolute;left:0;top:20px;width:16px;height:16px;border-radius:50%;
  background:var(--bad);opacity:.16}
.gd-bad>div::after{content:"";position:absolute;left:5px;top:25px;width:6px;height:6px;border-radius:50%;
  background:var(--bad)}
.gd-bad b{display:block;font-size:1rem}
.gd-bad p{margin:5px 0 0;font-size:.93rem;color:var(--ink-2);line-height:1.55;max-width:70ch}

.gd-end{text-align:center;border-top:2px solid var(--ink)}
.gd-end .gd-lead{margin-left:auto;margin-right:auto}

@media (max-width:960px){
  .gd{grid-template-columns:minmax(0,1fr);gap:20px}
  /* menyu tepaga, gorizontal lenta bo'lib - min-width:0 bo'lmasa kontent kengligiga cho'ziladi */
  .gd-toc{position:sticky;top:66px;z-index:5;background:var(--page);border-bottom:1px solid var(--line)}
  .gd-toc-in{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    min-width:0;max-width:100%;gap:6px;padding:10px 0;scrollbar-width:none}
  .gd-toc-in::-webkit-scrollbar{display:none}
  .gd-toc-in>b,.gd-cta{display:none}
  .gd-toc a{flex:none;white-space:nowrap;background:var(--sunk)}
  .gd-two,.gd-two-t,.gd-modes{grid-template-columns:minmax(0,1fr)}
  .gd-fig{margin-top:8px}
  /* tepada nav (66px) + yopishqoq lenta (~52px) turadi - havoladan o'tilganda
     sarlavha ularning ostida qolib ketmasin */
  .gd-s{scroll-margin-top:132px}
}
@media (max-width:560px){
  .rubs{grid-template-columns:minmax(0,1fr)}
  .perm-r b{width:auto}
}

/* ---- menejer bo'limi: sahifadagi yagona menejerga qaratilgan blok ---- */
.mng{background:var(--surface);border-block:1px solid var(--line)}
.mng-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.mng-col{border-top:2px solid var(--line);padding-top:20px}
.mng-col.keeps{border-top-color:var(--accent)}
.mng-col h3{font-size:var(--t-h3);margin:0 0 14px;color:var(--ink)}
.mng-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mng-col li{position:relative;padding-left:20px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.mng-col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--ink-3)}
.mng-col.keeps li::before{background:var(--accent);height:3px;top:.58em}
.mng-note{margin-top:26px;max-width:62ch}
@media (max-width:760px){ .mng-grid{grid-template-columns:1fr;gap:22px} }