/* Общие стили */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  color: #111;
  line-height: 1.4;
}

/* HERO */
.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.9));
}

.hero__content {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  width: 100%;
  max-width: 400px;
  padding: 0 16px;
}

.hero__name {
  font-size: 22px;
  font-weight: 700;
}

.hero__bio {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 4px;
}

.hero__socials {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero__socials a img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.hero__socials a img:hover {
  transform: scale(1.1);
}

/* СЕТКА КАРТОЧЕК */
.cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #000;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card__title{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  z-index:2;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}

/* Широкие карточки */
.card--wide {
  height: 180px;
}

/* Две квадрата рядом */
.card-row {
  display: flex;
  gap: 14px;
}

.card--square {
  flex: 1;
  aspect-ratio: 1 / 1; /* делает квадрат */
}

/* ФУТЕР */
.footer {
  text-align: center;
  font-size: 12px;
  padding: 20px;
  color: #555;
}

/* Подключаем fade-up к элементам */
.hero, .cards, .card, .hero__socials { will-change: transform, opacity; }

/* Font Awesome socials styles */
.hero__socials {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 18px;
  transition: background .2s ease, transform .2s ease;
}

.hero__socials a:hover {
  background: rgba(255,255,255,.3);
  transform: translateY(-2px);
}

/* Фон страницы как у них: мягкий вертикальный градиент */
.app{
  min-height:100dvh;
  display:grid; place-items:center;
  background: linear-gradient(#f4f6ff 0%, #edf1ff 40%, #e9eefc 100%);
  padding: 24px;
}

/* Центральная «карточка-телефон» */
.phone{
  position: relative;
  width:min(420px, 100%);
  background:#e8d9bd;                  /* бежевый фон как у примера */
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  overflow:hidden;                      /* скругления применятся и к фото */
  border:1px solid rgba(0,0,0,.05);
}

/* Verify badge */
.verify-badge{
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(#5ab0ff, #2f82e6);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  border: 2px solid #fff;            /* белое кольцо, как в рефе */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  z-index: 10;
  transition: transform .15s ease;
}
.verify-badge:hover{ transform: scale(1.06); }

/* HERO внутри карточки */
.hero--in-card{
  position: relative;
  height: 360px;
}
.hero--in-card .hero__img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero--in-card .hero__fade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 20%, rgba(232,217,189,1) 80%);
  mix-blend-mode: multiply;             /* мягкий «перелив» фото в фон */
}
.hero--in-card .hero__content{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:100%; max-width: 340px; text-align:center; color:#1b1b1b;
}
.hero__name{font-size:18px; font-weight:800; color:#1b1b1b}
.hero__bio{font-size:12px; margin-top:4px; color:#6b5f4c}

/* Крошечные круглые «чипы» соцсетей */
.hero__socials--chips{
  margin-top:10px;
  display:flex; justify-content:center; gap:10px;
}
.hero__socials--chips a{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:#f2e7cf;                   /* светлые кружки */
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.06) inset;
  color:#333; font-size:14px;
  transition: transform .18s ease, background .18s ease;
}
.hero__socials--chips a:hover{ transform:translateY(-2px); background:#f7edd8 }

/* Затемнение под текстом — ниже слоя текста */
.card::after{ z-index:1; }

/* Контент карточек внутри «телефона» */
.cards{ padding: 14px; }
.card{ border-radius:16px; overflow:hidden; background:#000; color:#fff; position:relative; }
.card--wide{ height:220px; }
.card-row{ display:flex; gap:14px; }
.card--square{ flex:1; aspect-ratio:1/1; }
.card img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__title{ position:absolute; left:10px; right:10px; bottom:10px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.6); }

.footer{ text-align:center; font-size:12px; color:#6b5f4c; padding: 10px 0 16px; }

/* фон карточки (как у референса) */
.phone{ background:#e8d9bd; }

/* HERO: вертикальный портрет + плавный переход в фон карточки */
.hero--in-card{
  position:relative;
  height:460px;                 /* больше высота под вертикальное фото */
  overflow:hidden;
}
.hero--in-card .hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;   /* акцент на верхнюю часть фото */
  display:block;
}
/* ключ: градиент, «сливающий» фото с бежевым фоном карточки */
.hero--in-card .hero__blend{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(232,217,189,0) 55%,
      rgba(232,217,189,.55) 72%,
      rgba(232,217,189,.85) 82%,
      #e8d9bd 90%,
      #e8d9bd 100%
    );
  mix-blend-mode:multiply;      /* даёт мягкий «перелив» */
}

/* Текст на зоне перехода */
.hero--in-card .hero__content{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:100%; max-width:340px; text-align:center;
  color:#1b1b1b; text-shadow:0 2px 8px rgba(232,217,189,.35);
}
.hero__name{font-size:18px; font-weight:800}
.hero__bio{font-size:12px; margin-top:4px; color:#6b5f4c}

/* Кружки соцсетей как «чипсы» на бежевом */
.hero__socials--chips{
  margin-top:10px; display:flex; justify-content:center; gap:10px;
}
.hero__socials--chips a{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:#f2e7cf; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.06) inset;
  color:#333; font-size:14px;
  transition:transform .18s ease, background .18s ease;
}
.hero__socials--chips a:hover{ transform:translateY(-2px); background:#f7edd8 }

/* Небольшая коррекция отступов ниже, чтобы первая широкая карточка не залипала к шапке */
.cards{
  position:relative;
  z-index:1;
  padding:14px;
  padding-top:100px;   /* увеличиваем отступ сверху */
}

@media (min-width:480px){
  .hero--in-card{ height:500px; }
}

/* === Вертикальное фото + мягкий переход в фон (обновлено) === */
:root{ --card:#e8d9bd; }              /* цвет фона карточки */

.phone{ background:var(--card); }

.hero--in-card{
  position: relative;
  height: 520px;        /* как у тебя/оставь нужное */
  background: var(--card);
  overflow: visible;    /* было hidden — из-за этого резало иконки */
  z-index: 2;
}

/* КЛЮЧ: маска, которая гасит низ фото в «прозрачность» */
.hero--in-card .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,.9) 70%,
    rgba(0,0,0,.55) 85%,
    rgba(0,0,0,.18) 95%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,.9) 70%,
    rgba(0,0,0,.55) 85%,
    rgba(0,0,0,.18) 95%,
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* лёгкая затемняющая вуаль сверху, чтобы лицо читалось */
.hero--in-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0) 40%);
}

/* текст и чипсы на зоне перехода */
.hero--in-card .hero__content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -36px;              /* было -12px или др. */
  width: 100%;
  max-width: 340px;
  text-align: center;
  z-index: 3;
}

