/* ============================================================
   Hamroh — Uchko'prik filiali · asosiy uslublar
   Tokenlar: light asosiy, dark faqat ranglarni almashtiradi
   ============================================================ */

/* ------------------------------------------------------------------
   SHRIFTLAR — o'zimizda saqlanadi (Google CDN'ga bog'liq emas)

   Sabab: CDN O'zbekistonda sekin ishlaydi, mobil ilovada esa umuman
   yuklanmaydi. O'zimizda saqlansa — sayt va ilova bir xil ko'rinadi
   va oflaynda ham to'g'ri chiqadi.

   Ikkalasi ham o'zgaruvchan (variable) shrift: bitta fayl barcha
   qalinliklarni beradi.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/inter-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600 900;
  font-display:swap;
  src:url("../fonts/fraunces-latin.069cb90e11a3.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600 900;
  font-display:swap;
  src:url("../fonts/fraunces-latin-ext.a04d353989ad.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#0F2438;
  --teal:#114B5F;
  --teal-light:#1B6B84;
  --gold:#C9A227;
  --gold-light:#E4C766;
  --cream:#F6F3EC;
  --paper:#FFFFFF;
  --slate:#4A5568;
  --up:#2F855A;
  --down:#C0392B;

  --bg:var(--cream);
  --surface:var(--paper);
  --surface-2:#FBF9F4;
  --text:var(--ink);
  --muted:var(--slate);
  --line:rgba(15,36,56,.09);
  --line-strong:rgba(15,36,56,.16);

  /* Konteyner: kompyuterda kengroq, chetlarda bo'sh joy kamroq.
     `clamp` tufayli chekka bo'shliq ekranga qarab o'sadi. */
  --wrap:1400px;
  --wrap-pad:clamp(16px, 3.2vw, 44px);

  --radius:16px;
  --shadow: 0 10px 30px -12px rgba(15,36,56,.25);
  --shadow-lg: 0 30px 60px -28px rgba(15,36,56,.45);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* Raqamlar uchun alohida shrift yuklamaymiz — Inter'ning tabular
     raqamlaridan foydalanamiz (bank saytlaridagi yondashuv). Mono faqat
     tizimniki, qo'shimcha yuklab olinmaydi. */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ---------- TIPOGRAFIYA SHKALASI ----------
     Barcha o'lchamlar ekran kengligiga uzluksiz moslashadi (clamp).
     Shu tufayli 360px va 1920px orasida "sakrash" bo'lmaydi. */
  --t-display: clamp(2.15rem, 1.15rem + 4.4vw, 4.1rem);   /* 34 → 66px  hero */
  --t-h2:      clamp(1.7rem,  1.15rem + 2.3vw, 2.7rem);   /* 27 → 43px  bo'lim */
  --t-h3:      clamp(1.15rem, 1.02rem + .55vw, 1.45rem);  /* 18 → 23px  karta */
  --t-lead:    clamp(1rem,    .95rem + .45vw, 1.18rem);   /* 16 → 19px  yetakchi */
  --t-body:    1rem;                                       /* 16px */
  --t-sm:      .875rem;                                    /* 14px */
  --t-xs:      .78rem;                                     /* 12.5px */

  /* Harf oralig'i — katta sarlavhalarda siqiladi, mayda matnda ochiladi */
  --track-display: -.022em;
  --track-h2:      -.015em;
  --track-body:    .011em;   /* N26 uslubi: o'qishni yengillashtiradi */
  --track-caps:    .12em;
}
html[data-theme="dark"]{
  --bg:#08131F;
  --surface:#0F2130;
  --surface-2:#132838;
  --text:#E8F0F7;
  --muted:#9BB0C4;
  --cream:#0C1A28;
  --paper:#0F2130;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --teal-light:#57B3CE;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 60px -28px rgba(0,0,0,.75);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:120px;}
body{
  font-family:var(--body);
  font-size:var(--t-body);
  font-weight:400;
  letter-spacing:var(--track-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;      /* soxta qalinlik yo'q — faqat haqiqiy og'irliklar */
  overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}

/* Sarlavhalar: bitta shrift oilasi, siqilgan harf oralig'i, zich qator
   (Stripe / N26 yondashuvi — hajm bilan emas, kontrast bilan ierarxiya) */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:var(--track-h2);
  font-optical-sizing:auto;        /* Fraunces katta o'lchamda nozikroq chiziladi */
}

/* Pul, sana, foiz — barcha raqamlar bir xil kenglikda turadi.
   Bank interfeyslarining asosiy qoidasi: raqamlar "sakramasin". */
.hero-stats .stat b, .rate-chip .val, .slider-top output, .range-scale,
.result-main .amount, .legend b, .tile.feature .big-num, .clock-mini,
.hero-card .time-now, .hero-card .day-num, .mini-cal, .step .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
::selection{background:var(--gold-light); color:#0F2438;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px;}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad);}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:120;
  background:linear-gradient(90deg, var(--gold), var(--gold-light), #fff);
  box-shadow:0 0 14px rgba(201,162,39,.7);
  transition:width .1s linear;
}

/* ---------- HEADER ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(15,36,56,.92);
  backdrop-filter:blur(14px) saturate(140%);
  color:#fff;
  box-shadow:var(--shadow);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--wrap-pad); max-width:var(--wrap); margin:0 auto; width:100%;
  gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(155deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; position:relative; overflow:hidden;
  box-shadow:0 8px 22px -10px rgba(201,162,39,.9);
}
.brand .mark::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:sheen 5s ease-in-out infinite;
}
@keyframes sheen{0%,70%{transform:translateX(-120%)} 85%,100%{transform:translateX(120%)}}
/* Admin panelga logotip rasmi yuklangan bo'lsa — oltin fon va yaltirash olinadi */
.brand .mark.has-logo{background:none; box-shadow:none;}
.brand .mark.has-logo::after{display:none;}
.brand .mark.has-logo img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.brand h1{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:.2px;}
.brand span{display:block; font-size:10.5px; color:var(--gold-light); letter-spacing:.14em; text-transform:uppercase; font-weight:600;}
nav.main{display:flex; gap:6px; font-size:14px; font-weight:500;}
nav.main a{
  position:relative; padding:8px 12px; border-radius:999px;
  opacity:.8; transition:opacity .2s, background .2s, color .2s;
}
nav.main a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
nav.main a:hover{opacity:1; color:var(--gold-light);}
nav.main a:hover::after, nav.main a.active::after{transform:scaleX(1);}
nav.main a.active{opacity:1; color:var(--gold-light); background:rgba(201,162,39,.1);}
.top-actions{display:flex; align-items:center; gap:12px;}
.clock-mini{font-family:var(--mono); font-size:12.5px; color:var(--gold-light); text-align:right; line-height:1.3;}
.clock-mini b{display:block; color:#fff; font-size:14px; letter-spacing:.04em;}
.icon-btn{
  width:40px; height:40px; border-radius:12px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  transition:transform .2s var(--ease), background .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.16); transform:translateY(-2px) rotate(-8deg);}
.btn-cta{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#0F2438; font-weight:700;
  padding:11px 20px; border-radius:999px; font-size:14px;
  transition:transform .2s var(--ease), box-shadow .2s; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 8px 20px -10px rgba(201,162,39,.8);
}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(201,162,39,.75);}
.burger{display:none;}

/* ---------- TICKER ---------- */
.ticker-band{
  background:#0A1B2C; color:#fff; border-top:1px solid rgba(255,255,255,.08);
  padding:9px 0; overflow:hidden; position:relative;
}
.ticker-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad); width:100%;
  display:flex; align-items:center; gap:16px; font-family:var(--mono);
}
.ticker-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-light);
  font-weight:600; white-space:nowrap; flex-shrink:0;
}
.ticker-view{
  flex:1; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{display:flex; gap:20px; width:max-content; animation:marquee 34s linear infinite;}
.ticker-view:hover .ticker-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.rate-chip{
  display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap;
  padding:5px 12px; border-radius:8px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.rate-chip .cur{color:var(--gold-light); font-weight:600;}
.rate-chip .val{font-weight:600;}
.rate-chip .dot{width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 8px #4ADE80; animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.ticker-updated{font-size:11px; color:rgba(255,255,255,.45); white-space:nowrap; flex-shrink:0;}

/* ---------- YANGILIKLAR LENTASI ----------
   Bank saytlaridagi "jonli" lenta. Yangiliklar admin panelda kiritiladi,
   tezligi ham o'sha yerdan sozlanadi (--news-speed). */
.news-band{
  background:linear-gradient(90deg, #06111C, #0A1B2C 40%, #06111C);
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden; position:relative;
}
.news-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad); width:100%;
  display:flex; align-items:center; gap:14px; height:38px;
}
.news-label{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  font-size:10.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:#FF6B6B; white-space:nowrap;
}
.news-dot{
  width:7px; height:7px; border-radius:50%; background:#FF4D4D;
  box-shadow:0 0 0 0 rgba(255,77,77,.7); animation:newsPulse 1.8s infinite;
}
@keyframes newsPulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,77,.65)}
  70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}
}
.news-view{
  flex:1; min-width:0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.news-track{
  display:flex; align-items:center; gap:32px; width:max-content;
  animation:newsScroll var(--news-speed, 28s) linear infinite;
}
.news-view:hover .news-track{animation-play-state:paused;}
@keyframes newsScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.news-item{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12.8px; font-weight:500; color:rgba(255,255,255,.72);
  transition:color .2s;
}
.news-item b{font-size:14px; font-weight:400;}
a.news-item:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.news-item.t-good{color:#6EE7A8;}
.news-item.t-warn{color:#F5C860;}
.news-item.t-hot{color:#FF8A8A;}
.news-item.t-hot b{animation:hotBlink 2.2s ease-in-out infinite;}
@keyframes hotBlink{0%,100%{opacity:1} 50%{opacity:.45}}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--teal) 0%, var(--ink) 115%);
  color:#fff; padding:84px 0 96px;
  isolation:isolate;
}
/* ---------- JONLI FON ----------
   Sekin suzuvchi rangli "aurora" dog'lari. Faqat `transform` va `opacity`
   animatsiya qilinadi — bular videokartada bajariladi, shuning uchun
   sahifa sekinlashmaydi. Harakat 30–46 soniya: ko'z charchatmaydi,
   lekin sahifa "tirik" ko'rinadi. */
.aurora{
  position:absolute; inset:-32% -12%; z-index:-2;
  filter:blur(78px); opacity:.6;
  will-change:transform;
}
.aurora i{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
}
.aurora i:nth-child(1){
  width:46vw; height:46vw; left:58%; top:-10%;
  background:radial-gradient(circle at 40% 40%, rgba(228,199,102,.62), rgba(201,162,39,.18) 62%, transparent 74%);
  animation:drift1 34s ease-in-out infinite;
}
.aurora i:nth-child(2){
  width:40vw; height:40vw; left:-8%; top:20%;
  background:radial-gradient(circle at 55% 45%, rgba(45,140,170,.72), rgba(27,107,132,.22) 60%, transparent 74%);
  animation:drift2 42s ease-in-out infinite;
}
.aurora i:nth-child(3){
  width:34vw; height:34vw; left:32%; top:56%;
  background:radial-gradient(circle at 50% 50%, rgba(228,199,102,.34), transparent 70%);
  animation:drift3 46s ease-in-out infinite;
}
/* Ikki qo'shimcha dog' — chuqurlik beradi */
.aurora::before, .aurora::after{
  content:''; position:absolute; border-radius:50%; mix-blend-mode:screen;
}
.aurora::before{
  width:28vw; height:28vw; right:4%; bottom:6%;
  background:radial-gradient(circle, rgba(87,179,206,.4), transparent 68%);
  animation:drift2 38s ease-in-out infinite reverse;
}
.aurora::after{
  width:22vw; height:22vw; left:12%; top:4%;
  background:radial-gradient(circle, rgba(255,243,196,.26), transparent 70%);
  animation:drift3 30s ease-in-out infinite reverse;
}
@keyframes drift1{
  0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.9}
  33%{transform:translate3d(-7%,9%,0) scale(1.14); opacity:1}
  66%{transform:translate3d(4%,-5%,0) scale(.96); opacity:.82}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.85}
  40%{transform:translate3d(11%,-7%,0) scale(1.12); opacity:1}
  70%{transform:translate3d(-5%,6%,0) scale(.94); opacity:.8}
}
@keyframes drift3{
  0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.75}
  50%{transform:translate3d(-9%,-11%,0) scale(1.1); opacity:1}
}

