/* ===== CABINET VISUAL SYSTEM OVERRIDES ===== */

.landing-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Arial Black', 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(200px, 30vw, 500px);
    color: rgba(255, 255, 255, 0.02);
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
    filter: blur(8px);
}
:root {
    --bg: #0A0A0A;
    --accent: #9B6DFF;
    --accent-hover: #EEAAFF;
    --accent-cyan: #00D4E0;
    --text-primary: #E8E8E8;
    --text-secondary: #A0A0A0;
    --text-muted: #707070;
    --text-disabled: #383838;
    --border-subtle: rgba(255, 255, 255, 0.022);
    --border-default: rgba(255, 255, 255, 0.045);
    --border-strong: rgba(255, 255, 255, 0.09);
    --card-bg: rgba(255, 255, 255, 0.012);
    --card-border: rgba(255, 255, 255, 0.022);
    --card-blur: 14px;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-padding-top: 86px;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
}

body::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at top right, rgba(155, 109, 255, 0.13), transparent 48%),
        radial-gradient(ellipse at 44% 16%, rgba(0, 212, 224, 0.035), transparent 42%);
}

body::after {
    inset: 10px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
    /* backdrop-filter UDALEN — был fullscreen blur (inset:10px = весь viewport)
       который пере-блюрился на каждый scroll frame. Visual эффект — тонкая
       glass-frame border 10px от края, blur background был visually почти не
       заметен под opacity:0.018 background. Border + box-shadow остаются. */
}

::selection {
    background: rgba(155, 109, 255, 0.30);
    color: #fff;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(155, 109, 255, 0.30);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 109, 255, 0.55);
}

.noise-overlay {
    opacity: 0.012;
}

.glow-blob {
    inset: auto;
    border-radius: 0;
    filter: blur(30px);
    opacity: 0.58;
    transform: none;
}

.glow-blob-1 {
    top: -12px;
    left: 0;
    right: auto;
    width: min(760px, 86vw);
    height: min(620px, 70vh);
    background:
        radial-gradient(ellipse at 20% 8%, rgba(155, 109, 255, 0.09), transparent 42%),
        radial-gradient(ellipse at 82% 26%, rgba(0, 212, 224, 0.045), transparent 38%);
    animation: none;
}

.glow-blob-2 {
    right: 0;
    bottom: 12%;
    width: min(680px, 80vw);
    height: min(520px, 58vh);
    background:
        radial-gradient(ellipse at 70% 20%, rgba(238, 170, 255, 0.045), transparent 42%),
        radial-gradient(ellipse at 32% 76%, rgba(155, 109, 255, 0.07), transparent 44%);
    animation: none;
}

.watermark {
    color: rgba(255, 255, 255, 0.02);
    opacity: 0.9;
    animation: tide-watermark-drift 14s ease-in-out infinite;
}

@keyframes tide-watermark-drift {
    0%,
    100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translate3d(calc(-50% - 10px), calc(-50% + 6px), 0) scale(1.01);
        opacity: 1;
    }
}

.navbar {
    top: 10px;
    left: 10px;
    right: 10px;
    border-bottom: 0;
    background: transparent;
}

.navbar.scrolled {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-inner {
    height: 54px;
    padding: 0 14px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar.scrolled .nav-inner {
    background: rgba(255, 255, 255, 0.026);
}

.nav-links {
    gap: 24px;
}

.nav-link {
    color: var(--text-muted);
    font-weight: 600;
    transition: color 180ms ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

.lang-switch,
.mobile-menu-inner .lang-row {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
}

.lang-btn {
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    transition:
        transform 0.22s var(--spring),
        background-color 180ms ease,
        color 180ms ease;
}

.lang-btn.active {
    color: #D4C5FF;
    background: rgba(155, 109, 255, 0.22);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.lang-btn:active {
    transform: scale(0.88);
}

.btn-primary,
.btn-ghost {
    border-radius: 10px;
    font-weight: 700;
    transition:
        transform 0.22s var(--spring),
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms ease,
        color 180ms ease;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-link:focus-visible,
.footer-link:focus-visible,
.faq-toggle:focus-visible,
.lang-btn:focus-visible {
    outline: 2px solid rgba(155, 109, 255, 0.55);
    outline-offset: 3px;
}

.btn-primary {
    background: var(--accent);
    box-shadow: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(155, 109, 255, 0.35);
}

.btn-primary:active,
.btn-ghost:active {
    transform: scale(0.94);
}

.btn-ghost {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-primary);
}

.btn-ghost:hover {
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
}

.hero {
    width: min(1120px, calc(100% - 40px));
    min-height: 86svh;
    margin: 0 auto;
    padding: 132px 0 84px;
    text-align: left;
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.78fr);
    align-items: center;
    gap: clamp(34px, 6vw, 74px);
    width: 100%;
    max-width: none;
    position: relative;
    z-index: 1;
}

.hero-copy {
    min-width: 0;
}

.hero-kicker {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.032);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-kicker span:first-child {
    color: var(--accent);
}

.hero-kicker span + span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-kicker span + span::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 10px;
    vertical-align: -1px;
    background: rgba(255, 255, 255, 0.12);
}

.hero h1,
.section-title {
    letter-spacing: 0;
}

.hero h1 {
    max-width: 620px;
    font-size: 58px;
    line-height: 1.07;
    margin-bottom: 18px;
}

.hero p,
.section-sub,
.feature-card p,
.step p,
.pricing-card .plan-features li,
.faq-answer-inner p,
.footer-desc,
.footer-link {
    color: var(--text-muted);
}

.hero p {
    font-size: 16px;
    color: var(--text-secondary);
}

.hero-copy > p {
    max-width: 590px;
    margin: 0;
}

.hero-ctas {
    justify-content: flex-start;
    margin-top: 30px;
    margin-bottom: 0;
}

.hero-note {
    margin-top: 14px !important;
    color: var(--text-muted);
}

.accent-text {
    color: var(--accent);
}

.section {
    z-index: 1;
}

.section-title {
    font-size: 36px;
    line-height: 1.12;
}

.section-sub {
    font-size: 15px;
}

.divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
}

.spirit-img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(0 0 24px rgba(155, 109, 255, 0.6));
    animation: tide-float 4.8s ease-in-out infinite;
}

.hero-copy .spirit-img {
    width: 116px;
    margin: 0 0 22px;
}

.hero-visual {
    position: relative;
    min-width: 0;
}

.hero-visual::before,
.hero-visual::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(34px);
}

.hero-visual::before {
    display: none;
}

.hero-visual::after {
    right: -8%;
    bottom: 4%;
    width: 220px;
    height: 220px;
    background: rgba(0, 212, 224, 0.052);
}

