/* ================= RESET & BASE ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body.AaaaaAaaaaAa {
    background-color: #050607;
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================================================
   ВАЖНО:
   У тебя одни и те же классы используются для РАЗНЫХ ролей
   (например .PppppPppppPq = и кнопка, и секция, и карточка).
   Этот файл заскоуплен по тегам/контексту, чтобы НЕ косило.
   ========================================================= */

/* ================= HEADER ================= */
header.BbbbbBbbbbBb {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(5, 6, 7, 0.9);
    border-bottom: 2px solid #5AF3FF;
    box-shadow: 0 4px 20px rgba(90, 243, 255, 0.2);
    backdrop-filter: blur(10px);
}

/* header inner */
header.BbbbbBbbbbBb > .CccccCccccCc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* brand */
header.BbbbbBbbbbBb .DddddDddddDd {
    font-size: 24px;
    font-weight: 800;
    color: #5AF3FF;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(90, 243, 255, 0.6);
}

/* nav list */
header.BbbbbBbbbbBb .HhhhhHhhhhHh .IiiiiIiiiiIi {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
}

header.BbbbbBbbbbBb .HhhhhHhhhhHh .IiiiiIiiiiIi a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 14px;
    text-transform: uppercase;
}

header.BbbbbBbbbbBb .HhhhhHhhhhHh .IiiiiIiiiiIi a:hover { color: #5AF3FF; }

/* ================= MOBILE MENU BURGER ================= */
.EeeeeEeeeeEe { display: none; }

.FffffFffffFf {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
}

.GggggGggggGg,
.GggggGggggGg::before,
.GggggGggggGg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #5AF3FF;
    transition: 0.3s;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.GggggGggggGg::before { top: -8px; transform: none; }
.GggggGggggGg::after { top: auto; bottom: -8px; transform: none; }

/* ================= MAIN PADDING ================= */
main.XxxxxXxxxxXx { padding-top: 80px; }

/* ================= HERO SECTION ================= */
section.YyyyyYyyyyYy {
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

section.YyyyyYyyyyYy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(90, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

/* hero layout */
section.YyyyyYyyyyYy .ZzzzzZzzzzZz {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

/* hero gallery */
section.YyyyyYyyyyYy .AaaaaAaaaaAb {
    flex: 1;
    min-width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

section.YyyyyYyyyyYy .BbbbbBbbbbBc { grid-row: span 2; }

/* hero images — ВАЖНО: .CccccCccccCd и .IiiiiIiiiiIj используются ещё и как блоки/секции,
   поэтому тут — только для img в hero */
section.YyyyyYyyyyYy img.CccccCccccCd,
section.YyyyyYyyyyYy img.EeeeeEeeeeEf,
section.YyyyyYyyyyYy img.GggggGggggGh,
section.YyyyyYyyyyYy img.IiiiiIiiiiIj {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(90, 243, 255, 0.3);
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* hero text column */
section.YyyyyYyyyyYy .HhhhhHhhhhHi {
    flex: 1;
    min-width: 300px;
}

/* hero title — только h1 */
section.YyyyyYyyyyYy h1.IiiiiIiiiiIj {
    font-size: 48px;
    color: #5AF3FF;
    margin-bottom: 25px;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(90, 243, 255, 0.4);
}

/* hero paragraphs */
section.YyyyyYyyyyYy .JjjjjJjjjjJk,
section.YyyyyYyyyyYy .LllllLllllLm,
section.YyyyyYyyyyYy .NnnnnNnnnnNo {
    margin-bottom: 20px;
    color: #cccccc;
    font-size: 18px;
}

/* hero CTA — только ссылка-кнопка */
a.PppppPppppPq {
    display: inline-block;
    padding: 15px 40px;
    background: #5AF3FF;
    color: #050607;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #5AF3FF;
}

a.PppppPppppPq:hover {
    background: #ffffff;
    box-shadow: 0 0 30px #5AF3FF;
    transform: translateY(-2px);
}

/* ================= REVIEWS SECTION ================= */
section.RrrrrRrrrrRs {
    padding: 100px 20px;
    background: #0a0c0e;
    border-top: 1px solid rgba(90, 243, 255, 0.1);
    border-bottom: 1px solid rgba(90, 243, 255, 0.1);
}

section.RrrrrRrrrrRs .SssssSssssSt {
    max-width: 1200px;
    margin: 0 auto;
}

section.RrrrrRrrrrRs h2.TttttTttttTu {
    text-align: center;
    font-size: 36px;
    color: #5AF3FF;
    margin-bottom: 60px;
    position: relative;
}

section.RrrrrRrrrrRs h2.TttttTttttTu::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #5AF3FF;
    margin: 15px auto;
    box-shadow: 0 0 10px #5AF3FF;
}

section.RrrrrRrrrrRs .UuuuuUuuuuUv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* review cards — только div-карточки, НЕ img */
section.RrrrrRrrrrRs div.VvvvvVvvvvVw,
section.RrrrrRrrrrRs div.YyyyyYyyyyYz,
section.RrrrrRrrrrRs div.FffffFffffFg {
    background: rgba(90, 243, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(90, 243, 255, 0.2);
    transition: 0.3s;
}

section.RrrrrRrrrrRs div.VvvvvVvvvvVw:hover {
    border-color: #5AF3FF;
    box-shadow: inset 0 0 15px rgba(90, 243, 255, 0.1);
}

section.RrrrrRrrrrRs .WwwwwWwwwwWx {
    font-style: italic;
    margin-bottom: 20px;
}

section.RrrrrRrrrrRs .XxxxxXxxxxXy {
    color: #5AF3FF;
    font-weight: bold;
    display: block;
    text-align: right;
}

/* ================= PRICE SECTION ================= */
section.IiiiiIiiiiIj {
    padding: 100px 20px;
}

/* price container — класс .Jjj... конфликтует с form, поэтому строго по секции */
section.IiiiiIiiiiIj > .JjjjjJjjjjJk {
    max-width: 1200px;
    margin: 0 auto;
}

/* grid of cards */
section.IiiiiIiiiiIj .NnnnnNnnnnNo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

/* price card — ВАЖНО: .PppppPppppPq это ещё и ссылка-кнопка.
   Тут карточка только если это DIV, чтобы не ломать кнопку */
section.IiiiiIiiiiIj div.PppppPppppPq,
section.IiiiiIiiiiIj div.AaaaaAaaaaBa {
    background: #050607;
    border: 1px solid rgba(90, 243, 255, 0.3);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
}

section.IiiiiIiiiiIj div.PppppPppppPq:hover,
section.IiiiiIiiiiIj div.AaaaaAaaaaBa:hover {
    border-color: #5AF3FF;
}

/* card title/price text (оставляю как у тебя, но только внутри price секции) */
section.IiiiiIiiiiIj .RrrrrRrrrrRs {
    font-size: 22px;
    color: #5AF3FF;
    margin-bottom: 10px;
}

section.IiiiiIiiiiIj .SssssSssssSt {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* features list in price card */
section.IiiiiIiiiiIj ul.TttttTttttTu {
    list-style: none;
    text-align: left;
    margin-bottom: 30px;
}

section.IiiiiIiiiiIj li.UuuuuUuuuuUv {
    margin-bottom: 12px;
    font-size: 15px;
    padding-left: 25px;
    position: relative;
}

section.IiiiiIiiiiIj li.UuuuuUuuuuUv::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #5AF3FF;
}

/* price card CTA links — только ссылки */
section.IiiiiIiiiiIj a.YyyyyYyyyyYz,
section.IiiiiIiiiiIj a.VvvvvVvvvvVw,
section.IiiiiIiiiiIj a.FffffFffffFg,
section.IiiiiIiiiiIj a.IiiiiIiiiiIj {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #5AF3FF;
    color: #5AF3FF;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

section.IiiiiIiiiiIj a.YyyyyYyyyyYz:hover,
section.IiiiiIiiiiIj a.VvvvvVvvvvVw:hover,
section.IiiiiIiiiiIj a.FffffFffffFg:hover,
section.IiiiiIiiiiIj a.IiiiiIiiiiIj:hover {
    background: #5AF3FF;
    color: #050607;
}

/* ================= FOR WHOM SECTION ================= */
section.GggggGggggGh {
    padding: 100px 20px;
    background: #08090a;
}

/* container in for-whom (у тебя было .Hhhhh... уже занято hero text колонкой — не ломаем) */
section.GggggGggggGh .HhhhhHhhhhHi {
    max-width: 1000px;
    margin: 0 auto;
    display: block;
}

/* big image inside for-whom */
section.GggggGggggGh img.IiiiiIiiiiIj {
    width: 100%;
    margin-bottom: 40px;
    box-shadow: 0 0 30px rgba(90, 243, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(90,243,255,.2);
}

/* audience list */
section.GggggGggggGh ul.NnnnnNnnnnNo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    list-style: none;
}

/* audience list items — ВАЖНО: .Ppppp... не трогаем, чтобы не ломать кнопки.
   Здесь оформляем LI внутри этого блока */
section.GggggGggggGh ul.NnnnnNnnnnNo > li {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-left: 4px solid #5AF3FF;
    border-radius: 10px;
}

/* ================= EXPERT SECTION ================= */
section.YyyyyYyyyyYz {
    padding: 100px 20px;
}

/* layout wrapper */
section.YyyyyYyyyyYz .AaaaaAaaaaBa {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

section.YyyyyYyyyyYz .BbbbbBbbbbBc {
    flex: 1;
    min-width: 300px;
}

/* blockquote — только blockquote, НЕ div/img .Ccccc... */
section.YyyyyYyyyyYz blockquote.CccccCccccCd {
    font-size: 28px;
    line-height: 1.4;
    color: #ffffff;
    border-left: 5px solid #5AF3FF;
    padding-left: 30px;
    margin-bottom: 20px;
}

/* cite/name */
section.YyyyyYyyyyYz .DddddDddddDe {
    font-size: 18px;
    color: #5AF3FF;
}

/* right panel */
section.YyyyyYyyyyYz .EeeeeEeeeeEf {
    flex: 1;
    min-width: 300px;
    background: rgba(90, 243, 255, 0.05);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid rgba(90,243,255,.15);
}

/* ================= BENEFITS SECTION ================= */
/* ВАЖНО: section.Ppppp... конфликтует с a.Ppppp... (кнопкой), поэтому строго по тегу section */
section.PppppPppppPq {
    padding: 100px 20px;
    background: #050607;
}

/* wrapper внутри benefits (у тебя был .Rrrrr... также секция reviews — ограничиваем контекстом) */
section.PppppPppppPq .RrrrrRrrrrRs {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    padding: 0;
}

section.PppppPppppPq .SssssSssssSt {
    flex: 1;
    min-width: 300px;
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
}

section.PppppPppppPq .CccccCccccCd {
    flex: 1;
    min-width: 300px;
}

/* ================= FAQ SECTION ================= */
section.EeeeeEeeeeEf {
    padding: 100px 20px;
}

/* faq container (тут .Fffff.. — контейнер, а в reviews .Fffff.. — карточка, поэтому уточняем) */
section.EeeeeEeeeeEf > .FffffFffffFg {
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
}

/* details */
section.EeeeeEeeeeEf details.IiiiiIiiiiIj {
    background: #0a0c0e;
    border: 1px solid rgba(90, 243, 255, 0.2);
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* summary (класс .Jjj... конфликтует с price container и form, поэтому строго в FAQ) */
section.EeeeeEeeeeEf summary.JjjjjJjjjjJk {
    padding: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #5AF3FF;
    outline: none;
    list-style: none;
    background: transparent;
}

section.EeeeeEeeeeEf summary.JjjjjJjjjjJk::-webkit-details-marker { display: none; }

section.EeeeeEeeeeEf .LllllLllllLm {
    padding: 0 20px 20px;
    color: #bbbbbb;
}

/* ================= FORM SECTION ================= */
section.FffffFffffFg {
    padding: 100px 20px;
    background: #08090a;
}

/* section heading wrapper */
section.FffffFffffFg .GggggGggggGh {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* form wrapper (у тебя form.Jjj.. конфликтует с price container .Jjj.. — различаем по тегу form) */
section.FffffFffffFg form.JjjjjJjjjjJk {
    margin-top: 40px;
    text-align: left;
}

/* inputs — у тебя эти классы используются в других местах, поэтому только внутри form-секции */
section.FffffFffffFg form.JjjjjJjjjjJk .NnnnnNnnnnNo,
section.FffffFffffFg form.JjjjjJjjjjJk .RrrrrRrrrrRs,
section.FffffFffffFg form.JjjjjJjjjjJk .TttttTttttTu {
    width: 100%;
    padding: 15px;
    background: #050607;
    border: 1px solid rgba(90, 243, 255, 0.3);
    color: #fff;
    margin-bottom: 20px;
    border-radius: 8px;
    display: block;
}

/* textarea */
section.FffffFffffFg form.JjjjjJjjjjJk .TttttTttttTu {
    height: 120px;
    resize: none;
}

/* submit button (у тебя .Www.. ещё в reviews как текст, поэтому только button) */
section.FffffFffffFg form.JjjjjJjjjjJk button.WwwwwWwwwwWx {
    width: 100%;
    padding: 15px;
    background: #5AF3FF;
    border: none;
    color: #050607;
    font-weight: bold;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(90, 243, 255, 0.4);
    transition: .25s;
}

section.FffffFffffFg form.JjjjjJjjjjJk button.WwwwwWwwwwWx:hover {
    box-shadow: 0 0 25px #5AF3FF;
    transform: translateY(-1px);
}

/* ================= FOOTER ================= */
footer.XxxxxXxxxxXy {
    padding: 60px 20px;
    border-top: 1px solid #5AF3FF;
    background: #050607;
    text-align: center;
}

/* footer links wrapper (у тебя .Eeeee.. — это и секция FAQ, и картинка/класс в hero. Скоупим по footer) */
footer.XxxxxXxxxxXy .EeeeeEeeeeEf {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    padding: 0;
}

footer.XxxxxXxxxxXy .EeeeeEeeeeEf a {
    color: #5AF3FF;
    text-decoration: none;
    font-size: 12px;
    opacity: .9;
    transition: .25s;
}

footer.XxxxxXxxxxXy .EeeeeEeeeeEf a:hover { opacity: 1; }

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .FffffFffffFf { display: block; }

    /* mobile menu panel */
    header.BbbbbBbbbbBb .HhhhhHhhhhHh {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #050607;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s;
        border-bottom: 0px solid #5AF3FF;
    }

    /* toggle open */
    .EeeeeEeeeeEe:checked ~ .HhhhhHhhhhHh {
        max-height: 420px;
        border-bottom: 2px solid #5AF3FF;
    }

    header.BbbbbBbbbbBb .HhhhhHhhhhHh .IiiiiIiiiiIi {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    section.YyyyyYyyyyYy h1.IiiiiIiiiiIj { font-size: 32px; }

    section.GggggGggggGh ul.NnnnnNnnnnNo { grid-template-columns: 1fr; }
}