/* Telefonda blur radiusini kamaytiramiz — kuchsiz qurilmalarda ham silliq */
@media(max-width:620px){
  .aurora{filter:blur(52px); opacity:.5;}
  .aurora::before, .aurora::after{display:none;}
}

/* ---------- Bo'limlardagi jonli fon ---------- */
/* Kalkulyator: sekin siljuvchi yumshoq nur */
.calc-section, .video-section, .cta-band{position:relative; isolation:isolate;}
.calc-section::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--teal-light) 16%, transparent), transparent 70%);
  animation:sway 28s ease-in-out infinite;
}
.video-section::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 45% at 85% 12%, rgba(201,162,39,.2), transparent 68%);
  animation:sway 34s ease-in-out infinite reverse;
}
.cta-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(45% 60% at 20% 50%, rgba(228,199,102,.18), transparent 70%);
  animation:sway 24s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6%,3%,0) scale(1.12)}
}
.grid-lines{
  position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000, transparent 78%);
  mask-image:radial-gradient(circle at 50% 30%, #000, transparent 78%);
}
.grain{
  position:absolute; inset:0; z-index:-1; opacity:.22; pointer-events:none;
  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)' opacity='.5'/%3E%3C/svg%3E");
}
/* Hero: chapda matn, o'ngda kalendar. Keng ekranda ustunlar orasi ochiladi,
   lekin matn ustuni cheksiz cho'zilmaydi — o'qish qulay qoladi. */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .82fr);
  gap:clamp(36px, 5vw, 84px);
  align-items:center; position:relative;
}
.hero-grid > div:first-child{max-width:760px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-light); background:rgba(201,162,39,.12);
  border:1px solid rgba(201,162,39,.35); padding:7px 15px; border-radius:999px;
  margin-bottom:22px; backdrop-filter:blur(4px);
}
.eyebrow .live-dot{width:7px; height:7px; border-radius:50%; background:var(--gold-light); animation:pulse 1.8s infinite;}
/* Bosh sarlavha: tekis, qalin sans — bezakli serif emas.
   Yetakchi bank saytlaridagi yondashuv (Revolut, N26, Wise): sarlavha
   grotesk shriftda, siqilgan harf oralig'i bilan — o'qish oson va
   professional ko'rinadi. Kenglik ustunning o'ziga teng. */
