/* Spectr IT light / dark tokens. Dark palette and ambient gradients
   follow https://spectr-it-tashkent.pages.dev/ (background #0b1220,
   glow blues / teal). Brand CTA stays #0d6efd. */

:root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --text-secondary: #334155;
    --muted: #64748b;
    --border: #e8eef6;
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --primary-soft: #eff6ff;
    --primary-border: #cfe2ff;
    --primary-glow: rgba(13, 110, 253, .18);
    --hero-radial: rgba(13, 110, 253, .06);
    --shadow: 0 8px 24px rgba(15, 23, 42, .05);
    --shadow-strong: 0 16px 40px rgba(15, 23, 42, .12);
    --on-primary: #ffffff;
    --input-bg: #ffffff;
    --overlay: rgba(15, 23, 42, .45);
    --accent: #0d6efd;
    --page-gutter: 16px;
}
@media (min-width: 576px) {
    :root { --page-gutter: 24px; }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-soft: #0e1628;
    --surface: #121b2e;
    --text: #edf3ff;
    --text-secondary: #c5d0e3;
    --muted: #8b9bb4;
    --border: rgba(118, 170, 255, .16);
    --primary: #0d6efd;
    --primary-hover: #3d7eff;
    --primary-soft: rgba(104, 154, 255, .16);
    --primary-border: rgba(104, 154, 255, .28);
    --primary-glow: rgba(33, 108, 255, .28);
    --hero-radial: rgba(33, 108, 255, .13);
    --shadow: 0 8px 24px rgba(2, 13, 36, .35);
    --shadow-strong: 0 18px 45px rgba(2, 13, 36, .45);
    --on-primary: #ffffff;
    --input-bg: #0f1728;
    --overlay: rgba(2, 8, 20, .62);
    --accent: #689aff;
}

html, body {
    background-color: var(--bg);
    color: var(--text);
}

/* 16px mobile / 24px tablet+ — Apple HIG and Material content inset. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: calc(var(--page-gutter) * 2);
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

::view-transition-old(root) {
    animation: none;
    z-index: 1;
    mix-blend-mode: normal;
}
::view-transition-new(root) {
    animation: spi-theme-wipe .55s cubic-bezier(.22, 1, .36, 1);
    z-index: 2;
    mix-blend-mode: normal;
}
@keyframes spi-theme-wipe {
    from { clip-path: circle(0 at var(--theme-x, 92%) var(--theme-y, 36px)); }
    to { clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 92%) var(--theme-y, 36px)); }
}

html.theme-animate,
html.theme-animate body {
    transition: background-color .45s ease, color .45s ease, background-image .45s ease;
}
html.theme-animate *,
html.theme-animate *::before,
html.theme-animate *::after {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
    html.theme-animate,
    html.theme-animate *,
    html.theme-animate *::before,
    html.theme-animate *::after { transition: none !important; }
}

html { background-color: var(--bg); }
body {
    background-color: transparent;
    background-image: none;
}

/* Landing-style ambient: network SVG (looks like a photo) + drifting glows. */
body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
}
body::before {
    inset: -3%;
    opacity: .58;
    background: url("../images/ambient-network.svg") 50% 0 / 1600px repeat-y;
}
body::after {
    inset: -12%;
    background:
        radial-gradient(at 86% 12%, rgba(23, 98, 245, .07), transparent 48%),
        radial-gradient(at 7% 77%, rgba(23, 98, 245, .04), transparent 44%);
    animation: site-ambient-drift 28s ease-in-out infinite alternate;
}
html[data-theme="dark"] body::before { opacity: .52; }
html[data-theme="dark"] body::after {
    background:
        radial-gradient(at 88% 12%, rgba(33, 108, 255, .13), transparent 38%),
        radial-gradient(at 12% 65%, rgba(41, 197, 218, .07), transparent 37%);
}
@media (max-width: 700px) {
    body::before {
        opacity: .62;
        background-position: 60% 0;
        background-size: 1000px;
    }
    html[data-theme="dark"] body::before { opacity: .44; }
}
@keyframes site-ambient-drift {
    from { transform: translate(-1.5%, -1%); }
    to { transform: translate(1.5%, 2%); }
}
@keyframes site-signal-drift {
    from { opacity: .72; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(12px) scale(1.06); }
}
@keyframes site-signal-orbit {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(18px, 8px); }
    50% { transform: translate(14px, 28px); }
    75% { transform: translate(-8px, 20px); }
}
@keyframes site-contact-drift {
    from { transform: translate(-8px, -6px); }
    to { transform: translate(12px, 8px); }
}
@media (prefers-reduced-motion: reduce) {
    body::after,
    .site-tarif-hero__card::before,
    .site-tarif-hero__card::after,
    #footer.site-footer::before,
    #footer.site-footer::after,
    #footer.site-footer > .site-footer__orbit { animation: none; }
}

