/* MuhandisEdu — landing sahifasi
   app.css dagi tokenlar ustiga quriladi (oq fon, to'q matn, bitta ko'k aksent). */

:root {
    --accent-deep: #0f2b52;
    --accent-tint: #f2f6fc;
    --blueprint:   #dbe5f2;
    --water:       #cfe0f2;
    --water-deep:  #b6cee8;
    --ground:      #eceff3;
}

/* ---------------------------------------------------------------- karkas */
.lp-body { background: var(--bg); }

.lp-nav {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.lp-nav-inner {
    max-width: 1140px; margin: 0 auto; padding: 0 24px;
    height: 64px; display: flex; align-items: center; gap: 24px;
}
.lp-nav .brand { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.lp-nav-links { display: flex; gap: 24px; margin-left: 16px; }
.lp-nav-links a { color: var(--text-muted); font-size: 14.5px; }
.lp-nav-links a:hover { color: var(--text); text-decoration: none; }
.lp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lp-section { max-width: 1140px; margin: 0 auto; padding: 88px 24px; }
.lp-section + .lp-section { padding-top: 0; }
/* yopishqoq menyu anchor havolada sarlavhani yopib qolmasin */
.lp-section[id] { scroll-margin-top: 84px; }

.lp-eyebrow {
    font-size: 12px; font-weight: 640; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.lp-h2 {
    font-size: clamp(25px, 3.2vw, 34px); font-weight: 660;
    letter-spacing: -.025em; line-height: 1.18; margin: 0 0 14px;
    max-width: 22ch;
}
.lp-lead { font-size: 16.5px; line-height: 1.65; color: var(--text-muted); max-width: 62ch; margin: 0; }
.lp-head { margin-bottom: 44px; }

/* ------------------------------------------------------------------ hero */
.lp-hero {
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}
/* muhandislik chizmasiga ishora — juda nozik ko'k to'r */
.lp-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--blueprint) 1px, transparent 1px),
        linear-gradient(90deg, var(--blueprint) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 22%, #000 12%, transparent 72%);
            mask-image: radial-gradient(ellipse 78% 62% at 50% 22%, #000 12%, transparent 72%);
    opacity: .75;
}
.lp-hero-inner {
    position: relative; max-width: 1140px; margin: 0 auto;
    padding: 92px 24px 0; text-align: center;
}
.lp-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-tint); color: var(--accent);
    border: 1px solid #dde7f5; border-radius: 30px;
    padding: 6px 14px; font-size: 13px; font-weight: 550; margin-bottom: 26px;
}
.lp-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.lp-h1 {
    font-size: clamp(33px, 5.2vw, 54px); font-weight: 680;
    letter-spacing: -.035em; line-height: 1.08;
    margin: 0 auto 20px; max-width: 22ch; color: var(--text);
}
.lp-h1 em { font-style: normal; color: var(--accent); }
.lp-hero-lead {
    font-size: 18px; line-height: 1.6; color: var(--text-muted);
    max-width: 58ch; margin: 0 auto 32px;
}
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: 9px; }

/* ------------------------------------------------ ko'prik illyustratsiyasi */
.lp-figure { margin: 56px auto 0; max-width: 980px; }
.lp-figure svg { width: 100%; height: auto; display: block; }
.lp-figure-cap {
    text-align: center; font-size: 13px; color: var(--text-muted);
    padding: 14px 24px 34px; margin: 0;
}

/* ------------------------------------------------------------- statistika */
.lp-kpi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.lp-kpi-tile { background: var(--bg); padding: 26px 24px; }
.lp-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lp-kpi-label { font-size: 13px; color: var(--text-muted); }
.lp-kpi-icon { width: 19px; height: 19px; color: var(--accent); opacity: .55; flex: none; }
.lp-kpi-value { font-size: 38px; font-weight: 640; letter-spacing: -.03em; line-height: 1; }
.lp-kpi-note { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }

/* ---------------------------------------------------------------- modullar */
.lp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.lp-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-card:hover {
    border-color: #cfd8e4;
    box-shadow: 0 6px 20px rgba(16,24,40,.06);
    transform: translateY(-2px);
}
.lp-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--accent-tint); color: var(--accent);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.lp-card-icon svg { width: 20px; height: 20px; }
.lp-card-icon > svg { display: block; }
.lp-card h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; }
.lp-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* ------------------------------------------------------------ jarayon oqimi */
.lp-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lp-step {
    position: relative; background: var(--bg);
    border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px;
}
.lp-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lp-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 12.5px; font-weight: 650; flex: none;
}
.lp-step-icon { width: 26px; height: 26px; color: var(--accent); opacity: .38; flex: none; }
.lp-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 620; }
.lp-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.lp-step.is-human { border-color: #cddcef; background: var(--accent-tint); }
.lp-step-who {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 4px 10px 4px 7px; border-radius: 20px;
    background: var(--accent-tint); border: 1px solid #e0e9f6;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.lp-who-icon { width: 13px; height: 13px; flex: none; }

/* --------------------------------------------------------- AI chegarasi */
.lp-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.lp-panel { border: 1px solid var(--border); border-radius: 12px; padding: 26px; background: var(--bg); }
.lp-panel h3 { margin: 0 0 4px; font-size: 16px; font-weight: 640; display: flex; align-items: center; gap: 9px; }
.lp-panel .sub { margin: 0 0 18px; font-size: 13.5px; color: var(--text-muted); }
.lp-panel ul { margin: 0; padding: 0; list-style: none; }
.lp-panel li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 0; font-size: 14.2px; line-height: 1.55;
    border-top: 1px solid var(--border);
}
.lp-panel li:first-child { border-top: none; }
.lp-panel-icon { width: 19px; height: 19px; flex: none; }
.lp-li-icon { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.lp-panel.is-yes { border-color: #c7e2d3; }
.lp-panel.is-yes h3 { color: var(--ok); }
.lp-panel.is-yes .lp-li-icon { color: var(--ok); }
.lp-panel.is-no { border-color: #f0d3d1; }
.lp-panel.is-no h3 { color: var(--danger); }
.lp-panel.is-no .lp-li-icon { color: var(--danger); }

.lp-quote {
    display: flex; align-items: flex-start; gap: 15px;
    margin: 34px 0 0; padding: 22px 26px;
    border-left: 3px solid var(--accent); background: var(--accent-tint);
    border-radius: 0 10px 10px 0;
    font-size: 15.5px; line-height: 1.65; color: var(--text);
}

/* ------------------------------------------------------------------- CTA */
.lp-quote-icon { width: 24px; height: 24px; color: var(--accent); flex: none; margin-top: 2px; }

/* tugma ichidagi strelka */
.btn-icon { width: 17px; height: 17px; flex: none; margin-left: 2px; }

.lp-cta {
    background: var(--accent-deep); color: #fff;
    border-radius: 16px; padding: 56px 40px; text-align: center;
    position: relative; overflow: hidden;
}
.lp-cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%);
            mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%);
}
.lp-cta > * { position: relative; }
.lp-cta h2 { margin: 0 0 10px; font-size: clamp(23px, 3vw, 31px); font-weight: 660; letter-spacing: -.025em; }
.lp-cta p { margin: 0 auto 26px; max-width: 52ch; color: #c6d4e8; font-size: 16px; line-height: 1.6; }
.btn-on-dark { background: #fff; border-color: #fff; color: var(--accent-deep); }
.btn-on-dark:hover { background: #eef3fa; }

/* ---------------------------------------------------------------- futer */
.lp-footer { border-top: 1px solid var(--border); background: var(--bg-soft); }
.lp-footer-inner {
    max-width: 1140px; margin: 0 auto; padding: 34px 24px;
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    font-size: 13.5px; color: var(--text-muted);
}
.lp-footer-inner .right { margin-left: auto; }

/* --------------------------------------------------------------- moslashuv */
/* Kichik ekranda ko'prikning mayda yozuvlari o'qilmaydi — siluet qoladi */
@media (max-width: 720px) {
    .brg-detail { display: none; }
    .lp-figure { margin-top: 40px; }
}

@media (max-width: 640px) {
    .lp-section { padding: 60px 20px; }
    .lp-hero-inner { padding-top: 64px; }
    .lp-nav-links { display: none; }
    .lp-cta { padding: 44px 24px; }
    .lp-kpi-value { font-size: 32px; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-card { transition: none; }
    .lp-card:hover { transform: none; }
}