body#theme5 .to-fuchsia-600 {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    color: #f2f2f2;
}

body#theme5 .relative.h-screen.w-full.overflow-hidden button {
    background: #222;
    color: #f2f2f2;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

body#theme5 .relative.h-screen.w-full.overflow-hidden button:hover {
    background: #333;
    border-color: #555;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
/* --- Тема 5: дизайнерский чёрный с матовым стеклом --- */
body#theme5 .relative.h-screen.w-full.overflow-hidden {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    color: #f2f2f2 !important;
}

/* Ссылки и кнопки с эффектом матового стекла */
body#theme5 .relative.h-screen.w-full.overflow-hidden a,
body#theme5 .relative.h-screen.w-full.overflow-hidden button {
    display: inline-block;
    background: rgba(34, 34, 34, 0.6);       /* полупрозрачный тёмный фон */
    color: #f2f2f2 !important;               /* контрастный текст */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 24px;
    text-decoration: none;                   /* убираем подчёркивание */
    backdrop-filter: blur(10px);             /* матовое стекло */
    -webkit-backdrop-filter: blur(10px);     /* для Safari */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* Ховер — чуть светлее и выразительнее */
body#theme5 .relative.h-screen.w-full.overflow-hidden a:hover,
body#theme5 .relative.h-screen.w-full.overflow-hidden button:hover {
    background: rgba(51, 51, 51, 0.7);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    text-decoration: none;
}
/* --- Тема 5: дизайнерский чёрный с матовым стеклом --- */
body#theme5 .relative.h-screen.w-full.overflow-hidden {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    color: #f2f2f2 !important;
}

/* Кнопки с Tailwind классами под theme5 */
body#theme5 .px-4.py-2.bg-indigo-600.text-white.rounded-md.shadow,
body#theme5 .inline-flex.items-center.px-10.py-5.bg-white.text-indigo-700.font-semibold.rounded-xl.shadow-lg,
body#theme5 .px-5.py-3.bg-white.text-indigo-700.rounded-md.font-medium,
body#theme5 .flex.items-center.gap-1.px-3.py-1.border.rounded-md.text-sm.shadow-sm.bg-slate-800.text-white {
    background: rgba(34, 34, 34, 0.6) !important;    /* полупрозрачный фон */
    color: #f2f2f2 !important;                       /* светлый текст */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease;
}

/* Ховер эффект */
body#theme5 .px-4.py-2.bg-indigo-600.text-white.rounded-md.shadow:hover,
body#theme5 .inline-flex.items-center.px-10.py-5.bg-white.text-indigo-700.font-semibold.rounded-xl.shadow-lg:hover,
body#theme5 .px-5.py-3.bg-white.text-indigo-700.rounded-md.font-medium:hover,
body#theme5 .flex.items-center.gap-1.px-3.py-1.border.rounded-md.text-sm.shadow-sm.bg-slate-800.text-white:hover {
    background: rgba(51, 51, 51, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4) !important;
}
body#theme5,body#theme5 .bg-white {
    background: #f5f5f5;
}
/* --- Тема 5: карточки и иконки --- */

/* Карточки */
body#theme5 .grid.sm\:grid-cols-2.gap-6 > * {
    background: linear-gradient(135deg, rgba(10,10,10,0.85), rgba(26,26,26,0.9)) !important;
    color: #ffffff !important;
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover карточки */
body#theme5 .grid.sm\:grid-cols-2.gap-6 > *:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* Заголовки */
body#theme5 .grid.sm\:grid-cols-2.gap-6 > * h2,
body#theme5 .grid.sm\:grid-cols-2.gap-6 > * h3 {
    color: #ffffff !important;
    font-weight: 600;
}

/* Обычный текст */
body#theme5 .grid.sm\:grid-cols-2.gap-6 > * p {
    color: #ffffff !important;
}

/* Иконки (SVG и font-icons) */
body#theme5 .grid.sm\:grid-cols-2.gap-6 svg,
body#theme5 .grid.sm\:grid-cols-2.gap-6 i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    width: 32px;
    height: 32px;
    transition: opacity 0.3s ease;
}

/* Hover для иконок — лёгкое приглушение */
body#theme5 .grid.sm\:grid-cols-2.gap-6 svg:hover,
body#theme5 .grid.sm\:grid-cols-2.gap-6 i:hover {
    opacity: 0.85;
}