/* Имя и описание — остаются выше */
.hero__text{
  position: relative;
  bottom: -6px;               /* было 14px; можно поставить 0 */
  color: #1b1b1b;
}
.hero__name{font-size:18px; font-weight:800}
.hero__bio{font-size:12px; margin-top:4px; color:#6b5f4c}

/* Иконки — опускаем ближе к первой карточке */
.hero__socials--chips{
  margin-top: 14px;
}
.hero__socials--chips a{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:#f2e7cf; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.06) inset;
  color:#333; font-size:14px; transition:transform .18s, background .18s;
}
.hero__socials--chips a:hover{ transform:translateY(-2px); background:#f7edd8 }

/* Отступ сверху у блока карточек, чтобы не наехали на иконки */
.cards{
  position: relative;
  z-index: 1;
  padding: 14px;
  padding-top: 58px;   /* 72–84px найди своё; стартуем с 76 */
}

/* текстовая «белая» карточка */
.card--note{
  background:#fff;                 /* чисто белый */
  color:#111;
  border:1px solid #eaeaea;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border-radius:16px;
  min-height:68px;
  padding:16px 18px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
/* не нужен затемняющий оверлей и эффекты картинки */
.card--note::after{ content:none; }  /* без затемнения */
.card--note img{ display:none; }

/* типографика внутри */
.note__content h3{ margin:0; font-size:15px; font-weight:800; }
.note__content p{ margin:6px 0 0; font-size:13px; color:#666; }

/* если это <a>, лёгкий hover */
a.card--note:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
/* чисто белый текстовый блок */
.card.card--note{ 
  background:#f2e7cf !important;
  color:#111;
  border:1px solid #eaeaea;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

/* убираем затемняющий оверлей у note */
.card.card--note::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* на всякий случай — внутри ничего не заливаем */
.card.card--note *{ background:transparent !important; }
.cta-telegram{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin: 12px 14px 18px;         /* вровень с карточками */
  padding:14px 16px;
  border-radius:14px;
  background:#2AABEE;             /* фирменный телеграм-синий */
  color:#fff; text-decoration:none; font-weight:800;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(42,171,238,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-telegram i{ font-size:18px; }
.cta-telegram:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(42,171,238,.35); }