#footer {
    position: relative;
    z-index: 1;
}

a { color: var(--accent); }
a:hover { color: var(--primary-hover); }

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(520px 280px at 50% 42%, var(--hero-radial), transparent 62%),
        var(--bg) !important;
    transition: opacity .45s ease, visibility .45s ease;
}
#preloader:before {
    display: none !important;
    content: none !important;
    animation: none !important;
}
#preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.site-preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.site-preloader__orb {
    position: relative;
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.site-preloader__ring,
.site-preloader__spark {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.site-preloader__ring {
    border: 2px solid transparent;
    -webkit-mask: radial-gradient(circle, transparent 50px, #000 51px);
    mask: radial-gradient(circle, transparent 50px, #000 51px);
}
.site-preloader__ring--a {
    inset: 0;
    border-top-color: #0d6efd;
    border-right-color: rgba(13, 110, 253, .18);
    animation: site-preloader-spin 1.05s linear infinite;
}
.site-preloader__ring--b {
    inset: 10px;
    border-bottom-color: #e11d48;
    border-left-color: rgba(225, 29, 72, .16);
    animation: site-preloader-spin 1.7s linear infinite reverse;
}
.site-preloader__spark {
    inset: -4px;
    background: conic-gradient(
        from 0deg,
        transparent 0 72%,
        #0d6efd 86%,
        #ffffff 93%,
        transparent 100%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: site-preloader-spin 1.35s linear infinite;
    opacity: .9;
}
.site-preloader__mark {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 10px 28px var(--primary-glow),
        0 0 0 1px var(--primary-border);
    display: grid;
    place-items: center;
    animation: site-preloader-breathe 1.7s ease-in-out infinite;
}
.site-preloader__mark img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}
.site-preloader__word {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .34em;
    color: var(--text);
    text-indent: .34em;
    animation: site-preloader-pulse 1.4s ease-in-out infinite;
}
@keyframes site-preloader-spin {
    to { transform: rotate(360deg); }
}
@keyframes site-preloader-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}
@keyframes site-preloader-pulse {
    0%, 100% { opacity: .42; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .site-preloader__ring,
    .site-preloader__spark,
    .site-preloader__mark,
    .site-preloader__word {
        animation: none !important;
    }
}
.back-to-top {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
}

.site-theme {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
    height: 42px;
    flex-shrink: 0;
}
.site-theme button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 11px;
    cursor: pointer;
    line-height: 1;
}
html[data-theme="light"] .site-theme button[data-theme-value="light"],
html[data-theme="dark"] .site-theme button[data-theme-value="dark"],
.site-theme button.is-active {
    display: none !important;
}
.site-theme button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.site-theme.is-switching {
    animation: spi-toggle-pop .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes spi-toggle-pop {
    0% { transform: scale(1); }
    40% { transform: scale(.98); }
    100% { transform: scale(1); }
}

.site-lang {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
    height: 42px;
    flex-shrink: 0;
}
.site-lang button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 0 11px;
    cursor: pointer;
    line-height: 1;
}
html[lang^="ru"] .site-lang button[value="ru"],
html[lang^="uz"] .site-lang button[value="uz"],
.site-lang button.is-active {
    display: none !important;
}
.site-lang button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.site-header__tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Chrome */
#header.site-header,
#header.site-header.fixed-top,
#header.site-header.is-stuck {
    position: fixed !important;
    top: 0;
    height: auto !important;
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
    box-shadow: none;
}
#header.site-header.is-stuck { box-shadow: var(--shadow); }
.site-header__bar { background: var(--surface) !important; }
.site-topbar { background: #333; }
html[data-theme="dark"] .site-topbar {
    background: #0a1424;
    border-bottom: 1px solid var(--border);
}
.site-header__brand { color: var(--text) !important; }
.site-header__brand:hover { color: var(--primary) !important; }
#header.site-header .navbar > ul > li > a,
#header.site-header .navbar > ul > li > a:focus { color: var(--text-secondary) !important; }
#header.site-header .navbar > ul > li > a:hover,
#header.site-header .navbar > ul > li:hover > a,
#header.site-header .navbar > ul > li > a.active {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
}
#header.site-header .navbar .dropdown ul {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-strong) !important;
}
#header.site-header .navbar .dropdown ul a { color: var(--text-secondary) !important; }
#header.site-header .navbar .dropdown ul a:hover,
#header.site-header .navbar .dropdown ul li:hover > a {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
}
#header.site-header .mobile-nav-toggle { color: var(--text); }
#header.site-header .mobile-nav-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
#header.site-header .navbar-mobile > ul {
    background: var(--surface) !important;
}
#header.site-header .navbar-mobile .dropdown ul {
    background: var(--bg-soft) !important;
}

