/* ===== ROOT COLORS ===== */
    :root {
        --bg-gradient: linear-gradient(145deg, #ffffff 0%, #f2f4f7 50%, #e6ebf1 100%);
        --card-bg: rgba(255, 255, 255, 0.6);
        --text-color: #111;
        --accent: #ff8c00;
        --accent-light: #ffb347;
        --shadow: rgba(0, 0, 0, 0.08);
        --price-color: #d97706;
    }

    /* Тёмная тема — тот же класс, что на главной: dark-mode */
    body.dark-mode {
        --bg-gradient: radial-gradient(circle at top, #0a0a0a, #000);
        --card-bg: #141414;
        --text-color: #fff;
        --accent: #ff9900;
        --accent-light: #ffd166;
        --shadow: rgba(255, 140, 0, 0.15);
        --price-color: #ffb347;
    }

    /* ===== BASE ===== */
    body {
        background: var(--bg-gradient);
        color: var(--text-color);
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 0;
        transition: 0.4s ease;
    }

    /* ===== HEADER ===== */
    header {
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.4);
        border-bottom: 1px solid rgba(255, 140, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 25px;
        box-shadow: 0 0 10px var(--shadow);
        transition: 0.4s;
    }

    body.dark-mode header {
        background: rgba(0, 0, 0, 0.6);
    }

    header nav {
        display: flex;
        gap: 25px;
        margin: 0 auto;
    }

    /* ===== КНОПКИ НАВИГАЦИИ (как на главной вкладке Blog/Services) ===== */
    header nav a {
        display: inline-block;
        padding: 10px 22px;
        font-size: 17px;
        font-weight: 600;
        border: 3px solid #00d1ff;
        border-radius: 40px;
        background: #ffffff;
        color: #000 !important;
        text-decoration: none;
        white-space: nowrap;
        transition: 0.25s ease;
    }

    header nav a:hover {
        background: #e9fbff;
        box-shadow: 0 0 14px #00d1ff;
        color: #000 !important;
    }

    /* Активная кнопка (services) */
    header nav a[href="/services"] {
        background: #e9fbff;
        box-shadow: 0 0 18px #00d1ff;
    }

    /* ==========================
       НЕОНОВЫЙ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
       ========================== */

    .theme-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* сам checkbox — рисуем из него переключатель */
    .themeToggle {
        width: 58px;
        height: 30px;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        border: none;
        cursor: pointer;
        background: rgba(0, 210, 255, 0.3);
        border-radius: 40px;
        position: relative;
        transition: 0.25s ease;
        box-shadow: 0 0 12px rgba(0, 210, 255, 0.6),
                    inset 0 0 6px rgba(0, 210, 255, 0.4);
    }

    .themeToggle::before {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        top: 3px;
        left: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.25s;
        box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
    }

    .themeToggle:checked {
        background: #00d2ff;
        box-shadow: 0 0 18px #00d2ff,
                    0 0 30px rgba(0, 210, 255, 0.6),
                    inset 0 0 10px rgba(255,255,255,0.4);
    }

    .themeToggle:checked::before {
        transform: translateX(28px);
        box-shadow: 0 0 20px white;
    }

    /* ВЫРАВНИВАНИЕ НА ДЕСКТОПЕ: кнопки по центру, переключатель справа */
    @media (min-width: 992px) {
        header {
            justify-content: center;
        }

        header nav {
            margin: 0 auto;
        }

        .theme-toggle {
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    /* ===== TITLE ===== */
    .title {
        text-align: center;
        margin: 70px 0 40px;
    }

    .title h1 {
        font-size: 2.4em;
        color: var(--accent);
        font-weight: 700;
    }

    .title p {
        font-size: 1.1em;
        opacity: 0.8;
        color: var(--text-color);
    }

    /* ===== GRID ===== */
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 30px;
        width: 85%;
        margin: 0 auto;
        justify-items: center;
    }

    .card {
        background: var(--card-bg);
        border-radius: 20px;
        text-align: center;
        padding: 25px 15px;
        transition: 0.4s;
        box-shadow: 0 5px 25px var(--shadow);
        width: 230px;
        backdrop-filter: blur(15px);
        position: relative;
        overflow: hidden;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 30px rgba(255, 140, 0, 0.25);
    }

    .card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 15px;
        transition: 0.5s;
        box-shadow: 0 0 0 rgba(255, 140, 0, 0);
    }

    .card img:hover {
        box-shadow: 0 0 25px var(--accent);
        transform: scale(1.05);
    }

    .card h3 {
        color: var(--accent);
        font-size: 1.1em;
        margin: 10px 0 5px;
    }

    .card p {
        font-size: 0.9em;
        opacity: 0.85;
        min-height: 40px;
        margin-bottom: 10px;
    }

    .price {
        color: var(--price-color);
        font-weight: 600;
        margin-bottom: 12px;
    }

    .visit {
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
        border: none;
        color: #000;
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
    }

    .visit:hover {
        box-shadow: 0 0 15px var(--accent);
        transform: scale(1.05);
    }

    /* ===== BOTTOM BUTTONS ===== */
    .bottom-buttons {
        text-align: center;
        margin: 60px 0 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .bottom-buttons a {
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
        color: #000;
        padding: 12px 28px;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.3s;
        display: inline-block;
        min-width: 200px;
        text-align: center;
    }

    .bottom-buttons a:hover {
        box-shadow: 0 0 25px var(--accent);
        transform: scale(1.05);
    }

    @media (max-width: 600px) {
        .grid {
            width: 95%;
        }
        header {
            flex-direction: column;
            gap: 10px;
        }
        .bottom-buttons {
            flex-direction: column;
            gap: 15px;
        }
        .bottom-buttons a {
            width: 85%;
        }
    }
  .services-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  box-sizing: border-box;
}

.services-container .title {
  text-align: center;
  margin-bottom: 40px;
}

.services-container h1 {
  font-size: 32px;
  line-height: 1.25;
}

.seo-services-text {
  max-width: 980px;
  margin: 0 auto;
}

.seo-services-text p,
.seo-services-text li {
  font-size: 16px;
  line-height: 1.65;
}

/* Mobile */
@media (max-width: 768px) {
  .services-container {
    padding: 24px 16px 40px;
  }

  .services-container h1 {
    font-size: 22px;
  }

  .seo-services-text p,
  .seo-services-text li {
    font-size: 14.5px;
  }
}

.services-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 40px 32px 60px;
  box-sizing: border-box;

  /* ВОТ ЭТО ДЕЛАЕТ КОНТЕЙНЕР ВИДИМЫМ */
  background: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .services-container {
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* ================================
   COMPACT TUNING — FINAL VERSION
   ================================ */

/* Сам контейнер */
.services-container {
  margin: 28px auto;
  padding: 28px 28px 40px;
  border-radius: 20px;
}

/* Верхний заголовок (оранжевый) */
.services-container .title h1 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.services-container .title p {
  font-size: 14px;
  margin-bottom: 18px;
}

/* Основной H2 */
.seo-services-text h2 {
  font-size: 21px;
  margin-bottom: 10px;
}

/* Подзаголовок */
.seo-services-text h3 {
  font-size: 17px;
  margin: 18px 0 8px;
}

/* Основной текст */
.seo-services-text p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Список */
.seo-services-text ul {
  margin: 12px 0 18px 16px;
}

.seo-services-text li {
  font-size: 15px;
  margin-bottom: 7px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .services-container {
    padding: 20px 16px 28px;
    margin: 18px 10px;
    border-radius: 16px;
  }

  .services-container .title h1 {
    font-size: 20px;
  }

  .services-container .title p {
    font-size: 13px;
  }

  .seo-services-text h2 {
    font-size: 18px;
  }

  .seo-services-text h3 {
    font-size: 15px;
  }

  .seo-services-text p,
  .seo-services-text li {
    font-size: 14px;
  }
}
/* SEO Text Block — Services Page */
.services-seo-text {
  max-width: 1200px;
  margin: 70px auto 90px;
  padding: 40px 48px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Заголовок */
.services-seo-text h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 22px;
  color: #111;
  letter-spacing: -0.4px;
}

/* Текст */
.services-seo-text p {
  font-size: 16px;
  line-height: 1.75;
  color: #444;
  margin-bottom: 16px;
}

/* Последний абзац без лишнего отступа */
.services-seo-text p:last-child {
  margin-bottom: 0;
}

/* ✅ ТЁМНАЯ ТЕМА */
body.dark .services-seo-text {
  background: rgba(18, 22, 28, 0.85);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

body.dark .services-seo-text h2 {
  color: #ffffff;
}

body.dark .services-seo-text p {
  color: #cfd3d8;
}

/* ✅ МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 992px) {
  .services-seo-text {
    margin: 50px 16px 70px;
    padding: 28px 24px;
  }

  .services-seo-text h2 {
    font-size: 22px;
  }

  .services-seo-text p {
    font-size: 15px;
    line-height: 1.65;
  }
}
/* Центровка и оранжевый заголовок SEO-блока */
.services-seo-text h2 {
  text-align: center;
  color: #ff9500;
  font-weight: 800;
  margin-bottom: 26px;
}

/* Небольшой неоновый акцент как у кнопок (по желанию) */
.services-seo-text h2 {
  text-shadow: 0 0 12px rgba(255, 149, 0, 0.35);
}

/* Центровка текста под заголовком */
.services-seo-text p {
  text-align: center;
}

/* Dark mode — тот же оранжевый, без выцветания */
body.dark .services-seo-text h2 {
  color: #ffb340;
  text-shadow: 0 0 14px rgba(255, 179, 64, 0.45);
}
/* ===============================
   THEME
================================ */
:root{
  --accent:#ff9f1a;
  --accent2:#ffb347;
  --glass:rgba(255,255,255,.78);
  --glass2:rgba(255,255,255,.55);
  --text:#111;
  --muted:#666;
  --border:rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --glass:rgba(18,18,18,.82);
    --glass2:rgba(18,18,18,.6);
    --text:#fff;
    --muted:#aaa;
    --border:rgba(255,255,255,.08);
  }
}

/* ===============================
   CART BUTTON
================================ */
#tcgCartBtn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:20000;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#000;
  border:none;
  border-radius:999px;
  padding:11px 15px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(255,140,0,.3);
}
#tcgCartBtn:hover{filter:brightness(1.07)}
#tcgCartBtn .count{font-weight:900}

/* ===============================
   OVERLAY
================================ */
#tcgCartOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:20001;
  background:rgba(0,0,0,.55);
}

/* ===============================
   MODAL (COMPACT)
================================ */
#tcgCartModal{
  width:min(400px,92vw);
  max-height:78vh;
  margin:auto;
  background:var(--glass);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
  position:relative;

  display:flex;
  flex-direction:column;
}

