@font-face { font-family: Geist; src: url('/fonts/GeistVF.woff') format('woff'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #07090f;
  --paper: #e9e4d8;
  --muted: #a6a8ae;
  --line: rgba(255,255,255,.13);
  --blue: #77a9dc;
  --gold: #c8a65b;
  --display: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: Geist, Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; }

body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(circle at 74% 8%, rgba(45,76,118,.23), transparent 30%), radial-gradient(circle at 18% 58%, rgba(93,48,75,.11), transparent 27%), #07090f;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 20; opacity: .025; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-header, footer { max-width: 1280px; margin: auto; padding: 24px 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.ligardia { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ligardia-mark { width: 36px; height: 36px; border: 1px solid var(--paper); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 17px; }
.ligardia b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .2em; }
.ligardia small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; letter-spacing: .08em; }
nav { display: flex; align-items: center; gap: 26px; }
nav a { color: var(--muted); text-decoration: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
nav a:hover { color: var(--paper); }
nav .nav-start { color: var(--ink); background: var(--paper); padding: 11px 18px; }

main { max-width: 1280px; margin: auto; padding: 0 34px; }
.hero { min-height: 760px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; position: relative; border-bottom: 1px solid var(--line); }
.hero-copy { position: relative; z-index: 2; padding: 90px 5vw 90px 2vw; }
.eyebrow, .section-number { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 38px; height: 1px; margin: 0 12px 3px 0; background: var(--gold); }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.035em; margin: 0; }
h1 { margin: 25px 0 28px; font-size: clamp(70px, 8.2vw, 126px); line-height: .79; }
h1 em, h2 em { color: var(--blue); font-weight: 400; }
.lead { max-width: 640px; color: #c9c7c1; font-family: var(--display); font-size: clamp(22px, 2.05vw, 31px); line-height: 1.35; }
.hero-actions { display: flex; gap: 12px; margin-top: 40px; }
.button { min-height: 56px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 720; letter-spacing: .12em; border: 1px solid var(--line); transition: .2s ease; }
.button.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button.primary:hover { background: var(--blue); border-color: var(--blue); }
.button.secondary { color: var(--paper); }
.button.secondary:hover { border-color: var(--paper); }
.privacy-note { margin-top: 18px; color: #777a82; font-size: 11px; }

.hero-map { position: relative; z-index: 1; margin: 0; height: 650px; display: grid; place-items: center; overflow: hidden; }
.hero-map::before { content: 'МЕГАПОЛИС'; position: absolute; font-family: var(--display); font-size: 10vw; letter-spacing: .14em; color: rgba(255,255,255,.025); transform: rotate(90deg); }
.hero-map img { width: min(86%, 540px); max-height: 560px; object-fit: contain; filter: saturate(.72) contrast(1.08) drop-shadow(0 40px 60px rgba(0,0,0,.7)); transform: rotate(1.2deg); }
.hero-map figcaption { position: absolute; right: 3%; bottom: 10%; padding: 14px 18px; color: var(--muted); font-size: 11px; letter-spacing: .1em; background: rgba(7,9,15,.78); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.hero-map figcaption b { color: var(--paper); }
.map-orbit { position: absolute; border: 1px solid rgba(119,169,220,.12); border-radius: 50%; }
.orbit-one { width: 580px; height: 580px; }
.orbit-two { width: 780px; height: 380px; transform: rotate(42deg); }
.city-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .5; }
.city-lines i { position: absolute; height: 1px; width: 43%; transform-origin: left; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.city-lines i:nth-child(1) { top: 16%; left: 53%; transform: rotate(28deg); }.city-lines i:nth-child(2) { top: 43%; left: 46%; transform: rotate(-15deg); background: linear-gradient(90deg, transparent, #8e5e7c, transparent); }.city-lines i:nth-child(3) { top: 72%; left: 55%; transform: rotate(12deg); background: linear-gradient(90deg, transparent, var(--gold), transparent); }.city-lines i:nth-child(4) { top: 30%; left: 72%; transform: rotate(83deg); }.city-lines i:nth-child(5) { top: 82%; left: 16%; transform: rotate(-38deg); }

.manifesto, .inside, .result { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8vw; padding: 130px 3vw; border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(45px, 5.5vw, 78px); line-height: .98; }
.manifesto > div > p, .section-heading > p:not(.section-number) { max-width: 720px; color: var(--muted); font-size: 18px; line-height: 1.75; margin-top: 32px; }
.route, .versions { padding: 130px 3vw; border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: .72fr 1.28fr; column-gap: 8vw; align-items: start; }
.section-heading .section-number { grid-row: 1 / 3; }
.steps { margin: 85px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.steps li { padding: 36px 42px 20px 0; min-height: 260px; border-right: 1px solid var(--line); }
.steps li + li { padding-left: 42px; }
.steps li:last-child { border-right: 0; }
.steps span, .version-grid article > span { color: var(--gold); font-size: 11px; letter-spacing: .18em; }
.steps h3, .version-grid h3 { font-family: var(--display); font-size: 29px; font-weight: 400; margin: 56px 0 15px; }
.steps p, .version-grid p { color: var(--muted); line-height: 1.65; }

.inside { grid-template-columns: 1fr 1fr; align-items: center; }
.inside-art { position: relative; min-height: 620px; overflow: hidden; background: #0d1018; }
.inside-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #090b11 0%, transparent 45%); }
.inside-art img { width: 100%; height: 620px; object-fit: cover; filter: saturate(.68) contrast(1.05); }
.inside-art p { position: absolute; z-index: 2; left: 34px; bottom: 24px; font-size: 11px; line-height: 1.6; letter-spacing: .16em; }
.inside-copy { padding: 40px 4vw; }
.inside-copy h2 { margin: 24px 0 50px; }
.resources { list-style: none; padding: 0; margin: 0; }
.resources li { display: grid; grid-template-columns: 14px 1fr 1.2fr; align-items: center; gap: 16px; padding: 17px 0; border-top: 1px solid var(--line); }
.resources i { width: 8px; height: 8px; border-radius: 50%; background: var(--resource); box-shadow: 0 0 14px var(--resource); }
.resources .spirit { --resource: #9d83d1; }.resources .money { --resource: #c8a65b; }.resources .body { --resource: #c86a65; }.resources .work { --resource: #5e9db1; }.resources .relations { --resource: #bd7193; }
.resources span { font-family: var(--display); font-size: 20px; }.resources small { color: var(--muted); }

.result { grid-template-columns: 1fr .92fr; align-items: center; }
.result .section-heading { display: block; }
.receipt { max-width: 510px; background: #dcd5c7; color: #17171b; padding: 34px; transform: rotate(1deg); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.receipt-head { padding-bottom: 24px; border-bottom: 2px solid #29272a; }
.receipt-head span, .receipt-head b { display: block; }.receipt-head span { font-size: 9px; letter-spacing: .18em; }.receipt-head b { font-family: var(--display); font-size: 28px; margin-top: 7px; }
.receipt p { display: flex; gap: 18px; margin: 0; padding: 17px 0; border-bottom: 1px solid rgba(0,0,0,.18); font-family: var(--display); font-size: 18px; }
.receipt p span { font-family: Geist, sans-serif; font-size: 10px; padding-top: 5px; }.receipt small { display: block; color: #646168; line-height: 1.5; margin-top: 25px; }

.versions h2 { margin: 24px 0 75px; }
.version-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.version-grid article { min-height: 310px; padding: 34px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.version-grid article:last-child { border: 0; }.version-grid article.current { background: rgba(119,169,220,.07); }
.version-grid h3 { margin: 48px 0 10px; }.version-grid p { flex: 1; }
.version-grid a, .version-grid b { color: var(--paper); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; border-bottom: 1px solid var(--paper); padding-bottom: 5px; }
.version-grid b { color: #696c73; border: 0; }

.final-call { text-align: center; padding: 150px 20px; border-bottom: 1px solid var(--line); }
.final-call h2 { margin: 35px auto 50px; max-width: 1050px; }.final-call .button { margin: auto; }
footer { border-bottom: 0; min-height: 150px; color: var(--muted); font-size: 12px; }
footer > a:last-child { text-decoration: none; }

@media (max-width: 820px) {
  .site-header, footer, main { padding-left: 20px; padding-right: 20px; }
  .site-header nav a:not(.nav-start) { display: none; }
  .ligardia small { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 82px 0 30px; }
  h1 { font-size: clamp(65px, 20vw, 96px); }
  .lead { font-size: 22px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .hero-map { height: 470px; }
  .hero-map img { width: 92%; max-height: 420px; }
  .hero-map figcaption { right: 0; bottom: 5%; }
  .manifesto, .inside, .result, .section-heading { grid-template-columns: 1fr; gap: 32px; }
  .manifesto, .inside, .result, .route, .versions { padding: 90px 0; }
  h2 { font-size: 48px; }
  .steps { grid-template-columns: 1fr; margin-top: 50px; }
  .steps li, .steps li + li { min-height: auto; padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps h3 { margin-top: 35px; }
  .inside-art, .inside-art img { min-height: 480px; height: 480px; }
  .inside-copy { padding: 35px 0 0; }
  .resources li { grid-template-columns: 14px 1fr; }.resources small { grid-column: 2; }
  .result .section-heading { margin-bottom: 35px; }
  .receipt { padding: 25px; }
  .version-grid { grid-template-columns: 1fr; }
  .version-grid article { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .final-call { padding: 110px 0; text-align: left; }
  footer { gap: 28px; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }