:root {
  --bg: #fbfaf6;
  --paper: #fff;
  --ink: #0d1b2e;
  --mute: #5b6878;
  --line: #e6e3da;
  --blue: #1d4ed8;
  --blue2: #06b6d4;
  --acc: #f59e0b;
  --grid: rgba(29, 78, 216, 0.05);
  --gr: linear-gradient(90deg, #1d4ed8, #06b6d4);
  --d: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --m: "IBM Plex Mono", ui-monospace, monospace;
  --b: "Barlow", system-ui, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f171b;
    --paper: #162127;
    --ink: #eef3f1;
    --mute: #9db0b6;
    --line: #26363d;
    --blue: #6aa5ee;
    --blue2: #8fbcf3;
    --grid: rgba(106, 165, 238, 0.07);
  }
}
:root[data-theme="dark"] {
  --bg: #0f171b;
  --paper: #162127;
  --ink: #eef3f1;
  --mute: #9db0b6;
  --line: #26363d;
  --blue: #6aa5ee;
  --blue2: #8fbcf3;
  --grid: rgba(106, 165, 238, 0.07);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
  height: 100%;
}
* {
  box-sizing: border-box;
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--b);
  overflow-x: hidden;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}
a {
  color: inherit;
  text-decoration: none;
}
.w {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.lab {
  font: 500 12px var(--m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
h2 {
  font: 400 clamp(44px, 7vw, 88px)/0.95 var(--d);
  letter-spacing: 0.01em;
  margin: 10px 0 18px;
}
h2 em {
  font-style: normal;
  background: var(--gr);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub {
  color: var(--mute);
  max-width: 620px;
}
section {
  padding: 96px 0;
  position: relative;
}
#fx {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4, #f59e0b);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 70;
}
#ld {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--paper);
  z-index: 100;
  display: grid;
  place-items: center;
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
}
#ld.x {
  opacity: 0;
  visibility: hidden;
}
/* chiqishda logotip ozgina kattalashib, yumshoq yo'qoladi */
#ld.x .lw {
  transform: scale(1.06);
}
/* yuklanish ekrani: uy konturi chiziladi -> rang bilan to'ladi -> derazalar yonadi.
   Animatsiya o'chirilgan qurilmalarda (reduced motion) logotip tayyor holda ko'rinadi. */