.hero h2{
  font-family:var(--body); font-weight:800; font-size:var(--t-display);
  line-height:1.06; letter-spacing:-.032em; margin-bottom:20px;
  text-wrap:balance;   /* qatorlar teng uzunlikda bo'linadi */
  font-feature-settings:"ss01" 1;
}
/* Ajratilgan so'z: oltin gradient + ustidan sekin o'tuvchi yorug'lik to'lqini */
.hero h2 em{
  font-style:normal; position:relative; display:inline-block;
  background:linear-gradient(
    100deg,
    var(--gold) 0%,
    var(--gold-light) 26%,
    #FFF6DA 46%,
    var(--gold-light) 62%,
    var(--gold) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:goldSweep 6.5s ease-in-out infinite;
}
@keyframes goldSweep{
  0%, 12%   {background-position:120% 0;}
  55%, 100% {background-position:-30% 0;}
}
/* Ajratilgan so'z ostidagi nozik oltin chiziq — ta'kid uchun */
.hero h2 em::after{
  content:''; position:absolute; left:2%; right:2%; bottom:.08em; height:.055em;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
  transform:scaleX(0); transform-origin:left;
  animation:emLine 1s .75s var(--ease) forwards;
}
@keyframes emLine{to{transform:scaleX(1);}}

/* So'zlar birin-ketin ko'tarilib chiqadi (JS har bir so'zni o'raydi) */
.hero h2 .w{
  display:inline-block;
  opacity:0;
  transform:translateY(.38em);
  animation:wordUp .72s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 62ms);
}
@keyframes wordUp{
  from{opacity:0; transform:translateY(.38em);}
  to  {opacity:1; transform:none;}
}
/* Yetakchi matn va tugmalar sarlavhadan keyin chiqadi */
.hero .lead, .hero .hero-actions, .hero .hero-stats{
  animation:heroFade .8s var(--ease) both;
}
.hero .lead{animation-delay:.34s;}
.hero .hero-actions{animation-delay:.46s;}
.hero .hero-stats{animation-delay:.58s;}
@keyframes heroFade{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

@media (prefers-reduced-motion: reduce){
  .hero h2 em{animation:none; background-position:0 0;}
  .hero h2 em::after{animation:none; transform:scaleX(1);}
  .hero h2 .w{animation:none; opacity:1; transform:none;}
  .hero .lead, .hero .hero-actions, .hero .hero-stats{animation:none; opacity:1; transform:none;}
}
.hero p.lead{
  font-size:var(--t-lead); line-height:1.55; color:rgba(255,255,255,.84);
  max-width:52ch; margin-bottom:32px; text-wrap:pretty;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.btn-ghost{
  padding:14px 24px; border-radius:999px; border:1.5px solid rgba(255,255,255,.35);
  color:#fff; font-weight:600; font-size:15px; transition:background .2s, border-color .2s, transform .2s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-2px);}
.btn-primary-lg{
  position:relative; overflow:hidden;
  padding:15px 30px; border-radius:999px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#0F2438; font-weight:800; font-size:15.5px;
  box-shadow:0 14px 34px -12px rgba(201,162,39,.75);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.btn-primary-lg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn-primary-lg:hover{transform:translateY(-3px); box-shadow:0 20px 40px -12px rgba(201,162,39,.8);}
.btn-primary-lg:hover::after{transform:translateX(120%);}
.hero-stats{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats .stat{
  padding:14px 18px; border-radius:14px; min-width:132px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px); transition:transform .25s var(--ease), background .25s;
}
.hero-stats .stat:hover{transform:translateY(-4px); background:rgba(255,255,255,.09);}
.hero-stats .stat b{font-family:var(--body); font-weight:700; font-size:26px; display:block; color:var(--gold-light); letter-spacing:-.025em;}
.hero-stats .stat span{font-size:12px; color:rgba(255,255,255,.65);}

.hero-card{
  background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:26px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  transform-style:preserve-3d; transition:transform .3s var(--ease);
}
.hero-card .today{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.hero-card .today .day-num{font-family:var(--display); font-size:46px; font-weight:700; color:#fff; line-height:1;}
.hero-card .today .day-meta{text-align:right;}
.hero-card .today .day-meta b{display:block; font-size:15px; color:var(--gold-light);}
.hero-card .today .day-meta span{font-size:12.5px; color:rgba(255,255,255,.6);}
.hero-card .time-now{
  font-family:var(--mono); font-size:31px; letter-spacing:.05em; color:#fff;
  text-align:center; padding:14px 0; border-top:1px dashed rgba(255,255,255,.2);
  border-bottom:1px dashed rgba(255,255,255,.2); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.office-state{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; font-weight:600; margin-bottom:14px;
  padding:7px 12px; border-radius:999px; width:fit-content; margin-inline:auto;
  text-align:center;
}
.office-state.open{background:rgba(74,222,128,.14); color:#86EFAC; border:1px solid rgba(74,222,128,.3);}
.office-state.closed{background:rgba(248,113,113,.12); color:#FCA5A5; border:1px solid rgba(248,113,113,.28);}
.mini-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-family:var(--mono); font-size:11.5px;}
.mini-cal .dow{color:rgba(255,255,255,.4); text-align:center; padding-bottom:4px;}
.mini-cal .d{
  text-align:center; padding:6px 0; border-radius:8px; color:rgba(255,255,255,.75);
  transition:background .18s, transform .18s var(--ease);
}
.mini-cal .d:hover{background:rgba(255,255,255,.1); transform:scale(1.12);}
.mini-cal .d.weekend{color:var(--gold-light);}
.mini-cal .d.today{background:var(--gold); color:#0F2438; font-weight:700; box-shadow:0 6px 16px -6px rgba(201,162,39,.9);}
.mini-cal .d.pad{opacity:0;}

/* ---------- SECTIONS ---------- */
section{padding:82px 0;}
.section-head{max-width:min(680px, 100%); margin-bottom:46px;}
.section-head.center{margin-inline:auto; text-align:center;}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:12px;
}
.kicker::before{content:''; width:26px; height:2px; background:var(--gold); border-radius:2px;}
.section-head.center .kicker::after{content:''; width:26px; height:2px; background:var(--gold); border-radius:2px;}
.section-head h3{
  font-family:var(--display); font-size:var(--t-h2); font-weight:700;
  color:var(--text); margin-bottom:12px; letter-spacing:var(--track-h2);
  line-height:1.1; text-wrap:balance;
}
.section-head p{color:var(--muted); font-size:var(--t-lead); line-height:1.6; max-width:60ch; text-wrap:pretty;}
.section-head.center p{margin-inline:auto;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0ms);}
.reveal.in{opacity:1; transform:none;}

/* ---------- BENTO ---------- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px;}
.tile{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line-strong);}
.tile::before{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,162,39,.16), transparent 65%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .3s;
}
.tile:hover::before{opacity:1;}
.tile .ic{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(155deg,var(--teal-light),var(--teal));
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; color:#fff;
  box-shadow:0 10px 22px -12px rgba(17,75,95,.9);
}
.tile h4{font-size:var(--t-h3); font-weight:700; margin-bottom:8px; font-family:var(--display); line-height:1.2;}
.tile p{font-size:var(--t-sm); color:var(--muted); line-height:1.62;}
.tile.feature{
  grid-column:span 5; grid-row:span 2;
  background:linear-gradient(160deg, var(--teal) 0%, var(--ink) 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between; border-color:transparent;
}
.tile.feature h4{color:#fff;}
.tile.feature p{color:rgba(255,255,255,.72);}
.tile.feature .big-num{
  font-family:var(--display); font-size:clamp(44px,5vw,64px); font-weight:900; line-height:1;
  background:linear-gradient(100deg,var(--gold-light),#FFF6D6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:18px 0 6px;
}
.tile.feature .rings{position:absolute; right:-70px; bottom:-70px; width:230px; height:230px; opacity:.3;}
.tile.feature .rings span{position:absolute; inset:0; border:1px solid var(--gold-light); border-radius:50%;}
.tile.feature .rings span:nth-child(2){inset:26px;}
.tile.feature .rings span:nth-child(3){inset:52px;}
.tile.b2{grid-column:span 7;}
.tile.b3{grid-column:span 4;}
.tile.b4{grid-column:span 3;}
.badge-mini{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-light); background:color-mix(in srgb, var(--teal-light) 12%, transparent);
  padding:4px 10px; border-radius:999px; margin-bottom:12px;
}

/* ---------- PURPOSES ---------- */
.purpose-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.purpose{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:26px 20px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.purpose::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.purpose:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line-strong);}
.purpose:hover::after{transform:scaleX(1);}
.purpose .em{font-size:32px; margin-bottom:12px; display:inline-block; transition:transform .35s var(--ease);}
.purpose:hover .em{transform:scale(1.18) rotate(-8deg);}
.purpose span{font-size:13.5px; font-weight:600; color:var(--text); display:block;}
.purpose small{font-size:12px; color:var(--muted); display:block; margin-top:6px;}

/* ---------- CALCULATOR ---------- */
.calc-section{
  background:
    radial-gradient(900px 400px at 12% 0%, color-mix(in srgb, var(--teal-light) 12%, transparent), transparent 60%),
    var(--surface-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.calc-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:start;}
.calc-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px;
  box-shadow:var(--shadow);
}
.slider-block{margin-bottom:26px;}
.slider-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:10px;}
.slider-top label{font-size:13.5px; font-weight:600; color:var(--muted);}
.slider-top output{font-family:var(--body); font-size:19px; font-weight:700; color:var(--text); letter-spacing:-.02em;}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:var(--line); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(155deg,var(--gold-light),var(--gold));
  border:3px solid var(--surface); box-shadow:0 4px 14px -4px rgba(201,162,39,.9);
  transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:3px solid var(--surface);
  background:var(--gold); box-shadow:0 4px 14px -4px rgba(201,162,39,.9);
}
.range-scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:8px; font-family:var(--mono);}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.chip{
  font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
  transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--gold); color:var(--text); transform:translateY(-2px);}
.chip.on{background:var(--teal); color:#fff; border-color:var(--teal);}

.result-card{
  background:linear-gradient(160deg, var(--ink), #0A1B2C); color:#fff;
  border-radius:22px; padding:28px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.result-card::before{
  content:''; position:absolute; width:280px; height:280px; right:-90px; top:-90px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.3), transparent 70%);
}
.result-main{text-align:center; margin-bottom:22px; position:relative;}
.result-main small{font-size:12.5px; color:rgba(255,255,255,.6); letter-spacing:.05em; text-transform:uppercase;}
.result-main .amount{
  font-family:var(--body); font-size:clamp(30px,4.4vw,42px); font-weight:750; color:var(--gold-light);
  margin-top:6px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.result-main .amount span{font-size:16px; color:rgba(255,255,255,.6); font-weight:400;}
.donut-row{display:flex; align-items:center; gap:22px; margin-bottom:20px; position:relative;}
.donut{flex-shrink:0;}
.donut circle{transition:stroke-dasharray .6s var(--ease);}
.legend{display:flex; flex-direction:column; gap:12px; flex:1; font-size:13px;}
.legend div{display:flex; align-items:center; gap:9px; justify-content:space-between;}
.legend .lk{display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.7);}
.legend .dotc{width:10px; height:10px; border-radius:3px;}
.legend b{font-family:var(--body); font-weight:650; letter-spacing:-.01em;}
.result-note{font-size:12px; color:rgba(255,255,255,.5); line-height:1.55; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; position:relative;}
.result-card .btn-primary-lg{width:100%; margin-bottom:14px; position:relative;}

/* ---------- TIMELINE ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative;}
.steps::before{
  content:''; position:absolute; left:0; right:0; top:26px; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}
.step{position:relative; padding-top:64px;}
.step .num{
  position:absolute; top:0; left:0;
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:17px; font-weight:600;
  background:var(--surface); color:var(--teal-light);
  border:2px solid var(--line-strong); box-shadow:var(--shadow);
  transition:all .35s var(--ease);
}
.step:hover .num{
  background:linear-gradient(155deg,var(--gold-light),var(--gold));
  color:#0F2438; border-color:transparent; transform:translateY(-4px) rotate(-6deg);
}
.step h5{font-size:16px; font-weight:700; margin-bottom:8px; font-family:var(--display);}
.step p{font-size:13.5px; color:var(--muted);}
.step .tick{font-size:12px; color:var(--teal-light); font-weight:600; margin-top:10px; display:inline-block;}

/* ---------- TESTIMONIALS ---------- */
.tst-section{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tst{
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px;
  box-shadow:var(--shadow); position:relative; transition:transform .3s var(--ease), box-shadow .3s;
}
.tst:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.tst .quote{font-family:var(--display); font-size:56px; line-height:.6; color:var(--gold); opacity:.35; margin-bottom:14px;}
.tst p{font-size:14.5px; color:var(--text); margin-bottom:18px;}
.tst .who{display:flex; align-items:center; gap:12px;}
.tst .av{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(155deg,var(--teal-light),var(--teal));
}
.tst .who b{display:block; font-size:14px;}
.tst .who span{font-size:12.5px; color:var(--muted);}
.stars{color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:12px;}

/* ---------- VIDEO ---------- */
.video-section{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.video-section::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(700px 340px at 85% 15%, rgba(201,162,39,.16), transparent 65%);
}
.video-section .wrap{position:relative;}
.video-section .section-head h3{color:#fff;}
.video-section .section-head p{color:rgba(255,255,255,.65);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.video-wrap{
  border-radius:20px; overflow:hidden; background:#000; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8); transition:transform .3s var(--ease);
}
.video-wrap:hover{transform:translateY(-5px);}
.video-wrap iframe, .video-wrap video{width:100%; height:100%; border:0;}
.video-empty{color:rgba(255,255,255,.55); font-size:14px; text-align:center; padding:30px; line-height:1.7;}

/* ---------- FAQ ---------- */
.faq{max-width:min(900px, 100%); margin:0 auto;}
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  margin-bottom:12px; overflow:hidden; transition:border-color .25s, box-shadow .25s;
}
.faq details[open]{border-color:var(--gold); box-shadow:var(--shadow);}
.faq summary{
  list-style:none; cursor:pointer; padding:19px 22px; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; font-family:var(--mono); font-size:21px; color:var(--gold); flex-shrink:0;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg);}
.faq .a{padding:0 22px 20px; font-size:14px; color:var(--muted); line-height:1.7;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px);}
.info-row{
  display:flex; gap:14px; margin-bottom:14px; padding:14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); transition:transform .25s var(--ease), border-color .25s;
}
.info-row:hover{transform:translateX(6px); border-color:var(--gold);}
.info-row .ic{
  width:40px; height:40px; border-radius:12px; background:var(--bg); color:var(--teal-light);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.info-row b{display:block; font-size:14px; margin-bottom:2px;}
.info-row span{font-size:13.5px; color:var(--muted);}
.social-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.social-btn{
  display:flex; align-items:center; gap:8px; padding:11px 17px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:600;
  transition:transform .25s var(--ease), background .2s, border-color .2s;
}
.social-btn:hover{transform:translateY(-3px); border-color:var(--gold); background:var(--surface-2);}
.map-box{
  position:relative; overflow:hidden;
  border-radius:20px; border:1px solid var(--line); min-height:330px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
}
.map-box .streets{position:absolute; inset:0; opacity:.5;}
.map-inner{position:relative; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-lg);}
.map-box .pin{font-size:32px; margin-bottom:8px; animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.map-box b{display:block; font-family:var(--display); font-size:17px; margin-bottom:6px;}
.map-box span{font-size:13px; color:var(--muted);}
.map-box .go{display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--teal-light);}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--teal), var(--ink) 70%);
  color:#fff; position:relative; overflow:hidden; padding:64px 0;
}
.cta-band::before{
  content:''; position:absolute; inset:0; opacity:.14;
  background-image:radial-gradient(circle at 1px 1px, var(--gold-light) 1.5px, transparent 0);
  background-size:26px 26px;
}
.cta-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.cta-inner h3{font-family:var(--display); font-size:clamp(24px,3vw,34px); margin-bottom:8px;}
.cta-inner p{color:rgba(255,255,255,.72); font-size:15px;}