.cabinet-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 34px 96px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cabinet-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 76% 0%, rgba(155, 109, 255, 0.12), transparent 44%),
        radial-gradient(ellipse at 16% 24%, rgba(0, 212, 224, 0.045), transparent 36%);
    pointer-events: none;
}

.preview-watermark {
    position: absolute;
    right: -22px;
    bottom: 10px;
    z-index: 0;
    color: rgba(255, 255, 255, 0.022);
    font-size: 116px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    user-select: none;
}

.preview-sidebar,
.preview-main {
    position: relative;
    z-index: 1;
}

.preview-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 12px;
    background: rgba(0, 0, 0, 0.10);
}

.preview-logo {
    width: 34px;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 72% 45%, transparent 0 37%, rgba(155, 109, 255, 0.94) 39% 48%, transparent 50%),
        linear-gradient(120deg, rgba(155, 109, 255, 0.9), rgba(238, 170, 255, 0.72));
    filter: drop-shadow(0 0 16px rgba(155, 109, 255, 0.42));
}

.preview-nav {
    width: 42px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.preview-nav.active {
    background: linear-gradient(135deg, rgba(155, 109, 255, 0.18), rgba(155, 109, 255, 0.055));
    box-shadow:
        inset 1px 0 0 rgba(155, 109, 255, 0.86),
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 0 24px rgba(155, 109, 255, 0.16);
}

.preview-nav.short {
    width: 32px;
}

.preview-plan {
    display: grid;
    gap: 5px;
    width: 52px;
    margin-top: auto;
    padding: 10px 8px;
    border: 1px solid rgba(155, 109, 255, 0.16);
    border-radius: 14px;
    background: rgba(155, 109, 255, 0.055);
    text-align: center;
}

.preview-plan span {
    height: 4px;
    border-radius: 999px;
    background: rgba(155, 109, 255, 0.34);
}

.preview-plan strong {
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
}

.preview-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.preview-chip {
    flex: 0 0 auto;
    border: 1px solid rgba(155, 109, 255, 0.18);
    border-radius: 999px;
    background: rgba(155, 109, 255, 0.075);
    padding: 5px 9px;
    color: #CFC5FF;
    font-size: 11px;
    line-height: 1;
}

.preview-card,
.preview-stat,
.preview-status {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.014);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.preview-primary {
    position: relative;
    display: flex;
    min-height: 154px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
}

.preview-primary::before {
    content: '';
    position: absolute;
    inset: -20% -12% auto 28%;
    height: 170px;
    background: radial-gradient(ellipse at center, rgba(155, 109, 255, 0.18), transparent 66%);
    pointer-events: none;
}

.preview-primary > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.preview-eyebrow {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.preview-primary strong {
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.05;
}

.preview-primary span:last-child,
.preview-status span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.preview-spirit {
    position: relative;
    z-index: 1;
    width: 92px;
    flex: 0 0 auto;
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(0 0 24px rgba(155, 109, 255, 0.6));
    animation: tide-float 4.8s ease-in-out infinite;
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.preview-stat {
    display: grid;
    min-width: 0;
    gap: 6px;
    border-radius: 14px;
    padding: 12px 10px;
}

.preview-stat span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.preview-stat strong {
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1;
}

.preview-status {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    border-radius: 16px;
    padding: 13px 14px;
}

.preview-status strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.2;
}

.preview-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.08), 0 0 22px rgba(74, 222, 128, 0.28);
}

@keyframes tide-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -10px, 0) rotate(-1.2deg);
    }
}

.glass-card,
.trust-bar,
.step-num,
.plan-badge,
.mobile-cta {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
}

.glass-card {
    border-radius: 16px;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.glass-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 20px 62px rgba(0, 0, 0, 0.14);
}

.feature-card {
    padding: 26px;
}

.feature-icon,
.step-num {
    border: 1px solid rgba(155, 109, 255, 0.20);
    background: rgba(155, 109, 255, 0.08);
    color: var(--accent);
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.feature-icon svg {
    color: var(--accent);
}

.feature-card h3,
.step h3,
.faq-toggle span {
    color: var(--text-primary);
}

.steps {
    gap: 0;
}

.step-num {
    border-radius: 14px;
    font-size: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 0 18px rgba(155, 109, 255, 0.16);
}

.step-line {
    height: 2px;
    background-image: linear-gradient(90deg,
            rgba(155, 109, 255, 0),
            rgba(155, 109, 255, 0.95),
            rgba(0, 212, 224, 0.95),
            rgba(155, 109, 255, 0));
    background-size: 120px 100%;
    box-shadow: 0 0 18px rgba(155, 109, 255, 0.32);
    animation: tide-signal-flow 2.6s linear infinite;
}

.step-line::after {
    display: none;
}

@keyframes tide-signal-flow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 0;
    }
}

.trust-bar {
    border-radius: 18px;
    padding: 18px 8px;
}

.trust-num,
.pricing-card .plan-price,
.check-icon {
    color: var(--accent);
}

.trust-label {
    color: var(--text-muted);
}

.trust-sep {
    background: rgba(255, 255, 255, 0.055);
}

.pricing-card {
    padding: 26px;
}

.pricing-best {
    border-color: rgba(155, 109, 255, 0.22);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.08), transparent 52%),
        rgba(255, 255, 255, 0.014);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 0 42px rgba(155, 109, 255, 0.08);
    transform: none;
}

.pricing-best:hover {
    transform: translateY(-1px);
    border-color: rgba(155, 109, 255, 0.32);
}

.plan-badge {
    color: rgba(155, 109, 255, 0.78);
    border-color: rgba(155, 109, 255, 0.10);
    background: rgba(155, 109, 255, 0.024);
    border-radius: 999px;
}

.plan-badge-best {
    color: #D4C5FF;
    border-color: rgba(155, 109, 255, 0.22);
    background: rgba(155, 109, 255, 0.16);
}

.plan-save {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.08);
}

.faq-item {
    border-radius: 16px;
}

.faq-toggle {
    transition: background-color 220ms ease;
}

.faq-toggle:hover {
    background: rgba(255, 255, 255, 0.018);
}

.faq-chevron {
    color: var(--text-muted);
}

.footer {
    border-top-color: var(--card-border);
    background: transparent;
}

.footer-bottom {
    border-top-color: var(--card-border);
}

.footer-col-title {
    color: var(--text-muted);
}

.footer-link:hover {
    color: var(--accent);
}

.mobile-cta {
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 18px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.012)),
        rgba(10, 10, 10, 0.78);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.mobile-menu {
    margin-top: 0;
    box-shadow: none;
}

.mobile-menu-inner {
    padding: 6px 0 14px !important;
}

.mobile-menu-nav-link {
    color: rgba(255, 255, 255, 0.6);
}

.mobile-menu-nav-link:hover {
    color: #fff;
}