#ld .lw {
  display: grid;
  justify-items: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#ld .lg {
  display: block;
  width: 150px;
  height: auto;
  overflow: visible;
}
#ld .lh {
  fill: url(#lgg);
  stroke: url(#lgg);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation:
    ldraw 1.9s cubic-bezier(0.55, 0.1, 0.35, 1) both,
    lfill 0.8s ease 1.45s both;
}
@keyframes ldraw {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes lfill {
  from {
    fill-opacity: 0;
  }
}
#ld .lwn rect {
  fill: url(#lgg);
  transform-box: fill-box;
  transform-origin: center;
  animation: lwin 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
#ld .lwn rect:nth-child(1) {
  animation-delay: 1.95s;
}
#ld .lwn rect:nth-child(2) {
  animation-delay: 2.15s;
}
#ld .lwn rect:nth-child(3) {
  animation-delay: 2.35s;
}
#ld .lwn rect:nth-child(4) {
  animation-delay: 2.55s;
}
@keyframes lwin {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}
/* sahifa sekin yuklansa: derazalarda navbat bilan chiroq yonib-o'chadi */
#ld .lwl rect {
  fill: #fbbf24;
  opacity: 0;
  animation: lglow 2.4s ease-in-out 3.3s infinite;
}
#ld .lwl rect:nth-child(2) {
  animation-delay: 3.9s;
}
#ld .lwl rect:nth-child(3) {
  animation-delay: 4.5s;
}
#ld .lwl rect:nth-child(4) {
  animation-delay: 5.1s;
}
@keyframes lglow {
  40%,
  60% {
    opacity: 0.85;
  }
}
#ld b {
  font: 400 40px/1 var(--d);
  letter-spacing: 0.32em;
  margin: 18px 0 0 0.32em;
  color: var(--ink);
  animation: lup 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2.1s both;
}
@keyframes lup {
  from {
    opacity: 0;
    transform: translateY(10px);
    letter-spacing: 0.6em;
  }
}
#ld i {
  display: block;
  width: 132px;
  height: 3px;
  border-radius: 3px;
  background: var(--gr);
  margin-top: 12px;
  animation: ln 3s cubic-bezier(0.6, 0, 0.3, 1) both;
  transform-origin: 0 50%;
}
@keyframes ln {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* header */
header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header .w {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}
.logo {
  font: 400 34px var(--d);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo s {
  width: 12px;
  height: 12px;
  background: var(--acc);
  border: 0;
  transform: rotate(45deg);
  text-decoration: none;
}
nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font: 500 12px var(--m);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
nav a {
  white-space: nowrap;
  color: var(--mute);
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
nav a:hover {
  color: var(--blue);
}
}
.btn {
  display: inline-block;
  background: var(--gr);
  border-color: transparent !important;
  color: #fff;
  font: 500 13px var(--m);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
  background: var(--gr);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(29, 78, 216, 0.6);
}
}
/* sarlavhadagi "Murojaat": yonidagi til / ob-havo tugmalari kabi dumaloq */
.hc .btn {
  border-radius: 30px;
  background-origin: border-box; /* chetlarda gradientning teskari rangi ko'rinmasin */
}
.btn.o {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink) !important;
  
}
@media (hover: hover) and (pointer: fine) {
.btn.o:hover {
  background-color: #0d1627 ;
  color: #fff;
  border-color: transparent !important;
}
}
/* hero */
#hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background:
    radial-gradient(500px 380px at 82% 25%, rgba(6, 182, 212, 0.16), transparent 70%),
    radial-gradient(460px 340px at 10% 85%, rgba(245, 158, 11, 0.15), transparent 70%);
}
#hero {
  padding: 64px 0 80px;
  position: relative;
  min-height: calc(100vh - 66px);
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
}
#hero .w {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.t {
  font: 400 clamp(70px, 12.5vw, 190px)/0.86 var(--d);
  letter-spacing: 0.005em;
  margin: 18px 0 26px;
}
.t span {
  display: block;
  overflow: hidden;
}
.t span i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.go .t span i {
  transform: none;
}
.go .t span:nth-child(2) i {
  transition-delay: 0.12s;
}
.go .t span:nth-child(3) i {
  transition-delay: 0.24s;
  background: var(--gr);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;

}
.bp {
  width: 100%;
  height: auto;
  color: var(--blue);
  filter: drop-shadow(0 10px 24px rgba(29, 78, 216, 0.18));
}
.bp path,
.bp rect,
.bp line,
.bp circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: dr 3.2s 0.6s ease forwards;
}
.bp .dm {
  stroke-width: 1;
  opacity: 0.6;
  stroke-dasharray: 4 4;
  animation: fd 2s 2.4s ease forwards;
  stroke-dashoffset: 0;
  opacity: 0;
}
.bp text {
  font: 11px var(--m);
  fill: currentColor;
  opacity: 0;
  animation: fd 1.5s 3s forwards;
}
@keyframes dr {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fd {
  to {
    opacity: 0.8;
  }
}
/* stats */
.stats {
  background: linear-gradient(180deg, #fff, #f4f7ff);
  border-block: 1px solid var(--line);
  padding: 0;
}
.stats .w {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
}
.st {
  padding: 34px 28px 38px;
  border-left: 1px solid var(--line);
}
.st:first-child {
  border-left: 0;
}
.st .n {
  font: 400 clamp(72px, 9vw, 128px)/1 var(--d);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 6px;
}
.st .n sup {
  font-size: 0.42em;
  color: var(--acc);
  line-height: 1.15;
}
.st p {
  color: var(--mute);
  font-size: 15px;
}
/* marquee */
.mq {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  padding: 16px 0;
}
.mq div {
  display: flex;
  width: max-content;
  animation: mq 38s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
.mq:hover div {
  animation-play-state: paused;
}
}
.mq span {
  font: 400 30px var(--d);
  letter-spacing: 0.04em;
  color: var(--mute);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
}
.mq span::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--acc);
  border: 0;
  transform: rotate(45deg);
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
/* grids / cards */
.g {
  display: grid;
  gap: 22px;
  margin-top: 46px;
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.cd {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px 26px;
  transition:
    transform 0.35s,
    box-shadow 0.35s,
    border-color 0.35s;
  transform-style: preserve-3d;
}
@media (hover: hover) and (pointer: fine) {
.cd:hover {
  border-color: var(--blue);
  box-shadow: 0 18px 40px -20px rgba(29, 78, 216, 0.45);
}
}
.cd .no {
  font: 400 56px/1 var(--d);
  background: linear-gradient(135deg, #1d4ed8, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cd h3 {
  font: 400 30px/1.05 var(--d);
  letter-spacing: 0.02em;
  margin: 14px 0 8px;
}
.cd p {
  color: var(--mute);
  font-size: 15.5px;
}
.cd .ic {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.1), rgba(245, 158, 11, 0.18));
  border: 1.5px solid var(--blue);
  display: grid;
  place-items: center;
  color: var(--blue);
  font: 400 22px var(--d);
}
/* timeline */
.tl {
  position: relative;
  margin-top: 50px;
  padding-left: 46px;
  max-width: 820px;
}
.tl::before,
.tl::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
}
.tl::before {
  background: var(--line);
}
.tl::after {
  background: linear-gradient(var(--blue), var(--blue2));
  transform: scaleY(var(--p, 0));
  transform-origin: 0 0;
}
.ti {
  position: relative;
  padding: 0 0 38px;
}
.ti::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 6px;
  width: 16px;
  height: 16px;
  background: var(--acc);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--acc);
  transform: rotate(45deg);
}
.ti .lab {
  display: block;
  margin-bottom: 4px;
}
.ti h3 {
  font: 400 34px var(--d);
  letter-spacing: 0.02em;
}
.ti p {
  color: var(--mute);
}
/* ai */
.ai {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: start;
}
.chat {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(18, 31, 36, 0.4);
}
.ch {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 13px var(--m);
}
.ch::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2fa866;
  animation: pl 1.8s infinite;
}
@keyframes pl {
  50% {
    opacity: 0.35;
  }
}
.cb {
  height: 300px;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mg {
  max-width: 84%;
  padding: 11px 15px;
  font-size: 15.5px;
  border: 1px solid var(--line);
  animation: up 0.4s ease;
}
.mg.a {
  background: var(--bg);
}
.mg.u {
  align-self: flex-end;
  background: var(--gr);
  border-color: transparent;
  color: #fff;
}
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.cp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
}
.cp button {
  font: 500 12px var(--m);
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 7px 11px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.cp button:hover {
  background: var(--blue);
  color: #fff;
}
}
.cf {
  display: flex;
  border-top: 1px solid var(--line);
}
.cf input {
  flex: 1;
  border: 0;
  padding: 16px 20px;
  font: inherit;
  background: transparent;
  color: var(--ink);
  outline: 0;
  min-width: 0;
}
.cf button {
  border: 0;
  background: var(--gr);
  color: #fff;
  padding: 0 24px;
  font: 500 13px var(--m);
  cursor: pointer;
}
.note {
  font-size: 13px;
  color: var(--mute);
  padding: 0 20px 14px;
}
/* faq */
.fq {
  max-width: 860px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.fq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.fq summary {
  cursor: pointer;
  list-style: none;
  font: 400 30px/1.1 var(--d);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  letter-spacing: 0.02em;
}
.fq summary::-webkit-details-marker {
  display: none;
}
.fq summary::after {
  content: "+";
  color: var(--blue);
  transition: transform 0.3s;
}
.fq details[open] summary::after {
  transform: rotate(45deg);
}
.fq p {
  color: var(--mute);
  margin-top: 12px;
  max-width: 720px;
}
/* contact */
.ct {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
}
.ct ul {
  list-style: none;
  padding: 0;
  margin-top: 26px;
  display: grid;
  gap: 14px;
}
.ct li {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.ct li b {
  display: block;
  font: 500 12px var(--m);
  letter-spacing: 0.12em;
  color: var(--blue);
  text-transform: uppercase;
}
form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px;
  display: grid;
  gap: 14px;
}
form input,
form select,
form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  outline: 0;
}
form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--blue);
}
/* reveal */
.rv {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(5px);
  transition:
    opacity 0.9s,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.9s;
  transition-delay: var(--d, 0s);
}
.rv.v {
  opacity: 1;
  transform: none;
  filter: none;
}
/* header controls */
.hc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--paper);
  color: var(--ink);
  font: 500 13px var(--m);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) {
.pill:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px -8px rgba(29, 78, 216, 0.5);
}
}
/* til bayroqlari (images/uz.png, russia.png, uk.png) */
.fg {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
  pointer-events: none;
  user-select: none;
}
.dd li.on {
  background: var(--bg);
  color: var(--blue);
  font-weight: 600;
}
/* mobil menyuda ham ro'yxat matni ko'rinsin (aks holda oq fonda oq matn) */
.dd ul {
  color: var(--ink);
}
.wx {
  cursor: pointer;
  padding: 0 16px 0 10px;
}
.wx span {
  display: grid;
  line-height: 1.05;
}
.wx small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  font: 500 10px var(--m);
  letter-spacing: 0.14em;
  color: var(--acc);
}
.wx b {
  font: 400 20px var(--d);
  letter-spacing: 0.04em;
}
.sun {
  animation: sp 14s linear infinite;
}
@keyframes sp {
  to {
    transform: rotate(360deg);
  }
}
.dd {
  position: relative;
}
.dd ul {
  list-style: none;
  padding: 6px;
  position: absolute;
  top: 50px;
  left: 0;
  min-width: 170px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(13, 27, 46, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 0.25s;
}
.dd.o ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dd li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 15px;
}
@media (hover: hover) and (pointer: fine) {
.dd li:hover {
  background: var(--bg);
  color: var(--blue);
}
}
.th {
  width: 66px;
  height: 42px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.th i {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 16px;
  color: #0d1b2e;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme="dark"] .th i {
  transform: translateX(24px);
}
/* floating menu */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.fab .it {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 0.05s);
}
.fab.open .it {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.it span {
  background: #0d1b2e;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 10px 18px;
  font: 500 12px var(--m);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.it b {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(13, 27, 46, 0.5);
  transition: transform 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.it:hover b {
  transform: scale(1.1);
}
}
.mn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #0d1b2e;
  font: 400 34px/1 var(--d);
  box-shadow: 0 14px 30px -8px rgba(245, 158, 11, 0.75);
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}
.mn::before {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.5);
  animation: rg 2.2s infinite;
}
@keyframes rg {
  from {
    transform: scale(0.9);
    opacity: 1;
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}
.fab.open .mn {
  transform: rotate(90deg);
}
.fab.open .mn::before {
  display: none;
}
.mn em {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font: 600 12px var(--b);
  display: grid;
  place-items: center;
  font-style: normal;
  border: 2px solid var(--paper);
}
.stats {
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent), transparent) !important;
}
/* loyiha kartalari */
.pj {
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  transition:
    transform 0.4s,
    box-shadow 0.4s,
    border-color 0.4s;
}
@media (hover: hover) and (pointer: fine) {
.pj:hover {
  transform: translateY(-6px);
  border-color: var(--acc);
  box-shadow: 0 26px 50px -26px rgba(13, 27, 46, 0.5);
}
}
.pj .im {
  position: relative;
  aspect-ratio: 1.45;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg);
}
.pj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.pj:hover img {
  transform: scale(1.06);
}
}
.bd {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #0d1b2e;
  font: 600 11px var(--m);
  letter-spacing: 0.14em;
  padding: 8px 13px;
  text-transform: uppercase;
  border-radius: 3px;
}
.bd.r {
  left: auto;
  right: 14px;
  background: rgba(13, 27, 46, 0.8);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.pb {
  padding: 24px 26px 26px;
}
.pb .lab {
  color: var(--acc);
  font-size: 11px;
}
.pb h3 {
  font: 400 36px/1.05 var(--d);
  letter-spacing: 0.02em;
  margin: 8px 0 4px;
}
.sz {
  color: var(--mute);
  font-size: 17px;
}
.tg {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  border-block: 1px solid var(--line);
  padding: 14px 0;
  margin: 18px 0;
  font: 500 14px var(--b);
}
.tg span::before {
  content: "•";
  color: var(--acc);
  margin-right: 7px;
}
.pf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pf p {
  font: 500 11px var(--m);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.pf p b {
  display: block;
  font: 400 30px/1 var(--d);
  letter-spacing: 0.08em;
  color: var(--blue);
}
.pf button {
  font: 500 12px var(--m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--acc);
  border-radius: 30px;
  padding: 11px 24px;
  cursor: pointer;
  transition: 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.pf button:hover {
  background: var(--acc);
  color: #0d1b2e;
}
}
#lb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  background: rgba(8, 16, 28, 0.93);
  display: none;
  place-items: center;
}
#lb.o {
  display: grid;
}
#lb img {
  max-width: 90vw;
  max-height: 84vh;
  border-radius: 10px;
  animation: up 0.35s ease;
}
#lb button {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
#lbp {
  left: 20px;
}
#lbn {
  right: 20px;
}
#lbx {
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: 20px;
}
/* gamburger, menyu, footer, effektlar */
.hb {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 0;
}
.hb i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
#mm {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  background: #0d1627;
  color: #fff;
  padding: calc(34px + env(safe-area-inset-top, 0px)) 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mm.o {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mx {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 20px;
  background: none;
  border: 0;
  color: var(--acc);
  font-size: 28px;
  cursor: pointer;
}
.mt {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  flex-wrap: wrap;
}
#mm .pill {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  height: 44px;
}
#mm .dd ul {
  left: 0;
  margin-left: 0;
}
.ml {
  display: grid;
  gap: 60px;
  margin-bottom: 40px;
}
.ml a {
  font: 600 17px var(--b);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-18px);
  transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mm.o .ml a {
  opacity: 1;
  transform: none;
}
#mm.o .ml a:nth-child(2) {
  transition-delay: 0.05s;
}
#mm.o .ml a:nth-child(3) {
  transition-delay: 0.1s;
}
#mm.o .ml a:nth-child(4) {
  transition-delay: 0.15s;
}
#mm.o .ml a:nth-child(5) {
  transition-delay: 0.2s;
}
#mm.o .ml a:nth-child(6) {
  transition-delay: 0.25s;
}
.ml .mc {
  color: var(--acc);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ms,
.so {
  display: flex;
  gap: 14px;
}
.ms a,
.so a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 158, 11, 0.16);
  color: #e6cf9a;
  transition: 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.ms a:hover,