.site-slider { background: transparent !important; }
.site-slider__carousel {
    background: var(--bg-soft);
    border-color: var(--border) !important;
}
html[data-theme="dark"] .site-slider__nav {
    background: rgba(18, 27, 46, .88) !important;
    color: var(--text);
}
html[data-theme="dark"] .site-slider__nav:hover {
    background: #0d6efd !important;
    color: #fff !important;
}

#info-topbar.site-connect,
.site-connect { background: transparent !important; }
.site-connect__chip {
    background: var(--primary-soft) !important;
    color: var(--accent) !important;
}
.site-connect__chip:hover {
    background: var(--primary-border) !important;
    color: var(--primary-hover) !important;
}

#connect .modal-content,
#connect .site-connect-modal {
    background: var(--surface);
    color: var(--text);
}
#connect .modal-header { border-bottom-color: var(--border) !important; }
#connect .modal-title { color: var(--text) !important; }
#connect .form-control,
#connect .form-select,
#connect .input-group-text,
.site-connect-form .form-control,
.site-connect-form .form-select,
.site-connect-form .input-group-text {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.site-connect-form__picker {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}
.site-connect-form__picker.is-filled { color: var(--text) !important; }
.site-tariff-picker { background: var(--bg-soft) !important; }
.site-tariff-picker__head {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); opacity: .7; }