body#theme5 h4.text-xl.font-semibold.mb-2.text-slate-900 {
    color: white;
}
body#theme5 .w-12.h-12 {
    background: #00000030;
    filter: grayscale(1);
}
/* Сбрасываем стандартные стили списка */
body#theme5 ul.space-y-3 {
    counter-reset: list-counter;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Каждый пункт */
body#theme5 ul.space-y-3 li {
    counter-increment: list-counter;
    position: relative;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

/* Убираем зелёные галочки */
body#theme5 ul.space-y-3 li > span:first-child {
    display: none !important;
}

/* Добавляем цифры вместо галочек */
body#theme5 ul.space-y-3 li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); /* матовое стекло */
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

/* Чтобы текст не налезал на цифры */
body#theme5 ul.space-y-3 li span:last-child {
    padding-left: 36px;
    display: block;
}
body#theme5 #platforms .w-12.h-12 {
    background: none;
}
body#theme5 .p-4.bg-white.rounded-lg.shadow.text-center.aos-init.aos-animate {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85), rgba(26, 26, 26, 0.9)) !important;
    color: white;
    font-weight: bolder;
}

body#theme5 section#whyme {
    background: none;
}
/* Обёртка под графики */
body#theme5 .charts-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* Карточки графиков — матовое стекло */
body#theme5 .chart-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 19%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body#theme5 .chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
}

/* Заголовки графиков */
body#theme5 .chart-label {
    color: black;
    font-weight: 600;
}
/* payments — фон секции */
body#theme5 #payments {
    background: linear-gradient(45deg, #4a4a4a, #00000096); /* прозрачный слой */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0; /* если секция прямоугольная */
    padding: 100px 0;
    color: #fff !important;
}

/* Белый текст */
body#theme5 #payments h2,
body#theme5 #payments h3,
body#theme5 #payments p,
body#theme5 #payments span,
body#theme5 #payments li {
    color: #fff !important;
}

/* Карточки внутри секции */
body#theme5 #payments .card,
body#theme5 #payments .grid > div {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении */
body#theme5 #payments .card:hover,
body#theme5 #payments .grid > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
}
body#theme5 #payments .w-14.h-14 {
    color: white;
    background: #3e3e3e;
    box-shadow: 0 0 4px #242424;
}
body#theme5 section#partners {
    padding-bottom: 50px;
}
body#theme5 section#contact {
    background: linear-gradient(45deg, #4a4a4a, #00000096);
}
body#theme5 section.relative.w-full.py-20.bg-gradient-to-r.from-indigo-700.via-purple-700.to-fuchsia-700.text-white.overflow-hidden li:before {
    content: none !important;
}
body#theme5 section.relative.w-full.py-20.bg-gradient-to-r.from-indigo-700.via-purple-700.to-fuchsia-700.text-white.overflow-hidden li, body#theme5 section.bg-gradient-to-r.from-white.to-slate-50.p-6.rounded-lg p
{
    color: white;
}
body#theme5 section.relative.w-full.py-20.bg-gradient-to-r.from-indigo-700.via-purple-700.to-fuchsia-700.text-white.overflow-hidden ul {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
body#theme5 a.px-5.py-3.bg-white.text-indigo-700.rounded-md.font-medium {
    color: black;
}
body#theme5 section.bg-gradient-to-r.from-white.to-slate-50.p-6.rounded-lg {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85), rgba(26, 26, 26, 0.9)) !important;
    color: white;
}


/** Theme 1 **/

/* Общие стили для theme1 */
body#theme1 {
    font-family: 'Inter', sans-serif;
}

/* Заголовки */
body#theme1 h1,
body#theme1 h2,
body#theme1 h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Подзаголовки или выделенные элементы */
body#theme1 .subtitle,
body#theme1 h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Абзацы */
body#theme1 p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.7;
}
body#theme1 a.px-4.py-2.bg-indigo-600.text-white.rounded-md.shadow.hover\:shadow-lg.transition, body#theme1 a.inline-flex.items-center.px-8.py-4.bg-white.text-indigo-700.font-semibold.rounded-xl.shadow-lg.hover\:shadow-xl.hover\:-translate-y-0\.5.transition.transform,
body#theme1 a.px-5.py-3.bg-white.text-indigo-700.rounded-md.font-medium{
    background: linear-gradient(45deg, #ffbc00, #b58500e0);
    color: #8b5a00;
}
body#theme1 a.flex.items-center.gap-1.px-3.py-1.border.rounded-md.text-sm.shadow-sm.bg-slate-800.text-white {
    color: #8b5a00;
    border-color: #ffbc00;
    background: #ffbc00;
}
body#theme1 .to-fuchsia-600 {
    --tw-gradient-to: #b58500e0 var(--tw-gradient-to-position) !important;
}
body#theme1 .via-purple-600 {
    --tw-gradient-stops: var(--tw-gradient-from), #ffbc00bf var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
