/* =====================================================================
   Mightylikes "Promobox" theme: dark hero, light page, white rounded cards, violet accent.
   Loaded after custom.css and polish.css (see layouts/app.blade.php). Prefix `html body` beats old body-scoped rules.
   ===================================================================== */
:root {
    --pb-bg: #141414;
    --pb-page: #f5f5f5;
    --pb-ink: #282828;
    --pb-muted: #6b6b73;
    --pb-accent: #895cfe;
    --pb-accent-dark: #6f43e6;
    --pb-tint: #efe9ff;
    --pb-line: #e3e3e8;
    --pb-r: 28px;
}
html body {
    font-family: "Onest", "Poppins", system-ui, sans-serif;
    background: var(--pb-page);
    color: var(--pb-ink);
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body label, html body input,
html body select, html body textarea, html body button, html body p, html body a {
    font-family: "Onest", "Poppins", system-ui, sans-serif;
}

/* ---------------- HEADER ---------------- */
html body header.Otaley-header {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100% !important;
    padding: 0 !important;
    background: rgba(20, 20, 20, .92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
html body header.Otaley-header .navbar > .container {
    max-width: 1360px !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body header.Otaley-header .ml-logo-light { display: block !important; }
html body header.Otaley-header a.navbar-brand img.ml-logo-dark { display: none !important; }
html body header.Otaley-header .navbar-brand img { height: 34px !important; width: auto !important; max-width: none !important; }
@media (min-width: 992px) {
    html body header.Otaley-header .navbar-nav .nav-link {
        color: #fff !important;
        background: transparent !important;
        border-radius: 12px !important;
        padding: 0 16px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        box-shadow: none !important;
        min-height: 72px !important;
    }
    html body header.Otaley-header .navbar-nav .nav-link:hover { color: #c8b3ff !important; background: transparent !important; }
    html body header.Otaley-header .navbar-nav .nav-link.active { color: #b79bff !important; background: transparent !important; box-shadow: none !important; font-weight: 500 !important; }
    html body header.Otaley-header .lang-button,
    html body header.Otaley-header button#langToggle.lang-button {
        background: transparent !important;
        border: 0 !important;
        color: #fff !important;
        min-height: 40px !important;
    }
    html body header.Otaley-header .lang-button .arrow path { stroke: #fff; }
    html body header.Otaley-header .ml-cart-btn {
        width: auto;
        height: 40px;
        padding: 0 18px !important;
        gap: 8px;
        background: transparent;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: 999px;
        box-shadow: none;
        font-size: 15px !important;
    }
    html body header.Otaley-header .ml-cart-btn:hover { background: #fff; color: var(--pb-bg) !important; transform: none; }
    html body header.Otaley-header .dropdown-menu { background: #fff; }
}

/* ---------------- HERO ---------------- */
html body .otaley-banner {
    background: var(--pb-bg) !important;
    background-image: radial-gradient(60% 40% at 50% 0%, rgba(137, 92, 254, .18), transparent 70%) !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 0 !important;
}
html body div#otaley-banner-content { padding-top: 3.5rem !important; padding-bottom: 1rem !important; }
html body .otaley-banner h1 {
    font-size: clamp(34px, 5vw, 56px) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    max-width: 880px !important;
    letter-spacing: -.01em;
    padding-bottom: 20px !important;
}
html body div#otaley-banner-content p {
    max-width: 760px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, .86) !important;
}
html body .otaley-banner h1 span[style*="background"] {
    background: var(--pb-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 0 16px !important;
}
html body .otaley-about { background: transparent !important; padding-bottom: 72px !important; }
html body .otaley-about::before { display: none !important; }
html body div#otaley-inner { max-width: 1280px !important; width: 100% !important; padding: 0 24px !important; }

/* ---------------- ORDER WIDGET ---------------- */
html body #social-media-follower { background: transparent !important; padding: 0 !important; margin: 0 !important; }
html body #social-media-follower > .container { max-width: 100% !important; padding: 0 !important; }
html body #main-tabs { display: flex !important; flex-direction: column !important; gap: 16px !important; }
html body #main-tabs .tab__dropdown { display: none !important; }
html body #first-tabs {
    width: 100% !important;
    background: #232323 !important;
    border-radius: 24px !important;
    padding: 8px !important;
    height: auto !important;
}
html body #first-tabs .testing { width: 100% !important; height: auto !important; padding: 0 !important; }
html body #first-tabs .tab__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}
html body #first-tabs .tab__list::-webkit-scrollbar { display: none; }
html body #first-tabs .tab__item {
    flex: 1 1 0 !important;
    min-width: 96px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transform: none !important;
}
html body #first-tabs .tab__item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 14px 8px 12px !important;
    color: #b9b9c2 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
html body #first-tabs .tab__item a img { width: 32px !important; height: 32px !important; object-fit: contain; border-radius: 8px; }
html body #first-tabs .tab__item.is--active { background: #fff !important; }
html body #first-tabs .tab__item.is--active a { color: var(--pb-ink) !important; }
html body #first-tabs .tab__item:hover:not(.is--active) { background: rgba(255, 255, 255, .06) !important; }

html body #backdrop_ { width: 100% !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
html body #backdrop_ > .tab__content { padding: 0 !important; }
html body #cs-youtube.tab-container,
html body #backdrop_ .tab-container#cs-youtube {
    display: grid !important;
    grid-template-columns: minmax(280px, 380px) 1fr !important;
    gap: 4px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}
html body #Permotion {
    display: block !important;
    background: #fff !important;
    border-radius: 32px 4px 4px 32px !important;
    padding: 28px 16px 24px !important;
    width: 100% !important;
    max-width: none !important;
}
html body #Permotion h2 { font-size: 22px !important; font-weight: 600 !important; text-align: left !important; padding: 0 16px 14px !important; margin: 0 !important; color: var(--pb-ink) !important; }
html body #Permotion .tab__item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin: 0 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: var(--pb-ink) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    text-align: left !important;
    text-decoration: none !important;
    transform: none !important;
}
html body #Permotion .tab__item .tab__item-icon,
html body #Permotion .tab__item .tab__item-icon i { color: var(--pb-accent) !important; background: transparent !important; font-size: 22px !important; width: auto !important; height: auto !important; }
html body #Permotion .tab__item:hover { background: #f4f4f6 !important; }
html body #Permotion .tab__item.is--active { background: #f1f1f4 !important; color: var(--pb-ink) !important; font-weight: 500 !important; }
html body #cs-youtube #wrapper {
    background: #fff !important;
    border-radius: 4px 32px 32px 4px !important;
    padding: 28px 32px 32px !important;
    width: 100% !important;
    max-width: none !important;
}
html body #wrapper h3#order { font-size: 22px !important; font-weight: 600 !important; text-align: left !important; margin: 0 0 18px !important; color: var(--pb-ink) !important; }
html body #wrapper p:empty, html body #wrapper p:has(> br), html body #wrapper > p { display: none !important; }
html body #product-forms { padding: 0 !important; width: 100% !important; max-width: none !important; }
html body #product-form { text-align: left !important; }
html body #product-form label { display: block; text-align: left !important; font-size: 15px !important; font-weight: 400 !important; color: var(--pb-muted) !important; margin: 14px 0 6px !important; }
html body #product-form .form-select,
html body #product-form input[type="text"],
html body #product-form select {
    height: 52px !important;
    border: 1px solid #d9d9df !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    color: var(--pb-ink) !important;
    box-shadow: none !important;
    width: 100% !important;
}
html body #product-form .form-select:focus,
html body #product-form input[type="text"]:focus { border-color: var(--pb-accent) !important; box-shadow: 0 0 0 3px rgba(137, 92, 254, .16) !important; outline: 0; }
html body .cart-price {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body .cart-price .order-amount p { font-size: 15px !important; color: var(--pb-muted) !important; margin: 0 0 2px !important; }
html body .cart-price .order-amount h3 { font-size: 26px !important; font-weight: 600 !important; margin: 0 !important; color: var(--pb-ink) !important; }
html body .cart-price button,
html body .pb-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px !important;
    background: var(--pb-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .15s ease, transform .15s ease;
}
html body .cart-price button:hover, html body .pb-btn:hover { background: var(--pb-accent-dark) !important; transform: translateY(-1px); }

/* ---------------- SECTIONS ---------------- */
.pb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.pb-head { text-align: center; margin: 0 auto 40px; max-width: 760px; }
.pb-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: var(--pb-ink); margin: 0 0 14px; }
.pb-head p { font-size: 18px; line-height: 1.5; color: var(--pb-muted); margin: 0; }
.pb-head--light h2 { color: #fff; }
.pb-head--light p { color: rgba(255, 255, 255, .86); }

.pb-why {
    padding: 104px 0 72px;
    background:
        radial-gradient(52% 38% at 50% 14%, rgba(137, 92, 254, .55), transparent 70%),
        linear-gradient(180deg, #141414 0%, #3d3558 36%, #cfc6e6 62%, var(--pb-page) 100%);
}
.pb-grid { display: grid; gap: 8px; }
.pb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pb-card {
    position: relative;
    background: #fff;
    border-radius: var(--pb-r);
    padding: 28px 30px 30px;
    min-height: 248px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.pb-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--pb-ink); margin: 0 0 10px; }
.pb-card p { font-size: 16px; line-height: 1.5; color: var(--pb-muted); margin: 0; }
.pb-num {
    position: absolute; left: 30px; top: 24px;
    font-size: 54px; line-height: 1; font-weight: 300; font-style: italic;
    color: #e6e0f5; letter-spacing: -.02em;
}
.pb-chip {
    position: absolute; right: 26px; top: 24px;
    width: 76px; height: 76px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #c9b6ff 0%, #8d62ff 100%);
    box-shadow: 0 14px 28px rgba(137, 92, 254, .30), inset 0 1px 0 rgba(255, 255, 255, .6);
    transform: rotate(-6deg);
}
.pb-chip i { font-size: 34px; color: #fff; }

.pb-cta-sec { padding: 8px 0 72px; background: var(--pb-page); }
.pb-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    border-radius: 32px;
    padding: 56px 56px;
    color: #fff;
    background:
        radial-gradient(60% 90% at 90% 20%, rgba(255, 150, 200, .22), transparent 60%),
        linear-gradient(135deg, #2b2638 0%, #4a4163 55%, #6f5f96 100%);
}
.pb-cta h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 600; margin: 0 0 12px; letter-spacing: -.02em; color: #fff; }
.pb-cta p { max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .82); margin: 0 0 28px; }
.pb-cta__art { flex: 0 0 auto; filter: drop-shadow(0 24px 40px rgba(20, 8, 60, .45)); transform: rotate(6deg); }

.pb-steps { padding: 24px 0 72px; background: var(--pb-page); }
.pb-card--step { min-height: 232px; }

.pb-pop { padding: 8px 0 96px; background: var(--pb-page); }
.pb-pop__list { display: grid; gap: 8px; }
.pb-pop__item { background: #fff; border-radius: var(--pb-r); padding: 28px 32px 32px; }
.pb-pop__item header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pb-pop__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--pb-tint); display: inline-flex; align-items: center; justify-content: center; }
.pb-pop__ico img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.pb-pop__item h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--pb-ink); }
.pb-pop__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
html body a.pb-pop__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border: 1px solid var(--pb-line); border-radius: 18px;
    color: var(--pb-ink) !important; text-decoration: none !important; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html body a.pb-pop__link:hover { border-color: var(--pb-accent); box-shadow: 0 10px 24px rgba(137, 92, 254, .14); transform: translateY(-2px); }
