@font-face {
  font-family: "RobotoCondensedLocal";
  src: url("../COURSE/FONTS/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* palette */
  --prim-light: #DBDADA;
  --prim-ink: #281E18;
  --accent-clr: #40CBE0;
  --svision-brand-clr:#dc8547;

  /* typography */
  --small-fnt: clamp(0.75rem, 2vw, 1rem);
  --basic-fnt: clamp(1rem, 2.25vw, 1.25rem);
  --title-fnt: clamp(1.25rem, 2.5vw, 1.5rem);

  /* sizing */
  --landing-max-width: 1680px;
  --menu-size: 3rem;
  --project-min-width: 300px;
  --menu-active-min-width: 260px;

  /* spacing */
  --xxsmall-spc: 0.25rem;
  --xsmall-spc: 0.5rem;
  --small-spc: 1rem;
  --basic-spc: 2rem;
  --large-spc: 4rem;
  --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;

  /* animation / effects */
  --menu-open-duration: 200ms;
  --menu-open-ease: ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
ul, li, a{
  text-decoration: none;
  list-style: none;
}
h1, h2, h3{
  font-size: var(--title-fnt);
  font-weight: 400;
}

html,
body {
  font-size: 16px;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  background: var(--prim-light);
  color: var(--prim-ink);
  font-family: "RobotoCondensedLocal", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  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% - 3rem) 0%, 100% 3rem, 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);
}

.main-menu{
  position: absolute;
  top:0;
  right:0;
  width: var(--menu-size);
  height: 100%;
  margin: 0;
  transition: width var(--menu-open-duration) var(--menu-open-ease);
  padding: 0;
  overflow: hidden;
  z-index: 999;
}
.main-menu ul {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--menu-list-gap-spc);
  align-items: start;
  justify-content: start;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  padding-top: var(--menu-list-offset-spc);
  list-style: none;
  background: var(--prim-ink);
  color: var(--prim-light);
  font-size: var(--basic-fnt);
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition:
    transform var(--menu-open-duration) var(--menu-open-ease),
    clip-path var(--menu-open-duration) var(--menu-open-ease);
  clip-path: polygon(0rem 0%, 100% 0, 100% 100%, 0 100%, 0% 0rem);

}
.main-menu ul li{
 text-align: start;
 width: 100%;
 padding-left: var(--large-spc);
 font-size: var(--basic-fnt);
}
.main-menu a{
  color: var(--prim-light);
  font-size: var(--basic-fnt);
}
.main-menu a:hover{
  color:var(--accent-clr);
}
.main-menu ul li:hover{
  color:var(--svision-brand-clr);
}

.main-menu li>span{
  opacity: .5;
  font-size: var(--small-fnt);
  display: inline-block;
}
.main-menu.is-active ul {
  transform: translateX(0);
  pointer-events: auto;
  clip-path: polygon(3rem 0%, 100% 0, 100% 100%, 0 100%, 0% 3rem);
}

.main-menu.is-active{
  width: max(25dvw, var(--menu-active-min-width));
}

.main-menu button{
  all: unset;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1000;
  width: 3rem;
  height: 3rem;
  background: var(--prim-ink);
  border: solid 1px var(--prim-ink);
  display: inline-block;
  touch-action: manipulation;
  transition:
    background-color var(--menu-open-duration) var(--menu-open-ease) var(--menu-open-duration),
    border-color var(--menu-open-duration) var(--menu-open-ease) var(--menu-open-duration),
    transform var(--menu-open-duration) var(--menu-open-ease) var(--menu-open-duration);
}

.main-menu button::after {
  content: "menu";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--xxsmall-spc);
  font-size: var(--small-fnt);
  line-height: 1;
  color: var(--prim-ink);
  opacity: .65;
  z-index: 1001;
  pointer-events: none;
  transition: none;
}

.main-menu.is-active button{
  background: none;
  border: solid 1px var(--prim-light);
}

.main-menu.is-active button::after {
  content: "close";
  color: var(--prim-light);
}


/* nav block END */

.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: .5;
}
.project__greed p{
  padding-block: var(--small-spc);
}

/* ------------------------------- */
.landing__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--large-spc);
}

.lang-switch {
  display: flex;
  gap: var(--xsmall-spc);
  z-index: 1200;
  justify-content: end;
}

.lang-switch__btn {
  all: unset;
  cursor: pointer;
  padding: var(--xxsmall-spc) var(--xsmall-spc);
  font-size: var(--small-fnt);
  background: var(--prim-light);
  color: var(--prim-ink);
}

.lang-switch__btn.is-active {
  background: var(--prim-ink);
  color: var(--prim-light);
}