/* ===== CABINET-GRADE SECTION SYSTEM ===== */
.divider {
    max-width: min(1120px, calc(100% - 40px));
    opacity: 0.72;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent),
        linear-gradient(90deg, transparent 18%, rgba(155, 109, 255, 0.18), transparent 82%);
}

.section {
    isolation: isolate;
    padding: 96px 20px;
}

.section::before {
    content: '';
    position: absolute;
    inset: 28px 0 auto;
    z-index: -1;
    height: min(520px, 62vh);
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 12%, rgba(155, 109, 255, 0.072), transparent 44%),
        radial-gradient(ellipse at 78% 18%, rgba(0, 212, 224, 0.026), transparent 38%);
    filter: blur(28px);
    opacity: 0.72;
}

.section-inner {
    width: min(1120px, 100%);
    position: relative;
}

.section-title {
    max-width: 760px;
    margin-inline: auto;
    font-size: 38px;
    font-weight: 850;
}

.section-sub {
    margin-bottom: 42px;
}

.section-title::after {
    content: '';
    display: block;
    width: 38px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(155, 109, 255, 0.96), rgba(155, 109, 255, 0.72), transparent);
    box-shadow: 0 0 18px rgba(155, 109, 255, 0.30);
}

.glass-card,
.trust-bar,
.faq-item,
.pricing-card {
    position: relative;
    overflow: hidden;
}

.glass-card::before,
.pricing-card::before,
.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 14% 0%, rgba(155, 109, 255, 0.075), transparent 42%),
        radial-gradient(ellipse at 96% 24%, rgba(0, 212, 224, 0.027), transparent 32%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.glass-card > *,
.pricing-card > *,
.faq-item > * {
    position: relative;
    z-index: 1;
}

.glass-card:hover::before,
.pricing-card:hover::before,
.faq-item:hover::before {
    opacity: 1;
}

.glass-card {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.009));
}

.glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.082);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 24px 70px rgba(0, 0, 0, 0.24),
        0 0 42px rgba(155, 109, 255, 0.055);
}

/* Trust strip mirrors the cabinet KPI strip instead of reading like a banner. */
.trust-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1120px;
    margin-inline: auto;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.052);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.017), rgba(255, 255, 255, 0.008)),
        rgba(10, 10, 10, 0.48);
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.trust-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 104px;
    padding: 21px 16px 18px;
    transition: background-color 240ms ease;
}

.trust-item:hover {
    background: rgba(255, 255, 255, 0.018);
}

.trust-num {
    display: block;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
    text-shadow: 0 0 22px rgba(155, 109, 255, 0.26);
}

.trust-label {
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

.trust-sep {
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.055);
}

body > .hero + .divider + .section {
    padding: 32px 20px 78px !important;
}

#features .section-inner,
#pricing .section-inner,
#faq .section-inner {
    max-width: 1120px;
}

.features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.feature-card:nth-child(1) {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.009));
}

.feature-card:nth-child(6) {
    background:
        radial-gradient(ellipse at 82% 0%, rgba(0, 212, 224, 0.052), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.021), rgba(255, 255, 255, 0.008));
}

.feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(238, 170, 255, 0.18), transparent 64%),
        rgba(155, 109, 255, 0.085);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 0 26px rgba(155, 109, 255, 0.10);
}

.feature-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: 0;
}

.feature-card p {
    margin: 0;
    line-height: 1.64;
}

.feature-card p + p {
    margin-top: auto !important;
    padding-top: 14px;
}

/* How section becomes a calm cabinet workflow panel. */
.steps {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}

.step {
    flex: 1 1 0;
    max-width: none;
    min-height: 214px;
    padding: 24px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008)),
        rgba(255, 255, 255, 0.006);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    text-align: left;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        background-color 260ms ease;
}

.step:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.075);
    background-color: rgba(255, 255, 255, 0.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 22px 62px rgba(0, 0, 0, 0.18);
}

.step-num {
    width: 42px;
    height: 42px;
    margin: 0 0 18px;
    border-radius: 14px;
    font-size: 15px;
}

.step h3 {
    font-size: 17px;
    line-height: 1.28;
}

.step p {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.step-line {
    position: relative;
    flex: 0 0 52px;
    align-self: center;
    width: 52px;
    margin: 0 -22px;
    transform: translateY(20px);
    z-index: 2;
}

/* Pricing gets denser, cleaner, and more product-like. */
.pricing-grid,
.pricing-row-2 {
    gap: 12px;
}

.pricing-card {
    display: flex;
    min-height: 430px;
    flex-direction: column;
    border-radius: 20px;
    padding: 24px;
    border-color: rgba(255, 255, 255, 0.038);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.019), rgba(255, 255, 255, 0.008)),
        rgba(255, 255, 255, 0.006);
}

.pricing-card .plan-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.pricing-card .plan-price {
    margin-top: 8px;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.96;
}

.pricing-card .plan-per,
.pricing-card .plan-old {
    color: var(--text-muted);
}

.pricing-card .plan-features {
    display: grid;
    gap: 0;
    margin: 22px 0 24px;
}

.pricing-card .plan-features li {
    min-height: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    padding: 9px 0;
    color: var(--text-secondary);
}

.pricing-card .plan-features li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.pricing-card .btn-primary {
    margin-top: auto;
}

.pricing-best {
    border-color: rgba(155, 109, 255, 0.30);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.18), transparent 48%),
        radial-gradient(ellipse at 110% 82%, rgba(0, 212, 224, 0.055), transparent 42%),
        rgba(255, 255, 255, 0.014);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 0 0 1px rgba(155, 109, 255, 0.05),
        0 26px 80px rgba(155, 109, 255, 0.10);
}

.pricing-best:hover {
    transform: translateY(-4px);
    border-color: rgba(155, 109, 255, 0.42);
}

.plan-badge,
.plan-save {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.pricing-note {
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.012);
    color: var(--text-muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
}

.faq-list {
    display: grid;
    max-width: 920px;
    gap: 10px;
}

.faq-item {
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.006)),
        rgba(255, 255, 255, 0.006);
}

.faq-toggle {
    min-height: 64px;
    padding: 20px 22px;
}

.faq-toggle span {
    font-size: 15px;
    letter-spacing: 0;
}

.faq-chevron {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.018);
}

.faq-answer-inner {
    padding: 0 22px 22px;
}

.faq-answer-inner p {
    color: var(--text-secondary);
}

body > .section:last-of-type {
    padding-top: 72px !important;
    padding-bottom: 96px !important;
}

body > .section:last-of-type .section-inner {
    max-width: 900px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.052);
    border-radius: 24px;
    padding: 50px 28px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.13), transparent 54%),
        radial-gradient(ellipse at 100% 90%, rgba(0, 212, 224, 0.045), transparent 40%),
        rgba(255, 255, 255, 0.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 32px 92px rgba(0, 0, 0, 0.24);
}