#footer.site-footer {
    isolation: isolate;
    overflow: hidden;
    color: var(--text-secondary) !important;
    border-top-color: var(--border) !important;
    background: linear-gradient(180deg, #eef5ff, #e8f7fa) !important;
}
html[data-theme="dark"] #footer.site-footer {
    background: radial-gradient(at 100% 0, #234c74 0%, #142743 62%) !important;
}
#footer.site-footer::before,
#footer.site-footer::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
#footer.site-footer::before {
    inset: -16px;
    opacity: .22;
    background: url("../images/ambient-network.svg") 100% center / 1200px no-repeat;
    animation: site-contact-drift 24s ease-in-out infinite alternate;
}
html[data-theme="dark"] #footer.site-footer::before { opacity: .3; }
#footer.site-footer::after {
    top: -240px;
    right: -60px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(13, 110, 253, .16);
    box-shadow:
        0 0 0 32px rgba(13, 110, 253, .04),
        0 0 0 64px rgba(13, 110, 253, .03),
        0 0 0 96px rgba(13, 110, 253, .02);
    animation: site-signal-drift 12s ease-in-out infinite alternate;
}
html[data-theme="dark"] #footer.site-footer::after {
    border-color: rgba(162, 220, 255, .145);
    box-shadow:
        0 0 0 32px rgba(162, 220, 255, .03),
        0 0 0 64px rgba(162, 220, 255, .024),
        0 0 0 96px rgba(162, 220, 255, .016);
}
#footer.site-footer > * { position: relative; z-index: 1; }
#footer.site-footer > .site-footer__orbit {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 48px;
    right: 88px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0d6efd;
    box-shadow:
        0 0 20px rgba(13, 110, 253, .32),
        64px 88px 0 -2px rgba(13, 110, 253, .2),
        -96px 120px 0 -2px rgba(32, 157, 182, .18);
    animation: site-signal-orbit 20s ease-in-out infinite;
}
html[data-theme="dark"] #footer.site-footer > .site-footer__orbit {
    background: #a2ebff;
    box-shadow:
        0 0 24px rgba(162, 235, 255, .5),
        64px 88px 0 -2px rgba(180, 242, 255, .38),
        -96px 120px 0 -2px rgba(194, 234, 255, .26);
}
.site-footer__main {
    background: transparent !important;
}
.site-footer__brand { color: var(--text) !important; }
.site-footer__title { color: var(--text) !important; }
.site-footer__tagline,
.site-footer__copy { color: var(--muted) !important; }
.site-footer__links a { color: var(--text-secondary) !important; }
.site-footer__links a:hover { color: var(--primary) !important; }
.site-footer__bottom {
    background: transparent !important;
    border-top-color: var(--border) !important;
}
.site-footer__social a {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}
.office-hours {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.office-hours__status { background: var(--bg-soft) !important; color: var(--text); }
html[data-theme="dark"] .office-hours.is-open .office-hours__status { background: rgba(16, 185, 129, .12) !important; }
html[data-theme="dark"] .office-hours.is-lunch .office-hours__status { background: rgba(245, 158, 11, .12) !important; }
html[data-theme="dark"] .office-hours.is-closed .office-hours__status { background: rgba(239, 68, 68, .12) !important; }

/* Restyled public pages — fills stay transparent so body ambient shows through. */
.site-faq,
.site-about,
.site-contacts,
.site-news-page,
.site-news-article,
.site-coverage,
.site-tariffs,
.site-quick,
.site-perks,
.site-pay,
.site-page,
.site-about-more {
    color: var(--text);
}
.site-faq__title,
.site-about__title,
.site-contacts__title,
.site-news-page__title,
.site-news-article__title,
.site-coverage__title,
.site-page__title,
.site-section__title,
.site-about-more__title,
.site-conditions__title { color: var(--text) !important; }
.site-faq__lead,
.site-about__lead,
.site-coverage__lead,
.site-conditions__lead { color: var(--muted) !important; }

.site-conditions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.site-conditions__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 22px 22px 18px;
    color: var(--text);
}
.site-conditions__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: #0d6efd;
    font-size: 18px;
    margin-bottom: 12px;
}
.site-conditions__card h2 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
.site-conditions__card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}
.site-conditions__card li {
    position: relative;
    padding: 8px 0 8px 22px;
    border-top: 1px solid var(--border);
}
.site-conditions__card li:first-child { border-top: 0; padding-top: 0; }
.site-conditions__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
}
.site-conditions__card li:first-child::before { top: 8px; }
@media (max-width: 767px) {
    .site-conditions__grid { grid-template-columns: 1fr; }
}

.site-faq__item,
.site-about__card,
.site-contacts__card,
.site-coverage__frame,
.site-coverage-result,
.site-conditions__card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text);
}

/* Tiles / news: landing page-links look — solid fill + faint static ring, no SVG. */
.site-quick__card,
.site-news .icon-box,
.site-news-card,
.site-news-article__card {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    background: var(--surface) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text);
}
.site-quick__card::before,
.site-news .icon-box::before,
.site-news-card::before,
.site-news-article__card::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -95px;
    right: -95px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(43, 123, 255, .02);
    border: 1px solid rgba(43, 123, 255, .08);
    box-shadow: 0 0 0 24px rgba(43, 123, 255, .016);
}
html[data-theme="dark"] .site-quick__card::before,
html[data-theme="dark"] .site-news .icon-box::before,
html[data-theme="dark"] .site-news-card::before,
html[data-theme="dark"] .site-news-article__card::before {
    background: rgba(117, 177, 255, .024);
    border-color: rgba(117, 177, 255, .12);
    box-shadow: 0 0 0 24px rgba(117, 177, 255, .016);
}
.site-quick__card::after,
.site-news .icon-box::after,
.site-news-card::after,
.site-news-article__card::after { content: none; }
.site-quick__card > *,
.site-news .icon-box > *,
.site-news-card > *,
.site-news-article__card > * { position: relative; z-index: 1; }