.so a:hover {
  background: var(--acc);
  color: #0d1b2e;
  transform: translateY(-3px);
}
}
footer {
  background: #0d1b2e;
  color: #b9c4cf;
  padding: 70px 0 26px;
  font-size: 15px;
}
.f5 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.2fr;
  gap: 40px;
}
.fl2 {
  font: 400 22px var(--d);
  letter-spacing: 0.06em;
  color: #fff;
}
.fl2 b {
  font-size: 46px;
  color: var(--acc);
  font-weight: 400;
  margin-right: 8px;
  letter-spacing: 0.08em;
}
.fb p {
  margin: 14px 0 22px;
  max-width: 320px;
  line-height: 1.8;
}
footer h4 {
  font: 600 11px var(--m);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 18px;
}
footer .f5 > div > a {
  display: block;
  padding: 6px 0;
  transition: 0.2s;
}
@media (hover: hover) and (pointer: fine) {
footer .f5 > div > a:hover {
  color: var(--acc);
  transform: translateX(4px);
}
}
.dt {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  display: grid;
  gap: 8px;
}
.dt b {
  font: 500 16px var(--m);
  color: #fff;
}
.fz {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  display: grid;
  gap: 3px;
}
#up {
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: #0d1b2e;
  color: var(--acc);
  font-size: 22px;
  cursor: pointer;
  z-index: 54;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s;
}
#up.s {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
#up:hover {
  background: var(--acc);
  color: #0d1b2e;
}
}
.band {
  overflow: hidden;
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding: 16px 0;
}
.band div {
  display: flex;
  gap: 36px;
  width: max-content;
  white-space: nowrap;
  font: 400 clamp(64px, 9vw, 124px)/1.05 var(--d);
  will-change: transform;
}
.band div:first-child {
  color: var(--ink);
}
.band div + div {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
}
.band span:nth-child(even) {
  color: var(--acc);
  -webkit-text-stroke: 0;
  font-size: 0.5em;
  align-self: center;
}
/* yozuvli lenta faqat kompyuterda: telefon va planshetda ko'rsatilmaydi */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .band {
    display: none;
  }
}
/* ob-havo paneli */
.wxd .wp {
  position: absolute;
  top: 50px;
  left: 0;
  width: 290px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 14px 12px;
  box-shadow: 0 28px 60px -22px rgba(13, 27, 46, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 0.28s;
  z-index: 5;
}
.wxd.o .wp {
  opacity: 1;
  visibility: visible;
  transform: none;
}
#mm .mt {
  position: relative;
}
#mm .wxd {
  position: static;
}
#mm .wxd .wp {
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0 auto;
  width: min(290px, calc(100vw - 40px));
}
.wxd ul {
  position: static !important;
  opacity: 1 !important;
  visibility: inherit !important;
  transform: none !important;
  box-shadow: none;
  border: 0;
  background: none;
  padding: 0;
  min-width: 0;
  border-radius: 0;
  margin: 0 !important;
  list-style: none;
}
.ws {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 6px 14px;
}
.wb {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wbt {
  font: 400 44px/1 var(--d);
  letter-spacing: 0.02em;
}
.wmm {
  font: 500 13px var(--m);
  color: var(--mute);
}
.wcd {
  color: var(--mute);
  font-size: 14px;
}
.wh {
  font: 500 11px var(--m);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d97706;
  padding: 12px 6px 10px;
  border-top: 1px solid var(--line);
}
.wl {
  max-height: 236px;
  overflow-y: auto;
  padding-right: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: #f59e0b var(--line);
}
.wl::-webkit-scrollbar {
  width: 8px;
}
.wl::-webkit-scrollbar-track {
  background: var(--line);
  border-radius: 8px;
}
.wl::-webkit-scrollbar-thumb {
  background: linear-gradient(#fcd34d, #f59e0b);
  border-radius: 8px;
}
.wl li {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px !important;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  transition: background 0.2s;
}
@media (hover: hover) and (pointer: fine) {
.wl li:hover {
  background: var(--bg) !important;
}
}
.wl li.on {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
  font-weight: 600;
}
.wl li b {
  font: 500 14px var(--m);
}
/* aloqa */
#aloqa h2 {
  font-size: clamp(52px, 7vw, 92px);
}
.ln {
  font: 400 clamp(30px, 3.4vw, 42px)/1.1 var(--d);
  letter-spacing: 0.02em;
  margin: 6px 0 26px;
}
.ln mark {
  background: none;
  color: var(--acc);
}
.ph {
  display: grid;
  gap: 2px;
}
.ph a {
  font: 400 clamp(38px, 4.4vw, 54px)/1.1 var(--d);
  letter-spacing: 0.04em;
  color: #d97706;
  transition: 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.ph a:hover {
  color: var(--blue);
  transform: translateX(6px);
}
}
.cap {
  font: 500 11px var(--m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 8px;
}
.dv {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--acc);
  margin: 22px 0 24px;
}
.ci {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}
.ci li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  color: var(--mute);
  border: 0;
  padding: 0;
}
.ci li span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  flex: none;
}
#fm {
  background: none;
  border: 0;
  padding: 0;
  gap: 18px;
}
.r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
#fm label {
  display: grid;
  gap: 8px;
}
#fm label em {
  font: 500 11px var(--m);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  font-style: normal;
  padding-left: 6px;
}
#fm input,
#fm select,
#fm textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 15px 22px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
#fm textarea {
  border-radius: 24px;
  resize: vertical;
  min-height: 130px;
}
#fm select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
}
#fm input::placeholder,
#fm textarea::placeholder {
  color: #9aa6b2;
}
#fm input:focus,
#fm select:focus,
#fm textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.sb {
  border: 0;
  border-radius: 30px;
  padding: 17px 24px;
  cursor: pointer;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #0d1b2e;
  font: 600 13px var(--m);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.sb:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -12px rgba(245, 158, 11, 0.8);
}
}
/* jonli fon */
#bgx {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#bgx i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.o1 {
  left: -12vmax;
  top: -10vmax;
  background: rgba(29, 78, 216, 0.2);
  animation: d1 26s ease-in-out infinite alternate;
}
.o2 {
  right: -14vmax;
  top: 20vh;
  background: rgba(6, 182, 212, 0.2);
  animation: d2 32s ease-in-out infinite alternate;
}
.o3 {
  left: 25vw;
  bottom: -22vmax;
  background: rgba(245, 158, 11, 0.18);
  animation: d3 29s ease-in-out infinite alternate;
}
@keyframes d1 {
  to {
    transform: translate(18vmax, 14vmax) scale(1.2);
  }
}
@keyframes d2 {
  to {
    transform: translate(-16vmax, -10vmax) scale(0.85);
  }
}
@keyframes d3 {
  to {
    transform: translate(-20vmax, -12vmax) scale(1.15);
  }
}
#bgc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@media (max-width: 1200px) {
  .hb {
    display: grid;
  }
  nav {
    display: none;
  }
  .hc {
    margin-left: auto;
  }
}
@media (max-width: 960px) {
  .f5 {
    grid-template-columns: 1fr 1fr;
  }
  #hero .w,
  .ai,
  .ct {
    grid-template-columns: 1fr;
  }
  .g4 {
    grid-template-columns: 1fr 1fr;
  }
  .g3 {
    grid-template-columns: 1fr;
  }
  .stats .w {
    grid-template-columns: 1fr 1fr;
  }
  .st:nth-child(3) {
    border-left: 0;
  }
  .st {
    border-top: 1px solid var(--line);
  }
}
/* menyudagi kun/tun tugmasi faqat telefonda kerak (kattaroq ekranda u sarlavhada turadi) */
#mm .th {
  display: none;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