body > .section:last-of-type .section-title {
    font-size: 36px;
}

.footer {
    margin: 0 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.052);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.006)),
        rgba(10, 10, 10, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.016),
        0 26px 72px rgba(0, 0, 0, 0.22);
}

.footer-inner {
    max-width: 1120px;
}

.footer-logo {
    width: fit-content;
    border: 1px solid rgba(155, 109, 255, 0.10);
    border-radius: 14px;
    padding: 8px 12px;
    background: rgba(155, 109, 255, 0.035);
}

.footer-desc {
    margin-top: 16px;
}

.footer-col-title {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
}

.footer-link {
    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.footer-link:hover {
    transform: translateX(2px);
    opacity: 1;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
}

.footer-bottom div:first-child {
    color: var(--text-secondary);
}

.reveal {
    transform: translateY(12px) scale(0.985);
    filter: blur(2px);
    transition:
        opacity 0.52s var(--ease-out),
        transform 0.52s var(--ease-out),
        filter 0.52s var(--ease-out);
}

.reveal.visible {
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ===== DESIGN REVIEW POLISH PASS ===== */
.navbar {
    top: 20px;
}

.nav-inner {
    border: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
        rgba(12, 12, 15, 0.50);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.018);
}

.navbar.scrolled .nav-inner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.014)),
        rgba(12, 12, 15, 0.62);
}

.lang-switch,
.mobile-menu-inner .lang-row {
    border: 0;
    background: rgba(0, 0, 0, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 8px 22px rgba(0, 0, 0, 0.18);
}

.lang-btn.active {
    box-shadow:
        0 6px 18px rgba(155, 109, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.footer-logo {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.footer-logo img {
    filter:
        brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%)
        drop-shadow(0 0 22px rgba(155, 109, 255, 0.35));
    transition:
        transform 260ms var(--spring),
        filter 260ms ease;
}

.footer-logo:hover img {
    transform: translateY(-1px);
    filter:
        brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(108%)
        drop-shadow(0 0 30px rgba(155, 109, 255, 0.50));
}

@media (min-width: 981px) {
    .hero {
        width: min(1160px, calc(100% - 56px));
        min-height: 90svh;
        padding: 134px 0 72px;
    }

    .hero-content {
        grid-template-columns: minmax(430px, 0.92fr) minmax(480px, 0.88fr);
        gap: clamp(10px, 3vw, 42px);
        align-items: center;
    }

    .hero-content::before,
    .hero-content::after {
        content: '';
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }

    .hero-content::before {
        inset: -34px -38px -48px;
        border: 1px solid rgba(255, 255, 255, 0.040);
        border-radius: 42px;
        background:
            radial-gradient(ellipse at 24% 30%, rgba(255, 255, 255, 0.030), transparent 46%),
            radial-gradient(ellipse at 76% 28%, rgba(155, 109, 255, 0.075), transparent 48%),
            linear-gradient(120deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.004));
        filter: blur(0);
        opacity: 0.95;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.020),
            0 32px 120px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(20px) saturate(145%);
        -webkit-backdrop-filter: blur(20px) saturate(145%);
        animation: tide-stage-breathe 10s ease-in-out infinite;
    }

    .hero-content::after {
        inset: 54px 48% 48px 18px;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.060), transparent 68%),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 40px);
        mask-image: linear-gradient(90deg, transparent, #000 16%, #000 52%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 52%, transparent);
        opacity: 0.18;
        animation: tide-grid-drift 12s linear infinite;
    }

    .hero-copy {
        position: relative;
        z-index: 3;
        overflow: visible;
        border: none;
        border-radius: 0;
        padding: 20px 0 40px;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hero-copy::before { display: none; }

    .hero-copy::after { display: none; }

    .hero-copy .spirit-img {
        display: none;
    }

    .hero-kicker {
        border: 0;
        margin-bottom: 20px;
        padding: 7px 12px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
            rgba(0, 0, 0, 0.20);
        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.020);
    }

    .hero h1 {
        max-width: 620px;
        font-size: 46px;
        line-height: 0.96;
        text-wrap: balance;
    }

    .hero h1 .accent-text {
        background: linear-gradient(110deg, #9B6DFF 0%, #C8AAFF 34%, #9B6DFF 66%, #EEAAFF 100%);
        background-size: 220% 100%;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 0 0 34px rgba(155, 109, 255, 0.20);
        animation: tide-title-shimmer 8s ease-in-out infinite;
    }

    .hero-copy > p {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.72;
    }

    .hero-ctas {
        gap: 12px;
        margin-top: 28px;
    }

    .hero-visual {
        z-index: 4;
        margin-left: -34px;
        transform: perspective(1200px) translateY(26px) rotateY(-4deg) rotateX(1.2deg);
        transform-origin: center left;
    }

    .hero-visual::before {
        display: none;
    }

    .hero-visual::after {
        right: 12px;
        bottom: -34px;
        width: 174px;
        height: 60px;
        border: 1px solid rgba(255, 255, 255, 0.040);
        border-radius: 20px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.012)),
            rgba(10, 10, 10, 0.24);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.028),
            0 22px 58px rgba(0, 0, 0, 0.24);
        filter: none;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        animation: tide-glass-chip-b 10.5s ease-in-out infinite;
    }

    .cabinet-preview {
        min-height: 462px;
        border-radius: 28px;
        border-color: rgba(255, 255, 255, 0.075);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.015)),
            rgba(9, 9, 12, 0.42);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.038),
            inset 0 -1px 0 rgba(255, 255, 255, 0.012),
            0 38px 120px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(28px) saturate(155%);
        -webkit-backdrop-filter: blur(28px) saturate(155%);
        transform: translate3d(0, 0, 0);
        animation: tide-preview-float 8.5s ease-in-out infinite;
    }

    .cabinet-preview::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.050) 48%, transparent 62%),
            radial-gradient(ellipse at 68% 18%, rgba(255, 255, 255, 0.035), transparent 40%);
        transform: translateX(-36%);
        opacity: 0.58;
        pointer-events: none;
        animation: tide-preview-sheen 9s ease-in-out infinite;
    }

    .preview-card,
    .preview-stat,
    .preview-status {
        border-color: rgba(255, 255, 255, 0.052);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012)),
            rgba(255, 255, 255, 0.010);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .preview-primary {
        min-height: 166px;
    }

    .preview-dot {
        animation: tide-dot-pulse 2.8s ease-in-out infinite;
    }

    #features .section-inner {
        max-width: 1160px;
    }

    .features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: auto;
        min-height: 246px;
        border-radius: 24px;
        padding: 26px;
        background:
            radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.082), transparent 42%),
            radial-gradient(ellipse at 100% 100%, rgba(0, 212, 224, 0.032), transparent 38%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.020), rgba(255, 255, 255, 0.007));
    }

    .feature-card:hover {
        transform: translateY(-3px);
    }

    .feature-card::after {
        content: '';
        position: absolute;
        left: 26px;
        right: 26px;
        bottom: 22px;
        height: 1px;
        background: linear-gradient(90deg, rgba(155, 109, 255, 0.34), rgba(0, 212, 224, 0.16), transparent);
        opacity: 0.42;
        pointer-events: none;
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 24px;
        border: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(238, 170, 255, 0.24), transparent 62%),
            rgba(155, 109, 255, 0.11);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 16px 36px rgba(155, 109, 255, 0.10);
    }

    .feature-card h3 {
        font-size: 19px;
    }

    .feature-card p {
        max-width: 36ch;
        line-height: 1.72;
    }

    .steps {
        gap: 14px;
    }

    .step {
        border-color: rgba(255, 255, 255, 0.036);
        border-radius: 22px;
        background:
            radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.070), transparent 44%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.007));
    }

    .step-line {
        flex: 0 0 34px;
        width: 34px;
        height: 1px;
        margin: 0 -2px;
        transform: translateY(22px);
        background: linear-gradient(90deg, transparent, rgba(155, 109, 255, 0.46), rgba(0, 212, 224, 0.22), transparent);
        background-size: auto;
        box-shadow: none;
        animation: none;
        opacity: 0.72;
    }

    .step-line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(155, 109, 255, 0.70);
        box-shadow: 0 0 14px rgba(155, 109, 255, 0.28);
        transform: translate(-50%, -50%);
    }
}