.site-news-article { padding: 28px 0 64px; }
.site-news-article__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0d6efd;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin: 0 0 18px;
}
.site-news-article__back:hover { color: #0b5ed7; }
.site-news-article__card {
    max-width: 820px;
    border-radius: 22px;
    padding: 28px 24px 32px;
}
.site-news-article__title {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 0 0 18px;
    line-height: 1.25;
}
.site-news-article__hero {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 0 20px;
}
.site-news-article__body {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.65;
}
.site-news-article__body h2,
.site-news-article__body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    margin: 28px 0 10px;
}
.site-news-article__body p { margin: 0 0 12px; }
.site-news-article__body ul,
.site-news-article__body ol {
    margin: 0 0 12px;
    padding-left: 1.2em;
}
.site-news-article__body a { color: #0d6efd; font-weight: 600; }
.site-news-article__body a:hover { color: #0b5ed7; }
.site-news-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 8px 0 16px;
}
@media (max-width: 575px) {
    .site-news-article { padding: 20px 0 48px; }
    .site-news-article__card { padding: 20px; border-radius: 18px; }
}

.site-slide-article.is-split {
    display: grid;
    gap: 22px;
}
.site-slide-article__media {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    border-radius: 16px;
    margin: 0;
}
.site-slide-article__copy { min-width: 0; }
@media (min-width: 768px) {
    .site-slide-article.is-split {
        max-width: 1080px;
        grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
        align-items: start;
        gap: 32px;
    }
    .site-slide-article.is-split .site-slide-article__media {
        grid-column: 1;
        grid-row: 1;
    }
    .site-slide-article.is-split .site-slide-article__copy {
        grid-column: 2;
        grid-row: 1;
    }
}
@media (max-width: 767px) {
    .site-slide-article.is-split .site-slide-article__media {
        grid-row: 1;
        max-height: 280px;
    }
    .site-slide-article.is-split .site-slide-article__copy { grid-row: 2; }
}

/* Landing-style loyalty / annual / connection cards under tariffs. */
.site-perks {
    padding: 8px 0 40px;
}
.site-perks__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.site-perks__card {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 130px;
    padding: 20px;
    text-decoration: none !important;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(22, 51, 89, .024);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.site-perks__card::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -95px;
    right: -95px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(43, 123, 255, .02);
    border: 1px solid rgba(43, 123, 255, .08);
    box-shadow: 0 0 0 24px rgba(43, 123, 255, .016);
}
html[data-theme="dark"] .site-perks__card::before {
    background: rgba(117, 177, 255, .024);
    border-color: rgba(117, 177, 255, .12);
    box-shadow: 0 0 0 24px rgba(117, 177, 255, .016);
}
.site-perks__mark,
.site-perks__copy { position: relative; z-index: 1; }
.site-perks__mark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 72px;
    height: 72px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 18px;
    line-height: 1;
    transition: transform .25s, background .25s;
}
.site-perks__mark strong {
    letter-spacing: -.8px;
    font-size: 25px;
    font-weight: 700;
}
.site-perks__mark small {
    color: inherit;
    font-size: 11px;
    line-height: 1.2;
}
.site-perks__copy b {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--text);
}
.site-perks__copy small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    overflow-wrap: break-word;
}
.site-perks__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 34px 0 0;
}
.site-perks__benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 14px;
    color: var(--text-secondary);
}
.site-perks__icon {
    display: inline-flex;
    flex: 0 0 34px;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}
