/* ===========================================================
   v2 — концепт «сайт-визитка → воронка в закрытое комьюнити»
   Подключается ПОСЛЕ styles.css, переиспользует те же токены.
   =========================================================== */

/* ---------- HERO ---------- */
/* статистика — равные колонки + аккуратный перенос длинных подписей */
.hero-trust div { flex:1 1 110px; min-width:0; max-width:172px; }
/* фото — крупнее, видна верхняя половина тела, человек по центру кадра */
.hero-photo { background-image:url('assets/founder.jpg'); background-repeat:no-repeat; background-size:196%; background-position:34% 10%; }
.hero-photo img { display:none; }

/* ===========================================================
   COMMUNITY — ядро страницы (тёмная секция, выделяется)
   =========================================================== */
.community {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
}
.community::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 50% at 86% 4%, rgba(117,139,253,.28), transparent 60%),
    radial-gradient(48% 46% at 4% 100%, rgba(255,134,0,.16), transparent 60%);
}
.community .container { position:relative; z-index:1; }
.community .section-head h2 { color:#fff; }
.community .section-head .lead { color:rgba(255,255,255,.82); }

.comm-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:7px 15px; border-radius:var(--radius-pill); margin-bottom:18px;
}
.comm-badge svg { width:14px; height:14px; }

.comm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pillar {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm); padding:26px 22px;
  transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.pillar:hover { transform:translateY(-5px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); }
.pillar .p-ico { width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.12); display:grid; place-items:center; color:#fff; margin-bottom:18px; }
.pillar .p-ico svg { width:25px; height:25px; }
.pillar h3 { font-family:var(--display); font-size:19px; text-transform:none; letter-spacing:0; line-height:1.2; color:#fff; margin-bottom:9px; }
.pillar p { font-size:14px; line-height:1.55; color:rgba(255,255,255,.72); }

.comm-foot { margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.comm-who { font-size:15.5px; color:rgba(255,255,255,.72); max-width:40em; }
.comm-who b { color:#fff; font-weight:600; }
.comm-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.btn-lg { padding:18px 36px; font-size:17px; }
.comm-note { font-size:13px; color:rgba(255,255,255,.5); margin-top:2px; }

/* примеры инструментов — «чипсы» */
.comm-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.comm-chips span { font-size:13.5px; font-weight:500; color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:8px 15px; border-radius:var(--radius-pill); }
.comm-chips .more { color:var(--orange-2); background:rgba(255,134,0,.14); border-color:rgba(255,158,46,.4); }

/* цена */
.comm-price { display:inline-flex; align-items:baseline; gap:5px; }
.comm-price-num { font-family:var(--display); font-size:50px; line-height:1; color:#fff; }
.comm-price-per { font-size:16px; color:rgba(255,255,255,.62); }

/* ===========================================================
   SERVICES — вторичный блок (3 формата)
   =========================================================== */
.services { background:var(--bg); }
.card-price { font-family:var(--display); font-size:27px; line-height:1; color:var(--navy); margin-top:18px; }
.card-price.byagreement { font-family:var(--font); font-size:15px; font-weight:600; color:var(--muted); }

/* ===========================================================
   TELEGRAM — верх воронки (компактная полоса)
   =========================================================== */
.tg { background:var(--soft); }
.tg-card {
  display:flex; align-items:center; gap:28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 36px; box-shadow:var(--shadow-sm);
}
.tg-ico { flex:0 0 auto; width:66px; height:66px; border-radius:18px; background:var(--navy); color:#fff; display:grid; place-items:center; }
.tg-ico svg { width:30px; height:30px; }
.tg-text { flex:1; min-width:0; }
.tg-text h3 { font-family:var(--display); font-size:25px; text-transform:none; letter-spacing:0; line-height:1.1; margin-bottom:7px; }
.tg-text p { font-size:15px; color:var(--muted); }
.tg-card .btn { flex:0 0 auto; }

/* ---------- читаемость вторичного текста (особенно на мобильном) ---------- */
.pillar p { font-size:15px; }
.services .card-desc { font-size:15.5px; }
@media (max-width:760px){
  .pillar p, .services .card-desc, .comm-who, .tg-text p { font-size:16px; line-height:1.55; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .comm-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .tg-card { flex-direction:column; text-align:center; gap:18px; padding:28px 24px; }
}
@media (max-width:560px){
  .comm-grid { grid-template-columns:1fr; }
}