/* =========================================================
   ZIVO — Tozalik · Sifat · Ishonch
   Brend uslubidagi asosiy stil fayli
   ========================================================= */

/* ---------- 1. Tokenlar ---------- */
:root{
  --brand-900:#0b2f7a;
  --brand-800:#123f9e;
  --brand-700:#1650c8;
  --brand-600:#1a5fe0;
  --brand-500:#2b7cf0;
  --brand-400:#4f9bff;
  --brand-300:#8cc0ff;
  --brand-200:#bcd8ff;
  --brand-100:#dbe9ff;
  --brand-50:#eef4ff;

  --ink:#0d1b34;
  --ink-2:#243a5e;
  --muted:#61738f;
  --line:#e3ebf7;
  --line-2:#eef3fb;

  --bg:#f4f7fd;
  --surface:#ffffff;
  --surface-2:#f8fbff;

  --ok:#12a05c;
  --warn:#e8a33d;

  --grad:linear-gradient(135deg,var(--brand-700) 0%,var(--brand-500) 55%,var(--brand-400) 100%);
  --grad-deep:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand-600) 100%);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --sh-xs:0 1px 2px rgba(13,27,52,.05);
  --sh-sm:0 2px 8px rgba(13,27,52,.06);
  --sh-md:0 10px 30px -12px rgba(13,27,52,.18);
  --sh-lg:0 26px 60px -22px rgba(11,47,122,.35);
  --sh-brand:0 14px 30px -12px rgba(26,95,224,.55);

  --wrap:1180px;
  --header-h:74px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / asos ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);
  overflow-x:hidden;
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Modal ochiqda orqa fon siljimasin (iOS uchun position:fixed shart) */
body.is-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none; padding:0}
table{border-collapse:collapse; width:100%}
h1,h2,h3,h4{line-height:1.18; letter-spacing:-.02em; font-weight:800; color:var(--ink)}
:focus-visible{outline:3px solid var(--brand-400); outline-offset:3px; border-radius:6px}

.skip-link{
  position:fixed; left:-999px; top:10px; z-index:200;
  background:var(--brand-700); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
}
.skip-link:focus{left:10px}

.container{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.ico{width:20px; height:20px; fill:currentColor; flex:none}
.ta-r{text-align:right}
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 3. Tugmalar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-full);
  font-weight:650; font-size:.95rem; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--lg{padding:15px 28px; font-size:1rem}
.btn--primary{background:var(--grad); color:#fff; box-shadow:var(--sh-brand)}
.btn--primary:hover{box-shadow:0 18px 34px -12px rgba(26,95,224,.7); transform:translateY(-2px)}
.btn--soft{background:var(--brand-50); color:var(--brand-700); box-shadow:inset 0 0 0 1px var(--brand-100)}
.btn--soft:hover{background:var(--brand-100)}
.btn--ghost{color:var(--ink-2); padding-inline:12px}
.btn--ghost:hover{color:var(--brand-700)}
.btn--white{background:#fff; color:var(--brand-700); box-shadow:var(--sh-md)}
.btn--white:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
.btn--outline-white{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); color:#fff}
.btn--outline-white:hover{background:rgba(255,255,255,.14)}
.btn[disabled]{opacity:.5; pointer-events:none}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--brand-800);
  padding:7px 15px 7px 11px; border-radius:var(--r-full);
  font-size:.82rem; font-weight:600; box-shadow:var(--sh-sm);
}
.pill__dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 4px rgba(18,160,92,.16); animation:pulse 2.2s infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(18,160,92,0)}}

/* ---------- 4. Header ---------- */
.header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s, border-color .25s, background .25s;
}
.header.is-stuck{border-color:var(--line); box-shadow:0 6px 24px -18px rgba(13,27,52,.5)}
.header__inner{display:flex; align-items:center; gap:14px; height:var(--header-h)}