/* ---------- TRUST STRIP ---------- */
.trust-strip{background:var(--surface); border-bottom:1px solid var(--line);}
.trust-strip .wrap{display:flex; justify-content:space-between; padding:22px 24px; flex-wrap:wrap; gap:18px;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--teal-light);}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink); color:rgba(255,255,255,.6); padding:52px 0 26px; font-size:13.5px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1);}
.foot-grid h6{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px;}
.foot-grid a{display:block; color:rgba(255,255,255,.6); margin-bottom:9px; transition:color .2s, transform .2s var(--ease);}
.foot-grid a:hover{color:var(--gold-light); transform:translateX(4px);}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.foot-brand h1{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:22px; font-size:12.5px;}
footer .legal{max-width:60ch; line-height:1.7; color:rgba(255,255,255,.5);}

/* ---------- FLOATING BUTTONS ---------- */
.fab-stack{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:10px;}
.fab{
  width:48px; height:48px; border-radius:50%; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); transition:transform .25s var(--ease), opacity .3s;
}
.fab:hover{transform:translateY(-4px) scale(1.06);}
.fab.tg{background:linear-gradient(155deg,#37AEE2,#1E96C8); color:#fff;}
.fab.call{background:linear-gradient(155deg,var(--gold-light),var(--gold)); color:#0F2438;}
.fab.top{background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,.15); opacity:0; pointer-events:none;}
.fab.top.show{opacity:1; pointer-events:auto;}

/* ---------- MODALS ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(6,14,24,.66); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.overlay.open{display:flex; animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal{
  background:var(--surface); color:var(--text); border-radius:20px; width:100%; max-width:540px; max-height:88vh; overflow-y:auto;
  padding:32px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); position:relative;
  animation:popIn .3s var(--ease);
  border:1px solid var(--line);
}
@keyframes popIn{from{opacity:0; transform:translateY(20px) scale(.97)} to{opacity:1; transform:none}}
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer;
  transition:transform .25s var(--ease), background .2s;
}
.modal-close:hover{transform:rotate(90deg); background:var(--line);}
.modal h3{font-family:var(--display); font-size:23px; margin-bottom:6px;}
.modal .sub{font-size:13.5px; color:var(--muted); margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text);}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14px; background:var(--bg); color:var(--text);
  transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--teal-light); background:var(--surface); outline:none;}
.field .errorlist{list-style:none; color:#F56565; font-size:12.5px; margin-top:5px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.btn-submit{
  width:100%; padding:14px; border-radius:12px; background:var(--teal); color:#fff;
  font-weight:700; font-size:15px; margin-top:6px; transition:background .2s, transform .2s var(--ease);
}
.btn-submit:hover{background:var(--ink); transform:translateY(-2px);}
html[data-theme="dark"] .btn-submit:hover{background:var(--teal-light);}
.form-msg{font-size:13.5px; margin-top:12px; padding:11px 13px; border-radius:10px; display:none;}
.form-msg.ok{display:block; background:rgba(47,133,90,.14); color:#48BB78;}
.form-msg.err{display:block; background:rgba(192,57,43,.14); color:#F56565;}
.steps-dots{display:flex; gap:6px; margin-bottom:20px;}
.steps-dots i{height:4px; flex:1; border-radius:2px; background:var(--line);}
.steps-dots i.on{background:var(--gold);}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:12px; font-size:13.5px;
  z-index:200; box-shadow:var(--shadow-lg); opacity:0; transition:all .3s var(--ease);
  border:1px solid rgba(255,255,255,.12); pointer-events:none;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ============================================================
   BANNER KARUSEL
   Avtomatik aylanadi, qo'l bilan ham suriladi. Asosi — `scroll-snap`,
   ya'ni surish brauzerning o'zi tomonidan bajariladi (silliq va tabiiy),
   JS faqat avtomatik siljish va nuqtalarni boshqaradi.
   ============================================================ */
.banner-section{padding:0; margin-top:-28px; position:relative; z-index:5;}
.carousel{position:relative;}
.carousel-track{
  display:flex; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:4px 0 6px;
}
.carousel-track::-webkit-scrollbar{display:none;}

.banner-slide{
  position:relative; overflow:hidden; flex:0 0 100%;
  scroll-snap-align:center;
  display:flex; align-items:center; gap:22px;
  min-height:180px; padding:26px 30px;
  border-radius:22px; color:#fff;
  background:linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, #000) 100%);
  box-shadow:var(--shadow-lg);
}
.banner-slide::after{
  content:''; position:absolute; width:320px; height:320px; border-radius:50%;
  right:-90px; top:-120px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.banner-slide.tappable{cursor:pointer; transition:transform .25s var(--ease);}
.banner-slide.tappable:hover{transform:translateY(-3px);}
.banner-img{flex:0 0 42%; max-width:300px; border-radius:16px; overflow:hidden; position:relative;}
.banner-img img{width:100%; height:100%; max-height:150px; object-fit:cover; display:block;}
.banner-body{flex:1; min-width:0; position:relative;}
.banner-badge{
  display:inline-block; font-size:10.5px; font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; background:rgba(255,255,255,.2);
  padding:5px 11px; border-radius:7px; margin-bottom:10px;
}
.banner-slide h3{
  font-family:var(--display); font-size:clamp(20px,2.5vw,29px); font-weight:700;
  line-height:1.15; letter-spacing:-.02em; margin-bottom:8px; color:#fff;
}
.banner-slide p{font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.55; max-width:52ch;}
.banner-go{
  display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700;
  color:var(--gold-light);
}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; padding-bottom:4px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .2s var(--ease), background .2s, opacity .2s;
}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.08); background:var(--surface-2);}
.carousel-arrow.prev{left:-14px;}
.carousel-arrow.next{right:-14px;}
.carousel-arrow[disabled]{opacity:.3; pointer-events:none;}