#tcgCartModal h2{
  margin:0 0 8px;
  font-size:17px;
  font-weight:900;
}

/* close */
#tcgCartClose{
  position:absolute;
  right:10px;
  top:10px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--glass2);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
}
#tcgCartClose:hover{filter:brightness(1.05)}

/* ===============================
   ITEMS (SCROLL AREA)
================================ */
#tcgCartItems{
  max-height:200px;        /* КЛЮЧ */
  overflow-y:auto;
  margin:8px 0;
  padding-right:4px;
}

#tcgCartItems::-webkit-scrollbar{width:6px}
#tcgCartItems::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:10px;
}

/* row */
.tcgRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:8px;
  align-items:center;
  padding:7px 9px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass2);
  margin-bottom:6px;
}
.tcgRow .name{font-size:12px;font-weight:800}
.tcgRow .price{font-size:12px;font-weight:900}
.tcgRow .rm{
  width:28px;height:28px;
  border-radius:9px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}
.tcgRow .rm:hover{
  background:rgba(255,0,0,.12);
  border-color:rgba(255,0,0,.25)
}

/* ===============================
   TOTAL
================================ */
#tcgTotal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:900;
  margin:6px 0 4px;
  font-size:14px;
}

/* ===============================
   INPUTS (COMPACT)
================================ */
.tcgInput{
  width:100%;
  padding:8px 10px;
  border-radius:11px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  margin:4px 0;
  font-size:13px;
}
.tcgInput::placeholder{color:var(--muted)}