body#theme1 .from-indigo-600 {
    --tw-gradient-from: #e9ac01 var(--tw-gradient-from-position) !important;
}
body#theme1 h1, body#theme1 p.text-xl.opacity-90.max-w-lg.drop-shadow,
body#theme1 .text-slate-900,body#theme1 .text-slate-600,
body#theme1 li.flex.items-start.space-x-3.text-slate-700.text-base.aos-init.aos-animate span,
body#theme1 h3.text-2xl.font-bold,
body#theme1 .text-gray-500
{
    color: #8b5a00;
}
body#theme1 .to-fuchsia-700 {
    --tw-gradient-to: #bb972a var(--tw-gradient-to-position);
}
body#theme1 .from-indigo-700 {
    --tw-gradient-from: #bf8d01 var(--tw-gradient-from-position);
}
body#theme1 .via-purple-700 {
    --tw-gradient-stops: var(--tw-gradient-from), #d29b00 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
body#theme1 a.flex.items-center.gap-1.px-3.py-1.border.rounded-md.text-sm.shadow-sm.text-white.border-white {
    border-color: #8b5a00;
    background: #8b5a0026;
    color: #8b5a00;
}
body#theme1 .rounded-full.bg-slate-800.text-white.w-12.h-12.flex.items-center.justify-center.shadow-lg, body#theme1 .text-lg.font-semibold.text-white.drop-shadow {
    opacity: 0;
}
@media (min-width: 1025px) {

    body#theme1 header.absolute.top-0.left-0.w-full.z-50.max-w-6xl.mx-auto.p-6.flex.items-center.justify-between {
        position: fixed;
    }
    body#theme1 .whyme-container {
        width: 60%;
        align-items: baseline;
        flex-direction: column;
        margin-left: 0;
    }

    body#theme1 .p-4.bg-white.rounded-lg.shadow.text-center.aos-init.aos-animate img {
        display: none;
    }

    body#theme1 .p-4.bg-white.rounded-lg.shadow.text-center.aos-init.aos-animate {
        background: linear-gradient(45deg, #ffbc0094, #b58500c7);
    }

    body#theme1 section#services,
    body#theme1 section#contact,
    body#theme1 section.relative.w-full.py-20.bg-gradient-to-r.from-indigo-700.via-purple-700.to-fuchsia-700.text-white.overflow-hidden,
    body#theme1 section#platforms,
    body#theme1 section#partners,
    body#theme1 section#payments,
    body#theme1 section#pricing,
    body#theme1 .flex.space-x-6.mt-8.justify-center,
    body#theme1 .theme-buttons,
    body#theme1 footer
    {
        width: 60%;
    }
    body#theme1 .max-w-6xl.mx-auto.px-6.grid.md\:grid-cols-2.gap-12.items-center,
    body#theme1 .grid.md\:grid-cols-3.gap-8
    {
        grid-template-columns: repeat(1, 1fr);
    }

    body#theme1 img {
        position: fixed;
        top: 0px;
        right: 0px;
        width: 40%;
        height: 100%;
        opacity: 2;
        z-index: 20;
        border-left: 2px solid #ffbc00;
    }

    body#theme1 section#contact {
        position: fixed;
        bottom: 0px;
        z-index: 60;
        right: 0px;
        width: 40% !important;
        display: inherit;
        border-radius: 0;
    }
}
body#theme1 span.text-green-500.text-lg {
    display: none;
}

body#theme1 li.flex.items-start.space-x-3.text-slate-700.text-base.aos-init.aos-animate span {margin: 0;}

body#theme1 article.p-8.bg-slate-50.rounded-2xl.shadow-sm.hover\:shadow-md.transition.text-left.aos-init.aos-animate,
body#theme1 section#contact{
    background: linear-gradient(45deg, #ffbc0094, #b58500c7);
}
body#theme1 .w-12.h-12 {
    background: #00000029;
    filter: sepia(1);
}