.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.carousel-dots button{
  width:8px; height:8px; border-radius:99px; padding:0;
  background:var(--line-strong); transition:all .3s var(--ease);
}
.carousel-dots button.on{width:26px; background:var(--gold);}

/* ============================================================
   XIZMATLAR: To'lov va Mobil ilova — yonma-yon
   Kompyuterda ikki teng ustun, telefonda ustma-ust.
   ============================================================ */
.services-section{
  background:var(--surface-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:clamp(20px, 2.4vw, 32px);
  align-items:start;
}
.service-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:24px; padding:clamp(20px, 2.4vw, 32px);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  min-width:0;
}
.service-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:12px;}
.service-ic{
  flex:none; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(150deg, rgba(201,162,39,.18), rgba(27,107,132,.16));
}
.service-head .kicker{margin-bottom:6px;}
.service-head h3{
  font-family:var(--display); font-size:clamp(19px, 1.6vw, 24px);
  font-weight:700; letter-spacing:var(--track-h2); line-height:1.2;
}
.service-lead{
  color:var(--muted); font-size:14.5px; line-height:1.6;
  margin-bottom:20px; max-width:46ch;
}

/* --- Mobil ilova kartasi: to'q fon --- */
.service-card.app-card{
  background:linear-gradient(155deg, var(--teal) 0%, var(--ink) 92%);
  border-color:transparent; color:#fff; position:relative; overflow:hidden;
}
.service-card.app-card::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(460px 260px at 88% 8%, rgba(201,162,39,.24), transparent 66%);
}
.app-card > *{position:relative;}
.app-card .service-ic{background:rgba(255,255,255,.12);}
.app-card .kicker{color:var(--gold-light);}
.app-card .service-head h3{color:#fff;}
.app-card .service-lead{color:rgba(255,255,255,.78);}
.app-card .app-buttons{display:flex; flex-direction:column; gap:11px;}
.app-card .store-btn{width:100%;}
.app-mini{display:flex; align-items:center; gap:16px; margin-top:20px;}
.app-mini-phone{
  flex:none; width:52px; height:92px; border-radius:11px;
  border:2.5px solid rgba(255,255,255,.22);
  background:linear-gradient(170deg, rgba(27,107,132,.5), rgba(10,22,34,.7));
  padding:9px 6px 6px; display:flex; flex-direction:column; gap:5px;
  animation:phoneFloat 7s ease-in-out infinite;
}
.app-mini-phone i{display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.2);}
.app-mini-phone i:nth-child(2){background:rgba(228,199,102,.6); height:14px;}
.app-mini-phone i:nth-child(3){height:22px; margin-top:auto; background:rgba(255,255,255,.12);}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(1.5deg)}}
.app-card .app-note{
  font-size:12.2px; color:rgba(255,255,255,.55); line-height:1.6; margin:0;
}