.tcgSmall{
  font-size:11px;
  color:var(--muted);
  margin:6px 0;
}

/* ===============================
   NETWORKS
================================ */
.tcgNets{
  display:flex;
  gap:8px;
  margin:6px 0;
}
.tcgNets label{
  flex:1;
  text-align:center;
  padding:7px 8px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--glass2);
  cursor:pointer;
  font-weight:900;
  font-size:11px;
}
.tcgNets input{display:none}
.tcgNets input:checked + span{
  display:block;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#000;
  border-radius:9px;
  padding:7px 8px;
}

/* ===============================
   WALLET
================================ */
.tcgWallet{
  border:1px solid var(--border);
  background:var(--glass2);
  border-radius:12px;
  padding:8px 10px;
  font-size:11px;
  word-break:break-all;
  cursor:pointer;
}
.tcgWallet:hover{filter:brightness(1.05)}

/* ===============================
   CONFIRM BUTTON (BRIGHT)
================================ */
#tcgConfirm{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#000;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(255,140,0,.3);
}
#tcgConfirm:hover{filter:brightness(1.05)}
#tcgConfirm:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
}

/* ===============================
   TOAST
================================ */

.add-to-cart{
  position: relative;
}

.add-to-cart.added{
  background: linear-gradient(135deg,#22c55e,#16a34a) !important;
  color: transparent !important;   /* скрываем оригинальный текст */
  pointer-events:none;
}

.add-to-cart.added::after{
  content:"✓ Added";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:14px;
}

@keyframes cartPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,159,26,.6); }
  70%{ box-shadow:0 0 0 14px rgba(255,159,26,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,159,26,0); }
}

