.landing-page {
  --landing-navy: #00237d;
  --landing-red: #e70d2f;
  --landing-ink: #172033;
  --landing-muted: #52627c;
  --landing-line: #d9e1ef;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 48px;
}

.landing-header {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--landing-line);
}

.landing-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--landing-ink); text-decoration: none; }
.landing-logo-frame { width: 42px; height: 52px; display: grid; place-items: center; padding: 4px; border: 1px solid var(--landing-line); border-radius: 8px; background: #fff; }
.landing-logo-frame img { width: 100%; height: 100%; object-fit: contain; }
.landing-brand strong, .landing-brand small { display: block; }
.landing-brand strong { font-size: 15px; letter-spacing: -0.02em; }
.landing-brand small { margin-top: 2px; color: var(--landing-muted); font-size: 10px; }
.landing-nav { display: flex; align-items: center; gap: 24px; }
.landing-nav a { color: var(--landing-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.landing-nav a:hover { color: var(--landing-navy); }

.landing-enter { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; border: 0; border-radius: 9px; padding: 0 18px; background: var(--landing-navy); color: #fff; font-size: 13px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.landing-enter:hover { background: #001a5e; }
.landing-enter:active { transform: translateY(1px); }
.landing-enter:focus-visible, .landing-nav a:focus-visible, .landing-text-link:focus-visible, .diagram-preview:focus-visible { outline: 3px solid #91a5dd; outline-offset: 3px; }
.landing-enter-compact { min-height: 38px; padding: 0 14px; font-size: 12px; }

.landing-hero { padding: 100px 0 84px; }
.landing-kicker { margin: 0 0 14px; color: var(--landing-red); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.landing-hero h1, .landing-section h2, .landing-cta h2 { margin: 0; color: var(--landing-ink); letter-spacing: -.035em; text-wrap: balance; }
.landing-hero h1 { max-width: 760px; font-size: clamp(38px, 5.3vw, 68px); line-height: 1.04; }
.landing-lead { max-width: 660px; margin: 27px 0 0; color: var(--landing-muted); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.landing-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.landing-text-link { color: var(--landing-navy); font-size: 13px; font-weight: 700; text-decoration: none; }
.landing-text-link:hover { text-decoration: underline; }

.landing-section { padding: 82px 0; border-top: 1px solid var(--landing-line); }
.section-intro { max-width: 660px; }.landing-section h2 { font-size: 36px; line-height: 1.16; }
.section-intro > p:last-child { margin: 17px 0 0; color: var(--landing-muted); font-size: 15px; line-height: 1.7; }
.normalization-section { display: grid; grid-template-columns: .92fr 1.08fr; gap: 82px; align-items: start; }
.normalization-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.normalization-flow li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 21px 0; border-top: 1px solid var(--landing-line); }
.normalization-flow li:last-child { border-bottom: 1px solid var(--landing-line); }
.normalization-flow span { color: var(--landing-red); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.normalization-flow strong { font-size: 16px; }.normalization-flow p { margin: 7px 0 0; color: var(--landing-muted); font-size: 13px; line-height: 1.55; }

.task-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .72fr); gap: 82px; align-items: start; }
.task-preview { position: relative; display: block; max-width: 430px; justify-self: end; overflow: hidden; border-radius: 12px; background: #fff; color: var(--landing-navy); text-decoration: none; box-shadow: 0 4px 8px rgba(15, 23, 42, .08); }
.task-preview img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.task-preview:hover img { transform: scale(1.015); }
.task-preview span { position: absolute; right: 12px; bottom: 12px; padding: 7px 9px; border-radius: 6px; background: var(--landing-navy); color: #fff; font-size: 11px; font-weight: 700; }

.diagrams-section { padding-bottom: 50px; }.diagrams-intro { margin-bottom: 52px; }
.diagram-list { display: grid; gap: 42px; }
.diagram-item { display: grid; grid-template-columns: minmax(220px, .52fr) minmax(0, 1.48fr); gap: 44px; align-items: center; padding-top: 42px; border-top: 1px solid var(--landing-line); }
.diagram-copy span { color: var(--landing-red); font-size: 12px; font-weight: 800; }.diagram-copy h3 { margin: 11px 0 0; color: var(--landing-ink); font-size: 21px; letter-spacing: -.02em; }.diagram-copy p { margin: 12px 0 0; color: var(--landing-muted); font-size: 13px; line-height: 1.65; }
.diagram-preview { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #fff; color: var(--landing-navy); text-decoration: none; box-shadow: 0 4px 8px rgba(15, 23, 42, .08); }
.diagram-preview img { display: block; width: 100%; height: auto; transition: transform .25s ease; }.diagram-preview:hover img { transform: scale(1.015); }
.diagram-preview span { position: absolute; right: 12px; bottom: 12px; padding: 7px 9px; border-radius: 6px; background: var(--landing-navy); color: #fff; font-size: 11px; font-weight: 700; }

.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 42px; border-radius: 14px; background: #e8eeff; }.landing-cta .landing-kicker { margin-bottom: 9px; }.landing-cta h2 { font-size: 29px; }

[hidden] { display: none !important; }

@media (max-width: 820px) { .landing-page { padding: 0 22px 28px; }.landing-nav { display: none; }.landing-hero { padding: 65px 0; }.landing-hero h1 { font-size: clamp(35px, 9vw, 52px); }.normalization-section, .diagram-item { grid-template-columns: 1fr; gap: 35px; }.landing-section { padding: 60px 0; }.diagram-item { padding-top: 35px; }.landing-cta { padding: 28px; }.landing-cta h2 { font-size: 25px; } }
@media (max-width: 540px) { .landing-header { min-height: 78px; }.landing-brand small { display: none; }.landing-enter-compact { padding: 0 11px; }.landing-hero { padding: 52px 0; }.landing-lead { font-size: 15px; }.landing-actions, .landing-cta { align-items: stretch; flex-direction: column; }.landing-section h2 { font-size: 29px; }.diagram-list { gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .landing-enter, .diagram-preview img { transition: none; } }

.task-preview:focus-visible { outline: 3px solid #91a5dd; outline-offset: 3px; }

@media (max-width: 820px) {
  .task-section { grid-template-columns: 1fr; gap: 35px; }
  .task-preview { justify-self: start; }
}