/* Start custom CSS for html, class: .elementor-element-0bb9100 *//* Интер с лёгким весом для сабтайтла */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --ink:#1A1A1A; --slate:#2C2C2C; --gray:#5B5B5B; --white:#fff;
  /* градиент как в хедере */
  --lav:#BAA2FF; --ind:#818DF8; --mint:#6FE3CF;
  --sun:#FFD23C;
  --max:1280px;
}

/* секция прозрачная */
.z-hero{ background:transparent; padding-block:clamp(72px,10vw,140px); color:var(--slate); }
.z-hero__container{
  margin-inline:auto; max-width:var(--max);
  padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(24px,4vw,48px);
}

/* типографика */
.z-hero__title{
  margin:0 0 12px; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:800; letter-spacing:-0.015em; line-height:1.08;
  font-size:clamp(2.625rem,4.4vw,3.75rem); /* ≈42–60 */
  max-width:16ch; text-wrap:balance;
}

/* тонкий сабтайтл как в меню: лёгкий вес, аккуратный контраст */
.z-sub-thin{
  margin:0 0 28px !important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:300 !important;  /* тонкий */
  font-size:clamp(1rem,1.05vw + .45rem,1.25rem) !important;
  line-height:1.6 !important;
  color:color-mix(in oklab, var(--slate) 58%, white 42%) !important;
  text-decoration:none !important;
  -webkit-font-smoothing:antialiased;
}

/* глушим любые декоративные подчёркивания темы внутри hero */
.z-hero a, .z-hero p, .z-hero h1{ text-decoration:none !important; background-image:none !important; }

/* кнопки — повышаем специфичность и ставим !important на ключевые св-ва */
.z-hero .z-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px; border-radius:999px; white-space:nowrap;
  font:700 16px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background-position .35s ease, border-color .18s ease;
  will-change:transform, box-shadow, background-position;
}

/* ПЕРВИЧНАЯ: точная «пилюля» как в шапке */
.z-hero .z-btn--primarypill{
  color:var(--white) !important;
  border:2px solid var(--white) !important;
  background-image:linear-gradient(135deg, var(--lav) 0%, var(--ind) 50%, var(--mint) 100%) !important;
  background-size:160% 160% !important;
  box-shadow:0 10px 26px rgba(64,56,140,.18), inset 0 1px 0 rgba(255,255,255,.45) !important;
  text-shadow:0 1px rgba(0,0,0,.12);
}
.z-hero .z-btn--primarypill::after{ /* лёгкий верхний глянец */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
}
.z-hero .z-btn--primarypill:hover{
  transform:translateY(-2px);
  background-position:100% 0% !important;
  /* мягкий солнечный hover */
  box-shadow:
    0 14px 36px rgba(64,56,140,.28),
    0 0 0 4px rgba(255,255,255,.35) inset,
    0 0 28px color-mix(in oklab, var(--sun) 55%, transparent);
}
.z-hero .z-btn--primarypill:active{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(64,56,140,.22); }
.z-hero .z-btn--primarypill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 7px color-mix(in oklab, var(--sun) 40%, transparent);
}

/* ВТОРИЧНАЯ: аккуратный outline-пилюля */
.z-hero .z-btn--outlinepill{
  color:var(--slate) !important;
  border:2px solid color-mix(in oklab, var(--slate) 78%, white 22%) !important;
  background:rgba(255,255,255,.18) !important;
  backdrop-filter:saturate(1.06) blur(1.5px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.z-hero .z-btn--outlinepill:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.30) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.z-hero .z-btn--outlinepill:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 0 0 7px rgba(0,0,0,.22);
}

/* иллюстрация */
.z-hero__art{ margin:0; display:grid; place-items:end start; }
.z-hero__img{ display:block; width:min(100%,760px); height:auto; filter:drop-shadow(0 10px 28px rgba(49,30,120,.12)); }

/* адаптив */
@media (max-width:1080px){
  .z-hero__container{ grid-template-columns:1fr; }
  .z-hero__art{ order:2; place-items:center; }
  .z-hero__copy{ order:1; }
  .z-hero__img{ width:min(92%,640px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-73f418c *//* === Общие стили секции === */
.z-about {
  padding: 4rem 2rem;
  background: transparent; /* Прозрачный фон */
  font-family: 'Inter', sans-serif;
  color: #222;
}

.z-about__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* === Заголовок === */
.z-about__header {
  margin-bottom: 2.5rem;
}

.z-about__title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #5a66ff 0%, #b833ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* === Блок с дуо-текстами === */
.z-about__duo {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.z-duo__row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.z-duo__part {
  display: inline-block;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.z-duo__part:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18);
}

/* === Цвета для разных аудиторий === */
.z-duo__part--web3 {
  background-color: rgba(167, 180, 255, 0.9);
  color: #fff;
}

.z-duo__part--eco {
  background-color: rgba(159, 245, 159, 0.9);
  color: #1d1d1d;
}

/* === Блок с иллюстрацией === */
.z-about__art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.z-about__img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}

.z-about__img:hover {
  transform: scale(1.02);
}

/* === Адаптив === */
@media (max-width: 1024px) {
  .z-about__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .z-about__title {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .z-duo__part {
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
  }

  .z-about__title {
    font-size: 1.6rem;
  }
}/* End custom CSS */