#tcgCartBtn.pulse{
  animation: cartPulse .6s ease;
}
/* =========================================
   HARD FIX — CARDS REAL SPACING
========================================= */

/* универсально для любых обёрток */
.card{
  box-sizing: border-box !important;
  margin: 14px !important;            /* ← ВОТ РЕАЛЬНОЕ РАССТОЯНИЕ */
  padding: 20px 14px !important;
  border-radius: 22px !important;
  max-width: 260px !important;
}

/* чтобы карточки не слипались визуально */
.card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* тёмная тема */
body.dark-mode .card{
  background: #141414 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* =====================================
   MOBILE FIX — SERVICES CARDS
   ONLY MOBILE
===================================== */
@media (max-width: 768px){

  /* сетка: строго 2 карточки */
  body .grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 16px 12px 90px !important; /* запас снизу под кнопки */
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* карточка — УМЕНЬШАЕМ */
  body .grid > .card{
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    margin: 0 !important;
  }

  /* логотип */
  body .card img{
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 6px !important;
  }

  /* заголовок */
  body .card h3{
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  /* текст */
  body .card p{
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
  }

  /* цена */
  body .price{
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }

  /* кнопка */
  body .visit,
  body .add-to-cart{
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

  /* Telegram bubble — ниже и меньше */
  .tg-widget,
  .telegram-float,
  .telegram-button{
    right: 12px !important;
    bottom: 70px !important;
    transform: scale(.85) !important;
  }
}

/* VERY SMALL PHONES */
@media (max-width: 420px){
  body .grid{
    gap: 12px !important;
    padding: 14px 10px 100px !important;
  }
}