/* ===== Personal (scoped) — НИЧЕГО ГЛОБАЛЬНОГО ===== */

/* палитра страницы (можно оставить, но это не обязательно) */
:root{
  --ink:#343d3c;
  --ink-2:#556160;
  --bg:#0f0f0f;
  --card:#151413;
  --muted:#9aa5a4;
  --accent-red:#ff2b57;
  --accent-teal:#00f1f9;
  --radius:16px;
  --shadow:0 12px 28px rgba(0,0,0,.25);
  --max:1200px;
}

/* ВАЖНО: ничего не трогаем глобально! */
*{ box-sizing:border-box }


/* Нужный фон, чтобы «белые полосы» не просвечивали */
html, body, .site-header, .personal { background:#0d0c0c; }


/* Всё оформление — только внутри <main class="personal">…</main> */
.personal{
  background:#0d0c0c;
  color:#e9eeee;
  display:block;
  overflow-x:hidden;
  padding-inline: max(16px, var(--page-gutter));
  padding-left:  max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  /* общий X-отступ страницы с учётом safe-area */
  --pad-l: max(14px, var(--page-gutter), env(safe-area-inset-left));
  --pad-r: max(14px, var(--page-gutter), env(safe-area-inset-right));

  /* Удалить/закомментировать старое: padding-inline: ... */
  padding-left:  var(--pad-l);
  padding-right: var(--pad-r);
}



/* на всякий случай — убираем горизонтальный скролл */
html, body { overflow-x: hidden; }

/* базовая сетка/отступы */
.personal .container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.personal .section   { padding: 56px 0; }

.personal .lead   { color: #cfe5e4; }
.personal .muted  { color: var(--muted); }
.personal .eyebrow{ letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--accent-teal); font-size: .8rem; }
.personal h1, .personal h2, .personal h3 { margin: 0 0 10px; }
.personal h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; }
.personal h2 { font-size: clamp(24px, 3.2vw, 34px); }
.personal h3 { font-size: clamp(18px, 2.4vw, 22px); }
.personal p  { margin: 0 0 10px; }
.personal img{ max-width: 100%; display: block; }

/* ===== HERO (full-bleed) =====
   Ожидает, что на .personal заданы:
   --pad-l / --pad-r (боковые отступы страницы)
*/
.personal .hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* растягиваем секцию на всю ширину вьюпорта */
  margin-left:  calc(-1 * var(--pad-l));
  margin-right: calc(-1 * var(--pad-r));

  /* возвращаем внутренние отступы для контента */
  padding-left:  var(--pad-l);
  padding-right: var(--pad-r);
}

/* фон заполняет всю растянутую hero */
.personal .hero .bg,
.personal .hero .art{
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: none;
}



/* градиентный слой */
.personal .hero .bg{
  background:
    radial-gradient(800px 300px at 20% 10%, rgba(0,241,249,.15), transparent 60%),
    radial-gradient(700px 300px at 80% 0%, rgba(255,43,87,.13), transparent 65%),
    #0e0e0e;
}

/* фотослой */
.personal .hero .art{
  background: url("/img/personal-hero.jpg") center/cover no-repeat;
  opacity: .28;
  mix-blend-mode: screen;
  filter: contrast(1.05) saturate(1.1);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.4) 35%, transparent 100%);
  will-change: transform;
  transform: translateZ(0); /* фикс «щелей» в Safari */
}

/* сетка контента в hero */
.personal .hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
  padding: 24px 0 10px;
}

/* карточки в hero */
.personal .stat-row{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.personal .stat{ background: linear-gradient(180deg,#141615,#0f100f); border: 1px solid rgba(255,255,255,.06); padding: 12px; border-radius: 14px; box-shadow: var(--shadow); }
.personal .stat b{ display: block; font-size: 22px; }




/* ==== Personal: карточка и галочки в hero ==== */
.personal .hero-card{
  background: linear-gradient(180deg,#151717,#111212);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;             /* был 0 — из-за этого текст «прилипал» */
}

.personal .hero-card h3{
  margin: 0 0 12px;
  color: #fff;
}

/* Строка с галочкой */
.personal .hero-card .tick{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
}

/* Иконка: делаем бирюзовый кружок + галочку внутри
   (SVG уже с fill="currentColor", поэтому цвет берем из color) */
.personal .hero-card .tick svg{
  flex: 0 0 18px;
  width: 18px; height: 18px;
  color: var(--accent-teal);                 /* цвет галочки и рамки */
  border: 2px solid currentColor;           /* кружок */
  border-radius: 50%;
  background: rgba(0,241,249,.12);          /* легкая подсветка */
  padding: 2px;                              /* чтобы «птичка» не прилипала к краю */
  box-sizing: border-box;
  margin-top: 2px;                           /* центрируем относительно текста */
}

/* Текст пункта */
.personal .hero-card .tick p{
  margin: 0;
  color: #e9f3f2;                            /* читаемый на темном фоне */
  line-height: 1.5;
}

/* Чуть плотнее на очень узких экранах */
@media (max-width: 480px){
  .personal .hero-card{ padding: 14px 14px; }
  .personal .hero-card .tick{ margin: 8px 0; gap: 8px; }
  .personal .hero-card .tick svg{ width: 16px; height: 16px; padding: 1.5px; }
}


/* контейнеры секций */
.personal .section > .container{ max-width: var(--max); margin: 0 auto; }

/* страховки от переполнения */
.personal h1, .personal h2, .personal p,
.personal .feature, .personal .pack{ overflow-wrap: anywhere; word-break: normal; }

/* мобильные корректировки */
@media (max-width: 768px){
  .personal .hero .container{
    padding-left:  clamp(18px, 5vw, 26px);
    padding-right: clamp(18px, 5vw, 26px);
  }
}
@media (max-width: 680px){
  .personal .section > .container{ padding-left: 12px; padding-right: 12px; }
  .personal .packs, .personal .t-list, .personal .faq{ gap: 12px; }
  .personal .pack{ padding: 18px 16px; }
}
@media (max-width: 560px){
  .personal .stat-row{ grid-template-columns: repeat(2, 1fr); }
}

/* WHAT YOU GET */
.personal .features{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.personal .feature{ background:#141616; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; }
.personal .feature .icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(0,241,249,.25); color:var(--accent-teal); margin-bottom:10px; }

/* PACKAGES */
.personal .packs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; align-items:stretch; }
.personal .pack{ background:#141515; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden; display:flex; flex-direction:column; contain:layout paint; }
.personal .pack.popular{ outline:2px solid var(--accent-teal); }
.personal .pack .tag{ position:absolute; top:12px; right:12px; background:var(--accent-teal); color:#001314; font-weight:800; border-radius:999px; padding:6px 10px; font-size:.75rem; }
.personal .price{ font-weight:800; font-size:28px; color:var(--accent-red); white-space:nowrap; font-variant-numeric:tabular-nums; min-height:2.4rem; }
.personal .price small{ font-size:.7em; color:var(--muted); }
.personal .pack ul{ margin:10px 0 16px; padding:0 0 0 18px; }
.personal .pack li{ margin:6px 0; }
.personal .pack .btn{ margin-top:auto; }

/* PROCESS */
.personal .steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.personal .step{ background:#141515; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; }
.personal .step .num{ width:36px; height:36px; border-radius:999px; background:rgba(0,241,249,.30); color:#fff; display:grid; place-items:center; font-weight:800; margin-bottom:8px; }

/* COACH */
.personal .coach{ display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:center; }
.personal .coach .photo{ aspect-ratio:4/3; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:url("/img/coach.jpg") center/cover #111; box-shadow:var(--shadow); }

/* TESTIMONIALS */
.personal .t-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.personal .t{ background:#141515; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; }
.personal .t .stars{ color:#ffd35a; letter-spacing:1px; margin-bottom:6px; }

/* FAQ */
.personal .faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.personal details.faq-item{ background:#141515; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px; }
.personal details > summary{ cursor:pointer; font-weight:700; list-style:none; }
.personal details > summary::-webkit-details-marker{ display:none; }
.personal details[open]{ outline:1px solid rgba(0,241,249,.22); }

/* CTA */
.personal .cta{
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(0,241,249,.12), transparent 60%),
    radial-gradient(800px 300px at 90% 10%, rgba(255,43,87,.12), transparent 60%),
    #0f0f0f;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.personal .cta .btn{ margin:6px; }


/* Общий базовый вид всех .btn на странице personal  */
.personal .btn{
  border-radius:999px;                
  padding:18px 25px;
  font-weight:800;
  line-height:1;
  box-shadow:none;                    /* без неонового свечения */
  transition:.18s transform, .18s box-shadow, .18s background, .18s border-color;
  text-align:center;
}
.personal .btn:active{ transform: translateY(1px); }

/* если две кнопки подряд — отступ между ними */
.personal .btn + .btn{ margin-left:3px; }

/* Красная основная */
.personal .btn.btn-primary,
.personal .hero .btn-primary{
  background: var(--accent-red);
  color:#fff;
  border:0px;
  box-shadow:0 8px 22px rgba(255,43,87,.28);
}
.personal .btn.btn-primary:hover,
.personal .hero .btn-primary:hover{
  background: var(--accent-teal);
  color:#000;
}

/* Тёмная с красной обводкой */
.personal .btn.btn-secondary,
.personal .hero .btn-secondary{
  background:#101515;
  color:#fff;
  box-shadow: 0 0px 2px var(--accent-red);
}
.personal .btn.btn-secondary:hover,
.personal .hero .btn-secondary:hover{
  background: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-red) 88%, #fff);
}


/* адаптив */
@media (max-width: 1100px){
  .personal .hero-grid{ grid-template-columns:1fr; }
  .personal .features{ grid-template-columns:repeat(3,1fr); }
  .personal .packs{ grid-template-columns:1fr 1fr; }
  .personal .steps{ grid-template-columns:repeat(2,1fr); }
  .personal .coach{ grid-template-columns:1fr; }
  .personal .t-list{ grid-template-columns:1fr 1fr; }
  .personal .faq{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .personal .features{ grid-template-columns:repeat(2,1fr); }
  .personal .packs{ grid-template-columns:1fr; }
  .personal .steps{ grid-template-columns:1fr; }
  .personal .t-list{ grid-template-columns:1fr; }
}



/* === Personal: dark skin for Contact section === */

/* фон секции и заголовок */
.personal #contact{ background:transparent; }
.personal #contact .section-title,
.personal #contact .section-title span{ color:#e9eeee; }

/* карточки слева и справа + карта + “статус” */
.personal #contact .contact-card,
.personal #contact .brand,
.personal #contact .map-card,
.personal #contact .frost-card{
  background:#141515;
  border:1px solid rgba(255,255,255,.08);
  color:#e9eeee;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* текст-пояснение над формой */
.personal #contact .contact-lead{ color:#cfe5e4; }

/* подписи к полям */
.personal #contact .field > span{ color:#cfe5e4; }

/* инпуты/текстовая область */
.personal #contact input[type="text"],
.personal #contact input[type="tel"],
.personal #contact input[type="email"],
.personal #contact textarea{
  background:#0f1010;
  color:#e9eeee;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
}
.personal #contact input::placeholder,
.personal #contact textarea::placeholder{ color:#9aa5a4; }

/* фокус */
.personal #contact input:focus,
.personal #contact textarea:focus{
  outline:none;
  border-color:var(--accent-teal);
  box-shadow:0 0 0 3px rgba(0,241,249,.24);
}

/* кнопки */
.personal #contact .btn-cta-red{
  background:var(--accent-red);
  color:#fff;
  box-shadow:0 10px 22px rgba(255,43,87,.35);
}
.personal #contact .btn-cta-red:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(255,43,87,.45);
}

/* кнопка “Open in Google Maps” в тёмном стиле */
.personal #contact .btn-map{
  background:#101515;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.personal #contact .btn-map:hover{
  background:#14191a;
  border-color: color-mix(in srgb, var(--accent-red) 65%, #fff);
}

/* соцкнопки в карточке бренда — чтобы не терялись на тёмном */
.personal #contact .social{
  background:#101515;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
}

/* “Status” карточка на карте — более контрастная на тёмном */
.personal #contact .frost-card{
  backdrop-filter: blur(10px);
  background: rgba(10,12,12,.62);
  border:1px solid rgba(255,255,255,.10);
}
.personal #contact .frost-card .muted{ color:#9aa5a4; }
.personal #contact .frost-card .badge{
  background: var(--accent-teal);
  color:#001314;
}


.personal #contact { scroll-margin-top: calc(var(--sticky-offset) + 8px); }