.site-perks__icon i { font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
    .site-perks__card:hover {
        border-color: #8ab2f4;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(22, 51, 89, .063);
        color: var(--text);
    }
    .site-perks__card:hover .site-perks__mark {
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        transform: translateY(-2px) scale(1.035);
    }
}
.site-perks__card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}
@media (max-width: 700px) {
    .site-perks { padding: 4px 0 30px; }
    .site-perks__links {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .site-perks__card {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 118px;
        padding: 18px;
    }
    .site-perks__mark {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
    .site-perks__mark strong { font-size: 23px; }
    .site-perks__copy b { font-size: 17px; }
    .site-perks__benefits {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-perks__card,
    .site-perks__mark { transition: none; }
    .site-perks__card:hover,
    .site-perks__card:hover .site-perks__mark { transform: none; }
}

/* Payment logos are dark-on-transparent — they need a light plate, not a section fill. */
.site-pay__card {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .site-pay__card {
    border-color: rgba(255, 255, 255, .14) !important;
}
.site-faq__q { background: var(--surface) !important; color: var(--text) !important; }
.site-faq__q:hover,
.site-faq__q:not(.collapsed) { color: var(--primary) !important; }
.site-faq__a { color: var(--text-secondary) !important; }
.site-faq__icon { background: var(--primary-soft) !important; color: var(--primary) !important; }

.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem var(--primary-glow);
}

.modal-content {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* Tariff cards across homepage / tarif / connect picker */
.neomorph-box,
.single-pricing.neomorph-box {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.single-pricing .top-box,
.single-pricing .bottom-box {
    background: var(--surface) !important;
}
.single-pricing .top-heading h3 { color: var(--text) !important; }
html[data-theme="dark"] .sus {
    background: var(--bg-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .single-pricing .top-box p,
html[data-theme="dark"] .single-pricing .bottom-box .package-info-list ul li,
html[data-theme="dark"] .single-pricing .montly-price span,
html[data-theme="dark"] .single-pricing .yearly-price span {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .single-pricing .bottom-box {
    background-color: var(--bg-soft) !important;
}
html[data-theme="dark"] .spi-plan .spi-plan__body,
html[data-theme="dark"] .spi-plan.single-pricing .bottom-box,
html[data-theme="dark"] .spi-plan.single-pricing .top-box {
    background-color: var(--surface) !important;
}

#tarif.section-bg,
.section-bg,
.team.section-bg,
.site-faq,
.site-news-article,
.site-news-page,
.site-conditions,
.site-contacts,
.site-about,
.site-about-more,
.site-coverage,
.site-tariffs,
.site-news,
.site-page,
.site-quick,
.site-pay,
.site-tarif-hero,
.site-slider,
#info-topbar.site-connect {
    background-color: transparent !important;
    background-image: none !important;
    border-top: 0 !important;
}
.tariff-group {
    background: var(--surface) !important;
}
.tariff-group__header:hover,
.tariff-group.is-open .tariff-group__header {
    background: var(--primary-soft) !important;
}
.tariff-group__name { color: var(--text) !important; }

.fdb-block { background: var(--bg) !important; color: var(--text); }

html[data-theme="dark"] .check-in { background-color: #3b4a62; }
html[data-theme="dark"] .check-in:checked { background-color: var(--primary); }

html[data-theme="dark"] .swiper-pagination-bullet { background: var(--muted); }
html[data-theme="dark"] .swiper-pagination-bullet-active { background: var(--primary); }

html[data-theme="dark"] .g-recaptcha { filter: none; }

/* Leftover / vendor pages */
html[data-theme="dark"] #main { background: transparent; color: var(--text); }
html[data-theme="dark"] .breadcrumbs {
    background: var(--bg-soft) !important;
    color: var(--text);
}
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title h3,
html[data-theme="dark"] .fdb-block h1,
html[data-theme="dark"] .fdb-block h2,
html[data-theme="dark"] .fdb-block h3,
html[data-theme="dark"] .fdb-block h4 {
    color: var(--text);
}
html[data-theme="dark"] .fdb-block p,
html[data-theme="dark"] .fdb-block li,
html[data-theme="dark"] .text-h3 {
    color: var(--text-secondary);
}
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--text) !important; }
html[data-theme="dark"] .text-reset { color: var(--text) !important; }
html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--bg-soft) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .table { color: var(--text); --bs-table-bg: transparent; }
html[data-theme="dark"] .dropdown-menu {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .dropdown-item { color: var(--text-secondary); }
html[data-theme="dark"] .dropdown-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
html[data-theme="dark"] .accordion-item {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .accordion-button {
    background: var(--surface);
    color: var(--text);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: var(--primary-soft);
    color: var(--primary);
}
html[data-theme="dark"] .accordion-button::after { filter: invert(1); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .alert {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .pagination .page-link {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--border);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .single-pricing p,
html[data-theme="dark"] .single-pricing li,
html[data-theme="dark"] .package-info-list,
html[data-theme="dark"] .base-price {
    color: var(--text-secondary);
}
html[data-theme="dark"] .btn-outline-primary {
    color: var(--accent);
    border-color: var(--primary-border);
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--primary);
    color: var(--on-primary);
}
html[data-theme="dark"] #info-topbar:not(.site-connect) {
    background: var(--bg-soft);
    color: var(--text);
}
html[data-theme="dark"] .faq .faq-list li,
html[data-theme="dark"] .contact .php-email-form,
html[data-theme="dark"] .testimonials .testimonial-item {
    background: var(--surface);
    color: var(--text);
}
html[data-theme="dark"] .portfolio .portfolio-wrap {
    background: var(--surface);
}
html[data-theme="dark"] .stocks-card,
html[data-theme="dark"] .post,
html[data-theme="dark"] .blog .entry {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}