/*
  IMPORTANT (per request): no new assets are created.
  Fonts are referenced by name only. If you need perfect Figma typography, add font files to the project and @font-face them.
*/

:root {
  --white: #fff;
  --dark: #152a21;
  --emerald: #006248;
  --light-green: #dbf8c4;
  --gray: #d2d2d2;
  --light-gray: #f6f6f6;
  --glass-bg: rgba(29, 61, 49, 0.1);
  --glass-border: rgba(255, 255, 255, 0.14);
  --r12: 12px;
  --r18: 18px;
  --r24: 24px;
  --font: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "XITS", "Times New Roman", serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--dark);
  background: var(--white);
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus states */
:focus-visible {
  outline: 2px solid rgba(219, 248, 196, 0.9);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Base transitions for interactive elements */
.btn,
.nav__link,
.social,
.icon-btn,
.card-img,
.news-card,
.to-top {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  will-change: transform;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  background: #000;
  color: #fff;
  border-radius: 10px;
  transform: translateY(-200%);
  transition: transform 180ms ease;
  z-index: 9999;
}
.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}
.wrap--wide {
  width: 1420px;
  margin: 0 auto;
}
.wrap--hero {
  width: 1200px;
  margin: 0 auto;
}

.t-emerald {
  color: var(--emerald);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px);
}

/* Header (inside hero) */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  gap: 24px;
}
.brand__img--header {
  height: 43px; /* Figma logo block height */
  width: auto;
}

