/* Kirish — neytral: tizim nima ekanini aytmaydi. */
* { box-sizing: border-box; }
body { margin: 0; background: #0a1016; color: #fff; font: 15px/1.45 Roboto, "Segoe UI", system-ui, Arial, sans-serif; }
h1, p { margin: 0; }
.lg { position: relative; overflow: hidden; min-height: 100vh; }
/* fon butun ekranda, mazmun — o'rtadagi konteynerda (keng monitorda chetlarga yopishmasin) */
.lg-in { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; max-width: 1240px; margin: 0 auto; padding: 112px 0 88px; }
/* logo va footer — ekranning chap chetiga yaqin (konteynerdan tashqarida), sarlavha va forma — markazda */
.lg-logo { position: absolute; z-index: 1; top: 56px; left: clamp(24px, 5vw, 96px); height: 40px; width: auto; }
.lg-c { position: absolute; z-index: 1; bottom: 48px; left: clamp(24px, 5vw, 96px); font-size: 13px; color: #7d8790; }
.lg-bg { position: absolute; inset: 0; pointer-events: none; }
.lg-bg > div { position: absolute; border-radius: 50%; }
.lg-b1 { left: -8%; top: -18%; width: 62%; height: 78%; background: radial-gradient(closest-side, rgba(47,111,235,.55), rgba(47,111,235,0)); filter: blur(30px); animation: d1 18s ease-in-out infinite; }
.lg-b2 { left: 28%; top: 38%; width: 58%; height: 70%; background: radial-gradient(closest-side, rgba(106,72,224,.42), rgba(106,72,224,0)); filter: blur(40px); animation: d2 22s ease-in-out infinite; }
.lg-b3 { right: -12%; top: -6%; width: 46%; height: 60%; background: radial-gradient(closest-side, rgba(15,127,127,.40), rgba(15,127,127,0)); filter: blur(36px); animation: d3 26s ease-in-out infinite; }
.lg-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.lg-w { fill: none; stroke: url(#kg); stroke-width: 1; animation: w 40s linear infinite; }
.lg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; border-radius: 0 !important; }
@keyframes d1 { 50% { transform: translate(80px, -50px) scale(1.12); } }
@keyframes d2 { 50% { transform: translate(-70px, 60px) scale(.92); } }
@keyframes d3 { 50% { transform: translate(40px, 40px); } }
@keyframes w { to { stroke-dashoffset: -1200; } }
@media (prefers-reduced-motion: reduce) { .lg-b1, .lg-b2, .lg-b3, .lg-w { animation: none; } }
.lg-hero { position: relative; flex: 999 1 560px; min-width: 0; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.lg-t { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.lg-t p { font-size: clamp(40px, 5.6vw, 84px); font-weight: 900; line-height: .98; letter-spacing: -.02em; }
.lg-t span { background: linear-gradient(90deg, #8fb2f5, #b9a6f5 55%, #6fd3c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-t i { width: 72px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #2f6feb, #6fd3c4); }
.lg-side { position: relative; flex: 0 1 640px; min-width: 0; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; padding: 48px 48px 48px 24px; }
.lg-card { width: 100%; max-width: 400px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 40px 36px 32px; display: flex; flex-direction: column; gap: 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lg-card h1 { font-size: 32px; font-weight: 700; }
.lg-sub { font-size: 15px; color: #c3c9cf; margin-top: 8px; }
.lg-err { font-size: 14px; background: rgba(179,38,30,.18); border: 1px solid rgba(240,140,130,.35); color: #ffd9d5; border-radius: 12px; padding: 10px 12px; }
.lg-ms { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; background: #fff; color: #0f1720; font-size: 16px; font-weight: 700; text-decoration: none; }
.lg-ms:hover { background: #eef3fe; }
.lg-ms:focus-visible, .lg-form button:focus-visible { outline: 3px solid #8fb2f5; outline-offset: 3px; }
.lg-help { font-size: 13px; color: #9aa3ab; }
.lg-form { display: flex; flex-direction: column; gap: 10px; }
.lg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #c3c9cf; }
.lg-form input { min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; font: inherit; }
.lg-form button { min-height: 46px; border-radius: 12px; border: none; background: #2f6feb; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 1023px) { .lg-side { justify-content: center; padding: 32px 24px 48px; } }
@media (max-width: 639px) {
  .lg-in { padding: 0; min-height: 0; }
  .lg-logo { position: static; display: block; margin: 32px 24px 0; }
  .lg-c { position: static; margin: 0 24px 32px; }
  .lg-hero { padding: 32px 24px 0; }
  .lg-card { padding: 28px 22px; }
}