#mm .th i {
  top: 5px;
}
@media (max-width: 700px) {
  /* telefon sarlavhasi: logotip · til · gamburger */
  .hc .wxd,
  .hc .th,
  .hc .btn {
    display: none;
  }
  #mm .th {
    display: block;
  }
  /* til ro'yxati ekrandan chiqib ketmasin: o'ng chetga tekislanadi */
  .hc .dd ul {
    left: auto;
    right: 0;
  }
}
@media (max-width: 560px) {
  .r2 {
    grid-template-columns: 1fr;
  }
  .f5 {
    grid-template-columns: 1fr;
  }
  .g4 {
    grid-template-columns: 1fr;
  }
  .w {
    padding: 0 18px;
  }
  section {
    padding: 70px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .rv,
  .t span i {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .bp * {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

/* test rejimi banneri — sayt ranglariga moslashadi (kunduzgi/tungi rejim bilan birga o'zgaradi) */
.tb {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 51;
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4, #f59e0b);
}
.tbi {
  display: flex;
  width: max-content;
  animation: tbm 45s linear infinite;
}
.tbi span {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font: 500 11px/1 var(--m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}
.tbi span::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--acc);
  transform: rotate(45deg);
}
@keyframes tbm {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tbi {
    animation-duration: 140s;
  }
}

/* afzalliklar kartalari: hover effekti */
#afzal .cd {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s,
    box-shadow 0.45s,
    border-color 0.35s;
}
#afzal .cd::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(29, 78, 216, 0.14),
    rgba(6, 182, 212, 0.1) 40%,
    transparent 70%
  );
}
#afzal .cd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4, #f59e0b);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover {
  border-color: var(--blue);
  box-shadow:
    0 26px 50px -24px rgba(29, 78, 216, 0.55),
    0 0 0 1px rgba(29, 78, 216, 0.15);
}
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover::before {
  opacity: 1;
}
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover::after {
  transform: scaleX(1);
}
}
#afzal .cd .ic {
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.35s,
    color 0.35s,
    box-shadow 0.35s;
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover .ic {
  background: var(--gr);
  color: #fff;
  border-color: transparent;
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 12px 24px -10px rgba(29, 78, 216, 0.7);
}
}
#afzal .cd h3 {
  transition:
    transform 0.35s,
    color 0.35s;
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover h3 {
  transform: translateX(6px);
  color: var(--blue);
}
}
#afzal .cd p {
  transition: transform 0.35s 0.04s;
}
@media (hover: hover) and (pointer: fine) {
#afzal .cd:hover p {
  transform: translateX(6px);
}
}

