:root {
  --lp-ink: #111827;
  --lp-muted: #4b5563;
  --lp-blue: #1e88e5;
  --lp-soft: #f3f8ff;
  --lp-card: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.lp-body {
  margin: 0;
  color: var(--lp-ink);
  font-family: Manrope, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #eaf6ff 0%, #f4f9ff 40%, #eef6ff 100%);
}

.lp-wrap { overflow-x: hidden; }

.lp-container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.lp-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #eaf6ff;
}

.lp-hero-photo {
  position: absolute;
  inset: 0;
}

.lp-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;
  display: block;
}

.lp-hero-fog {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(245, 250, 255, 0.86) 38%,
    rgba(245, 250, 255, 0.35) 58%,
    rgba(255, 255, 255, 0) 74%
  );
}

.lp-hero-fog::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(62%, 760px);
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}

.lp-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0 48px;
}

.lp-top {
  margin: 0 0 28px;
  font-size: 15px;
  color: #6b7280;
  letter-spacing: 0.01em;
}

.lp-hero-copy {
  max-width: 620px;
}

.lp-kicker {
  margin: 0;
  font-size: clamp(46px, 6.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.lp-sub {
  margin: 18px 0 28px;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.25;
  font-weight: 700;
}

.lp-points {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
}

.lp-point,
.lp-place {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}

.lp-point,
.lp-place {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.lp-place {
  margin-top: 22px;
  align-items: start;
  color: var(--lp-muted);
}

.lp-ico {
  width: 32px;
  height: 32px;
  color: var(--lp-blue);
  display: grid;
  place-items: center;
}

.lp-ico svg {
  width: 28px;
  height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-ico--fill svg {
  fill: currentColor;
  stroke: none;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font: 700 17px/1 Manrope, sans-serif;
  background: linear-gradient(90deg, #ff8a1f 0%, #ff3d4a 100%);
  box-shadow: 0 12px 28px rgba(255, 80, 40, 0.28);
}

.lp-btn:hover { filter: brightness(1.04); }

.lp-section { padding: 80px 0; }

.lp-h2 {
  margin: 0 0 36px;
  text-align: center;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-weight: 800;
}

.lp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lp-card,
.lp-fact,
.lp-step,
.lp-faq details,
.lp-prose,
.lp-panel {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(30, 80, 160, 0.07);
}

.lp-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start;
  min-height: 168px;
  padding: 26px 28px;
}

.lp-card .lp-ico { margin-top: 2px; }

.lp-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  min-height: 2.5em;
}

.lp-card p {
  margin: 0;
  color: var(--lp-muted);
  font-size: 16px;
  line-height: 1.55;
}

.lp-cta-box {
  margin-top: 42px;
  padding: 42px 32px 36px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 80, 160, 0.07);
  text-align: center;
}

.lp-cta-box h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.lp-cta-box p {
  margin: 0 auto 22px;
  max-width: 760px;
  color: var(--lp-muted);
  font-size: 18px;
  line-height: 1.55;
}

.lp-lead {
  max-width: 760px;
  margin: -8px auto 28px;
  text-align: center;
  color: var(--lp-muted);
  font-size: 18px;
  line-height: 1.55;
}

.lp-people {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.lp-person {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  padding: 26px 24px;
  box-shadow: 0 10px 28px rgba(30, 80, 160, 0.07);
}

.lp-person img {
  width: 88px;
  height: 88px;
  margin: 0 0 16px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}

.lp-person p {
  margin: 0;
  color: var(--lp-ink);
  font-size: 16px;
  line-height: 1.55;
}

.lp-person-meta {
  margin: 16px 0 0;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
}

.lp-teacher,
.lp-system,
.lp-seo,
.lp-faq { background: transparent; }

.lp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lp-fact {
  padding: 24px 26px;
}

.lp-fact strong { display: block; margin-bottom: 6px; }

.lp-fact p,
.lp-prose p {
  margin: 0 0 14px;
  color: var(--lp-muted);
  line-height: 1.6;
}

.lp-prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 32px;
}
.lp-prose h2 { margin: 32px 0 10px; }
.lp-prose h2:first-child { margin-top: 0; }

.lp-steps { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }

.lp-step {
  padding: 18px 22px;
  font-weight: 700;
}

.lp-faq details {
  max-width: 820px;
  margin: 0 auto 12px;
  padding: 16px 20px;
}

.lp-faq summary { cursor: pointer; font-weight: 700; }
.lp-faq p { margin: 10px 0 0; color: var(--lp-muted); }

.lp-foot {
  padding: 28px 0 40px;
  color: #6b7280;
  text-align: center;
  font-size: 14px;
}

.lp-foot a { color: inherit; }

@media (max-width: 900px) {
  .lp-hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .lp-hero-inner {
    order: 1;
    min-height: 0;
    padding: 24px 0 20px;
    background: linear-gradient(180deg, #f7fbff 0%, #eaf6ff 100%);
  }

  .lp-hero-photo {
    order: 2;
    position: relative;
    inset: auto;
    height: min(58vh, 460px);
    overflow: hidden;
  }

  .lp-hero-photo::after {
    content: "";
    position: absolute;
    inset: -28px;
    z-index: 1;
    pointer-events: none;
    background: url("hero.jpg") 78% 8% / cover no-repeat;
    filter: blur(18px);
    -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 42%, transparent 38%, #000 78%);
    mask-image: radial-gradient(ellipse 74% 70% at 50% 42%, transparent 38%, #000 78%);
  }

  .lp-hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 8%;
  }

  .lp-hero-fog {
    display: none;
  }

  .lp-grid,
  .lp-facts,
  .lp-people { grid-template-columns: 1fr; }
  .lp-card { min-height: 0; }
  .lp-card h3 { min-height: 0; }
  .lp-kicker { font-size: 42px; }
  .lp-section { padding: 56px 0; }
}