:root{
  --text:#111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#fff;
  --red:#d43a34;
  --shadow: 0 18px 55px rgba(17,24,39,.08);
  --radius:22px;

  /* banner + card + bottom width bir xil */
  --frame: 420px;

  /* Semi-bold / medium (jirniy emas) */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  font-weight: var(--w-regular);
}
button,input,select{ font:inherit; }

.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:28px 14px 56px;
}
.wrap{
  width: min(var(--frame), 94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* topbar */
.topbar{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:4px 2px;
}
.langBtn{
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  padding:7px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  font-weight: var(--w-semibold);
  color:#111;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}
.langBtn:hover{ background:#f8fafc; transform: translateY(-1px); }
.langBtn:active{ transform: translateY(0px) scale(.98); box-shadow: 0 3px 12px rgba(17,24,39,.05); }

/* Carousel */
.carousel{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(229,231,235,.85);
  box-shadow: 0 12px 35px rgba(17,24,39,.06);
  background:#fff;
  animation: floatIn .35s ease both;
}
.carouselTrack{
  display:flex;
  width:100%;
  transform: translateX(0%);
  transition: transform .55s cubic-bezier(.2,.9,.2,1);
}
.slide{
  min-width:100%;
  position:relative;
  aspect-ratio: 16/6;
  background:#f3f4f6;
}
.slide a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px 0 12px;
  background:#fff;
  border-top:1px solid rgba(229,231,235,.55);
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:#d1d5db;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.dot:hover{ transform: scale(1.25); }
.dot.active{ background: var(--red); }

/* Card */
.card{
  width:100%;
  background:var(--card);
  border:1px solid rgba(229,231,235,.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: floatIn .45s ease both;
}
.cardHead{
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(229,231,235,.6);
  display:flex;
  justify-content:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{
  width:30px;height:30px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.logo .mark{
  width:18px;height:18px;
  background:var(--red);
  clip-path: polygon(50% 0%, 90% 20%, 90% 80%, 50% 100%, 10% 80%, 10% 20%);
}

.brandTitle{
  font-size:28px;
  font-weight: var(--w-semibold);
  color:#111;
  line-height:1.1;
}

.cardBody{ padding:16px 18px 20px; }
.title{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight: var(--w-semibold);
  color:#111;
}

.form{
  display:grid;
  gap:12px;
}
.fieldBlock label{
  display:block;
  margin:0 0 6px 2px;
  font-size:12px;
  font-weight: var(--w-medium);
  color:#111;
}
.field{
  width:100%;
  height:40px;
  border:1px solid #d1d5db;
  border-radius:7px;
  padding:0 12px;
  font-size:13px;
  font-weight: var(--w-regular);
  outline:none;
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.field::placeholder{
  color:#9ca3af;
  font-weight: var(--w-regular);
}
.field:focus{
  border-color: rgba(212,58,52,.75);
  box-shadow: 0 0 0 3px rgba(212,58,52,.10);
  transform: translateY(-1px);
}

/* Select arrow */
.selectWrap{ position:relative; }
.selectWrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:38px;
  cursor:pointer;
}
.selectWrap::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:8px;height:8px;
  border-right:2px solid #9ca3af;
  border-bottom:2px solid #9ca3af;
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
}

.or{
  text-align:center;
  margin:8px 0 6px;
  font-size:13px;
  font-weight: var(--w-semibold);
  color:#111;
}
.callRow{ display:flex; justify-content:center; }

/* Buttons animations */
.callBtn{
  height:34px;
  padding:0 16px;
  border-radius:999px;
  border:1.6px solid rgba(212,58,52,.95);
  background:#fff;
  color:var(--red);
  font-size:12px;
  font-weight: var(--w-medium);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 8px 20px rgba(212,58,52,.10);
}
.callBtn:hover{
  background:rgba(212,58,52,.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(212,58,52,.14);
}
.callBtn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 8px 18px rgba(212,58,52,.10);
}
.callBtn svg{
  width:14px;height:14px; stroke:var(--red);
  transition: transform .2s ease;
}
.callBtn:hover svg{ transform: rotate(-6deg) scale(1.03); }

.bottom{
  width:100%;
  padding-top:18px;
  border-top:1px solid rgba(229,231,235,.75);
  display:flex;
  justify-content:center;
  animation: floatIn .55s ease both;
}
.primary{
  width: 100%;
  max-width: 360px;
  height:46px;
  border:none;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:13px;
  font-weight: var(--w-semibold);
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(212,58,52,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.primary::before{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform .55s ease;
}
.primary:hover{
  filter: brightness(.96);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(212,58,52,.26);
}
.primary:hover::before{ transform: translateX(120%); }
.primary:active{
  transform: translateY(0px) scale(.99);
  box-shadow: 0 14px 30px rgba(212,58,52,.22);
}

.hint{
  font-size:11px;
  color:#6b7280;
  margin-top:6px;
  margin-left:2px;
  line-height:1.2;
  font-weight: var(--w-regular);
}
.error{
  font-size:11px;
  color:#b91c1c;
  margin-top:6px;
  margin-left:2px;
  display:none;
  font-weight: var(--w-medium);
}

@keyframes floatIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Background-image slides support */
.slide{background-size:cover;background-position:center;background-repeat:no-repeat;}


/* Submit loading state */
.btn-primary.is-loading{opacity:.75; transform:translateY(0); cursor:wait;}
.btn-primary.is-loading::after{content:'…'; margin-left:8px;}