.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand__mark{width:40px; height:40px; transition:transform .35s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__text strong{
  font-size:1.35rem; font-weight:900; letter-spacing:.02em;
  background:var(--grad-deep); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__text small{font-size:.6rem; letter-spacing:.16em; color:var(--brand-600); font-weight:600; text-transform:uppercase}

/* nav qolgan bo'sh joyni egallaydi va o'zi markazlashadi — brend chapda,
   tugmalar o'ngda qoladi. Avval nav'dagi margin-inline:auto va
   .header__actions dagi margin-left:auto bir-biri bilan urishardi. */
.nav{display:flex; gap:2px; flex:1 1 auto; justify-content:center; min-width:0;
     overflow:hidden}   /* sig'masa kesiladi — hech qachon ustma-ust tushmaydi */
.nav a{
  padding:9px 8px; border-radius:var(--r-full);
  font-size:.89rem; font-weight:550; color:var(--ink-2);
  white-space:nowrap;              /* «Buyurtmani kuzatish» ikki qatorga bo'linmasin */
  transition:background .2s, color .2s;
}
.nav a:hover,.nav a.is-active{background:var(--brand-50); color:var(--brand-700)}

.header__actions{display:flex; align-items:center; gap:10px; flex:none}
.btn--phone{
  padding:0; width:42px; height:42px; border-radius:50%;
  background:var(--brand-50); color:var(--brand-700);
}
.btn--phone:hover{background:var(--brand-100)}
.btn--phone .ico{width:19px; height:19px; margin:0}
.btn--phone span{display:none}   /* raqam matni header'ga sig'maydi */

.burger{display:none; width:42px; height:42px; border-radius:12px; background:var(--brand-50); position:relative}
.burger span{
  position:absolute; left:11px; width:20px; height:2px; border-radius:2px; background:var(--brand-800);
  transition:transform .28s var(--ease), opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- 5. Hero ---------- */
.hero{position:relative; padding:70px 0 90px; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.blob--1{width:560px; height:560px; top:-220px; right:-140px; background:radial-gradient(circle,#7cb6ff,#2b7cf0 60%,transparent 72%)}
.blob--2{width:460px; height:460px; bottom:-200px; left:-160px; background:radial-gradient(circle,#bcd8ff,#5aa6ff 60%,transparent 72%); opacity:.42}
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 25%,transparent 78%);
  opacity:.7;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px; align-items:center;
}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem); margin:20px 0 18px; letter-spacing:-.035em}
.hero__lead{font-size:clamp(1rem,1.6vw,1.15rem); color:var(--muted); max-width:52ch}
.hero__lead strong{color:var(--ink-2); font-weight:650}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 36px}

.hero__stats{display:flex; gap:38px; flex-wrap:wrap}
.hero__stats li{display:flex; flex-direction:column}
.hero__stats b{
  font-size:1.9rem; font-weight:900; letter-spacing:-.03em;
  background:var(--grad-deep); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__stats span{font-size:.82rem; color:var(--muted); font-weight:500}

/* Ishchilar tasviri */
.hero__rasm{position:relative; display:flex; align-items:center; justify-content:center}
.hero__rasm > img{
  position:relative; z-index:2;
  width:100%; max-width:560px; height:auto;
}
/* Lottie animatsiyasi: kvadrat (900x900). Zaxira rasm ostida turadi va
   animatsiya tayyor bo'lgach so'nadi. */
.hero__lottie{
  position:relative; z-index:2; width:100%; max-width:600px; aspect-ratio:685/735;
}
.hero__lottie svg,.hero__lottie__svg{display:block; width:100% !important; height:100% !important}
.hero__lottie__zaxira{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  border-radius:26px; transition:opacity .5s var(--ease);
}
.hero__lottie.is-tayyor .hero__lottie__zaxira{opacity:0; visibility:hidden; pointer-events:none}
.hero__nur{
  position:absolute; z-index:1; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(43,124,240,.3),transparent 66%);
  filter:blur(48px); top:50%; left:50%; transform:translate(-50%,-50%);
}

/* ---------- 6. Trust ---------- */
.trust{padding-bottom:16px}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.trust__item{
  background:var(--surface); border-radius:var(--r-lg); padding:24px 22px;
  box-shadow:var(--sh-sm); border:1px solid var(--line-2);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trust__item:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.trust__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--brand-50); color:var(--brand-700); margin-bottom:14px;
}
.trust__ico svg{width:24px; height:24px}
.trust__item h3{font-size:1.02rem; margin-bottom:5px}
.trust__item p{font-size:.87rem; color:var(--muted)}

/* ---------- 7. Bo'limlar ---------- */
.section{padding:74px 0}
.section--alt{background:linear-gradient(180deg,#fff,var(--surface-2)); border-block:1px solid var(--line-2)}
.section__head{max-width:660px; margin:0 auto 38px; text-align:center}
.section__head--left{margin-inline:0; text-align:left}
.eyebrow{
  display:inline-block; font-size:.74rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-600); margin-bottom:12px;
}
.section__head h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.section__head p{color:var(--muted); margin-top:12px; font-size:1.02rem}
.section__head a{color:var(--brand-700); font-weight:600}

/* ---------- 8. Kategoriyalar ---------- */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cat{
  position:relative; overflow:hidden; text-align:left;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:26px 24px 24px; box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.cat::after{
  content:""; position:absolute; inset:auto -62px -78px auto; width:150px; height:150px; border-radius:50%;
  background:var(--c,var(--brand-50)); opacity:.34; transition:transform .4s var(--ease);
}
.cat:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--brand-100)}
.cat:hover::after{transform:scale(1.15)}
.cat > *{position:relative; z-index:1}
.cat__ico{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px;
  background:var(--grad); color:#fff; margin-bottom:16px; box-shadow:var(--sh-brand);
}
.cat__ico svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cat h3{font-size:1.08rem; margin-bottom:7px}
.cat p{font-size:.87rem; color:var(--muted); min-height:2.6em}
.cat__meta{
  display:flex; align-items:center; justify-content:space-between; margin-top:18px;
  font-size:.82rem; font-weight:650; color:var(--brand-700);
}
.cat__count{background:var(--brand-50); padding:4px 11px; border-radius:var(--r-full); font-size:.75rem}

/* ---------- 9. Filtrlar ---------- */
.filters{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:28px}
.search{
  position:relative; flex:1 1 300px; max-width:380px;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-full);
  padding:11px 18px; box-shadow:var(--sh-xs); transition:border-color .2s, box-shadow .2s;
}
.search:focus-within{border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(79,155,255,.16)}
.search .ico{color:var(--muted); width:18px; height:18px; fill:none}
.search input{flex:1; border:0; background:none; outline:none; font-size:.93rem}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:9px 17px; border-radius:var(--r-full); font-size:.87rem; font-weight:600;
  background:#fff; color:var(--ink-2); border:1px solid var(--line);
  transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--brand-300); color:var(--brand-700)}
.chip.is-active{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--sh-brand)}

/* ---------- 10. Xizmatlar ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.svc{
  display:flex; flex-direction:column; text-align:left;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s;
  animation:fadeUp .45s var(--ease) both;
}
.svc:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--brand-100)}
/* Butun karta bosiladi — o'ngdagi strelka faqat ko'rsatkich */
.svc{cursor:pointer}
.svc:focus-visible{outline:3px solid var(--brand-300); outline-offset:3px}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}}

.svc__art{
  position:relative; height:150px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--c1),var(--c2));
  overflow:hidden;
}
.svc__art::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.5),transparent 55%);
}
.svc__art::after{
  content:""; position:absolute; width:190px; height:190px; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.45); right:-70px; bottom:-80px;
}
.svc__art svg{
  width:60px; height:60px; position:relative; z-index:1; color:#fff;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 6px 12px rgba(11,47,122,.3));
  transition:transform .35s var(--ease);
}
.svc:hover .svc__art svg{transform:scale(1.1) rotate(-4deg)}
/* Foto qo'yilgan kartalar: rasm to'ldiradi, ikonka kichik nishonchaga aylanadi.
   Rasm yuklanmasa .svc__art--foto sinfi olib tashlanadi va eski gradient ko'rinish qaytadi. */
.svc__img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; transition:transform .5s var(--ease);
}
.svc:hover .svc__img{transform:scale(1.05)}
.svc__art--foto::before{
  z-index:1;
  background:linear-gradient(180deg,rgba(8,25,60,.34) 0%,rgba(8,25,60,0) 45%,rgba(8,25,60,.28) 100%);
}
.svc__art--foto::after{display:none}
.svc__art--foto svg{
  position:absolute; z-index:2; right:12px; bottom:12px;
  width:26px; height:26px; padding:9px; box-sizing:content-box;
  border-radius:14px; background:rgba(255,255,255,.93); color:var(--brand-700);
  stroke-width:1.8; filter:none; box-shadow:var(--sh-xs);
}
.svc:hover .svc__art--foto svg{transform:none}