.pb-pop__link b { display: block; font-size: 16px; font-weight: 500; }
.pb-pop__link small { display: block; font-size: 14px; color: var(--pb-muted); margin-top: 2px; }
.pb-pop__link i { color: var(--pb-muted); font-size: 16px; }

/* testimonials (only rendered when real reviews exist) */
html body .Conclusion { background: var(--pb-bg) !important; border-radius: 32px !important; }

/* ---------------- FAQ (dark) ---------------- */
html body .pb-faq {
    background: var(--pb-bg) !important;
    padding: 96px 24px 40px !important;
    margin: 0;
}
html body .pb-faq .faq-container { max-width: 840px !important; width: 100% !important; }
html body .pb-faq .faq-title { color: #fff !important; font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 600 !important; letter-spacing: -.02em; }
html body .pb-faq .faq-subtitle { color: rgba(255, 255, 255, .72) !important; font-family: "Onest", sans-serif !important; max-width: 640px !important; font-size: 18px !important; line-height: 1.5 !important; padding-bottom: 20px !important; }
html body .pb-faq .faq-item {
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body .pb-faq .faq-question {
    padding: 22px 28px !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--pb-ink) !important;
    font-family: "Onest", sans-serif !important;
}
html body .pb-faq .faq-icon { font-size: 26px !important; font-weight: 300; color: var(--pb-muted); }
html body .pb-faq .faq-answer { padding: 0 28px !important; color: var(--pb-muted) !important; font-size: 16px !important; line-height: 1.55; }
html body .pb-faq .faq-item.open .faq-answer { padding: 0 28px 24px !important; }

.pb-help { background: var(--pb-bg); padding: 28px 0 88px; text-align: center; }
.pb-help p { margin: 0; color: #fff; font-size: 17px; line-height: 1.6; }
.pb-help a { color: #a98cff; text-decoration: none; }
.pb-help a:hover { color: #c8b3ff; }

/* ---------------- FOOTER (dark) ---------------- */
html body footer.footer.ml-footer { background: linear-gradient(180deg, #141414 0%, #1d1a26 55%, #3a3550 100%) !important; padding: 8px 0 0 !important; margin: 0 !important; }
html body footer.ml-footer .ml-footer__card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 1280px !important;
    width: 100% !important;
    padding: 0 24px 32px !important;
    color: #d8d8e0 !important;
}
html body footer.ml-footer .ml-footer__cta { display: none !important; }
html body footer.ml-footer .ml-footer__grid { padding-top: 40px !important; border-bottom: 0 !important; }
html body footer.ml-footer .ml-footer__brand p { color: #a3a3b0 !important; }
html body footer.ml-footer .ml-footer__trust li { color: #e6e6ee !important; }
html body footer.ml-footer .ml-footer__trust i { background: rgba(255, 255, 255, .08) !important; color: #b79bff !important; }
html body footer.ml-footer .ml-footer__col h4 { color: #8d8d9a !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; }
html body footer.ml-footer .ml-footer__col ul li a { color: #fff !important; font-size: 15px !important; }
html body footer.ml-footer .ml-footer__col ul li a:hover { color: #b79bff !important; }
html body footer.ml-footer .ml-footer__pico { background: #fff !important; }
html body footer.ml-footer .ml-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
html body footer.ml-footer .ml-footer__copy { color: #9a9aa8 !important; }
html body footer.ml-footer .ml-footer__pay li { background: rgba(255, 255, 255, .1) !important; border: 0 !important; }
html body footer.ml-footer .ml-footer__pay img { filter: none; }

/* ---------------- OTHER PAGES (about / contact / legal / cart) ---------------- */
html body .about-sec { background: var(--pb-bg) !important; border-radius: 0 !important; margin-bottom: 2.5rem; }
html body #about-us-page,
html body #product-banner { background-color: var(--pb-bg) !important; }
html body #about-us-page { margin-bottom: 4rem !important; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1199.98px) {
    .pb-grid--3 { grid-template-columns: repeat(2, 1fr); }
    html body header.Otaley-header .navbar > .container { padding: 0 16px !important; }
}
@media (max-width: 991.98px) {
    html body header.Otaley-header { background: rgba(20, 20, 20, .95) !important; }
    html body header.Otaley-header .navbar > .container { min-height: 64px !important; }
    html body header.Otaley-header .navbar-toggler { border-color: rgba(255, 255, 255, .5) !important; background: transparent !important; }
    html body .otaley-banner { padding-top: 76px !important; }
    html body #cs-youtube.tab-container,
    html body #backdrop_ .tab-container#cs-youtube { grid-template-columns: 1fr !important; }
    html body #Permotion { border-radius: 28px 28px 4px 4px !important; }
    html body #cs-youtube #wrapper { border-radius: 4px 4px 28px 28px !important; padding: 24px 20px 28px !important; }
    .pb-cta { padding: 36px 28px; flex-direction: column; align-items: flex-start; }
    .pb-cta__art { display: none; }
}
@media (max-width: 640px) {
    .pb-grid--3 { grid-template-columns: 1fr; }
    .pb-wrap, html body div#otaley-inner { padding-left: 16px !important; padding-right: 16px !important; }
    .pb-why { padding: 72px 0 48px; }
    .pb-card { min-height: 0; padding-top: 96px; }
    .pb-pop__item { padding: 22px 18px 24px; }
    html body #first-tabs .tab__item { flex: 0 0 92px !important; }
    html body .cart-price { flex-direction: column; align-items: stretch !important; }
    html body .cart-price button { width: 100%; }
    html body .pb-faq { padding: 64px 16px 24px !important; }
    html body .pb-faq .faq-question { padding: 18px 20px !important; font-size: 16px !important; }
}

/* ---------------- WIDGET FIXES (old hover-expanding strip + white span text) ---------------- */
html body #first-tabs .testing,
html body #first-tabs .testing:hover {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    display: block !important;
}
html body div#first-tabs .tab__item,
html body div#first-tabs .tab__item:hover,
html body div#first-tabs .tab__item.is--active {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 18px !important;
}
html body div#first-tabs .tab__item { background: transparent !important; }
html body div#first-tabs .tab__item:hover { background: rgba(255, 255, 255, .06) !important; }
html body div#first-tabs .tab__item.is--active { background: #fff !important; }
html body #first-tabs .testing .tab__item span,
html body #first-tabs .testing:hover .tab__item span {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    color: inherit !important;
    font-family: "Onest", sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    white-space: nowrap;
    text-align: center;
}
html body #first-tabs .tab__item a { position: static !important; }
html body div#Permotion .tab__item,
html body div#Permotion .tab__item:hover,
html body div#Permotion .tab__item.is--active {
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 14px 16px !important;
}
html body div#Permotion .tab__item { background: transparent !important; }
html body div#Permotion .tab__item:hover { background: #f4f4f6 !important; }
html body div#Permotion .tab__item.is--active { background: #f1f1f4 !important; color: var(--pb-ink) !important; }
html body div#Permotion .tab__item span,
html body div#Permotion .tab__item.is--active span { color: var(--pb-ink) !important; font-family: "Onest", sans-serif !important; }
html body div#Permotion .tab__item .tab__item-icon i,
html body div#Permotion .tab__item.is--active .tab__item-icon i { color: var(--pb-accent) !important; }
html body div#wrapper { border: 0 !important; box-shadow: none !important; }
html body div#Permotion .tab__list h2, html body div#wrapper h3#order { line-height: 1.2 !important; font-size: 22px !important; text-align: left !important; }
html body #cs-youtube.tab-container, html body #backdrop_ .tab-container#cs-youtube { gap: 4px !important; }
html body #product-forms { background: transparent !important; }

/* mobile: show the platform strip + type list (old CSS swapped them for dropdowns) */
@media (max-width: 991.98px) {
    html body #first-tabs { display: block !important; visibility: visible !important; height: auto !important; opacity: 1 !important; }
    html body #first-tabs .testing { display: block !important; }
    html body #first-tabs .tab__list { display: flex !important; }
    html body #Permotion { display: block !important; visibility: visible !important; height: auto !important; opacity: 1 !important; }
    html body #Permotion .tab__list { display: block !important; }
    html body #Permotion .tab__item { padding: 12px 14px !important; }
    html body #main-tabs .tab__dropdown { display: none !important; }
}

/* wrapper must be transparent so strip + cards sit on the dark hero (old mobile CSS gave it a white card) */
html body #social-media-follower,
html body #social-media-follower > .container,
html body #social-media-follower .tab-container#main-tabs,
html body #main-tabs {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #first-tabs, html body #first-tabs .testing, html body #first-tabs .tab__list { outline: 0 !important; border: 0 !important; }
html body #first-tabs { position: static !important; margin: 0 !important; }
html body footer.ml-footer .ml-footer__pay li { background: #fff !important; }
.pb-help { padding: 24px 0 56px; }

/* grid column must be allowed to shrink, otherwise the right card overflows and gets clipped */
html body #cs-youtube.tab-container,
html body #backdrop_ .tab-container#cs-youtube { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) !important; }
@media (max-width: 991.98px) {
    html body #cs-youtube.tab-container,
    html body #backdrop_ .tab-container#cs-youtube { grid-template-columns: minmax(0, 1fr) !important; }
}
html body #cs-youtube #wrapper, html body #Permotion { min-width: 0 !important; box-sizing: border-box !important; }

/* ---------------- SUBPAGE POLISH ---------------- */
html body .Conclusion:not(:has(.review-card)) { display: none !important; }
html body .get-in-touch .container { border-radius: var(--pb-r) !important; }
html body .get-in-touch h3 { font-family: "Onest", sans-serif !important; font-weight: 600 !important; letter-spacing: -.02em; }
html body .get-in-touch-btn a {
    background: var(--pb-accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0 32px !important;
    height: 52px;
    display: inline-flex !important;
    align-items: center;
    font-weight: 500 !important;
    font-size: 16px !important;
    box-shadow: none !important;
}
html body .get-in-touch-btn a:hover { background: var(--pb-accent-dark) !important; color: #fff !important; }
html body form button[type="submit"] {
    background: var(--pb-accent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Onest", sans-serif !important;
    font-weight: 500 !important;
}
html body form button[type="submit"]:hover { background: var(--pb-accent-dark) !important; }
html body img[src*="empty_cart"] { display: block; margin: 0 auto 1rem; }
html body .page-content a, html body .um-legal a { color: var(--pb-accent); }

html body header.Otaley-header .ml-cart-btn, html body header.Otaley-header .ml-cart-btn span { text-decoration: none !important; }
html body .cookie-banner button:last-child, html body #cookie-banner button:last-child { background: var(--pb-accent) !important; }

/* =====================================================================
   POLISH ROUND 2: depth, glass, motion
   ===================================================================== */
/* Hero: soft aurora + trust chips */
html body .otaley-banner {
    background-image:
        radial-gradient(46% 38% at 18% 8%, rgba(137, 92, 254, .22), transparent 70%),
        radial-gradient(40% 34% at 86% 12%, rgba(255, 120, 190, .10), transparent 70%),
        radial-gradient(60% 40% at 50% 0%, rgba(137, 92, 254, .14), transparent 70%) !important;
}
.pb-hero-chips {
    list-style: none; margin: 26px auto 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.pb-hero-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1;
    backdrop-filter: blur(6px);
}
.pb-hero-chips i { color: #b79bff; font-size: 15px; }

/* Widget: a touch more depth */
html body #first-tabs { box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important; background: linear-gradient(180deg, #2a2a2e 0%, #212125 100%) !important; }
html body #first-tabs .tab__item.is--active { box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important; }
html body #Permotion, html body #cs-youtube #wrapper { box-shadow: 0 24px 50px rgba(0, 0, 0, .28) !important; }
html body #product-form .form-select, html body #product-form input[type="text"] { transition: border-color .15s ease, box-shadow .15s ease; }

/* Feature + step cards: glossy glass chip, hover lift */
.pb-card { transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.pb-card::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(137, 92, 254, .14), transparent 68%); pointer-events: none;
}
.pb-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(60, 30, 140, .14); }
.pb-chip {
    width: 84px; height: 84px; border-radius: 28px; z-index: 1;
    background:
        radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(150deg, #cdbbff 0%, #8f64ff 62%, #6f43e6 100%);
    box-shadow: 0 18px 34px rgba(137, 92, 254, .34), inset 0 -6px 12px rgba(80, 40, 190, .35), inset 0 2px 0 rgba(255, 255, 255, .55);
    transition: transform .3s ease;
}
.pb-card:hover .pb-chip { transform: rotate(0deg) scale(1.06); }
.pb-chip i { font-size: 36px; filter: drop-shadow(0 3px 4px rgba(60, 20, 160, .45)); }
.pb-num { background: linear-gradient(180deg, #d9ceff, #f0ebff); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 58px; }

/* CTA block: glow + glass tile */
.pb-cta { position: relative; overflow: hidden; box-shadow: 0 30px 60px rgba(40, 20, 90, .22); }
.pb-cta::before, .pb-cta::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pb-cta::before { right: 6%; top: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255, 140, 200, .35), transparent 65%); }
.pb-cta::after { right: -80px; bottom: -160px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(137, 92, 254, .55), transparent 65%); }
.pb-cta > * { position: relative; z-index: 1; }
.pb-cta__art svg { width: 190px; height: 190px; }

/* Platform cards with glass orb on the right */
.pb-pop__item { position: relative; overflow: hidden; transition: box-shadow .25s ease; }
.pb-pop__item:hover { box-shadow: 0 22px 44px rgba(60, 30, 140, .10); }
.pb-pop__links { max-width: calc(100% - 260px); }
.pb-orb {
    position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
    width: 190px; height: 190px; pointer-events: none;
}
.pb-orb::before {
    content: ""; position: absolute; inset: -34px; border-radius: 50%;
    background: radial-gradient(circle, rgba(137, 92, 254, .22), rgba(255, 140, 200, .10) 45%, transparent 70%);
}
.pb-orb span {
    position: absolute; inset: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(90% 90% at 28% 18%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(150deg, #e4d9ff 0%, #b69cff 55%, #8f6cff 100%);
    box-shadow: 0 22px 40px rgba(137, 92, 254, .30), inset 0 -10px 22px rgba(90, 50, 200, .30), inset 0 3px 0 rgba(255, 255, 255, .8);
}
.pb-orb span::after {
    content: ""; position: absolute; inset: 22px; border-radius: 50%;
    background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.pb-orb img { position: relative; z-index: 1; width: 56px; height: 56px; object-fit: contain; border-radius: 14px; filter: drop-shadow(0 6px 10px rgba(60, 20, 160, .35)); }

/* FAQ: violet open state */
html body .pb-faq .faq-item { transition: box-shadow .2s ease, transform .2s ease; }
html body .pb-faq .faq-item:hover { transform: translateY(-1px); }
html body .pb-faq .faq-item.open { box-shadow: 0 0 0 2px rgba(137, 92, 254, .55) !important; }
html body .pb-faq .faq-item.open .faq-icon { color: var(--pb-accent); }

/* Scroll reveal (only when JS is active) */
.pb-js .pb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.pb-js .pb-reveal.is-in { opacity: 1; transform: none; }
.pb-js .pb-card.is-in:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .pb-js .pb-reveal { opacity: 1; transform: none; transition: none; } .pb-card, .pb-chip { transition: none; } }

@media (max-width: 991.98px) {
    .pb-orb { width: 120px; height: 120px; right: 20px; top: 24px; transform: none; }
    .pb-orb img { width: 36px; height: 36px; }
    .pb-orb span::after { inset: 14px; }
    .pb-pop__links { max-width: 100%; }
}
@media (max-width: 640px) {
    .pb-orb { width: 84px; height: 84px; right: 14px; top: 14px; }
    .pb-orb::before { inset: -18px; }
    .pb-orb img { width: 26px; height: 26px; }
    .pb-orb span::after { inset: 10px; }
    .pb-hero-chips li { font-size: 13px; padding: 8px 12px; }
    .pb-chip { width: 68px; height: 68px; border-radius: 22px; }
    .pb-chip i { font-size: 28px; }
}

/* ---------------- Popular services: collapsed list + animated "show all" ---------------- */
.pb-pop__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .7s cubic-bezier(.22, .8, .24, 1);
}
.pb-pop__more-in { overflow: hidden; min-height: 0; }
.pb-pop__more .pb-pop__list { padding-top: 8px; }
.pb-pop__more .pb-pop__item { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, .8, .24, 1); }
.pb-pop__more.is-open { grid-template-rows: 1fr; }
.pb-pop__more.is-open .pb-pop__item { opacity: 1; transform: none; }
.pb-pop__more.is-open .pb-pop__item:nth-child(1) { transition-delay: .10s; }
.pb-pop__more.is-open .pb-pop__item:nth-child(2) { transition-delay: .18s; }
.pb-pop__more.is-open .pb-pop__item:nth-child(3) { transition-delay: .26s; }
.pb-pop__more.is-open .pb-pop__item:nth-child(4) { transition-delay: .34s; }
.pb-pop__more.is-open .pb-pop__item:nth-child(5) { transition-delay: .42s; }
.pb-pop__more.is-open .pb-pop__item:nth-child(n+6) { transition-delay: .5s; }
.pb-pop__toggle { position: relative; display: flex; justify-content: center; padding-top: 28px; }
.pb-pop__more:not(.is-open) + .pb-pop__toggle::before {
    content: ""; position: absolute; left: 0; right: 0; top: -96px; height: 96px; pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0), var(--pb-page) 85%);
}
html body .pb-more-btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 30px;
    border: 1px solid var(--pb-line); border-radius: 999px;
    background: #fff; color: var(--pb-ink);
    font-size: 16px; font-weight: 500; cursor: pointer;
    box-shadow: 0 10px 26px rgba(40, 20, 90, .08);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
html body .pb-more-btn:hover { border-color: var(--pb-accent); color: var(--pb-accent); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(137, 92, 254, .18); }
.pb-more-btn i { transition: transform .35s ease; font-size: 14px; }
.pb-more-btn.is-open i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pb-pop__more, .pb-pop__more .pb-pop__item { transition: none; } }

/* ---------------- Popular services: stacking cards (like Promobox) ---------------- */
html body header.Otaley-header { position: fixed !important; top: 0 !important; z-index: 1030 !important; }
.pb-pop__list--stack { display: flex; flex-direction: column; gap: 14px; }
.pb-pop__item--stack {
    position: sticky;
    top: calc(100px + var(--i, 0) * 14px);
    min-height: 300px;
    box-shadow: 0 -14px 34px rgba(30, 14, 70, .10);
    z-index: calc(1 + var(--i, 0));
}
.pb-pop__item--stack:hover { box-shadow: 0 -14px 34px rgba(30, 14, 70, .14); }
.pb-pop__more { margin-top: 14px; }
.pb-pop__toggle::before { display: none !important; }
.pb-pop__toggle { padding-top: 36px; }
@media (max-width: 767.98px) {
    .pb-pop__item--stack { position: relative; top: auto; min-height: 0; box-shadow: none; }
}

/* =====================================================================
   POLISH ROUND 3: clean, desaturated gradients + smaller step numerals (Promobox-like)
   ===================================================================== */
html body .otaley-banner {
    background-image: radial-gradient(70% 38% at 50% 0%, rgba(140, 118, 200, .16), transparent 72%) !important;
}
.pb-why {
    background:
        radial-gradient(58% 46% at 50% 18%, rgba(160, 140, 214, .34) 0%, rgba(160, 140, 214, 0) 72%),
        linear-gradient(180deg,
            #141414 0%, #17151d 8%, #1f1c2b 18%, #302a43 30%, #4d4468 42%,
            #7b7196 54%, #aaa2c2 65%, #d3cee3 75%, #ebe8f2 85%, #f5f5f5 100%);
}
.pb-num {
    font-size: 40px; font-weight: 300; letter-spacing: -.01em;
    top: 26px; left: 28px;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: #e3dcf6;
}
.pb-chip { width: 64px; height: 64px; border-radius: 22px; top: 22px; right: 24px; }
.pb-chip i { font-size: 28px; }
.pb-card { min-height: 224px; padding: 26px 28px 28px; }
.pb-card::after { display: none; }
.pb-cta {
    background: linear-gradient(135deg, #25212f 0%, #3a3350 48%, #5b5079 100%);
}
.pb-cta::before { background: radial-gradient(circle, rgba(190, 170, 240, .20), transparent 66%); }
.pb-cta::after { background: radial-gradient(circle, rgba(137, 92, 254, .28), transparent 66%); }
html body .pb-faq { background: linear-gradient(180deg, #141414 0%, #141414 100%) !important; }
html body footer.footer.ml-footer { background: linear-gradient(180deg, #141414 0%, #181620 45%, #2a2638 100%) !important; }
@media (max-width: 640px) {
    .pb-card { padding-top: 84px; min-height: 0; }
    .pb-num { font-size: 34px; top: 22px; left: 22px; }
    .pb-chip { width: 56px; height: 56px; top: 18px; right: 18px; }
}

/* right order card: no stray margin, never wider than its grid column */
html body #cs-youtube #wrapper { margin: 0 !important; width: auto !important; max-width: none !important; }
/* gradient start: keep the glow away from the top edge so no seam shows below the hero */
.pb-why {
    background:
        radial-gradient(54% 40% at 50% 30%, rgba(160, 140, 214, .30) 0%, rgba(160, 140, 214, 0) 72%),
        linear-gradient(180deg,
            #141414 0%, #141414 6%, #1a1822 16%, #2a2539 28%, #433a5c 40%,
            #6f658d 52%, #a198ba 64%, #cdc8de 75%, #e9e6f0 86%, #f5f5f5 100%);
}

/* overflow-x:hidden on html/body turns body into the scroll container and kills position:sticky; clip does not */
html, body { overflow-x: clip !important; }

/* "Why choose": no numerals, icon chip sits top-left above the text */
.pb-card--feature .pb-chip { left: 28px; right: auto; transform: none; }
.pb-card--feature:hover .pb-chip { transform: scale(1.06); }
@media (max-width: 640px) { .pb-card--feature .pb-chip { left: 20px; } }

/* cards must grow with longer (DE/FR/ES/IT) copy instead of overlapping the icon */
.pb-card { justify-content: flex-start; padding-top: 104px; min-height: 0; }
.pb-card--feature { padding-top: 28px; }
.pb-card--feature .pb-chip { position: relative; left: auto; top: auto; right: auto; margin: 0 0 20px; flex: 0 0 auto; transform: none; }
.pb-card--feature:hover .pb-chip { transform: scale(1.06); }
@media (max-width: 640px) {
    .pb-card { padding-top: 88px; }
    .pb-card--feature { padding-top: 24px; }
    .pb-card--feature .pb-chip { left: auto; }
}

/* =====================================================================
   HEADER v3: floating glass pill, primary CTA, icon-only cart, compact-on-scroll
   ===================================================================== */
html body header.Otaley-header {
    background: transparent !important;
    border-bottom: 0 !important;
    pointer-events: none;
}
html body header.Otaley-header .navbar { pointer-events: none; }
html body header.Otaley-header .navbar > .container {
    pointer-events: auto;
    margin-top: 14px !important;
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    min-height: 64px !important;
    padding: 8px 10px 8px 20px !important;
    gap: 12px !important;
    background: rgba(24, 24, 28, .66) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    transition: margin-top .25s ease, min-height .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}
html body header.Otaley-header.is-scrolled .navbar > .container {
    margin-top: 8px !important;
    min-height: 56px !important;
    background: rgba(20, 20, 24, .86) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
@media (min-width: 992px) {
    html body header.Otaley-header .navbar-collapse { justify-content: center !important; }
    html body header.Otaley-header .navbar-nav.mobile-main-nav {
        gap: 2px !important;
        padding: 4px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .05);
    }
    html body header.Otaley-header .navbar-nav .nav-link {
        min-height: 40px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, .78) !important;
        background: transparent !important;
        transition: background-color .18s ease, color .18s ease !important;
    }
    html body header.Otaley-header .navbar-nav .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
    html body header.Otaley-header .navbar-nav .nav-link.active {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(137, 92, 254, .55), rgba(137, 92, 254, .32)) !important;
        box-shadow: inset 0 0 0 1px rgba(183, 155, 255, .35) !important;
    }
    html body header.Otaley-header .ml-cart-btn {
        width: 44px; height: 44px; padding: 0 !important; justify-content: center;
        border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
        color: #fff !important; font-size: 18px !important;
    }
    html body header.Otaley-header .ml-cart-btn:hover { background: rgba(255, 255, 255, .14); color: #fff !important; }
    html body header.Otaley-header .lang-button,
    html body header.Otaley-header button#langToggle.lang-button {
        min-height: 44px !important; padding: 0 12px !important; border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .05) !important;
    }
    html body header.Otaley-header .ml-cta-btn {
        align-items: center; gap: 10px; height: 44px; padding: 0 20px !important;
        border-radius: 14px; background: linear-gradient(135deg, #9b72ff 0%, #7a4cf0 100%);
        color: #fff !important; font-size: 15px !important; font-weight: 600; text-decoration: none !important;
        box-shadow: 0 10px 22px rgba(137, 92, 254, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
        transition: transform .15s ease, box-shadow .15s ease;
    }
    html body header.Otaley-header .ml-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(137, 92, 254, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
    html body header.Otaley-header .ml-cta-btn i { font-size: 14px; transition: transform .2s ease; }
    html body header.Otaley-header .ml-cta-btn:hover i { transform: translateX(3px); }

    /* products dropdown as a 3-column panel with platform icons */
    html body header.Otaley-header .dropdown-menu {
        margin-top: 16px !important; padding: 10px !important; min-width: 560px;
        border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 20px !important;
        background: rgba(24, 24, 28, .96) !important;
        box-shadow: 0 28px 60px rgba(0, 0, 0, .45) !important;
        backdrop-filter: blur(18px);
    }
    html body header.Otaley-header .dropdown-menu.show { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    html body header.Otaley-header .dropdown-menu li { list-style: none; }
    html body header.Otaley-header .dropdown-item {
        display: flex !important; align-items: center; gap: 12px; padding: 11px 12px !important; border-radius: 12px;
        color: #fff !important; font-size: 15px !important; font-weight: 500;
    }
    html body header.Otaley-header .dropdown-item img { width: 26px !important; height: 26px; object-fit: contain; padding: 4px; border-radius: 8px; background: #fff; }
    html body header.Otaley-header .dropdown-item:hover { background: rgba(255, 255, 255, .08) !important; }
}
@media (max-width: 991.98px) {
    html body header.Otaley-header .navbar > .container { padding: 8px 12px 8px 14px !important; border-radius: 18px !important; margin-top: 10px !important; min-height: 56px !important; }
}

/* mobile menu panel: dark, to match the pill */
@media (max-width: 991.98px) {
    html body header.Otaley-header div#navbarNav.collapse.show,
    html body header.Otaley-header div#navbarNav.collapse.collapsing {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-top: 6px;
    }
    html body header.Otaley-header ul.mobile-main-nav > .nav-item { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
    html body header.Otaley-header ul.mobile-main-nav .nav-link { color: #fff !important; font-size: 16px !important; padding: 14px 6px !important; background: transparent !important; }
    html body header.Otaley-header ul.mobile-main-nav .nav-link.active { color: #b79bff !important; }
    html body header.Otaley-header ul.mobile-main-nav .dropdown-menu { background: rgba(255, 255, 255, .06) !important; border: 0 !important; border-radius: 12px !important; }
    html body header.Otaley-header ul.mobile-main-nav .dropdown-item { color: #fff !important; }
    html body header.Otaley-header .mobile-nav-lang-panel { background: rgba(255, 255, 255, .05) !important; border-radius: 14px !important; margin-top: 10px; }
    html body header.Otaley-header .mobile-nav-lang-panel__label { color: #8d8d9a !important; }
    html body header.Otaley-header .mobile-nav-lang-panel__link { color: #fff !important; background: transparent !important; }
    html body header.Otaley-header .mobile-nav-lang-panel__link.is-active { background: rgba(137, 92, 254, .25) !important; color: #fff !important; }
    html body header.Otaley-header .mobile-nav-lang-panel__list > li { border-color: rgba(255, 255, 255, .06) !important; }
}

@media (max-width: 991.98px) { html body header.Otaley-header .mobile-nav-lang-panel__label { background: transparent !important; padding-left: 14px !important; } html body header.Otaley-header .mobile-nav-lang-panel { overflow: hidden; } }

/* ---------------- MOBILE ROUND ---------------- */
/* centered flex content in a scroller overflows to the unreachable left side: start-align instead */
html body #first-tabs .tab__list { justify-content: flex-start !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
html body #first-tabs .tab__item { scroll-snap-align: center; }
/* footer grid: allow columns to shrink, break long e-mail */
.ml-footer__grid > * { min-width: 0; }
@media (max-width: 767.98px) {
    .ml-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    html body footer.ml-footer .ml-footer__col ul li a { overflow-wrap: anywhere; word-break: break-word; }
}
/* tap targets >= 44px */
@media (max-width: 991.98px) {
    html body header.Otaley-header .navbar-toggler { width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; }
    html body header.Otaley-header a.navbar-brand { min-height: 44px; display: inline-flex !important; align-items: center; }
    html body footer.ml-footer .ml-footer__col ul li { margin-bottom: 4px; }
    html body footer.ml-footer .ml-footer__col ul li a { min-height: 40px; }
    html body .pb-help a { display: inline-block; padding: 10px 6px; }
    html body .faq-question { min-height: 56px; }
    html body .cart-price button, html body .pb-btn, html body .get-in-touch-btn a { min-height: 48px; }
    html body #Permotion .tab__item { min-height: 48px; }
    html body .text-primary.fs-4, html body .text-dark.fs-4 { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
}
/* inputs: 16px stops iOS from zooming on focus */
@media (max-width: 767.98px) {
    html body input, html body select, html body textarea, html body .form-select, html body .form-control { font-size: 16px !important; }
}
/* long German words must wrap instead of widening the page */
html body h1, html body h2, html body h3 { overflow-wrap: anywhere; hyphens: auto; }

@media (max-width: 767.98px) { html body .cookie-banner a, html body #cookie-banner a { display: inline-block; padding: 10px 4px; } html body .cookie-banner button, html body #cookie-banner button { min-height: 46px; } }

/* footer links: wrap on word boundaries / hyphenate, never mid-word; only the e-mail may break anywhere */
@media (max-width: 767.98px) {
    html body footer.ml-footer .ml-footer__col ul li a { overflow-wrap: break-word !important; word-break: normal !important; hyphens: auto; font-size: 14.5px !important; line-height: 1.35 !important; }
    html body footer.ml-footer .ml-footer__col ul li a[href^="mailto"] { overflow-wrap: anywhere !important; font-size: 13.5px !important; }
}

/* =====================================================================
   MOBILE: promotion types as dropdown (like Promobox) + collapsible platform cards
   ===================================================================== */
@media (max-width: 991.98px) {
    html body #main-tabs { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    html body #main-tabs > #first-tabs { order: 1; margin-bottom: 14px !important; }
    html body #main-tabs > .tab__dropdown:nth-child(1) { display: none !important; }
    html body #main-tabs > .tab__dropdown:nth-child(2) {
        display: block !important;
        order: 2;
        background: #fff;
        border-radius: 28px 28px 0 0;
        padding: 22px 20px 6px;
        margin: 0 !important;
    }
    html body #main-tabs > .tab__dropdown:nth-child(2) label {
        display: block; font-size: 15px; color: var(--pb-muted); margin: 0 0 8px; padding: 0; text-align: left;
    }
    html body #main-tabs > .tab__dropdown:nth-child(2) .dropdown { position: relative; }
    html body #main-tabs > .tab__dropdown:nth-child(2) .tab__dropdown-btn {
        display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; padding: 0 16px;
        background-color: #fff; border: 1px solid #d9d9df; border-radius: 14px; color: var(--pb-ink); font-size: 16px; text-align: left;
        box-shadow: none;
    }
    html body #main-tabs > .tab__dropdown:nth-child(2) .tab__dropdown-btn[aria-expanded="true"] { border-color: var(--pb-accent); box-shadow: 0 0 0 3px rgba(137, 92, 254, .16); }
    html body #main-tabs .tab__dropdown-btn__icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--pb-accent); font-size: 20px; flex: 0 0 28px; }
    html body #main-tabs .tab__dropdown-btn__label { flex: 1 1 auto; }
    html body #main-tabs > .tab__dropdown:nth-child(2) .dropdown-menu {
        width: 100%; margin-top: 8px !important; padding: 8px !important; border: 1px solid var(--pb-line) !important; border-radius: 16px !important;
        background: #fff !important; box-shadow: 0 24px 50px rgba(20, 10, 60, .22) !important; max-height: 60vh; overflow-y: auto;
    }
    html body #main-tabs > .tab__dropdown:nth-child(2) .dropdown-item {
        display: flex !important; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px !important; border-radius: 12px;
        color: var(--pb-ink) !important; font-size: 16px !important; white-space: normal;
    }
    html body #main-tabs > .tab__dropdown:nth-child(2) .dropdown-item:hover,
    html body #main-tabs > .tab__dropdown:nth-child(2) .dropdown-item:active { background: #f1f1f4 !important; }
    /* the long vertical type list is replaced by the dropdown */
    html body #Permotion { display: none !important; }
    html body #main-tabs > #backdrop_ { order: 3; }
    html body #cs-youtube #wrapper { border-radius: 0 0 28px 28px !important; padding-top: 12px !important; }
    html body #wrapper h3#order { display: none !important; }
    html body #cs-youtube.tab-container, html body #backdrop_ .tab-container#cs-youtube { gap: 0 !important; }
}

/* mobile: platform cards in "Popular services" collapse to their header; tap to open */
@media (max-width: 767.98px) {
    .pb-pop__item header { cursor: pointer; margin-bottom: 0; min-height: 52px; position: relative; padding-right: 44px; }
    .pb-pop__item header::after {
        content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
        width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 15px;
        color: var(--pb-muted); border-radius: 50%; background: #f3f1fa; transition: transform .3s ease, background .2s ease;
    }
    .pb-pop__item.is-open header::after { transform: translateY(-50%) rotate(180deg); background: var(--pb-tint); color: var(--pb-accent); }
    .pb-pop__item .pb-pop__links { max-height: 0; overflow: hidden; transition: max-height .45s ease, margin .3s ease; margin-top: 0; }
    .pb-pop__item.is-open .pb-pop__links { margin-top: 18px; }
    .pb-orb { display: none; }
    .pb-pop__item { padding: 14px 18px; }
    .pb-pop__item.is-open { padding-bottom: 22px; }
    .pb-pop__item--stack { min-height: 0; }
}

@media (max-width: 991.98px) {
    html body #main-tabs > .tab__dropdown:nth-child(2) { background: #fff !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
    html body #main-tabs > .tab__dropdown:nth-child(2)::before, html body #main-tabs > .tab__dropdown:nth-child(2)::after { display: none !important; }
    html body #main-tabs > .tab__dropdown:nth-child(2) label { font-weight: 400 !important; }
    html body #cs-youtube #wrapper, html body #Permotion { box-shadow: none !important; }
}

/* ---------------- MOBILE: header scrolls away with the page; platform cards match the other cards ---------------- */
@media (max-width: 991.98px) {
    html body header.Otaley-header { position: absolute !important; top: 0 !important; left: 0; width: 100% !important; }
}
@media (max-width: 767.98px) {
    .pb-pop__item { padding: 22px 24px !important; border-radius: var(--pb-r); }
    .pb-pop__item.is-open { padding-bottom: 26px !important; }
    .pb-pop__item header { min-height: 64px; padding-right: 52px; gap: 16px; }
    .pb-pop__ico { width: 56px; height: 56px; border-radius: 18px; flex: 0 0 56px; }
    .pb-pop__ico img { width: 30px; height: 30px; }
    .pb-pop__item h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
    .pb-pop__item header::after { right: 0; width: 40px; height: 40px; }
    .pb-pop__list, .pb-pop__list--stack { gap: 8px; }
    .pb-pop__more { margin-top: 8px; }
}

/* ---------------- ONE field style for the whole order widget ---------------- */
html body div#wrapper #product-form { padding-left: 0 !important; padding-right: 0 !important; }
html body div#wrapper #product-form select#package_type_id,
html body div#wrapper #product-form select.quantity-select,
html body div#wrapper #product-form input#company_link,
html body #main-tabs .tab__dropdown .tab__dropdown-btn,
html body #main-tabs > .tab__dropdown:nth-child(2) .tab__dropdown-btn {
    height: 54px !important;
    min-height: 54px;
    border: 1px solid #d9d9df !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    color: var(--pb-ink) !important;
    box-sizing: border-box;
}
html body div#wrapper #product-form select#package_type_id,
html body div#wrapper #product-form select.quantity-select { padding: 0 42px 0 16px !important; }
html body div#wrapper #product-form input#company_link { padding: 0 16px !important; }
html body #main-tabs > .tab__dropdown:nth-child(2) .tab__dropdown-btn { padding: 0 42px 0 14px !important; }
html body div#wrapper #product-form select:focus,
html body div#wrapper #product-form input#company_link:focus,
html body #main-tabs > .tab__dropdown:nth-child(2) .tab__dropdown-btn[aria-expanded="true"] {
    border-color: var(--pb-accent) !important;
    box-shadow: 0 0 0 3px rgba(137, 92, 254, .16) !important;
    outline: 0;
}
/* same label style everywhere in the widget */
html body #main-tabs > .tab__dropdown:nth-child(2) label,
html body #product-form label { font-size: 15px !important; font-weight: 400 !important; color: var(--pb-muted) !important; margin: 0 0 8px !important; line-height: 1.3; }
html body #product-form > div, html body #product-form #pro-quantity { margin-bottom: 14px; }
html body #product-form input#company_link { margin-bottom: 0; }
@media (max-width: 991.98px) {
    html body #cs-youtube #wrapper { padding: 14px 20px 28px !important; }
    html body #product-form { display: block; }
}

/* ---------------- SPA navigation ---------------- */
#spa-progress { position: fixed; z-index: 2000000; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #895cfe, #c3a8ff); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; box-shadow: 0 0 10px rgba(137, 92, 254, .6); }
.spa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#spa-main { outline: 0; transition: opacity .18s ease; }
html.spa-loading #spa-main { opacity: .55; }
@media (prefers-reduced-motion: reduce) { #spa-main { transition: none; } }

/* =====================================================================
   SUBPAGES IN THE NEW DESIGN: product SEO content, About, Reviews, shared CTA
   ===================================================================== */
/* ---- Reviews hero: dark like every other hero ---- */
html body .reviews-hero {
    background: var(--pb-bg) !important;
    background-image: radial-gradient(70% 60% at 50% 0%, rgba(140, 118, 200, .18), transparent 72%) !important;
    padding: 148px 0 72px !important;
    margin: 0 !important;
}
html body .reviews-hero h1 { font-size: clamp(34px, 5vw, 56px) !important; font-weight: 600 !important; letter-spacing: -.01em; }
html body .reviews-hero__subtitle { max-width: 720px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .8) !important; }
html body .reviews-summary { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 34px; border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
html body .reviews-summary__score { font-size: 54px; line-height: 1; font-weight: 600; color: #fff; letter-spacing: -.02em; }
html body .reviews-summary__stars { font-size: 18px; letter-spacing: 3px; }
html body .reviews-summary__count { font-size: 15px; color: rgba(255, 255, 255, .7); }
html body .reviews-page { background: var(--pb-page); padding: 56px 0 24px !important; }
html body .reviews-empty { color: var(--pb-muted); font-size: 18px; padding: 56px 0 !important; }
html body .reviews-page-card { background: #fff !important; border: 0 !important; border-radius: var(--pb-r) !important; padding: 28px !important; box-shadow: none !important; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
html body .reviews-page-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(60, 30, 140, .12) !important; }
html body .reviews-page-card__text { font-size: 16px; line-height: 1.6; color: #4a4a52 !important; }
html body .reviews-page-card__name { font-size: 16px; font-weight: 600; color: var(--pb-ink); }
html body .reviews-page-card__avatar { width: 40px; height: 40px; border-radius: 50%; }
html body .reviews-page-card__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--pb-tint); color: var(--pb-accent); font-weight: 600; }
html body .reviews-page-card__badge { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: var(--pb-tint); color: var(--pb-accent); font-weight: 500; }

/* ---- shared "Still have questions / Ready to grow" CTA card ---- */
html body .get-in-touch { padding: 8px 0 72px !important; background: transparent; }
html body .get-in-touch .container {
    flex-direction: column; text-align: center;
    background: linear-gradient(135deg, #25212f 0%, #3a3350 48%, #5b5079 100%) !important;
    border-radius: 32px !important; padding: 56px 32px !important; color: #fff; position: relative; overflow: hidden;
}
html body .get-in-touch .container::after { content: ""; position: absolute; right: -80px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(137, 92, 254, .28), transparent 66%); pointer-events: none; }
html body .get-in-touch .container > * { position: relative; z-index: 1; }
html body .get-in-touch h3, html body .get-in-touch h3.text-black { color: #fff !important; font-size: clamp(26px, 3.2vw, 38px) !important; font-weight: 600 !important; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; }
html body .get-in-touch p, html body .get-in-touch p.text-black { color: rgba(255, 255, 255, .82) !important; font-size: 17px !important; max-width: 560px; margin: 0 auto 26px !important; line-height: 1.5; }
html body .get-in-touch .row, html body .get-in-touch .col-md-12 { width: 100%; }
html body .get-in-touch-btn { display: flex; justify-content: center; }
html body .get-in-touch-btn a { width: auto !important; max-width: none !important; background: var(--pb-accent) !important; }
html body .get-in-touch-btn a:hover { background: #fff !important; color: var(--pb-accent-dark) !important; }

/* ---- Product page SEO text ---- */
html body .core-resources:has(.seo-content) {
    background: #fff !important; border-radius: 32px !important; padding: 56px 64px 40px !important;
    max-width: 1280px; margin: 56px auto 40px !important; box-shadow: none !important;
}
html body .core-resources:has(.seo-content) > .container { max-width: 900px !important; padding: 0 !important; }
html body .core-resources:has(.seo-content) .row { margin: 0; }
html body #core-resource-content { padding: 0 !important; border: 0 !important; text-align: left !important; }
html body .seo-content { padding: 0 !important; }
html body .seo-content h3, html body .seo-content h2, html body .seo-content h3.text-black {
    font-family: "Onest", sans-serif !important; font-size: clamp(22px, 2.4vw, 28px) !important; font-weight: 600 !important;
    letter-spacing: -.015em; line-height: 1.2; color: var(--pb-ink) !important; margin: 40px 0 14px !important; padding: 0 !important; border: 0 !important;
}
html body .seo-content h3:first-child { margin-top: 0 !important; }
html body .seo-content h3::before, html body .seo-content h2::before { display: none !important; }
html body .seo-content p, html body .seo-content p.text-black {
    margin: 0 0 16px !important; padding: 0 !important; max-width: none !important; width: auto !important;
    font-size: 17px !important; line-height: 1.7 !important; color: #4a4a52 !important; text-align: left !important;
}
html body .seo-content a, html body .seo-content strong a { color: var(--pb-accent) !important; font-weight: 500; text-decoration: none; }
html body .seo-content a:hover { text-decoration: underline; }
html body .seo-content ul, html body .seo-content ul.text-black {
    list-style: none; margin: 8px 0 20px !important; padding: 0 !important;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
html body .seo-content ul li {
    position: relative; margin: 0 !important; padding: 18px 20px 18px 58px !important;
    background: #faf9fe !important; border: 1px solid #ece7fb !important; border-radius: 20px !important;
    font-size: 15.5px; line-height: 1.55; color: #4a4a52 !important;
}
html body .seo-content ul li::before {
    content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 14px; color: #fff;
    background: linear-gradient(145deg, #b79bff, #7d52f0); box-shadow: 0 6px 12px rgba(137, 92, 254, .28);
}
html body .seo-content ul li strong { display: block; color: var(--pb-ink); font-weight: 600; margin-bottom: 2px; }

/* ---- About page ---- */
html body #about-us-page { background: var(--pb-bg) !important; background-image: radial-gradient(70% 50% at 50% 0%, rgba(140, 118, 200, .18), transparent 72%) !important; }
html body #about-us-page .social-media a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: #fff; border: 1px solid var(--pb-line); }
html body #about-us-page .img-fluid.rounded-circle { border: 3px solid var(--pb-tint); }
html body #about-us-page .col-md-6 > .d-flex { background: #faf9fe; border: 1px solid #ece7fb; border-radius: 24px; padding: 22px 24px; }
html body .core-resources:not(:has(.seo-content)) { background: transparent !important; box-shadow: none !important; padding: 56px 0 24px !important; max-width: 1280px; margin: 0 auto !important; width: calc(100% - 32px) !important; }
html body .core-resources:not(:has(.seo-content)) div#core-resource-content { text-align: center !important; margin-bottom: 36px; }
html body .core-resources:not(:has(.seo-content)) div#core-resource-content h2 { font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--pb-ink) !important; line-height: 1.12 !important; margin-bottom: 14px !important; }
html body .core-resources:not(:has(.seo-content)) div#core-resource-content p { font-size: 18px; color: var(--pb-muted) !important; max-width: 720px; margin: 0 auto; }
html body .core-resources:not(:has(.seo-content)) div#resource-grid { background: transparent !important; padding: 0 !important; width: 100%; border-radius: 0; }
html body .core-resources:not(:has(.seo-content)) div#resource-grid > .row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 !important; }
html body .core-resources:not(:has(.seo-content)) div#resource-grid > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; }
html body .core-resources:not(:has(.seo-content)) .resource-bx {
    background: #fff; border-radius: var(--pb-r); padding: 28px 28px 30px; height: 100%; transition: transform .25s ease, box-shadow .25s ease;
}
html body .core-resources:not(:has(.seo-content)) .resource-bx:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(60, 30, 140, .12); }
html body .core-resources:not(:has(.seo-content)) .resource-bx h3 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--pb-ink) !important; margin: 0 0 10px !important; letter-spacing: -.01em; }
html body .core-resources:not(:has(.seo-content)) .resource-bx p { font-size: 16px !important; line-height: 1.55 !important; color: var(--pb-muted) !important; }
html body .core-resources:not(:has(.seo-content)) .resource-img {
    width: 64px; height: 64px; border-radius: 22px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(150deg, #cdbbff 0%, #8f64ff 62%, #6f43e6 100%);
    box-shadow: 0 16px 30px rgba(137, 92, 254, .30), inset 0 -5px 10px rgba(80, 40, 190, .30), inset 0 2px 0 rgba(255, 255, 255, .55);
}
html body .core-resources:not(:has(.seo-content)) .resource-img svg { width: 32px !important; height: 32px !important; }
html body .core-resources:not(:has(.seo-content)) .resource-img svg path, html body .core-resources:not(:has(.seo-content)) .resource-img svg .s0 { fill: #fff !important; }

@media (max-width: 991.98px) {
    html body .core-resources:has(.seo-content) { padding: 36px 24px 28px !important; margin: 32px 16px 28px !important; border-radius: 28px !important; }
    html body .seo-content ul { grid-template-columns: 1fr; }
    html body .core-resources:not(:has(.seo-content)) div#resource-grid > .row { grid-template-columns: repeat(2, 1fr); }
    html body .reviews-hero { padding: 120px 0 56px !important; }
}
@media (max-width: 640px) {
    html body .core-resources:not(:has(.seo-content)) div#resource-grid > .row { grid-template-columns: 1fr; }
    html body .get-in-touch .container { padding: 40px 20px !important; border-radius: 26px !important; }
    html body .seo-content p { font-size: 16px !important; }
}

html body .core-resources:not(:has(.seo-content)) div#resource-grid { display: grid; gap: 8px; }
html body .core-resources:not(:has(.seo-content)) div#resource-grid > .row.mb-5 { margin-bottom: 0 !important; }

@media (max-width: 991.98px) { html body .seo-content ul, html body .seo-content ul.text-black { grid-template-columns: minmax(0, 1fr) !important; } html body .seo-content ul li { padding: 16px 16px 16px 54px !important; } }

/* error / alert modal: centered, rounded, same language as the rest */
html body .modal .modal-dialog { margin-top: 0; margin-bottom: 0; display: flex; align-items: center; min-height: calc(100% - 1rem); }
html body .modal .modal-content { border: 0; border-radius: 24px; box-shadow: 0 30px 80px rgba(10, 4, 30, .45); overflow: hidden; }
html body .modal .modal-header { border-bottom: 1px solid #eee; padding: 18px 22px; }
html body .modal .modal-title { font-weight: 600; font-size: 18px; }
html body .modal .modal-body { padding: 24px 22px 28px; text-align: center; }
html body .modal .btn-close { width: 36px; height: 36px; border-radius: 50%; background-size: 12px; opacity: .7; }
html body .modal .btn-close:hover { background-color: #f3f3f6; opacity: 1; }
html body .modal-backdrop.show { opacity: .6; }

/* platform strip: arrows when there are more platforms than fit (17 now) */
html body #first-tabs { position: relative !important; }
.ml-strip-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(20,20,24,.92); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.ml-strip-nav.is-on { display: inline-flex; }
.ml-strip-nav:hover { background: var(--pb-accent); }
.ml-strip-nav--prev { left: 6px; } .ml-strip-nav--next { right: 6px; }
@media (max-width: 991.98px) { .ml-strip-nav { display: none !important; } }

/* ---------------- 404 ---------------- */
.nf { position: relative; background: var(--pb-bg); background-image: radial-gradient(60% 55% at 50% 0%, rgba(140, 118, 200, .24), transparent 72%); padding: 150px 16px 96px; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.nf__in { position: relative; z-index: 1; max-width: 760px; width: 100%; }
.nf__code { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.4vw, 18px); font-size: clamp(110px, 20vw, 200px); font-weight: 700; line-height: .9; letter-spacing: -.05em; }
.nf__code span { background: linear-gradient(180deg, #e3d9ff 0%, #8f64ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__logo { width: .62em; height: .62em; flex: 0 0 auto; filter: drop-shadow(0 18px 36px rgba(137, 92, 254, .55)); animation: nfFloat 4.5s ease-in-out infinite; }
@keyframes nfFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .nf__logo { animation: none; } }
.nf h1 { color: #fff; font-size: clamp(28px, 4.4vw, 44px); font-weight: 600; letter-spacing: -.02em; margin: 28px 0 14px; line-height: 1.12; }
.nf p { color: rgba(255, 255, 255, .75); font-size: 18px; line-height: 1.55; max-width: 560px; margin: 0 auto 32px; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html body a.nf__ghost { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; text-decoration: none; font-size: 16px; font-weight: 500; transition: background .15s ease, color .15s ease; }
html body a.nf__ghost:hover { background: #fff; color: var(--pb-bg) !important; }
.nf__pop { margin-top: 56px; }
.nf__pop-t { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 16px; }
.nf__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
html body .nf__chips a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff !important; text-decoration: none; font-size: 15px; transition: background .15s ease, transform .15s ease; }
html body .nf__chips a:hover { background: rgba(137, 92, 254, .35); transform: translateY(-2px); }
.nf__chips img { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; background: #fff; padding: 2px; }
@media (max-width: 575px) { .nf { padding: 120px 16px 72px; } .nf__pop { margin-top: 40px; } }