/* ======== ТЁМНАЯ ТЕМА «Home10 Dark» ======== */
:root{
  --bg:#0b1220; --card:#101827; --card-2:#0d1726; --stroke:#1f2a3a;
  --text:#e5ecf6; --muted:#98a6b8; --accent:#0ea5e9; --accent-2:#22d3ee; --success:#10b981; --surface-soft:#0a1422;
}
html,body{background:var(--bg);color:var(--text);}
a{color:var(--accent);}
.container{max-width:1160px;margin:0 auto;padding:0 16px;}
.muted{color:var(--muted);}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);}
.grid-3{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){.grid-3{grid-template-columns:1fr;} }

.card{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.25);}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:700;transition:transform .18s,box-shadow .18s,background .2s,color .2s,border-color .2s;}
.btn-primary{background:var(--accent);color:#06111c;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(14,165,233,.35);}
.btn-outline{background:transparent;border-color:var(--stroke);color:var(--text);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.btn-success{background:var(--success);color:#041016;}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(16,185,129,.35);}

/* ===== Надёжные фоновые прокладки между блоками ===== */
.has-bg{position:relative;isolation:isolate;} /* создаём новый контекст наложения, чтобы z-index работал предсказуемо */
.has-bg .bg-image{
  position:absolute;inset:0;z-index:0; /* слой 0 — КАРТИНКА */
  background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.35; /* увеличил видимость */
  filter:saturate(95%) contrast(105%);
}
.has-bg::before{
  content:"";position:absolute;inset:0;z-index:1; /* слой 1 — затемняющая вуаль */
  background:linear-gradient(180deg,rgba(4,10,18,.75) 0%,rgba(4,10,18,.55) 60%,rgba(4,10,18,.8) 100%);
}
.has-bg > .container,
.has-bg .hero-wrap{position:relative;z-index:2;} /* слой 2 — контент сверху */

/* ===== HERO ===== */
.hero-10{position:relative;padding:80px 0;overflow:hidden;}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:28px;}
@media (max-width:980px){.hero-wrap{grid-template-columns:1fr;}}
.hero-left h1{font-size:clamp(30px,5vw,46px);line-height:1.1;margin:10px 0 12px;letter-spacing:-.015em;}
.hero-left p{max-width:560px;}
.hero-cta{display:flex;gap:12px;margin:16px 0 12px;flex-wrap:wrap;}
.hero-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:14px 0 0;list-style:none;}
.hero-benefits li{background:var(--surface-soft);border:1px solid var(--stroke);padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--text);}
@media (max-width:640px){.hero-benefits{grid-template-columns:1fr;} }
.hero-right .hero-card{position:relative;border-radius:16px;overflow:hidden;background:#0f172a;border:1px solid var(--stroke);}
.hero-right img{width:100%;height:auto;display:block;opacity:.95;}
.hero-stats{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;}
.hero-stats .stat{background:rgba(6,17,28,.9);color:var(--text);border:1px solid var(--stroke);backdrop-filter:blur(4px);border-radius:12px;padding:8px 10px;min-width:88px;text-align:center;}
.hero-stats .num{font-weight:800;font-size:1.1rem;}
.hero-stats .label{font-size:.74rem;color:var(--muted);}
.hero-bg-shape{position:absolute;inset:auto -40% -35% -40%;height:55%;background:radial-gradient(60% 80% at 50% 0%,rgba(14,165,233,.12),rgba(14,165,233,0));pointer-events:none;filter:blur(40px);}

/* ===== ОБО МНЕ — компактное красивое фото ===== */
.about-10{padding:56px 0;}
.about-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center;}
@media (max-width:980px){.about-wrap{grid-template-columns:1fr;}}
.about-photo{
  width:100%;max-width:420px;margin:0 auto 12px; /* компактнее и по центру на мобилке */
  border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.03) inset;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  transform:translateZ(0);
}
.about-photo img{display:block;width:100%;height:auto;border-radius:18px;}
.about-badges{display:flex;gap:8px;flex-wrap:wrap;}
.badge{background:#0e1a2d;border:1px solid var(--stroke);padding:8px 10px;border-radius:999px;font-weight:700;color:var(--text);font-size:.85rem;}
.about-text h2{margin:6px 0 10px;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px;}
@media (max-width:720px){.about-grid{grid-template-columns:1fr;}}
.about-list{padding-left:18px;margin:8px 0 0;}
.about-cta{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;}

/* ===== Остальные секции (как было) ===== */
.logos-10{padding:18px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:#0b1626;}
.logos-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;}
.logo-item{opacity:.8;font-weight:800;color:var(--muted);letter-spacing:.12em;}

.features-10{padding:56px 0;}
.section-head{text-align:center;margin-bottom:22px;}
.section-head h2{font-size:clamp(24px,3.8vw,34px);margin:4px 0 6px;}
.feature .card-media{overflow:hidden;border-radius:12px;margin-bottom:10px;border:1px solid var(--stroke);}
.feature .card-media img{width:100%;height:200px;object-fit:cover;display:block;}

.process-10{padding:44px 0;}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;list-style:none;}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){.steps{grid-template-columns:1fr;} }
.step{position:relative;padding:16px;border-radius:14px;background:var(--card-2);border:1px solid var(--stroke);}
.step .num{position:absolute;top:10px;right:12px;font-weight:800;color:#5f7b9b;}
.step .step-media{overflow:hidden;border-radius:10px;margin-bottom:10px;border:1px solid var(--stroke);}
.step .step-media img{width:100%;height:140px;object-fit:cover;display:block;}

.faqs-10{padding:52px 0;}
.faq-accordion{max-width:880px;margin:0 auto;}
.faq{border:1px solid var(--stroke);border-radius:12px;background:var(--card);margin-bottom:10px;overflow:hidden;}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;color:var(--text);}
.faq .content{padding:0 16px 14px;color:var(--muted);border-top:1px dashed var(--stroke);}
.faq[open] summary{background:#0c1728;}

.results-10{padding:44px 0;}
.pricing-10{padding:44px 0;}
.schedule-10{padding:36px 0;}

.cta-band-10{background:linear-gradient(90deg,#0ea5e9 0%,#22d3ee 100%);color:#09131b;padding:28px 0;position:relative;}
.cta-band-10 .bg-image{opacity:.22;mix-blend:multiply;}
.cta-wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cta-band-10 h3{color:#052b35;margin:0;}
.cta-band-10 .muted{color:#063c49;}

.contact-10 .contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px;}
@media (max-width:820px){.contact-10 .contacts{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){.contact-10 .contacts{grid-template-columns:1fr;} }
.contact-10 .contact-item{display:block;padding:12px 14px;border:1px solid var(--stroke);border-radius:12px;text-decoration:none;background:var(--card);}
.contact-10 .label{font-weight:800;color:var(--text);}
.contact-10 .sub{display:block;font-size:.9rem;color:var(--muted);}

/* ===== Reveal (совместимо с scroll-anim.js) ===== */
.reveal{opacity:0;transform:translate3d(0,12px,0) scale(.995);transition:opacity .45s cubic-bezier(.2,.65,.3,1),transform .55s cubic-bezier(.2,.65,.3,1);will-change:transform,opacity;}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);}
.reveal[data-reveal="from-left"]{transform:translate3d(-18px,10px,0) scale(.995);}
.reveal[data-reveal="from-right"]{transform:translate3d(18px,10px,0) scale(.995);}
.reveal[data-reveal="from-bottom"]{transform:translate3d(0,18px,0) scale(.995);}
.reveal-group.entering .reveal{transform:translate3d(0,8px,0) scale(.994);}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-visible{transition:none!important;opacity:1!important;transform:none!important;}
}
/* ===== Анимация слов (для .wordfx) ===== */
.wordfx { display:inline-block; }
.wordfx .w {
  display:inline-block;
  transform: translateY(10px);
  opacity: 0;
  animation: word-in .55s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes word-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wordfx .w.in { /* класс .in навешивается скриптом; правил достаточно */
}

/* (Напоминание) Фото «Обо мне» уже компактное и с тенью:
.about-photo { max-width:420px; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.06); }
.about-photo img { border-radius:18px; } */

/* Доступность */
@media (prefers-reduced-motion: reduce){
  .wordfx .w { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* =========================
   3D HERO (Three.js layer)
   ========================= */

/* контейнер 3D внутри hero */
#hero .hero-3d{
  position:absolute;
  inset:0;
  z-index:0;              /* 3D под вуалью ::before и под контентом */
  pointer-events:none;
  opacity:.95;
  filter:saturate(1.08) contrast(1.06);
  /* мягкая маска, чтобы 3D не давил текст */
  -webkit-mask-image: radial-gradient(ellipse at 38% 30%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.95) 45%,
    rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(ellipse at 38% 30%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.95) 45%,
    rgba(0,0,0,0) 78%);
}

/* canvas от Three.js */
#hero .hero-3d canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Сделаем вуаль в HERO чуть мягче, чтобы 3D было видно лучше */
#hero.has-bg::before{
  background:linear-gradient(180deg,
    rgba(4,10,18,.62) 0%,
    rgba(4,10,18,.42) 60%,
    rgba(4,10,18,.70) 100%);
}

/* При reduce motion — скрываем 3D слой */
@media (prefers-reduced-motion: reduce){
  #hero .hero-3d{ display:none !important; }
}