/* realistik fasad */
.bp .wn {
  stroke-width: 1.1;
}
.bp .fn {
  stroke-width: 0.8;
}
.bp .gl {
  fill: url(#gg);
  fill-opacity: 0;
  animation:
    dr 3.2s 0.6s ease forwards,
    gf 1.2s 3s forwards;
}
.bp .wl {
  fill: currentColor;
  fill-opacity: 0;
  animation:
    dr 3.2s 0.6s ease forwards,
    gw 1.2s 3s forwards;
}
.bp .tk {
  stroke-width: 1.2;
  opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: fd 2s 2.4s forwards;
}
.bp rect.lt {
  fill: #f59e0b;
  fill-opacity: 0;
  stroke: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
  transition: fill-opacity 0.5s;
}
.bp rect.lt.a {
  animation: lt 7s calc(4s + var(--t, 0s)) infinite;
}
@media (hover: hover) and (pointer: fine) {
.bp:hover rect.lt {
  animation: none;
  fill-opacity: 0.55;
}
}
@keyframes gf {
  to {
    fill-opacity: 1;
  }
}
@keyframes gw {
  to {
    fill-opacity: 0.07;
  }
}
@keyframes lt {
  0%,
  100% {
    fill-opacity: 0;
  }
  35%,
  65% {
    fill-opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bp rect.lt.a {
    animation: none;
  }
}


/* ===== telefon uchun mustahkamlash ===== */
html {
  -webkit-text-size-adjust: 100%;
}
a,
button,
.pill,
.dd li,
.wl li,
.pj .im,
summary,
.cp button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(29, 78, 216, 0.15);
}
.dd li,
.wl li,
.pj .im,
.pill {
  cursor: pointer;
}
@media (max-width: 900px), (pointer: coarse) {
  /* og'ir effektlar telefonni qotiradi — o'chiramiz */
  #bgx i,
  #bgc {
    display: none;
  }
  header,
  .tb {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper);
  }
  .cd,
  .pj,
  .pj img {
    will-change: auto;
  }
}