.nav {
  width: 386px; /* Figma */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__link {
  font-size: 15px;
  line-height: 1.4;
  color: var(--white);
  white-space: nowrap;
}
.nav__link {
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav__link:hover::after {
  opacity: 0.7;
  transform: scaleX(1);
}
.nav__link--active {
  color: var(--light-green);
  text-shadow: 0 0 20px rgba(219, 248, 196, 0.6);
}

/* Dropdown: "Проекты" */
.nav-dd {
  position: relative;
}
.nav-dd__toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.nav-dd__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  z-index: 50;
  display: none;
}
.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu,
.nav-dd.is-open .nav-dd__menu {
  display: block;
}
.nav-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--dark);
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}
.nav-dd__item:hover {
  background: rgba(0, 98, 72, 0.08);
}
.nav-dd__item--active {
  color: var(--emerald);
  font-weight: 600;
}
.nav-dd__item[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.social {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.social:active {
  transform: translateY(0);
  opacity: 1;
}
.social img {
  width: 28px;
  height: 28px;
}
.social--lg {
  width: 44px;
  height: 44px;
}
.social--lg img {
  width: 44px;
  height: 44px;
}

.icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.icon-btn:active {
  transform: translateY(0);
}
.icon-btn img {
  width: 40px;
  height: 40px;
}
.header__burger {
  display: none;
}

/* Buttons (Figma) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 64px;
  padding-left: 20px;
  padding-right: 6px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--white:hover {
  box-shadow: var(--shadow-1);
}
.btn--green:hover {
  box-shadow: var(--shadow-1);
  background: #007057;
}
.btn--stroke-white:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn--white {
  background: var(--white);
  color: var(--dark);
}
.btn--green {
  background: var(--emerald);
  color: var(--white);
}
.btn--stroke-white {
  height: 54px;
  padding: 0 20px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 24px;
  gap: 14px;
}
.btn--stroke-emerald {
  height: 54px;
  padding: 0 20px;
  border: 1px solid var(--emerald);
  background: transparent;
  color: var(--emerald);
  border-radius: 24px;
  gap: 14px;
}

/* ===========================
   INNOVATIONS PAGE
   =========================== */
.header--on-white .nav__link {
  color: var(--dark);
}
.header--on-white .nav__link--active {
  color: var(--emerald);
  text-shadow: none;
}
.header--on-white .nav__link::after {
  background: currentColor;
}

/* ===========================
   SOCIAL PROJECTS (Mom's house)
   =========================== */
.sp-hero {
  background: #fff;
  padding-top: 10px;
}
.sp-hero__content {
  margin-top: 60px; /* matches innovations spacing */
}
.sp-hero__top {
  display: flex;
  gap: 145px;
  align-items: flex-start;
}
.sp-hero__title {
  margin: 0;
  width: 674px;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: var(--dark);
}
.sp-hero__lead {
  margin: 0;
  width: 346px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark);
}
.sp-hero__img-wrap {
  width: 1400px;
  height: 638px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: var(--r24);
  overflow: hidden;
  position: relative;
  background: #eaeaea;
}
.sp-hero__img-wrap::before {
  content: "";
  position: absolute;
  top: -64px;
  right: -64px;
  width: 220px;
  height: 220px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 64px;
  z-index: 2;
  pointer-events: none;
}
.sp-hero__img-wrap::after {
  content: "";
  position: absolute;
  bottom: -76px;
  left: -76px;
  width: 260px;
  height: 260px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 64px;
  z-index: 2;
  pointer-events: none;
}
.sp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.sp-about {
  padding: 180px 0 90px;
  background: #fff;
}
.sp-left-title {
  padding-left: 203px; /* Figma offset */
}
.sp-about__row {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
}
.sp-about__left {
  width: 633px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.sp-about__mini {
  width: 183px;
  height: 168px;
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 183px;
}
.sp-about__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-about__right {
  width: 487px;
  height: 387px;
  border-radius: var(--r24);
  overflow: hidden;
  flex: 0 0 487px;
}
.sp-about__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-about__text {
  margin: 0;
  width: 430px;
  color: var(--dark);
  opacity: 0.86;
}

.sp-project {
  padding: 90px 0;
  background: #fff;
}
.sp-project__row {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.sp-project__main {
  width: 915px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.sp-project__img1 {
  width: 590px;
  height: 387px;
  border-radius: var(--r24);
  overflow: hidden;
  flex: 0 0 590px;
}
.sp-project__img1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-project__text {
  width: 305px;
}
.sp-project__cta {
  margin-top: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.sp-project__cta-title {
  font-size: 15px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.7;
}
.sp-arrow {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--emerald);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.sp-arrow:hover {
  transform: translateY(-2px);
  background: rgba(0, 98, 72, 0.08);
}
.sp-arrow:active {
  transform: translateY(0);
}
.sp-arrow img {
  width: 18px;
  height: 18px;
}
.sp-arrow--down img {
  transform: rotate(45deg);
}
.sp-project__img2 {
  width: 216px;
  height: 216px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 216px;
}
.sp-project__img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-steps {
  padding: 90px 0 110px;
  background: #fff;
}
.sp-steps__cards {
  margin-top: 48px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}
.sp-step-card {
  width: 387px;
  min-height: 412px;
  background: #f6f6f6;
  border-radius: var(--r24);
  padding: 49px 24px 24px;
  position: relative;
  overflow: hidden;
}
.sp-step-card::before {
  content: "";
  position: absolute;
  top: -66px;
  left: -66px;
  width: 200px;
  height: 200px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 64px;
  pointer-events: none;
}
.sp-step-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.sp-step-card__num {
  width: 30px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.7;
}
.sp-step-card__img {
  width: 174px;
  height: 134px;
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 174px;
}
.sp-step-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-step-card__title {
  margin: 34px 0 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
  color: var(--dark);
}
.sp-step-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dark);
}

/* ===========================
   NEWS PAGE
   =========================== */
.news-page {
  background: #fff;
  padding-top: 10px;
}
.news-grid {
  padding: 60px 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.news-grid__row {
  width: 1200px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.news-post {
  height: 535px;
  background: #f6f6f6;
  border-radius: var(--r24);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.news-post--sm {
  width: 285px;
}
.news-post--lg {
  width: 590px;
}
.news-post__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.news-tag {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(21, 42, 33, 0.35);
  color: var(--dark);
  font-size: 13px;
  line-height: 1.4;
  width: fit-content;
  opacity: 0.55;
}
.news-post__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
  color: var(--dark);
}
.news-post__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-post__date {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.4;
}
.news-post__img {
  margin-top: auto;
  width: 237px;
  height: 237px;
  border-radius: 12px;
  overflow: hidden;
}
.news-post__img--wide {
  width: 100%;
  height: 237px;
}
.news-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-post:hover .news-post__img img {
  transform: scale(1.03);
}
.news-post__img img {
  transition: transform 600ms var(--ease-out);
}
.news-more {
  height: 64px;
  padding: 0 20px;
  border-radius: 24px;
  border: 1px solid var(--emerald);
  background: transparent;
  color: var(--emerald);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.news-more:hover {
  background: rgba(0, 98, 72, 0.08);
  transform: translateY(-1px);
}
.news-more:active {
  transform: translateY(0);
}

/* Mobile news slider */
.news-slider {
  display: none;
  padding: 60px 0 90px;
  background: #fff;
}
.news-slider__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.news-mcard {
  flex: 0 0 285px;
  scroll-snap-align: start;
  background: #f6f6f6;
  border-radius: var(--r24);
  padding: 20px;
  height: 535px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-mcard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.17px;
  color: var(--dark);
}
.news-mcard__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-mcard__date {
  font-size: 12px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.4;
}
.news-mcard__img {
  margin-top: auto;
  width: 237px;
  height: 237px;
  border-radius: 12px;
  overflow: hidden;
}
.news-mcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================
   CHARITY HELP (Pandemic)
   =========================== */
.aid-hero {
  background: #fff;
  padding-top: 10px;
}
.aid-hero__content {
  margin-top: 60px;
}
.aid-hero__top {
  display: flex;
  gap: 145px;
  align-items: flex-start;
}
.aid-hero__title {
  margin: 0;
  width: 674px;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: var(--dark);
}
.aid-hero__lead {
  margin: 0;
  width: 346px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark);
}
.aid-hero__img-wrap {
  width: 1400px;
  height: 638px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: var(--r24);
  overflow: hidden;
  position: relative;
  background: #eaeaea;
}
.aid-hero__img-wrap::before {
  content: "";
  position: absolute;
  top: -64px;
  right: -64px;
  width: 220px;
  height: 220px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 64px;
  z-index: 2;
  pointer-events: none;
}
.aid-hero__img-wrap::after {
  content: "";
  position: absolute;
  bottom: -76px;
  left: -76px;
  width: 260px;
  height: 260px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 64px;
  z-index: 2;
  pointer-events: none;
}
.aid-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.aid-about {
  padding: 180px 0 90px;
  background: #fff;
}
.aid-left-title {
  padding-left: 203px;
}
.aid-about__row {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
}
.aid-about__left {
  width: 633px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.aid-about__mini {
  width: 183px;
  height: 168px;
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 183px;
}
.aid-about__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aid-about__right {
  width: 487px;
  height: 387px;
  border-radius: var(--r24);
  overflow: hidden;
  flex: 0 0 487px;
}
.aid-about__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aid-about__text {
  margin: 0;
  width: 430px;
  color: var(--dark);
  opacity: 0.86;
}

.aid-video {
  padding: 90px 0;
  background: #fff;
}
.aid-video__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.aid-video__title {
  width: 590px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aid-video__text {
  width: 430px;
  color: var(--dark);
}
.aid-video__media {
  margin-top: 40px;
  width: 1420px;
  height: 800px;
  border-radius: var(--r24);
  overflow: hidden;
  position: relative;
}
.aid-video__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aid-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.aid-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid #fff;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.aid-play:hover {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(255, 255, 255, 0.08);
}
.aid-play img {
  width: 64px;
  height: 64px;
}

.aid-adv {
  margin-top: 40px;
  width: 1200px;
  display: flex;
  gap: 20px;
}
.aid-adv__card {
  width: 590px;
  height: 136px;
  border-radius: var(--r24);
  border: 1px solid var(--gray);
  background: #fff;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.aid-adv__value {
  font-size: 74px;
  font-weight: 600;
  line-height: 0.7;
  letter-spacing: -2.96px;
  background: linear-gradient(148.956deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aid-adv__label {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark);
}
.aid-adv__icon {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background: var(--emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}
.aid-adv__icon img {
  width: 32px;
  height: 32px;
}

.aid-founder {
  padding: 90px 0;
  background: #fff;
}
.aid-founder__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
}
.aid-quote {
  width: 895px;
}
.aid-quote__box {
  margin-top: 24px;
  width: 692px;
  position: relative;
}
.aid-quote__mark {
  font-size: 64px;
  line-height: 1;
  color: var(--emerald);
  margin-bottom: 12px;
}
.aid-quote__text {
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark);
}
.aid-quote__sep {
  margin-top: 46px;
  width: 692px;
  height: 1px;
  background: rgba(21, 42, 33, 0.18);
}
.aid-founder__card {
  width: 183px;
}
.aid-founder__img {
  width: 183px;
  height: 178px;
  border-radius: 18px;
  overflow: hidden;
}
.aid-founder__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aid-founder__name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}
.aid-founder__role {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark);
  opacity: 0.7;
}

.aid-partners {
  padding: 90px 0;
  background: #fff;
}
.aid-partners__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.aid-partners__title {
  width: 590px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aid-partners__text {
  width: 430px;
}
.aid-logos {
  margin-top: 40px;
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.aid-logo-card {
  width: 285px;
  height: 168px;
  border-radius: var(--r24);
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.aid-logo-card img {
  width: 100%;
  height: 76px;
  object-fit: contain;
}

.innov-hero {
  background: #fff;
  padding-top: 10px;
}
.innov-hero__content {
  margin-top: 60px; /* Figma gap */
}
.innov-hero__top {
  display: flex;
  gap: 145px;
  align-items: flex-start;
}
.innov-hero__title {
  margin: 0;
  width: 674px;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: var(--dark);
}
.innov-hero__lead {
  margin: 0;
  width: 346px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark);
}
.innov-hero__img-wrap {
  width: 1400px;
  height: 638px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: var(--r24);
  overflow: hidden;
  position: relative;
}
.innov-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.innov-section {
  background: #fff;
  padding: 180px 0 90px;
}
.innov-section#startup {
  padding-top: 90px;
}
.innov-section#academy {
  padding-top: 90px;
}
.innov-section#technovation {
  padding-top: 180px;
}

.steps {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
.step-card {
  width: 285px;
  height: 412px;
  border-radius: var(--r24);
  background: var(--light-gray);
  padding: 49px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.step-card__num {
  width: 30px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.7;
}
.step-card__img {
  width: 174px;
  height: 134px;
  object-fit: contain;
}
.step-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
}
.step-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dark);
}

.academy {
  display: flex;
  gap: 20px;
  align-items: center;
}
.academy__img {
  width: 590px;
  height: 529px;
  border-radius: var(--r24);
  overflow: hidden;
  background: var(--gray);
}
.academy__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.academy__content {
  width: 590px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.innov-tv__title {
  width: 1200px;
  padding-left: 203px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto 40px;
}
.innov-tv__content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  justify-content: center;
}
.innov-tv__left {
  width: 633px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.innov-tv__small {
  width: 183px;
  height: 168px;
  border-radius: var(--r24);
  overflow: hidden;
  flex: 0 0 183px;
  min-width: 183px;
}
.innov-tv__small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.innov-tv__big {
  width: 487px;
  height: 387px;
  border-radius: var(--r24);
  overflow: hidden;
}
.innov-tv__big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-innovations .contact {
  padding-top: 90px;
}

@media (max-width: 980px) {
  .innov-hero__top {
    flex-direction: column;
    gap: 14px;
  }
  .innov-hero__title,
  .innov-hero__lead {
    width: 100%;
  }
  .innov-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .innov-hero__img-wrap {
    width: calc(100% - 20px);
    height: 260px;
  }
  .innov-section {
    padding: 90px 0;
  }
  .steps {
    flex-direction: column;
  }
  .step-card {
    width: 100%;
    height: auto;
  }
  .academy {
    flex-direction: column;
    align-items: stretch;
  }
  .academy__img,
  .academy__content {
    width: 100%;
    height: auto;
  }
  .innov-tv__title,
  .innov-tv__content {
    width: 100%;
    padding-left: 0;
  }
  .innov-tv__content {
    flex-direction: column;
  }
  .innov-tv__left {
    width: 100%;
  }
  .innov-tv__big {
    width: 100%;
    height: 240px;
  }
}
.btn__point {
  width: 10px;
  height: 26px;
}
.btn__arrow {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translateX(2px);
}
.btn__arrow img {
  width: 16px;
  height: 16px;
}
.btn__arrow--dark {
  background: var(--dark);
}
.btn__arrow--transparent {
  background: transparent;
}

/* HERO */
.hero {
  position: relative;
  padding-top: 10px; /* pt[10] */
  padding-bottom: 113px; /* pb[113] */
  border-bottom-left-radius: var(--r24);
  border-bottom-right-radius: var(--r24);
  overflow: hidden;
}
.hero::after {
  /* inner stroke like in Figma */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-left-radius: var(--r24);
  border-bottom-right-radius: var(--r24);
  pointer-events: none;
  z-index: 2;
}
.hero::before {
  /* subtle “tech” glow overlay */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(219, 248, 196, 0.14), transparent 60%),
    radial-gradient(700px 400px at 80% 35%, rgba(157, 226, 103, 0.10), transparent 62%);
  opacity: 0.9;
  animation: heroGlow 10s var(--ease-out) infinite alternate;
}

/* ===========================
   ABOUT PAGE
   =========================== */
.page-about .wrap--wide {
  width: 1420px;
}
.hero--about .hero__bg--about {
  background:
    radial-gradient(900px 500px at 15% 30%, rgba(219, 248, 196, 0.15), transparent 62%),
    radial-gradient(700px 400px at 85% 35%, rgba(157, 226, 103, 0.10), transparent 62%),
    linear-gradient(138.342deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
}
.hero__actions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.btn--lg {
  height: 64px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-photo--about {
  width: 456px;
}
.about-hero__title {
  margin: 0;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: #fff;
  width: 674px;
}
.about-hero__title .t-lg {
  color: var(--light-green);
}
.about-hero__lead {
  margin: 0;
  width: 387px;
  color: #fff;
  font-size: 17px;
  line-height: 1.4;
}
/* legacy selector (kept for safety if reused elsewhere) */
.about-hero__actions .btn--stroke-white {
  height: 64px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-hero__right {
  width: 456px;
}
.about-hero__photo {
  width: 456px;
  height: 533px;
  border-radius: var(--r18);
  overflow: hidden;
  position: relative;
}
.about-hero__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* History */
.history {
  background: #fff;
}
.history__row {
  padding-top: 140px;
  padding-bottom: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history__left {
  width: 632px;
}
.history__title {
  padding-left: 202px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.history__text {
  padding-left: 100px;
  display: flex;
  gap: 46px;
  align-items: flex-start;
}
.history__avatars {
  width: 56px;
  height: 98px;
  flex: 0 0 auto;
}
.history__right {
  width: 523px;
}
.history__collage {
  width: 100%;
  height: auto;
}

/* Timeline */
.timeline {
  padding: 100px 0;
}
.timeline__card {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.timeline__head {
  display: flex;
  align-items: center;
  gap: 157px;
  padding-left: 203px;
}
.timeline__year {
  width: 250px;
  font-size: 74px;
  font-weight: 600;
  line-height: 0.7;
  letter-spacing: -2.96px;
  color: var(--dark);
}
.timeline__sep {
  height: 1px;
  background: rgba(21, 42, 33, 0.18);
}
.timeline__body {
  display: flex;
  gap: 428px;
  align-items: flex-start;
}
.timeline__img {
  width: 183px;
  height: 178px;
  border-radius: var(--r24);
  object-fit: cover;
}
.timeline__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.timeline__h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.timeline__p {
  width: 430px;
  font-size: 15px;
  line-height: 1.4;
}
.dots {
  display: flex;
  gap: 4px;
  padding: 8px 4px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(21, 42, 33, 0.22);
}
.dot--active {
  background: rgba(21, 42, 33, 1);
}
.arrow-btn {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--gray);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.arrow-btn--active {
  border-color: var(--dark);
}
.arrow-btn img {
  width: 18px;
  height: 18px;
}

/* Cases slider */
.cases {
  padding: 90px 0;
}
.cases__slider {
  position: relative;
}
.cases__track {
  display: flex;
  gap: 20px;
  overflow: hidden;
  scroll-behavior: smooth;
}
.case-card {
  flex: 0 0 auto;
  width: 632px;
  height: 413px;
  border-radius: var(--r24);
  background: linear-gradient(138.342deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 14px;
  padding: 24px;
  color: #fff;
}
.case-card__left {
  width: 285px;
  height: 365px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.case-tag {
  height: 40px;
  border-radius: var(--r12);
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.case-tag__icon {
  width: 12px;
  height: 12px;
}
.case-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
}
.case-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.7;
}
.case-card__arrow {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.case-card__arrow img {
  width: 18px;
  height: 18px;
}
.case-card__img {
  width: 285px;
  height: 340px;
  border-radius: var(--r12);
  object-fit: cover;
  align-self: flex-end;
}
.cases__controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 40px;
}

/* Contact form */
.contact {
  padding: 90px 0;
}
.contact__shell {
  height: 609px;
  border-radius: var(--r24);
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 12% 35%, rgba(219, 248, 196, 0.12), transparent 62%),
    linear-gradient(138.342deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
}
.contact__inner {
  height: 100%;
  padding: 0 120px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.contact__left {
  width: 512px;
  padding-bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__form {
  width: 500px;
  padding-bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__form .btn {
  width: fit-content; /* button is content-sized in Figma */
  align-self: flex-start;
}
.field {
  display: block;
  border: 1px solid #fff;
  border-radius: var(--r12);
  height: 50px;
  padding: 14px 20px;
}
.field__label {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.7;
  color: #fff;
}
.field__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  padding: 0;
  margin-top: 4px;
}
.field__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 980px) {
  .about-hero__left,
  .about-hero__right,
  .hero-photo--about {
    width: 100%;
  }
  .hero-photo--about {
    height: 320px;
  }
  .about-hero__title {
    width: 100%;
    font-size: 36px;
    letter-spacing: -1px;
  }
  .about-hero__lead {
    width: 100%;
  }
  .history__row {
    padding: 90px 0 40px;
    flex-direction: column;
    gap: 24px;
  }
  .history__left,
  .history__right {
    width: 100%;
  }
  .history__title,
  .history__text {
    padding-left: 0;
  }
  .timeline__card,
  .timeline__head,
  .timeline__p {
    width: 100%;
    padding-left: 0;
    gap: 14px;
  }
  .timeline__body {
    flex-direction: column;
    gap: 18px;
  }
  .timeline__img {
    width: 100%;
    height: 200px;
  }
  .cases__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .case-card {
    width: 320px;
    height: auto;
    flex-direction: column;
  }
  .case-card__img {
    width: 100%;
    height: 200px;
    align-self: stretch;
  }
  .contact__inner {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .contact__left,
  .contact__form {
    width: 100%;
    padding-bottom: 0;
  }
}
@keyframes heroGlow {
  from { transform: translate3d(0,0,0); opacity: 0.78; }
  to { transform: translate3d(0,-6px,0); opacity: 0.92; }
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("./Main page/Photo/Hero-BG.png") center / cover no-repeat;
}
.hero .wrap--hero {
  position: relative;
  z-index: 1;
}
.hero__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 45px; /* gap[45] from Figma */
}
.hero__left {
  width: 725px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__left .btn {
  width: fit-content; /* button is content-sized in Figma */
}

.hero-title {
  position: relative;
  width: 725px;
  height: 186px; /* aligns with Figma title offsets (0 / 66 / 132) */
}
.hero-title__line {
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: #fff;
}
.hero-title__gradient {
  background: linear-gradient(90deg, #9de267, #dbf8c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title__line--1 {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.hero-title__spark {
  position: absolute;
  width: 52px;
  height: 27px;
  /* Figma placement: ml 54.01%, mt 12.04% inside the title block */
  left: 48%;
  top: 12.04%;
}
.hero-title__avatars {
  position: absolute;
  height: 56px;
  width: auto;
  left: 0;
  top: 73px; /* Figma mt[73] */
}
.hero-title__line--2 {
  position: absolute;
  left: 106px; /* Figma ml[106] */
  top: 66px; /* Figma mt[66] */
  white-space: nowrap;
}
.hero-title__line--3 {
  position: absolute;
  left: 0;
  top: 132px; /* Figma mt[132] */
  width: 666px;
}

.hero__lead {
  width: 387px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

.hero__right {
  width: 463px;
}
.hero-photo {
  width: 463px;
  height: 533px;
  border-radius: var(--r18);
  overflow: hidden;
  position: relative;
}
.hero-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo__badge {
  position: absolute;
  left: 20px;
  top: 454px; /* matches Figma top */
  border-radius: var(--r12);
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}
.hero-photo__badge-icon {
  width: 28px;
  height: 31px;
}

/* ABOUT */
.about {
  background: #fff;
  padding-top: 180px;
  padding-bottom: 90px;
}
.about__top {
  display: flex;
  align-items: center;
  gap: 55px;
}
.about__img {
  width: 555px;
}
.about__img img {
  width: 100%;
  border-radius: var(--r24);
}
.about__content {
  width: 590px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Figma: items-start (prevents button stretching) */
  gap: 24px;
}

/* About button should be content-sized and slightly tighter than global button */
.about__content .btn {
  width: fit-content;
  align-self: flex-start;
  gap: 14px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.badge__icon {
  width: 21px;
  height: 23px;
}
.badge--dark span {
  font-size: 16px;
  line-height: 1.1;
  opacity: 0.5;
  color: var(--dark);
}
.badge--light span {
  font-size: 16px;
  line-height: 1.1;
  opacity: 0.5;
  color: #fff;
}
.h2 {
  margin: 0;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.1;
}
.h2--center {
  text-align: center;
}
.h2--white {
  color: #fff;
}
.p17 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}
.p17--white {
  color: #fff;
}
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.bullets li {
  position: relative;
  padding-left: 17px;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 7px;
  height: 18px;
  background: url("./Icons SVG/Other/bullet point.svg") center / contain no-repeat;
}

.stats {
  margin-top: 100px; /* Figma gap[100] between about content and cards row */
  display: flex;
  gap: 20px;
  align-items: center;
}
.stat {
  width: 285px;
  height: 300px;
  border-radius: var(--r24);
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat--outline {
  border: 1px solid var(--gray);
  background: #fff;
}
.stat--gradient {
  background: linear-gradient(109.101deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
  color: #fff;
}
.stat__value {
  font-size: 74px;
  font-weight: 600;
  line-height: 0.7;
  letter-spacing: -2.96px;
  display: inline-block;
  padding-bottom: 6px; /* prevents bottom clipping on some font renderers */
}
.stat__value--gradient {
  background: linear-gradient(148.956deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  font-size: 17px;
  line-height: 1.4;
}
.stat__icon {
  margin-top: auto;
  width: 56px;
  height: 56px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat__icon--emerald {
  background: var(--emerald);
}
.stat__icon img {
  width: 32px;
  height: 32px;
}
.stat--image .stat__image:not(.stat__image--white) {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 1;
}
.stat--image .stat__image--white {
  left: 24px;
  bottom: 20px;
  width: 100px;
  height: auto;
  max-width: none; /* prevent global img { max-width:100% } from squeezing width and distorting circles */
}

/* Section wrappers */
.section {
  padding: 90px 0;
  background: #fff;
}
.center-title {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}

/* Image cards (Activities/Projects) */
.cards3 {
  display: flex;
  gap: 20px;
}
.cards4 {
  display: flex;
  gap: 20px;
}
.card-img {
  width: 460px;
  height: 360px;
  border-radius: var(--r24);
  overflow: hidden;
  position: relative;
  display: block;
}
.card-img:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}
.card-img--sm {
  width: 340px;
}
.card-img__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.card-img:hover .card-img__bg {
  transform: scale(1.04);
}
.card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 27, 16, 0) 0%, rgba(0, 27, 16, 0.6) 59.615%, rgba(0, 27, 16, 0.9) 100%);
}
.card-img__arrow {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 73.539px;
  height: 73.539px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img__arrow-rot {
  width: 52px;
  height: 52px;
  transform: rotate(315deg);
}

/* Activities block: no arrow icons on image cards (per Figma) */
#activities .card-img__arrow {
  display: none;
}
.card-img__glass {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-radius: var(--r24);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
  color: #fff;
  backdrop-filter: blur(7px);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.card-img:hover .card-img__glass {
  border-color: rgba(255, 255, 255, 0.22);
}
.card-img__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
}
.card-img__desc {
  font-size: 15px;
  line-height: 1.4;
}

/* Founder */
.section--founder {
  padding-top: 90px;
  padding-bottom: 90px;
}
.founder {
  position: relative;
}
.founder__shell {
  width: 1420px;
  height: 683.55px;
  border-radius: var(--r24);
  overflow: hidden; /* keeps outer corners rounded */
}
.founder__panel {
  width: 100%;
  height: 100%;
  padding: 78px 24px 24px 110px;
  background: linear-gradient(138.342deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(0, 71, 47) 102.8%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* single solid shape (concave cuts top/bottom like in Figma) */
  --notch-x: 58%;
  --notch-w: 54px;
  --notch-d: 44px;
  clip-path: polygon(
    0 0,
    calc(var(--notch-x) - var(--notch-w)) 0,
    var(--notch-x) var(--notch-d),
    calc(var(--notch-x) + var(--notch-w)) 0,
    100% 0,
    100% 100%,
    calc(var(--notch-x) + var(--notch-w)) 100%,
    var(--notch-x) calc(100% - var(--notch-d)),
    calc(var(--notch-x) - var(--notch-w)) 100%,
    0 100%
  );
}
.founder__left {
  width: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep button content-sized */
  gap: 24px;
}
.founder__left .btn {
  width: fit-content;
}
.founder__right {
  width: 559px;
  height: 575px;
  border-radius: var(--r18);
  background: transparent; /* no extra light-green underlay */
  padding: 0;
  flex: 0 0 auto;
}
.founder__img {
  width: 100%;
  height: 100%;
  border-radius: var(--r18);
  overflow: hidden;
}
.founder__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote {
  position: absolute;
  /* re-aligned to sit over the photo area like in Figma */
  left: 610px;
  top: 418px;
  width: 285px;
  padding: 14px 20px;
  border-radius: var(--r12);
  border: 1px solid #fff;
  backdrop-filter: blur(22px);
  box-shadow: -8px 14px 27px rgba(0, 0, 0, 0.1);
  background: linear-gradient(247.252deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.84) 88.454%);
  color: var(--dark);
  z-index: 5; /* ensure it's above the clipped panel */
}
.quote__mark {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1.6px;
  line-height: 1;
  height: auto; /* prevent clipping */
}
.quote__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  margin-top: 10px;
}
.quote__author {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.4;
}

/* News */
.news {
  display: flex;
  gap: 20px;
  align-items: center;
}
.news-card {
  width: 285px;
  height: 535px;
  background: var(--light-gray);
  border-radius: var(--r24);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-1);
}
.news-card--wide {
  width: 590px;
}
.tag {
  height: 40px;
  border-radius: var(--r12);
  border: 1px solid var(--dark);
  opacity: 0.4;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  font-size: 13px;
  line-height: 1.4;
  width: fit-content;
}
.h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.18px;
}
.p15 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.p15--muted {
  opacity: 0.7;
}
.date {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.4;
}
.news-card__img {
  width: 237px;
  height: 237px;
  border-radius: var(--r12);
  object-fit: cover;
  margin-top: auto;
  transition: transform 600ms var(--ease-out);
}
.news-card:hover .news-card__img {
  transform: scale(1.03);
}
.news-card__img--wide {
  width: 100%;
  height: 237px;
  object-position: 50% 0%;
}

/* Footer */
.footer {
  padding: 90px 0;
  background: linear-gradient(138.342deg, rgb(0, 27, 16) 10.933%, rgb(0, 71, 47) 56.29%, rgb(48, 142, 111) 102.8%);
  border-top-left-radius: var(--r24);
  border-top-right-radius: var(--r24);
  color: #fff;
}
.footer__top {
  display: flex;
  justify-content: space-between;
}
.footer__logo img {
  height: 69px;
  width: auto;
}
.footer__right {
  width: 590px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.footer__label {
  font-size: 16px;
  line-height: 1.1;
  opacity: 0.7;
}
.footer__email {
  margin-top: 20px;
  font-size: 74px;
  font-weight: 600;
  line-height: 0.7;
  letter-spacing: -2.96px;
}
.footer__addr {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  line-height: 1.4;
}
.footer__pin {
  width: 40px;
  height: 40px;
  border-radius: var(--r12);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer__pin img {
  width: 32px;
  height: 44px;
}
.footer__sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 40px 0;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  font-size: 16px;
  line-height: 1.1;
  opacity: 0.7;
}
.to-top {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid #fff;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.to-top:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}
.to-top:active {
  transform: translateY(0);
}
.to-top img {
  width: 9px;
  height: 9px;
  transform: rotate(-135deg);
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  background: #fff;
  display: none;
  z-index: 9999;
}
.menu.is-open {
  display: block;
}
.menu__header {
  height: 74px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(21, 42, 33, 0.2);
}
.menu__header .brand__img {
  height: 43px;
}
.menu__nav {
  height: calc(100vh - 74px);
  display: grid;
  place-content: center;
  gap: 34px;
  text-align: center;
}
.menu__link {
  font-size: 20px;
  line-height: 1.4;
  color: var(--dark);
}

/* Mobile menu dropdown: "Проекты" */
.menu-dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.menu-dd__toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.menu-dd__list {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.menu-dd.is-open .menu-dd__list {
  display: flex;
}
.menu-dd__item {
  font-size: 18px;
  line-height: 1.35;
  color: var(--dark);
  opacity: 0.85;
}
.menu-dd__item:hover {
  opacity: 1;
}
.menu-dd__item--active {
  color: var(--emerald);
  opacity: 1;
  font-weight: 600;
}
.menu-dd__item[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.menu__social {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
}

/* Responsive (mobile layout approximates Figma mobile artboard width 360) */
@media (max-width: 980px) {
  .wrap,
  .wrap--hero,
  .wrap--wide {
    width: calc(100% - 40px);
  }
  .nav,
  .header__social,
  .btn--contacts {
    display: none;
  }
  .header__burger {
    display: inline-flex;
  }
  .hero__content {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .hero__left,
  .hero-title {
    width: 100%;
  }
  .hero-title {
    height: auto;
  }
  .hero-title__line {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .hero-title__line--1,
  .hero-title__line--2,
  .hero-title__line--3,
  .hero-title__spark,
  .hero-title__avatars {
    position: static;
    width: auto;
    left: auto;
    top: auto;
  }
  .hero-title__spark,
  .hero-title__avatars {
    display: none; /* matches mobile artboard which uses different hero visuals */
  }
  .hero__lead {
    width: 100%;
  }
  .hero__right,
  .hero-photo {
    width: 100%;
    height: 320px;
  }
  .about__top {
    flex-direction: column;
    align-items: stretch;
  }
  .about__img,
  .about__content {
    width: 100%;
  }
  .stats {
    flex-direction: column;
  }
  .stat {
    width: 100%;
  }
  .cards3,
  .cards4,
  .news {
    flex-direction: column;
  }
  .sp-hero__top {
    flex-direction: column;
    gap: 16px;
  }
  .sp-hero__title,
  .sp-hero__lead {
    width: 100%;
  }
  .sp-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .sp-hero__img-wrap {
    width: 100%;
    height: 243px;
  }
  .sp-hero__img-wrap::before,
  .sp-hero__img-wrap::after {
    display: none;
  }
  .sp-left-title {
    padding-left: 0;
  }
  .sp-about {
    padding: 80px 0 60px;
  }
  .sp-about__row {
    flex-direction: column;
    gap: 24px;
  }
  .sp-about__left,
  .sp-about__right {
    width: 100%;
  }
  .sp-about__right {
    height: 240px;
    flex: 0 0 auto;
  }
  .sp-about__text {
    width: 100%;
  }
  .sp-project__row,
  .sp-project__main {
    flex-direction: column;
  }
  .sp-project__main,
  .sp-project__img1,
  .sp-project__text,
  .sp-project__img2 {
    width: 100%;
  }
  .sp-project__img1 {
    height: 240px;
    flex: 0 0 auto;
  }
  .sp-project__img2 {
    width: 140px;
    height: 140px;
    align-self: flex-end;
    flex: 0 0 auto;
  }
  .sp-steps__cards {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-step-card {
    width: 100%;
    min-height: auto;
  }
  /* News page: switch to mobile slider */
  .news-grid {
    display: none;
  }
  .news-slider {
    display: block;
  }

  /* Charity help page */
  .aid-hero__top {
    flex-direction: column;
    gap: 16px;
  }
  .aid-hero__title,
  .aid-hero__lead {
    width: 100%;
  }
  .aid-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .aid-hero__img-wrap {
    width: 100%;
    height: 243px;
  }
  .aid-hero__img-wrap::before,
  .aid-hero__img-wrap::after {
    display: none;
  }
  .aid-left-title {
    padding-left: 0;
  }
  .aid-about {
    padding: 80px 0 60px;
  }
  .aid-about__row {
    flex-direction: column;
    gap: 24px;
  }
  .aid-about__left,
  .aid-about__right {
    width: 100%;
  }
  .aid-about__right {
    height: 240px;
    flex: 0 0 auto;
  }
  .aid-about__text {
    width: 100%;
  }
  .aid-video__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .aid-video__title,
  .aid-video__text {
    width: 100%;
  }
  .aid-video__media {
    width: 100%;
    height: 320px;
  }
  .aid-adv {
    width: 100%;
    flex-direction: column;
  }
  .aid-adv__card {
    width: 100%;
  }
  .aid-founder__row {
    flex-direction: column;
    gap: 24px;
  }
  .aid-quote,
  .aid-quote__box,
  .aid-quote__sep {
    width: 100%;
  }
  .aid-founder__card {
    width: 100%;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: center;
  }
  .aid-founder__img {
    width: 90px;
    height: 90px;
  }
  .aid-founder__name,
  .aid-founder__role {
    margin-top: 0;
  }
  .aid-partners__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .aid-partners__title,
  .aid-partners__text {
    width: 100%;
  }
  .aid-logos {
    width: 100%;
  }
  .aid-logo-card {
    width: calc(50% - 10px);
  }
  .card-img,
  .card-img--sm,
  .news-card,
  .news-card--wide {
    width: 100%;
  }
  .founder__panel {
    width: 100%;
    height: auto;
    padding: 40px 20px;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .founder__right,
  .founder__img {
    width: 100%;
    height: 320px;
  }
  .quote {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
  .footer__top {
    flex-direction: column;
    gap: 24px;
  }
  .footer__right {
    width: 100%;
  }
  .footer__email {
    font-size: 42px;
    line-height: 1;
  }
}

/* Scroll reveal (used by script.js) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal--delay-1 { transition-delay: 90ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 230ms; }