@keyframes tide-stage-breathe {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.86;
    }

    50% {
        transform: translate3d(10px, -8px, 0) scale(1.012);
        opacity: 1;
    }
}

@keyframes tide-grid-drift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 0, 0 76px;
    }
}

@keyframes tide-mascot-orbit {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    35% {
        transform: translate3d(8px, -9px, 0) rotate(-2deg);
    }

    70% {
        transform: translate3d(-5px, 5px, 0) rotate(1deg);
    }
}

@keyframes tide-title-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes tide-glass-chip-a {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(10px, -7px, 0);
        opacity: 0.92;
    }
}

@keyframes tide-glass-chip-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.66;
    }

    50% {
        transform: translate3d(-8px, 8px, 0);
        opacity: 0.86;
    }
}

@keyframes tide-orb-drift-a {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(18px, 12px, 0);
    }
}

@keyframes tide-orb-drift-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-14px, -10px, 0);
    }
}

@keyframes tide-preview-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes tide-preview-sheen {
    0%,
    100% {
        transform: translateX(-42%);
        opacity: 0;
    }

    45%,
    58% {
        opacity: 0.58;
    }

    72% {
        transform: translateX(36%);
        opacity: 0;
    }
}

@keyframes tide-dot-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.08), 0 0 22px rgba(74, 222, 128, 0.28);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.10), 0 0 30px rgba(74, 222, 128, 0.36);
    }
}

