:root {
  /* page-specific sizing */
  --landing-max-width: 1680px;
  --project-min-width: 300px;
  --menu-active-min-width: min(480px, 90%);

  /* page-specific spacing */
  --section-spc: clamp(var(--basic-spc), 4vw, 5rem);
  --layout-gap-spc: clamp(var(--small-spc), 2.5vw, var(--large-spc));
  --body-inline-spc: clamp(var(--small-spc), 3vw, var(--basic-spc));
  --body-block-spc: clamp(var(--basic-spc), 6vw, var(--large-spc));
  --menu-list-gap-spc: 5dvh;
  --menu-list-offset-spc: 25dvh;

  /* page-specific motion */
  --menu-open-duration: 200ms;
  --menu-open-ease: ease;
}

html,
body {
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  padding: var(--body-block-spc) var(--body-inline-spc);
}

.landing {
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - 8rem);
  margin: 0 auto;
  box-sizing: border-box;
  clip-path: polygon(calc(100% - var(--menu-btn-size)) 0%, 100% var(--menu-btn-size), 100% 100%, 0 100%, 0 0);
  border: solid 1px var(--prim-ink);
  position: relative;
  transition: clip-path var(--menu-open-duration) var(--menu-open-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.landing.is-active {
  clip-path: polygon(100% 0%, 100% 0, 100% 100%, 0 100%, 0 0);
}

/* nav styles moved to shared/css/components/sidebar.css */

.hero__wrp {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* включаем перенос */
  align-items: center;
  justify-content: space-around;
  gap: var(--layout-gap-spc);
  max-width: min(1680px, calc(100% - var(--basic-spc)));
  min-height: 40dvh;
  padding-block: var(--basic-spc);
}

.hero__img {
  flex: 0 1 clamp(10rem, 40%, 22.5rem);
  width: clamp(10rem, 40%, 22.5rem);
  max-width: 360px;
  aspect-ratio: 1/1;
  align-self: center;
  clip-path: circle(50% at 50% 50%);
  min-width: 0;
}

.hero__info {
  flex: 1 1 clamp(18rem, 52%, 100%);
  min-width: 0;
  max-width: 90ch;
  align-self: center;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--title-fnt);
  line-height: 1.5;
}
.hero__info > h1 {
  font-weight: 400;
}

.hero__why {
  flex: 0 0 100%;
  width: 100%;
  padding-top: var(--basic-spc);
  font-size: var(--title-fnt);
  line-height: 1.5;
  column-count: 2; /* 2 колонки */
  column-gap: var(--basic-spc);
  column-width: 45ch;
}
.hero__who {
  flex: 1 1 100%;
  padding-top: var(--small-spc);
  max-width: 90ch;
}

.projects {
  width: min(var(--landing-max-width), calc(100% - var(--basic-spc)));
  border-top: solid 1px var(--prim-ink);
  margin: 0 auto;
  padding-top: var(--section-spc);
}

.project__greed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap-spc);
  justify-content: space-between;
  align-items: stretch;
  min-height: 100%;
  padding-top: var(--section-spc);
}
.project__greed > * {
  flex: 1;
  max-width: 100%;
  min-width: var(--project-min-width);
  font-size: var(--basic-fnt);
  line-height: 1.5;
  max-width: 45ch;
}
.project__greed h3 span:last-child:not(:only-child) {
  font-size: var(--small-fnt);
  opacity: 0.5;
}
.project__greed p {
  padding-block: var(--small-spc);
}

/* ------------------------------- */
.landing__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.p_stat_link{
  color: var(--accent-clr);
  text-decoration: none;
}

.p_stat_link:hover{
  text-decoration: underline;
}