/* ===== BLACK & WHITE THEME PATCH (APPEND-ONLY) ===== */

/* Палитра на ч/б */
:root{
  --bg-grad-start:#0a0a0a;
  --bg-grad-end:#0a0a0a;
  --white:#0f0f0f; /* фон карточек станет почти черным — ниже переопределим конкретно */
  --text:#f5f5f5;
  --muted:#a6a6a6;
  --border:#1e1e1e;
}

/* Глобальный фон + зернистость для «объёма» */
html,body{
  background:linear-gradient(180deg,#0a0a0a,#0a0a0a);
  color:#f5f5f5;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 800px at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 900px at 90% 100%, rgba(255,255,255,.04), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, rgba(0,0,0,0) 2px 4px);
  mix-blend-mode: screen;
}

/* Белые карточки → «чёрные карточки» с объёмом */
.card,.panel-white{
  background:#0f0f0f;
  border:1px solid #1e1e1e;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 28px rgba(0,0,0,.6);
  color:#f0f0f0;
}

/* Хедер: логотип и бейдж — контрастные и центрируемые */
.header{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border-bottom:1px solid #141414;
}
.header strong{
  font-size:28px;
  letter-spacing:1.2px;
  background:linear-gradient(180deg,#fff,#cfcfcf);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(255,255,255,.04);
}
.header .badge{
  background:#121212;
  color:#e8e8e8;
  border:1px solid #222;
  box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  text-align:center; width:100%;
}

/* Fullscreen Hero + выразительная типографика */
.hero{ min-height:85vh; display:flex; align-items:center; }
.hero h1{
  font-size:clamp(32px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:.2px;
  background:linear-gradient(180deg,#fff 0%, #dcdcdc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.06), 0 20px 50px rgba(255,255,255,.06);
}
.hero p{ color:#bdbdbd; }

/* Кнопки: ч/б, объём, белый текст (перекрываем на всякий случай) */
.btn, .btn-secondary, .btn *{
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.6) !important;
}
.btn, .btn-secondary{
  background:linear-gradient(180deg,#1c1c1c,#111);
  border:1px solid #2a2a2a !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 14px 30px rgba(0,0,0,.7) !important;
}
.btn:hover, .btn-secondary:hover{
  background:linear-gradient(180deg,#232323,#141414) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.8) !important;
}

/* Буллеты — контрастные чёрные карточки */
.bullet{
  background:#0f0f0f; border-color:#1f1f1f;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5);
}
.bullet .dot{ background:#1a1a1a; border-color:#2a2a2a }

/* Галерея/Отзывы: тренд «сложные фильтры» — ч/б + проявление цвета при ховере */
.gallery img,
.testi-item img{
  filter:grayscale(100%) contrast(108%) brightness(96%);
  transition: filter .35s ease, transform .25s ease;
}
.gallery img:hover,
.testi-item img:hover{
  filter:none; transform: translateY(-2px);
}

/* Газетный стиль прайса: контрастные разделители, цена моноширинная */
.price-table{
  border-spacing:0 12px;
}
.price-table th, .price-table td{
  background:#0f0f0f;
  border:1px solid #222;
}
.price-table th{
  background:#111;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#d9d9d9;
}
.price-table td:last-child{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-weight:800;
  white-space:nowrap;
  color:#ffffff;
}

/* Карусель-точки — ч/б */
.dot{ background:#3a3a3a; border-color:#2a2a2a }
.dot.active{ background:#fafafa }

/* Кастомный курсор (desktop): тонкая светлая точка */
@media (hover:hover){
  body{ cursor:none; }
  body::after{
    content:""; position:fixed; width:10px; height:10px; border-radius:999px;
    background:#ffffff; box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 0 28px rgba(255,255,255,.35);
    pointer-events:none; transform:translate(-50%,-50%);
    transition:transform .03s linear;
    mix-blend-mode:screen; z-index:9999;
  }
}
@media (hover:hover){
  /* двигаем курсор-точку за мышью */
  html{ --mx:50vw; --my:50vh; }
}

/* === ГЛОБАЛЬНЫЙ ТЕМНЫЙ ФОН ДЛЯ TILDA === */
.t-body, .t-records, html, body {
  background-color: #0a0a0a !important;
  background-image: none !important;
  color: #f5f5f5 !important;
}

/* убираем стандартные фоны блоков Tilda */
.t-rec {
  background-color: transparent !important;
}


/* наконец позиционирование точки по CSS-переменным */
body::after{ left:var(--mx); top:var(--my); }


html, body, #hh-root {
  background: #0a0a0a !important;
}

html, body, #hh-root { background:#0a0a0a !important; }

/* Бейдж: запрет наследования градиентного clip и прозрачной заливки текста */
.header .badge{
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  color: #e8e8e8 !important;            /* бело-серый читаемый */
  background: #121212 !important;
  border: 1px solid #222 !important;
  text-align: center !important;
  width: 100%;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

.header .badge, .badge * {
  -webkit-text-fill-color: initial !important;
  color:#e8e8e8 !important;
}

/* FIX: прозрачный текст в плашках (Safari/Tilda) */
.header .badge,
.header .badge * {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #e8e8e8 !important;
  color: #e8e8e8 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* === FIX: прозрачный текст в блоках и таблицах === */

/* сбрасываем clip и прозрачность у всех, кроме h1/h2 */
.section p, 
.section div, 
.section td, 
.section th, 
.section li, 
.section span, 
.bullet div,
.price-table td,
.price-table th {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  color: #f5f5f5 !important;
  text-shadow: none !important;
  background: none !important;
  mix-blend-mode: normal !important;
}

/* таблица — контрастнее */
.price-table td, .price-table th {
  color: #f0f0f0 !important;
  border-color: #222 !important;
}

/* доп. подсветка для заголовков таблицы */
.price-table th {
  font-weight:700 !important;
  color:#fafafa !important;
}

/* Фото ч/б, становятся цветными при появлении в зоне видимости */
.gallery img,
.testi-item img {
  filter: grayscale(100%) contrast(108%) brightness(96%);
  transition: filter .6s ease, transform .35s ease;
}

/* При появлении (вместе с .reveal.in-view из твоего скрипта) — фото становятся цветными */
.gallery img.in-view,
.testi-item img.in-view {
  filter: none;
  transform: translateY(0);
}

/* FIX: цена не выезжает на мобилках */
@media (max-width: 600px){
  /* Разрешаем перенос цены и описания */
  .price-table td:last-child{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .price-table td:nth-child(2){
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}