/* --- To'lov qutisi (endi karta ichida) --- */
.pay-box{
  margin-top:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:18px;
  padding:20px;
}
.pay-form label{display:block; font-size:13.5px; font-weight:650; color:var(--muted); margin-bottom:8px;}
.phone-field{
  display:flex; align-items:stretch;
  border:1.5px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--bg); transition:border-color .2s, box-shadow .2s;
}
.phone-field:focus-within{
  border-color:var(--teal-light);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--teal-light) 18%, transparent);
}
.phone-prefix{
  display:flex; align-items:center; padding:0 14px;
  background:var(--surface-2); border-right:1.5px solid var(--line);
  font-size:16px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.phone-field input{
  flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text);
  padding:15px 14px; font-family:inherit; font-size:18px; font-weight:600;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.pay-hint{font-size:12.5px; color:var(--muted); margin:9px 2px 18px;}
.pay-submit{width:100%;}
.pay-submit[disabled]{opacity:.45; pointer-events:none; box-shadow:none;}

/* --- Natija --- */
.pay-card{
  background:linear-gradient(160deg, var(--ink), #0A1B2C); color:#fff;
  border-radius:20px; padding:24px; position:relative; overflow:hidden;
}
.pay-card::before{
  content:''; position:absolute; width:260px; height:260px; right:-90px; top:-100px;
  border-radius:50%; background:radial-gradient(circle, rgba(201,162,39,.28), transparent 70%);
}
.pay-card .pc-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.55); font-weight:650;
}
.pay-card .pc-name{
  font-family:var(--display); font-size:23px; font-weight:700;
  margin:4px 0 20px; position:relative; letter-spacing:-.02em;
}
.pay-id-row{
  display:flex; align-items:center; gap:12px; position:relative;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:14px 16px;
}
.pay-id{
  flex:1; min-width:0; font-size:23px; font-weight:750; color:var(--gold-light);
  letter-spacing:.03em; font-variant-numeric:tabular-nums;
  word-break:break-all; line-height:1.25;
}
.copy-btn{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:10px 15px; border-radius:11px; min-height:42px;
  background:var(--gold); color:#3A2C05; font-size:13.5px; font-weight:700;
  transition:transform .18s var(--ease), background .2s;
}
.copy-btn:hover{transform:translateY(-2px);}
.copy-btn.done{background:#4ADE80; color:#06331A;}
.pay-phone-note{font-size:12.5px; color:rgba(255,255,255,.5); margin-top:12px; position:relative;}

.paynet-box{margin-top:22px; padding-top:22px; border-top:1px solid var(--line);}
.paynet-box h4{
  font-family:var(--display); font-size:17px; font-weight:700;
  margin-bottom:14px; display:flex; align-items:center; gap:9px;
}
.paynet-steps{list-style:none; counter-reset:pn;}
.paynet-steps li{
  counter-increment:pn; position:relative; padding-left:38px; margin-bottom:13px;
  font-size:14px; color:var(--muted); line-height:1.55;
}
.paynet-steps li::before{
  content:counter(pn); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff; font-size:12.5px; font-weight:700;
}
html[data-theme="dark"] .paynet-steps li::before{background:var(--teal-light); color:#052330;}
.paynet-note{
  font-size:12.5px; color:var(--muted); background:var(--bg);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:16px;
}
.pay-again{
  width:100%; margin-top:16px; padding:13px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:14px; font-weight:650; color:var(--muted); min-height:46px;
  transition:border-color .2s, color .2s;
}
.pay-again:hover{border-color:var(--gold); color:var(--text);}

.pay-empty{
  text-align:center; padding:26px 20px;
  background:rgba(192,57,43,.07); border:1px solid rgba(192,57,43,.2);
  border-radius:16px;
}
.pay-empty .pe-ic{font-size:38px; margin-bottom:10px;}
.pay-empty b{display:block; font-size:15.5px; margin-bottom:6px; color:var(--text);}
.pay-empty p{font-size:13.5px; color:var(--muted); line-height:1.55;}

/* ============================================================
   ILOVANI YUKLAB OLISH
   ============================================================ */
.app-section{
  background:linear-gradient(155deg, var(--teal) 0%, var(--ink) 90%);
  color:#fff; position:relative; overflow:hidden;
}
.app-section::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(650px 340px at 88% 20%, rgba(201,162,39,.22), transparent 66%);
}
.app-grid{
  position:relative; display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(300px, .8fr);
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.app-title{font-family:var(--display); font-size:var(--t-h2); font-weight:700; letter-spacing:var(--track-h2); margin-bottom:14px; color:#fff;}
.app-lead{font-size:var(--t-lead); color:rgba(255,255,255,.8); line-height:1.6; max-width:48ch; margin-bottom:28px;}
.app-buttons{display:flex; gap:14px; flex-wrap:wrap;}
.store-btn{
  display:inline-flex; align-items:center; gap:13px;
  padding:14px 20px; border-radius:16px; min-height:64px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; text-align:left;
  transition:transform .22s var(--ease), background .22s, border-color .22s;
}
.store-btn:hover{transform:translateY(-3px); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35);}
.store-btn.android{background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:#3A2C05; border-color:transparent; box-shadow:0 14px 30px -14px rgba(201,162,39,.85);}
.store-btn.android:hover{background:linear-gradient(135deg, #F0D888, var(--gold-light));}
.store-btn.disabled{opacity:.5; pointer-events:none;}
.store-ic{font-size:26px; line-height:1; flex:none;}
.store-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.store-txt small{font-size:11px; opacity:.75; font-weight:600;}
.store-txt b{font-size:15.5px; font-weight:750; letter-spacing:-.01em; white-space:nowrap;}
.store-meta{
  flex:none; font-size:11px; font-weight:650; opacity:.7;
  padding-left:12px; margin-left:2px; border-left:1px solid currentColor;
  font-variant-numeric:tabular-nums;
}
.app-note{font-size:12.5px; color:rgba(255,255,255,.55); margin-top:20px; line-height:1.6; max-width:46ch;}

/* --- Telefon maketi --- */
.app-preview{display:flex; justify-content:center;}
.phone-frame{
  position:relative; width:236px; height:470px; flex:none;
  background:#0A1622; border:9px solid #1B2C3D; border-radius:38px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  animation:phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-14px) rotate(1deg)}}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:88px; height:20px; background:#1B2C3D; border-radius:0 0 12px 12px; z-index:3;
}
.phone-screen{
  position:absolute; inset:0; padding:26px 13px 13px;
  background:linear-gradient(170deg, #123049, #0A1622 62%);
  display:flex; flex-direction:column; gap:11px;
}
.ps-bar{display:flex; align-items:center; gap:8px; padding:0 3px;}
.ps-mark{
  width:24px; height:24px; border-radius:8px; flex:none; overflow:hidden;
  background:linear-gradient(150deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.ps-mark img{width:100%; height:100%; object-fit:cover;}
.ps-name{font-size:12px; font-weight:700; color:#fff;}
.ps-hero{
  background:linear-gradient(150deg, rgba(27,107,132,.6), rgba(15,36,56,.6));
  border:1px solid rgba(255,255,255,.1); border-radius:15px; padding:14px;
}
.ps-line{height:8px; border-radius:4px; background:rgba(255,255,255,.22); margin-bottom:7px;}
.ps-line.w60{width:60%;} .ps-line.w90{width:90%; background:rgba(228,199,102,.6);} .ps-line.w40{width:40%;}
.ps-stats{display:flex; gap:6px; margin-top:12px;}
.ps-stats i{flex:1; height:30px; border-radius:8px; background:rgba(255,255,255,.1);}
.ps-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1;}
.ps-cards i{border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);}
.ps-tabs{
  display:flex; gap:5px; padding:9px 5px 3px;
  border-top:1px solid rgba(255,255,255,.1);
}
.ps-tabs i{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.16);}
.ps-tabs i.on{background:var(--gold);}

/* --- iPhone yo'riqnomasi --- */
.ios-steps{list-style:none; counter-reset:ios; margin:8px 0 22px;}
.ios-steps li{
  counter-increment:ios; position:relative; padding-left:44px; margin-bottom:18px;
}
.ios-steps li::before{
  content:counter(ios); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff; font-size:14px; font-weight:700;
}
html[data-theme="dark"] .ios-steps li::before{background:var(--teal-light); color:#052330;}
.ios-steps b{display:block; font-size:14.5px; margin-bottom:4px;}
.ios-steps span{display:block; font-size:13px; color:var(--muted); line-height:1.55;}
.ios-ic{font-size:15px;}
.ios-url{
  display:block; margin-top:8px; padding:9px 12px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  font-family:var(--mono); font-size:12.5px; color:var(--teal-light);
  word-break:break-all; user-select:all;
}
.ios-note{font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.6; text-align:center;}

/* ============================================================
   RESPONSIVE
   Sinovdan o'tkazilgan kengliklar:
     360 · 390 · 414  (telefon)
     768 · 834        (planshet)
     1280 · 1440 · 1920 (kompyuter)
   ============================================================ */

/* Gorizontal siljish umuman bo'lmasin */
html{overflow-x:hidden;}
body{max-width:100%;}
/* Uzun so'z va havolalar blokdan chiqib ketmasin */
p, li, h1, h2, h3, h4, h5, h6, span, b, a, output, summary{overflow-wrap:break-word;}

/* Kompyuterda sarlavha juda uzun qatorga cho'zilmasin */
@media(min-width:901px){
  .hero h2{max-width:20ch;}
  .hero p.lead{max-width:48ch;}
}

/* ---------- Katta noutbuk va pastroq: bento qayta teriladi ---------- */
@media(max-width:1000px){
  .tile.feature{grid-column:span 12; grid-row:auto;}
  .tile.b2{grid-column:span 12;}
  .tile.b3, .tile.b4{grid-column:span 6;}
  .calc-grid{grid-template-columns:1fr;}
}

/* ---------- Planshet: 2 ustun (1 ustun juda cho'zilib ketadi) ---------- */
@media(min-width:621px) and (max-width:1000px){
  .tst-grid{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .tst-grid > .tst:nth-child(3){grid-column:span 2; max-width:560px; margin-inline:auto; width:100%;}
}
@media(max-width:620px){
  .tst-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
}

/* ---------- Hamburger menyu ---------- */
@media(max-width:900px){
  /* nav.main — `.topbar` ICHIDAGI element. Qatlamlash o'sha topbar konteksti
     ichida hal bo'ladi, shuning uchun logotip va tugmalar guruhining O'ZIGA
     nav'dan (45) yuqori z-index kerak. Aks holda menyu ochilganda "hamburger"
     tugmasi menyu ostida qolib, menyuni yopib bo'lmaydi. */
  .topbar{position:relative; z-index:46;}
  .brand, .top-actions{position:relative; z-index:46;}

  /* MUHIM: `backdrop-filter` o'z bolalari uchun yangi qamrov bloki hosil qiladi,
     shu sababli ichidagi `position:fixed` menyu ekranga emas, SARLAVHAGA
     nisbatan joylashib, ingichka chiziq bo'lib qolardi. Telefonda blur'ni
     o'chiramiz — fon baribir deyarli shaffof emas (.92), farqi bilinmaydi. */
  header.site{-webkit-backdrop-filter:none; backdrop-filter:none;}

  nav.main{
    position:fixed; inset:0; background:var(--ink);
    flex-direction:column; gap:8px; padding:96px 22px 30px; font-size:17px;
    transform:translateX(100%); transition:transform .35s var(--ease); z-index:45;
    overflow-y:auto; overscroll-behavior:contain;
  }
  nav.main.open{transform:none;}
  nav.main a{padding:15px 16px; border-radius:12px; background:rgba(255,255,255,.05); opacity:1;}
  nav.main a::after{display:none;}
  .burger{display:flex;}
  .clock-mini{display:none;}

  .hero{padding:56px 0 64px;}
  .hero-grid{grid-template-columns:1fr; gap:34px;}
  .hero p.lead{max-width:none;}
  .purpose-strip{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .steps::before{display:none;}
  .contact-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:24px;}
  .app-grid{grid-template-columns:1fr; gap:36px;}
  .app-preview{order:-1;}
  .phone-frame{width:198px; height:396px;}
  .carousel-arrow{display:none;}   /* telefonda barmoq bilan suriladi */
  .btn-cta span.lbl{display:none;}
  .ticker-updated{display:none;}
  .news-inner{padding:0 16px; gap:10px; height:34px;}
  .news-label{font-size:9.5px; letter-spacing:.1em;}
  .news-item{font-size:12px;}
  .news-track{gap:24px;}
  footer .legal{max-width:none;}

  /* Barmoq bilan bosiladigan nishonlar kamida 36px bo'lsin */
  .chip, .social-btn{min-height:36px; display:inline-flex; align-items:center; justify-content:center;}
  .faq summary{min-height:48px;}
}

/* ---------- Telefon ---------- */
@media(max-width:620px){
  .wrap{padding:0 16px;}
  section{padding:52px 0;}
  .section-head{margin-bottom:32px;}

  /* Sarlavha paneli — nom uzun bo'lsa ham buzilmasin */
  .topbar{padding:11px 16px; gap:10px; flex-wrap:nowrap;}
  .brand{min-width:0; flex:1;}
  .brand > div{min-width:0;}
  .brand .mark{width:38px; height:38px; font-size:18px; border-radius:11px; flex-shrink:0;}
  .brand h1{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .brand span{font-size:9px; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .top-actions{gap:7px; flex-shrink:0;}
  .icon-btn{width:38px; height:38px; font-size:15px; border-radius:11px;}
  .btn-cta{padding:10px 13px; font-size:14px;}

  .ticker-inner{padding:0 16px; gap:12px;}

  .hero{padding:44px 0 56px;}
  .eyebrow{margin-bottom:16px; font-size:11px; padding:6px 12px;}
  .hero p.lead{font-size:15.5px; margin-bottom:26px;}
  .hero-actions{gap:10px; margin-bottom:30px;}
  .hero-actions .btn-primary-lg, .hero-actions .btn-ghost{flex:1; justify-content:center; text-align:center;}
  .btn-primary-lg{padding:14px 20px; font-size:15px;}
  .btn-ghost{padding:13px 18px; font-size:14.5px;}
  .hero-stats{gap:10px;}
  .hero-stats .stat{flex:1; min-width:calc(50% - 5px); padding:12px 14px;}
  .hero-stats .stat b{font-size:21px;}

  .hero-card{padding:20px; border-radius:18px;}
  .hero-card .today .day-num{font-size:38px;}
  .hero-card .time-now{font-size:26px; padding:12px 0;}
  .office-state{font-size:11.5px; padding:7px 10px;}
  .mini-cal{font-size:10.5px; gap:3px;}
  .mini-cal .d{padding:5px 0;}

  .tile{padding:20px; border-radius:17px;}
  .tile.b3, .tile.b4{grid-column:span 12;}
  .purpose{padding:20px 14px;}
  .purpose .em{font-size:27px;}

  .calc-panel, .result-card{padding:20px; border-radius:18px;}
  .slider-top{flex-wrap:wrap; gap:4px;}
  .slider-top output{font-size:16.5px;}
  /* Katta summa kartadan chiqib ketmasin */
  .result-main .amount{font-size:clamp(24px,7.4vw,34px);}
  .result-main .amount span{font-size:14px;}
  .donut-row{flex-direction:column; align-items:stretch; gap:16px;}
  .donut{margin-inline:auto;}
  .chip{padding:7px 11px; font-size:12px;}

  .steps{grid-template-columns:1fr; row-gap:22px;}
  .step{padding-top:0; padding-left:66px; min-height:54px;}
  .step .num{width:48px; height:48px; font-size:15px;}

  .faq summary{padding:16px 17px; font-size:14.5px;}
  .faq .a{padding:0 17px 17px;}

  .map-box{min-height:270px; padding:16px;}
  .map-inner{padding:18px;}
  .cta-band{padding:48px 0;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .cta-inner > div:last-child{width:100%;}
  .cta-inner .btn-primary-lg, .cta-inner .btn-ghost{flex:1; justify-content:center;}

  .trust-strip .wrap{justify-content:flex-start; gap:12px 18px; padding:18px 16px;}
  .trust-item{font-size:12.5px;}

  /* --- Banner karusel telefonda --- */
  .banner-section{margin-top:-18px;}
  .carousel-track{gap:12px;}
  .banner-slide{
    flex-direction:column; align-items:stretch; gap:14px;
    min-height:0; padding:20px; border-radius:18px;
  }
  .banner-img{flex:none; max-width:none;}
  .banner-img img{max-height:130px;}
  .banner-slide p{font-size:13.5px;}

  /* --- Xizmat kartalari telefonda --- */
  .service-card{padding:18px; border-radius:19px;}
  .service-head{gap:11px;}
  .service-ic{width:40px; height:40px; font-size:19px; border-radius:12px;}
  .service-lead{font-size:13.6px; margin-bottom:16px;}
  .app-mini{gap:13px; margin-top:16px;}
  .app-mini-phone{width:44px; height:78px;}

  /* --- To'lov telefonda --- */
  .pay-box{padding:16px; border-radius:15px;}
  .phone-prefix{padding:0 11px; font-size:15px;}
  .phone-field input{font-size:16px; padding:14px 12px;}
  .pay-card{padding:19px; border-radius:17px;}
  .pay-card .pc-name{font-size:20px;}
  .pay-id-row{flex-wrap:wrap; gap:10px;}
  .pay-id{font-size:20px; flex-basis:100%;}
  .copy-btn{width:100%; justify-content:center;}
  .paynet-steps li{font-size:13.4px; padding-left:34px;}

  /* --- Ilova bo'limi telefonda --- */
  .app-buttons{flex-direction:column;}
  .store-btn{width:100%; min-height:60px;}
  .store-txt b{white-space:normal;}
  .app-note{max-width:none;}

  .modal{padding:24px 20px; border-radius:18px;}
  .fab-stack{right:14px; bottom:14px; gap:8px;}
  .fab{width:44px; height:44px; font-size:17px;}
  .foot-bottom{justify-content:center; text-align:center;}
}

/* ---------- Kichik telefon (iPhone SE, 360px va pastroq) ---------- */
@media(max-width:400px){
  .purpose-strip{grid-template-columns:1fr;}
  .purpose{display:flex; align-items:center; gap:14px; text-align:left; padding:15px 16px;}
  .purpose .em{font-size:24px; margin-bottom:0; flex-shrink:0;}
  .hero-stats .stat{min-width:100%;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn-primary-lg, .hero-actions .btn-ghost{width:100%;}
  .brand span{display:none;}
  .result-main .amount{font-size:26px;}
  .social-row{gap:8px;}
  .social-btn{flex:1; justify-content:center; padding:11px 12px; font-size:13px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none;}
}