@media (max-width: 1023px) {
    body::after {
        inset: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 980px) {
    .hero {
        width: min(680px, calc(100% - 32px));
        min-height: auto;
        padding: 120px 0 62px;
        text-align: center;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-copy .spirit-img,
    .hero-kicker {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-copy > p {
        margin: 0 auto;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 500px);
        margin: 0 auto;
    }

    .cabinet-preview {
        grid-template-columns: 68px minmax(0, 1fr);
        min-height: 356px;
        text-align: left;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: span 1;
    }

    .feature-card:nth-child(1) {
        grid-column: 1 / -1;
    }

    .steps {
        flex-direction: column;
    }

    .step-line {
        display: none;
    }

    .step {
        width: 100%;
        min-height: 0;
    }

    .pricing-grid,
    .pricing-row-2 {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .noise-overlay {
        width: 100vw !important;
        max-width: 100vw;
        overflow: hidden;
    }

    .glow-blob,
    .watermark {
        contain: paint;
    }

    .navbar {
        top: 8px;
        left: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }

    .navbar.scrolled {
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }

    .nav-inner {
        height: 50px;
        padding: 0 12px 0 14px;
        border-bottom-color: transparent;
        border-radius: 18px;
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.015);
    }

    .mobile-menu:not(.open) {
        margin-top: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .mobile-menu.open {
        margin-top: 8px;
    }

    .hero {
        min-height: auto;
        width: min(430px, calc(100% - 32px));
        padding-top: 88px;
        padding-bottom: 30px;
        overflow: hidden;
    }

    .hero-content {
        gap: 18px;
        overflow: hidden;
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 31px;
        line-height: 1.08;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.48;
    }

    .hero-kicker {
        max-width: 100%;
        gap: 8px;
        margin-bottom: 12px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .hero-copy .spirit-img {
        width: 76px;
        margin-bottom: 10px;
    }

    .hero-ctas {
        gap: 10px;
        margin-top: 18px;
    }

    .hero .btn-primary,
    .hero .btn-ghost {
        min-height: 46px;
        padding: 12px 18px;
        border-radius: 13px;
    }

    .hero-note {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.45;
    }

    .cabinet-preview {
        grid-template-columns: 1fr;
        min-height: 264px;
        border-radius: 20px;
        overflow: hidden;
    }

    .preview-sidebar {
        display: none;
    }

    .preview-main {
        gap: 8px;
        padding: 12px;
    }

    .preview-header {
        font-size: 11px;
    }

    .preview-chip {
        padding: 4px 8px;
        font-size: 10px;
    }

    .preview-watermark {
        right: -12px;
        bottom: 2px;
        font-size: 70px;
    }

    .preview-primary {
        min-height: 104px;
        padding: 12px;
        border-radius: 16px;
        overflow: hidden;
    }

    .preview-primary > div {
        gap: 4px;
    }

    .preview-eyebrow {
        font-size: 9px;
    }

    .preview-primary strong {
        font-size: 17px;
    }

    .preview-primary span:last-child {
        font-size: 10px;
        line-height: 1.3;
    }

    .preview-spirit {
        width: 58px;
        flex: 0 0 auto;
    }

    .preview-metrics {
        gap: 8px;
    }

    .preview-stat {
        padding: 8px;
        border-radius: 12px;
    }

    .preview-stat span {
        font-size: 8px;
    }

    .preview-stat strong {
        font-size: 14px;
    }

    .preview-status {
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 13px;
    }

    .preview-status strong {
        font-size: 12px;
    }

    .section-title {
        font-size: 30px;
    }

    .section {
        padding: 70px 16px !important;
    }

    body > .hero + .divider + .section {
        padding: 12px 16px 48px !important;
    }

    body > .section:last-of-type {
        padding: 52px 16px 68px !important;
    }

    body > .section:last-of-type .section-inner {
        border-radius: 18px;
        padding: 28px 16px;
    }

    body > .section:last-of-type .section-title {
        font-size: 28px;
        line-height: 1.12;
    }

    body > .section:last-of-type .reveal[style*="margin-top:32px"] {
        margin-top: 22px !important;
    }

    body > .section:last-of-type .btn-primary {
        width: min(100%, 286px) !important;
        min-height: 52px;
        justify-content: center;
        gap: 8px;
        padding: 0 18px !important;
        border-radius: 15px;
        font-size: 14px !important;
        line-height: 1;
        white-space: nowrap;
    }

    body > .section:last-of-type .btn-primary svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    body > .section:last-of-type p {
        font-size: 12px !important;
        line-height: 1.45;
    }

    .section-sub {
        margin-bottom: 30px;
    }

    .mobile-cta {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: min(calc(100vw - 20px), calc(100% - 20px));
        max-width: calc(100vw - 20px);
        bottom: max(10px, env(safe-area-inset-bottom));
        padding: 8px;
        border-radius: 16px;
    }

    .mobile-cta .btn-primary {
        min-height: 44px;
        border-radius: 12px;
        padding: 12px 16px;
    }

    #how.section {
        padding: 70px 16px 82px !important;
    }

    #how .section-inner {
        width: min(430px, 100%);
    }

    #how .section-title {
        max-width: 100%;
    }

    #how .section-sub {
        margin-bottom: 28px;
    }

    #how .steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 12px !important;
    }

    #how .step {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
        text-align: left !important;
        border-radius: 20px;
        transform: none !important;
    }

    #how .step:hover {
        transform: none !important;
    }

    #how .step-num {
        grid-row: 1 / span 2;
        width: 42px;
        height: 42px;
        margin: 0 !important;
    }

    #how .step h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.25;
    }

    #how .step p {
        grid-column: 2;
        margin: 6px 0 0;
        font-size: 14px;
        line-height: 1.55;
    }

    #how .step-line {
        display: none !important;
    }

    #how .reveal[style*="text-align:center"] {
        margin-top: 24px !important;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: span 1;
        min-height: 0;
    }

    .feature-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
        padding: 16px 18px;
        border-radius: 18px;
    }

    .feature-card::after {
        display: none;
    }

    .feature-card .feature-icon {
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 14px;
    }

    .feature-card h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.25;
        align-self: center;
    }

    .feature-card p {
        grid-column: 1 / -1;
        margin: 4px 0 0;
        max-width: none;
        font-size: 14px;
        line-height: 1.46;
    }

    .feature-card p + p {
        margin-top: 8px !important;
        padding-top: 0;
    }

    .pricing-grid,
    .pricing-row-2 {
        gap: 10px;
    }

    .pricing-card {
        min-height: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .pricing-card > [style*="justify-content:space-between"] {
        margin-bottom: 10px !important;
    }

    .pricing-card > [style*="margin-bottom:0.5rem"] {
        margin-bottom: 6px !important;
    }

    .pricing-card .plan-label {
        font-size: 10px;
    }

    .pricing-card .plan-price {
        margin-top: 6px;
        font-size: 32px;
        line-height: 1.06;
    }

    .pricing-card .plan-per,
    .pricing-card .plan-old {
        font-size: 12px;
    }

    .pricing-card .plan-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 14px 0 16px;
    }

    .pricing-card .plan-features li {
        min-height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.044);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.012);
        gap: 8px;
        padding: 7px 9px;
        font-size: 12px;
        line-height: 1.25;
    }

    .pricing-card .plan-features li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.044);
    }

    .pricing-card .check-icon {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    .pricing-card .btn-primary {
        min-height: 44px;
        padding: 12px 18px;
        border-radius: 12px;
    }

    .plan-badge,
    .plan-save {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .trust-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
        border-radius: 18px;
    }

    .trust-sep {
        display: none;
    }

    .trust-item {
        min-height: 78px;
        padding: 12px 6px 10px;
    }

    .trust-num {
        font-size: 25px;
    }

    .trust-label {
        font-size: 8px;
        line-height: 1.2;
    }

    #faq.section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    #faq .section-sub {
        display: none;
    }

    #faq .section-title::after {
        margin-top: 14px;
    }

    .faq-list {
        gap: 8px;
    }

    .faq-item {
        border-radius: 14px;
    }

    .faq-toggle {
        min-height: 52px;
        padding: 14px 16px;
    }

    .faq-toggle span {
        font-size: 14px;
        line-height: 1.25;
    }

    .faq-chevron {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .faq-answer-inner {
        padding: 0 16px 16px;
    }

    .faq-answer-inner p {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .footer {
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

@media (max-width: 480px) {
    .btn-primary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .hero-ctas {
        width: 100%;
    }

    .hero-kicker span + span {
        display: none;
    }

    .hero-kicker span + span::before {
        display: none;
    }

    .preview-status span {
        display: none;
    }

    .trust-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trust-item:last-child {
        grid-column: auto;
    }

    .trust-item {
        min-height: 72px;
        padding: 11px 5px 9px;
    }

    .trust-num {
        font-size: 23px;
    }

    .trust-label {
        font-size: 7.5px;
    }

    .section-title {
        font-size: 28px;
    }

    .pricing-note {
        padding: 12px 14px;
    }

    .feature-card {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        padding: 15px 16px;
    }

    .feature-card .feature-icon {
        width: 40px;
        height: 40px;
    }

    .feature-card p {
        line-height: 1.44;
    }

    .pricing-card {
        padding: 16px;
    }

    .pricing-card .plan-price {
        font-size: 30px;
    }

    .pricing-card .plan-features {
        margin: 12px 0 14px;
    }

    .pricing-card .plan-features li {
        min-height: 32px;
        padding: 6px 8px;
    }

    #how.section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #how .step {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px 17px !important;
    }

    #how .step-num {
        grid-row: auto;
        margin-bottom: 12px !important;
    }

    #how .step p {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .watermark,
    .spirit-img,
    .hero-content::before,
    .hero-content::after,
    .hero-visual::before,
    .hero-visual::after,
    .preview-spirit,
    .cabinet-preview,
    .cabinet-preview::after,
    .preview-dot,
    .step-line,
    .reveal,
    .btn-primary,
    .btn-ghost,
    .glass-card,
    .pricing-card,
    .faq-item,
    .step,
    .lang-btn {
        animation: none;
        transition: none;
    }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS (2026-05-02)
   Дизайн НЕ меняем — только хинты браузеру + дешёвые альтернативы.
   Цель: устранить scroll jank без визуальных изменений.

   Что делается:
   - reveal animation: фильтр blur при появлении заменён на чистый translate+opacity
     (filter blur — самое дорогое для GPU; визуально на полсекунды эффект почти
     неотличим, но FPS на скролле взлетает в 3-5×)
   - infinite background animations теперь явно promoted на свой compositor layer
     через will-change: transform, чтобы они НЕ триггерили repaint парента
   - content-visibility: auto на FAQ, How и Pricing секциях — браузер пропускает
     layout/paint этих секций пока они вне viewport (Chromium), graceful degrade
     в Safari/Firefox (просто игнорируется)
   - paint containment на heavy фоновых elements — изолирует их repaint от соседей
   - hover transitions с transform/box-shadow получили will-change только при hover
============================================================================= */

/* 1) Reveal animation БЕЗ filter blur — самая большая победа.
      ~80 .reveal элементов ранее анимировали filter blur, что блокирует GPU.
      will-change УБРАН с .reveal — overuse на 80 элементах создавал 80 GPU
      слоёв и расходовал видеопамять (MDN: will-change overuse = perf regression).
      Plain CSS transition без compositor hint вполне справляется. */
.reveal {
    filter: none !important;
    transition:
        opacity 0.52s var(--ease-out),
        transform 0.52s var(--ease-out) !important;
}

.reveal.visible {
    filter: none !important;
}

/* 2) Compositor promotion ТОЛЬКО для critical fixed-position infinite-anim
      элементов которые реально animate. translateZ(0) уже даёт GPU layer без
      will-change overhead. Removed: spirit-img, preview-spirit, step-line,
      preview-dot, cabinet-preview::after — they are inline elements, не нужно
      их promotion. */
.glow-blob,
.watermark {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* cabinet-preview ТОЛЬКО получает translateZ — without will-change. */
.cabinet-preview {
    transform: translateZ(0);
}

/* 3) Изоляция paint для тяжёлых фоновых слоёв — браузер не пересчитывает
      их при изменениях соседних элементов. */
.glow-blob,
.watermark,
.noise-overlay,
.landing-watermark {
    contain: layout paint style;
}

/* 4) content-visibility на секции ниже viewport — Chromium-only оптимизация,
      пропускает render крупных секций пока они не видимы. Other browsers
      просто игнорируют — без regression. contain-intrinsic-size резервирует
      placeholder layout, чтобы scrollbar не дёргался при появлении контента.
      NOTE: footer НЕ включаем — JS читает footer.offsetTop для mobile-cta
      logic, а с content-visibility auto offsetTop становится приближённым
      и mobile-cta может скрываться слишком рано. */
#features,
#how,
#pricing,
#faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* 5) Mobile (<768px): убираем самые тяжёлые backdrop-filter, которые
      реально незаметны на маленьком экране, но iOS Safari на них умирает.
      body::after — фуллскрин blur(14px) на инсете 10px, переписываем
      в обычный фон без backdrop-filter (визуально дельта <2%). */
@media (max-width: 768px) {
    body::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Заменяем стеклянный effect на статичный градиент-затемнение,
           который выглядит почти идентично на маленьком экране */
        background: rgba(255, 255, 255, 0.012);
    }

    /* Reduce hero stage backdrop-filter on mobile (huge win on iOS Safari) */
    .hero-content::before {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .cabinet-preview {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .preview-card,
    .preview-stat,
    .preview-status {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Glass card backdrop-filter снизим на mobile с 14px до 6px —
       визуально 95% такой же эффект, perf ~2× быстрее */
    :root {
        --card-blur: 6px;
    }

    /* Step-line shimmer — animation можно отключить на mobile, она
       визуально фоновая и почти не заметна на маленьком экране */
    .step-line {
        animation: none !important;
        background: linear-gradient(90deg, var(--accent), rgba(155, 109, 255, 0.2)) !important;
    }
}

/* 6) Mobile <480px — самые маломощные устройства, ещё агрессивнее. */
@media (max-width: 480px) {
    /* Watermark (50vw текст × blur(8px)) на маленьком экране почти не виден,
       drop animation глаз не ловит — выключаем animation, оставляем static */
    .watermark,
    .landing-watermark {
        animation: none !important;
    }

    /* Spirit float animation — оставляем (это hero focal point), но
       снижаем frequency через cubic-bezier который меньше раз в секунду меняет */

    /* Title shimmer на mobile отключается (background-position animation
       на тексте = repaint каждого глифа каждый frame) */
    .hero h1 .accent-text {
        animation: none !important;
        background-position: 0% 50% !important;
    }
}

/* (NOTE: body-level `contain` removed — потенциально создаёт новый
   containing block для position:fixed элементов и ломает navbar/mobile-cta
   pinning. Для нашего use case win нет, риск есть.) */

/* =============================================================================
   PERFORMANCE WAVE 2 (2026-05-02 night) — desktop hero/cabinet-preview lag fix
   Owner reported lag specifically on hero "TIDE Control / Web Cabinet preview"
   card. Root cause: 5 nested backdrop-filter elements inside an already-blurred
   parent + tide-dot-pulse animating box-shadow (paint-bound).

   Все правки ниже визуально неотличимы (вложенный backdrop-filter рисуется на
   уже размытой поверхности parent — он не добавляет видимого blur), но
   убирают катастрофическую composition cost.
============================================================================= */

/* 7) Inner preview cards: drop backdrop-filter ON DESKTOP TOO.
      Эти 5 elements (preview-card, 3× preview-stat, preview-status) лежат
      внутри .cabinet-preview которая уже имеет backdrop-filter:blur(16-28px).
      Вложенный backdrop-filter рисует blur НА УЖЕ размытой поверхности
      родителя — визуальной разницы 0, perf cost catastrophic (5× recompute
      на каждый scroll). */
.preview-card,
.preview-stat,
.preview-status {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 8) Snizhem outer cabinet-preview blur 28px → 18px на desktop.
      Между 18 и 28 разница на dark UI ≈ 2-3% яркости — почти неотличимо.
      Compositing cost backdrop-filter растёт нелинейно с blur radius:
      blur(18) ≈ 40% cheaper than blur(28). */
@media (min-width: 1024px) {
    .cabinet-preview {
        backdrop-filter: blur(18px) saturate(155%);
        -webkit-backdrop-filter: blur(18px) saturate(155%);
    }
}

/* 9) tide-dot-pulse animates box-shadow (paint-bound) infinitely on
      .preview-dot. Replace with ::before pseudo-overlay that animates
      opacity+transform (compositor-only, ~10× cheaper). Visually
      indistinguishable — green halo still pulses, just rendered via
      a separate composite layer instead of repainting parent. */
.preview-dot {
    /* Cancel original keyframes — switch to pseudo-overlay technique */
    animation: none !important;
    position: relative;
}

.preview-dot::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.32) 0%, rgba(74, 222, 128, 0.10) 52%, transparent 70%);
    animation: tide-dot-pulse-cheap 2.8s ease-in-out infinite;
    pointer-events: none;
    /* Force own GPU layer so parent never repaints */
    will-change: opacity, transform;
    transform: translateZ(0);
}

@keyframes tide-dot-pulse-cheap {
    0%, 100% {
        opacity: 0.55;
        transform: translateZ(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(0) scale(1.18);
    }
}

/* 10) tide-stage-breathe анимирует scale(1.012) — крошечный скейл (1.2%)
       заставляет браузер пересчитывать backdrop-filter parent'а на каждый
       frame. Убираем scale, оставляем translate+opacity (визуально
       перемещение 10×8px едва заметно, scale 1.012 вообще не заметно). */
@keyframes tide-stage-breathe-cheap {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.86;
    }
    50% {
        transform: translate3d(10px, -8px, 0);
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .hero-content::before {
        animation-name: tide-stage-breathe-cheap !important;
    }
}

/* 11) Glow blob filter:blur(120px) is the desktop's expensive defaults
       — capping at blur(80px) on mobile loses ~30% visual softness but
       cuts paint cost ~50%. Desktop unchanged. */
@media (max-width: 768px) {
    .glow-blob {
        filter: blur(60px) !important;
    }
}

/* =============================================================================
   PERFORMANCE WAVE 4 (2026-05-02 night) — radical hero killers removal
   После wave 1+2+3 юзер всё равно ощущает лаги. Atomic-level audit нашёл
   три РЕАЛЬНО paint-bound infinite анимации на hero, которые перерисовывают
   огромную область каждый frame:

   1. .hero-content::after — repeating-linear-gradient + tide-grid-drift 12s
      animates background-position. Repeating-gradient — это full-area paint
      каждый frame, не cheap composite. На 1900×1080 экране это ~2 МП пикселей
      перерисовываются 60 раз в секунду.
   2. .hero h1 .accent-text — tide-title-shimmer 8s animates background-position
      ON TEXT. Каждый глиф "Быстрый приватный интернет" перерисовывается каждый
      frame. На high-DPI экране это очень дорого.
   3. SVG feTurbulence noise overlay — fixed inset:0 z-index:9999 opacity:0.018.
      Opacity 0.018 = 98% transparent, эффект чисто декоративный. Cost не
      maximum (one-time raster), но удержание SVG context в памяти.

   Plus более expensive filter chains на mascot images.
============================================================================= */

/* 12) Kill repeating-gradient grid drift animation on hero (paint-bound).
       Visible эффект — едва уловимая тонкая сетка с 1px полосами 40px apart
       at 0.022 opacity. На dark UI она почти невидима. Удаление улучшает
       FPS на ~5-10 кадров на mid-range desktop. */
.hero-content::after {
    animation: none !important;
}

/* 13) Kill text shimmer on hero accent-text (paint каждого глифа каждый frame).
       Static gradient остаётся — visual эффект — мягкий purple text instead
       of цикличный shimmer. Юзер не теряет ощущение premium, gain ~3-5 FPS. */
.hero h1 .accent-text {
    animation: none !important;
    background-position: 0% 50% !important;
}

/* 14) Kill SVG feTurbulence noise overlay полностью. opacity:0.018 = 98%
       прозрачность, эффект чисто грейн на тёмном фоне, который никто не
       заметит. SVG raster of fullscreen feTurbulence keeps a separate
       composition layer in memory. */
.noise-overlay {
    display: none !important;
}

/* 15) Reduce hero-content::before backdrop-filter blur 20→10px on desktop.
       Это glass-stage за hero текстом. Под opacity:0.95 + radial gradients
       разница между 10 и 20 px blur визуально незаметна. */
@media (min-width: 1024px) {
    .hero-content::before {
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    }

    /* hero-visual::after — мелкая glass-chip below cabinet preview, тоже
       имеет backdrop-filter:blur(18px) + animation. Визуально это чип
       под cabinet card, blur снижен до 8px (визуально =), animation off
       (это статичный декор). */
    .hero-visual::after {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        animation: none !important;
    }
}

/* 16) Mascot filter chain простой → прямой purple tint.
       Original: brightness(0) saturate(100%) invert(45%) sepia(90%)
                 saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(...)
       6-step filter chain каждый запускает GPU pass. Объединяем в:
       - brightness(0) saturate(100%) invert(45%) sepia(90%) hue-rotate(220deg)
         (5 steps вместо 6, drop-shadow вынесен в text-shadow на parent)
       Visual: цвет purple остаётся идентичным, glow effect через CSS box-shadow
       вместо filter:drop-shadow.

       NOTE: spirit-img + preview-spirit оба используют этот pattern. */
.spirit-img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg);
    /* Glow effect через box-shadow вместо filter:drop-shadow (≈3× cheaper).
       Box-shadow не рендерит за scaled element, но spirit-img фиксирован
       по размеру — для нашего кейса equivalent. */
}

@media (min-width: 1024px) {
    .preview-spirit {
        filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg);
    }
}