.svc__badge{
  position:absolute; top:12px; left:12px; z-index:3;
  background:rgba(255,255,255,.92); color:var(--brand-700);
  font-size:.68rem; font-weight:700; padding:5px 11px; border-radius:var(--r-full);
  backdrop-filter:blur(6px);
}
.svc__body{padding:19px 20px 20px; display:flex; flex-direction:column; flex:1}
.svc__body h3{font-size:1.05rem; margin-bottom:7px}
.svc__body p{font-size:.86rem; color:var(--muted); flex:1}
.svc__foot{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:18px}
.svc__price small{display:block; font-size:.7rem; color:var(--muted); font-weight:500}
.svc__price b{font-size:1.12rem; color:var(--brand-700); letter-spacing:-.02em}
.svc__price b span{font-size:.72rem; font-weight:600; color:var(--muted)}
.svc__go{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--brand-50); color:var(--brand-700); flex:none;
  transition:background .22s, color .22s, transform .22s var(--ease);
}
.svc:hover .svc__go{background:var(--grad); color:#fff; transform:translateX(3px)}
.svc__go svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.empty{text-align:center; color:var(--muted); padding:40px 0}

/* ---------- 11. Aksiyalar ---------- */
.promos{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px}
.promo{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:26px 24px; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.promo h3{font-size:1.05rem; margin-bottom:8px}
.promo p{font-size:.88rem; color:var(--muted)}
.promo__ico{font-size:1.8rem; display:block; margin-bottom:12px}
.promo--hero{
  grid-column:1 / -1;                       /* butun kenglikdagi banner */
  background:var(--grad-deep); border-color:transparent;
  color:#fff; box-shadow:var(--sh-lg); position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  grid-template-areas:"tag tag" "sarlavha tugma" "matn tugma";
  gap:4px 32px; padding:28px 32px;
}
.promo--hero .promo__tag{grid-area:tag; justify-self:start; margin-bottom:10px}
.promo--hero h3{grid-area:sarlavha}
.promo--hero p{grid-area:matn}
.promo--hero .btn{grid-area:tugma; align-self:center}
.promo--hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:230px; height:230px;
  border-radius:50%; background:rgba(255,255,255,.1);
}
.promo--hero > *{position:relative; z-index:1}
.promo--hero h3{color:#fff; font-size:1.4rem}
.promo--hero p{color:rgba(255,255,255,.82); margin-bottom:0; max-width:66ch}
.promo__tag{
  display:inline-block; background:#fff; color:var(--brand-700);
  font-weight:900; font-size:1.05rem; padding:6px 16px; border-radius:var(--r-full); margin-bottom:14px;
}

/* Narxlar jadvali */
.pricetable{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-sm); overflow:hidden;
}
.pricetable table{font-size:.92rem}
.pricetable caption{
  text-align:left; padding:22px 26px 6px; font-weight:750; color:var(--ink); font-size:1.05rem;
}
.pricetable thead th{
  text-align:left; padding:14px 26px; font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.pricetable tbody tr{border-bottom:1px solid var(--line-2); transition:background .18s}
.pricetable tbody tr:last-child{border-bottom:0}
.pricetable tbody tr:hover{background:var(--brand-50)}
.pricetable td{padding:15px 26px; vertical-align:middle}
.pricetable td:first-child{font-weight:600}
.pricetable .p{font-weight:750; color:var(--brand-700); white-space:nowrap}
.pricetable .p small{display:block; font-weight:500; color:var(--muted); font-size:.72rem}
.linkbtn{color:var(--brand-700); font-weight:650; font-size:.88rem; white-space:nowrap}
.linkbtn:hover{text-decoration:underline}

/* ---------- 12. Qadamlar ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:s}
.step{
  position:relative; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:26px 20px 22px; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.step:not(:last-child)::after{
  content:""; position:absolute; top:44px; right:-14px; width:12px; height:2px;
  background:var(--brand-200,var(--brand-100));
}
.step__n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:14px;
  background:var(--grad); color:#fff; font-weight:800; font-size:1.05rem;
  margin-bottom:15px; box-shadow:var(--sh-brand);
}
.step h3{font-size:1rem; margin-bottom:6px}
.step p{font-size:.85rem; color:var(--muted)}

/* ---------- 13. Kuzatish ---------- */
.track{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:48px; align-items:center}
.track__copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.track__copy > p{color:var(--muted); margin-top:12px; font-size:1.02rem}
.track__form{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap}
.track__form input{
  flex:1 1 240px; padding:14px 20px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; outline:none; font-size:.95rem;
  box-shadow:var(--sh-xs); transition:border-color .2s, box-shadow .2s;
}
.track__form input:focus{border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(79,155,255,.16)}
.track__hint{font-size:.8rem; color:var(--muted); margin-top:12px}

.track__panel{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--sh-md); min-height:250px;
  display:flex; flex-direction:column; justify-content:center;
}
.track__empty{text-align:center; color:var(--muted)}
.track__empty span{font-size:2.4rem; display:block; margin-bottom:12px; opacity:.6}
.track__empty p{font-size:.92rem}

.ord__head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:6px}
.ord__id{font-size:.78rem; color:var(--muted); font-weight:600; letter-spacing:.04em}
.ord__status{
  font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:var(--r-full);
  background:#e6f7ee; color:var(--ok);
}
.ord__status--done{background:var(--brand-50); color:var(--brand-700)}
.ord__title{font-size:1.2rem; margin:4px 0 14px}
.ord__meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.83rem; color:var(--muted); margin-bottom:20px}
.ord__meta b{color:var(--ink-2); font-weight:600}
.timeline{display:grid; gap:0; margin-bottom:20px}
.tl{display:flex; gap:14px; position:relative; padding-bottom:18px}
.tl:last-child{padding-bottom:0}
.tl__dot{
  width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line);
  background:#fff; flex:none; margin-top:2px; position:relative; z-index:1;
  display:grid; place-items:center;
}
.tl__dot::after{content:""; width:6px; height:6px; border-radius:50%; background:transparent}
.tl:not(:last-child)::before{
  content:""; position:absolute; left:8px; top:20px; bottom:0; width:2.5px; background:var(--line);
}
.tl--done .tl__dot{border-color:var(--brand-600); background:var(--brand-600)}
.tl--done .tl__dot::after{background:#fff}
.tl--done:not(:last-child)::before{background:var(--brand-300)}
.tl--now .tl__dot{border-color:var(--brand-600); box-shadow:0 0 0 5px rgba(26,95,224,.15); animation:pulse2 2s infinite}
.tl__txt{display:flex; flex-direction:column; gap:2px}
.tl__txt b{font-size:.92rem; font-weight:600; color:var(--muted)}
.tl--done .tl__txt b,.tl--now .tl__txt b{color:var(--ink)}
.tl--now .tl__txt b{color:var(--brand-700)}
.tl__txt small{font-size:.75rem; color:var(--muted)}
.ord__total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; border-top:1px dashed var(--line); font-size:.9rem; color:var(--muted);
}
.ord__total b{font-size:1.2rem; color:var(--brand-700)}