/* "Ko'rish" tugmasi: telefonda qulay bosiladi */
.pf button {
  position: relative;
  z-index: 2;
  min-height: 44px;
  cursor: pointer;
}

/* yopiq (ko'rinmas) panellar va menyu bosishlarni to'smasin */
.wxd .wp,
.dd ul,
#mm {
  pointer-events: none;
}
.wxd.o .wp,
.dd.o ul,
#mm.o {
  pointer-events: auto;
}

/* suzuvchi menyu: yopiq paytda faqat asosiy tugma bosiladi, qolgan joy sahifaga o'tadi */
.fab {
  pointer-events: none;
}
.fab .mn,
.fab.open .it {
  pointer-events: auto;
}
#up {
  pointer-events: none;
}
#up.s {
  pointer-events: auto;
}

/* ijtimoiy tarmoq havolasi script.js -> SOZLAMA'da yozilmaguncha ko'rinmaydi */
[data-social][hidden] {
  display: none !important;
}
/* forma: spam tuzog'i (ko'rinmaydi), xato xabari, yuborilayotgan holat */
#fm .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fe {
  color: #dc2626;
  font: 500 13px var(--m);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
[data-theme="dark"] .fe {
  color: #f87171;
}
#fm [aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}
.sb:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none !important;
}
/* 320–400px kenglikdagi kichik telefonlar (iPhone SE, eski Android): sahifa yonga surilmasin */
@media (max-width: 400px) {
  #hero .w {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats .w {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t {
    font-size: clamp(52px, 18vw, 70px);
  }
  .st {
    padding: 26px 14px 30px;
  }
  .st .n {
    font-size: 56px;
  }
  .st p {
    font-size: 14px;
  }
  h2 {
    font-size: clamp(36px, 12.5vw, 44px);
  }
  /* ruscha uzun so'zlar ("Сейсмобезопасность") ekrandan chiqmasin */
  h2,
  h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}