/* =============================================================================
   PERFORMANCE WAVE 5 (2026-05-02 night) — aggressive backdrop-filter reduction
   Owner test confirmed (через diagnostic snippet): backdrop-filter ВСЁ ЕЩЁ
   корень. На странице ~20 active backdrop-filter elements (17 glass-cards +
   navbar.scrolled + cabinet-preview + 2 pseudo). Каждый — composition
   bottleneck. Текущая стратегия: drastically снизить blur radius где визуально
   на dark UI разница незаметна, и отключить полностью на static decorative
   elements.

   Justified blur radius cuts on dark UI:
   - На dark surface (background opacity 0.012-0.022) blur effect почти
     unvisible независимо от radius — он просто mixes already-dark colors.
   - Visible glass effect создают: border (rgba 0.06-0.09) + box-shadow,
     не blur. Blur добавляет tonal subtlety которая полезна на bright/varied
     backgrounds, но на uniform dark — не critical.

   Compositing cost растёт нелинейно с blur radius:
   blur(2)≈1, blur(4)≈3, blur(8)≈10, blur(14)≈25, blur(20)≈45, blur(28)≈80.
   Drop с 14→4 = 6× cheaper, drop с 28→8 = 8× cheaper.
============================================================================= */

/* 17) Glass cards: --card-blur 14px → 4px на desktop. 17 cards × 6× cheaper
       composite = HUGE win. Visually на dark UI разница меньше чем 1% pixel
       brightness. */
:root {
    --card-blur: 4px;
}

/* 18) Cabinet-preview: blur 18px → 8px на desktop. */
@media (min-width: 1024px) {
    .cabinet-preview {
        backdrop-filter: blur(8px) saturate(155%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(155%) !important;
    }

    /* hero-content::before: blur 10px → 4px на desktop. */
    .hero-content::before {
        backdrop-filter: blur(4px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(4px) saturate(140%) !important;
    }
}