/* ---------- 14. Sharhlar ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.review{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:26px 24px; box-shadow:var(--sh-sm); display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.review:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.stars{color:#f5a623; letter-spacing:2px; font-size:1rem; margin-bottom:14px}
.review blockquote{font-size:.94rem; color:var(--ink-2); flex:1; line-height:1.65}
.review figcaption{display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2)}
.ava{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--a); color:#fff; font-weight:800; font-size:1rem; flex:none;
}
.review figcaption b{font-size:.92rem; display:block}
.review figcaption small{font-size:.78rem; color:var(--muted); margin-left:auto}

/* ---------- 15. FAQ ---------- */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:52px; align-items:start}
.faq__list{display:grid; gap:12px}
.qa{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.qa[open]{border-color:var(--brand-100); box-shadow:var(--sh-sm)}
.qa summary{
  list-style:none; cursor:pointer; padding:19px 54px 19px 22px;
  font-weight:650; font-size:.98rem; position:relative;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; position:absolute; right:22px; top:50%; width:10px; height:10px;
  border-right:2.2px solid var(--brand-600); border-bottom:2.2px solid var(--brand-600);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa summary:hover{color:var(--brand-700)}
.qa__body{padding:0 22px 20px; color:var(--muted); font-size:.92rem}

/* ---------- 16. CTA ---------- */
.cta{
  background:var(--grad-deep); color:#fff; position:relative; overflow:hidden;
  padding:66px 0;
}
.cta::before,.cta::after{content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07)}
.cta::before{width:340px; height:340px; top:-160px; left:-60px}
.cta::after{width:260px; height:260px; bottom:-140px; right:6%}
.cta__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
}
.cta h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem)}
.cta p{color:rgba(255,255,255,.8); margin-top:10px; max-width:52ch}
.cta__btns{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- 17. Footer ---------- */
.footer{background:#0a1730; color:#a9bbd6; padding:56px 0 26px; font-size:.9rem}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
.footer__brand img{margin-bottom:14px}
.footer__slogan{display:flex; flex-direction:column; line-height:1.15; margin-bottom:14px}
.footer__slogan b{color:#fff; font-size:1.3rem; font-weight:900; letter-spacing:.02em}
.footer__slogan span{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-400); font-weight:600}
.footer__about{max-width:34ch; line-height:1.65; color:#8ba1c2}
.socials{display:flex; gap:9px; margin-top:18px}
.socials a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,.07); color:#c7d8f0; font-size:1rem;
  transition:background .2s, transform .2s var(--ease), color .2s;
}
.socials a:hover{background:var(--brand-600); color:#fff; transform:translateY(-3px)}
.footer__col{display:flex; flex-direction:column; gap:11px}
.footer__col h4{color:#fff; font-size:.95rem; margin-bottom:5px}
.footer__col a{transition:color .18s}
.footer__col a:hover{color:var(--brand-400)}
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  font-size:.82rem; color:#7d92b3;
}

/* ---------- 18. Mobil panel ---------- */
.mobilebar{
  display:none; position:fixed; z-index:70; left:0; right:0; bottom:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); gap:10px;
  box-shadow:0 -8px 30px -20px rgba(13,27,52,.6);
}
.mobilebar .btn{flex:1}
.mobilebar__call{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--brand-50); color:var(--brand-700); flex:none;
}

/* ---------- 19. Modal ---------- */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(8,20,42,.55); backdrop-filter:blur(5px); animation:fade .25s ease both}
@keyframes fade{from{opacity:0}}
.modal__dialog{
  position:relative; z-index:1; width:100%; max-width:560px; max-height:min(92vh,860px);
  background:var(--surface); border-radius:var(--r-xl); box-shadow:0 40px 90px -30px rgba(8,20,42,.7);
  display:flex; flex-direction:column; overflow:hidden;
  animation:pop .32s var(--ease) both;
}
@keyframes pop{from{opacity:0; transform:translateY(22px) scale(.97)}}
.modal__head{display:flex; align-items:center; gap:12px; padding:20px 22px 14px; border-bottom:1px solid var(--line-2)}
.modal__titles{flex:1; min-width:0}
.modal__titles h3{font-size:1.15rem}
.modal__titles p{font-size:.83rem; color:var(--muted); margin-top:2px}
.modal__back,.modal__close{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--brand-50); color:var(--brand-800); flex:none; transition:background .2s;
}
.modal__back:hover,.modal__close:hover{background:var(--brand-100)}
.modal__back[hidden]{display:none}

.stepper{padding:14px 22px 4px}
.stepper__bar{display:block; height:4px; border-radius:4px; background:var(--line); overflow:hidden}
.stepper__bar i{display:block; height:100%; width:25%; background:var(--grad); border-radius:4px; transition:width .35s var(--ease)}
.stepper ol{display:flex; justify-content:space-between; margin-top:8px}
.stepper li{font-size:.72rem; font-weight:600; color:var(--muted); transition:color .25s}
.stepper li.is-on{color:var(--brand-700)}

.modal__body{padding:18px 22px 22px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; flex:1}
.modal__body::-webkit-scrollbar{width:8px}
.modal__body::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}

.fgroup{margin-bottom:20px}
.fgroup > label,.flabel{
  display:block; font-size:.82rem; font-weight:700; color:var(--ink-2); margin-bottom:9px;
}
.flabel small{font-weight:500; color:var(--muted)}
.field{
  width:100%; padding:12px 15px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2); outline:none; font-size:.94rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field:focus{border-color:var(--brand-400); background:#fff; box-shadow:0 0 0 4px rgba(79,155,255,.15)}
.field.is-bad{border-color:#e05252; box-shadow:0 0 0 4px rgba(224,82,82,.12)}
textarea.field{resize:vertical; min-height:82px}
select.field{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361738f' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:18px; padding-right:40px;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{
  padding:11px 18px; border-radius:var(--r-md); font-size:.9rem; font-weight:600;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-2);
  transition:all .2s var(--ease);
}
.opt:hover{border-color:var(--brand-300)}
.opt.is-on{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--sh-brand)}
.opt small{display:block; font-size:.72rem; font-weight:500; opacity:.75}

.checks{display:grid; gap:9px}
.check{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 15px; border-radius:var(--r-md); border:1.5px solid var(--line);
  background:#fff; transition:border-color .2s, background .2s;
}
.check:hover{border-color:var(--brand-300)}
.check input{position:absolute; opacity:0; width:0; height:0}
.check__box{
  width:21px; height:21px; border-radius:7px; border:2px solid var(--line);
  display:grid; place-items:center; flex:none; transition:all .2s var(--ease);
}
.check__box svg{width:13px; height:13px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6); transition:.2s var(--ease)}
.check input:checked + .check__box{background:var(--brand-600); border-color:var(--brand-600)}
.check input:checked + .check__box svg{opacity:1; transform:scale(1)}
.check input:focus-visible + .check__box{box-shadow:0 0 0 4px rgba(79,155,255,.25)}
.check__txt{flex:1; font-size:.91rem; font-weight:550}
.check__price{font-size:.83rem; font-weight:700; color:var(--brand-700)}
.check__price.is-free{color:var(--ok)}

/* Narxga ta'sir qilmaydigan ma'lumot maydonlari (buyum yoshi va h.k.) */
.infos{display:grid; gap:10px}
.info{display:flex; align-items:center; justify-content:space-between; gap:12px}
.info__txt{font-size:.91rem; font-weight:550; color:var(--ink-2); white-space:nowrap}
.info__txt small{font-weight:400; color:var(--muted)}
.info__inp{max-width:190px; text-align:right}
@media (max-width:540px){
  .info{flex-direction:column; align-items:stretch; gap:6px}
  .info__inp{max-width:none; text-align:left}
}

.pickcards{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pick{
  text-align:left; padding:14px 16px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:#fff; transition:all .2s var(--ease);
}
.pick:hover{border-color:var(--brand-300)}
.pick.is-on{border-color:var(--brand-600); background:var(--brand-50); box-shadow:0 0 0 3px rgba(26,95,224,.1)}
.pick b{display:block; font-size:.93rem}
.pick small{font-size:.78rem; color:var(--muted)}

/* Modal ichidagi xizmat ro'yxati */
.mlist{display:grid; gap:9px}
.mitem{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  padding:12px 14px; border-radius:var(--r-md); border:1.5px solid var(--line); background:#fff;
  transition:all .2s var(--ease);
}
.mitem:hover{border-color:var(--brand-300); transform:translateX(3px)}
.mitem__ico{
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px; flex:none;
  background:linear-gradient(140deg,var(--c1),var(--c2)); color:#fff;
}
.mitem__ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.mitem__txt{flex:1; min-width:0}
.mitem__txt b{display:block; font-size:.94rem}
.mitem__txt small{font-size:.78rem; color:var(--muted)}
.mitem__price{font-size:.85rem; font-weight:700; color:var(--brand-700); white-space:nowrap}

/* Xulosa */
.summary{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; margin-bottom:18px}
.summary__row{display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:.9rem; color:var(--muted)}
.summary__row b{color:var(--ink-2); font-weight:600; text-align:right}
.summary__row--total{
  margin-top:9px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:1rem; color:var(--ink);
}
.summary__row--total b{font-size:1.25rem; color:var(--brand-700)}
.summary__row--disc b{color:var(--ok)}

.upload{
  display:grid; place-items:center; gap:6px; width:100%; padding:22px;
  border:1.8px dashed var(--brand-200,var(--brand-100)); border-radius:var(--r-md);
  background:var(--brand-50); color:var(--brand-700); font-size:.86rem; font-weight:600;
  transition:background .2s, border-color .2s;
}
.upload:hover{background:var(--brand-100)}
.upload span{font-size:1.5rem}

/* Tanlangan buyum rasmi — oldindan ko'rish */
.rasm-oldin{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--brand-50);
}
.rasm-oldin__img{
  width:88px; height:88px; flex:none; object-fit:cover;
  border-radius:12px; border:1px solid var(--brand-100);
}
.rasm-oldin__ust{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.rasm-oldin__nom{
  font-size:.85rem; font-weight:600; color:var(--ink);
  word-break:break-all; line-height:1.35;
}
.rasm-oldin__tugma{ display:flex; gap:16px; flex-wrap:wrap }
.rasm-oldin__tugma .linkbtn{ margin-top:0 }

/* Muvaffaqiyat */
.done{text-align:center; padding:14px 0 6px}
.done__ico{
  width:82px; height:82px; margin:0 auto 20px; border-radius:50%;
  background:var(--grad); display:grid; place-items:center; box-shadow:var(--sh-brand);
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn{from{transform:scale(.4); opacity:0}}
.done__ico svg{width:40px; height:40px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.done h4{font-size:1.35rem; margin-bottom:8px}
.done > p{color:var(--muted); font-size:.94rem; max-width:38ch; margin:0 auto}
.done__id{
  display:inline-flex; align-items:center; gap:10px; margin:20px 0 6px;
  background:var(--brand-50); color:var(--brand-800); font-weight:800; letter-spacing:.06em;
  padding:11px 20px; border-radius:var(--r-full); font-size:1rem;
}
.done__copy{font-size:.78rem; font-weight:600; color:var(--brand-600); cursor:pointer}
.done__note{font-size:.82rem; color:var(--muted); margin-top:14px}

.modal__foot{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2); background:var(--surface-2);
}
.modal__total small{display:block; font-size:.74rem; color:var(--muted); font-weight:500}
.modal__total b{font-size:1.3rem; color:var(--brand-700); letter-spacing:-.02em}
.modal__foot .btn{flex:none; min-width:170px}
.modal__foot[hidden]{display:none}

/* ---------- 20. Toast ---------- */
.toasts{position:fixed; z-index:200; right:20px; bottom:20px; display:grid; gap:10px}
.toast{
  background:#0a1730; color:#fff; padding:13px 20px; border-radius:var(--r-md);
  font-size:.89rem; font-weight:550; box-shadow:var(--sh-lg);
  animation:slideIn .3s var(--ease) both; max-width:320px;
}
.toast--ok{background:linear-gradient(135deg,#0f8f52,#12a05c)}
.toast--bad{background:linear-gradient(135deg,#c33c3c,#e05252)}
@keyframes slideIn{from{opacity:0; transform:translateX(24px)}}

/* ---------- 21. Reveal animatsiya ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- 22. Responsive ---------- */

/* --- Tor noutbuk: 1060–1320px. Bu oraliqda hamma element bir qatorga
       sig'masdi — telefon raqami ikonkaga qisqaradi. --- */
@media (max-width:1320px){
  .nav a{padding:9px 10px; font-size:.89rem}
  .akkaunt__matn{display:none}
  #akkaunt{padding:0; width:42px; height:42px; border-radius:50%}
}
@media (max-width:1160px){
  .header__inner{gap:12px}
  .nav a{padding:8px 8px; font-size:.86rem}
}

/* --- Planshet: 1200px --- */
@media (max-width:1200px){
  .nav{display:none}
  .burger{display:block}                 /* menyu hech qachon yo'qolib qolmasin */
  .nav.is-open{
    display:flex; flex-direction:column; gap:2px; position:absolute;
    top:calc(var(--header-h) - 4px); left:12px; right:12px; padding:12px;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-lg); margin:0; max-height:70vh; overflow-y:auto;
  }
  .nav.is-open a{padding:14px 16px; font-size:1rem}

  .cats,.promos,.trust__grid{grid-template-columns:repeat(2,1fr)}
  .promo--hero{grid-column:span 2}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step:not(:last-child)::after{display:none}
  .services{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}

/* --- Kichik planshet / katta telefon: 900px --- */
@media (max-width:900px){
  .hero{padding:36px 0 56px}
  .hero__inner{grid-template-columns:1fr; gap:38px}
  .hero__copy{text-align:left}
  .hero__rasm > img{max-width:520px}
  .hero__lottie{max-width:480px}
  .blob--1{width:340px; height:340px; top:-140px; right:-90px; filter:blur(60px)}
  .blob--2{width:280px; height:280px; filter:blur(60px)}
  .track,.faq{grid-template-columns:1fr; gap:30px}
  .reviews{grid-template-columns:1fr}
  .btn--phone span{display:none}
  .btn--phone{padding:11px; width:44px; height:44px}
  .section__head{margin-bottom:34px}
}

/* --- Telefon: 720px --- */
@media (max-width:720px){
  :root{--header-h:64px}
  .container{padding-inline:16px}
  .section{padding:52px 0}
  .section__head p{font-size:.95rem}

  /* iOS input'ga bosilganda sahifani zoom qilmasin — 16px shart */
  .field,.search input,.track__form input,select.field,textarea.field{font-size:16px}

  .hero{padding:28px 0 48px}
  .hero h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .hero__lead{font-size:.98rem}
  .hero__cta{gap:10px; margin:24px 0 30px}
  .hero__cta .btn{width:100%}
  .hero__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .hero__stats b{font-size:1.4rem}
  .hero__stats span{font-size:.78rem; line-height:1.35}
  /* uzluksiz animatsiya batareyani yeydi */
  .hero__rasm > img{max-width:none}
  .hero__lottie{max-width:none}
  .hero__nur{width:250px; height:250px}

  .services,.cats,.promos,.trust__grid,.steps{grid-template-columns:1fr}
  .promo--hero{
    grid-column:1 / -1; grid-template-columns:1fr; padding:24px 22px;
    grid-template-areas:"tag" "sarlavha" "matn" "tugma"; gap:6px;
  }
  .promo--hero .btn{margin-top:18px; justify-self:stretch}
  .promo--hero p{margin-bottom:0}
  .trust__item{padding:20px 18px; display:flex; align-items:flex-start; gap:15px; flex-wrap:wrap}
  .trust__ico{margin-bottom:0; width:42px; height:42px}
  .trust__item h3{flex:1; min-width:140px; font-size:.98rem; align-self:center}
  .trust__item p{flex-basis:100%; font-size:.85rem}
  .cat p{min-height:0}
  .step{padding:20px 18px}

  .filters{gap:12px}
  .search{max-width:none; flex-basis:100%; padding-block:0}
  .search input{min-height:48px}
  .chips{
    flex-wrap:nowrap; overflow-x:auto; width:100%;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; scroll-snap-type:x proximity;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none; scroll-snap-align:start}

  .header__actions .btn--primary{display:none}
  .mobilebar{display:flex}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .toasts{right:12px; left:12px; bottom:calc(90px + env(safe-area-inset-bottom))}
  .toast{max-width:none}

  .pricetable{overflow:visible}
  .pricetable__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .pricetable table{min-width:540px}
  .pricetable caption{padding:18px 18px 6px; font-size:1rem}
  .pricetable thead th,.pricetable td{padding:13px 18px}

  .cta{padding:52px 0}
  .cta__inner{gap:24px}
  .cta__btns{width:100%}
  .cta__btns .btn{flex:1; min-width:150px}

  .footer{padding:44px 0 22px}
  .footer__grid{grid-template-columns:1fr; gap:28px}
  .socials a{width:44px; height:44px}   /* barmoq nishoni 40px dan kam bo'lmasin */
  .footer__col a,.footer__col span{
    display:inline-flex; align-items:center; min-height:40px; padding:2px 0;
  }   /* barmoq uchun kattaroq nishon */
  .footer__bottom{margin-top:32px; flex-direction:column; gap:8px}

  /* Modal — pastdan chiquvchi varaq */
  .modal{padding:0; align-items:flex-end}
  .modal__dialog{
    max-width:none; width:100%;
    max-height:92vh; max-height:92dvh;
    border-radius:22px 22px 0 0;
    animation:sheet .34s var(--ease) both;
  }
  .modal__head{padding:16px 16px 12px}
  .modal__titles h3{font-size:1.05rem}
  .stepper{padding:12px 16px 4px}
  .stepper li{font-size:.68rem}
  .modal__body{padding:16px 16px 20px}
  .modal__foot{
    flex-direction:row; align-items:center; gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .modal__foot .btn{flex:1; min-width:0}
  .modal__total{flex:none}
  .modal__total b{font-size:1.1rem}
  .grid2,.pickcards{grid-template-columns:1fr}
  .opt{padding:12px 16px}
  .check{padding:13px 14px}
}
@keyframes sheet{from{transform:translateY(100%)}}

/* --- Narxlar jadvali telefonda: qatorlar o'rniga kartalar --- */
/* 552px lik jadvalni 375px ekranda yon tomonga surdirish noqulay edi. */
@media (max-width:600px){
  .pricetable__scroll{overflow-x:visible}
  .pricetable table{min-width:0; width:100%; display:block}
  .pricetable caption{display:block; padding:18px 16px 2px}

  /* Sarlavha qatori kartada keraksiz — ko'zdan olamiz, skrinriderga qoladi */
  .pricetable thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  .pricetable tbody{display:block; padding:8px 14px 14px}
  .pricetable tbody tr{
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:14px 16px; margin-top:10px;
    box-shadow:var(--sh-xs);
  }
  .pricetable tbody tr:last-child{border-bottom:1px solid var(--line)}
  .pricetable tbody tr:hover{background:var(--surface)}

  .pricetable td{display:block; padding:0; text-align:left; vertical-align:baseline}
  .pricetable td:nth-child(1){font-size:1.02rem; font-weight:700; line-height:1.3}
  .pricetable td:nth-child(2){margin-top:3px; color:var(--muted); font-size:.86rem}
  .pricetable .p{
    margin-top:10px; font-size:1.12rem; white-space:normal;
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  }
  .pricetable .p small{display:inline; font-size:.76rem}

  .pricetable .linkbtn{
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:46px; margin-top:12px;
    background:var(--brand-50); border:1px solid var(--brand-200);
    border-radius:var(--r-md); font-size:.92rem;
  }
}

/* --- Kichik telefon: 400px --- */
@media (max-width:400px){
  .container{padding-inline:14px}
  .brand__text small{display:none}
  .brand__text strong{font-size:1.25rem}
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__stats li:last-child{display:none}
  .svc__art{height:132px}
  .modal__foot{flex-wrap:wrap}
  .modal__total{flex:1 1 100%; display:flex; justify-content:space-between; align-items:baseline}
  .modal__foot .btn{flex:1 1 100%}
  .done__id{font-size:.9rem; padding:10px 14px}
}

/* --- Yotiq holatdagi past ekranlar --- */
@media (max-height:520px) and (orientation:landscape){
  .modal{align-items:center; padding:12px}
  .modal__dialog{max-height:96vh; border-radius:var(--r-lg)}
}

/* --- Sichqonchasiz qurilmalarda hover effektlarini o'chirish --- */
@media (hover:none){
  .svc:hover,.cat:hover,.trust__item:hover,.promo:hover,.review:hover,.step:hover{
    transform:none; box-shadow:var(--sh-sm);
  }
  .btn--primary:hover,.btn--white:hover{transform:none}
  .mitem:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

@media print{
  .header,.mobilebar,.cta,.modal,.toasts,.hero__rasm{display:none !important}
}

/* ==========================================================================
   23. Akkaunt: kirish sahifasi va shaxsiy kabinet
   ========================================================================== */

.sahifa--tor{background:var(--bg); min-height:100vh}

/* --- Kirish / ro'yxatdan o'tish --- */
.auth{
  display:flex; align-items:flex-start; justify-content:center;
  padding:48px 16px 80px;
}
.auth__card{
  width:100%; max-width:440px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-md); overflow:hidden;
}
.auth__tabs{display:grid; grid-template-columns:1fr 1fr; background:var(--surface-2)}
.auth__tab{
  padding:15px 10px; font-weight:650; font-size:.94rem; color:var(--muted);
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s, background .2s;
}
.auth__tab.is-active{color:var(--brand-700); background:var(--surface); border-bottom-color:var(--brand-600)}

.auth__form{padding:26px 24px 28px}
.auth__form h1{font-size:1.45rem; font-weight:800; margin-bottom:4px}
.auth__lead{color:var(--muted); font-size:.92rem; margin-bottom:20px}
.auth__label{display:block; font-size:.82rem; font-weight:650; color:var(--ink-2); margin:14px 0 6px}
.auth__tel{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2); padding-left:14px;
  transition:border-color .2s, box-shadow .2s;
}
.auth__tel:focus-within{border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(79,155,255,.15)}
.auth__tel span{font-weight:650; color:var(--ink-2)}
.auth__tel .field{border:0; background:none; box-shadow:none; padding-left:0}
.auth__tel .field:focus{box-shadow:none; background:none}

.auth__xato{
  margin-top:14px; padding:11px 14px; border-radius:var(--r-md);
  background:#fdecec; color:#a52626; font-size:.88rem; font-weight:550;
}
.auth__submit{width:100%; margin-top:20px}
.auth__almash{margin-top:16px; text-align:center; font-size:.9rem; color:var(--muted)}
.auth__almash button{color:var(--brand-700); font-weight:650}
.auth__almash button:hover{text-decoration:underline}

/* --- Kabinet --- */
.kabinet{padding:38px 0 80px}
.kabinet__salom h1{font-size:1.7rem; font-weight:800}
.kabinet__salom p{color:var(--muted); margin-top:4px}

.kabinet__stat{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px; margin:22px 0 26px;
}
.kstat{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-xs);
}
.kstat b{display:block; font-size:1.5rem; font-weight:800; color:var(--brand-700)}
.kstat span{font-size:.8rem; color:var(--muted)}
/* To'lanishi kerak bo'lgan summa ajralib tursin */
.kstat--tolov{background:#fff8ec; border-color:#f2dcb4}
.kstat--tolov b{color:#b9761b}

/* Bekor qilingan buyurtma — kartaning o'zi ham so'niq ko'rinadi */
.bkarta--bekor{opacity:.72}
.muddat--bekor{background:#fbe9e7; color:#a8362b; font-weight:600}
.linkbtn--bekor{margin-top:12px; color:#a8362b}
.linkbtn--bekor:hover{text-decoration:underline}

/* CRM: bekor qilish qatori */
.crm__bekor{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px}
.crm__bekorbelgi{
  font-size:.82rem; font-weight:600; color:#a8362b;
  background:#fbe9e7; padding:3px 9px; border-radius:999px;
}

.kabinet__grid{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start}
/* Buyurtmalar ro'yxati uzun — profil kartasi ekranda qolib turadi */
@media (min-width:981px){
  .kabinet__grid > .kcard:first-child{position:sticky; top:calc(var(--header-h) + 16px)}
}
.kcard{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:22px; box-shadow:var(--sh-sm);
}
.kcard h2{font-size:1.1rem; font-weight:750; margin-bottom:6px}
.kcard__head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.kcard__izoh{font-size:.78rem; color:var(--muted); margin-top:6px}
.kcard form button[type=submit]{margin-top:18px; width:100%}

/* Buyurtma kartasi */
.bkarta{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; margin-top:14px; background:var(--surface-2);
}
.bkarta__tepa{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.bkarta__tepa h3{font-size:1.02rem; font-weight:700}
.bkarta__tepa code{font-size:.78rem; color:var(--muted)}
.bkarta__narx{text-align:right}
.bkarta__narx b{font-size:1.1rem; color:var(--brand-700)}
.bkarta__qator{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.btag{
  font-size:.76rem; padding:4px 10px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
}
.btag--express{background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700); font-weight:650}

.bqadamlar{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px}
.bqadam{
  display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted);
}
.bqadam span{
  width:10px; height:10px; border-radius:50%; background:var(--line); flex:none;
}
.bqadam.is-otgan{color:var(--ink-2)}
.bqadam.is-otgan span{background:var(--ok)}
.bqadam.is-joriy{color:var(--brand-700); font-weight:700}
.bqadam.is-joriy span{background:var(--brand-600); box-shadow:0 0 0 4px rgba(79,155,255,.22)}

.bosh{text-align:center; padding:34px 10px}
.bosh p{color:var(--muted); margin-bottom:16px}

@media (max-width:900px){
  .kabinet__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .auth{padding:24px 14px 60px}
  .auth__form{padding:22px 18px 24px}
  .kabinet{padding:26px 0 90px}
  .kabinet__stat{grid-template-columns:1fr 1fr}
  .kstat:last-child:nth-child(odd){grid-column:span 2}
  .bkarta__narx{text-align:left}
}

/* Header'dagi akkaunt tugmasi — ism uzun bo'lsa ham kengligi o'smasin.
   Konteyner 1180px: brend + 6 ta havola + 3 ta tugma zo'rg'a sig'adi,
   shuning uchun ism 64px dan uzun bo'lmaydi va tugma ixcham. */
#akkaunt{padding-inline:14px; gap:7px}
.akkaunt__matn{max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.akkaunt__ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8}

/* Modal shaklidagi kichik izoh */
.fhint{font-size:.78rem; color:var(--muted); margin-top:6px}

/* Muddat va shtraf ko'rsatkichlari (kabinet + operator paneli) */
.muddat{
  margin-top:12px; padding:10px 14px; border-radius:var(--r-md);
  background:var(--brand-50); color:var(--brand-800); font-size:.86rem; font-weight:550;
}
.muddat--tez{background:#fff4e5; color:#8a5300}
.muddat--bad{background:#fdecec; color:#a52626}
.muddat--ok{background:#e6f7ee; color:#0f7a49}

.shtraf{
  margin-top:10px; padding:12px 14px; border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:3px; font-size:.85rem;
}
.shtraf b{font-size:.95rem}
.shtraf span{opacity:.85; font-size:.8rem}
.shtraf--foyda{background:#e6f7ee; color:#0f7a49; border:1px solid #b9e7cd}
.shtraf--tolov{background:#fdecec; color:#a52626; border:1px solid #f3c9c9}

.btag--ok{background:#e6f7ee; border-color:#b9e7cd; color:#0f7a49; font-weight:650}
.btag--xavf{background:#fdecec; border-color:#f3c9c9; color:#a52626; font-weight:650}

.admin__holat{margin-top:14px}
.admin__holat select{max-width:320px; cursor:pointer}

/* hidden atributi har doim kuchga kirsin — .auth kabi display:flex li
   sinflar uni bosib ketmasin */
[hidden]{display:none !important}

/* Konsultatsiya bo'limi */
.kons{
  display:grid; grid-template-columns:1fr minmax(0,420px); gap:44px; align-items:center;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:34px 36px; box-shadow:var(--sh-md);
}
.kons__matn h2{font-size:clamp(1.5rem,2.8vw,2.05rem); margin-bottom:12px}
.kons__matn p{color:var(--muted); font-size:1rem; max-width:46ch}
.kons__form .fgroup{margin-top:12px}
.kons__form .grid2{gap:12px}
.kons__form button{margin-top:18px}
.kons__form .fhint{margin-top:12px; text-align:center}
.kons__form .fhint.is-ok{color:#0f7a49; font-weight:650}
.kons__form .fhint.is-bad{color:#a52626; font-weight:650}
@media (max-width:900px){
  .kons{grid-template-columns:1fr; gap:26px; padding:26px 22px}
}

/* ==========================================================================
   24. CRM va ishchi paneli
   ========================================================================== */

.crm__tabs{display:flex; gap:2px; flex:1 1 auto; justify-content:center; min-width:0; overflow:hidden}
.crm__tab{
  padding:9px 14px; border-radius:var(--r-full); white-space:nowrap;
  font-size:.9rem; font-weight:600; color:var(--ink-2);
  transition:background .2s, color .2s;
}
.crm__tab:hover{background:var(--brand-50); color:var(--brand-700)}
.crm__tab.is-active{background:var(--grad); color:#fff}

.crm__stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.kstat--diqqat b{color:#8a5300}
.kstat--diqqat{background:#fff8ef; border-color:#f3ddbd}
.kstat--xavf b{color:#a52626}
.kstat--xavf{background:#fdf0f0; border-color:#f3c9c9}

/* Buyurtma ustidagi boshqaruv (holat + ishchi) */
.crm__boshqaruv{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.crm__boshqaruv label{display:flex; flex-direction:column; gap:5px; flex:1 1 240px}
.crm__boshqaruv span{font-size:.76rem; font-weight:650; color:var(--muted)}
.crm__boshqaruv select{cursor:pointer}

/* Mijozlar jadvali */
.crm__jadval{margin-top:16px; overflow-x:auto}
.crm__t{width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px}
.crm__t th{
  text-align:left; padding:10px 12px; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line);
}
.crm__t td{padding:12px; border-bottom:1px solid var(--line-2)}
.crm__t tr:last-child td{border-bottom:0}
.crm__t tbody tr:hover{background:var(--brand-50)}

/* Ishchilar ro'yxati */
.crm__ishchi{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--line-2);
}
.crm__ishchi:last-child{border-bottom:0}
.crm__ishchi.is-nofaol{opacity:.55}
.crm__ishchi__tugma{display:flex; gap:8px}
.crm__ishchi__tugma .btn{padding:8px 14px; font-size:.85rem}

/* Ishchi paneli — telefonda bosish qulay bo'lsin */
.ishchi__holat{margin-top:12px}
.ishchi__tugma{width:100%; margin-top:14px; min-height:50px; font-size:1rem}

/* Tor ekranda tablar header ostiga tushadi va yon tomonga suriladi */
@media (max-width:1200px){
  .header__inner--crm{flex-wrap:wrap; height:auto; padding-block:10px; gap:10px}
  .header__inner--crm .crm__tabs{
    order:3; flex-basis:100%; justify-content:flex-start;
    overflow-x:auto; gap:6px; scrollbar-width:none;
  }
  .header__inner--crm .crm__tabs::-webkit-scrollbar{display:none}
}

/* Ishchi paneli telefonda: «Yangilash» tugmasi header'ga sig'maydi.
   Panel o'zi har daqiqada yangilanadi, shuning uchun uni yashiramiz. */
@media (max-width:560px){
  #yangila{display:none}
}

/* =========================================================
   Yangiliklar — lenta, karta va ko'rish oynasi
   ========================================================= */

/* Sarlavha va «Barchasi» tugmasi bir qatorda */
.section__head--yon{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; text-align:left; max-width:none;
}
.section__head--yon > div{max-width:56ch}
.section__head--yon .btn{flex:none}

/* Gorizontal lenta. Telefonda keyingi karta yarim ko'rinib turadi —
   bu yerda davomi borligi shundan bilinadi. */
.lenta{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(196px,1fr);
  gap:16px; overflow-x:auto; overflow-y:hidden;
  padding-bottom:6px; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--brand-200) transparent;
}
.lenta::-webkit-scrollbar{height:6px}
.lenta::-webkit-scrollbar-thumb{background:var(--brand-200); border-radius:99px}

/* Alohida sahifadagi to'r */
.ytor{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}

.ykarta{
  scroll-snap-align:start; cursor:pointer; text-align:left;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ykarta:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.ykarta:focus-visible{outline:3px solid var(--brand-300); outline-offset:3px}

/* 9:16 — Instagram va Reels bilan bir xil nisbat */
.ykarta__rasm{
  position:relative; aspect-ratio:9/16; background:var(--brand-50);
  display:grid; place-items:center; overflow:hidden;
}
.ykarta__media{width:100%; height:100%; object-fit:cover; display:block}
/* YouTube hqdefault: 4:3 rasm, tepasi-pastida 12.5% qora chiziq — 1.34 marta
   kattalashtirsak chiziqlar karta chegarasidan tashqariga chiqib ketadi. */
.ykarta__media--yt{transform:scale(1.34)}
.ykarta__bosh{
  font-size:2.6rem; font-weight:800; color:var(--brand-300);
}
.ykarta__play{
  position:absolute; inset:auto auto 10px 10px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(13,27,52,.55); backdrop-filter:blur(6px);
  display:grid; place-items:center;
}
.ykarta__play svg{width:16px; height:16px; fill:#fff; margin-left:2px}
.ykarta__tan{padding:12px 14px 14px}
.ykarta__tan h3{
  font-size:.95rem; font-weight:700; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ykarta__tan time{display:block; margin-top:5px; font-size:.78rem; color:var(--muted)}

/* ---------- Ko'rish oynasi ---------- */
.ymodal{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:20px;
  opacity:0; transition:opacity .2s var(--ease);
}
.ymodal.is-ochiq{opacity:1}
.ymodal__fon{position:absolute; inset:0; background:rgba(8,17,34,.86)}
.ymodal__quti{
  position:relative; z-index:1;
  width:min(420px,100%); max-height:calc(100vh - 40px);
  overflow-y:auto; background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
}
.ymodal__media{
  width:100%; max-height:70vh; object-fit:contain;
  display:block; background:#0a1526;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
/* YouTube pleyeri: kenglikka mos, 16:9 (shorts bo'lsa ham qora chekka bilan) */
.ymodal__yt{
  position:relative; aspect-ratio:16/9; background:#0a1526;
  border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden;
}
.ymodal__yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ymodal__quti:has(.ymodal__yt){width:min(720px,100%)}
.ymodal__matn{padding:16px 18px 20px}
.ymodal__matn h3{font-size:1.05rem; font-weight:800; color:var(--ink)}
.ymodal__matn time{display:block; margin:4px 0 10px; font-size:.8rem; color:var(--muted)}
.ymodal__matn p{font-size:.93rem; line-height:1.65; color:var(--ink-2); white-space:pre-line}
.ymodal__yopish{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(13,27,52,.6); color:#fff; font-size:22px; line-height:1;
  backdrop-filter:blur(6px);
}
.ymodal__yopish:hover{background:rgba(13,27,52,.8)}

@media (max-width:720px){
  .section__head--yon{flex-direction:column; align-items:flex-start; gap:14px}
  .lenta{grid-auto-columns:minmax(152px,1fr); gap:12px}
  .ykarta__tan h3{font-size:.88rem}
}

/* CRM: yangiliklar ro'yxati */
.ysatr{display:flex; gap:14px; align-items:flex-start}
.ysatr__rasm{flex:none; width:64px}
.ymini{
  width:64px; height:96px; object-fit:cover; display:block;
  border-radius:10px; background:var(--brand-50);
}
.ysatr__tan{flex:1; min-width:0}
.ysatr__tan h3{font-size:.95rem; font-weight:700; color:var(--ink)}
.ysatr__tan p{
  margin:4px 0 8px; font-size:.85rem; color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}